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

package/package.json

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

package/src/actions/scroll.ts

@@ -10,7 +10,7 @@ export const scrollTop: SvelteAction<Writable<number>> = function (node, value)
 
   function on_scroll() {
     clearTimeout(timer);
-    timer = setTimeout(() => value.set(node.scrollTop), 200);
+    timer = window.setTimeout(() => value.set(node.scrollTop), 200);
   }
 
   node.addEventListener("scroll", on_scroll);

package/src/components/Icons/Curve.svelte

@@ -0,0 +1,10 @@
+<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}>
+  <path stroke="#5D6066" stroke-width="1.25" d="M4 4c16 0 0 16 16 16" class="fastboard-icon-stroke-color" />
+</svg>

package/src/components/Icons/CurveDashed.svelte

@@ -0,0 +1,16 @@
+<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}>
+  <path
+    stroke="#5D6066"
+    stroke-dasharray="1.25 1.25"
+    stroke-width="1.25"
+    d="M4 4c16 0 0 16 16 16"
+    class="fastboard-icon-stroke-color"
+  />
+</svg>

package/src/components/Icons/index.ts

@@ -46,6 +46,8 @@ import WhiteboardAdd from "./WhiteboardAdd.svelte";
 import Play from "./Play.svelte";
 import Pause from "./Pause.svelte";
 import Loading from "./Loading.svelte";
+import Curve from "./Curve.svelte";
+import CurveDashed from "./CurveDashed.svelte";
 
 const Icons = {
   Apps,
@@ -93,6 +95,8 @@ const Icons = {
   Play,
   Pause,
   Loading,
+  Curve,
+  CurveDashed,
 };
 
 export default Icons;

package/src/components/Toolbar/Toolbar.svelte

@@ -25,6 +25,7 @@
   $: computed_height = clamp($container_height, extra_height, $scroll_height + extra_height);
   $: scrollable = $scroll_height + extra_height > $container_height;
 
+  $: hide_dotted = config.pencil?.dotted === false;
   $: hide_apps = config.apps?.enable === false;
   $: eraser_type = config.eraser?.behavior || "both";
 </script>
@@ -39,6 +40,7 @@
       {scroll_height}
       {computed_height}
       {scrollable}
+      {hide_dotted}
       {hide_apps}
       {eraser_type}
     />

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

@@ -3,6 +3,9 @@ import type { Theme, Language } from "../../typings";
 import { SvelteComponentTyped } from "svelte";
 
 export declare interface ToolbarConfig {
+  pencil?: {
+    dotted?: boolean;
+  };
   apps?: {
     enable?: boolean;
   };

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

@@ -28,6 +28,7 @@
   export let scroll_height: Writable<number>;
   export let computed_height = 0;
   export let scrollable = false;
+  export let hide_dotted = false;
   export let hide_apps = false;
   export let eraser_type: "delete" | "pencil" | "both" = "both";
 
@@ -58,6 +59,7 @@
   };
   $: memberState = app?.memberState;
   $: appliance = $memberState?.currentApplianceName;
+  $: dotted = $memberState?.dottedLine;
   $: shape = $memberState?.shapeType;
   $: status = app?.appsStatus;
 
@@ -94,6 +96,12 @@
   function text() {
     app?.setAppliance("text");
   }
+  function set_dotted() {
+    app?.toggleDottedLine(true);
+  }
+  function unset_dotted() {
+    app?.toggleDottedLine(false);
+  }
   function select_last_shape() {
     if (applianceShapes.includes(last_shape as Appliance)) {
       app?.setAppliance(last_shape as Appliance);
@@ -251,6 +259,31 @@
 
 <div class="{name}-panel-wrapper" style="display:none">
   <div class="{name}-panel pencil" bind:this={pencil_panel}>
+    {#if !hide_dotted}
+      <div class="{name}-panel-btns">
+        <Button
+          class="pencil"
+          active={appliance === "pencil" && !dotted}
+          {...btn_props}
+          on:click={unset_dotted}
+          placement="top"
+          content={t.solid}
+        >
+          <Icons.Curve {theme} active={appliance === "pencil" && !dotted} />
+        </Button>
+        <Button
+          class="pencil"
+          active={appliance === "pencil" && dotted}
+          {...btn_props}
+          on:click={set_dotted}
+          placement="top"
+          content={t.dashed}
+        >
+          <Icons.CurveDashed {theme} active={appliance === "pencil" && dotted} />
+        </Button>
+      </div>
+      <div class="{name}-panel-divider" />
+    {/if}
     <StrokeWidth {app} {theme} {disabled} />
     <div class="{name}-panel-divider" />
     <StrokeColor {app} {theme} {disabled} />

package/src/components/Toolbar/components/Slider.svelte

@@ -39,7 +39,6 @@
     class="{name}-track {theme}"
     class:grabbing
     type="range"
-    role="slider"
     {disabled}
     {min}
     {max}

package/src/components/Toolbar/components/constants.ts

@@ -24,7 +24,7 @@ export const shapes = [
   "speechBalloon",
 ] as const;
 
-export type Shape = typeof shapes[number];
+export type Shape = (typeof shapes)[number];
 
 export const applianceShapes = shapes.slice(0, 4) as Appliance[];
 
@@ -52,7 +52,7 @@ export const shapesIconActive: Record<Shape, any> = {
 
 export const erasers = ["eraser", "pencilEraser"] as const;
 
-export type Eraser = typeof erasers[number];
+export type Eraser = (typeof erasers)[number];
 
 export const eraserIcon: Record<Eraser, any> = {
   eraser: Icons.Eraser,
@@ -65,7 +65,17 @@ export const eraserIconActive: Record<Eraser, any> = {
 };
 
 export const i18n: I18nData<
-  "clicker" | "selector" | "pencil" | "pencilEraser" | "text" | "shapes" | "eraser" | "clear" | "apps"
+  | "clicker"
+  | "selector"
+  | "pencil"
+  | "pencilEraser"
+  | "text"
+  | "shapes"
+  | "eraser"
+  | "clear"
+  | "apps"
+  | "solid"
+  | "dashed"
 > = {
   en: {
     clicker: "clicker",
@@ -77,6 +87,8 @@ export const i18n: I18nData<
     shapes: "shapes",
     clear: "clear",
     apps: "apps",
+    solid: "solid",
+    dashed: "dashed",
   },
   "zh-CN": {
     clicker: "点击",
@@ -88,6 +100,8 @@ export const i18n: I18nData<
     shapes: "形状",
     clear: "清屏",
     apps: "Apps",
+    solid: "实线",
+    dashed: "虚线",
   },
 };