aldehyde 0.2.472 → 0.2.474

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

@@ -0,0 +1,91 @@
+import Konva from 'konva';
+import { Render } from '../index';
+import { AlignType } from '../types';
+import { GraphDraw, LinkDraw, RulerDraw, PreviewDraw } from '../draws';
+
+// 工具栏对齐
+
+export class AlignTool {
+  // @ts-ignore
+  static readonly name = 'AlignTool';
+  private render: Render;
+  constructor(render: Render) {
+    this.render = render;
+  }
+
+  getAlignRect(node: Konva.Node | Konva.Transformer) {
+    const stageState = this.render.getStageState();
+    let width = 0, height = 0, x = 0, y = 0;
+    const result = node.getClientRect();
+    // 转为 逻辑觉尺寸
+    [width, height, x, y] = [
+      this.render.toStageValue(result.width),
+      this.render.toStageValue(result.height),
+      this.render.toStageValue(result.x - stageState.x),
+      this.render.toStageValue(result.y - stageState.y)
+    ];
+    return { width, height, x, y };
+  }
+
+  // 对齐参考点
+  getAlignPoints(node?: Konva.Node | Konva.Transformer): { [index: string]: number } {
+    let width = 0, height = 0, x = 0, y = 0;
+    if (node !== void 0) {
+      // 选择器 / 基于节点 逻辑觉尺寸
+      const rect = this.getAlignRect(node);
+      [width, height, x, y] = [rect.width, rect.height, rect.x, rect.y];
+    } else {   // 默认为选择器
+      return this.getAlignPoints(this.render.transformer);
+    }
+    return {
+      Middle: x + width / 2,
+      Left: x,
+      Right: x + width,
+      Center: y + height / 2,
+      Top: y,
+      Bottom: y + height
+    };
+  }
+
+  align(type: AlignType, target?: Konva.Node) {
+    // 对齐参考点（所有）
+    const points = this.getAlignPoints(target);
+    // 对齐参考点
+    const point = points[type];
+    // 需要移动的节点
+    const nodes = this.render.transformer.nodes().filter((node) => node !== target);
+    // 移动逻辑
+    for (const node of nodes) {
+      // 逻辑觉尺寸
+      const rect = this.getAlignRect(node);
+      const [width, height, x, y] = [rect.width, rect.height, rect.x, rect.y];
+      switch (type) {
+        case "Middle":
+        case "Left":
+        case "Right":
+          {
+            const cx = type === "Middle" ? x + width / 2 : type === "Left" ? x : x + width;
+            node.x(node.x() + (point - cx));
+          }
+          break;
+        case "Center":
+        case "Top":
+        case "Bottom":
+          {
+            const cy = type === "Center" ? y + height / 2 : type === "Top" ? y : y + height;
+            node.y(node.y() + (point - cy));
+          }
+          break;
+      }
+    }
+    // 更新历史
+    this.render.updateHistory();
+    // 重绘
+    this.render.redraw([
+      GraphDraw.name,
+      LinkDraw.name,
+      RulerDraw.name,
+      PreviewDraw.name
+    ]);
+  }
+}

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

@@ -0,0 +1,142 @@
+import Konva from 'konva';
+import { Render } from '../index';
+import { PreviewDraw } from '../draws';
+
+const gifler = (window as any).gifler;
+
+export class AssetTool {
+  // @ts-ignore
+  static readonly name = 'AssetTool';
+  private render: Render;
+  constructor(render: Render) {
+    this.render = render;
+  }
+
+  // 加载 svg xml
+  async loadSvgXML(svgXML: string) {
+    const blob = new Blob([svgXML], { type: 'image/svg+xml' });
+    const url = URL.createObjectURL(blob);
+    return new Promise<Konva.Image>((resolve) => {
+      Konva.Image.fromURL(url, (imageNode) => {
+        imageNode.setAttrs({ svgXML } as any);
+        resolve(imageNode);
+      });
+    });
+  }
+
+  // 加载 svg
+  async loadSvg(src: string) {
+    const svgXML = await (await fetch(src)).text();
+    return this.loadSvgXML(this.render.setSvgXMLSettings(svgXML, this.render.getAssetSettings()));
+  }
+
+  // 加载 gif
+  async loadGif(src: string) {
+    return new Promise<Konva.Image>((resolve) => {
+      const img = document.createElement('img');
+      img.onload = () => {
+        const canvas = document.createElement('canvas');
+        canvas.width = img.naturalWidth;
+        canvas.height = img.naturalHeight;
+        const gif = gifler(src);
+        gif.frames(canvas, (ctx: CanvasRenderingContext2D, frame: any) => {
+          ctx.drawImage(frame.buffer, frame.x, frame.y);
+          this.render.layer.draw();
+          // 更新预览（layer）
+          this.render.draws[PreviewDraw.name]?.layer.draw();
+        });
+        img.remove();
+        // TODO: 拖动 gif 素材产生大量 JS event listeners
+        resolve(new Konva.Image({ image: canvas, gif: src }));
+      }
+      img.src = src;
+    });
+  }
+
+  // 加载图片
+  async loadImg(src: string) {
+    return new Promise<Konva.Image>((resolve) => {
+      Konva.Image.fromURL(src, (imageNode) => {
+        imageNode.setAttrs({ src } as any);
+        resolve(imageNode);
+      });
+    });
+  }
+
+  // 加载节点 json
+  async loadJson(src: string) {
+    try {
+      // 读取 json内容
+      const json = JSON.parse(await (await fetch(src)).text());
+      // 子素材
+      const assets = json.children;
+      // 刷新id
+      this.render.linkTool.jsonIdCover(assets);
+      // 生成空白 stage+layer
+      const stageEmpty = new Konva.Stage({ container: document.createElement('div') });
+      const layerEmpty = new Konva.Layer();
+      stageEmpty.add(layerEmpty);
+      // 空白 json 根
+      const jsonRoot = JSON.parse(stageEmpty.toJSON());
+      jsonRoot.children[0].children = [json];
+      // 重新加载 stage
+      const stageReload = Konva.Node.create(JSON.stringify(jsonRoot), document.createElement('div'));
+      // 目标 group（即 json 转化后的节点）
+      const groupTarget = stageReload.children[0].children[0] as Konva.Group;
+      // 释放内存
+      stageEmpty.destroy();
+      groupTarget.remove();
+      stageReload.destroy();
+      // 深度遍历加载子素材
+      const nodes: {
+        target: Konva.Stage | Konva.Layer | Konva.Group | Konva.Node
+        parent?: Konva.Stage | Konva.Layer | Konva.Group | Konva.Node
+      }[] = [{ target: groupTarget }];
+      while (nodes.length > 0) {
+        const item = nodes.shift();
+        if (item) {
+          const node = item.target;
+          if (node instanceof Konva.Image) {
+            if (node.attrs.svgXML) {
+              const n = await this.loadSvgXML(node.attrs.svgXML);
+              n.listening(false);
+              node.parent?.add(n);
+              node.remove();
+            } else if (node.attrs.gif) {
+              const n = await this.loadGif(node.attrs.gif);
+              n.listening(false);
+              node.parent?.add(n);
+              node.remove();
+            } else if (node.attrs.src) {
+              const n = await this.loadImg(node.attrs.src);
+              n.listening(false);
+              node.parent?.add(n);
+              node.remove();
+            }
+          }
+          if (node instanceof Konva.Stage || node instanceof Konva.Layer || node instanceof Konva.Group) {
+            nodes.push(
+              ...node.getChildren().map((o) => ({
+                target: o,
+                parent: node
+              }))
+            );
+          }
+        }
+      }
+
+      // 作用：点击空白区域可选择
+      const clickMask = new Konva.Rect({
+        id: 'click-mask',
+        width: groupTarget.width(),
+        height: groupTarget.height()
+      });
+      groupTarget.add(clickMask);
+      clickMask.zIndex(1)
+      return groupTarget;
+    } catch (e) {
+      console.error(e);
+      return new Konva.Group();
+    }
+  }
+}

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

@@ -0,0 +1,440 @@
+import Konva from 'konva';
+import { Render } from '../index';
+import { SortItem } from '../types';
+
+interface AlignRect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+type SortItemPair = [SortItem, SortItem];
+
+export class AttractTool {
+  // @ts-ignore
+  static readonly name = 'AttractTool';
+
+  private render: Render;
+  constructor(render: Render) {
+    this.render = render;
+  }
+  // 对齐线
+  alignLines: Konva.Line[] = [];
+
+  // 对齐线清除
+  alignLinesClear() {
+    for (const line of this.alignLines) {
+      line.destroy();
+    }
+    this.alignLines = [];
+  }
+
+  getSortItems(rect: AlignRect) {
+    const stageState = this.render.getStageState();
+    // 横向所有需要判断对齐的 x 坐标
+    const sortX: Array<SortItem> = [];
+    // 纵向向所有需要判断对齐的 y 坐标
+    const sortY: Array<SortItem> = [];
+    // 选择目标所有的对齐 x
+    sortX.push(
+      { value: this.render.toStageValue(rect.x - stageState.x) },
+      { value: this.render.toStageValue(rect.x - stageState.x + rect.width / 2) },
+      { value: this.render.toStageValue(rect.x - stageState.x + rect.width) }
+    );
+    // 选择目标所有的对齐 y
+    sortY.push(
+      { value: this.render.toStageValue(rect.y - stageState.y) },
+      { value: this.render.toStageValue(rect.y - stageState.y + rect.height / 2) },
+      { value: this.render.toStageValue(rect.y - stageState.y + rect.height) }
+    );
+    // 拖动目标
+    const targetIds = this.render.selectionTool.selectingNodes.map((o) => o._id);
+    // 除拖动目标的其他
+    const otherNodes = this.render.layer.find('.asset').filter((node) => !targetIds.includes(node._id));
+    // 其他节点所有的 x / y 坐标
+    for (const node of otherNodes) {
+      const nodeRect = node.getClientRect();
+      sortX.push(
+        { id: node._id, value: this.render.toStageValue(nodeRect.x - stageState.x) },
+        { id: node._id, value: this.render.toStageValue(nodeRect.x - stageState.x + nodeRect.width / 2) },
+        { id: node._id, value: this.render.toStageValue(nodeRect.x - stageState.x + nodeRect.width) }
+      );
+      sortY.push(
+        { id: node._id, value: this.render.toStageValue(nodeRect.y - stageState.y) },
+        { id: node._id, value: this.render.toStageValue(nodeRect.y - stageState.y + nodeRect.height / 2) },
+        { id: node._id, value: this.render.toStageValue(nodeRect.y - stageState.y + nodeRect.height) }
+      );
+    }
+    sortX.sort((a, b) => a.value - b.value);
+    sortY.sort((a, b) => a.value - b.value);
+    return { sortX, sortY };
+  }
+
+  attractPoint = (pos: Konva.Vector2d) => {
+    this.alignLinesClear(); // 对齐线清除
+    const stageState = this.render.getStageState();
+    let newPosX = pos.x;
+    let newPosY = pos.y;
+    let isAttract = false;
+    let pairX: SortItemPair | null = null;
+    let pairY: SortItemPair | null = null;
+    // 对齐线 磁吸逻辑
+    if (!this.render.config.readonly && this.render.config.attractNode) {
+      const sortX = [{ value: this.render.toStageValue(newPosX - stageState.x) }] as SortItem[],
+        sortY = [{ value: this.render.toStageValue(newPosY - stageState.y) }] as SortItem[];
+      // x 最短距离
+      let XMin = Infinity;
+      // x 最短距离的【对】（多个）
+      let pairXMin: Array<SortItemPair> = [];
+      // y 最短距离
+      let YMin = Infinity;
+      // y 最短距离的【对】（多个）
+      let pairYMin: Array<SortItemPair> = [];
+      // 一对对比较距离，记录最短距离的【对】
+      // 必须是 选择目标 与 其他节点 成【对】
+      // 可能有多个这样的【对】
+      for (let i = 0; i < sortX.length - 1; i++) {
+        // 相邻两个点，必须为 目标节点 + 非目标节点
+        if ((sortX[i].id === void 0 && sortX[i + 1].id !== void 0) || (sortX[i].id !== void 0 && sortX[i + 1].id === void 0)) {
+          // 相邻两个点的 x 距离
+          const offset = Math.abs(sortX[i].value - sortX[i + 1].value);
+          if (offset < XMin) {
+            // 更新 x 最短距离 记录
+            XMin = offset;
+            // 更新 x 最短距离的【对】 记录
+            pairXMin = [[sortX[i], sortX[i + 1]]];
+          } else if (offset === XMin) {
+            // 存在多个 x 最短距离
+            pairXMin.push([sortX[i], sortX[i + 1]]);
+          }
+        }
+      }
+      for (let i = 0; i < sortY.length - 1; i++) {
+        // 相邻两个点，必须为 目标节点 + 非目标节点
+        if ((sortY[i].id === void 0 && sortY[i + 1].id !== void 0) || (sortY[i].id !== void 0 && sortY[i + 1].id === void 0)) {
+          // 相邻两个点的 y 距离
+          const offset = Math.abs(sortY[i].value - sortY[i + 1].value);
+          if (offset < YMin) {
+            // 更新 y 最短距离 记录
+            YMin = offset;
+            // 更新 y 最短距离的【对】 记录
+            pairYMin = [[sortY[i], sortY[i + 1]]];
+          } else if (offset === YMin) {
+            // 存在多个 y 最短距离
+            pairYMin.push([sortY[i], sortY[i + 1]]);
+          }
+        }
+      }
+      //  取第一【对】，用于判断距离是否在阈值内
+      if (pairXMin[0]) {
+        if (Math.abs(pairXMin[0][0].value - pairXMin[0][1].value) < this.render.bgSize / 2) {
+          pairX = pairXMin[0];
+        }
+      }
+      if (pairYMin[0]) {
+        if (Math.abs(pairYMin[0][0].value - pairYMin[0][1].value) < this.render.bgSize / 2) {
+          pairY = pairYMin[0];
+        }
+      }
+      // 优先对齐节点
+      // 存在 1或多个 x 最短距离 满足阈值
+      if (pairX?.length === 2) {
+        for (const pair of pairXMin) {
+          // 【对】里的那个非目标节点
+          const other = pair.find((o) => o.id !== void 0);
+          if (other) {  // x 对齐线
+            const line = new Konva.Line({
+              points: [[other.value, this.render.toStageValue(-stageState.y)], [other.value, this.render.toStageValue(this.render.stage.height() - stageState.y)]].flat(),
+              stroke: 'blue',
+              strokeWidth: this.render.toStageValue(1),
+              dash: [4, 4],
+              listening: false
+            });
+            this.alignLines.push(line);
+            this.render.layerCover.add(line);
+          }
+        }
+        // 磁贴第一个【对】
+        const target = pairX.find((o) => o.id === void 0);
+        const other = pairX.find((o) => o.id !== void 0);
+        if (target && other) {
+          // 磁铁坐标值
+          newPosX = newPosX - this.render.toBoardValue(target.value - other.value);
+          isAttract = true;
+        }
+      }
+      // 存在 1或多个 y 最短距离 满足阈值
+      if (pairY?.length === 2) {
+        for (const pair of pairYMin) {
+          // 【对】里的那个非目标节点
+          const other = pair.find((o) => o.id !== void 0);
+          if (other) {
+            // y 对齐线
+            const line = new Konva.Line({
+              points: [[this.render.toStageValue(-stageState.x), other.value], [this.render.toStageValue(this.render.stage.width() - stageState.x), other.value]].flat(),
+              stroke: 'blue',
+              strokeWidth: this.render.toStageValue(1),
+              dash: [4, 4],
+              listening: false
+            });
+            this.alignLines.push(line);
+            this.render.layerCover.add(line);
+          }
+        }
+        // 磁贴第一个【对】
+        const target = pairY.find((o) => o.id === void 0);
+        const other = pairY.find((o) => o.id !== void 0);
+        if (target && other) {
+          // 磁铁坐标值
+          newPosY = newPosY - this.render.toBoardValue(target.value - other.value);
+          isAttract = true;
+        }
+      }
+    }
+    if (!this.render.config.readonly && this.render.config.attractBg) {
+      // 没有 x 对齐节点
+      if (pairX === null) {
+        const logicLeftX = this.render.toStageValue(newPosX - stageState.x); // x坐标
+        const logicNumLeftX = Math.round(logicLeftX / this.render.bgSize); // x单元格个数
+        const logicClosestLeftX = logicNumLeftX * this.render.bgSize; // x磁贴目标坐标
+        const logicDiffLeftX = Math.abs(logicLeftX - logicClosestLeftX); // x磁贴偏移量
+        const logicRightX = this.render.toStageValue(newPosX - stageState.x); // x坐标
+        const logicNumRightX = Math.round(logicRightX / this.render.bgSize); // x单元格个数
+        const logicClosestRightX = logicNumRightX * this.render.bgSize; // x磁贴目标坐标
+        const logicDiffRightX = Math.abs(logicRightX - logicClosestRightX); // x磁贴偏移量
+        // stage 逻辑边界磁贴
+        const logicStageRightX = stageState.width;
+        const logicDiffStageRightX = Math.abs(logicRightX - logicStageRightX);
+        // 距离近优先
+        for (const diff of [{ type: 'leftX', value: logicDiffLeftX }, { type: 'rightX', value: logicDiffRightX }, { type: 'stageRightX', value: logicDiffStageRightX }].sort((a, b) => a.value - b.value)) {
+          if (diff.value < 5) {
+            if (diff.type === 'stageRightX') {
+              newPosX = this.render.toBoardValue(logicStageRightX) + stageState.x;
+            } else if (diff.type === 'leftX') {
+              newPosX = this.render.toBoardValue(logicClosestLeftX) + stageState.x;
+            } else if (diff.type === 'rightX') {
+              newPosX = this.render.toBoardValue(logicClosestRightX) + stageState.x;
+            }
+            isAttract = true;
+            break;
+          }
+        }
+      }
+      // 没有 y 对齐节点
+      if (pairY === null) {
+        const logicTopY = this.render.toStageValue(newPosY - stageState.y); // y坐标
+        const logicNumTopY = Math.round(logicTopY / this.render.bgSize); // y单元格个数
+        const logicClosestTopY = logicNumTopY * this.render.bgSize; // y磁贴目标坐标
+        const logicDiffTopY = Math.abs(logicTopY - logicClosestTopY); // y磁贴偏移量
+        const logicBottomY = this.render.toStageValue(newPosY - stageState.y); // y坐标
+        const logicNumBottomY = Math.round(logicBottomY / this.render.bgSize); // y单元格个数
+        const logicClosestBottomY = logicNumBottomY * this.render.bgSize; // y磁贴目标坐标
+        const logicDiffBottomY = Math.abs(logicBottomY - logicClosestBottomY); // y磁贴偏移量
+        // stage 逻辑边界磁贴
+        const logicStageBottomY = stageState.height;
+        const logicDiffStageBottomY = Math.abs(logicBottomY - logicStageBottomY);
+        // 距离近优先
+        for (const diff of [{ type: 'topY', value: logicDiffTopY }, { type: 'bottomY', value: logicDiffBottomY }, { type: 'stageBottomY', value: logicDiffStageBottomY }].sort((a, b) => a.value - b.value)) {
+          if (diff.value < 5) {
+            if (diff.type === 'stageBottomY') {
+              newPosY = this.render.toBoardValue(logicStageBottomY) + stageState.y;
+            } else if (diff.type === 'topY') {
+              newPosY = this.render.toBoardValue(logicClosestTopY) + stageState.y;
+            } else if (diff.type === 'bottomY') {
+              newPosY = this.render.toBoardValue(logicClosestBottomY) + stageState.y;
+            }
+            isAttract = true;
+            break;
+          }
+        }
+      }
+    }
+    return { pos: { x: newPosX, y: newPosY }, isAttract };
+  }
+  // 磁吸逻辑
+  attractTransformer = (rect: AlignRect) => {
+    // 对齐线清除
+    this.alignLinesClear();
+    const stageState = this.render.getStageState();
+    const width = this.render.transformer.width();
+    const height = this.render.transformer.height();
+    let newPosX = rect.x;
+    let newPosY = rect.y;
+    let isAttract = false;
+    let pairX: SortItemPair | null = null;
+    let pairY: SortItemPair | null = null;
+    // 对齐线 磁吸逻辑
+    if (!this.render.config.readonly && this.render.config.attractNode) {
+      const { sortX, sortY } = this.getSortItems(rect);
+      // x 最短距离
+      let XMin = Infinity;
+      // x 最短距离的【对】（多个）
+      let pairXMin: Array<SortItemPair> = [];
+      // y 最短距离
+      let YMin = Infinity;
+      // y 最短距离的【对】（多个）
+      let pairYMin: Array<SortItemPair> = [];
+      // 一对对比较距离，记录最短距离的【对】
+      // 必须是 选择目标 与 其他节点 成【对】
+      // 可能有多个这样的【对】
+      for (let i = 0; i < sortX.length - 1; i++) {
+        // 相邻两个点，必须为 目标节点 + 非目标节点
+        if ((sortX[i].id === void 0 && sortX[i + 1].id !== void 0) || (sortX[i].id !== void 0 && sortX[i + 1].id === void 0)) {
+          // 相邻两个点的 x 距离
+          const offset = Math.abs(sortX[i].value - sortX[i + 1].value)
+          if (offset < XMin) {
+            // 更新 x 最短距离 记录
+            XMin = offset;
+            // 更新 x 最短距离的【对】 记录
+            pairXMin = [[sortX[i], sortX[i + 1]]];
+          } else if (offset === XMin) {
+            // 存在多个 x 最短距离
+            pairXMin.push([sortX[i], sortX[i + 1]]);
+          }
+        }
+      }
+      for (let i = 0; i < sortY.length - 1; i++) {
+        // 相邻两个点，必须为 目标节点 + 非目标节点
+        if ((sortY[i].id === void 0 && sortY[i + 1].id !== void 0) || (sortY[i].id !== void 0 && sortY[i + 1].id === void 0)) {
+          // 相邻两个点的 y 距离
+          const offset = Math.abs(sortY[i].value - sortY[i + 1].value);
+          if (offset < YMin) {
+            // 更新 y 最短距离 记录
+            YMin = offset;
+            // 更新 y 最短距离的【对】 记录
+            pairYMin = [[sortY[i], sortY[i + 1]]];
+          } else if (offset === YMin) {
+            // 存在多个 y 最短距离
+            pairYMin.push([sortY[i], sortY[i + 1]]);
+          }
+        }
+      }
+      // 取第一【对】，用于判断距离是否在阈值内
+      if (pairXMin[0]) {
+        if (Math.abs(pairXMin[0][0].value - pairXMin[0][1].value) < this.render.bgSize / 2) {
+          pairX = pairXMin[0];
+        }
+      }
+      if (pairYMin[0]) {
+        if (Math.abs(pairYMin[0][0].value - pairYMin[0][1].value) < this.render.bgSize / 2) {
+          pairY = pairYMin[0];
+        }
+      }
+      // 优先对齐节点
+      // 存在 1或多个 x 最短距离 满足阈值
+      if (pairX?.length === 2) {
+        for (const pair of pairXMin) {
+          // 【对】里的那个非目标节点
+          const other = pair.find((o) => o.id !== void 0);
+          if (other) {
+            // x 对齐线
+            const line = new Konva.Line({
+              points: [[other.value, this.render.toStageValue(-stageState.y)], [other.value, this.render.toStageValue(this.render.stage.height() - stageState.y)]].flat(),
+              stroke: 'blue',
+              strokeWidth: this.render.toStageValue(1),
+              dash: [4, 4],
+              listening: false
+            });
+            this.alignLines.push(line);
+            this.render.layerCover.add(line);
+          }
+        }
+        // 磁贴第一个【对】
+        const target = pairX.find((o) => o.id === void 0);
+        const other = pairX.find((o) => o.id !== void 0);
+        if (target && other) {
+          // 磁贴坐标值
+          newPosX = newPosX - this.render.toBoardValue(target.value - other.value);
+          isAttract = true;
+        }
+      }
+      // 存在 1或多个 y 最短距离 满足阈值
+      if (pairY?.length === 2) {
+        for (const pair of pairYMin) {
+          // 【对】里的那个非目标节点
+          const other = pair.find((o) => o.id !== void 0);
+          if (other) {
+            // y 对齐线
+            const line = new Konva.Line({
+              points: [[this.render.toStageValue(-stageState.x), other.value], [this.render.toStageValue(this.render.stage.width() - stageState.x), other.value]].flat(),
+              stroke: 'blue',
+              strokeWidth: this.render.toStageValue(1),
+              dash: [4, 4],
+              listening: false
+            });
+            this.alignLines.push(line);
+            this.render.layerCover.add(line);
+          }
+        }
+        // 磁贴第一个【对】
+        const target = pairY.find((o) => o.id === void 0);
+        const other = pairY.find((o) => o.id !== void 0);
+        if (target && other) {
+          // 磁贴坐标值
+          newPosY = newPosY - this.render.toBoardValue(target.value - other.value);
+          isAttract = true;
+        }
+      }
+    }
+    if (!this.render.config.readonly && this.render.config.attractBg) {
+      // 没有 x 对齐节点
+      if (pairX === null) {
+        const logicLeftX = this.render.toStageValue(newPosX - stageState.x); // x坐标
+        const logicNumLeftX = Math.round(logicLeftX / this.render.bgSize); // x单元格个数
+        const logicClosestLeftX = logicNumLeftX * this.render.bgSize; // x磁贴目标坐标
+        const logicDiffLeftX = Math.abs(logicLeftX - logicClosestLeftX); // x磁贴偏移量
+        const logicRightX = this.render.toStageValue(newPosX + width - stageState.x); // x坐标
+        const logicNumRightX = Math.round(logicRightX / this.render.bgSize); // x单元格个数
+        const logicClosestRightX = logicNumRightX * this.render.bgSize; // x磁贴目标坐标
+        const logicDiffRightX = Math.abs(logicRightX - logicClosestRightX); // x磁贴偏移量
+        // stage 逻辑边界磁贴
+        const logicStageRightX = stageState.width;
+        const logicDiffStageRightX = Math.abs(logicRightX - logicStageRightX);
+        // 距离近优先
+        for (const diff of [{ type: 'leftX', value: logicDiffLeftX }, { type: 'rightX', value: logicDiffRightX }, { type: 'stageRightX', value: logicDiffStageRightX }].sort((a, b) => a.value - b.value)) {
+          if (diff.value < 5) {
+            if (diff.type === 'stageRightX') {
+              newPosX = this.render.toBoardValue(logicStageRightX) + stageState.x - width;
+            } else if (diff.type === 'leftX') {
+              newPosX = this.render.toBoardValue(logicClosestLeftX) + stageState.x;
+            } else if (diff.type === 'rightX') {
+              newPosX = this.render.toBoardValue(logicClosestRightX) + stageState.x - width;
+            }
+            isAttract = true;
+            break;
+          }
+        }
+      }
+      // 没有 y 对齐节点
+      if (pairY === null) {
+        const logicTopY = this.render.toStageValue(newPosY - stageState.y); // y坐标
+        const logicNumTopY = Math.round(logicTopY / this.render.bgSize); // y单元格个数
+        const logicClosestTopY = logicNumTopY * this.render.bgSize; // y磁贴目标坐标
+        const logicDiffTopY = Math.abs(logicTopY - logicClosestTopY); // y磁贴偏移量
+        const logicBottomY = this.render.toStageValue(newPosY + height - stageState.y); // y坐标
+        const logicNumBottomY = Math.round(logicBottomY / this.render.bgSize); // y单元格个数
+        const logicClosestBottomY = logicNumBottomY * this.render.bgSize; // y磁贴目标坐标
+        const logicDiffBottomY = Math.abs(logicBottomY - logicClosestBottomY); // y磁贴偏移量
+        // stage 逻辑边界磁贴
+        const logicStageBottomY = stageState.height;
+        const logicDiffStageBottomY = Math.abs(logicBottomY - logicStageBottomY);
+        // 距离近优先
+        for (const diff of [{ type: 'topY', value: logicDiffTopY }, { type: 'bottomY', value: logicDiffBottomY }, { type: 'stageBottomY', value: logicDiffStageBottomY }].sort((a, b) => a.value - b.value)) {
+          if (diff.value < 5) {
+            if (diff.type === 'stageBottomY') {
+              newPosY = this.render.toBoardValue(logicStageBottomY) + stageState.y - height;
+            } else if (diff.type === 'topY') {
+              newPosY = this.render.toBoardValue(logicClosestTopY) + stageState.y;
+            } else if (diff.type === 'bottomY') {
+              newPosY = this.render.toBoardValue(logicClosestBottomY) + stageState.y - height;
+            }
+            isAttract = true;
+            break;
+          }
+        }
+      }
+    }
+    return { pos: { x: newPosX, y: newPosY }, isAttract };
+  }
+}