@netless/fastboard-ui 0.3.21 → 0.3.22-beta.1

package/dist/lite.d.ts

@@ -1,4 +1,4 @@
-import { FastboardApp, FastboardPlayer } from '@netless/fastboard-core/lite';
+import { Color, FastboardApp, FastboardPlayer } from '@netless/fastboard-core/lite';
 import { SvelteComponentTyped } from 'svelte/internal';
 export { SvelteComponentTyped } from 'svelte/internal';
 
@@ -33,6 +33,8 @@ interface ToolbarConfig {
     apps?: {
         enable?: boolean;
     };
+    /** 颜色 */
+    colors?: Color[];
 }
 interface FastboardUIConfig {
     toolbar?: {

package/package.json

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

package/src/components/Fastboard/Fastboard.svelte

@@ -1,7 +1,7 @@
 <svelte:options immutable />
 
 <script lang="ts">
-  import type { FastboardApp } from "@netless/fastboard-core";
+  import type { Color, FastboardApp } from "@netless/fastboard-core";
   import type { Language, Theme, FastboardUIConfig } from "../../typings";
   import { onMount } from "svelte";
   import { tippy_hide_all } from "../../actions/tippy";
@@ -15,6 +15,7 @@
   export let language: Language = "en";
   export let containerRef: ((element: HTMLDivElement | null) => void) | undefined = undefined;
   export let config: FastboardUIConfig = {};
+  export let colors: Color[] | undefined = undefined;
 
   const name = "fastboard";
   const AppsShowToolbar = ["DocsViewer", "Slide"];
@@ -23,6 +24,27 @@
   let layout: "hidden" | "toolbar-only" | "visible" = "hidden";
   let mounted = false;
 
+  $: manager = app?.manager;
+  $: room = app?.manager.room;
+  $: if (manager && room) {
+    const floatBarOptions = (room as any).floatBarOptions as { colors?: Color[] };
+    if (floatBarOptions.colors) {
+      colors = floatBarOptions.colors as Color[];
+    }
+    if (config?.toolbar) {
+      const _colors = config.toolbar.colors;
+      if (!_colors && colors) {
+        config = {
+          ...config,
+          toolbar: {
+            ...config.toolbar,
+            colors,
+          },
+        };
+      }
+    }
+  }
+
   $: writable = app?.writable;
   $: boxState = app?.boxState;
   $: focusedApp = app?.focusedApp;

package/src/components/Toolbar/Toolbar.svelte

@@ -4,7 +4,7 @@
   import { writable as svelte_writable } from "svelte/store";
   import { height } from "../../actions/height";
   import { clamp } from "../helpers";
-  import { default_items } from "./components/constants";
+  import { default_items, default_colors } from "./components/constants";
   import Contents from "./components/Contents.svelte";
 
   export let app: FastboardApp | null | undefined = null;
@@ -29,6 +29,7 @@
   $: placement = config.placement || "left";
   $: items = config.items || default_items;
   $: hide_apps = config.apps?.enable === false;
+  $: colors = (config?.colors && config.colors.length && config.colors) || default_colors;
 </script>
 
 <div class="{name} {theme}" class:collapsed use:height={container_height}>
@@ -44,6 +45,7 @@
       {placement}
       {items}
       {hide_apps}
+      {colors}
     />
   </div>
   <label class="{name}-handler {theme}">

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

@@ -7,7 +7,7 @@
   import { scrollTop } from "../../../actions/scroll";
   import { tippy_hide_all } from "../../../actions/tippy";
   import { clamp } from "../../helpers";
-  import { default_items, i18n } from "./constants";
+  import { default_colors, default_items, i18n } from "./constants";
   import { apps } from "../../../behaviors";
   import { tooltip } from "./helper";
   import Icons from "../../Icons";
@@ -38,6 +38,7 @@
   export let placement: "left" | "right" = "left";
   export let items: ToolbarItem[] = default_items;
   export let hide_apps = false;
+  export let colors = default_colors;
 
   const name = "fastboard-toolbar";
 
@@ -157,17 +158,17 @@
   <div class="{name}-panel pencil" bind:this={pencil_panel}>
     <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}>
     <SelectShapes {app} {theme} {language} {disabled} />
     <div class="{name}-panel-divider" />
     <StrokeWidth {app} {theme} {disabled} />
     <div class="{name}-panel-divider" />
-    <StrokeColor {app} {theme} {disabled} />
+    <StrokeColor {app} {theme} {disabled} {colors} />
   </div>
   <div class="{name}-panel apps" style="--n:{$apps.length}" bind:this={apps_panel}>
     {#each $apps as netless_app}

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

@@ -23,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",
@@ -88,5 +92,3 @@ export const i18n: I18nData<ToolbarItem | "apps"> = {
     laserPointer: "激光笔",
   },
 };
-
-export const colorKeys = Object.keys(colors);

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

@@ -1,4 +1,4 @@
-import type { HotKey } from "@netless/fastboard-core";
+import type { Color, HotKey } from "@netless/fastboard-core";
 import { element, attr, append } from "svelte/internal";
 
 /**
@@ -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];
+}

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";
@@ -19,17 +19,49 @@ export interface UI {
  */
 export function createUI(app?: FastboardApp | null, div?: Element): UI {
   let fastboard: Fastboard | undefined;
+  let colors: Color[] | undefined;
+
+  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[];
+    }
+  }
 
   const ui: UI = {
     mount(div: Element, props?: FastboardProps) {
       if (fastboard) {
         fastboard.$destroy();
       }
+      if (props?.config?.toolbar) {
+        const _colors = props.config.toolbar.colors;
+        if (!_colors && colors) {
+          props.config = {
+            ...props.config,
+            toolbar: {
+              ...props.config.toolbar,
+              colors,
+            },
+          };
+        }
+      }
       fastboard = new Fastboard({ target: div, props: { app, ...props } });
       return ui;
     },
     update(props?: FastboardProps) {
       if (fastboard && props) {
+        if (props?.config?.toolbar) {
+          const _colors = props.config.toolbar.colors;
+          if (!_colors && colors) {
+            props.config = {
+              ...props.config,
+              toolbar: {
+                ...props.config.toolbar,
+                colors,
+              },
+            };
+          }
+        }
         fastboard.$set(props);
       }
     },

package/src/typings.ts

@@ -1,5 +1,7 @@
 /// <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> {
@@ -47,6 +49,8 @@ export interface ToolbarConfig {
   collapsed?: boolean;
   /** Control the last button which opens apps stock on toolbar. */
   apps?: { enable?: boolean };
+  /** 颜色 */
+  colors?: Color[];
 }
 
 export interface FastboardUIConfig {