@netless/fastboard-ui 1.0.0-canary.9 → 1.0.0

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

@@ -1,25 +1,32 @@
 <script lang="ts">
-  import type { Appliance, FastboardApp } from "@netless/fastboard-core";
+  import type { FastboardApp, ExtendMemberState } from "@netless/fastboard-core";
   import type { Writable } from "svelte/store";
-  import type { Placement } from "tippy.js";
-  import type { Language, Theme } from "../../../typings";
-  import type { Shape, Eraser } from "./constants";
-  import { eraserIcon, eraserIconActive, applianceShapes, shapesIcon, shapesIconActive } from "./constants";
+  import type { Language, Theme, ToolbarItem } from "../../../typings";
   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 { stockedApps } from "../../../behaviors";
+  import { default_colors, default_items, i18n } from "./constants";
+  import { apps } from "../../../behaviors";
   import { tooltip } from "./helper";
   import Icons from "../../Icons";
-  import Button from "../../Button";
+  import Button, { type ButtonProps } 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 SelectShapes from "./SelectShapes.svelte";
+
+  import Clicker from "../definitions/Clicker.svelte";
+  import Selector from "../definitions/Selector.svelte";
+  import Pencil from "../definitions/Pencil.svelte";
+  import Text from "../definitions/Text.svelte";
+  import Shapes from "../definitions/Shapes.svelte";
+  import Eraser from "../definitions/Eraser.svelte";
+  import Clear from "../definitions/Clear.svelte";
+  import Hand from "../definitions/Hand.svelte";
+  import Laser from "../definitions/Laser.svelte";
 
   export let app: FastboardApp | null | undefined = null;
   export let theme: Theme = "light";
@@ -28,23 +35,27 @@
   export let scroll_height: Writable<number>;
   export let computed_height = 0;
   export let scrollable = false;
-  export let hide_dotted = false;
+  export let placement: "left" | "right" = "left";
+  export let items: ToolbarItem[] = default_items;
   export let hide_apps = false;
-  export let eraser_type: "delete" | "pencil" | "both" = "both";
+  export let colors = default_colors;
 
   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 };
-  $: btn_props = { name, theme, disabled, placement: "right" };
+  let btn_props: Partial<ButtonProps>;
+  $: btn_props = {
+    name,
+    theme,
+    disabled,
+    placement: placement === "left" ? "right" : "left",
+    menu_placement: placement === "left" ? "right-start" : "left-start",
+  };
+
   $: t = i18n[language];
   $: hotkeys = app?.hotKeys;
   $: c = {
@@ -52,29 +63,20 @@
     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),
+    hand: tooltip(t.hand, hotkeys?.changeToHand),
+    laserPointer: tooltip(t.laserPointer, hotkeys?.changeToLaserPointer),
   };
+
   $: memberState = app?.memberState;
   $: appliance = $memberState?.currentApplianceName;
-  $: dotted = $memberState?.dottedLine;
-  $: shape = $memberState?.shapeType;
   $: status = app?.appsStatus;
 
-  $: if (applianceShapes.includes(appliance as Appliance)) {
-    last_shape = appliance as Shape;
-  } else if (shape) {
-    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;
 
+  $: hasAppliancePlugin = !!app?.appliancePlugin;
+  $: hasUseLaserPen = (hasAppliancePlugin && ($memberState as ExtendMemberState)?.useLaserPen) || false;
+
   let top = writable(0);
 
   function scroll_up() {
@@ -96,31 +98,21 @@
   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);
-    } else {
-      app?.setAppliance("shape", last_shape as Exclude<Shape, Appliance>);
-    }
-  }
-  function select_last_eraser() {
-    app?.setAppliance(last_eraser);
-  }
-  function select_eraser() {
+  function eraser() {
     app?.setAppliance("eraser");
   }
-  function select_pencil_eraser() {
-    app?.setAppliance("pencilEraser");
+  function hand() {
+    app?.setAppliance("hand");
+  }
+  function laserPointer() {
+    app?.setAppliance("laserPointer");
   }
   function clear() {
     app?.cleanCurrentScene();
   }
+  function useLaserPen() {
+    app?.setAppliance("laserPen");
+  }
 </script>
 
 {#if scrollable}
@@ -129,124 +121,43 @@
   </Button>
 {/if}
 <div class="{name}-scrollable" class:scrollable use:scrollHeight={scroll_height} use:scrollTop={top}>
-  <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} />
+  {#each items as item}
+    {#if item === "clicker"}
+      <Clicker {appliance} {theme} {btn_props} on:click={clicker} content={c.clicker} />
+    {:else if item === "selector"}
+      <Selector {appliance} {theme} {btn_props} on:click={selector} content={c.selector} />
+    {:else if item === "pencil"}
+      <Pencil
+        {hasUseLaserPen}
+        {appliance}
+        {theme}
+        {btn_props}
+        on:click={pencil}
+        content={c.pencil}
+        menu={pencil_panel}
+      />
+    {:else if item === "text"}
+      <Text {appliance} {theme} {btn_props} on:click={text} content={c.text} menu={text_panel} />
+    {: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} />
+    {:else if item === "clear"}
+      <Clear {theme} {btn_props} on:click={clear} content={t.clear} />
+    {:else if item === "hand"}
+      <Hand {appliance} {theme} {btn_props} on:click={hand} content={c.hand} />
+    {:else if item === "laserPointer"}
+      <Laser {appliance} {theme} {btn_props} on:click={laserPointer} content={c.laserPointer} />
     {/if}
-  </Button>
-  <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"
-    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"
-    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"
-    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>
-  {#if eraser_type === "delete"}
-    <Button
-      class="eraser"
-      active={appliance === "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"
-      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}
+  {/each}
+  {#if !hide_apps}
     <Button
-      class="eraser"
-      active={appliance === last_eraser}
+      class="apps"
       {...btn_props}
-      on:click={select_last_eraser}
-      content={t[last_eraser]}
-      menu={eraser_panel}
+      content={t.apps}
+      menu={apps_panel}
+      menu_placement={placement === "left" ? "right-end" : "left-end"}
     >
-      {#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>
-  {#if !hide_apps}
-    <Button class="apps" {...btn_props} content={t.apps} menu={apps_panel} menu_placement="right-end">
       <Icons.Apps {theme} />
     </Button>
   {/if}
@@ -259,87 +170,39 @@
 
 <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} />
+    <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="pencil"
-          active={appliance === "pencil" && dotted}
-          {...btn_props}
-          on:click={set_dotted}
-          placement="top"
-          content={t.dashed}
-        >
-          <Icons.CurveDashed {theme} active={appliance === "pencil" && dotted} />
+        <Button class="{name}-panel-switch-btn" {...btn_props}>
+          <Icons.LaserPenFilled {theme} active />
         </Button>
-      </div>
-      <div class="{name}-panel-divider" />
-    {/if}
+      {: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}
+    </div>
     <StrokeWidth {app} {theme} {disabled} />
     <div class="{name}-panel-divider" />
-    <StrokeColor {app} {theme} {disabled} />
+    <StrokeColor {app} {theme} {disabled} {colors} />
   </div>
   <div class="{name}-panel text" bind:this={text_panel}>
-    <TextColor {app} {theme} {disabled} />
+    <TextColor {app} {theme} {disabled} {colors} />
   </div>
   <div class="{name}-panel shapes" bind:this={shapes_panel}>
-    <Shapes {app} {theme} {language} {disabled} />
+    <SelectShapes {app} {theme} {language} {disabled} />
     <div class="{name}-panel-divider" />
     <StrokeWidth {app} {theme} {disabled} />
     <div class="{name}-panel-divider" />
-    <StrokeColor {app} {theme} {disabled} />
-  </div>
-  <div class="{name}-panel eraser" bind:this={eraser_panel}>
-    {#if eraser_type === "both"}
-      <div class="{name}-panel-btns">
-        <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="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>
-      </div>
-      {#if appliance === "pencilEraser"}
-        <div class="{name}-panel-divider" />
-        <PencilEraserSize {app} {theme} {disabled} />
-      {/if}
-    {:else if eraser_type === "pencil"}
-      <PencilEraserSize {app} {theme} {disabled} />
-    {/if}
+    <StrokeColor {app} {theme} {disabled} {colors} />
   </div>
-  <div class="{name}-panel apps" style="--n:{$stockedApps.length}" bind:this={apps_panel}>
-    {#each $stockedApps as netless_app}
+  <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}
       {@const state = $status && $status[kind]}
       {@const on_click = () => {

package/src/components/Toolbar/components/Slider.scss

@@ -22,7 +22,9 @@ $thumb-color: white;
   background: $thumb-color;
   border: 0;
   border-radius: 100%;
-  box-shadow: 0 1px 1px rgba($shadow-color, 0.15), 0 0 0 1px rgba($shadow-color, 0.2);
+  box-shadow:
+    0 1px 1px rgba($shadow-color, 0.15),
+    0 0 0 1px rgba($shadow-color, 0.2);
   width: $thumb-height;
   height: $thumb-height;
   position: relative;

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

@@ -1,11 +1,13 @@
 <script lang="ts">
   import type { Color, FastboardApp } from "@netless/fastboard-core";
   import type { Theme } from "../../../typings";
-  import { colorKeys, colors } from "./constants";
+  import { default_colors } from "./constants";
+  import { hexToRgb, rgbToHex } from "./helper";
 
   export let app: FastboardApp | null | undefined = null;
   export let theme: Theme = "light";
   export let disabled = false;
+  export let colors: Color[] = default_colors;
 
   $: memberState = app?.memberState;
   $: strokeColor = $memberState?.strokeColor;
@@ -17,9 +19,9 @@
   function set_stroke_color(ev: MouseEvent) {
     let button = ev.target as HTMLButtonElement | null;
     if (button && button.dataset.colorKey) {
-      let color = colors[button.dataset.colorKey];
+      let color = button.dataset.colorKey;
       if (color && app) {
-        app.setStrokeColor(color);
+        app.setStrokeColor(hexToRgb(color));
       }
     }
   }
@@ -27,14 +29,17 @@
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="fastboard-toolbar-colors {theme}" on:click={set_stroke_color}>
-  {#each colorKeys as key (key)}
+  {#each colors as color}
     <button
       class="fastboard-toolbar-btn fastboard-toolbar-color-btn {theme}"
-      class:is-active={is_equal_color(strokeColor, colors[key])}
-      data-color-key={key}
+      class:is-active={is_equal_color(strokeColor, color)}
+      data-color-key={rgbToHex(color[0], color[1], color[2])}
       {disabled}
     >
-      <span class="fastboard-toolbar-color-item" style:background-color={key} />
+      <span
+        class="fastboard-toolbar-color-item"
+        style:background-color={rgbToHex(color[0], color[1], color[2])}
+      />
     </button>
   {/each}
 </div>

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

@@ -1,11 +1,13 @@
 <script lang="ts">
   import type { Color, FastboardApp } from "@netless/fastboard-core";
   import type { Theme } from "../../../typings";
-  import { colorKeys, colors } from "./constants";
+  import { default_colors } from "./constants";
+  import { hexToRgb, rgbToHex } from "./helper";
 
   export let app: FastboardApp | null | undefined = null;
   export let theme: Theme = "light";
   export let disabled = false;
+  export let colors: Color[] = default_colors;
 
   $: memberState = app?.memberState;
   $: textColor = $memberState?.textColor;
@@ -17,9 +19,9 @@
   function set_stroke_color(ev: MouseEvent) {
     let button = ev.target as HTMLButtonElement | null;
     if (button && button.dataset.colorKey) {
-      let color = colors[button.dataset.colorKey];
+      let color = button.dataset.colorKey;
       if (color && app) {
-        app.setTextColor(color);
+        app.setTextColor(hexToRgb(color));
       }
     }
   }
@@ -27,14 +29,17 @@
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="fastboard-toolbar-colors {theme}" on:click={set_stroke_color}>
-  {#each colorKeys as key (key)}
+  {#each colors as color}
     <button
       class="fastboard-toolbar-btn fastboard-toolbar-color-btn {theme}"
-      class:is-active={is_equal_color(textColor, colors[key])}
-      data-color-key={key}
+      class:is-active={is_equal_color(textColor, color)}
+      data-color-key={rgbToHex(color[0], color[1], color[2])}
       {disabled}
     >
-      <span class="fastboard-toolbar-color-item" style:background-color={key} />
+      <span
+        class="fastboard-toolbar-color-item"
+        style:background-color={rgbToHex(color[0], color[1], color[2])}
+      />
     </button>
   {/each}
 </div>

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

@@ -1,7 +1,17 @@
 import type { Appliance, Color } from "@netless/fastboard-core";
-import type { I18nData } from "../../../typings";
+import type { I18nData, ToolbarItem } from "../../../typings";
 import Icons from "../../Icons";
 
+export const default_items: ToolbarItem[] = [
+  "clicker",
+  "selector",
+  "pencil",
+  "text",
+  "shapes",
+  "eraser",
+  "clear",
+];
+
 export const colors: Record<string, Color> = {
   "#E02020": [224, 32, 32],
   "#F7B500": [247, 181, 0],
@@ -13,6 +23,10 @@ export const colors: Record<string, Color> = {
   "#6D7278": [109, 114, 120],
 };
 
+export const colorKeys = Object.keys(colors);
+
+export const default_colors: Color[] = Object.values(colors);
+
 export const shapes = [
   "rectangle",
   "ellipse",
@@ -28,6 +42,7 @@ 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,
@@ -39,6 +54,7 @@ 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,
@@ -50,59 +66,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"
-  | "pencilEraser"
-  | "text"
-  | "shapes"
-  | "eraser"
-  | "clear"
-  | "apps"
-  | "solid"
-  | "dashed"
-> = {
+export const i18n: I18nData<ToolbarItem | "apps"> = {
   en: {
     clicker: "clicker",
     selector: "selector",
     pencil: "pencil",
     eraser: "eraser",
-    pencilEraser: "eraser",
     text: "text",
     shapes: "shapes",
     clear: "clear",
     apps: "apps",
-    solid: "solid",
-    dashed: "dashed",
+    hand: "hand",
+    laserPointer: "laser pointer",
   },
   "zh-CN": {
     clicker: "点击",
     selector: "选择",
     pencil: "铅笔",
     eraser: "橡皮",
-    pencilEraser: "板擦",
     text: "文字",
     shapes: "形状",
     clear: "清屏",
     apps: "Apps",
-    solid: "实线",
-    dashed: "虚线",
+    hand: "抓手",
+    laserPointer: "激光笔",
   },
 };
-
-export const colorKeys = Object.keys(colors);

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

@@ -1,5 +1,5 @@
-import type { HotKey } from "@netless/fastboard-core";
-import { append, attr, element } from "svelte/internal";
+import type { Color, HotKey } from "@netless/fastboard-core";
+import { element, attr, append } from "svelte/internal";
 
 /**
  * ```svelte
@@ -22,3 +22,25 @@ export function tooltip(text: string, hotkey?: HotKey) {
   append(outer, hotkey_span);
   return outer;
 }
+
+export function rgbToHex(r: number, g: number, b: number) {
+  const hex = ((r << 16) + (g << 8) + b).toString(16).padStart(6, "0");
+  return "#" + hex;
+}
+
+export function hexToRgb(hex: string): Color {
+  // 移除可能存在的 # 符号
+  hex = hex.replace(/^#/, "");
+
+  // 确保 hex 是 6 位
+  if (hex.length !== 6) {
+    throw new Error("Invalid hex color");
+  }
+
+  // 解析每两个字符为一个十进制数
+  const r = parseInt(hex.slice(0, 2), 16);
+  const g = parseInt(hex.slice(2, 4), 16);
+  const b = parseInt(hex.slice(4, 6), 16);
+
+  return [r, g, b];
+}