@netless/fastboard-ui 0.3.0-canary.4 → 0.3.0-canary.7

package/package.json

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

package/src/actions/tippy.ts

@@ -64,6 +64,7 @@ export function tippy_hide_all() {
 
 export const tippy_menu: Partial<Props> = {
   delay: 0,
+  duration: [50, 300],
   placement: "right-start",
   interactive: true,
   trigger: "click",

package/src/behaviors/index.ts

@@ -26,8 +26,8 @@ class AppsInToolbar {
       this._listeners = this._listeners.filter(item => item !== fn);
     };
   }
-  push(data: AppInToolbar) {
-    this._data.push(data);
+  push(...data: AppInToolbar[]) {
+    this._data.push(...data);
     this._listeners.forEach(fn => fn(this._data));
   }
   insert(data: AppInToolbar, index: number) {

package/src/components/Fastboard/Fastboard.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { FastboardApp } from "@netless/fastboard-core";
   import type { Language, Theme } from "../../typings";
+  import { onMount } from "svelte";
   import { tippy_hide_all } from "../../actions/tippy";
   import RedoUndo from "../RedoUndo";
   import ZoomControl from "../ZoomControl";
@@ -16,8 +17,25 @@
 
   let container: HTMLDivElement;
 
-  $: if (app && container) app.bindContainer(container);
-  $: if (containerRef) containerRef(container || null);
+  $: try {
+    if (app && container) app.bindContainer(container);
+  } catch (err) {
+    console.error("[fastboard] An error occurred while binding container");
+    console.error(err);
+  }
+
+  $: if (app && theme) {
+    app.manager.setPrefersColorScheme(theme);
+  }
+
+  onMount(() => {
+    if (containerRef) {
+      containerRef(container);
+      return () => {
+        if (containerRef) containerRef(null);
+      };
+    }
+  });
 </script>
 
 <div class="{name}-root" class:loading={!app}>

package/src/components/Fastboard/ReplayFastboard.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { FastboardPlayer } from "@netless/fastboard-core";
   import type { Language, Theme } from "../../typings";
+  import { onMount } from "svelte";
   import { tippy_hide_all } from "../../actions/tippy";
   import PlayerControl from "../PlayerControl";
 
@@ -13,8 +14,25 @@
 
   let container: HTMLDivElement;
 
-  $: if (player && container) player.bindContainer(container);
-  $: if (containerRef) containerRef(container || null);
+  $: try {
+    if (player && container) player.bindContainer(container);
+  } catch (err) {
+    console.error("[fastboard] An error occurred while binding container");
+    console.error(err);
+  }
+
+  $: if (player && theme) {
+    player.manager.setPrefersColorScheme(theme);
+  }
+
+  onMount(() => {
+    if (containerRef) {
+      containerRef(container);
+      return () => {
+        if (containerRef) containerRef(null);
+      };
+    }
+  });
 </script>
 
 <div class="{name}-root" class:loading={!player}>

package/src/components/PageControl/PageControl.svelte

@@ -49,6 +49,7 @@
 
   function addPage() {
     app?.addPage({ after: true });
+    app?.nextPage();
   }
 </script>
 

package/src/components/PlayerControl/PlayerControl.svelte

@@ -132,7 +132,7 @@
     menu={speed_panel}
     menu_placement="top-end"
   >
-    <span class="{name}-speed-text">{$speed}x</span>
+    <span class="{name}-speed-text">{$speed || 1}x</span>
   </Button>
 </div>
 

package/src/components/Toolbar/components/Contents.scss

@@ -112,14 +112,15 @@ $name: "fastboard-toolbar";
 
 .#{$name}-panel.apps {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(min(var(--n, 3), 3), minmax(max-content, 1fr));
   gap: 4px;
 }
 
 .#{$name}-app-btn {
   margin: 0;
   border: 0;
-  padding: 4px;
+  border-radius: 2px;
+  padding: 4px 6px;
   background-color: transparent;
   display: inline-flex;
   flex-direction: column;
@@ -139,6 +140,7 @@ $name: "fastboard-toolbar";
 
   &-text {
     font-size: 14px;
+    line-height: 1;
     max-width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;

package/src/components/Toolbar/components/Contents.svelte

@@ -51,9 +51,16 @@
   $: shape = $memberState?.shapeType;
   $: status = app?.appsStatus;
 
-  let top = writable(0);
+  $: if (applianceShapes.includes(appliance as Appliance)) {
+    last_shape = appliance as Shape;
+  } else if (shape) {
+    last_shape = shape;
+  }
+
   $: max_scroll = scrollable ? $scroll_height + (32 + 8) * 2 - computed_height : 0;
 
+  let top = writable(0);
+
   function scroll_up() {
     $top = clamp($top - 32 - 4, 0, max_scroll);
   }
@@ -80,11 +87,6 @@
       app?.setAppliance("shape", last_shape as Exclude<Shape, Appliance>);
     }
   }
-  $: if (applianceShapes.includes(appliance as Appliance)) {
-    last_shape = appliance as Shape;
-  } else if (shape) {
-    last_shape = shape;
-  }
   function eraser() {
     app?.setAppliance("eraser");
   }
@@ -170,8 +172,8 @@
     <div class="{name}-panel-divider" />
     <StrokeColor {app} {theme} {disabled} />
   </div>
-  <div class="{name}-panel apps" bind:this={apps_panel}>
-    {#each apps.data as netless_app (netless_app.kind)}
+  <div class="{name}-panel apps" style="--n:{$apps.length}" bind:this={apps_panel}>
+    {#each $apps as netless_app}
       {@const { icon, label, kind, onClick } = netless_app}
       {@const state = $status && $status[kind]}
       <button