@antv/infographic 0.1.1 → 0.1.3

package/lib/editor/utils/click-handler.js

@@ -0,0 +1,101 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClickHandler = void 0;
+class ClickHandler {
+    constructor(element, options = {}) {
+        this.clickTimer = null;
+        this.singleClickCallback = null;
+        this.doubleClickCallback = null;
+        this.pointerId = null;
+        this.startX = 0;
+        this.startY = 0;
+        this.skipClick = false;
+        this.dragged = false;
+        this.handlePointerDown = (event) => {
+            this.pointerId = event.pointerId;
+            this.startX = event.clientX;
+            this.startY = event.clientY;
+            this.dragged = false;
+            this.skipClick = false;
+            window.addEventListener('pointermove', this.handlePointerMove, {
+                passive: true,
+            });
+            window.addEventListener('pointerup', this.handlePointerUp, {
+                passive: true,
+            });
+            window.addEventListener('pointercancel', this.handlePointerUp, {
+                passive: true,
+            });
+        };
+        this.handlePointerMove = (event) => {
+            if (this.pointerId === null || event.pointerId !== this.pointerId)
+                return;
+            const dx = event.clientX - this.startX;
+            const dy = event.clientY - this.startY;
+            if (Math.hypot(dx, dy) > this.dragThreshold) {
+                this.skipClick = true;
+                this.dragged = true;
+            }
+        };
+        this.handlePointerUp = (event) => {
+            if (this.pointerId !== null && event.pointerId === this.pointerId) {
+                this.pointerId = null;
+                window.removeEventListener('pointermove', this.handlePointerMove);
+                window.removeEventListener('pointerup', this.handlePointerUp);
+                window.removeEventListener('pointercancel', this.handlePointerUp);
+                // Only allow click through if we did not detect a drag.
+                if (!this.dragged)
+                    this.skipClick = false;
+                this.dragged = false;
+            }
+        };
+        this.element = element;
+        this.delay = options.delay || 300;
+        this.dragThreshold = options.dragThreshold ?? 4;
+        this.init();
+    }
+    init() {
+        this.element.addEventListener('click', this.handleClick.bind(this));
+        this.element.addEventListener('dblclick', this.handleDoubleClick.bind(this));
+        this.element.addEventListener('pointerdown', this.handlePointerDown);
+    }
+    handleClick(e) {
+        if (this.skipClick) {
+            this.skipClick = false;
+            return;
+        }
+        if (this.clickTimer)
+            clearTimeout(this.clickTimer);
+        this.clickTimer = window.setTimeout(() => {
+            this.singleClickCallback?.(e);
+        }, this.delay);
+    }
+    handleDoubleClick(e) {
+        if (this.skipClick) {
+            this.skipClick = false;
+            return;
+        }
+        if (this.clickTimer)
+            clearTimeout(this.clickTimer);
+        this.doubleClickCallback?.(e);
+    }
+    onClick(callback) {
+        this.singleClickCallback = callback;
+        return this;
+    }
+    onDoubleClick(callback) {
+        this.doubleClickCallback = callback;
+        return this;
+    }
+    destroy() {
+        if (this.clickTimer)
+            clearTimeout(this.clickTimer);
+        this.element.removeEventListener('click', this.handleClick);
+        this.element.removeEventListener('dblclick', this.handleDoubleClick);
+        this.element.removeEventListener('pointerdown', this.handlePointerDown);
+        window.removeEventListener('pointermove', this.handlePointerMove);
+        window.removeEventListener('pointerup', this.handlePointerUp);
+        window.removeEventListener('pointercancel', this.handlePointerUp);
+    }
+}
+exports.ClickHandler = ClickHandler;

package/lib/editor/utils/coordinate.d.ts

@@ -0,0 +1,6 @@
+import type { Element } from '../../types';
+export declare function getScreenCTM(svg: SVGSVGElement): DOMMatrix;
+export declare function getInverseScreenCTM(svg: SVGSVGElement): DOMMatrix;
+export declare function viewportToClient(svg: SVGSVGElement, x: number, y: number): DOMPoint;
+export declare function clientToViewport(svg: SVGSVGElement, x: number, y: number): DOMPoint;
+export declare function getElementViewportBounds(svg: SVGSVGElement, element: Element): DOMRect;

package/lib/editor/utils/coordinate.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getScreenCTM = getScreenCTM;
+exports.getInverseScreenCTM = getInverseScreenCTM;
+exports.viewportToClient = viewportToClient;
+exports.clientToViewport = clientToViewport;
+exports.getElementViewportBounds = getElementViewportBounds;
+function getScreenCTM(svg) {
+    return svg.getScreenCTM() || new DOMMatrix();
+}
+function getInverseScreenCTM(svg) {
+    return svg.getScreenCTM()?.inverse() || new DOMMatrix();
+}
+function viewportToClient(svg, x, y) {
+    const svgPoint = new DOMPoint(x, y).matrixTransform(getScreenCTM(svg));
+    const containerBounds = svg.getBoundingClientRect();
+    return new DOMPoint(svgPoint.x - containerBounds.left, svgPoint.y - containerBounds.top);
+}
+function clientToViewport(svg, x, y) {
+    return new DOMPoint(x, y).matrixTransform(getInverseScreenCTM(svg));
+}
+function getElementViewportBounds(svg, element) {
+    const bounds = element.getBoundingClientRect();
+    const points = [
+        { x: bounds.x, y: bounds.y }, // 左上
+        { x: bounds.x + bounds.width, y: bounds.y }, // 右上
+        { x: bounds.x, y: bounds.y + bounds.height }, // 左下
+        { x: bounds.x + bounds.width, y: bounds.y + bounds.height }, // 右下
+    ];
+    const transformedPoints = points.map((point) => {
+        return clientToViewport(svg, point.x, point.y);
+    });
+    const minX = Math.min(...transformedPoints.map((p) => p.x));
+    const maxX = Math.max(...transformedPoints.map((p) => p.x));
+    const minY = Math.min(...transformedPoints.map((p) => p.y));
+    const maxY = Math.max(...transformedPoints.map((p) => p.y));
+    return new DOMRect(minX, minY, maxX - minX, maxY - minY);
+}

package/lib/editor/utils/data.d.ts

@@ -0,0 +1,10 @@
+import type { Data, ItemDatum } from '../../types';
+/**
+ * 获取数据项的子数据
+ */
+export declare function getChildrenDataByIndexes(data: Data, indexes: number[]): ItemDatum[];
+/**
+ * Build lodash-style path for an item based on indexes.
+ * Example: [1,2] -> data.items[1].children[2]
+ */
+export declare function buildItemPath(indexes: number[], prefix?: string): string;

package/lib/editor/utils/data.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getChildrenDataByIndexes = getChildrenDataByIndexes;
+exports.buildItemPath = buildItemPath;
+const utils_1 = require("../../utils");
+/**
+ * 获取数据项的子数据
+ */
+function getChildrenDataByIndexes(data, indexes) {
+    if (indexes.length === 0)
+        return data.data;
+    const datum = (0, utils_1.getDatumByIndexes)(data, indexes);
+    datum.children || (datum.children = []);
+    return datum.children;
+}
+/**
+ * Build lodash-style path for an item based on indexes.
+ * Example: [1,2] -> data.items[1].children[2]
+ */
+function buildItemPath(indexes, prefix = 'data.items') {
+    return indexes.reduce((path, idx, i) => i === 0 ? `${path}[${idx}]` : `${path}.children[${idx}]`, prefix);
+}

package/lib/editor/utils/element.d.ts

@@ -0,0 +1,2 @@
+import type { Element } from '../../types';
+export declare function getIndexesFromElement(element: Element): number[];

package/lib/editor/utils/element.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getIndexesFromElement = getIndexesFromElement;
+const utils_1 = require("../../utils");
+function getIndexesFromElement(element) {
+    return (getElementEntity(element)?.dataset.indexes?.split(',').map(Number) || []);
+}
+function getElementEntity(element) {
+    if ((0, utils_1.isIconElement)(element))
+        return (0, utils_1.getIconEntity)(element);
+    return element;
+}

package/lib/editor/utils/event.d.ts

@@ -0,0 +1,3 @@
+import { Element } from '../../types';
+export declare function getEventTarget(element: SVGElement | null): Element | null;
+export declare function getSelectableTarget(element: SVGElement | null): Element | null;

package/lib/editor/utils/event.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getEventTarget = getEventTarget;
+exports.getSelectableTarget = getSelectableTarget;
+const utils_1 = require("../../utils");
+function getEventTarget(element) {
+    if (!element)
+        return null;
+    const preprocess = [getRoughEventTarget];
+    let target = element;
+    for (const fn of preprocess) {
+        const result = fn(target);
+        if (result) {
+            target = result;
+            break;
+        }
+    }
+    return getSelectableTarget(target);
+}
+function getSelectableTarget(element) {
+    if (!element)
+        return null;
+    const recognizers = [getTextEventTarget, getIconEventTarget];
+    for (const fn of recognizers) {
+        const result = fn(element);
+        if (result) {
+            return result;
+        }
+    }
+    if ((0, utils_1.isEditArea)(element)) {
+        return element;
+    }
+    if ((0, utils_1.isEditableText)(element) || (0, utils_1.isIconElement)(element)) {
+        return element;
+    }
+    return null;
+}
+const getRoughEventTarget = (element) => {
+    const is = (ele) => {
+        if (!ele)
+            return false;
+        return (0, utils_1.isRoughElement)(ele) || (0, utils_1.isRoughVolume)(ele);
+    };
+    if (is(element)) {
+        return element.parentElement;
+    }
+    if (is(element.parentElement)) {
+        return element.parentElement?.parentElement;
+    }
+    return null;
+};
+const getTextEventTarget = (element) => {
+    if ((0, utils_1.isTextEntity)(element) && (0, utils_1.isForeignObjectElement)(element.parentElement)) {
+        return element.parentElement;
+    }
+    return null;
+};
+const getIconEventTarget = (element) => {
+    const parent = element.parentElement;
+    if ((0, utils_1.isItemIconGroup)(parent)) {
+        return parent;
+    }
+    if ((0, utils_1.isItemIcon)(element)) {
+        return element;
+    }
+    return null;
+};

package/lib/editor/utils/extension.d.ts

@@ -0,0 +1,13 @@
+export declare class Extension<T> {
+    private extensions;
+    register(name: string, extension: T, options?: {
+        override?: boolean;
+    }): void;
+    get(name: string): T | undefined;
+    has(name: string): boolean;
+    getAll(): ReadonlyMap<string, T>;
+    forEach(callback: (extension: T, name: string) => void): void;
+    [Symbol.iterator](): MapIterator<[string, T]>;
+    unregister(name: string): boolean;
+    destroy(): void;
+}

package/lib/editor/utils/extension.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Extension = void 0;
+class Extension {
+    constructor() {
+        this.extensions = new Map();
+    }
+    register(name, extension, options) {
+        if (!options?.override && this.extensions.has(name)) {
+            throw new Error(`Extension "${name}" already registered`);
+        }
+        this.extensions.set(name, extension);
+    }
+    get(name) {
+        return this.extensions.get(name);
+    }
+    has(name) {
+        return this.extensions.has(name);
+    }
+    getAll() {
+        return this.extensions;
+    }
+    forEach(callback) {
+        this.extensions.forEach((extension, name) => {
+            callback(extension, name);
+        });
+    }
+    [Symbol.iterator]() {
+        return this.extensions.entries();
+    }
+    unregister(name) {
+        return this.extensions.delete(name);
+    }
+    destroy() {
+        this.extensions.forEach((extension) => {
+            if (extension && typeof extension.dispose === 'function') {
+                extension.dispose();
+            }
+        });
+        this.extensions.clear();
+    }
+}
+exports.Extension = Extension;

package/lib/editor/utils/hotkey.d.ts

@@ -0,0 +1,20 @@
+export type HotkeyOptions = {
+    /**
+     * 热键监听的目标，默认监听 document。
+     */
+    target?: Document | HTMLElement;
+    /**
+     * 额外的过滤逻辑，返回 false 时会跳过本次事件。
+     */
+    filter?: (event: KeyboardEvent) => boolean;
+};
+export declare class Hotkey {
+    private target;
+    private filter?;
+    private bindings;
+    constructor(options?: HotkeyOptions);
+    bind(combo: string | string[], handler: (event: KeyboardEvent) => void): () => void;
+    destroy(): void;
+    private unbind;
+    private handleKeydown;
+}

package/lib/editor/utils/hotkey.js

@@ -0,0 +1,113 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Hotkey = void 0;
+const isEditableTarget = (target) => {
+    if (!target)
+        return false;
+    if (!(target instanceof HTMLElement))
+        return false;
+    if (target.isContentEditable)
+        return true;
+    const tagName = target.tagName.toLowerCase();
+    return tagName === 'input' || tagName === 'textarea' || tagName === 'select';
+};
+const normalizeCombo = (combo) => {
+    const parts = combo
+        .toLowerCase()
+        .split('+')
+        .map((p) => p.trim())
+        .filter(Boolean);
+    const comboObj = { key: '' };
+    parts.forEach((part) => {
+        if (part === 'shift')
+            comboObj.shift = true;
+        else if (part === 'alt' || part === 'option')
+            comboObj.alt = true;
+        else if (part === 'ctrl' || part === 'control')
+            comboObj.ctrl = true;
+        else if (part === 'meta' || part === 'cmd' || part === 'command')
+            comboObj.meta = true;
+        else if (part === 'mod')
+            comboObj.mod = true;
+        else
+            comboObj.key = part;
+    });
+    if (!comboObj.key) {
+        throw new Error(`Invalid hotkey combo: "${combo}"`);
+    }
+    return comboObj;
+};
+const matchCombo = (event, combo) => {
+    const key = event.key.toLowerCase();
+    if (key !== combo.key)
+        return false;
+    const wantsMod = combo.mod ?? false;
+    const hasMeta = event.metaKey;
+    const hasCtrl = event.ctrlKey;
+    const hasMod = hasMeta || hasCtrl;
+    const matchesStrict = (expected, actual) => expected === undefined ? !actual : expected === actual;
+    if (wantsMod && !hasMod)
+        return false;
+    if (wantsMod) {
+        if (!matchesStrict(combo.shift, event.shiftKey))
+            return false;
+        if (!matchesStrict(combo.alt, event.altKey))
+            return false;
+        if (combo.meta !== undefined && !matchesStrict(combo.meta, hasMeta))
+            return false;
+        if (combo.ctrl !== undefined && !matchesStrict(combo.ctrl, hasCtrl))
+            return false;
+        return true;
+    }
+    if (!matchesStrict(combo.meta, hasMeta))
+        return false;
+    if (!matchesStrict(combo.ctrl, hasCtrl))
+        return false;
+    if (!matchesStrict(combo.shift, event.shiftKey))
+        return false;
+    if (!matchesStrict(combo.alt, event.altKey))
+        return false;
+    return true;
+};
+class Hotkey {
+    constructor(options = {}) {
+        this.bindings = [];
+        this.handleKeydown = (event) => {
+            if (!(event instanceof KeyboardEvent))
+                return;
+            if (event.defaultPrevented)
+                return;
+            if (isEditableTarget(event.target))
+                return;
+            if (this.filter && !this.filter(event))
+                return;
+            for (const binding of this.bindings) {
+                if (binding.combos.some((combo) => matchCombo(event, combo))) {
+                    binding.handler(event);
+                    break;
+                }
+            }
+        };
+        const { target = document, filter } = options;
+        this.target = target;
+        this.filter = filter;
+        this.target.addEventListener('keydown', this.handleKeydown);
+    }
+    bind(combo, handler) {
+        const combos = Array.isArray(combo) ? combo : [combo];
+        const binding = {
+            combos: combos.map((c) => normalizeCombo(c)),
+            handler,
+        };
+        this.bindings.push(binding);
+        return () => this.unbind(binding);
+    }
+    destroy() {
+        this.target.removeEventListener('keydown', this.handleKeydown);
+        this.bindings = [];
+    }
+    unbind(binding) {
+        this.bindings = this.bindings.filter((item) => item !== binding);
+    }
+}
+exports.Hotkey = Hotkey;

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

@@ -0,0 +1,7 @@
+export * from './click-handler';
+export * from './coordinate';
+export * from './data';
+export * from './element';
+export * from './event';
+export * from './extension';
+export * from './hotkey';

package/lib/editor/utils/index.js

@@ -0,0 +1,23 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./click-handler"), exports);
+__exportStar(require("./coordinate"), exports);
+__exportStar(require("./data"), exports);
+__exportStar(require("./element"), exports);
+__exportStar(require("./event"), exports);
+__exportStar(require("./extension"), exports);
+__exportStar(require("./hotkey"), exports);

package/lib/exporter/svg.js

@@ -34,11 +34,13 @@ async function embedIcons(svg) {
         }
     });
 }
+const iconRole = 'icon-defs';
 function getDefs(svg) {
-    const defs = svg.querySelector('defs[id="icon-defs"]');
+    const defs = (0, utils_1.getElementByRole)(svg, iconRole);
     if (defs)
         return defs;
-    const _defs = (0, utils_1.createElement)('defs', { id: 'icon-defs' });
+    const _defs = (0, utils_1.createElement)('defs');
+    (0, utils_1.setElementRole)(_defs, iconRole);
     svg.prepend(_defs);
     return _defs;
 }
@@ -49,9 +51,9 @@ function cleanSVG(svg) {
     clearDataset(svg);
 }
 function removeBtnGroup(svg) {
-    const btnGroup = svg.querySelector('[data-element-type=btns-group]');
+    const btnGroup = (0, utils_1.getElementByRole)(svg, "btns-group" /* ElementTypeEnum.BtnsGroup */);
     btnGroup?.remove();
-    const btnIconDefs = svg.querySelector('#btn-icon-defs');
+    const btnIconDefs = (0, utils_1.getElementByRole)(svg, 'btn-icon-defs');
     btnIconDefs?.remove();
 }
 function removeTransientContainer(svg) {

package/lib/index.d.ts

@@ -1,6 +1,8 @@
 export declare const VERSION: string;
 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 { 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, registerFont, registerPalette, registerPattern, setDefaultFont, } from './renderer';
 export { loadSVGResource, registerResourceLoader } from './resource';
@@ -8,9 +10,10 @@ export { Infographic } from './runtime';
 export { getTemplate, getTemplates, registerTemplate } from './templates';
 export { getTheme, getThemes, registerTheme } from './themes';
 export { parseSVG } from './utils';
+export type { EditBarOptions } from './editor';
 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';
-export type { GradientConfig, IRenderer, LinearGradient, Palette, PatternConfig, PatternGenerator, PatternStyle, RadialGradient, RoughConfig, StylizeConfig, TextAlignment, TextHorizontalAlign, TextVerticalAlign, } from './renderer';
+export type { GradientConfig, IRenderer, LinearGradient, Palette, PatternConfig, PatternGenerator, PatternStyle, RadialGradient, RoughConfig, StylizeConfig, } from './renderer';
 export type { ParsedTemplateOptions, TemplateOptions } from './templates';
 export type { ThemeColors, ThemeConfig, ThemeSeed } from './themes';
-export type { Data, Font, FontWeightName, ImageResource, ItemDatum, } from './types';
+export type { Data, Font, FontWeightName, ImageResource, ItemDatum, TextHorizontalAlign, TextVerticalAlign, } from './types';

package/lib/index.js

@@ -17,13 +17,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.parseSVG = exports.registerTheme = exports.getThemes = exports.getTheme = exports.registerTemplate = exports.getTemplates = exports.getTemplate = exports.Infographic = exports.registerResourceLoader = exports.loadSVGResource = exports.setDefaultFont = exports.registerPattern = exports.registerPalette = exports.registerFont = exports.getPaletteColor = exports.getPalette = exports.getFonts = exports.getFont = exports.renderSVG = exports.jsxs = exports.jsxDEV = exports.jsx = exports.getElementsBounds = exports.getElementBounds = exports.getCombinedBounds = exports.createLayout = exports.createFragment = exports.cloneElement = exports.Text = exports.Rect = exports.Polygon = exports.Path = exports.Group = exports.Fragment = exports.Ellipse = exports.Defs = exports.getThemeColors = exports.getItemProps = exports.VERSION = void 0;
+exports.parseSVG = exports.registerTheme = exports.getThemes = exports.getTheme = exports.registerTemplate = exports.getTemplates = exports.getTemplate = exports.Infographic = exports.registerResourceLoader = exports.loadSVGResource = exports.setDefaultFont = exports.registerPattern = exports.registerPalette = exports.registerFont = exports.getPaletteColor = exports.getPalette = exports.getFonts = exports.getFont = exports.renderSVG = exports.jsxs = exports.jsxDEV = exports.jsx = exports.getElementsBounds = exports.getElementBounds = exports.getCombinedBounds = exports.createLayout = exports.createFragment = exports.cloneElement = exports.Text = exports.Rect = exports.Polygon = exports.Path = exports.Group = exports.Fragment = exports.Ellipse = exports.Defs = exports.ResizeElement = exports.Plugin = exports.EditBar = exports.ZoomWheel = exports.SelectHighlight = exports.Interaction = exports.HotkeyHistory = exports.DragElement = exports.DblClickEditText = exports.ClickSelect = exports.BrushSelect = exports.getThemeColors = exports.getItemProps = exports.VERSION = void 0;
 const package_json_1 = __importDefault(require("../package.json"));
 exports.VERSION = package_json_1.default.version;
 __exportStar(require("./designs"), exports);
 var utils_1 = require("./designs/utils");
 Object.defineProperty(exports, "getItemProps", { enumerable: true, get: function () { return utils_1.getItemProps; } });
 Object.defineProperty(exports, "getThemeColors", { enumerable: true, get: function () { return utils_1.getThemeColors; } });
+var interactions_1 = require("./editor/interactions");
+Object.defineProperty(exports, "BrushSelect", { enumerable: true, get: function () { return interactions_1.BrushSelect; } });
+Object.defineProperty(exports, "ClickSelect", { enumerable: true, get: function () { return interactions_1.ClickSelect; } });
+Object.defineProperty(exports, "DblClickEditText", { enumerable: true, get: function () { return interactions_1.DblClickEditText; } });
+Object.defineProperty(exports, "DragElement", { enumerable: true, get: function () { return interactions_1.DragElement; } });
+Object.defineProperty(exports, "HotkeyHistory", { enumerable: true, get: function () { return interactions_1.HotkeyHistory; } });
+Object.defineProperty(exports, "Interaction", { enumerable: true, get: function () { return interactions_1.Interaction; } });
+Object.defineProperty(exports, "SelectHighlight", { enumerable: true, get: function () { return interactions_1.SelectHighlight; } });
+Object.defineProperty(exports, "ZoomWheel", { enumerable: true, get: function () { return interactions_1.ZoomWheel; } });
+var plugins_1 = require("./editor/plugins");
+Object.defineProperty(exports, "EditBar", { enumerable: true, get: function () { return plugins_1.EditBar; } });
+Object.defineProperty(exports, "Plugin", { enumerable: true, get: function () { return plugins_1.Plugin; } });
+Object.defineProperty(exports, "ResizeElement", { enumerable: true, get: function () { return plugins_1.ResizeElement; } });
 var jsx_1 = require("./jsx");
 Object.defineProperty(exports, "Defs", { enumerable: true, get: function () { return jsx_1.Defs; } });
 Object.defineProperty(exports, "Ellipse", { enumerable: true, get: function () { return jsx_1.Ellipse; } });

package/lib/jsx/components/Polygon.js

@@ -9,7 +9,8 @@ function Polygon({ points = [], ...props }) {
         points: pointsStr,
     };
     if (x !== undefined || y !== undefined) {
-        finalProps.transform = `translate(${x ?? 0}, ${y ?? 0})`;
+        finalProps.transform =
+            `translate(${x ?? 0}, ${y ?? 0})` + (finalProps.transform || '');
     }
     const node = {
         type: 'polygon',