@netless/appliance-plugin 1.0.0-beta.0

package/dist/plugin/multi/displayer/mainViewDisplayerManager.d.ts

@@ -0,0 +1,25 @@
+import EventEmitter2 from "eventemitter2";
+import React from "react";
+import { ApplianceMultiManager } from "../applianceMultiManager";
+import { MainViewDisplayerManager } from "../../baseViewContainerManager";
+import { BaseViewDisplayer } from "../../displayerView";
+export declare class MainViewMultiDisplayerManager extends MainViewDisplayerManager {
+    width: number;
+    height: number;
+    dpr: number;
+    vDom?: BaseViewDisplayer;
+    eventTragetElement?: HTMLDivElement;
+    canvasServiceFloatRef: React.RefObject<HTMLCanvasElement>;
+    canvasFloatRef: React.RefObject<HTMLCanvasElement>;
+    canvasBgRef: React.RefObject<HTMLCanvasElement>;
+    floatBarRef: React.RefObject<HTMLDivElement>;
+    floatBarCanvasRef: React.RefObject<HTMLCanvasElement>;
+    containerOffset: {
+        x: number;
+        y: number;
+    };
+    constructor(control: ApplianceMultiManager, internalMsgEmitter: EventEmitter2);
+    setCanvassStyle(): void;
+    destroy(): void;
+    createMainViewDisplayer(mainViewContainer: HTMLDivElement): MainViewDisplayerManager;
+}

package/dist/plugin/single/applianceDisplayer.d.ts

@@ -0,0 +1,16 @@
+import EventEmitter2 from "eventemitter2";
+import React from "react";
+import type { ReactNode } from "react";
+interface DisplayerProps {
+    children?: ReactNode;
+}
+interface DisplayerState {
+}
+export declare class ApplianceSigleWrapper extends React.Component<DisplayerProps, DisplayerState> {
+    static emiter: EventEmitter2;
+    mainViewRef: HTMLDivElement | null;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    render(): ReactNode;
+}
+export {};

package/dist/plugin/single/applianceSingleManager.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="lodash" />
+import { BaseApplianceManager, BaseApplianceManagerProps } from "../baseApplianceManager";
+import type { CameraState } from "../types";
+import { ViewContainerSingleManager } from "./containerManager";
+export declare class ApplianceSingleManager extends BaseApplianceManager {
+    viewContainerManager: ViewContainerSingleManager;
+    divMainView?: HTMLDivElement;
+    constructor(params: BaseApplianceManagerProps);
+    init(): void;
+    activePlugin(): void;
+    activeWorker(): void;
+    onCameraChange: import("lodash").DebouncedFunc<(cameraState: CameraState) => void>;
+}

package/dist/plugin/single/containerManager.d.ts

@@ -0,0 +1,11 @@
+import { ViewContainerManager, ViewInfo } from "../baseViewContainerManager";
+import { ApplianceSingleManager } from "./applianceSingleManager";
+import { BaseSubWorkModuleProps } from "../types";
+export declare class ViewContainerSingleManager extends ViewContainerManager {
+    focuedViewId?: string;
+    control: ApplianceSingleManager;
+    focuedView?: ViewInfo;
+    constructor(props: BaseSubWorkModuleProps);
+    bindMainView(): void;
+    mountView(viewId: string): void;
+}

package/dist/plugin/single/displayer/mainViewDisplayerManager.d.ts

@@ -0,0 +1,25 @@
+import EventEmitter2 from "eventemitter2";
+import React from "react";
+import { MainViewDisplayerManager } from "../../baseViewContainerManager";
+import { ApplianceSingleManager } from "../applianceSingleManager";
+import { BaseViewDisplayer } from "../../displayerView";
+export declare class MainViewSingleDisplayerManager extends MainViewDisplayerManager {
+    width: number;
+    height: number;
+    dpr: number;
+    vDom?: BaseViewDisplayer;
+    viewId: string;
+    eventTragetElement?: HTMLDivElement;
+    canvasServiceFloatRef: React.RefObject<HTMLCanvasElement>;
+    canvasFloatRef: React.RefObject<HTMLCanvasElement>;
+    canvasBgRef: React.RefObject<HTMLCanvasElement>;
+    floatBarRef: React.RefObject<HTMLDivElement>;
+    floatBarCanvasRef: React.RefObject<HTMLCanvasElement>;
+    containerOffset: {
+        x: number;
+        y: number;
+    };
+    constructor(control: ApplianceSingleManager, internalMsgEmitter: EventEmitter2);
+    setCanvassStyle(): void;
+    createMainViewDisplayer(mainView: HTMLDivElement): MainViewDisplayerManager;
+}

package/dist/plugin/types.d.ts

@@ -0,0 +1,310 @@
+import { ISerializableEventData, ISerializableStorageViewData } from "../collector/types";
+import type { Cursor, View, CameraState, DisplayerCallbacks, HotKeys, Player, Room, Point, RoomMember, RoomState, Size, Callbacks, Camera, Color, CursorAdapter, Displayer, ImageInformation, Rectangle, RenderEngine, MemberState as _MemberState } from "white-web-sdk";
+import { ECanvasContextType } from "../core/enum";
+import type EventEmitter2 from "eventemitter2";
+import type { ApplianceSingleManager } from "./single/applianceSingleManager";
+import type { ApplianceMultiManager, WindowManager } from "./multi/applianceMultiManager";
+import type { BaseApplianceManager } from "./baseApplianceManager";
+import type { AppViewDisplayerManager, MainViewDisplayerManager } from "./baseViewContainerManager";
+import type { ApplianceSinglePlugin } from "./applianceSinglePlugin";
+import type { ApplianceMultiPlugin } from "./applianceMultiPlugin";
+export type { Room, ImageInformation, Point, Size, Rectangle, RoomMember, RoomState, Player, HotKeys, Camera, Displayer, DisplayerCallbacks, CameraState, View, Cursor, CursorAdapter, RenderEngine, _MemberState };
+export declare enum ApplianceNames {
+    /**
+     * 选择工具
+     */
+    selector = "selector",
+    /**
+     * 互动工具（无默认行为，可供 plugin 自定义）
+     */
+    clicker = "clicker",
+    /**
+     * 激光笔
+     */
+    laserPointer = "laserPointer",
+    /**
+     * 铅笔工具
+     */
+    pencil = "pencil",
+    /**
+     * 矩形工具
+     */
+    rectangle = "rectangle",
+    /**
+     * 圆形工具
+     */
+    ellipse = "ellipse",
+    /**
+     * 图形工具
+     */
+    shape = "shape",
+    /**
+     * 橡皮工具
+     */
+    eraser = "eraser",
+    /**
+     * 橡皮工具（用来擦除铅笔笔迹的局部）
+     */
+    pencilEraser = "pencilEraser",
+    /**
+     * 文字工具
+     */
+    text = "text",
+    /**
+     * 直线工具
+     */
+    straight = "straight",
+    /**
+     * 箭头工具
+     */
+    arrow = "arrow",
+    /**
+     * 抓手工具
+     */
+    hand = "hand",
+    /**
+     * 激光笔
+     */
+    laserPen = "laserPen"
+}
+/** 扩展的MemberState */
+export type ExtendMemberState = {
+    /**
+     * 当前用户所选择的教具
+     */
+    currentApplianceName: ApplianceNames;
+    /** 是否开启笔锋 */
+    strokeType?: EStrokeType;
+    /** 是否删除整条线段 */
+    isLine?: boolean;
+    /** 线框透明度 */
+    strokeOpacity?: number;
+    /** 是否开启激光笔 */
+    useLaserPen?: boolean;
+    /** 激光笔保持时间, second */
+    duration?: number;
+    /** 是否使用新铅笔教具 */
+    useNewPencil?: boolean;
+    /** 填充样式 */
+    fillColor?: Color;
+    /** 填充透明度 */
+    fillOpacity?: number;
+    /**
+     * 使用 ``shape`` 教具时，绘制图形的具体类型
+     */
+    shapeType?: ShapeType;
+    /** 多边形顶点数 */
+    vertices?: number;
+    /** 多边形向内顶点步长 */
+    innerVerticeStep?: number;
+    /** 多边形向内顶点与外顶点半径比率 */
+    innerRatio?: number;
+    /** 文字透明度 */
+    textOpacity?: number;
+    /** 文字背景颜色  */
+    textBgColor?: Color;
+    /** 文字背景颜色透明度 */
+    textBgOpacity?: number;
+    /** 水平对齐方式 */
+    textAlign?: "left" | "center" | "right";
+    /** 垂直对齐方式 */
+    verticalAlign?: "top" | "middle" | "bottom";
+    /** 位置 */
+    placement?: SpeechBalloonPlacement;
+};
+export type MemberState = Omit<_MemberState, 'currentApplianceName' | 'shapeType'> & ExtendMemberState;
+export type AppliancePluginLike = ApplianceMultiPlugin | ApplianceSinglePlugin;
+export type ApplianceManagerLike = ApplianceMultiManager | ApplianceSingleManager | BaseApplianceManager;
+export type ApplianceViewManagerLike = AppViewDisplayerManager | MainViewDisplayerManager;
+export interface BaseSubWorkModuleProps {
+    control: ApplianceManagerLike;
+    internalMsgEmitter: EventEmitter2;
+}
+export type ApplianceAdaptor = {
+    logger?: Logger;
+    options?: AppliancePluginOptions;
+    cursorAdapter?: CursorAdapter;
+};
+export type canBindMethodType = keyof Omit<AppliancePluginInstance, 'displayer' | 'windowManager' | 'injectMethodToObject' | 'callbacksOn' | 'callbacksOnce' | 'callbacksOff' | '_injectTargetObject'>;
+export interface AppliancePluginInstance {
+    readonly displayer: Displayer;
+    readonly windowManager?: WindowManager;
+    readonly _injectTargetObject: any;
+    /**
+     * 获取某个场景里包含所有元素的矩形
+     */
+    getBoundingRectAsync(scenePath: string): Promise<Rectangle | undefined>;
+    /**
+     * 生成屏幕快照，并写入指定的 CanvasRenderingContext2D 对象中
+     */
+    screenshotToCanvasAsync(context: CanvasRenderingContext2D, scenePath: string, width: number, height: number, camera: Camera, ratio?: number): Promise<void>;
+    /**
+     * 生成场景预览
+     * @param  scenePath 想要获取预览内容的场景的场景路径
+     * @param  div 想要展示预览内容的 div
+     * @param  width 白板的缩放宽度：将当前白板内容，缩小到真实像素宽度。2.3.8 后，该参数为可选参数，如果不填，则默认为展示内容 div 的宽度。
+     * @param  height 白板的缩放高度：将当前白板的内容，缩小到真实像素高度。2.3.8 后，该参数为可选参数，如果不填，则默认为展示内容 div 的高度。
+     */
+    scenePreviewAsync(scenePath: string, div: HTMLElement, width?: number, height?: number, engine?: RenderEngine): Promise<void>;
+    /**
+     * 在当前场景中插入图片
+     * 该操作往往需要和 ``room.completeImageUpload`` 配合使用，具体例子可参考[《插入图片｜教具》](/javascript-zh/home/tools#插入图片)。
+     */
+    insertImage(imageInfo: ImageInformation): void;
+    /**
+     * 改变图片的锁定状态。若图片被锁定，则无法被框选、无法被拖动、无法被改变大小
+     * @param uuid 图片的 UUID
+     */
+    lockImage(uuid: string, locked: boolean): void;
+    /**
+     * 设置图片资源。第一参数 ``uuid`` 是图片的唯一标识符，应该与 ``room.insertImage`` 中传入的 ``uuid`` 字段相同。
+     * 第二参数 ``src`` 是图片资源的 URL。具体例子可参考[《插入图片｜教具》](/javascript-zh/home/tools#插入图片)。
+     */
+    completeImageUpload(uuid: string, src: string): void;
+    /**
+     * 导出特定场景的图片信息，注意这些信息可能与插入时填写的不同。
+     * @param scenePath 需要导出图片信息的场景路径，必须是 ``ScenePathType`` 为 ``page`` 的路径。
+     */
+    getImagesInformation(scenePath: string): ImageInformation[];
+    /** 撤销 */
+    undo(): number;
+    /** 恢复 */
+    redo(): number;
+    /** 清空当前场景 */
+    cleanCurrentScene(retainPpt?: boolean): void;
+    /** 把指定的方法注入到指定对象上 */
+    injectMethodToObject(object: WindowManager | Room | View, methodName: canBindMethodType): void;
+    /** 销毁 */
+    destroy(): void;
+    /** setMemberState */
+    setMemberState(modifyState: Partial<MemberState>): void;
+    /** 事件监听器 */
+    callbacks: Callbacks<any>;
+}
+export type Logger = {
+    readonly info: (...messages: any[]) => void;
+    readonly warn: (...messages: any[]) => void;
+    readonly error: (...messages: any[]) => void;
+};
+export type AppliancePluginOptions = {
+    /** 同步数据配置项 */
+    syncOpt?: SyncOpt;
+    /** 画布配置项 */
+    canvasOpt?: CanvasOpt;
+};
+export interface AppliancePluginAttributes {
+    [key: string]: ISerializableStorageViewData | ISerializableEventData;
+}
+export declare enum DisplayStateEnum {
+    pedding = 0,
+    mounted = 1,
+    update = 2,
+    unmounted = 3
+}
+export declare enum EStrokeType {
+    Normal = "Normal",
+    Stroke = "Stroke",
+    Dotted = "Dotted",
+    LongDotted = "LongDotted"
+}
+export declare enum ShapeType {
+    /**
+     * 三角形
+     */
+    Triangle = "triangle",
+    /**
+     * 菱形
+     */
+    Rhombus = "rhombus",
+    /**
+     * 五角星
+     */
+    Pentagram = "pentagram",
+    /**
+     * 说话泡泡
+     */
+    SpeechBalloon = "speechBalloon",
+    /**
+     * 星形
+     *  */
+    Star = "star",
+    /**
+     * 多边形
+     *  */
+    Polygon = "polygon"
+}
+export type SyncOpt = {
+    /** 同步间隔 */
+    interval?: number;
+};
+export type CanvasOpt = {
+    /** 画布上下文类型 */
+    contextType: ECanvasContextType;
+};
+export declare enum EmitEventType {
+    /** 无 */
+    None = "None",
+    /** 显示悬浮栏 */
+    ShowFloatBar = "ShowFloatBar",
+    /** 设置悬浮栏层级 */
+    ZIndexFloatBar = "ZIndexFloatBar",
+    /** 删除节点 */
+    DeleteNode = "DeleteNode",
+    /** 复制节点 */
+    CopyNode = "CopyNode",
+    /** 激活层级设置 */
+    ZIndexActive = "ZIndexActive",
+    /** 设置节点层级 */
+    ZIndexNode = "ZIndexNode",
+    /** 旋转节点 */
+    RotateNode = "RotateNode",
+    /** 设置节点颜色 */
+    SetColorNode = "SetColorNode",
+    /** 移动节点 */
+    TranslateNode = "TranslateNode",
+    /** 拉伸节点 */
+    ScaleNode = "ScaleNode",
+    /** 原始事件 */
+    OriginalEvent = "OriginalEvent",
+    /** 创建canvas */
+    CreateScene = "CreateScene",
+    /** 激活cursor */
+    ActiveCursor = "ActiveCursor",
+    /** 移动cursor */
+    MoveCursor = "MoveCursor",
+    /** 控制editor */
+    CommandEditor = "CommandEditor",
+    /** 设置editor */
+    SetEditorData = "SetEditorData",
+    /** 设置文字样式 */
+    SetFontStyle = "SetFontStyle",
+    /** 设置坐标 */
+    SetPoint = "SetPoint",
+    /** 设置是否锁定 */
+    SetLock = "SetLock",
+    /** 设置shape模型的配置项 */
+    SetShapeOpt = "SetShapeOpt"
+}
+export declare enum InternalMsgEmitterType {
+    DisplayState = "DisplayState",
+    FloatBar = "FloatBar",
+    CanvasSelector = "CanvasSelector",
+    MainEngine = "MainEngine",
+    DisplayContainer = "DisplayContainer",
+    Cursor = "Cursor",
+    TextEditor = "TextEditor",
+    BindMainView = "BindMainView",
+    MountMainView = "MountMainView",
+    MountAppView = "MountAppView"
+}
+export type InternalEventValue = {
+    id: string;
+    value?: boolean | number[];
+};
+export declare enum ActiveContainerType {
+    MainView = 0,
+    Plugin = 1,
+    Both = 2
+}
+export type SpeechBalloonPlacement = 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
+export type TeleBoxState = "normal" | "minimized" | "maximized";

package/dist/plugin/utils.d.ts

@@ -0,0 +1,6 @@
+export declare function isTouchEvent(event: any): any;
+export declare function isOnlyOneTouch(event: any): any;
+export declare function getPosition(event: any): {
+    x: any;
+    y: any;
+};

package/dist/style.css

@@ -0,0 +1 @@
+.teaching-aids-plugin-main-view-displayer,.teaching-aids-plugin-app-view-displayer{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:2}.bezier-pencil-plugin-floatbtns{position:absolute;left:3px;transform:translateY(-60px);display:flex;flex-direction:row;align-items:center;background:#fff;border:1px solid #EFEFEF;box-shadow:0 6px 12px #0000001f;border-radius:4px;color-scheme:light;pointer-events:auto;z-index:9}.bezier-pencil-plugin-floatbtns .normal-button{width:40px;height:40px}.bezier-pencil-plugin-floatbtns .button{display:flex;justify-content:center;align-items:center;cursor:pointer;border:none}.bezier-pencil-plugin-floatbtns .button:hover,.bezier-pencil-plugin-floatbtns .button.active{background-color:#eef0f6}.bezier-pencil-plugin-floatbtns .shapeOpt-sub-menu,.bezier-pencil-plugin-floatbtns .font-style-menu,.bezier-pencil-plugin-floatbtns .image-layer-menu,.bezier-pencil-plugin-floatbtns .font-colors-menu{box-sizing:border-box;display:flex;flex-wrap:wrap;flex-direction:row;justify-content:flex-start;align-items:center;position:absolute;padding:4px;background:#fff;box-shadow:0 3px 6px #0000001f;border-radius:2px;top:50px}.bezier-pencil-plugin-floatbtns .shapeOpt-sub-menu .normal-button,.bezier-pencil-plugin-floatbtns .font-style-menu .normal-button,.bezier-pencil-plugin-floatbtns .image-layer-menu .normal-button,.bezier-pencil-plugin-floatbtns .font-colors-menu .normal-button{width:32px;height:32px}.bezier-pencil-plugin-floatbtns .font-colors-menu{justify-content:space-between;width:128px}.bezier-pencil-plugin-floatbtns .font-colors-menu .font-color-button{display:flex;justify-content:center;align-items:center;cursor:pointer;margin:4px;width:20px;height:20px;border-radius:50%;border-width:1px;border-style:solid;border-color:#fff;background-image:conic-gradient(rgba(0,0,0,.06) 0 25%,transparent 0 50%,rgba(0,0,0,.06) 0 75%,transparent 0);background-size:6px 6px;box-sizing:border-box}.bezier-pencil-plugin-floatbtns .font-colors-menu .font-color-button.active{border-color:#a7a7a7}.bezier-pencil-plugin-floatbtns .font-colors-menu .font-color-button .circle{box-sizing:border-box;width:16px;height:16px;border-radius:50%;border:1px solid rgba(0,0,0,.12)}.bezier-pencil-plugin-floatbtns .font-colors-menu .font-color-button .none{position:relative;background-color:#fff}.bezier-pencil-plugin-floatbtns .font-colors-menu .font-color-button .none:before{content:"";position:absolute;left:50%;width:1px;height:100%;background-color:#0000001f;transform:rotate(45deg)}.bezier-pencil-plugin-floatbtns .font-colors-icon{flex-direction:column}.bezier-pencil-plugin-floatbtns .font-colors-icon .color-bar{height:2px;width:12px;margin-top:-2px;background-image:conic-gradient(rgba(0,0,0,.06) 0 25%,transparent 0 50%,rgba(0,0,0,.06) 0 75%,transparent 0);background-size:6px 6px}.bezier-pencil-plugin-floatbtns .font-colors-icon .color-bar .color-bar-color{width:100%;height:100%}.bezier-pencil-plugin-floatbtns .font-colors-icon .color-bar-fill,.bezier-pencil-plugin-floatbtns .font-colors-icon .color-bar-ring{height:12px;width:12px;border-radius:6px;border:1px solid rgba(0,0,0,.12);background-image:conic-gradient(rgba(0,0,0,.06) 0 25%,transparent 0 50%,rgba(0,0,0,.06) 0 75%,transparent 0);background-size:6px 6px}.bezier-pencil-plugin-floatbtns .font-colors-icon .color-bar-fill .circle,.bezier-pencil-plugin-floatbtns .font-colors-icon .color-bar-ring .circle{width:100%;height:100%;border-radius:50%}.bezier-pencil-plugin-floatbtns .font-colors-icon .color-bar-ring{border:0}.bezier-pencil-plugin-floatbtns .font-colors-icon .color-bar-ring .circle{transform:translate(35%,30%);width:60%;height:60%;border-radius:50%;background-color:#fff}.bezier-pencil-plugin-floatbtns .font-color-opacity{box-sizing:border-box;width:100px;height:6px;margin:5px 0 10px;border-radius:3px;background-image:conic-gradient(rgba(0,0,0,.06) 0 25%,transparent 0 50%,rgba(0,0,0,.06) 0 75%,transparent 0);background-size:6px 6px;position:relative}.bezier-pencil-plugin-floatbtns .font-color-opacity .range-color{height:6px;box-shadow:inset 0 0 1px #00000040;border-radius:4px;top:0;right:0;bottom:0;left:0}.bezier-pencil-plugin-floatbtns .font-color-opacity .range-opacity{position:absolute;top:0;left:-10px;height:6px;width:120px}.bezier-pencil-plugin-floatbtns .font-color-opacity .circle{position:absolute;top:-3px;border:2px solid #ffffff;border-radius:50%;cursor:pointer;box-shadow:inset 0 0 1px #00000040,0 0 0 1px #0000000f;width:12px;height:12px;box-sizing:border-box}.bezier-pencil-plugin-floatbtns .font-style-menu{justify-content:space-between;width:128px}.bezier-pencil-plugin-floatbtns .font-style-menu .font-style-button{display:flex;justify-content:center;align-items:center;cursor:pointer;margin:4px;width:20px;height:20px;box-sizing:border-box}.bezier-pencil-plugin-floatbtns .font-style-menu .font-style-button.active{border-color:#a7a7a7}.bezier-pencil-plugin-floatbtns .font-size-barBtn .font-size-input{line-height:20px;height:20px;padding:0 2px;margin-left:2px;width:25px;border:1px solid;border-radius:3px}.bezier-pencil-plugin-floatbtns .font-size-barBtn .font-size-input:focus{background:#eef0f6}.bezier-pencil-plugin-floatbtns .font-size-barBtn .font-size-btns{width:15px;margin-left:3px;display:flex;flex-direction:column;justify-content:center}.bezier-pencil-plugin-floatbtns .font-size-barBtn .font-size-btns .font-size-add,.bezier-pencil-plugin-floatbtns .font-size-barBtn .font-size-btns .font-size-cut{position:relative;width:10px;height:10px}.bezier-pencil-plugin-floatbtns .font-size-barBtn .font-size-btns .font-size-add:hover,.bezier-pencil-plugin-floatbtns .font-size-barBtn .font-size-btns .font-size-cut:hover{background:#eef0f6}.bezier-pencil-plugin-floatbtns .font-size-barBtn .font-size-btns .font-size-add:after,.bezier-pencil-plugin-floatbtns .font-size-barBtn .font-size-btns .font-size-cut:after{content:"";position:absolute;top:0;border:4px solid #999;border-left-color:transparent;border-right-color:transparent}.bezier-pencil-plugin-floatbtns .font-size-barBtn .font-size-btns .font-size-add{margin-bottom:3px}.bezier-pencil-plugin-floatbtns .font-size-barBtn .font-size-btns .font-size-add:after{border-top-color:transparent}.bezier-pencil-plugin-floatbtns .font-size-barBtn .font-size-btns .font-size-cut:after{border-bottom-color:transparent}.bezier-pencil-plugin-floatbtns .font-size-barBtn .font-size-menu{position:absolute;top:35px;width:50px;overflow-y:auto;display:flex;flex-direction:column;align-items:center;background:#fff;border:1px solid #EFEFEF;box-shadow:0 6px 12px #0000001f}.bezier-pencil-plugin-floatbtns .font-size-barBtn .font-size-menu .font-size-btn{font-size:12px;line-height:20px;width:100%;text-align:center}.bezier-pencil-plugin-floatbtns .font-size-barBtn .font-size-menu .font-size-btn:hover{background:#eef0f6}.bezier-pencil-plugin-floatbtns .font-size-barBtn:hover{background:#fff}.bezier-pencil-plugin-floatbtns .shapeOpt-sub-menu{flex-direction:column}.bezier-pencil-plugin-floatbtns .shapeOpt-sub-menu .shapeOpt-sub-menu-tabs{display:flex;flex-direction:row;justify-content:flex-start;width:100%}.bezier-pencil-plugin-floatbtns .shapeOpt-sub-menu .shapeOpt-sub-menu-tabs .tab-button{width:32px;height:24px}.bezier-pencil-plugin-floatbtns .shapeOpt-sub-menu .shapeOpt-sub-menu-content{flex:1;background-color:#eef0f6;display:flex;flex-direction:column;align-items:baseline;width:100%}.bezier-pencil-plugin-floatbtns .shapeOpt-sub-menu .shapeOpt-sub-menu-content .input-button{flex:1;height:32px;padding:5px 0;cursor:default;display:flex;flex-direction:row;justify-content:flex-start;width:100%}.bezier-pencil-plugin-floatbtns .shapeOpt-sub-menu .shapeOpt-sub-menu-content .input-button img{width:16px;height:16px;margin:0 5px}.bezier-pencil-plugin-floatbtns .shapeOpt-sub-menu .shapeOpt-sub-menu-content .input-button .input-number{flex:1;padding:0 3px;height:20px;border:1px solid;border-radius:3px;margin-right:5px;max-width:70px;min-width:40px}.bezier-pencil-plugin-floatbtns .shapeOpt-sub-menu .shapeOpt-sub-menu-content .input-button .input-number-btns{width:15px;display:flex;flex-direction:column;justify-content:center}.bezier-pencil-plugin-floatbtns .shapeOpt-sub-menu .shapeOpt-sub-menu-content .input-button .input-number-btns .input-number-add,.bezier-pencil-plugin-floatbtns .shapeOpt-sub-menu .shapeOpt-sub-menu-content .input-button .input-number-btns .input-number-cut{position:relative;width:10px;height:10px;cursor:pointer}.bezier-pencil-plugin-floatbtns .shapeOpt-sub-menu .shapeOpt-sub-menu-content .input-button .input-number-btns .input-number-add:hover,.bezier-pencil-plugin-floatbtns .shapeOpt-sub-menu .shapeOpt-sub-menu-content .input-button .input-number-btns .input-number-cut:hover{background:#eef0f6}.bezier-pencil-plugin-floatbtns .shapeOpt-sub-menu .shapeOpt-sub-menu-content .input-button .input-number-btns .input-number-add:after,.bezier-pencil-plugin-floatbtns .shapeOpt-sub-menu .shapeOpt-sub-menu-content .input-button .input-number-btns .input-number-cut:after{content:"";position:absolute;top:0;border:4px solid #999;border-left-color:transparent;border-right-color:transparent}.bezier-pencil-plugin-floatbtns .shapeOpt-sub-menu .shapeOpt-sub-menu-content .input-button .input-number-btns .input-number-add{margin-bottom:3px}.bezier-pencil-plugin-floatbtns .shapeOpt-sub-menu .shapeOpt-sub-menu-content .input-button .input-number-btns .input-number-add:after{border-top-color:transparent}.bezier-pencil-plugin-floatbtns .shapeOpt-sub-menu .shapeOpt-sub-menu-content .input-button .input-number-btns .input-number-cut:after{border-bottom-color:transparent}.bezier-pencil-plugin-floatbtns .shapeOpt-sub-menu .shapeOpt-sub-menu-content .input-button .range-number-container{flex:1;box-sizing:border-box;width:100px;height:6px;margin:7px 6px 7px 0;border-radius:3px;background-color:#3381ff;position:relative}.bezier-pencil-plugin-floatbtns .shapeOpt-sub-menu .shapeOpt-sub-menu-content .input-button .range-number-container .range-number-color{height:6px;box-shadow:inset 0 0 1px #00000040;border-radius:4px;top:0;right:0;bottom:0;left:0}.bezier-pencil-plugin-floatbtns .shapeOpt-sub-menu .shapeOpt-sub-menu-content .input-button .range-number-container .range-number{position:absolute;top:0;left:-6px;height:6px;width:112px;cursor:pointer}.bezier-pencil-plugin-floatbtns .shapeOpt-sub-menu .shapeOpt-sub-menu-content .input-button .range-number-container .circle{position:absolute;top:-3px;border:2px solid #ffffff;border-radius:50%;cursor:pointer;box-shadow:inset 0 0 1px #00000040,0 0 0 1px #0000000f;width:12px;height:12px;box-sizing:border-box;background-color:#3381ff}.bezier-pencil-plugin-floatbtns .shapeOpt-sub-menu .shapeOpt-sub-menu-content .input-button .select-option-menu{position:absolute;top:60px;left:30px;width:80px;display:flex;flex-direction:column;align-items:center;background:#fff;border:1px solid #EFEFEF;box-shadow:0 6px 12px #0000001f}.bezier-pencil-plugin-floatbtns .shapeOpt-sub-menu .shapeOpt-sub-menu-content .input-button .select-option-menu .select-option-btn{font-size:12px;line-height:20px;width:100%;text-align:center}.bezier-pencil-plugin-floatbtns .shapeOpt-sub-menu .shapeOpt-sub-menu-content .input-button .select-option-menu .select-option-btn:hover{background:#eef0f6}.index-module__Container__nLsM3{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;outline:none;pointer-events:none}.index-module__Container__nLsM3 .index-module__CanvasBox__j2Xe-{position:relative;width:100%;height:100%;pointer-events:none}.index-module__Container__nLsM3 .index-module__CanvasBox__j2Xe- .index-module__FloatCanvas__d1YR7{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.index-module__Container__nLsM3 .index-module__FloatBar__cm-EL{position:absolute;box-sizing:content-box;top:0;width:0;left:0;z-index:-1}.index-module__Container__nLsM3 .index-module__FloatBar__cm-EL .bezier-pencil-plugin-hightlight-box{position:relative;box-sizing:border-box;width:100%;height:100%;border:1px solid;z-index:1;pointer-events:none}.index-module__Container__nLsM3 .index-module__FloatBar__cm-EL .bezier-pencil-plugin-hightlight-box .point{position:absolute;width:7px;height:7px;transform:translate(-50%,-50%);pointer-events:none}.index-module__Container__nLsM3 .index-module__FloatBar__cm-EL .bezier-pencil-plugin-hightlight-box .LT,.index-module__Container__nLsM3 .index-module__FloatBar__cm-EL .bezier-pencil-plugin-hightlight-box .LC,.index-module__Container__nLsM3 .index-module__FloatBar__cm-EL .bezier-pencil-plugin-hightlight-box .LB{left:0}.index-module__Container__nLsM3 .index-module__FloatBar__cm-EL .bezier-pencil-plugin-hightlight-box .LT,.index-module__Container__nLsM3 .index-module__FloatBar__cm-EL .bezier-pencil-plugin-hightlight-box .TC,.index-module__Container__nLsM3 .index-module__FloatBar__cm-EL .bezier-pencil-plugin-hightlight-box .RT{top:0}.index-module__Container__nLsM3 .index-module__FloatBar__cm-EL .bezier-pencil-plugin-hightlight-box .RT,.index-module__Container__nLsM3 .index-module__FloatBar__cm-EL .bezier-pencil-plugin-hightlight-box .RC,.index-module__Container__nLsM3 .index-module__FloatBar__cm-EL .bezier-pencil-plugin-hightlight-box .RB{right:-7px}.index-module__Container__nLsM3 .index-module__FloatBar__cm-EL .bezier-pencil-plugin-hightlight-box .RB,.index-module__Container__nLsM3 .index-module__FloatBar__cm-EL .bezier-pencil-plugin-hightlight-box .BC,.index-module__Container__nLsM3 .index-module__FloatBar__cm-EL .bezier-pencil-plugin-hightlight-box .LB{bottom:-7px}.index-module__Container__nLsM3 .index-module__FloatBar__cm-EL .bezier-pencil-plugin-hightlight-box .RC,.index-module__Container__nLsM3 .index-module__FloatBar__cm-EL .bezier-pencil-plugin-hightlight-box .LC{top:50%}.index-module__Container__nLsM3 .index-module__FloatBar__cm-EL .bezier-pencil-plugin-hightlight-box .TC,.index-module__Container__nLsM3 .index-module__FloatBar__cm-EL .bezier-pencil-plugin-hightlight-box .BC{left:50%}.index-module__Container__nLsM3 .index-module__FloatBar__cm-EL .bezier-pencil-plugin-hightlight-box .lock{pointer-events:none;position:absolute;width:22px;height:22px;top:-11px;left:-11px}.index-module__Container__nLsM3 .index-module__FloatBar__cm-EL .bezier-pencil-plugin-floatCanvas-box{position:absolute;z-index:1;overflow:hidden}.index-module__Container__nLsM3 .index-module__FloatBar__cm-EL .bezier-pencil-plugin-floatCanvas{width:100%;height:100%}.index-module__Container__nLsM3 .index-module__FloatBar__cm-EL .editor-box{position:absolute}.index-module__Container__nLsM3 .index-module__FloatBar__cm-EL .editor{position:relative;padding:5px;pointer-events:auto;font-family:sans-serif;resize:none;z-index:2;border:1px dashed;white-space:pre;display:flex;flex-direction:column;align-items:baseline}.index-module__Container__nLsM3 .index-module__FloatBar__cm-EL .editor:hover{border-style:solid}.index-module__Container__nLsM3 .index-module__FloatBar__cm-EL .editor:focus,.index-module__Container__nLsM3 .index-module__FloatBar__cm-EL .editor:focus-visible{outline:none}.index-module__Container__nLsM3 .index-module__FloatBar__cm-EL .readOnly{border-color:transparent}.index-module__Container__nLsM3 .index-module__RotateBtn__HSSkf{position:absolute;cursor:move;top:0;left:0;width:16px;height:16px;z-index:2;pointer-events:auto}.index-module__Container__nLsM3 .index-module__RotateBtn__HSSkf .bezier-pencil-plugin-rotate-btn{position:absolute;left:0;top:0;width:16px;height:16px;border-radius:8px;display:flex;justify-content:center;align-items:center}.index-module__Container__nLsM3 .index-module__RotateBtn__HSSkf .bezier-pencil-plugin-rotate-btn img{width:12px;height:12px}.index-module__Container__nLsM3 .index-module__RotateBtn__HSSkf .bezier-pencil-plugin-rotate-mouse-pointer{position:relative;width:100%;height:100%;opacity:0}.index-module__Container__nLsM3 .index-module__RotateBtn__HSSkf .bezier-pencil-plugin-rotate-mouse-pointer.active{opacity:1}.index-module__Container__nLsM3 .index-module__RotateBtn__HSSkf .bezier-pencil-plugin-rotate-mouse-pointer img{width:100%;height:100%}.index-module__Container__nLsM3 .index-module__RotateBtn__HSSkf .bezier-pencil-plugin-rotate-mouse-pointer .angle-icon{position:absolute;top:-16px;left:-16px;width:30px;height:16px;text-align:center;background-color:#333;border-radius:4px;font-size:12px;color:#fff}.index-module__Container__nLsM3 .index-module__ResizeBtn__yjvda{position:absolute;box-sizing:content-box;top:0;width:0;left:0;z-index:1}.index-module__Container__nLsM3 .index-module__CursorBox__2UHvI{position:absolute;left:0;top:0;z-index:2}.index-module__Container__nLsM3 .index-module__TextEditorContainer__Qm8KC{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none}.index-module__Container__nLsM3 .index-module__TextEditorContainer__Qm8KC .editor-box{position:absolute}.index-module__Container__nLsM3 .index-module__TextEditorContainer__Qm8KC .editor{position:relative;padding:5px;pointer-events:auto;font-family:sans-serif;resize:none;z-index:2;border:1px dashed;white-space:nowrap;display:flex;flex-direction:column;align-items:baseline}.index-module__Container__nLsM3 .index-module__TextEditorContainer__Qm8KC .editor:hover{border-style:solid}.index-module__Container__nLsM3 .index-module__TextEditorContainer__Qm8KC .editor:focus,.index-module__Container__nLsM3 .index-module__TextEditorContainer__Qm8KC .editor:focus-visible{outline:none}.index-module__Container__nLsM3 .index-module__TextEditorContainer__Qm8KC .readOnly{pointer-events:none;border-color:transparent}.index-module__Container__nLsM3 .index-module__ResizeTowBox__HOllX{position:absolute;top:0;width:0;left:0}.index-module__Container__nLsM3 .index-module__ResizeTowBox__HOllX .bezier-pencil-plugin-point-btn{position:absolute;width:5px;height:5px;border:1px solid;border-radius:3px;transform:translate(-50%,-50%);background-color:#fff;z-index:2}.index-module__Container__nLsM3 .index-module__ResizeTowBox__HOllX .bezier-pencil-plugin-point-draggable-btn{position:absolute;width:8px;height:8px;z-index:3;pointer-events:auto;cursor:move}.index-module__Container__nLsM3 .index-module__ResizeTowBox__HOllX .bezier-pencil-plugin-point-draggable-btn .bezier-pencil-plugin-point-draggable-btn-inner{position:absolute;width:5px;height:5px;border:1px solid;border-radius:3px;transform:translate(-50%,-50%);background-color:#fff;pointer-events:none}.index-module__Container__nLsM3 .index-module__FloatBarBtn__FJrOG{position:absolute;pointer-events:none}.cursor-box{color:#fff;padding:4px;border-radius:2px;width:100%;height:100%}.cursor-pencil-image{width:26px;height:26px}.cursor-selector-image{width:24px;height:24px}.cursor-selector-avatar{border-radius:50%;border-style:solid;border-width:2px;border-color:#fff;margin-bottom:2px}.cursor-inner{border-radius:4px;display:flex;align-items:center;justify-content:center;flex-direction:row;padding-left:4px;padding-right:4px;font-size:12px}.cursor-inner-mellow{height:32px;border-radius:16px;display:flex;align-items:center;justify-content:center;flex-direction:row;padding-left:16px;padding-right:16px}.cursor-tag-name{font-size:12px;margin-left:4px;padding:2px 8px;border-radius:4px}.cursor-mid{display:flex;flex-direction:column;align-items:center;justify-content:center;position:absolute;width:180px;height:64px}.cursor-pencil-offset{margin-left:-20px}.cursor-selector-offset{margin-left:-22px;margin-top:56px}.cursor-text-offset{margin-left:-30px;margin-top:18px}.cursor-shape-offset{display:flex;flex-direction:column;align-items:center;justify-content:center;position:absolute;width:180px;height:64px;margin-left:-30px;margin-top:12px}.cursor-name{width:100%;height:48px;display:flex;align-items:center;justify-content:center}

package/dist/undo/index.d.ts

@@ -0,0 +1,70 @@
+/// <reference types="lodash" />
+import EventEmitter2 from "eventemitter2";
+import { BaseCollectorReducerAction } from "../collector";
+import type { Room } from "../plugin/types";
+import { BaseSubWorkModuleProps, ApplianceManagerLike } from "../plugin/types";
+import { MasterController } from "../core/mainEngine";
+export declare enum EUndoType {
+    sdk = 1,
+    plugin = 2,
+    both = 3
+}
+export declare enum EUndoDataType {
+    Draw = 1,
+    Delete = 2,
+    Update = 3
+}
+export interface IUndoStackItem {
+    type: EUndoType;
+    id?: number;
+    sdkStep?: number;
+    data?: Set<ILocalStorageDataItem>;
+    scenePath: string;
+    tickStartStorerCache?: Map<string, BaseCollectorReducerAction | undefined>;
+}
+export interface ILocalStorageDataItem {
+    dataType: EUndoDataType;
+    key: string;
+    data: BaseCollectorReducerAction | [BaseCollectorReducerAction, BaseCollectorReducerAction];
+}
+export interface UndoRedoMethodProps extends BaseSubWorkModuleProps {
+    viewId: string;
+}
+export declare class UndoRedoMethod {
+    static sdkCallBack: <NAME extends string>(name: NAME, listener: any) => void;
+    static MaxStackLength: number;
+    static waitTime: number;
+    emitter: EventEmitter2;
+    undoStack: IUndoStackItem[];
+    redoStack: IUndoStackItem[];
+    worker: MasterController;
+    control: ApplianceManagerLike;
+    room: Room;
+    private isTicking;
+    private undoTickerId?;
+    private viewId;
+    private scenePath?;
+    private tickStartStorerCache?;
+    private excludeIds;
+    constructor(props: UndoRedoMethodProps);
+    get collector(): import("../collector").Collector | undefined;
+    addExcludeIds(ids: string[]): void;
+    undoTickerStart(id: number, scenePath: string): void;
+    undoTickerEndSync(id: number, viewId: string, scenePath: string, isTmp?: boolean): void;
+    undoTickerEnd: import("lodash").DebouncedFunc<(id: number, viewId: string, scenePath: string) => void>;
+    undo(scenePath: string): number;
+    redo(scenePath: string): number;
+    clear(): void;
+    clearUndo(): void;
+    clearRedo(): void;
+    canUndo(): boolean;
+    canRedo(): boolean;
+    onChangeScene: import("lodash").DebouncedFunc<() => void>;
+    onFocusView(): void;
+    private diffFun;
+    private isDrawEffectiveScene;
+    private isDeleteEffectiveScene;
+    private isOldEffectiveScene;
+    private isNewEffectiveScene;
+    private refreshPlugin;
+}

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@netless/appliance-plugin",
+  "version": "1.0.0-beta.0",
+  "files": ["dist","cdn"],
+  "module": "./dist/appliance-plugin.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/appliance-plugin.mjs",
+      "require": "./dist/appliance-plugin.js"
+    },
+    "./cdn": {
+      "import": "./cdn/appliance-plugin.mjs",
+      "require": "./cdn/appliance-plugin.js"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "types:bundler": "tsc --emitDeclarationOnly",
+    "build:bundler": "vite build --config vite.config.bundler.js && yarn types:bundler",
+    "types:cdn": "tsc --noEmit",
+    "build:cdn": "vite build --config vite.config.cdn.js && yarn types:cdn",
+    "build": "cross-env NODE_ENV=production tsc && yarn build:bundler && yarn build:cdn",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@netless/window-manager": "0.4.73-beta.0",
+    "@types/lodash": "^4.14.202",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "cross-env": "^7.0.3",
+    "less": "^4.2.0",
+    "spritejs": "^3.8.3",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.0",
+    "white-web-sdk": "^2.16.51"
+  },
+  "peerDependencies": {
+    "@netless/app-slide": ">=0.2",
+    "@netless/window-manager": ">=0.4",
+    "white-web-sdk": ">= 2.16"
+  },
+  "dependencies": {
+    "eventemitter2": "^6.4.9",
+    "lineclip": "^1.1.5",
+    "lodash": "^4.17.21",
+    "lz-string": "^1.5.0",
+    "re-resizable": "^6.9.11",
+    "react": ">=17",
+    "react-dom": ">=17",
+    "react-draggable": "^4.4.6"
+  },
+  "description": "",
+  "directories": {
+    "example": "example"
+  },
+  "author": "hqer",
+  "license": "ISC"
+}