@antv/infographic 0.2.13 → 0.2.14

package/esm/index.d.ts

@@ -1,7 +1,8 @@
 export * from './designs';
 export { getItemProps, getThemeColors } from './designs/utils';
-export { BrushSelect, ClickSelect, DblClickEditText, DragElement, HotkeyHistory, Interaction, SelectHighlight, ZoomWheel, } from './editor/interactions';
-export { EditBar, Plugin, ResizeElement } from './editor/plugins';
+export { BatchCommand, UpdateElementCommand, UpdateOptionsCommand, UpdateTextCommand, } from './editor/commands';
+export { BrushSelect, ClickSelect, DblClickEditText, DragCanvas, DragElement, HotkeyHistory, Interaction, SelectHighlight, ZoomWheel, } from './editor/interactions';
+export { EditBar, Plugin, ResetViewBox, ResizeElement } from './editor/plugins';
 export { exportToSVG } from './exporter';
 export { Defs, Ellipse, Fragment, Group, Path, Polygon, Rect, Text, cloneElement, createFragment, createLayout, getCombinedBounds, getElementBounds, getElementsBounds, jsx, jsxDEV, jsxs, renderSVG, } from './jsx';
 export { getFont, getFonts, getPalette, getPaletteColor, getPalettes, registerFont, registerPalette, registerPattern, setDefaultFont, } from './renderer';
@@ -12,7 +13,7 @@ export { getTemplate, getTemplates, registerTemplate } from './templates';
 export { getTheme, getThemes, registerTheme } from './themes';
 export { parseSVG, setFontExtendFactor } from './utils';
 export { VERSION } from './version';
-export type { EditBarOptions } from './editor';
+export type { EditBarOptions, ICommand, ICommandManager, IEditor, IInteraction, IInteractionManager, IPlugin, IPluginManager, IStateManager, ISyncRegistry, InteractionInitOptions, KeyCode, PluginInitOptions, SelectMode, Selection, SyncHandler, } from './editor';
 export type { ExportOptions, PNGExportOptions, SVGExportOptions, } from './exporter';
 export type { Bounds, ComponentType, DefsProps, EllipseProps, FragmentProps, GroupProps, JSXElement, JSXElementConstructor, JSXNode, PathProps, Point, PolygonProps, RectProps, RenderableNode, SVGAttributes, SVGProps, TextProps, WithChildren, } from './jsx';
 export type { InfographicOptions, ParsedInfographicOptions } from './options';

package/esm/index.js

@@ -1,7 +1,8 @@
 export * from './designs/index.js';
 export { getItemProps, getThemeColors } from './designs/utils/index.js';
-export { BrushSelect, ClickSelect, DblClickEditText, DragElement, HotkeyHistory, Interaction, SelectHighlight, ZoomWheel, } from './editor/interactions/index.js';
-export { EditBar, Plugin, ResizeElement } from './editor/plugins/index.js';
+export { BatchCommand, UpdateElementCommand, UpdateOptionsCommand, UpdateTextCommand, } from './editor/commands/index.js';
+export { BrushSelect, ClickSelect, DblClickEditText, DragCanvas, DragElement, HotkeyHistory, Interaction, SelectHighlight, ZoomWheel, } from './editor/interactions/index.js';
+export { EditBar, Plugin, ResetViewBox, ResizeElement } from './editor/plugins/index.js';
 export { exportToSVG } from './exporter/index.js';
 export { Defs, Ellipse, Fragment, Group, Path, Polygon, Rect, Text, cloneElement, createFragment, createLayout, getCombinedBounds, getElementBounds, getElementsBounds, jsx, jsxDEV, jsxs, renderSVG, } from './jsx/index.js';
 export { getFont, getFonts, getPalette, getPaletteColor, getPalettes, registerFont, registerPalette, registerPattern, setDefaultFont, } from './renderer/index.js';

package/esm/options/types.d.ts

@@ -49,6 +49,7 @@ export interface ParsedInfographicOptions {
     interactions?: IInteraction[];
     shapes?: ElementProps[];
 }
+export type UpdatableInfographicOptions = Partial<Omit<ParsedInfographicOptions, 'container'>>;
 interface SVGOptions {
     style?: Record<string, string | number>;
     attributes?: Record<string, string | number | boolean>;

package/esm/runtime/options.js

@@ -1,6 +1,11 @@
-import { BrushSelect, ClickSelect, DblClickEditText, DragElement, EditBar, HotkeyHistory, ResizeElement, SelectHighlight, ZoomWheel, } from '../editor/index.js';
-const createDefaultPlugins = () => [new EditBar(), new ResizeElement()];
+import { BrushSelect, ClickSelect, DblClickEditText, DragCanvas, DragElement, EditBar, HotkeyHistory, ResetViewBox, ResizeElement, SelectHighlight, ZoomWheel, } from '../editor/index.js';
+const createDefaultPlugins = () => [
+    new EditBar(),
+    new ResizeElement(),
+    new ResetViewBox(),
+];
 const createDefaultInteractions = () => [
+    new DragCanvas(),
     new DblClickEditText(),
     new BrushSelect(),
     new ClickSelect(),

package/esm/templates/built-in.js

@@ -147,6 +147,18 @@ const BUILT_IN_TEMPLATES = Object.assign(Object.assign(Object.assign(Object.assi
             structure: { type: 'relation-circle' },
             items: [{ type: 'icon-badge' }],
         },
+    }, 'relation-network-icon-badge': {
+        design: {
+            title: 'default',
+            structure: { type: 'relation-network' },
+            items: [{ type: 'icon-badge' }],
+        },
+    }, 'relation-network-simple-circle-node': {
+        design: {
+            title: 'default',
+            structure: { type: 'relation-network' },
+            items: [{ type: 'simple-circle-node' }],
+        },
     }, 'sequence-steps-badge-card': {
         design: {
             title: 'default',
@@ -304,6 +316,18 @@ const BUILT_IN_TEMPLATES = Object.assign(Object.assign(Object.assign(Object.assi
             structure: { type: 'list-sector', startAngle: -180, endAngle: 0 },
             items: [{ type: 'plain-text' }],
         },
+    }, 'list-waterfall-badge-card': {
+        design: {
+            title: 'default',
+            structure: { type: 'list-waterfall' },
+            items: [{ type: 'badge-card' }],
+        },
+    }, 'list-waterfall-compact-card': {
+        design: {
+            title: 'default',
+            structure: { type: 'list-waterfall' },
+            items: [{ type: 'compact-card' }],
+        },
     }, 'sequence-roadmap-vertical-plain-text': {
         design: {
             title: 'default',

package/esm/utils/measure-text.js

@@ -2,22 +2,25 @@ import { measureText as measure, registerFont } from 'measury';
 import AlibabaPuHuiTi from 'measury/fonts/AlibabaPuHuiTi-Regular';
 import { DEFAULT_FONT } from '../renderer/index.js';
 import { encodeFontFamily } from './font.js';
-import { isBrowser } from './is-browser.js';
 let FONT_EXTEND_FACTOR = 1.01;
 export const setFontExtendFactor = (factor) => {
     FONT_EXTEND_FACTOR = factor;
 };
 registerFont(AlibabaPuHuiTi);
-let canvasContext = null;
+let canvasContext = undefined;
 let measureSpan = null;
 function getCanvasContext() {
-    if (canvasContext)
+    if (typeof document === 'undefined')
+        return null;
+    if (canvasContext !== undefined)
         return canvasContext;
     const canvas = document.createElement('canvas');
     canvasContext = canvas.getContext('2d');
     return canvasContext;
 }
 function getMeasureSpan() {
+    if (typeof document === 'undefined')
+        return null;
     if (!document.body)
         return null;
     if (measureSpan)
@@ -75,6 +78,8 @@ function measureTextInBrowser(content, { fontFamily, fontSize, fontWeight, lineH
     span.style.lineHeight = `${lineHeightPx}px`;
     span.textContent = content;
     const rect = span.getBoundingClientRect();
+    if (content && rect.width <= 0 && rect.height <= 0)
+        return null;
     return { width: rect.width, height: rect.height };
 }
 export function measureText(text = '', attrs) {
@@ -94,9 +99,7 @@ export function measureText(text = '', attrs) {
         lineHeight,
     };
     const fallback = () => measure(content, options);
-    const metrics = isBrowser()
-        ? ((_a = measureTextInBrowser(content, options)) !== null && _a !== void 0 ? _a : fallback())
-        : fallback();
+    const metrics = (_a = measureTextInBrowser(content, options)) !== null && _a !== void 0 ? _a : fallback();
     // 额外添加 1% 宽高
     return {
         width: Math.ceil(metrics.width * FONT_EXTEND_FACTOR),

package/esm/utils/padding.d.ts

@@ -1,3 +1,4 @@
 import type { Padding, ParsedPadding } from '../types';
 export declare function parsePadding(padding: Padding | undefined): ParsedPadding;
 export declare function setSVGPadding(svg: SVGSVGElement, padding: ParsedPadding): void;
+export declare function getBoundViewBox(svg: SVGSVGElement, padding: ParsedPadding): string;

package/esm/utils/padding.js

@@ -61,7 +61,7 @@ function setSVGPaddingInNode(svg, padding) {
         viewBox: `${viewBox.x - left} ${viewBox.y - top} ${viewBox.width + left + right} ${viewBox.height + top + bottom}`,
     });
 }
-function setSVGPaddingInBrowser(svg, padding) {
+export function getBoundViewBox(svg, padding) {
     const bbox = svg.getBBox();
     const clientRect = svg.getBoundingClientRect();
     const scaleX = clientRect.width > 0 ? bbox.width / clientRect.width : 1;
@@ -75,8 +75,12 @@ function setSVGPaddingInBrowser(svg, padding) {
     const newY = bbox.y - topSvg;
     const newWidth = bbox.width + leftSvg + rightSvg;
     const newHeight = bbox.height + topSvg + bottomSvg;
+    return `${newX} ${newY} ${newWidth} ${newHeight}`;
+}
+function setSVGPaddingInBrowser(svg, padding) {
+    const viewBox = getBoundViewBox(svg, padding);
     setAttributes(svg, {
-        viewBox: `${newX} ${newY} ${newWidth} ${newHeight}`,
+        viewBox,
     });
 }
 function waitForLayout(element, callback) {

package/esm/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "0.2.13";
+export declare const VERSION = "0.2.14";

package/esm/version.js

@@ -1 +1 @@
-export const VERSION = '0.2.13';
+export const VERSION = '0.2.14';

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';

package/lib/editor/interactions/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ZoomWheel = exports.SelectHighlight = exports.HotkeyHistory = exports.DragElement = exports.DblClickEditText = exports.ClickSelect = exports.BrushSelect = exports.Interaction = void 0;
+exports.ZoomWheel = exports.SelectHighlight = exports.HotkeyHistory = exports.DragElement = exports.DragCanvas = exports.DblClickEditText = exports.ClickSelect = exports.BrushSelect = exports.Interaction = void 0;
 var base_1 = require("./base");
 Object.defineProperty(exports, "Interaction", { enumerable: true, get: function () { return base_1.Interaction; } });
 var brush_select_1 = require("./brush-select");
@@ -9,6 +9,8 @@ var click_select_1 = require("./click-select");
 Object.defineProperty(exports, "ClickSelect", { enumerable: true, get: function () { return click_select_1.ClickSelect; } });
 var dblclick_edit_text_1 = require("./dblclick-edit-text");
 Object.defineProperty(exports, "DblClickEditText", { enumerable: true, get: function () { return dblclick_edit_text_1.DblClickEditText; } });
+var drag_canvas_1 = require("./drag-canvas");
+Object.defineProperty(exports, "DragCanvas", { enumerable: true, get: function () { return drag_canvas_1.DragCanvas; } });
 var drag_element_1 = require("./drag-element");
 Object.defineProperty(exports, "DragElement", { enumerable: true, get: function () { return drag_element_1.DragElement; } });
 var hotkey_history_1 = require("./hotkey-history");

package/lib/editor/interactions/zoom-wheel.d.ts

@@ -1,7 +1,16 @@
 import type { IInteraction, InteractionInitOptions } from '../types';
 import { Interaction } from './base';
+export interface ZoomWheelOptions {
+    minViewBoxSize?: number;
+    maxViewBoxSize?: number;
+}
 export declare class ZoomWheel extends Interaction implements IInteraction {
     name: string;
+    private minViewBoxSize;
+    private maxViewBoxSize;
+    constructor(options?: ZoomWheelOptions);
+    private initialViewBox;
+    private handleKeyUp;
     private wheelListener;
     private getMousePoint;
     private getCenterPoint;