@netless/fastboard 0.0.11 → 0.1.0

package/src/components/Toolbar/hooks.ts

@@ -1,112 +0,0 @@
-import type {
-  ApplianceNames,
-  Color,
-  MemberState,
-  Room,
-  RoomState,
-  ShapeType,
-} from "white-web-sdk";
-import type { WindowManager } from "@netless/window-manager";
-import { useCallback, useEffect, useState } from "react";
-
-import { noop } from "../../internal";
-import { useWritable } from "../hooks";
-
-export function useRoomState(room?: Room | null) {
-  const [memberState, setMemberState] = useState<MemberState | undefined>(
-    undefined
-  );
-
-  useEffect(() => {
-    if (room) {
-      setMemberState(room.state.memberState);
-      const onRoomStateChanged = (diff: Partial<RoomState>) => {
-        if (diff.memberState) setMemberState(diff.memberState);
-      };
-      room.callbacks.on("onRoomStateChanged", onRoomStateChanged);
-      return () => room.callbacks.off("onRoomStateChanged", onRoomStateChanged);
-    }
-  }, [room]);
-
-  return { memberState };
-}
-
-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 useToolbar(
-  room?: Room | null,
-  manager?: WindowManager | null
-): ToolbarHook {
-  const writable = useWritable(room);
-  const { memberState } = useRoomState(room);
-
-  const cleanCurrentScene = useCallback(() => {
-    if (manager) {
-      manager.mainView.cleanCurrentScene();
-    } else if (room) {
-      room.cleanCurrentScene();
-    }
-  }, [manager, room]);
-
-  const setAppliance = useCallback(
-    (appliance: ApplianceNames, shape?: ShapeType) => {
-      const memberState = {
-        currentApplianceName: appliance,
-        shapeType: shape,
-      };
-      if (manager) {
-        manager.mainView.setMemberState(memberState);
-      } else if (room) {
-        room.setMemberState(memberState);
-      }
-    },
-    [manager, room]
-  );
-
-  const setStrokeWidth = useCallback(
-    (strokeWidth: number) => {
-      if (manager) {
-        manager.mainView.setMemberState({ strokeWidth });
-      } else if (room) {
-        room.setMemberState({ strokeWidth });
-      }
-    },
-    [manager, room]
-  );
-
-  const setStrokeColor = useCallback(
-    (strokeColor: Color) => {
-      if (manager) {
-        manager.mainView.setMemberState({ strokeColor });
-      } else if (room) {
-        room.setMemberState({ strokeColor });
-      }
-    },
-    [manager, room]
-  );
-
-  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

@@ -1,16 +0,0 @@
-import type { IconProps } from "../../../types";
-
-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

@@ -1,16 +0,0 @@
-import type { IconProps } from "../../../types";
-
-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

@@ -1,21 +0,0 @@
-import type { IconProps } from "../../../types";
-
-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

@@ -1,16 +0,0 @@
-import type { IconProps } from "../../../types";
-
-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

@@ -1,19 +0,0 @@
-import type { IconProps } from "../../../types";
-
-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

@@ -1,17 +0,0 @@
-import type { IconProps } from "../../../types";
-
-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

@@ -1,17 +0,0 @@
-import type { IconProps } from "../../../types";
-
-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

@@ -1,17 +0,0 @@
-import type { IconProps } from "../../../types";
-
-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

@@ -1,16 +0,0 @@
-import type { IconProps } from "../../../types";
-
-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

@@ -1,17 +0,0 @@
-import type { IconProps } from "../../../types";
-
-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

@@ -1,13 +0,0 @@
-import type { IconProps } from "../../../types";
-
-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

@@ -1,16 +0,0 @@
-import type { IconProps } from "../../../types";
-
-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

@@ -1,13 +0,0 @@
-import type { IconProps } from "../../../types";
-
-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

@@ -1,16 +0,0 @@
-import type { IconProps } from "../../../types";
-
-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

@@ -1,17 +0,0 @@
-import type { IconProps } from "../../../types";
-
-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

@@ -1,17 +0,0 @@
-import type { IconProps } from "../../../types";
-
-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

@@ -1,16 +0,0 @@
-import type { IconProps } from "../../../types";
-
-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

@@ -1,17 +0,0 @@
-import type { IconProps } from "../../../types";
-
-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

@@ -1,17 +0,0 @@
-import type { IconProps } from "../../../types";
-
-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

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

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

package/src/components/ZoomControl/ZoomControl.scss

@@ -1,80 +0,0 @@
-$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;
-}