@netless/fastboard-ui 1.1.3 → 1.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/fastboard-ui",
-  "version": "1.1.3",
+  "version": "1.1.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.1.3"
+    "@netless/fastboard-core": "1.1.4"
   },
   "dependencies": {
     "tippy.js": "^6.3.7"
   },
   "devDependencies": {
     "@netless/buildtool": "0.1.0",
-    "@netless/fastboard-core": "1.1.3",
+    "@netless/fastboard-core": "1.1.4",
     "@netless/esbuild-plugin-inline-sass": "0.1.0"
   },
   "scripts": {

package/src/components/Icons/BrushPen.svelte

@@ -0,0 +1,15 @@
+<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(1 0.85)">
+    <path
+      class="fastboard-icon-fill-color"
+      d="M7 16c.55 0 1 .45 1 1c0 1.1-.9 2-2 2c-.17 0-.33 0-.5-.05c.31-.55.5-1.21.5-1.95c0-.55.45-1 1-1M18.67 3c-.26 0-.51.1-.71.29L9 12.25L11.75 15l8.96-8.96c.39-.39.39-1.04 0-1.41l-1.34-1.34c-.2-.2-.45-.29-.7-.29M7 14c-1.66 0-3 1.34-3 3c0 1.31-1.16 2-2 2c.92 1.22 2.5 2 4 2c2.21 0 4-1.79 4-4c0-1.66-1.34-3-3-3"
+    />
+  </g>
+</svg>

package/src/components/Icons/BrushPenFilled.svelte

@@ -0,0 +1,15 @@
+<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(1 0.85)">
+    <path
+      class="fastboard-icon-fill-color"
+      d="m20.71 4.63l-1.34-1.34c-.37-.39-1.02-.39-1.41 0L9 12.25L11.75 15l8.96-8.96c.39-.39.39-1.04 0-1.41M7 14a3 3 0 0 0-3 3c0 1.31-1.16 2-2 2c.92 1.22 2.5 2 4 2a4 4 0 0 0 4-4a3 3 0 0 0-3-3"
+    />
+  </g>
+</svg>

package/src/components/Icons/EraserBitmap.svelte

@@ -6,7 +6,7 @@
 </script>
 
 <svg width="24" height="24" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
-  <g fill="none">
+  <g fill="none" transform="scale(0.8 0.8) translate(3 1)">
     <path
       fill="#5D6066"
       d="m5.505 11.41l.53.53zM3 14.952h-.75zM9.048 21v.75zM11.41 5.505l-.53-.53zm1.831 12.34a.75.75 0 0 0 1.06-1.061zM7.216 9.697a.75.75 0 1 0-1.06 1.061zm10.749 2.362l-5.905 5.905l1.06 1.06l5.905-5.904zm-11.93-.12l5.905-5.905l-1.06-1.06l-5.905 5.904zm0 6.025c-.85-.85-1.433-1.436-1.812-1.933c-.367-.481-.473-.79-.473-1.08h-1.5c0 .749.312 1.375.78 1.99c.455.596 1.125 1.263 1.945 2.083zm-1.06-7.086c-.82.82-1.49 1.488-1.945 2.084c-.468.614-.78 1.24-.78 1.99h1.5c0-.29.106-.6.473-1.08c.38-.498.962-1.083 1.812-1.933zm7.085 7.086c-.85.85-1.435 1.433-1.933 1.813c-.48.366-.79.472-1.08.472v1.5c.75 0 1.376-.312 1.99-.78c.596-.455 1.264-1.125 2.084-1.945zm-7.085 1.06c.82.82 1.487 1.49 2.084 1.945c.614.468 1.24.78 1.989.78v-1.5c-.29 0-.599-.106-1.08-.473c-.497-.38-1.083-.962-1.933-1.812zm12.99-12.99c.85.85 1.433 1.436 1.813 1.933c.366.481.472.79.472 1.08h1.5c0-.749-.312-1.375-.78-1.99c-.455-.596-1.125-1.263-1.945-2.083zm1.06 7.086c.82-.82 1.49-1.488 1.945-2.084c.468-.614.78-1.24.78-1.99h-1.5c0 .29-.106.6-.473 1.08c-.38.498-.962 1.083-1.812 1.933zm0-8.146c-.82-.82-1.487-1.49-2.084-1.945c-.614-.468-1.24-.78-1.989-.78v1.5c.29 0 .599.106 1.08.473c.497.38 1.083.962 1.933 1.812zm-7.085 1.06c.85-.85 1.435-1.433 1.933-1.812c.48-.367.79-.473 1.08-.473v-1.5c-.75 0-1.376.312-1.99.78c-.596.455-1.264 1.125-2.084 1.945zm2.362 10.749L7.216 9.698l-1.06 1.061l7.085 7.085z"

package/src/components/Icons/EraserBitmapFilled.svelte

@@ -6,7 +6,7 @@
 </script>
 
 <svg width="24" height="24" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
-  <g fill="none">
+  <g fill="none" transform="scale(0.8 0.8) translate(3 1)">
     <path
       fill="#5D6066"
       d="m5.505 11.41l.53.53zM3 14.952h-.75zM9.048 21v.75zM11.41 5.505l-.53-.53zm1.831 12.34a.75.75 0 0 0 1.06-1.061zM7.216 9.697a.75.75 0 1 0-1.06 1.061zm10.749 2.362l-5.905 5.905l1.06 1.06l5.905-5.904zm-11.93-.12l5.905-5.905l-1.06-1.06l-5.905 5.904zm0 6.025c-.85-.85-1.433-1.436-1.812-1.933c-.367-.481-.473-.79-.473-1.08h-1.5c0 .749.312 1.375.78 1.99c.455.596 1.125 1.263 1.945 2.083zm-1.06-7.086c-.82.82-1.49 1.488-1.945 2.084c-.468.614-.78 1.24-.78 1.99h1.5c0-.29.106-.6.473-1.08c.38-.498.962-1.083 1.812-1.933zm7.085 7.086c-.85.85-1.435 1.433-1.933 1.813c-.48.366-.79.472-1.08.472v1.5c.75 0 1.376-.312 1.99-.78c.596-.455 1.264-1.125 2.084-1.945zm-7.085 1.06c.82.82 1.487 1.49 2.084 1.945c.614.468 1.24.78 1.989.78v-1.5c-.29 0-.599-.106-1.08-.473c-.497-.38-1.083-.962-1.933-1.812zm12.99-12.99c.85.85 1.433 1.436 1.813 1.933c.366.481.472.79.472 1.08h1.5c0-.749-.312-1.375-.78-1.99c-.455-.596-1.125-1.263-1.945-2.083zm1.06 7.086c.82-.82 1.49-1.488 1.945-2.084c.468-.614.78-1.24.78-1.99h-1.5c0 .29-.106.6-.473 1.08c-.38.498-.962 1.083-1.812 1.933zm0-8.146c-.82-.82-1.487-1.49-2.084-1.945c-.614-.468-1.24-.78-1.989-.78v1.5c.29 0 .599.106 1.08.473c.497.38 1.083.962 1.933 1.812zm-7.085 1.06c.85-.85 1.435-1.433 1.933-1.812c.48-.367.79-.473 1.08-.473v-1.5c-.75 0-1.376.312-1.99.78c-.596.455-1.264 1.125-2.084 1.945zm2.362 10.749L7.216 9.698l-1.06 1.061l7.085 7.085z"

package/src/components/Icons/LaserPen.svelte

@@ -6,7 +6,7 @@
 </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)">
+  <g stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" transform="rotate(0 10 10) translate(3 2)">
     <path
       class="fastboard-icon-stroke-color"
       clip-rule="evenodd"

package/src/components/Icons/LaserPenFilled.svelte

@@ -6,7 +6,7 @@
 </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)">
+  <g stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" transform="rotate(0 10 10) translate(3 2)">
     <path
       class="fastboard-icon-fill-color"
       clip-rule="evenodd"

package/src/components/Icons/index.ts

@@ -22,6 +22,8 @@ import LineBolded from "./LineBolded.svelte";
 import Minus from "./Minus.svelte";
 import Pencil from "./Pencil.svelte";
 import PencilFilled from "./PencilFilled.svelte";
+import StrokePencil from "./BrushPen.svelte";
+import StrokePencilFilled from "./BrushPenFilled.svelte";
 import Plus from "./Plus.svelte";
 import Rectangle from "./Rectangle.svelte";
 import RectangleBolded from "./RectangleBolded.svelte";
@@ -106,6 +108,8 @@ const Icons = {
   MarkPenFilled,
   EraserBitmap,
   EraserBitmapFilled,
+  StrokePencil,
+  StrokePencilFilled
 };
 
 export default Icons;

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

@@ -82,7 +82,9 @@
   $: hasUseLaserPen = (hasAppliancePlugin && ($memberState as ExtendMemberState)?.useLaserPen) || false;
   $: hasUseMarkPen =
     (hasAppliancePlugin && ($memberState as ExtendMemberState)?.strokeOpacity === 0.5) || false;
-  $: pencilType = hasUseLaserPen ? "laser" : hasUseMarkPen ? "mark" : "pencil";
+  $: hasUseStroke =
+    (hasAppliancePlugin && ($memberState as ExtendMemberState)?.strokeType === "Stroke") || false;
+  $: pencilType = hasUseLaserPen ? "laser" : hasUseMarkPen ? "mark" : hasUseStroke ? "stroke" : "pencil";
   $: hasUseEraserBitmap = hasAppliancePlugin && ($memberState as ExtendMemberState)?.isLine === false;
   $: eraserType = hasUseEraserBitmap ? "pencilEraser" : "eraser";
 
@@ -108,12 +110,14 @@
           useMarkPen();
         } else if (pencilType === "laser") {
           useLaserPen();
+        } else if (pencilType === "stroke") {
+          useStrokePencil();
         } else {
-          usePencil();
+          useNormalPencil();
         }
       }
     } else {
-      usePencil();
+      useNormalPencil();
     }
   }
   function text() {
@@ -141,11 +145,11 @@
   function clear() {
     app?.cleanCurrentScene();
   }
-  function usePencil() {
+  function useNormalPencil() {
     if (hasAppliancePlugin) {
       app?.appliancePlugin?.setMemberState({
         currentApplianceName: "pencil",
-        strokeType: "Stroke",
+        strokeType: "Normal",
         useLaserPen: false,
         strokeOpacity: 1,
       } as ExtendMemberState);
@@ -153,6 +157,14 @@
       app?.setAppliance("pencil");
     }
   }
+  function useStrokePencil() {
+    app?.appliancePlugin?.setMemberState({
+      currentApplianceName: "pencil",
+      strokeType: "Stroke",
+      useLaserPen: false,
+      strokeOpacity: 1,
+    } as ExtendMemberState);
+  }
   function useLaserPen() {
     app?.appliancePlugin?.setMemberState({
       currentApplianceName: "laserPen",
@@ -251,7 +263,7 @@
     <div class="{name}-panel-switch-pencil">
       {#if !!app?.appliancePlugin}
         {#if pencilType !== "pencil"}
-          <Button class="{name}-panel-switch-btn" {...btn_props} on:click={usePencil}>
+          <Button class="{name}-panel-switch-btn" {...btn_props} on:click={useNormalPencil}>
             <Icons.Pencil {theme} />
           </Button>
         {:else if pencilType === "pencil"}
@@ -260,6 +272,16 @@
           </Button>
         {/if}
 
+        {#if pencilType === "stroke"}
+          <Button class="{name}-panel-switch-btn" {...btn_props}>
+            <Icons.StrokePencilFilled {theme} active />
+          </Button>
+        {:else if pencilType !== "stroke"}
+          <Button class="{name}-panel-switch-btn" {...btn_props} on:click={useStrokePencil}>
+            <Icons.StrokePencil {theme} />
+          </Button>
+        {/if}
+
         {#if showLaserPen && pencilType === "laser"}
           <Button class="{name}-panel-switch-btn" {...btn_props}>
             <Icons.LaserPenFilled {theme} active />
@@ -281,6 +303,7 @@
         {/if}
       {/if}
     </div>
+    <div class="{name}-panel-divider" />
     <StrokeWidth {app} {theme} {disabled} />
     <div class="{name}-panel-divider" />
     <StrokeColor {app} {theme} {disabled} {colors} />

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

@@ -25,6 +25,12 @@
     {:else}
       <Icons.LaserPen {theme} />
     {/if}
+  {:else if pencilType === "stroke"}
+    {#if appliance === "pencil"}
+      <Icons.StrokePencilFilled {theme} active />
+    {:else}
+      <Icons.StrokePencil {theme} />
+    {/if}
   {:else if pencilType === "pencil"}
     {#if appliance === "pencil"}
       <Icons.PencilFilled {theme} active />