@netless/fastboard-ui 0.3.2-canary.1 → 0.3.2-canary.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/fastboard-ui",
-  "version": "0.3.2-canary.1",
+  "version": "0.3.2-canary.4",
   "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.1"
+    "@netless/fastboard-core": "0.3.2-canary.4"
   },
   "dependencies": {
     "tippy.js": "^6.3.7"
   },
   "devDependencies": {
     "@netless/esbuild-plugin-inline-sass": "0.1.0",
-    "@netless/fastboard-core": "0.3.2-canary.1"
+    "@netless/fastboard-core": "0.3.2-canary.4"
   },
   "scripts": {
     "cleanup": "rimraf dist",

package/src/components/Fastboard/Fastboard.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, FastboardUIConfig } from "../../typings";
   import { onMount } from "svelte";
   import { tippy_hide_all } from "../../actions/tippy";
   import RedoUndo from "../RedoUndo";
@@ -12,6 +12,7 @@
   export let theme: Theme = "light";
   export let language: Language = "en";
   export let containerRef: ((element: HTMLDivElement | null) => void) | undefined = undefined;
+  export let config: FastboardUIConfig = {};
 
   const name = "fastboard";
   const AppsShowToolbar = ["DocsViewer", "Slide"];
@@ -59,13 +60,21 @@
 <div class="{name}-root" class:loading={!app}>
   <div class="{name}-view" bind:this={container} on:touchstart|capture={tippy_hide_all} />
   <div class="{name}-left" class:hidden={!(layout === "visible" || layout === "toolbar-only")}>
-    <Toolbar {app} {theme} {language} />
+    {#if config.toolbar?.enable !== false}
+      <Toolbar {app} {theme} {language} />
+    {/if}
   </div>
   <div class="{name}-bottom-left" class:hidden={layout !== "visible"}>
-    <RedoUndo {app} {theme} {language} />
-    <ZoomControl {app} {theme} {language} />
+    {#if config.redo_undo?.enable !== false}
+      <RedoUndo {app} {theme} {language} />
+    {/if}
+    {#if config.zoom_control?.enable !== false}
+      <ZoomControl {app} {theme} {language} />
+    {/if}
   </div>
   <div class="{name}-bottom-right" class:hidden={layout !== "visible"}>
-    <PageControl {app} {theme} {language} />
+    {#if config.page_control?.enable !== false}
+      <PageControl {app} {theme} {language} />
+    {/if}
   </div>
 </div>

package/src/components/Fastboard/Fastboard.svelte.ts

@@ -1,5 +1,5 @@
 import type { FastboardApp } from "@netless/fastboard-core";
-import type { Theme, Language } from "../../typings";
+import type { Theme, Language, FastboardUIConfig } from "../../typings";
 import { SvelteComponentTyped } from "svelte";
 
 export declare interface FastboardProps {
@@ -7,6 +7,7 @@ export declare interface FastboardProps {
   theme?: Theme;
   language?: Language;
   containerRef?: (container: HTMLDivElement | null) => void;
+  config?: FastboardUIConfig;
 }
 
 declare class Fastboard extends SvelteComponentTyped<FastboardProps> {}

package/src/components/Toolbar/Toolbar.scss

@@ -21,9 +21,14 @@ $name: "fastboard-toolbar";
   left: 100%;
   width: 17px;
   font-size: 0;
+  border-radius: 3px;
   cursor: pointer;
   pointer-events: auto;
 
+  &:focus-within {
+    outline: 2px solid -webkit-focus-ring-color;
+  }
+
   input[type="checkbox"] {
     position: absolute;
     top: 0;
@@ -33,6 +38,8 @@ $name: "fastboard-toolbar";
     width: 100%;
     height: 100%;
     cursor: pointer;
+    opacity: 0;
+    z-index: -1;
   }
 
   svg {

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;
@@ -163,7 +164,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/index.ts

@@ -1,4 +1,4 @@
-export type { GenericIcon, Language, Theme } from "./typings";
+export * from "./typings";
 
 export { default as RedoUndo, type RedoUndoProps } from "./components/RedoUndo";
 export { default as PageControl, type PageControlProps } from "./components/PageControl";

package/src/typings.ts

@@ -15,3 +15,18 @@ export type GenericIcon<K extends string, E extends string = IconType> = {
 };
 
 export type I18nData<T extends string> = Record<Language, Record<T, string>>;
+
+export interface FastboardUIConfig {
+  toolbar?: {
+    enable?: boolean;
+  };
+  redo_undo?: {
+    enable?: boolean;
+  };
+  zoom_control?: {
+    enable?: boolean;
+  };
+  page_control?: {
+    enable?: boolean;
+  };
+}