@netless/fastboard-ui 1.0.0-canary.9 → 1.0.1-beta.0

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,23 @@
+<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";
+  export let hasUseLaserPen: boolean = false;
+</script>
+
+<Button class="pencil" {...btn_props} on:click {content} {menu}>
+  {#if appliance === "pencil" && hasUseLaserPen}
+    <Icons.LaserPenFilled {theme} active />
+  {:else 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>

package/src/components/ZoomControl/ZoomControl.svelte

@@ -49,7 +49,8 @@
   const name = "fastboard-zoom-control";
 
   $: writable = app?.writable;
-  $: disabled = !$writable;
+  $: phase = app?.phase;
+  $: disabled = !($writable && $phase === "connected");
   $: t = i18n[language];
 
   let type: IconType;
@@ -57,10 +58,8 @@
 
   $: camera = app?.camera;
   $: scale = $camera?.scale ?? 1;
-  $: plus_disabled = disabled || next_scale(scale, 1) <= scale;
-  $: minus_disabled = disabled || next_scale(scale, -1) >= scale;
-
-  $: display_scale = clamp(Math.round(scale * 100), 30, 300);
+  $: plus_disabled = disabled || next_scale(scale, 1) === scale;
+  $: minus_disabled = disabled || next_scale(scale, -1) === scale;
 
   function plus() {
     app?.moveCamera({ scale: next_scale(scale, 1), centerX: 0, centerY: 0 });
@@ -85,7 +84,7 @@
     {#if $camera == null}
       &hellip;
     {:else}
-      {display_scale}%
+      {Math.ceil(scale * 100)}%
     {/if}
   </span>
   <Button class="minus" {name} {theme} disabled={minus_disabled} on:click={minus} content={t.minus}>

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

@@ -1,6 +1,6 @@
 import type { FastboardApp } from "@netless/fastboard-core";
 import type { Theme, Language, GenericIcon } from "../../typings";
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponentTyped } from "../../typings";
 
 export declare interface ZoomControlProps {
   app?: FastboardApp | null;

package/src/components/theme.scss

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

package/src/helpers/index.ts

@@ -1,4 +1,4 @@
-import type { FastboardApp, FastboardPlayer } from "@netless/fastboard-core";
+import type { Color, FastboardApp, FastboardPlayer } from "@netless/fastboard-core";
 import type { FastboardProps, ReplayFastboardProps } from "../components/Fastboard";
 
 import { Fastboard, ReplayFastboard } from "../components/Fastboard";
@@ -10,8 +10,6 @@ export interface UI {
   update(props?: FastboardProps): void;
   /** remove UI */
   destroy(): void;
-  /** div == null ? destroy() : mount() */
-  setElement(div: Element | null): void;
 }
 
 /**
@@ -21,40 +19,50 @@ export interface UI {
  */
 export function createUI(app?: FastboardApp | null, div?: Element): UI {
   let fastboard: Fastboard | undefined;
+  let colors: Color[] | undefined;
 
-  function mount(div: Element, props?: FastboardProps) {
-    if (fastboard) {
-      fastboard.$destroy();
+  if (app?.manager && app.manager.room) {
+    const floatBarOptions = (app.manager.room as any).floatBarOptions as { colors?: Color[] };
+    if (floatBarOptions.colors) {
+      colors = floatBarOptions.colors as Color[];
     }
-    fastboard = new Fastboard({ target: div, props: { app, ...props } });
-    return ui;
   }
 
-  function update(props?: FastboardProps) {
-    if (fastboard) {
-      fastboard.$set(props);
-    }
-  }
-
-  function destroy() {
-    if (fastboard) {
-      fastboard.$destroy();
-    }
-    fastboard = undefined;
-  }
-
-  function setElement(div: Element | null) {
-    if (div) {
-      mount(div);
-    } else {
-      destroy();
-    }
-  }
-
-  const ui: UI = { mount, update, destroy, setElement };
+  const ui: UI = {
+    mount(div: Element, props?: FastboardProps) {
+      if (fastboard) {
+        fastboard.$destroy();
+      }
+      if (colors && props?.config && !props.config.toolbar?.colors) {
+        if (!props?.config.toolbar) {
+          props.config.toolbar = {};
+        }
+        props.config.toolbar.colors = colors;
+      }
+      fastboard = new Fastboard({ target: div, props: { app, ...props } });
+      return ui;
+    },
+    update(props?: FastboardProps) {
+      if (fastboard && props) {
+        if (colors && props?.config && !props.config.toolbar?.colors) {
+          if (!props?.config.toolbar) {
+            props.config.toolbar = {};
+          }
+          props.config.toolbar.colors = colors;
+        }
+        fastboard.$set(props);
+      }
+    },
+    destroy() {
+      if (fastboard) {
+        fastboard.$destroy();
+      }
+      fastboard = undefined;
+    },
+  };
 
   if (div) {
-    mount(div, { app });
+    ui.mount(div, { app });
   }
 
   return ui;
@@ -67,8 +75,6 @@ export interface ReplayUI {
   update(props?: ReplayFastboardProps): void;
   /** remove UI */
   destroy(): void;
-  /** div == null ? destroy() : mount() */
-  setElement(div: Element | null): void;
 }
 
 /**
@@ -79,39 +85,29 @@ export interface ReplayUI {
 export function createReplayUI(player?: FastboardPlayer | null, div?: Element): ReplayUI {
   let fastboard: ReplayFastboard | undefined;
 
-  function mount(div: Element, props?: ReplayFastboardProps) {
-    if (fastboard) {
-      fastboard.$destroy();
-    }
-    fastboard = new ReplayFastboard({ target: div, props: { player, ...props } });
-    return ui;
-  }
-
-  function update(props?: ReplayFastboardProps) {
-    if (fastboard) {
-      fastboard.$set(props);
-    }
-  }
-
-  function destroy() {
-    if (fastboard) {
-      fastboard.$destroy();
-    }
-    fastboard = undefined;
-  }
-
-  function setElement(div: Element | null) {
-    if (div) {
-      mount(div);
-    } else {
-      destroy();
-    }
-  }
-
-  const ui: ReplayUI = { mount, update, destroy, setElement };
+  const ui: ReplayUI = {
+    mount(div: Element, props?: ReplayFastboardProps) {
+      if (fastboard) {
+        fastboard.$destroy();
+      }
+      fastboard = new ReplayFastboard({ target: div, props: { player, ...props } });
+      return ui;
+    },
+    update(props?: ReplayFastboardProps) {
+      if (fastboard && props) {
+        fastboard.$set(props);
+      }
+    },
+    destroy() {
+      if (fastboard) {
+        fastboard.$destroy();
+      }
+      fastboard = undefined;
+    },
+  };
 
   if (div) {
-    mount(div, { player });
+    ui.mount(div, { player });
   }
 
   return ui;

package/src/typings.ts

@@ -1,11 +1,14 @@
-import type { PageControlProps } from "./components/PageControl";
-import type { PlayerControlProps } from "./components/PlayerControl";
-import type { RedoUndoProps } from "./components/RedoUndo";
-import type { ToolbarConfig } from "./components/Toolbar";
-import type { ZoomControlProps } from "./components/ZoomControl";
+/// <reference types="svelte/types/runtime/ambient.d.ts" />
+
+import type { Color } from "@netless/fastboard-core";
+
+export { SvelteComponentTyped } from "svelte/internal";
 
 export interface SvelteAction<T = void> {
-  (node: HTMLElement, parameters: T): void | {
+  (
+    node: HTMLElement,
+    parameters: T
+  ): void | {
     update?: (parameters: T) => void;
     destroy?: () => void;
   };
@@ -22,27 +25,41 @@ export type GenericIcon<K extends string, E extends string = IconType> = {
 
 export type I18nData<T extends string> = Record<Language, Record<T, string>>;
 
+export type ToolbarItem =
+  | "clicker"
+  | "selector"
+  | "pencil"
+  | "text"
+  | "shapes"
+  | "eraser"
+  | "clear"
+  | "hand"
+  | "laserPointer";
+
+export interface ToolbarConfig {
+  /** @default "left" */
+  placement?: "left" | "right";
+  /** @default ["clicker", "selector", "pencil", "text", "shapes", "eraser", "clear"] */
+  items?: ToolbarItem[];
+  /**
+   * Note: updating this option does not take effect when the element was mounted.
+   * Make sure to set this option in `UI.mount(div, { configs: { toolbar: { collapsed: true } } })`.
+   * @default false
+   */
+  collapsed?: boolean;
+  /** Control the last button which opens apps stock on toolbar. */
+  apps?: { enable?: boolean };
+  /** 颜色 */
+  colors?: Color[];
+}
+
 export interface FastboardUIConfig {
-  toolbar?: {
-    enable?: boolean;
-  } & ToolbarConfig;
-  redo_undo?: {
-    enable?: boolean;
-    icons?: RedoUndoProps["icons"];
-  };
-  zoom_control?: {
-    enable?: boolean;
-    icons?: ZoomControlProps["icons"];
-  };
-  page_control?: {
-    enable?: boolean;
-    icons?: PageControlProps["icons"];
-  };
+  toolbar?: { enable?: boolean } & ToolbarConfig;
+  redo_undo?: { enable?: boolean };
+  zoom_control?: { enable?: boolean };
+  page_control?: { enable?: boolean };
 }
 
 export interface ReplayFastboardUIConfig {
-  player_control?: {
-    enable?: boolean;
-    icons?: PlayerControlProps["icons"];
-  };
+  player_control?: { enable?: boolean };
 }