aldehyde 0.2.473 → 0.2.475

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

@@ -0,0 +1,163 @@
+import Konva from 'konva';
+import { Draw, BaseDraw, Render } from '../types';
+
+// 画布
+
+export interface BgDrawOption {
+  size: number;
+  readonly?: boolean;
+  showGrid?: boolean;
+}
+
+export class BgDraw extends BaseDraw implements Draw {
+  // @ts-ignore
+  static override readonly name = 'bg';
+  option: BgDrawOption;
+
+  // 独立容器：用于存放静态的背景和画布
+  private staticGroup: Konva.Group;
+  // 独立容器：专门用于存放动态网格
+  private gridGroup: Konva.Group;
+  // 标记静态元素是否需要重绘
+  private isStaticInitialized: boolean = false;
+
+  constructor(render: Render, layer: Konva.Layer, option: BgDrawOption) {
+    super(render, layer);
+    this.option = option;
+    this.group.listening(false);
+
+    // 预先创建好两个独立的 Group
+    this.staticGroup = new Konva.Group({ name: 'bg-static', listening: false });
+    this.gridGroup = new Konva.Group({ name: 'bg-grid', listening: false });
+
+    // 注意添加顺序：静态在下，网格在上
+    this.group.add(this.staticGroup);
+    this.group.add(this.gridGroup);
+
+    // 监听页面配置变化，当配置改变时，重置静态层初始化状态
+    this.render.on('page-settings-change', () => {
+      this.isStaticInitialized = false;
+      // 触发整体重绘，让 draw 方法重新执行
+      this.draw();
+    });
+  }
+
+  // 更新配置项，触发重绘
+  public updateOption(newOption: Partial<BgDrawOption>) {
+    this.option = { ...this.option, ...newOption };
+    this.draw();
+  }
+
+  override draw() {
+    // 1. 如果静态元素未初始化，或者配置发生变化导致标记被重置，则重新绘制
+    if (!this.isStaticInitialized) {
+      this.renderStaticElements();
+      this.isStaticInitialized = true;
+    }
+    // 2. 仅重绘网格部分（拖拽/缩放时高频调用）
+    if (!this.option.readonly && this.option.showGrid) { // 只读页面不显示网格
+      this.renderGrid();
+    } else { // 清除已渲染网格
+      this.gridGroup.destroyChildren();
+    }
+  }
+
+  /**
+   * 渲染静态元素（仅在初始化或配置改变时执行）
+   */
+  private renderStaticElements() {
+    // 清除旧的静态元素
+    this.staticGroup.destroyChildren();
+    const { width, height, x, y } = this.render.getStageState();
+    const { pageWidth, pageHeight, background, backgroundImg } = this.render.getPageSettings();
+
+    // 背景层（填满整个 stage）
+    const bgRect = new Konva.Rect({
+      name: `${this.constructor.name}__background`,
+      x: this.render.toStageValue(-x + this.render.rulerSize),
+      y: this.render.toStageValue(-y + this.render.rulerSize),
+      width: this.render.toStageValue(width),
+      height: this.render.toStageValue(height),
+      listening: false,
+      fill: 'transparent'
+    });
+
+    // 画布边框
+    const canvas = new Konva.Rect({
+      name: this.constructor.name,
+      x: 0,
+      y: 0,
+      width: pageWidth,
+      height: pageHeight,
+      stroke: this.option.readonly ? "transparent" : 'rgba(255,0,0,0.3)',
+      strokeWidth: this.render.toStageValue(2),
+      listening: false,
+      dash: [this.render.toStageValue(6), this.render.toStageValue(6)],
+      fill: background || 'transparent',
+    });
+
+    this.staticGroup.add(bgRect);
+    this.staticGroup.add(canvas);
+
+    // 处理背景图（异步）
+    if (backgroundImg?.src) {
+      const img = new Image();
+      img.crossOrigin = 'anonymous'; // 如果图片在 CDN 上，必须加上此属性防止跨域问题
+      img.src = backgroundImg.src;
+      img.onload = () => {
+        canvas.fill(null);
+        canvas.fillPatternImage(img);
+        canvas.fillPatternRepeat('no-repeat');
+        // 让图片自适应填满矩形（等比缩放裁剪效果）
+        const scaleX = pageWidth / img.width;
+        const scaleY = pageHeight / img.height;
+        canvas.fillPatternScaleX(scaleX);
+        canvas.fillPatternScaleY(scaleY);
+      };
+    }
+  }
+
+  /**
+   * 渲染网格（每次拖拽/缩放时调用）
+   */
+  private renderGrid() {
+    // 仅清空网格 Group，不影响静态层
+    this.gridGroup.destroyChildren();
+    const { width, height, x, y } = this.render.getStageState();
+    const cellSize = this.option.size;
+    const lenX = Math.ceil(this.render.toStageValue(width + this.render.rulerSize) / cellSize);
+    const lenY = Math.ceil(this.render.toStageValue(height + this.render.rulerSize) / cellSize);
+    const startX = -Math.ceil(this.render.toStageValue(x) / cellSize);
+    const startY = -Math.ceil(this.render.toStageValue(y) / cellSize);
+    const lines: Konva.Line[] = [];
+
+    // 生成竖线
+    for (let i = startX; i < lenX + startX + 2; i++) {
+      lines.push(new Konva.Line({
+        points: [
+          cellSize * i, this.render.toStageValue(-y + this.render.rulerSize),
+          cellSize * i, this.render.toStageValue(height - y + this.render.rulerSize)
+        ],
+        stroke: '#ddd',
+        strokeWidth: this.render.toStageValue(1),
+        listening: false
+      }));
+    }
+
+    // 生成横线
+    for (let j = startY; j < lenY + startY + 2; j++) {
+      lines.push(new Konva.Line({
+        points: [
+          this.render.toStageValue(-x + this.render.rulerSize), cellSize * j,
+          this.render.toStageValue(width - x + this.render.rulerSize), cellSize * j
+        ],
+        stroke: '#ddd',
+        strokeWidth: this.render.toStageValue(1),
+        listening: false
+      }));
+    }
+
+    // 批量添加线条到网格 Group
+    this.gridGroup.add(...lines);
+  }
+}

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

@@ -0,0 +1,307 @@
+import Konva from 'konva';
+import { BaseDraw, Draw, Render, MouseButton } from '../types';
+import { LinkDraw } from '../draws';
+
+// 右键菜单
+
+export interface ContextmenuDrawOption { }
+
+export class ContextmenuDraw extends BaseDraw implements Draw {
+  // @ts-ignore
+  static override readonly name = 'contextmenu';
+  option: ContextmenuDrawOption;
+  state: {
+    target: Konva.Node | null, // 右键目标节点（或空白处）
+    menuIsMousedown: boolean, // 菜单被鼠标按下状态
+    lastPos: Konva.Vector2d | null, // 记录鼠标按下位置（用于判断按下和释放的时候是不是同一位置）
+    right: boolean, // 鼠标按下的是否是右键
+  }
+
+  constructor(render: Render, layer: Konva.Layer, option: ContextmenuDrawOption) {
+    super(render, layer);
+    this.option = option;
+    this.state = { target: null, menuIsMousedown: false, lastPos: null, right: false };
+  }
+
+  override draw() {
+    this.clear();
+    if (this.state.target) {
+      // 菜单数组
+      const menus: Array<{ name: string, action: (e: Konva.KonvaEventObject<MouseEvent>) => void }> = [];
+      if (this.state.target === this.render.stage) {
+        // 空白处
+        menus.push({
+          name: '自适应大小',
+          action: () => this.render.positionTool.positionFit()
+        });
+        menus.push({
+          name: '恢复位置',
+          action: () => this.render.positionTool.positionReset()
+        });
+        menus.push({
+          name: '恢复大小位置',
+          action: () => this.render.positionTool.positionZoomReset()
+        });
+      } else if (!this.render.config.readonly) {
+        if (this.state.target.name() === 'link-line') {
+          menus.push({
+            name: '删除', // 删除连接线
+            action: () => this.render.linkTool.remove(this.state.target as Konva.Line)
+          });
+        } else {
+          // 未选择：真实节点，即素材的容器 group
+          // 已选择：transformer
+          const target = this.state.target.parent;
+          // 目标
+          menus.push({
+            name: '复制',
+            action: () => {
+              if (target) {
+                this.render.copyTool.copy([target]);
+              }
+            }
+          });
+          menus.push({
+            name: '删除',
+            action: () => {
+              if (target) {
+                this.render.remove([target]);
+              }
+            }
+          });
+          menus.push({
+            name: '上移',
+            action: () => {
+              if (target) {
+                this.render.zIndexTool.up([target]);
+              }
+            }
+          });
+          menus.push({
+            name: '下移',
+            action: () => {
+              if (target) {
+                this.render.zIndexTool.down([target]);
+              }
+            }
+          });
+          menus.push({
+            name: '置顶',
+            action: () => {
+              if (target) {
+                this.render.zIndexTool.top([target]);
+              }
+            }
+          });
+          menus.push({
+            name: '置底',
+            action: () => {
+              if (target) {
+                this.render.zIndexTool.bottom([target]);
+              }
+            }
+          });
+          if (target instanceof Konva.Transformer) {
+            const pos = this.render.stage.getPointerPosition();
+            if (pos) {
+              // 获取所有图形
+              const shapes = target.nodes();
+              if (shapes.length > 1) {
+                // zIndex 倒序（大的优先）
+                shapes.sort((a, b) => b.zIndex() - a.zIndex());
+                // 提取重叠目标
+                const selected = shapes.find((shape) =>
+                  // 关键 api
+                  Konva.Util.haveIntersection(
+                    { ...pos, width: 1, height: 1 },
+                    shape.getClientRect()
+                  )
+                );
+                // 对齐菜单
+                menus.push({
+                  name: '垂直居中' + (selected ? '于目标' : ''),
+                  action: () => this.render.alignTool.align("Middle", selected)
+                });
+                menus.push({
+                  name: '左对齐' + (selected ? '于目标' : ''),
+                  action: () => this.render.alignTool.align("Left", selected)
+                });
+                menus.push({
+                  name: '右对齐' + (selected ? '于目标' : ''),
+                  action: () => this.render.alignTool.align("Right", selected)
+                });
+                menus.push({
+                  name: '水平居中' + (selected ? '于目标' : ''),
+                  action: () => this.render.alignTool.align("Center", selected)
+                });
+                menus.push({
+                  name: '上对齐' + (selected ? '于目标' : ''),
+                  action: () => this.render.alignTool.align("Top", selected)
+                });
+                menus.push({
+                  name: '下对齐' + (selected ? '于目标' : ''),
+                  action: () => this.render.alignTool.align("Bottom", selected)
+                });
+              }
+            }
+          }
+        }
+      }
+
+      // stage 状态
+      const stageState = this.render.getStageState();
+      // 绘制右键菜单
+      const group = new Konva.Group({
+        name: 'contextmenu',
+        width: stageState.width,
+        height: stageState.height
+      });
+      let top = 0;
+      // 菜单每项高度
+      const lineHeight = 30;
+      const pos = this.render.stage.getPointerPosition();
+      if (pos) {
+        for (const menu of menus) {
+          // 框
+          const rect = new Konva.Rect({
+            x: this.render.toStageValue(pos.x - stageState.x),
+            y: this.render.toStageValue(pos.y + top - stageState.y),
+            width: this.render.toStageValue(150),
+            height: this.render.toStageValue(lineHeight),
+            fill: '#fff',
+            stroke: '#999',
+            strokeWidth: this.render.toStageValue(1),
+            name: 'contextmenu'
+          });
+          // 标题
+          const text = new Konva.Text({
+            x: this.render.toStageValue(pos.x - stageState.x),
+            y: this.render.toStageValue(pos.y + top - stageState.y),
+            text: menu.name,
+            name: 'contextmenu',
+            listening: false,
+            fontSize: this.render.toStageValue(16),
+            fill: '#333',
+            width: this.render.toStageValue(150),
+            height: this.render.toStageValue(lineHeight),
+            align: 'center',
+            verticalAlign: 'middle'
+          });
+          group.add(rect);
+          group.add(text);
+          // 菜单事件
+          rect.on('pointerclick', (e) => {
+            if (e.evt.button === MouseButton.左键) {
+              // 触发事件
+              menu.action(e);
+              // 移除菜单
+              this.group.getChildren().forEach((o) => {
+                o.destroy();
+              });
+              this.group.removeChildren();
+              this.state.target = null;
+            }
+            e.evt.preventDefault();
+            e.evt.stopPropagation();
+          })
+          rect.on('mousedown', (e) => {
+            if (e.evt.button === MouseButton.左键) {
+              this.state.menuIsMousedown = true;
+              // 按下效果
+              rect.fill('#dfdfdf');
+            }
+            e.evt.preventDefault();
+            e.evt.stopPropagation();
+          })
+          rect.on('mouseup', (e) => {
+            if (e.evt.button === MouseButton.左键) {
+              this.state.menuIsMousedown = false;
+            }
+          })
+          rect.on('mouseenter', (e) => {
+            if (this.state.menuIsMousedown) {
+              rect.fill('#dfdfdf');
+            } else {
+              // hover in
+              rect.fill('#efefef');
+            }
+            e.evt.preventDefault();
+            e.evt.stopPropagation();
+          })
+          rect.on('mouseout', () => {
+            // hover out
+            rect.fill('#fff');
+          })
+          rect.on('contextmenu', (e) => {
+            e.evt.preventDefault();
+            e.evt.stopPropagation();
+          })
+          top += lineHeight - 1;
+        }
+      }
+      this.group.add(group);
+    }
+  }
+
+  handlers = {
+    stage: {
+      mousedown: (e: Konva.KonvaEventObject<GlobalEventHandlersEventMap['mousedown']>) => {
+        this.state.lastPos = this.render.stage.getPointerPosition();
+        if (e.evt.button === MouseButton.左键) {
+          if (!this.state.menuIsMousedown) {
+            // 没有按下菜单，清除菜单
+            this.state.target = null;
+            this.draw();
+          }
+        } else if (e.evt.button === MouseButton.右键 && !e.evt.ctrlKey) {
+          // （判断 ctrlKey 为了排查 mac 拖动快捷键）
+          // 右键按下
+          this.state.right = true;
+        }
+      },
+      mousemove: () => {
+        if (this.state.target && this.state.right) {
+          // 拖动画布时（右键），清除菜单
+          this.state.target = null;
+          this.draw();
+        }
+      },
+      mouseup: () => {
+        this.state.right = false;
+      },
+      contextmenu: (e: Konva.KonvaEventObject<GlobalEventHandlersEventMap['contextmenu']>) => {
+        // （判断 ctrlKey 为了排查 mac 拖动快捷键）
+        if (!e.evt.ctrlKey) {
+          const pos = this.render.stage.getPointerPosition();
+          if (pos && this.state.lastPos) {
+            const linkGroup = this.render.layerCover.find(`.${LinkDraw.name}`)[0] as Konva.Group;
+            // 右键目标可能为 连接线
+            let lineSelection: Konva.Node | null = null;
+            if (linkGroup) {
+              const linkLines = linkGroup.find('.link-line');
+              for (const line of linkLines) {
+                if (Konva.Util.haveIntersection({ ...pos, width: 1, height: 1 }, line.getClientRect())) {
+                  // 右键目标为 连接线
+                  lineSelection = line;
+                  break;
+                }
+              }
+            }
+            if (pos.x === this.state.lastPos.x || pos.y === this.state.lastPos.y) {
+              // 右键 连接线/其它目标
+              this.state.target = lineSelection ?? e.target;
+            } else {
+              this.state.target = null;
+            }
+            this.draw();
+          }
+        }
+      },
+      wheel: () => {
+        // 画布缩放时，清除菜单
+        this.state.target = null;
+        this.draw();
+      }
+    }
+  }
+}