@netless/fastboard-ui 0.3.0-canary.2 → 0.3.0-canary.5

package/dist/index.d.ts

@@ -58,7 +58,7 @@ declare interface ReplayFastboardProps {
     player?: FastboardPlayer | null;
     theme?: Theme;
     language?: Language;
-    ref?: (container: HTMLDivElement | null) => void;
+    containerRef?: (container: HTMLDivElement | null) => void;
 }
 declare class ReplayFastboard extends SvelteComponentTyped<ReplayFastboardProps> {
 }
@@ -67,7 +67,7 @@ declare interface FastboardProps {
     app?: FastboardApp | null;
     theme?: Theme;
     language?: Language;
-    ref?: (container: HTMLDivElement | null) => void;
+    containerRef?: (container: HTMLDivElement | null) => void;
 }
 declare class Fastboard extends SvelteComponentTyped<FastboardProps> {
 }

package/dist/index.js

@@ -231,6 +231,9 @@ function get_current_component() {
     throw new Error("Function called outside component initialization");
   return current_component;
 }
+function onMount(fn) {
+  get_current_component().$$.on_mount.push(fn);
+}
 function createEventDispatcher() {
   const component = get_current_component();
   return (type, detail) => {
@@ -3544,6 +3547,13 @@ var tippy = function(node, props) {
     }
   };
 };
+function tippy_hide_all() {
+  document.querySelectorAll("[data-tippy-root]").forEach((el) => {
+    const instance59 = el._tippy;
+    if (instance59)
+      instance59.hide();
+  });
+}
 var tippy_menu = {
   delay: 0,
   placement: "right-start",
@@ -8553,10 +8563,6 @@ function instance54($$self, $$props, $$invalidate) {
       $:
         $$subscribe_status($$invalidate(15, status = app == null ? void 0 : app.appsStatus));
     }
-    if ($$self.$$.dirty[0] & 536870944 | $$self.$$.dirty[1] & 1) {
-      $:
-        max_scroll = scrollable ? $scroll_height + (32 + 8) * 2 - computed_height : 0;
-    }
     if ($$self.$$.dirty[0] & 192) {
       $:
         if (applianceShapes.includes(appliance)) {
@@ -8565,6 +8571,10 @@ function instance54($$self, $$props, $$invalidate) {
           $$invalidate(9, last_shape = shape);
         }
     }
+    if ($$self.$$.dirty[0] & 536870944 | $$self.$$.dirty[1] & 1) {
+      $:
+        max_scroll = scrollable ? $scroll_height + (32 + 8) * 2 - computed_height : 0;
+    }
   };
   return [
     app,
@@ -9839,6 +9849,8 @@ function create_fragment57(ctx) {
   let div1_class_value;
   let div2_class_value;
   let current;
+  let mounted;
+  let dispose;
   playercontrol = new PlayerControl_default({
     props: {
       player: ctx[0],
@@ -9866,6 +9878,10 @@ function create_fragment57(ctx) {
       append(div2, div1);
       mount_component(playercontrol, div1, null);
       current = true;
+      if (!mounted) {
+        dispose = listen(div0, "touchstart", tippy_hide_all, true);
+        mounted = true;
+      }
     },
     p(ctx2, [dirty]) {
       const playercontrol_changes = {};
@@ -9895,6 +9911,8 @@ function create_fragment57(ctx) {
         detach(div2);
       ctx[5](null);
       destroy_component(playercontrol);
+      mounted = false;
+      dispose();
     }
   };
 }
@@ -9903,7 +9921,7 @@ function instance57($$self, $$props, $$invalidate) {
   let { player = null } = $$props;
   let { theme = "light" } = $$props;
   let { language = "en" } = $$props;
-  let { ref = void 0 } = $$props;
+  let { containerRef = void 0 } = $$props;
   let container;
   function div0_binding($$value) {
     binding_callbacks[$$value ? "unshift" : "push"](() => {
@@ -9918,8 +9936,8 @@ function instance57($$self, $$props, $$invalidate) {
       $$invalidate(1, theme = $$props2.theme);
     if ("language" in $$props2)
       $$invalidate(2, language = $$props2.language);
-    if ("ref" in $$props2)
-      $$invalidate(4, ref = $$props2.ref);
+    if ("containerRef" in $$props2)
+      $$invalidate(4, containerRef = $$props2.containerRef);
   };
   $$self.$$.update = () => {
     if ($$self.$$.dirty & 9) {
@@ -9929,16 +9947,21 @@ function instance57($$self, $$props, $$invalidate) {
     }
     if ($$self.$$.dirty & 24) {
       $:
-        if (ref)
-          ref(container || null);
+        if (containerRef)
+          containerRef(container || null);
     }
   };
-  return [player, theme, language, container, ref, div0_binding];
+  return [player, theme, language, container, containerRef, div0_binding];
 }
 var ReplayFastboard = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance57, create_fragment57, safe_not_equal, { player: 0, theme: 1, language: 2, ref: 4 });
+    init(this, options, instance57, create_fragment57, safe_not_equal, {
+      player: 0,
+      theme: 1,
+      language: 2,
+      containerRef: 4
+    });
   }
 };
 var ReplayFastboard_default = ReplayFastboard;
@@ -9964,6 +9987,8 @@ function create_fragment58(ctx) {
   let div3_class_value;
   let div4_class_value;
   let current;
+  let mounted;
+  let dispose;
   toolbar = new Toolbar_default({
     props: {
       app: ctx[0],
@@ -10030,6 +10055,10 @@ function create_fragment58(ctx) {
       append(div4, div3);
       mount_component(pagecontrol, div3, null);
       current = true;
+      if (!mounted) {
+        dispose = listen(div0, "touchstart", tippy_hide_all, true);
+        mounted = true;
+      }
     },
     p(ctx2, [dirty]) {
       const toolbar_changes = {};
@@ -10092,6 +10121,8 @@ function create_fragment58(ctx) {
       destroy_component(redoundo);
       destroy_component(zoomcontrol);
       destroy_component(pagecontrol);
+      mounted = false;
+      dispose();
     }
   };
 }
@@ -10100,8 +10131,17 @@ function instance58($$self, $$props, $$invalidate) {
   let { app = null } = $$props;
   let { theme = "light" } = $$props;
   let { language = "en" } = $$props;
-  let { ref = void 0 } = $$props;
+  let { containerRef = void 0 } = $$props;
   let container;
+  onMount(() => {
+    if (containerRef) {
+      containerRef(container);
+      return () => {
+        if (containerRef)
+          containerRef(null);
+      };
+    }
+  });
   function div0_binding($$value) {
     binding_callbacks[$$value ? "unshift" : "push"](() => {
       container = $$value;
@@ -10115,8 +10155,8 @@ function instance58($$self, $$props, $$invalidate) {
       $$invalidate(1, theme = $$props2.theme);
     if ("language" in $$props2)
       $$invalidate(2, language = $$props2.language);
-    if ("ref" in $$props2)
-      $$invalidate(4, ref = $$props2.ref);
+    if ("containerRef" in $$props2)
+      $$invalidate(4, containerRef = $$props2.containerRef);
   };
   $$self.$$.update = () => {
     if ($$self.$$.dirty & 9) {
@@ -10124,18 +10164,18 @@ function instance58($$self, $$props, $$invalidate) {
         if (app && container)
           app.bindContainer(container);
     }
-    if ($$self.$$.dirty & 24) {
-      $:
-        if (ref)
-          ref(container || null);
-    }
   };
-  return [app, theme, language, container, ref, div0_binding];
+  return [app, theme, language, container, containerRef, div0_binding];
 }
 var Fastboard = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance58, create_fragment58, safe_not_equal, { app: 0, theme: 1, language: 2, ref: 4 });
+    init(this, options, instance58, create_fragment58, safe_not_equal, {
+      app: 0,
+      theme: 1,
+      language: 2,
+      containerRef: 4
+    });
   }
 };
 var Fastboard_default = Fastboard;