@netless/fastboard-ui 0.3.2-canary.2 → 0.3.2-canary.3

package/dist/index.d.ts

@@ -1,6 +1,12 @@
 import { FastboardApp, FastboardPlayer } from '@netless/fastboard-core';
 import { SvelteComponentTyped } from 'svelte';
 
+interface SvelteAction<T = void> {
+    (node: HTMLElement, parameters: T): void | {
+        update?: (parameters: T) => void;
+        destroy?: () => void;
+    };
+}
 declare type Theme = "light" | "dark";
 declare type Language = "en" | "zh-CN";
 declare type IconType = "normal" | "disable";
@@ -9,6 +15,21 @@ declare type GenericIcon<K extends string, E extends string = IconType> = {
         [kind in E]: string;
     };
 };
+declare type I18nData<T extends string> = Record<Language, Record<T, string>>;
+interface FastboardUIConfig {
+    toolbar?: {
+        enable?: boolean;
+    };
+    redo_undo?: {
+        enable?: boolean;
+    };
+    zoom_control?: {
+        enable?: boolean;
+    };
+    page_control?: {
+        enable?: boolean;
+    };
+}
 
 declare interface RedoUndoProps {
   app?: FastboardApp | null;
@@ -68,6 +89,7 @@ declare interface FastboardProps {
     theme?: Theme;
     language?: Language;
     containerRef?: (container: HTMLDivElement | null) => void;
+    config?: FastboardUIConfig;
 }
 declare class Fastboard extends SvelteComponentTyped<FastboardProps> {
 }
@@ -92,4 +114,4 @@ declare class AppsInToolbar {
 
 declare const apps: AppsInToolbar;
 
-export { AppInToolbar, AppsInToolbar, Fastboard, FastboardProps, GenericIcon, Language, PageControl, PageControlProps, PlayerControl, PlayerControlProps, RedoUndo, RedoUndoProps, ReplayFastboard, ReplayFastboardProps, Theme, Toolbar, ToolbarProps, ZoomControl, ZoomControlProps, apps };
+export { AppInToolbar, AppsInToolbar, Fastboard, FastboardProps, FastboardUIConfig, GenericIcon, I18nData, IconType, Language, PageControl, PageControlProps, PlayerControl, PlayerControlProps, RedoUndo, RedoUndoProps, ReplayFastboard, ReplayFastboardProps, SvelteAction, Theme, Toolbar, ToolbarProps, ZoomControl, ZoomControlProps, apps };

package/dist/index.js

@@ -10011,28 +10011,9 @@ var ReplayFastboard = class extends SvelteComponent {
 var ReplayFastboard_default = ReplayFastboard;
 
 // src/components/Fastboard/Fastboard.svelte
-function create_fragment58(ctx) {
-  let div4;
-  let div0;
-  let div0_class_value;
-  let t0;
-  let div1;
+function create_if_block_32(ctx) {
   let toolbar;
-  let div1_class_value;
-  let t1;
-  let div2;
-  let redoundo;
-  let t2;
-  let zoomcontrol;
-  let div2_class_value;
-  let t3;
-  let div3;
-  let pagecontrol;
-  let div3_class_value;
-  let div4_class_value;
   let current;
-  let mounted;
-  let dispose;
   toolbar = new Toolbar_default({
     props: {
       app: ctx[0],
@@ -10040,6 +10021,42 @@ function create_fragment58(ctx) {
       language: ctx[2]
     }
   });
+  return {
+    c() {
+      create_component(toolbar.$$.fragment);
+    },
+    m(target, anchor) {
+      mount_component(toolbar, target, anchor);
+      current = true;
+    },
+    p(ctx2, dirty) {
+      const toolbar_changes = {};
+      if (dirty & 1)
+        toolbar_changes.app = ctx2[0];
+      if (dirty & 2)
+        toolbar_changes.theme = ctx2[1];
+      if (dirty & 4)
+        toolbar_changes.language = ctx2[2];
+      toolbar.$set(toolbar_changes);
+    },
+    i(local) {
+      if (current)
+        return;
+      transition_in(toolbar.$$.fragment, local);
+      current = true;
+    },
+    o(local) {
+      transition_out(toolbar.$$.fragment, local);
+      current = false;
+    },
+    d(detaching) {
+      destroy_component(toolbar, detaching);
+    }
+  };
+}
+function create_if_block_23(ctx) {
+  let redoundo;
+  let current;
   redoundo = new RedoUndo_default({
     props: {
       app: ctx[0],
@@ -10047,6 +10064,42 @@ function create_fragment58(ctx) {
       language: ctx[2]
     }
   });
+  return {
+    c() {
+      create_component(redoundo.$$.fragment);
+    },
+    m(target, anchor) {
+      mount_component(redoundo, target, anchor);
+      current = true;
+    },
+    p(ctx2, dirty) {
+      const redoundo_changes = {};
+      if (dirty & 1)
+        redoundo_changes.app = ctx2[0];
+      if (dirty & 2)
+        redoundo_changes.theme = ctx2[1];
+      if (dirty & 4)
+        redoundo_changes.language = ctx2[2];
+      redoundo.$set(redoundo_changes);
+    },
+    i(local) {
+      if (current)
+        return;
+      transition_in(redoundo.$$.fragment, local);
+      current = true;
+    },
+    o(local) {
+      transition_out(redoundo.$$.fragment, local);
+      current = false;
+    },
+    d(detaching) {
+      destroy_component(redoundo, detaching);
+    }
+  };
+}
+function create_if_block_14(ctx) {
+  let zoomcontrol;
+  let current;
   zoomcontrol = new ZoomControl_default({
     props: {
       app: ctx[0],
@@ -10054,6 +10107,42 @@ function create_fragment58(ctx) {
       language: ctx[2]
     }
   });
+  return {
+    c() {
+      create_component(zoomcontrol.$$.fragment);
+    },
+    m(target, anchor) {
+      mount_component(zoomcontrol, target, anchor);
+      current = true;
+    },
+    p(ctx2, dirty) {
+      const zoomcontrol_changes = {};
+      if (dirty & 1)
+        zoomcontrol_changes.app = ctx2[0];
+      if (dirty & 2)
+        zoomcontrol_changes.theme = ctx2[1];
+      if (dirty & 4)
+        zoomcontrol_changes.language = ctx2[2];
+      zoomcontrol.$set(zoomcontrol_changes);
+    },
+    i(local) {
+      if (current)
+        return;
+      transition_in(zoomcontrol.$$.fragment, local);
+      current = true;
+    },
+    o(local) {
+      transition_out(zoomcontrol.$$.fragment, local);
+      current = false;
+    },
+    d(detaching) {
+      destroy_component(zoomcontrol, detaching);
+    }
+  };
+}
+function create_if_block9(ctx) {
+  let pagecontrol;
+  let current;
   pagecontrol = new PageControl_default({
     props: {
       app: ctx[0],
@@ -10061,46 +10150,110 @@ function create_fragment58(ctx) {
       language: ctx[2]
     }
   });
+  return {
+    c() {
+      create_component(pagecontrol.$$.fragment);
+    },
+    m(target, anchor) {
+      mount_component(pagecontrol, target, anchor);
+      current = true;
+    },
+    p(ctx2, dirty) {
+      const pagecontrol_changes = {};
+      if (dirty & 1)
+        pagecontrol_changes.app = ctx2[0];
+      if (dirty & 2)
+        pagecontrol_changes.theme = ctx2[1];
+      if (dirty & 4)
+        pagecontrol_changes.language = ctx2[2];
+      pagecontrol.$set(pagecontrol_changes);
+    },
+    i(local) {
+      if (current)
+        return;
+      transition_in(pagecontrol.$$.fragment, local);
+      current = true;
+    },
+    o(local) {
+      transition_out(pagecontrol.$$.fragment, local);
+      current = false;
+    },
+    d(detaching) {
+      destroy_component(pagecontrol, detaching);
+    }
+  };
+}
+function create_fragment58(ctx) {
+  var _a, _b, _c, _d;
+  let div4;
+  let div0;
+  let div0_class_value;
+  let t0;
+  let div1;
+  let div1_class_value;
+  let t1;
+  let div2;
+  let t2;
+  let div2_class_value;
+  let t3;
+  let div3;
+  let div3_class_value;
+  let div4_class_value;
+  let current;
+  let mounted;
+  let dispose;
+  let if_block0 = ((_a = ctx[3].toolbar) == null ? void 0 : _a.enable) !== false && create_if_block_32(ctx);
+  let if_block1 = ((_b = ctx[3].redo_undo) == null ? void 0 : _b.enable) !== false && create_if_block_23(ctx);
+  let if_block2 = ((_c = ctx[3].zoom_control) == null ? void 0 : _c.enable) !== false && create_if_block_14(ctx);
+  let if_block3 = ((_d = ctx[3].page_control) == null ? void 0 : _d.enable) !== false && create_if_block9(ctx);
   return {
     c() {
       div4 = element("div");
       div0 = element("div");
       t0 = space();
       div1 = element("div");
-      create_component(toolbar.$$.fragment);
+      if (if_block0)
+        if_block0.c();
       t1 = space();
       div2 = element("div");
-      create_component(redoundo.$$.fragment);
+      if (if_block1)
+        if_block1.c();
       t2 = space();
-      create_component(zoomcontrol.$$.fragment);
+      if (if_block2)
+        if_block2.c();
       t3 = space();
       div3 = element("div");
-      create_component(pagecontrol.$$.fragment);
+      if (if_block3)
+        if_block3.c();
       attr(div0, "class", div0_class_value = name9 + "-view");
       attr(div1, "class", div1_class_value = name9 + "-left");
-      toggle_class(div1, "hidden", !(ctx[4] === "visible" || ctx[4] === "toolbar-only"));
+      toggle_class(div1, "hidden", !(ctx[5] === "visible" || ctx[5] === "toolbar-only"));
       attr(div2, "class", div2_class_value = name9 + "-bottom-left");
-      toggle_class(div2, "hidden", ctx[4] !== "visible");
+      toggle_class(div2, "hidden", ctx[5] !== "visible");
       attr(div3, "class", div3_class_value = name9 + "-bottom-right");
-      toggle_class(div3, "hidden", ctx[4] !== "visible");
+      toggle_class(div3, "hidden", ctx[5] !== "visible");
       attr(div4, "class", div4_class_value = name9 + "-root");
       toggle_class(div4, "loading", !ctx[0]);
     },
     m(target, anchor) {
       insert(target, div4, anchor);
       append(div4, div0);
-      ctx[12](div0);
+      ctx[13](div0);
       append(div4, t0);
       append(div4, div1);
-      mount_component(toolbar, div1, null);
+      if (if_block0)
+        if_block0.m(div1, null);
       append(div4, t1);
       append(div4, div2);
-      mount_component(redoundo, div2, null);
+      if (if_block1)
+        if_block1.m(div2, null);
       append(div2, t2);
-      mount_component(zoomcontrol, div2, null);
+      if (if_block2)
+        if_block2.m(div2, null);
       append(div4, t3);
       append(div4, div3);
-      mount_component(pagecontrol, div3, null);
+      if (if_block3)
+        if_block3.m(div3, null);
       current = true;
       if (!mounted) {
         dispose = listen(div0, "touchstart", tippy_hide_all, true);
@@ -10108,46 +10261,91 @@ function create_fragment58(ctx) {
       }
     },
     p(ctx2, [dirty]) {
-      const toolbar_changes = {};
-      if (dirty & 1)
-        toolbar_changes.app = ctx2[0];
-      if (dirty & 2)
-        toolbar_changes.theme = ctx2[1];
-      if (dirty & 4)
-        toolbar_changes.language = ctx2[2];
-      toolbar.$set(toolbar_changes);
-      if (dirty & 16) {
-        toggle_class(div1, "hidden", !(ctx2[4] === "visible" || ctx2[4] === "toolbar-only"));
+      var _a2, _b2, _c2, _d2;
+      if (((_a2 = ctx2[3].toolbar) == null ? void 0 : _a2.enable) !== false) {
+        if (if_block0) {
+          if_block0.p(ctx2, dirty);
+          if (dirty & 8) {
+            transition_in(if_block0, 1);
+          }
+        } else {
+          if_block0 = create_if_block_32(ctx2);
+          if_block0.c();
+          transition_in(if_block0, 1);
+          if_block0.m(div1, null);
+        }
+      } else if (if_block0) {
+        group_outros();
+        transition_out(if_block0, 1, 1, () => {
+          if_block0 = null;
+        });
+        check_outros();
       }
-      const redoundo_changes = {};
-      if (dirty & 1)
-        redoundo_changes.app = ctx2[0];
-      if (dirty & 2)
-        redoundo_changes.theme = ctx2[1];
-      if (dirty & 4)
-        redoundo_changes.language = ctx2[2];
-      redoundo.$set(redoundo_changes);
-      const zoomcontrol_changes = {};
-      if (dirty & 1)
-        zoomcontrol_changes.app = ctx2[0];
-      if (dirty & 2)
-        zoomcontrol_changes.theme = ctx2[1];
-      if (dirty & 4)
-        zoomcontrol_changes.language = ctx2[2];
-      zoomcontrol.$set(zoomcontrol_changes);
-      if (dirty & 16) {
-        toggle_class(div2, "hidden", ctx2[4] !== "visible");
+      if (dirty & 32) {
+        toggle_class(div1, "hidden", !(ctx2[5] === "visible" || ctx2[5] === "toolbar-only"));
       }
-      const pagecontrol_changes = {};
-      if (dirty & 1)
-        pagecontrol_changes.app = ctx2[0];
-      if (dirty & 2)
-        pagecontrol_changes.theme = ctx2[1];
-      if (dirty & 4)
-        pagecontrol_changes.language = ctx2[2];
-      pagecontrol.$set(pagecontrol_changes);
-      if (dirty & 16) {
-        toggle_class(div3, "hidden", ctx2[4] !== "visible");
+      if (((_b2 = ctx2[3].redo_undo) == null ? void 0 : _b2.enable) !== false) {
+        if (if_block1) {
+          if_block1.p(ctx2, dirty);
+          if (dirty & 8) {
+            transition_in(if_block1, 1);
+          }
+        } else {
+          if_block1 = create_if_block_23(ctx2);
+          if_block1.c();
+          transition_in(if_block1, 1);
+          if_block1.m(div2, t2);
+        }
+      } else if (if_block1) {
+        group_outros();
+        transition_out(if_block1, 1, 1, () => {
+          if_block1 = null;
+        });
+        check_outros();
+      }
+      if (((_c2 = ctx2[3].zoom_control) == null ? void 0 : _c2.enable) !== false) {
+        if (if_block2) {
+          if_block2.p(ctx2, dirty);
+          if (dirty & 8) {
+            transition_in(if_block2, 1);
+          }
+        } else {
+          if_block2 = create_if_block_14(ctx2);
+          if_block2.c();
+          transition_in(if_block2, 1);
+          if_block2.m(div2, null);
+        }
+      } else if (if_block2) {
+        group_outros();
+        transition_out(if_block2, 1, 1, () => {
+          if_block2 = null;
+        });
+        check_outros();
+      }
+      if (dirty & 32) {
+        toggle_class(div2, "hidden", ctx2[5] !== "visible");
+      }
+      if (((_d2 = ctx2[3].page_control) == null ? void 0 : _d2.enable) !== false) {
+        if (if_block3) {
+          if_block3.p(ctx2, dirty);
+          if (dirty & 8) {
+            transition_in(if_block3, 1);
+          }
+        } else {
+          if_block3 = create_if_block9(ctx2);
+          if_block3.c();
+          transition_in(if_block3, 1);
+          if_block3.m(div3, null);
+        }
+      } else if (if_block3) {
+        group_outros();
+        transition_out(if_block3, 1, 1, () => {
+          if_block3 = null;
+        });
+        check_outros();
+      }
+      if (dirty & 32) {
+        toggle_class(div3, "hidden", ctx2[5] !== "visible");
       }
       if (dirty & 1) {
         toggle_class(div4, "loading", !ctx2[0]);
@@ -10156,27 +10354,31 @@ function create_fragment58(ctx) {
     i(local) {
       if (current)
         return;
-      transition_in(toolbar.$$.fragment, local);
-      transition_in(redoundo.$$.fragment, local);
-      transition_in(zoomcontrol.$$.fragment, local);
-      transition_in(pagecontrol.$$.fragment, local);
+      transition_in(if_block0);
+      transition_in(if_block1);
+      transition_in(if_block2);
+      transition_in(if_block3);
       current = true;
     },
     o(local) {
-      transition_out(toolbar.$$.fragment, local);
-      transition_out(redoundo.$$.fragment, local);
-      transition_out(zoomcontrol.$$.fragment, local);
-      transition_out(pagecontrol.$$.fragment, local);
+      transition_out(if_block0);
+      transition_out(if_block1);
+      transition_out(if_block2);
+      transition_out(if_block3);
       current = false;
     },
     d(detaching) {
       if (detaching)
         detach(div4);
-      ctx[12](null);
-      destroy_component(toolbar);
-      destroy_component(redoundo);
-      destroy_component(zoomcontrol);
-      destroy_component(pagecontrol);
+      ctx[13](null);
+      if (if_block0)
+        if_block0.d();
+      if (if_block1)
+        if_block1.d();
+      if (if_block2)
+        if_block2.d();
+      if (if_block3)
+        if_block3.d();
       mounted = false;
       dispose();
     }
@@ -10187,9 +10389,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(9, $focusedApp = $$value)), focusedApp);
-  let $boxState, $$unsubscribe_boxState = noop, $$subscribe_boxState = () => ($$unsubscribe_boxState(), $$unsubscribe_boxState = subscribe(boxState, ($$value) => $$invalidate(10, $boxState = $$value)), boxState);
-  let $writable, $$unsubscribe_writable = noop, $$subscribe_writable = () => ($$unsubscribe_writable(), $$unsubscribe_writable = subscribe(writable2, ($$value) => $$invalidate(11, $writable = $$value)), writable2);
+  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);
   $$self.$$.on_destroy.push(() => $$unsubscribe_focusedApp());
   $$self.$$.on_destroy.push(() => $$unsubscribe_boxState());
   $$self.$$.on_destroy.push(() => $$unsubscribe_writable());
@@ -10197,6 +10399,7 @@ function instance58($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { language = "en" } = $$props;
   let { containerRef = void 0 } = $$props;
+  let { config = {} } = $$props;
   const AppsShowToolbar = ["DocsViewer", "Slide"];
   let container;
   let layout = "hidden";
@@ -10212,7 +10415,7 @@ function instance58($$self, $$props, $$invalidate) {
   function div0_binding($$value) {
     binding_callbacks[$$value ? "unshift" : "push"](() => {
       container = $$value;
-      $$invalidate(3, container);
+      $$invalidate(4, container);
     });
   }
   $$self.$$set = ($$props2) => {
@@ -10223,36 +10426,38 @@ function instance58($$self, $$props, $$invalidate) {
     if ("language" in $$props2)
       $$invalidate(2, language = $$props2.language);
     if ("containerRef" in $$props2)
-      $$invalidate(8, containerRef = $$props2.containerRef);
+      $$invalidate(9, containerRef = $$props2.containerRef);
+    if ("config" in $$props2)
+      $$invalidate(3, config = $$props2.config);
   };
   $$self.$$.update = () => {
     if ($$self.$$.dirty & 1) {
       $:
-        $$subscribe_writable($$invalidate(7, writable2 = app == null ? void 0 : app.writable));
+        $$subscribe_writable($$invalidate(8, writable2 = app == null ? void 0 : app.writable));
     }
     if ($$self.$$.dirty & 1) {
       $:
-        $$subscribe_boxState($$invalidate(6, boxState = app == null ? void 0 : app.boxState));
+        $$subscribe_boxState($$invalidate(7, boxState = app == null ? void 0 : app.boxState));
     }
     if ($$self.$$.dirty & 1) {
       $:
-        $$subscribe_focusedApp($$invalidate(5, focusedApp = app == null ? void 0 : app.focusedApp));
+        $$subscribe_focusedApp($$invalidate(6, focusedApp = app == null ? void 0 : app.focusedApp));
     }
-    if ($$self.$$.dirty & 3584) {
+    if ($$self.$$.dirty & 7168) {
       $:
         if (!$writable) {
-          $$invalidate(4, layout = "hidden");
+          $$invalidate(5, layout = "hidden");
         } else if ($boxState === "maximized") {
           if ($focusedApp && AppsShowToolbar.some((kind) => ($focusedApp || "").includes(kind))) {
-            $$invalidate(4, layout = "toolbar-only");
+            $$invalidate(5, layout = "toolbar-only");
           } else {
-            $$invalidate(4, layout = "hidden");
+            $$invalidate(5, layout = "hidden");
           }
         } else {
-          $$invalidate(4, layout = "visible");
+          $$invalidate(5, layout = "visible");
         }
     }
-    if ($$self.$$.dirty & 9) {
+    if ($$self.$$.dirty & 17) {
       $:
         try {
           if (app && container)
@@ -10273,6 +10478,7 @@ function instance58($$self, $$props, $$invalidate) {
     app,
     theme,
     language,
+    config,
     container,
     layout,
     focusedApp,
@@ -10292,7 +10498,8 @@ var Fastboard = class extends SvelteComponent {
       app: 0,
       theme: 1,
       language: 2,
-      containerRef: 8
+      containerRef: 9,
+      config: 3
     });
   }
 };