aldehyde 0.2.472 → 0.2.474

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

@@ -0,0 +1,69 @@
+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 {
+  // @ts-ignore
+  static readonly name = 'Drag';
+  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/drag-outside-handlers.ts

@@ -0,0 +1,162 @@
+import Konva from 'konva';
+import { nanoid } from 'nanoid';
+import { Render } from '../index';
+import { Handler, AssetInfoPoint, ImageType, AssetType, LinkDrawPoint } from '../types';
+import { RefLineDraw, PreviewDraw } from '../draws';
+
+export class DragOutsideHandlers implements Handler {
+  // @ts-ignore
+  static readonly name = 'DragOutside';
+  private render: Render;
+  constructor(render: Render) {
+    this.render = render;
+  }
+  handlers = {
+    dom: {
+      dragenter: (e: GlobalEventHandlersEventMap['dragenter']) => {
+        this.render.stage.setPointersPositions(e);
+        // 更新参考线
+        this.render.redraw([RefLineDraw.name]);
+      },
+      dragover: (e: GlobalEventHandlersEventMap['dragover']) => {
+        this.render.stage.setPointersPositions(e);
+        // 更新参考线
+        this.render.redraw([RefLineDraw.name]);
+      },
+      drop: (e: GlobalEventHandlersEventMap['drop']) => {
+        const src = e.dataTransfer?.getData('src');
+        // 接收连接点信息
+        let morePoints: AssetInfoPoint[] = [];
+        const morePointsTxt = e.dataTransfer?.getData('points') ?? '[]';
+        try {
+          morePoints = JSON.parse(morePointsTxt);
+        } catch (e) {
+          console.error(e);
+        }
+        const type = e.dataTransfer?.getData('type');
+        if (src && type) {
+          const stageState = this.render.getStageState();
+          this.render.stage.setPointersPositions(e);
+          const pos = this.render.stage.getPointerPosition();
+          if (pos) {
+            this.render.assetTool[
+              type === ImageType.svg
+                ? `loadSvg`
+                : type === ImageType.gif
+                  ? 'loadGif'
+                  : type === 'json'
+                    ? 'loadJson'
+                    : 'loadImg'
+            ](src).then((target: Konva.Image | Konva.Group) => {
+              let group = null;
+              // 默认连接点
+              let points: AssetInfoPoint[] = [];
+              // 图片素材
+              if (target instanceof Konva.Image) {
+                group = new Konva.Group({
+                  id: nanoid(),
+                  width: target.width(),
+                  height: target.height(),
+                  name: 'asset',
+                  assetType: AssetType.Image,
+                  draggable: true,
+                  imageType:
+                    type !== 'json'
+                      ? type === ImageType.svg
+                        ? ImageType.svg
+                        : type === ImageType.gif
+                          ? ImageType.gif
+                          : ImageType.other
+                      : undefined
+                });
+                this.render.setAssetSettings(group, this.render.getAssetSettings(), false);
+                group.add(target);
+                points = [
+                  { x: 0, y: group.height() / 2, direction: 'left' },  // 左
+                  { x: group.width(), y: group.height() / 2, direction: 'right' }, // 右
+                  { x: group.width() / 2, y: 0, direction: 'top' }, // 上
+                  { x: group.width() / 2, y: group.height(), direction: 'bottom' } // 下
+                ];
+              } else {
+                // json 素材
+                target.id(nanoid());
+                target.setAttrs({
+                  name: 'asset',
+                  assetType: AssetType.Json,
+                  draggable: true
+                });
+                group = target;
+                this.render.linkTool.groupIdCover(group);
+              }
+              target.setAttrs({ x: 0, y: 0 } as any);
+              this.render.layer.add(group);
+              const x = this.render.toStageValue(pos.x - stageState.x) - group.width() / 2;
+              const y = this.render.toStageValue(pos.y - stageState.y) - group.height() / 2;
+              group.setAttrs({ x, y });
+              // 更新坐标记录
+              this.render.setAssetSettings(group, this.render.getAssetSettings(group), false);
+              // 自定义连接点 覆盖 默认连接点
+              if (Array.isArray(morePoints) && morePoints.length > 0) {
+                points = morePoints;
+              }
+              // 连接点信息
+              group.setAttrs({
+                points: points.map(
+                  (o) =>
+                    ({
+                      ...o,
+                      id: nanoid(),
+                      groupId: group.id(),
+                      visible: false,
+                      pairs: [],
+                      direction: o.direction
+                    }) as LinkDrawPoint
+                )
+              });
+              // 连接点（锚点）
+              for (const point of group.getAttr('points') ?? []) {
+                group.add(
+                  new Konva.Circle({
+                    name: 'link-anchor',
+                    id: point.id,
+                    x: point.x,
+                    y: point.y,
+                    radius: this.render.toStageValue(1),
+                    stroke: 'rgba(0,0,255,1)',
+                    strokeWidth: this.render.toStageValue(2),
+                    visible: false,
+                    direction: point.direction
+                  })
+                );
+              }
+              group.on('mouseenter', () => { // 显示 连接点
+                this.render.linkTool.pointsVisible(true, group);
+              });
+              // hover 框（多选时才显示）
+              group.add(
+                new Konva.Rect({
+                  id: 'hoverRect',
+                  width: target.width(),
+                  height: target.height(),
+                  fill: 'rgba(0,255,0,0.3)',
+                  visible: false
+                })
+              );
+
+              group.on('mouseleave', () => {
+                // 隐藏 连接点
+                this.render.linkTool.pointsVisible(false, group);
+                // 隐藏 hover 框
+                group.findOne('#hoverRect')?.visible(false);
+              });
+              // 更新历史
+              this.render.updateHistory();
+              // 重绘
+              this.render.redraw([PreviewDraw.name]);
+            })
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,108 @@
+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 {
+  // @ts-ignore
+  static readonly name = 'Graph';
+  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) {
+                this.render.setAssetSettings(
+                  this.currentGraph.group,
+                  this.render.getAssetSettings(this.currentGraph.group),
+                  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

@@ -0,0 +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';

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

@@ -0,0 +1,50 @@
+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 {
+  // @ts-ignore
+  static readonly name = 'KeyMove';
+  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

@@ -0,0 +1,46 @@
+import { Render } from '../index';
+import { Handler } from '../types';
+import { LinkDraw } from '../draws';
+
+// 临时连接线
+
+export class LinkHandlers implements Handler {
+  // @ts-ignore
+  static readonly name = 'Link';
+  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()
+              );
+            }
+          }
+        }
+      }
+    }
+  }
+}