@netless/fastboard-ui 0.3.0-canary.0

package/src/components/Icons/TriangleBolded.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <path
+    stroke="#5D6066"
+    stroke-linejoin="round"
+    stroke-width="1.75"
+    d="m12 5 8 14H4l8-14Z"
+    class="fastboard-icon-stroke-color"
+  />
+</svg>

package/src/components/Icons/Undo.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <path fill="#5D6066" d="M10 5 4 9l6 4-2-4 2-4Z" class="fastboard-icon-fill-color" />
+  <path
+    fill="#5D6066"
+    d="M16 8.375H8v1.25h8v-1.25Zm0 8H4v1.25h12v-1.25ZM20.625 13A4.625 4.625 0 0 0 16 8.375v1.25A3.375 3.375 0 0 1 19.375 13h1.25Zm-1.25 0A3.375 3.375 0 0 1 16 16.375v1.25A4.625 4.625 0 0 0 20.625 13h-1.25Z"
+    class="fastboard-icon-fill-color"
+  />
+</svg>

package/src/components/Icons/Up.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <path
+    d="m16 14-2-2-2-2-2 2-2 2"
+    stroke="#5D6066"
+    stroke-linejoin="round"
+    stroke-width="1.25"
+    class="fastboard-icon-stroke-color"
+  />
+</svg>

package/src/components/Icons/WhiteboardAdd.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <path
+    d="M4 20h16M4 6h16"
+    stroke="#5D6066"
+    stroke-linejoin="round"
+    stroke-width="1.25"
+    class="fastboard-icon-stroke-color"
+  />
+  <rect
+    height="10"
+    rx="1"
+    stroke="#5D6066"
+    stroke-linejoin="round"
+    stroke-width="1.25"
+    width="14"
+    x="5"
+    y="8"
+    class="fastboard-icon-stroke-color"
+  />
+  <path
+    d="M12 4v2m-3 7h6m-3-3v6"
+    stroke="#5D6066"
+    stroke-linejoin="round"
+    stroke-width="1.25"
+    class="fastboard-icon-stroke-color"
+  />
+</svg>

package/src/components/Icons/index.ts

@@ -0,0 +1,93 @@
+import Apps from "./Apps.svelte";
+import Arrow from "./Arrow.svelte";
+import ArrowBolded from "./ArrowBolded.svelte";
+import Balloon from "./Balloon.svelte";
+import BalloonBolded from "./BalloonBolded.svelte";
+import Circle from "./Circle.svelte";
+import CircleBolded from "./CircleBolded.svelte";
+import Clean from "./Clean.svelte";
+import Clear from "./Clear.svelte";
+import Click from "./Click.svelte";
+import ClickFilled from "./ClickFilled.svelte";
+import Diamond from "./Diamond.svelte";
+import Down from "./Down.svelte";
+import Eraser from "./Eraser.svelte";
+import EraserFilled from "./EraserFilled.svelte";
+import Left from "./Left.svelte";
+import Line from "./Line.svelte";
+import LineBolded from "./LineBolded.svelte";
+import Minus from "./Minus.svelte";
+import Pencil from "./Pencil.svelte";
+import PencilFilled from "./PencilFilled.svelte";
+import Plus from "./Plus.svelte";
+import Rectangle from "./Rectangle.svelte";
+import RectangleBolded from "./RectangleBolded.svelte";
+import Redo from "./Redo.svelte";
+import Reset from "./Reset.svelte";
+import Rhombus from "./Rhombus.svelte";
+import RhombusBolded from "./RhombusBolded.svelte";
+import Right from "./Right.svelte";
+import Selector from "./Selector.svelte";
+import SelectorFilled from "./SelectorFilled.svelte";
+import SpeechBalloon from "./SpeechBalloon.svelte";
+import Star from "./Star.svelte";
+import StarBolded from "./StarBolded.svelte";
+import Text from "./Text.svelte";
+import TextFilled from "./TextFilled.svelte";
+import Triangle from "./Triangle.svelte";
+import TriangleBolded from "./TriangleBolded.svelte";
+import Undo from "./Undo.svelte";
+import Up from "./Up.svelte";
+import WhiteboardAdd from "./WhiteboardAdd.svelte";
+import Play from "./Play.svelte";
+import Pause from "./Pause.svelte";
+import Loading from "./Loading.svelte";
+
+const Icons = {
+  Apps,
+  Arrow,
+  ArrowBolded,
+  Balloon,
+  BalloonBolded,
+  Circle,
+  CircleBolded,
+  Clean,
+  Clear,
+  Click,
+  ClickFilled,
+  Diamond,
+  Down,
+  Eraser,
+  EraserFilled,
+  Left,
+  Line,
+  LineBolded,
+  Minus,
+  Pencil,
+  PencilFilled,
+  Plus,
+  Rectangle,
+  RectangleBolded,
+  Redo,
+  Reset,
+  Rhombus,
+  RhombusBolded,
+  Right,
+  Selector,
+  SelectorFilled,
+  SpeechBalloon,
+  Star,
+  StarBolded,
+  Text,
+  TextFilled,
+  Triangle,
+  TriangleBolded,
+  Undo,
+  Up,
+  WhiteboardAdd,
+  Play,
+  Pause,
+  Loading,
+};
+
+export default Icons;

package/src/components/PageControl/PageControl.scss

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

package/src/components/PageControl/PageControl.svelte

@@ -0,0 +1,78 @@
+<script lang="ts" context="module">
+  import type { FastboardApp } from "@netless/fastboard-core";
+  import type { GenericIcon, I18nData, IconType, Language, Theme } from "../../typings";
+  const i18n: I18nData<"prev" | "next" | "add"> = {
+    en: {
+      prev: "Prev Page",
+      next: "Next Page",
+      add: "Add Page",
+    },
+    "zh-CN": {
+      prev: "上一页",
+      next: "下一页",
+      add: "添加页面",
+    },
+  };
+</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<"prev" | "next" | "add"> | undefined = undefined;
+
+  const name = "fastboard-page-control";
+
+  $: writable = app?.writable;
+  $: disabled = !$writable;
+  $: t = i18n[language];
+
+  let type: IconType;
+  $: type = disabled ? "disable" : "normal";
+
+  $: index = app?.sceneIndex;
+  $: length = app?.sceneLength;
+  $: prev_disabled = disabled || !$index;
+  $: next_disabled = disabled || $length == null || $index === $length - 1;
+
+  function prevPage() {
+    app?.prevPage();
+  }
+
+  function nextPage() {
+    app?.nextPage();
+  }
+
+  function addPage() {
+    app?.addPage({ after: true });
+  }
+</script>
+
+<div class="{name} {theme}">
+  <Button class="prev" {name} {theme} disabled={prev_disabled} on:click={prevPage} content={t.prev}>
+    <Icon src={icons?.prev[type]} alt="[prev]">
+      <Icons.Left {theme} />
+    </Icon>
+  </Button>
+  <span class="{name}-text {theme}">
+    {#if $index == null || $length == null}
+      &hellip;
+    {:else}
+      {$index + 1}/{$length}
+    {/if}
+  </span>
+  <Button class="next" {name} {theme} disabled={next_disabled} on:click={nextPage} content={t.next}>
+    <Icon src={icons?.next[type]} alt="[next]">
+      <Icons.Right {theme} />
+    </Icon>
+  </Button>
+  <Button class="add" {name} {theme} {disabled} on:click={addPage} content={t.add}>
+    <Icon src={icons?.add[type]} alt="[add]">
+      <Icons.WhiteboardAdd {theme} />
+    </Icon>
+  </Button>
+</div>

package/src/components/PageControl/PageControl.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 PageControlProps {
+  app?: FastboardApp | null;
+  theme?: Theme;
+  language?: Language;
+  icons?: GenericIcon<"prev" | "next" | "add">;
+}
+
+declare class PageControl extends SvelteComponentTyped<PageControlProps> {}
+export default PageControl;

package/src/components/PageControl/index.ts

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

package/src/components/PlayerControl/PlayerControl.scss

@@ -0,0 +1,57 @@
+@import "../theme.scss";
+
+$name: "fastboard-player-control";
+
+.#{$name} {
+  @include container;
+  width: 100%;
+}
+
+.#{$name}-btn {
+  @include btn;
+  display: inline;
+
+  &.loading {
+    svg,
+    img {
+      animation: fastboard-player-control-rotate 0.5s linear infinite;
+    }
+  }
+
+  @keyframes fastboard-player-control-rotate {
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  &.speed {
+    width: auto;
+    padding: 4px;
+    text-align: right;
+    font-size: 14px;
+    font-variant-numeric: tabular-nums;
+  }
+
+  @each $name, $theme in $themes {
+    &.is-active.#{$name} {
+      color: read($theme, "active-color");
+    }
+  }
+}
+
+.#{$name}-speed-text {
+  font-size: 14px;
+  font-variant-numeric: tabular-nums;
+  line-height: 16px;
+}
+
+.#{$name}-progress {
+  @extend .#{$name}-speed-text;
+  display: inline-flex;
+  align-items: center;
+}
+
+.#{$name}-panel.speed {
+  display: flex;
+  flex-direction: column;
+}

package/src/components/PlayerControl/PlayerControl.svelte

@@ -0,0 +1,153 @@
+<script lang="ts" context="module">
+  import type { FastboardPlayer } from "@netless/fastboard-core";
+  import type { GenericIcon, I18nData, IconType, Language, Theme } from "../../typings";
+
+  const speeds = [2.0, 1.5, 1.25, 1.0, 0.75, 0.5];
+
+  const i18n: I18nData<"play" | "pause" | "speed"> = {
+    en: {
+      play: "Play",
+      pause: "Pause",
+      speed: "Speed",
+    },
+    "zh-CN": {
+      play: "播放",
+      pause: "暂停",
+      speed: "速度",
+    },
+  };
+
+  function format(ms: number) {
+    const s = Math.floor(ms / 1000);
+    const m = Math.floor(s / 60);
+    return String(m).padStart(2, "0") + ":" + String(s % 60).padStart(2, "0");
+  }
+</script>
+
+<script lang="ts">
+  import Icon from "../Icon";
+  import Icons from "../Icons";
+  import Button from "../Button";
+  import Slider from "../Toolbar/components/Slider.svelte";
+
+  export let player: FastboardPlayer | null | undefined = null;
+  export let theme: Theme = "light";
+  export let language: Language = "en";
+  export let icons: GenericIcon<"play" | "pause" | "loading"> | undefined = undefined;
+
+  const name = "fastboard-player-control";
+
+  $: t = i18n[language];
+
+  let type: IconType;
+  $: type = disabled ? "disable" : "normal";
+
+  $: canPlay = player?.canplay;
+  $: disabled = !canPlay;
+  $: duration = player?.duration;
+  $: current = player?.currentTime;
+  $: speed = player?.speed;
+
+  $: phase = player?.phase;
+  $: loading = $phase === "waitingFirstFrame" || $phase === "buffering";
+  $: playing = $phase === "playing";
+  $: className = [loading ? "loading" : "", playing ? "pause" : "play"].filter(Boolean).join(" ");
+
+  let speed_panel: HTMLDivElement;
+
+  function toggle() {
+    if (!player) return;
+    switch (player.player.phase) {
+      case "waitingFirstFrame":
+      case "pause":
+      case "ended": {
+        player.play();
+        break;
+      }
+      case "playing": {
+        player.pause();
+        break;
+      }
+    }
+  }
+
+  function seek({ detail: seconds }: CustomEvent<number>) {
+    if (!player) return;
+    player.seek(seconds * 1000);
+  }
+
+  function setSpeed(speed: number) {
+    if (!player) return;
+    player.setSpeed(speed);
+  }
+</script>
+
+<div class="{name} {theme}">
+  <Button
+    class={className}
+    {name}
+    {theme}
+    {disabled}
+    on:click={toggle}
+    content={loading ? "" : playing ? t.pause : t.play}
+  >
+    {#if loading}
+      <Icon src={icons?.loading[type]} alt="[loading]">
+        <Icons.Loading {theme} />
+      </Icon>
+    {:else if playing}
+      <Icon src={icons?.pause[type]} alt="[pause]">
+        <Icons.Pause {theme} />
+      </Icon>
+    {:else}
+      <Icon src={icons?.play[type]} alt="[play]">
+        <Icons.Play {theme} />
+      </Icon>
+    {/if}
+  </Button>
+  {#if $current == null || $duration == null || $duration === 0}
+    <Slider class="{name}-slider" disabled />
+    <span class="{name}-progress loading">&hellip;/&hellip;</span>
+  {:else}
+    <Slider
+      class="{name}-slider"
+      {theme}
+      value={$current / 1000}
+      min={0}
+      max={$duration / 1000}
+      on:change={seek}
+    />
+    <span class="{name}-progress">
+      <span class="{name}-current">{format($current)}</span>
+      <span class="{name}-slash">/</span>
+      <span class="{name}-duration">{format($duration)}</span>
+    </span>
+  {/if}
+  <Button
+    class="speed"
+    {name}
+    {theme}
+    {disabled}
+    content={t.speed}
+    menu={speed_panel}
+    menu_placement="top-end"
+  >
+    <span class="{name}-speed-text">{$speed}x</span>
+  </Button>
+</div>
+
+<div style="display:none">
+  <div class="{name}-panel speed" bind:this={speed_panel}>
+    {#each speeds as s (s)}
+      <Button
+        class="speed {s === $speed ? 'is-active' : ''}"
+        {name}
+        {theme}
+        {disabled}
+        on:click={() => setSpeed(s)}
+      >
+        {s}x
+      </Button>
+    {/each}
+  </div>
+</div>

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

@@ -0,0 +1,13 @@
+import type { FastboardPlayer } from "@netless/fastboard-core";
+import type { Theme, Language, GenericIcon } from "../../typings";
+import { SvelteComponentTyped } from "svelte";
+
+export declare interface PlayerControlProps {
+  player?: FastboardPlayer | null;
+  theme?: Theme;
+  language?: Language;
+  icons?: GenericIcon<"play" | "pause" | "loading">;
+}
+
+declare class PlayerControl extends SvelteComponentTyped<PlayerControlProps> {}
+export default PlayerControl;

package/src/components/PlayerControl/index.ts

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

package/src/components/RedoUndo/RedoUndo.scss

@@ -0,0 +1,11 @@
+@import "../theme.scss";
+
+$name: "fastboard-redo-undo";
+
+.#{$name} {
+  @include container;
+}
+
+.#{$name}-btn {
+  @include btn;
+}

package/src/components/RedoUndo/RedoUndo.svelte

@@ -0,0 +1,60 @@
+<script lang="ts" context="module">
+  import type { FastboardApp } from "@netless/fastboard-core";
+  import type { GenericIcon, I18nData, IconType, Language, Theme } from "../../typings";
+  const i18n: I18nData<"redo" | "undo"> = {
+    en: {
+      redo: "Redo",
+      undo: "Undo",
+    },
+    "zh-CN": {
+      redo: "重做",
+      undo: "撤销",
+    },
+  };
+</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<"undo" | "redo"> | undefined = undefined;
+
+  const name = "fastboard-redo-undo";
+
+  $: writable = app?.writable;
+  $: disabled = !$writable;
+  $: t = i18n[language];
+
+  let type: IconType;
+  $: type = disabled ? "disable" : "normal";
+
+  $: undoSteps = app?.canUndoSteps;
+  $: redoSteps = app?.canRedoSteps;
+  $: undo_disabled = disabled || !$undoSteps;
+  $: redo_disabled = disabled || !$redoSteps;
+
+  function undo() {
+    app?.undo();
+  }
+
+  function redo() {
+    app?.redo();
+  }
+</script>
+
+<div class="{name} {theme}">
+  <Button class="undo" {name} {theme} disabled={undo_disabled} on:click={undo} content={t.undo}>
+    <Icon src={icons?.undo[type]} alt="[undo]">
+      <Icons.Undo {theme} />
+    </Icon>
+  </Button>
+  <Button class="redo" {name} {theme} disabled={redo_disabled} on:click={redo} content={t.redo}>
+    <Icon src={icons?.redo[type]} alt="[redo]">
+      <Icons.Redo {theme} />
+    </Icon>
+  </Button>
+</div>

package/src/components/RedoUndo/RedoUndo.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 RedoUndoProps {
+  app?: FastboardApp | null;
+  theme?: Theme;
+  language?: Language;
+  icons?: GenericIcon<"undo" | "redo">;
+}
+
+declare class RedoUndo extends SvelteComponentTyped<RedoUndoProps> {}
+export default RedoUndo;

package/src/components/RedoUndo/index.ts

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

package/src/components/Toolbar/README.md

@@ -0,0 +1,57 @@
+## Fastboard Toolbar
+
+```
++---+     vertically center of the viewport
+| ^ |-+   up/down button to do scroll
+: / :<|   collapse/expand button to toggle toolbar to the left
+| v |-+
++---+     dynamic height according to the viewport
+```
+
+This doc will give you an overview of how the toolbar structures, from top (outer) to bottom (inner).
+
+### The Outmost Container
+
+<pre>--- content
+ &uarr;
+ : |&larr; handler
+ &darr;
+---</pre>
+
+```svelte
+<container style="height: 100%; display: flex; align-items: center">
+  <content style="height: {computed_height}px" />
+  <handler style="position: absolute; left: 100%" />
+</container>
+```
+
+- Container has the full height for further calculations.
+- Content is actually visible parts, it has background color.\
+  Its height will be calculated later.
+- Handler is the button to collapse/expand the toolbar.
+
+### The Content
+
+<pre>------- content
+   ^    up button
+ .---.  scrollable area
+ :   :
+ '---'
+   v    down button
+-------</pre>
+
+```svelte
+<content style="height: {computed_height}px">
+  <up-button />
+  <scrollable-area style="overflow: hidden" />
+  <down-button />
+</content>
+```
+
+The `computed_height` is calculated by:
+
+```js
+const max_height = button_height * 2 + scrollable_area_full_height;
+let full_height = container.height;
+computed_height = full_height < max_height ? full_height : max_height;
+```