@antv/infographic 0.1.2 → 0.1.3

package/esm/editor/plugins/edit-bar/components/popover.js

@@ -0,0 +1,378 @@
+import { COMPONENT_ROLE } from '../../../../constants';
+import { injectStyleOnce, setElementRole } from '../../../../utils';
+const POPOVER_CLASS = 'infographic-edit-popover';
+const POPOVER_CONTENT_CLASS = `${POPOVER_CLASS}__content`;
+const POPOVER_ARROW_CLASS = `${POPOVER_CLASS}__arrow`;
+const POPOVER_STYLE_ID = 'infographic-edit-popover-style';
+export function Popover(props) {
+    ensurePopoverStyle();
+    const placement = props.placement ?? 'top';
+    const closeOnOutsideClick = props.closeOnOutsideClick ?? true;
+    const triggerActions = Array.isArray(props.trigger)
+        ? props.trigger
+        : [props.trigger || 'hover'];
+    const hoverOpenDelay = props.mouseEnterDelay ?? 50;
+    const hoverCloseDelay = props.mouseLeaveDelay ?? 150;
+    const offset = props.offset ?? 8;
+    const arrowSize = 8;
+    const arrowInnerSize = 7;
+    const bodyPadding = typeof props.padding === 'number'
+        ? `${props.padding}px`
+        : (props.padding ?? '4px');
+    const container = document.createElement('div');
+    container.classList.add(POPOVER_CLASS);
+    const trigger = props.target ?? document.createElement('div');
+    container.appendChild(trigger);
+    const getContentContainer = () => {
+        const next = typeof props.getContainer === 'function'
+            ? props.getContainer()
+            : props.getContainer;
+        return next ?? document.body;
+    };
+    const content = document.createElement('div');
+    content.classList.add(POPOVER_CONTENT_CLASS);
+    setElementRole(content, COMPONENT_ROLE);
+    content.dataset.placement = Array.isArray(placement)
+        ? placement[0]
+        : placement;
+    content.setAttribute('data-open', String(Boolean(props.open)));
+    content.style.setProperty('--popover-gap', `${offset}px`);
+    content.style.setProperty('--popover-arrow-size', `${arrowSize}px`);
+    content.style.setProperty('--popover-arrow-inner-size', `${arrowInnerSize}px`);
+    const contentContainer = getContentContainer();
+    const isPortal = contentContainer !== container;
+    const arrow = document.createElement('div');
+    arrow.classList.add(POPOVER_ARROW_CLASS);
+    content.appendChild(arrow);
+    const body = document.createElement('div');
+    body.classList.add(`${POPOVER_CONTENT_CLASS}-body`);
+    body.style.padding = bodyPadding;
+    content.appendChild(body);
+    contentContainer.appendChild(content);
+    let open = Boolean(props.open);
+    let placementPriority = Array.isArray(placement) ? placement : [placement];
+    let currentPlacement = placementPriority[0] ?? 'top';
+    const updatePosition = () => {
+        const targetRect = trigger.getBoundingClientRect();
+        const contentRect = content.getBoundingClientRect();
+        const scrollX = window.scrollX || document.documentElement.scrollLeft;
+        const scrollY = window.scrollY || document.documentElement.scrollTop;
+        const viewportWidth = document.documentElement.clientWidth;
+        const viewportHeight = document.documentElement.clientHeight;
+        let left = 0;
+        let top = 0;
+        const calcPosition = (placementValue) => {
+            switch (placementValue) {
+                case 'top':
+                    return {
+                        left: scrollX +
+                            targetRect.left +
+                            targetRect.width / 2 -
+                            contentRect.width / 2,
+                        top: scrollY + targetRect.top - contentRect.height - offset,
+                    };
+                case 'bottom':
+                    return {
+                        left: scrollX +
+                            targetRect.left +
+                            targetRect.width / 2 -
+                            contentRect.width / 2,
+                        top: scrollY + targetRect.bottom + offset,
+                    };
+                case 'left':
+                    return {
+                        left: scrollX + targetRect.left - contentRect.width - offset,
+                        top: scrollY +
+                            targetRect.top +
+                            targetRect.height / 2 -
+                            contentRect.height / 2,
+                    };
+                case 'right':
+                default:
+                    return {
+                        left: scrollX + targetRect.right + offset,
+                        top: scrollY +
+                            targetRect.top +
+                            targetRect.height / 2 -
+                            contentRect.height / 2,
+                    };
+            }
+        };
+        const fitsViewport = (nextLeft, nextTop) => nextLeft >= scrollX &&
+            nextTop >= scrollY &&
+            nextLeft + contentRect.width <= scrollX + viewportWidth &&
+            nextTop + contentRect.height <= scrollY + viewportHeight;
+        let chosenPlacement = placementPriority[0] ?? 'top';
+        let position = calcPosition(chosenPlacement);
+        for (const candidate of placementPriority) {
+            const nextPosition = calcPosition(candidate);
+            position = nextPosition;
+            if (fitsViewport(nextPosition.left, nextPosition.top)) {
+                chosenPlacement = candidate;
+                break;
+            }
+        }
+        currentPlacement = chosenPlacement;
+        content.dataset.placement = currentPlacement;
+        if (!isPortal)
+            return;
+        ({ left, top } = position);
+        content.style.left = `${left}px`;
+        content.style.top = `${top}px`;
+        content.style.right = 'auto';
+        content.style.bottom = 'auto';
+        content.style.transform = 'translate(0, 0)';
+    };
+    if (isPortal) {
+        content.style.position = 'absolute';
+        window.addEventListener('resize', updatePosition);
+        window.addEventListener('scroll', updatePosition, true);
+    }
+    const setContent = (next) => {
+        let nextContent = next;
+        if (typeof nextContent === 'function') {
+            nextContent = nextContent();
+        }
+        body.innerHTML = '';
+        if (nextContent instanceof HTMLElement) {
+            body.appendChild(nextContent);
+        }
+        else {
+            body.textContent = nextContent ?? '';
+        }
+        updatePosition();
+    };
+    const setPlacement = (next) => {
+        placementPriority = Array.isArray(next) ? next : [next];
+        currentPlacement = placementPriority[0] ?? 'top';
+        updatePosition();
+    };
+    const setOpen = (value) => {
+        open = value;
+        content.setAttribute('data-open', String(open));
+        if (open)
+            updatePosition();
+        if (open && closeOnOutsideClick) {
+            document.addEventListener('click', handleOutsideClick, true);
+        }
+        else {
+            document.removeEventListener('click', handleOutsideClick, true);
+        }
+    };
+    const toggle = () => setOpen(!open);
+    const handleOutsideClick = (event) => {
+        const targetNode = event.target;
+        if (!container.contains(targetNode) &&
+            (isPortal ? !content.contains(targetNode) : true)) {
+            setOpen(false);
+        }
+    };
+    let openTimer;
+    let closeTimer;
+    const hasHover = triggerActions.includes('hover');
+    const hasClick = triggerActions.includes('click');
+    const clearTimers = () => {
+        if (openTimer !== undefined) {
+            clearTimeout(openTimer);
+            openTimer = undefined;
+        }
+        if (closeTimer !== undefined) {
+            clearTimeout(closeTimer);
+            closeTimer = undefined;
+        }
+    };
+    const handleMouseEnter = () => {
+        if (!hasHover)
+            return;
+        clearTimers();
+        openTimer = window.setTimeout(() => setOpen(true), hoverOpenDelay);
+    };
+    const handleMouseLeave = () => {
+        if (!hasHover)
+            return;
+        clearTimers();
+        closeTimer = window.setTimeout(() => setOpen(false), hoverCloseDelay);
+    };
+    if (hasClick) {
+        trigger.addEventListener('click', toggle);
+    }
+    if (hasHover) {
+        container.addEventListener('mouseenter', handleMouseEnter);
+        container.addEventListener('mouseleave', handleMouseLeave);
+        content.addEventListener('mouseenter', handleMouseEnter);
+        content.addEventListener('mouseleave', handleMouseLeave);
+    }
+    setContent(props.content);
+    setPlacement(placement);
+    setOpen(open);
+    const api = {
+        setOpen,
+        toggle,
+        setContent,
+        setPlacement,
+        destroy: () => {
+            document.removeEventListener('click', handleOutsideClick, true);
+            if (hasClick)
+                trigger.removeEventListener('click', toggle);
+            if (hasHover) {
+                container.removeEventListener('mouseenter', handleMouseEnter);
+                container.removeEventListener('mouseleave', handleMouseLeave);
+                content.removeEventListener('mouseenter', handleMouseEnter);
+                content.removeEventListener('mouseleave', handleMouseLeave);
+                clearTimers();
+            }
+            if (isPortal) {
+                window.removeEventListener('resize', updatePosition);
+                window.removeEventListener('scroll', updatePosition, true);
+                content.remove();
+            }
+            container.remove();
+        },
+    };
+    return Object.assign(container, api);
+}
+function ensurePopoverStyle() {
+    injectStyleOnce(POPOVER_STYLE_ID, `
+.${POPOVER_CLASS} {
+  position: relative;
+  display: inline-flex;
+}
+.${POPOVER_CONTENT_CLASS} {
+  position: absolute;
+  z-index: 1200;
+  padding: 0;
+  --popover-gap: 8px;
+  --popover-arrow-size: 8px;
+  --popover-arrow-inner-size: 7px;
+  background: #fff;
+  border-radius: 8px;
+  border: 1px solid rgba(239, 240, 240, 0.9);
+  box-shadow: rgba(0, 0, 0, 0.08) 0px 1px 2px -2px, rgba(0, 0, 0, 0.04) 0px 2px 6px, rgba(0, 0, 0, 0.02) 0px 4px 8px 1px;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
+}
+.${POPOVER_CONTENT_CLASS}-body {
+  padding: 4px;
+  color: #000000d9;
+  font-size: 12px;
+  line-height: 1.5;
+}
+.${POPOVER_CONTENT_CLASS}[data-open="true"] {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+}
+.${POPOVER_ARROW_CLASS} {
+  position: absolute;
+  width: 0;
+  height: 0;
+}
+.${POPOVER_ARROW_CLASS}::after {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 0;
+}
+.${POPOVER_CONTENT_CLASS}[data-placement="top"] {
+  left: 50%;
+  bottom: calc(100% + var(--popover-gap));
+  transform: translate(-50%, calc(-1 * var(--popover-gap) / 2));
+}
+.${POPOVER_CONTENT_CLASS}[data-placement="top"] .${POPOVER_ARROW_CLASS} {
+  left: 50%;
+  bottom: calc(-1 * var(--popover-arrow-size));
+  transform: translateX(-50%);
+  border-left: var(--popover-arrow-size) solid transparent;
+  border-right: var(--popover-arrow-size) solid transparent;
+  border-top: var(--popover-arrow-size) solid rgba(239, 240, 240, 0.9);
+}
+.${POPOVER_CONTENT_CLASS}[data-placement="top"] .${POPOVER_ARROW_CLASS}::after {
+  left: 50%;
+  bottom: 1px;
+  transform: translateX(-50%);
+  border-left: var(--popover-arrow-inner-size) solid transparent;
+  border-right: var(--popover-arrow-inner-size) solid transparent;
+  border-top: var(--popover-arrow-inner-size) solid #fff;
+}
+.${POPOVER_CONTENT_CLASS}[data-placement="top"][data-open="true"] {
+  transform: translate(-50%, 0);
+}
+.${POPOVER_CONTENT_CLASS}[data-placement="bottom"] {
+  left: 50%;
+  top: calc(100% + var(--popover-gap));
+  transform: translate(-50%, calc(var(--popover-gap) / 2));
+}
+.${POPOVER_CONTENT_CLASS}[data-placement="bottom"] .${POPOVER_ARROW_CLASS} {
+  left: 50%;
+  top: calc(-1 * var(--popover-arrow-size) + 2px);
+  transform: translateX(-50%);
+  border-left: var(--popover-arrow-size) solid transparent;
+  border-right: var(--popover-arrow-size) solid transparent;
+  border-bottom: var(--popover-arrow-size) solid rgba(239, 240, 240, 0.9);
+}
+.${POPOVER_CONTENT_CLASS}[data-placement="bottom"] .${POPOVER_ARROW_CLASS}::after {
+  left: 50%;
+  top: 1px;
+  transform: translateX(-50%);
+  border-left: var(--popover-arrow-inner-size) solid transparent;
+  border-right: var(--popover-arrow-inner-size) solid transparent;
+  border-bottom: var(--popover-arrow-inner-size) solid #fff;
+}
+.${POPOVER_CONTENT_CLASS}[data-placement="bottom"][data-open="true"] {
+  transform: translate(-50%, 0);
+}
+.${POPOVER_CONTENT_CLASS}[data-placement="left"] {
+  right: calc(100% + var(--popover-gap));
+  top: 50%;
+  transform: translate(calc(-1 * var(--popover-gap) / 2), -50%);
+}
+.${POPOVER_CONTENT_CLASS}[data-placement="left"] .${POPOVER_ARROW_CLASS} {
+  right: calc(-1 * var(--popover-arrow-size) + 1px);
+  top: 50%;
+  transform: translateY(-50%);
+  border-top: var(--popover-arrow-size) solid transparent;
+  border-bottom: var(--popover-arrow-size) solid transparent;
+  border-left: var(--popover-arrow-size) solid rgba(239, 240, 240, 0.9);
+  border-right: 0;
+}
+.${POPOVER_CONTENT_CLASS}[data-placement="left"] .${POPOVER_ARROW_CLASS}::after {
+  right: 1px;
+  top: 50%;
+  transform: translateY(-50%);
+  border-top: var(--popover-arrow-inner-size) solid transparent;
+  border-bottom: var(--popover-arrow-inner-size) solid transparent;
+  border-left: var(--popover-arrow-inner-size) solid #fff;
+  border-right: 0;
+}
+.${POPOVER_CONTENT_CLASS}[data-placement="left"][data-open="true"] {
+  transform: translate(0, -50%);
+}
+.${POPOVER_CONTENT_CLASS}[data-placement="right"] {
+  left: calc(100% + var(--popover-gap));
+  top: 50%;
+  transform: translate(calc(var(--popover-gap) / 2), -50%);
+}
+.${POPOVER_CONTENT_CLASS}[data-placement="right"] .${POPOVER_ARROW_CLASS} {
+  left: calc(-1 * var(--popover-arrow-size) + 1px);
+  top: 50%;
+  transform: translateY(-50%);
+  border-top: var(--popover-arrow-size) solid transparent;
+  border-bottom: var(--popover-arrow-size) solid transparent;
+  border-right: var(--popover-arrow-size) solid rgba(239, 240, 240, 0.9);
+  border-left: 0;
+}
+.${POPOVER_CONTENT_CLASS}[data-placement="right"] .${POPOVER_ARROW_CLASS}::after {
+  left: 1px;
+  top: 50%;
+  transform: translateY(-50%);
+  border-top: var(--popover-arrow-inner-size) solid transparent;
+  border-bottom: var(--popover-arrow-inner-size) solid transparent;
+  border-right: var(--popover-arrow-inner-size) solid #fff;
+}
+.${POPOVER_CONTENT_CLASS}[data-placement="right"][data-open="true"] {
+  transform: translate(0, -50%);
+}
+`);
+}

package/esm/editor/plugins/edit-bar/components/select.d.ts

@@ -0,0 +1,22 @@
+export type SelectValue = string;
+export type SelectOption = {
+    label?: string;
+    value: SelectValue;
+    disabled?: boolean;
+    render?: () => HTMLElement;
+};
+export type SelectProps = {
+    options: SelectOption[];
+    value?: SelectValue;
+    placeholder?: string;
+    onChange?: (value: SelectValue, option?: SelectOption) => void;
+    renderOption?: (option: SelectOption) => HTMLElement;
+    renderLabel?: (option: SelectOption | undefined) => HTMLElement | string | null | undefined;
+};
+export type SelectHandle = {
+    setValue: (value: SelectValue) => void;
+    getValue: () => SelectValue | undefined;
+    setOptions: (options: SelectOption[]) => void;
+    destroy: () => void;
+};
+export declare function Select(props: SelectProps): HTMLDivElement & SelectHandle;

package/esm/editor/plugins/edit-bar/components/select.js

@@ -0,0 +1,201 @@
+import { injectStyleOnce } from '../../../../utils';
+const SELECT_CLASS = 'infographic-edit-select';
+const SELECT_STYLE_ID = 'infographic-edit-select-style';
+const OPTION_CLASS = `${SELECT_CLASS}__option`;
+const DROPDOWN_CLASS = `${SELECT_CLASS}__dropdown`;
+const TRIGGER_CLASS = `${SELECT_CLASS}__trigger`;
+const LABEL_CLASS = `${SELECT_CLASS}__label`;
+const ARROW_CLASS = `${SELECT_CLASS}__arrow`;
+export function Select(props) {
+    ensureSelectStyle();
+    let open = false;
+    let options = props.options || [];
+    let selected = props.value;
+    const container = document.createElement('div');
+    container.classList.add(SELECT_CLASS);
+    container.tabIndex = 0;
+    const trigger = document.createElement('button');
+    trigger.type = 'button';
+    trigger.classList.add(TRIGGER_CLASS);
+    const label = document.createElement('span');
+    label.classList.add(LABEL_CLASS);
+    trigger.appendChild(label);
+    const arrow = document.createElement('span');
+    arrow.classList.add(ARROW_CLASS);
+    arrow.textContent = 'v';
+    trigger.appendChild(arrow);
+    const dropdown = document.createElement('div');
+    dropdown.classList.add(DROPDOWN_CLASS);
+    dropdown.setAttribute('data-open', 'false');
+    container.appendChild(trigger);
+    container.appendChild(dropdown);
+    const handleDocumentClick = (event) => {
+        if (!container.contains(event.target)) {
+            setOpen(false);
+        }
+    };
+    const renderLabel = () => {
+        const option = options.find((opt) => opt.value === selected);
+        const custom = props.renderLabel?.(option);
+        if (typeof custom === 'string') {
+            label.textContent = custom;
+        }
+        else if (custom instanceof HTMLElement) {
+            label.replaceChildren(custom);
+        }
+        else if (custom === null || custom === undefined) {
+            if (option) {
+                label.textContent = option.label ?? option.value;
+            }
+            else {
+                label.textContent = props.placeholder ?? '请选择';
+            }
+        }
+        else {
+            label.textContent = String(custom);
+        }
+    };
+    const renderOptions = () => {
+        dropdown.innerHTML = '';
+        options.forEach((option) => {
+            const optionNode = props.renderOption?.(option) ??
+                option.render?.() ??
+                defaultOptionNode(option);
+            optionNode.classList.add(OPTION_CLASS);
+            optionNode.setAttribute('data-value', option.value);
+            if (option.disabled) {
+                optionNode.setAttribute('aria-disabled', 'true');
+                optionNode.classList.add(`${OPTION_CLASS}--disabled`);
+            }
+            else {
+                optionNode.addEventListener('click', () => {
+                    selectValue(option.value, option);
+                });
+            }
+            dropdown.appendChild(optionNode);
+        });
+    };
+    const selectValue = (value, option) => {
+        selected = value;
+        renderLabel();
+        props.onChange?.(value, option);
+        setOpen(false);
+    };
+    const setOpen = (value) => {
+        open = value;
+        dropdown.setAttribute('data-open', String(open));
+        container.setAttribute('data-open', String(open));
+        if (open) {
+            document.addEventListener('click', handleDocumentClick);
+        }
+        else {
+            document.removeEventListener('click', handleDocumentClick);
+        }
+    };
+    trigger.addEventListener('click', () => setOpen(!open));
+    renderLabel();
+    renderOptions();
+    const api = {
+        setValue: (value) => {
+            selected = value;
+            renderLabel();
+        },
+        getValue: () => selected,
+        setOptions: (nextOptions) => {
+            options = nextOptions;
+            renderOptions();
+            renderLabel();
+        },
+        destroy: () => {
+            document.removeEventListener('click', handleDocumentClick);
+            container.remove();
+        },
+    };
+    return Object.assign(container, api);
+}
+function ensureSelectStyle() {
+    injectStyleOnce(SELECT_STYLE_ID, `
+.${SELECT_CLASS} {
+  position: relative;
+  display: inline-flex;
+  min-width: 140px;
+  font-family: "Helvetica Neue", Arial, sans-serif;
+}
+.${TRIGGER_CLASS} {
+  width: 100%;
+  height: 32px;
+  padding: 4px 28px 4px 8px;
+  background: #fff;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  color: #000000d9;
+  cursor: pointer;
+  outline: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+.${TRIGGER_CLASS}:hover {
+  border-color: #4096ff;
+}
+.${TRIGGER_CLASS}:focus-visible {
+  border-color: #4096ff;
+  box-shadow: 0 0 0 2px rgba(64, 150, 255, 0.2);
+}
+.${LABEL_CLASS} {
+  flex: 1;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.${ARROW_CLASS} {
+  display: inline-flex;
+  align-items: center;
+  margin-left: 6px;
+  font-size: 10px;
+  color: #8c8c8c;
+}
+.${DROPDOWN_CLASS} {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: calc(100% + 4px);
+  background: #fff;
+  border: 1px solid #e5e5e5;
+  border-radius: 6px;
+  box-shadow: 0 6px 16px rgba(0,0,0,0.08), 0 3px 6px -4px rgba(0,0,0,0.12), 0 9px 28px 8px rgba(0,0,0,0.05);
+  padding: 4px 0;
+  z-index: 1000;
+  max-height: 200px;
+  overflow-y: auto;
+  display: none;
+}
+.${DROPDOWN_CLASS}[data-open="true"] {
+  display: block;
+}
+.${OPTION_CLASS} {
+  padding: 6px 12px;
+  font-size: 12px;
+  color: #000000d9;
+  cursor: pointer;
+  line-height: 1.5;
+}
+.${OPTION_CLASS}:hover {
+  background: #f5f5f5;
+}
+.${OPTION_CLASS}--disabled {
+  color: #bfbfbf;
+  cursor: not-allowed;
+}
+.${OPTION_CLASS}--disabled:hover {
+  background: transparent;
+}
+`);
+}
+function defaultOptionNode(option) {
+    const node = document.createElement('div');
+    node.textContent = option.label ?? option.value;
+    return node;
+}

package/esm/editor/plugins/edit-bar/edit-bar.d.ts

@@ -0,0 +1,32 @@
+import { TextElement } from '../../../types';
+import type { IPlugin, PluginInitOptions, Selection } from '../../types';
+import { Plugin } from '../base';
+export interface EditBarOptions {
+    style?: Partial<CSSStyleDeclaration>;
+    className?: string;
+    getContainer?: HTMLElement | (() => HTMLElement);
+}
+type EditItem = HTMLElement;
+export declare class EditBar extends Plugin implements IPlugin {
+    private options?;
+    name: string;
+    private container?;
+    private selection;
+    constructor(options?: EditBarOptions | undefined);
+    init(options: PluginInitOptions): void;
+    destroy(): void;
+    private handleSelectionChanged;
+    private handleGeometryChanged;
+    private handleHistoryChanged;
+    protected getEditItems(selection: Selection): HTMLElement[];
+    protected getOrCreateEditBar(): HTMLDivElement;
+    protected getTextEditItems(text: TextElement): EditItem[];
+    protected getTextCollectionEditItems(selection: TextElement[]): EditItem[];
+    protected getIconEditItems(selection: Selection): EditItem[];
+    protected getIconCollectionEditItems(selection: Selection): EditItem[];
+    protected getGeometryEditItems(_selection: Selection): EditItem[];
+    protected getGeometryCollectionEditItems(selection: Selection): EditItem[];
+    protected getElementCollectionEditItems(selection: Selection): EditItem[];
+    private placeEditBar;
+}
+export {};