@8btc/whiteboard 0.0.17 → 0.0.19-beta.0

package/dist/index.d.ts

@@ -18,7 +18,7 @@ export declare class CanvasApi extends CanvasCore {
      * 手动创建多个节点
      * 如果你不知道自己在干什么，请使用更高层的封装方法，如 createImageNode
      */
-    createNodes(nodes: INode[]): void;
+    createNodes(nodes: INode[], addToHistory: boolean): void;
     /**
      * 根据 ID 获取节点
      */
@@ -100,11 +100,19 @@ export declare class CanvasApi extends CanvasCore {
         scale?: boolean;
         nodeIds?: string[];
     }): void;
+    /**
+     * 导出当前状态
+     */
+    save(): ICoreState;
+    /**
+     * 从状态中恢复画布
+     */
+    restore(state: ICoreState): void;
 }
 
 declare class CanvasCore extends CanvasState_2 {
     #private;
-    constructor(el: HTMLDivElement);
+    constructor(el: HTMLDivElement, state?: ICoreState);
     /**
      * 获取 CanvasStage 实例
      */
@@ -113,10 +121,6 @@ declare class CanvasCore extends CanvasState_2 {
      * 获取 CanvasTransformer 实例
      */
     getCanvasTransformer(): CanvasTransformer;
-    /**
-     * 发射事件（供内部类使用）
-     */
-    emitEvent<StageEvent extends keyof StateEvents>(event: StageEvent, data: StateEvents[StageEvent]): void;
     /**
      * 获取 Konva.Stage 实例
      */
@@ -137,18 +141,22 @@ declare class CanvasCore extends CanvasState_2 {
      * 设置当前工具类型（内部使用）
      */
     setToolType(type: ToolType): void;
+    /**
+     * 根据 ID 获取 Canvas 节点实例
+     */
+    getCanvasNodeById(id: string): ICanvasNode | null;
     /**
      * 设置是否可拖拽（内部使用）
      */
     protected setDraggable(draggable: boolean): void;
-    /* Excluded from this release type: setCursor */
-    /* Excluded from this release type: resetCursor */
+    /* Excluded from this release type: _setCursor */
+    /* Excluded from this release type: _resetCursor */
     /**
      * 获取当前 Stage 缩放比例
      */
     getStageScale(): number;
-    /* Excluded from this release type: updateViewport */
-    protected createNodes(nodes: INode[]): void;
+    /* Excluded from this release type: _updateViewport */
+    protected createNodes(nodes: INode[], addToHistory: boolean): void;
     /**
      * 创建图片标注节点（内部使用）
      */
@@ -164,26 +172,28 @@ declare class CanvasCore extends CanvasState_2 {
         width: number;
         height: number;
     }): void;
-    /* Excluded from this release type: findImageAtPosition */
-    /* Excluded from this release type: createDraftNode */
-    /* Excluded from this release type: updateDraftNode */
-    /* Excluded from this release type: finalizeDraftNode */
-    /* Excluded from this release type: selectNode */
+    /* Excluded from this release type: _findImageAtPosition */
+    /* Excluded from this release type: _setDrawingPosition */
+    /* Excluded from this release type: _updateDrawingPosition */
+    /* Excluded from this release type: _createDraftNode */
+    /* Excluded from this release type: _updateDraftNode */
+    /* Excluded from this release type: _finalizeDraftNode */
+    /* Excluded from this release type: _createSelectRect */
+    _updateSelectRect(): void;
+    /* Excluded from this release type: _finalizeSelectRect */
+    /* Excluded from this release type: _selectNodes */
     /* Excluded from this release type: deleteNodes */
     /* Excluded from this release type: deleteSelectedNodes */
     /**
      * 销毁 canvas
      */
     dispose(): void;
-    /**
-     * 从元素同步节点数据（供节点类内部使用）
-     */
-    _syncNodeFromElement(nodeId: string, updates: Partial<INode>): void;
+    /* Excluded from this release type: _rebuildStateAfterNodeChange */
     /**
      * 实现父类的状态同步方法
      * 当 undo/redo 时被调用
      */
-    protected _syncState(state: ICoreState): void;
+    protected _renderCanvas(state: ICoreState): void;
 }
 
 /**
@@ -227,11 +237,8 @@ declare class CanvasStage {
  * CanvasState 类负责管理画布的状态
  * 包括历史记录（past/present/future）和状态监听
  */
-declare class CanvasState_2 {
-    private _past;
-    private _present;
-    private _future;
-    private _emitter;
+declare abstract class CanvasState_2 {
+    #private;
     constructor(initialState: ICoreState);
     /**
      * 获取当前状态
@@ -257,10 +264,7 @@ declare class CanvasState_2 {
      * 取消订阅状态事件
      */
     off<K extends keyof StateEvents>(event: K, handler: (data: StateEvents[K]) => void): void;
-    /**
-     * 发送事件
-     */
-    protected emit<K extends keyof StateEvents>(event: K, data: StateEvents[K]): void;
+    /* Excluded from this release type: _emit */
     /**
      * 撤销操作
      */
@@ -278,12 +282,12 @@ declare class CanvasState_2 {
      * @param partial - 部分状态更新
      * @param addToHistory - 是否添加到历史记录
      */
-    protected _updateState(partial: Partial<ICoreState>, addToHistory?: boolean): void;
+    protected _updateState(partial: Partial<ICoreState>, addToHistory: boolean): void;
     /**
-     * 同步状态到外部系统（由子类实现）
+     * 同步状态到 canvas 系统（由子类实现）
      * @param _state - 要同步的状态
      */
-    protected _syncState(_state: ICoreState): void;
+    protected abstract _renderCanvas(_state: ICoreState): void;
     /**
      * 清理资源
      */
@@ -327,6 +331,17 @@ declare class CanvasTransformer {
     destroy(): void;
 }
 
+declare interface CommonNodeConfig<T = NodeType> {
+    $_type: T;
+    $_line?: "solid" | "dashed" | "dotted";
+    $_size?: "small" | "medium" | "large" | "extra-large";
+    $_fill?: "none" | "semi" | "solid";
+    $_animated?: boolean;
+    $_arrowStartHead?: "none" | "arrow";
+    $_arrowEndHead?: "none" | "arrow";
+    $_parentId?: string;
+}
+
 declare type HistoryState<T> = {
     past: T[];
     present: T;
@@ -334,8 +349,9 @@ declare type HistoryState<T> = {
 };
 
 export declare interface ICanvasNode {
+    getID(): string;
     getElement(): default_2.Shape | default_2.Group;
-    getNode(): INode;
+    getConfig(): INode;
     updateNode(node: Partial<INode>): void;
     destroy(): void;
 }
@@ -343,34 +359,32 @@ export declare interface ICanvasNode {
 export declare interface ICoreState {
     viewport: IViewport;
     toolType: ToolType;
-    nodes?: INode[];
     selectedNodeIds?: string[];
+    nodes?: INode[];
 }
 
-export declare interface INode<T = NodeType> {
+export declare interface INode<T = NodeType> extends default_2.ShapeConfig, CommonNodeConfig<T> {
     id: string;
-    type: T;
-    text?: string | null;
-    props: {
+    x: number;
+    y: number;
+    $_imageUrl?: string;
+    $_markerNumber?: number;
+    $_bounds?: {
         x: number;
         y: number;
-        width?: number;
-        height?: number;
-        rotation?: number;
-        visible?: boolean;
-        points?: [number, number][];
+        width: number;
+        height: number;
     };
-    style: {
-        color: string;
-        line: "solid" | "dashed" | "dotted";
-        size: "small" | "medium" | "large" | "extra-large";
-        opacity: number;
-        fill?: "none" | "semi" | "solid";
-        animated?: boolean;
-        arrowStartHead?: "none" | "arrow";
-        arrowEndHead?: "none" | "arrow";
+    $_relativeBox?: {
+        start: {
+            ratioX: number;
+            ratioY: number;
+        };
+        end: {
+            ratioX: number;
+            ratioY: number;
+        };
     };
-    meta: Record<string, any>;
 }
 
 declare interface IViewport {
@@ -391,12 +405,6 @@ export declare const NODE_NAMES: {
 
 export declare type NodeType = "rectangle" | "image" | "image-marker";
 
-export declare function PureCanvas({ setApi }: PureCanvasProps): JSX.Element;
-
-declare interface PureCanvasProps {
-    setApi?: (core: CanvasApi) => void;
-}
-
 declare type StageConfig = {
     container: HTMLDivElement;
     width: number;
@@ -417,7 +425,7 @@ declare type StateEvents = {
     "viewport:scale:change": number;
     "transformer:positionChange": TransformerPosition | null;
     "toolType:change": ICoreState["toolType"];
-    "nodes:created": ICoreState["nodes"];
+    "nodes:created": INode[];
     "nodes:deleted": INode[];
     "nodes:selected": string[];
 };
@@ -452,4 +460,10 @@ declare type ViewportState = {
     height?: number;
 };
 
+export declare function Whiteboard({ setApi }: WhiteboardProps): JSX.Element;
+
+declare interface WhiteboardProps {
+    setApi?: (core: CanvasApi) => void;
+}
+
 export { }