@8btc/whiteboard 0.0.18 → 0.0.19-beta.1

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,27 @@ 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);
+    /**
+     * 注册全局主题
+     */
+    static registerTheme(theme: Theme): void;
+    /**
+     * 获取主题，如果没有注册过返回默认主题
+     */
+    getTheme(): Theme;
     /**
      * 获取 CanvasStage 实例
      */
@@ -113,10 +129,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 +149,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 +180,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 +245,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 +272,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 +290,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 +339,17 @@ declare class CanvasTransformer {
     destroy(): void;
 }
 
+declare interface CommonNodeConfig<T = NodeType> extends Partial<NodeStyle> {
+    $_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 +357,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,41 +367,37 @@ 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 {
     x: number;
     y: number;
-    width: number;
-    height: number;
     scale: number;
 }
 
@@ -389,14 +409,13 @@ export declare const NODE_NAMES: {
     imageMarker: string;
 };
 
-export declare type NodeType = "rectangle" | "image" | "image-marker";
-
-export declare function PureCanvas({ setApi }: PureCanvasProps): JSX.Element;
-
-declare interface PureCanvasProps {
-    setApi?: (core: CanvasApi) => void;
+declare interface NodeStyle {
+    $_strokeColor: "theme.stroke-color.1" | "theme.stroke-color.2" | "theme.stroke-color.3";
+    $_fillColor: "theme.fill-color.1" | "theme.fill-color.2" | "theme.fill-color.3";
 }
 
+export declare type NodeType = "rectangle" | "image" | "image-marker";
+
 declare type StageConfig = {
     container: HTMLDivElement;
     width: number;
@@ -417,11 +436,23 @@ 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[];
 };
 
+export declare interface Theme {
+    "theme.select-rect-border": string;
+    "theme.select-rect-fill": string;
+    "theme.image-marker-color": string;
+    "theme.stroke-color.1": string;
+    "theme.stroke-color.2": string;
+    "theme.stroke-color.3": string;
+    "theme.fill-color.1": string;
+    "theme.fill-color.2": string;
+    "theme.fill-color.3": string;
+}
+
 export declare type ToolType = "select" | "hand" | "rectangle" | "image-marker";
 
 declare type TransformerConfig = {
@@ -452,4 +483,10 @@ declare type ViewportState = {
     height?: number;
 };
 
+export declare function Whiteboard({ setApi }: WhiteboardProps): JSX.Element;
+
+declare interface WhiteboardProps {
+    setApi?: (core: CanvasApi) => void;
+}
+
 export { }