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

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);

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

@@ -1,24 +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;
-}
+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

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

package/src/components/ZoomControl/ZoomControl.scss

@@ -1,15 +1,15 @@
-@import "../theme.scss";
-
-$name: "fastboard-zoom-control";
-
-.#{$name} {
-  @include container;
-}
-
-.#{$name}-btn {
-  @include btn;
-}
-
-.#{$name}-text {
-  @include tabular-nums;
-}
+@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

@@ -1,99 +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>
+<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

@@ -1,13 +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;
+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

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

package/src/components/helpers.ts

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

package/src/components/theme.scss

@@ -1,92 +1,92 @@
-@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;
-  pointer-events: auto;
-  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");
-    }
-  }
-}
+@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;
+  pointer-events: auto;
+  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");
+    }
+  }
+}