@netless/fastboard-ui 0.3.0-canary.0

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

@@ -0,0 +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>

package/src/components/Toolbar/components/StrokeColor.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;
+  $: 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

@@ -0,0 +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} />

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

@@ -0,0 +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);

package/src/components/Toolbar/components/helper.ts

@@ -0,0 +1,24 @@
+import type { HotKey } from "@netless/fastboard-core";
+import { element, attr, append } from "svelte/internal";
+
+/**
+ * ```svelte
+ * <span class="fastboard-toolbar-tooltip">
+ *   <span>{text}</span>
+ *   <span class="fastboard-toolbar-hotkey">{hotkey.toUpperCase()}</span>
+ * </span>
+ * ```
+ */
+export function tooltip(text: string, hotkey?: HotKey) {
+  if (!hotkey || typeof hotkey !== "string") return text;
+  const outer = element("span");
+  const inner = element("span");
+  inner.textContent = text;
+  const hotkey_span = element("span");
+  hotkey_span.textContent = hotkey.toUpperCase();
+  attr(outer, "class", "fastboard-toolbar-tooltip");
+  attr(hotkey_span, "class", "fastboard-toolbar-hotkey");
+  append(outer, inner);
+  append(outer, hotkey_span);
+  return outer;
+}

package/src/components/Toolbar/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./Toolbar.svelte";
+export * from "./Toolbar.svelte";

package/src/components/ZoomControl/ZoomControl.scss

@@ -0,0 +1,15 @@
+@import "../theme.scss";
+
+$name: "fastboard-zoom-control";
+
+.#{$name} {
+  @include container;
+}
+
+.#{$name}-btn {
+  @include btn;
+}
+
+.#{$name}-text {
+  @include tabular-nums;
+}

package/src/components/ZoomControl/ZoomControl.svelte

@@ -0,0 +1,99 @@
+<script lang="ts" context="module">
+  import type { FastboardApp } from "@netless/fastboard-core";
+  import type { GenericIcon, I18nData, IconType, Language, Theme } from "../../typings";
+  import { clamp } from "../helpers";
+
+  const i18n: I18nData<"plus" | "minus" | "reset"> = {
+    en: {
+      plus: "Zoom In",
+      minus: "Zoom Out",
+      reset: "Reset",
+    },
+    "zh-CN": {
+      plus: "放大",
+      minus: "缩小",
+      reset: "重置",
+    },
+  };
+
+  const scales: readonly number[] = [
+    0.3, 0.4096000000000002, 0.5120000000000001, 0.6400000000000001, 0.8, 1, 1.26, 1.5876000000000001,
+    2.000376, 2.5204737600000002, 3,
+  ];
+
+  function next_scale(scale: number, delta: 1 | -1) {
+    const { length } = scales;
+    const last = length - 1;
+    if (scale < scales[0]) return scales[0];
+    if (scale > scales[last]) return scales[last];
+    for (let i = 0; i < length; ++i) {
+      const cur = scales[i];
+      const prev = i === 0 ? -Infinity : (scales[i - 1] + cur) / 2;
+      const next = i === last ? Infinity : (scales[i + 1] + cur) / 2;
+      if (prev <= scale && scale <= next) return scales[clamp(i + delta, 0, last)];
+    }
+    return 1;
+  }
+</script>
+
+<script lang="ts">
+  import Icon from "../Icon";
+  import Icons from "../Icons";
+  import Button from "../Button";
+
+  export let app: FastboardApp | null | undefined = null;
+  export let theme: Theme = "light";
+  export let language: Language = "en";
+  export let icons: GenericIcon<"plus" | "minus" | "reset"> | undefined = undefined;
+
+  const name = "fastboard-zoom-control";
+
+  $: writable = app?.writable;
+  $: disabled = !$writable;
+  $: t = i18n[language];
+
+  let type: IconType;
+  $: type = disabled ? "disable" : "normal";
+
+  $: camera = app?.camera;
+  $: scale = $camera?.scale ?? 1;
+  $: plus_disabled = disabled || next_scale(scale, 1) === scale;
+  $: minus_disabled = disabled || next_scale(scale, -1) === scale;
+
+  function plus() {
+    app?.moveCamera({ scale: next_scale(scale, 1), centerX: 0, centerY: 0 });
+  }
+
+  function minus() {
+    app?.moveCamera({ scale: next_scale(scale, -1), centerX: 0, centerY: 0 });
+  }
+
+  function reset() {
+    app?.moveCamera({ scale: 1, centerX: 0, centerY: 0 });
+  }
+</script>
+
+<div class="{name} {theme}">
+  <Button class="plus" {name} {theme} disabled={plus_disabled} on:click={plus} content={t.plus}>
+    <Icon src={icons?.plus[type]} alt="[plus]">
+      <Icons.Plus {theme} />
+    </Icon>
+  </Button>
+  <span class="{name}-text {theme}">
+    {#if $camera == null}
+      &hellip;
+    {:else}
+      {Math.ceil(scale * 100)}%
+    {/if}
+  </span>
+  <Button class="minus" {name} {theme} disabled={minus_disabled} on:click={minus} content={t.minus}>
+    <Icon src={icons?.minus[type]} alt="[minus]">
+      <Icons.Minus {theme} />
+    </Icon>
+  </Button>
+  <Button class="reset" {name} {theme} {disabled} on:click={reset} content={t.reset}>
+    <Icon src={icons?.reset[type]} alt="[reset]">
+      <Icons.Reset {theme} />
+    </Icon>
+  </Button>
+</div>

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

@@ -0,0 +1,13 @@
+import type { FastboardApp } from "@netless/fastboard-core";
+import type { Theme, Language, GenericIcon } from "../../typings";
+import { SvelteComponentTyped } from "svelte";
+
+export declare interface ZoomControlProps {
+  app?: FastboardApp | null;
+  theme?: Theme;
+  language?: Language;
+  icons?: GenericIcon<"plus" | "minus" | "reset">;
+}
+
+declare class ZoomControl extends SvelteComponentTyped<ZoomControlProps> {}
+export default ZoomControl;

package/src/components/ZoomControl/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./ZoomControl.svelte";
+export * from "./ZoomControl.svelte";

package/src/components/helpers.ts

@@ -0,0 +1,3 @@
+export function clamp(value: number, min: number, max: number) {
+  return value < min ? min : value > max ? max : value;
+}

package/src/components/theme.scss

@@ -0,0 +1,91 @@
+@use "sass:color";
+@import "./variables.scss";
+
+$themes: (
+  light: (
+    color: $grey-6,
+    active-color: $blue-6,
+    bg-color: color.change(white, $alpha: 0.9),
+    hover-bg-color: $blue-1,
+    border-color: $grey-1,
+  ),
+  dark: (
+    color: $grey-5,
+    active-color: $blue-7,
+    bg-color: color.change($grey-10, $alpha: 0.9),
+    hover-bg-color: $grey-8,
+    border-color: $grey-8,
+  ),
+);
+
+@function read($theme, $name) {
+  @return var(--fastboard-#{$name}, map-get($theme, $name));
+}
+
+@mixin border-box {
+  box-sizing: border-box;
+
+  * {
+    box-sizing: inherit;
+  }
+}
+
+@mixin tabular-nums {
+  font-variant-numeric: tabular-nums;
+}
+
+@mixin container {
+  @include border-box;
+
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px;
+  border: 1px solid;
+  border-radius: 4px;
+  font-size: 14px;
+  font-family: system-ui;
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
+
+  @each $name, $theme in $themes {
+    &.#{$name} {
+      color: read($theme, "color");
+      background-color: read($theme, "bg-color");
+      border-color: read($theme, "border-color");
+    }
+  }
+}
+
+@mixin btn($size: 24px, $padding: 0) {
+  appearance: none;
+  cursor: pointer;
+  margin: 0;
+  border: 0;
+  padding: $padding;
+  width: $size;
+  height: $size;
+  background-color: transparent;
+  border-radius: 4px;
+  font-size: 0;
+  line-height: 1;
+  flex-shrink: 0;
+
+  svg,
+  img {
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  @each $name, $theme in $themes {
+    &.#{$name}:not(:disabled):hover {
+      background-color: read($theme, "hover-bg-color");
+    }
+  }
+}

package/src/components/variables.scss

@@ -0,0 +1,69 @@
+$blue-0: #f4f8ff;
+$blue-1: #ebf2ff;
+$blue-2: #d6e5ff;
+$blue-3: #adccff;
+$blue-4: #84b3ff;
+$blue-5: #5b9aff;
+$blue-6: #3381ff;
+$blue-7: #2867cc;
+$blue-8: #1e4d99;
+$blue-9: #143366;
+$blue-10: #0a1933;
+$blue-11: #050d1a;
+$blue-12: #03060d;
+
+$grey-0: #ecf0f7;
+$grey-1: #e5e8f0;
+$grey-2: #d5d9e0;
+$grey-3: #b7bbc1;
+$grey-4: #999ca3;
+$grey-5: #7b7e84;
+$grey-6: #5d6066;
+$grey-7: #4b4d54;
+$grey-8: #383b42;
+$grey-9: #272a30;
+$grey-10: #14181e;
+$grey-11: #070a11;
+$grey-12: #03060d;
+
+$green-0: #f5faf2;
+$green-1: #ecf6e6;
+$green-2: #d9eecc;
+$green-3: #b4de99;
+$green-4: #8ecd66;
+$green-5: #69bd33;
+$green-6: #44ad00;
+$green-7: #368b00;
+$green-8: #296800;
+$green-9: #1b4500;
+$green-10: #0d2200;
+$green-11: #071100;
+$green-12: #030900;
+
+$yellow-0: #fdf9f2;
+$yellow-1: #fcf4e6;
+$yellow-2: #faeacc;
+$yellow-3: #f5d599;
+$yellow-4: #f1c166;
+$yellow-5: #ecac33;
+$yellow-6: #e89800;
+$yellow-7: #ba7a00;
+$yellow-8: #8b5b00;
+$yellow-9: #5c3c00;
+$yellow-10: #2e1e00;
+$yellow-11: #170f00;
+$yellow-12: #0c0800;
+
+$red-0: #fcf3f2;
+$red-1: #fae9e6;
+$red-2: #f6d2cc;
+$red-3: #eda599;
+$red-4: #e47866;
+$red-5: #db4b33;
+$red-6: #d21f00;
+$red-7: #a81800;
+$red-8: #7e1300;
+$red-9: #540c00;
+$red-10: #2a0600;
+$red-11: #150300;
+$red-12: #0a0200;

package/src/index.ts

@@ -0,0 +1,13 @@
+export type { GenericIcon, Language, Theme } from "./typings";
+
+export { default as RedoUndo, type RedoUndoProps } from "./components/RedoUndo";
+export { default as PageControl, type PageControlProps } from "./components/PageControl";
+export { default as ZoomControl, type ZoomControlProps } from "./components/ZoomControl";
+export { default as Toolbar, type ToolbarProps } from "./components/Toolbar";
+export { default as PlayerControl, type PlayerControlProps } from "./components/PlayerControl";
+export { Fastboard, ReplayFastboard } from "./components/Fastboard";
+export type { FastboardProps, ReplayFastboardProps } from "./components/Fastboard";
+
+export * from "./behaviors";
+
+import "./style.scss";

package/src/style.scss

@@ -0,0 +1,36 @@
+@import "./components/theme.scss";
+
+@import "tippy.js/dist/tippy.css";
+@import "tippy.js/themes/light.css";
+
+@import "./components/Icons/Icons.scss";
+@import "./components/RedoUndo/RedoUndo.scss";
+@import "./components/ZoomControl/ZoomControl.scss";
+@import "./components/PageControl/PageControl.scss";
+@import "./components/PlayerControl/PlayerControl.scss";
+@import "./components/Toolbar/Toolbar.scss";
+@import "./components/Fastboard/Fastboard.scss";
+
+.fastboard-tip {
+  font-family: inherit;
+  color: $grey-2;
+  background-color: $grey-12;
+
+  &[data-placement^="right"] > .tippy-arrow::before {
+    top: 4px;
+    border-width: 4px;
+    border-right-color: $grey-12;
+  }
+
+  &[data-placement^="top"] > .tippy-arrow::before {
+    left: 4px;
+    border-width: 4px;
+    border-top-color: $grey-12;
+  }
+}
+
+.fastboard-panel {
+  .tippy-content {
+    padding: 8px;
+  }
+}

package/src/typings.ts

@@ -0,0 +1,17 @@
+export interface SvelteAction<T = void> {
+  (node: HTMLElement, parameters: T): void | {
+    update?: (parameters: T) => void;
+    destroy?: () => void;
+  };
+}
+
+export type Theme = "light" | "dark";
+
+export type Language = "en" | "zh-CN";
+
+export type IconType = "normal" | "disable";
+export type GenericIcon<K extends string, E extends string = IconType> = {
+  [key in K]: { [kind in E]: string };
+};
+
+export type I18nData<T extends string> = Record<Language, Record<T, string>>;