@netless/fastboard-react 0.2.13-canary.0 → 0.3.0-canary.2

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

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

@@ -1,13 +0,0 @@
-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/Laser.tsx

@@ -1,21 +0,0 @@
-import type { IconProps } from "../../../typings";
-
-import React from "react";
-import { getStroke } from "../../../theme";
-
-export const Laser = (props: IconProps) => {
-  const stroke = getStroke(props);
-  return (
-    <svg viewBox="0 0 24 24">
-      <g fill="none" fill-rule="evenodd">
-        <circle cx="12" cy="12" r="2" fill={stroke} />
-        <path
-          stroke={stroke}
-          stroke-linecap="square"
-          stroke-linejoin="round"
-          d="M12 4v2m0 12v2m8-8h-2M6 12H4m13.657 5.657-1.414-1.414M7.757 7.757 6.343 6.343m0 11.314 1.414-1.414m8.486-8.486 1.414-1.414"
-        />
-      </g>
-    </svg>
-  );
-};

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

@@ -1,13 +0,0 @@
-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/Loading.tsx

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

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

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

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

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

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

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

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

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

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

@@ -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 { Toolbar, type ToolbarProps } from "./Toolbar";

package/src/components/ZoomControl/ZoomControl.scss

@@ -1,84 +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(5px);
-  -webkit-backdrop-filter: blur(5px);
-
-  &.light {
-    color: #333;
-    background-color: rgba(255, 255, 255, 0.9);
-    border: 1px solid #e5e8f0;
-  }
-
-  &.dark {
-    color: #ddd;
-    background-color: #14181e;
-    border: 1px solid #383b42;
-  }
-}
-
-.#{$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: 100%;
-    height: 100%;
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  &.light:not(:disabled):hover {
-    background-color: #ebf2ff;
-  }
-
-  &.dark:not(:disabled):hover {
-    background-color: #383b42;
-  }
-}
-
-.#{$name}-cut-line {
-  height: 24px;
-  width: 0.5px;
-
-  &.light {
-    background-color: #e7e7e7;
-  }
-
-  &.dark {
-    background-color: rgba(255, 255, 255, 0.15);
-  }
-}
-
-.#{$name}-text {
-  line-height: 24px;
-}
-
-.#{$name}-percent {
-  opacity: 0.6;
-}
-
-.#{$name}-scale,
-.#{$name}-percent {
-  font-size: 14px;
-  font-variant-numeric: tabular-nums;
-}

package/src/components/ZoomControl/ZoomControl.tsx

@@ -1,96 +0,0 @@
-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}-text`, theme)}>
-        <span className={clsx(`${name}-scale`, theme)}>{Math.ceil(scale * 100)}</span>
-        <span className={clsx(`${name}-percent`, theme)}>%</span>
-      </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

@@ -1,50 +0,0 @@
-import { useCallback } from "react";
-
-import { clamp } from "../../internal";
-import { useFastboardApp, useFastboardValue } from "../hooks";
-
-export const ScalePoints: readonly number[] = [
-  0.3, 0.4096000000000002, 0.5120000000000001, 0.6400000000000001, 0.8, 1, 1.26, 1.5876000000000001, 2.000376,
-  2.5204737600000002, 3,
-];
-
-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

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

package/src/components/hooks.ts

@@ -1,66 +0,0 @@
-import type { FastboardApp, FastboardReadable } from "@netless/fastboard-core";
-import type { Theme } from "../typings";
-
-import { BuiltinApps } from "@netless/window-manager";
-import { createContext, useContext, useEffect, useState } from "react";
-
-export const FastboardAppContext = /* @__PURE__ */ createContext<FastboardApp | null>(null);
-
-export const ThemeContext = /* @__PURE__ */ createContext<Theme>("light");
-
-export function useTheme(userTheme?: Theme | null) {
-  const themeFromContext = useContext(ThemeContext);
-  return userTheme || themeFromContext;
-}
-
-export function useFastboardApp() {
-  const app = useContext(FastboardAppContext);
-  if (!app) {
-    throw new Error("useFastboardApp() can only be called inside of <Fastboard>");
-  }
-  return app;
-}
-
-export function useFastboardValue<T>(val: FastboardReadable<T>) {
-  const [value, setValue] = useState(val.value);
-  useEffect(() => val.subscribe(setValue), [val]);
-  return value;
-}
-
-export function useWritable() {
-  return useFastboardValue(useFastboardApp().writable);
-}
-
-export function useBoxState() {
-  return useFastboardValue(useFastboardApp().boxState);
-}
-
-export function useFocusedApp() {
-  return useFastboardValue(useFastboardApp().focusedApp);
-}
-
-export function useMaximized() {
-  return useBoxState() === "maximized";
-}
-
-const AppsShouldShowToolbar = /* @__PURE__ */ (() => [BuiltinApps.DocsViewer, "Slide"])();
-
-export function useHideControls() {
-  const writable = useWritable();
-  const maximized = useMaximized();
-  const focusedApp = useFocusedApp();
-
-  if (!writable) {
-    return true;
-  }
-
-  if (maximized) {
-    if (AppsShouldShowToolbar.some(kind => focusedApp?.includes(kind))) {
-      return "toolbar-only";
-    } else {
-      return true;
-    }
-  }
-
-  return false;
-}

package/src/components/tippy-util.ts

@@ -1,8 +0,0 @@
-import type { Instance } from "tippy.js";
-
-export function hideAll() {
-  Array.from(document.querySelectorAll("[data-tippy-root]")).forEach(e => {
-    const instance = (e as unknown as { _tippy?: Instance })._tippy;
-    if (instance) instance.hide();
-  });
-}

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,29 +0,0 @@
-import type { i18n } from "i18next";
-import type { Language } from "../typings";
-
-import { createContext, useContext, useMemo } from "react";
-import i18next from "i18next";
-import en from "./en.json";
-import zhCN from "./zh-CN.json";
-
-export interface CreateI18nParams {
-  language?: Language;
-}
-
-export const createI18n = async ({
-  language = (navigator.language as Language) || "zh-CN",
-}: CreateI18nParams = {}) => {
-  await i18next.init({
-    lng: language,
-    resources: { en, "zh-CN": zhCN },
-  });
-  return i18next;
-};
-
-export const I18nContext = /* @__PURE__ */ createContext<i18n | null>(null);
-
-export function useTranslation() {
-  const i18n = useContext(I18nContext);
-  const t = useMemo(() => (i18n ? i18n.getFixedT(null, ["translation"]) : (id: string) => id), [i18n]);
-  return { t, i18n };
-}

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": "速度"
-  }
-}