@netless/fastboard-ui 0.3.0-canary.2 → 0.3.0-canary.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/fastboard-ui",
-  "version": "0.3.0-canary.2",
+  "version": "0.3.0-canary.5",
   "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.2"
+    "@netless/fastboard-core": "0.3.0-canary.5"
   },
   "dependencies": {
     "tippy.js": "^6.3.7"
   },
   "devDependencies": {
     "@netless/esbuild-plugin-inline-sass": "0.1.0",
-    "@netless/fastboard-core": "0.3.0-canary.2"
+    "@netless/fastboard-core": "0.3.0-canary.5"
   },
   "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";
@@ -9,18 +11,26 @@
   export let app: FastboardApp | null | undefined = null;
   export let theme: Theme = "light";
   export let language: Language = "en";
-  export let ref: ((element: HTMLDivElement | null) => void) | undefined = undefined;
+  export let containerRef: ((element: HTMLDivElement | null) => void) | undefined = undefined;
 
   const name = "fastboard";
 
   let container: HTMLDivElement;
 
   $: if (app && container) app.bindContainer(container);
-  $: if (ref) ref(container || null);
+
+  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/Fastboard.svelte.ts

@@ -6,7 +6,7 @@ export declare interface FastboardProps {
   app?: FastboardApp | null;
   theme?: Theme;
   language?: Language;
-  ref?: (container: HTMLDivElement | null) => void;
+  containerRef?: (container: HTMLDivElement | null) => void;
 }
 
 declare class Fastboard extends SvelteComponentTyped<FastboardProps> {}

package/src/components/Fastboard/ReplayFastboard.svelte

@@ -1,23 +1,24 @@
 <script lang="ts">
   import type { FastboardPlayer } from "@netless/fastboard-core";
   import type { Language, Theme } from "../../typings";
+  import { tippy_hide_all } from "../../actions/tippy";
   import PlayerControl from "../PlayerControl";
 
   export let player: FastboardPlayer | null | undefined = null;
   export let theme: Theme = "light";
   export let language: Language = "en";
-  export let ref: ((element: HTMLDivElement | null) => void) | undefined = undefined;
+  export let containerRef: ((element: HTMLDivElement | null) => void) | undefined = undefined;
 
   const name = "fastboard";
 
   let container: HTMLDivElement;
 
   $: if (player && container) player.bindContainer(container);
-  $: if (ref) ref(container || null);
+  $: if (containerRef) containerRef(container || 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/Fastboard/ReplayFastboard.svelte.ts

@@ -6,7 +6,7 @@ export declare interface ReplayFastboardProps {
   player?: FastboardPlayer | null;
   theme?: Theme;
   language?: Language;
-  ref?: (container: HTMLDivElement | null) => void;
+  containerRef?: (container: HTMLDivElement | null) => void;
 }
 
 declare class ReplayFastboard extends SvelteComponentTyped<ReplayFastboardProps> {}

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