@netless/fastboard-ui 0.3.0-canary.0

package/src/components/Toolbar/Toolbar.scss

@@ -0,0 +1,69 @@
+@import "../theme.scss";
+
+$name: "fastboard-toolbar";
+
+.#{$name} {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  position: relative;
+  transform: translateX(0);
+  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
+
+  &.collapsed {
+    transform: translateX(-100%);
+  }
+}
+
+.#{$name}-handler {
+  position: absolute;
+  left: 100%;
+  width: 17px;
+  font-size: 0;
+  cursor: pointer;
+
+  input[type="checkbox"] {
+    position: absolute;
+    top: 0;
+    left: 0;
+    appearance: none;
+    margin: 0;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+  }
+
+  svg {
+    opacity: 0;
+    transition: opacity 0.5s 1s;
+    pointer-events: none;
+  }
+
+  @each $name, $theme in $themes {
+    &.#{$name} &-bg-color {
+      fill: read($theme, "bg-color");
+    }
+    &.#{$name} &-border-color {
+      stroke: read($theme, "border-color");
+    }
+    &.#{$name} &-image-stroke-color {
+      stroke: read($theme, "color");
+    }
+    &.#{$name} &-image-fill-color {
+      fill: read($theme, "color");
+    }
+  }
+}
+
+.#{$name}:hover .#{$name}-handler svg,
+.#{$name}.collapsed .#{$name}-handler svg {
+  opacity: 1;
+  transition: opacity 0.2s;
+}
+
+.#{$name}-btn {
+  @include btn(32px, 4px);
+}
+
+@import "./components/Slider.scss";
+@import "./components/Contents.scss";

package/src/components/Toolbar/Toolbar.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import type { FastboardApp } from "@netless/fastboard-core";
+  import type { Language, Theme } from "../../typings";
+  import { writable as svelte_writable } from "svelte/store";
+  import { height } from "../../actions/height";
+  import { clamp } from "../helpers";
+  import Contents from "./components/Contents.svelte";
+
+  export let app: FastboardApp | null | undefined = null;
+  export let theme: Theme = "light";
+  export let language: Language = "en";
+
+  const name = "fastboard-toolbar";
+  const extra_height = (32 + 4 + 4) * 2;
+
+  $: writable = app?.writable;
+  $: disabled = !$writable;
+
+  let collapsed = false;
+  let container_height = svelte_writable(0);
+  let scroll_height = svelte_writable(0);
+
+  $: computed_height = clamp($container_height, extra_height, $scroll_height + extra_height);
+  $: scrollable = $scroll_height + extra_height > $container_height;
+</script>
+
+<div class="{name} {theme}" class:collapsed use:height={container_height}>
+  <div class="{name}-contents {theme}" style:height={scrollable ? computed_height + "px" : "auto"}>
+    <Contents {app} {theme} {language} {disabled} {scroll_height} {computed_height} {scrollable} />
+  </div>
+  <label class="{name}-handler {theme}">
+    <input type="checkbox" bind:checked={collapsed} />
+    <svg fill="none" stroke-width="2" viewBox="0 0 32 120">
+      <path
+        fill="#fff"
+        stroke="none"
+        d="m0 0 24 16q6 4 6 14v60q0 10-6 14L0 120"
+        class="{name}-handler-bg-color"
+      />
+      <path stroke="#000" d="m0 0 24 16q6 4 6 14v60q0 10-6 14L0 120" class="{name}-handler-border-color" />
+      {#if collapsed}
+        <path stroke="#000" d="M10 52v16" class="{name}-handler-image-stroke-color" />
+        <path fill="#000" stroke="none" d="M14 52v16l8-8z" class="{name}-handler-image-fill-color" />
+      {:else}
+        <path stroke="#000" d="M20 52v16" class="{name}-handler-image-stroke-color" />
+        <path fill="#000" stroke="none" d="M16 52v16l-8-8z" class="{name}-handler-image-fill-color" />
+      {/if}
+    </svg>
+  </label>
+</div>

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

@@ -0,0 +1,12 @@
+import type { FastboardApp } from "@netless/fastboard-core";
+import type { Theme, Language } from "../../typings";
+import { SvelteComponentTyped } from "svelte";
+
+export declare interface ToolbarProps {
+  app?: FastboardApp | null;
+  theme?: Theme;
+  language?: Language;
+}
+
+declare class Toolbar extends SvelteComponentTyped<ToolbarProps> {}
+export default Toolbar;

package/src/components/Toolbar/components/Contents.scss

@@ -0,0 +1,166 @@
+@import "../../theme.scss";
+
+$name: "fastboard-toolbar";
+
+.#{$name}-contents {
+  @include container;
+  padding: 2px 0;
+  gap: 0;
+  flex-direction: column;
+
+  > .#{$name}-btn {
+    margin: 2px 4px;
+  }
+}
+
+.#{$name}-btn-interactive {
+  position: relative;
+}
+
+.#{$name}-triangle {
+  width: 0px;
+  height: 0px;
+  border-bottom: 4px solid;
+  border-left: 4px solid transparent;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+
+.#{$name}-btn:focus + .#{$name}-triangle {
+  opacity: 0;
+}
+
+.#{$name}-scrollable {
+  padding: 2px 4px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.#{$name}-tooltip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.#{$name}-hotkey {
+  display: inline-flex;
+  margin-right: -4px;
+  width: 24px;
+  height: 24px;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(#fff, 0.1);
+  border-radius: 4px;
+}
+
+.#{$name}-panel-wrapper {
+  display: none;
+}
+
+.#{$name}-panel {
+  display: flex;
+  flex-direction: column;
+}
+
+.#{$name}-panel-divider {
+  height: 0.5px;
+  width: 100%;
+  margin: 4px 0;
+  background-color: rgba(#fff, 0.15);
+}
+
+.#{$name}-colors,
+.#{$name}-shapes {
+  display: grid;
+  align-self: center;
+  grid-template: repeat(2, 1fr) / repeat(4, 1fr);
+  align-items: center;
+  justify-items: center;
+  gap: 4px;
+}
+
+.#{$name}-shape-btn {
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.#{$name}-color-btn {
+  @extend .#{$name}-shape-btn;
+  border: 1px solid transparent;
+
+  @each $name, $theme in $themes {
+    &.#{$name}.is-active {
+      border-color: read($theme, "active-color");
+    }
+  }
+}
+
+.#{$name}-color-item {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  pointer-events: none;
+}
+
+.#{$name}-panel.apps {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 4px;
+}
+
+.#{$name}-app-btn {
+  margin: 0;
+  border: 0;
+  padding: 4px;
+  background-color: transparent;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  font-size: 0;
+
+  &:disabled {
+    opacity: 0.8;
+  }
+
+  &-icon {
+    width: 32px;
+    height: 32px;
+    pointer-events: none;
+  }
+
+  &-text {
+    font-size: 14px;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &.is-loading {
+    cursor: progress;
+  }
+
+  &.is-failed {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  @each $name, $theme in $themes {
+    &:not(:disabled, .is-loading, .is-failed):hover.#{$name} {
+      cursor: pointer;
+      background-color: read($theme, "hover-bg-color");
+    }
+
+    &-text.#{$name} {
+      color: read($theme, "color");
+    }
+  }
+}

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

@@ -0,0 +1,191 @@
+<script lang="ts">
+  import type { Appliance, FastboardApp } from "@netless/fastboard-core";
+  import type { Writable } from "svelte/store";
+  import type { Placement } from "tippy.js";
+  import type { Language, Theme } from "../../../typings";
+  import type { Shape } from "./constants";
+  import { applianceShapes, shapesIcon, shapesIconActive } from "./constants";
+  import { writable } from "svelte/store";
+  import { scrollHeight } from "../../../actions/height";
+  import { scrollTop } from "../../../actions/scroll";
+  import { clamp } from "../../helpers";
+  import { i18n } from "./constants";
+  import { apps } from "../../../behaviors";
+  import { tooltip } from "./helper";
+  import Icons from "../../Icons";
+  import Button from "../../Button";
+  import StrokeWidth from "./StrokeWidth.svelte";
+  import StrokeColor from "./StrokeColor.svelte";
+  import Shapes from "./Shapes.svelte";
+
+  export let app: FastboardApp | null | undefined = null;
+  export let theme: Theme = "light";
+  export let language: Language = "en";
+  export let disabled = false;
+  export let scroll_height: Writable<number>;
+  export let computed_height = 0;
+  export let scrollable = false;
+
+  const name = "fastboard-toolbar";
+
+  let last_shape: Shape = "rectangle";
+
+  let pencil_panel: HTMLDivElement;
+  let text_panel: HTMLDivElement;
+  let shapes_panel: HTMLDivElement;
+  let apps_panel: HTMLDivElement;
+
+  let btn_props: { name: string; theme: Theme; disabled: boolean; placement: Placement };
+  $: btn_props = { name, theme, disabled, placement: "right" };
+  $: t = i18n[language];
+  $: hotkeys = app?.hotKeys;
+  $: c = {
+    clicker: tooltip(t.clicker, hotkeys?.changeToClick),
+    selector: tooltip(t.selector, hotkeys?.changeToSelector),
+    pencil: tooltip(t.pencil, hotkeys?.changeToPencil),
+    eraser: tooltip(t.eraser, hotkeys?.changeToEraser),
+    text: tooltip(t.text, hotkeys?.changeToText),
+  };
+  $: memberState = app?.memberState;
+  $: appliance = $memberState?.currentApplianceName;
+  $: shape = $memberState?.shapeType;
+  $: status = app?.appsStatus;
+
+  let top = writable(0);
+  $: max_scroll = scrollable ? $scroll_height + (32 + 8) * 2 - computed_height : 0;
+
+  function scroll_up() {
+    $top = clamp($top - 32 - 4, 0, max_scroll);
+  }
+  function scroll_down() {
+    $top = clamp($top + 32 + 4, 0, max_scroll);
+  }
+
+  function clicker() {
+    app?.setAppliance("clicker");
+  }
+  function selector() {
+    app?.setAppliance("selector");
+  }
+  function pencil() {
+    app?.setAppliance("pencil");
+  }
+  function text() {
+    app?.setAppliance("text");
+  }
+  function select_last_shape() {
+    if (applianceShapes.includes(last_shape as Appliance)) {
+      app?.setAppliance(last_shape as Appliance);
+    } else {
+      app?.setAppliance("shape", last_shape as Exclude<Shape, Appliance>);
+    }
+  }
+  $: if (applianceShapes.includes(appliance as Appliance)) {
+    last_shape = appliance as Shape;
+  } else if (shape) {
+    last_shape = shape;
+  }
+  function eraser() {
+    app?.setAppliance("eraser");
+  }
+  function clear() {
+    app?.cleanCurrentScene();
+  }
+</script>
+
+{#if scrollable}
+  <Button class="scroll-up" {...btn_props} on:click={scroll_up}>
+    <Icons.Up {theme} />
+  </Button>
+{/if}
+<div class="{name}-scrollable" class:scrollable use:scrollHeight={scroll_height} use:scrollTop={top}>
+  <Button class="clicker" {...btn_props} on:click={clicker} content={c.clicker}>
+    {#if appliance === "clicker"}
+      <Icons.ClickFilled {theme} active />
+    {:else}
+      <Icons.Click {theme} />
+    {/if}
+  </Button>
+  <Button class="selector" {...btn_props} on:click={selector} content={c.selector}>
+    {#if appliance === "selector"}
+      <Icons.SelectorFilled {theme} active />
+    {:else}
+      <Icons.Selector {theme} />
+    {/if}
+  </Button>
+  <Button class="pencil" {...btn_props} on:click={pencil} content={c.pencil} menu={pencil_panel}>
+    {#if appliance === "pencil"}
+      <Icons.PencilFilled {theme} active />
+    {:else}
+      <Icons.Pencil {theme} />
+    {/if}
+  </Button>
+  <Button class="text" {...btn_props} on:click={text} content={c.text} menu={text_panel}>
+    {#if appliance === "text"}
+      <Icons.TextFilled {theme} active />
+    {:else}
+      <Icons.Text {theme} />
+    {/if}
+  </Button>
+  <Button class="shapes" {...btn_props} on:click={select_last_shape} content={t.shapes} menu={shapes_panel}>
+    {#if appliance === last_shape || (appliance === "shape" && shape === last_shape)}
+      <svelte:component this={shapesIconActive[last_shape]} {theme} active />
+    {:else}
+      <svelte:component this={shapesIcon[last_shape]} {theme} />
+    {/if}
+  </Button>
+  <Button class="eraser" {...btn_props} on:click={eraser} content={c.eraser}>
+    {#if appliance === "eraser"}
+      <Icons.EraserFilled {theme} active />
+    {:else}
+      <Icons.Eraser {theme} />
+    {/if}
+  </Button>
+  <Button class="clear" {...btn_props} on:click={clear} content={t.clear}>
+    <Icons.Clear {theme} />
+  </Button>
+  <Button class="apps" {...btn_props} content={t.apps} menu={apps_panel} menu_placement="right-end">
+    <Icons.Apps {theme} />
+  </Button>
+</div>
+{#if scrollable}
+  <Button class="scroll-down" {name} {theme} {disabled} on:click={scroll_down}>
+    <Icons.Down {theme} />
+  </Button>
+{/if}
+
+<div class="{name}-panel-wrapper" style="display:none">
+  <div class="{name}-panel pencil" bind:this={pencil_panel}>
+    <StrokeWidth {app} {theme} {disabled} />
+    <div class="{name}-panel-divider" />
+    <StrokeColor {app} {theme} {disabled} />
+  </div>
+  <div class="{name}-panel text" bind:this={text_panel}>
+    <StrokeColor {app} {theme} {disabled} />
+  </div>
+  <div class="{name}-panel shapes" bind:this={shapes_panel}>
+    <Shapes {app} {theme} {language} {disabled} />
+    <div class="{name}-panel-divider" />
+    <StrokeWidth {app} {theme} {disabled} />
+    <div class="{name}-panel-divider" />
+    <StrokeColor {app} {theme} {disabled} />
+  </div>
+  <div class="{name}-panel apps" bind:this={apps_panel}>
+    {#each apps.data as netless_app (netless_app.kind)}
+      {@const { icon, label, kind, onClick } = netless_app}
+      {@const state = $status && $status[kind]}
+      <button
+        class="{name}-app-btn {kind} {theme}"
+        class:is-loading={state && state.status === "loading"}
+        class:is-failed={state && state.status === "failed"}
+        title={label + (state && state.reason ? ": " + state.reason : "")}
+        data-app-kind={netless_app.kind}
+        disabled={state && state.status !== "idle"}
+        on:click={app && onClick.bind(null, app)}
+      >
+        <img class="{name}-app-btn-icon {theme}" src={icon} alt={kind} title={label} />
+        <span class="{name}-app-btn-text {theme}">{label}</span>
+      </button>
+    {/each}
+  </div>
+</div>

package/src/components/Toolbar/components/Shapes.svelte

@@ -0,0 +1,85 @@
+<script lang="ts" context="module">
+  import type { I18nData, Language, Theme } from "../../../typings";
+  import type { Shape } from "./constants";
+
+  const i18n: I18nData<Shape> = {
+    en: {
+      rectangle: "Rectangle",
+      ellipse: "Ellipse",
+      straight: "Line",
+      arrow: "Arrow",
+      pentagram: "Star",
+      rhombus: "Diamond",
+      triangle: "Triangle",
+      speechBalloon: "Balloon",
+    },
+    "zh-CN": {
+      rectangle: "矩形",
+      ellipse: "椭圆",
+      straight: "直线",
+      arrow: "箭头",
+      pentagram: "五角星",
+      rhombus: "菱形",
+      triangle: "三角形",
+      speechBalloon: "气泡",
+    },
+  };
+</script>
+
+<script lang="ts">
+  import type { Appliance, FastboardApp, HotKey } from "@netless/fastboard-core";
+  import { tippy } from "../../../actions/tippy";
+  import { shapes, shapesIcon, shapesIconActive, applianceShapes } from "./constants";
+  import { tooltip } from "./helper";
+
+  export let app: FastboardApp | null | undefined = null;
+  export let theme: Theme = "light";
+  export let language: Language = "en";
+  export let disabled = false;
+
+  $: t = i18n[language];
+  $: memberState = app?.memberState;
+  $: appliance = $memberState?.currentApplianceName;
+  $: shape = $memberState?.shapeType;
+  $: hotkeys = app?.hotKeys;
+  let c: Partial<Record<Shape, HotKey>>;
+  $: c = {
+    rectangle: hotkeys?.changeToRectangle,
+    ellipse: hotkeys?.changeToEllipse,
+    straight: hotkeys?.changeToStraight,
+    arrow: hotkeys?.changeToArrow,
+  };
+
+  function set_appliance_or_shape(ev: MouseEvent) {
+    let button = ev.target as HTMLButtonElement | null;
+    if (button && button.dataset.shapeKey) {
+      let shape = button.dataset.shapeKey as Shape;
+      if (shape && app) {
+        if (applianceShapes.includes(shape as Appliance)) {
+          app.setAppliance(shape as Appliance);
+        } else {
+          app.setAppliance("shape", shape as Exclude<Shape, Appliance>);
+        }
+      }
+    }
+  }
+</script>
+
+<div class="fastboard-toolbar-shapes {theme}" on:click={set_appliance_or_shape}>
+  {#each shapes as key (key)}
+    {@const is_selected = appliance === "shape" ? shape === key : appliance === key}
+    <button
+      class="fastboard-toolbar-btn fastboard-toolbar-shape-btn {theme} {key}"
+      class:is-active={is_selected}
+      data-shape-key={key}
+      {disabled}
+      use:tippy={{ content: tooltip(t[key], c[key]), placement: "top" }}
+    >
+      {#if is_selected}
+        <svelte:component this={shapesIconActive[key]} {theme} active />
+      {:else}
+        <svelte:component this={shapesIcon[key]} {theme} />
+      {/if}
+    </button>
+  {/each}
+</div>

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

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