@netless/fastboard-ui 0.3.9 → 0.3.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/fastboard-ui",
-  "version": "0.3.9",
+  "version": "0.3.11",
   "description": "The front-end of @netless/fastboard-core.",
   "main": "dist/index.js",
   "svelte": "dist/index.svelte.mjs",
@@ -10,15 +10,15 @@
   ],
   "repository": "netless-io/fastboard",
   "peerDependencies": {
-    "@netless/fastboard-core": "0.3.9"
+    "@netless/fastboard-core": "0.3.11"
   },
   "dependencies": {
     "tippy.js": "^6.3.7"
   },
   "devDependencies": {
-    "@netless/fastboard-core": "0.3.9",
+    "@netless/buildtool": "0.1.0",
     "@netless/esbuild-plugin-inline-sass": "0.1.0",
-    "@netless/buildtool": "0.1.0"
+    "@netless/fastboard-core": "0.3.11"
   },
   "scripts": {
     "cleanup": "rimraf dist",

package/src/components/Fastboard/Fastboard.scss

@@ -28,6 +28,17 @@
   }
 }
 
+.fastboard-right {
+  @extend .fastboard-left;
+  left: auto;
+  right: 0;
+
+  .fastboard-toolbar {
+    padding-left: 0;
+    padding-right: 16px;
+  }
+}
+
 .fastboard-bottom-left {
   display: flex;
   gap: 10px;

package/src/components/Fastboard/Fastboard.svelte

@@ -39,6 +39,13 @@
     layout = "visible";
   }
 
+  $: toolbar_has_items =
+    !config.toolbar ||
+    !config.toolbar.items ||
+    !config.toolbar.apps ||
+    config.toolbar.items.length > 0 ||
+    config.toolbar.apps.enable !== false;
+
   $: try {
     if (app && container) {
       app.bindContainer(container);
@@ -72,7 +79,10 @@
 
 <div class="{name}-root" class:loading={!app}>
   <div class="{name}-view" bind:this={container} on:touchstart|capture={focus_me} />
-  <div class="{name}-left" class:hidden={!(layout === "visible" || layout === "toolbar-only")}>
+  <div
+    class="{name}-{config.toolbar?.placement || 'left'}"
+    class:hidden={!toolbar_has_items || !(layout === "visible" || layout === "toolbar-only")}
+  >
     {#if config.toolbar?.enable !== false}
       <Toolbar {app} {theme} {language} config={config.toolbar} />
     {/if}

package/src/components/Icons/Drag.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
+    d="M17.143 8.143v2.571h-3.857V6.857h2.571L12 3 8.143 6.857h2.571v3.857H6.857V8.143L3 12l1.286 1.286 2.571 2.571v-2.571h3.857v3.857H8.143L12 21l1.286-1.286 2.571-2.571h-2.571v-3.857h3.857v2.571L21 12l-3.857-3.857Z"
+    stroke="#5D6066"
+    stroke-width="1.25"
+    stroke-linejoin="round"
+    class="fastboard-icon-stroke-color"
+  />
+</svg>

package/src/components/Icons/DragFilled.svelte

@@ -0,0 +1,14 @@
+<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
+    d="M17.143 8.143v2.571h-3.857V6.857h2.571L12 3 8.143 6.857h2.571v3.857H6.857V8.143L3 12l1.286 1.286 2.571 2.571v-2.571h3.857v3.857H8.143L12 21l1.286-1.286 2.571-2.571h-2.571v-3.857h3.857v2.571L21 12l-3.857-3.857Z"
+    fill="#5D6066"
+    class="fastboard-icon-fill-color"
+  />
+</svg>

package/src/components/Icons/Laser.svelte

@@ -0,0 +1,21 @@
+<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
+    d="m11.48 10.033 2.695 2.696m-2.695-2.696-7.375 7.379a.364.364 0 0 0 0 .515l2.18 2.182a.361.361 0 0 0 .514 0l7.376-7.38m-2.695-2.696 2.438-2.438a.363.363 0 0 1 .514 0l2.18 2.182v-.001a.363.363 0 0 1 0 .514l-2.437 2.439"
+    stroke="#5D6066"
+    stroke-width="1.25"
+    stroke-linejoin="round"
+    class="fastboard-icon-stroke-color"
+  />
+  <path
+    d="M10.895 6.652a.363.363 0 0 0-.13-.182c-.348-.399-.338-1.264.032-1.634a.362.362 0 1 0-.513-.514c-.18.18-.491.286-.834.286-.343 0-.654-.107-.833-.286a.363.363 0 1 0-.514.514c.38.382.38 1.286 0 1.667a.364.364 0 0 0 .514.515c.179-.18.49-.287.833-.287.343 0 .654.107.834.287a.362.362 0 0 0 .256.106h.008a.363.363 0 0 0 .347-.472Zm6.294-.149a.366.366 0 0 0 .118.594.363.363 0 0 0 .396-.079c.18-.18.49-.287.834-.287.343 0 .654.107.832.287a.362.362 0 0 0 .258.106h.007a.363.363 0 0 0 .218-.654c-.35-.399-.338-1.264.032-1.634a.363.363 0 1 0-.515-.514c-.178.18-.49.286-.832.286-.343 0-.654-.107-.834-.286a.364.364 0 0 0-.514.514c.382.382.382 1.286 0 1.667Zm2.794 9.239a.363.363 0 0 0-.13-.182c-.35-.398-.34-1.263.03-1.633a.363.363 0 1 0-.514-.515c-.178.18-.49.287-.832.287-.343 0-.654-.107-.834-.287a.365.365 0 0 0-.514.515c.382.38.382 1.285 0 1.667a.364.364 0 0 0 .514.514c.18-.18.49-.286.834-.286.343 0 .654.107.832.286a.363.363 0 0 0 .258.107h.007a.363.363 0 0 0 .349-.473Z"
+    fill="#5D6066"
+    class="fastboard-icon-fill-color"
+  />
+</svg>

package/src/components/Icons/LaserFilled.svelte

@@ -0,0 +1,14 @@
+<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
+    d="m11.48 10.033 2.695 2.696-7.376 7.38a.361.361 0 0 1-.514 0l-2.18-2.182a.362.362 0 0 1 0-.515l7.375-7.379Zm5.133-.257a.363.363 0 0 1 0 .514l-1.925 1.925-2.694-2.696 1.924-1.924a.363.363 0 0 1 .514 0l2.18 2.182v-.001Zm-5.718-3.124a.363.363 0 0 0-.13-.182c-.348-.399-.338-1.264.032-1.634a.362.362 0 1 0-.513-.514c-.18.18-.491.286-.834.286-.343 0-.654-.107-.833-.286a.363.363 0 1 0-.514.514c.38.382.38 1.286 0 1.667a.364.364 0 0 0 .514.515c.179-.18.49-.287.833-.287.343 0 .654.107.834.287a.362.362 0 0 0 .256.106h.008a.363.363 0 0 0 .347-.472Zm6.294-.149a.366.366 0 0 0 .118.594.363.363 0 0 0 .396-.079c.18-.18.49-.287.834-.287.343 0 .654.107.832.287a.362.362 0 0 0 .258.106h.007a.363.363 0 0 0 .218-.654c-.35-.399-.338-1.264.032-1.634a.363.363 0 1 0-.515-.514c-.178.18-.49.286-.832.286-.343 0-.654-.107-.834-.286a.364.364 0 0 0-.514.514c.382.382.382 1.286 0 1.667Zm2.794 9.239a.363.363 0 0 0-.13-.182c-.35-.398-.34-1.263.03-1.633a.363.363 0 1 0-.514-.515c-.178.18-.49.287-.832.287-.343 0-.654-.107-.834-.287a.365.365 0 0 0-.514.515c.382.38.382 1.285 0 1.667a.364.364 0 0 0 .514.514c.18-.18.49-.286.834-.286.343 0 .654.107.832.286a.363.363 0 0 0 .258.107h.007a.363.363 0 0 0 .349-.473Z"
+    fill="#5D6066"
+    class="fastboard-icon-fill-color"
+  />
+</svg>

package/src/components/Icons/index.ts

@@ -10,8 +10,12 @@ import Click from "./Click.svelte";
 import ClickFilled from "./ClickFilled.svelte";
 import Diamond from "./Diamond.svelte";
 import Down from "./Down.svelte";
+import Drag from "./Drag.svelte";
+import DragFilled from "./DragFilled.svelte";
 import Eraser from "./Eraser.svelte";
 import EraserFilled from "./EraserFilled.svelte";
+import Laser from "./Laser.svelte";
+import LaserFilled from "./LaserFilled.svelte";
 import Left from "./Left.svelte";
 import Line from "./Line.svelte";
 import LineBolded from "./LineBolded.svelte";
@@ -55,8 +59,12 @@ const Icons = {
   ClickFilled,
   Diamond,
   Down,
+  Drag,
+  DragFilled,
   Eraser,
   EraserFilled,
+  Laser,
+  LaserFilled,
   Left,
   Line,
   LineBolded,

package/src/components/Toolbar/Toolbar.scss

@@ -76,3 +76,13 @@ $name: "fastboard-toolbar";
 
 @import "./components/Slider.scss";
 @import "./components/Contents.scss";
+
+.fastboard-right .#{$name}.collapsed {
+  transform: translateX(100%);
+}
+
+.fastboard-right .#{$name}-handler {
+  left: auto;
+  right: 100%;
+  transform: rotate(180deg);
+}

package/src/components/Toolbar/Toolbar.svelte

@@ -24,6 +24,8 @@
   $: computed_height = clamp($container_height, extra_height, $scroll_height + extra_height);
   $: scrollable = $scroll_height + extra_height > $container_height;
 
+  $: placement = config.placement || "left";
+  $: items = config.items;
   $: hide_apps = config.apps?.enable === false;
 </script>
 
@@ -37,6 +39,8 @@
       {scroll_height}
       {computed_height}
       {scrollable}
+      {placement}
+      {items}
       {hide_apps}
     />
   </div>

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

@@ -166,3 +166,10 @@ $name: "fastboard-toolbar";
     }
   }
 }
+
+.fastboard-right .#{$name}-triangle {
+  right: auto;
+  left: 0;
+  border-left: 0;
+  border-right: 4px solid transparent;
+}

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

@@ -1,24 +1,32 @@
 <script lang="ts">
-  import type { Appliance, FastboardApp } from "@netless/fastboard-core";
+  import type { FastboardApp } 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 } from "./constants";
-  import { 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 { 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 TextColor from "./TextColor.svelte";
-  import Shapes from "./Shapes.svelte";
-  import { tippy_hide_all } from "../../../actions/tippy";
+  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";
@@ -27,19 +35,26 @@
   export let scroll_height: Writable<number>;
   export let computed_height = 0;
   export let scrollable = false;
+  export let placement: "left" | "right" = "left";
+  export let items: ToolbarItem[] = ["clicker", "selector", "pencil", "text", "shapes", "eraser", "clear"];
   export let hide_apps = false;
 
   const name = "fastboard-toolbar";
 
-  let last_shape: Shape = "rectangle";
-
   let pencil_panel: HTMLDivElement;
   let text_panel: HTMLDivElement;
   let shapes_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 = {
@@ -48,18 +63,14 @@
     pencil: tooltip(t.pencil, hotkeys?.changeToPencil),
     eraser: tooltip(t.eraser, hotkeys?.changeToEraser),
     text: tooltip(t.text, hotkeys?.changeToText),
+    hand: tooltip(t.hand, hotkeys?.changeToHand),
+    laserPointer: tooltip(t.laserPointer, hotkeys?.changeToLaserPointer),
   };
+
   $: memberState = app?.memberState;
   $: appliance = $memberState?.currentApplianceName;
-  $: shape = $memberState?.shapeType;
   $: status = app?.appsStatus;
 
-  $: if (applianceShapes.includes(appliance as Appliance)) {
-    last_shape = appliance as Shape;
-  } else if (shape) {
-    last_shape = shape;
-  }
-
   $: max_scroll = scrollable ? $scroll_height + (32 + 8) * 2 - computed_height : 0;
 
   let top = writable(0);
@@ -83,16 +94,15 @@
   function text() {
     app?.setAppliance("text");
   }
-  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 eraser() {
     app?.setAppliance("eraser");
   }
+  function hand() {
+    app?.setAppliance("hand");
+  }
+  function laserPointer() {
+    app?.setAppliance("laserPointer");
+  }
   function clear() {
     app?.cleanCurrentScene();
   }
@@ -104,53 +114,35 @@
   </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}>
-    {#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 {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" {...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}>
-    {#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}>
-    {#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}>
-    {#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>
+  {/each}
   {#if !hide_apps}
-    <Button class="apps" {...btn_props} content={t.apps} menu={apps_panel} menu_placement="right-end">
+    <Button
+      class="apps"
+      {...btn_props}
+      content={t.apps}
+      menu={apps_panel}
+      menu_placement={placement === "left" ? "right-end" : "left-end"}
+    >
       <Icons.Apps {theme} />
     </Button>
   {/if}
@@ -171,7 +163,7 @@
     <TextColor {app} {theme} {disabled} />
   </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" />

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

@@ -1,5 +1,5 @@
 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 colors: Record<string, Color> = {
@@ -52,9 +52,7 @@ export const shapesIconActive: Record<Shape, any> = {
   speechBalloon: Icons.BalloonBolded,
 };
 
-export const i18n: I18nData<
-  "clicker" | "selector" | "pencil" | "text" | "shapes" | "eraser" | "clear" | "apps"
-> = {
+export const i18n: I18nData<ToolbarItem | "apps"> = {
   en: {
     clicker: "clicker",
     selector: "selector",
@@ -64,6 +62,8 @@ export const i18n: I18nData<
     shapes: "shapes",
     clear: "clear",
     apps: "apps",
+    hand: "hand",
+    laserPointer: "laser pointer",
   },
   "zh-CN": {
     clicker: "点击",
@@ -74,6 +74,8 @@ export const i18n: I18nData<
     shapes: "形状",
     clear: "清屏",
     apps: "Apps",
+    hand: "抓手",
+    laserPointer: "激光笔",
   },
 };
 

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

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import type { Theme } from "../../../typings";
+  import Button, { type ButtonProps } from "../../Button";
+  import Icons from "../../Icons";
+
+  export let btn_props: Partial<ButtonProps> = {};
+  export let content: ButtonProps["content"] | undefined;
+  export let theme: Theme = "light";
+</script>
+
+<Button class="clear" {...btn_props} on:click {content}>
+  <Icons.Clear {theme} />
+</Button>

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

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import type { ApplianceNames } from "@netless/fastboard-core";
+  import type { Theme } from "../../../typings";
+  import Button, { type ButtonProps } from "../../Button";
+  import Icons from "../../Icons";
+
+  export let btn_props: Partial<ButtonProps> = {};
+  export let content: ButtonProps["content"] | undefined;
+  export let appliance: ApplianceNames | undefined;
+  export let theme: Theme = "light";
+</script>
+
+<Button class="clicker" {...btn_props} on:click {content}>
+  {#if appliance === "clicker"}
+    <Icons.ClickFilled {theme} active />
+  {:else}
+    <Icons.Click {theme} />
+  {/if}
+</Button>

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

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import type { ApplianceNames } from "@netless/fastboard-core";
+  import type { Theme } from "../../../typings";
+  import Button, { type ButtonProps } from "../../Button";
+  import Icons from "../../Icons";
+
+  export let btn_props: Partial<ButtonProps> = {};
+  export let content: ButtonProps["content"] | undefined;
+  export let appliance: ApplianceNames | undefined;
+  export let theme: Theme = "light";
+</script>
+
+<Button class="eraser" {...btn_props} on:click {content}>
+  {#if appliance === "eraser"}
+    <Icons.EraserFilled {theme} active />
+  {:else}
+    <Icons.Eraser {theme} />
+  {/if}
+</Button>

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

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import type { ApplianceNames } from "@netless/fastboard-core";
+  import type { Theme } from "../../../typings";
+  import Button, { type ButtonProps } from "../../Button";
+  import Icons from "../../Icons";
+
+  export let btn_props: Partial<ButtonProps> = {};
+  export let content: ButtonProps["content"] | undefined;
+  export let appliance: ApplianceNames | undefined;
+  export let theme: Theme = "light";
+</script>
+
+<Button class="hand" {...btn_props} on:click {content}>
+  {#if appliance === "hand"}
+    <Icons.DragFilled {theme} active />
+  {:else}
+    <Icons.Drag {theme} />
+  {/if}
+</Button>

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

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import type { ApplianceNames } from "@netless/fastboard-core";
+  import type { Theme } from "../../../typings";
+  import Button, { type ButtonProps } from "../../Button";
+  import Icons from "../../Icons";
+
+  export let btn_props: Partial<ButtonProps> = {};
+  export let content: ButtonProps["content"] | undefined;
+  export let appliance: ApplianceNames | undefined;
+  export let theme: Theme = "light";
+</script>
+
+<Button class="laserPointer" {...btn_props} on:click {content}>
+  {#if appliance === "laserPointer"}
+    <Icons.LaserFilled {theme} active />
+  {:else}
+    <Icons.Laser {theme} />
+  {/if}
+</Button>

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { ApplianceNames } from "@netless/fastboard-core";
+  import type { Theme } from "../../../typings";
+  import Button, { type ButtonProps } from "../../Button";
+  import Icons from "../../Icons";
+
+  export let btn_props: Partial<ButtonProps> = {};
+  export let content: ButtonProps["content"] | undefined;
+  export let menu: ButtonProps["menu"] | undefined;
+  export let appliance: ApplianceNames | undefined;
+  export let theme: Theme = "light";
+</script>
+
+<Button class="pencil" {...btn_props} on:click {content} {menu}>
+  {#if appliance === "pencil"}
+    <Icons.PencilFilled {theme} active />
+  {:else}
+    <Icons.Pencil {theme} />
+  {/if}
+</Button>

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

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import type { ApplianceNames } from "@netless/fastboard-core";
+  import type { Theme } from "../../../typings";
+  import Button, { type ButtonProps } from "../../Button";
+  import Icons from "../../Icons";
+
+  export let btn_props: Partial<ButtonProps> = {};
+  export let content: ButtonProps["content"] | undefined;
+  export let appliance: ApplianceNames | undefined;
+  export let theme: Theme = "light";
+</script>
+
+<Button class="selector" {...btn_props} on:click {content}>
+  {#if appliance === "selector"}
+    <Icons.SelectorFilled {theme} active />
+  {:else}
+    <Icons.Selector {theme} />
+  {/if}
+</Button>

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

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import type { Appliance, ApplianceNames, FastboardApp } from "@netless/fastboard-core";
+  import type { Theme } from "../../../typings";
+  import { applianceShapes, shapesIcon, shapesIconActive, type Shape } from "../components/constants";
+  import Button, { type ButtonProps } from "../../Button";
+
+  export let app: FastboardApp | null | undefined = null;
+  export let btn_props: Partial<ButtonProps> = {};
+  export let content: ButtonProps["content"] | undefined;
+  export let menu: ButtonProps["menu"] | undefined;
+  export let appliance: ApplianceNames | undefined;
+  export let theme: Theme = "light";
+
+  $: memberState = app?.memberState;
+  $: appliance = $memberState?.currentApplianceName;
+  $: shape = $memberState?.shapeType;
+
+  let last_shape: Shape = "rectangle";
+
+  $: if (applianceShapes.includes(appliance as Appliance)) {
+    last_shape = appliance as Shape;
+  } else if (shape) {
+    last_shape = shape;
+  }
+
+  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>);
+    }
+  }
+</script>
+
+<Button class="shapes" {...btn_props} on:click={select_last_shape} {content} {menu}>
+  {#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>

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { ApplianceNames } from "@netless/fastboard-core";
+  import type { Theme } from "../../../typings";
+  import Button, { type ButtonProps } from "../../Button";
+  import Icons from "../../Icons";
+
+  export let btn_props: Partial<ButtonProps> = {};
+  export let content: ButtonProps["content"] | undefined;
+  export let menu: ButtonProps["menu"] | undefined;
+  export let appliance: ApplianceNames | undefined;
+  export let theme: Theme = "light";
+</script>
+
+<Button class="text" {...btn_props} on:click {content} {menu}>
+  {#if appliance === "text"}
+    <Icons.TextFilled {theme} active />
+  {:else}
+    <Icons.Text {theme} />
+  {/if}
+</Button>