@antv/infographic 0.1.1 → 0.1.3

package/esm/editor/plugins/edit-bar/components/color-picker.js

@@ -0,0 +1,351 @@
+import { parse } from 'culori';
+import { injectStyleOnce } from '../../../../utils';
+const COLOR_PICKER_CLASS = 'infographic-color-picker';
+const COLOR_PICKER_SWATCHES_CLASS = `${COLOR_PICKER_CLASS}__swatches`;
+const COLOR_PICKER_SWATCH_CLASS = `${COLOR_PICKER_CLASS}__swatch`;
+const COLOR_PICKER_CONTROLS_CLASS = `${COLOR_PICKER_CLASS}__controls`;
+const COLOR_PICKER_INPUT_CLASS = `${COLOR_PICKER_CLASS}__input`;
+const COLOR_PICKER_FORMAT_CLASS = `${COLOR_PICKER_CLASS}__format`;
+const COLOR_PICKER_SWITCH_CLASS = `${COLOR_PICKER_CLASS}__format-switch`;
+const COLOR_PICKER_SWITCH_KNOB_CLASS = `${COLOR_PICKER_CLASS}__format-switch-knob`;
+const COLOR_PICKER_SWITCH_LABEL_CLASS = `${COLOR_PICKER_CLASS}__format-switch-label`;
+const COLOR_PICKER_STYLE_ID = 'infographic-color-picker-style';
+const DEFAULT_COLOR = '#1f1f1f';
+const DEFAULT_SWATCHES = [
+    '#000000',
+    '#1f1f1f',
+    '#434343',
+    '#595959',
+    '#8c8c8c',
+    '#bfbfbf',
+    '#d9d9d9',
+    '#f0f0f0',
+    '#ffffff',
+    '#1677ff',
+    '#2f54eb',
+    '#91caff',
+    '#13c2c2',
+    '#36cfc9',
+    '#52c41a',
+    '#73d13d',
+    '#fadb14',
+    '#ffd666',
+    '#fa8c16',
+    '#fa541c',
+    '#f5222d',
+    '#ff7875',
+    '#eb2f96',
+    '#ffadd2',
+    '#722ed1',
+    '#9254de',
+    'rgba(0, 0, 0, 0.65)',
+    'rgba(255, 255, 255, 0.85)',
+];
+export function ColorPicker(props) {
+    if (typeof document === 'undefined') {
+        throw new Error('ColorPicker can only be used in the browser.');
+    }
+    ensureColorPickerStyles();
+    const container = document.createElement('div');
+    container.classList.add(COLOR_PICKER_CLASS);
+    const swatchContainer = document.createElement('div');
+    swatchContainer.classList.add(COLOR_PICKER_SWATCHES_CLASS);
+    container.appendChild(swatchContainer);
+    const controls = document.createElement('div');
+    controls.classList.add(COLOR_PICKER_CONTROLS_CLASS);
+    container.appendChild(controls);
+    const input = document.createElement('input');
+    input.type = 'text';
+    input.spellcheck = false;
+    input.classList.add(COLOR_PICKER_INPUT_CLASS);
+    controls.appendChild(input);
+    const formatToggle = document.createElement('div');
+    formatToggle.classList.add(COLOR_PICKER_FORMAT_CLASS);
+    controls.appendChild(formatToggle);
+    const formatSwitch = document.createElement('button');
+    formatSwitch.type = 'button';
+    formatSwitch.classList.add(COLOR_PICKER_SWITCH_CLASS);
+    formatSwitch.appendChild(createSwitchLabel('HEXA'));
+    const switchKnob = document.createElement('span');
+    switchKnob.classList.add(COLOR_PICKER_SWITCH_KNOB_CLASS);
+    formatSwitch.appendChild(switchKnob);
+    formatSwitch.appendChild(createSwitchLabel('RGBA'));
+    formatToggle.appendChild(formatSwitch);
+    let format = 'hexa';
+    let color = parseColor(props.value) ??
+        parseColor(DEFAULT_COLOR) ?? {
+        r: 31,
+        g: 31,
+        b: 31,
+        a: 1,
+    };
+    const swatchButtons = [];
+    const swatches = props.swatches?.length ? props.swatches : DEFAULT_SWATCHES;
+    swatches.forEach((value) => {
+        const parsed = parseColor(value);
+        if (!parsed)
+            return;
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.classList.add(COLOR_PICKER_SWATCH_CLASS);
+        button.style.setProperty('--swatch-color', formatColor(parsed, 'rgba'));
+        button.dataset.colorKey = colorKey(parsed);
+        button.addEventListener('click', () => {
+            setColor(parsed);
+        });
+        swatchContainer.appendChild(button);
+        swatchButtons.push(button);
+    });
+    formatSwitch.addEventListener('click', () => setFormat(format === 'hexa' ? 'rgba' : 'hexa', true));
+    input.addEventListener('change', handleInput);
+    input.addEventListener('keydown', (event) => {
+        if (event.key === 'Enter')
+            handleInput();
+    });
+    syncUI();
+    const api = {
+        setValue: (value) => {
+            const parsed = parseColor(value);
+            if (!parsed) {
+                input.setAttribute('data-invalid', 'true');
+                return;
+            }
+            input.removeAttribute('data-invalid');
+            setColor(parsed, false);
+        },
+        destroy: () => {
+            container.remove();
+        },
+    };
+    return Object.assign(container, api);
+    function handleInput() {
+        const parsed = parseColor(input.value);
+        if (!parsed) {
+            input.setAttribute('data-invalid', 'true');
+            return;
+        }
+        input.removeAttribute('data-invalid');
+        setColor(parsed);
+    }
+    function setFormat(next, emitChange) {
+        if (format === next)
+            return;
+        format = next;
+        syncUI();
+        if (emitChange) {
+            props.onChange?.(formatColor(color, format));
+        }
+    }
+    function setColor(next, emitChange = true) {
+        if (isSameColor(color, next)) {
+            syncUI();
+            return;
+        }
+        color = next;
+        syncUI();
+        if (emitChange) {
+            props.onChange?.(formatColor(color, format));
+        }
+    }
+    function syncUI() {
+        input.value = formatColor(color, format);
+        updateSwatches();
+        updateFormatButtons();
+    }
+    function updateSwatches() {
+        const key = colorKey(color);
+        swatchButtons.forEach((btn) => {
+            if (btn.dataset.colorKey === key) {
+                btn.setAttribute('data-active', 'true');
+            }
+            else {
+                btn.removeAttribute('data-active');
+            }
+        });
+    }
+    function updateFormatButtons() {
+        if (format === 'rgba') {
+            formatSwitch.setAttribute('data-format', 'rgba');
+        }
+        else {
+            formatSwitch.setAttribute('data-format', 'hexa');
+        }
+    }
+}
+function parseColor(value) {
+    if (!value)
+        return undefined;
+    const parsed = parse(value);
+    if (!parsed || typeof parsed.r !== 'number')
+        return undefined;
+    const rgb = parsed;
+    return {
+        r: clampByte(rgb.r),
+        g: clampByte(rgb.g),
+        b: clampByte(rgb.b),
+        a: clamp01(rgb.alpha ?? 1),
+    };
+}
+function formatColor(color, format) {
+    if (format === 'rgba')
+        return formatRgba(color);
+    return formatHexa(color);
+}
+function formatHexa(color) {
+    const r = toHex(color.r);
+    const g = toHex(color.g);
+    const b = toHex(color.b);
+    const alpha = color.a < 1 ? toHex(Math.round(color.a * 255)) : '';
+    return `#${r}${g}${b}${alpha}`;
+}
+function formatRgba(color) {
+    const alpha = trimAlpha(color.a);
+    return `rgba(${color.r}, ${color.g}, ${color.b}, ${alpha})`;
+}
+function colorKey(color) {
+    return formatHexa(color).toLowerCase();
+}
+function isSameColor(a, b) {
+    return a.r === b.r && a.g === b.g && a.b === b.b && a.a === b.a;
+}
+function clamp01(value) {
+    if (Number.isNaN(value))
+        return 0;
+    return Math.min(1, Math.max(0, value));
+}
+function clampByte(value) {
+    if (Number.isNaN(value))
+        return 0;
+    const normalized = value <= 1 ? value * 255 : value;
+    return Math.round(Math.min(255, Math.max(0, normalized)));
+}
+function toHex(value) {
+    return value.toString(16).padStart(2, '0');
+}
+function trimAlpha(alpha) {
+    const rounded = Math.round(clamp01(alpha) * 100) / 100;
+    if (rounded === 1)
+        return '1';
+    if (rounded === 0)
+        return '0';
+    return rounded.toString();
+}
+function createSwitchLabel(text) {
+    const span = document.createElement('span');
+    span.textContent = text;
+    span.classList.add(COLOR_PICKER_SWITCH_LABEL_CLASS);
+    return span;
+}
+function ensureColorPickerStyles() {
+    injectStyleOnce(COLOR_PICKER_STYLE_ID, `
+.${COLOR_PICKER_CLASS} {
+  width: 240px;
+  padding: 10px;
+  box-sizing: border-box;
+}
+.${COLOR_PICKER_SWATCHES_CLASS} {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, 26px);
+  gap: 6px;
+  margin-bottom: 10px;
+}
+.${COLOR_PICKER_SWATCH_CLASS} {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  background: var(--swatch-color);
+  cursor: pointer;
+  padding: 0;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+.${COLOR_PICKER_SWATCH_CLASS}[data-active="true"] {
+  box-shadow: 0 0 0 2px #1677ff;
+  transform: translateY(-1px);
+}
+.${COLOR_PICKER_SWATCH_CLASS}:hover {
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
+}
+.${COLOR_PICKER_CONTROLS_CLASS} {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.${COLOR_PICKER_INPUT_CLASS} {
+  flex: 1;
+  min-width: 0;
+  height: 30px;
+  padding: 2px 6px;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  background: #f5f5f5;
+  color: #262626;
+  font-size: 12px;
+  font-family: ui-monospace, SFMono-Regular, SFMono-Regular, Menlo, Monaco, Consolas,
+    "Liberation Mono", "Courier New", monospace;
+  box-sizing: border-box;
+  outline: none;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
+}
+.${COLOR_PICKER_INPUT_CLASS}:focus {
+  border-color: #1677ff;
+  background: #ffffff;
+  box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.12);
+}
+.${COLOR_PICKER_INPUT_CLASS}[data-invalid="true"] {
+  border-color: #ff4d4f;
+  box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.12);
+}
+.${COLOR_PICKER_FORMAT_CLASS} {
+  display: inline-flex;
+}
+.${COLOR_PICKER_SWITCH_CLASS} {
+  position: relative;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  align-items: center;
+  width: 110px;
+  height: 30px;
+  padding: 0;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  background: #f5f5f5;
+  cursor: pointer;
+  overflow: hidden;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
+}
+.${COLOR_PICKER_SWITCH_CLASS}:hover {
+  background: #ededed;
+}
+.${COLOR_PICKER_SWITCH_CLASS}:focus-visible {
+  outline: none;
+  border-color: #1677ff;
+  box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.12);
+}
+.${COLOR_PICKER_SWITCH_KNOB_CLASS} {
+  position: absolute;
+  inset: 0;
+  width: 50%;
+  background: #1677ff;
+  border-radius: 6px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+  transition: transform 0.2s ease;
+}
+.${COLOR_PICKER_SWITCH_CLASS}[data-format="rgba"] .${COLOR_PICKER_SWITCH_KNOB_CLASS} {
+  transform: translateX(100%);
+}
+.${COLOR_PICKER_SWITCH_LABEL_CLASS} {
+  position: relative;
+  z-index: 1;
+  text-align: center;
+  font-size: 12px;
+  color: #434343;
+  user-select: none;
+}
+.${COLOR_PICKER_SWITCH_CLASS}[data-format="hexa"] .${COLOR_PICKER_SWITCH_LABEL_CLASS}:first-child,
+.${COLOR_PICKER_SWITCH_CLASS}[data-format="rgba"] .${COLOR_PICKER_SWITCH_LABEL_CLASS}:last-child {
+  color: #ffffff;
+}
+`);
+}

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

@@ -0,0 +1,26 @@
+export type Icon = (props?: IconProps) => HTMLElement;
+export interface IconProps {
+    fill?: string;
+}
+export declare const TEXT_ICONS: {
+    fontFamily: ({ fill }?: IconProps) => HTMLElement;
+    fontSize: ({ fill }?: IconProps) => HTMLElement;
+    align: ({ fill }?: IconProps) => HTMLElement;
+    alignTop: ({ fill }?: IconProps) => HTMLElement;
+    alignRight: ({ fill }?: IconProps) => HTMLElement;
+    alignBottom: ({ fill }?: IconProps) => HTMLElement;
+    alignLeft: ({ fill }?: IconProps) => HTMLElement;
+    alignCenter: ({ fill }?: IconProps) => HTMLElement;
+    alignMiddle: ({ fill }?: IconProps) => HTMLElement;
+};
+export declare const ELEMENT_ICONS: {
+    align: ({ fill }?: IconProps) => HTMLElement;
+    alignTop: ({ fill }?: IconProps) => HTMLElement;
+    alignRight: ({ fill }?: IconProps) => HTMLElement;
+    alignBottom: ({ fill }?: IconProps) => HTMLElement;
+    alignLeft: ({ fill }?: IconProps) => HTMLElement;
+    alignH: ({ fill }?: IconProps) => HTMLElement;
+    alignV: ({ fill }?: IconProps) => HTMLElement;
+    distributeH: ({ fill }?: IconProps) => HTMLElement;
+    distributeV: ({ fill }?: IconProps) => HTMLElement;
+};

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

@@ -0,0 +1,30 @@
+const createIcon = (children, { viewBox = '0 0 1024 1024', size = '1.5em' } = {}) => ({ fill = 'currentColor' } = {}) => {
+    const html = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${viewBox}" width="${size}" height="${size}" fill="${fill}">
+${children.trim()}
+</svg>`;
+    return document.createRange().createContextualFragment(html)
+        .firstElementChild;
+};
+export const TEXT_ICONS = {
+    fontFamily: createIcon(`<path d="M236.992 938.688H145.088L469.312 128h85.376l324.224 810.688h-91.904l-102.4-256H339.392l-102.4 256z m136.512-341.376h276.992L512 251.072l-138.496 346.24z"></path>`, { size: '1.2em' }),
+    fontSize: createIcon(`<path d="M479.829333 640H202.837333l-85.333333 213.333333H25.6L298.666667 170.666667h85.333333l273.066667 682.666666h-91.904l-85.333334-213.333333z m-34.133333-85.333333L341.333333 293.76 236.970667 554.666667h208.725333zM896 534.826667V512h85.333333v341.333333h-85.333333v-22.826666a170.666667 170.666667 0 1 1 0-295.68zM810.666667 768a85.333333 85.333333 0 1 0 0-170.666667 85.333333 85.333333 0 0 0 0 170.666667z"></path>`, { size: '1.2em' }),
+    align: createIcon(`<path d="M832 96c53.02 0 96 42.98 96 96v640c0 53.02-42.98 96-96 96H192c-53.02 0-96-42.98-96-96V192c0-53.02 42.98-96 96-96z m0 64H192c-17.673 0-32 14.327-32 32v640c0 17.673 14.327 32 32 32h640c17.673 0 32-14.327 32-32V192c0-17.673-14.327-32-32-32zM725.333 672c17.673 0 32 14.327 32 32 0 17.496-14.041 31.713-31.47 31.996l-0.53 0.004H298.667c-17.673 0-32-14.327-32-32 0-17.496 14.041-31.713 31.47-31.996l0.53-0.004h426.666z m0-192c17.673 0 32 14.327 32 32 0 17.496-14.041 31.713-31.47 31.996l-0.53 0.004H298.667c-17.673 0-32-14.327-32-32 0-17.496 14.041-31.713 31.47-31.996l0.53-0.004h426.666z m0-192c17.673 0 32 14.327 32 32 0 17.496-14.041 31.713-31.47 31.996l-0.53 0.004H298.667c-17.673 0-32-14.327-32-32 0-17.496 14.041-31.713 31.47-31.996l0.53-0.004h426.666z"></path>`),
+    alignTop: createIcon(`<path d="M896 859.329c17.673 0 32 14.327 32 32 0 17.496-14.042 31.713-31.47 31.995l-0.53 0.005H128c-17.673 0-32-14.327-32-32 0-17.497 14.042-31.713 31.47-31.996l0.53-0.004h768z m0-121.533c17.673 0 32 14.327 32 32 0 17.497-14.042 31.713-31.47 31.996l-0.53 0.004H128c-17.673 0-32-14.327-32-32 0-17.496 14.042-31.713 31.47-31.995l0.53-0.005h768zM512.45 91.003L512 91a32.632 32.632 0 0 1 1.653 0.042l0.134 0.008c3.447 0.189 6.75 0.924 9.82 2.12l0.198 0.078a16.118 16.118 0 0 1 0.485 0.197l0.11 0.046a31.82 31.82 0 0 1 8.546 5.315l0.12 0.105a31.066 31.066 0 0 1 1.189 1.095l0.08 0.078 0.235 0.23 0.062 0.063 128 128.055c12.494 12.5 12.49 32.761-0.01 45.255-12.374 12.37-32.356 12.489-44.877 0.362l-0.377-0.372L544 200.28v413.598c0 17.673-14.327 32-32 32-17.496 0-31.713-14.042-31.996-31.471l-0.004-0.53V200.278l-73.368 73.4c-12.369 12.375-32.35 12.503-44.877 0.381l-0.378-0.37c-12.374-12.37-12.502-32.352-0.38-44.878l0.37-0.378 128-128.055 0.181-0.178a31.875 31.875 0 0 1 9.5-6.47l0.105-0.046c0.116-0.051 0.233-0.101 0.35-0.15 0.054-0.024 0.11-0.047 0.165-0.07a28.198 28.198 0 0 1 0.536-0.219l0.157-0.061a31.816 31.816 0 0 1 9.356-2.103l0.113-0.007c0.147-0.01 0.294-0.02 0.442-0.027l0.028-0.001 0.39-0.019 0.144-0.005a23.911 23.911 0 0 1 0.712-0.018c0.3-0.004 0.602-0.004 0.904 0z"></path>`),
+    alignRight: createIcon(`<path d="M896 800.339c17.673 0 32 14.327 32 32 0 17.496-14.042 31.713-31.47 31.995l-0.53 0.005H298.667c-17.673 0-32-14.327-32-32 0-17.497 14.041-31.713 31.47-31.996l0.53-0.004H896z m0-213.226c17.673 0 32 14.327 32 32 0 17.496-14.042 31.713-31.47 31.996l-0.53 0.004H128c-17.673 0-32-14.327-32-32 0-17.496 14.042-31.713 31.47-31.996l0.53-0.004h768z m0-213.226c17.673 0 32 14.327 32 32 0 17.496-14.042 31.713-31.47 31.996l-0.53 0.004H298.667c-17.673 0-32-14.327-32-32 0-17.496 14.041-31.713 31.47-31.996l0.53-0.004H896z m0-213.226c17.673 0 32 14.327 32 32 0 17.497-14.042 31.713-31.47 31.996l-0.53 0.004H128c-17.673 0-32-14.327-32-32 0-17.496 14.042-31.713 31.47-31.995l0.53-0.005h768z"></path>`),
+    alignBottom: createIcon(`<path d="M896 859.329c17.673 0 32 14.327 32 32 0 17.496-14.042 31.713-31.47 31.995l-0.53 0.005H128c-17.673 0-32-14.327-32-32 0-17.497 14.042-31.713 31.47-31.996l0.53-0.004h768z m0-121.533c17.673 0 32 14.327 32 32 0 17.497-14.042 31.713-31.47 31.996l-0.53 0.004H128c-17.673 0-32-14.327-32-32 0-17.496 14.042-31.713 31.47-31.995l0.53-0.005h768zM490.505 637.584l-0.127-0.117a32.174 32.174 0 0 1-0.633-0.596l-0.098-0.096-0.217-0.213-0.062-0.063-128-128.055c-12.494-12.499-12.49-32.76 0.01-45.254 12.374-12.37 32.356-12.489 44.877-0.362l0.377 0.371L480 536.598V123c0-17.673 14.327-32 32-32 17.496 0 31.713 14.042 31.996 31.47l0.004 0.53v413.597l73.368-73.398c12.494-12.5 32.755-12.503 45.255-0.01 12.374 12.37 12.502 32.352 0.38 44.878l-0.37 0.377-128 128.055c-0.121 0.12-0.238 0.236-0.356 0.35l0.355-0.35a31.922 31.922 0 0 1-9.68 6.649l-0.09 0.039a29.917 29.917 0 0 1-1.241 0.514 31.816 31.816 0 0 1-9.338 2.095l-0.113 0.008c-0.147 0.01-0.294 0.019-0.442 0.027h-0.028c-0.13 0.008-0.26 0.014-0.39 0.02l-0.144 0.005a23.92 23.92 0 0 1-0.796 0.019 33.927 33.927 0 0 1-0.37 0.002h-0.13l-0.236-0.002 0.366 0.002a32.633 32.633 0 0 1-1.153-0.02l-0.129-0.006a31.108 31.108 0 0 1-0.876-0.046l-0.105-0.008a31.811 31.811 0 0 1-8.926-1.931l-0.089-0.034a21.022 21.022 0 0 1-0.362-0.138l-0.098-0.04a22.132 22.132 0 0 1-0.746-0.304l-0.219-0.093-0.209-0.092a31.812 31.812 0 0 1-8.034-5.094l-0.12-0.105-0.173-0.153-0.151-0.136-0.105-0.093z"></path>`),
+    alignLeft: createIcon(`<path d="M725.333 800.339c17.673 0 32 14.327 32 32 0 17.496-14.041 31.713-31.47 31.995l-0.53 0.005H128c-17.673 0-32-14.327-32-32 0-17.497 14.042-31.713 31.47-31.996l0.53-0.004h597.333zM896 587.113c17.673 0 32 14.327 32 32 0 17.496-14.042 31.713-31.47 31.996l-0.53 0.004H128c-17.673 0-32-14.327-32-32 0-17.496 14.042-31.713 31.47-31.996l0.53-0.004h768zM725.333 373.887c17.673 0 32 14.327 32 32 0 17.496-14.041 31.713-31.47 31.996l-0.53 0.004H128c-17.673 0-32-14.327-32-32 0-17.496 14.042-31.713 31.47-31.996l0.53-0.004h597.333zM896 160.661c17.673 0 32 14.327 32 32 0 17.497-14.042 31.713-31.47 31.996l-0.53 0.004H128c-17.673 0-32-14.327-32-32 0-17.496 14.042-31.713 31.47-31.995l0.53-0.005h768z"></path>`),
+    alignCenter: createIcon(`<path d="M768 800.339c17.673 0 32 14.327 32 32 0 17.496-14.042 31.713-31.47 31.995l-0.53 0.005H256c-17.673 0-32-14.327-32-32 0-17.497 14.042-31.713 31.47-31.996l0.53-0.004h512z m128-213.226c17.673 0 32 14.327 32 32 0 17.496-14.042 31.713-31.47 31.996l-0.53 0.004H128c-17.673 0-32-14.327-32-32 0-17.496 14.042-31.713 31.47-31.996l0.53-0.004h768zM768 373.887c17.673 0 32 14.327 32 32 0 17.496-14.042 31.713-31.47 31.996l-0.53 0.004H256c-17.673 0-32-14.327-32-32 0-17.496 14.042-31.713 31.47-31.996l0.53-0.004h512z m128-213.226c17.673 0 32 14.327 32 32 0 17.497-14.042 31.713-31.47 31.996l-0.53 0.004H128c-17.673 0-32-14.327-32-32 0-17.496 14.042-31.713 31.47-31.995l0.53-0.005h768z"></path>`),
+    alignMiddle: createIcon(`<path d="M534.246 617.448l0.377 0.371 128 127.952c12.5 12.494 12.503 32.755 0.009 45.255-12.37 12.374-32.352 12.501-44.878 0.38l-0.377-0.372-73.38-73.352V939c0 17.673-14.326 32-32 32-17.496 0-31.712-14.042-31.995-31.47l-0.004-0.53-0.001-221.314-73.374 73.348c-12.374 12.37-32.356 12.49-44.878 0.363l-0.377-0.371c-12.37-12.375-12.49-32.356-0.362-44.878l0.37-0.377 128-127.952c12.372-12.366 32.347-12.49 44.87-0.37zM896 480.508c17.673 0 32 14.327 32 32 0 17.497-14.042 31.713-31.47 31.996l-0.53 0.004H128c-17.673 0-32-14.327-32-32 0-17.496 14.042-31.713 31.47-31.995l0.53-0.005h768zM511.998 54c17.496 0 31.713 14.042 31.996 31.47l0.004 0.53-0.001 221.314 73.38-73.349c12.499-12.494 32.76-12.49 45.255 0.009 12.37 12.374 12.49 32.356 0.362 44.878l-0.37 0.377-128 127.951c-12.372 12.366-32.347 12.49-44.87 0.371l-0.377-0.37-128-127.952c-12.5-12.495-12.503-32.756-0.009-45.255 12.37-12.374 32.352-12.502 44.878-0.38l0.377 0.371 73.374 73.346V86c0-17.673 14.328-32 32-32z"></path>`),
+};
+export const ELEMENT_ICONS = {
+    align: createIcon(`<path d="M555.188 715.059c17.673 0 32 14.327 32 32V875c0 17.673-14.327 32-32 32H171c-17.673 0-32-14.327-32-32V747.059c0-17.673 14.327-32 32-32z m-32.001 63.999H203V843h320.187v-63.942zM854 416.529c17.673 0 32 14.327 32 32v127.942c0 17.673-14.327 32-32 32H171c-17.673 0-32-14.327-32-32V448.529c0-17.673 14.327-32 32-32z m-32 64H203v63.941h619v-63.941zM683.25 118c17.673 0 32 14.327 32 32v127.941c0 17.673-14.327 32-32 32H171c-17.673 0-32-14.327-32-32V150c0-17.673 14.327-32 32-32z m-32 64H203v63.941h448.25V182z"></path>`),
+    alignTop: createIcon(`
+    <path d="M661.333 272.411c17.673 0 32 14.327 32 32V902c0 17.673-14.327 32-32 32H362.667c-17.673 0-32-14.327-32-32V304.411c0-17.673 14.327-32 32-32z m-32 63.999H394.666V870h234.667V336.41zM896 101.671c17.673 0 32 14.327 32 32 0 17.497-14.042 31.713-31.47 31.996l-0.53 0.004H128c-17.673 0-32-14.327-32-32 0-17.496 14.042-31.713 31.47-31.995l0.53-0.005h768z" />`),
+    alignRight: createIcon(`<path d="M891.329 96c17.496 0 31.713 14.042 31.995 31.47l0.005 0.53v768c0 17.673-14.327 32-32 32-17.497 0-31.713-14.042-31.996-31.47l-0.004-0.53V128c0-17.673 14.327-32 32-32z m-170.74 234.667c17.673 0 32 14.327 32 32v298.666c0 17.673-14.327 32-32 32H123c-17.673 0-32-14.327-32-32V362.667c0-17.673 14.327-32 32-32z m-32 63.999H155v234.667h533.589V394.666z" />`),
+    alignBottom: createIcon(`<path d="M896 859.329c17.673 0 32 14.327 32 32 0 17.496-14.042 31.713-31.47 31.995l-0.53 0.005H128c-17.673 0-32-14.327-32-32 0-17.497 14.042-31.713 31.47-31.996l0.53-0.004h768zM661.333 91c17.673 0 32 14.327 32 32v597.589c0 17.673-14.327 32-32 32H362.667c-17.673 0-32-14.327-32-32V123c0-17.673 14.327-32 32-32z m-32 64H394.666v533.589h234.667V155z" />`),
+    alignLeft: createIcon(`<path d="M133.671 96c17.497 0 31.713 14.042 31.996 31.47l0.004 0.53v768c0 17.673-14.327 32-32 32-17.496 0-31.713-14.042-31.995-31.47l-0.005-0.53V128c0-17.673 14.327-32 32-32zM902 330.667c17.673 0 32 14.327 32 32v298.666c0 17.673-14.327 32-32 32H304.411c-17.673 0-32-14.327-32-32V362.667c0-17.673 14.327-32 32-32z m-32.001 63.999H336.41v234.667h533.589V394.666z" />`),
+    alignH: createIcon(`<path d="M512.5 96c17.496 0 31.713 14.042 31.996 31.47l0.004 0.53v202.666H875c17.496 0 31.713 14.042 31.996 31.471l0.004 0.53v298.666c0 17.673-14.327 32-32 32H544.5V896c0 17.673-14.327 32-32 32-17.496 0-31.713-14.042-31.996-31.47l-0.004-0.53V693.333H150c-17.496 0-31.713-14.041-31.996-31.47l-0.004-0.53V362.667c0-17.673 14.327-32 32-32l330.5-0.001V128c0-17.673 14.327-32 32-32z m-32 298.666H182v234.667h298.5V394.666z m362.5 0H544.5v234.667H843V394.666z" />`),
+    alignV: createIcon(`<path d="M661.333 118c17.673 0 32 14.327 32 32v330.5H896c17.673 0 32 14.327 32 32 0 17.496-14.042 31.713-31.47 31.996l-0.53 0.004H693.333V875c0 17.496-14.041 31.713-31.47 31.996l-0.53 0.004H362.667c-17.673 0-32-14.327-32-32l-0.001-330.5H128c-17.673 0-32-14.327-32-32 0-17.496 14.042-31.713 31.47-31.996l0.53-0.004h202.666V150c0-17.496 14.042-31.713 31.471-31.996l0.53-0.004z m-32.001 426.5H394.665l0.001 298.5h234.667l-0.001-298.5z m0.001-362.5H394.666l-0.001 298.5h234.667l0.001-298.5z" />`),
+    distributeH: createIcon(`<path d="M853.333 96c17.497 0 31.713 14.042 31.996 31.47l0.004 0.53v768c0 17.673-14.327 32-32 32-17.496 0-31.713-14.042-31.995-31.47l-0.005-0.53V128c0-17.673 14.327-32 32-32z m-682.666 0c17.496 0 31.713 14.042 31.995 31.47l0.005 0.53v768c0 17.673-14.327 32-32 32-17.497 0-31.713-14.042-31.996-31.47l-0.004-0.53V128c0-17.673 14.327-32 32-32zM640 181.333c17.673 0 32 14.327 32 32v597.334c0 17.673-14.327 32-32 32H384c-17.673 0-32-14.327-32-32V213.333c0-17.673 14.327-32 32-32z m-32 64H416v533.333h192V245.333z" />`),
+    distributeV: createIcon(`<path d="M896 821.333c17.673 0 32 14.327 32 32 0 17.497-14.042 31.713-31.47 31.996l-0.53 0.004H128c-17.673 0-32-14.327-32-32 0-17.496 14.042-31.713 31.47-31.995l0.53-0.005h768zM810.667 352c17.673 0 32 14.327 32 32v256c0 17.673-14.327 32-32 32H213.333c-17.673 0-32-14.327-32-32V384c0-17.673 14.327-32 32-32z m-32 64H245.334v192h533.333V416zM896 138.667c17.673 0 32 14.327 32 32 0 17.496-14.042 31.713-31.47 31.995l-0.53 0.005H128c-17.673 0-32-14.327-32-32 0-17.497 14.042-31.713 31.47-31.996l0.53-0.004h768z" />`),
+};

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

@@ -0,0 +1,5 @@
+export * from './button';
+export * from './color-picker';
+export * from './icons';
+export * from './popover';
+export * from './select';

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

@@ -0,0 +1,5 @@
+export * from './button';
+export * from './color-picker';
+export * from './icons';
+export * from './popover';
+export * from './select';

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

@@ -0,0 +1,23 @@
+export type PopoverPlacement = 'top' | 'bottom' | 'left' | 'right';
+export type PopoverPlacementPreference = PopoverPlacement | PopoverPlacement[];
+export interface PopoverProps {
+    content: HTMLElement | string | (() => HTMLElement | string);
+    target?: HTMLElement;
+    getContainer?: HTMLElement | (() => HTMLElement);
+    placement?: PopoverPlacementPreference;
+    padding?: number | string;
+    open?: boolean;
+    closeOnOutsideClick?: boolean;
+    trigger?: 'hover' | 'click' | ('hover' | 'click')[];
+    mouseEnterDelay?: number;
+    mouseLeaveDelay?: number;
+    offset?: number;
+}
+export interface PopoverHandle {
+    setOpen: (open: boolean) => void;
+    toggle: () => void;
+    setContent: (content: PopoverProps['content']) => void;
+    setPlacement: (placement: PopoverPlacementPreference) => void;
+    destroy: () => void;
+}
+export declare function Popover(props: PopoverProps): HTMLDivElement & PopoverHandle;