@netless/fastboard-ui 0.3.3 → 0.3.4-canary.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/fastboard-ui",
-  "version": "0.3.3",
+  "version": "0.3.4-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.3"
+    "@netless/fastboard-core": "0.3.4-canary.2"
   },
   "dependencies": {
     "tippy.js": "^6.3.7"
   },
   "devDependencies": {
     "@netless/esbuild-plugin-inline-sass": "0.1.0",
-    "@netless/fastboard-core": "0.3.3"
+    "@netless/fastboard-core": "0.3.4-canary.2"
   },
   "scripts": {
     "cleanup": "rimraf dist",

package/src/behaviors/apps.ts

@@ -52,7 +52,10 @@ export const apps = new AppsInToolbar([
     icon: code_editor_svg,
     label: "Code Editor",
     onClick(app) {
-      app.insertCodeEditor();
+      app.manager.addApp({
+        kind: "Monaco",
+        options: { title: "Code Editor" },
+      });
     },
   },
   {
@@ -60,7 +63,10 @@ export const apps = new AppsInToolbar([
     icon: geogebra_svg,
     label: "GeoGebra",
     onClick(app) {
-      app.insertGeoGebra();
+      app.manager.addApp({
+        kind: "GeoGebra",
+        options: { title: "GeoGebra" },
+      });
     },
   },
   {
@@ -68,7 +74,10 @@ export const apps = new AppsInToolbar([
     icon: countdown_svg,
     label: "Countdown",
     onClick(app) {
-      app.insertCountdown();
+      app.manager.addApp({
+        kind: "Countdown",
+        options: { title: "Countdown" },
+      });
     },
   },
 ]);

package/src/components/Fastboard/Fastboard.svelte

@@ -1,3 +1,5 @@
+<svelte:options immutable />
+
 <script lang="ts">
   import type { FastboardApp } from "@netless/fastboard-core";
   import type { Language, Theme, FastboardUIConfig } from "../../typings";
@@ -19,6 +21,7 @@
 
   let container: HTMLDivElement;
   let layout: "hidden" | "toolbar-only" | "visible" = "hidden";
+  let mounted = false;
 
   $: writable = app?.writable;
   $: boxState = app?.boxState;
@@ -37,13 +40,16 @@
   }
 
   $: try {
-    if (app && container) app.bindContainer(container);
+    if (app && container) {
+      app.bindContainer(container);
+      mounted = true;
+    }
   } catch (err) {
     console.error("[fastboard] An error occurred while binding container");
     console.error(err);
   }
 
-  $: if (app && theme) {
+  $: if (app && theme && mounted) {
     app.manager.setPrefersColorScheme(theme);
   }
 

package/src/components/Fastboard/ReplayFastboard.svelte

@@ -1,3 +1,5 @@
+<svelte:options immutable />
+
 <script lang="ts">
   import type { FastboardPlayer } from "@netless/fastboard-core";
   import type { Language, Theme } from "../../typings";
@@ -13,15 +15,19 @@
   const name = "fastboard";
 
   let container: HTMLDivElement;
+  let mounted = false;
 
   $: try {
-    if (player && container) player.bindContainer(container);
+    if (player && container) {
+      player.bindContainer(container);
+      mounted = true;
+    }
   } catch (err) {
     console.error("[fastboard] An error occurred while binding container");
     console.error(err);
   }
 
-  $: if (player && theme) {
+  $: if (player && theme && mounted) {
     player.manager.setPrefersColorScheme(theme);
   }
 

package/src/components/Icons/Clear.svelte

@@ -7,10 +7,24 @@
 
 <svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
   <path
+    d="M19.6567 4.34323L13.9999 10.0001"
     stroke="#5D6066"
+    stroke-width="1.25"
+    stroke-linejoin="round"
+    class="fastboard-icon-stroke-color"
+  />
+  <path
+    d="M8.34296 10.0001C9.90506 8.43799 12.4377 8.43799 13.9998 10.0001V10.0001C15.5619 11.5622 15.5619 14.0948 13.9998 15.6569V15.6569L8.34296 10.0001V10.0001Z"
+    stroke="#5D6066"
+    stroke-width="1.25"
     stroke-linejoin="round"
+    class="fastboard-icon-stroke-color"
+  />
+  <path
+    d="M8.34292 10.0001L13.9998 15.6569L11.5856 19.8996L4.10028 11.4143L8.34292 10.0001Z"
+    stroke="#5D6066"
     stroke-width="1.25"
-    d="m17.95 4.636-2.83 2.828-1.413-1.414a2 2 0 0 0-2.829 0l-.707.707 7.071 7.071.707-.707a2 2 0 0 0 0-2.828l-1.414-1.414 2.829-2.829-1.415-1.414Zm-1.415 9.9-5.656 5.656-.707-.707 1.767-3.182-3.182 1.768.707-2.121-2.121.707 1.768-3.182-3.182 1.768.707-2.122-2.121.707-.707-.707 5.656-5.657"
+    stroke-linejoin="round"
     class="fastboard-icon-stroke-color"
   />
 </svg>

package/src/components/Icons/index.ts

@@ -5,7 +5,6 @@ import Balloon from "./Balloon.svelte";
 import BalloonBolded from "./BalloonBolded.svelte";
 import Circle from "./Circle.svelte";
 import CircleBolded from "./CircleBolded.svelte";
-import Clean from "./Clean.svelte";
 import Clear from "./Clear.svelte";
 import Click from "./Click.svelte";
 import ClickFilled from "./ClickFilled.svelte";
@@ -51,7 +50,6 @@ const Icons = {
   BalloonBolded,
   Circle,
   CircleBolded,
-  Clean,
   Clear,
   Click,
   ClickFilled,

package/src/helpers/index.ts

@@ -0,0 +1,94 @@
+import type { FastboardApp, FastboardPlayer } from "@netless/fastboard-core";
+import type { FastboardProps, ReplayFastboardProps } from "../components/Fastboard";
+
+import { Fastboard, ReplayFastboard } from "../components/Fastboard";
+
+export 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" })
+ */
+export function createUI(app: FastboardApp, div?: Element): UI {
+  let fastboard: Fastboard | undefined;
+
+  const ui: UI = {
+    mount(div: Element, props?: Omit<FastboardProps, "app">) {
+      if (fastboard) {
+        fastboard.$destroy();
+      }
+      fastboard = new Fastboard({ target: div, props: { app, ...props } });
+      return ui;
+    },
+    update(props?: Omit<FastboardProps, "app">) {
+      if (fastboard) {
+        fastboard.$set(props);
+      }
+    },
+    destroy() {
+      if (fastboard) {
+        fastboard.$destroy();
+      }
+      fastboard = undefined;
+    },
+  };
+
+  if (div) {
+    ui.mount(div);
+  }
+
+  return ui;
+}
+
+export 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" })
+ */
+export function createReplayUI(player: FastboardPlayer, div?: Element): ReplayUI {
+  let fastboard: ReplayFastboard | undefined;
+
+  const ui: ReplayUI = {
+    mount(div: Element, props?: Omit<ReplayFastboardProps, "player">) {
+      if (fastboard) {
+        fastboard.$destroy();
+      }
+      fastboard = new ReplayFastboard({ target: div, props: { player, ...props } });
+      return ui;
+    },
+    update(props?: Omit<ReplayFastboardProps, "player">) {
+      if (fastboard) {
+        fastboard.$set(props);
+      }
+    },
+    destroy() {
+      if (fastboard) {
+        fastboard.$destroy();
+      }
+      fastboard = undefined;
+    },
+  };
+
+  if (div) {
+    ui.mount(div);
+  }
+
+  return ui;
+}

package/src/index.ts

@@ -8,6 +8,7 @@ export { default as PlayerControl, type PlayerControlProps } from "./components/
 export { Fastboard, ReplayFastboard } from "./components/Fastboard";
 export type { FastboardProps, ReplayFastboardProps } from "./components/Fastboard";
 
+export * from "./helpers";
 export * from "./behaviors";
 
 import "./style.scss";

package/src/components/Icons/Clean.svelte

@@ -1,14 +0,0 @@
-<script lang="ts">
-  import type { Theme } from "../../typings";
-
-  export let theme: Theme = "light";
-  export let active = false;
-</script>
-
-<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
-  <path
-    fill="#5D6066"
-    d="M9.754 11.99c0 1.856-.711 3.62-1.96 4.951l-.151.155h1.403l.855-.853h.707l.853.853h2.635l.094-.064a6.237 6.237 0 0 0 2.559-4.781l.005-.26h1a7.237 7.237 0 0 1-2.994 5.862l-.229.16-.277.083h-3l-.353-.146-.647-.647-.646.647-.354.146h-3l-.286-.91.214-.148a6.237 6.237 0 0 0 2.567-4.787l.005-.26h1Zm4.772-6.502v2l.35.039a2.98 2.98 0 0 1 2.644 2.78l.006.181h-8a2.98 2.98 0 0 1 2.65-2.961l.35-.039v-2h2Z"
-    class="fastboard-icon-fill-color"
-  />
-</svg>