@netless/fastboard-ui 1.0.0-canary.0 → 1.0.0-canary.1

package/package.json

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

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/Fastboard/Fastboard.svelte

@@ -61,10 +61,17 @@
       };
     }
   });
+
+  function focus_me() {
+    tippy_hide_all();
+    // workaround for some devices that enabled "windows ink"
+    let a = document.activeElement as HTMLElement | null;
+    a && a.blur && a.blur();
+  }
 </script>
 
 <div class="{name}-root" class:loading={!app}>
-  <div class="{name}-view" bind:this={container} on:touchstart|capture|passive={tippy_hide_all} />
+  <div class="{name}-view" bind:this={container} on:touchstart|capture={focus_me} />
   <div class="{name}-left" class:hidden={!(layout === "visible" || layout === "toolbar-only")}>
     {#if config.toolbar?.enable !== false}
       <Toolbar {app} {theme} {language} config={config.toolbar} />

package/src/components/Fastboard/ReplayFastboard.svelte

@@ -39,10 +39,17 @@
       };
     }
   });
+
+  function focus_me() {
+    tippy_hide_all();
+    // workaround for some devices that enabled "windows ink"
+    let a = document.activeElement as HTMLElement | null;
+    a && a.blur && a.blur();
+  }
 </script>
 
 <div class="{name}-root" class:loading={!player}>
-  <div class="{name}-view" bind:this={container} on:touchstart|capture|passive={tippy_hide_all} />
+  <div class="{name}-view" bind:this={container} on:touchstart|capture={focus_me} />
   <div class="{name}-bottom">
     <PlayerControl {player} {theme} {language} />
   </div>

package/src/components/ZoomControl/ZoomControl.svelte

@@ -57,8 +57,10 @@
 
   $: camera = app?.camera;
   $: 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}>