@netless/fastboard-ui 1.0.0-canary.1 → 1.0.0-canary.11

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";
@@ -27,15 +28,19 @@
   export let scroll_height: Writable<number>;
   export let computed_height = 0;
   export let scrollable = false;
+  export let hide_dotted = 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 = "eraser";
 
   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,10 +52,14 @@
     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;
   $: appliance = $memberState?.currentApplianceName;
+  $: dotted = $memberState?.dottedLine;
   $: shape = $memberState?.shapeType;
   $: status = app?.appsStatus;
 
@@ -60,6 +69,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);
@@ -83,6 +96,12 @@
   function text() {
     app?.setAppliance("text");
   }
+  function set_dotted() {
+    app?.toggleDottedLine(true);
+  }
+  function unset_dotted() {
+    app?.toggleDottedLine(false);
+  }
   function select_last_shape() {
     if (applianceShapes.includes(last_shape as Appliance)) {
       app?.setAppliance(last_shape as Appliance);
@@ -90,9 +109,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();
   }
@@ -104,51 +129,120 @@
   </Button>
 {/if}
 <div class="{name}-scrollable" class:scrollable use:scrollHeight={scroll_height} use:scrollTop={top}>
-  <Button class="clicker" {...btn_props} on:click={clicker} content={c.clicker}>
+  <Button
+    class="clicker"
+    active={appliance === "clicker"}
+    {...btn_props}
+    on:click={clicker}
+    content={c.clicker}
+  >
     {#if appliance === "clicker"}
       <Icons.ClickFilled {theme} active />
     {:else}
       <Icons.Click {theme} />
     {/if}
   </Button>
-  <Button class="selector" {...btn_props} on:click={selector} content={c.selector}>
+  <Button
+    class="selector"
+    active={appliance === "selector"}
+    {...btn_props}
+    on:click={selector}
+    content={c.selector}
+  >
     {#if appliance === "selector"}
       <Icons.SelectorFilled {theme} active />
     {:else}
       <Icons.Selector {theme} />
     {/if}
   </Button>
-  <Button class="pencil" {...btn_props} on:click={pencil} content={c.pencil} menu={pencil_panel}>
+  <Button
+    class="pencil"
+    active={appliance === "pencil"}
+    {...btn_props}
+    on:click={pencil}
+    content={c.pencil}
+    menu={pencil_panel}
+  >
     {#if appliance === "pencil"}
       <Icons.PencilFilled {theme} active />
     {:else}
       <Icons.Pencil {theme} />
     {/if}
   </Button>
-  <Button class="text" {...btn_props} on:click={text} content={c.text} menu={text_panel}>
+  <Button
+    class="text"
+    active={appliance === "text"}
+    {...btn_props}
+    on:click={text}
+    content={c.text}
+    menu={text_panel}
+  >
     {#if appliance === "text"}
       <Icons.TextFilled {theme} active />
     {:else}
       <Icons.Text {theme} />
     {/if}
   </Button>
-  <Button class="shapes" {...btn_props} on:click={select_last_shape} content={t.shapes} menu={shapes_panel}>
+  <Button
+    class="shapes"
+    active={appliance === last_shape || (appliance === "shape" && shape === last_shape)}
+    {...btn_props}
+    on:click={select_last_shape}
+    content={t.shapes}
+    menu={shapes_panel}
+  >
     {#if appliance === last_shape || (appliance === "shape" && shape === last_shape)}
       <svelte:component this={shapesIconActive[last_shape]} {theme} active />
     {:else}
       <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>
-  <Button class="clear" {...btn_props} on:click={clear} content={t.clear}>
-    <Icons.Clear {theme} />
-  </Button>
+  {#if eraser_type === "delete"}
+    <Button
+      class="eraser"
+      active={appliance === "eraser"}
+      {...btn_props}
+      on:click={select_eraser}
+      content={c.eraser}
+      menu={eraser_panel}
+    >
+      {#if appliance === "eraser"}
+        <Icons.EraserFilled {theme} active />
+      {:else}
+        <Icons.Eraser {theme} />
+      {/if}
+    </Button>
+  {:else if eraser_type === "pencil"}
+    <Button
+      class="eraser"
+      active={appliance === "pencilEraser"}
+      {...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"
+      active={appliance === last_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}
   {#if !hide_apps}
     <Button class="apps" {...btn_props} content={t.apps} menu={apps_panel} menu_placement="right-end">
       <Icons.Apps {theme} />
@@ -163,6 +257,31 @@
 
 <div class="{name}-panel-wrapper" style="display:none">
   <div class="{name}-panel pencil" bind:this={pencil_panel}>
+    {#if !hide_dotted}
+      <div class="{name}-panel-btns">
+        <Button
+          class="pencil"
+          active={appliance === "pencil" && !dotted}
+          {...btn_props}
+          on:click={unset_dotted}
+          placement="top"
+          content={t.solid}
+        >
+          <Icons.Curve {theme} active={appliance === "pencil" && !dotted} />
+        </Button>
+        <Button
+          class="pencil"
+          active={appliance === "pencil" && dotted}
+          {...btn_props}
+          on:click={set_dotted}
+          placement="top"
+          content={t.dashed}
+        >
+          <Icons.CurveDashed {theme} active={appliance === "pencil" && dotted} />
+        </Button>
+      </div>
+      <div class="{name}-panel-divider" />
+    {/if}
     <StrokeWidth {app} {theme} {disabled} />
     <div class="{name}-panel-divider" />
     <StrokeColor {app} {theme} {disabled} />
@@ -177,8 +296,58 @@
     <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"
+          active={appliance === "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>
+        <Button
+          class="eraser"
+          active={appliance === "pencilEraser"}
+          {...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="clear" {...btn_props} on:click={clear} placement="top" content={t.clear}>
+          <Icons.Clear {theme} />
+        </Button>
+      </div>
+      {#if appliance === "pencilEraser"}
+        <div class="{name}-panel-divider" />
+        <PencilEraserSize {app} {theme} {disabled} />
+      {/if}
+    {:else}
+      <div class="{name}-panel-btns">
+        <Button class="clear" {...btn_props} on:click={clear} placement="top" content={t.clear}>
+          <Icons.Clear {theme} />
+        </Button>
+      </div>
+      {#if eraser_type === "pencil"}
+        <PencilEraserSize {app} {theme} {disabled} />
+      {/if}
+    {/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/Shapes.svelte

@@ -65,6 +65,7 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="fastboard-toolbar-shapes {theme}" on:click={set_appliance_or_shape}>
   {#each shapes as key (key)}
     {@const is_selected = appliance === "shape" ? shape === key : appliance === key}

package/src/components/Toolbar/components/Slider.svelte

@@ -39,7 +39,6 @@
     class="{name}-track {theme}"
     class:grabbing
     type="range"
-    role="slider"
     {disabled}
     {min}
     {max}

package/src/components/Toolbar/components/StrokeColor.svelte

@@ -25,6 +25,7 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="fastboard-toolbar-colors {theme}" on:click={set_stroke_color}>
   {#each colorKeys as key (key)}
     <button

package/src/components/Toolbar/components/TextColor.svelte

@@ -25,6 +25,7 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="fastboard-toolbar-colors {theme}" on:click={set_stroke_color}>
   {#each colorKeys as key (key)}
     <button

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

@@ -24,11 +24,10 @@ export const shapes = [
   "speechBalloon",
 ] as const;
 
-export type Shape = typeof shapes[number];
+export type Shape = (typeof shapes)[number];
 
 export const applianceShapes = shapes.slice(0, 4) as Appliance[];
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const shapesIcon: Record<Shape, any> = {
   rectangle: Icons.Rectangle,
   ellipse: Icons.Circle,
@@ -40,7 +39,6 @@ export const shapesIcon: Record<Shape, any> = {
   speechBalloon: Icons.Balloon,
 };
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const shapesIconActive: Record<Shape, any> = {
   rectangle: Icons.RectangleBolded,
   ellipse: Icons.CircleBolded,
@@ -52,28 +50,58 @@ 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"
+  | "solid"
+  | "dashed"
 > = {
   en: {
     clicker: "clicker",
     selector: "selector",
     pencil: "pencil",
     eraser: "eraser",
+    pencilEraser: "eraser",
     text: "text",
     shapes: "shapes",
     clear: "clear",
     apps: "apps",
+    solid: "solid",
+    dashed: "dashed",
   },
   "zh-CN": {
     clicker: "点击",
     selector: "选择",
     pencil: "铅笔",
     eraser: "橡皮",
+    pencilEraser: "板擦",
     text: "文字",
     shapes: "形状",
     clear: "清屏",
     apps: "Apps",
+    solid: "实线",
+    dashed: "虚线",
   },
 };
 

package/src/components/Toolbar/components/helper.ts

@@ -1,5 +1,5 @@
 import type { HotKey } from "@netless/fastboard-core";
-import { element, attr, append } from "svelte/internal";
+import { append, attr, element } from "svelte/internal";
 
 /**
  * ```svelte

package/src/components/theme.scss

@@ -7,6 +7,7 @@ $themes: (
     active-color: $blue-6,
     bg-color: color.change(white, $alpha: 0.9),
     hover-bg-color: $blue-1,
+    active-bg-color: $blue-1,
     border-color: $grey-1,
   ),
   dark: (
@@ -14,6 +15,7 @@ $themes: (
     active-color: $blue-7,
     bg-color: color.change($grey-10, $alpha: 0.9),
     hover-bg-color: $grey-8,
+    active-bg-color: $grey-8,
     border-color: $grey-8,
   ),
 );
@@ -58,7 +60,7 @@ $themes: (
   }
 }
 
-@mixin btn($size: 24px, $padding: 0) {
+@mixin btn($size: 24px, $padding: 0, $radius: 4px) {
   appearance: none;
   cursor: pointer;
   margin: 0;
@@ -67,7 +69,7 @@ $themes: (
   width: $size;
   height: $size;
   background-color: transparent;
-  border-radius: 4px;
+  border-radius: $radius;
   font-size: 0;
   line-height: 1;
   flex-shrink: 0;
@@ -85,8 +87,13 @@ $themes: (
   }
 
   @each $name, $theme in $themes {
-    &.#{$name}:not(:disabled):hover {
-      background-color: read($theme, "hover-bg-color");
+    &.#{$name}:not(:disabled) {
+      &:hover {
+        background-color: read($theme, "hover-bg-color");
+      }
+      &.is-active {
+        background-color: read($theme, "active-bg-color");
+      }
     }
   }
 }