aldehyde 0.2.503 → 0.2.504

package/src/aldehyde/draw-canvas-edit/components/render/handlers/text-handlers.ts

@@ -1,81 +1,81 @@
-import Konva from 'konva';
-import { Render } from '../index';
-import { Handler } from '../types';
-
-// 文本创建操作
-
-export class TextHandlers implements Handler {
-  static readonly NAME = 'TextHandlers';
-  private render: Render;
-  constructor(render: Render) {
-    this.render = render;
-  }
-  // 获取鼠标位置，并处理为相对大小
-  getStagePoint(attract = false) {
-    const pos = this.render.stage.getPointerPosition();
-    if (pos) {
-      const stageState = this.render.getStageState();
-      if (attract) {
-        const { pos: transformerPos } = this.render.attractTool.attractPoint(pos);
-        return {
-          x: this.render.toStageValue(transformerPos.x - stageState.x),
-          y: this.render.toStageValue(transformerPos.y - stageState.y)
-        };
-      } else {
-        return {
-          x: this.render.toStageValue(pos.x - stageState.x),
-          y: this.render.toStageValue(pos.y - stageState.y)
-        };
-      }
-    }
-    return null;
-  }
-  group: Konva.Group | null = null;
-  handlers = {
-    stage: {
-      mousedown: (e: Konva.KonvaEventObject<MouseEvent>) => {
-        // 只有在 texting 模式且点击空白区域时才创建文本
-        if (!this.render.texting) return;
-        const target = e.target;
-        // 检查是否点击在 stage 背景上（不是其他元素）
-        const isBackground = target === this.render.stage ||
-          (target.attrs && target.attrs.name && target.attrs.name.includes('background'));
-        if (!isBackground) return;
-        try {
-          // 清除当前选择
-          this.render.selectionTool.selectingClear();
-          this.render.linkTool.selectingClear();
-          const point = this.getStagePoint();
-          if (point) {
-            this.group = this.render.importExportTool.addTextAsset(point);
-            if (this.group) {
-              // 创建成功后立即选中文本
-              this.render.selectionTool.select([this.group]);
-            }
-          }
-        } catch (err) {
-          console.error('Failed to create text asset:', err);
-          this.group = null;
-        }
-      },
-      mouseup: () => {  // 重置 texting 状态
-        this.render.changeTexting(false);
-        this.group = null;
-      },
-      click: (e: Konva.KonvaEventObject<MouseEvent>) => { // 点击空白区域时，如果有文本创建了一半，也取消
-        if (!this.render.texting) return;
-        const target = e.target;
-        const isBackground = target === this.render.stage ||
-          (target.attrs && target.attrs.name && target.attrs.name.includes('background'));
-        if (isBackground) {
-          this.render.changeTexting(false);
-        }
-      }
-    },
-    transformer: {
-      dblclick: () => {
-        // 双击文本时显示编辑面板
-      }
-    }
-  }
-}
+import Konva from 'konva';
+import { Render } from '../index';
+import { Handler } from '../types';
+
+// 文本创建操作
+
+export class TextHandlers implements Handler {
+  static readonly NAME = 'TextHandlers';
+  private render: Render;
+  constructor(render: Render) {
+    this.render = render;
+  }
+  // 获取鼠标位置，并处理为相对大小
+  getStagePoint(attract = false) {
+    const pos = this.render.stage.getPointerPosition();
+    if (pos) {
+      const stageState = this.render.getStageState();
+      if (attract) {
+        const { pos: transformerPos } = this.render.attractTool.attractPoint(pos);
+        return {
+          x: this.render.toStageValue(transformerPos.x - stageState.x),
+          y: this.render.toStageValue(transformerPos.y - stageState.y)
+        };
+      } else {
+        return {
+          x: this.render.toStageValue(pos.x - stageState.x),
+          y: this.render.toStageValue(pos.y - stageState.y)
+        };
+      }
+    }
+    return null;
+  }
+  group: Konva.Group | null = null;
+  handlers = {
+    stage: {
+      mousedown: (e: Konva.KonvaEventObject<MouseEvent>) => {
+        // 只有在 texting 模式且点击空白区域时才创建文本
+        if (!this.render.texting) return;
+        const target = e.target;
+        // 检查是否点击在 stage 背景上（不是其他元素）
+        const isBackground = target === this.render.stage ||
+          (target.attrs && target.attrs.name && target.attrs.name.includes('background'));
+        if (!isBackground) return;
+        try {
+          // 清除当前选择
+          this.render.selectionTool.selectingClear();
+          this.render.linkTool.selectingClear();
+          const point = this.getStagePoint();
+          if (point) {
+            this.group = this.render.importExportTool.addTextAsset(point);
+            if (this.group) {
+              // 创建成功后立即选中文本
+              this.render.selectionTool.select([this.group]);
+            }
+          }
+        } catch (err) {
+          console.error('Failed to create text asset:', err);
+          this.group = null;
+        }
+      },
+      mouseup: () => {  // 重置 texting 状态
+        this.render.changeTexting(false);
+        this.group = null;
+      },
+      click: (e: Konva.KonvaEventObject<MouseEvent>) => { // 点击空白区域时，如果有文本创建了一半，也取消
+        if (!this.render.texting) return;
+        const target = e.target;
+        const isBackground = target === this.render.stage ||
+          (target.attrs && target.attrs.name && target.attrs.name.includes('background'));
+        if (isBackground) {
+          this.render.changeTexting(false);
+        }
+      }
+    },
+    transformer: {
+      dblclick: () => {
+        // 双击文本时显示编辑面板
+      }
+    }
+  }
+}

package/src/aldehyde/draw-canvas-edit/components/render/handlers/zoom-handlers.ts

@@ -1,59 +1,59 @@
-import Konva from 'konva';
-import { Render } from '../index';
-import { Handler } from '../types';
-import { GraphDraw, LinkDraw, RulerDraw, PreviewDraw, RefLineDraw, BgDraw } from '../draws';
-
-// 缩放
-
-export class ZoomHandlers implements Handler {
-  static readonly NAME = 'ZoomHandlers';
-  private render: Render;
-  constructor(render: Render) {
-    this.render = render;
-  }
-  scaleBy = 0.1; // zoom 速度
-  // zoom 范围
-  scaleMin = 0.2;
-  scaleMax = 5;
-
-  handlers = {
-    stage: {
-      wheel: (e: Konva.KonvaEventObject<GlobalEventHandlersEventMap['wheel']>) => {
-        const { scale: oldScale } = this.render.getStageState();
-        const isPinchToZoom = e.evt.ctrlKey;
-        const newScale = isPinchToZoom ? oldScale + (e.evt.deltaY < 0 ? this.scaleBy : -this.scaleBy) : oldScale;
-        const finalScale = Math.max(this.scaleMin, Math.min(this.scaleMax, newScale));
-        if (finalScale !== oldScale) {
-          const position = this.render.stage.getPosition();
-          const point = { x: e.evt.offsetX, y: e.evt.offsetY };
-          const mousePointTo = {
-            x: (point.x - position.x) / oldScale,
-            y: (point.y - position.y) / oldScale
-          };
-          const newPosition = {
-            x: -(mousePointTo.x * finalScale - point.x),
-            y: -(mousePointTo.y * finalScale - point.y)
-          };
-          this.render.emit('scale-change', finalScale);
-          this.render.stage.scale({ x: finalScale, y: finalScale });
-          this.render.stage.position(newPosition);
-        } else if (!isPinchToZoom) {
-          const position = this.render.stage.getPosition();
-          this.render.stage.position({
-            x: position.x - e.evt.deltaX,
-            y: position.y - e.evt.deltaY
-          });
-        }
-        // 重绘
-        this.render.redraw([
-          BgDraw.NAME,
-          GraphDraw.NAME,
-          LinkDraw.NAME,
-          RulerDraw.NAME,
-          RefLineDraw.NAME,
-          PreviewDraw.NAME
-        ]);
-      }
-    }
-  }
-}
+import Konva from 'konva';
+import { Render } from '../index';
+import { Handler } from '../types';
+import { GraphDraw, LinkDraw, RulerDraw, PreviewDraw, RefLineDraw, BgDraw } from '../draws';
+
+// 缩放
+
+export class ZoomHandlers implements Handler {
+  static readonly NAME = 'ZoomHandlers';
+  private render: Render;
+  constructor(render: Render) {
+    this.render = render;
+  }
+  scaleBy = 0.1; // zoom 速度
+  // zoom 范围
+  scaleMin = 0.2;
+  scaleMax = 5;
+
+  handlers = {
+    stage: {
+      wheel: (e: Konva.KonvaEventObject<GlobalEventHandlersEventMap['wheel']>) => {
+        const { scale: oldScale } = this.render.getStageState();
+        const isPinchToZoom = e.evt.ctrlKey;
+        const newScale = isPinchToZoom ? oldScale + (e.evt.deltaY < 0 ? this.scaleBy : -this.scaleBy) : oldScale;
+        const finalScale = Math.max(this.scaleMin, Math.min(this.scaleMax, newScale));
+        if (finalScale !== oldScale) {
+          const position = this.render.stage.getPosition();
+          const point = { x: e.evt.offsetX, y: e.evt.offsetY };
+          const mousePointTo = {
+            x: (point.x - position.x) / oldScale,
+            y: (point.y - position.y) / oldScale
+          };
+          const newPosition = {
+            x: -(mousePointTo.x * finalScale - point.x),
+            y: -(mousePointTo.y * finalScale - point.y)
+          };
+          this.render.emit('scale-change', finalScale);
+          this.render.stage.scale({ x: finalScale, y: finalScale });
+          this.render.stage.position(newPosition);
+        } else if (!isPinchToZoom) {
+          const position = this.render.stage.getPosition();
+          this.render.stage.position({
+            x: position.x - e.evt.deltaX,
+            y: position.y - e.evt.deltaY
+          });
+        }
+        // 重绘
+        this.render.redraw([
+          BgDraw.NAME,
+          GraphDraw.NAME,
+          LinkDraw.NAME,
+          RulerDraw.NAME,
+          RefLineDraw.NAME,
+          PreviewDraw.NAME
+        ]);
+      }
+    }
+  }
+}

package/src/aldehyde/draw-canvas-edit/components/render/tools/align-tool.ts

@@ -1,89 +1,89 @@
-import Konva from 'konva';
-import { Render } from '../index';
-import { AlignType } from '../types';
-import { GraphDraw, LinkDraw, RulerDraw, PreviewDraw } from '../draws';
-
-// 工具栏对齐
-
-export class AlignTool {
-  private render: Render;
-  constructor(render: Render) {
-    this.render = render;
-  }
-
-  getAlignRect(node: Konva.Node | Konva.Transformer) {
-    const stageState = this.render.getStageState();
-    let width = 0, height = 0, x = 0, y = 0;
-    const result = node.getClientRect();
-    // 转为 逻辑觉尺寸
-    [width, height, x, y] = [
-      this.render.toStageValue(result.width),
-      this.render.toStageValue(result.height),
-      this.render.toStageValue(result.x - stageState.x),
-      this.render.toStageValue(result.y - stageState.y)
-    ];
-    return { width, height, x, y };
-  }
-
-  // 对齐参考点
-  getAlignPoints(node?: Konva.Node | Konva.Transformer): { [index: string]: number } {
-    let width = 0, height = 0, x = 0, y = 0;
-    if (node !== void 0) {
-      // 选择器 / 基于节点 逻辑觉尺寸
-      const rect = this.getAlignRect(node);
-      [width, height, x, y] = [rect.width, rect.height, rect.x, rect.y];
-    } else {   // 默认为选择器
-      return this.getAlignPoints(this.render.transformer);
-    }
-    return {
-      Middle: x + width / 2,
-      Left: x,
-      Right: x + width,
-      Center: y + height / 2,
-      Top: y,
-      Bottom: y + height
-    };
-  }
-
-  align(type: AlignType, target?: Konva.Node) {
-    // 对齐参考点（所有）
-    const points = this.getAlignPoints(target);
-    // 对齐参考点
-    const point = points[type];
-    // 需要移动的节点
-    const nodes = this.render.transformer.nodes().filter((node) => node !== target);
-    // 移动逻辑
-    for (const node of nodes) {
-      // 逻辑觉尺寸
-      const rect = this.getAlignRect(node);
-      const [width, height, x, y] = [rect.width, rect.height, rect.x, rect.y];
-      switch (type) {
-        case "Middle":
-        case "Left":
-        case "Right":
-          {
-            const cx = type === "Middle" ? x + width / 2 : type === "Left" ? x : x + width;
-            node.x(node.x() + (point - cx));
-          }
-          break;
-        case "Center":
-        case "Top":
-        case "Bottom":
-          {
-            const cy = type === "Center" ? y + height / 2 : type === "Top" ? y : y + height;
-            node.y(node.y() + (point - cy));
-          }
-          break;
-      }
-    }
-    // 更新历史
-    this.render.updateHistory();
-    // 重绘
-    this.render.redraw([
-      GraphDraw.NAME,
-      LinkDraw.NAME,
-      RulerDraw.NAME,
-      PreviewDraw.NAME
-    ]);
-  }
-}
+import Konva from 'konva';
+import { Render } from '../index';
+import { AlignType } from '../types';
+import { GraphDraw, LinkDraw, RulerDraw, PreviewDraw } from '../draws';
+
+// 工具栏对齐
+
+export class AlignTool {
+  private render: Render;
+  constructor(render: Render) {
+    this.render = render;
+  }
+
+  getAlignRect(node: Konva.Node | Konva.Transformer) {
+    const stageState = this.render.getStageState();
+    let width = 0, height = 0, x = 0, y = 0;
+    const result = node.getClientRect();
+    // 转为 逻辑觉尺寸
+    [width, height, x, y] = [
+      this.render.toStageValue(result.width),
+      this.render.toStageValue(result.height),
+      this.render.toStageValue(result.x - stageState.x),
+      this.render.toStageValue(result.y - stageState.y)
+    ];
+    return { width, height, x, y };
+  }
+
+  // 对齐参考点
+  getAlignPoints(node?: Konva.Node | Konva.Transformer): { [index: string]: number } {
+    let width = 0, height = 0, x = 0, y = 0;
+    if (node !== void 0) {
+      // 选择器 / 基于节点 逻辑觉尺寸
+      const rect = this.getAlignRect(node);
+      [width, height, x, y] = [rect.width, rect.height, rect.x, rect.y];
+    } else {   // 默认为选择器
+      return this.getAlignPoints(this.render.transformer);
+    }
+    return {
+      Middle: x + width / 2,
+      Left: x,
+      Right: x + width,
+      Center: y + height / 2,
+      Top: y,
+      Bottom: y + height
+    };
+  }
+
+  align(type: AlignType, target?: Konva.Node) {
+    // 对齐参考点（所有）
+    const points = this.getAlignPoints(target);
+    // 对齐参考点
+    const point = points[type];
+    // 需要移动的节点
+    const nodes = this.render.transformer.nodes().filter((node) => node !== target);
+    // 移动逻辑
+    for (const node of nodes) {
+      // 逻辑觉尺寸
+      const rect = this.getAlignRect(node);
+      const [width, height, x, y] = [rect.width, rect.height, rect.x, rect.y];
+      switch (type) {
+        case "Middle":
+        case "Left":
+        case "Right":
+          {
+            const cx = type === "Middle" ? x + width / 2 : type === "Left" ? x : x + width;
+            node.x(node.x() + (point - cx));
+          }
+          break;
+        case "Center":
+        case "Top":
+        case "Bottom":
+          {
+            const cy = type === "Center" ? y + height / 2 : type === "Top" ? y : y + height;
+            node.y(node.y() + (point - cy));
+          }
+          break;
+      }
+    }
+    // 更新历史
+    this.render.updateHistory();
+    // 重绘
+    this.render.redraw([
+      GraphDraw.NAME,
+      LinkDraw.NAME,
+      RulerDraw.NAME,
+      PreviewDraw.NAME
+    ]);
+  }
+}