@antv/infographic 0.2.11 → 0.2.13

package/esm/editor/commands/UpdateOptions.js

@@ -1,19 +1,32 @@
+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());
+    });
+};
 export class UpdateOptionsCommand {
     constructor(options, original) {
         this.options = options;
         this.original = original;
     }
-    async apply(state) {
-        const prev = state.getOptions();
-        if (!this.original) {
-            this.original = prev;
-        }
-        state.updateOptions({ ...prev, ...this.options });
+    apply(state) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const prev = state.getOptions();
+            if (!this.original) {
+                this.original = prev;
+            }
+            state.updateOptions(Object.assign(Object.assign({}, prev), this.options));
+        });
     }
-    async undo(state) {
-        if (this.original) {
-            state.updateOptions(this.original);
-        }
+    undo(state) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.original) {
+                state.updateOptions(this.original);
+            }
+        });
     }
     serialize() {
         return {

package/esm/editor/commands/UpdateText.js

@@ -1,22 +1,35 @@
+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 { getElementRole, getTextContent, setTextContent } from '../../utils/index.js';
 import { getIndexesFromElement } from '../utils/index.js';
 export class UpdateTextCommand {
     constructor(element, newText, originalText) {
         this.element = element;
-        this.originalText = originalText ?? getTextContent(element);
+        this.originalText = originalText !== null && originalText !== void 0 ? originalText : getTextContent(element);
         this.modifiedText = newText;
     }
-    async apply(state) {
-        if (this.originalText === this.modifiedText)
-            return;
-        setTextContent(this.element, this.modifiedText);
-        updateItemText(state, this.element, this.modifiedText);
+    apply(state) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.originalText === this.modifiedText)
+                return;
+            setTextContent(this.element, this.modifiedText);
+            updateItemText(state, this.element, this.modifiedText);
+        });
     }
-    async undo(state) {
-        if (this.originalText === this.modifiedText)
-            return;
-        setTextContent(this.element, this.originalText);
-        updateItemText(state, this.element, this.originalText);
+    undo(state) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.originalText === this.modifiedText)
+                return;
+            setTextContent(this.element, this.originalText);
+            updateItemText(state, this.element, this.originalText);
+        });
     }
     serialize() {
         return {

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

@@ -1,3 +1,12 @@
+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 { createElement, setAttributes } from '../../utils/index.js';
 import { clientToViewport, getElementViewportBounds, getEventTarget, getSelectableTarget, } from '../utils/index.js';
 import { Interaction } from './base.js';
@@ -17,15 +26,17 @@ export class BrushSelect extends Interaction {
                 return;
             if (this.hasElementAtStart(event.target))
                 return;
-            this.interaction.executeExclusiveInteraction(this, async () => new Promise((resolve) => {
-                this.completeInteraction = resolve;
-                const svg = this.editor.getDocument();
-                this.startPoint = clientToViewport(svg, event.clientX, event.clientY);
-                this.pointerId = event.pointerId;
-                this.shiftKey = event.shiftKey;
-                this.dragging = false;
-                window.addEventListener('pointermove', this.handleMove);
-                window.addEventListener('pointerup', this.handleEnd);
+            this.interaction.executeExclusiveInteraction(this, () => __awaiter(this, void 0, void 0, function* () {
+                return new Promise((resolve) => {
+                    this.completeInteraction = resolve;
+                    const svg = this.editor.getDocument();
+                    this.startPoint = clientToViewport(svg, event.clientX, event.clientY);
+                    this.pointerId = event.pointerId;
+                    this.shiftKey = event.shiftKey;
+                    this.dragging = false;
+                    window.addEventListener('pointermove', this.handleMove);
+                    window.addEventListener('pointerup', this.handleEnd);
+                });
             }));
         };
         this.handleMove = (event) => {
@@ -47,6 +58,7 @@ export class BrushSelect extends Interaction {
             this.updateBrush(this.startPoint, current);
         };
         this.handleEnd = (event) => {
+            var _a, _b;
             if (event.pointerId !== this.pointerId || !this.startPoint)
                 return;
             window.removeEventListener('pointermove', this.handleMove);
@@ -66,12 +78,12 @@ export class BrushSelect extends Interaction {
             const withShift = this.shiftKey;
             this.shiftKey = false;
             if (!rect) {
-                this.completeInteraction?.();
+                (_a = this.completeInteraction) === null || _a === void 0 ? void 0 : _a.call(this);
                 this.completeInteraction = undefined;
                 return;
             }
             const selection = this.collectSelection(rect);
-            this.completeInteraction?.();
+            (_b = this.completeInteraction) === null || _b === void 0 ? void 0 : _b.call(this);
             this.completeInteraction = undefined;
             if (selection.length === 0) {
                 if (!withShift)
@@ -117,7 +129,8 @@ export class BrushSelect extends Interaction {
         return { x, y, width, height };
     }
     clearBrush() {
-        this.brush?.remove();
+        var _a;
+        (_a = this.brush) === null || _a === void 0 ? void 0 : _a.remove();
         this.brush = undefined;
     }
     collectSelection(rect) {
@@ -150,11 +163,12 @@ export class BrushSelect extends Interaction {
         }, []);
     }
     hasElementAtStart(target) {
+        var _a;
         if (!(target instanceof Element))
             return false;
         if (getEventTarget(target))
             return true;
-        return Boolean(target.closest?.('[data-element-type]'));
+        return Boolean((_a = target.closest) === null || _a === void 0 ? void 0 : _a.call(target, '[data-element-type]'));
     }
     isTextSelectionTarget(target) {
         if (!(target instanceof HTMLElement))

package/esm/editor/interactions/click-select.js

@@ -1,3 +1,12 @@
+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 { isEditingText } from '../../utils/index.js';
 import { ClickHandler, getEventTarget } from '../utils/index.js';
 import { Interaction } from './base.js';
@@ -29,7 +38,7 @@ export class ClickSelect extends Interaction {
         const handleSelect = (event) => {
             if (!interaction.isActive())
                 return;
-            interaction.executeExclusiveInteraction(this, async () => {
+            interaction.executeExclusiveInteraction(this, () => __awaiter(this, void 0, void 0, function* () {
                 const target = getEventTarget(event.target);
                 if (isEditingText(target))
                     return;
@@ -51,7 +60,7 @@ export class ClickSelect extends Interaction {
                     else
                         interaction.clearSelection();
                 }
-            });
+            }));
         };
         this.clickHandler.onClick(handleSelect);
         document.addEventListener('keydown', this.onShiftKeyDown);
@@ -59,7 +68,8 @@ export class ClickSelect extends Interaction {
         document.addEventListener('keydown', this.onEscKeyDown);
     }
     destroy() {
-        this.clickHandler?.destroy();
+        var _a;
+        (_a = this.clickHandler) === null || _a === void 0 ? void 0 : _a.destroy();
         document.removeEventListener('keydown', this.onShiftKeyDown);
         document.removeEventListener('keyup', this.onShiftKeyUp);
         document.removeEventListener('keydown', this.onEscKeyDown);

package/esm/editor/interactions/dblclick-edit-text.js

@@ -1,3 +1,12 @@
+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 { getTextContent, getTextEntity, injectStyleOnce, isEditableText, } from '../../utils/index.js';
 import { UpdateTextCommand } from '../commands/index.js';
 import { ClickHandler, getEventTarget } from '../utils/index.js';
@@ -13,14 +22,14 @@ export class DblClickEditText extends Interaction {
         this.clickHandler = new ClickHandler(editor.getDocument()).onDoubleClick((event) => {
             if (!interaction.isActive())
                 return;
-            interaction.executeExclusiveInteraction(this, async () => {
+            interaction.executeExclusiveInteraction(this, () => __awaiter(this, void 0, void 0, function* () {
                 const target = getEventTarget(event.target);
                 if (!target)
                     return;
                 if (isEditableText(target)) {
                     interaction.select([target], 'replace');
                     const originalText = getTextContent(target);
-                    const text = await new Promise((resolve) => {
+                    const text = yield new Promise((resolve) => {
                         const stopListen = this.listenSelectionChange(target);
                         editText(target, {
                             cursorPosition: {
@@ -34,17 +43,19 @@ export class DblClickEditText extends Interaction {
                     });
                     commander.execute(new UpdateTextCommand(target, text, originalText));
                 }
-            });
+            }));
         });
     }
     destroy() {
-        this.clickHandler?.destroy();
-        this.detachSelectionListener?.();
+        var _a, _b;
+        (_a = this.clickHandler) === null || _a === void 0 ? void 0 : _a.destroy();
+        (_b = this.detachSelectionListener) === null || _b === void 0 ? void 0 : _b.call(this);
     }
     listenSelectionChange(target) {
         const handler = ({ next }) => {
+            var _a;
             if (!next.includes(target)) {
-                this.detachSelectionListener?.();
+                (_a = this.detachSelectionListener) === null || _a === void 0 ? void 0 : _a.call(this);
                 this.detachSelectionListener = undefined;
                 const entity = getTextEntity(target);
                 if (entity)
@@ -81,14 +92,16 @@ class InlineTextEditor {
             }
         };
         this.handleInput = () => {
+            var _a, _b;
             this.normalizeSpanContent();
-            this.options?.onInput?.(this.getText());
+            (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.onInput) === null || _b === void 0 ? void 0 : _b.call(_a, this.getText());
         };
         this.handleBlur = () => {
+            var _a, _b;
             this.entity.removeAttribute('contenteditable');
             this.entity.classList.remove(EDITOR_BASE_CLASS);
             this.normalizeSpanContent();
-            this.options?.onBlur?.(this.getText());
+            (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.onBlur) === null || _b === void 0 ? void 0 : _b.call(_a, this.getText());
             this.detachListeners();
         };
     }
@@ -111,6 +124,7 @@ class InlineTextEditor {
         this.entity.removeEventListener('input', this.handleInput);
     }
     insertPlainText(text) {
+        var _a, _b;
         const selection = window.getSelection();
         if (!selection)
             return;
@@ -129,11 +143,12 @@ class InlineTextEditor {
         selection.addRange(range);
         // Mirror native input behavior so consumers stay in sync.
         this.normalizeSpanContent();
-        this.options?.onInput?.(this.getText());
+        (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.onInput) === null || _b === void 0 ? void 0 : _b.call(_a, this.getText());
     }
     normalizeSpanContent() {
+        var _a;
         if (this.entity.childNodes.length === 1 &&
-            this.entity.firstChild?.nodeType === Node.TEXT_NODE) {
+            ((_a = this.entity.firstChild) === null || _a === void 0 ? void 0 : _a.nodeType) === Node.TEXT_NODE) {
             return;
         }
         const plainText = this.getText();
@@ -152,21 +167,22 @@ class InlineTextEditor {
         this.placeCaretAtEnd();
     }
     getRangeFromPoint() {
+        var _a, _b;
         const { cursorPosition } = this.options || {};
         if (!cursorPosition)
             return null;
         const { clientX, clientY } = cursorPosition;
         const doc = document;
-        const rangeFromPoint = doc.caretRangeFromPoint?.(clientX, clientY) ??
-            (() => {
-                const caretPosition = doc.caretPositionFromPoint?.(clientX, clientY);
-                if (!caretPosition)
-                    return null;
-                const caretRange = document.createRange();
-                caretRange.setStart(caretPosition.offsetNode, caretPosition.offset);
-                caretRange.collapse(true);
-                return caretRange;
-            })();
+        const rangeFromPoint = (_b = (_a = doc.caretRangeFromPoint) === null || _a === void 0 ? void 0 : _a.call(doc, clientX, clientY)) !== null && _b !== void 0 ? _b : (() => {
+            var _a;
+            const caretPosition = (_a = doc.caretPositionFromPoint) === null || _a === void 0 ? void 0 : _a.call(doc, clientX, clientY);
+            if (!caretPosition)
+                return null;
+            const caretRange = document.createRange();
+            caretRange.setStart(caretPosition.offsetNode, caretPosition.offset);
+            caretRange.collapse(true);
+            return caretRange;
+        })();
         if (!rangeFromPoint)
             return null;
         if (!this.entity.contains(rangeFromPoint.startContainer))

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

@@ -1,3 +1,12 @@
+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 { getCombinedBounds } from '../../jsx/utils/bounds.js';
 import { createElement, getAttributes, isEditableText, isEditingText, setAttributes, } from '../../utils/index.js';
 import { UpdateElementCommand } from '../commands/index.js';
@@ -114,9 +123,11 @@ export class DragElement extends Interaction {
         if (this.dragItems.length === 0)
             return false;
         let started = false;
-        this.interaction.executeExclusiveInteraction(this, async () => new Promise((resolve) => {
-            this.completeInteraction = resolve;
-            started = true;
+        this.interaction.executeExclusiveInteraction(this, () => __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve) => {
+                this.completeInteraction = resolve;
+                started = true;
+            });
         }));
         this.exclusiveStarted = started;
         return started;
@@ -252,7 +263,8 @@ export class DragElement extends Interaction {
         return rest && rest.length ? `${translate} ${rest}` : translate;
     }
     emitGeometryChange() {
-        const target = this.dragItems[0]?.element;
+        var _a;
+        const target = (_a = this.dragItems[0]) === null || _a === void 0 ? void 0 : _a.element;
         if (!target)
             return;
         const rect = getElementViewportBounds(this.editor.getDocument(), target);
@@ -268,6 +280,7 @@ export class DragElement extends Interaction {
         window.removeEventListener('pointercancel', this.handleEnd);
     }
     reset() {
+        var _a;
         this.detachPointerListeners();
         this.clearGuides();
         this.pointerId = undefined;
@@ -280,7 +293,7 @@ export class DragElement extends Interaction {
         this.dragging = false;
         this.startBounds = undefined;
         this.guideCandidates = undefined;
-        this.completeInteraction?.();
+        (_a = this.completeInteraction) === null || _a === void 0 ? void 0 : _a.call(this);
         this.completeInteraction = undefined;
     }
     getSelectionBounds(selection) {
@@ -315,8 +328,8 @@ export class DragElement extends Interaction {
         const snapX = this.getSnapOffset([moving.x, moving.x + moving.width / 2, moving.x + moving.width], this.guideCandidates.vertical);
         const snapY = this.getSnapOffset([moving.y, moving.y + moving.height / 2, moving.y + moving.height], this.guideCandidates.horizontal);
         return {
-            dx: dx + (snapX?.offset || 0),
-            dy: dy + (snapY?.offset || 0),
+            dx: dx + ((snapX === null || snapX === void 0 ? void 0 : snapX.offset) || 0),
+            dy: dy + ((snapY === null || snapY === void 0 ? void 0 : snapY.offset) || 0),
             snapX,
             snapY,
         };
@@ -383,8 +396,9 @@ export class DragElement extends Interaction {
         }
     }
     clearGuides() {
-        this.guideVertical?.remove();
-        this.guideHorizontal?.remove();
+        var _a, _b;
+        (_a = this.guideVertical) === null || _a === void 0 ? void 0 : _a.remove();
+        (_b = this.guideHorizontal) === null || _b === void 0 ? void 0 : _b.remove();
         this.guideVertical = undefined;
         this.guideHorizontal = undefined;
     }

package/esm/editor/interactions/hotkey-history.js

@@ -1,17 +1,26 @@
+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 { Hotkey } from '../utils/index.js';
 import { Interaction } from './base.js';
 export class HotkeyHistory extends Interaction {
     constructor() {
         super(...arguments);
         this.name = 'hotkey-history';
-        this.handleUndo = async (event) => {
+        this.handleUndo = (event) => __awaiter(this, void 0, void 0, function* () {
             event.preventDefault();
-            await this.commander.undo();
-        };
-        this.handleRedo = async (event) => {
+            yield this.commander.undo();
+        });
+        this.handleRedo = (event) => __awaiter(this, void 0, void 0, function* () {
             event.preventDefault();
-            await this.commander.redo();
-        };
+            yield this.commander.redo();
+        });
     }
     init(options) {
         super.init(options);
@@ -22,6 +31,7 @@ export class HotkeyHistory extends Interaction {
         this.hotkey.bind(['mod+shift+z', 'mod+y'], this.handleRedo);
     }
     destroy() {
-        this.hotkey?.destroy();
+        var _a;
+        (_a = this.hotkey) === null || _a === void 0 ? void 0 : _a.destroy();
     }
 }

package/esm/editor/interactions/select-highlight.js

@@ -70,19 +70,14 @@ export class SelectHighlight extends Interaction {
         this.highlightMasks = this.highlightMasks.slice(0, selection.length);
     }
     drawCombinedBoundsMask(selection) {
+        var _a;
         if (selection.length < 2) {
-            this.combinedBoundsMask?.remove();
+            (_a = this.combinedBoundsMask) === null || _a === void 0 ? void 0 : _a.remove();
             this.combinedBoundsMask = undefined;
             return;
         }
         const bounds = getCombinedBounds(selection.map((element) => getElementViewportBounds(this.editor.getDocument(), element)));
-        const attrs = {
-            ...bounds,
-            fill: 'none',
-            stroke: '#3384F5',
-            'stroke-width': 2,
-            'pointer-events': 'none',
-        };
+        const attrs = Object.assign(Object.assign({}, bounds), { fill: 'none', stroke: '#3384F5', 'stroke-width': 2, 'pointer-events': 'none' });
         if (this.combinedBoundsMask) {
             setAttributes(this.combinedBoundsMask, attrs);
         }
@@ -91,9 +86,10 @@ export class SelectHighlight extends Interaction {
         }
     }
     clearMasks() {
+        var _a;
         this.highlightMasks.forEach((mask) => mask.remove());
         this.highlightMasks = [];
-        this.combinedBoundsMask?.remove();
+        (_a = this.combinedBoundsMask) === null || _a === void 0 ? void 0 : _a.remove();
         this.combinedBoundsMask = undefined;
     }
 }

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

@@ -3,6 +3,9 @@ import { Interaction } from './base';
 export declare class ZoomWheel extends Interaction implements IInteraction {
     name: string;
     private wheelListener;
+    private getMousePoint;
+    private getCenterPoint;
+    private shouldZoom;
     init(options: InteractionInitOptions): void;
     destroy(): void;
 }

package/esm/editor/interactions/zoom-wheel.js

@@ -1,40 +1,64 @@
-import { clamp } from 'lodash-es';
-import { parsePadding } from '../../utils/index.js';
+import { inRange } from 'lodash-es';
+import { calculateZoomedViewBox, getViewBox, viewBoxToString, } from '../../utils/viewbox.js';
 import { UpdateOptionsCommand } from '../commands/index.js';
+import { clientToViewport } from '../utils/index.js';
 import { Interaction } from './base.js';
-const MIN_VIEWBOX_SIZE = 1;
-const MIN_PADDING = -5000;
-const MAX_PADDING = 5000;
+const MIN_VIEWBOX_SIZE = 20;
+const MAX_VIEWBOX_SIZE = 2000;
+const ZOOM_FACTOR = 1.1;
 export class ZoomWheel extends Interaction {
     constructor() {
         super(...arguments);
         this.name = 'zoom-wheel';
         this.wheelListener = (event) => {
-            if (!this.interaction.isActive())
-                return;
-            if (!event.ctrlKey && !event.metaKey)
+            if (!this.shouldZoom(event))
                 return;
             event.preventDefault();
-            const factor = event.deltaY > 0 ? 1.1 : 0.9;
-            const current = this.state.getOptions();
-            const currentPadding = current.padding ?? 0;
-            const parsed = parsePadding(currentPadding);
+            // Standard Zoom: Scroll Up (deltaY < 0) = Zoom In
+            const isZoomIn = event.deltaY < 0;
+            const factor = isZoomIn ? 1 / ZOOM_FACTOR : ZOOM_FACTOR;
             const svg = this.editor.getDocument();
-            const bbox = svg.getBBox();
-            const scaled = parsed.map((value) => {
-                const base = value === 0 ? 1 : value;
-                return clamp(base * factor, MIN_PADDING, MAX_PADDING);
-            });
-            const [top, right, bottom, left] = scaled;
-            const newWidth = bbox.width + left + right;
-            const newHeight = bbox.height + top + bottom;
-            if (newWidth <= MIN_VIEWBOX_SIZE || newHeight <= MIN_VIEWBOX_SIZE)
+            const viewBox = getViewBox(svg);
+            const { width, height } = viewBox;
+            const newWidth = width * factor;
+            const newHeight = height * factor;
+            if (!inRange(newWidth, MIN_VIEWBOX_SIZE, MAX_VIEWBOX_SIZE) ||
+                !inRange(newHeight, MIN_VIEWBOX_SIZE, MAX_VIEWBOX_SIZE))
+                return;
+            // TODO: Remove after implementing the reset UI plugin
+            if ((event.ctrlKey || event.metaKey) && event.shiftKey) {
+                const command = new UpdateOptionsCommand({
+                    viewBox: undefined,
+                });
+                void this.commander.execute(command);
                 return;
+            }
+            const pivot = (event.ctrlKey || event.metaKey) && !event.shiftKey
+                ? this.getMousePoint(svg, event)
+                : this.getCenterPoint(viewBox);
+            const newViewBox = calculateZoomedViewBox(viewBox, factor, pivot);
             const command = new UpdateOptionsCommand({
-                padding: scaled,
+                viewBox: viewBoxToString(newViewBox),
             });
             void this.commander.execute(command);
         };
+        this.getMousePoint = (svg, event) => {
+            return clientToViewport(svg, event.clientX, event.clientY);
+        };
+        this.getCenterPoint = (viewBox) => {
+            const centerX = viewBox.x + viewBox.width / 2;
+            const centerY = viewBox.y + viewBox.height / 2;
+            return { x: centerX, y: centerY };
+        };
+        this.shouldZoom = (event) => {
+            if (!this.interaction.isActive())
+                return false;
+            if (event.deltaY === 0)
+                return false;
+            const isMouseZoom = event.ctrlKey || event.metaKey;
+            const isCenterZoom = event.shiftKey;
+            return isMouseZoom || isCenterZoom;
+        };
     }
     init(options) {
         super.init(options);