@netless/fastboard-react 0.1.0

package/src/components/hooks.ts

@@ -0,0 +1,59 @@
+import type { FastboardApp, FastboardReadable } from "@netless/fastboard";
+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";
+}
+
+export function useHideControls() {
+  const maximized = useMaximized();
+  const focusedApp = useFocusedApp();
+
+  if (maximized) {
+    if (Object.values(BuiltinApps).some(kind => focusedApp?.includes(kind))) {
+      return "toolbar-only";
+    } else {
+      return true;
+    }
+  }
+
+  return false;
+}

package/src/i18n/en.json

@@ -0,0 +1,31 @@
+{
+  "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

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

@@ -0,0 +1,32 @@
+{
+  "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

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

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

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

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

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

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

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

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

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

package/src/index.ts

@@ -0,0 +1,10 @@
+import "./behaviors/style";
+
+export * from "./typings";
+export * from "./components/hooks";
+export * from "./components/RedoUndo";
+export * from "./components/ZoomControl";
+export * from "./components/PageControl";
+export * from "./components/Toolbar";
+export * from "./components/PlayerControl";
+export * from "./components/Fastboard";

package/src/internal/helpers.ts

@@ -0,0 +1,31 @@
+export function noop() {
+  return;
+}
+
+export function applyStyles(css: string) {
+  const el = document.createElement("style");
+  el.appendChild(document.createTextNode(css));
+  document.head.appendChild(el);
+  return el;
+}
+
+export function clamp(value: number, min: number, max: number) {
+  return value < min ? min : value > max ? max : value;
+}
+
+export function isEqualArray<T>(a: T[], b: T[]) {
+  return a.length === b.length && a.every((e, i) => e === b[i]);
+}
+
+export const defaultHotKeys = {
+  changeToSelector: "s",
+  changeToLaserPointer: "z",
+  changeToPencil: "p",
+  changeToRectangle: "r",
+  changeToEllipse: "c",
+  changeToEraser: "e",
+  changeToText: "t",
+  changeToStraight: "l",
+  changeToArrow: "a",
+  changeToHand: "h",
+};

package/src/internal/hooks.ts

@@ -0,0 +1,23 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+export function useLastValue<T>(value: T) {
+  const ref = useRef<T>(value);
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}
+
+export function useAsyncValue<T>(fn: () => Promise<T>) {
+  const [value, setValue] = useState<T | null>(null);
+  useEffect(() => {
+    fn().then(setValue);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return value;
+}
+
+export function useForceUpdate() {
+  const [, forceUpdate] = useState({});
+  return useCallback(() => forceUpdate({}), []);
+}

package/src/internal/index.ts

@@ -0,0 +1,2 @@
+export * from "./helpers";
+export * from "./hooks";

package/src/style.scss

@@ -0,0 +1,29 @@
+@import "@netless/window-manager/dist/style.css";
+@import "tippy.js/dist/tippy.css";
+@import "tippy.js/themes/light.css";
+@import "rc-slider/assets/index.css";
+@import "./components/Fastboard.scss";
+@import "./components/RedoUndo/RedoUndo.scss";
+@import "./components/PageControl/PageControl.scss";
+@import "./components/ZoomControl/ZoomControl.scss";
+@import "./components/Toolbar/Toolbar.scss";
+@import "./components/PlayerControl/PlayerControl.scss";
+
+.tippy-box.fastboard-tip {
+  color: #eee;
+  background-color: rgba($color: #000000, $alpha: 0.95);
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
+}
+
+.tippy-box.fastboard-tip[data-placement^="right"] > .tippy-arrow::before {
+  top: 4px;
+  border-width: 4px;
+  border-right-color: #000;
+}
+
+.tippy-box.fastboard-tip[data-placement^="top"] > .tippy-arrow::before {
+  left: 4px;
+  border-width: 4px;
+  border-top-color: #000;
+}

package/src/theme.ts

@@ -0,0 +1,36 @@
+import type { IconProps } from "./typings";
+
+export interface ThemeConfig {
+  color: string;
+  activeColor: string;
+  backgroundColor: string;
+  hoverBackgroundColor: string;
+}
+
+export const light: ThemeConfig = {
+  color: "#5D5D5D",
+  activeColor: "#3381FF",
+  backgroundColor: "#fff",
+  hoverBackgroundColor: "rgba(51, 129, 255, 0.1)",
+};
+
+export const dark: ThemeConfig = {
+  ...light,
+  color: "#eee",
+  backgroundColor: "#111",
+};
+
+export const themes = { light, dark };
+
+export const getStroke = (props: IconProps) => {
+  let config;
+  if (props.theme) {
+    config = themes[props.theme];
+  } else {
+    config = themes.light;
+  }
+  return props.active ? config.activeColor : config.color;
+};
+
+export const TopOffset = [0, 11] as [number, number];
+export const RightOffset = [0, 11] as [number, number];

package/src/typings.ts

@@ -0,0 +1,15 @@
+export type Theme = "light" | "dark";
+export type Language = "en" | "zh-CN";
+
+export interface IconProps {
+  theme?: Theme;
+  active?: boolean;
+}
+
+export interface CommonProps {
+  theme?: Theme;
+}
+
+export type GenericIcon<K extends string, E extends string = "disable"> = Partial<
+  Record<`${K}Icon${Capitalize<E | "">}`, string>
+>;