@netless/app-slide 0.0.29 → 0.0.30

package/dist/main.es.js

@@ -29882,7 +29882,7 @@ void main() {
       this.scaleExt = { x: 1, y: 1 }, this.scaleOrigin = { x: 1, y: 1 }, this.designScale = { x: 1, y: 1 }, this.bound = new fe(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 Fe(), this.ctx = e3, this.style = new uu(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 lu(this.container, this.ctx), t3.hlinkHover && ((a2 = this.hyperlink) === null || a2 === void 0 || a2.addAction(t3.hlinkHover, "hover")), t3.hlinkClick && ((u2 = this.hyperlink) === null || u2 === void 0 || u2.addAction(t3.hlinkClick, "click")));
     }
     updateScale() {
-      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;
+      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);
     }
     updateTransform(t3) {
       var e3, n2, i2, r3, o3, s3, a2, u2;
@@ -29904,7 +29904,7 @@ void main() {
       return cu(this.designWidth / this.ctx.stageWidth);
     }
     get design_ppt_h() {
-      return cu(this.designHeight / this.ctx.stageHeight);
+      return cu((this.designHeight || this.container.height) / this.ctx.stageHeight);
     }
     get design_ppt_x() {
       return cu(this.designX / this.ctx.stageWidth);
@@ -29919,10 +29919,12 @@ void main() {
       this.scaleExt.x = t3 * this.ctx.stageWidth / this.designWidth, this.updateScale();
     }
     get ppt_h() {
-      return this.scaleExt.y * this.scaleOrigin.y * this.designHeight / this.ctx.stageHeight;
+      const t3 = this.designHeight || this.container.height;
+      return this.scaleExt.y * this.scaleOrigin.y * t3 / this.ctx.stageHeight;
     }
     set ppt_h(t3) {
-      this.scaleExt.y = t3 * this.ctx.stageHeight / this.designHeight, this.updateScale();
+      const e3 = this.designHeight || this.container.height;
+      this.scaleExt.y = t3 * this.ctx.stageHeight / e3, this.updateScale();
     }
     get ppt_x() {
       return (this.container.position.x - this.container.pivot.x) / this.ctx.stageWidth;
@@ -30788,8 +30790,9 @@ void main() {
       }, this.targetId = t3.targetId, this.ctx = t3.ctx, this.height = t3.height, this.width = t3.width, this.sprite = t3.sprite, this.media = t3.media, this.info = t3.info, this.canvasElement = t3.canvasElement, this.getMedianContainer(), this.createMediaController(), this.info.cut && (this.start = (e3 = this.info.cut.start) !== null && e3 !== void 0 ? e3 : 0, this.end = (n2 = this.info.cut.end) !== null && n2 !== void 0 ? n2 : 0);
     }
     getMedianContainer() {
-      let t3 = document.getElementById("median-container");
-      t3 || (t3 = document.createElement("div"), t3.id = "median-container", this.canvasElement.parentElement.appendChild(t3)), this.container = t3;
+      var t3;
+      let e3 = (t3 = this.canvasElement.parentElement) === null || t3 === void 0 ? void 0 : t3.querySelector(".median-container");
+      e3 || (e3 = document.createElement("div"), e3.className = "median-container", this.canvasElement.parentElement.appendChild(e3)), this.container = e3;
     }
     static formatTime(t3) {
       let e3 = "00:00";
@@ -31798,7 +31801,7 @@ void main() {
   };
   class Hl extends s2.a {
     constructor(t3) {
-      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.isIterate = false, this.iterateType = "el", this.iterateIndex = 0, this.children = [], this.subList = [], this.duration = 0, this.timeDelta = 0, this.isNegativeSpeed = false, this.handleEndCond = () => {
+      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.isIterate = false, this.iterateType = "el", this.iterateIndex = 0, this.children = [], this.subList = [], this.duration = 0, this.timeDelta = 0, this.isNegativeSpeed = false, this.handleEndCond = () => {
         this.isActive && (this.isActive = false, this.dispose());
       }, 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) {
@@ -31914,7 +31917,7 @@ void main() {
       this.duration <= t3 && this.duration > 0 ? (this.emit("timeUpdate", { delta: this.duration, duration: this.duration, isReverse: this.isReverse }), this.ctx.eventHub.emit(Uh.animateEnd), this.ctx.ticker.remove(this.updateTimeLine)) : this.duration > t3 && (this.ctx.eventHub.emit(Uh.animateStart), this.ctx.ticker.add(this.updateTimeLine));
     }
     startTimeLine(t3 = true) {
-      if (t3 && (this.eventHubs.global.emit(`time ${this.json.id} begin`), this.eventHubs.global.emit(`time ${this.json.id} onBegin`), this.eventHubs.runtime.emit(`runtime ${this.json.id} begin`)), this.json.iterate)
+      if (t3 && (this.isEndEventsEmitted = false, this.eventHubs.global.emit(`time ${this.json.id} begin`), this.eventHubs.global.emit(`time ${this.json.id} onBegin`), this.eventHubs.runtime.emit(`runtime ${this.json.id} begin`)), this.json.iterate)
         return void this.startIterate();
       this.timeDelta = 0, this.emit("timelineStart", { id: this.uuid, activeCount: this.applyCount, isReverse: this.isReverse });
       const e3 = 1e3 / this.ctx.ticker.maxFPS;
@@ -31995,7 +31998,7 @@ void main() {
       });
     }
     seekToStart(t3 = true) {
-      if (this.isActive = false, this.dispose(), this.timeDelta = 0, this.emit("seekToStart"), this.json.iterate && !this.isIterate)
+      if (this.isEndEventsEmitted = false, this.isActive = false, this.dispose(), this.timeDelta = 0, this.emit("seekToStart"), this.json.iterate && !this.isIterate)
         return this.isIterateEnd = true, void this.iterateShadows.forEach((e3) => e3.seekToStart(t3));
       if (t3)
         for (let t4 = this.subList.length - 1; t4 >= 0; t4--) {
@@ -32028,7 +32031,7 @@ void main() {
       return this.children.length > 0 && (t3 = t3 && this.children.every((t4) => t4.commonTimeNode.isTimeNodeEnd())), this.json.repeatCount && (t3 = t3 && this.applyCount >= this.json.repeatCount), this.json.autoRev && (t3 = t3 && !this.isReverse), t3 = t3 && this.isNatureTimeEnd(), !!this.isConflictDispose || (!(!this.isIterateEnd || !this.json.iterate) || t3);
     }
     emitEndEvents() {
-      this.eventHubs.global.emit(`time ${this.json.id} end`), this.eventHubs.global.emit(`time ${this.json.id} onEnd`), this.eventHubs.runtime.emit(`runtime ${this.json.id} end`), this.emit("timeNodeEnd", { id: this.uuid, activeCount: this.applyCount, isReverse: this.isReverse });
+      this.isEndEventsEmitted || (this.isEndEventsEmitted = true, this.eventHubs.global.emit(`time ${this.json.id} end`), this.eventHubs.global.emit(`time ${this.json.id} onEnd`), this.eventHubs.runtime.emit(`runtime ${this.json.id} end`), this.emit("timeNodeEnd", { id: this.uuid, activeCount: this.applyCount, isReverse: this.isReverse }));
     }
     collectStartValue() {
       this.emit("timeNodeCreate"), this.children.forEach((t3) => t3.commonTimeNode.collectStartValue());
@@ -32215,7 +32218,7 @@ void main() {
     }
     destroy() {
       var t3;
-      super.destroy(), this.ctx.eventHub.removeAllListeners(), this.ctx.graphicsTexture.destroy(), this.ctx.fillTexture.destroy(), this.globalEventHub.removeAllListeners(), (t3 = this.timing) === null || t3 === void 0 || t3.destroy();
+      this.ctx.eventHub.removeAllListeners(), this.ctx.graphicsTexture.destroy(), this.ctx.fillTexture.destroy(), this.globalEventHub.removeAllListeners(), (t3 = this.timing) === null || t3 === void 0 || t3.destroy(), super.destroy();
     }
     mainSeqStep() {
       var t3, e3;
@@ -35016,7 +35019,7 @@ void main(void){
     }, e3.prototype.createController = function() {
       this.player && (this.playerController = new kd({ player: this.player, params: this.player.config || {}, target: this.frame }));
     }, e3.prototype.setMedianControllerAttribute = function() {
-      this.medianController.id = "median-container", this.medianController.style.position = "absolute", this.medianController.style.left = "0", this.medianController.style.top = "0", this.medianController.style.zIndex = "2";
+      this.medianController.className = "median-container", this.medianController.style.position = "absolute", this.medianController.style.left = "0", this.medianController.style.top = "0", this.medianController.style.zIndex = "2";
     }, e3.prototype.frameResizeHandler = function() {
       var t4 = this.frame.getBoundingClientRect(), e4 = t4.width, n2 = t4.height;
       this.frameWidth = e4, this.frameHeight = n2, this.resizeView();
@@ -35428,9 +35431,10 @@ swizzle$1.wrap = function(fn) {
 };
 var colorNames = colorName;
 var swizzle2 = simpleSwizzle.exports;
+var hasOwnProperty = Object.hasOwnProperty;
 var reverseNames = {};
 for (var name in colorNames) {
-  if (colorNames.hasOwnProperty(name)) {
+  if (hasOwnProperty.call(colorNames, name)) {
     reverseNames[colorNames[name]] = name;
   }
 }
@@ -35519,10 +35523,10 @@ cs.get.rgb = function(string) {
     if (match[1] === "transparent") {
       return [0, 0, 0, 0];
     }
-    rgb = colorNames[match[1]];
-    if (!rgb) {
+    if (!hasOwnProperty.call(colorNames, match[1])) {
       return null;
     }
+    rgb = colorNames[match[1]];
     rgb[3] = 1;
     return rgb;
   } else {
@@ -35542,7 +35546,7 @@ cs.get.hsl = function(string) {
   var match = string.match(hsl);
   if (match) {
     var alpha = parseFloat(match[4]);
-    var h = (parseFloat(match[1]) + 360) % 360;
+    var h = (parseFloat(match[1]) % 360 + 360) % 360;
     var s2 = clamp(parseFloat(match[2]), 0, 100);
     var l = clamp(parseFloat(match[3]), 0, 100);
     var a = clamp(isNaN(alpha) ? 1 : alpha, 0, 1);
@@ -35600,10 +35604,45 @@ function clamp(num, min, max) {
   return Math.min(Math.max(min, num), max);
 }
 function hexDouble(num) {
-  var str = num.toString(16).toUpperCase();
+  var str = Math.round(num).toString(16).toUpperCase();
   return str.length < 2 ? "0" + str : str;
 }
 var ColorString = colorString.exports;
+class Logger {
+  constructor(enable) {
+    this.enable = enable;
+    this.apps = {};
+    this.level = "debug";
+    this._onMessage = (ev) => {
+      if (isObj(ev.data)) {
+        if (typeof ev.data.slide === "boolean") {
+          this.enable = ev.data.slide;
+        } else if (ev.data.slide === "__instance") {
+          console.log(this);
+        }
+      }
+    };
+    window.addEventListener("message", this._onMessage);
+  }
+  log(...args) {
+    if (this.enable) {
+      console.log(...args);
+    }
+  }
+  verbose(...args) {
+    if (this.enable && this.level === "verbose") {
+      console.log(...args);
+    }
+  }
+  dispose(appId) {
+    this.enable = false;
+    delete this.apps[appId];
+    window.removeEventListener("message", this._onMessage);
+  }
+}
+const logger = new Logger(false);
+const log = logger.log.bind(logger);
+const verbose = logger.verbose.bind(logger);
 function guessBgColor(el) {
   try {
     const bg = window.getComputedStyle(el).backgroundColor;
@@ -35632,6 +35671,7 @@ let cachedBgColor = "";
 function cachedGetBgColor(el) {
   if (!cachedBgColor) {
     cachedBgColor = toHex(guessBgColor(el));
+    log("[Slide] guess bg color", cachedBgColor);
   }
   return cachedBgColor;
 }
@@ -35684,7 +35724,6 @@ class SlideController {
     onTransitionEnd,
     onError
   }) {
-    var _a;
     this.sideEffect = new o();
     this.ready = false;
     this.readyPromise = new Promise((resolve) => {
@@ -35699,9 +35738,7 @@ class SlideController {
           type: Slide.SLIDE_EVENTS.syncDispatch,
           payload: event
         };
-        if (this.debug) {
-          console.log("[Slide] dispatch", event);
-        }
+        log("[Slide] dispatch", event);
         this.room.dispatchMagixEvent(this.channel, payload);
       }
     };
@@ -35710,9 +35747,7 @@ class SlideController {
         const { type, payload } = ev.payload;
         if (type === Slide.SLIDE_EVENTS.syncDispatch) {
           this.syncStateOnce();
-          if (this.debug) {
-            console.log("[Slide] receive", payload);
-          }
+          log("[Slide] receive", payload);
           if (!this.syncStateOnceFlag) {
             this.slide.emit(Slide.SLIDE_EVENTS.syncReceive, payload);
           }
@@ -35721,6 +35756,7 @@ class SlideController {
     };
     this.onStateChange = (state) => {
       if (this.context.getIsWritable()) {
+        verbose("[Slide] state change", JSON.stringify(state, null, 2));
         this.context.updateAttributes(["state"], state);
       }
     };
@@ -35743,9 +35779,7 @@ class SlideController {
         setTimeout(this.pollReadyState, 500);
       } else {
         this.pollCount = 0;
-        if (this.debug) {
-          console.log("[Slide] renderSlide (retry after timeout)", 1);
-        }
+        log("[Slide] renderSlide (retry after timeout)", 1);
         this.slide.renderSlide(1);
       }
     };
@@ -35765,9 +35799,7 @@ class SlideController {
     this.freezePromise = null;
     this.freeze = () => {
       if (this.ready) {
-        if (this.debug) {
-          console.log("[Slide] freeze", this.context.appId);
-        }
+        log("[Slide] freeze", this.context.appId);
         if (this.freezePromise) {
           this._toFreeze = 1;
         } else if (!this.isFrozen) {
@@ -35780,9 +35812,7 @@ class SlideController {
     };
     this.unfreeze = async () => {
       if (this.ready) {
-        if (this.debug) {
-          console.log("[Slide] unfreeze", this.context.appId);
-        }
+        log("[Slide] unfreeze", this.context.appId);
         if (this.freezePromise) {
           this._toFreeze = -1;
         } else if (this.isFrozen) {
@@ -35801,7 +35831,6 @@ class SlideController {
     this.channel = `channel-${context.appId}`;
     this.room = context.getRoom();
     this.player = this.room ? void 0 : context.getDisplayer();
-    this.debug = !!((_a = context.getAppOptions()) == null ? void 0 : _a.debug);
     this.slide = this.createSlide(anchor);
     this.syncStateOnceFlag = !this.context.isAddApp;
     this.initialize();
@@ -35821,15 +35850,11 @@ class SlideController {
     const { taskId, url, state } = __spreadValues(__spreadValues({}, EmptyAttributes), this.context.getAttributes());
     slide.setResource(taskId, url || DefaultUrl);
     if (state) {
-      if (this.debug) {
-        console.log("[Slide] init with state", deepClone(state));
-      }
+      log("[Slide] init with state", deepClone(state));
       this.syncStateOnceFlag = false;
       slide.setSlideState(deepClone(state));
     } else if (context.isAddApp) {
-      if (this.debug) {
-        console.log("[Slide] init by renderSlide", 1);
-      }
+      log("[Slide] init by renderSlide", 1);
       slide.renderSlide(1);
     }
     this.pollReadyState();
@@ -35868,9 +35893,7 @@ class SlideController {
     if (this.syncStateOnceFlag) {
       const { state } = __spreadValues(__spreadValues({}, EmptyAttributes), this.context.getAttributes());
       if (state) {
-        if (this.debug) {
-          console.log("[Slide] sync with state (once)", deepClone(state));
-        }
+        log("[Slide] sync with state (once)", deepClone(state));
         this.slide.setSlideState(deepClone(state));
         this.syncStateOnceFlag = false;
       }
@@ -35892,7 +35915,7 @@ class SlideController {
       interactive: true,
       mode: "interactive",
       resize: true,
-      controller: this.debug,
+      controller: logger.enable,
       renderOptions: {
         minFPS: 25,
         maxFPS: 30,
@@ -35903,17 +35926,12 @@ class SlideController {
       },
       timestamp: this.timestamp
     });
-    if (this.debug) {
-      window.slide = slide;
-    }
     return slide;
   }
   destroy() {
     this.sideEffect.flushAll();
     if (!this.destroyed) {
-      if (this.debug) {
-        console.log("[Slide] destroy slide (once)");
-      }
+      log("[Slide] destroy slide (once)");
       this.slide.destroy();
       this.destroyed = true;
     }
@@ -36892,7 +36910,7 @@ class DocsViewer {
     return `${this.namespace}-${className}`;
   }
 }
-const ClickThroughAppliances = new Set(["clicker", "selector"]);
+const ClickThroughAppliances = new Set(["clicker"]);
 class SlideDocsViewer {
   constructor({ box, view, mountSlideController, mountWhiteboard }) {
     this.slideController = null;
@@ -37041,15 +37059,18 @@ const apps = {
   map: new Map(),
   queue: [],
   validateQueue() {
+    log("[Slide] freezer: validate", this.queue);
     while (this.queue.length > FreezerLength) {
       const appId = this.queue.pop();
       const slide = this.map.get(appId);
       if (slide) {
+        log("[Slide] freezer: validate-freeze", appId, this.queue);
         slide.freeze();
       }
     }
   },
   set(appId, slide) {
+    log("[Slide] freezer: add", appId, this.queue);
     this.map.set(appId, slide);
     if (!this.queue.includes(appId)) {
       this.queue.unshift(appId);
@@ -37057,6 +37078,7 @@ const apps = {
     this.validateQueue();
   },
   delete(appId) {
+    log("[Slide] freezer: delete", appId, this.queue);
     this.map.delete(appId);
     this.queue = this.queue.filter((id) => id !== appId);
   },
@@ -37068,6 +37090,7 @@ const apps = {
     }
     this.queue.unshift(appId);
     this.validateQueue();
+    log("[Slide] freezer: focus", appId, this.queue);
     if (slide) {
       slide.unfreeze();
     }
@@ -37099,23 +37122,26 @@ const SlideApp = {
     const baseScenePath = context.getInitScenePath();
     let docsViewer = null;
     const onPageChanged = (page) => {
-      var _a;
       const room2 = context.getRoom();
-      if (docsViewer && docsViewer.slideController && room2 && context.getIsWritable()) {
-        syncSceneWithSlide(room2, context, docsViewer.slideController.slide, baseScenePath);
-        if (((_a = context.getAppOptions()) == null ? void 0 : _a.debug) || false) {
-          console.log("[Slide] page to", page);
+      if (docsViewer && docsViewer.slideController) {
+        let synced = false;
+        if (room2 && context.getIsWritable()) {
+          syncSceneWithSlide(room2, context, docsViewer.slideController.slide, baseScenePath);
+          synced = true;
         }
+        log("[Slide] page to", page, synced);
         docsViewer.viewer.setPageIndex(page - 1);
       }
     };
     const mountSlideController = (options) => {
+      var _a, _b;
       const slideController = new SlideController(__spreadProps(__spreadValues({
         context
       }, options), {
         onPageChanged
       }));
       apps.set(context.appId, slideController);
+      ((_a = logger.apps)[_b = context.appId] || (_a[_b] = {})).controller = slideController;
       slideController.readyPromise.then(options.onReady);
       return slideController;
     };
@@ -37127,6 +37153,13 @@ const SlideApp = {
     });
     const room = context.getRoom();
     const sideEffect = new o();
+    sideEffect.add(() => {
+      var _a, _b, _c;
+      ((_a = logger.apps)[_b = context.appId] || (_a[_b] = {})).context = context;
+      logger.enable = ((_c = context.getAppOptions()) == null ? void 0 : _c.debug) || false;
+      logger.level = "debug";
+      return () => logger.dispose(context.appId);
+    });
     if (room) {
       docsViewer.toggleClickThrough(room.state.memberState.currentApplianceName);
       sideEffect.add(() => {
@@ -37140,7 +37173,7 @@ const SlideApp = {
       });
     }
     context.emitter.on("destroy", () => {
-      console.log("[Slide]: destroy");
+      log("[Slide]: destroy");
       apps.delete(context.appId);
       sideEffect.flushAll();
       if (docsViewer) {