feat: toolbar add laserPen

netless-io · Nov 29, 2024 · 7f0ab72 · 7f0ab72
1 parent f797354
commit 7f0ab72
Show file tree

Hide file tree

Showing 8 changed files with 99 additions and 10 deletions.
diff --git a/packages/fastboard-core/src/impl/FastboardApp.ts b/packages/fastboard-core/src/impl/FastboardApp.ts
@@ -1,7 +1,6 @@
 import type { AddPageParams, PublicEvent, MountParams, NetlessApp } from "@netless/window-manager";
 import type {
   AnimationMode,
-  ApplianceNames,
   Camera,
   CameraState,
   Color,
@@ -21,6 +20,7 @@ import type {
   WhiteWebSdkConfiguration,
   RoomMember,
   FloatBarOptions,
+  ApplianceNames,
 } from "white-web-sdk";
 import type { SyncedStore, Storage, Diff, DiffOne } from "@netless/synced-store";
 
@@ -39,7 +39,7 @@ import {
 import { ensure_official_plugins, transform_app_status } from "../internal";
 import { register } from "../behaviors/lite";
 import { ApplianceMultiPlugin } from "@netless/appliance-plugin";
-import type { AppliancePluginOptions, AppliancePluginInstance } from "@netless/appliance-plugin";
+import type { AppliancePluginOptions, AppliancePluginInstance, ApplianceNames as ExtendApplianceNames, MemberState as ExtendMemberState} from "@netless/appliance-plugin";
 
 function noop() {}
 
@@ -129,10 +129,12 @@ export type {
   WhiteWebSdk,
   WhiteWebSdkConfiguration,
   WindowManager,
+  ExtendApplianceNames,
+  ExtendMemberState
 };
 
 /** pencil, eraser, rectangle... */
-export type Appliance = `${ApplianceNames}`;
+export type Appliance = `${ExtendApplianceNames}`;
 /** triangle, star... */
 export type Shape = `${ShapeType}`;
 
@@ -377,7 +379,7 @@ export class FastboardApp<TEventData extends Record<string, any> = any> extends
   /**
    * Set current tool, like "pencil".
    */
-  setAppliance(appliance: ApplianceNames | Appliance, shape?: ShapeType | Shape) {
+  setAppliance(appliance: ExtendApplianceNames | Appliance, shape?: ShapeType | Shape) {
     this._assertNotDestroyed();
     this.manager.mainView.setMemberState({
       currentApplianceName: appliance as ApplianceNames,

diff --git a/packages/fastboard-ui/src/components/Icons/LaserPen.svelte b/packages/fastboard-ui/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>
diff --git a/packages/fastboard-ui/src/components/Icons/LaserPenFilled.svelte b/packages/fastboard-ui/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>
diff --git a/packages/fastboard-ui/src/components/Icons/index.ts b/packages/fastboard-ui/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;
diff --git a/packages/fastboard-ui/src/components/Toolbar/components/Contents.scss b/packages/fastboard-ui/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;

diff --git a/packages/fastboard-ui/src/components/Toolbar/components/Contents.svelte b/packages/fastboard-ui/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} />

diff --git a/packages/fastboard-ui/src/components/Toolbar/definitions/Pencil.svelte b/packages/fastboard-ui/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} />

diff --git a/packages/fastboard/test/main.ts b/packages/fastboard/test/main.ts
@@ -45,7 +45,7 @@ createFastboard({
   },
   joinRoom: {
     uid: genUID(),
-    uuid: import.meta.env.VITE_ROOM_UUID || "8f673720a31d11ef844c9de7e0348444",
+    uuid: import.meta.env.VITE_ROOM_UUID || "5f8a2ee0ae2111ef90a28fe3f64a87dd",
     // floatBar: {
     //   colors: [
     //       [224, 32, 32],
@@ -60,7 +60,7 @@ createFastboard({
     // },
     roomToken:
       import.meta.env.VITE_ROOM_TOKEN ||
-      "NETLESSROOM_YWs9VWtNUk92M1JIN2I2Z284dCZleHBpcmVBdD0xNzMxNzM5NjgyODgxJm5vbmNlPThmODFlYjEwLWEzMWQtMTFlZi05NmE5LWFiMzg4NjE4OThhZiZyb2xlPTEmc2lnPTJlYmE3YTMwMzkzODg0ODk3ZmY5NGQzMWM4YzI2NTlkMDlkMzQyZWY3NDExNzI4ZTU2NmRjNWU2YmRiZWVkZGYmdXVpZD04ZjY3MzcyMGEzMWQxMWVmODQ0YzlkZTdlMDM0ODQ0NA",
+      "NETLESSROOM_YWs9VWtNUk92M1JIN2I2Z284dCZleHBpcmVBdD0xNzMyOTUwNzgzMzQxJm5vbmNlPTVmYTI3MWQwLWFlMjEtMTFlZi05NmE5LWFiMzg4NjE4OThhZiZyb2xlPTEmc2lnPWZlMGYyM2VhN2QwNTdiMTYwZjdlMDJlNmRjZGJhNmI3NTYwNjVmNjVlOTg5NDFjNjU2MzEzNjUzNjgwMzJiMGMmdXVpZD01ZjhhMmVlMGFlMjExMWVmOTBhMjhmZTNmNjRhODdkZA",
   },
   managerConfig: {
     cursor: true,
@@ -80,7 +80,7 @@ createFastboard({
   ui.mount(root, {
     config: {
       toolbar: {
-        items: ["clicker", "selector", "pencil", "text", "shapes", "eraser", "clear"],
+        items: ["clicker", "selector", "pencil", "text", "shapes", "eraser", "clear", 'laserPointer'],
         collapsed: true,
         // colors: [
         //   // [224, 32, 32],