@netless/fastboard-ui 0.3.2 → 0.3.4-canary.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/fastboard-ui",
-  "version": "0.3.2",
+  "version": "0.3.4-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": "0.3.2"
+    "@netless/fastboard-core": "0.3.4-canary.1"
   },
   "dependencies": {
     "tippy.js": "^6.3.7"
   },
   "devDependencies": {
     "@netless/esbuild-plugin-inline-sass": "0.1.0",
-    "@netless/fastboard-core": "0.3.2"
+    "@netless/fastboard-core": "0.3.4-canary.1"
   },
   "scripts": {
     "cleanup": "rimraf dist",
@@ -27,6 +27,5 @@
     "test:ssr": "esbuild-dev test/ssr.ts"
   },
   "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
-  "readme": "## @netless/fastboard-ui\n\nThe front-end of [@netless/fastboard-core](https://github.com/netless-io/fastboard/tree/main/packages/fastboard-core).\n\n### License\n\nMIT @ [netless](https://github.com/netless-io)\n"
+  "types": "dist/index.d.ts"
 }

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";
@@ -58,7 +60,7 @@
 </script>
 
 <div class="{name}-root" class:loading={!app}>
-  <div class="{name}-view" bind:this={container} on:touchstart|capture={tippy_hide_all} />
+  <div class="{name}-view" bind:this={container} on:touchstart|capture|passive={tippy_hide_all} />
   <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

@@ -1,3 +1,5 @@
+<svelte:options immutable />
+
 <script lang="ts">
   import type { FastboardPlayer } from "@netless/fastboard-core";
   import type { Language, Theme } from "../../typings";
@@ -36,7 +38,7 @@
 </script>
 
 <div class="{name}-root" class:loading={!player}>
-  <div class="{name}-view" bind:this={container} on:touchstart|capture={tippy_hide_all} />
+  <div class="{name}-view" bind:this={container} on:touchstart|capture|passive={tippy_hide_all} />
   <div class="{name}-bottom">
     <PlayerControl {player} {theme} {language} />
   </div>

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/components/Toolbar/components/Contents.svelte

@@ -18,6 +18,7 @@
   import StrokeColor from "./StrokeColor.svelte";
   import TextColor from "./TextColor.svelte";
   import Shapes from "./Shapes.svelte";
+  import { tippy_hide_all } from "../../../actions/tippy";
 
   export let app: FastboardApp | null | undefined = null;
   export let theme: Theme = "light";
@@ -180,6 +181,10 @@
     {#each $apps as netless_app}
       {@const { icon, label, kind, onClick } = netless_app}
       {@const state = $status && $status[kind]}
+      {@const on_click = () => {
+        app && onClick(app);
+        tippy_hide_all();
+      }}
       <button
         class="{name}-app-btn {kind} {theme}"
         class:is-loading={state && state.status === "loading"}
@@ -187,7 +192,7 @@
         title={label + (state && state.reason ? ": " + state.reason : "")}
         data-app-kind={netless_app.kind}
         disabled={state && state.status !== "idle"}
-        on:click={app && onClick.bind(null, app)}
+        on:click={on_click}
       >
         <img class="{name}-app-btn-icon {theme}" src={icon} alt={kind} title={label} />
         <span class="{name}-app-btn-text {theme}">{label}</span>

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>