@antv/infographic 0.1.1 → 0.1.3

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

@@ -0,0 +1,211 @@
+import { COMPONENT_ROLE } from '../../../constants';
+import { getCombinedBounds } from '../../../jsx';
+import { getCommonAttrs, getIconAttrs, getTextElementProps, isEditableText, isGeometryElement, isIconElement, setElementRole, } from '../../../utils';
+import { getElementViewportBounds, getScreenCTM } from '../../utils';
+import { Plugin } from '../base';
+import { ElementAlign, FontAlign, FontColor, FontFamily, FontSize, IconColor, } from './edit-items';
+export class EditBar extends Plugin {
+    constructor(options) {
+        super();
+        this.options = options;
+        this.name = 'edit-bar';
+        this.selection = [];
+        this.handleSelectionChanged = ({ next }) => {
+            this.selection = next;
+            if (next.length === 0) {
+                if (this.container)
+                    hideContainer(this.container);
+                return;
+            }
+            const container = this.getOrCreateEditBar();
+            const items = this.getEditItems(next);
+            if (items.length === 0) {
+                hideContainer(container);
+                return;
+            }
+            setContainerItems(container, items);
+            this.placeEditBar(container, next);
+            showContainer(container);
+        };
+        this.handleGeometryChanged = ({ target, }) => {
+            if (!this.selection.includes(target) || !this.container)
+                return;
+            this.placeEditBar(this.container, this.selection);
+            showContainer(this.container);
+        };
+        this.handleHistoryChanged = () => {
+            if (!this.container || this.selection.length === 0)
+                return;
+            this.placeEditBar(this.container, this.selection);
+            showContainer(this.container);
+        };
+    }
+    init(options) {
+        super.init(options);
+        const { emitter } = options;
+        emitter.on('selection:change', this.handleSelectionChanged);
+        emitter.on('selection:geometrychange', this.handleGeometryChanged);
+        emitter.on('history:change', this.handleHistoryChanged);
+    }
+    destroy() {
+        const { emitter } = this;
+        emitter.off('selection:change', this.handleSelectionChanged);
+        emitter.off('selection:geometrychange', this.handleGeometryChanged);
+        emitter.off('history:change', this.handleHistoryChanged);
+        this.container?.remove();
+    }
+    getEditItems(selection) {
+        let hasText = false;
+        let hasIcon = false;
+        let hasGeometry = false;
+        for (const item of selection) {
+            if (isEditableText(item))
+                hasText = true;
+            else if (isIconElement(item))
+                hasIcon = true;
+            else if (isGeometryElement(item))
+                hasGeometry = true;
+            if (hasText && hasIcon && hasGeometry)
+                break;
+        }
+        // Only text
+        if (hasText && !hasIcon && !hasGeometry) {
+            if (selection.length === 1) {
+                return this.getTextEditItems(selection[0]);
+            }
+            else {
+                return this.getTextCollectionEditItems(selection);
+            }
+        }
+        // Only icon
+        if (!hasText && hasIcon && !hasGeometry) {
+            if (selection.length === 1) {
+                return this.getIconEditItems(selection);
+            }
+            else {
+                return this.getIconCollectionEditItems(selection);
+            }
+        }
+        // Only geometry
+        if (!hasText && !hasIcon && hasGeometry) {
+            if (selection.length === 1) {
+                return this.getGeometryEditItems(selection);
+            }
+            else {
+                return this.getGeometryCollectionEditItems(selection);
+            }
+        }
+        // Mixed or multiple elements
+        return this.getElementCollectionEditItems(selection);
+    }
+    getOrCreateEditBar() {
+        if (this.container)
+            return this.container;
+        const { style, className } = this.options || {};
+        const container = document.createElement('div');
+        Object.assign(container.style, {
+            visibility: 'hidden',
+            position: 'absolute',
+            left: '0',
+            top: '0',
+            display: 'flex',
+            flexFlow: 'row',
+            justifyContent: 'center',
+            alignItems: 'center',
+            height: '40px',
+            minWidth: '40px',
+            minHeight: '40px',
+            borderRadius: '8px',
+            padding: '0 4px',
+            backgroundColor: '#fff',
+            border: '1px solid rgba(239, 240, 240, 0.9)',
+            zIndex: '9999',
+            boxShadow: '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',
+            ...style,
+        });
+        if (className) {
+            container.classList.add(className);
+        }
+        setElementRole(container, COMPONENT_ROLE);
+        this.container = container;
+        const { getContainer } = this.options || {};
+        const resolvedContainer = typeof getContainer === 'function' ? getContainer() : getContainer;
+        const containerParent = resolvedContainer ?? document.body;
+        containerParent?.appendChild(container);
+        return container;
+    }
+    getTextEditItems(text) {
+        const { attributes = {} } = getTextElementProps(text);
+        return [FontColor, FontSize, FontAlign, FontFamily].map((item) => item([text], attributes, this.commander));
+    }
+    getTextCollectionEditItems(selection) {
+        const attrs = getCommonAttrs(selection.map((text) => getTextElementProps(text).attributes || {}));
+        const items = [FontColor, FontSize, FontAlign, FontFamily].map((item) => item(selection, attrs, this.commander));
+        const commonItems = this.getElementCollectionEditItems(selection);
+        return [...items, ...commonItems];
+    }
+    getIconEditItems(selection) {
+        const attrs = getIconAttrs(selection[0]);
+        return [IconColor].map((item) => item(selection, attrs, this.commander));
+    }
+    getIconCollectionEditItems(selection) {
+        const attrs = getCommonAttrs(selection.map((icon) => getIconAttrs(icon)));
+        return [IconColor].map((item) => item(selection, attrs, this.commander));
+    }
+    getGeometryEditItems(_selection) {
+        return [];
+    }
+    getGeometryCollectionEditItems(selection) {
+        const commonItems = this.getElementCollectionEditItems(selection);
+        return [...commonItems];
+    }
+    getElementCollectionEditItems(selection) {
+        if (selection.length <= 1)
+            return [];
+        return [
+            ElementAlign(selection, {}, this.commander, {
+                enableDistribution: selection.length > 2,
+            }),
+        ];
+    }
+    placeEditBar(container, selection) {
+        if (selection.length === 0)
+            return;
+        const svg = this.editor.getDocument();
+        const combinedBounds = getCombinedBounds(selection.map((element) => getElementViewportBounds(svg, element)));
+        const offsetParent = container.offsetParent ??
+            document.documentElement;
+        const parentRect = offsetParent.getBoundingClientRect();
+        const viewportHeight = document.documentElement.clientHeight;
+        const containerRect = container.getBoundingClientRect();
+        const offset = 8;
+        const matrix = getScreenCTM(svg);
+        const anchorTop = new DOMPoint(combinedBounds.x + combinedBounds.width / 2, combinedBounds.y).matrixTransform(matrix);
+        const anchorBottom = new DOMPoint(combinedBounds.x + combinedBounds.width / 2, combinedBounds.y + combinedBounds.height).matrixTransform(matrix);
+        const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+        let left = anchorTop.x - parentRect.left - containerRect.width / 2;
+        left = clamp(left, 0, Math.max(parentRect.width - containerRect.width, 0));
+        // Use viewport space, not container space, to decide whether we have enough room above.
+        const spaceAbove = anchorTop.y - offset;
+        const spaceBelow = viewportHeight - anchorBottom.y - offset;
+        const shouldPlaceAbove = spaceAbove >= containerRect.height || spaceAbove >= spaceBelow;
+        let top = shouldPlaceAbove
+            ? anchorTop.y - parentRect.top - containerRect.height - offset
+            : anchorBottom.y - parentRect.top + offset;
+        top = clamp(top, 0, Math.max(parentRect.height - containerRect.height, 0));
+        container.style.left = `${left}px`;
+        container.style.top = `${top}px`;
+    }
+}
+function showContainer(container) {
+    container.style.visibility = 'visible';
+}
+function hideContainer(container) {
+    container.style.visibility = 'hidden';
+}
+function setContainerItems(container, items) {
+    container.innerHTML = '';
+    items.forEach((node) => {
+        container.appendChild(node);
+    });
+}

package/esm/editor/plugins/edit-bar/edit-items/align-elements.d.ts

@@ -0,0 +1,2 @@
+import type { EditItem } from './types';
+export declare const ElementAlign: EditItem;

package/esm/editor/plugins/edit-bar/edit-items/align-elements.js

@@ -0,0 +1,312 @@
+import { getCombinedBounds } from '../../../../jsx';
+import { getAttributes, injectStyleOnce, isIconElement, } from '../../../../utils';
+import { UpdateElementCommand } from '../../../commands';
+import { getElementViewportBounds } from '../../../utils';
+import { ELEMENT_ICONS, IconButton, Popover } from '../components';
+const GRID_CLASS = 'infographic-align-grid';
+const GRID_COMPACT_CLASS = `${GRID_CLASS}--compact`;
+const GRID_STYLE_ID = 'infographic-align-grid-style';
+const GRID_STYLES = `
+.${GRID_CLASS} {
+  display: grid;
+  grid-template-columns: repeat(4, 32px);
+  grid-auto-rows: 32px;
+  gap: 2px;
+}
+.${GRID_COMPACT_CLASS} {
+  grid-template-columns: repeat(3, 32px);
+}
+`;
+const ALIGN_OPTIONS = [
+    { icon: ELEMENT_ICONS.alignLeft, action: 'LEFT' },
+    { icon: ELEMENT_ICONS.alignH, action: 'H_CENTER' },
+    { icon: ELEMENT_ICONS.alignRight, action: 'RIGHT' },
+    { icon: ELEMENT_ICONS.distributeH, action: 'H_DISTRIBUTE' },
+    { icon: ELEMENT_ICONS.alignTop, action: 'TOP' },
+    { icon: ELEMENT_ICONS.alignV, action: 'V_CENTER' },
+    { icon: ELEMENT_ICONS.alignBottom, action: 'BOTTOM' },
+    { icon: ELEMENT_ICONS.distributeV, action: 'V_DISTRIBUTE' },
+];
+export const ElementAlign = (selection, _attrs, commander, options) => {
+    injectStyleOnce(GRID_STYLE_ID, GRID_STYLES);
+    const enableDistribution = options?.enableDistribution ?? true;
+    const content = createAlignContent((action) => alignSelection(selection, action, commander), enableDistribution);
+    return Popover({
+        target: IconButton({ icon: ELEMENT_ICONS.align }),
+        content,
+        placement: 'top',
+        offset: 12,
+    });
+};
+function createAlignContent(onSelect, enableDistribution) {
+    const content = document.createElement('div');
+    content.classList.add(GRID_CLASS);
+    if (!enableDistribution)
+        content.classList.add(GRID_COMPACT_CLASS);
+    const visibleOptions = enableDistribution
+        ? ALIGN_OPTIONS
+        : ALIGN_OPTIONS.filter(({ action }) => action !== 'H_DISTRIBUTE' && action !== 'V_DISTRIBUTE');
+    visibleOptions.forEach(({ icon, action }) => {
+        const button = IconButton({
+            icon,
+            onClick: () => onSelect(action),
+        });
+        content.appendChild(button);
+    });
+    return content;
+}
+function alignSelection(selection, action, commander) {
+    if (!selection.length)
+        return;
+    const svg = selection[0].ownerSVGElement;
+    if (!svg)
+        return;
+    const items = selection
+        .map((element) => createAlignableItem(element, svg))
+        .filter(Boolean);
+    if (!items.length)
+        return;
+    const movable = items.filter((item) => item.movable);
+    if (!movable.length)
+        return;
+    const anchors = items.filter((item) => !item.movable);
+    const referenceSource = anchors.length ? anchors : items;
+    const reference = getCombinedBounds(referenceSource.map((item) => item.bounds));
+    const commands = [];
+    switch (action) {
+        case 'LEFT': {
+            const target = reference.x;
+            movable.forEach((item) => {
+                const dx = target - item.bounds.x;
+                appendCommand(commands, item, dx, 0);
+            });
+            break;
+        }
+        case 'H_CENTER': {
+            const target = reference.x + reference.width / 2;
+            movable.forEach((item) => {
+                const dx = target - (item.bounds.x + item.bounds.width / 2);
+                appendCommand(commands, item, dx, 0);
+            });
+            break;
+        }
+        case 'RIGHT': {
+            const target = reference.x + reference.width;
+            movable.forEach((item) => {
+                const dx = target - (item.bounds.x + item.bounds.width);
+                appendCommand(commands, item, dx, 0);
+            });
+            break;
+        }
+        case 'TOP': {
+            const target = reference.y;
+            movable.forEach((item) => {
+                const dy = target - item.bounds.y;
+                appendCommand(commands, item, 0, dy);
+            });
+            break;
+        }
+        case 'V_CENTER': {
+            const target = reference.y + reference.height / 2;
+            movable.forEach((item) => {
+                const dy = target - (item.bounds.y + item.bounds.height / 2);
+                appendCommand(commands, item, 0, dy);
+            });
+            break;
+        }
+        case 'BOTTOM': {
+            const target = reference.y + reference.height;
+            movable.forEach((item) => {
+                const dy = target - (item.bounds.y + item.bounds.height);
+                appendCommand(commands, item, 0, dy);
+            });
+            break;
+        }
+        case 'H_DISTRIBUTE': {
+            distributeHorizontally(items, commands);
+            break;
+        }
+        case 'V_DISTRIBUTE': {
+            distributeVertically(items, commands);
+            break;
+        }
+    }
+    if (commands.length)
+        commander.executeBatch(commands);
+}
+function distributeHorizontally(items, commands) {
+    if (items.length <= 2)
+        return;
+    const sorted = [...items].sort((a, b) => a.bounds.x - b.bounds.x || a.bounds.y - b.bounds.y);
+    const anchorIndices = collectAnchorIndices(sorted);
+    for (let i = 0; i < anchorIndices.length - 1; i++) {
+        const startIndex = anchorIndices[i];
+        const endIndex = anchorIndices[i + 1];
+        const start = sorted[startIndex];
+        const end = sorted[endIndex];
+        const segment = sorted.slice(startIndex + 1, endIndex);
+        if (!segment.length)
+            continue;
+        const space = end.bounds.x - (start.bounds.x + start.bounds.width);
+        const totalWidth = segment.reduce((sum, item) => sum + item.bounds.width, 0);
+        const gap = (space - totalWidth) / (segment.length + 1);
+        let cursor = start.bounds.x + start.bounds.width + gap;
+        segment.forEach((item) => {
+            const dx = cursor - item.bounds.x;
+            appendCommand(commands, item, dx, 0);
+            cursor += item.bounds.width + gap;
+        });
+    }
+}
+function distributeVertically(items, commands) {
+    if (items.length <= 2)
+        return;
+    const sorted = [...items].sort((a, b) => a.bounds.y - b.bounds.y || a.bounds.x - b.bounds.x);
+    const anchorIndices = collectAnchorIndices(sorted);
+    for (let i = 0; i < anchorIndices.length - 1; i++) {
+        const startIndex = anchorIndices[i];
+        const endIndex = anchorIndices[i + 1];
+        const start = sorted[startIndex];
+        const end = sorted[endIndex];
+        const segment = sorted.slice(startIndex + 1, endIndex);
+        if (!segment.length)
+            continue;
+        const space = end.bounds.y - (start.bounds.y + start.bounds.height);
+        const totalHeight = segment.reduce((sum, item) => sum + item.bounds.height, 0);
+        const gap = (space - totalHeight) / (segment.length + 1);
+        let cursor = start.bounds.y + start.bounds.height + gap;
+        segment.forEach((item) => {
+            const dy = cursor - item.bounds.y;
+            appendCommand(commands, item, 0, dy);
+            cursor += item.bounds.height + gap;
+        });
+    }
+}
+function collectAnchorIndices(items) {
+    const anchors = new Set();
+    anchors.add(0);
+    anchors.add(items.length - 1);
+    items.forEach((item, index) => {
+        if (!item.movable)
+            anchors.add(index);
+    });
+    return Array.from(anchors).sort((a, b) => a - b);
+}
+function appendCommand(commands, item, dx, dy) {
+    const command = createUpdateCommand(item, dx, dy);
+    if (command)
+        commands.push(command);
+}
+function createAlignableItem(element, svg) {
+    const bounds = getElementViewportBounds(svg, element);
+    const movable = !isIconElement(element);
+    const transformInfo = getTransformInfo(element);
+    if (transformInfo) {
+        return {
+            element,
+            bounds,
+            mode: 'transform',
+            startX: transformInfo.x,
+            startY: transformInfo.y,
+            hasX: false,
+            hasY: false,
+            hasDataX: false,
+            hasDataY: false,
+            restTransform: transformInfo.rest,
+            originalTransform: transformInfo.original,
+            movable,
+        };
+    }
+    const { x, y, hasX, hasY, hasDataX, hasDataY } = getAttrInfo(element, bounds);
+    return {
+        element,
+        bounds,
+        mode: 'attr',
+        startX: x,
+        startY: y,
+        hasX,
+        hasY,
+        hasDataX,
+        hasDataY,
+        movable,
+    };
+}
+function createUpdateCommand(item, dx, dy) {
+    if (!item.movable)
+        return null;
+    if (Math.abs(dx) < 1e-6 && Math.abs(dy) < 1e-6)
+        return null;
+    if (item.mode === 'attr') {
+        const x = item.startX + dx;
+        const y = item.startY + dy;
+        const modifiedAttrs = { x, y };
+        const originalAttrs = {};
+        originalAttrs.x = item.hasX ? item.startX : null;
+        originalAttrs.y = item.hasY ? item.startY : null;
+        if (item.hasDataX) {
+            modifiedAttrs['data-x'] = x;
+            originalAttrs['data-x'] = item.startX;
+        }
+        if (item.hasDataY) {
+            modifiedAttrs['data-y'] = y;
+            originalAttrs['data-y'] = item.startY;
+        }
+        return new UpdateElementCommand(item.element, { attributes: modifiedAttrs }, { attributes: originalAttrs });
+    }
+    const transform = composeTransform(item.startX + dx, item.startY + dy, item.restTransform);
+    const originalTransform = item.originalTransform !== undefined ? item.originalTransform : null;
+    return new UpdateElementCommand(item.element, { attributes: { transform } }, { attributes: { transform: originalTransform } });
+}
+function getAttrInfo(element, bounds) {
+    const attrs = getAttributes(element, ['x', 'y', 'data-x', 'data-y'], false);
+    const hasX = attrs.x !== null && attrs.x !== undefined;
+    const hasY = attrs.y !== null && attrs.y !== undefined;
+    const hasDataX = attrs['data-x'] !== null && attrs['data-x'] !== undefined;
+    const hasDataY = attrs['data-y'] !== null && attrs['data-y'] !== undefined;
+    const parseNumber = (value, fallback) => {
+        const num = value !== null && value !== undefined ? Number(value) : NaN;
+        return Number.isFinite(num) ? num : fallback;
+    };
+    const xFromAttr = parseNumber(attrs.x, NaN);
+    const yFromAttr = parseNumber(attrs.y, NaN);
+    const xFromData = parseNumber(attrs['data-x'], NaN);
+    const yFromData = parseNumber(attrs['data-y'], NaN);
+    const x = Number.isFinite(xFromAttr)
+        ? xFromAttr
+        : Number.isFinite(xFromData)
+            ? xFromData
+            : bounds.x;
+    const y = Number.isFinite(yFromAttr)
+        ? yFromAttr
+        : Number.isFinite(yFromData)
+            ? yFromData
+            : bounds.y;
+    return { x, y, hasX, hasY, hasDataX, hasDataY };
+}
+function getTransformInfo(element) {
+    const transform = element.getAttribute('transform');
+    if (transform === null)
+        return null;
+    const match = transform.match(/translate\(\s*([-\d.]+)(?:[ ,]\s*([-\d.]+))?\s*\)/i);
+    if (!match) {
+        const before = transform.trim();
+        return {
+            x: 0,
+            y: 0,
+            rest: { before, after: '' },
+            original: transform,
+        };
+    }
+    const x = Number(match[1]) || 0;
+    const y = match[2] !== undefined ? Number(match[2]) || 0 : 0;
+    const start = match.index ?? 0;
+    const before = transform.slice(0, start).trim();
+    const after = transform.slice(start + match[0].length).trim();
+    const rest = { before, after };
+    return { x, y, rest, original: transform };
+}
+function composeTransform(x, y, rest) {
+    const translate = `translate(${x}, ${y})`;
+    const parts = [rest?.before, translate, rest?.after].filter((part) => part && part.length);
+    return parts.join(' ');
+}

package/esm/editor/plugins/edit-bar/edit-items/font-align.d.ts

@@ -0,0 +1,3 @@
+import type { TextAttributes } from '../../../../types';
+import type { EditItem } from './types';
+export declare const FontAlign: EditItem<TextAttributes>;

package/esm/editor/plugins/edit-bar/edit-items/font-align.js

@@ -0,0 +1,81 @@
+import { injectStyleOnce } from '../../../../utils';
+import { UpdateElementCommand } from '../../../commands';
+import { IconButton, Popover, TEXT_ICONS } from '../components';
+// 常量定义
+const GRID_CLASS = 'infographic-font-align-grid';
+const GRID_STYLE_ID = 'infographic-font-align-grid-style';
+const HORIZONTAL_ALIGN_OPTIONS = [
+    { icon: TEXT_ICONS.alignLeft, align: 'LEFT' },
+    { icon: TEXT_ICONS.alignCenter, align: 'CENTER' },
+    { icon: TEXT_ICONS.alignRight, align: 'RIGHT' },
+];
+const VERTICAL_ALIGN_OPTIONS = [
+    { icon: TEXT_ICONS.alignTop, align: 'TOP' },
+    { icon: TEXT_ICONS.alignMiddle, align: 'MIDDLE' },
+    { icon: TEXT_ICONS.alignBottom, align: 'BOTTOM' },
+];
+const GRID_STYLES = `
+.${GRID_CLASS} {
+  display: grid;
+  grid-template-columns: repeat(3, 32px);
+  grid-auto-rows: 32px;
+  gap: 2px;
+}
+`;
+export const FontAlign = (selection, attrs, commander) => {
+    injectStyleOnce(GRID_STYLE_ID, GRID_STYLES);
+    const state = {
+        horizontal: attrs['data-horizontal-align'],
+        vertical: attrs['data-vertical-align'],
+    };
+    const button = IconButton({ icon: TEXT_ICONS.align });
+    const content = createAlignContent(state, (align) => {
+        const attributes = {};
+        if (align.horizontal)
+            attributes['data-horizontal-align'] = align.horizontal;
+        if (align.vertical)
+            attributes['data-vertical-align'] = align.vertical;
+        if (!Object.keys(attributes).length)
+            return;
+        commander.executeBatch(selection.map((text) => new UpdateElementCommand(text, {
+            attributes,
+        })));
+    });
+    return Popover({
+        target: button,
+        content,
+        placement: 'top',
+        offset: 12,
+    });
+};
+function createAlignContent(state, onAlignChange) {
+    const content = document.createElement('div');
+    content.classList.add(GRID_CLASS);
+    const buttons = {};
+    const updateAllButtons = () => {
+        Object.entries(buttons).forEach(([align, button]) => {
+            const isActive = align === state.horizontal || align === state.vertical;
+            button.setActivate(isActive);
+        });
+    };
+    const createButtons = (options, stateKey) => {
+        options.forEach(({ icon, align }) => {
+            const button = IconButton({
+                icon,
+                onClick: () => {
+                    if (state[stateKey] === align)
+                        return;
+                    Object.assign(state, { [stateKey]: align });
+                    updateAllButtons();
+                    onAlignChange({ ...state });
+                },
+                activate: align === state[stateKey],
+            });
+            buttons[align] = button;
+            content.appendChild(button);
+        });
+    };
+    createButtons(HORIZONTAL_ALIGN_OPTIONS, 'horizontal');
+    createButtons(VERTICAL_ALIGN_OPTIONS, 'vertical');
+    return content;
+}

package/esm/editor/plugins/edit-bar/edit-items/font-color.d.ts

@@ -0,0 +1,3 @@
+import type { TextAttributes } from '../../../../types';
+import type { EditItem } from './types';
+export declare const FontColor: EditItem<TextAttributes>;

package/esm/editor/plugins/edit-bar/edit-items/font-color.js

@@ -0,0 +1,77 @@
+import { hasColor, injectStyleOnce } from '../../../../utils';
+import { UpdateElementCommand } from '../../../commands';
+import { ColorPicker, Popover } from '../components';
+const FONT_COLOR_BUTTON_CLASS = 'infographic-font-color-btn';
+const FONT_COLOR_STYLE_ID = 'infographic-font-color-style';
+const DEFAULT_COLOR = '#1f1f1f';
+export const FontColor = (selection, attrs, commander) => {
+    ensureFontColorStyles();
+    const color = normalizeColor(attrs.fill);
+    const isMixed = attrs.fill === undefined && selection.length > 1;
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.classList.add(FONT_COLOR_BUTTON_CLASS);
+    setButtonColor(button, color ?? DEFAULT_COLOR, isMixed);
+    const picker = ColorPicker({
+        value: color ?? DEFAULT_COLOR,
+        onChange: (nextColor) => {
+            setButtonColor(button, nextColor, false);
+            commander.executeBatch(selection.map((text) => new UpdateElementCommand(text, {
+                attributes: { fill: nextColor },
+            })));
+        },
+    });
+    return Popover({
+        target: button,
+        content: picker,
+        placement: ['top', 'bottom'],
+        offset: 12,
+        trigger: 'hover',
+        closeOnOutsideClick: true,
+        open: false,
+        padding: 0,
+    });
+};
+function normalizeColor(fill) {
+    if (!fill)
+        return undefined;
+    return hasColor(fill) ? fill : undefined;
+}
+function setButtonColor(button, color, mixed) {
+    button.style.setProperty('--infographic-font-color', color);
+    if (mixed)
+        button.setAttribute('data-mixed', 'true');
+    else
+        button.removeAttribute('data-mixed');
+}
+function ensureFontColorStyles() {
+    injectStyleOnce(FONT_COLOR_STYLE_ID, `
+.${FONT_COLOR_BUTTON_CLASS} {
+  position: relative;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  background: #fff;
+  cursor: pointer;
+  transition: box-shadow 0.2s ease, border-color 0.2s ease;
+}
+.${FONT_COLOR_BUTTON_CLASS}::after {
+  content: '';
+  position: absolute;
+  inset: 6px;
+  border-radius: 50%;
+  background: var(--infographic-font-color, ${DEFAULT_COLOR});
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
+}
+.${FONT_COLOR_BUTTON_CLASS}[data-mixed="true"]::after {
+  background: repeating-linear-gradient(
+    45deg,
+    #d9d9d9 0,
+    #d9d9d9 6px,
+    #f5f5f5 6px,
+    #f5f5f5 12px
+  );
+}
+`);
+}