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

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

@@ -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;
-  $: 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>
+<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>