@antv/infographic 0.1.2 → 0.1.4

package/src/editor/plugins/edit-bar/components/button.ts

@@ -0,0 +1,77 @@
+import { injectStyleOnce } from '../../../../utils';
+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 const IconButton = ({
+  icon,
+  onClick,
+  activate = false,
+}: IconButtonProps): Button => {
+  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: boolean) => {
+    if (next) button.setAttribute('data-activate', 'true');
+    else button.removeAttribute('data-activate');
+  };
+
+  return Object.assign(button, {
+    setActivate: setActivate.bind(button),
+    activate,
+  });
+};
+
+const ICON_BUTTON_CLASS = 'infographic-edit-bar-icon-btn';
+const ICON_BUTTON_STYLE_ID = 'infographic-edit-bar-icon-btn-style';
+
+function ensureIconButtonStyle() {
+  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/src/editor/plugins/edit-bar/components/color-picker.ts

@@ -0,0 +1,397 @@
+import { parse } from 'culori';
+
+import { injectStyleOnce } from '../../../../utils';
+
+export type ColorPickerProps = {
+  value?: string;
+  swatches?: string[];
+  onChange?: (value: string) => void;
+};
+
+export type ColorPickerHandle = {
+  setValue: (value?: string) => void;
+  destroy: () => void;
+};
+
+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)',
+];
+
+type ColorFormat = 'hexa' | 'rgba';
+type RgbaColor = { r: number; g: number; b: number; a: number };
+
+export function ColorPicker(
+  props: ColorPickerProps,
+): HTMLDivElement & ColorPickerHandle {
+  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: ColorFormat = 'hexa';
+  let color: RgbaColor = parseColor(props.value) ??
+    parseColor(DEFAULT_COLOR) ?? {
+      r: 31,
+      g: 31,
+      b: 31,
+      a: 1,
+    };
+
+  const swatchButtons: HTMLButtonElement[] = [];
+
+  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: ColorPickerHandle = {
+    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: ColorFormat, emitChange: boolean) {
+    if (format === next) return;
+    format = next;
+    syncUI();
+    if (emitChange) {
+      props.onChange?.(formatColor(color, format));
+    }
+  }
+
+  function setColor(next: RgbaColor, 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?: string | null): RgbaColor | undefined {
+  if (!value) return undefined;
+  const parsed = parse(value);
+  if (!parsed || typeof (parsed as any).r !== 'number') return undefined;
+  const rgb = parsed as { r: number; g: number; b: number; alpha?: number };
+  return {
+    r: clampByte(rgb.r),
+    g: clampByte(rgb.g),
+    b: clampByte(rgb.b),
+    a: clamp01(rgb.alpha ?? 1),
+  };
+}
+
+function formatColor(color: RgbaColor, format: ColorFormat): string {
+  if (format === 'rgba') return formatRgba(color);
+  return formatHexa(color);
+}
+
+function formatHexa(color: RgbaColor): string {
+  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: RgbaColor): string {
+  const alpha = trimAlpha(color.a);
+  return `rgba(${color.r}, ${color.g}, ${color.b}, ${alpha})`;
+}
+
+function colorKey(color: RgbaColor): string {
+  return formatHexa(color).toLowerCase();
+}
+
+function isSameColor(a: RgbaColor, b: RgbaColor): boolean {
+  return a.r === b.r && a.g === b.g && a.b === b.b && a.a === b.a;
+}
+
+function clamp01(value: number): number {
+  if (Number.isNaN(value)) return 0;
+  return Math.min(1, Math.max(0, value));
+}
+
+function clampByte(value: number): number {
+  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: number): string {
+  return value.toString(16).padStart(2, '0');
+}
+
+function trimAlpha(alpha: number): string {
+  const rounded = Math.round(clamp01(alpha) * 100) / 100;
+  if (rounded === 1) return '1';
+  if (rounded === 0) return '0';
+  return rounded.toString();
+}
+
+function createSwitchLabel(text: string): HTMLSpanElement {
+  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/src/editor/plugins/edit-bar/components/icons.ts

@@ -0,0 +1,86 @@
+export type Icon = (props?: IconProps) => HTMLElement;
+
+interface IconCreatorProps {
+  viewBox?: string;
+  size?: string;
+}
+
+export interface IconProps {
+  fill?: string;
+}
+
+const createIcon =
+  (
+    children: string,
+    { viewBox = '0 0 1024 1024', size = '1.5em' }: IconCreatorProps = {},
+  ) =>
+  ({ fill = 'currentColor' }: IconProps = {}) => {
+    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 as HTMLElement;
+  };
+
+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/src/editor/plugins/edit-bar/components/index.ts

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