aldehyde 0.2.473 → 0.2.475

package/src/aldehyde/draw-canvas/edit/components/render/tools/link-tool.ts

@@ -0,0 +1,225 @@
+import { nanoid } from 'nanoid';
+import Konva from 'konva';
+import { Render } from '../index';
+import { LinkDrawPoint, LinkDrawPair } from '../types';
+import { LinkDraw, RulerDraw, PreviewDraw } from '../draws';
+
+export class LinkTool {
+  // @ts-ignore
+  static readonly name = 'LinkTool';
+
+  private render: Render;
+  constructor(render: Render) {
+    this.render = render;
+  }
+
+  pointsVisible(visible: boolean, group?: Konva.Group) {
+    if (!this.render.config.readonly) {
+      const start = group ?? this.render.layer;
+      // 查找深层 points
+      for (const asset of [
+        ...(['asset', 'sub-asset'].includes(start.name()) ? [start] : []),
+        ...start.find('.asset'),
+        ...start.find('.sub-asset')
+      ]) {
+        const points = (asset as Konva.Node).getAttr('points') ?? [];
+        asset.setAttrs({
+          points: points.map((o: any) => ({ ...o, visible }))
+        });
+      }
+      // 拐点操作中，此处不重绘
+      if (!(this.render.draws[LinkDraw.name] as LinkDraw)?.state.linkManualing) {
+        // 重绘
+        this.render.redraw([LinkDraw.name, RulerDraw.name, PreviewDraw.name]);
+      }
+    }
+  }
+
+  remove(target?: Konva.Line) {
+    const line = target ?? this.linkCurrent;
+    if (line) {
+      const { groupId, pointId, pairId } = line.getAttrs();
+
+      if (groupId && pointId && pairId) {
+        const group = this.render.layer.findOne(`#${groupId}`) as Konva.Group;
+        if (group) {
+          const points = (group.getAttr('points') ?? []) as LinkDrawPoint[];
+          const point = points.find((o) => o.id === pointId);
+          if (point) {
+            const pairIndex = (point.pairs ?? ([] as LinkDrawPair[])).findIndex((o) => o.id === pairId);
+            if (pairIndex > -1) {
+              const pair = point.pairs.splice(pairIndex, 1)[0];
+
+              if (group.attrs.manualPointsMap && group.attrs.manualPointsMap[pair.id]) {
+                group.setAttr('manualPointsMap', {
+                  ...group.attrs.manualPointsMap,
+                  [pair.id]: undefined
+                });
+              }
+
+              // 重绘
+              this.render.redraw([
+                LinkDraw.name,
+                RulerDraw.name,
+                PreviewDraw.name
+              ]);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // 刷新 json 的 id、事件
+  jsonIdCover(assets: any[]) {
+    let deepAssets = [...assets];
+    const idMap = new Map();
+
+    while (deepAssets.length > 0) {
+      const asset = deepAssets.shift();
+      if (asset) {
+        if (Array.isArray(asset.attrs.points)) {
+          for (const point of asset.attrs.points) {
+            if (Array.isArray(point.pairs)) {
+              for (const pair of point.pairs) {
+                if (pair.from.groupId && !idMap.has(pair.from.groupId)) {
+                  idMap.set(pair.from.groupId, 'g:' + nanoid());
+                }
+                if (pair.to.groupId && !idMap.has(pair.to.groupId)) {
+                  idMap.set(pair.to.groupId, 'g:' + nanoid());
+                }
+                if (pair.from.pointId && !idMap.has(pair.from.pointId)) {
+                  idMap.set(pair.from.pointId, 'p:' + nanoid());
+                }
+                if (pair.to.pointId && !idMap.has(pair.to.pointId)) {
+                  idMap.set(pair.to.pointId, 'p:' + nanoid());
+                }
+              }
+            }
+            if (point.id) {
+              if (!idMap.has(point.id)) {
+                idMap.set(point.id, 'p:' + nanoid());
+              }
+            }
+            if (point.groupId) {
+              if (!idMap.has(point.groupId)) {
+                idMap.set(point.groupId, 'g:' + nanoid());
+              }
+            }
+          }
+        }
+        if (asset.attrs.id) {
+          if (!idMap.has(asset.attrs.id)) {
+            idMap.set(asset.attrs.id, 'n:' + nanoid());
+          }
+        }
+        if (Array.isArray(asset.children)) {
+          deepAssets.push(...asset.children);
+        }
+      }
+    }
+
+    deepAssets = [...assets];
+
+    while (deepAssets.length > 0) {
+      const asset = deepAssets.shift();
+      if (asset) {
+        if (idMap.has(asset.attrs.id)) {
+          asset.attrs.id = idMap.get(asset.attrs.id);
+        }
+
+        if (Array.isArray(asset.attrs.points)) {
+          for (const point of asset.attrs.points) {
+            if (Array.isArray(point.pairs)) {
+              for (const pair of point.pairs) {
+                pair.disabled = true;
+                if (pair.id) {
+                  pair.id = 'pr:' + nanoid();
+                }
+                if (idMap.has(pair.from.groupId)) {
+                  pair.from.groupId = idMap.get(pair.from.groupId);
+                }
+                if (idMap.has(pair.to.groupId)) {
+                  pair.to.groupId = idMap.get(pair.to.groupId);
+                }
+                if (idMap.has(pair.from.pointId)) {
+                  pair.from.pointId = idMap.get(pair.from.pointId);
+                }
+                if (idMap.has(pair.to.pointId)) {
+                  pair.to.pointId = idMap.get(pair.to.pointId);
+                }
+              }
+            }
+
+            if (idMap.has(point.id)) {
+              const anchor = asset.children.find((o: any) => o.attrs.id === point.id);
+              point.id = idMap.get(point.id);
+              if (anchor) {
+                anchor.attrs.id = point.id;
+              }
+            }
+
+            if (idMap.has(point.groupId)) {
+              point.groupId = idMap.get(point.groupId);
+            }
+          }
+        }
+
+        if (Array.isArray(asset.children)) {
+          deepAssets.push(...asset.children);
+        }
+      }
+    }
+  }
+
+  // 把深层 group 的 id 统一为顶层 group 的 id
+  groupIdCover(group: Konva.Group) {
+    const groupId = group.id();
+    const subGroups = group.find('.sub-asset') as Konva.Group[];
+    while (subGroups.length > 0) {
+      const subGroup = subGroups.shift() as Konva.Group | undefined;
+      if (subGroup) {
+        const points = subGroup.attrs.points;
+        if (Array.isArray(points)) {
+          for (const point of points) {
+            point.rawGroupId = point.groupId;
+            point.groupId = groupId;
+            for (const pair of point.pairs) {
+              pair.from.rawGroupId = pair.from.groupId;
+              pair.from.groupId = groupId;
+              pair.to.rawGroupId = pair.to.groupId;
+              pair.to.groupId = groupId;
+            }
+          }
+        }
+        subGroups.push(...(subGroup.find('.sub-asset') as Konva.Group[]));
+      }
+    }
+  }
+
+  // 选中连接线
+  linkCurrent: Konva.Line | undefined = undefined;
+
+  // 选中
+  select(link: Konva.Line) {
+    this.render.selectionTool.selectingClear();
+    this.linkCurrent = link;
+    this.render.emit('link-selection-change', this.linkCurrent);
+    // 重绘
+    this.render.redraw([
+      LinkDraw.name, // 更新连线
+      RulerDraw.name // 更新比例尺
+    ]);
+  }
+
+  // 清空选中
+  selectingClear() {
+    this.linkCurrent = undefined;
+    this.render.emit('link-selection-change', undefined);
+    // 重绘
+    this.render.redraw([
+      LinkDraw.name, // 更新连线
+      RulerDraw.name
+    ]);
+  }
+}

package/src/aldehyde/draw-canvas/edit/components/render/tools/position-tool.ts

@@ -0,0 +1,194 @@
+import Konva from 'konva';
+import { Render } from '../index';
+import { GraphDraw, LinkDraw, RulerDraw, PreviewDraw, RefLineDraw, BgDraw } from '../draws';
+
+export class PositionTool {
+  // @ts-ignore
+  static readonly name = 'PositionTool';
+
+  private render: Render;
+  constructor(render: Render) {
+    this.render = render;
+  }
+
+  // 自适应大小
+  positionFit() {
+    const { pageWidth, pageHeight } = this.render.getPageSettings();
+    const children = [
+      ...this.render.layer.getChildren(),
+      ...this.render.layerCover.find('.link-line')
+    ];
+
+    let minX = Infinity,
+      maxX = -Infinity,
+      minY = Infinity,
+      maxY = -Infinity;
+
+    const stageState = this.render.getStageState();
+    for (const node of children) {
+      if (node instanceof Konva.Group) {
+        const { x, y, width, height } = ((rect) => ({
+          x: this.render.toStageValue(rect.x - stageState.x),
+          y: this.render.toStageValue(rect.y - stageState.y),
+          width: this.render.toStageValue(rect.width),
+          height: this.render.toStageValue(rect.height)
+        }))(node.getClientRect());
+        if (x < minX) minX = x;
+        if (x + width > maxX) maxX = x + width;
+        if (y < minY) minY = y;
+        if (y + height > maxY) maxY = y + height;
+      } else if (node instanceof Konva.Line && node.name() === 'link-line') {
+        // 连线占用空间
+        const points = node.points();
+        for (let i = 0; i < points.length; i += 2) {
+          const [px, py] = [points[i], points[i + 1]];
+          if (px < minX) minX = px - 1;
+          if (px > maxX) maxX = px + 1;
+          if (py < minY) minY = py - 1;
+          if (py > maxY) maxY = py + 1;
+        }
+      }
+    }
+
+    // 把画布区域也纳入计算范围（画布从 (0,0) 到 (pageWidth, pageHeight)）
+    if (0 < minX) minX = 0;
+    if (pageWidth > maxX) maxX = pageWidth;
+    if (0 < minY) minY = 0;
+    if (pageHeight > maxY) maxY = pageHeight;
+
+    // 没有素材时，以画布自身为准
+    if (minX === Infinity) minX = 0;
+    if (maxX === -Infinity) maxX = pageWidth;
+    if (minY === Infinity) minY = 0;
+    if (maxY === -Infinity) maxY = pageHeight;
+
+    const contentSize = {
+      width: maxX - minX,
+      height: maxY - minY
+    };
+    const contentRate = contentSize.width / contentSize.height;
+
+    const viewSize = {
+      width: this.render.stage.width() - (this.render.config.readonly ? 0 : this.render.rulerSize),
+      height: this.render.stage.height() - (this.render.config.readonly ? 0 : this.render.rulerSize)
+    };
+    const viewRate = viewSize.width / viewSize.height;
+    let scale = 1;
+
+    // 设置padding，避免边缘紧贴
+    const padding = 20;
+    const effectiveWidth = viewSize.width - padding * 2;
+    const effectiveHeight = viewSize.height - padding * 2;
+
+    if (viewRate > contentRate) {  // 视口比内容更"扁"，以高度为基准
+      scale = effectiveHeight / contentSize.height;
+    } else {  // 视口比内容更"长"，以宽度为基准
+      scale = effectiveWidth / contentSize.width;
+    }
+
+    scale = Math.max(0.2, scale);
+    scale = Math.floor(scale * 100) / 100;
+
+    // 设置缩放比例最大为1（暂时隐藏）
+    // if (contentSize.width * scale <= viewSize.width && contentSize.height * scale <= viewSize.height) {
+    //   scale = Math.min(1, scale);
+    // }
+
+    this.render.stage.setAttrs({
+      scale: { x: scale, y: scale },
+      position: {
+        x:
+          (this.render.config.readonly ? 0 : this.render.rulerSize) -
+          minX * scale +
+          (viewSize.width - contentSize.width * scale) / 2,
+        y:
+          (this.render.config.readonly ? 0 : this.render.rulerSize) -
+          minY * scale +
+          (viewSize.height - contentSize.height * scale) / 2
+      }
+    });
+
+    this.render.emit('scale-change', scale);
+
+    // 重绘
+    this.render.redraw([
+      BgDraw.name,
+      GraphDraw.name,
+      LinkDraw.name,
+      RulerDraw.name,
+      RefLineDraw.name,
+      PreviewDraw.name
+    ]);
+  }
+
+  // 恢复位置大小
+  positionZoomReset() {
+    this.render.stage.setAttrs({
+      scale: { x: 1, y: 1 }
+    });
+    this.render.emit('scale-change', 1);
+    this.positionReset();
+  }
+
+  // 恢复位置
+  positionReset() {
+    this.render.stage.setAttrs({
+      x: this.render.rulerSize,
+      y: this.render.rulerSize
+    });
+    // 重绘
+    this.render.redraw([
+      BgDraw.name,
+      GraphDraw.name,
+      LinkDraw.name,
+      RulerDraw.name,
+      RefLineDraw.name,
+      PreviewDraw.name
+    ]);
+  }
+
+  // 更新中心位置
+  updateCenter(x = 0, y = 0) {
+    // stage 状态
+    const stageState = this.render.getStageState();
+    // 提取节点
+    const nodes = this.render.layer.getChildren((node) => !this.render.ignore(node));
+
+    // 计算节点占用的区域（计算起点即可）
+    let minX = 0;
+    let minY = 0;
+    for (const node of nodes) {
+      const x = node.x();
+      const y = node.y();
+      if (x < minX) {
+        minX = x;
+      }
+      if (y < minY) {
+        minY = y;
+      }
+    }
+
+    // 居中画布
+    this.render.stage.setAttrs({
+      x:
+        stageState.width / 2 -
+        this.render.toBoardValue(minX) -
+        this.render.toBoardValue(x) +
+        this.render.rulerSize,
+      y:
+        stageState.height / 2 -
+        this.render.toBoardValue(minY) -
+        this.render.toBoardValue(y) +
+        this.render.rulerSize
+    });
+    // 重绘
+    this.render.redraw([
+      BgDraw.name,
+      GraphDraw.name,
+      LinkDraw.name,
+      RulerDraw.name,
+      RefLineDraw.name,
+      PreviewDraw.name
+    ]);
+  }
+}

package/src/aldehyde/draw-canvas/edit/components/render/tools/selection-tool.ts

@@ -0,0 +1,132 @@
+import Konva from 'konva';
+import { Render } from '../index';
+import { GraphDraw, LinkDraw } from '../draws';
+import { AssetType } from '../types';
+
+export class SelectionTool {
+  // @ts-ignore
+  static readonly name = 'SelectionTool';
+
+  private render: Render;
+  constructor(render: Render) {
+    this.render = render;
+  }
+  // 【被选中的】
+  selectingNodes: Konva.Node[] = [];
+  // 清空已选
+  selectingClear(slient = false) {
+    // 选择变化了
+    if (this.selectingNodes.length > 0) {
+      !slient && this.render.emit('selection-change', []);
+    }
+    // 清空选择
+    this.render.transformer.nodes([]);
+    // 恢复透明度、层次、可交互
+    for (const node of [...this.selectingNodes].sort(
+      (a, b) => a.attrs.lastZIndex - b.attrs.lastZIndex
+    )) {
+      node.setAttrs({
+        listening: true,
+        opacity: node.attrs.lastOpacity ?? 1,
+        zIndex: node.attrs.lastZIndex
+      });
+    }
+    // 清空状态
+    for (const node of this.selectingNodes) {
+      node.setAttrs({
+        nodeMousedownPos: undefined,
+        lastOpacity: undefined,
+        lastZIndex: undefined,
+        selectingZIndex: undefined,
+        selected: false
+      });
+    }
+    // 清空选择节点
+    this.selectingNodes = [];
+    // 隐藏 连接点
+    this.render.linkTool.pointsVisible(false);
+    // 重绘
+    this.render.redraw([GraphDraw.name, LinkDraw.name]);
+  }
+
+  // 选择节点
+  select(nodes: Konva.Node[]) {
+    if (nodes.length > 1) {
+      // 多选 不能改变大小/旋转
+      this.render.transformer.resizeEnabled(false);
+      this.render.transformer.rotateEnabled(false);
+    } else {
+      if (nodes.length === 1) {
+        const target = nodes[0];
+        // 图形 不能改变大小
+        this.render.transformer.resizeEnabled(
+          target.attrs.assetType === AssetType.Graph ? false : true
+        );
+        this.render.transformer.rotateEnabled(
+          target.attrs.assetType === AssetType.Graph &&
+            ["Line", "Curve", "Bezier"].includes(target.attrs.graphType)
+            ? false
+            : true
+        );
+      } else {
+        this.render.transformer.resizeEnabled(true);
+      }
+    }
+
+    // 清除连接线选中
+    this.render.linkTool.selectingClear();
+    // 选择变化了
+    this.render.emit('selection-change', nodes);
+    this.selectingClear(true);
+
+    if (nodes.length > 0) {
+      // 最大zIndex
+      const maxZIndex = Math.max(
+        ...this.render.layer
+          .getChildren((node) => !this.render.ignore(node))
+          .map((o) => o.zIndex())
+      );
+
+      // 记录状态
+      for (const node of nodes) {
+        node.setAttrs({
+          nodeMousedownPos: node.position(), // 后面用于移动所选
+          lastOpacity: node.opacity(), // 选中时，下面会使其变透明，记录原有的透明度
+          lastZIndex: node.zIndex(), // 记录原有的层次，后面暂时提升所选节点的层次
+          selectingZIndex: undefined,
+          selected: true, // 选择中
+          listening: false, // 不可交互
+          opacity: node.opacity() * 0.8 // 设置透明度
+        });
+      }
+
+      // 提升层次
+      for (const node of nodes.sort((a, b) => a.zIndex() - b.zIndex())) {
+        node.setAttrs({
+          zIndex: maxZIndex // 提升层次
+        });
+      }
+      // 选中的节点
+      this.selectingNodes = nodes;
+      // 选中的节点，放进 transformer
+      this.render.transformer.nodes(this.selectingNodes);
+    }
+    // 重绘
+    this.render.redraw([GraphDraw.name, LinkDraw.name]);
+  }
+
+  // 更新节点位置
+  selectingNodesMove(offset: Konva.Vector2d) {
+    for (const node of this.render.selectionTool.selectingNodes) {
+      node.x(node.x() + offset.x);
+      node.y(node.y() + offset.y);
+    }
+    this.render.emit('asset-position-change', this.render.selectionTool.selectingNodes);
+  }
+
+  // 选择所有节点
+  selectAll() {
+    const nodes = this.render.layer.find('.asset') as Konva.Node[];
+    this.select(nodes);
+  }
+}