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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/fastboard-ui",
-  "version": "0.3.22-beta.1",
+  "version": "0.3.22-beta.2",
   "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.22-beta.1"
+    "@netless/fastboard-core": "0.3.22-beta.2"
   },
   "dependencies": {
     "tippy.js": "^6.3.7"
   },
   "devDependencies": {
     "@netless/buildtool": "0.1.0",
-    "@netless/fastboard-core": "0.3.22-beta.1",
+    "@netless/fastboard-core": "0.3.22-beta.2",
     "@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 { Color, FastboardApp } from "@netless/fastboard-core";
+  import type { FastboardApp } from "@netless/fastboard-core";
   import type { Language, Theme, FastboardUIConfig } from "../../typings";
   import { onMount } from "svelte";
   import { tippy_hide_all } from "../../actions/tippy";
@@ -15,7 +15,6 @@
   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"];
@@ -24,27 +23,6 @@
   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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { FastboardApp } from "@netless/fastboard-core";
+  import type { Color, FastboardApp } from "@netless/fastboard-core";
   import type { Language, Theme, ToolbarConfig } from "../../typings";
   import { writable as svelte_writable } from "svelte/store";
   import { height } from "../../actions/height";
@@ -11,6 +11,7 @@
   export let theme: Theme = "light";
   export let language: Language = "en";
   export let config: ToolbarConfig = {};
+  export let colors: Color[] | undefined = undefined;
 
   const name = "fastboard-toolbar";
   const extra_height = (32 + 4 + 4) * 2;
@@ -29,7 +30,19 @@
   $: 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;
+
+  $: if (app?.manager && app?.manager.room) {
+    if (colors && !config.colors?.length) {
+      const floatBarOptions = (app?.manager.room as any).floatBarOptions as { colors?: Color[] };
+      if (floatBarOptions.colors) {
+        colors = floatBarOptions.colors as Color[];
+      }
+    } else {
+      colors = config.colors;
+    }
+  } else {
+    colors = default_colors;
+  }
 </script>
 
 <div class="{name} {theme}" class:collapsed use:height={container_height}>

package/src/helpers/index.ts

@@ -33,34 +33,22 @@ export function createUI(app?: FastboardApp | null, div?: Element): UI {
       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,
-            },
-          };
+      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 (props?.config?.toolbar) {
-          const _colors = props.config.toolbar.colors;
-          if (!_colors && colors) {
-            props.config = {
-              ...props.config,
-              toolbar: {
-                ...props.config.toolbar,
-                colors,
-              },
-            };
+        if (colors && props?.config && !props.config.toolbar?.colors) {
+          if (!props?.config.toolbar) {
+            props.config.toolbar = {};
           }
+          props.config.toolbar.colors = colors;
         }
         fastboard.$set(props);
       }