feat: update pencil menu Toolbar Fastboard UI

Author: hqer927

docs/zh/appliance-plugin.md

@@ -36,7 +36,7 @@ import { ApplianceSinglePlugin } from '@netless/appliance-plugin';
 >
 >我们采用双worker并发来提高绘制效率,这样让它比主进程效率提高了40%以上.但是两个worker文件上的公共依赖都是重复的,所以如果直接构建到包中,那么会大大增加包体积.所以我们允许workerjs文件cdn部署,只要把@netless/appliance-plugin/cdn下的文件部署到cdn中即可,然后通过插件中的getInstance的第二个参数options.cdn中配置上两个workerjs的cdn地址即可.这样就可以解决包体积过大的问题.
 >
-> - **总包大概在400kB,两个wokerjs各有800kB.** 如果需要考虑构建的包体积大小的,请选择配置cdn.
+> **总包大概在400kB,两个wokerjs各有800kB.** 如果需要考虑构建的包体积大小的,请选择配置cdn.
 
 ### 接入方式参考
 

packages/fastboard-ui/src/components/Toolbar/components/Contents.svelte

@@ -97,13 +97,17 @@
   }
   function pencil() {
     if (hasAppliancePlugin) {
-      app?.appliancePlugin?.setMemberState({
-        currentApplianceName: "pencil",
-        useLaserPen: false,
-        strokeOpacity: 1,
-      } as ExtendMemberState);
+      if (appliance !== "pencil") {
+        if (pencilType === "mark") {
+          useMarkPen();
+        } else if (pencilType === "laser") {
+          useLaserPen();
+        } else {
+          usePencil();
+        }
+      }
     } else {
-      app?.setAppliance("pencil");
+      usePencil();
     }
   }
   function text() {
@@ -121,6 +125,17 @@
   function clear() {
     app?.cleanCurrentScene();
   }
+  function usePencil() {
+    if (hasAppliancePlugin) {
+      app?.appliancePlugin?.setMemberState({
+        currentApplianceName: "pencil",
+        useLaserPen: false,
+        strokeOpacity: 1,
+      } as ExtendMemberState);
+    } else {
+      app?.setAppliance("pencil");
+    }
+  }
   function useLaserPen() {
     app?.appliancePlugin?.setMemberState({
       currentApplianceName: "laserPen",
@@ -195,7 +210,7 @@
     <div class="{name}-panel-switch-pencil">
       {#if !!app?.appliancePlugin}
         {#if pencilType !== "pencil"}
-          <Button class="{name}-panel-switch-btn" {...btn_props} on:click={pencil}>
+          <Button class="{name}-panel-switch-btn" {...btn_props} on:click={usePencil}>
             <Icons.Pencil {theme} />
           </Button>
         {:else if pencilType === "pencil"}

packages/fastboard-ui/src/components/Toolbar/definitions/Pencil.svelte

@@ -13,13 +13,23 @@
 </script>
 
 <Button class="pencil" {...btn_props} on:click {content} {menu}>
-  {#if appliance === "pencil" && pencilType === "mark"}
-    <Icons.MarkPenFilled {theme} active />
-  {:else if appliance === "pencil" && pencilType === "laser"}
-    <Icons.LaserPenFilled {theme} active />
-  {:else if appliance === "pencil" && pencilType === "pencil"}
-    <Icons.PencilFilled {theme} active />
-  {:else}
-    <Icons.Pencil {theme} />
+  {#if pencilType === "mark"}
+    {#if appliance === "pencil"}
+      <Icons.MarkPenFilled {theme} active />
+    {:else}
+      <Icons.MarkPen {theme} />
+    {/if}
+  {:else if pencilType === "laser"}
+    {#if appliance === "pencil"}
+      <Icons.LaserPenFilled {theme} active />
+    {:else}
+      <Icons.LaserPen {theme} />
+    {/if}
+  {:else if pencilType === "pencil"}
+    {#if appliance === "pencil"}
+      <Icons.PencilFilled {theme} active />
+    {:else}
+      <Icons.Pencil {theme} />
+    {/if}
   {/if}
 </Button>