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

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,7 +9967,7 @@ function create_fragment57(ctx) {
     m(target, anchor) {
       insert(target, div2, anchor);
       append(div2, div0);
-      ctx[5](div0);
+      ctx[6](div0);
       append(div2, t);
       append(div2, div1);
       mount_component(playercontrol, div1, null);
@@ -10001,7 +10003,7 @@ function create_fragment57(ctx) {
     d(detaching) {
       if (detaching)
         detach(div2);
-      ctx[5](null);
+      ctx[6](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);
@@ -10043,20 +10046,22 @@ function instance57($$self, $$props, $$invalidate) {
   $$self.$$.update = () => {
     if ($$self.$$.dirty & 9) {
       try {
-          if (player && container)
+          if (player && container) {
             player.bindContainer(container);
+            $$invalidate(5, 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 & 35) {
+      if (player && theme && mounted) {
           player.manager.setPrefersColorScheme(theme);
         }
     }
   };
-  return [player, theme, language, container, containerRef, div0_binding];
+  return [player, theme, language, container, containerRef, mounted, div0_binding];
 }
 var ReplayFastboard = class extends SvelteComponent {
   constructor(options) {
@@ -10297,7 +10302,7 @@ function create_fragment58(ctx) {
     m(target, anchor) {
       insert(target, div4, anchor);
       append(div4, div0);
-      ctx[13](div0);
+      ctx[14](div0);
       append(div4, t0);
       append(div4, div1);
       if (if_block0)
@@ -10429,7 +10434,7 @@ function create_fragment58(ctx) {
     d(detaching) {
       if (detaching)
         detach(div4);
-      ctx[13](null);
+      ctx[14](null);
       if (if_block0)
         if_block0.d();
       if (if_block1)
@@ -10448,9 +10453,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(11, $focusedApp = $$value)), focusedApp);
+  let $boxState, $$unsubscribe_boxState = noop, $$subscribe_boxState = () => ($$unsubscribe_boxState(), $$unsubscribe_boxState = subscribe(boxState, ($$value) => $$invalidate(12, $boxState = $$value)), boxState);
+  let $writable, $$unsubscribe_writable = noop, $$subscribe_writable = () => ($$unsubscribe_writable(), $$unsubscribe_writable = subscribe(writable2, ($$value) => $$invalidate(13, $writable = $$value)), writable2);
   $$self.$$.on_destroy.push(() => $$unsubscribe_focusedApp());
   $$self.$$.on_destroy.push(() => $$unsubscribe_boxState());
   $$self.$$.on_destroy.push(() => $$unsubscribe_writable());
@@ -10462,6 +10467,7 @@ function instance58($$self, $$props, $$invalidate) {
   const AppsShowToolbar = ["DocsViewer", "Slide"];
   let container;
   let layout = "hidden";
+  let mounted = false;
   onMount(() => {
     if (containerRef) {
       containerRef(container);
@@ -10499,7 +10505,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 & 14336) {
       if (!$writable) {
           $$invalidate(5, layout = "hidden");
         } else if ($boxState === "maximized") {
@@ -10514,15 +10520,17 @@ function instance58($$self, $$props, $$invalidate) {
     }
     if ($$self.$$.dirty & 17) {
       try {
-          if (app && container)
+          if (app && container) {
             app.bindContainer(container);
+            $$invalidate(10, 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 & 1027) {
+      if (app && theme && mounted) {
           app.manager.setPrefersColorScheme(theme);
         }
     }
@@ -10538,6 +10546,7 @@ function instance58($$self, $$props, $$invalidate) {
     boxState,
     writable2,
     containerRef,
+    mounted,
     $focusedApp,
     $boxState,
     $writable,
@@ -10558,6 +10567,62 @@ var Fastboard = class extends SvelteComponent {
 };
 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") {