aldehyde 0.2.486 → 0.2.488

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

@@ -1,70 +1,71 @@
-import Konva from 'konva';
-import { BaseDraw, Draw, Handler, Render } from '../types';
-
-// 参考线
-
-export interface RefLineDrawOption {
-  padding: number
-}
-
-export class RefLineDraw extends BaseDraw implements Draw, Handler {
-  option: RefLineDrawOption;
-
-  constructor(render: Render, layer: Konva.Layer, option: RefLineDrawOption) {
-    super(render, layer);
-    this.option = option;
-    this.group.listening(false);
-  }
-
-  override draw() {
-    this.clear();
-    const stageState = this.render.getStageState();
-    const group = new Konva.Group();
-    const pos = this.render.stage.getPointerPosition();
-    if (pos) {
-      if (pos.y >= this.option.padding) {
-        // 横
-        group.add(
-          new Konva.Line({
-            name: this.constructor.name,
-            points: [
-              [this.render.toStageValue(-stageState.x), this.render.toStageValue(pos.y - stageState.y)],
-              [this.render.toStageValue(stageState.width - stageState.x + this.render.rulerSize), this.render.toStageValue(pos.y - stageState.y)]
-            ].flat(),
-            stroke: 'rgba(255,0,0,0.2)',
-            strokeWidth: this.render.toStageValue(1),
-            listening: false
-          })
-        );
-      }
-      if (pos.x >= this.option.padding) {
-        // 竖
-        group.add(
-          new Konva.Line({
-            name: this.constructor.name,
-            points: [
-              [this.render.toStageValue(pos.x - stageState.x), this.render.toStageValue(-stageState.y)],
-              [this.render.toStageValue(pos.x - stageState.x), this.render.toStageValue(stageState.height - stageState.y + this.render.rulerSize)]
-            ].flat(),
-            stroke: 'rgba(255,0,0,0.2)',
-            strokeWidth: this.render.toStageValue(1),
-            listening: false
-          })
-        );
-      }
-    }
-    this.group.add(group);
-  }
-  handlers = {
-    dom: {
-      mousemove: () => {
-        // 更新参考线
-        this.draw();
-      },
-      mouseout: () => {
-        // 清除参考线
-        this.clear();
-      }
-    }
-  }
-}
+import Konva from 'konva';
+import { BaseDraw, Draw, Handler, Render } from '../types';
+
+// 参考线
+
+export interface RefLineDrawOption {
+  padding: number
+}
+
+export class RefLineDraw extends BaseDraw implements Draw, Handler {
+  static readonly NAME = 'RefLineDraw';
+  option: RefLineDrawOption;
+
+  constructor(render: Render, layer: Konva.Layer, option: RefLineDrawOption) {
+    super(render, layer);
+    this.option = option;
+    this.group.listening(false);
+  }
+
+  override draw() {
+    this.clear();
+    const stageState = this.render.getStageState();
+    const group = new Konva.Group();
+    const pos = this.render.stage.getPointerPosition();
+    if (pos) {
+      if (pos.y >= this.option.padding) {
+        // 横
+        group.add(
+          new Konva.Line({
+            name: RefLineDraw.NAME,
+            points: [
+              [this.render.toStageValue(-stageState.x), this.render.toStageValue(pos.y - stageState.y)],
+              [this.render.toStageValue(stageState.width - stageState.x + this.render.rulerSize), this.render.toStageValue(pos.y - stageState.y)]
+            ].flat(),
+            stroke: 'rgba(255,0,0,0.2)',
+            strokeWidth: this.render.toStageValue(1),
+            listening: false
+          })
+        );
+      }
+      if (pos.x >= this.option.padding) {
+        // 竖
+        group.add(
+          new Konva.Line({
+            name: RefLineDraw.NAME,
+            points: [
+              [this.render.toStageValue(pos.x - stageState.x), this.render.toStageValue(-stageState.y)],
+              [this.render.toStageValue(pos.x - stageState.x), this.render.toStageValue(stageState.height - stageState.y + this.render.rulerSize)]
+            ].flat(),
+            stroke: 'rgba(255,0,0,0.2)',
+            strokeWidth: this.render.toStageValue(1),
+            listening: false
+          })
+        );
+      }
+    }
+    this.group.add(group);
+  }
+  handlers = {
+    dom: {
+      mousemove: () => {
+        // 更新参考线
+        this.draw();
+      },
+      mouseout: () => {
+        // 清除参考线
+        this.clear();
+      }
+    }
+  }
+}

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

@@ -1,165 +1,166 @@
-import Konva from 'konva';
-import { BaseDraw, Render, Draw } from '../types';
-
-// 画布比例尺
-
-export interface RulerDrawOption {
-  size: number
-}
-
-export class RulerDraw extends BaseDraw implements Draw {
-  option: RulerDrawOption;
-
-  constructor(render: Render, layer: Konva.Layer, option: RulerDrawOption) {
-    super(render, layer);
-    this.option = option;
-    this.group.listening(false);
-  }
-
-  override draw() {
-    this.clear();
-    const stageState = this.render.getStageState();
-    // 格子大小
-    const cellSize = 20;
-    const fontSizeMax = 12;
-    const lenX = Math.ceil(this.render.toStageValue(stageState.width) / cellSize); // 列数
-    const lenY = Math.ceil(this.render.toStageValue(stageState.height) / cellSize); // 行数
-    const startX = -Math.ceil(this.render.toStageValue(stageState.x - this.option.size) / cellSize);
-    const startY = -Math.ceil(this.render.toStageValue(stageState.y - this.option.size) / cellSize);
-    const group = new Konva.Group();
-    // 比例尺 - 上
-    const groupTop = new Konva.Group({
-      x: this.render.toStageValue(-stageState.x + this.option.size),
-      y: this.render.toStageValue(-stageState.y),
-      width: this.render.toStageValue(stageState.width - this.option.size + this.render.rulerSize),
-      height: this.render.toStageValue(this.option.size)
-    });
-    // 比例尺 - 左
-    const groupLeft = new Konva.Group({
-      x: this.render.toStageValue(-stageState.x),
-      y: this.render.toStageValue(-stageState.y + this.option.size),
-      width: this.render.toStageValue(this.option.size),
-      height: this.render.toStageValue(stageState.height - this.option.size + this.render.rulerSize)
-    });
-    {
-      groupTop.add(
-        // 上
-        new Konva.Rect({
-          name: this.constructor.name,
-          x: 0,
-          y: 0,
-          width: groupTop.width(),
-          height: groupTop.height(),
-          fill: '#ddd'
-        })
-      );
-      for (let x = lenX + startX - 1; x >= startX; x--) {
-        const nx = -groupTop.x() + cellSize * x;
-        const long = (this.render.toStageValue(this.option.size) / 5) * 4;
-        const short = (this.render.toStageValue(this.option.size) / 5) * 3;
-        if (nx >= 0) {
-          groupTop.add(
-            new Konva.Line({
-              name: this.constructor.name,
-              points: [
-                [nx, x % 5 ? long : short],
-                [nx, this.render.toStageValue(this.option.size)]
-              ].flat(),
-              stroke: '#999',
-              strokeWidth: this.render.toStageValue(1),
-              listening: false
-            })
-          );
-          if (x % 5 === 0) {
-            let fontSize = fontSizeMax;
-            const text = new Konva.Text({
-              name: this.constructor.name,
-              y: this.render.toStageValue(this.option.size / 2 - fontSize),
-              text: (x * cellSize).toString(),
-              fontSize: this.render.toStageValue(fontSize),
-              fill: '#999',
-              align: 'center',
-              verticalAlign: 'middle',
-              lineHeight: 1.6
-            });
-            while (this.render.toStageValue(text.width()) > this.render.toStageValue(cellSize) * 4.6) {
-              fontSize -= 1;
-              text.fontSize(this.render.toStageValue(fontSize));
-              text.y(this.render.toStageValue(this.option.size / 2 - fontSize));
-            }
-            text.x(nx - text.width() / 2);
-            groupTop.add(text);
-          }
-        }
-      }
-    }
-    {
-      groupLeft.add(
-        // 左
-        new Konva.Rect({
-          name: this.constructor.name,
-          x: 0,
-          y: 0,
-          width: groupLeft.width(),
-          height: groupLeft.height(),
-          fill: '#ddd'
-        })
-      );
-      for (let y = lenY + startY - 1; y >= startY; y--) {
-        const ny = -groupLeft.y() + cellSize * y;
-        const long = (this.render.toStageValue(this.option.size) / 5) * 4;
-        const short = (this.render.toStageValue(this.option.size) / 5) * 3;
-        if (ny >= 0) {
-          groupLeft.add(
-            new Konva.Line({
-              name: this.constructor.name,
-              points: [
-                [y % 5 ? long : short, ny],
-                [this.render.toStageValue(this.option.size), ny]
-              ].flat(),
-              stroke: '#999',
-              strokeWidth: this.render.toStageValue(1),
-              listening: false
-            })
-          );
-          if (y % 5 === 0) {
-            let fontSize = fontSizeMax;
-            const text = new Konva.Text({
-              name: this.constructor.name,
-              x: 0,
-              y: ny,
-              text: (y * cellSize).toString(),
-              fontSize: this.render.toStageValue(fontSize),
-              fill: '#999',
-              align: 'right',
-              verticalAlign: 'bottom',
-              lineHeight: 1.6,
-              wrap: 'none'
-            });
-            while (text.width() > short * 0.8) {
-              fontSize -= 1;
-              text.fontSize(this.render.toStageValue(fontSize));
-            }
-            text.y(ny - text.height() / 2);
-            text.width(short - this.render.toStageValue(1));
-            groupLeft.add(text);
-          }
-        }
-      }
-    }
-    group.add(
-      // 角
-      new Konva.Rect({
-        name: this.constructor.name,
-        x: this.render.toStageValue(-stageState.x),
-        y: this.render.toStageValue(-stageState.y),
-        width: this.render.toStageValue(this.option.size),
-        height: this.render.toStageValue(this.option.size),
-        fill: '#ddd'
-      })
-    );
-    group.add(groupTop);
-    group.add(groupLeft);
-    this.group.add(group);
-  }
-}
+import Konva from 'konva';
+import { BaseDraw, Render, Draw } from '../types';
+
+// 画布比例尺
+
+export interface RulerDrawOption {
+  size: number
+}
+
+export class RulerDraw extends BaseDraw implements Draw {
+  static readonly NAME = 'RulerDraw';
+  option: RulerDrawOption;
+
+  constructor(render: Render, layer: Konva.Layer, option: RulerDrawOption) {
+    super(render, layer);
+    this.option = option;
+    this.group.listening(false);
+  }
+
+  override draw() {
+    this.clear();
+    const stageState = this.render.getStageState();
+    // 格子大小
+    const cellSize = 20;
+    const fontSizeMax = 12;
+    const lenX = Math.ceil(this.render.toStageValue(stageState.width) / cellSize); // 列数
+    const lenY = Math.ceil(this.render.toStageValue(stageState.height) / cellSize); // 行数
+    const startX = -Math.ceil(this.render.toStageValue(stageState.x - this.option.size) / cellSize);
+    const startY = -Math.ceil(this.render.toStageValue(stageState.y - this.option.size) / cellSize);
+    const group = new Konva.Group();
+    // 比例尺 - 上
+    const groupTop = new Konva.Group({
+      x: this.render.toStageValue(-stageState.x + this.option.size),
+      y: this.render.toStageValue(-stageState.y),
+      width: this.render.toStageValue(stageState.width - this.option.size + this.render.rulerSize),
+      height: this.render.toStageValue(this.option.size)
+    });
+    // 比例尺 - 左
+    const groupLeft = new Konva.Group({
+      x: this.render.toStageValue(-stageState.x),
+      y: this.render.toStageValue(-stageState.y + this.option.size),
+      width: this.render.toStageValue(this.option.size),
+      height: this.render.toStageValue(stageState.height - this.option.size + this.render.rulerSize)
+    });
+    {
+      groupTop.add(
+        // 上
+        new Konva.Rect({
+          name: RulerDraw.NAME,
+          x: 0,
+          y: 0,
+          width: groupTop.width(),
+          height: groupTop.height(),
+          fill: '#ddd'
+        })
+      );
+      for (let x = lenX + startX - 1; x >= startX; x--) {
+        const nx = -groupTop.x() + cellSize * x;
+        const long = (this.render.toStageValue(this.option.size) / 5) * 4;
+        const short = (this.render.toStageValue(this.option.size) / 5) * 3;
+        if (nx >= 0) {
+          groupTop.add(
+            new Konva.Line({
+              name: RulerDraw.NAME,
+              points: [
+                [nx, x % 5 ? long : short],
+                [nx, this.render.toStageValue(this.option.size)]
+              ].flat(),
+              stroke: '#999',
+              strokeWidth: this.render.toStageValue(1),
+              listening: false
+            })
+          );
+          if (x % 5 === 0) {
+            let fontSize = fontSizeMax;
+            const text = new Konva.Text({
+              name: RulerDraw.NAME,
+              y: this.render.toStageValue(this.option.size / 2 - fontSize),
+              text: (x * cellSize).toString(),
+              fontSize: this.render.toStageValue(fontSize),
+              fill: '#999',
+              align: 'center',
+              verticalAlign: 'middle',
+              lineHeight: 1.6
+            });
+            while (this.render.toStageValue(text.width()) > this.render.toStageValue(cellSize) * 4.6) {
+              fontSize -= 1;
+              text.fontSize(this.render.toStageValue(fontSize));
+              text.y(this.render.toStageValue(this.option.size / 2 - fontSize));
+            }
+            text.x(nx - text.width() / 2);
+            groupTop.add(text);
+          }
+        }
+      }
+    }
+    {
+      groupLeft.add(
+        // 左
+        new Konva.Rect({
+          name: RulerDraw.NAME,
+          x: 0,
+          y: 0,
+          width: groupLeft.width(),
+          height: groupLeft.height(),
+          fill: '#ddd'
+        })
+      );
+      for (let y = lenY + startY - 1; y >= startY; y--) {
+        const ny = -groupLeft.y() + cellSize * y;
+        const long = (this.render.toStageValue(this.option.size) / 5) * 4;
+        const short = (this.render.toStageValue(this.option.size) / 5) * 3;
+        if (ny >= 0) {
+          groupLeft.add(
+            new Konva.Line({
+              name: RulerDraw.NAME,
+              points: [
+                [y % 5 ? long : short, ny],
+                [this.render.toStageValue(this.option.size), ny]
+              ].flat(),
+              stroke: '#999',
+              strokeWidth: this.render.toStageValue(1),
+              listening: false
+            })
+          );
+          if (y % 5 === 0) {
+            let fontSize = fontSizeMax;
+            const text = new Konva.Text({
+              name: RulerDraw.NAME,
+              x: 0,
+              y: ny,
+              text: (y * cellSize).toString(),
+              fontSize: this.render.toStageValue(fontSize),
+              fill: '#999',
+              align: 'right',
+              verticalAlign: 'bottom',
+              lineHeight: 1.6,
+              wrap: 'none'
+            });
+            while (text.width() > short * 0.8) {
+              fontSize -= 1;
+              text.fontSize(this.render.toStageValue(fontSize));
+            }
+            text.y(ny - text.height() / 2);
+            text.width(short - this.render.toStageValue(1));
+            groupLeft.add(text);
+          }
+        }
+      }
+    }
+    group.add(
+      // 角
+      new Konva.Rect({
+        name: RulerDraw.NAME,
+        x: this.render.toStageValue(-stageState.x),
+        y: this.render.toStageValue(-stageState.y),
+        width: this.render.toStageValue(this.option.size),
+        height: this.render.toStageValue(this.option.size),
+        fill: '#ddd'
+      })
+    );
+    group.add(groupTop);
+    group.add(groupLeft);
+    this.group.add(group);
+  }
+}

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

@@ -190,7 +190,7 @@ export abstract class BaseGraph {
       this.group.add(circle);
     }
     this.render.layer.add(this.group);
-    this.render.redraw([GraphDraw.name]);
+    this.render.redraw([GraphDraw.NAME]);
   }
 
   /**
@@ -209,7 +209,7 @@ export abstract class BaseGraph {
       // 防止进入调整点，重复处理
       if (!this.group.attrs.hoverAnchor) {
         this.group.setAttr('hover', true);
-        this.render.redraw([GraphDraw.name]);
+        this.render.redraw([GraphDraw.NAME]);
       }
       setTimeout(() => {
         // 调整产生 redraw，导致离开调整点不触发其 mouseleave（进入其他元素区域除外）
@@ -228,7 +228,7 @@ export abstract class BaseGraph {
         if (!this.group.attrs.hoverAnchor) {
           this.group.setAttr('hover', false);
           this.group.setAttr('hoverAnchor', false);
-          this.render.redraw([GraphDraw.name]);
+          this.render.redraw([GraphDraw.NAME]);
         }
       });
       // 隐藏 连接点

package/src/aldehyde/draw-canvas-edit/components/render/graphs/bezier.ts

@@ -96,7 +96,7 @@ export class Bezier extends BaseGraph {
                         graph.setAttr('hover', false);
                         graph.setAttr('hoverAnchor', false);
                         // 进入其他元素区域时离开需要靠它 redraw
-                        render.redraw([GraphDraw.name]);
+                        render.redraw([GraphDraw.NAME]);
                     });
                     anchorAndShadow.shape = anchorShape;
                 } else {
@@ -140,7 +140,7 @@ export class Bezier extends BaseGraph {
                         graph.setAttr('hover', false);
                         graph.setAttr('hoverAnchor', false);
                         // 进入其他元素区域时离开需要靠它 redraw
-                        render.redraw([GraphDraw.name]);
+                        render.redraw([GraphDraw.NAME]);
                     });
                     anchorAndShadow.shape = anchorShape;
                 }
@@ -278,7 +278,7 @@ export class Bezier extends BaseGraph {
                 }
             }
             // 重绘
-            render.redraw([GraphDraw.name, LinkDraw.name, PreviewDraw.name]);
+            render.redraw([GraphDraw.NAME, LinkDraw.NAME, PreviewDraw.NAME]);
         }
         const allXs = line.points().reduce((arr, item, idx) => {
             if (idx % 2 === 0) {
@@ -382,7 +382,7 @@ export class Bezier extends BaseGraph {
         // 更新 图形 的 连接点 的 锚点位置
         Bezier.updateLinkAnchorShadows(this.group, this.linkAnchorShadows, this.line);
         // 重绘
-        this.render.redraw([GraphDraw.name, LinkDraw.name, PreviewDraw.name]);
+        this.render.redraw([GraphDraw.NAME, LinkDraw.NAME, PreviewDraw.NAME]);
     }
 
     // 实现：拖动结束
@@ -412,7 +412,7 @@ export class Bezier extends BaseGraph {
         // 更新历史
         this.render.updateHistory();
         // 重绘
-        this.render.redraw([GraphDraw.name, LinkDraw.name, PreviewDraw.name]);
+        this.render.redraw([GraphDraw.NAME, LinkDraw.NAME, PreviewDraw.NAME]);
         super.drawEnd(size, {
             x: Math.min(
                 ...this.line.points().reduce((arr, item, idx) => {

package/src/aldehyde/draw-canvas-edit/components/render/graphs/circle.ts

@@ -119,7 +119,7 @@ export class Circle extends BaseGraph {
         graph.setAttr('hover', false);
         graph.setAttr('hoverAnchor', false);
         // 进入其他元素区域时离开需要靠它 redraw
-        render.redraw([GraphDraw.name]);
+        render.redraw([GraphDraw.NAME]);
       });
       anchorAndShadow.shape = anchorShape;
     }
@@ -597,7 +597,7 @@ export class Circle extends BaseGraph {
           }
         }
       }
-      render.redraw([GraphDraw.name, LinkDraw.name, PreviewDraw.name]); // 重绘
+      render.redraw([GraphDraw.NAME, LinkDraw.NAME, PreviewDraw.NAME]); // 重绘
     }
     BaseGraph.adjust(render, graph, graphSnap, adjustShape, anchorAndShadows, startPoint, endPoint, hoverRect);
   }
@@ -671,7 +671,7 @@ export class Circle extends BaseGraph {
     this.group.size({ width: offsetX, height: offsetY });
     Circle.updateAnchorShadows(this.group, this.anchorShadows);
     Circle.updateLinkAnchorShadows(this.group, this.linkAnchorShadows);
-    this.render.redraw([GraphDraw.name, LinkDraw.name, PreviewDraw.name]);
+    this.render.redraw([GraphDraw.NAME, LinkDraw.NAME, PreviewDraw.NAME]);
   }
 
   // 实现：拖动结束
@@ -693,7 +693,7 @@ export class Circle extends BaseGraph {
       // 更新历史
       this.render.updateHistory();
       // 重绘
-      this.render.redraw([GraphDraw.name, LinkDraw.name, PreviewDraw.name]);
+      this.render.redraw([GraphDraw.NAME, LinkDraw.NAME, PreviewDraw.NAME]);
     }
     super.drawEnd();
   }

package/src/aldehyde/draw-canvas-edit/components/render/graphs/curve.ts

@@ -98,7 +98,7 @@ export class Curve extends BaseGraph {
             document.body.style.cursor = anchorShape.attrs.adjusting ? 'move' : 'default';
             graph.setAttr('hover', false);
             graph.setAttr('hoverAnchor', false);
-            render.redraw([GraphDraw.name]);
+            render.redraw([GraphDraw.NAME]);
           });
           anchorAndShadow.shape = anchorShape;
         } else {
@@ -134,7 +134,7 @@ export class Curve extends BaseGraph {
             document.body.style.cursor = anchorShape.attrs.adjusting ? 'move' : 'default';
             graph.setAttr('hover', false);
             graph.setAttr('hoverAnchor', false);
-            render.redraw([GraphDraw.name]);
+            render.redraw([GraphDraw.NAME]);
           });
           anchorAndShadow.shape = anchorShape;
         }
@@ -267,7 +267,7 @@ export class Curve extends BaseGraph {
           }
         }
       }
-      render.redraw([GraphDraw.name, LinkDraw.name, PreviewDraw.name]);
+      render.redraw([GraphDraw.NAME, LinkDraw.NAME, PreviewDraw.NAME]);
     }
     const allXs = line.points().reduce((arr, item, idx) => {
       if (idx % 2 === 0) arr.push(item);
@@ -362,7 +362,7 @@ export class Curve extends BaseGraph {
     Curve.updateAnchorShadows(this.group, this.anchorShadows, this.line);
     // 更新 图形 的 连接点 的 锚点位置
     Curve.updateLinkAnchorShadows(this.group, this.linkAnchorShadows, this.line);
-    this.render.redraw([GraphDraw.name, LinkDraw.name, PreviewDraw.name]);
+    this.render.redraw([GraphDraw.NAME, LinkDraw.NAME, PreviewDraw.NAME]);
   }
 
   // 实现：拖动结束
@@ -385,7 +385,7 @@ export class Curve extends BaseGraph {
     this.group.size(size);  // 更新大小
     this.render.attractTool.alignLinesClear();      // 对齐线清除
     this.render.updateHistory();     // 更新历史
-    this.render.redraw([GraphDraw.name, LinkDraw.name, PreviewDraw.name]);
+    this.render.redraw([GraphDraw.NAME, LinkDraw.NAME, PreviewDraw.NAME]);
     super.drawEnd(size, {
       x: Math.min(...this.line.points().reduce((arr, item, idx) => {
         if (idx % 2 === 0) arr.push(item);