fix: updating ui config raises error when toolbar is not set

netless-io · Feb 5, 2024 · acc4c28 · acc4c28
1 parent d8117d6
commit acc4c28
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## Unreleased
+
+- Fixed an error when UI config is updated to `{ toolbar: undefined }`.
+
 ## 0.3.11
 
 - Added toolbar config `placement: "left" | "right"` and `items: ToolbarItem[]` to further control the style of toolbar; added 2 more tools `hand` and `laserPointer` to `ToolbarItem`.

diff --git a/packages/fastboard-ui/src/components/Fastboard/Fastboard.svelte b/packages/fastboard-ui/src/components/Fastboard/Fastboard.svelte
@@ -84,7 +84,7 @@
     class:hidden={!toolbar_has_items || !(layout === "visible" || layout === "toolbar-only")}
   >
     {#if config.toolbar?.enable !== false}
-      <Toolbar {app} {theme} {language} config={config.toolbar} />
+      <Toolbar {app} {theme} {language} config={config.toolbar || {}} />
     {/if}
   </div>
   <div class="{name}-bottom-left" class:hidden={layout !== "visible"}>

diff --git a/packages/fastboard-ui/src/components/Toolbar/Toolbar.svelte b/packages/fastboard-ui/src/components/Toolbar/Toolbar.svelte
@@ -5,6 +5,7 @@
   import { height } from "../../actions/height";
   import { clamp } from "../helpers";
   import Contents from "./components/Contents.svelte";
+  import { default_items } from "./components/constants";
 
   export let app: FastboardApp | null | undefined = null;
   export let theme: Theme = "light";
@@ -25,7 +26,7 @@
   $: scrollable = $scroll_height + extra_height > $container_height;
 
   $: placement = config.placement || "left";
-  $: items = config.items;
+  $: items = config.items || default_items;
   $: hide_apps = config.apps?.enable === false;
 </script>
 

diff --git a/packages/fastboard-ui/src/components/Toolbar/components/Contents.svelte b/packages/fastboard-ui/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 { i18n } from "./constants";
+  import { default_items, i18n } from "./constants";
   import { apps } from "../../../behaviors";
   import { tooltip } from "./helper";
   import Icons from "../../Icons";
@@ -36,7 +36,7 @@
   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 items: ToolbarItem[] = default_items;
   export let hide_apps = false;
 
   const name = "fastboard-toolbar";

diff --git a/packages/fastboard-ui/src/components/Toolbar/components/constants.ts b/packages/fastboard-ui/src/components/Toolbar/components/constants.ts
@@ -2,6 +2,16 @@ import type { Appliance, Color } from "@netless/fastboard-core";
 import type { I18nData, ToolbarItem } from "../../../typings";
 import Icons from "../../Icons";
 
+export const default_items: ToolbarItem[] = [
+  "clicker",
+  "selector",
+  "pencil",
+  "text",
+  "shapes",
+  "eraser",
+  "clear",
+];
+
 export const colors: Record<string, Color> = {
   "#E02020": [224, 32, 32],
   "#F7B500": [247, 181, 0],