aldehyde 0.2.486 → 0.2.488

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

@@ -1,249 +1,249 @@
-import Konva from 'konva';
-import { GraphAnchor, BaseDraw, Draw, Render, AssetType } from '../types';
-import { Circle, Rect, Line, Bezier, Curve } from '../graphs';
-import { GraphDraw as DrawGraph, LinkDraw, PreviewDraw } from '../draws';
-
-// 矩形、圆、曲线等基础图形绘制
-
-export interface GraphDrawState {
-  adjusting: boolean; // 调整中
-  adjustGroupId: string; // 调整组ID
-  adjustAnchor?: GraphAnchor; // 调整点
-  startPointCurrent: Konva.Vector2d; // 鼠标按下调整点位置
-  graphCurrent?: Konva.Group; // 图形 group
-  graphCurrentSnap?: Konva.Group; // 图形 group 镜像，用于计算位置、大小的偏移
-}
-
-export interface GraphDrawOption { }
-
-export class GraphDraw extends BaseDraw implements Draw {
-
-  option: {}
-  on = {}
-
-  state: GraphDrawState = {
-    adjusting: false,
-    adjustGroupId: '',
-    startPointCurrent: { x: 0, y: 0 }
-  }
-
-  constructor(render: Render, layer: Konva.Layer, option: GraphDrawOption) {
-    super(render, layer);
-    this.option = option;
-    this.group.name(this.constructor.name);
-  }
-
-  /**
-   * 获取鼠标位置，并处理为 相对大小
-   * @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;
-  }
-
-  override draw() {
-    this.clear();
-    // 所有图形
-    const graphs = this.render.layer.find('.asset').filter((o) => o.attrs.assetType === AssetType.Graph) as Konva.Group[];
-    for (const graph of graphs) {
-      // 非选中状态才显示 调整点
-      if (!graph.attrs.selected) {
-        let anchorAndShadows: {
-          anchor: GraphAnchor
-          anchorShadow: Konva.Circle
-          shape?: Konva.Shape | undefined
-        }[] = [];
-
-        switch (graph.attrs.graphType) { // 判断绘制的图形
-          case "Circle":
-            anchorAndShadows = Circle.draw(graph, this.render, this.state.adjustAnchor).anchorAndShadows;
-            break;
-          case "Rect":
-            anchorAndShadows = Rect.draw(graph, this.render, this.state.adjustAnchor).anchorAndShadows;
-            break;
-          case "Line":
-            anchorAndShadows = Line.draw(graph, this.render, this.state.adjustAnchor).anchorAndShadows;
-            break;
-          case "Curve":
-            anchorAndShadows = Curve.draw(graph, this.render, this.state.adjustAnchor).anchorAndShadows;
-            break;
-          case "Bezier":
-            anchorAndShadows = Bezier.draw(graph, this.render, this.state.adjustAnchor).anchorAndShadows;
-            break;
-        }
-
-        for (const anchorAndShadow of anchorAndShadows) {
-          const { shape } = anchorAndShadow;
-          if (shape) {
-            // 鼠标按下
-            shape.on('mousedown', () => {
-              const pos = this.getStagePoint(); // 获取鼠标坐标点
-              if (pos) {
-                this.state.adjusting = true;
-                this.state.adjustAnchor = shape.attrs.anchor;
-                this.state.adjustGroupId = graph.id();
-                this.state.startPointCurrent = pos;
-                this.state.graphCurrent = graph;
-                this.state.graphCurrentSnap = graph.clone();
-                graph.setAttr('adjusting', true);
-                shape.setAttr('adjusting', true);
-                if (this.state.adjustAnchor) {
-                  switch (shape.attrs.anchor?.type) {
-                    case "Line":
-                      // 使用 直线、折线 静态处理方法
-                      Line.adjustStart(this.render, graph, this.state.adjustAnchor, pos);
-                      break;
-                    case "Curve":
-                      // 使用 直线、折线 静态处理方法
-                      Curve.adjustStart(this.render, graph, this.state.adjustAnchor, pos);
-                      break;
-                    case "Bezier":
-                      // 使用 直线、折线 静态处理方法
-                      Bezier.adjustStart(this.render, graph, this.state.adjustAnchor, pos);
-                      break;
-                  }
-                }
-              }
-            })
-
-            // 调整中
-            this.render.stage.on('mousemove', () => {
-              if (this.state.adjusting && this.state.graphCurrent && this.state.graphCurrentSnap) {
-                if (shape.attrs.adjusting) {
-                  // 调整 圆/椭圆 图形
-                  const pos = this.getStagePoint(true);
-                  if (pos) {
-                    switch (shape.attrs.anchor?.type) {
-                      case "Circle":
-                        // 使用 圆/椭圆 静态处理方法
-                        Circle.adjust(
-                          this.render,
-                          graph,
-                          this.state.graphCurrentSnap,
-                          shape,
-                          anchorAndShadows,
-                          this.state.startPointCurrent,
-                          pos,
-                          graph.findOne('.hoverRect')
-                        );
-                        break;
-                      case "Rect":
-                        // 使用 圆/椭圆 静态处理方法
-                        Rect.adjust(
-                          this.render,
-                          graph,
-                          this.state.graphCurrentSnap,
-                          shape,
-                          anchorAndShadows,
-                          this.state.startPointCurrent,
-                          pos,
-                          graph.findOne('.hoverRect')
-                        );
-                        break;
-                      case "Line":
-                        // 使用 直线、折线 静态处理方法
-                        Line.adjust(
-                          this.render,
-                          graph,
-                          this.state.graphCurrentSnap,
-                          shape,
-                          anchorAndShadows,
-                          this.state.startPointCurrent,
-                          pos,
-                          graph.findOne('.hoverRect')
-                        );
-                        break;
-                      case "Curve":
-                        // 使用 直线、折线 静态处理方法
-                        Curve.adjust(
-                          this.render,
-                          graph,
-                          this.state.graphCurrentSnap,
-                          shape,
-                          anchorAndShadows,
-                          this.state.startPointCurrent,
-                          pos,
-                          graph.findOne('.hoverRect')
-                        );
-                        break;
-                      case "Bezier":
-                        // 使用 直线、折线 静态处理方法
-                        Bezier.adjust(
-                          this.render,
-                          graph,
-                          this.state.graphCurrentSnap,
-                          shape,
-                          anchorAndShadows,
-                          this.state.startPointCurrent,
-                          pos,
-                          graph.findOne('.hoverRect')
-                        );
-                        break;
-                    }
-                    // 重绘
-                    this.render.redraw([
-                      DrawGraph.name,
-                      LinkDraw.name,
-                      PreviewDraw.name
-                    ]);
-                  }
-                }
-              }
-            });
-
-            // 调整结束
-            this.render.stage.on('mouseup', () => {
-              graph.setAttr('adjusting', false);
-              // 防止二次 hover 失效
-              graph.setAttr('hover', false);
-              graph.setAttr('hoverAnchor', false);
-              if (this.state.adjusting) {
-                // 更新历史
-                this.render.updateHistory();
-                // 重绘
-                this.render.redraw([
-                  DrawGraph.name,
-                  LinkDraw.name,
-                  PreviewDraw.name
-                ]);
-              }
-              this.state.adjusting = false;
-              this.state.adjustAnchor = undefined;
-              this.state.adjustGroupId = '';
-              // 恢复显示所有 调整点
-              for (const { shape } of anchorAndShadows) {
-                if (shape) {
-                  shape.setAttr('adjusting', false);
-                }
-              }
-              document.body.style.cursor = 'default';
-              // 销毁 镜像
-              this.state.graphCurrentSnap?.destroy();
-              // 对齐线清除
-              this.render.attractTool.alignLinesClear();
-            })
-            this.group.add(shape);
-          }
-        }
-      }
-    }
-  }
-}
+import Konva from 'konva';
+import { GraphAnchor, BaseDraw, Draw, Render, AssetType } from '../types';
+import { Circle, Rect, Line, Bezier, Curve } from '../graphs';
+import { LinkDraw, PreviewDraw } from '../draws';
+
+// 矩形、圆、曲线等基础图形绘制
+
+export interface GraphDrawState {
+  adjusting: boolean; // 调整中
+  adjustGroupId: string; // 调整组ID
+  adjustAnchor?: GraphAnchor; // 调整点
+  startPointCurrent: Konva.Vector2d; // 鼠标按下调整点位置
+  graphCurrent?: Konva.Group; // 图形 group
+  graphCurrentSnap?: Konva.Group; // 图形 group 镜像，用于计算位置、大小的偏移
+}
+
+export interface GraphDrawOption { }
+
+export class GraphDraw extends BaseDraw implements Draw {
+  static readonly NAME = 'GraphDraw';
+  option: {}
+  on = {}
+
+  state: GraphDrawState = {
+    adjusting: false,
+    adjustGroupId: '',
+    startPointCurrent: { x: 0, y: 0 }
+  }
+
+  constructor(render: Render, layer: Konva.Layer, option: GraphDrawOption) {
+    super(render, layer);
+    this.option = option;
+    this.group.name(GraphDraw.NAME);
+  }
+
+  /**
+   * 获取鼠标位置，并处理为 相对大小
+   * @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;
+  }
+
+  override draw() {
+    this.clear();
+    // 所有图形
+    const graphs = this.render.layer.find('.asset').filter((o) => o.attrs.assetType === AssetType.Graph) as Konva.Group[];
+    for (const graph of graphs) {
+      // 非选中状态才显示 调整点
+      if (!graph.attrs.selected) {
+        let anchorAndShadows: {
+          anchor: GraphAnchor
+          anchorShadow: Konva.Circle
+          shape?: Konva.Shape | undefined
+        }[] = [];
+
+        switch (graph.attrs.graphType) { // 判断绘制的图形
+          case "Circle":
+            anchorAndShadows = Circle.draw(graph, this.render, this.state.adjustAnchor).anchorAndShadows;
+            break;
+          case "Rect":
+            anchorAndShadows = Rect.draw(graph, this.render, this.state.adjustAnchor).anchorAndShadows;
+            break;
+          case "Line":
+            anchorAndShadows = Line.draw(graph, this.render, this.state.adjustAnchor).anchorAndShadows;
+            break;
+          case "Curve":
+            anchorAndShadows = Curve.draw(graph, this.render, this.state.adjustAnchor).anchorAndShadows;
+            break;
+          case "Bezier":
+            anchorAndShadows = Bezier.draw(graph, this.render, this.state.adjustAnchor).anchorAndShadows;
+            break;
+        }
+
+        for (const anchorAndShadow of anchorAndShadows) {
+          const { shape } = anchorAndShadow;
+          if (shape) {
+            // 鼠标按下
+            shape.on('mousedown', () => {
+              const pos = this.getStagePoint(); // 获取鼠标坐标点
+              if (pos) {
+                this.state.adjusting = true;
+                this.state.adjustAnchor = shape.attrs.anchor;
+                this.state.adjustGroupId = graph.id();
+                this.state.startPointCurrent = pos;
+                this.state.graphCurrent = graph;
+                this.state.graphCurrentSnap = graph.clone();
+                graph.setAttr('adjusting', true);
+                shape.setAttr('adjusting', true);
+                if (this.state.adjustAnchor) {
+                  switch (shape.attrs.anchor?.type) {
+                    case "Line":
+                      // 使用 直线、折线 静态处理方法
+                      Line.adjustStart(this.render, graph, this.state.adjustAnchor, pos);
+                      break;
+                    case "Curve":
+                      // 使用 直线、折线 静态处理方法
+                      Curve.adjustStart(this.render, graph, this.state.adjustAnchor, pos);
+                      break;
+                    case "Bezier":
+                      // 使用 直线、折线 静态处理方法
+                      Bezier.adjustStart(this.render, graph, this.state.adjustAnchor, pos);
+                      break;
+                  }
+                }
+              }
+            })
+
+            // 调整中
+            this.render.stage.on('mousemove', () => {
+              if (this.state.adjusting && this.state.graphCurrent && this.state.graphCurrentSnap) {
+                if (shape.attrs.adjusting) {
+                  // 调整 圆/椭圆 图形
+                  const pos = this.getStagePoint(true);
+                  if (pos) {
+                    switch (shape.attrs.anchor?.type) {
+                      case "Circle":
+                        // 使用 圆/椭圆 静态处理方法
+                        Circle.adjust(
+                          this.render,
+                          graph,
+                          this.state.graphCurrentSnap,
+                          shape,
+                          anchorAndShadows,
+                          this.state.startPointCurrent,
+                          pos,
+                          graph.findOne('.hoverRect')
+                        );
+                        break;
+                      case "Rect":
+                        // 使用 圆/椭圆 静态处理方法
+                        Rect.adjust(
+                          this.render,
+                          graph,
+                          this.state.graphCurrentSnap,
+                          shape,
+                          anchorAndShadows,
+                          this.state.startPointCurrent,
+                          pos,
+                          graph.findOne('.hoverRect')
+                        );
+                        break;
+                      case "Line":
+                        // 使用 直线、折线 静态处理方法
+                        Line.adjust(
+                          this.render,
+                          graph,
+                          this.state.graphCurrentSnap,
+                          shape,
+                          anchorAndShadows,
+                          this.state.startPointCurrent,
+                          pos,
+                          graph.findOne('.hoverRect')
+                        );
+                        break;
+                      case "Curve":
+                        // 使用 直线、折线 静态处理方法
+                        Curve.adjust(
+                          this.render,
+                          graph,
+                          this.state.graphCurrentSnap,
+                          shape,
+                          anchorAndShadows,
+                          this.state.startPointCurrent,
+                          pos,
+                          graph.findOne('.hoverRect')
+                        );
+                        break;
+                      case "Bezier":
+                        // 使用 直线、折线 静态处理方法
+                        Bezier.adjust(
+                          this.render,
+                          graph,
+                          this.state.graphCurrentSnap,
+                          shape,
+                          anchorAndShadows,
+                          this.state.startPointCurrent,
+                          pos,
+                          graph.findOne('.hoverRect')
+                        );
+                        break;
+                    }
+                    // 重绘
+                    this.render.redraw([
+                      GraphDraw.NAME,
+                      LinkDraw.NAME,
+                      PreviewDraw.NAME
+                    ]);
+                  }
+                }
+              }
+            });
+
+            // 调整结束
+            this.render.stage.on('mouseup', () => {
+              graph.setAttr('adjusting', false);
+              // 防止二次 hover 失效
+              graph.setAttr('hover', false);
+              graph.setAttr('hoverAnchor', false);
+              if (this.state.adjusting) {
+                // 更新历史
+                this.render.updateHistory();
+                // 重绘
+                this.render.redraw([
+                  GraphDraw.NAME,
+                  LinkDraw.NAME,
+                  PreviewDraw.NAME
+                ]);
+              }
+              this.state.adjusting = false;
+              this.state.adjustAnchor = undefined;
+              this.state.adjustGroupId = '';
+              // 恢复显示所有 调整点
+              for (const { shape } of anchorAndShadows) {
+                if (shape) {
+                  shape.setAttr('adjusting', false);
+                }
+              }
+              document.body.style.cursor = 'default';
+              // 销毁 镜像
+              this.state.graphCurrentSnap?.destroy();
+              // 对齐线清除
+              this.render.attractTool.alignLinesClear();
+            })
+            this.group.add(shape);
+          }
+        }
+      }
+    }
+  }
+}