aldehyde 0.2.472 → 0.2.474

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

@@ -0,0 +1,251 @@
+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 {
+  // @ts-ignore
+  static override readonly name = 'Graph';
+
+  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);
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,7 @@
+export { BgDraw } from './bg-draw';
+export { RulerDraw } from './ruler-draw';
+export { RefLineDraw } from './ref-line-draw';
+export { ContextmenuDraw } from './contextmenu-draw';
+export { PreviewDraw } from './preview-draw';
+export { LinkDraw } from './link-draw';
+export { GraphDraw } from './graph-draw';