aldehyde 0.2.472 → 0.2.474

package/src/aldehyde/draw-canvas/edit/components/main-header/index.tsx

@@ -0,0 +1,187 @@
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import { Dropdown, Modal, Space, Button, Divider, Tooltip } from 'antd';
+import IconFont from "../../../../icon/aliIcon";
+import { Render } from '../render';
+import { GraphType, LinkType, AlignType } from '../render/types';
+import * as Draws from '../render/draws';
+import './index.less';
+
+// 布局类型
+const alignTypes = [
+  { label: '垂直居中', value: 'Middle', icon: "icon-middle-L" },
+  { label: '左对齐', value: 'Left', icon: "icon-left-L" },
+  { label: '右对齐', value: 'Right', icon: "icon-right-L" },
+  { label: '水平居中', value: 'Center', icon: "icon-center-L" },
+  { label: '上对齐', value: 'Top', icon: "icon-top-L" },
+  { label: '下对齐', value: 'Bottom', icon: "icon-bottom-L" }
+];
+
+// 连线类型
+const lineTypes = [
+  { label: '折线', value: 'curve', icon: "icon-zhexian" },
+  { label: '贝塞尔曲线', value: 'bezier', icon: "icon-bezier" },
+  { label: '自动', value: 'auto', icon: "icon-zhexian-auto" },
+];
+
+// 图形类型
+const graphTypes = [
+  { label: '折线', value: 'Curve', icon: "icon-zhexian" },
+  { label: '贝塞尔曲线', value: 'Bezier', icon: "icon-bezier" },
+  { label: '矩形', value: 'Rect', icon: 'icon-rect' },
+  { label: '圆', value: 'Circle', icon: 'icon-circle' },
+];
+
+interface MainHeaderProps {
+  render: Render | null;
+  graphType?: GraphType; // 图类型
+  texting?: boolean; // 添加文本状态
+  onGraphTypeChange: (type: GraphType | undefined) => void; // 更新图类型
+  onTexting: (texting: boolean) => void;
+}
+
+const MainHeader = (props: MainHeaderProps) => {
+  const { render, graphType, onGraphTypeChange, onTexting, texting } = props;
+  const [scale, setScale] = useState<number>(100); // 缩放
+  const [history, setHistory] = useState<string[]>([]); // 历史记录
+  const [historyIndex, setHistoryIndex] = useState(-1); // 当前历史记录标签
+  const [selection, setSelection] = useState<unknown[]>([]); // 选中组件
+  const [currentLinkType, setCurrentLinkType] = useState<LinkType>("curve"); // 连接线类型
+  const [showShortCut, setShowShortCut] = useState<boolean>(false); // 快捷键显示
+  const [loading, setLoading] = useState<boolean>(false);
+
+  // 文件导入
+  const handleRestore = useCallback(() => {
+    if (!render) return;
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = '.json';
+    input.onchange = () => {
+      const file = input.files?.[0];
+      if (file) {
+        const reader = new FileReader();
+        reader.onload = async () => {
+          await render.importExportTool.restore(reader.result as string);
+          render.positionTool.positionFit();
+        }
+        reader.readAsText(file);
+      }
+    }
+    input.click();
+  }, [render]);
+
+  // 数据导出
+  const handleSave = useCallback((type: 'json' | 'svg' | 'asset' | 'png' | 'assetPng') => {
+    if (!render) return;
+    const data: { name: string; content: string }[] = [];
+    switch (type) {
+      case 'json':
+        data.push({ name: 'data.json', content: render.importExportTool.save() });
+        break;
+      case 'asset':
+        data.push({ name: 'asset.json', content: render.importExportTool.getAsset() });
+        break;
+      case 'png':
+        download('image.png', render.importExportTool.getAssetImage(2));
+        return;
+      case 'assetPng':
+        download('image.png', render.importExportTool.getAssetImage());
+        return;
+    }
+    if (data.length) {
+      data.forEach(({ name, content }) => download(name, content));
+    }
+  }, [render]);
+
+  // 下载辅助函数
+  const download = (name: string, content: string) => {
+    const a = document.createElement('a');
+    a.download = name;
+    a.href = content.startsWith('blob:') ? content : URL.createObjectURL(new Blob([content]));
+    a.click();
+  }
+
+  // 工具操作
+  const handleAlign = useCallback((type: AlignType) => {
+    render?.alignTool.align(type);
+  }, [render])
+
+  // 更改组件连接线类型 
+  const handleLinkType = useCallback((type: LinkType) => {
+    (render?.draws[Draws.LinkDraw.name] as unknown as { changeLinkType: (t: LinkType) => void })?.changeLinkType(type);
+  }, [render])
+
+  // 重置缩放
+  const handleScale = useCallback((action: 'fit' | 'reset' | 'position') => {
+    const tool = render?.positionTool;
+    if (!tool) return;
+    action === 'fit' ? tool.positionFit() : action === 'reset' ? tool.positionZoomReset() : tool.positionReset();
+  }, [render])
+
+  // 更改图类型
+  const handleGraph = (type: GraphType) => onGraphTypeChange(graphType === type ? undefined : type);
+
+  // 绑定事件
+  useEffect(() => {
+    if (!render) return;
+    render.on('selection-change', setSelection);
+    render.on('history-change', ({ records, index }: { records: string[]; index: number }) => {
+      setHistory(records);
+      setHistoryIndex(index);
+    });
+    render.on('link-type-change', setCurrentLinkType);
+    render.on('scale-change', (v: number) => setScale(v * 100));
+    render.on('loading', setLoading);
+  }, [render]);
+
+  // 是否选中多个组件
+  const isSelects = useMemo(() => selection.length <= 1, [selection]);
+
+  // 缩放菜单选项
+  const scaleMenu = [
+    { key: "fit", label: <a onClick={() => handleScale('fit')}>自适应大小</a> },
+    { key: "reset", label: <a onClick={() => handleScale('reset')}>重置位置大小</a> },
+    { key: "position", label: <a onClick={() => handleScale('position')}>仅重置位置</a> }
+  ];
+
+  return (
+    <div className="main-header">
+      <Space size={4} separator={<Divider vertical styles={{ root: { margin: "0 4px" } }} />}>
+        <Dropdown menu={{ items: scaleMenu }}>
+          <span style={{ cursor: "pointer" }}>{`${scale.toFixed(0)}%`}</span>
+        </Dropdown>
+        <Tooltip title="撤销">
+          <Button type="text" onClick={() => render?.prevHistory()} disabled={historyIndex <= 0} >↶</Button>
+        </Tooltip>
+        <Tooltip title="恢复">
+          <Button type="text" onClick={() => render?.nextHistory()} disabled={historyIndex >= history.length - 1} >↷</Button>
+        </Tooltip>
+        {alignTypes.map(type => (
+          <Tooltip title={type.label}>
+            <Button type="text" key={type.value} onClick={() => handleAlign(type.value as AlignType)} disabled={isSelects} ><IconFont type={type.icon} /></Button>
+          </Tooltip>
+        ))}
+        {lineTypes.map(type => (
+          <Tooltip title={`连接线：${type.label}`}>
+            <Button type="text" key={type.value} onClick={() => handleLinkType(type.value as LinkType)} disabled={currentLinkType === type.value}><IconFont type={type.icon} /></Button>
+          </Tooltip>
+        ))}
+        {graphTypes.map(type => (
+          <Tooltip title={`画${type.label}`}>
+            <Button type="text" key={type.value} onClick={() => handleGraph(type.value as GraphType)} className={graphType === type.value ? 'active' : ''} ><IconFont type={type.icon} /></Button>
+          </Tooltip>
+        ))}
+        <Tooltip title="插入文字">
+          <Button type="text" onClick={() => onTexting(true)} className={texting ? "active" : ""} ><IconFont type="icon-wenben" /></Button>
+        </Tooltip>
+      </Space>
+      {showShortCut &&
+        <Modal title="快捷键" open={showShortCut} onCancel={() => setShowShortCut(false)}>
+          <p>1、复制、粘贴、多选、全选、删除、上一步、下一步等快捷键与一般文档编辑器类似；</p>
+          <p>2、放大缩小，【Win】鼠标上滚动下滚动，【Mac】触控板双指放大、缩小；</p>
+          <p>3、画布拖动，在空白处，【Win】右键按下移动，【Mac】control + 触控板三指移动；</p>
+        </Modal>}
+    </div >
+  )
+}
+
+export default MainHeader;

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

@@ -0,0 +1,98 @@
+import Konva from 'konva';
+import { Draw, BaseDraw, Render } from '../types';
+
+// 画布
+
+export interface BgDrawOption {
+  size: number;
+}
+
+export class BgDraw extends BaseDraw implements Draw {
+  // @ts-ignore
+  static override readonly name = 'bg';
+  option: BgDrawOption;
+
+  constructor(render: Render, layer: Konva.Layer, option: BgDrawOption) {
+    super(render, layer);
+    this.option = option;
+    this.group.listening(false);
+  }
+
+  override draw() {
+    this.clear(); // 重置
+    const { width, height, x, y } = this.render.getStageState(); // 获取页面配置
+    const { pageWidth, pageHeight, background } = this.render.getPageSettings(); // 画布配置，尺寸（使用设置的 pageWidth/pageHeight）
+    const cellSize = this.option.size; // 网格尺寸
+
+    // 计算列数和行数（基于stage 尺寸）
+    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 group = new Konva.Group();
+
+    // 背景层（填满整个 stage）
+    group.add(
+      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'
+      })
+    );
+
+    // 画布边框（使用 pageWidth/pageHeight）
+    group.add(
+      new Konva.Rect({
+        name: this.constructor.name,
+        x: 0,
+        y: 0,
+        width: pageWidth,
+        height: pageHeight,
+        stroke: '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'
+      })
+    );
+
+    // 网格竖线
+    for (let x = startX; x < lenX + startX + 2; x++) {
+      group.add(
+        new Konva.Line({
+          name: this.constructor.name,
+          points: [
+            [cellSize * x, this.render.toStageValue(-y + this.render.rulerSize)],
+            [cellSize * x, this.render.toStageValue(height - y + this.render.rulerSize)]
+          ].flat(),
+          stroke: '#ddd',
+          strokeWidth: this.render.toStageValue(1),
+          listening: false
+        })
+      );
+    }
+
+    // 网格横线
+    for (let y = startY; y < lenY + startY + 2; y++) {
+      group.add(
+        new Konva.Line({
+          name: this.constructor.name,
+          points: [
+            [this.render.toStageValue(-x + this.render.rulerSize), cellSize * y],
+            [this.render.toStageValue(width - x + this.render.rulerSize), cellSize * y]
+          ].flat(),
+          stroke: '#ddd',
+          strokeWidth: this.render.toStageValue(1),
+          listening: false
+        })
+      );
+    }
+
+    this.group.add(group);
+  }
+}

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();
+      }
+    }
+  }
+}