@netless/fastboard-react 0.1.0

package/src/components/Toolbar/hooks.ts

@@ -0,0 +1,68 @@
+import type { ApplianceNames, Color, MemberState, ShapeType } from "white-web-sdk";
+
+import { useCallback } from "react";
+
+import { noop } from "../../internal";
+import { useFastboardApp, useFastboardValue, useWritable } from "../hooks";
+
+export interface ToolbarHook {
+  readonly writable: boolean;
+  readonly memberState: MemberState | undefined;
+  cleanCurrentScene(): void;
+  setAppliance(appliance: ApplianceNames, shape?: ShapeType): void;
+  setStrokeWidth(width: number): void;
+  setStrokeColor(color: Color): void;
+}
+
+export function useRoomState() {
+  return useFastboardValue(useFastboardApp().memberState);
+}
+
+export function useToolbar(): ToolbarHook {
+  const app = useFastboardApp();
+  const writable = useWritable();
+  const memberState = useRoomState();
+
+  const cleanCurrentScene = useCallback(() => {
+    app.cleanCurrentScene();
+  }, [app]);
+
+  const setAppliance = useCallback(
+    (appliance: ApplianceNames, shape?: ShapeType) => {
+      app.setAppliance(appliance, shape);
+    },
+    [app]
+  );
+
+  const setStrokeWidth = useCallback(
+    (strokeWidth: number) => {
+      app.setStrokeWidth(strokeWidth);
+    },
+    [app]
+  );
+
+  const setStrokeColor = useCallback(
+    (strokeColor: Color) => {
+      app.setStrokeColor(strokeColor);
+    },
+    [app]
+  );
+
+  return {
+    writable,
+    memberState,
+    cleanCurrentScene,
+    setAppliance,
+    setStrokeWidth,
+    setStrokeColor,
+  };
+}
+
+export const EmptyToolbarHook: ToolbarHook = {
+  writable: false,
+  memberState: undefined,
+  cleanCurrentScene: noop,
+  setAppliance: noop,
+  setStrokeWidth: noop,
+  setStrokeColor: noop,
+};

package/src/components/Toolbar/icons/Apps.tsx

@@ -0,0 +1,16 @@
+import type { IconProps } from "../../../typings";
+
+import React from "react";
+import { getStroke } from "../../../theme";
+
+export const Apps = (props: IconProps) => {
+  const stroke = getStroke(props);
+  return (
+    <svg viewBox="0 0 24 24">
+      <g fill={stroke}>
+        <path d="M17.667 4.5h-3.334c-1.012 0-1.833.82-1.833 1.833V11.5h5.167c1.012 0 1.833-.82 1.833-1.833V6.333c0-1.012-.82-1.833-1.833-1.833Zm-3.334 1h3.334c.46 0 .833.373.833.833v3.334l-.006.104a.833.833 0 0 1-.827.729H13.5V6.333c0-.46.373-.833.833-.833Z" />
+        <path d="M6.333 19.5A1.833 1.833 0 0 1 4.5 17.667v-3.334c0-.525.221-1 .576-1.334a1.822 1.822 0 0 1-.576-1.332V8.333c0-1.012.82-1.833 1.833-1.833H10A1.5 1.5 0 0 1 11.5 8v4.5h4.167c.962 0 1.75.74 1.827 1.683l.006.15v3.334c0 1.012-.82 1.833-1.833 1.833Zm4.167-6H6.333a.833.833 0 0 0-.827.729l-.006.104v3.334c0 .46.373.833.833.833H10.5v-5Zm5.167 0H11.5v5h4.167c.46 0 .833-.373.833-.833v-3.334a.833.833 0 0 0-.833-.833ZM10 7.5H6.333a.833.833 0 0 0-.833.833v3.334c0 .46.373.833.833.833H10.5V8a.5.5 0 0 0-.41-.492L10 7.5Z" />
+      </g>
+    </svg>
+  );
+};

package/src/components/Toolbar/icons/Arrow.tsx

@@ -0,0 +1,13 @@
+import type { IconProps } from "../../../typings";
+
+import React from "react";
+import { getStroke } from "../../../theme";
+
+export const Arrow = (props: IconProps) => {
+  const stroke = getStroke(props);
+  return (
+    <svg viewBox="0 0 24 24">
+      <path fill={stroke} d="M19 5v6l-2.647-2.646L5.99 18.718l-.708-.708L15.645 7.646 13 5h6Z" />
+    </svg>
+  );
+};

package/src/components/Toolbar/icons/Circle.tsx

@@ -0,0 +1,13 @@
+import type { IconProps } from "../../../typings";
+
+import React from "react";
+import { getStroke } from "../../../theme";
+
+export const Circle = (props: IconProps) => {
+  const stroke = getStroke(props);
+  return (
+    <svg viewBox="0 0 24 24">
+      <rect width="15" height="15" x="4.5" y="4.5" fill="none" stroke={stroke} rx="7.5" />
+    </svg>
+  );
+};

package/src/components/Toolbar/icons/Clean.tsx

@@ -0,0 +1,16 @@
+import type { IconProps } from "../../../typings";
+
+import React from "react";
+import { getStroke } from "../../../theme";
+
+export const Clean = (props: IconProps) => {
+  const stroke = getStroke(props);
+  return (
+    <svg viewBox="0 0 24 24">
+      <path
+        fill={stroke}
+        d="M9.754 11.99c0 1.856-.711 3.62-1.96 4.951l-.151.155h1.403l.855-.853h.707l.853.853h2.635l.094-.064a6.237 6.237 0 0 0 2.559-4.781l.005-.26h1a7.237 7.237 0 0 1-2.994 5.862l-.229.16-.277.083h-3l-.353-.146-.647-.647-.646.647-.354.146h-3l-.286-.91.214-.148a6.237 6.237 0 0 0 2.567-4.787l.005-.26h1Zm4.772-6.502v2l.35.039a2.98 2.98 0 0 1 2.644 2.78l.006.181h-8a2.98 2.98 0 0 1 2.65-2.961l.35-.039v-2h2Z"
+      />
+    </svg>
+  );
+};

package/src/components/Toolbar/icons/Clicker.tsx

@@ -0,0 +1,19 @@
+import type { IconProps } from "../../../typings";
+
+import React from "react";
+import { getStroke } from "../../../theme";
+
+export const Clicker = (props: IconProps) => {
+  const stroke = getStroke(props);
+  return (
+    <svg viewBox="0 0 24 24">
+      <g fill="none">
+        <path d="M0 0h24v24H0z" />
+        <path
+          fill={stroke}
+          d="m7 5.072 10.33 7.892-4.879.549 3.232 5.598-.866.5-3.233-5.597-2.914 3.95L7 5.072Z"
+        />
+      </g>
+    </svg>
+  );
+};

package/src/components/Toolbar/icons/Collapse.tsx

@@ -0,0 +1,13 @@
+import type { IconProps } from "../../../typings";
+
+import React from "react";
+import { getStroke } from "../../../theme";
+
+export const Collapse = (props: IconProps) => {
+  const stroke = getStroke(props);
+  return (
+    <svg viewBox="0 0 24 24">
+      <path fill="none" stroke={stroke} d="m8 10-2 2 2 2m10-8H6m12 12H6m12-4h-8m8-4h-8" />
+    </svg>
+  );
+};

package/src/components/Toolbar/icons/Diamond.tsx

@@ -0,0 +1,13 @@
+import type { IconProps } from "../../../typings";
+
+import React from "react";
+import { getStroke } from "../../../theme";
+
+export const Diamond = (props: IconProps) => {
+  const stroke = getStroke(props);
+  return (
+    <svg viewBox="0 0 24 24">
+      <path fill="none" stroke={stroke} d="M4.222 12 12 4.222 19.778 12 12 19.778z" />
+    </svg>
+  );
+};

package/src/components/Toolbar/icons/Down.tsx

@@ -0,0 +1,13 @@
+import type { IconProps } from "../../../typings";
+
+import React from "react";
+import { getStroke } from "../../../theme";
+
+export const Down = (props: IconProps) => {
+  const stroke = getStroke(props);
+  return (
+    <svg viewBox="0 0 24 24">
+      <path fill="none" stroke={stroke} d="m16 13-2 2-2 2-2-2-2-2m8-6-2 2-2 2-2-2-2-2" />
+    </svg>
+  );
+};

package/src/components/Toolbar/icons/Eraser.tsx

@@ -0,0 +1,16 @@
+import type { IconProps } from "../../../typings";
+
+import React from "react";
+import { getStroke } from "../../../theme";
+
+export const Eraser = (props: IconProps) => {
+  const stroke = getStroke(props);
+  return (
+    <svg viewBox="0 0 24 24">
+      <path
+        fill={stroke}
+        d="m14.333 5.183.165.007c.494.037.978.245 1.356.623l2.333 2.333a2.15 2.15 0 0 1 0 3.04l-5.833 5.834a3.8 3.8 0 0 1-5.374 0l-1.167-1.166a2.15 2.15 0 0 1 0-3.04l7-7c.42-.42.97-.63 1.52-.63ZM11.52 8.52l-4.999 5a1.15 1.15 0 0 0 0 1.626l1.167 1.167a2.8 2.8 0 0 0 3.96 0l3.832-3.833-3.96-3.96Z"
+      />
+    </svg>
+  );
+};

package/src/components/Toolbar/icons/Expand.tsx

@@ -0,0 +1,13 @@
+import type { IconProps } from "../../../typings";
+
+import React from "react";
+import { getStroke } from "../../../theme";
+
+export const Expand = (props: IconProps) => {
+  const stroke = getStroke(props);
+  return (
+    <svg viewBox="0 0 24 24">
+      <path fill="none" stroke={stroke} d="m16 10 2 2-2 2M6 6h12M6 18h12M6 14h8m-8-4h8" />
+    </svg>
+  );
+};

package/src/components/Toolbar/icons/Line.tsx

@@ -0,0 +1,13 @@
+import type { IconProps } from "../../../typings";
+
+import React from "react";
+import { getStroke } from "../../../theme";
+
+export const Line = (props: IconProps) => {
+  const stroke = getStroke(props);
+  return (
+    <svg viewBox="0 0 24 24">
+      <path fill={stroke} d="m18.01 5.282.708.708L5.99 18.718l-.708-.708z" />
+    </svg>
+  );
+};

package/src/components/Toolbar/icons/Pencil.tsx

@@ -0,0 +1,16 @@
+import type { IconProps } from "../../../typings";
+
+import React from "react";
+import { getStroke } from "../../../theme";
+
+export const Pencil = (props: IconProps) => {
+  const stroke = getStroke(props);
+  return (
+    <svg viewBox="0 0 24 24">
+      <path
+        fill={stroke}
+        d="m17.497 4.84.116.105 1.442 1.442a1.52 1.52 0 0 1 .104 2.034l-.104.116L8.733 18.858l-4.347.756.756-4.347L15.463 4.945a1.52 1.52 0 0 1 2.034-.104ZM5.967 16.349l-.353 2.037 2.037-.354-1.683-1.683Zm8.407-8.901-7.946 7.946 2.178 2.178 7.946-7.946-2.178-2.178Zm-.728 2.2.708.707-5 5-.708-.708 5-5Zm2.596-4.055-.072.06-1.09 1.088 2.179 2.178 1.089-1.088a.52.52 0 0 0 .105-.584l-.045-.08-.06-.072-1.442-1.442a.52.52 0 0 0-.664-.06Z"
+      />
+    </svg>
+  );
+};

package/src/components/Toolbar/icons/Rectangle.tsx

@@ -0,0 +1,13 @@
+import type { IconProps } from "../../../typings";
+
+import React from "react";
+import { getStroke } from "../../../theme";
+
+export const Rectangle = (props: IconProps) => {
+  const stroke = getStroke(props);
+  return (
+    <svg viewBox="0 0 24 24">
+      <path fill="none" stroke={stroke} d="M5.5 5.5h13v13h-13z" />
+    </svg>
+  );
+};

package/src/components/Toolbar/icons/Selector.tsx

@@ -0,0 +1,13 @@
+import type { IconProps } from "../../../typings";
+
+import React from "react";
+import { getStroke } from "../../../theme";
+
+export const Selector = (props: IconProps) => {
+  const stroke = getStroke(props);
+  return (
+    <svg viewBox="0 0 24 24">
+      <path fill={stroke} d="m12 12 8 2.667-3.556 1.777L14.667 20 12 12Zm3-8v7.5h-1V5H5v9h6.5v1H4V4h11Z" />
+    </svg>
+  );
+};

package/src/components/Toolbar/icons/SpeechBalloon.tsx

@@ -0,0 +1,17 @@
+import type { IconProps } from "../../../typings";
+
+import React from "react";
+import { getStroke } from "../../../theme";
+
+export const SpeechBalloon = (props: IconProps) => {
+  const stroke = getStroke(props);
+  return (
+    <svg viewBox="0 0 24 24">
+      <path
+        fill="none"
+        stroke={stroke}
+        d="M17 4.5c.414 0 .79.168 1.06.44.272.27.44.646.44 1.06v9c0 .414-.168.79-.44 1.06a1.49 1.49 0 0 1-1.06.44h-4.207l-2.715 2.715-1.81-2.715H7a1.49 1.49 0 0 1-1.06-.44A1.495 1.495 0 0 1 5.5 15V6c0-.414.168-.79.44-1.06A1.49 1.49 0 0 1 7 4.5Z"
+      />
+    </svg>
+  );
+};

package/src/components/Toolbar/icons/Star.tsx

@@ -0,0 +1,17 @@
+import type { IconProps } from "../../../typings";
+
+import React from "react";
+import { getStroke } from "../../../theme";
+
+export const Star = (props: IconProps) => {
+  const stroke = getStroke(props);
+  return (
+    <svg viewBox="0 0 24 24">
+      <path
+        fill="none"
+        stroke={stroke}
+        d="m12 3.523 1.993 5.734 6.07.123-4.838 3.668 1.758 5.81L12 15.391l-4.983 3.467 1.758-5.81L3.938 9.38l6.069-.123L12 3.523Z"
+      />
+    </svg>
+  );
+};

package/src/components/Toolbar/icons/Text.tsx

@@ -0,0 +1,13 @@
+import type { IconProps } from "../../../typings";
+
+import React from "react";
+import { getStroke } from "../../../theme";
+
+export const Text = (props: IconProps) => {
+  const stroke = getStroke(props);
+  return (
+    <svg viewBox="0 0 24 24">
+      <path fill={stroke} d="M18.5 5.5V8h-1V6.5H13v11h2v1H9v-1h2v-11H6.5V8h-1V5.5h13Z" />
+    </svg>
+  );
+};

package/src/components/Toolbar/icons/Triangle.tsx

@@ -0,0 +1,13 @@
+import type { IconProps } from "../../../typings";
+
+import React from "react";
+import { getStroke } from "../../../theme";
+
+export const Triangle = (props: IconProps) => {
+  const stroke = getStroke(props);
+  return (
+    <svg viewBox="0 0 24 24">
+      <path fill="none" stroke={stroke} d="M12 6.008 19.138 18.5H4.862L12 6.008Z" />
+    </svg>
+  );
+};

package/src/components/Toolbar/icons/Up.tsx

@@ -0,0 +1,13 @@
+import type { IconProps } from "../../../typings";
+
+import React from "react";
+import { getStroke } from "../../../theme";
+
+export const Up = (props: IconProps) => {
+  const stroke = getStroke(props);
+  return (
+    <svg viewBox="0 0 24 24">
+      <path fill="none" stroke={stroke} d="m16 11-2-2-2-2-2 2-2 2m8 6-2-2-2-2-2 2-2 2" />
+    </svg>
+  );
+};

package/src/components/Toolbar/icons/index.ts

@@ -0,0 +1,42 @@
+import { memo } from "react";
+import { Apps } from "./Apps";
+import { Arrow } from "./Arrow";
+import { Circle } from "./Circle";
+import { Clean } from "./Clean";
+import { Clicker } from "./Clicker";
+import { Collapse } from "./Collapse";
+import { Diamond } from "./Diamond";
+import { Down } from "./Down";
+import { Eraser } from "./Eraser";
+import { Expand } from "./Expand";
+import { Line } from "./Line";
+import { Pencil } from "./Pencil";
+import { Rectangle } from "./Rectangle";
+import { Selector } from "./Selector";
+import { SpeechBalloon } from "./SpeechBalloon";
+import { Star } from "./Star";
+import { Text } from "./Text";
+import { Triangle } from "./Triangle";
+import { Up } from "./Up";
+
+export const Icons = {
+  Clicker: memo(Clicker),
+  Collapse: memo(Collapse),
+  Eraser: memo(Eraser),
+  Expand: memo(Expand),
+  Pencil: memo(Pencil),
+  Selector: memo(Selector),
+  Rectangle: memo(Rectangle),
+  Text: memo(Text),
+  Apps: memo(Apps),
+  Clean: memo(Clean),
+  Circle: memo(Circle),
+  Line: memo(Line),
+  Arrow: memo(Arrow),
+  Star: memo(Star),
+  Diamond: memo(Diamond),
+  SpeechBalloon: memo(SpeechBalloon),
+  Triangle: memo(Triangle),
+  Up: memo(Up),
+  Down: memo(Down),
+};

package/src/components/Toolbar/index.ts

@@ -0,0 +1,2 @@
+export * from "./hooks";
+export { Toolbar, type ToolbarProps } from "./Toolbar";

package/src/components/ZoomControl/ZoomControl.scss

@@ -0,0 +1,80 @@
+$name: "fastboard-zoom-control";
+
+.#{$name} {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px;
+  border-radius: 4px;
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
+
+  &.light {
+    color: #333;
+    background-color: rgba($color: #fff, $alpha: 0.85);
+    border: 1px solid rgba(0, 0, 0, 0.15);
+  }
+
+  &.dark {
+    color: #ddd;
+    background-color: rgba($color: #333, $alpha: 0.85);
+    border: 1px solid rgba(0, 0, 0, 0.45);
+  }
+}
+
+.#{$name}-btn {
+  appearance: none;
+  cursor: pointer;
+  margin: 0;
+  border: 0;
+  padding: 0;
+  width: 24px;
+  height: 24px;
+  background-color: transparent;
+  border-radius: 4px;
+  font-size: 24px;
+  line-height: 1;
+
+  svg,
+  img {
+    width: 1em;
+    height: 1em;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  &.light:not(:disabled):hover {
+    background-color: rgba(51, 129, 255, 0.1);
+  }
+
+  &.dark:not(:disabled):hover {
+    background-color: rgba(51, 129, 255, 0.25);
+  }
+}
+
+.#{$name}-cut-line {
+  height: 24px;
+  width: 0.5px;
+
+  &.light {
+    background-color: #e7e7e7;
+  }
+
+  &.dark {
+    background-color: rgba(255, 255, 255, 0.15);
+  }
+}
+
+.#{$name}-percent {
+  opacity: 0.6;
+}
+
+.#{$name}-scale,
+.#{$name}-percent {
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}

package/src/components/ZoomControl/ZoomControl.tsx

@@ -0,0 +1,94 @@
+import type { CommonProps, GenericIcon } from "../../typings";
+
+import Tippy from "@tippyjs/react";
+import clsx from "clsx";
+import React from "react";
+
+import { useTranslation } from "../../i18n";
+import { Icon } from "../../icons";
+import { Minus } from "../../icons/Minus";
+import { Plus } from "../../icons/Plus";
+import { Reset } from "../../icons/Reset";
+import { TopOffset } from "../../theme";
+import { useTheme, useWritable } from "../hooks";
+import { useZoomControl } from "./hooks";
+
+export const name = "fastboard-zoom-control";
+
+export type ZoomControlProps = CommonProps & GenericIcon<"reset" | "minus" | "plus">;
+
+export function ZoomControl({
+  theme,
+  resetIcon,
+  resetIconDisable,
+  minusIcon,
+  minusIconDisable,
+  plusIcon,
+  plusIconDisable,
+}: ZoomControlProps) {
+  theme = useTheme(theme);
+  const { t } = useTranslation();
+
+  const writable = useWritable();
+  const { scale, resetCamera, zoomIn, zoomOut } = useZoomControl();
+
+  const disabled = !writable;
+
+  return (
+    <div className={clsx(name, theme)}>
+      {/* <span className={clsx(`${name}-cut-line`, theme)} /> */}
+      <Tippy
+        className="fastboard-tip"
+        content={t("zoomOut")}
+        theme={theme}
+        disabled={disabled}
+        placement="top"
+        delay={[1000, 400]}
+        duration={300}
+        offset={TopOffset}
+      >
+        <button className={clsx(`${name}-btn`, "minus", theme)} disabled={disabled} onClick={zoomOut}>
+          <Icon
+            fallback={<Minus theme={theme} />}
+            src={disabled ? minusIconDisable : minusIcon}
+            alt="[minus]"
+          />
+        </button>
+      </Tippy>
+      <span className={clsx(`${name}-scale`, theme)}>{Math.ceil(scale * 100)}</span>
+      <span className={clsx(`${name}-percent`, theme)}>%</span>
+      <Tippy
+        className="fastboard-tip"
+        content={t("zoomIn")}
+        theme={theme}
+        disabled={disabled}
+        placement="top"
+        delay={[1000, 400]}
+        duration={300}
+        offset={TopOffset}
+      >
+        <button className={clsx(`${name}-btn`, "plus", theme)} disabled={disabled} onClick={zoomIn}>
+          <Icon fallback={<Plus theme={theme} />} src={disabled ? plusIconDisable : plusIcon} alt="[plus]" />
+        </button>
+      </Tippy>
+      <Tippy
+        className="fastboard-tip"
+        content={t("reset")}
+        theme={theme}
+        disabled={disabled}
+        placement="top"
+        delay={[1000, 400]}
+        duration={300}
+        offset={TopOffset}
+      >
+        <button className={clsx(`${name}-btn`, "reset", theme)} disabled={disabled} onClick={resetCamera}>
+          <Icon
+            fallback={<Reset theme={theme} />}
+            src={disabled ? resetIconDisable : resetIcon}
+            alt="[reset]"
+          />
+        </button>
+      </Tippy>
+    </div>
+  );
+}

package/src/components/ZoomControl/hooks.ts

@@ -0,0 +1,52 @@
+import { useCallback } from "react";
+
+import { clamp } from "../../internal";
+import { useFastboardApp, useFastboardValue } from "../hooks";
+
+export const ScalePoints: readonly number[] = [
+  0.10737418240000011, 0.13421772800000012, 0.16777216000000014, 0.20971520000000016, 0.26214400000000015,
+  0.3276800000000002, 0.4096000000000002, 0.5120000000000001, 0.6400000000000001, 0.8, 1, 1.26,
+  1.5876000000000001, 2.000376, 2.5204737600000002, 3.1757969376000004, 4.001504141376, 5.041895218133761,
+  6.352787974848539, 8.00451284830916, 10,
+];
+
+function nextScale(scale: number, delta: 1 | -1) {
+  const { length } = ScalePoints;
+  const last = length - 1;
+  if (scale < ScalePoints[0]) return ScalePoints[0];
+  if (scale > ScalePoints[last]) return ScalePoints[last];
+  for (let i = 0; i < length; ++i) {
+    const curr = ScalePoints[i];
+    const prev = i === 0 ? -Infinity : (ScalePoints[i - 1] + curr) / 2;
+    const next = i === last ? Infinity : (ScalePoints[i + 1] + curr) / 2;
+    if (prev <= scale && scale <= next) return ScalePoints[clamp(i + delta, 0, last)];
+  }
+  return 1;
+}
+
+export function useZoomControl() {
+  const app = useFastboardApp();
+  const scale = useFastboardValue(app.camera).scale || 1;
+
+  const resetCamera = useCallback(() => {
+    app.moveCamera({ scale: 1, centerX: 0, centerY: 0 });
+  }, [app]);
+
+  const zoomIn = useCallback(() => {
+    app.moveCamera({
+      scale: nextScale(scale, 1),
+      centerX: 0,
+      centerY: 0,
+    });
+  }, [app, scale]);
+
+  const zoomOut = useCallback(() => {
+    app.moveCamera({
+      scale: nextScale(scale, -1),
+      centerX: 0,
+      centerY: 0,
+    });
+  }, [app, scale]);
+
+  return { scale, resetCamera, zoomIn, zoomOut };
+}

package/src/components/ZoomControl/index.ts

@@ -0,0 +1,2 @@
+export * from "./hooks";
+export { ZoomControl, type ZoomControlProps } from "./ZoomControl";