@netless/fastboard-ui 0.3.2-canary.3 → 0.3.2-canary.6

package/package.json

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

package/src/behaviors/apps.ts

@@ -38,6 +38,10 @@ class AppsInToolbar {
     this._data = this._data.filter(item => !filter(item));
     this._listeners.forEach(fn => fn(this._data));
   }
+  clear() {
+    this._data.length = 0;
+    this._listeners.forEach(fn => fn(this._data));
+  }
 }
 
 export type { AppsInToolbar };

package/src/components/Fastboard/Fastboard.svelte

@@ -61,7 +61,7 @@
   <div class="{name}-view" bind:this={container} on:touchstart|capture={tippy_hide_all} />
   <div class="{name}-left" class:hidden={!(layout === "visible" || layout === "toolbar-only")}>
     {#if config.toolbar?.enable !== false}
-      <Toolbar {app} {theme} {language} />
+      <Toolbar {app} {theme} {language} config={config.toolbar} />
     {/if}
   </div>
   <div class="{name}-bottom-left" class:hidden={layout !== "visible"}>

package/src/components/Toolbar/Toolbar.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { FastboardApp } from "@netless/fastboard-core";
-  import type { Language, Theme } from "../../typings";
+  import type { Language, Theme, ToolbarConfig } from "../../typings";
   import { writable as svelte_writable } from "svelte/store";
   import { height } from "../../actions/height";
   import { clamp } from "../helpers";
@@ -9,6 +9,7 @@
   export let app: FastboardApp | null | undefined = null;
   export let theme: Theme = "light";
   export let language: Language = "en";
+  export let config: ToolbarConfig = {};
 
   const name = "fastboard-toolbar";
   const extra_height = (32 + 4 + 4) * 2;
@@ -22,11 +23,22 @@
 
   $: computed_height = clamp($container_height, extra_height, $scroll_height + extra_height);
   $: scrollable = $scroll_height + extra_height > $container_height;
+
+  $: hide_apps = config.apps?.enable === false;
 </script>
 
 <div class="{name} {theme}" class:collapsed use:height={container_height}>
   <div class="{name}-contents {theme}" style:height={scrollable ? computed_height + "px" : "auto"}>
-    <Contents {app} {theme} {language} {disabled} {scroll_height} {computed_height} {scrollable} />
+    <Contents
+      {app}
+      {theme}
+      {language}
+      {disabled}
+      {scroll_height}
+      {computed_height}
+      {scrollable}
+      {hide_apps}
+    />
   </div>
   <label class="{name}-handler {theme}">
     <input type="checkbox" bind:checked={collapsed} />

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

@@ -1,11 +1,12 @@
 import type { FastboardApp } from "@netless/fastboard-core";
-import type { Theme, Language } from "../../typings";
+import type { Theme, Language, ToolbarConfig } from "../../typings";
 import { SvelteComponentTyped } from "svelte";
 
 export declare interface ToolbarProps {
   app?: FastboardApp | null;
   theme?: Theme;
   language?: Language;
+  config?: ToolbarConfig;
 }
 
 declare class Toolbar extends SvelteComponentTyped<ToolbarProps> {}

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

@@ -16,6 +16,7 @@
   import Button from "../../Button";
   import StrokeWidth from "./StrokeWidth.svelte";
   import StrokeColor from "./StrokeColor.svelte";
+  import TextColor from "./TextColor.svelte";
   import Shapes from "./Shapes.svelte";
 
   export let app: FastboardApp | null | undefined = null;
@@ -25,6 +26,7 @@
   export let scroll_height: Writable<number>;
   export let computed_height = 0;
   export let scrollable = false;
+  export let hide_apps = false;
 
   const name = "fastboard-toolbar";
 
@@ -146,9 +148,11 @@
   <Button class="clear" {...btn_props} on:click={clear} content={t.clear}>
     <Icons.Clear {theme} />
   </Button>
-  <Button class="apps" {...btn_props} content={t.apps} menu={apps_panel} menu_placement="right-end">
-    <Icons.Apps {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}
 </div>
 {#if scrollable}
   <Button class="scroll-down" {name} {theme} {disabled} on:click={scroll_down}>
@@ -163,7 +167,7 @@
     <StrokeColor {app} {theme} {disabled} />
   </div>
   <div class="{name}-panel text" bind:this={text_panel}>
-    <StrokeColor {app} {theme} {disabled} />
+    <TextColor {app} {theme} {disabled} />
   </div>
   <div class="{name}-panel shapes" bind:this={shapes_panel}>
     <Shapes {app} {theme} {language} {disabled} />

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

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import type { Color, FastboardApp } from "@netless/fastboard-core";
+  import type { Theme } from "../../../typings";
+  import { colorKeys, colors } from "./constants";
+
+  export let app: FastboardApp | null | undefined = null;
+  export let theme: Theme = "light";
+  export let disabled = false;
+
+  $: memberState = app?.memberState;
+  $: textColor = $memberState?.textColor;
+
+  function is_equal_color(a?: Color, b?: Color) {
+    return a && b && a.every((v, i) => v === b[i]);
+  }
+
+  function set_stroke_color(ev: MouseEvent) {
+    let button = ev.target as HTMLButtonElement | null;
+    if (button && button.dataset.colorKey) {
+      let color = colors[button.dataset.colorKey];
+      if (color && app) {
+        app.setTextColor(color);
+      }
+    }
+  }
+</script>
+
+<div class="fastboard-toolbar-colors {theme}" on:click={set_stroke_color}>
+  {#each colorKeys as key (key)}
+    <button
+      class="fastboard-toolbar-btn fastboard-toolbar-color-btn {theme}"
+      class:is-active={is_equal_color(textColor, colors[key])}
+      data-color-key={key}
+      {disabled}
+    >
+      <span class="fastboard-toolbar-color-item" style:background-color={key} />
+    </button>
+  {/each}
+</div>

package/src/typings.ts

@@ -16,10 +16,16 @@ export type GenericIcon<K extends string, E extends string = IconType> = {
 
 export type I18nData<T extends string> = Record<Language, Record<T, string>>;
 
+export interface ToolbarConfig {
+  apps?: {
+    enable?: boolean;
+  };
+}
+
 export interface FastboardUIConfig {
   toolbar?: {
     enable?: boolean;
-  };
+  } & ToolbarConfig;
   redo_undo?: {
     enable?: boolean;
   };