@netless/fastboard-ui 0.3.6 → 1.0.0-canary.2

package/package.json

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

package/src/actions/tippy.ts

@@ -19,7 +19,7 @@ if (is_client) {
             const el = instance.popper.firstElementChild;
             if (el) {
               el.classList.add("fastboard-tip");
-              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
               const extra = ((instance.props as any).className || "").trim();
               if (extra) {
                 el.classList.add(extra);
@@ -56,10 +56,14 @@ export const tippy: SvelteAction<Partial<Props & { className: string }>> = funct
 };
 
 export function tippy_hide_all() {
-  document.querySelectorAll("[data-tippy-root]").forEach(el => {
-    const instance = (el as unknown as { _tippy: Instance })._tippy;
-    if (instance) instance.hide();
-  });
+  document.querySelectorAll("[data-tippy-root]").forEach(tippy_hide);
+}
+
+export function tippy_hide(el: Element) {
+  const instance = (el as unknown as { _tippy: Instance })._tippy;
+  if (instance) {
+    instance.hide();
+  }
 }
 
 export const tippy_menu: Partial<Props> = {

package/src/behaviors/apps.ts

@@ -1,7 +1,7 @@
 import type { FastboardApp } from "@netless/fastboard-core";
-import code_editor_svg from "./icons/visual-studio-code.svg";
-import geogebra_svg from "./icons/geogebra.svg";
-import countdown_svg from "./icons/countdown.svg";
+// import code_editor_svg from "./icons/visual-studio-code.svg";
+// import geogebra_svg from "./icons/geogebra.svg";
+// import countdown_svg from "./icons/countdown.svg";
 
 export interface AppInToolbar {
   kind: string;
@@ -46,38 +46,4 @@ class AppsInToolbar {
 
 export type { AppsInToolbar };
 
-export const apps = new AppsInToolbar([
-  {
-    kind: "Monaco",
-    icon: code_editor_svg,
-    label: "Code Editor",
-    onClick(app) {
-      app.manager.addApp({
-        kind: "Monaco",
-        options: { title: "Code Editor" },
-      });
-    },
-  },
-  {
-    kind: "GeoGebra",
-    icon: geogebra_svg,
-    label: "GeoGebra",
-    onClick(app) {
-      app.manager.addApp({
-        kind: "GeoGebra",
-        options: { title: "GeoGebra" },
-      });
-    },
-  },
-  {
-    kind: "Countdown",
-    icon: countdown_svg,
-    label: "Countdown",
-    onClick(app) {
-      app.manager.addApp({
-        kind: "Countdown",
-        options: { title: "Countdown" },
-      });
-    },
-  },
-]);
+export const apps = new AppsInToolbar([]);

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

@@ -18,8 +18,7 @@ export declare interface ButtonEvents {
 }
 
 export declare interface ButtonSlots {
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  default: {};
+  default: any;
 }
 
 declare class Button extends SvelteComponentTyped<ButtonProps, ButtonEvents, ButtonSlots> {}

package/src/components/Fastboard/Fastboard.svelte

@@ -79,15 +79,15 @@
   </div>
   <div class="{name}-bottom-left" class:hidden={layout !== "visible"}>
     {#if config.redo_undo?.enable !== false}
-      <RedoUndo {app} {theme} {language} />
+      <RedoUndo {app} {theme} {language} icons={config.redo_undo?.icons} />
     {/if}
     {#if config.zoom_control?.enable !== false}
-      <ZoomControl {app} {theme} {language} />
+      <ZoomControl {app} {theme} {language} icons={config.zoom_control?.icons} />
     {/if}
   </div>
   <div class="{name}-bottom-right" class:hidden={layout !== "visible"}>
     {#if config.page_control?.enable !== false}
-      <PageControl {app} {theme} {language} />
+      <PageControl {app} {theme} {language} icons={config.page_control?.icons} />
     {/if}
   </div>
 </div>

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

@@ -1,5 +1,5 @@
 import type { FastboardApp } from "@netless/fastboard-core";
-import type { Theme, Language, FastboardUIConfig } from "../../typings";
+import type { FastboardUIConfig, Language, Theme } from "../../typings";
 import { SvelteComponentTyped } from "svelte";
 
 export declare interface FastboardProps {

package/src/components/Fastboard/ReplayFastboard.svelte

@@ -2,7 +2,7 @@
 
 <script lang="ts">
   import type { FastboardPlayer } from "@netless/fastboard-core";
-  import type { Language, Theme } from "../../typings";
+  import type { Language, ReplayFastboardUIConfig, Theme } from "../../typings";
   import { onMount } from "svelte";
   import { tippy_hide_all } from "../../actions/tippy";
   import PlayerControl from "../PlayerControl";
@@ -10,6 +10,7 @@
   export let player: FastboardPlayer | null | undefined = null;
   export let theme: Theme = "light";
   export let language: Language = "en";
+  export let config: ReplayFastboardUIConfig = {};
   export let containerRef: ((element: HTMLDivElement | null) => void) | undefined = undefined;
 
   const name = "fastboard";
@@ -51,6 +52,8 @@
 <div class="{name}-root" class:loading={!player}>
   <div class="{name}-view" bind:this={container} on:touchstart|capture={focus_me} />
   <div class="{name}-bottom">
-    <PlayerControl {player} {theme} {language} />
+    {#if config.player_control?.enable !== false}
+      <PlayerControl {player} {theme} {language} icons={config.player_control?.icons} />
+    {/if}
   </div>
 </div>

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

@@ -1,11 +1,12 @@
 import type { FastboardPlayer } from "@netless/fastboard-core";
-import type { Theme, Language } from "../../typings";
+import type { Language, ReplayFastboardUIConfig, Theme } from "../../typings";
 import { SvelteComponentTyped } from "svelte";
 
 export declare interface ReplayFastboardProps {
   player?: FastboardPlayer | null;
   theme?: Theme;
   language?: Language;
+  config?: ReplayFastboardUIConfig;
   containerRef?: (container: HTMLDivElement | null) => void;
 }
 

package/src/components/PageControl/PageControl.svelte

@@ -34,8 +34,8 @@
   let type: IconType;
   $: type = disabled ? "disable" : "normal";
 
-  $: index = app?.sceneIndex;
-  $: length = app?.sceneLength;
+  $: index = app?.pageIndex;
+  $: length = app?.pageLength;
   $: prev_disabled = disabled || !$index;
   $: next_disabled = disabled || $length == null || $index === $length - 1;
 

package/src/components/Toolbar/README.md

@@ -52,6 +52,6 @@ The `computed_height` is calculated by:
 
 ```js
 const max_height = button_height * 2 + scrollable_area_full_height;
-let full_height = container.height;
+const full_height = container.height;
 computed_height = full_height < max_height ? full_height : max_height;
 ```

package/src/components/Toolbar/Toolbar.scss

@@ -25,7 +25,7 @@ $name: "fastboard-toolbar";
   cursor: pointer;
   pointer-events: auto;
 
-  &:focus-within {
+  &:focus-visible {
     outline: 2px solid -webkit-focus-ring-color;
   }
 

package/src/components/Toolbar/Toolbar.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { FastboardApp } from "@netless/fastboard-core";
-  import type { Language, Theme, ToolbarConfig } from "../../typings";
+  import type { Language, Theme } from "../../typings";
+  import type { ToolbarConfig } from ".";
   import { writable as svelte_writable } from "svelte/store";
   import { height } from "../../actions/height";
   import { clamp } from "../helpers";

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

@@ -1,7 +1,13 @@
 import type { FastboardApp } from "@netless/fastboard-core";
-import type { Theme, Language, ToolbarConfig } from "../../typings";
+import type { Theme, Language } from "../../typings";
 import { SvelteComponentTyped } from "svelte";
 
+export declare interface ToolbarConfig {
+  apps?: {
+    enable?: boolean;
+  };
+}
+
 export declare interface ToolbarProps {
   app?: FastboardApp | null;
   theme?: Theme;

package/src/components/Toolbar/components/constants.ts

@@ -28,7 +28,6 @@ export type Shape = typeof shapes[number];
 
 export const applianceShapes = shapes.slice(0, 4) as Appliance[];
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const shapesIcon: Record<Shape, any> = {
   rectangle: Icons.Rectangle,
   ellipse: Icons.Circle,
@@ -40,7 +39,6 @@ export const shapesIcon: Record<Shape, any> = {
   speechBalloon: Icons.Balloon,
 };
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const shapesIconActive: Record<Shape, any> = {
   rectangle: Icons.RectangleBolded,
   ellipse: Icons.CircleBolded,

package/src/components/Toolbar/components/helper.ts

@@ -1,5 +1,5 @@
 import type { HotKey } from "@netless/fastboard-core";
-import { element, attr, append } from "svelte/internal";
+import { append, attr, element } from "svelte/internal";
 
 /**
  * ```svelte

package/src/components/ZoomControl/ZoomControl.svelte

@@ -55,10 +55,12 @@
   let type: IconType;
   $: type = disabled ? "disable" : "normal";
 
-  $: camera = app?.camera;
+  $: camera = app?.baseCamera;
   $: scale = $camera?.scale ?? 1;
-  $: plus_disabled = disabled || next_scale(scale, 1) === scale;
-  $: minus_disabled = disabled || next_scale(scale, -1) === scale;
+  $: plus_disabled = disabled || next_scale(scale, 1) <= scale;
+  $: minus_disabled = disabled || next_scale(scale, -1) >= scale;
+
+  $: display_scale = clamp(Math.round(scale * 100), 30, 300);
 
   function plus() {
     app?.moveCamera({ scale: next_scale(scale, 1), centerX: 0, centerY: 0 });
@@ -83,7 +85,7 @@
     {#if $camera == null}
       &hellip;
     {:else}
-      {Math.ceil(scale * 100)}%
+      {display_scale}%
     {/if}
   </span>
   <Button class="minus" {name} {theme} disabled={minus_disabled} on:click={minus} content={t.minus}>

package/src/helpers/index.ts

@@ -10,6 +10,8 @@ export interface UI {
   update(props?: FastboardProps): void;
   /** remove UI */
   destroy(): void;
+  /** div == null ? destroy() : mount() */
+  setElement(div: Element | null): void;
 }
 
 /**
@@ -20,29 +22,39 @@ export interface UI {
 export function createUI(app?: FastboardApp | null, div?: Element): UI {
   let fastboard: Fastboard | undefined;
 
-  const ui: UI = {
-    mount(div: Element, props?: FastboardProps) {
-      if (fastboard) {
-        fastboard.$destroy();
-      }
-      fastboard = new Fastboard({ target: div, props: { app, ...props } });
-      return ui;
-    },
-    update(props?: FastboardProps) {
-      if (fastboard) {
-        fastboard.$set(props);
-      }
-    },
-    destroy() {
-      if (fastboard) {
-        fastboard.$destroy();
-      }
-      fastboard = undefined;
-    },
-  };
+  function mount(div: Element, props?: FastboardProps) {
+    if (fastboard) {
+      fastboard.$destroy();
+    }
+    fastboard = new Fastboard({ target: div, props: { app, ...props } });
+    return ui;
+  }
+
+  function update(props?: FastboardProps) {
+    if (fastboard) {
+      fastboard.$set(props);
+    }
+  }
+
+  function destroy() {
+    if (fastboard) {
+      fastboard.$destroy();
+    }
+    fastboard = undefined;
+  }
+
+  function setElement(div: Element | null) {
+    if (div) {
+      mount(div);
+    } else {
+      destroy();
+    }
+  }
+
+  const ui: UI = { mount, update, destroy, setElement };
 
   if (div) {
-    ui.mount(div, { app });
+    mount(div, { app });
   }
 
   return ui;
@@ -55,6 +67,8 @@ export interface ReplayUI {
   update(props?: ReplayFastboardProps): void;
   /** remove UI */
   destroy(): void;
+  /** div == null ? destroy() : mount() */
+  setElement(div: Element | null): void;
 }
 
 /**
@@ -65,29 +79,39 @@ export interface ReplayUI {
 export function createReplayUI(player?: FastboardPlayer | null, div?: Element): ReplayUI {
   let fastboard: ReplayFastboard | undefined;
 
-  const ui: ReplayUI = {
-    mount(div: Element, props?: ReplayFastboardProps) {
-      if (fastboard) {
-        fastboard.$destroy();
-      }
-      fastboard = new ReplayFastboard({ target: div, props: { player, ...props } });
-      return ui;
-    },
-    update(props?: ReplayFastboardProps) {
-      if (fastboard) {
-        fastboard.$set(props);
-      }
-    },
-    destroy() {
-      if (fastboard) {
-        fastboard.$destroy();
-      }
-      fastboard = undefined;
-    },
-  };
+  function mount(div: Element, props?: ReplayFastboardProps) {
+    if (fastboard) {
+      fastboard.$destroy();
+    }
+    fastboard = new ReplayFastboard({ target: div, props: { player, ...props } });
+    return ui;
+  }
+
+  function update(props?: ReplayFastboardProps) {
+    if (fastboard) {
+      fastboard.$set(props);
+    }
+  }
+
+  function destroy() {
+    if (fastboard) {
+      fastboard.$destroy();
+    }
+    fastboard = undefined;
+  }
+
+  function setElement(div: Element | null) {
+    if (div) {
+      mount(div);
+    } else {
+      destroy();
+    }
+  }
+
+  const ui: ReplayUI = { mount, update, destroy, setElement };
 
   if (div) {
-    ui.mount(div, { player });
+    mount(div, { player });
   }
 
   return ui;

package/src/index.ts

@@ -1,3 +1,5 @@
+import "./style.scss";
+
 export * from "./typings";
 
 export { default as RedoUndo, type RedoUndoProps } from "./components/RedoUndo";
@@ -5,10 +7,12 @@ export { default as PageControl, type PageControlProps } from "./components/Page
 export { default as ZoomControl, type ZoomControlProps } from "./components/ZoomControl";
 export { default as Toolbar, type ToolbarProps } from "./components/Toolbar";
 export { default as PlayerControl, type PlayerControlProps } from "./components/PlayerControl";
-export { Fastboard, ReplayFastboard } from "./components/Fastboard";
-export type { FastboardProps, ReplayFastboardProps } from "./components/Fastboard";
+export {
+  Fastboard,
+  ReplayFastboard,
+  type FastboardProps,
+  type ReplayFastboardProps,
+} from "./components/Fastboard";
 
 export * from "./helpers";
 export * from "./behaviors";
-
-import "./style.scss";

package/src/style.scss

@@ -34,3 +34,7 @@
     padding: 8px;
   }
 }
+
+.netless-whiteboard:focus-visible {
+  outline: none;
+}

package/src/typings.ts

@@ -1,3 +1,9 @@
+import type { PageControlProps } from "./components/PageControl";
+import type { PlayerControlProps } from "./components/PlayerControl";
+import type { RedoUndoProps } from "./components/RedoUndo";
+import type { ToolbarConfig } from "./components/Toolbar";
+import type { ZoomControlProps } from "./components/ZoomControl";
+
 export interface SvelteAction<T = void> {
   (node: HTMLElement, parameters: T): void | {
     update?: (parameters: T) => void;
@@ -16,23 +22,27 @@ export type GenericIcon<K extends string, E extends string = IconType> = {
 
 export type I18nData<T extends string> = Record<Language, Record<T, string>>;
 
-export interface ToolbarConfig {
-  apps?: {
-    enable?: boolean;
-  };
-}
-
 export interface FastboardUIConfig {
   toolbar?: {
     enable?: boolean;
   } & ToolbarConfig;
   redo_undo?: {
     enable?: boolean;
+    icons?: RedoUndoProps["icons"];
   };
   zoom_control?: {
     enable?: boolean;
+    icons?: ZoomControlProps["icons"];
   };
   page_control?: {
     enable?: boolean;
+    icons?: PageControlProps["icons"];
+  };
+}
+
+export interface ReplayFastboardUIConfig {
+  player_control?: {
+    enable?: boolean;
+    icons?: PlayerControlProps["icons"];
   };
 }