@netless/fastboard-ui 0.3.0-canary.3 → 0.3.0-canary.6

package/package.json

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

package/src/components/Fastboard/Fastboard.svelte

@@ -1,6 +1,8 @@
 <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";
   import PageControl from "../PageControl";
@@ -15,12 +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);
+  }
+
+  onMount(() => {
+    if (containerRef) {
+      containerRef(container);
+      return () => {
+        if (containerRef) containerRef(null);
+      };
+    }
+  });
 </script>
 
 <div class="{name}-root" class:loading={!app}>
-  <div class="{name}-view" bind:this={container} />
+  <div class="{name}-view" bind:this={container} on:touchstart|capture={tippy_hide_all} />
   <div class="{name}-left">
     <Toolbar {app} {theme} {language} />
   </div>

package/src/components/Fastboard/ReplayFastboard.svelte

@@ -1,6 +1,8 @@
 <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";
 
   export let player: FastboardPlayer | null | undefined = null;
@@ -12,12 +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);
+  }
+
+  onMount(() => {
+    if (containerRef) {
+      containerRef(container);
+      return () => {
+        if (containerRef) containerRef(null);
+      };
+    }
+  });
 </script>
 
 <div class="{name}-root" class:loading={!player}>
-  <div class="{name}-view" bind:this={container} />
+  <div class="{name}-view" bind:this={container} on:touchstart|capture={tippy_hide_all} />
   <div class="{name}-bottom">
     <PlayerControl {player} {theme} {language} />
   </div>

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");
   }