@netless/fastboard-ui 0.3.23-beta.0 → 1.0.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/fastboard-ui",
-  "version": "0.3.23-beta.0",
+  "version": "1.0.0-beta.0",
   "description": "The front-end of @netless/fastboard-core.",
   "main": "dist/index.js",
   "svelte": "dist/index.svelte.mjs",
@@ -11,14 +11,14 @@
   ],
   "repository": "netless-io/fastboard",
   "peerDependencies": {
-    "@netless/fastboard-core": "0.3.23-beta.0"
+    "@netless/fastboard-core": "1.0.0-beta.0"
   },
   "dependencies": {
     "tippy.js": "^6.3.7"
   },
   "devDependencies": {
     "@netless/buildtool": "0.1.0",
-    "@netless/fastboard-core": "0.3.23-beta.0",
+    "@netless/fastboard-core": "1.0.0-beta.0",
     "@netless/esbuild-plugin-inline-sass": "0.1.0"
   },
   "scripts": {

package/src/components/Icons/LaserPen.svelte

@@ -0,0 +1,20 @@
+<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}>
+  <g stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" transform="rotate(0 10 10)">
+    <path
+      class="fastboard-icon-stroke-color"
+      clip-rule="evenodd"
+      d="m9.644 13.69 7.774-7.773a2.357 2.357 0 0 0-3.334-3.334l-7.773 7.774L8 12l1.643 1.69Z"
+    />
+    <path
+      class="fastboard-icon-stroke-color"
+      d="m13.25 3.417 3.333 3.333M10 10l2-2M5 15l3-3M2.156 17.894l1-1M5.453 19.029l-.144-1.407M2.377 11.887l.866 1.118M8.354 17.273l-1.194-.758M.953 14.652l1.408.13"
+    />
+  </g>
+</svg>

package/src/components/Icons/LaserPenFilled.svelte

@@ -0,0 +1,20 @@
+<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}>
+  <g stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" transform="rotate(0 10 10)">
+    <path
+      class="fastboard-icon-fill-color"
+      clip-rule="evenodd"
+      d="m9.644 13.69 7.774-7.773a2.357 2.357 0 0 0-3.334-3.334l-7.773 7.774L8 12l1.643 1.69Z"
+    />
+    <path
+      class="fastboard-icon-stroke-color"
+      d="m13.25 3.417 3.333 3.333M10 10l2-2M5 15l3-3M2.156 17.894l1-1M5.453 19.029l-.144-1.407M2.377 11.887l.866 1.118M8.354 17.273l-1.194-.758M.953 14.652l1.408.13"
+    />
+  </g>
+</svg>

package/src/components/Icons/index.ts

@@ -45,6 +45,8 @@ import WhiteboardAdd from "./WhiteboardAdd.svelte";
 import Play from "./Play.svelte";
 import Pause from "./Pause.svelte";
 import Loading from "./Loading.svelte";
+import LaserPen from "./LaserPen.svelte";
+import LaserPenFilled from "./LaserPenFilled.svelte";
 
 const Icons = {
   Apps,
@@ -94,6 +96,8 @@ const Icons = {
   Play,
   Pause,
   Loading,
+  LaserPen,
+  LaserPenFilled,
 };
 
 export default Icons;

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

@@ -60,6 +60,15 @@ $name: "fastboard-toolbar";
   display: none;
 }
 
+.#{$name}-panel-switch-pencil {
+  display: flex;
+}
+
+.#{$name}-panel-switch-btn {
+  width: 24px;
+  height: 24px;
+}
+
 .#{$name}-panel {
   display: flex;
   flex-direction: column;

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { FastboardApp } from "@netless/fastboard-core";
+  import type { FastboardApp, ExtendMemberState } from "@netless/fastboard-core";
   import type { Writable } from "svelte/store";
   import type { Language, Theme, ToolbarItem } from "../../../typings";
   import { writable } from "svelte/store";
@@ -74,6 +74,9 @@
 
   $: max_scroll = scrollable ? $scroll_height + (32 + 8) * 2 - computed_height : 0;
 
+  $: hasAppliancePlugin = !!app?.appliancePlugin;
+  $: hasUseLaserPen = (hasAppliancePlugin && ($memberState as ExtendMemberState)?.useLaserPen) || false;
+
   let top = writable(0);
 
   function scroll_up() {
@@ -107,6 +110,9 @@
   function clear() {
     app?.cleanCurrentScene();
   }
+  function useLaserPen() {
+    app?.setAppliance("laserPen");
+  }
 </script>
 
 {#if scrollable}
@@ -121,7 +127,15 @@
     {:else if item === "selector"}
       <Selector {appliance} {theme} {btn_props} on:click={selector} content={c.selector} />
     {:else if item === "pencil"}
-      <Pencil {appliance} {theme} {btn_props} on:click={pencil} content={c.pencil} menu={pencil_panel} />
+      <Pencil
+        {hasUseLaserPen}
+        {appliance}
+        {theme}
+        {btn_props}
+        on:click={pencil}
+        content={c.pencil}
+        menu={pencil_panel}
+      />
     {:else if item === "text"}
       <Text {appliance} {theme} {btn_props} on:click={text} content={c.text} menu={text_panel} />
     {:else if item === "shapes"}
@@ -156,6 +170,23 @@
 
 <div class="{name}-panel-wrapper" style="display:none">
   <div class="{name}-panel pencil" bind:this={pencil_panel}>
+    <div class="{name}-panel-switch-pencil">
+      {#if !!app?.appliancePlugin && hasUseLaserPen}
+        <Button class="{name}-panel-switch-btn" {...btn_props} on:click={pencil}>
+          <Icons.Pencil {theme} />
+        </Button>
+        <Button class="{name}-panel-switch-btn" {...btn_props}>
+          <Icons.LaserPenFilled {theme} active />
+        </Button>
+      {:else if !!app?.appliancePlugin}
+        <Button class="{name}-panel-switch-btn" {...btn_props}>
+          <Icons.PencilFilled {theme} active />
+        </Button>
+        <Button class="{name}-panel-switch-btn" {...btn_props} on:click={useLaserPen}>
+          <Icons.LaserPen {theme} />
+        </Button>
+      {/if}
+    </div>
     <StrokeWidth {app} {theme} {disabled} />
     <div class="{name}-panel-divider" />
     <StrokeColor {app} {theme} {disabled} {colors} />

package/src/components/Toolbar/definitions/Pencil.svelte

@@ -9,10 +9,13 @@
   export let menu: ButtonProps["menu"] | undefined;
   export let appliance: ApplianceNames | undefined;
   export let theme: Theme = "light";
+  export let hasUseLaserPen: boolean = false;
 </script>
 
 <Button class="pencil" {...btn_props} on:click {content} {menu}>
-  {#if appliance === "pencil"}
+  {#if appliance === "pencil" && hasUseLaserPen}
+    <Icons.LaserPenFilled {theme} active />
+  {:else if appliance === "pencil"}
     <Icons.PencilFilled {theme} active />
   {:else}
     <Icons.Pencil {theme} />