@netless/fastboard-ui 1.0.0-canary.3 → 1.0.0-canary.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/fastboard-ui",
-  "version": "1.0.0-canary.3",
+  "version": "1.0.0-canary.6",
   "description": "The front-end of @netless/fastboard-core.",
   "main": "dist/index.js",
   "svelte": "dist/index.svelte.mjs",
@@ -8,16 +8,19 @@
     "src",
     "dist"
   ],
+  "sideEffects": [
+    "dist/index.css"
+  ],
   "repository": "netless-io/fastboard",
   "peerDependencies": {
-    "@netless/fastboard-core": "1.0.0-canary.3"
+    "@netless/fastboard-core": "1.0.0-canary.6"
   },
   "dependencies": {
     "tippy.js": "^6.3.7"
   },
   "devDependencies": {
     "@netless/esbuild-plugin-inline-sass": "0.1.0",
-    "@netless/fastboard-core": "1.0.0-canary.3"
+    "@netless/fastboard-core": "1.0.0-canary.6"
   },
   "scripts": {
     "cleanup": "rimraf dist",

package/src/behaviors/apps.ts

@@ -46,4 +46,4 @@ class AppsInToolbar {
 
 export type { AppsInToolbar };
 
-export const apps = new AppsInToolbar([]);
+export const stockedApps = new AppsInToolbar([]);

package/src/components/Icons/Eraser.svelte

@@ -7,10 +7,44 @@
 
 <svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
   <path
+    d="M16 16L20 20M20 16L16 20"
     stroke="#5D6066"
+    class="fastboard-icon-stroke-color"
+    stroke-width="1.25"
+  />
+  <path
+    d="M13.4139 4.92898C14.195 4.14794 15.4613 4.14794 16.2423 4.92898L19.0708 7.75741C19.8518 8.53846 19.8518 9.80479 19.0708 10.5858L11.9997 17.6569C10.4376 19.219 7.90494 19.219 6.34284 17.6569L4.92863 16.2427C4.14758 15.4616 4.14758 14.1953 4.92863 13.4143L13.4139 4.92898Z"
+    stroke="#5D6066"
+    class="fastboard-icon-stroke-color"
+    stroke-width="1.25"
     stroke-linejoin="round"
+  />
+  <path
+    d="M12 6.34314L17.6569 12"
+    stroke="#5D6066"
+    class="fastboard-icon-stroke-color"
     stroke-width="1.25"
-    d="M13.414 4.929a2 2 0 0 1 2.829 0l2.828 2.828a2 2 0 0 1 0 2.829L12 17.656a4 4 0 0 1-5.657 0L4.93 16.244a2 2 0 0 1 0-2.829l8.485-8.485ZM12 6.343 17.657 12m-1.414-7.071-2.829 2.828m4.243-1.414-2.829 2.829m4.243-1.415-2.828 2.829"
+    stroke-linejoin="round"
+  />
+  <path
+    d="M16.2422 4.92896L13.4138 7.75738"
+    stroke="#5D6066"
     class="fastboard-icon-stroke-color"
+    stroke-width="1.25"
+    stroke-linejoin="round"
+  />
+  <path
+    d="M17.6572 6.34314L14.8288 9.17157"
+    stroke="#5D6066"
+    class="fastboard-icon-stroke-color"
+    stroke-width="1.25"
+    stroke-linejoin="round"
+  />
+  <path
+    d="M19.0713 7.75732L16.2429 10.5858"
+    stroke="#5D6066"
+    class="fastboard-icon-stroke-color"
+    stroke-width="1.25"
+    stroke-linejoin="round"
   />
 </svg>

package/src/components/Icons/EraserFilled.svelte

@@ -7,10 +7,10 @@
 
 <svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
   <path
-    fill="#5D6066"
     fill-rule="evenodd"
-    d="M16.242 4.929a2 2 0 0 0-2.828 0L4.93 13.414a2 2 0 0 0 0 2.829l1.414 1.414a4 4 0 0 0 5.657 0l5.215-5.215-5.657-5.657.884-.884 5.657 5.657.972-.972a2 2 0 0 0 0-2.829l-2.83-2.827Z"
     clip-rule="evenodd"
+    d="M16.2423 4.92893C15.4612 4.14788 14.1949 4.14788 13.4138 4.92893L4.92856 13.4142C4.14751 14.1953 4.14751 15.4616 4.92856 16.2426L6.34277 17.6568C7.90487 19.2189 10.4375 19.2189 11.9996 17.6568L17.2146 12.4419L11.5577 6.78508L12.4416 5.9012L18.0985 11.558L19.0707 10.5858C19.8517 9.80473 19.8517 8.5384 19.0707 7.75735L16.2423 4.92893ZM17.1161 18L15.5581 16.4419L16.4419 15.5581L18 17.1161L19.5581 15.5581L20.4419 16.4419L18.8839 18L20.4419 19.5581L19.5581 20.4419L18 18.8839L16.4419 20.4419L15.5581 19.5581L17.1161 18Z"
+    fill="#3381FF"
     class="fastboard-icon-fill-color"
   />
 </svg>

package/src/components/Icons/PencilEraser.svelte

@@ -0,0 +1,16 @@
+<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}>
+  <path
+    stroke="#5D6066"
+    stroke-linejoin="round"
+    stroke-width="1.25"
+    d="M13.414 4.929a2 2 0 0 1 2.829 0l2.828 2.828a2 2 0 0 1 0 2.829L12 17.656a4 4 0 0 1-5.657 0L4.93 16.244a2 2 0 0 1 0-2.829l8.485-8.485ZM12 6.343 17.657 12m-1.414-7.071-2.829 2.828m4.243-1.414-2.829 2.829m4.243-1.415-2.828 2.829"
+    class="fastboard-icon-stroke-color"
+  />
+</svg>

package/src/components/Icons/PencilEraserFilled.svelte

@@ -0,0 +1,16 @@
+<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}>
+  <path
+    fill="#5D6066"
+    fill-rule="evenodd"
+    d="M16.242 4.929a2 2 0 0 0-2.828 0L4.93 13.414a2 2 0 0 0 0 2.829l1.414 1.414a4 4 0 0 0 5.657 0l5.215-5.215-5.657-5.657.884-.884 5.657 5.657.972-.972a2 2 0 0 0 0-2.829l-2.83-2.827Z"
+    clip-rule="evenodd"
+    class="fastboard-icon-fill-color"
+  />
+</svg>

package/src/components/Icons/index.ts

@@ -1,3 +1,6 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+// @ts-nocheck
+
 import Apps from "./Apps.svelte";
 import Arrow from "./Arrow.svelte";
 import ArrowBolded from "./ArrowBolded.svelte";
@@ -18,6 +21,8 @@ import LineBolded from "./LineBolded.svelte";
 import Minus from "./Minus.svelte";
 import Pencil from "./Pencil.svelte";
 import PencilFilled from "./PencilFilled.svelte";
+import PencilEraser from "./PencilEraser.svelte";
+import PencilEraserFilled from "./PencilEraserFilled.svelte";
 import Plus from "./Plus.svelte";
 import Rectangle from "./Rectangle.svelte";
 import RectangleBolded from "./RectangleBolded.svelte";
@@ -63,6 +68,8 @@ const Icons = {
   Minus,
   Pencil,
   PencilFilled,
+  PencilEraser,
+  PencilEraserFilled,
   Plus,
   Rectangle,
   RectangleBolded,

package/src/components/Toolbar/Toolbar.svelte

@@ -26,6 +26,7 @@
   $: scrollable = $scroll_height + extra_height > $container_height;
 
   $: hide_apps = config.apps?.enable === false;
+  $: eraser_type = config.eraser?.behavior || "both";
 </script>
 
 <div class="{name} {theme}" class:collapsed use:height={container_height}>
@@ -39,6 +40,7 @@
       {computed_height}
       {scrollable}
       {hide_apps}
+      {eraser_type}
     />
   </div>
   <label class="{name}-handler {theme}">

package/src/components/Toolbar/Toolbar.svelte.d.ts

@@ -6,6 +6,14 @@ export declare interface ToolbarConfig {
   apps?: {
     enable?: boolean;
   };
+  eraser?: {
+    /**
+     * - delete: remove shapes under eraser
+     * - pencil: wipe out part of strokes under eraser, like a real eraser
+     * - both (default): will show a panel to choose different behavior
+     */
+    behavior?: "delete" | "pencil" | "both";
+  };
 }
 
 export declare interface ToolbarProps {

package/src/components/Toolbar/components/Contents.scss

@@ -72,6 +72,17 @@ $name: "fastboard-toolbar";
   background-color: rgba(#fff, 0.15);
 }
 
+.#{$name}-slider.pencil-eraser-size {
+  width: 136px;
+}
+
+// .#{$name}-panel-btns {
+//   // min-width: 108px;
+
+//   // .#{$name}-btn {
+//   // }
+// }
+
 .#{$name}-colors,
 .#{$name}-shapes {
   display: grid;

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

@@ -3,22 +3,23 @@
   import type { Writable } from "svelte/store";
   import type { Placement } from "tippy.js";
   import type { Language, Theme } from "../../../typings";
-  import type { Shape } from "./constants";
-  import { applianceShapes, shapesIcon, shapesIconActive } from "./constants";
+  import type { Shape, Eraser } from "./constants";
+  import { eraserIcon, eraserIconActive, applianceShapes, shapesIcon, shapesIconActive } from "./constants";
   import { writable } from "svelte/store";
   import { scrollHeight } from "../../../actions/height";
   import { scrollTop } from "../../../actions/scroll";
+  import { tippy_hide_all } from "../../../actions/tippy";
   import { clamp } from "../../helpers";
   import { i18n } from "./constants";
-  import { apps } from "../../../behaviors";
+  import { stockedApps } from "../../../behaviors";
   import { tooltip } from "./helper";
   import Icons from "../../Icons";
   import Button from "../../Button";
   import StrokeWidth from "./StrokeWidth.svelte";
   import StrokeColor from "./StrokeColor.svelte";
+  import PencilEraserSize from "./PencilEraserSize.svelte";
   import TextColor from "./TextColor.svelte";
   import Shapes from "./Shapes.svelte";
-  import { tippy_hide_all } from "../../../actions/tippy";
 
   export let app: FastboardApp | null | undefined = null;
   export let theme: Theme = "light";
@@ -28,14 +29,17 @@
   export let computed_height = 0;
   export let scrollable = false;
   export let hide_apps = false;
+  export let eraser_type: "delete" | "pencil" | "both" = "both";
 
   const name = "fastboard-toolbar";
 
   let last_shape: Shape = "rectangle";
+  let last_eraser: Eraser = "pencilEraser";
 
   let pencil_panel: HTMLDivElement;
   let text_panel: HTMLDivElement;
   let shapes_panel: HTMLDivElement;
+  let eraser_panel: HTMLDivElement;
   let apps_panel: HTMLDivElement;
 
   let btn_props: { name: string; theme: Theme; disabled: boolean; placement: Placement };
@@ -47,6 +51,9 @@
     selector: tooltip(t.selector, hotkeys?.changeToSelector),
     pencil: tooltip(t.pencil, hotkeys?.changeToPencil),
     eraser: tooltip(t.eraser, hotkeys?.changeToEraser),
+    pencilEraser: tooltip(t.pencilEraser, hotkeys?.changeToPencilEraser),
+    eraserForPanel: tooltip(t.eraser, hotkeys?.changeToEraser),
+    pencilEraserForPanel: tooltip(t.pencilEraser, hotkeys?.changeToPencilEraser),
     text: tooltip(t.text, hotkeys?.changeToText),
   };
   $: memberState = app?.memberState;
@@ -60,6 +67,10 @@
     last_shape = shape;
   }
 
+  $: if (["pencilEraser", "eraser"].includes(appliance as Appliance)) {
+    last_eraser = appliance as "pencilEraser" | "eraser";
+  }
+
   $: max_scroll = scrollable ? $scroll_height + (32 + 8) * 2 - computed_height : 0;
 
   let top = writable(0);
@@ -90,9 +101,15 @@
       app?.setAppliance("shape", last_shape as Exclude<Shape, Appliance>);
     }
   }
-  function eraser() {
+  function select_last_eraser() {
+    app?.setAppliance(last_eraser);
+  }
+  function select_eraser() {
     app?.setAppliance("eraser");
   }
+  function select_pencil_eraser() {
+    app?.setAppliance("pencilEraser");
+  }
   function clear() {
     app?.cleanCurrentScene();
   }
@@ -139,13 +156,43 @@
       <svelte:component this={shapesIcon[last_shape]} {theme} />
     {/if}
   </Button>
-  <Button class="eraser" {...btn_props} on:click={eraser} content={c.eraser}>
-    {#if appliance === "eraser"}
-      <Icons.EraserFilled {theme} active />
-    {:else}
-      <Icons.Eraser {theme} />
-    {/if}
-  </Button>
+  {#if eraser_type === "delete"}
+    <Button class="eraser" {...btn_props} on:click={select_eraser} content={c.eraser}>
+      {#if appliance === "eraser"}
+        <Icons.EraserFilled {theme} active />
+      {:else}
+        <Icons.Eraser {theme} />
+      {/if}
+    </Button>
+  {:else if eraser_type === "pencil"}
+    <Button
+      class="eraser"
+      {...btn_props}
+      on:click={select_pencil_eraser}
+      content={c.pencilEraser}
+      menu={eraser_panel}
+    >
+      {#if appliance === "pencilEraser"}
+        <Icons.PencilEraserFilled {theme} active />
+      {:else}
+        <Icons.PencilEraser {theme} />
+      {/if}
+    </Button>
+  {:else}
+    <Button
+      class="eraser"
+      {...btn_props}
+      on:click={select_last_eraser}
+      content={t[last_eraser]}
+      menu={eraser_panel}
+    >
+      {#if appliance === last_eraser}
+        <svelte:component this={eraserIconActive[last_eraser]} {theme} active />
+      {:else}
+        <svelte:component this={eraserIcon[last_eraser]} {theme} />
+      {/if}
+    </Button>
+  {/if}
   <Button class="clear" {...btn_props} on:click={clear} content={t.clear}>
     <Icons.Clear {theme} />
   </Button>
@@ -177,8 +224,46 @@
     <div class="{name}-panel-divider" />
     <StrokeColor {app} {theme} {disabled} />
   </div>
-  <div class="{name}-panel apps" style="--n:{$apps.length}" bind:this={apps_panel}>
-    {#each $apps as netless_app}
+  <div class="{name}-panel eraser" bind:this={eraser_panel}>
+    {#if eraser_type === "both"}
+      <div class="{name}-panel-btns">
+        <Button
+          class="eraser"
+          {...btn_props}
+          on:click={select_pencil_eraser}
+          placement="top"
+          content={c.pencilEraserForPanel}
+        >
+          {#if appliance === "pencilEraser"}
+            <Icons.PencilEraserFilled {theme} active />
+          {:else}
+            <Icons.PencilEraser {theme} />
+          {/if}
+        </Button>
+        <Button
+          class="eraser"
+          {...btn_props}
+          on:click={select_eraser}
+          placement="top"
+          content={c.eraserForPanel}
+        >
+          {#if appliance === "eraser"}
+            <Icons.EraserFilled {theme} active />
+          {:else}
+            <Icons.Eraser {theme} />
+          {/if}
+        </Button>
+      </div>
+      {#if appliance === "pencilEraser"}
+        <div class="{name}-panel-divider" />
+        <PencilEraserSize {app} {theme} {disabled} />
+      {/if}
+    {:else if eraser_type === "pencil"}
+      <PencilEraserSize {app} {theme} {disabled} />
+    {/if}
+  </div>
+  <div class="{name}-panel apps" style="--n:{$stockedApps.length}" bind:this={apps_panel}>
+    {#each $stockedApps as netless_app}
       {@const { icon, label, kind, onClick } = netless_app}
       {@const state = $status && $status[kind]}
       {@const on_click = () => {

package/src/components/Toolbar/components/PencilEraserSize.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import type { FastboardApp } 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_pencil_eraser_size({ detail: value }: CustomEvent<number>) {
+    app?.setPencilEraserSize(value);
+  }
+</script>
+
+<Slider
+  class="fastboard-toolbar-slider pencil-eraser-size"
+  {...props}
+  min={1}
+  max={3}
+  step={1}
+  on:change={set_pencil_eraser_size}
+/>

package/src/components/Toolbar/components/constants.ts

@@ -50,14 +50,29 @@ export const shapesIconActive: Record<Shape, any> = {
   speechBalloon: Icons.BalloonBolded,
 };
 
+export const erasers = ["eraser", "pencilEraser"] as const;
+
+export type Eraser = typeof erasers[number];
+
+export const eraserIcon: Record<Eraser, any> = {
+  eraser: Icons.Eraser,
+  pencilEraser: Icons.PencilEraser,
+};
+
+export const eraserIconActive: Record<Eraser, any> = {
+  eraser: Icons.EraserFilled,
+  pencilEraser: Icons.PencilEraserFilled,
+};
+
 export const i18n: I18nData<
-  "clicker" | "selector" | "pencil" | "text" | "shapes" | "eraser" | "clear" | "apps"
+  "clicker" | "selector" | "pencil" | "pencilEraser" | "text" | "shapes" | "eraser" | "clear" | "apps"
 > = {
   en: {
     clicker: "clicker",
     selector: "selector",
     pencil: "pencil",
     eraser: "eraser",
+    pencilEraser: "eraser",
     text: "text",
     shapes: "shapes",
     clear: "clear",
@@ -68,6 +83,7 @@ export const i18n: I18nData<
     selector: "选择",
     pencil: "铅笔",
     eraser: "橡皮",
+    pencilEraser: "板擦",
     text: "文字",
     shapes: "形状",
     clear: "清屏",