@netless/fastboard-ui 0.3.2-canary.2 → 0.3.2-canary.5

package/src/components/Toolbar/components/Slider.scss

@@ -1,119 +1,119 @@
-@use "sass:color";
-@import "../../theme.scss";
-
-$active-shadow-width: 3px;
-$thumb-height: 13px;
-$track-height: 5px;
-$shadow-color: hsl(210deg 15% 16%);
-$thumb-color: white;
-
-@mixin track {
-  border: 0;
-  border-radius: calc($track-height / 2);
-  height: $track-height;
-  transition: box-shadow 0.3s ease;
-  user-select: none;
-  background-color: rgba(grey, $alpha: 0.25);
-  -webkit-user-select: none;
-}
-
-@mixin thumb {
-  appearance: none;
-  background: $thumb-color;
-  border: 0;
-  border-radius: 100%;
-  box-shadow: 0 1px 1px rgba($shadow-color, 0.15), 0 0 0 1px rgba($shadow-color, 0.2);
-  width: $thumb-height;
-  height: $thumb-height;
-  position: relative;
-  transition: all 0.2s ease;
-  cursor: grab;
-}
-
-.fastboard-slider {
-  @include border-box;
-
-  position: relative;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-}
-
-.fastboard-slider-track {
-  appearance: none;
-  background: transparent;
-  border: 0;
-  border-radius: $thumb-height * 2;
-
-  flex: 1;
-  display: block;
-  height: calc($active-shadow-width * 2 + $thumb-height);
-  margin: 0;
-  width: 0;
-  min-width: 0;
-  padding: 0;
-  transition: box-shadow 0.3s ease;
-
-  cursor: pointer;
-  touch-action: manipulation;
-
-  &::-webkit-slider-runnable-track {
-    @include track;
-
-    background-image: linear-gradient(to right, currentColor var(--value, 0%), transparent var(--value, 0%));
-  }
-
-  &::-webkit-slider-thumb {
-    @include thumb;
-
-    appearance: none;
-    margin-top: calc(($thumb-height - $track-height) / 2 * -1);
-  }
-
-  &::-moz-range-track {
-    @include track;
-  }
-
-  &::-moz-range-thumb {
-    @include thumb;
-  }
-
-  &::-moz-range-progress {
-    background: currentColor;
-    border-radius: calc($track-height / 2);
-    height: $track-height;
-  }
-
-  &::-ms-track {
-    @include track;
-
-    color: transparent;
-  }
-
-  &::-ms-thumb {
-    @include thumb;
-
-    margin-top: 0;
-  }
-
-  &::-ms-tooltip {
-    display: none;
-  }
-
-  &::-moz-focus-outer {
-    border: 0;
-  }
-
-  &.grabbing {
-    &::-webkit-slider-thumb {
-      cursor: grabbing;
-    }
-  }
-
-  @each $name, $theme in $themes {
-    &.#{$name} {
-      color: read($theme, "active-color");
-    }
-  }
-}
+@use "sass:color";
+@import "../../theme.scss";
+
+$active-shadow-width: 3px;
+$thumb-height: 13px;
+$track-height: 5px;
+$shadow-color: hsl(210deg 15% 16%);
+$thumb-color: white;
+
+@mixin track {
+  border: 0;
+  border-radius: calc($track-height / 2);
+  height: $track-height;
+  transition: box-shadow 0.3s ease;
+  user-select: none;
+  background-color: rgba(grey, $alpha: 0.25);
+  -webkit-user-select: none;
+}
+
+@mixin thumb {
+  appearance: none;
+  background: $thumb-color;
+  border: 0;
+  border-radius: 100%;
+  box-shadow: 0 1px 1px rgba($shadow-color, 0.15), 0 0 0 1px rgba($shadow-color, 0.2);
+  width: $thumb-height;
+  height: $thumb-height;
+  position: relative;
+  transition: all 0.2s ease;
+  cursor: grab;
+}
+
+.fastboard-slider {
+  @include border-box;
+
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.fastboard-slider-track {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  border-radius: $thumb-height * 2;
+
+  flex: 1;
+  display: block;
+  height: calc($active-shadow-width * 2 + $thumb-height);
+  margin: 0;
+  width: 0;
+  min-width: 0;
+  padding: 0;
+  transition: box-shadow 0.3s ease;
+
+  cursor: pointer;
+  touch-action: manipulation;
+
+  &::-webkit-slider-runnable-track {
+    @include track;
+
+    background-image: linear-gradient(to right, currentColor var(--value, 0%), transparent var(--value, 0%));
+  }
+
+  &::-webkit-slider-thumb {
+    @include thumb;
+
+    appearance: none;
+    margin-top: calc(($thumb-height - $track-height) / 2 * -1);
+  }
+
+  &::-moz-range-track {
+    @include track;
+  }
+
+  &::-moz-range-thumb {
+    @include thumb;
+  }
+
+  &::-moz-range-progress {
+    background: currentColor;
+    border-radius: calc($track-height / 2);
+    height: $track-height;
+  }
+
+  &::-ms-track {
+    @include track;
+
+    color: transparent;
+  }
+
+  &::-ms-thumb {
+    @include thumb;
+
+    margin-top: 0;
+  }
+
+  &::-ms-tooltip {
+    display: none;
+  }
+
+  &::-moz-focus-outer {
+    border: 0;
+  }
+
+  &.grabbing {
+    &::-webkit-slider-thumb {
+      cursor: grabbing;
+    }
+  }
+
+  @each $name, $theme in $themes {
+    &.#{$name} {
+      color: read($theme, "active-color");
+    }
+  }
+}

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

@@ -1,54 +1,54 @@
-<script lang="ts">
-  import type { Theme } from "../../../typings";
-  import { createEventDispatcher } from "svelte";
-
-  const dispatch = createEventDispatcher<{ change: number }>();
-
-  let className = "";
-  export { className as class };
-  export let theme: Theme = "light";
-  export let min = 0;
-  export let max = 100;
-  export let step = 0.01;
-  export let value = 30;
-  export let disabled = false;
-
-  const name = "fastboard-slider";
-
-  let real_value = value;
-  let grabbing = false;
-
-  function on_down() {
-    grabbing = true;
-  }
-
-  function on_change() {
-    grabbing = false;
-    value = real_value;
-    dispatch("change", value);
-  }
-
-  $: if (value !== real_value && !grabbing) {
-    real_value = value;
-  }
-  $: percent = (100 * (real_value - min)) / (max - min);
-</script>
-
-<div class="{name} {className} {theme}" style="--value:{percent}%">
-  <input
-    class="{name}-track {theme}"
-    class:grabbing
-    type="range"
-    role="slider"
-    {disabled}
-    {min}
-    {max}
-    {step}
-    aria-valuemin={min}
-    aria-valuemax={max}
-    aria-valuenow={value}
-    bind:value={real_value}
-    on:pointerdown={on_down}
-    on:change={on_change}
-  />
-</div>
+<script lang="ts">
+  import type { Theme } from "../../../typings";
+  import { createEventDispatcher } from "svelte";
+
+  const dispatch = createEventDispatcher<{ change: number }>();
+
+  let className = "";
+  export { className as class };
+  export let theme: Theme = "light";
+  export let min = 0;
+  export let max = 100;
+  export let step = 0.01;
+  export let value = 30;
+  export let disabled = false;
+
+  const name = "fastboard-slider";
+
+  let real_value = value;
+  let grabbing = false;
+
+  function on_down() {
+    grabbing = true;
+  }
+
+  function on_change() {
+    grabbing = false;
+    value = real_value;
+    dispatch("change", value);
+  }
+
+  $: if (value !== real_value && !grabbing) {
+    real_value = value;
+  }
+  $: percent = (100 * (real_value - min)) / (max - min);
+</script>
+
+<div class="{name} {className} {theme}" style="--value:{percent}%">
+  <input
+    class="{name}-track {theme}"
+    class:grabbing
+    type="range"
+    role="slider"
+    {disabled}
+    {min}
+    {max}
+    {step}
+    aria-valuemin={min}
+    aria-valuemax={max}
+    aria-valuenow={value}
+    bind:value={real_value}
+    on:pointerdown={on_down}
+    on:change={on_change}
+  />
+</div>

package/src/components/Toolbar/components/StrokeColor.svelte

@@ -1,39 +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;
-  $: strokeColor = $memberState?.strokeColor;
-
-  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.setStrokeColor(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(strokeColor, colors[key])}
-      data-color-key={key}
-      {disabled}
-    >
-      <span class="fastboard-toolbar-color-item" style:background-color={key} />
-    </button>
-  {/each}
-</div>
+<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;
+  $: strokeColor = $memberState?.strokeColor;
+
+  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.setStrokeColor(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(strokeColor, colors[key])}
+      data-color-key={key}
+      {disabled}
+    >
+      <span class="fastboard-toolbar-color-item" style:background-color={key} />
+    </button>
+  {/each}
+</div>

package/src/components/Toolbar/components/StrokeWidth.svelte

@@ -1,20 +1,20 @@
-<script lang="ts">
-  import type { FastboardApp } from "@netless/fastboard-core";
-  import type { Theme } from "../../../typings";
-  import Slider from "./Slider.svelte";
-
-  export let app: FastboardApp | null | undefined = null;
-  export let theme: Theme = "light";
-  export let disabled = false;
-
-  $: memberState = app?.memberState;
-  $: value = $memberState?.strokeWidth ?? 1;
-
-  $: props = { value, theme, disabled };
-
-  function set_stroke_width({ detail: value }: CustomEvent<number>) {
-    app?.setStrokeWidth(value);
-  }
-</script>
-
-<Slider class="fastboard-toolbar-slider" {...props} min={1} max={32} on:change={set_stroke_width} />
+<script lang="ts">
+  import type { FastboardApp } from "@netless/fastboard-core";
+  import type { Theme } from "../../../typings";
+  import Slider from "./Slider.svelte";
+
+  export let app: FastboardApp | null | undefined = null;
+  export let theme: Theme = "light";
+  export let disabled = false;
+
+  $: memberState = app?.memberState;
+  $: value = $memberState?.strokeWidth ?? 1;
+
+  $: props = { value, theme, disabled };
+
+  function set_stroke_width({ detail: value }: CustomEvent<number>) {
+    app?.setStrokeWidth(value);
+  }
+</script>
+
+<Slider class="fastboard-toolbar-slider" {...props} min={1} max={32} on:change={set_stroke_width} />

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/components/Toolbar/components/constants.ts

@@ -1,80 +1,80 @@
-import type { Appliance, Color } from "@netless/fastboard-core";
-import type { I18nData } from "../../../typings";
-import Icons from "../../Icons";
-
-export const colors: Record<string, Color> = {
-  "#E02020": [224, 32, 32],
-  "#F7B500": [247, 181, 0],
-  "#6DD400": [109, 212, 0],
-  "#32C5FF": [50, 197, 255],
-  "#0091FF": [0, 145, 255],
-  "#6236FF": [98, 54, 255],
-  "#B620E0": [182, 32, 224],
-  "#6D7278": [109, 114, 120],
-};
-
-export const shapes = [
-  "rectangle",
-  "ellipse",
-  "straight",
-  "arrow",
-  "pentagram",
-  "rhombus",
-  "triangle",
-  "speechBalloon",
-] as const;
-
-export type Shape = typeof shapes[number];
-
-export const applianceShapes = shapes.slice(0, 4) as Appliance[];
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const shapesIcon: Record<Shape, any> = {
-  rectangle: Icons.Rectangle,
-  ellipse: Icons.Circle,
-  straight: Icons.Line,
-  arrow: Icons.Arrow,
-  pentagram: Icons.Star,
-  rhombus: Icons.Rhombus,
-  triangle: Icons.Triangle,
-  speechBalloon: Icons.Balloon,
-};
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const shapesIconActive: Record<Shape, any> = {
-  rectangle: Icons.RectangleBolded,
-  ellipse: Icons.CircleBolded,
-  straight: Icons.LineBolded,
-  arrow: Icons.ArrowBolded,
-  pentagram: Icons.StarBolded,
-  rhombus: Icons.RhombusBolded,
-  triangle: Icons.TriangleBolded,
-  speechBalloon: Icons.BalloonBolded,
-};
-
-export const i18n: I18nData<
-  "clicker" | "selector" | "pencil" | "text" | "shapes" | "eraser" | "clear" | "apps"
-> = {
-  en: {
-    clicker: "clicker",
-    selector: "selector",
-    pencil: "pencil",
-    eraser: "eraser",
-    text: "text",
-    shapes: "shapes",
-    clear: "clear",
-    apps: "apps",
-  },
-  "zh-CN": {
-    clicker: "点击",
-    selector: "选择",
-    pencil: "铅笔",
-    eraser: "橡皮",
-    text: "文字",
-    shapes: "形状",
-    clear: "清屏",
-    apps: "Apps",
-  },
-};
-
-export const colorKeys = Object.keys(colors);
+import type { Appliance, Color } from "@netless/fastboard-core";
+import type { I18nData } from "../../../typings";
+import Icons from "../../Icons";
+
+export const colors: Record<string, Color> = {
+  "#E02020": [224, 32, 32],
+  "#F7B500": [247, 181, 0],
+  "#6DD400": [109, 212, 0],
+  "#32C5FF": [50, 197, 255],
+  "#0091FF": [0, 145, 255],
+  "#6236FF": [98, 54, 255],
+  "#B620E0": [182, 32, 224],
+  "#6D7278": [109, 114, 120],
+};
+
+export const shapes = [
+  "rectangle",
+  "ellipse",
+  "straight",
+  "arrow",
+  "pentagram",
+  "rhombus",
+  "triangle",
+  "speechBalloon",
+] as const;
+
+export type Shape = typeof shapes[number];
+
+export const applianceShapes = shapes.slice(0, 4) as Appliance[];
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const shapesIcon: Record<Shape, any> = {
+  rectangle: Icons.Rectangle,
+  ellipse: Icons.Circle,
+  straight: Icons.Line,
+  arrow: Icons.Arrow,
+  pentagram: Icons.Star,
+  rhombus: Icons.Rhombus,
+  triangle: Icons.Triangle,
+  speechBalloon: Icons.Balloon,
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const shapesIconActive: Record<Shape, any> = {
+  rectangle: Icons.RectangleBolded,
+  ellipse: Icons.CircleBolded,
+  straight: Icons.LineBolded,
+  arrow: Icons.ArrowBolded,
+  pentagram: Icons.StarBolded,
+  rhombus: Icons.RhombusBolded,
+  triangle: Icons.TriangleBolded,
+  speechBalloon: Icons.BalloonBolded,
+};
+
+export const i18n: I18nData<
+  "clicker" | "selector" | "pencil" | "text" | "shapes" | "eraser" | "clear" | "apps"
+> = {
+  en: {
+    clicker: "clicker",
+    selector: "selector",
+    pencil: "pencil",
+    eraser: "eraser",
+    text: "text",
+    shapes: "shapes",
+    clear: "clear",
+    apps: "apps",
+  },
+  "zh-CN": {
+    clicker: "点击",
+    selector: "选择",
+    pencil: "铅笔",
+    eraser: "橡皮",
+    text: "文字",
+    shapes: "形状",
+    clear: "清屏",
+    apps: "Apps",
+  },
+};
+
+export const colorKeys = Object.keys(colors);