@netless/fastboard 0.0.11 → 0.2.1

package/src/components/ZoomControl/ZoomControl.tsx

@@ -1,109 +0,0 @@
-import type { CommonProps, GenericIcon } from "../../types";
-
-import clsx from "clsx";
-import React from "react";
-import Tippy from "@tippyjs/react";
-
-import { TopOffset } from "../../theme";
-import { Icon } from "../../icons";
-import { Minus } from "../../icons/Minus";
-import { Plus } from "../../icons/Plus";
-import { Reset } from "../../icons/Reset";
-import { useWritable } from "../hooks";
-import { useZoomControl } from "./hooks";
-
-export const name = "fastboard-zoom-control";
-
-export type ZoomControlProps = CommonProps &
-  GenericIcon<"reset" | "minus" | "plus">;
-
-export function ZoomControl({
-  room,
-  manager,
-  theme = "light",
-  resetIcon,
-  resetIconDisable,
-  minusIcon,
-  minusIconDisable,
-  plusIcon,
-  plusIconDisable,
-  i18n,
-}: ZoomControlProps) {
-  const writable = useWritable(room);
-  const { scale, resetCamera, zoomIn, zoomOut } = useZoomControl(room, manager);
-
-  const disabled = !writable;
-
-  return (
-    <div className={clsx(name, theme)}>
-      {/* <span className={clsx(`${name}-cut-line`, theme)} /> */}
-      <Tippy
-        className="fastboard-tip"
-        content={i18n?.t("zoomOut")}
-        theme={theme}
-        disabled={disabled}
-        placement="top"
-        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={i18n?.t("zoomIn")}
-        theme={theme}
-        disabled={disabled}
-        placement="top"
-        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={i18n?.t("reset")}
-        theme={theme}
-        disabled={disabled}
-        placement="top"
-        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

@@ -1,111 +0,0 @@
-import type { Room, RoomState } from "white-web-sdk";
-import type { WindowManager } from "@netless/window-manager";
-import { useCallback, useEffect, useState } from "react";
-import { clamp } from "../../internal";
-
-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(
-  room?: Room | null,
-  manager?: WindowManager | null
-) {
-  const [scale, setScale] = useState(1);
-
-  const resetCamera = useCallback(() => {
-    if (manager) {
-      manager.mainView.moveCamera({ scale: 1, centerX: 0, centerY: 0 });
-    } else if (room) {
-      const { scenes, index } = room.state.sceneState;
-      if (scenes[index].ppt) {
-        room.scalePptToFit();
-      } else {
-        room.moveCamera({ scale: 1, centerX: 0, centerY: 0 });
-      }
-    }
-  }, [room, manager]);
-
-  const zoomIn = useCallback(() => {
-    if (manager) {
-      manager.mainView.moveCamera({
-        scale: nextScale(scale, 1),
-        centerX: 0,
-        centerY: 0,
-      });
-    } else if (room) {
-      room.moveCamera({
-        scale: nextScale(scale, 1),
-        centerX: 0,
-        centerY: 0,
-      });
-    }
-  }, [room, manager, scale]);
-
-  const zoomOut = useCallback(() => {
-    if (manager) {
-      manager.mainView.moveCamera({
-        scale: nextScale(scale, -1),
-        centerX: 0,
-        centerY: 0,
-      });
-    } else if (room) {
-      room.moveCamera({
-        scale: nextScale(scale, -1),
-        centerX: 0,
-        centerY: 0,
-      });
-    }
-  }, [room, manager, scale]);
-
-  useEffect(() => {
-    if (manager) {
-      setScale(manager.mainView.camera.scale);
-
-      const onCameraUpdated = ({ scale }: { scale: number }) => setScale(scale);
-
-      manager.mainView.callbacks.on("onCameraUpdated", onCameraUpdated);
-
-      return () => {
-        manager.mainView.callbacks.off("onCameraUpdated", onCameraUpdated);
-      };
-    }
-
-    if (room) {
-      setScale(room.state.cameraState.scale);
-
-      const onRoomStateChanged = (modifyState: Partial<RoomState>) => {
-        if (modifyState.cameraState) {
-          setScale(modifyState.cameraState.scale);
-        }
-      };
-
-      room.callbacks.on("onRoomStateChanged", onRoomStateChanged);
-
-      return () => {
-        room.callbacks.off("onRoomStateChanged", onRoomStateChanged);
-      };
-    }
-  }, [room, manager]);
-
-  return { scale, resetCamera, zoomIn, zoomOut };
-}

package/src/components/ZoomControl/index.ts

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

package/src/components/hooks.ts

@@ -1,80 +0,0 @@
-import type { Room, WindowManager } from "@netless/window-manager";
-import { BuiltinApps } from "@netless/window-manager";
-import { useEffect, useState } from "react";
-
-export function useWritable(room?: Room | null) {
-  const [writable, setWritable] = useState(false);
-
-  useEffect(() => {
-    if (room) {
-      setWritable(room.isWritable);
-      room.isWritable && (room.disableSerialization = false);
-
-      const updateWritable = () => setWritable(room.isWritable);
-      room.callbacks.on("onEnableWriteNowChanged", updateWritable);
-
-      return () => {
-        room.callbacks.off("onEnableWriteNowChanged", updateWritable);
-      };
-    }
-  }, [room]);
-
-  return writable;
-}
-
-export type BoxState = "normal" | "minimized" | "maximized";
-
-export function useBoxState(manager?: WindowManager | null) {
-  const [boxState, setBoxState] = useState<BoxState | undefined>();
-
-  useEffect(() => {
-    if (manager) {
-      setBoxState(manager.boxState);
-
-      manager.emitter.on("boxStateChange", setBoxState);
-
-      return () => {
-        manager.emitter.off("boxStateChange", setBoxState);
-      };
-    }
-  }, [manager]);
-
-  return boxState;
-}
-
-export function useFocusedApp(manager?: WindowManager | null) {
-  const [focused, setFocused] = useState<string | undefined>();
-
-  useEffect(() => {
-    if (manager) {
-      setFocused(manager.focused);
-
-      manager.emitter.on("focusedChange", setFocused);
-
-      return () => {
-        manager.emitter.off("focusedChange", setFocused);
-      };
-    }
-  }, [manager]);
-
-  return focused;
-}
-
-export function useMaximized(manager?: WindowManager | null) {
-  return useBoxState(manager) === "maximized";
-}
-
-export function useHideControls(manager?: WindowManager | null) {
-  const maximized = useMaximized(manager);
-  const focusedApp = useFocusedApp(manager);
-
-  if (maximized) {
-    if (Object.values(BuiltinApps).some(kind => focusedApp?.includes(kind))) {
-      return "toolbar-only";
-    } else {
-      return true;
-    }
-  }
-
-  return false;
-}

package/src/i18n/en.json

@@ -1,31 +0,0 @@
-{
-  "translation": {
-    "clicker": "clicker",
-    "selector": "selector",
-    "text": "text",
-    "pencil": "pencil",
-    "arrow": "arrow",
-    "hand": "hand",
-    "eraser": "eraser",
-    "laser": "laser",
-    "collapse": "Collapse",
-    "expand": "Expand",
-    "zoomIn": "Zoom In",
-    "zoomOut": "Zoom Out",
-    "reset": "Reset",
-    "prevPage": "Prev Page",
-    "nextPage": "Next Page",
-    "addPage": "Add Page",
-    "redo": "Redo",
-    "undo": "Undo",
-    "shape": "Shape",
-    "triangle": "Triangle",
-    "rhombus": "Rhombus",
-    "pentagram": "Pentagram",
-    "speechBalloon": "Speech Balloon",
-    "rectangle": "Rectangle",
-    "ellipse": "Ellipse",
-    "straight": "Straight",
-    "speed": "Speed"
-  }
-}

package/src/i18n/index.ts

@@ -1,22 +0,0 @@
-import i18next from "i18next";
-import en from "./en.json";
-import zhCN from "./zh-CN.json";
-
-export type CreateI18nParams = {
-  language?: string;
-};
-
-export const createI18n = async (params: CreateI18nParams) => {
-  const defaultLang = navigator.language || "zh-CN";
-  const lng = params.language || defaultLang;
-
-  await i18next.init({
-    lng,
-    resources: {
-      en: en,
-      "zh-CN": zhCN,
-    },
-  });
-
-  return i18next;
-};

package/src/i18n/zh-CN.json

@@ -1,32 +0,0 @@
-{
-  "translation": {
-    "clicker": "点击",
-    "selector": "选择",
-    "text": "文字",
-    "pencil": "铅笔",
-    "arrow": "箭头",
-    "hand": "抓手",
-    "eraser": "橡皮",
-    "laser": "激光笔",
-    "zoomIn": "放大",
-    "zoomOut": "缩小",
-    "reset": "重置",
-    "prevPage": "上一页",
-    "nextPage": "下一页",
-    "addPage": "添加页面",
-    "redo": "重做",
-    "undo": "撤销",
-    "collapse": "收起",
-    "expand": "展开",
-    "clean": "清屏",
-    "shape": "形状",
-    "triangle": "三角形",
-    "rhombus": "菱形",
-    "pentagram": "五角星",
-    "speechBalloon": "气球",
-    "rectangle": "矩形",
-    "ellipse": "椭圆",
-    "straight": "直线",
-    "speed": "速度"
-  }
-}

package/src/icons/ChevronLeft.tsx

@@ -1,21 +0,0 @@
-import type { IconProps } from "../types";
-
-import React from "react";
-import { themes } from "../theme";
-
-export function ChevronLeft({ theme = "light", active }: IconProps) {
-  const config = themes[theme];
-  const stroke = active ? config.activeColor : config.color;
-
-  return (
-    <svg viewBox="0 0 24 24">
-      <path
-        fill="none"
-        stroke={stroke}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="m14 16-2-2-2-2 2-2 2-2"
-      />
-    </svg>
-  );
-}

package/src/icons/ChevronRight.tsx

@@ -1,21 +0,0 @@
-import type { IconProps } from "../types";
-
-import React from "react";
-import { themes } from "../theme";
-
-export function ChevronRight({ theme = "light", active }: IconProps) {
-  const config = themes[theme];
-  const stroke = active ? config.activeColor : config.color;
-
-  return (
-    <svg viewBox="0 0 24 24">
-      <path
-        fill="none"
-        stroke={stroke}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="m10 16 2-2 2-2-2-2-2-2"
-      />
-    </svg>
-  );
-}

package/src/icons/FilePlus.tsx

@@ -1,18 +0,0 @@
-import type { IconProps } from "../types";
-
-import React from "react";
-import { themes } from "../theme";
-
-export function FilePlus({ theme = "light", active }: IconProps) {
-  const config = themes[theme];
-  const stroke = active ? config.activeColor : config.color;
-
-  return (
-    <svg viewBox="0 0 24 24">
-      <path
-        fill={stroke}
-        d="M12 7.5a.5.5 0 0 1 .09.992L12 8.5H8a1.5 1.5 0 0 0-1.493 1.356L6.5 10v6a1.5 1.5 0 0 0 1.356 1.493L8 17.5h6a1.5 1.5 0 0 0 1.493-1.356L15.5 16v-4a.5.5 0 0 1 .992-.09l.008.09v4a2.5 2.5 0 0 1-2.336 2.495L14 18.5H8a2.5 2.5 0 0 1-2.495-2.336L5.5 16v-6a2.5 2.5 0 0 1 2.336-2.495L8 7.5h4Zm4-2a.5.5 0 0 1 .492.41L16.5 6v1.5H18a.5.5 0 0 1 .09.992L18 8.5h-1.5V10a.5.5 0 0 1-.992.09L15.5 10V8.5H14a.5.5 0 0 1-.09-.992L14 7.5h1.5V6a.5.5 0 0 1 .5-.5Z"
-      />
-    </svg>
-  );
-}

package/src/icons/Minus.tsx

@@ -1,21 +0,0 @@
-import type { IconProps } from "../types";
-
-import React from "react";
-import { themes } from "../theme";
-
-export function Minus({ theme = "light", active }: IconProps) {
-  const config = themes[theme];
-  const stroke = active ? config.activeColor : config.color;
-
-  return (
-    <svg viewBox="0 0 24 24">
-      <path
-        fill="none"
-        stroke={stroke}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M7 12h10"
-      />
-    </svg>
-  );
-}

package/src/icons/Plus.tsx

@@ -1,21 +0,0 @@
-import type { IconProps } from "../types";
-
-import React from "react";
-import { themes } from "../theme";
-
-export function Plus({ theme = "light", active }: IconProps) {
-  const config = themes[theme];
-  const stroke = active ? config.activeColor : config.color;
-
-  return (
-    <svg viewBox="0 0 24 24">
-      <path
-        fill="none"
-        stroke={stroke}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M12 7v10m-5-5h10"
-      />
-    </svg>
-  );
-}

package/src/icons/Redo.tsx

@@ -1,24 +0,0 @@
-import type { IconProps } from "../types";
-
-import React from "react";
-import { themes } from "../theme";
-
-export function Redo({ theme = "light", active }: IconProps) {
-  const config = themes[theme];
-  const stroke = active ? config.activeColor : config.color;
-
-  return (
-    <svg viewBox="0 0 24 24">
-      <g
-        fill="none"
-        fillRule="evenodd"
-        stroke={stroke}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      >
-        <path d="M14 14h4v-4" />
-        <path d="m18 14-.788-.9A7.005 7.005 0 0 0 6 14h0" />
-      </g>
-    </svg>
-  );
-}

package/src/icons/Reset.tsx

@@ -1,23 +0,0 @@
-import type { IconProps } from "../types";
-
-import React from "react";
-import { themes } from "../theme";
-
-export function Reset({ theme = "light", active }: IconProps) {
-  const config = themes[theme];
-  const stroke = active ? config.activeColor : config.color;
-
-  return (
-    <svg viewBox="0 0 24 24">
-      <g fill="none" fillRule="evenodd" transform="translate(-176 -684)">
-        <path
-          stroke={stroke}
-          strokeLinejoin="round"
-          d="M188 688v4m0 8v4m8-8h-4m-8 0h-4"
-        />
-        <circle cx="188" cy="696" r="6" stroke={stroke} />
-        <circle cx="188" cy="696" r="1" fill={stroke} />
-      </g>
-    </svg>
-  );
-}

package/src/icons/Undo.tsx

@@ -1,24 +0,0 @@
-import type { IconProps } from "../types";
-
-import React from "react";
-import { themes } from "../theme";
-
-export function Undo({ theme = "light", active }: IconProps) {
-  const config = themes[theme];
-  const stroke = active ? config.activeColor : config.color;
-
-  return (
-    <svg viewBox="0 0 24 24">
-      <g
-        fill="none"
-        fillRule="evenodd"
-        stroke={stroke}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      >
-        <path d="M10 14H6v-4" />
-        <path d="m6 14 .788-.9A7.005 7.005 0 0 1 18 14h0" />
-      </g>
-    </svg>
-  );
-}

package/src/icons/index.tsx

@@ -1,11 +0,0 @@
-import React from "react";
-
-export interface IconPropsWithFallback {
-  fallback: React.ReactElement;
-  src?: string;
-  alt?: string;
-}
-
-export function Icon({ fallback, src, alt = "[icon]" }: IconPropsWithFallback) {
-  return src ? <img src={src} alt={alt} title={alt} /> : fallback;
-}