@antv/infographic 0.2.13 → 0.2.15

package/lib/designs/utils/geometry.js

@@ -0,0 +1,256 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getEdgePathD = exports.getLabelPosition = exports.getPointAtT = exports.getTangentAngle = exports.getNodesAnchors = exports.createArrowElements = exports.createRoundedPath = exports.createStraightPath = exports.getMidPoint = void 0;
+const jsx_runtime_1 = require("@antv/infographic/jsx-runtime");
+const jsx_1 = require("../../jsx");
+const getMidPoint = (points) => {
+    if (points.length === 0)
+        return null;
+    if (points.length === 1)
+        return points[0];
+    let total = 0;
+    const segments = [];
+    for (let i = 0; i < points.length - 1; i += 1) {
+        const start = points[i];
+        const end = points[i + 1];
+        const length = Math.hypot(end[0] - start[0], end[1] - start[1]);
+        segments.push({ length, start, end });
+        total += length;
+    }
+    if (total === 0)
+        return points[0];
+    let target = total / 2;
+    for (let i = 0; i < segments.length; i += 1) {
+        const segment = segments[i];
+        if (target <= segment.length || i === segments.length - 1) {
+            const ratio = segment.length === 0
+                ? 0
+                : Math.max(0, Math.min(1, target / segment.length));
+            return [
+                segment.start[0] + (segment.end[0] - segment.start[0]) * ratio,
+                segment.start[1] + (segment.end[1] - segment.start[1]) * ratio,
+            ];
+        }
+        target -= segment.length;
+    }
+    return points[Math.floor(points.length / 2)];
+};
+exports.getMidPoint = getMidPoint;
+const createStraightPath = (points, dx, dy) => points
+    .map(([x, y], index) => {
+    const prefix = index === 0 ? 'M' : 'L';
+    return `${prefix} ${x + dx} ${y + dy}`;
+})
+    .join(' ');
+exports.createStraightPath = createStraightPath;
+const createRoundedPath = (points, radius, dx, dy) => {
+    if (points.length < 2)
+        return '';
+    const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+    const toPoint = ([x, y]) => ({
+        x: x + dx,
+        y: y + dy,
+    });
+    const output = [];
+    const first = toPoint(points[0]);
+    output.push(`M ${first.x} ${first.y}`);
+    if (points.length === 2) {
+        const last = toPoint(points[1]);
+        output.push(`L ${last.x} ${last.y}`);
+        return output.join(' ');
+    }
+    for (let i = 1; i < points.length - 1; i += 1) {
+        const prev = points[i - 1];
+        const curr = points[i];
+        const next = points[i + 1];
+        const v0x = curr[0] - prev[0];
+        const v0y = curr[1] - prev[1];
+        const v1x = next[0] - curr[0];
+        const v1y = next[1] - curr[1];
+        const d0 = Math.hypot(v0x, v0y);
+        const d1 = Math.hypot(v1x, v1y);
+        if (d0 === 0 || d1 === 0) {
+            const currPoint = toPoint(curr);
+            output.push(`L ${currPoint.x} ${currPoint.y}`);
+            continue;
+        }
+        const r = clamp(radius, 0, Math.min(d0, d1) / 2);
+        if (r === 0) {
+            const currPoint = toPoint(curr);
+            output.push(`L ${currPoint.x} ${currPoint.y}`);
+            continue;
+        }
+        const u0x = v0x / d0;
+        const u0y = v0y / d0;
+        const u1x = v1x / d1;
+        const u1y = v1y / d1;
+        const start = toPoint([curr[0] - u0x * r, curr[1] - u0y * r]);
+        const end = toPoint([curr[0] + u1x * r, curr[1] + u1y * r]);
+        output.push(`L ${start.x} ${start.y}`);
+        const currPoint = toPoint(curr);
+        output.push(`Q ${currPoint.x} ${currPoint.y} ${end.x} ${end.y}`);
+    }
+    const last = toPoint(points[points.length - 1]);
+    output.push(`L ${last.x} ${last.y}`);
+    return output.join(' ');
+};
+exports.createRoundedPath = createRoundedPath;
+const createArrowElements = (x, y, angle, type, fillColor, edgeWidth, arrowSize) => {
+    const ux = Math.cos(angle);
+    const uy = Math.sin(angle);
+    const px = -uy;
+    const py = ux;
+    const length = arrowSize;
+    const halfWidth = arrowSize * 0.55;
+    if (type === 'arrow') {
+        const leftX = x - ux * length + px * halfWidth;
+        const leftY = y - uy * length + py * halfWidth;
+        const rightX = x - ux * length - px * halfWidth;
+        const rightY = y - uy * length - py * halfWidth;
+        return [
+            (0, jsx_runtime_1.jsx)(jsx_1.Path, { d: `M ${leftX} ${leftY} L ${x} ${y} L ${rightX} ${rightY}`, stroke: fillColor, strokeWidth: Math.max(1.5, edgeWidth), strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }),
+        ];
+    }
+    if (type === 'diamond') {
+        const diamondLength = length * 1.25;
+        const diamondWidth = halfWidth * 0.75;
+        const midX = x - ux * diamondLength * 0.5;
+        const midY = y - uy * diamondLength * 0.5;
+        const diamondPoints = [
+            { x, y },
+            { x: midX + px * diamondWidth, y: midY + py * diamondWidth },
+            { x: x - ux * diamondLength, y: y - uy * diamondLength },
+            { x: midX - px * diamondWidth, y: midY - py * diamondWidth },
+        ];
+        return [
+            (0, jsx_runtime_1.jsx)(jsx_1.Polygon, { points: diamondPoints, fill: fillColor, stroke: fillColor, strokeWidth: Math.max(1, edgeWidth * 0.8) }),
+        ];
+    }
+    const trianglePoints = [
+        { x, y },
+        {
+            x: x - ux * length + px * halfWidth,
+            y: y - uy * length + py * halfWidth,
+        },
+        {
+            x: x - ux * length - px * halfWidth,
+            y: y - uy * length - py * halfWidth,
+        },
+    ];
+    return [
+        (0, jsx_runtime_1.jsx)(jsx_1.Polygon, { points: trianglePoints, fill: fillColor, stroke: fillColor, strokeWidth: Math.max(1, edgeWidth * 0.8) }),
+    ];
+};
+exports.createArrowElements = createArrowElements;
+// LT: Left Top (radio), LC: Left Center (1/2), LB: Left Bottom (1 - radio)
+// RT: Right Top (radio), RC: Right Center (1/2), RB: Right Bottom (1 - radio)
+const getNodesAnchors = (node) => {
+    const { x, y, width, height, radio = 0.25 } = node;
+    const q1H = height * radio;
+    const halfH = height * 0.5;
+    const q3H = height * (1 - radio);
+    return {
+        LT: { x, y: y + q1H },
+        LC: { x, y: y + halfH },
+        LB: { x, y: y + q3H },
+        RT: { x: x + width, y: y + q1H },
+        RC: { x: x + width, y: y + halfH },
+        RB: { x: x + width, y: y + q3H },
+    };
+};
+exports.getNodesAnchors = getNodesAnchors;
+const getTangentAngle = (points, t) => {
+    const len = points.length;
+    // Cubic Bezier (Self loop)
+    if (len === 4) {
+        const p0 = points[0], p1 = points[1], p2 = points[2], p3 = points[3];
+        if (t === 0) {
+            return Math.atan2(p1[1] - p0[1], p1[0] - p0[0]);
+        }
+        else {
+            return Math.atan2(p3[1] - p2[1], p3[0] - p2[0]);
+        }
+    }
+    // Quad Bezier (Curved)
+    if (len === 3) {
+        const p0 = points[0], p1 = points[1], p2 = points[2];
+        if (t === 0) {
+            return Math.atan2(p1[1] - p0[1], p1[0] - p0[0]);
+        }
+        else {
+            return Math.atan2(p2[1] - p1[1], p2[0] - p1[0]);
+        }
+    }
+    // Line
+    if (len === 2) {
+        const p0 = points[0], p1 = points[1];
+        const angle = Math.atan2(p1[1] - p0[1], p1[0] - p0[0]);
+        return angle;
+    }
+    return 0;
+};
+exports.getTangentAngle = getTangentAngle;
+/**
+ * 计算贝塞尔曲线上任意 t (0-1) 位置的点
+ */
+const getPointAtT = (points, t = 0.5) => {
+    const len = points.length;
+    if (len === 4) {
+        const [p0, p1, p2, p3] = points;
+        const mt = 1 - t;
+        // B(t) = (1-t)^3*P0 + 3(1-t)^2*t*P1 + 3(1-t)*t^2*P2 + t^3*P3
+        return [
+            Math.pow(mt, 3) * p0[0] +
+                3 * Math.pow(mt, 2) * t * p1[0] +
+                3 * mt * Math.pow(t, 2) * p2[0] +
+                Math.pow(t, 3) * p3[0],
+            Math.pow(mt, 3) * p0[1] +
+                3 * Math.pow(mt, 2) * t * p1[1] +
+                3 * mt * Math.pow(t, 2) * p2[1] +
+                Math.pow(t, 3) * p3[1],
+        ];
+    }
+    if (len === 3) {
+        const [p0, p1, p2] = points;
+        const mt = 1 - t;
+        // B(t) = (1-t)^2*P0 + 2(1-t)*t*P1 + t^2*P2
+        return [
+            Math.pow(mt, 2) * p0[0] + 2 * mt * t * p1[0] + Math.pow(t, 2) * p2[0],
+            Math.pow(mt, 2) * p0[1] + 2 * mt * t * p1[1] + Math.pow(t, 2) * p2[1],
+        ];
+    }
+    if (len === 2) {
+        const [p0, p1] = points;
+        return [p0[0] + (p1[0] - p0[0]) * t, p0[1] + (p1[1] - p0[1]) * t];
+    }
+    return points[0] || [0, 0];
+};
+exports.getPointAtT = getPointAtT;
+const getLabelPosition = (points, selfLoopOffset = 10) => {
+    const len = points.length;
+    // 默认取中点
+    const labelPoint = (0, exports.getPointAtT)(points);
+    if (len === 4) {
+        // 针对自连接(len=4)的特殊偏移处理
+        labelPoint[0] += selfLoopOffset;
+    }
+    return labelPoint;
+};
+exports.getLabelPosition = getLabelPosition;
+const getEdgePathD = (points) => {
+    const len = points.length;
+    if (len === 4) {
+        const [p0, p1, p2, p3] = points;
+        return `M ${p0[0]} ${p0[1]} C ${p1[0]} ${p1[1]} ${p2[0]} ${p2[1]} ${p3[0]} ${p3[1]}`;
+    }
+    if (len === 3) {
+        const [p0, p1, p2] = points;
+        return `M ${p0[0]} ${p0[1]} Q ${p1[0]} ${p1[1]} ${p2[0]} ${p2[1]}`;
+    }
+    if (len === 2) {
+        const [p0, p1] = points;
+        return `M ${p0[0]} ${p0[1]} L ${p1[0]} ${p1[1]}`;
+    }
+    return '';
+};
+exports.getEdgePathD = getEdgePathD;

package/lib/designs/utils/index.d.ts

@@ -1,4 +1,5 @@
 export * from './color';
+export * from './geometry';
 export * from './hierarchy-color';
 export * from './item';
 export * from './normalize-percent';

package/lib/designs/utils/index.js

@@ -15,6 +15,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./color"), exports);
+__exportStar(require("./geometry"), exports);
 __exportStar(require("./hierarchy-color"), exports);
 __exportStar(require("./item"), exports);
 __exportStar(require("./normalize-percent"), exports);

package/lib/editor/commands/UpdateOptions.d.ts

@@ -1,14 +1,14 @@
-import type { ParsedInfographicOptions } from '../../options';
+import type { UpdatableInfographicOptions } from '../../options';
 import type { ICommand, IStateManager } from '../types';
 export declare class UpdateOptionsCommand implements ICommand {
     private options;
     private original?;
-    constructor(options: Partial<ParsedInfographicOptions>, original?: ParsedInfographicOptions | undefined);
+    constructor(options: UpdatableInfographicOptions, original?: UpdatableInfographicOptions | undefined);
     apply(state: IStateManager): Promise<void>;
     undo(state: IStateManager): Promise<void>;
     serialize(): {
         type: string;
-        options: Partial<ParsedInfographicOptions>;
-        original: ParsedInfographicOptions | undefined;
+        options: Partial<Omit<import("../../options").ParsedInfographicOptions, "container">>;
+        original: Partial<Omit<import("../../options").ParsedInfographicOptions, "container">> | undefined;
     };
 }

package/lib/editor/commands/UpdateOptions.js

@@ -17,11 +17,14 @@ class UpdateOptionsCommand {
     }
     apply(state) {
         return __awaiter(this, void 0, void 0, function* () {
-            const prev = state.getOptions();
             if (!this.original) {
-                this.original = prev;
+                const prev = state.getOptions();
+                this.original = {};
+                Object.keys(this.options).forEach((key) => {
+                    this.original[key] = prev[key];
+                });
             }
-            state.updateOptions(Object.assign(Object.assign({}, prev), this.options));
+            state.updateOptions(this.options);
         });
     }
     undo(state) {

package/lib/editor/editor.d.ts

@@ -1,7 +1,7 @@
 import type { ParsedInfographicOptions } from '../options';
 import type { IEventEmitter } from '../types';
 import { InteractionManager } from './managers';
-import type { ICommandManager, IEditor, IPluginManager, IStateManager } from './types';
+import type { ICommandManager, IEditor, IPluginManager, IStateManager, ISyncRegistry, SyncHandler } from './types';
 export declare class Editor implements IEditor {
     private emitter;
     private document;
@@ -10,7 +10,11 @@ export declare class Editor implements IEditor {
     commander: ICommandManager;
     plugin: IPluginManager;
     interaction: InteractionManager;
+    syncRegistry: ISyncRegistry;
     constructor(emitter: IEventEmitter, document: SVGSVGElement, options: ParsedInfographicOptions);
+    registerSync(path: string, handler: SyncHandler, options?: {
+        immediate?: boolean;
+    }): () => void;
     getDocument(): SVGSVGElement;
     destroy(): void;
 }

package/lib/editor/editor.js

@@ -2,6 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Editor = void 0;
 const managers_1 = require("./managers");
+const sync_registry_1 = require("./managers/sync-registry");
+const plugins_1 = require("./plugins");
 class Editor {
     constructor(emitter, document, options) {
         this.emitter = emitter;
@@ -15,6 +17,12 @@ class Editor {
         const state = new managers_1.StateManager();
         const plugin = new managers_1.PluginManager();
         const interaction = new managers_1.InteractionManager();
+        const syncRegistry = new sync_registry_1.SyncRegistry(() => state.getOptions());
+        this.commander = commander;
+        this.state = state;
+        this.plugin = plugin;
+        this.interaction = interaction;
+        this.syncRegistry = syncRegistry;
         commander.init({ state, emitter });
         state.init({
             emitter,
@@ -22,12 +30,15 @@ class Editor {
             commander,
             options,
         });
+        // Load core plugin: CoreSyncPlugin (handles viewBox/padding sync)
+        const corePlugin = new plugins_1.CoreSyncPlugin();
+        const userPlugins = options.plugins || [];
         plugin.init({
             emitter,
             editor: this,
             commander,
             state,
-        }, options.plugins);
+        }, [corePlugin, ...userPlugins]);
         interaction.init({
             emitter,
             editor: this,
@@ -35,10 +46,9 @@ class Editor {
             state,
             interactions: options.interactions,
         });
-        this.commander = commander;
-        this.state = state;
-        this.plugin = plugin;
-        this.interaction = interaction;
+    }
+    registerSync(path, handler, options) {
+        return this.syncRegistry.register(path, handler, options);
     }
     getDocument() {
         return this.document;
@@ -49,6 +59,7 @@ class Editor {
         this.plugin.destroy();
         this.commander.destroy();
         this.state.destroy();
+        this.syncRegistry.destroy();
     }
 }
 exports.Editor = Editor;

package/lib/editor/index.d.ts

@@ -1,3 +1,4 @@
+export * from './commands';
 export { Editor } from './editor';
 export * from './interactions';
 export * from './plugins';

package/lib/editor/index.js

@@ -15,6 +15,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Editor = void 0;
+__exportStar(require("./commands"), exports);
 var editor_1 = require("./editor");
 Object.defineProperty(exports, "Editor", { enumerable: true, get: function () { return editor_1.Editor; } });
 __exportStar(require("./interactions"), exports);

package/lib/editor/interactions/brush-select.d.ts

@@ -19,5 +19,4 @@ export declare class BrushSelect extends Interaction implements IInteraction {
     private clearBrush;
     private collectSelection;
     private hasElementAtStart;
-    private isTextSelectionTarget;
 }

package/lib/editor/interactions/brush-select.js

@@ -25,7 +25,7 @@ class BrushSelect extends base_1.Interaction {
                 return;
             if (event.button !== 0)
                 return;
-            if (this.isTextSelectionTarget(event.target))
+            if ((0, utils_2.isTextSelectionTarget)(event.target))
                 return;
             if (this.hasElementAtStart(event.target))
                 return;
@@ -173,13 +173,5 @@ class BrushSelect extends base_1.Interaction {
             return true;
         return Boolean((_a = target.closest) === null || _a === void 0 ? void 0 : _a.call(target, '[data-element-type]'));
     }
-    isTextSelectionTarget(target) {
-        if (!(target instanceof HTMLElement))
-            return false;
-        if (target.isContentEditable)
-            return true;
-        const tag = target.tagName.toLowerCase();
-        return tag === 'input' || tag === 'textarea';
-    }
 }
 exports.BrushSelect = BrushSelect;

package/lib/editor/interactions/drag-canvas.d.ts

@@ -0,0 +1,35 @@
+import { IInteraction, InteractionInitOptions, KeyCode } from '../types';
+import { Interaction } from './base';
+export interface DragCanvasOptions {
+    trigger?: KeyCode[];
+}
+export declare class DragCanvas extends Interaction implements IInteraction {
+    name: string;
+    /**
+     * 触发交互的按键代码。
+     * 参考标准的 KeyboardEvent.code 值：
+     * https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code/code_values
+     * @default ['Space']
+     */
+    trigger: KeyCode[];
+    constructor(options?: DragCanvasOptions);
+    private isTriggerPressed;
+    private pointerId?;
+    private startPoint?;
+    private document;
+    private startViewBoxString?;
+    private completeInteraction?;
+    private isHovering;
+    init(options: InteractionInitOptions): void;
+    destroy(): void;
+    private handleKeyDown;
+    private handlePointerDown;
+    private handlePointerMove;
+    private handlePointerUp;
+    private handleKeyUp;
+    private stopDrag;
+    private setCursor;
+    private handleBlur;
+    private onMouseEnter;
+    private onMouseLeave;
+}

package/lib/editor/interactions/drag-canvas.js

@@ -0,0 +1,165 @@
+"use strict";
+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());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DragCanvas = void 0;
+const utils_1 = require("../../utils");
+const commands_1 = require("../commands");
+const utils_2 = require("../utils");
+const base_1 = require("./base");
+class DragCanvas extends base_1.Interaction {
+    constructor(options) {
+        super();
+        this.name = 'drag-canvas';
+        /**
+         * 触发交互的按键代码。
+         * 参考标准的 KeyboardEvent.code 值：
+         * https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code/code_values
+         * @default ['Space']
+         */
+        this.trigger = ['Space'];
+        this.isTriggerPressed = false;
+        // 防止组件快捷键侵入性过强
+        this.isHovering = false;
+        this.handleKeyDown = (event) => {
+            if (!this.interaction.isActive())
+                return;
+            if ((0, utils_2.isTextSelectionTarget)(event.target))
+                return;
+            // 增加焦点的判断，防止对空格的preventDefault侵入性过强
+            const target = event.target;
+            const isBody = target === document.body || target === document.documentElement;
+            const isEditor = target === this.document || this.document.contains(target);
+            if (!isBody && !isEditor)
+                return;
+            if (!this.trigger.includes(event.code))
+                return;
+            if (!this.isHovering && !this.isTriggerPressed)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            this.interaction.executeExclusiveInteraction(this, () => __awaiter(this, void 0, void 0, function* () {
+                return new Promise((resolve) => {
+                    this.completeInteraction = resolve;
+                    this.isTriggerPressed = true;
+                    const viewBox = (0, utils_1.getViewBox)(this.document);
+                    this.startViewBoxString = (0, utils_1.viewBoxToString)(viewBox);
+                    this.setCursor('grab');
+                    this.document.addEventListener('pointerdown', this.handlePointerDown);
+                    window.addEventListener('keyup', this.handleKeyUp);
+                });
+            }));
+        };
+        this.handlePointerDown = (event) => {
+            if (event.button !== 0)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            const svg = this.document;
+            this.startPoint = (0, utils_2.clientToViewport)(svg, event.clientX, event.clientY);
+            this.pointerId = event.pointerId;
+            this.setCursor('grabbing');
+            window.addEventListener('pointermove', this.handlePointerMove);
+            window.addEventListener('pointerup', this.handlePointerUp);
+            window.addEventListener('pointercancel', this.handlePointerUp);
+        };
+        this.handlePointerMove = (event) => {
+            if (event.pointerId !== this.pointerId || !this.startPoint)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            const svg = this.document;
+            const current = (0, utils_2.clientToViewport)(svg, event.clientX, event.clientY);
+            const dx = current.x - this.startPoint.x;
+            const dy = current.y - this.startPoint.y;
+            const viewBox = (0, utils_1.getViewBox)(svg);
+            const { x, y, width, height } = viewBox;
+            const newX = x - dx;
+            const newY = y - dy;
+            this.state.updateOptions({
+                viewBox: (0, utils_1.viewBoxToString)({ x: newX, y: newY, width, height }),
+            });
+        };
+        this.handlePointerUp = (event) => {
+            if (event.pointerId !== this.pointerId)
+                return;
+            this.startPoint = undefined;
+            this.pointerId = undefined;
+            this.setCursor('grab');
+            window.removeEventListener('pointermove', this.handlePointerMove);
+            window.removeEventListener('pointerup', this.handlePointerUp);
+            window.removeEventListener('pointercancel', this.handlePointerUp);
+        };
+        this.handleKeyUp = (event) => {
+            if (!this.trigger.includes(event.code))
+                return;
+            this.stopDrag();
+        };
+        this.stopDrag = () => {
+            var _a;
+            if (this.startViewBoxString) {
+                const svg = this.document;
+                const viewBox = (0, utils_1.getViewBox)(svg);
+                const currentViewBoxString = (0, utils_1.viewBoxToString)(viewBox);
+                if (this.startViewBoxString !== currentViewBoxString) {
+                    const command = new commands_1.UpdateOptionsCommand({ viewBox: currentViewBoxString }, { viewBox: this.startViewBoxString });
+                    void this.commander.execute(command);
+                }
+            }
+            this.startViewBoxString = undefined;
+            this.isTriggerPressed = false;
+            this.setCursor('default');
+            this.startPoint = undefined;
+            this.pointerId = undefined;
+            window.removeEventListener('keyup', this.handleKeyUp);
+            this.document.removeEventListener('pointerdown', this.handlePointerDown);
+            window.removeEventListener('pointermove', this.handlePointerMove);
+            window.removeEventListener('pointerup', this.handlePointerUp);
+            window.removeEventListener('pointercancel', this.handlePointerUp);
+            (_a = this.completeInteraction) === null || _a === void 0 ? void 0 : _a.call(this);
+            this.completeInteraction = undefined;
+        };
+        this.setCursor = (behavior) => {
+            document.body.style.cursor = behavior;
+        };
+        this.handleBlur = () => {
+            this.stopDrag();
+        };
+        this.onMouseEnter = () => {
+            this.isHovering = true;
+        };
+        this.onMouseLeave = () => {
+            this.isHovering = false;
+        };
+        if (options === null || options === void 0 ? void 0 : options.trigger) {
+            this.trigger = options.trigger;
+        }
+    }
+    init(options) {
+        super.init(options);
+        this.document = this.editor.getDocument();
+        this.document.addEventListener('mouseenter', this.onMouseEnter);
+        this.document.addEventListener('mouseleave', this.onMouseLeave);
+        window.addEventListener('keydown', this.handleKeyDown);
+        window.addEventListener('blur', this.handleBlur);
+    }
+    destroy() {
+        window.removeEventListener('keydown', this.handleKeyDown);
+        window.removeEventListener('keyup', this.handleKeyUp);
+        this.document.removeEventListener('pointerdown', this.handlePointerDown);
+        window.removeEventListener('pointermove', this.handlePointerMove);
+        window.removeEventListener('pointerup', this.handlePointerUp);
+        window.removeEventListener('pointercancel', this.handlePointerUp);
+        window.removeEventListener('blur', this.handleBlur);
+        this.document.removeEventListener('mouseenter', this.onMouseEnter);
+        this.document.removeEventListener('mouseleave', this.onMouseLeave);
+    }
+}
+exports.DragCanvas = DragCanvas;

package/lib/editor/interactions/drag-element.js

@@ -116,9 +116,6 @@ class DragElement extends base_1.Interaction {
             return true;
         if (!this.startTarget)
             return false;
-        if (this.willReplaceSelection) {
-            this.interaction.select([this.startTarget], 'replace');
-        }
         this.dragItems = this.selectionForDrag
             .filter((element) => (0, utils_1.isEditableText)(element))
             .map((element) => this.createDragItem(element))
@@ -128,6 +125,10 @@ class DragElement extends base_1.Interaction {
         let started = false;
         this.interaction.executeExclusiveInteraction(this, () => __awaiter(this, void 0, void 0, function* () {
             return new Promise((resolve) => {
+                // 只有拿到锁之后，才真正执行选中逻辑
+                if (this.willReplaceSelection && this.startTarget) {
+                    this.interaction.select([this.startTarget], 'replace');
+                }
                 this.completeInteraction = resolve;
                 started = true;
             });

package/lib/editor/interactions/index.d.ts

@@ -2,6 +2,7 @@ export { Interaction } from './base';
 export { BrushSelect } from './brush-select';
 export { ClickSelect } from './click-select';
 export { DblClickEditText } from './dblclick-edit-text';
+export { DragCanvas } from './drag-canvas';
 export { DragElement } from './drag-element';
 export { HotkeyHistory } from './hotkey-history';
 export { SelectHighlight } from './select-highlight';