@netless/app-slide 0.0.54 → 0.0.55

package/dist/main.es.js

@@ -30764,6 +30764,9 @@ void main() {
     set on(t3) {
       this.target.fillActive = t3 === "true";
     }
+    get designColor() {
+      return this.target.fillColorFilter.designColor;
+    }
   }
   class wM {
     constructor(t3, e3) {
@@ -30817,7 +30820,7 @@ void main() {
     }
     execAction(t3) {
       var e3;
-      if (t3.action === "ppaction://hlinksldjump") {
+      if (this.ctx.eventHub.emit(zR.userInput), t3.action === "ppaction://hlinksldjump") {
         const n2 = ((e3 = t3 == null ? void 0 : t3.target) !== null && e3 !== void 0 ? e3 : "").match(/slide(\d+)\.xml/);
         n2 && n2[1] && this.ctx.eventHub.emit(zR.requestGotoSlide, Number(n2[1]));
       } else if (t3.action === "ppaction://hlinkshowjump?jump=nextslide")
@@ -30838,7 +30841,11 @@ 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.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;
+      });
     }
     updateScale() {
       this.container && (this.container.scale.x = this.designScale.x * this.scaleExt.x * this.scaleOrigin.x, this.container.scale.y = this.designScale.y * this.scaleExt.y * this.scaleOrigin.y);
@@ -30875,15 +30882,14 @@ void main() {
       return this.scaleExt.x * this.scaleOrigin.x * this.designWidth / this.ctx.stageWidth;
     }
     set ppt_w(t3) {
-      this.scaleExt.x = t3 * this.ctx.stageWidth / this.designWidth, this.updateScale();
+      this.designWidth && (this.scaleExt.x = t3 * this.ctx.stageWidth / this.designWidth, this.updateScale());
     }
     get ppt_h() {
       const t3 = this.designHeight || this.container.height;
       return this.scaleExt.y * this.scaleOrigin.y * t3 / this.ctx.stageHeight;
     }
     set ppt_h(t3) {
-      const e3 = this.designHeight || this.container.height;
-      this.scaleExt.y = t3 * this.ctx.stageHeight / e3, this.updateScale();
+      this.designHeight && (this.scaleExt.y = t3 * this.ctx.stageHeight / this.designHeight, this.updateScale());
     }
     get ppt_x() {
       return (this.container.position.x - this.container.pivot.x) / this.ctx.stageWidth;
@@ -30907,6 +30913,18 @@ void main() {
     set r(t3) {
       this.container.rotation = t3;
     }
+    set xshear(t3) {
+      this.container.skew.x = t3;
+    }
+    get xshear() {
+      return this.container.skew.x;
+    }
+    set yshear(t3) {
+      this.container.skew.y = t3;
+    }
+    get yshear() {
+      return this.container.skew.y;
+    }
   }
   class EM {
     constructor(t3) {
@@ -30980,7 +30998,7 @@ void main() {
   }
   class IM extends Gx {
     constructor() {
-      super(void 0, "\nvarying vec2 vTextureCoord;\n\nuniform vec4 color;\nuniform sampler2D uSampler;\n\nvoid main(void){\n    vec4 texColor = texture2D(uSampler, vTextureCoord);\n\n    if (texColor.a > 0.0) {\n        vec4 resultColor = color;\n        resultColor = resultColor * texColor.a;\n        gl_FragColor = resultColor;\n    } else {\n        gl_FragColor = texColor;\n    }\n}\n", { color: new Float32Array([0, 0, 0, 0]), active: 0 }), this.currentColor = "#FFFFFFFF";
+      super(void 0, "\nvarying vec2 vTextureCoord;\n\nuniform vec4 color;\nuniform sampler2D uSampler;\n\nvoid main(void){\n    vec4 texColor = texture2D(uSampler, vTextureCoord);\n\n    if (texColor.a > 0.0) {\n        vec4 resultColor = color;\n        resultColor = resultColor * texColor.a;\n        gl_FragColor = resultColor;\n    } else {\n        gl_FragColor = texColor;\n    }\n}\n", { color: new Float32Array([0, 0, 0, 0]), active: 0 }), this.currentColor = "#FFFFFFFF", this.designColor = "#FFFFFFFF";
     }
     set color(t3) {
       this.currentColor = t3;
@@ -32071,7 +32089,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), ((r3 = s3 == null ? void 0 : s3.fill) === null || r3 === void 0 ? void 0 : r3.fillType) === "solidFill" && (this.strokeColorFilter.currentColor = 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.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;
@@ -32768,6 +32786,7 @@ void main(void){
             if (t4) {
               t4.interactiveContainer.interactive = true, t4.interactiveContainer.cursor = "pointer";
               const n2 = () => {
+                this.ctx.eventHub.emit(zR.userInput);
                 const t5 = `shape ${e3} onClick`, { mode: n3 } = this.ctx;
                 n3 !== "interactive" && n3 !== "sync" || this.ctx.eventHub.emit(zR.interactiveSeqAction, { action: t5, seqId: this.json.ctn.id }), n3 !== "sync" && n3 !== "local" || this.globalEventHub.emit(t5);
               };
@@ -33114,7 +33133,7 @@ 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) => {
-        this.from.isInit() || this.from.fromHexString(this.currentColorString), this.to.isInit() || this.from.by(this.by, this.to), t4.isReverse || this.updateCurrentValue();
+        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 = () => {
@@ -33123,9 +33142,10 @@ void main(void){
           YA(this.timingTarget, t4 + ".on", "false");
         }
       }, this.onSeekToStart = () => {
-        if (this.timingTarget) {
-          const [t4] = this.json.cBhvr.attrList[0].split(".");
-          YA(this.timingTarget, t4 + ".on", "false");
+        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())) {
+          const [t5] = this.json.cBhvr.attrList[0].split(".");
+          YA(this.timingTarget, t5 + ".on", "false");
         }
       }, this.onTimeNodeStart = () => {
         if (this.timingTarget) {
@@ -34049,7 +34069,7 @@ void main(void){
     });
   };
   r2.skipHello();
-  const HR = { randomBar: "RandomLines", circle: "Shape", ripple: "Ripples", wipe: "Erase", dissolve: "Dissolve", morph: "Smooth", fade: "FadeInOut", push: "Push", split: "Separation", reveal: "Display", pull: "Uncover", cover: "Cover", flash: "Flash", checker: "Checkerboard", blinds: "WindowShades", curtains: "Curtain", fallOver: "Fall", drape: "Suspension", wheel: "Clock", comb: "Combing", warp: "Scale", peelOff: "PeelOff", flip: "Flip" }, zR = { mainSeqStepChange: "mainSeqStepChange", mainSeqStateChange: "mainSeqStateChange", interactiveSeqStateChange: "interactiveSeqStateChange", interactiveSeqAction: "interactiveSeqAction", mainSeqStepStart: "mainSeqStepStart", mainSeqStepEnd: "mainSeqStepEnd", slideChange: "slideChange", renderStart: "renderStart", renderEnd: "renderEnd", hyperlinkTrigger: "hyperlinkTrigger", animateStart: "animateStart", animateEnd: "animateEnd", mediaSeek: "mediaSeek", mediaPlay: "mediaPlay", mediaPause: "mediaPause", requestNextSlide: "requestNextSlide", requestPrevSlide: "requestPrevSlide", requestGotoSlide: "requestGotoSlide" };
+  const HR = { randomBar: "RandomLines", circle: "Shape", ripple: "Ripples", wipe: "Erase", dissolve: "Dissolve", morph: "Smooth", fade: "FadeInOut", push: "Push", split: "Separation", reveal: "Display", pull: "Uncover", cover: "Cover", flash: "Flash", checker: "Checkerboard", blinds: "WindowShades", curtains: "Curtain", fallOver: "Fall", drape: "Suspension", wheel: "Clock", comb: "Combing", warp: "Scale", peelOff: "PeelOff", flip: "Flip" }, zR = { mainSeqStepChange: "mainSeqStepChange", mainSeqStateChange: "mainSeqStateChange", interactiveSeqStateChange: "interactiveSeqStateChange", interactiveSeqAction: "interactiveSeqAction", mainSeqStepStart: "mainSeqStepStart", mainSeqStepEnd: "mainSeqStepEnd", slideChange: "slideChange", renderStart: "renderStart", renderEnd: "renderEnd", hyperlinkTrigger: "hyperlinkTrigger", animateStart: "animateStart", animateEnd: "animateEnd", mediaSeek: "mediaSeek", mediaPlay: "mediaPlay", mediaPause: "mediaPause", requestNextSlide: "requestNextSlide", requestPrevSlide: "requestPrevSlide", requestGotoSlide: "requestGotoSlide", userInput: "userInput" };
   class jR extends a.a {
     constructor(t3, e3 = {}) {
       super(), this.loader = new KE(true), this.transactionPlayer = new og(), this.transactionSprite = new OT(), this.isForward = true, this.drawCall = 0, this.scale = 1, this.prevSlideBase64 = null, this.fps = new qE(), this.designWidth = 0, this.designHeight = 0, this.currentIndex = 0, this.slideCount = 0, this.runtime = { drawCall: 0, fps: 0 }, this.mode = t3;
@@ -34122,7 +34142,7 @@ void main(void){
       return GR(this, void 0, void 0, function* () {
         this.emit(zR.renderStart, t3);
         const r3 = yield this.stagePool.getStage(t3);
-        this.translateEvent(r3.ctx.eventHub, [zR.mainSeqStepChange, zR.mainSeqStateChange, zR.hyperlinkTrigger, zR.interactiveSeqAction, zR.mainSeqStepStart, zR.mainSeqStepEnd, zR.animateStart, zR.animateEnd, zR.mediaPlay, zR.mediaPause, zR.mediaSeek, zR.requestGotoSlide, zR.requestNextSlide, zR.requestPrevSlide, zR.interactiveSeqStateChange]), this.currentIndex = Number(t3);
+        this.translateEvent(r3.ctx.eventHub, [zR.mainSeqStepChange, zR.mainSeqStateChange, zR.hyperlinkTrigger, zR.interactiveSeqAction, zR.mainSeqStepStart, zR.mainSeqStepEnd, zR.animateStart, zR.animateEnd, zR.mediaPlay, zR.mediaPause, zR.mediaSeek, zR.requestGotoSlide, zR.requestNextSlide, zR.requestPrevSlide, zR.interactiveSeqStateChange, zR.userInput]), this.currentIndex = Number(t3);
         const { width: o3, height: s3, slideCount: a2 } = r3.json;
         this.slideCount = a2, this.designWidth = o3, this.designHeight = s3, r3.json.transition && r3.json.transition.type && !this.prevSlideBase64 && this.currentStage && (this.prevSlideBase64 = this.getBase64(this.currentStage)), (n2 = this.currentStage) === null || n2 === void 0 || n2.clearOnSlideChange();
         const l2 = this.currentStage;
@@ -34154,7 +34174,8 @@ void main(void){
           }, 100), new Promise((o5) => {
             var s4, l2, u2;
             (s4 = this.transactionPlayer) === null || s4 === void 0 || s4.play({ reverse: !this.isForward, prevTextureUrl: t3, nextTextureUrl: e3, textureWidth: this.designWidth, textureHeight: this.designHeight, presetType: HR[n2.type], stageWidth: this.designWidth, stageHeight: this.designHeight, duration: (u2 = (l2 = this.currentStage) === null || l2 === void 0 ? void 0 : l2.json.transition) === null || u2 === void 0 ? void 0 : u2.dur, delay: 0, clearColor: this.config.transactionBgColor, onTransactionEnd: () => {
-              o5(), i2.container.visible = false, r3.container.visible = true, this.app.stage.removeChild(this.transactionSprite), this.app.ticker.remove(a2);
+              var t4, e4;
+              o5(), i2.container.visible = false, r3.container.visible = true, (t4 = this.app.stage) === null || t4 === void 0 || t4.removeChild(this.transactionSprite), (e4 = this.app.ticker) === null || e4 === void 0 || e4.remove(a2);
             } });
           });
         }
@@ -35802,18 +35823,26 @@ 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.0";
+    tI = "0.2.1";
   } 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.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.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.frameResizeHandler();
       }), n2.timestamp = function() {
         return Date.now();
-      }, n2.mode = "local", 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.persistLog = function() {
+      }, 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) {
+        setTimeout(function() {
+          !n2.isUserInput && n2.enableGlobalClick && n2.nextStep();
+        });
+      }, n2.persistLog = function() {
         return XC(n2, void 0, void 0, function() {
           var t4, e5;
           return qC(this, function(n3) {
@@ -35909,7 +35938,7 @@ void main(void){
           n2.renderSlide(t4, e5);
         } else
           t4 === -1 && n2.renderSlide(n2.slideCount, true);
-      }, e4.timestamp && (n2.timestamp = e4.timestamp), n2.config = e4, n2.syncQueue = new zC(n2.receiveSyncHandler), n2.mode = e4.mode, n2.anchor = e4.anchor, n2.resize = e4.resize || false, n2.interactive = e4.interactive, n2.cacheImage.style.position = "absolute", n2.cacheImage.style.zIndex = "100", n2.frame.style.cssText = "width:100%;height:100%;display:flex;justify-content:center;align-items:center;visibility:hidden;position:relative;z-index:1;", n2.setMedianControllerAttribute(), n2.frame.appendChild(n2.medianController), n2.anchor.appendChild(n2.frame), n2.frameResizeObserver.observe(n2.frame), n2.on($C.syncReceive, function(t4) {
+      }, e4.timestamp && (n2.timestamp = e4.timestamp), n2.config = e4, n2.syncQueue = new zC(n2.receiveSyncHandler), n2.mode = e4.mode, n2.anchor = e4.anchor, n2.enableGlobalClick = !Object(l.isUndefined)(e4.enableGlobalClick) && e4.enableGlobalClick, n2.resize = e4.resize || false, n2.interactive = e4.interactive, n2.cacheImage.style.position = "absolute", n2.cacheImage.style.zIndex = "100", n2.frame.style.cssText = "width:100%;height:100%;display:flex;justify-content:center;align-items:center;visibility:hidden;position:relative;z-index:1;", n2.setMedianControllerAttribute(), n2.frame.appendChild(n2.medianController), n2.anchor.appendChild(n2.frame), n2.frameResizeObserver.observe(n2.frame), n2.on($C.syncReceive, function(t4) {
         n2.lock.unlock(t4.type, t4.uuid), n2.syncQueue.addTask(t4);
       }), n2.renderingTaskManager.eventHub.on("task-error", function(t4) {
         var e5 = t4.error, i2 = t4.task;
@@ -35917,41 +35946,41 @@ void main(void){
       }), 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;
     }
     return VC(e3, t3), e3.prototype.initPlayer = function(t4) {
-      var e4 = this, n2 = new jR(this.mode);
-      return n2.setInteractive(this.interactive), n2.updateConfig(t4.renderOptions || {}), n2.on(zR.renderStart, function(t5) {
-        e4.isLoading = true, e4.emit($C.renderStart, t5);
-      }), n2.on(zR.renderEnd, function(t5) {
-        e4.isLoading = false, e4.player && (e4.designHeight = e4.player.designHeight, e4.designWidth = e4.player.designWidth, e4.cacheImage.style.width = e4.player.designWidth + "px", e4.cacheImage.style.height = e4.player.designHeight + "px", e4._slideCount = e4.player.slideCount), e4.emit($C.renderEnd, t5);
-      }), n2.on(zR.slideChange, function(t5) {
-        e4.__slideState.currentSlideIndex = t5, e4.emit($C.slideChange, t5);
-      }), n2.on(zR.mainSeqStateChange, function(t5) {
-        e4.__slideState.mainSeqState = t5, e4.emitStateChange();
-      }), n2.on(zR.mainSeqStepChange, function(t5) {
-        e4.__slideState.mainSeqStep = t5, e4.emitStateChange();
-      }), n2.on(zR.interactiveSeqStateChange, function(t5) {
-        var n3 = t5.id, i2 = t5.state;
-        e4.__slideState.interactiveSeqState[n3] = i2, e4.emitStateChange();
-      }), n2.on(zR.animateStart, function() {
-        e4.isAnimating !== true && (e4.isAnimating = true, e4.emit($C.animateStart));
-      }), n2.on(zR.animateEnd, function() {
-        e4.isAnimating !== false && (e4.isAnimating = false, e4.emit($C.animateEnd));
-      }), n2.on(zR.interactiveSeqAction, function(t5) {
-        var n3 = t5.action, i2 = t5.seqId;
-        e4.emitSyncDispatch({ slideIndex: e4.__slideState.currentSlideIndex, type: "interactiveAnim", action: n3, seqId: i2 }), e4.emitStateChange();
-      }), n2.on(zR.mainSeqStepStart, function(t5) {
-        e4.emit($C.mainSeqStepStart, t5);
-      }), n2.on(zR.mainSeqStepEnd, function(t5) {
-        e4.emit($C.mainSeqStepEnd, t5);
-      }), n2.on(zR.mediaPlay, function(t5) {
-        var n3 = { type: "play", time: e4.timestamp() - 1e3 * t5.time };
-        e4.__slideState.mediaState[t5.id] = n3, e4.emitSyncDispatch({ slideIndex: e4.__slideState.currentSlideIndex, type: "mediaPlay", id: t5.id, state: n3 }), e4.emitStateChange();
-      }), n2.on(zR.mediaPause, function(t5) {
-        var n3 = { type: "pause", time: t5.time };
-        e4.__slideState.mediaState[t5.id] = n3, e4.emitSyncDispatch({ slideIndex: e4.__slideState.currentSlideIndex, type: "mediaPause", id: t5.id, state: n3 }), e4.emitStateChange();
-      }), n2.on(zR.mediaSeek, function(t5) {
-        var n3 = { type: "pause", time: 0 };
-        t5.isPlaying ? (n3.type = "play", e4.__slideState.mediaState[t5.id] ? n3.time = e4.__slideState.mediaState[t5.id].time - 1e3 * t5.time : n3.time = e4.timestamp() - 1e3 * t5.time, e4.__slideState.mediaState[t5.id] = n3) : (n3.type = "pause", n3.time = t5.time, e4.__slideState.mediaState[t5.id] = n3), e4.emitSyncDispatch({ slideIndex: e4.__slideState.currentSlideIndex, type: "mediaSeek", id: t5.id, time: t5.time, state: n3 }), e4.emitStateChange();
-      }), n2.on(zR.requestPrevSlide, this.handlePrevSlide), n2.on(zR.requestNextSlide, this.handleNextSlide), n2.on(zR.requestGotoSlide, this.handleGotoSlide), (t4 == null ? void 0 : t4.controller) && this.createController(), n2;
+      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 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) {
+        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;
     }, e3.prototype.createController = function() {
       this.player && (this.playerController = new HC({ player: this.player, params: this.player.config || {}, target: this.frame }));
     }, e3.prototype.setMedianControllerAttribute = function() {
@@ -36817,6 +36846,7 @@ class SlideController {
       mode: "interactive",
       resize: true,
       controller: logger.enable,
+      enableGlobalClick: true,
       renderOptions: {
         minFPS: 25,
         maxFPS: 30,
@@ -38051,6 +38081,7 @@ class SlidePreviewer {
       mode: "local",
       resize: true,
       controller: this.debug,
+      enableGlobalClick: true,
       renderOptions: {
         minFPS: 25,
         maxFPS: 30,
@@ -38106,7 +38137,7 @@ class SlidePreviewer {
     return `${this.namespace}-${className}`;
   }
 }
-const version = "0.0.54";
+const version = "0.0.55";
 const SlideApp = {
   kind: "Slide",
   setup(context) {