aldehyde 0.2.512 → 0.2.513

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

@@ -1,68 +1,68 @@
-import Konva from 'konva';
-import { Render } from '../index';
-import { Handler, MouseButton } from '../types';
-import { LinkDraw, BgDraw, GraphDraw, RulerDraw, PreviewDraw } from '../draws';
-
-export class DragHandlers implements Handler {
-  static readonly NAME = 'DragHandlers';
-  private render: Render;
-  constructor(render: Render) {
-    this.render = render;
-  }
-  // 右键是否按下
-  mousedownRight = false;
-  // 右键按下 stage 位置
-  mousedownStagePos = { x: 0, y: 0 };
-  // 右键按下位置
-  mousedownPointerPos = { x: 0, y: 0 };
-  handlers = {
-    stage: {
-      mousedown: (e: Konva.KonvaEventObject<GlobalEventHandlersEventMap['mousedown']>) => {
-        // 拐点操作中，防止异常拖动
-        // 新建图形并拖动中
-        if (!(this.render.draws[LinkDraw.NAME] as LinkDraw)?.state.linkManualing && !this.render.graphType) {
-          if (e.evt.button === MouseButton["右键"] || (e.evt.ctrlKey && e.evt.button === MouseButton["左键"])) // mac 拖动画布快捷键
-          {
-            const stageState = this.render.getStageState();
-            // 鼠标右键
-            this.mousedownRight = true;
-            // 暂停元素 draggable
-            this.render.changeDraggable(false);
-            this.mousedownStagePos = { x: stageState.x, y: stageState.y };
-            const pos = this.render.stage.getPointerPosition();
-            if (pos) {
-              this.mousedownPointerPos = { x: pos.x, y: pos.y };
-            }
-            document.body.style.cursor = 'pointer';
-          }
-        }
-      },
-      mouseup: () => {
-        this.mousedownRight = false;
-        // 恢复元素 draggable
-        this.render.changeDraggable(!this.render.config.readonly);
-        document.body.style.cursor = 'default';
-      },
-      mousemove: () => {
-        if (this.mousedownRight) {
-          // 鼠标右键拖动
-          const pos = this.render.stage.getPointerPosition();
-          if (pos) {
-            const offsetX = pos.x - this.mousedownPointerPos.x;
-            const offsetY = pos.y - this.mousedownPointerPos.y;
-            // 移动 stage
-            this.render.stage.position({ x: this.mousedownStagePos.x + offsetX, y: this.mousedownStagePos.y + offsetY });
-            // 重绘
-            this.render.redraw([
-              BgDraw.NAME,
-              GraphDraw.NAME,
-              LinkDraw.NAME,
-              RulerDraw.NAME,
-              PreviewDraw.NAME
-            ]);
-          }
-        }
-      }
-    }
-  }
-}
+import Konva from 'konva';
+import { Render } from '../index';
+import { Handler, MouseButton } from '../types';
+import { LinkDraw, BgDraw, GraphDraw, RulerDraw, PreviewDraw } from '../draws';
+
+export class DragHandlers implements Handler {
+  static readonly NAME = 'DragHandlers';
+  private render: Render;
+  constructor(render: Render) {
+    this.render = render;
+  }
+  // 右键是否按下
+  mousedownRight = false;
+  // 右键按下 stage 位置
+  mousedownStagePos = { x: 0, y: 0 };
+  // 右键按下位置
+  mousedownPointerPos = { x: 0, y: 0 };
+  handlers = {
+    stage: {
+      mousedown: (e: Konva.KonvaEventObject<GlobalEventHandlersEventMap['mousedown']>) => {
+        // 拐点操作中，防止异常拖动
+        // 新建图形并拖动中
+        if (!(this.render.draws[LinkDraw.NAME] as LinkDraw)?.state.linkManualing && !this.render.graphType) {
+          if (e.evt.button === MouseButton["右键"] || (e.evt.ctrlKey && e.evt.button === MouseButton["左键"])) // mac 拖动画布快捷键
+          {
+            const stageState = this.render.getStageState();
+            // 鼠标右键
+            this.mousedownRight = true;
+            // 暂停元素 draggable
+            this.render.changeDraggable(false);
+            this.mousedownStagePos = { x: stageState.x, y: stageState.y };
+            const pos = this.render.stage.getPointerPosition();
+            if (pos) {
+              this.mousedownPointerPos = { x: pos.x, y: pos.y };
+            }
+            document.body.style.cursor = 'pointer';
+          }
+        }
+      },
+      mouseup: () => {
+        this.mousedownRight = false;
+        // 恢复元素 draggable
+        this.render.changeDraggable(!this.render.config.readonly);
+        document.body.style.cursor = 'default';
+      },
+      mousemove: () => {
+        if (this.mousedownRight) {
+          // 鼠标右键拖动
+          const pos = this.render.stage.getPointerPosition();
+          if (pos) {
+            const offsetX = pos.x - this.mousedownPointerPos.x;
+            const offsetY = pos.y - this.mousedownPointerPos.y;
+            // 移动 stage
+            this.render.stage.position({ x: this.mousedownStagePos.x + offsetX, y: this.mousedownStagePos.y + offsetY });
+            // 重绘
+            this.render.redraw([
+              BgDraw.NAME,
+              GraphDraw.NAME,
+              LinkDraw.NAME,
+              RulerDraw.NAME,
+              PreviewDraw.NAME
+            ]);
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -1,113 +1,113 @@
-import Konva from 'konva';
-import { Render } from '../index';
-import { Handler } from '../types';
-import { BaseGraph, Circle, Rect, Line, Bezier, Curve } from '../graphs';
-import { GraphDraw } from '../draws';
-
-export class GraphHandlers implements Handler {
-  static readonly NAME = 'GraphHandlers';
-  private render: Render;
-  constructor(render: Render) {
-    this.render = render;
-  }
-  graphing = false; // 新建图形中
-  currentGraph: BaseGraph | undefined; // 当前新建图形类型
-
-  /**
-   * 获取鼠标位置，并处理为 相对大小
-   * @param attract 含磁贴计算
-   * @returns
-   */
-  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;
-  }
-
-  handlers = {
-    stage: {
-      mousedown: (e: Konva.KonvaEventObject<GlobalEventHandlersEventMap['mousedown']>) => {
-        if (this.render.graphType) {
-          // 选中图形类型，开始
-          if (e.target === this.render.stage) {
-            this.graphing = true;
-            this.render.selectionTool.selectingClear();
-            this.render.linkTool.selectingClear();
-            const point = this.getStagePoint();
-            if (point) {
-              switch (this.render.graphType) {
-                case "Circle": // 新建 圆/椭圆 实例
-                  this.currentGraph = new Circle(this.render, point);
-                  break;
-                case "Rect": // 新建 矩形 实例
-                  this.currentGraph = new Rect(this.render, point);
-                  break;
-                case "Line":  // 新建 直线、折线
-                  this.currentGraph = new Line(this.render, point);
-                  break;
-                case "Curve": // 新建 曲线
-                  this.currentGraph = new Curve(this.render, point);
-                  break;
-                case "Bezier": // 新建 贝赛尔曲线      
-                  this.currentGraph = new Bezier(this.render, point);
-                  break;
-                default:
-                  break;
-              }
-
-              // 初始化设置信息
-              if (this.currentGraph) {
-                const temSetting = this.render.getAssetSettings(this.currentGraph.group);
-                this.render.setAssetSettings(
-                  this.currentGraph.group,
-                  {
-                    ...temSetting,
-                    stroke: temSetting.stroke || "#000000",
-                    strokeWidth: temSetting.strokeWidth || 1,
-                    fill: temSetting.fill || (["Circle", "Rect"].includes(this.render.graphType) ? "transparent" : "#000000"),
-                  },
-                  false
-                );
-              }
-            }
-          }
-        }
-      },
-      mousemove: () => {
-        if (this.graphing) {
-          if (this.currentGraph) {
-            const pos = this.getStagePoint(true);
-            if (pos) { // 新建并马上调整图形
-              this.currentGraph.drawMove(pos);
-            }
-          }
-        }
-      },
-      mouseup: () => {
-        if (this.graphing) {
-          if (this.currentGraph) {
-            this.currentGraph.drawEnd();  // 调整结束
-          }
-          this.graphing = false; // 调整结束
-          this.render.changeGraphType(); // 清空图形类型选择
-          this.render.attractTool.alignLinesClear(); // 对齐线清除
-          this.render.redraw([GraphDraw.NAME]);
-        }
-      }
-    }
-  }
-}
+import Konva from 'konva';
+import { Render } from '../index';
+import { Handler } from '../types';
+import { BaseGraph, Circle, Rect, Line, Bezier, Curve } from '../graphs';
+import { GraphDraw } from '../draws';
+
+export class GraphHandlers implements Handler {
+  static readonly NAME = 'GraphHandlers';
+  private render: Render;
+  constructor(render: Render) {
+    this.render = render;
+  }
+  graphing = false; // 新建图形中
+  currentGraph: BaseGraph | undefined; // 当前新建图形类型
+
+  /**
+   * 获取鼠标位置，并处理为 相对大小
+   * @param attract 含磁贴计算
+   * @returns
+   */
+  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;
+  }
+
+  handlers = {
+    stage: {
+      mousedown: (e: Konva.KonvaEventObject<GlobalEventHandlersEventMap['mousedown']>) => {
+        if (this.render.graphType) {
+          // 选中图形类型，开始
+          if (e.target === this.render.stage) {
+            this.graphing = true;
+            this.render.selectionTool.selectingClear();
+            this.render.linkTool.selectingClear();
+            const point = this.getStagePoint();
+            if (point) {
+              switch (this.render.graphType) {
+                case "Circle": // 新建 圆/椭圆 实例
+                  this.currentGraph = new Circle(this.render, point);
+                  break;
+                case "Rect": // 新建 矩形 实例
+                  this.currentGraph = new Rect(this.render, point);
+                  break;
+                case "Line":  // 新建 直线、折线
+                  this.currentGraph = new Line(this.render, point);
+                  break;
+                case "Curve": // 新建 曲线
+                  this.currentGraph = new Curve(this.render, point);
+                  break;
+                case "Bezier": // 新建 贝赛尔曲线      
+                  this.currentGraph = new Bezier(this.render, point);
+                  break;
+                default:
+                  break;
+              }
+
+              // 初始化设置信息
+              if (this.currentGraph) {
+                const temSetting = this.render.getAssetSettings(this.currentGraph.group);
+                this.render.setAssetSettings(
+                  this.currentGraph.group,
+                  {
+                    ...temSetting,
+                    stroke: temSetting.stroke || "#000000",
+                    strokeWidth: temSetting.strokeWidth || 1,
+                    fill: temSetting.fill || (["Circle", "Rect"].includes(this.render.graphType) ? "transparent" : "#000000"),
+                  },
+                  false
+                );
+              }
+            }
+          }
+        }
+      },
+      mousemove: () => {
+        if (this.graphing) {
+          if (this.currentGraph) {
+            const pos = this.getStagePoint(true);
+            if (pos) { // 新建并马上调整图形
+              this.currentGraph.drawMove(pos);
+            }
+          }
+        }
+      },
+      mouseup: () => {
+        if (this.graphing) {
+          if (this.currentGraph) {
+            this.currentGraph.drawEnd();  // 调整结束
+          }
+          this.graphing = false; // 调整结束
+          this.render.changeGraphType(); // 清空图形类型选择
+          this.render.attractTool.alignLinesClear(); // 对齐线清除
+          this.render.redraw([GraphDraw.NAME]);
+        }
+      }
+    }
+  }
+}

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

@@ -1,9 +1,9 @@
-export { DragHandlers } from './drag-handlers';
-export { ZoomHandlers } from './zoom-handlers';
-export { DragOutsideHandlers } from './drag-outside-handlers';
-export { SelectionHandlers } from './selection-handlers';
-export { KeyMoveHandlers } from './key-move-handlers';
-export { ShutcutHandlers } from './shutcut-handlers';
-export { LinkHandlers } from './link-handlers';
-export { GraphHandlers } from './graph-handlers';
-export { TextHandlers } from './text-handlers';
+export { DragHandlers } from './drag-handlers';
+export { ZoomHandlers } from './zoom-handlers';
+export { DragOutsideHandlers } from './drag-outside-handlers';
+export { SelectionHandlers } from './selection-handlers';
+export { KeyMoveHandlers } from './key-move-handlers';
+export { ShutcutHandlers } from './shutcut-handlers';
+export { LinkHandlers } from './link-handlers';
+export { GraphHandlers } from './graph-handlers';
+export { TextHandlers } from './text-handlers';

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

@@ -1,49 +1,49 @@
-import * as _ from 'lodash';
-import { Render } from '../index';
-import { Handler, MoveKey } from '../types';
-import { GraphDraw, LinkDraw, RulerDraw, PreviewDraw } from '../draws';
-
-// 键盘控制组件移动
-export class KeyMoveHandlers implements Handler {
-  static readonly NAME = 'KeyMoveHandlers';
-  private render: Render;
-  constructor(render: Render) {
-    this.render = render;
-  }
-  speed = 1;
-  speedMax = 20;
-  change = _.debounce(() => this.render.updateHistory(), 200); // 更新历史
-  handlers = {
-    dom: {
-      keydown: (e: GlobalEventHandlersEventMap['keydown']) => {
-        if (!e.ctrlKey) {
-          if (Object.values(MoveKey).map((o) => o.toString()).includes(e.code)) {
-            if (e.code === MoveKey["上"]) {
-              this.render.selectionTool.selectingNodesMove({ x: 0, y: -this.speed });
-            } else if (e.code === MoveKey["左"]) {
-              this.render.selectionTool.selectingNodesMove({ x: -this.speed, y: 0 });
-            } else if (e.code === MoveKey["右"]) {
-              this.render.selectionTool.selectingNodesMove({ x: this.speed, y: 0 });
-            } else if (e.code === MoveKey["下"]) {
-              this.render.selectionTool.selectingNodesMove({ x: 0, y: this.speed });
-            }
-            if (this.speed < this.speedMax) {
-              this.speed++;
-            }
-            this.change();
-            // 重绘
-            this.render.redraw([
-              GraphDraw.NAME,
-              LinkDraw.NAME,
-              RulerDraw.NAME,
-              PreviewDraw.NAME
-            ]);
-          }
-        }
-      },
-      keyup: () => {
-        this.speed = 1;
-      }
-    }
-  }
-}
+import * as _ from 'lodash';
+import { Render } from '../index';
+import { Handler, MoveKey } from '../types';
+import { GraphDraw, LinkDraw, RulerDraw, PreviewDraw } from '../draws';
+
+// 键盘控制组件移动
+export class KeyMoveHandlers implements Handler {
+  static readonly NAME = 'KeyMoveHandlers';
+  private render: Render;
+  constructor(render: Render) {
+    this.render = render;
+  }
+  speed = 1;
+  speedMax = 20;
+  change = _.debounce(() => this.render.updateHistory(), 200); // 更新历史
+  handlers = {
+    dom: {
+      keydown: (e: GlobalEventHandlersEventMap['keydown']) => {
+        if (!e.ctrlKey) {
+          if (Object.values(MoveKey).map((o) => o.toString()).includes(e.code)) {
+            if (e.code === MoveKey["上"]) {
+              this.render.selectionTool.selectingNodesMove({ x: 0, y: -this.speed });
+            } else if (e.code === MoveKey["左"]) {
+              this.render.selectionTool.selectingNodesMove({ x: -this.speed, y: 0 });
+            } else if (e.code === MoveKey["右"]) {
+              this.render.selectionTool.selectingNodesMove({ x: this.speed, y: 0 });
+            } else if (e.code === MoveKey["下"]) {
+              this.render.selectionTool.selectingNodesMove({ x: 0, y: this.speed });
+            }
+            if (this.speed < this.speedMax) {
+              this.speed++;
+            }
+            this.change();
+            // 重绘
+            this.render.redraw([
+              GraphDraw.NAME,
+              LinkDraw.NAME,
+              RulerDraw.NAME,
+              PreviewDraw.NAME
+            ]);
+          }
+        }
+      },
+      keyup: () => {
+        this.speed = 1;
+      }
+    }
+  }
+}

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

@@ -1,45 +1,45 @@
-import { Render } from '../index';
-import { Handler } from '../types';
-import { LinkDraw } from '../draws';
-
-// 临时连接线
-
-export class LinkHandlers implements Handler {
-  static readonly NAME = 'LinkHandlers';
-  private render: Render;
-  constructor(render: Render) {
-    this.render = render;
-  }
-  handlers = {
-    stage: {
-      mouseup: () => {
-        const linkDrawState = (this.render.draws[LinkDraw.NAME] as LinkDraw)?.state;
-        if (linkDrawState) {         // 临时 连接线 移除
-          linkDrawState.linkingLine?.line.destroy();
-          linkDrawState.linkingLine = null;
-        }
-      },
-      mousemove: () => {
-        const linkDrawState = (this.render.draws[LinkDraw.NAME] as LinkDraw)?.state;
-        if (linkDrawState) {
-          const pos = this.render.stage.getPointerPosition();
-          if (pos) {
-            const stageState = this.render.getStageState();
-            if (linkDrawState.linkingLine) {  // 临时 连接线 画
-              const { circle, line } = linkDrawState.linkingLine;
-              line.points(
-                [
-                  [circle.x(), circle.y()],
-                  [
-                    this.render.toStageValue(pos.x - stageState.x),
-                    this.render.toStageValue(pos.y - stageState.y)
-                  ]
-                ].flat()
-              );
-            }
-          }
-        }
-      }
-    }
-  }
-}
+import { Render } from '../index';
+import { Handler } from '../types';
+import { LinkDraw } from '../draws';
+
+// 临时连接线
+
+export class LinkHandlers implements Handler {
+  static readonly NAME = 'LinkHandlers';
+  private render: Render;
+  constructor(render: Render) {
+    this.render = render;
+  }
+  handlers = {
+    stage: {
+      mouseup: () => {
+        const linkDrawState = (this.render.draws[LinkDraw.NAME] as LinkDraw)?.state;
+        if (linkDrawState) {         // 临时 连接线 移除
+          linkDrawState.linkingLine?.line.destroy();
+          linkDrawState.linkingLine = null;
+        }
+      },
+      mousemove: () => {
+        const linkDrawState = (this.render.draws[LinkDraw.NAME] as LinkDraw)?.state;
+        if (linkDrawState) {
+          const pos = this.render.stage.getPointerPosition();
+          if (pos) {
+            const stageState = this.render.getStageState();
+            if (linkDrawState.linkingLine) {  // 临时 连接线 画
+              const { circle, line } = linkDrawState.linkingLine;
+              line.points(
+                [
+                  [circle.x(), circle.y()],
+                  [
+                    this.render.toStageValue(pos.x - stageState.x),
+                    this.render.toStageValue(pos.y - stageState.y)
+                  ]
+                ].flat()
+              );
+            }
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -1,45 +1,45 @@
-import { Render } from '../index';
-import { Handler, ShutcutKey } from '../types';
-
-export class ShutcutHandlers implements Handler {
-  static readonly NAME = 'ShutcutHandlers';
-  private render: Render;
-  constructor(render: Render) {
-    this.render = render;
-  }
-  handlers = {
-    dom: {
-      keydown: (e: GlobalEventHandlersEventMap['keydown']) => {
-        if (!this.render.config.readonly) {
-          if (e.ctrlKey || e.metaKey) {
-            if (e.code === ShutcutKey.C) {
-              this.render.copyTool.pasteStart();
-            } else if (e.code === ShutcutKey.V) {
-              this.render.copyTool.pasteEnd();
-            } else if (e.code === ShutcutKey.Z) {
-              if (e.shiftKey) {
-                this.render.nextHistory();
-              } else {
-                this.render.prevHistory();
-              }
-            } else if (e.code === ShutcutKey.A) {
-              this.render.selectionTool.selectAll();
-            }
-          } else if (e.code === ShutcutKey["删除"] || e.code === ShutcutKey.Backspace) {
-            this.render.remove(this.render.selectionTool.selectingNodes);
-            // 删除 连接线
-            this.render.linkTool.remove();
-          } else if (e.code === ShutcutKey.Esc) {
-            this.render.selectionTool.selectingClear();
-            this.render.linkTool.selectingClear();
-          }
-        }
-        if (e.code === ShutcutKey.R) {
-          if (e.ctrlKey || e.metaKey) {
-            window.location.reload();
-          }
-        }
-      }
-    }
-  }
-}
+import { Render } from '../index';
+import { Handler, ShutcutKey } from '../types';
+
+export class ShutcutHandlers implements Handler {
+  static readonly NAME = 'ShutcutHandlers';
+  private render: Render;
+  constructor(render: Render) {
+    this.render = render;
+  }
+  handlers = {
+    dom: {
+      keydown: (e: GlobalEventHandlersEventMap['keydown']) => {
+        if (!this.render.config.readonly) {
+          if (e.ctrlKey || e.metaKey) {
+            if (e.code === ShutcutKey.C) {
+              this.render.copyTool.pasteStart();
+            } else if (e.code === ShutcutKey.V) {
+              this.render.copyTool.pasteEnd();
+            } else if (e.code === ShutcutKey.Z) {
+              if (e.shiftKey) {
+                this.render.nextHistory();
+              } else {
+                this.render.prevHistory();
+              }
+            } else if (e.code === ShutcutKey.A) {
+              this.render.selectionTool.selectAll();
+            }
+          } else if (e.code === ShutcutKey["删除"] || e.code === ShutcutKey.Backspace) {
+            this.render.remove(this.render.selectionTool.selectingNodes);
+            // 删除 连接线
+            this.render.linkTool.remove();
+          } else if (e.code === ShutcutKey.Esc) {
+            this.render.selectionTool.selectingClear();
+            this.render.linkTool.selectingClear();
+          }
+        }
+        if (e.code === ShutcutKey.R) {
+          if (e.ctrlKey || e.metaKey) {
+            window.location.reload();
+          }
+        }
+      }
+    }
+  }
+}