@netless/fastboard-ui 1.0.1 → 1.0.3

package/package.json

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

package/src/components/Icons/MarkPen.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"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    transform="scale(0.85 0.9) translate(2, 0)"
+  >
+    <path
+      class="fastboard-icon-stroke-color"
+      d="m15.95 2.39l5.657 5.657a1 1 0 0 1 0 1.414l-7.778 7.778l-2.122.707l-1.414 1.415a1 1 0 0 1-1.414 0l-4.243-4.243a1 1 0 0 1 0-1.414L6.05 12.29l.707-2.122l7.779-7.778a1 1 0 0 1 1.414 0m.707 3.536l-6.364 6.364l1.414 1.414l6.364-6.364zM4.283 16.886l2.828 2.828l-1.414 1.415l-4.243-1.415z"
+    />
+  </g>
+</svg>

package/src/components/Icons/MarkPenFilled.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"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    transform="scale(0.85 0.9) translate(2, 0)"
+  >
+    <path
+      class="fastboard-icon-fill-color"
+      d="m15.95 2.39l5.657 5.657a1 1 0 0 1 0 1.414l-7.778 7.778l-2.122.707l-1.414 1.415a1 1 0 0 1-1.414 0l-4.243-4.243a1 1 0 0 1 0-1.414L6.05 12.29l.707-2.122l7.779-7.778a1 1 0 0 1 1.414 0m.707 3.536l-6.364 6.364l1.414 1.414l6.364-6.364zM4.283 16.886l2.828 2.828l-1.414 1.415l-4.243-1.415z"
+    />
+  </g>
+</svg>

package/src/components/Icons/index.ts

@@ -47,6 +47,8 @@ import Pause from "./Pause.svelte";
 import Loading from "./Loading.svelte";
 import LaserPen from "./LaserPen.svelte";
 import LaserPenFilled from "./LaserPenFilled.svelte";
+import MarkPen from "./MarkPen.svelte";
+import MarkPenFilled from "./MarkPenFilled.svelte";
 
 const Icons = {
   Apps,
@@ -98,6 +100,8 @@ const Icons = {
   Loading,
   LaserPen,
   LaserPenFilled,
+  MarkPen,
+  MarkPenFilled,
 };
 
 export default Icons;

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

@@ -76,6 +76,9 @@
 
   $: hasAppliancePlugin = !!app?.appliancePlugin;
   $: hasUseLaserPen = (hasAppliancePlugin && ($memberState as ExtendMemberState)?.useLaserPen) || false;
+  $: hasUseMarkPen =
+    (hasAppliancePlugin && ($memberState as ExtendMemberState)?.strokeOpacity === 0.5) || false;
+  $: pencilType = hasUseLaserPen ? "laser" : hasUseMarkPen ? "mark" : "pencil";
 
   let top = writable(0);
 
@@ -93,7 +96,19 @@
     app?.setAppliance("selector");
   }
   function pencil() {
-    app?.setAppliance("pencil");
+    if (hasAppliancePlugin) {
+      if (appliance !== "pencil") {
+        if (pencilType === "mark") {
+          useMarkPen();
+        } else if (pencilType === "laser") {
+          useLaserPen();
+        } else {
+          usePencil();
+        }
+      }
+    } else {
+      usePencil();
+    }
   }
   function text() {
     app?.setAppliance("text");
@@ -110,8 +125,30 @@
   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?.setAppliance("laserPen");
+    app?.appliancePlugin?.setMemberState({
+      currentApplianceName: "laserPen",
+      useLaserPen: true,
+      strokeOpacity: 1,
+    } as ExtendMemberState);
+  }
+  function useMarkPen() {
+    app?.appliancePlugin?.setMemberState({
+      currentApplianceName: "pencil",
+      useLaserPen: false,
+      strokeOpacity: 0.5,
+    } as ExtendMemberState);
   }
 </script>
 
@@ -128,7 +165,7 @@
       <Selector {appliance} {theme} {btn_props} on:click={selector} content={c.selector} />
     {:else if item === "pencil"}
       <Pencil
-        {hasUseLaserPen}
+        {pencilType}
         {appliance}
         {theme}
         {btn_props}
@@ -171,20 +208,36 @@
 <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 !!app?.appliancePlugin}
+        {#if pencilType !== "pencil"}
+          <Button class="{name}-panel-switch-btn" {...btn_props} on:click={usePencil}>
+            <Icons.Pencil {theme} />
+          </Button>
+        {:else if pencilType === "pencil"}
+          <Button class="{name}-panel-switch-btn" {...btn_props}>
+            <Icons.PencilFilled {theme} active />
+          </Button>
+        {/if}
+
+        {#if pencilType === "laser"}
+          <Button class="{name}-panel-switch-btn" {...btn_props}>
+            <Icons.LaserPenFilled {theme} active />
+          </Button>
+        {:else if pencilType !== "laser"}
+          <Button class="{name}-panel-switch-btn" {...btn_props} on:click={useLaserPen}>
+            <Icons.LaserPen {theme} />
+          </Button>
+        {/if}
+
+        {#if pencilType === "mark"}
+          <Button class="{name}-panel-switch-btn" {...btn_props}>
+            <Icons.MarkPenFilled {theme} active />
+          </Button>
+        {:else if pencilType !== "mark"}
+          <Button class="{name}-panel-switch-btn" {...btn_props} on:click={useMarkPen}>
+            <Icons.MarkPen {theme} />
+          </Button>
+        {/if}
       {/if}
     </div>
     <StrokeWidth {app} {theme} {disabled} />

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

@@ -9,15 +9,27 @@
   export let menu: ButtonProps["menu"] | undefined;
   export let appliance: ApplianceNames | undefined;
   export let theme: Theme = "light";
-  export let hasUseLaserPen: boolean = false;
+  export let pencilType: string = "pencil";
 </script>
 
 <Button class="pencil" {...btn_props} on:click {content} {menu}>
-  {#if appliance === "pencil" && hasUseLaserPen}
-    <Icons.LaserPenFilled {theme} active />
-  {:else if appliance === "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>