@antv/infographic 0.1.1 → 0.1.3

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

@@ -0,0 +1,97 @@
+export 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);
+    }
+}

package/esm/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/esm/editor/utils/coordinate.js

@@ -0,0 +1,31 @@
+export function getScreenCTM(svg) {
+    return svg.getScreenCTM() || new DOMMatrix();
+}
+export function getInverseScreenCTM(svg) {
+    return svg.getScreenCTM()?.inverse() || new DOMMatrix();
+}
+export 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);
+}
+export function clientToViewport(svg, x, y) {
+    return new DOMPoint(x, y).matrixTransform(getInverseScreenCTM(svg));
+}
+export 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/esm/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/esm/editor/utils/data.js

@@ -0,0 +1,18 @@
+import { getDatumByIndexes } from '../../utils';
+/**
+ * 获取数据项的子数据
+ */
+export function getChildrenDataByIndexes(data, indexes) {
+    if (indexes.length === 0)
+        return data.data;
+    const datum = 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]
+ */
+export function buildItemPath(indexes, prefix = 'data.items') {
+    return indexes.reduce((path, idx, i) => i === 0 ? `${path}[${idx}]` : `${path}.children[${idx}]`, prefix);
+}

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

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

package/esm/editor/utils/element.js

@@ -0,0 +1,9 @@
+import { getIconEntity, isIconElement } from '../../utils';
+export function getIndexesFromElement(element) {
+    return (getElementEntity(element)?.dataset.indexes?.split(',').map(Number) || []);
+}
+function getElementEntity(element) {
+    if (isIconElement(element))
+        return getIconEntity(element);
+    return element;
+}

package/esm/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/esm/editor/utils/event.js

@@ -0,0 +1,63 @@
+import { isEditArea, isEditableText, isForeignObjectElement, isIconElement, isItemIcon, isItemIconGroup, isRoughElement, isRoughVolume, isTextEntity, } from '../../utils';
+export 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);
+}
+export 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 (isEditArea(element)) {
+        return element;
+    }
+    if (isEditableText(element) || isIconElement(element)) {
+        return element;
+    }
+    return null;
+}
+const getRoughEventTarget = (element) => {
+    const is = (ele) => {
+        if (!ele)
+            return false;
+        return isRoughElement(ele) || isRoughVolume(ele);
+    };
+    if (is(element)) {
+        return element.parentElement;
+    }
+    if (is(element.parentElement)) {
+        return element.parentElement?.parentElement;
+    }
+    return null;
+};
+const getTextEventTarget = (element) => {
+    if (isTextEntity(element) && isForeignObjectElement(element.parentElement)) {
+        return element.parentElement;
+    }
+    return null;
+};
+const getIconEventTarget = (element) => {
+    const parent = element.parentElement;
+    if (isItemIconGroup(parent)) {
+        return parent;
+    }
+    if (isItemIcon(element)) {
+        return element;
+    }
+    return null;
+};

package/esm/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/esm/editor/utils/extension.js

@@ -0,0 +1,39 @@
+export 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();
+    }
+}

package/esm/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/esm/editor/utils/hotkey.js

@@ -0,0 +1,109 @@
+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;
+};
+export 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);
+    }
+}

package/esm/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/esm/editor/utils/index.js

@@ -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/esm/exporter/svg.js

@@ -1,4 +1,4 @@
-import { createElement, getViewBox, setAttributes, traverse } from '../utils';
+import { createElement, getElementByRole, getViewBox, setAttributes, setElementRole, traverse, } from '../utils';
 import { embedFonts } from './font';
 export async function exportToSVGString(svg, options = {}) {
     const node = await exportToSVG(svg, options);
@@ -30,11 +30,13 @@ async function embedIcons(svg) {
         }
     });
 }
+const iconRole = 'icon-defs';
 function getDefs(svg) {
-    const defs = svg.querySelector('defs[id="icon-defs"]');
+    const defs = getElementByRole(svg, iconRole);
     if (defs)
         return defs;
-    const _defs = createElement('defs', { id: 'icon-defs' });
+    const _defs = createElement('defs');
+    setElementRole(_defs, iconRole);
     svg.prepend(_defs);
     return _defs;
 }
@@ -45,9 +47,9 @@ function cleanSVG(svg) {
     clearDataset(svg);
 }
 function removeBtnGroup(svg) {
-    const btnGroup = svg.querySelector('[data-element-type=btns-group]');
+    const btnGroup = getElementByRole(svg, "btns-group" /* ElementTypeEnum.BtnsGroup */);
     btnGroup?.remove();
-    const btnIconDefs = svg.querySelector('#btn-icon-defs');
+    const btnIconDefs = getElementByRole(svg, 'btn-icon-defs');
     btnIconDefs?.remove();
 }
 function removeTransientContainer(svg) {

package/esm/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/esm/index.js

@@ -2,6 +2,8 @@ import pkg from '../package.json';
 export const VERSION = pkg.version;
 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';

package/esm/jsx/components/Polygon.js

@@ -6,7 +6,8 @@ export 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',