@antv/infographic 0.1.1 → 0.1.3

package/lib/editor/managers/state.js

@@ -0,0 +1,145 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StateManager = void 0;
+const utils_1 = require("../../utils");
+const utils_2 = require("../utils");
+class StateManager {
+    init(options) {
+        Object.assign(this, options);
+    }
+    addItemDatum(indexes, datum) {
+        const pre = indexes.slice(0, -1);
+        const last = indexes[indexes.length - 1];
+        const arr = Array.isArray(datum) ? datum : [datum];
+        const list = (0, utils_2.getChildrenDataByIndexes)(this.options.data, pre);
+        list.splice(last, 0, ...arr);
+        this.emitter.emit('options:data:item:add', { indexes, datum });
+        this.emitter.emit('options:change', {
+            type: 'options:change',
+            changes: [
+                {
+                    op: 'add',
+                    path: 'data.items',
+                    indexes,
+                    value: arr,
+                },
+            ],
+        });
+    }
+    updateItemDatum(indexes, datum) {
+        const item = (0, utils_1.getDatumByIndexes)(this.options.data, indexes);
+        Object.assign(item, datum);
+        this.emitter.emit('options:data:item:update', { indexes, datum });
+        this.emitter.emit('options:change', {
+            type: 'options:change',
+            changes: [
+                {
+                    op: 'update',
+                    path: 'data.items',
+                    indexes,
+                    value: datum,
+                },
+            ],
+        });
+    }
+    removeItemDatum(indexes, count = 1) {
+        const pre = indexes.slice(0, -1);
+        const last = indexes[indexes.length - 1];
+        const list = (0, utils_2.getChildrenDataByIndexes)(this.options.data, pre);
+        const datum = list.splice(last, count);
+        this.emitter.emit('options:data:item:remove', { indexes, datum });
+        this.emitter.emit('options:change', {
+            type: 'options:change',
+            changes: [
+                {
+                    op: 'remove',
+                    path: 'data.items',
+                    indexes,
+                    value: datum,
+                },
+            ],
+        });
+    }
+    updateData(key, value) {
+        this.options.data[key] = value;
+        this.emitter.emit('options:data:update', { key, value });
+        this.emitter.emit('options:change', {
+            type: 'options:change',
+            changes: [
+                {
+                    op: 'update',
+                    path: `data.${key}`,
+                    value,
+                },
+            ],
+        });
+    }
+    updateElement(element, props) {
+        this.updateBuiltInElement(element, props);
+    }
+    updateOptions(options) {
+        this.options = { ...this.options, ...options };
+        if (this.options.padding !== undefined) {
+            (0, utils_1.setSVGPadding)(this.editor.getDocument(), (0, utils_1.parsePadding)(this.options.padding));
+        }
+        this.emitter.emit('options:change', {
+            type: 'options:change',
+            changes: [
+                {
+                    op: 'update',
+                    path: '',
+                    value: options,
+                },
+            ],
+        });
+    }
+    getOptions() {
+        return this.options;
+    }
+    /**
+     * 不包含文本内容、图标类型更新
+     */
+    updateBuiltInElement(element, props) {
+        var _a, _b;
+        const { data } = this.options;
+        const { attributes = {} } = props;
+        const role = (0, utils_1.getElementRole)(element);
+        const isItemElement = (0, utils_1.isIconElement)(element) ||
+            "item-label" /* ElementTypeEnum.ItemLabel */ === role ||
+            "item-desc" /* ElementTypeEnum.ItemDesc */ === role ||
+            "item-value" /* ElementTypeEnum.ItemValue */ === role ||
+            "items-illus" /* ElementTypeEnum.ItemsIllus */ === role;
+        const indexes = isItemElement ? (0, utils_2.getIndexesFromElement)(element) : undefined;
+        if (isItemElement) {
+            const datum = (0, utils_1.getDatumByIndexes)(data, indexes);
+            const key = role.replace('item-', '');
+            datum.attributes || (datum.attributes = {});
+            (_a = datum.attributes)[key] || (_a[key] = {});
+            Object.assign(datum.attributes[key], attributes);
+        }
+        else if ("title" /* ElementTypeEnum.Title */ === role ||
+            "desc" /* ElementTypeEnum.Desc */ === role ||
+            "illus" /* ElementTypeEnum.Illus */ === role) {
+            data.attributes || (data.attributes = {});
+            (_b = data.attributes)[role] || (_b[role] = {});
+            Object.assign(data.attributes[role], attributes);
+        }
+        this.emitter.emit('options:element:update', { element, props });
+        this.emitter.emit('options:change', {
+            type: 'options:change',
+            changes: [
+                {
+                    op: 'update',
+                    role,
+                    indexes,
+                    path: isItemElement
+                        ? `${(0, utils_2.buildItemPath)(indexes)}.attributes.${role.replace('item-', '')}`
+                        : `data.attributes.${role}`,
+                    value: props,
+                },
+            ],
+        });
+    }
+    destroy() { }
+}
+exports.StateManager = StateManager;

package/lib/editor/plugins/base.d.ts

@@ -0,0 +1,12 @@
+import type { IEventEmitter } from '../../types';
+import type { ICommandManager, IEditor, IPlugin, IPluginManager, IStateManager, PluginInitOptions } from '../types';
+export declare abstract class Plugin implements IPlugin {
+    abstract name: string;
+    protected emitter: IEventEmitter;
+    protected editor: IEditor;
+    protected commander: ICommandManager;
+    protected plugin: IPluginManager;
+    protected state: IStateManager;
+    init(options: PluginInitOptions): void;
+    abstract destroy(): void;
+}

package/lib/editor/plugins/base.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Plugin = void 0;
+class Plugin {
+    init(options) {
+        Object.assign(this, options);
+    }
+}
+exports.Plugin = Plugin;

package/lib/editor/plugins/edit-bar/components/button.d.ts

@@ -0,0 +1,12 @@
+import type { Icon } from './icons';
+export type Button = HTMLButtonElement & IconButtonHandle;
+export interface IconButtonProps {
+    icon: Icon;
+    onClick?: () => void;
+    activate?: boolean;
+}
+export interface IconButtonHandle {
+    activate: boolean;
+    setActivate: (activate: boolean) => void;
+}
+export declare const IconButton: ({ icon, onClick, activate, }: IconButtonProps) => Button;

package/lib/editor/plugins/edit-bar/components/button.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconButton = void 0;
+const utils_1 = require("../../../../utils");
+const IconButton = ({ icon, onClick, activate = false, }) => {
+    ensureIconButtonStyle();
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.classList.add(ICON_BUTTON_CLASS);
+    if (activate)
+        button.setAttribute('data-activate', 'true');
+    if (onClick)
+        button.addEventListener('click', onClick);
+    const iconElement = icon();
+    button.appendChild(iconElement);
+    const setActivate = (next) => {
+        if (next)
+            button.setAttribute('data-activate', 'true');
+        else
+            button.removeAttribute('data-activate');
+    };
+    return Object.assign(button, {
+        setActivate: setActivate.bind(button),
+        activate,
+    });
+};
+exports.IconButton = IconButton;
+const ICON_BUTTON_CLASS = 'infographic-edit-bar-icon-btn';
+const ICON_BUTTON_STYLE_ID = 'infographic-edit-bar-icon-btn-style';
+function ensureIconButtonStyle() {
+    (0, utils_1.injectStyleOnce)(ICON_BUTTON_STYLE_ID, `
+.${ICON_BUTTON_CLASS} {
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  font-size: 12px;
+  color: #000000d9;
+  border: none;
+  border-radius: 6px;
+  background-color: #fff;
+  cursor: pointer;
+  transition: color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
+}
+.${ICON_BUTTON_CLASS}:hover {
+  background-color: #f5f5f5;
+}
+.${ICON_BUTTON_CLASS}:active {
+  background-color: #d9d9d9;
+}
+.${ICON_BUTTON_CLASS}[data-activate="true"] {
+  background-color: #d9d9d9;
+}
+`);
+}

package/lib/editor/plugins/edit-bar/components/color-picker.d.ts

@@ -0,0 +1,10 @@
+export type ColorPickerProps = {
+    value?: string;
+    swatches?: string[];
+    onChange?: (value: string) => void;
+};
+export type ColorPickerHandle = {
+    setValue: (value?: string) => void;
+    destroy: () => void;
+};
+export declare function ColorPicker(props: ColorPickerProps): HTMLDivElement & ColorPickerHandle;

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

@@ -0,0 +1,354 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorPicker = ColorPicker;
+const culori_1 = require("culori");
+const utils_1 = require("../../../../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)',
+];
+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 = (0, culori_1.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() {
+    (0, utils_1.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/lib/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/lib/editor/plugins/edit-bar/components/icons.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ELEMENT_ICONS = exports.TEXT_ICONS = void 0;
+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;
+};
+exports.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>`),
+};
+exports.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" />`),
+};