@netless/fastboard-ui 1.0.3 → 1.0.5-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/fastboard-ui",
-  "version": "1.0.3",
+  "version": "1.0.5-beta.0",
   "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.3"
+    "@netless/fastboard-core": "1.0.5-beta.0"
   },
   "dependencies": {
     "tippy.js": "^6.3.7"
   },
   "devDependencies": {
     "@netless/esbuild-plugin-inline-sass": "0.1.0",
-    "@netless/fastboard-core": "1.0.3",
-    "@netless/buildtool": "0.1.0"
+    "@netless/buildtool": "0.1.0",
+    "@netless/fastboard-core": "1.0.5-beta.0"
   },
   "scripts": {
     "cleanup": "rimraf dist",

package/src/components/Icons/EraserBitmap.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg width="24" height="24" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <g fill="none">
+    <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"
+      class="fastboard-icon-fill-color"
+    />
+    <path
+      stroke="#5D6066"
+      stroke-linecap="round"
+      stroke-width="1.5"
+      d="M9 21h12"
+      class="fastboard-icon-stroke-color"
+    />
+  </g>
+</svg>

package/src/components/Icons/EraserBitmapFilled.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg width="24" height="24" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <g fill="none">
+    <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"
+      class="fastboard-icon-fill-color"
+    />
+    <path
+      stroke="#5D6066"
+      stroke-linecap="round"
+      stroke-width="1.5"
+      d="M9 21h12"
+      class="fastboard-icon-stroke-color"
+    />
+  </g>
+</svg>

package/src/components/Icons/index.ts

@@ -49,6 +49,8 @@ import LaserPen from "./LaserPen.svelte";
 import LaserPenFilled from "./LaserPenFilled.svelte";
 import MarkPen from "./MarkPen.svelte";
 import MarkPenFilled from "./MarkPenFilled.svelte";
+import EraserBitmap from "./EraserBitmap.svelte";
+import EraserBitmapFilled from "./EraserBitmapFilled.svelte";
 
 const Icons = {
   Apps,
@@ -102,6 +104,8 @@ const Icons = {
   LaserPenFilled,
   MarkPen,
   MarkPenFilled,
+  EraserBitmap,
+  EraserBitmapFilled
 };
 
 export default Icons;

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

@@ -27,6 +27,7 @@
   import Clear from "../definitions/Clear.svelte";
   import Hand from "../definitions/Hand.svelte";
   import Laser from "../definitions/Laser.svelte";
+  import EraserSize from "./EraserSize.svelte";
 
   export let app: FastboardApp | null | undefined = null;
   export let theme: Theme = "light";
@@ -46,6 +47,7 @@
   let text_panel: HTMLDivElement;
   let shapes_panel: HTMLDivElement;
   let apps_panel: HTMLDivElement;
+  let eraser_panel: HTMLDivElement;
 
   let btn_props: Partial<ButtonProps>;
   $: btn_props = {
@@ -79,6 +81,8 @@
   $: hasUseMarkPen =
     (hasAppliancePlugin && ($memberState as ExtendMemberState)?.strokeOpacity === 0.5) || false;
   $: pencilType = hasUseLaserPen ? "laser" : hasUseMarkPen ? "mark" : "pencil";
+  $: hasUseEraserBitmap = hasAppliancePlugin && ($memberState as ExtendMemberState)?.isLine === false;
+  $: eraserType = hasUseEraserBitmap ? "pencilEraser" : "eraser";
 
   let top = writable(0);
 
@@ -114,7 +118,17 @@
     app?.setAppliance("text");
   }
   function eraser() {
-    app?.setAppliance("eraser");
+    if (hasAppliancePlugin) {
+      if (appliance !== "eraser") {
+        if (eraserType === "pencilEraser") {
+          useEraserBitmap();
+        } else {
+          useEraser();
+        }
+      }
+    } else {
+      useEraser();
+    }
   }
   function hand() {
     app?.setAppliance("hand");
@@ -150,6 +164,22 @@
       strokeOpacity: 0.5,
     } as ExtendMemberState);
   }
+  function useEraser() {
+    if (hasAppliancePlugin) {
+      app?.appliancePlugin?.setMemberState({
+        currentApplianceName: "eraser",
+        isLine: true,
+      } as ExtendMemberState);
+    } else {
+      app?.setAppliance("eraser");
+    }
+  }
+  function useEraserBitmap() {
+    app?.appliancePlugin?.setMemberState({
+      currentApplianceName: "pencilEraser",
+      isLine: false,
+    } as ExtendMemberState);
+  }
 </script>
 
 {#if scrollable}
@@ -178,7 +208,15 @@
     {:else if item === "shapes"}
       <Shapes {app} {appliance} {theme} {btn_props} content={t.shapes} menu={shapes_panel} />
     {:else if item === "eraser"}
-      <Eraser {appliance} {theme} {btn_props} on:click={eraser} content={c.eraser} />
+      <Eraser
+        {eraserType}
+        {appliance}
+        {theme}
+        {btn_props}
+        on:click={eraser}
+        content={c.eraser}
+        menu={hasAppliancePlugin ? eraser_panel : undefined}
+      />
     {:else if item === "clear"}
       <Clear {theme} {btn_props} on:click={clear} content={t.clear} />
     {:else if item === "hand"}
@@ -254,6 +292,32 @@
     <div class="{name}-panel-divider" />
     <StrokeColor {app} {theme} {disabled} {colors} />
   </div>
+  <div class="{name}-panel earser" bind:this={eraser_panel}>
+    <div class="{name}-panel-switch-earser">
+      {#if !!app?.appliancePlugin}
+        {#if eraserType !== "eraser"}
+          <Button class="{name}-panel-switch-btn" {...btn_props} on:click={useEraser}>
+            <Icons.Eraser {theme} />
+          </Button>
+        {:else if eraserType === "eraser"}
+          <Button class="{name}-panel-switch-btn" {...btn_props}>
+            <Icons.EraserFilled {theme} active />
+          </Button>
+        {/if}
+
+        {#if eraserType === "pencilEraser"}
+          <Button class="{name}-panel-switch-btn" {...btn_props}>
+            <Icons.EraserBitmap {theme} active />
+          </Button>
+        {:else if eraserType !== "pencilEraser"}
+          <Button class="{name}-panel-switch-btn" {...btn_props} on:click={useEraserBitmap}>
+            <Icons.EraserBitmapFilled {theme} />
+          </Button>
+        {/if}
+      {/if}
+    </div>
+    <EraserSize {app} {theme} {disabled} />
+  </div>
   <div class="{name}-panel apps" style="--n:{$apps.length}" bind:this={apps_panel}>
     {#each $apps as netless_app}
       {@const { icon, label, kind, onClick } = netless_app}

package/src/components/Toolbar/components/EraserSize.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import type { FastboardApp, ExtendMemberState } from "@netless/fastboard-core";
+  import type { Theme } from "../../../typings";
+  import Slider from "./Slider.svelte";
+
+  export let app: FastboardApp | null | undefined = null;
+  export let theme: Theme = "light";
+  export let disabled = false;
+
+  $: memberState = app?.memberState;
+  $: value = $memberState?.pencilEraserSize ?? 1;
+
+  $: props = { value, theme, disabled };
+
+  function set_eraser_size({ detail: value }: CustomEvent<number>) {
+    app?.appliancePlugin?.setMemberState({
+      pencilEraserSize: value,
+    } as ExtendMemberState);
+  }
+</script>
+
+<Slider class="fastboard-toolbar-slider" {...props} min={1} max={4} on:change={set_eraser_size} />

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

@@ -8,12 +8,22 @@
   export let content: ButtonProps["content"] | undefined;
   export let appliance: ApplianceNames | undefined;
   export let theme: Theme = "light";
+  export let menu: ButtonProps["menu"] | undefined;
+  export let eraserType: string = "eraser";
 </script>
 
-<Button class="eraser" {...btn_props} on:click {content}>
-  {#if appliance === "eraser"}
-    <Icons.EraserFilled {theme} active />
-  {:else}
-    <Icons.Eraser {theme} />
+<Button class="eraser" {...btn_props} on:click {content} {menu}>
+  {#if eraserType === "eraser"}
+    {#if appliance === "eraser"}
+      <Icons.EraserFilled {theme} active />
+    {:else}
+      <Icons.Eraser {theme} />
+    {/if}
+  {:else if eraserType === "pencilEraser"}
+    {#if appliance === "pencilEraser"}
+      <Icons.EraserBitmapFilled {theme} active />
+    {:else}
+      <Icons.EraserBitmap {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[];
     }
   }