@netless/app-slide 0.0.55 → 0.0.56

package/dist/main.es.js

@@ -30399,7 +30399,7 @@ void main() {
             if (n2 && !n2.applied) {
               if (!(n2.triggerTime <= this.timestamp))
                 break;
-              n2.fn(), n2.applied = true, t5 = this.callbackList.length;
+              n2.running = true, n2.fn(), n2.applied = true, t5 = this.callbackList.length;
             }
           }
         }
@@ -30407,11 +30407,11 @@ void main() {
     }
     setTimeout(t3, e3) {
       const n2 = iM(), i2 = this.timestamp + Math.max(e3 || 16, 16);
-      return this.callbackList.push({ fn: t3, triggerTime: i2, id: n2, applied: false }), this.callbackList.sort((t4, e4) => t4.triggerTime - e4.triggerTime), n2;
+      return this.callbackList.push({ fn: t3, triggerTime: i2, id: n2, applied: false, running: false }), this.callbackList.sort((t4, e4) => t4.triggerTime - e4.triggerTime), n2;
     }
     clearTimeout(t3) {
       const e3 = this.callbackList.findIndex((e4) => e4.id === t3);
-      e3 >= 0 && this.callbackList.splice(e3, 1);
+      e3 >= 0 && !this.callbackList[e3].running && this.callbackList.splice(e3, 1);
     }
     delay(t3) {
       return new Promise((e3) => {
@@ -30708,6 +30708,9 @@ void main() {
     constructor(t3) {
       this.eventHub = t3, this.targets = Object.create(null);
     }
+    getTargets() {
+      return Object.keys(this.targets).map((t3) => this.targets[t3]);
+    }
     addTarget(t3, e3) {
       this.targets[t3] = e3;
     }
@@ -30717,7 +30720,7 @@ void main() {
     getTarget(t3, e3, n2 = { type: "el", index: 0, id: "" }) {
       var i2, r3;
       let o3 = this.targets[t3.id];
-      return t3.type !== "shape" ? o3 : (t3.type === "shape" && t3.txEl && (o3 = (i2 = o3 == null ? void 0 : o3.getTextElement(t3.txEl.type, t3.txEl.range)) !== null && i2 !== void 0 ? i2 : null), t3.type === "shape" && t3.bg && n2.index === 0 && (e3 = false, o3 = (r3 = o3 == null ? void 0 : o3.getBgElement()) !== null && r3 !== void 0 ? r3 : null, this.eventHub.emit("IterateTimeNodeEnd", n2.id)), e3 && o3 ? o3.getIterateEntry(n2.type, n2.index, n2.id) : o3);
+      return t3.type !== "shape" ? o3 : (t3.type === "shape" && t3.txEl && (o3 = (i2 = o3 == null ? void 0 : o3.getTextElement(t3.txEl.type, t3.txEl.range)) !== null && i2 !== void 0 ? i2 : null), t3.type === "shape" && t3.bg && n2.index === 0 && (e3 = false, o3 = (r3 = o3 == null ? void 0 : o3.getBgElement()) !== null && r3 !== void 0 ? r3 : null, this.eventHub.emit("IterateTimeNodeEnd", n2.id)), e3 && o3 ? o3.getIterateEntry(n2.type, n2.index, n2.id) : (o3 || this.eventHub.emit("IterateTimeNodeEnd", n2.id), o3));
     }
     clearTargets() {
       this.targets = Object.create(null);
@@ -30841,10 +30844,28 @@ void main() {
   class SM {
     constructor(t3, e3, n2) {
       var i2, r3, o3, s3, a2, l2;
-      this.scaleExt = { x: 1, y: 1 }, this.scaleOrigin = { x: 1, y: 1 }, this.designScale = { x: 1, y: 1 }, this.bound = new d_(0, 0, 1, 1), this.pptX = 0, this.pptY = 0, this.presetSubType = 0, this.designWidth = 0, this.designHeight = 0, this.designX = 0, this.designY = 0, this.hasPreset = false, this.container = new ty(), this.ctx = e3, this.style = new wM(this.container, t3.hardHidden), this.designGlobalPosition = { x: n2.x + ((r3 = (i2 = t3.position) === null || i2 === void 0 ? void 0 : i2.x) !== null && r3 !== void 0 ? r3 : 0), y: n2.y + ((s3 = (o3 = t3.position) === null || o3 === void 0 ? void 0 : o3.y) !== null && s3 !== void 0 ? s3 : 0) }, (t3.hlinkClick || t3.hlinkHover) && (this.hyperlink = new TM(this.container, this.ctx), t3.hlinkHover && ((a2 = this.hyperlink) === null || a2 === void 0 || a2.addAction(t3.hlinkHover, "hover")), t3.hlinkClick && ((l2 = this.hyperlink) === null || l2 === void 0 || l2.addAction(t3.hlinkClick, "click"))), this.ctx.clock.waitUntil(() => !!this.container.width, 3e3).then(() => {
-        this.designWidth = this.designWidth || this.container.width;
-      }), this.ctx.clock.waitUntil(() => !!this.container.height, 3e3).then(() => {
-        this.designHeight = this.designHeight || this.container.height;
+      this.scaleExt = { x: 1, y: 1 }, this.scaleOrigin = { x: 1, y: 1 }, this.designScale = { x: 1, y: 1 }, this.bound = new d_(0, 0, 1, 1), this.pptX = 0, this.pptY = 0, this.presetSubType = 0, this.designWidth = 0, this.designHeight = 0, this.designX = 0, this.designY = 0, this.hasPreset = false, this.container = new ty(), this.ctx = e3, this.style = new wM(this.container, t3.hardHidden), this.designGlobalPosition = { x: n2.x + ((r3 = (i2 = t3.position) === null || i2 === void 0 ? void 0 : i2.x) !== null && r3 !== void 0 ? r3 : 0), y: n2.y + ((s3 = (o3 = t3.position) === null || o3 === void 0 ? void 0 : o3.y) !== null && s3 !== void 0 ? s3 : 0) }, (t3.hlinkClick || t3.hlinkHover) && (this.hyperlink = new TM(this.container, this.ctx), t3.hlinkHover && ((a2 = this.hyperlink) === null || a2 === void 0 || a2.addAction(t3.hlinkHover, "hover")), t3.hlinkClick && ((l2 = this.hyperlink) === null || l2 === void 0 || l2.addAction(t3.hlinkClick, "click"))), this.ctx.clock.waitUntil(() => {
+        try {
+          return !!this.container.width;
+        } catch (t4) {
+          return false;
+        }
+      }, 3e3).then(() => {
+        try {
+          this.designWidth = this.designWidth || this.container.width;
+        } catch (t4) {
+        }
+      }), this.ctx.clock.waitUntil(() => {
+        try {
+          return !!this.container.height;
+        } catch (t4) {
+          return false;
+        }
+      }, 3e3).then(() => {
+        try {
+          this.designHeight = this.designHeight || this.container.height;
+        } catch (t4) {
+        }
       });
     }
     updateScale() {
@@ -31038,6 +31059,8 @@ void main() {
     }
     clearOnSlideChange() {
     }
+    initOnReuse() {
+    }
     getTextElement() {
       return null;
     }
@@ -31066,28 +31089,33 @@ void main() {
     }
   }
   class UM {
-    constructor(t3, e3, n2, i2, r3, o3, s3, a2, l2) {
-      this.ctx = t3, this.type = e3, this.lineWidth = n2, this.width = i2, this.fillColor = r3, this.renderContainer = new ty(), this.ghcTextureId = `${o3}-text-p${s3}-l${a2}-u${l2}-underLine`;
+    constructor(t3, e3, n2, i2, r3, o3, s3, a2, l2, u2, h2) {
+      this.ctx = t3, this.type = e3, this.lineWidth = n2, this.width = i2, this.height = r3, this.fillColor = o3, this.isHorz = s3, this.renderContainer = new ty(), this.ghcTextureId = `${a2}-text-p${l2}-l${u2}-u${h2}-underLine`;
     }
     createPaths() {
       if (this.type === "ww")
         return null;
       {
-        const t3 = `M 0,0 L ${9525 * this.width},0`;
-        return { paths: [{ id: iM(), path: t3, fill: "norm", hasStroke: true, scale: { x: 1, y: 1 }, hash: uM()(t3) }], width: this.width, height: this.lineWidth };
+        console.log("line width", this.lineWidth);
+        let t3 = `M 0,0 L ${9525 * this.width},0`, [e3, n2] = [this.width, this.lineWidth];
+        return this.isHorz || (t3 = "M 0,0 L 0," + 9525 * this.height, [e3, n2] = [this.lineWidth, this.height]), { paths: [{ id: iM(), path: t3, fill: "norm", hasStroke: true, scale: { x: 1, y: 1 }, hash: uM()(t3) }], width: e3, height: n2 };
       }
     }
+    getLineStyle() {
+      const t3 = { width: this.lineWidth };
+      return this.type === "dotted" && (t3.dash = "" + this.lineWidth), t3;
+    }
     preRender() {
       const t3 = this.createPaths();
       if (t3) {
         const { paths: e3, width: n2, height: i2 } = t3, r3 = e3.reduce((t4, e4) => t4 + e4.hash, "");
-        this.ctx.graphicsTexture.addGraphics(this.ghcTextureId, e3, r3, { x: 0, y: 0 }, n2, i2, { width: this.lineWidth }, this.ctx.objectPoolGroup, false, null, this.fillColor);
+        this.ctx.graphicsTexture.addGraphics(this.ghcTextureId, e3, r3, { x: 0, y: 0 }, n2, i2, this.getLineStyle(), this.ctx.objectPoolGroup, false, null, this.fillColor);
       }
     }
     render() {
       if (this.ghcTextureId) {
         const t3 = this.ctx.graphicsTexture.getGraphicsData(this.ghcTextureId);
-        t3 && (this.sprite = new OT(), this.sprite.texture = t3.texture, this.sprite.pivot.x = t3.pivot.x, this.sprite.texture = t3.texture);
+        t3 && (this.sprite = new OT(), this.sprite.texture = t3.texture, this.sprite.pivot.x = t3.pivot.x);
       }
     }
     destroy() {
@@ -31477,7 +31505,7 @@ void main(void){
 `), { arg: e3 });
     }
   }
-  const cA = [aA], dA = { clrChange: "\nvec4 transform(vec4 texColor, vec4 arg1, vec4 arg2) {\n    float epsilon = 0.001;\n    vec3 colorDiff = arg1.rgb - (texColor.rgb / max(texColor.a, 0.0000000001));\n    float colorDistance = length(colorDiff);\n    if (colorDistance < epsilon) {\n        arg2.rgb *= arg2.a;\n        return arg2;\n    } else {\n        return texColor;\n    }\n}\n", changeBulletColor: "\nvec4 transform(vec4 texColor, vec4 arg1, vec4 arg2) {\n    float epsilon = 0.4;\n    vec3 colorDiff = arg1.rgb - (texColor.rgb / max(texColor.a, 0.0000000001));\n    float colorDistance = length(colorDiff);\n    if (colorDistance < epsilon) {\n        arg2.rgb *= ceil(texColor.a);\n        return arg2;\n    } else {\n        return texColor;\n    }\n}\n" };
+  const cA = [aA], dA = { clrChange: "\nvec4 transform(vec4 texColor, vec4 arg1, vec4 arg2) {\n    float epsilon = 0.001;\n    vec3 colorDiff = arg1.rgb - (texColor.rgb / max(texColor.a, 0.0000000001));\n    float colorDistance = length(colorDiff);\n    if (colorDistance < epsilon) {\n        arg2.rgb *= arg2.a;\n        return arg2;\n    } else {\n        return texColor;\n    }\n}\n", changeBulletColor: "\nvec4 transform(vec4 texColor, vec4 arg1, vec4 arg2) {\n    if (texColor.a == 0.0) {\n        return texColor;\n    } else {\n        return arg2;\n    }\n}\n" };
   class pA extends Gx {
     constructor(t3, e3, n2) {
       var i2;
@@ -31523,10 +31551,10 @@ void main(void){
   }
   class vA {
     constructor(t3, e3, n2, i2, r3) {
-      this.ctx = t3, this.fillStyle = e3, this.width = n2, this.height = i2, this.config = r3, this.clonedObjects = [], this._displayObject = null, this._displayObject = this.createDisplayObject();
+      this.ctx = t3, this.fillStyle = e3, this.width = n2, this.height = i2, this.config = r3, this.clonedObjects = [], this._displayObject = null;
     }
     get displayObject() {
-      return this._displayObject;
+      return this._displayObject || (this._displayObject = this.createDisplayObject()), this._displayObject;
     }
     set displayObject(t3) {
       this._displayObject && this._displayObject.destroy({ children: true, texture: true }), this._displayObject = t3;
@@ -31621,8 +31649,12 @@ void main(void){
     constructor(t3, e3, n2) {
       var i2;
       super(t3, e3, n2), this.textureContainer = new ty(), this.underline = null, this.cacheSprite = new OT();
-      const { shapeId: r3, paragraphIndex: o3, lineIndex: s3, unitIndex: a2, lineHeight: l2, width: u2, underLine: h2, fill: c2 } = t3, d2 = ((i2 = c2 == null ? void 0 : c2.fill) === null || i2 === void 0 ? void 0 : i2.fillType) === "solidFill" ? c2.fill.color : null;
-      h2 && (this.underline = new UM(e3, h2.type, l2 / 16, u2, d2, r3, o3, s3, a2)), this.textGraphics = this.createTextGraphics(), this.textFill = this.createTextFill(), this.strokeGraphics = this.createStrokeGraphics(), this.strokeFill = this.createStrokeFill();
+      const { shapeId: r3, paragraphIndex: o3, lineIndex: s3, unitIndex: a2, lineHeight: l2, width: u2, underLine: h2, fill: c2, height: d2, isHorz: p2, lineWidth: f2 } = t3, m2 = ((i2 = c2 == null ? void 0 : c2.fill) === null || i2 === void 0 ? void 0 : i2.fillType) === "solidFill" ? c2.fill.color : null;
+      if (h2) {
+        const t4 = p2 ? l2 / 16 : f2 / 16;
+        this.underline = new UM(e3, h2.type, t4, u2, d2, m2, p2, r3, o3, s3, a2);
+      }
+      this.textGraphics = this.createTextGraphics(), this.textFill = this.createTextFill(), this.strokeGraphics = this.createStrokeGraphics(), this.strokeFill = this.createStrokeFill();
     }
     createStrokeFill() {
       const { stroke: t3, lineWidth: e3, lineHeight: n2 } = this.json;
@@ -31637,8 +31669,12 @@ void main(void){
       return t3 ? new vA(this.ctx, e3 == null ? void 0 : e3.fill, n2, Math.max(r3, i2), { useFilter: false, useSlideBackgroundFill: false }) : new vA(this.ctx, e3 == null ? void 0 : e3.fill, r3, i2, { useFilter: false, useSlideBackgroundFill: false });
     }
     createTextGraphics() {
-      const { fill: t3, content: e3 } = this.json, n2 = (t3 == null ? void 0 : t3.key) ? { fillType: "blipFill", src: t3.key, filters: [{ type: "changeBulletColor", args: ["#000000", "#FFA500"] }] } : void 0;
-      return new vA(this.ctx, n2, (t3 == null ? void 0 : t3.width) || 0, (t3 == null ? void 0 : t3.height) || 0, { useFilter: e3 === "\u25FE", useSlideBackgroundFill: false });
+      var t3;
+      const { fill: e3, content: n2 } = this.json;
+      let i2 = "#000000";
+      ((t3 = e3 == null ? void 0 : e3.fill) === null || t3 === void 0 ? void 0 : t3.fillType) === "solidFill" && (i2 = e3.fill.color);
+      const r3 = (e3 == null ? void 0 : e3.key) ? { fillType: "blipFill", src: e3.key, filters: [{ type: "changeBulletColor", args: ["#000000", i2] }] } : void 0;
+      return new vA(this.ctx, r3, (e3 == null ? void 0 : e3.width) || 0, (e3 == null ? void 0 : e3.height) || 0, { useFilter: n2 === "\u25FE", useSlideBackgroundFill: false });
     }
     getIterateEntry() {
       return null;
@@ -31670,7 +31706,7 @@ void main(void){
       }
       if (this.textGraphics.displayObject) {
         const e4 = this.textGraphics.displayObject;
-        if (e4.scale.x = 0.5, e4.scale.y = 0.5, r3 ? e4.position.y = h2 > 0 ? h2 : 0 : e4.position.x = u2, f2) {
+        if (e4.scale.x = 0.5, e4.scale.y = 0.5, r3 && (e4.position.y = h2 > 0 ? h2 : 0), f2) {
           const n3 = this.textFill.displayObject;
           if (n3)
             n3.mask = e4, n3.addChild(e4), n3.position.x = -u2, e4.position.x += u2, t3 = true, this.textureContainer.addChild(n3);
@@ -31696,7 +31732,7 @@ void main(void){
           r3 ? e4.position.y = h2 > 0 ? h2 : 0 : e4.position.x = u2, this.textureContainer.addChild(e4);
       }
       if (this.underline && (this.underline.render(), this.underline.sprite)) {
-        this.underline.sprite.position.y = o3 ? o3 - n2 / 16 : i2, this.underline.sprite.position.x = 0;
+        r3 ? (this.underline.sprite.position.y = o3 ? o3 - n2 / 16 : i2, this.underline.sprite.position.x = 0) : (this.underline.sprite.position.x = 0, this.underline.sprite.position.y = 0), document.body.appendChild(this.ctx.renderer.plugins.extract.image(this.underline.sprite));
         const t4 = this.textFill.getClonedDisplayObject();
         t4 ? (t4.mask = this.underline.sprite, t4.addChild(this.underline.sprite), this.textureContainer.addChild(t4)) : this.textureContainer.addChild(this.underline.sprite);
       }
@@ -32015,6 +32051,11 @@ void main(void){
       }
       if (n2.join("") !== "MLLLC")
         return false;
+      for (let t4 = 0; t4 < 3; t4++) {
+        const e4 = i2[t4], n3 = i2[t4 + 1];
+        if (e4.x !== n3.x && e4.y !== n3.y)
+          return false;
+      }
       const r3 = i2.slice(0, 4).reduce((t4, e4) => t4 + e4.x, 0) / 4, o3 = i2.slice(0, 4).reduce((t4, e4) => t4 + e4.y, 0) / 4;
       if (Number.isNaN(r3) || Number.isNaN(o3))
         return false;
@@ -32089,7 +32130,7 @@ void main(void){
         });
       }, this.json = t3, this.json.fillStyle && this.json.fillStyle.fillType === "groupFill" && i2 && (this.json.fillStyle = i2), this.id = t3.id;
       const { fillStyle: o3, lineStyle: s3 } = this.json;
-      this.container.name = t3.id, this.renderContainer.name = t3.id + "-render-container", this.backgroundFill = this.createBackgroundFill(), this.backgroundGraphics = this.createBackgroundGraphics(), this.strokeFill = this.createStrokeFill(), this.strokeGraphics = this.createStrokeGraphics(), this.ctx.timingTargets.addTarget(this.id, this), (o3 == null ? void 0 : o3.fillType) === "solidFill" && (this.fillColorFilter.currentColor = o3.color, this.fillColorFilter.designColor = o3.color), ((r3 = s3 == null ? void 0 : s3.fill) === null || r3 === void 0 ? void 0 : r3.fillType) === "solidFill" && (this.strokeColorFilter.currentColor = s3.fill.color, this.strokeColorFilter.designColor = s3.fill.color), this.updateTransform(this.json), t3.textBody && (this.text = new EA(t3.textBody, this.ctx, t3.textBody.iterateType, { x: this.designGlobalPosition.x, y: this.designGlobalPosition.y })), this.container.hitArea = new g_(1, 1, this.json.width, this.json.height);
+      this.container.name = t3.id, this.renderContainer.name = t3.id + "-render-container", this.generateArrowList(), this.backgroundFill = this.createBackgroundFill(), this.backgroundGraphics = this.createBackgroundGraphics(), this.strokeFill = this.createStrokeFill(), this.strokeGraphics = this.createStrokeGraphics(), this.ctx.timingTargets.addTarget(this.id, this), (o3 == null ? void 0 : o3.fillType) === "solidFill" && (this.fillColorFilter.currentColor = o3.color, this.fillColorFilter.designColor = o3.color), ((r3 = s3 == null ? void 0 : s3.fill) === null || r3 === void 0 ? void 0 : r3.fillType) === "solidFill" && (this.strokeColorFilter.currentColor = s3.fill.color, this.strokeColorFilter.designColor = s3.fill.color), this.updateTransform(this.json), t3.textBody && (this.text = new EA(t3.textBody, this.ctx, t3.textBody.iterateType, { x: this.designGlobalPosition.x, y: this.designGlobalPosition.y })), this.container.hitArea = new g_(1, 1, this.json.width, this.json.height);
     }
     get interactiveContainer() {
       return this.renderContainer;
@@ -32119,7 +32160,7 @@ void main(void){
       return this;
     }
     getIterateEntry(t3, e3, n2) {
-      return t3 === "el" || e3 === 0 ? this : this.text ? this.text.getIterateEntry(e3 - 1, n2) || null : (this.ctx.eventHub.emit("IterateTimeNodeEnd", n2), null);
+      return t3 === "el" ? e3 === 0 ? this : (this.ctx.eventHub.emit("IterateTimeNodeEnd", n2), null) : this.text ? this.text.getIterateEntry(e3 - 1, n2) || null : (this.ctx.eventHub.emit("IterateTimeNodeEnd", n2), null);
     }
     createStrokeGraphics() {
       var t3, e3, n2, i2;
@@ -32127,8 +32168,8 @@ void main(void){
       return s3 && ((e3 = s3.fill) === null || e3 === void 0 ? void 0 : e3.fillType) !== "noFill" ? new OA(r3 + "-path-graphics", this.ctx, (n2 = o3 == null ? void 0 : o3.paths) !== null && n2 !== void 0 ? n2 : [], (i2 = o3 == null ? void 0 : o3.hash) !== null && i2 !== void 0 ? i2 : "", u2 || { x: 0, y: 0 }, h2, c2, s3, false, null, d2) : null;
     }
     createStrokeFill() {
-      const { geometry: t3, lineStyle: e3, width: n2, height: i2 } = this.json, r3 = (t3 == null ? void 0 : t3.lineTransform) || NA, o3 = Object(l.isNumber)(e3 == null ? void 0 : e3.width) ? e3.width : 1;
-      return new vA(this.ctx, e3 == null ? void 0 : e3.fill, (r3.width || n2) + o3, (r3.height || i2) + o3, { useFilter: false, useSlideBackgroundFill: false });
+      const [t3, e3] = this.calculateFillObjectOffset(), { geometry: n2, lineStyle: i2, width: r3, height: o3 } = this.json, s3 = (n2 == null ? void 0 : n2.lineTransform) || NA, a2 = Object(l.isNumber)(i2 == null ? void 0 : i2.width) ? i2.width : 1;
+      return new vA(this.ctx, i2 == null ? void 0 : i2.fill, (s3.width || r3) + a2 + t3, Math.max((s3.height || o3) + a2, e3), { useFilter: false, useSlideBackgroundFill: false });
     }
     createBackgroundGraphics() {
       var t3;
@@ -32141,14 +32182,14 @@ void main(void){
       return new vA(this.ctx, n2, (a2.width || i2) + ((t3 = o3 == null ? void 0 : o3.width) !== null && t3 !== void 0 ? t3 : 0), (a2.height || r3) + ((e3 = o3 == null ? void 0 : o3.width) !== null && e3 !== void 0 ? e3 : 0), { useFilter: false, useSlideBackgroundFill: this.json.useBgFill });
     }
     createBackground() {
-      var t3, e3, n2, i2, r3, o3, s3;
-      const { pivot: a2, width: l2, height: u2 } = ((t3 = this.json.geometry) === null || t3 === void 0 ? void 0 : t3.fillTransform) || NA, { displayObject: h2 } = this.backgroundFill;
-      h2 ? (this.json.useBgFill && this.backgroundGraphics ? (this.needCacheAsBitMap = true, h2.mask = this.backgroundGraphics.displayObject, h2.pivot.x = ((n2 = this.json.position) === null || n2 === void 0 ? void 0 : n2.x) || 0, h2.pivot.y = ((i2 = this.json.position) === null || i2 === void 0 ? void 0 : i2.y) || 0) : ((r3 = this.json.fillStyle) === null || r3 === void 0 ? void 0 : r3.fillType) === "gifFill" ? (h2.height = u2 || this.designHeight, h2.width = l2 || this.designWidth, h2 instanceof jE && h2.play(), ((o3 = this.backgroundGraphics) === null || o3 === void 0 ? void 0 : o3.isNeedMask(h2.width, h2.height)) && (h2.mask = this.backgroundGraphics.displayObject, this.backgroundGraphics.displayObject && h2.addChild(this.backgroundGraphics.displayObject))) : ((s3 = this.backgroundGraphics) === null || s3 === void 0 ? void 0 : s3.isNeedMask(h2.width, h2.height)) && (this.needCacheAsBitMap = true, h2.mask = this.backgroundGraphics.displayObject, this.backgroundGraphics.displayObject && h2.addChild(this.backgroundGraphics.displayObject)), h2.x = a2.x, h2.y = a2.y, this.container.addChild(h2)) : this.backgroundFill.hasFill && ((e3 = this.backgroundGraphics) === null || e3 === void 0 ? void 0 : e3.displayObject) && this.container.addChild(this.backgroundGraphics.displayObject);
+      var t3, e3, n2, i2, r3, o3, s3, a2;
+      const { pivot: l2, width: u2, height: h2 } = ((t3 = this.json.geometry) === null || t3 === void 0 ? void 0 : t3.fillTransform) || NA, { displayObject: c2 } = this.backgroundFill;
+      c2 ? (this.json.useBgFill && ((n2 = this.backgroundGraphics) === null || n2 === void 0 ? void 0 : n2.displayObject) ? (this.needCacheAsBitMap = true, c2.mask = this.backgroundGraphics.displayObject, c2.pivot.x = ((i2 = this.json.position) === null || i2 === void 0 ? void 0 : i2.x) || 0, c2.pivot.y = ((r3 = this.json.position) === null || r3 === void 0 ? void 0 : r3.y) || 0, this.container.addChild(this.backgroundGraphics.displayObject)) : ((o3 = this.json.fillStyle) === null || o3 === void 0 ? void 0 : o3.fillType) === "gifFill" ? (c2.height = h2 || this.designHeight, c2.width = u2 || this.designWidth, c2 instanceof jE && c2.play(), ((s3 = this.backgroundGraphics) === null || s3 === void 0 ? void 0 : s3.isNeedMask(c2.width, c2.height)) && (c2.mask = this.backgroundGraphics.displayObject, this.backgroundGraphics.displayObject && this.container.addChild(this.backgroundGraphics.displayObject))) : ((a2 = this.backgroundGraphics) === null || a2 === void 0 ? void 0 : a2.isNeedMask(c2.width, c2.height)) && (this.needCacheAsBitMap = true, c2.mask = this.backgroundGraphics.displayObject, this.backgroundGraphics.displayObject && this.container.addChild(this.backgroundGraphics.displayObject)), c2.x = l2.x, c2.y = l2.y, this.container.addChild(c2)) : this.backgroundFill.hasFill && ((e3 = this.backgroundGraphics) === null || e3 === void 0 ? void 0 : e3.displayObject) && this.container.addChild(this.backgroundGraphics.displayObject);
     }
     createPathFill() {
       var t3, e3, n2;
-      const { displayObject: i2 } = this.strokeFill, r3 = (t3 = this.strokeGraphics) === null || t3 === void 0 ? void 0 : t3.displayObject;
-      i2 ? (((e3 = this.strokeGraphics) === null || e3 === void 0 ? void 0 : e3.isNeedMask(i2.width, i2.height)) && r3 && (this.needCacheAsBitMap = true, i2.pivot.x = r3.pivot.x, i2.pivot.y = r3.pivot.y, r3.pivot.x = 0, r3.pivot.y = 0, i2.mask = r3, i2.addChild(r3)), this.container.addChild(i2)) : this.strokeFill.hasFill && ((n2 = this.strokeGraphics) === null || n2 === void 0 ? void 0 : n2.displayObject) && this.container.addChild(this.strokeGraphics.displayObject);
+      const { displayObject: i2 } = this.strokeFill, r3 = (t3 = this.strokeGraphics) === null || t3 === void 0 ? void 0 : t3.displayObject, [o3, s3] = this.calculateFillObjectOffset();
+      i2 ? (((e3 = this.strokeGraphics) === null || e3 === void 0 ? void 0 : e3.isNeedMask(i2.width, i2.height)) && r3 && (this.needCacheAsBitMap = true, i2.pivot.x = r3.pivot.x, i2.pivot.y = r3.pivot.y, r3.pivot.x = 0, r3.pivot.y = 0, i2.mask = r3, i2.addChild(r3), i2.position.x = -o3 / 2, i2.position.y = -s3 / 2, r3.position.x = o3 / 2, r3.position.y = s3 / 2), this.container.addChild(i2)) : this.strokeFill.hasFill && ((n2 = this.strokeGraphics) === null || n2 === void 0 ? void 0 : n2.displayObject) && this.container.addChild(this.strokeGraphics.displayObject);
     }
     createFilledPathMask() {
       var t3, e3, n2;
@@ -32164,27 +32205,38 @@ void main(void){
       }
     }
     createArrow() {
-      this.arrowList.forEach((t3) => {
-        const e3 = this.ctx.graphicsTexture.getGraphicsData(t3.graphicsId);
-        if (e3) {
-          const n2 = new ty(), { texture: i2, pivot: r3 } = e3, o3 = new OT(i2);
-          o3.pivot.x = r3.x, o3.pivot.y = r3.y, n2.addChild(o3), n2.position.x = t3.position.x, n2.position.y = t3.position.y, n2.pivot.x = t3.pivot.x, n2.pivot.y = t3.pivot.y, n2.rotation = t3.rotate / 180 * Math.PI, this.container.addChild(n2);
-        }
+      if (!this.arrowList.length)
+        return;
+      const t3 = new ty(), e3 = this.strokeFill.getClonedDisplayObject(), [n2, i2] = this.calculateFillObjectOffset();
+      this.arrowList.forEach((e4) => {
+        const n3 = this.ctx.graphicsTexture.getGraphicsData(e4.graphicsId);
+        if (n3) {
+          const { texture: i3 } = n3, r4 = new OT(i3);
+          r4.pivot.x = e4.pivot.x, r4.pivot.y = e4.pivot.y, r4.position.x = e4.position.x + e4.pivot.x, r4.position.y = e4.position.y + e4.pivot.y, r4.rotation = e4.rotate / 180 * Math.PI, t3.addChild(r4);
+        }
+      }), this.arrowRenderTexture = Hy.create({ width: t3.width, height: t3.height, resolution: 1 }), this.ctx.renderer.render(t3, { renderTexture: this.arrowRenderTexture });
+      const r3 = new OT();
+      r3.texture = this.arrowRenderTexture, e3 && (e3.mask = r3, e3.position.x = -n2 / 2, e3.position.y = -i2 / 2, r3.position.x = -n2 / 2, r3.position.y = -i2 / 2, this.container.addChild(e3), this.container.addChild(r3));
+    }
+    generateArrowList() {
+      var t3, e3;
+      const { lineArrowList: n2, lineStyle: i2, id: r3 } = this.json, o3 = ((t3 = i2 == null ? void 0 : i2.fill) === null || t3 === void 0 ? void 0 : t3.fillType) === "solidFill" ? i2.fill.color : null;
+      (e3 = n2 || []) === null || e3 === void 0 || e3.forEach((t4, e4) => {
+        var n3, s3;
+        const a2 = new IA(Object.assign(Object.assign({}, t4), { fillStyle: i2 == null ? void 0 : i2.fill, lineWidth: (n3 = i2 == null ? void 0 : i2.width) !== null && n3 !== void 0 ? n3 : 0 }));
+        a2.graphicsId = `${r3}-arrow-${e4}-graphics`, a2.textureId = `${r3}-arrow-${e4}-fill`, this.ctx.graphicsTexture.addGraphics(a2.graphicsId, (s3 = a2.paths) !== null && s3 !== void 0 ? s3 : [], a2.hash, { x: 0, y: 0 }, a2.width, a2.height, void 0, this.ctx.objectPoolGroup, true, o3, null), this.arrowList.push(a2);
       });
     }
+    calculateFillObjectOffset() {
+      let [t3, e3] = [0, 0];
+      return this.arrowList.length && (t3 = this.arrowList.reduce((t4, e4) => Math.max(t4, e4.width), 0), e3 = this.arrowList.reduce((t4, e4) => Math.max(t4, e4.height), 0)), [t3, e3];
+    }
     preRender(t3) {
       var e3, n2, i2;
-      const { lineArrowList: r3, lineStyle: o3, id: s3, geometry: a2 } = this.json, { width: l2, height: u2 } = (a2 == null ? void 0 : a2.lineTransform) || NA, h2 = l2 || this.json.width, c2 = u2 || this.json.height, d2 = ((e3 = a2 == null ? void 0 : a2.paths) === null || e3 === void 0 ? void 0 : e3.filter((t4) => t4.fill !== "none" && t4.fill !== "norm")) || [], p2 = ((n2 = o3 == null ? void 0 : o3.fill) === null || n2 === void 0 ? void 0 : n2.fillType) === "solidFill" ? o3.fill.color : null;
+      const { lineStyle: r3, geometry: o3 } = this.json, { width: s3, height: a2 } = (o3 == null ? void 0 : o3.lineTransform) || NA, l2 = s3 || this.json.width, u2 = a2 || this.json.height, h2 = ((e3 = o3 == null ? void 0 : o3.paths) === null || e3 === void 0 ? void 0 : e3.filter((t4) => t4.fill !== "none" && t4.fill !== "norm")) || [], c2 = ((n2 = r3 == null ? void 0 : r3.fill) === null || n2 === void 0 ? void 0 : n2.fillType) === "solidFill" ? r3.fill.color : null;
       t3.addSubMTask(() => LA(this, void 0, void 0, function* () {
-        for (const t4 of d2)
-          this.ctx.graphicsTexture.addGraphics(t4.id, [t4], t4.hash, ((a2 == null ? void 0 : a2.lineTransform) || NA).pivot, h2, c2, o3, this.ctx.objectPoolGroup, true, null, p2);
-      })), t3.addSubMTask(() => LA(this, void 0, void 0, function* () {
-        var t4;
-        (t4 = r3 || []) === null || t4 === void 0 || t4.forEach((t5, e4) => {
-          var n3, i3;
-          const r4 = new IA(Object.assign(Object.assign({}, t5), { fillStyle: o3 == null ? void 0 : o3.fill, lineWidth: (n3 = o3 == null ? void 0 : o3.width) !== null && n3 !== void 0 ? n3 : 0 }));
-          r4.graphicsId = `${s3}-arrow-${e4}-graphics`, r4.textureId = `${s3}-arrow-${e4}-fill`, this.ctx.graphicsTexture.addGraphics(r4.graphicsId, (i3 = r4.paths) !== null && i3 !== void 0 ? i3 : [], r4.hash, r4.pivot || { x: 0, y: 0 }, r4.width, r4.height, void 0, this.ctx.objectPoolGroup, true, p2, null), this.arrowList.push(r4);
-        });
+        for (const t4 of h2)
+          this.ctx.graphicsTexture.addGraphics(t4.id, [t4], t4.hash, ((o3 == null ? void 0 : o3.lineTransform) || NA).pivot, l2, u2, r3, this.ctx.objectPoolGroup, true, null, c2);
       })), (i2 = this.text) === null || i2 === void 0 || i2.createParagraphs(this.json.id, t3);
     }
     subClassRender() {
@@ -32219,7 +32271,7 @@ void main(void){
           }
           this.renderContainer.addChild(this.container);
         }
-        if (this.needCacheAsBitMap && (this.renderContainer.cacheAsBitmap = !!this.json.cacheAsBitMap), this.json.id === "background" && this.ctx.hasBackgroundFillShape) {
+        if (this.needCacheAsBitMap, this.json.id === "background" && this.ctx.hasBackgroundFillShape) {
           const t5 = Hy.create({ width: this.json.width, height: this.json.height, resolution: Math.ceil(this.ctx.renderer.resolution) });
           this.ctx.renderer.render(this.renderContainer, { renderTexture: t5 }), this.ctx.bgTexture = t5;
         }
@@ -32227,9 +32279,11 @@ void main(void){
     }
     clearOnSlideChange() {
     }
+    initOnReuse() {
+    }
     destroy() {
-      var t3, e3, n2;
-      (t3 = this.text) === null || t3 === void 0 || t3.destroy(), this.fillColorFilter.destroy(), this.strokeColorFilter.destroy(), this.backgroundFill.destroy(), (e3 = this.backgroundGraphics) === null || e3 === void 0 || e3.destroy(), this.strokeFill.destroy(), (n2 = this.strokeGraphics) === null || n2 === void 0 || n2.destroy(), this.renderContainer.destroy(), this.arrowList = [];
+      var t3, e3, n2, i2;
+      (t3 = this.text) === null || t3 === void 0 || t3.destroy(), this.fillColorFilter.destroy(), this.strokeColorFilter.destroy(), this.backgroundFill.destroy(), (e3 = this.backgroundGraphics) === null || e3 === void 0 || e3.destroy(), this.strokeFill.destroy(), (n2 = this.strokeGraphics) === null || n2 === void 0 || n2.destroy(), this.renderContainer.destroy(), (i2 = this.arrowRenderTexture) === null || i2 === void 0 || i2.destroy(true), this.arrowList = [];
     }
   }
   var FA = function(t3, e3, n2, i2) {
@@ -32335,8 +32389,8 @@ void main(void){
     }
     setControllerPosition() {
       var t3;
-      const { target: e3 } = this, { stageWidth: n2, stageHeight: i2 } = this.ctx, r3 = e3.getGlobalPosition(), o3 = 1 / Number((t3 = this.container) === null || t3 === void 0 ? void 0 : t3.getAttribute("data-scale"));
-      r3.y = r3.y + this.height - 50, r3.x = Math.max(r3.x, 0), r3.x = Math.min(r3.x, n2 - 300 * o3), r3.y = Math.max(r3.y, 0), r3.y = Math.min(r3.y, i2 - 50), BA(this.mediaController, { height: "50px", borderRadius: "25px", width: "300px", flexDirection: "row", alignItems: "center", position: "absolute", left: r3.x + "px", top: r3.y + "px", display: "none", background: "#fff", zIndex: "2", border: "1px solid #ccc", transform: `scale(${o3})`, transformOrigin: "0 100%" });
+      const { target: e3 } = this, { stageWidth: n2, stageHeight: i2 } = this.ctx, r3 = e3.getGlobalPosition(), o3 = Number((t3 = this.container) === null || t3 === void 0 ? void 0 : t3.getAttribute("data-scale")), s3 = n2 * o3, a2 = 1 / o3 * (300 > s3 ? s3 / 300 : 1);
+      r3.y = r3.y + this.height - 50, r3.x = Math.max(r3.x, 0), r3.x = Math.min(r3.x, n2 - 300 * a2), r3.y = Math.max(r3.y, 0), r3.y = Math.min(r3.y, i2 - 50), BA(this.mediaController, { height: "50px", borderRadius: "25px", width: "300px", flexDirection: "row", alignItems: "center", position: "absolute", left: r3.x + "px", top: r3.y + "px", display: "none", background: "#fff", zIndex: "2", border: "1px solid #ccc", transform: `scale(${a2})`, transformOrigin: "0 100%" });
     }
     createMediaController() {
       this.setControllerPosition(), this.createButton();
@@ -32550,7 +32604,7 @@ void main(void){
   }
   class jA extends DA {
     constructor(t3, e3, n2, i2) {
-      super(Object.assign(Object.assign({}, t3), { type: "Shape", useBgFill: false, textRotateWithShape: true, isPicture: true }), e3, n2, i2), this.cmd = new xM(this), this.media = t3 == null ? void 0 : t3.media, this.picFill = new vA(this.ctx, t3.picFill, t3.width, t3.height, { useFilter: false, useSlideBackgroundFill: false });
+      super(Object.assign(Object.assign({}, t3), { type: "Shape", useBgFill: false, textRotateWithShape: true, isPicture: true }), e3, n2, i2), this.isInteractiveOutside = false, this.cmd = new xM(this), this.media = t3 == null ? void 0 : t3.media, this.picFill = new vA(this.ctx, t3.picFill, t3.width, t3.height, { useFilter: false, useSlideBackgroundFill: false });
     }
     applyCommand(t3, e3) {
       var n2, i2, r3, o3, s3;
@@ -32569,9 +32623,11 @@ void main(void){
       const { displayObject: o3 } = this.picFill;
       if (o3) {
         const s3 = (t3 = this.backgroundGraphics) === null || t3 === void 0 ? void 0 : t3.getClonedDisplayObject();
-        ((e3 = this.backgroundGraphics) === null || e3 === void 0 ? void 0 : e3.isNeedMask(o3.width, o3.height)) && s3 && (o3.mask = s3, this.container.addChild(s3)), o3.width = this.designWidth, o3.height = this.designHeight, o3 instanceof jE && o3.play(), this.container.addChild(o3), ((n2 = this.media) === null || n2 === void 0 ? void 0 : n2.type) === "video" && this.media.src ? (this.mediaPlayer = new GA({ id: this.json.id + "-video", ctx: this.ctx, video: this.media, height: this.designHeight, width: this.designWidth, target: o3, container: this.container, canvasElement: this.ctx.view }), (i2 = this.mediaPlayer) === null || i2 === void 0 || i2.sprite) : ((r3 = this.media) === null || r3 === void 0 ? void 0 : r3.type) === "audio" && this.media.src && (this.mediaPlayer = new zA({ id: this.json.id + "-audio", ctx: this.ctx, audio: this.media, height: this.designHeight, width: this.designWidth, target: o3, canvasElement: this.ctx.view })), this.mediaPlayer && (o3.interactive = true, o3.on("mouseover", () => {
+        ((e3 = this.backgroundGraphics) === null || e3 === void 0 ? void 0 : e3.isNeedMask(o3.width, o3.height)) && s3 && (o3.mask = s3, this.container.addChild(s3)), o3.width = this.designWidth, o3.height = this.designHeight, o3 instanceof jE && this.ctx.slideScopeEventHub.once("slide-render", (t4) => {
+          this.ctx.slideIndex === t4 && o3.play();
+        }), this.container.addChild(o3), ((n2 = this.media) === null || n2 === void 0 ? void 0 : n2.type) === "video" && this.media.src ? (this.mediaPlayer = new GA({ id: this.json.id + "-video", ctx: this.ctx, video: this.media, height: this.designHeight, width: this.designWidth, target: o3, container: this.container, canvasElement: this.ctx.view }), (i2 = this.mediaPlayer) === null || i2 === void 0 || i2.sprite) : ((r3 = this.media) === null || r3 === void 0 ? void 0 : r3.type) === "audio" && this.media.src && (this.mediaPlayer = new zA({ id: this.json.id + "-audio", ctx: this.ctx, audio: this.media, height: this.designHeight, width: this.designWidth, target: o3, canvasElement: this.ctx.view })), this.mediaPlayer && (this.isInteractiveOutside = this.container.interactive, this.container.interactive = true, this.container.on("mouseover", () => {
           this.mediaPlayer.showController();
-        }), o3.on("mouseout", () => {
+        }), this.container.on("mouseout", () => {
           this.mediaPlayer.hideController();
         }, false));
       }
@@ -32583,10 +32639,13 @@ void main(void){
       this.renderPic();
     }
     clearOnSlideChange() {
-      super.clearOnSlideChange(), this.mediaPlayer && (this.picFill.displayObject && (this.picFill.displayObject.interactive = false), this.mediaPlayer.stop());
+      super.clearOnSlideChange(), this.mediaPlayer && (this.container.interactive = false, this.mediaPlayer.stop(), this.mediaPlayer.hideController());
+    }
+    initOnReuse() {
+      super.initOnReuse(), this.mediaPlayer && (this.container.interactive = true);
     }
     destroy() {
-      this.mediaPlayer && (this.picFill.displayObject && (this.picFill.displayObject.interactive = false), this.mediaPlayer.destroy(), this.mediaPlayer = void 0), this.picFill.destroy();
+      this.mediaPlayer && (this.picFill.displayObject && !this.isInteractiveOutside && (this.container.interactive = false), this.mediaPlayer.destroy(), this.mediaPlayer = void 0), this.picFill.destroy();
     }
   }
   var VA = function(t3, e3, n2, i2) {
@@ -32660,6 +32719,9 @@ void main(void){
     clearOnSlideChange() {
       this.children.forEach((t3) => t3.clearOnSlideChange());
     }
+    initOnReuse() {
+      this.children.forEach((t3) => t3.initOnReuse());
+    }
     destroy() {
       this.cacheSprite && this.cacheSprite.destroy({ texture: true }), this.children.forEach((t3) => t3.destroy()), this.container.destroy({ children: true, texture: true, baseTexture: true }), this.cacheContainer.destroy({ children: true, texture: true, baseTexture: true });
     }
@@ -33055,9 +33117,7 @@ void main(void){
         const i2 = e3 / t4, r3 = (n2 = this.path) === null || n2 === void 0 ? void 0 : n2.getPoint(i2);
         this.timingTarget && r3 && (this.timingTarget.ppt_x = r3.x + this.timingTarget.design_ppt_x, this.timingTarget.ppt_y = r3.y + +this.timingTarget.design_ppt_y);
       }, this.onSeekToStart = () => {
-        var t4, e3, n2;
-        const i2 = (e3 = (t4 = this.commonTimeNode.json) === null || t4 === void 0 ? void 0 : t4.spd) !== null && e3 !== void 0 ? e3 : 1, r3 = (n2 = this.path) === null || n2 === void 0 ? void 0 : n2.getPoint(i2 > 0 ? 0 : 1);
-        this.timingTarget && r3 && (this.timingTarget.ppt_x = r3.x + this.timingTarget.design_ppt_x, this.timingTarget.ppt_y = r3.y + this.timingTarget.design_ppt_y);
+        this.timingTarget && (this.timingTarget.ppt_x = this.timingTarget.design_ppt_x, this.timingTarget.ppt_y = this.timingTarget.design_ppt_y);
       }, this.onSeekToEnd = () => {
         var t4, e3, n2;
         const i2 = (e3 = (t4 = this.commonTimeNode.json) === null || t4 === void 0 ? void 0 : t4.spd) !== null && e3 !== void 0 ? e3 : 1, r3 = (n2 = this.path) === null || n2 === void 0 ? void 0 : n2.getPoint(i2 > 0 ? 1 : 0);
@@ -33132,8 +33192,10 @@ void main(void){
   }
   class mR extends JA {
     constructor(t3) {
-      super(t3), this.isConflict = false, this.activeWhenConflict = "next", this.startColorString = null, this.currentColorString = "#FFFFFFFF", this.onTimelineStart = (t4) => {
-        t4.isReverse || this.updateCurrentValue(), this.from.isInit() || this.from.fromHexString(this.currentColorString), this.to.isInit() || this.from.by(this.by, this.to);
+      super(t3), this.isConflict = false, this.activeWhenConflict = "next", this.isTimelineStart = false, this.startColorString = null, this.currentColorString = "#FFFFFFFF", this.onTimelineStart = (t4) => {
+        if (this.isTimelineStart)
+          return;
+        this.isTimelineStart = true, t4.isReverse || this.updateCurrentValue(), this.from.isInit() || this.from.fromHexString(this.currentColorString), this.to.isInit() || this.from.by(this.by, this.to);
         const [e3] = this.json.cBhvr.attrList[0].split(".");
         YA(this.timingTarget, e3 + ".on", "true");
       }, this.onTimeNodeEnd = () => {
@@ -33141,6 +33203,7 @@ void main(void){
           const [t4] = this.json.cBhvr.attrList[0].split(".");
           YA(this.timingTarget, t4 + ".on", "false");
         }
+        this.isTimelineStart = false;
       }, this.onSeekToStart = () => {
         var t4;
         if (this.timingTarget && (this.onTimeUpdate({ duration: 1, delta: 0 }), ((t4 = this.timingTarget.fill) === null || t4 === void 0 ? void 0 : t4.designColor.toUpperCase()) === this.from.toHexString().toUpperCase())) {
@@ -33156,7 +33219,7 @@ void main(void){
         const n2 = t4 / e3;
         this.to.interpolationFrom(this.from, n2, this.target), this.timingTarget && YA(this.timingTarget, this.json.cBhvr.attrList[0], this.target.toHexString());
       }, this.onSeekToEnd = () => {
-        this.onTimeUpdate({ duration: 1, delta: 1 });
+        this.isTimelineStart || this.onTimelineStart({ isReverse: false, activeCount: 0, id: "" }), this.onTimeUpdate({ duration: 1, delta: 1 });
       }, this.json.clrSpc === "rgb" ? (this.from = new MM(this.json.from), this.to = new MM(this.json.to), this.by = new MM(this.json.by), this.target = new MM()) : (this.from = new EM(this.json.from), this.to = new EM(this.json.to), this.by = new EM(this.json.by), this.target = new EM()), this.commonTimeNode.on("timeNodeStart", this.onTimeNodeStart), this.commonTimeNode.on("timeNodeCreate", this.onTimeNodeStart), this.commonTimeNode.on("timelineStart", this.onTimelineStart), this.commonTimeNode.on("timeNodeEnd", this.onTimeNodeEnd), this.commonTimeNode.on("timeUpdate", this.onTimeUpdate);
     }
     get modifyAttrKey() {
@@ -33216,7 +33279,7 @@ void main(void){
         this.isApplied = false;
       }), this.commonTimeNode.on("timeNodeEnd", () => {
         this.isApplied = false;
-      }), this.commonTimeNode.on("timeUpdate", this.onTimeUpdate);
+      }), this.commonTimeNode.on("timeUpdate", this.onTimeUpdate), this.commonTimeNode.on("seekToStart", this.onSeekToStart), this.commonTimeNode.on("seekToEnd", this.onSeekToEnd);
     }
     get modifyAttrKey() {
       var t3, e3, n2, i2;
@@ -33288,7 +33351,7 @@ void main(void){
     constructor(t3) {
       var e3, n2;
       super(), this.uuid = Date.now().toString(32) + Math.random().toString(32).substring(2), this.isSub = false, this.isShadow = false, this.startCount = 0, this.applyCount = 0, this.isReverse = false, this.isConflictDispose = false, this.isIterateEnd = false, this.parentTimeNode = null, this.isActive = false, this.isDestroy = false, this.shouldSeekOnStart = false, this.repeatTimeoutId = "", this.iterateShadows = [], this.isEndEventsEmitted = false, this.tmFilter = [], this.timeDelta = 0, this.isIterate = false, this.iterateType = "el", this.iterateIndex = 0, this.children = [], this.subList = [], this.duration = 0, this.isNegativeSpeed = false, this.handleEndCond = () => {
-        this.isActive && (this.isActive = false, this.dispose());
+        this.isActive && (this.isActive = false, this.seekToEnd(false, true));
       }, this.handleActive = (t4 = true) => {
         if (this.isActive = true, this.applyCount += 1, this.json.iterate || this.emit("timeNodeStart", { id: this.uuid, activeCount: this.applyCount, isReverse: this.isReverse }), this.startCount > 0 && this.json.restart) {
           if (this.json.restart === "never")
@@ -33441,25 +33504,26 @@ void main(void){
     isNatureTimeEnd() {
       return this.duration >= 0 && this.timeDelta >= this.duration;
     }
-    setPreStyle() {
-      if (!this.json.presetClass)
-        return;
+    findTargets() {
       const t3 = [], e3 = (n2) => {
         n2.forEach((n3) => {
           var i2, r3, o3;
           n3.cBhvr && n3.cBhvr.target && t3.findIndex((t4) => t4.id === n3.cBhvr.target.id) < 0 && t3.push(n3.cBhvr.target), ((r3 = (i2 = n3 == null ? void 0 : n3.cBhvr) === null || i2 === void 0 ? void 0 : i2.ctn) === null || r3 === void 0 ? void 0 : r3.childTnLst) && n3.cBhvr.ctn.childTnLst.length > 0 && e3(n3.cBhvr.ctn.childTnLst), ((o3 = n3 == null ? void 0 : n3.ctn) === null || o3 === void 0 ? void 0 : o3.childTnLst) && n3.ctn.childTnLst.length > 0 && e3(n3.ctn.childTnLst);
         });
       };
-      e3(this.json.childTnLst || []), t3.forEach((t4) => {
+      return e3(this.json.childTnLst || []), t3;
+    }
+    setPreStyle() {
+      this.json.presetClass && this.findTargets().forEach((t3) => {
         if (this.json.iterate) {
-          let e4 = 0, n2 = true;
+          let e3 = 0, n2 = true;
           for (; n2; ) {
-            const i2 = this.ctx.timingTargets.getTarget(t4, true, { type: this.json.iterate.type, index: e4, id: "" });
-            i2 && (this.setPreStyleForTarget(i2), e4 += 1), n2 = !!i2;
+            const i2 = this.ctx.timingTargets.getTarget(t3, true, { type: this.json.iterate.type, index: e3, id: "" });
+            i2 && (this.setPreStyleForTarget(i2), e3 += 1), n2 = !!i2;
           }
         } else {
-          const e4 = this.ctx.timingTargets.getTarget(t4, false);
-          e4 && this.setPreStyleForTarget(e4);
+          const e3 = this.ctx.timingTargets.getTarget(t3, false);
+          e3 && this.setPreStyleForTarget(e3);
         }
       });
     }
@@ -33643,10 +33707,10 @@ void main(void){
     }
     resetAllInteractiveSeq() {
       var t3;
-      ((t3 = this.tmRoot) === null || t3 === void 0 ? void 0 : t3.commonTimeNode.children.filter((t4) => {
+      (((t3 = this.tmRoot) === null || t3 === void 0 ? void 0 : t3.commonTimeNode.children.filter((t4) => {
         var e3, n2, i2;
         return ((e3 = t4.json) === null || e3 === void 0 ? void 0 : e3.type) === "seq" && ((i2 = (n2 = t4.json) === null || n2 === void 0 ? void 0 : n2.ctn) === null || i2 === void 0 ? void 0 : i2.nodeType) === "interactiveSeq";
-      })).forEach((t4) => {
+      })) || []).forEach((t4) => {
         t4.setCurrentStep(0, "start");
       });
     }
@@ -33689,7 +33753,7 @@ void main(void){
       return !!t3 && (t3.type === "Picture" || t3.type === "Shape" ? t3.useBgFill : !(!t3.children || !Object(l.isArray)(t3.children)) && t3.children.some((t4) => this.detectUseBackgroundFill(t4)));
     }
     initOnReuse() {
-      this.globalEventHub.on("c:prev slide", () => {
+      super.initOnReuse(), this.globalEventHub.on("c:prev slide", () => {
         this.ctx.eventHub.emit(zR.requestPrevSlide);
       }), this.globalEventHub.on("c:next slide", () => {
         this.ctx.eventHub.emit(zR.requestNextSlide);
@@ -33730,7 +33794,9 @@ void main(void){
     }
     clearOnTransactionEnd() {
       var t3, e3;
-      (t3 = this.timing) === null || t3 === void 0 || t3.resetAllInteractiveSeq(), (e3 = this.timing) === null || e3 === void 0 || e3.destroy(), this.timing = void 0;
+      this.ctx.timingTargets.getTargets().forEach((t4) => {
+        t4.hasPreset = false;
+      }), (t3 = this.timing) === null || t3 === void 0 || t3.resetAllInteractiveSeq(), (e3 = this.timing) === null || e3 === void 0 || e3.destroy(), this.timing = void 0;
     }
     destroy() {
       var t3, e3;
@@ -33757,11 +33823,11 @@ void main(void){
     }
     nextStep() {
       var t3;
-      this.hasTiming() && ((t3 = this.timing) === null || t3 === void 0 ? void 0 : t3.hasMainSeq()) ? this.globalEventHub.emit("shape slide onNext") : this.ctx.eventHub.emit(zR.requestNextSlide);
+      this.hasTiming() && ((t3 = this.timing) === null || t3 === void 0 ? void 0 : t3.hasMainSeq()) ? (this.globalEventHub.emit("shape slide onStopAudio"), this.globalEventHub.emit("shape slide onNext")) : this.ctx.eventHub.emit(zR.requestNextSlide);
     }
     prevStep() {
       var t3;
-      this.hasTiming() && ((t3 = this.timing) === null || t3 === void 0 ? void 0 : t3.hasMainSeq()) ? this.globalEventHub.emit("shape slide onPrev") : this.ctx.eventHub.emit(zR.requestPrevSlide);
+      this.hasTiming() && ((t3 = this.timing) === null || t3 === void 0 ? void 0 : t3.hasMainSeq()) ? (this.globalEventHub.emit("shape slide onStopAudio"), this.globalEventHub.emit("shape slide onPrev")) : this.ctx.eventHub.emit(zR.requestPrevSlide);
     }
     applyInteractiveAction(t3) {
       var e3;
@@ -33949,7 +34015,7 @@ void main(void){
     createCtx(t3) {
       const { task: e3 } = this.stageStates[t3];
       e3.addMTask(() => {
-        const e4 = new aM(this.loader), n2 = new a.a(), i2 = { mode: this.mode, renderer: this.renderer, graphicsTexture: new gM(), stageWidth: 0, stageHeight: 0, ticker: this.ticker, timingTargets: new _M(n2), eventHub: n2, view: this.view, medias: Object.create(null), lastViewedIndex: 0, conflictTimeNodeManager: new vM(), clock: this.clock, spriteTexture: e4, slideIndex: t3, objectPoolGroup: this.objPoolGroup, hasBackgroundFillShape: false };
+        const e4 = new aM(this.loader), n2 = new a.a(), i2 = { mode: this.mode, renderer: this.renderer, graphicsTexture: new gM(), stageWidth: 0, stageHeight: 0, ticker: this.ticker, timingTargets: new _M(n2), eventHub: n2, view: this.view, medias: Object.create(null), lastViewedIndex: 0, conflictTimeNodeManager: new vM(), clock: this.clock, spriteTexture: e4, slideIndex: t3, objectPoolGroup: this.objPoolGroup, hasBackgroundFillShape: false, slideScopeEventHub: new a.a() };
         return this.stageCtxs[t3] = i2, Promise.resolve();
       });
     }
@@ -34152,12 +34218,16 @@ void main(void){
           const n3 = t3.toString() + (this.isForward || e3 ? "-start" : "-end"), r4 = yield (i2 = this.snapshotCache) === null || i2 === void 0 ? void 0 : i2.getItem(n3);
           u2 = r4 || this.getBase64(this.currentStage);
         }
-        r3.container.visible = false, this.app.stage.addChild(r3.container), this.prevSlideBase64 && u2 && r3.json.transition && r3.json.transition.type && l2 && r3 && (yield this.playTransaction(this.prevSlideBase64, u2, r3.json.transition, l2, r3), this.prevSlideBase64 = null), this.isForward ? yield r3.startTiming() : r3.setMainSeqApplied(), this.updateResolution(this.config.resolution * this.scale), r3.container.visible = true, l2 && (l2.setMainSeqStep(0, "start"), l2.clearOnTransactionEnd(), this.app.stage.removeChild(l2.container)), this.emit(zR.renderEnd, t3), this.emit(zR.slideChange, t3), this.preload(t3 + 1).catch(() => {
+        r3.container.visible = false, this.app.stage.addChild(r3.container);
+        let { transition: h2 } = r3.json;
+        !this.isForward && (l2 == null ? void 0 : l2.json.transition) && (h2 = l2.json.transition), this.prevSlideBase64 && u2 && h2 && h2.type && l2 && r3 && (yield this.playTransaction(this.prevSlideBase64, u2, h2, l2, r3), this.prevSlideBase64 = null), this.isForward ? yield r3.startTiming() : r3.setMainSeqApplied(), this.updateResolution(this.config.resolution * this.scale), r3.container.visible = true, l2 && (l2.setMainSeqStep(0, "start"), l2.clearOnTransactionEnd(), this.app.stage.removeChild(l2.container)), r3.ctx.slideScopeEventHub.emit("slide-render", r3.ctx.slideIndex), this.emit(zR.renderEnd, t3), this.emit(zR.slideChange, t3), this.preload(t3 + 1).catch(() => {
         }), this.preload(t3 - 1).catch(() => {
         });
       });
     }
     getBase64(t3) {
+      if (!t3.container.transform)
+        return null;
       const e3 = Hy.create({ width: this.designWidth, height: this.designHeight, resolution: 1 });
       this.app.renderer.render(t3.container, { renderTexture: e3 });
       const n2 = this.app.renderer.plugins.extract.base64(e3, "image/jpeg");
@@ -34191,7 +34261,9 @@ void main(void){
     }
     updateResolution(t3) {
       this.app.ticker.addOnce(() => {
-        const e3 = BR.isDesktop() ? t3 : 1;
+        let e3 = BR.isDesktop() ? t3 : 1;
+        for (; e3 * this.designWidth > 2560 || e3 * this.designHeight > 2560; )
+          e3 -= 0.1;
         this.app.renderer.resolution = e3, this.app.renderer.plugins.interaction.resolution = this.app.renderer.resolution, this.app.renderer.resize(this.designWidth, this.designHeight);
       });
     }
@@ -34261,7 +34333,7 @@ void main(void){
       this.app.ticker.start();
     }
     getSnapshot() {
-      return this.currentStage ? this.getBase64(this.currentStage) : "";
+      return this.currentStage && this.getBase64(this.currentStage) || "";
     }
     createSnapshotForNextSlide(t3) {
       var e3, n2;
@@ -35823,25 +35895,30 @@ void main(void){
   }
   var $C = { syncDispatch: "syncDispatch", syncReceive: "syncReceive", renderStart: "renderStart", renderEnd: "renderEnd", renderError: "renderError", slideChange: "slideChange", mainSeqStepStart: "mainSeqStepStart", mainSeqStepEnd: "mainSeqStepEnd", animateStart: "animateStart", animateEnd: "animateEnd", stateChange: "stateChange" }, QC = { taskId: "", url: "", currentSlideIndex: -1, mainSeqStep: -1, mainSeqState: null, mediaState: Object.create(null), interactiveSeqState: Object.create(null) }, tI = "";
   try {
-    tI = "0.2.1";
+    tI = "0.2.2";
   } catch (t3) {
     tI = "dev";
   }
   var eI = function(t3) {
     function e3(e4) {
       var n2 = t3.call(this) || this;
-      return n2.iosResetCache = [], n2.needClearCacheImage = false, n2.version = tI, n2.__slideState = Object(l.cloneDeep)(QC), n2.isUserInput = false, n2.resize = false, n2.isAnimating = false, n2.renderingTaskManager = new LP(), n2.isLoading = false, n2.interactive = true, n2.frameWidth = 1, n2.frameHeight = 1, n2.frame = document.createElement("div"), n2.medianController = document.createElement("div"), n2.frameResizeObserver = new ZC(function() {
+      return n2.iosResetCache = [], n2.needClearCacheImage = false, n2.version = tI, n2.__slideState = Object(l.cloneDeep)(QC), n2.userInputTime = 0, n2.isSyncingSlideState = false, n2.resize = false, n2.isAnimating = false, n2.renderingTaskManager = new LP(), n2.isLoading = false, n2.interactive = true, n2.frameWidth = 1, n2.frameHeight = 1, n2.frame = document.createElement("div"), n2.medianController = document.createElement("div"), n2.frameResizeObserver = new ZC(function() {
         return n2.frameResizeHandler();
       }), n2.timestamp = function() {
         return Date.now();
-      }, n2.mode = "local", n2.enableGlobalClick = false, n2.log = "", n2.logId = "", n2.lastEmitedState = null, n2.playerController = null, n2.lock = new jC(), n2.isInitResized = false, n2.cacheImage = document.createElement("img"), n2.isFrowning = false, n2.isReleasing = false, n2.designWidth = 0, n2.designHeight = 0, n2._slideCount = 0, n2.userInputHandle = function() {
-        n2.isUserInput = true, setTimeout(function() {
-          n2.isUserInput = false;
-        }, 100);
-      }, n2.handleViewClick = function(t4) {
+      }, n2.mode = "local", n2.enableGlobalClick = false, n2.log = "", n2.logId = "", n2.lastEmitedState = null, n2.playerController = null, n2.lock = new jC(), n2.isInitResized = false, n2.cacheImage = document.createElement("img"), n2.isFrowning = false, n2.isReleasing = false, n2.isTouchStart = false, n2.touchStartId = void 0, n2.designWidth = 0, n2.designHeight = 0, n2._slideCount = 0, n2.userInputHandle = function() {
+        n2.userInputTime = Date.now();
+      }, n2.handleViewClick = function() {
         setTimeout(function() {
-          !n2.isUserInput && n2.enableGlobalClick && n2.nextStep();
+          var t4 = Date.now();
+          Math.abs(t4 - n2.userInputTime) > 500 && n2.enableGlobalClick && n2.nextStep();
         });
+      }, n2.handleViewTouchStart = function() {
+        window.clearTimeout(n2.touchStartId), n2.isTouchStart = true, n2.touchStartId = setTimeout(function() {
+          n2.isTouchStart = false;
+        }, 350);
+      }, n2.handleViewTouchEnd = function() {
+        n2.isTouchStart && (n2.isTouchStart = false, n2.handleViewClick());
       }, n2.persistLog = function() {
         return XC(n2, void 0, void 0, function() {
           var t4, e5;
@@ -35943,44 +36020,44 @@ void main(void){
       }), n2.renderingTaskManager.eventHub.on("task-error", function(t4) {
         var e5 = t4.error, i2 = t4.task;
         n2.emit($C.renderError, { error: e5, index: i2.slideIndex });
-      }), window.addEventListener("__slide_log__", n2.handleLogDownload), window.addEventListener("__slide_state__", n2.handleSlideStateLog), window.addEventListener("__slide_ref__", n2.handleSlideRef), n2.persistLogId = window.setInterval(n2.persistLog, 5e3), n2.resizeView = Object(l.debounce)(n2.resizeView.bind(n2), 50), n2.player = n2.initPlayer(e4), n2.player.view && n2.frame.appendChild(n2.player.view), n2;
+      }), window.addEventListener("__slide_log__", n2.handleLogDownload), window.addEventListener("__slide_state__", n2.handleSlideStateLog), window.addEventListener("__slide_ref__", n2.handleSlideRef), n2.persistLogId = window.setInterval(n2.persistLog, 5e3), n2.resizeView = Object(l.debounce)(n2.resizeView.bind(n2), 50), n2.player = n2.initPlayer(e4), n2.player.view && n2.frame.appendChild(n2.player.view), n2.handleViewClick = Object(l.debounce)(n2.handleViewClick, 300), n2;
     }
     return VC(e3, t3), e3.prototype.initPlayer = function(t4) {
-      var e4, n2 = this, i2 = new jR(this.mode);
-      return i2.setInteractive(this.interactive), i2.updateConfig(t4.renderOptions || {}), i2.on(zR.renderStart, function(t5) {
-        n2.isLoading = true, n2.emit($C.renderStart, t5);
-      }), i2.on(zR.renderEnd, function(t5) {
-        n2.isLoading = false, n2.player && (n2.designHeight = n2.player.designHeight, n2.designWidth = n2.player.designWidth, n2.cacheImage.style.width = n2.player.designWidth + "px", n2.cacheImage.style.height = n2.player.designHeight + "px", n2._slideCount = n2.player.slideCount), n2.emit($C.renderEnd, t5);
-      }), i2.on(zR.slideChange, function(t5) {
-        n2.__slideState.currentSlideIndex = t5, n2.emit($C.slideChange, t5);
-      }), i2.on(zR.mainSeqStateChange, function(t5) {
-        n2.__slideState.mainSeqState = t5, n2.emitStateChange();
-      }), i2.on(zR.mainSeqStepChange, function(t5) {
-        n2.__slideState.mainSeqStep = t5, n2.emitStateChange();
-      }), i2.on(zR.interactiveSeqStateChange, function(t5) {
-        var e5 = t5.id, i3 = t5.state;
-        n2.__slideState.interactiveSeqState[e5] = i3, n2.emitStateChange();
-      }), i2.on(zR.animateStart, function() {
-        n2.isAnimating !== true && (n2.isAnimating = true, n2.emit($C.animateStart));
-      }), i2.on(zR.animateEnd, function() {
-        n2.isAnimating !== false && (n2.isAnimating = false, n2.emit($C.animateEnd));
-      }), i2.on(zR.interactiveSeqAction, function(t5) {
-        var e5 = t5.action, i3 = t5.seqId;
-        n2.emitSyncDispatch({ slideIndex: n2.__slideState.currentSlideIndex, type: "interactiveAnim", action: e5, seqId: i3 }), n2.emitStateChange();
-      }), i2.on(zR.mainSeqStepStart, function(t5) {
-        n2.emit($C.mainSeqStepStart, t5);
-      }), i2.on(zR.mainSeqStepEnd, function(t5) {
-        n2.emit($C.mainSeqStepEnd, t5);
-      }), i2.on(zR.mediaPlay, function(t5) {
-        var e5 = { type: "play", time: n2.timestamp() - 1e3 * t5.time };
-        n2.__slideState.mediaState[t5.id] = e5, n2.emitSyncDispatch({ slideIndex: n2.__slideState.currentSlideIndex, type: "mediaPlay", id: t5.id, state: e5 }), n2.emitStateChange();
-      }), i2.on(zR.mediaPause, function(t5) {
+      var e4, n2, i2, r3 = this, o3 = new jR(this.mode);
+      return o3.setInteractive(this.interactive), o3.updateConfig(t4.renderOptions || {}), o3.on(zR.renderStart, function(t5) {
+        r3.isLoading = true, r3.emit($C.renderStart, t5);
+      }), o3.on(zR.renderEnd, function(t5) {
+        r3.isLoading = false, r3.player && (r3.designHeight = r3.player.designHeight, r3.designWidth = r3.player.designWidth, r3.cacheImage.style.width = r3.player.designWidth + "px", r3.cacheImage.style.height = r3.player.designHeight + "px", r3._slideCount = r3.player.slideCount), r3.emit($C.renderEnd, t5);
+      }), o3.on(zR.slideChange, function(t5) {
+        r3.__slideState.currentSlideIndex = t5, r3.emit($C.slideChange, t5);
+      }), o3.on(zR.mainSeqStateChange, function(t5) {
+        r3.__slideState.mainSeqState = t5, r3.emitStateChange();
+      }), o3.on(zR.mainSeqStepChange, function(t5) {
+        r3.__slideState.mainSeqStep = t5, r3.emitStateChange();
+      }), o3.on(zR.interactiveSeqStateChange, function(t5) {
+        var e5 = t5.id, n3 = t5.state;
+        r3.__slideState.interactiveSeqState[e5] = n3, r3.emitStateChange();
+      }), o3.on(zR.animateStart, function() {
+        r3.isAnimating !== true && (r3.isAnimating = true, r3.emit($C.animateStart));
+      }), o3.on(zR.animateEnd, function() {
+        r3.isAnimating !== false && (r3.isAnimating = false, r3.emit($C.animateEnd));
+      }), o3.on(zR.interactiveSeqAction, function(t5) {
+        var e5 = t5.action, n3 = t5.seqId;
+        r3.emitSyncDispatch({ slideIndex: r3.__slideState.currentSlideIndex, type: "interactiveAnim", action: e5, seqId: n3 }), r3.emitStateChange();
+      }), o3.on(zR.mainSeqStepStart, function(t5) {
+        r3.emit($C.mainSeqStepStart, t5);
+      }), o3.on(zR.mainSeqStepEnd, function(t5) {
+        r3.emit($C.mainSeqStepEnd, t5);
+      }), o3.on(zR.mediaPlay, function(t5) {
+        var e5 = { type: "play", time: r3.timestamp() - 1e3 * t5.time };
+        r3.__slideState.mediaState[t5.id] = e5, r3.emitSyncDispatch({ slideIndex: r3.__slideState.currentSlideIndex, type: "mediaPlay", id: t5.id, state: e5 }), r3.emitStateChange();
+      }), o3.on(zR.mediaPause, function(t5) {
         var e5 = { type: "pause", time: t5.time };
-        n2.__slideState.mediaState[t5.id] = e5, n2.emitSyncDispatch({ slideIndex: n2.__slideState.currentSlideIndex, type: "mediaPause", id: t5.id, state: e5 }), n2.emitStateChange();
-      }), i2.on(zR.mediaSeek, function(t5) {
+        r3.__slideState.mediaState[t5.id] = e5, r3.emitSyncDispatch({ slideIndex: r3.__slideState.currentSlideIndex, type: "mediaPause", id: t5.id, state: e5 }), r3.emitStateChange();
+      }), o3.on(zR.mediaSeek, function(t5) {
         var e5 = { type: "pause", time: 0 };
-        t5.isPlaying ? (e5.type = "play", n2.__slideState.mediaState[t5.id] ? e5.time = n2.__slideState.mediaState[t5.id].time - 1e3 * t5.time : e5.time = n2.timestamp() - 1e3 * t5.time, n2.__slideState.mediaState[t5.id] = e5) : (e5.type = "pause", e5.time = t5.time, n2.__slideState.mediaState[t5.id] = e5), n2.emitSyncDispatch({ slideIndex: n2.__slideState.currentSlideIndex, type: "mediaSeek", id: t5.id, time: t5.time, state: e5 }), n2.emitStateChange();
-      }), i2.on(zR.requestPrevSlide, this.handlePrevSlide), i2.on(zR.requestNextSlide, this.handleNextSlide), i2.on(zR.requestGotoSlide, this.handleGotoSlide), (e4 = i2.view) === null || e4 === void 0 || e4.addEventListener("click", this.handleViewClick), i2.on(zR.userInput, this.userInputHandle), (t4 == null ? void 0 : t4.controller) && this.createController(), i2;
+        t5.isPlaying ? (e5.type = "play", r3.__slideState.mediaState[t5.id] ? e5.time = r3.__slideState.mediaState[t5.id].time - 1e3 * t5.time : e5.time = r3.timestamp() - 1e3 * t5.time, r3.__slideState.mediaState[t5.id] = e5) : (e5.type = "pause", e5.time = t5.time, r3.__slideState.mediaState[t5.id] = e5), r3.emitSyncDispatch({ slideIndex: r3.__slideState.currentSlideIndex, type: "mediaSeek", id: t5.id, time: t5.time, state: e5 }), r3.emitStateChange();
+      }), o3.on(zR.requestPrevSlide, this.handlePrevSlide), o3.on(zR.requestNextSlide, this.handleNextSlide), o3.on(zR.requestGotoSlide, this.handleGotoSlide), (e4 = o3.view) === null || e4 === void 0 || e4.addEventListener("touchend", this.handleViewTouchEnd), (n2 = o3.view) === null || n2 === void 0 || n2.addEventListener("touchstart", this.handleViewTouchStart), (i2 = o3.view) === null || i2 === void 0 || i2.addEventListener("click", this.handleViewClick), o3.on(zR.userInput, this.userInputHandle), (t4 == null ? void 0 : t4.controller) && this.createController(), o3;
     }, e3.prototype.createController = function() {
       this.player && (this.playerController = new HC({ player: this.player, params: this.player.config || {}, target: this.frame }));
     }, e3.prototype.setMedianControllerAttribute = function() {
@@ -36003,7 +36080,7 @@ void main(void){
         return qC(this, function(s3) {
           switch (s3.label) {
             case 0:
-              return this.log += "=== stateChange receive [" + new Date().toISOString() + "] ===\n", this.log += JSON.stringify(t4, null, 2), this.log += "\n\n", t4.taskId && t4.taskId !== this.__slideState.taskId && (this.__slideState.taskId = t4.taskId, (e4 = this.player) === null || e4 === void 0 || e4.setResourceData(t4.taskId, this.__slideState.url)), t4.url && t4.url !== this.__slideState.url && (this.__slideState.url = t4.url, (n2 = this.player) === null || n2 === void 0 || n2.setResourceData(this.__slideState.taskId, t4.url)), Number.isInteger(t4.currentSlideIndex) && t4.currentSlideIndex !== this.__slideState.currentSlideIndex ? (this.__slideState.currentSlideIndex = t4.currentSlideIndex, [4, this.doRenderSlide(t4.currentSlideIndex)]) : [3, 2];
+              return this.isSyncingSlideState = true, this.log += "=== stateChange receive [" + new Date().toISOString() + "] ===\n", this.log += JSON.stringify(t4, null, 2), this.log += "\n\n", t4.taskId && t4.taskId !== this.__slideState.taskId && (this.__slideState.taskId = t4.taskId, (e4 = this.player) === null || e4 === void 0 || e4.setResourceData(t4.taskId, this.__slideState.url)), t4.url && t4.url !== this.__slideState.url && (this.__slideState.url = t4.url, (n2 = this.player) === null || n2 === void 0 || n2.setResourceData(this.__slideState.taskId, t4.url)), Number.isInteger(t4.currentSlideIndex) && t4.currentSlideIndex !== this.__slideState.currentSlideIndex ? (this.__slideState.currentSlideIndex = t4.currentSlideIndex, [4, this.doRenderSlide(t4.currentSlideIndex)]) : [3, 2];
             case 1:
               s3.sent(), s3.label = 2;
             case 2:
@@ -36012,7 +36089,7 @@ void main(void){
                 return ((e5 = o3.player) === null || e5 === void 0 ? void 0 : e5.currentIndex) === t4.currentSlideIndex && ((n3 = o3.player) === null || n3 === void 0 ? void 0 : n3.currentStage);
               }, 3e3)];
             case 3:
-              return s3.sent(), r3 = false, Number.isInteger(t4.mainSeqStep) && t4.mainSeqStep !== this.__slideState.mainSeqStep && (r3 = true, this.__slideState.mainSeqStep = t4.mainSeqStep), t4.mainSeqState && t4.mainSeqState !== this.__slideState.mainSeqState && (r3 = true, this.__slideState.mainSeqState = t4.mainSeqState), r3 && this.setMainSeqStep(this.__slideState.mainSeqStep, this.__slideState.mainSeqState === "idle" ? "start" : "end"), t4.mediaState && (this.initMedia(t4), this.__slideState.mediaState = t4.mediaState), t4.interactiveSeqState && (this.initInteractiveSeq(t4), this.__slideState.interactiveSeqState = t4.interactiveSeqState), [2];
+              return s3.sent(), r3 = false, Number.isInteger(t4.mainSeqStep) && t4.mainSeqStep !== this.__slideState.mainSeqStep && (r3 = true, this.__slideState.mainSeqStep = t4.mainSeqStep), t4.mainSeqState && t4.mainSeqState !== this.__slideState.mainSeqState && (r3 = true, this.__slideState.mainSeqState = t4.mainSeqState), r3 && this.setMainSeqStep(this.__slideState.mainSeqStep, this.__slideState.mainSeqState === "idle" ? "start" : "end"), t4.mediaState && (this.initMedia(t4), this.__slideState.mediaState = t4.mediaState), t4.interactiveSeqState && (this.initInteractiveSeq(t4), this.__slideState.interactiveSeqState = t4.interactiveSeqState), this.isSyncingSlideState = false, [2];
           }
         });
       });
@@ -36137,7 +36214,7 @@ void main(void){
     }, e3.prototype.isSlideStateReady = function(t4) {
       return t4.taskId.length > 0 && t4.url.length > 0 && t4.currentSlideIndex > 0;
     }, e3.prototype.emitStateChange = function() {
-      if (this.mode !== "local") {
+      if (this.mode !== "local" && !this.isSyncingSlideState) {
         var t4 = this.slideState;
         !Object(l.isEqual)(this.lastEmitedState, t4) && this.isSlideStateReady(t4) && (this.lastEmitedState = t4, this.emit($C.stateChange, t4), this.log += "=== stateChange dispatch [" + new Date().toISOString() + "] ===\n", this.log += JSON.stringify(this.slideState, null, 2), this.log += "\n\n");
       }
@@ -37794,6 +37871,9 @@ class DocsViewer {
         $pageNumberInput.disabled = true;
       }
       this.$pageNumberInput = $pageNumberInput;
+      this.sideEffect.addEventListener($pageNumberInput, "focus", () => {
+        $pageNumberInput.select();
+      });
       this.sideEffect.addEventListener($pageNumberInput, "change", () => {
         if (this.readonly) {
           return;
@@ -37980,7 +38060,7 @@ class SlideDocsViewer {
     return `${this.namespace}-${className}`;
   }
 }
-var styles = ".netless-app-slide-content{position:relative;height:100%;overflow:hidden}.netless-app-slide-preview-mask{display:none;position:absolute;z-index:200;top:0;left:0;width:100%;height:100%}.netless-app-slide-preview{display:flex;flex-direction:column;align-items:center;position:absolute;z-index:300;top:0;left:0;width:33%;max-width:200px;height:100%;padding-top:10px;transform:translate(-100%);background:rgba(237,237,240,.9);box-shadow:inset -1px 0 #0000001c;transition:transform .4s}.netless-app-slide-preview-active .netless-app-slide-preview-mask{display:block}.netless-app-slide-preview-active .netless-app-slide-preview{transform:translate(0)}.netless-app-slide-preview-page{position:relative;display:block;width:55%;margin-bottom:10px;font-size:0;color:transparent;outline:none;border:7px solid transparent;border-radius:4px;transition:border-color .3s;user-select:none}.netless-app-slide-preview-page:hover,.netless-app-slide-preview-page.netless-app-slide-preview-page-active{border-color:#444e601a}.netless-app-slide-preview-page>img{width:100%;height:auto;box-sizing:border-box;border:1px solid rgba(0,0,0,.5);border-radius:1px;background-color:#fff;box-shadow:0 2px 8px #0000004d}.netless-app-slide-preview-page-name{position:absolute;top:1px;left:-10px;transform:translate(-100%);text-align:right;font-size:12px;color:#5f5f5f;user-select:none}.netless-app-slide-footer{box-sizing:border-box;height:26px;display:flex;align-items:center;padding:0 16px;border-top:1px solid #eeeef7;color:#191919}.netless-app-slide-float-footer{width:100%;min-height:26px;position:absolute;left:0;bottom:0;z-index:2000;background:rgba(249,249,252,.9);transition:opacity .4s}.netless-app-slide-footer-btn{box-sizing:border-box;width:26px;height:26px;font-size:0;margin:0;padding:3px;border:none;border-radius:1px;outline:none;color:currentColor;background:transparent;transition:background .4s;cursor:pointer;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.netless-app-slide-footer-btn:hover{background:rgba(237,237,240,.9)}@media (hover: none){.netless-app-slide-footer-btn:hover{background:transparent!important}}.netless-app-slide-footer-btn>svg{width:100%;height:100%}.netless-app-slide-footer-btn>svg:nth-of-type(2){display:none}.netless-app-slide-footer-btn.netless-app-slide-footer-btn-playing>svg:nth-of-type(1){display:none}.netless-app-slide-footer-btn.netless-app-slide-footer-btn-playing>svg:nth-of-type(2){display:initial}.netless-app-slide-footer-btn~.netless-app-slide-footer-btn{margin-left:15px}.netless-app-slide-page-jumps{flex:1;display:flex;justify-content:center;align-items:center}.netless-app-slide-page-number{margin-left:auto;font-size:13px;user-select:none;white-space:nowrap;word-break:keep-all}.netless-app-slide-page-number-input{border:none;outline:none;width:1.5em;margin:0;padding:0 2px;text-align:right;font-size:13px;line-height:1;font-weight:400;font-family:inherit;border-radius:2px;color:currentColor;background:transparent;transition:background .4s;user-select:text;-webkit-tap-highlight-color:rgba(0,0,0,0)}.netless-app-slide-page-number-input:hover,.netless-app-slide-page-number-input:focus,.netless-app-slide-page-number-input:active{background:#fff;box-shadow:#63636333 0 2px 8px}.netless-app-slide-readonly.netless-app-slide-footer{display:none}.telebox-color-scheme-dark .netless-app-slide-page-number-input{color:#a6a6a8}.telebox-color-scheme-dark .netless-app-slide-page-number-input:active,.telebox-color-scheme-dark .netless-app-slide-page-number-input:focus,.telebox-color-scheme-dark .netless-app-slide-page-number-input:hover{color:#222}.telebox-color-scheme-dark .netless-app-slide-footer{color:#a6a6a8;background:#2d2d33;border-top:none}.telebox-color-scheme-dark .netless-app-slide-footer-btn:hover{background:#212126}.telebox-color-scheme-dark .netless-app-slide-preview{background:rgba(50,50,50,.9)}.netless-app-slide-wb-view{position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;overflow:hidden}.netless-app-slide-slide{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.netless-app-slide-slide canvas{transform:scale(var(--netless-app-slide-scale, 1))}\n";
+var styles = ".netless-app-slide-content{position:relative;height:100%;overflow:hidden}.netless-app-slide-preview-mask{display:none;position:absolute;z-index:200;top:0;left:0;width:100%;height:100%}.netless-app-slide-preview{display:flex;flex-direction:column;align-items:center;position:absolute;z-index:300;top:0;left:0;width:33%;max-width:200px;height:100%;padding-top:10px;transform:translate(-100%);background:rgba(237,237,240,.9);box-shadow:inset -1px 0 #0000001c;transition:transform .4s}.netless-app-slide-preview-active .netless-app-slide-preview-mask{display:block}.netless-app-slide-preview-active .netless-app-slide-preview{transform:translate(0)}.netless-app-slide-preview-page{position:relative;display:block;width:55%;margin-bottom:10px;font-size:0;color:transparent;outline:none;border:7px solid transparent;border-radius:4px;transition:border-color .3s;user-select:none}.netless-app-slide-preview-page:hover,.netless-app-slide-preview-page.netless-app-slide-preview-page-active{border-color:#444e601a}.netless-app-slide-preview-page>img{width:100%;height:auto;box-sizing:border-box;border:1px solid rgba(0,0,0,.5);border-radius:1px;background-color:#fff;box-shadow:0 2px 8px #0000004d}.netless-app-slide-preview-page-name{position:absolute;top:1px;left:-10px;transform:translate(-100%);text-align:right;font-size:12px;color:#5f5f5f;user-select:none}.netless-app-slide-footer{box-sizing:border-box;height:26px;display:flex;align-items:center;padding:0 16px;border-top:1px solid #eeeef7;color:#191919}.netless-app-slide-float-footer{width:100%;min-height:26px;position:absolute;left:0;bottom:0;z-index:2000;background:rgba(249,249,252,.9);transition:opacity .4s}.netless-app-slide-footer-btn{box-sizing:border-box;width:26px;height:26px;font-size:0;margin:0;padding:3px;border:none;border-radius:1px;outline:none;color:currentColor;background:transparent;transition:background .4s;cursor:pointer;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.netless-app-slide-footer-btn:hover{background:rgba(237,237,240,.9)}@media (hover: none){.netless-app-slide-footer-btn:hover{background:transparent!important}}.netless-app-slide-footer-btn>svg{width:100%;height:100%}.netless-app-slide-footer-btn>svg:nth-of-type(2){display:none}.netless-app-slide-footer-btn.netless-app-slide-footer-btn-playing>svg:nth-of-type(1){display:none}.netless-app-slide-footer-btn.netless-app-slide-footer-btn-playing>svg:nth-of-type(2){display:initial}.netless-app-slide-footer-btn~.netless-app-slide-footer-btn{margin-left:15px}.netless-app-slide-page-jumps{flex:1;display:flex;justify-content:center;align-items:center}.netless-app-slide-page-number{margin-left:auto;font-size:13px;user-select:none;white-space:nowrap;word-break:keep-all}.netless-app-slide-page-number-input{border:none;outline:none;width:3em;margin:0;padding:0 2px;text-align:right;font-size:13px;line-height:1;font-weight:400;font-family:inherit;border-radius:2px;color:currentColor;background:transparent;transition:background .4s;user-select:text;-webkit-tap-highlight-color:rgba(0,0,0,0)}.netless-app-slide-page-number-input:hover,.netless-app-slide-page-number-input:focus,.netless-app-slide-page-number-input:active{background:#fff;box-shadow:#63636333 0 2px 8px}.netless-app-slide-readonly.netless-app-slide-footer{display:none}.telebox-color-scheme-dark .netless-app-slide-page-number-input{color:#a6a6a8}.telebox-color-scheme-dark .netless-app-slide-page-number-input:active,.telebox-color-scheme-dark .netless-app-slide-page-number-input:focus,.telebox-color-scheme-dark .netless-app-slide-page-number-input:hover{color:#222}.telebox-color-scheme-dark .netless-app-slide-footer{color:#a6a6a8;background:#2d2d33;border-top:none}.telebox-color-scheme-dark .netless-app-slide-footer-btn:hover{background:#212126}.telebox-color-scheme-dark .netless-app-slide-preview{background:rgba(50,50,50,.9)}.netless-app-slide-wb-view{position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;overflow:hidden}.netless-app-slide-slide{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.netless-app-slide-slide canvas{transform:scale(var(--netless-app-slide-scale, 1))}\n";
 function previewSlide({
   container,
   taskId,
@@ -38137,7 +38217,7 @@ class SlidePreviewer {
     return `${this.namespace}-${className}`;
   }
 }
-const version = "0.0.55";
+const version = "0.0.56";
 const SlideApp = {
   kind: "Slide",
   setup(context) {
@@ -38184,7 +38264,15 @@ const SlideApp = {
       if (useFreezer)
         apps.set(context.appId, slideController);
       ((_a = logger.apps)[_b = context.appId] || (_a[_b] = {})).controller = slideController;
-      slideController.readyPromise.then(options.onReady);
+      slideController.readyPromise.then(options.onReady).then(() => {
+        const room2 = context.getRoom();
+        let synced = false;
+        if (room2 && context.getIsWritable()) {
+          syncSceneWithSlide(room2, context, slideController.slide, baseScenePath);
+          synced = true;
+        }
+        log("[Slide] page to", slideController.slide.slideState.currentSlideIndex, synced);
+      });
       return slideController;
     };
     docsViewer = new SlideDocsViewer({