@8btc/whiteboard 0.0.20-alpha.36 → 0.0.20-alpha.38

package/dist/maze.d.ts

@@ -40,6 +40,9 @@ export declare function calculateBottomLeftOfCanvasContent(api: CanvasApi | null
  * 继承自 CanvasCore，只暴露必要的公开方法
  */
 declare class CanvasApi extends CanvasCore {
+    #private;
+    constructor(el: HTMLDivElement, options?: ConstructorParameters<typeof CanvasCore>[1]);
+    dispose(): void;
     /**
      * 获取所有可用的工具类型
      */
@@ -121,6 +124,33 @@ declare class CanvasApi extends CanvasCore {
       * 如果删除的是 image 节点，会同步删除所有关联的 image-marker
       */
      deleteSelectedNodes(): void;
+     /**
+      * 对指定图片节点（或当前选中节点）进入裁剪模式
+      * @param id - 图片节点 ID，不传则使用当前选中节点
+      */
+     startImageCrop(id?: string): void;
+     /**
+      * 确认裁剪并退出裁剪模式（保存结果）
+      * @param id - 图片节点 ID，不传则使用当前选中节点
+      */
+     confirmImageCrop(id?: string): void;
+     /**
+      * 重置指定图片节点（或当前选中节点）的裁剪，还原为完整图片
+      * @param id - 图片节点 ID，不传则使用当前选中节点
+      */
+     resetImageCrop(id?: string): void;
+     /**
+      * 设置裁剪模式下底图的缩放倍数（≥1，以裁剪框中心为锚点）
+      * @param id - 图片节点 ID
+      * @param scale - 缩放倍数
+      */
+     setCropOverlayScale(id: string, scale: number): void;
+     /**
+      * 设置裁剪模式下底图的透明度（0~1）
+      * @param id - 图片节点 ID
+      * @param opacity - 透明度值
+      */
+     setCropOverlayOpacity(id: string, opacity: number): void;
      /**
       * 选中指定节点
       * @param nodeIds - 要选中的节点 ID 数组，不传则取消所有选中
@@ -309,6 +339,7 @@ declare class CanvasApi extends CanvasCore {
         /* Excluded from this release type: _selectNodes */
         /* Excluded from this release type: deleteNodes */
         /* Excluded from this release type: deleteSelectedNodes */
+        /* Excluded from this release type: _getKeyboardEl */
         /**
          * 销毁 canvas
          */
@@ -360,6 +391,26 @@ declare class CanvasApi extends CanvasCore {
         "nodes:sorted": string[];
         "texteditor:register": any;
         "texteditor:unregister": void;
+        /** 进入裁剪模式：携带裁剪框在容器内的初始位置（px） */
+        "crop:start": {
+            nodeId: string;
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+        };
+        /** 退出裁剪模式 */
+        "crop:end": {
+            nodeId: string;
+        };
+        /** 裁剪框位置/尺寸更新（用于同步工具栏位置） */
+        "crop:frameChange": {
+            nodeId: string;
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+        };
     };
 
     declare interface CanvasNode {
@@ -410,9 +461,6 @@ declare class CanvasApi extends CanvasCore {
          * 重置光标样式
          */
         resetCursor(): void;
-        /**
-         * 销毁 Stage
-         */
         destroy(): void;
     }
 
@@ -514,6 +562,20 @@ declare class CanvasApi extends CanvasCore {
         destroy(): void;
     }
 
+    /**
+     * 图片裁剪变换数据
+     * 描述图像位图在裁剪区域内的位置、缩放和旋转
+     */
+    declare type CropTransform = {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        rotation: number;
+        scaleX: number;
+        scaleY: number;
+    };
+
     /**
      * 椭圆节点配置
      */
@@ -605,6 +667,7 @@ declare class CanvasApi extends CanvasCore {
     declare type ImageNodeConfig = BaseNodeConfig & Omit<default_2.ImageConfig, "image"> & Partial<NodeStyle> & {
         $_type: "image";
         $_imageUrl: string;
+        $_cropTransform?: CropTransform | null;
         image?: CanvasImageSource | undefined;
     };
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@8btc/whiteboard",
   "private": false,
-  "version": "0.0.20-alpha.36",
+  "version": "0.0.20-alpha.38",
   "type": "module",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.js",
@@ -57,6 +57,7 @@
     "lucide-react": "^0.562.0",
     "mitt": "^3.0.1",
     "radix-ui": "^1.4.3",
+    "react-colorful": "^5.6.1",
     "react-hotkeys-hook": "^5.2.4",
     "tailwind-merge": "^3.4.0",
     "uuid": "^13.0.0",