@netless/fastboard-ui 1.0.0-canary.8 → 1.0.0

package/src/components/Icons/LaserPen.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <g stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" transform="rotate(0 10 10)">
+    <path
+      class="fastboard-icon-stroke-color"
+      clip-rule="evenodd"
+      d="m9.644 13.69 7.774-7.773a2.357 2.357 0 0 0-3.334-3.334l-7.773 7.774L8 12l1.643 1.69Z"
+    />
+    <path
+      class="fastboard-icon-stroke-color"
+      d="m13.25 3.417 3.333 3.333M10 10l2-2M5 15l3-3M2.156 17.894l1-1M5.453 19.029l-.144-1.407M2.377 11.887l.866 1.118M8.354 17.273l-1.194-.758M.953 14.652l1.408.13"
+    />
+  </g>
+</svg>

package/src/components/Icons/LaserPenFilled.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <g stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" transform="rotate(0 10 10)">
+    <path
+      class="fastboard-icon-fill-color"
+      clip-rule="evenodd"
+      d="m9.644 13.69 7.774-7.773a2.357 2.357 0 0 0-3.334-3.334l-7.773 7.774L8 12l1.643 1.69Z"
+    />
+    <path
+      class="fastboard-icon-stroke-color"
+      d="m13.25 3.417 3.333 3.333M10 10l2-2M5 15l3-3M2.156 17.894l1-1M5.453 19.029l-.144-1.407M2.377 11.887l.866 1.118M8.354 17.273l-1.194-.758M.953 14.652l1.408.13"
+    />
+  </g>
+</svg>

package/src/components/Icons/index.ts

@@ -1,6 +1,3 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-nocheck
-
 import Apps from "./Apps.svelte";
 import Arrow from "./Arrow.svelte";
 import ArrowBolded from "./ArrowBolded.svelte";
@@ -13,16 +10,18 @@ import Click from "./Click.svelte";
 import ClickFilled from "./ClickFilled.svelte";
 import Diamond from "./Diamond.svelte";
 import Down from "./Down.svelte";
+import Drag from "./Drag.svelte";
+import DragFilled from "./DragFilled.svelte";
 import Eraser from "./Eraser.svelte";
 import EraserFilled from "./EraserFilled.svelte";
+import Laser from "./Laser.svelte";
+import LaserFilled from "./LaserFilled.svelte";
 import Left from "./Left.svelte";
 import Line from "./Line.svelte";
 import LineBolded from "./LineBolded.svelte";
 import Minus from "./Minus.svelte";
 import Pencil from "./Pencil.svelte";
 import PencilFilled from "./PencilFilled.svelte";
-import PencilEraser from "./PencilEraser.svelte";
-import PencilEraserFilled from "./PencilEraserFilled.svelte";
 import Plus from "./Plus.svelte";
 import Rectangle from "./Rectangle.svelte";
 import RectangleBolded from "./RectangleBolded.svelte";
@@ -46,6 +45,8 @@ import WhiteboardAdd from "./WhiteboardAdd.svelte";
 import Play from "./Play.svelte";
 import Pause from "./Pause.svelte";
 import Loading from "./Loading.svelte";
+import LaserPen from "./LaserPen.svelte";
+import LaserPenFilled from "./LaserPenFilled.svelte";
 
 const Icons = {
   Apps,
@@ -60,16 +61,18 @@ const Icons = {
   ClickFilled,
   Diamond,
   Down,
+  Drag,
+  DragFilled,
   Eraser,
   EraserFilled,
+  Laser,
+  LaserFilled,
   Left,
   Line,
   LineBolded,
   Minus,
   Pencil,
   PencilFilled,
-  PencilEraser,
-  PencilEraserFilled,
   Plus,
   Rectangle,
   RectangleBolded,
@@ -93,6 +96,8 @@ const Icons = {
   Play,
   Pause,
   Loading,
+  LaserPen,
+  LaserPenFilled,
 };
 
 export default Icons;

package/src/components/PageControl/PageControl.svelte

@@ -28,14 +28,15 @@
   const name = "fastboard-page-control";
 
   $: writable = app?.writable;
-  $: disabled = !$writable;
+  $: phase = app?.phase;
+  $: disabled = !($writable && $phase === "connected");
   $: t = i18n[language];
 
   let type: IconType;
   $: type = disabled ? "disable" : "normal";
 
-  $: index = app?.pageIndex;
-  $: length = app?.pageLength;
+  $: index = app?.sceneIndex;
+  $: length = app?.sceneLength;
   $: prev_disabled = disabled || !$index;
   $: next_disabled = disabled || $length == null || $index === $length - 1;
 

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

@@ -1,6 +1,6 @@
 import type { FastboardApp } from "@netless/fastboard-core";
 import type { Theme, Language, GenericIcon } from "../../typings";
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponentTyped } from "../../typings";
 
 export declare interface PageControlProps {
   app?: FastboardApp | null;

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

@@ -1,6 +1,6 @@
 import type { FastboardPlayer } from "@netless/fastboard-core";
 import type { Theme, Language, GenericIcon } from "../../typings";
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponentTyped } from "../../typings";
 
 export declare interface PlayerControlProps {
   player?: FastboardPlayer | null;

package/src/components/RedoUndo/RedoUndo.svelte

@@ -26,7 +26,8 @@
   const name = "fastboard-redo-undo";
 
   $: writable = app?.writable;
-  $: disabled = !$writable;
+  $: phase = app?.phase;
+  $: disabled = !($writable && $phase === "connected");
   $: t = i18n[language];
 
   let type: IconType;

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

@@ -1,6 +1,6 @@
 import type { FastboardApp } from "@netless/fastboard-core";
 import type { Theme, Language, GenericIcon } from "../../typings";
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponentTyped } from "../../typings";
 
 export declare interface RedoUndoProps {
   app?: FastboardApp | null;

package/src/components/Toolbar/Toolbar.scss

@@ -7,12 +7,12 @@ $name: "fastboard-toolbar";
   display: flex;
   align-items: center;
   position: relative;
-  left: 0px;
-  transition: left 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
+  transform: translateX(0);
+  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
   pointer-events: none;
 
   &.collapsed {
-    left: -100%;
+    transform: translateX(-100%);
   }
 }
 
@@ -71,8 +71,18 @@ $name: "fastboard-toolbar";
 }
 
 .#{$name}-btn {
-  @include btn(32px, 4px, 8px);
+  @include btn(32px, 4px);
 }
 
 @import "./components/Slider.scss";
 @import "./components/Contents.scss";
+
+.fastboard-right .#{$name}.collapsed {
+  transform: translateX(100%);
+}
+
+.fastboard-right .#{$name}-handler {
+  left: auto;
+  right: 100%;
+  transform: rotate(180deg);
+}

package/src/components/Toolbar/Toolbar.svelte

@@ -1,32 +1,48 @@
 <script lang="ts">
-  import type { FastboardApp } from "@netless/fastboard-core";
-  import type { Language, Theme } from "../../typings";
-  import type { ToolbarConfig } from ".";
+  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";
   import { clamp } from "../helpers";
+  import { default_items, default_colors } from "./components/constants";
   import Contents from "./components/Contents.svelte";
 
   export let app: FastboardApp | null | undefined = null;
   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;
 
   $: writable = app?.writable;
-  $: disabled = !$writable;
+  $: phase = app?.phase;
+  $: disabled = !($writable && $phase === "connected");
 
-  let collapsed = false;
+  let collapsed = config.collapsed;
   let container_height = svelte_writable(0);
   let scroll_height = svelte_writable(0);
 
   $: computed_height = clamp($container_height, extra_height, $scroll_height + extra_height);
   $: scrollable = $scroll_height + extra_height > $container_height;
 
+  $: placement = config.placement || "left";
+  $: items = config.items || default_items;
   $: hide_apps = config.apps?.enable === false;
-  $: eraser_type = config.eraser?.behavior || "both";
+
+  $: 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}>
@@ -39,35 +55,28 @@
       {scroll_height}
       {computed_height}
       {scrollable}
+      {placement}
+      {items}
       {hide_apps}
-      {eraser_type}
+      {colors}
     />
   </div>
   <label class="{name}-handler {theme}">
     <input type="checkbox" bind:checked={collapsed} />
-    <svg width="17" height="42" viewBox="0 0 17 42" fill="none">
+    <svg fill="none" stroke-width="2" viewBox="0 0 32 120">
       <path
-        d="M0 41H12C14.2091 41 16 39.2091 16 37V5C16 2.79086 14.2091 1 12 1H0"
-        stroke="#000"
         fill="#fff"
-        class="{name}-handler-border-color {name}-handler-bg-color"
+        stroke="none"
+        d="m0 0 24 16q6 4 6 14v60q0 10-6 14L0 120"
+        class="{name}-handler-bg-color"
       />
+      <path stroke="#000" d="m0 0 24 16q6 4 6 14v60q0 10-6 14L0 120" class="{name}-handler-border-color" />
       {#if collapsed}
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M8 19L6 17V25L8 23L10 21L8 19ZM4 17H5V25H4V17Z"
-          fill="#fff"
-          class="{name}-handler-image-fill-color"
-        />
+        <path stroke="#000" d="M10 52v16" class="{name}-handler-image-stroke-color" />
+        <path fill="#000" stroke="none" d="M14 52v16l8-8z" class="{name}-handler-image-fill-color" />
       {:else}
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M6 19L8 17V25L6 23L4 21L6 19ZM10 17H9V25H10V17Z"
-          fill="#fff"
-          class="{name}-handler-image-fill-color"
-        />
+        <path stroke="#000" d="M20 52v16" class="{name}-handler-image-stroke-color" />
+        <path fill="#000" stroke="none" d="M16 52v16l-8-8z" class="{name}-handler-image-fill-color" />
       {/if}
     </svg>
   </label>

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

@@ -1,20 +1,6 @@
 import type { FastboardApp } from "@netless/fastboard-core";
-import type { Theme, Language } from "../../typings";
-import { SvelteComponentTyped } from "svelte";
-
-export declare interface ToolbarConfig {
-  apps?: {
-    enable?: boolean;
-  };
-  eraser?: {
-    /**
-     * - delete: remove shapes under eraser
-     * - pencil: wipe out part of strokes under eraser, like a real eraser
-     * - both (default): will show a panel to choose different behavior
-     */
-    behavior?: "delete" | "pencil" | "both";
-  };
-}
+import type { Theme, Language, ToolbarConfig } from "../../typings";
+import { SvelteComponentTyped } from "../../typings";
 
 export declare interface ToolbarProps {
   app?: FastboardApp | null;

package/src/components/Toolbar/components/Contents.scss

@@ -20,8 +20,8 @@ $name: "fastboard-toolbar";
 .#{$name}-triangle {
   width: 0px;
   height: 0px;
-  border-bottom: 3px solid;
-  border-left: 3px solid transparent;
+  border-bottom: 4px solid;
+  border-left: 4px solid transparent;
   position: absolute;
   bottom: 0;
   right: 0;
@@ -36,7 +36,7 @@ $name: "fastboard-toolbar";
   overflow: hidden;
   display: flex;
   flex-direction: column;
-  gap: 0;
+  gap: 4px;
 }
 
 .#{$name}-tooltip {
@@ -60,6 +60,15 @@ $name: "fastboard-toolbar";
   display: none;
 }
 
+.#{$name}-panel-switch-pencil {
+  display: flex;
+}
+
+.#{$name}-panel-switch-btn {
+  width: 24px;
+  height: 24px;
+}
+
 .#{$name}-panel {
   display: flex;
   flex-direction: column;
@@ -72,17 +81,6 @@ $name: "fastboard-toolbar";
   background-color: rgba(#fff, 0.15);
 }
 
-.#{$name}-slider.pencil-eraser-size {
-  width: 136px;
-}
-
-// .#{$name}-panel-btns {
-//   // min-width: 108px;
-
-//   // .#{$name}-btn {
-//   // }
-// }
-
 .#{$name}-colors,
 .#{$name}-shapes {
   display: grid;
@@ -177,3 +175,10 @@ $name: "fastboard-toolbar";
     }
   }
 }
+
+.fastboard-right .#{$name}-triangle {
+  right: auto;
+  left: 0;
+  border-left: 0;
+  border-right: 4px solid transparent;
+}