aldehyde 0.2.474 → 0.2.476

package/lib/draw-canvas-edit/components/render/tools/asset-tool.js

@@ -0,0 +1,152 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import Konva from 'konva';
+import { PreviewDraw } from '../draws';
+const gifler = window.gifler;
+export class AssetTool {
+    constructor(render) {
+        this.render = render;
+    }
+    // 加载 svg xml
+    loadSvgXML(svgXML) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const blob = new Blob([svgXML], { type: 'image/svg+xml' });
+            const url = URL.createObjectURL(blob);
+            return new Promise((resolve) => {
+                Konva.Image.fromURL(url, (imageNode) => {
+                    imageNode.setAttrs({ svgXML });
+                    resolve(imageNode);
+                });
+            });
+        });
+    }
+    // 加载 svg
+    loadSvg(src) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const svgXML = yield (yield fetch(src)).text();
+            return this.loadSvgXML(this.render.setSvgXMLSettings(svgXML, this.render.getAssetSettings()));
+        });
+    }
+    // 加载 gif
+    loadGif(src) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((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, frame) => {
+                        var _a;
+                        ctx.drawImage(frame.buffer, frame.x, frame.y);
+                        this.render.layer.draw();
+                        // 更新预览（layer）
+                        (_a = this.render.draws[PreviewDraw.name]) === null || _a === void 0 ? void 0 : _a.layer.draw();
+                    });
+                    img.remove();
+                    // TODO: 拖动 gif 素材产生大量 JS event listeners
+                    resolve(new Konva.Image({ image: canvas, gif: src }));
+                };
+                img.src = src;
+            });
+        });
+    }
+    // 加载图片
+    loadImg(src) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve) => {
+                Konva.Image.fromURL(src, (imageNode) => {
+                    imageNode.setAttrs({ src });
+                    resolve(imageNode);
+                });
+            });
+        });
+    }
+    // 加载节点 json
+    loadJson(src) {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c;
+            try {
+                // 读取 json内容
+                const json = JSON.parse(yield (yield 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];
+                // 释放内存
+                stageEmpty.destroy();
+                groupTarget.remove();
+                stageReload.destroy();
+                // 深度遍历加载子素材
+                const nodes = [{ 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 = yield this.loadSvgXML(node.attrs.svgXML);
+                                n.listening(false);
+                                (_a = node.parent) === null || _a === void 0 ? void 0 : _a.add(n);
+                                node.remove();
+                            }
+                            else if (node.attrs.gif) {
+                                const n = yield this.loadGif(node.attrs.gif);
+                                n.listening(false);
+                                (_b = node.parent) === null || _b === void 0 ? void 0 : _b.add(n);
+                                node.remove();
+                            }
+                            else if (node.attrs.src) {
+                                const n = yield this.loadImg(node.attrs.src);
+                                n.listening(false);
+                                (_c = node.parent) === null || _c === void 0 ? void 0 : _c.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();
+            }
+        });
+    }
+}
+// @ts-ignore
+AssetTool.name = 'AssetTool';
+//# sourceMappingURL=asset-tool.js.map

package/lib/draw-canvas-edit/components/render/tools/asset-tool.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"asset-tool.js","sourceRoot":"","sources":["../../../../../../../src/aldehyde/draw-canvas-edit/components/render/tools/asset-tool.ts"],"names":[],"mappings":"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"}

package/lib/draw-canvas-edit/components/render/tools/attract-tool.d.ts

@@ -0,0 +1,36 @@
+import Konva from 'konva';
+import { Render } from '../index';
+import { SortItem } from '../types';
+interface AlignRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export declare class AttractTool {
+    static readonly name = "AttractTool";
+    private render;
+    constructor(render: Render);
+    alignLines: Konva.Line[];
+    alignLinesClear(): void;
+    getSortItems(rect: AlignRect): {
+        sortX: SortItem[];
+        sortY: SortItem[];
+    };
+    attractPoint: (pos: Konva.Vector2d) => {
+        pos: {
+            x: number;
+            y: number;
+        };
+        isAttract: boolean;
+    };
+    attractTransformer: (rect: AlignRect) => {
+        pos: {
+            x: number;
+            y: number;
+        };
+        isAttract: boolean;
+    };
+}
+export {};
+//# sourceMappingURL=attract-tool.d.ts.map

package/lib/draw-canvas-edit/components/render/tools/attract-tool.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"attract-tool.d.ts","sourceRoot":"","sources":["../../../../../../../src/aldehyde/draw-canvas-edit/components/render/tools/attract-tool.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEpC,UAAU,SAAS;IACjB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAID,qBAAa,WAAW;IAEtB,MAAM,CAAC,QAAQ,CAAC,IAAI,iBAAiB;IAErC,OAAO,CAAC,MAAM,CAAS;gBACX,MAAM,EAAE,MAAM;IAI1B,UAAU,EAAE,KAAK,CAAC,IAAI,EAAE,CAAM;IAG9B,eAAe;IAOf,YAAY,CAAC,IAAI,EAAE,SAAS;;;;IAyC5B,YAAY,GAAI,KAAK,KAAK,CAAC,QAAQ;;;;;;MAoLlC;IAED,kBAAkB,GAAI,MAAM,SAAS;;;;;;MAuLpC;CACF"}

package/lib/draw-canvas-edit/components/render/tools/attract-tool.js

@@ -0,0 +1,419 @@
+import Konva from 'konva';
+export class AttractTool {
+    constructor(render) {
+        // 对齐线
+        this.alignLines = [];
+        this.attractPoint = (pos) => {
+            this.alignLinesClear(); // 对齐线清除
+            const stageState = this.render.getStageState();
+            let newPosX = pos.x;
+            let newPosY = pos.y;
+            let isAttract = false;
+            let pairX = null;
+            let pairY = null;
+            // 对齐线 磁吸逻辑
+            if (!this.render.config.readonly && this.render.config.attractNode) {
+                const sortX = [{ value: this.render.toStageValue(newPosX - stageState.x) }], sortY = [{ value: this.render.toStageValue(newPosY - stageState.y) }];
+                // x 最短距离
+                let XMin = Infinity;
+                // x 最短距离的【对】（多个）
+                let pairXMin = [];
+                // y 最短距离
+                let YMin = Infinity;
+                // y 最短距离的【对】（多个）
+                let pairYMin = [];
+                // 一对对比较距离，记录最短距离的【对】
+                // 必须是 选择目标 与 其他节点 成【对】
+                // 可能有多个这样的【对】
+                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 === null || pairX === void 0 ? void 0 : 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 === null || pairY === void 0 ? void 0 : 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 };
+        };
+        // 磁吸逻辑
+        this.attractTransformer = (rect) => {
+            // 对齐线清除
+            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 = null;
+            let pairY = null;
+            // 对齐线 磁吸逻辑
+            if (!this.render.config.readonly && this.render.config.attractNode) {
+                const { sortX, sortY } = this.getSortItems(rect);
+                // x 最短距离
+                let XMin = Infinity;
+                // x 最短距离的【对】（多个）
+                let pairXMin = [];
+                // y 最短距离
+                let YMin = Infinity;
+                // y 最短距离的【对】（多个）
+                let pairYMin = [];
+                // 一对对比较距离，记录最短距离的【对】
+                // 必须是 选择目标 与 其他节点 成【对】
+                // 可能有多个这样的【对】
+                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 === null || pairX === void 0 ? void 0 : 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 === null || pairY === void 0 ? void 0 : 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 };
+        };
+        this.render = render;
+    }
+    // 对齐线清除
+    alignLinesClear() {
+        for (const line of this.alignLines) {
+            line.destroy();
+        }
+        this.alignLines = [];
+    }
+    getSortItems(rect) {
+        const stageState = this.render.getStageState();
+        // 横向所有需要判断对齐的 x 坐标
+        const sortX = [];
+        // 纵向向所有需要判断对齐的 y 坐标
+        const sortY = [];
+        // 选择目标所有的对齐 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 };
+    }
+}
+// @ts-ignore
+AttractTool.name = 'AttractTool';
+//# sourceMappingURL=attract-tool.js.map