@netless/fastboard-react 0.1.0 → 0.2.2

package/dist/components/Toolbar/components/Slider.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare function Slider(): JSX.Element;

package/dist/components/Toolbar/components/TextButton.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare function TextButton(): JSX.Element;

package/dist/components/Toolbar/components/UpDownButtons.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-export interface UpButtonProps {
-    disabled: boolean;
-    scrollTo: (height: number) => void;
-}
-export declare function UpButton({ disabled, scrollTo }: UpButtonProps): JSX.Element;
-export declare function DownButton({ disabled, scrollTo }: UpButtonProps): JSX.Element;

package/dist/components/Toolbar/const.d.ts

@@ -1,18 +0,0 @@
-/// <reference types="react" />
-import { ApplianceNames, ShapeType } from "white-web-sdk";
-export declare const ShapesMap: {
-    readonly rectangle: import("react").MemoExoticComponent<(props: import("../..").IconProps) => JSX.Element>;
-    readonly ellipse: import("react").MemoExoticComponent<(props: import("../..").IconProps) => JSX.Element>;
-    readonly straight: import("react").MemoExoticComponent<(props: import("../..").IconProps) => JSX.Element>;
-    readonly arrow: import("react").MemoExoticComponent<(props: import("../..").IconProps) => JSX.Element>;
-    readonly pentagram: import("react").MemoExoticComponent<(props: import("../..").IconProps) => JSX.Element>;
-    readonly rhombus: import("react").MemoExoticComponent<(props: import("../..").IconProps) => JSX.Element>;
-    readonly triangle: import("react").MemoExoticComponent<(props: import("../..").IconProps) => JSX.Element>;
-    readonly speechBalloon: import("react").MemoExoticComponent<(props: import("../..").IconProps) => JSX.Element>;
-};
-export declare const ApplianceShapes: readonly [ApplianceNames.rectangle, ApplianceNames.ellipse, ApplianceNames.straight, ApplianceNames.arrow];
-export declare const Shapes: readonly [ShapeType.Pentagram, ShapeType.Rhombus, ShapeType.Triangle, ShapeType.SpeechBalloon];
-export declare const ItemHeight: number;
-export declare const ItemsCount = 8;
-export declare const MaxHeight: number;
-export declare const MinHeight: number;

package/dist/components/Toolbar/hooks.d.ts

@@ -1,12 +0,0 @@
-import type { ApplianceNames, Color, MemberState, ShapeType } from "white-web-sdk";
-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 declare function useRoomState(): any;
-export declare function useToolbar(): ToolbarHook;
-export declare const EmptyToolbarHook: ToolbarHook;

package/dist/components/Toolbar/icons/Apps.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import type { IconProps } from "../../../typings";
-export declare const Apps: (props: IconProps) => JSX.Element;

package/dist/components/Toolbar/icons/Arrow.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import type { IconProps } from "../../../typings";
-export declare const Arrow: (props: IconProps) => JSX.Element;

package/dist/components/Toolbar/icons/Circle.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import type { IconProps } from "../../../typings";
-export declare const Circle: (props: IconProps) => JSX.Element;

package/dist/components/Toolbar/icons/Clean.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import type { IconProps } from "../../../typings";
-export declare const Clean: (props: IconProps) => JSX.Element;

package/dist/components/Toolbar/icons/Clicker.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import type { IconProps } from "../../../typings";
-export declare const Clicker: (props: IconProps) => JSX.Element;

package/dist/components/Toolbar/icons/Collapse.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import type { IconProps } from "../../../typings";
-export declare const Collapse: (props: IconProps) => JSX.Element;

package/dist/components/Toolbar/icons/Diamond.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import type { IconProps } from "../../../typings";
-export declare const Diamond: (props: IconProps) => JSX.Element;

package/dist/components/Toolbar/icons/Down.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import type { IconProps } from "../../../typings";
-export declare const Down: (props: IconProps) => JSX.Element;

package/dist/components/Toolbar/icons/Eraser.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import type { IconProps } from "../../../typings";
-export declare const Eraser: (props: IconProps) => JSX.Element;

package/dist/components/Toolbar/icons/Expand.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import type { IconProps } from "../../../typings";
-export declare const Expand: (props: IconProps) => JSX.Element;

package/dist/components/Toolbar/icons/Line.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import type { IconProps } from "../../../typings";
-export declare const Line: (props: IconProps) => JSX.Element;

package/dist/components/Toolbar/icons/Pencil.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import type { IconProps } from "../../../typings";
-export declare const Pencil: (props: IconProps) => JSX.Element;

package/dist/components/Toolbar/icons/Rectangle.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import type { IconProps } from "../../../typings";
-export declare const Rectangle: (props: IconProps) => JSX.Element;

package/dist/components/Toolbar/icons/Selector.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import type { IconProps } from "../../../typings";
-export declare const Selector: (props: IconProps) => JSX.Element;

package/dist/components/Toolbar/icons/SpeechBalloon.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import type { IconProps } from "../../../typings";
-export declare const SpeechBalloon: (props: IconProps) => JSX.Element;

package/dist/components/Toolbar/icons/Star.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import type { IconProps } from "../../../typings";
-export declare const Star: (props: IconProps) => JSX.Element;

package/dist/components/Toolbar/icons/Text.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import type { IconProps } from "../../../typings";
-export declare const Text: (props: IconProps) => JSX.Element;

package/dist/components/Toolbar/icons/Triangle.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import type { IconProps } from "../../../typings";
-export declare const Triangle: (props: IconProps) => JSX.Element;

package/dist/components/Toolbar/icons/Up.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import type { IconProps } from "../../../typings";
-export declare const Up: (props: IconProps) => JSX.Element;

package/dist/components/Toolbar/icons/index.d.ts

@@ -1,22 +0,0 @@
-/// <reference types="react" />
-export declare const Icons: {
-    Clicker: import("react").MemoExoticComponent<(props: import("../../..").IconProps) => JSX.Element>;
-    Collapse: import("react").MemoExoticComponent<(props: import("../../..").IconProps) => JSX.Element>;
-    Eraser: import("react").MemoExoticComponent<(props: import("../../..").IconProps) => JSX.Element>;
-    Expand: import("react").MemoExoticComponent<(props: import("../../..").IconProps) => JSX.Element>;
-    Pencil: import("react").MemoExoticComponent<(props: import("../../..").IconProps) => JSX.Element>;
-    Selector: import("react").MemoExoticComponent<(props: import("../../..").IconProps) => JSX.Element>;
-    Rectangle: import("react").MemoExoticComponent<(props: import("../../..").IconProps) => JSX.Element>;
-    Text: import("react").MemoExoticComponent<(props: import("../../..").IconProps) => JSX.Element>;
-    Apps: import("react").MemoExoticComponent<(props: import("../../..").IconProps) => JSX.Element>;
-    Clean: import("react").MemoExoticComponent<(props: import("../../..").IconProps) => JSX.Element>;
-    Circle: import("react").MemoExoticComponent<(props: import("../../..").IconProps) => JSX.Element>;
-    Line: import("react").MemoExoticComponent<(props: import("../../..").IconProps) => JSX.Element>;
-    Arrow: import("react").MemoExoticComponent<(props: import("../../..").IconProps) => JSX.Element>;
-    Star: import("react").MemoExoticComponent<(props: import("../../..").IconProps) => JSX.Element>;
-    Diamond: import("react").MemoExoticComponent<(props: import("../../..").IconProps) => JSX.Element>;
-    SpeechBalloon: import("react").MemoExoticComponent<(props: import("../../..").IconProps) => JSX.Element>;
-    Triangle: import("react").MemoExoticComponent<(props: import("../../..").IconProps) => JSX.Element>;
-    Up: import("react").MemoExoticComponent<(props: import("../../..").IconProps) => JSX.Element>;
-    Down: import("react").MemoExoticComponent<(props: import("../../..").IconProps) => JSX.Element>;
-};

package/dist/components/Toolbar/index.d.ts

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

package/dist/components/ZoomControl/ZoomControl.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-import type { CommonProps, GenericIcon } from "../../typings";
-export declare const name = "fastboard-zoom-control";
-export declare type ZoomControlProps = CommonProps & GenericIcon<"reset" | "minus" | "plus">;
-export declare function ZoomControl({ theme, resetIcon, resetIconDisable, minusIcon, minusIconDisable, plusIcon, plusIconDisable, }: ZoomControlProps): JSX.Element;

package/dist/components/ZoomControl/hooks.d.ts

@@ -1,7 +0,0 @@
-export declare const ScalePoints: readonly number[];
-export declare function useZoomControl(): {
-    scale: any;
-    resetCamera: () => void;
-    zoomIn: () => void;
-    zoomOut: () => void;
-};

package/dist/components/ZoomControl/index.d.ts

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

package/dist/components/hooks.d.ts

@@ -1,13 +0,0 @@
-/// <reference types="react" />
-import type { FastboardReadable } from "@netless/fastboard";
-import type { Theme } from "../typings";
-export declare const FastboardAppContext: import("react").Context<any>;
-export declare const ThemeContext: import("react").Context<Theme>;
-export declare function useTheme(userTheme?: Theme | null): Theme;
-export declare function useFastboardApp(): any;
-export declare function useFastboardValue<T>(val: FastboardReadable<T>): any;
-export declare function useWritable(): any;
-export declare function useBoxState(): any;
-export declare function useFocusedApp(): any;
-export declare function useMaximized(): boolean;
-export declare function useHideControls(): boolean | "toolbar-only";

package/dist/i18n/index.d.ts

@@ -1,12 +0,0 @@
-/// <reference types="react" />
-import type { i18n } from "i18next";
-import type { Language } from "../typings";
-export interface CreateI18nParams {
-    language?: Language;
-}
-export declare const createI18n: ({ language, }?: CreateI18nParams) => Promise<i18n>;
-export declare const I18nContext: import("react").Context<i18n | null>;
-export declare function useTranslation(): {
-    t: import("i18next").TFunction | ((id: string) => string);
-    i18n: i18n | null;
-};

package/dist/icons/ChevronLeft.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import type { IconProps } from "../typings";
-export declare function ChevronLeft({ theme, active }: IconProps): JSX.Element;

package/dist/icons/ChevronRight.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import type { IconProps } from "../typings";
-export declare function ChevronRight({ theme, active }: IconProps): JSX.Element;

package/dist/icons/FilePlus.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import type { IconProps } from "../typings";
-export declare function FilePlus({ theme, active }: IconProps): JSX.Element;

package/dist/icons/Minus.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import type { IconProps } from "../typings";
-export declare function Minus({ theme, active }: IconProps): JSX.Element;

package/dist/icons/Plus.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import type { IconProps } from "../typings";
-export declare function Plus({ theme, active }: IconProps): JSX.Element;

package/dist/icons/Redo.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import type { IconProps } from "../typings";
-export declare function Redo({ theme, active }: IconProps): JSX.Element;

package/dist/icons/Reset.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import type { IconProps } from "../typings";
-export declare function Reset({ theme, active }: IconProps): JSX.Element;

package/dist/icons/Undo.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import type { IconProps } from "../typings";
-export declare function Undo({ theme, active }: IconProps): JSX.Element;

package/dist/icons/index.d.ts

@@ -1,7 +0,0 @@
-import React from "react";
-export interface IconPropsWithFallback {
-    fallback: React.ReactElement;
-    src?: string;
-    alt?: string;
-}
-export declare function Icon({ fallback, src, alt }: IconPropsWithFallback): JSX.Element;

package/dist/index.d.ts

@@ -1,9 +0,0 @@
-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/dist/internal/helpers.d.ts

@@ -1,16 +0,0 @@
-export declare function noop(): void;
-export declare function applyStyles(css: string): HTMLStyleElement;
-export declare function clamp(value: number, min: number, max: number): number;
-export declare function isEqualArray<T>(a: T[], b: T[]): boolean;
-export declare const defaultHotKeys: {
-    changeToSelector: string;
-    changeToLaserPointer: string;
-    changeToPencil: string;
-    changeToRectangle: string;
-    changeToEllipse: string;
-    changeToEraser: string;
-    changeToText: string;
-    changeToStraight: string;
-    changeToArrow: string;
-    changeToHand: string;
-};

package/dist/internal/hooks.d.ts

@@ -1,3 +0,0 @@
-export declare function useLastValue<T>(value: T): T;
-export declare function useAsyncValue<T>(fn: () => Promise<T>): T | null;
-export declare function useForceUpdate(): () => void;

package/dist/internal/index.d.ts

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

package/dist/theme.d.ts

@@ -1,16 +0,0 @@
-import type { IconProps } from "./typings";
-export interface ThemeConfig {
-    color: string;
-    activeColor: string;
-    backgroundColor: string;
-    hoverBackgroundColor: string;
-}
-export declare const light: ThemeConfig;
-export declare const dark: ThemeConfig;
-export declare const themes: {
-    light: ThemeConfig;
-    dark: ThemeConfig;
-};
-export declare const getStroke: (props: IconProps) => string;
-export declare const TopOffset: [number, number];
-export declare const RightOffset: [number, number];

package/dist/typings.d.ts

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

package/src/components/Toolbar/components/Mask.tsx

@@ -1,44 +0,0 @@
-import React, { useState, useEffect } from "react";
-import ReactDOM from "react-dom";
-
-interface MaskProps {
-  toolbar: HTMLDivElement | null;
-  children: React.ReactNode;
-}
-
-export const Mask = React.memo(({ toolbar, children }: MaskProps) => {
-  const [rootElement] = useState<HTMLDivElement | null>(() => {
-    const element = document.createElement("div");
-    element.style.position = "absolute";
-    return element;
-  });
-
-  useEffect(() => {
-    if (toolbar && rootElement) {
-      toolbar.appendChild(rootElement);
-    }
-  }, [rootElement, toolbar]);
-
-  useEffect(() => {
-    if (rootElement && toolbar) {
-      toolbar.appendChild(rootElement);
-
-      const toolbarRect = toolbar.getBoundingClientRect();
-      const halfHeight = toolbarRect.height / 2 - 31;
-      rootElement.style.top = halfHeight + "px";
-      rootElement.style.left = "41px";
-      rootElement.style.width = "17px";
-      rootElement.style.height = "62px";
-
-      return () => {
-        toolbar.removeChild(rootElement);
-      };
-    }
-  }, [rootElement, toolbar]);
-
-  if (rootElement) {
-    return ReactDOM.createPortal(children, rootElement);
-  } else {
-    return null;
-  }
-});