@netless/fastboard-ui 0.3.4-canary.1 → 0.3.5-canary.0

package/dist/index.d.ts

@@ -100,6 +100,35 @@ declare interface FastboardProps {
 declare class Fastboard extends SvelteComponentTyped<FastboardProps> {
 }
 
+interface UI {
+    /** render UI to div */
+    mount(div: Element, props?: Omit<FastboardProps, "app">): UI;
+    /** update UI (theme, language, etc.) */
+    update(props?: Omit<FastboardProps, "app">): void;
+    /** remove UI */
+    destroy(): void;
+}
+/**
+ * @example
+ * let ui = createUI(fastboardApp, document.getElementById("whiteboard"));
+ * ui.update({ theme: "dark" })
+ */
+declare function createUI(app: FastboardApp, div?: Element): UI;
+interface ReplayUI {
+    /** render UI to div */
+    mount(div: Element, props?: Omit<ReplayFastboardProps, "player">): ReplayUI;
+    /** update UI (theme, language, etc.) */
+    update(props?: Omit<ReplayFastboardProps, "player">): void;
+    /** remove UI */
+    destroy(): void;
+}
+/**
+ * @example
+ * let ui = createReplayUI(fastboardPlayer, document.getElementById("whiteboard"));
+ * ui.update({ theme: "dark" })
+ */
+declare function createReplayUI(player: FastboardPlayer, div?: Element): ReplayUI;
+
 interface AppInToolbar {
     kind: string;
     icon: string;
@@ -121,4 +150,4 @@ declare class AppsInToolbar {
 
 declare const apps: AppsInToolbar;
 
-export { AppInToolbar, AppsInToolbar, Fastboard, FastboardProps, FastboardUIConfig, GenericIcon, I18nData, IconType, Language, PageControl, PageControlProps, PlayerControl, PlayerControlProps, RedoUndo, RedoUndoProps, ReplayFastboard, ReplayFastboardProps, SvelteAction, Theme, Toolbar, ToolbarConfig, ToolbarProps, ZoomControl, ZoomControlProps, apps };
+export { AppInToolbar, AppsInToolbar, Fastboard, FastboardProps, FastboardUIConfig, GenericIcon, I18nData, IconType, Language, PageControl, PageControlProps, PlayerControl, PlayerControlProps, RedoUndo, RedoUndoProps, ReplayFastboard, ReplayFastboardProps, ReplayUI, SvelteAction, Theme, Toolbar, ToolbarConfig, ToolbarProps, UI, ZoomControl, ZoomControlProps, apps, createReplayUI, createUI };

package/dist/index.js

@@ -48,7 +48,9 @@ __export(src_exports, {
   ReplayFastboard: () => ReplayFastboard_default,
   Toolbar: () => Toolbar_default,
   ZoomControl: () => ZoomControl_default,
-  apps: () => apps
+  apps: () => apps,
+  createReplayUI: () => createReplayUI,
+  createUI: () => createUI
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -9965,13 +9967,13 @@ function create_fragment57(ctx) {
     m(target, anchor) {
       insert(target, div2, anchor);
       append(div2, div0);
-      ctx[5](div0);
+      ctx[7](div0);
       append(div2, t);
       append(div2, div1);
       mount_component(playercontrol, div1, null);
       current = true;
       if (!mounted) {
-        dispose = listen(div0, "touchstart", tippy_hide_all, { passive: true, capture: true });
+        dispose = listen(div0, "touchstart", ctx[4], { passive: true, capture: true });
         mounted = true;
       }
     },
@@ -10001,7 +10003,7 @@ function create_fragment57(ctx) {
     d(detaching) {
       if (detaching)
         detach(div2);
-      ctx[5](null);
+      ctx[7](null);
       destroy_component(playercontrol);
       mounted = false;
       dispose();
@@ -10015,6 +10017,7 @@ function instance57($$self, $$props, $$invalidate) {
   let { language = "en" } = $$props;
   let { containerRef = void 0 } = $$props;
   let container;
+  let mounted = false;
   onMount(() => {
     if (containerRef) {
       containerRef(container);
@@ -10024,6 +10027,11 @@ function instance57($$self, $$props, $$invalidate) {
       };
     }
   });
+  function focus_me() {
+    tippy_hide_all();
+    let a = document.activeElement;
+    a && a.blur && a.blur();
+  }
   function div0_binding($$value) {
     binding_callbacks[$$value ? "unshift" : "push"](() => {
       container = $$value;
@@ -10038,25 +10046,36 @@ function instance57($$self, $$props, $$invalidate) {
     if ("language" in $$props2)
       $$invalidate(2, language = $$props2.language);
     if ("containerRef" in $$props2)
-      $$invalidate(4, containerRef = $$props2.containerRef);
+      $$invalidate(5, containerRef = $$props2.containerRef);
   };
   $$self.$$.update = () => {
     if ($$self.$$.dirty & 9) {
       try {
-          if (player && container)
+          if (player && container) {
             player.bindContainer(container);
+            $$invalidate(6, mounted = true);
+          }
         } catch (err) {
           console.error("[fastboard] An error occurred while binding container");
           console.error(err);
         }
     }
-    if ($$self.$$.dirty & 3) {
-      if (player && theme) {
+    if ($$self.$$.dirty & 67) {
+      if (player && theme && mounted) {
           player.manager.setPrefersColorScheme(theme);
         }
     }
   };
-  return [player, theme, language, container, containerRef, div0_binding];
+  return [
+    player,
+    theme,
+    language,
+    container,
+    focus_me,
+    containerRef,
+    mounted,
+    div0_binding
+  ];
 }
 var ReplayFastboard = class extends SvelteComponent {
   constructor(options) {
@@ -10065,7 +10084,7 @@ var ReplayFastboard = class extends SvelteComponent {
       player: 0,
       theme: 1,
       language: 2,
-      containerRef: 4
+      containerRef: 5
     });
   }
 };
@@ -10297,7 +10316,7 @@ function create_fragment58(ctx) {
     m(target, anchor) {
       insert(target, div4, anchor);
       append(div4, div0);
-      ctx[13](div0);
+      ctx[15](div0);
       append(div4, t0);
       append(div4, div1);
       if (if_block0)
@@ -10315,7 +10334,7 @@ function create_fragment58(ctx) {
         if_block3.m(div3, null);
       current = true;
       if (!mounted) {
-        dispose = listen(div0, "touchstart", tippy_hide_all, { passive: true, capture: true });
+        dispose = listen(div0, "touchstart", ctx[9], { passive: true, capture: true });
         mounted = true;
       }
     },
@@ -10429,7 +10448,7 @@ function create_fragment58(ctx) {
     d(detaching) {
       if (detaching)
         detach(div4);
-      ctx[13](null);
+      ctx[15](null);
       if (if_block0)
         if_block0.d();
       if (if_block1)
@@ -10448,9 +10467,9 @@ function instance58($$self, $$props, $$invalidate) {
   let writable2;
   let boxState;
   let focusedApp;
-  let $focusedApp, $$unsubscribe_focusedApp = noop, $$subscribe_focusedApp = () => ($$unsubscribe_focusedApp(), $$unsubscribe_focusedApp = subscribe(focusedApp, ($$value) => $$invalidate(10, $focusedApp = $$value)), focusedApp);
-  let $boxState, $$unsubscribe_boxState = noop, $$subscribe_boxState = () => ($$unsubscribe_boxState(), $$unsubscribe_boxState = subscribe(boxState, ($$value) => $$invalidate(11, $boxState = $$value)), boxState);
-  let $writable, $$unsubscribe_writable = noop, $$subscribe_writable = () => ($$unsubscribe_writable(), $$unsubscribe_writable = subscribe(writable2, ($$value) => $$invalidate(12, $writable = $$value)), writable2);
+  let $focusedApp, $$unsubscribe_focusedApp = noop, $$subscribe_focusedApp = () => ($$unsubscribe_focusedApp(), $$unsubscribe_focusedApp = subscribe(focusedApp, ($$value) => $$invalidate(12, $focusedApp = $$value)), focusedApp);
+  let $boxState, $$unsubscribe_boxState = noop, $$subscribe_boxState = () => ($$unsubscribe_boxState(), $$unsubscribe_boxState = subscribe(boxState, ($$value) => $$invalidate(13, $boxState = $$value)), boxState);
+  let $writable, $$unsubscribe_writable = noop, $$subscribe_writable = () => ($$unsubscribe_writable(), $$unsubscribe_writable = subscribe(writable2, ($$value) => $$invalidate(14, $writable = $$value)), writable2);
   $$self.$$.on_destroy.push(() => $$unsubscribe_focusedApp());
   $$self.$$.on_destroy.push(() => $$unsubscribe_boxState());
   $$self.$$.on_destroy.push(() => $$unsubscribe_writable());
@@ -10462,6 +10481,7 @@ function instance58($$self, $$props, $$invalidate) {
   const AppsShowToolbar = ["DocsViewer", "Slide"];
   let container;
   let layout = "hidden";
+  let mounted = false;
   onMount(() => {
     if (containerRef) {
       containerRef(container);
@@ -10471,6 +10491,11 @@ function instance58($$self, $$props, $$invalidate) {
       };
     }
   });
+  function focus_me() {
+    tippy_hide_all();
+    let a = document.activeElement;
+    a && a.blur && a.blur();
+  }
   function div0_binding($$value) {
     binding_callbacks[$$value ? "unshift" : "push"](() => {
       container = $$value;
@@ -10485,7 +10510,7 @@ function instance58($$self, $$props, $$invalidate) {
     if ("language" in $$props2)
       $$invalidate(2, language = $$props2.language);
     if ("containerRef" in $$props2)
-      $$invalidate(9, containerRef = $$props2.containerRef);
+      $$invalidate(10, containerRef = $$props2.containerRef);
     if ("config" in $$props2)
       $$invalidate(3, config = $$props2.config);
   };
@@ -10499,7 +10524,7 @@ function instance58($$self, $$props, $$invalidate) {
     if ($$self.$$.dirty & 1) {
       $$subscribe_focusedApp($$invalidate(6, focusedApp = app == null ? void 0 : app.focusedApp));
     }
-    if ($$self.$$.dirty & 7168) {
+    if ($$self.$$.dirty & 28672) {
       if (!$writable) {
           $$invalidate(5, layout = "hidden");
         } else if ($boxState === "maximized") {
@@ -10514,15 +10539,17 @@ function instance58($$self, $$props, $$invalidate) {
     }
     if ($$self.$$.dirty & 17) {
       try {
-          if (app && container)
+          if (app && container) {
             app.bindContainer(container);
+            $$invalidate(11, mounted = true);
+          }
         } catch (err) {
           console.error("[fastboard] An error occurred while binding container");
           console.error(err);
         }
     }
-    if ($$self.$$.dirty & 3) {
-      if (app && theme) {
+    if ($$self.$$.dirty & 2051) {
+      if (app && theme && mounted) {
           app.manager.setPrefersColorScheme(theme);
         }
     }
@@ -10537,7 +10564,9 @@ function instance58($$self, $$props, $$invalidate) {
     focusedApp,
     boxState,
     writable2,
+    focus_me,
     containerRef,
+    mounted,
     $focusedApp,
     $boxState,
     $writable,
@@ -10551,13 +10580,69 @@ var Fastboard = class extends SvelteComponent {
       app: 0,
       theme: 1,
       language: 2,
-      containerRef: 9,
+      containerRef: 10,
       config: 3
     });
   }
 };
 var Fastboard_default = Fastboard;
 
+// src/helpers/index.ts
+function createUI(app, div) {
+  let fastboard;
+  const ui = {
+    mount(div2, props) {
+      if (fastboard) {
+        fastboard.$destroy();
+      }
+      fastboard = new Fastboard_default({ target: div2, props: __spreadValues({ app }, props) });
+      return ui;
+    },
+    update(props) {
+      if (fastboard) {
+        fastboard.$set(props);
+      }
+    },
+    destroy() {
+      if (fastboard) {
+        fastboard.$destroy();
+      }
+      fastboard = void 0;
+    }
+  };
+  if (div) {
+    ui.mount(div);
+  }
+  return ui;
+}
+function createReplayUI(player, div) {
+  let fastboard;
+  const ui = {
+    mount(div2, props) {
+      if (fastboard) {
+        fastboard.$destroy();
+      }
+      fastboard = new ReplayFastboard_default({ target: div2, props: __spreadValues({ player }, props) });
+      return ui;
+    },
+    update(props) {
+      if (fastboard) {
+        fastboard.$set(props);
+      }
+    },
+    destroy() {
+      if (fastboard) {
+        fastboard.$destroy();
+      }
+      fastboard = void 0;
+    }
+  };
+  if (div) {
+    ui.mount(div);
+  }
+  return ui;
+}
+
 // inline-sass-helper:inline-sass-style-helper.js
 function injectStyle(text2) {
   if (typeof document !== "undefined") {