@netless/fastboard-ui 1.0.5 → 1.0.6

package/dist/lite.d.ts

@@ -121,6 +121,14 @@ declare interface FastboardProps {
    */
   containerRef?: (container: HTMLDivElement | null) => void;
   config?: FastboardUIConfig;
+  /** Whether to forcibly display the toolbar */
+  force_show_toolbar?: boolean;
+  /** Whether to force the display of the redo undo button */
+  force_show_redo_undo?: boolean;
+  /** Whether to force the display of the zoom control button */
+  force_show_zoom_control?: boolean;
+  /** Whether to forcibly display the page control button */
+  force_show_page_control?: boolean;
 }
 
 declare class Fastboard extends SvelteComponentTyped<FastboardProps> {}
@@ -132,6 +140,30 @@ interface UI {
     update(props?: FastboardProps): void;
     /** remove UI */
     destroy(): void;
+    /** force show toolbar */
+    forceShowToolbar(): void;
+    /** force hide toolbar */
+    forceHideToolbar(): void;
+    /** recover show toolbar */
+    recoverToolbar(): void;
+    /** force show redo undo */
+    forceShowRedoUndo(): void;
+    /** force hide redo undo */
+    forceHideRedoUndo(): void;
+    /** recover show redo undo */
+    recoverRedoUndo(): void;
+    /** force show zoom control */
+    forceShowZoomControl(): void;
+    /** force hide zoom control */
+    forceHideZoomControl(): void;
+    /** recover show zoom control */
+    recoverZoomControl(): void;
+    /** force show page control */
+    forceShowPageControl(): void;
+    /** force hide page control */
+    forceHidePageControl(): void;
+    /** recover show page control */
+    recoverPageControl(): void;
 }
 /**
  * @example

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/fastboard-ui",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "The front-end of @netless/fastboard-core.",
   "main": "dist/index.js",
   "svelte": "dist/index.svelte.mjs",
@@ -12,15 +12,15 @@
   ],
   "repository": "netless-io/fastboard",
   "peerDependencies": {
-    "@netless/fastboard-core": "1.0.5"
+    "@netless/fastboard-core": "1.0.6"
   },
   "dependencies": {
     "tippy.js": "^6.3.7"
   },
   "devDependencies": {
-    "@netless/fastboard-core": "1.0.5",
+    "@netless/buildtool": "0.1.0",
     "@netless/esbuild-plugin-inline-sass": "0.1.0",
-    "@netless/buildtool": "0.1.0"
+    "@netless/fastboard-core": "1.0.6"
   },
   "scripts": {
     "cleanup": "rimraf dist",

package/src/components/Fastboard/Fastboard.svelte

@@ -15,9 +15,13 @@
   export let language: Language = "en";
   export let containerRef: ((element: HTMLDivElement | null) => void) | undefined = undefined;
   export let config: FastboardUIConfig = {};
+  export let force_show_toolbar: boolean | undefined = undefined;
+  export let force_show_redo_undo: boolean | undefined = undefined;
+  export let force_show_zoom_control: boolean | undefined = undefined;
+  export let force_show_page_control: boolean | undefined = undefined;
 
   const name = "fastboard";
-  const AppsShowToolbar = ["DocsViewer", "Slide"];
+  const AppsShowToolbar = ["DocsViewer", "Slide", "PDFjs"];
 
   let container: HTMLDivElement;
   let layout: "hidden" | "toolbar-only" | "visible" = "hidden";
@@ -26,9 +30,24 @@
   $: writable = app?.writable;
   $: boxState = app?.boxState;
   $: focusedApp = app?.focusedApp;
+  $: visibleApps = app?.visibleApps;
 
   $: if (!$writable) {
     layout = "hidden";
+  } else if (app?.appInMainViewPlugin) {
+    if ($visibleApps && $visibleApps.size > 0) {
+      if ( $boxState === "maximized" ) {
+        if (AppsShowToolbar.some(kind => ($focusedApp || "").includes(kind))) {
+          layout = "toolbar-only";
+        } else {
+          layout = "hidden";
+        }
+      } else {
+        layout = "visible";
+      }
+    } else {
+      layout = "visible";
+    }
   } else if ($boxState === "maximized") {
     if ($focusedApp && AppsShowToolbar.some(kind => ($focusedApp || "").includes(kind))) {
       layout = "toolbar-only";
@@ -60,6 +79,42 @@
     app.manager.setPrefersColorScheme(theme);
   }
 
+  let hidden_toolbar = false;
+  $: if (force_show_toolbar === false) {
+    hidden_toolbar = true;
+  } else if (force_show_toolbar === true) {
+    hidden_toolbar = false;
+  } else {
+    hidden_toolbar = !toolbar_has_items || !(layout === "visible" || layout === "toolbar-only");
+  }
+
+  let hidden_redo_undo = false;
+  $: if (force_show_redo_undo === false) {
+    hidden_redo_undo = true;
+  } else if (force_show_redo_undo === true) {
+    hidden_redo_undo = false;
+  } else {
+    hidden_redo_undo = layout !== "visible";
+  }
+
+  let hidden_zoom_control = false;
+  $: if (force_show_zoom_control === false) {
+    hidden_zoom_control = true;
+  } else if (force_show_zoom_control === true) {
+    hidden_zoom_control = false;
+  } else {
+    hidden_zoom_control = layout !== "visible";
+  }
+
+  let hidden_page_control = false;
+  $: if (force_show_page_control === false) {
+    hidden_page_control = true;
+  } else if (force_show_page_control === true) {
+    hidden_page_control = false;
+  } else {
+    hidden_page_control = layout !== "visible";
+  }
+  
   onMount(() => {
     if (containerRef) {
       containerRef(container);
@@ -81,21 +136,21 @@
   <div class="{name}-view" bind:this={container} on:touchstart|capture={focus_me} />
   <div
     class="{name}-{config.toolbar?.placement || 'left'}"
-    class:hidden={!toolbar_has_items || !(layout === "visible" || layout === "toolbar-only")}
+    class:hidden={hidden_toolbar}
   >
     {#if config.toolbar?.enable !== false}
       <Toolbar {app} {theme} {language} config={config.toolbar || {}} />
     {/if}
   </div>
-  <div class="{name}-bottom-left" class:hidden={layout !== "visible"}>
-    {#if config.redo_undo?.enable !== false}
+  <div class="{name}-bottom-left" class:hidden={hidden_toolbar && hidden_redo_undo}>
+    {#if config.redo_undo?.enable !== false && !hidden_redo_undo}
       <RedoUndo {app} {theme} {language} />
     {/if}
-    {#if config.zoom_control?.enable !== false}
+    {#if config.zoom_control?.enable !== false && !hidden_zoom_control}
       <ZoomControl {app} {theme} {language} />
     {/if}
   </div>
-  <div class="{name}-bottom-right" class:hidden={layout !== "visible"}>
+  <div class="{name}-bottom-right" class:hidden={hidden_page_control}>
     {#if config.page_control?.enable !== false}
       <PageControl {app} {theme} {language} />
     {/if}

package/src/components/Fastboard/Fastboard.svelte.d.ts

@@ -12,6 +12,14 @@ export declare interface FastboardProps {
    */
   containerRef?: (container: HTMLDivElement | null) => void;
   config?: FastboardUIConfig;
+  /** Whether to forcibly display the toolbar */
+  force_show_toolbar?: boolean;
+  /** Whether to force the display of the redo undo button */
+  force_show_redo_undo?: boolean;
+  /** Whether to force the display of the zoom control button */
+  force_show_zoom_control?: boolean;
+  /** Whether to forcibly display the page control button */
+  force_show_page_control?: boolean;
 }
 
 declare class Fastboard extends SvelteComponentTyped<FastboardProps> {}

package/src/components/Icons/index.ts

@@ -105,7 +105,7 @@ const Icons = {
   MarkPen,
   MarkPenFilled,
   EraserBitmap,
-  EraserBitmapFilled
+  EraserBitmapFilled,
 };
 
 export default Icons;

package/src/helpers/index.ts

@@ -10,6 +10,30 @@ export interface UI {
   update(props?: FastboardProps): void;
   /** remove UI */
   destroy(): void;
+  /** force show toolbar */
+  forceShowToolbar(): void;
+  /** force hide toolbar */
+  forceHideToolbar(): void;
+  /** recover show toolbar */
+  recoverToolbar(): void;
+  /** force show redo undo */
+  forceShowRedoUndo(): void;
+  /** force hide redo undo */
+  forceHideRedoUndo(): void;
+  /** recover show redo undo */
+  recoverRedoUndo(): void;
+  /** force show zoom control */
+  forceShowZoomControl(): void;
+  /** force hide zoom control */
+  forceHideZoomControl(): void;
+  /** recover show zoom control */
+  recoverZoomControl(): void;
+  /** force show page control */
+  forceShowPageControl(): void;
+  /** force hide page control */
+  forceHidePageControl(): void;
+  /** recover show page control */
+  recoverPageControl(): void;
 }
 
 /**
@@ -27,7 +51,6 @@ export function createUI(app?: FastboardApp | null, div?: Element): UI {
       colors = floatBarOptions.colors as Color[];
     }
   }
-
   const ui: UI = {
     mount(div: Element, props?: FastboardProps) {
       if (fastboard) {
@@ -59,6 +82,66 @@ export function createUI(app?: FastboardApp | null, div?: Element): UI {
       }
       fastboard = undefined;
     },
+    forceShowToolbar() {
+      if (fastboard) {
+        fastboard.$set({ force_show_toolbar: true });
+      }
+    },
+    forceHideToolbar() {
+      if (fastboard) {
+        fastboard.$set({ force_show_toolbar: false });
+      }
+    },
+    recoverToolbar() {
+      if (fastboard) {
+        fastboard.$set({ force_show_toolbar: undefined });
+      }
+    },
+    forceShowPageControl() {
+      if (fastboard) {
+        fastboard.$set({ force_show_page_control: true });
+      }
+    },
+    forceHidePageControl() {
+      if (fastboard) {
+        fastboard.$set({ force_show_page_control: false });
+      }
+    },
+    recoverPageControl() {
+      if (fastboard) {
+        fastboard.$set({ force_show_page_control: undefined });
+      }
+    },
+    forceShowRedoUndo() {
+      if (fastboard) {
+        fastboard.$set({ force_show_redo_undo: true });
+      }
+    },
+    forceHideRedoUndo() {
+      if (fastboard) {
+        fastboard.$set({ force_show_redo_undo: false });
+      }
+    },
+    recoverRedoUndo() {
+      if (fastboard) {
+        fastboard.$set({ force_show_redo_undo: undefined });
+      }
+    },
+    forceShowZoomControl() {
+      if (fastboard) {
+        fastboard.$set({ force_show_zoom_control: true });
+      }
+    },
+    forceHideZoomControl() {
+      if (fastboard) {
+        fastboard.$set({ force_show_zoom_control: false });
+      }
+    },
+    recoverZoomControl() {
+      if (fastboard) {
+        fastboard.$set({ force_show_zoom_control: undefined });
+      }
+    },
   };
 
   if (div) {