@netless/fastboard-ui 1.0.2 → 1.0.4

package/package.json

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

package/src/components/Toolbar/Toolbar.svelte

@@ -34,7 +34,7 @@
   $: if (app?.manager && app?.manager.room) {
     if (colors && !config.colors?.length) {
       const floatBarOptions = (app?.manager.room as any).floatBarOptions as { colors?: Color[] };
-      if (floatBarOptions.colors) {
+      if (floatBarOptions?.colors) {
         colors = floatBarOptions.colors as Color[];
       }
     } else {

package/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"}

package/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>

package/src/helpers/index.ts

@@ -23,7 +23,7 @@ export function createUI(app?: FastboardApp | null, div?: Element): UI {
 
   if (app?.manager && app.manager.room) {
     const floatBarOptions = (app.manager.room as any).floatBarOptions as { colors?: Color[] };
-    if (floatBarOptions.colors) {
+    if (floatBarOptions?.colors) {
       colors = floatBarOptions.colors as Color[];
     }
   }