@antv/infographic 0.1.1 → 0.1.3

package/src/editor/plugins/edit-bar/edit-items/font-family.ts

@@ -0,0 +1,147 @@
+import { getFonts } from '../../../../renderer';
+import type { TextAttributes } from '../../../../types';
+import {
+  decodeFontFamily,
+  encodeFontFamily,
+  injectStyleOnce,
+} from '../../../../utils';
+import { UpdateElementCommand } from '../../../commands';
+import { IconButton, Popover, TEXT_ICONS } from '../components';
+import type { EditItem } from './types';
+
+const FONT_LIST_CLASS = 'infographic-font-family-list';
+const FONT_OPTION_CLASS = `${FONT_LIST_CLASS}__option`;
+const FONT_LIST_STYLE_ID = 'infographic-font-family-list-style';
+const DEFAULT_FONT_LABEL = '默认';
+
+export const FontFamily: EditItem<TextAttributes> = (
+  selection,
+  attrs,
+  commander,
+) => {
+  ensureFontFamilyListStyle();
+
+  const fonts = getFonts();
+  const current = normalizeFontFamily(attrs['font-family']);
+
+  const options = fonts.map((font) => ({
+    label: font.name || font.fontFamily,
+    value: font.fontFamily,
+  }));
+  if (
+    !options.some((option) => normalizeFontFamily(option.value) === current)
+  ) {
+    options.unshift({
+      label: DEFAULT_FONT_LABEL,
+      value: current,
+    });
+  }
+
+  let selected = current;
+  const content = createFontList(options, selected, (value) => {
+    if (selected === value) return;
+    selected = value;
+    commander.executeBatch(
+      selection.map(
+        (text) =>
+          new UpdateElementCommand(text, {
+            attributes: { 'font-family': decodeFontFamily(value) },
+          }),
+      ),
+    );
+  });
+
+  const button = IconButton({ icon: TEXT_ICONS.fontFamily });
+
+  const popover = Popover({
+    target: button,
+    content,
+    placement: ['top', 'bottom'],
+    offset: 12,
+    trigger: 'hover',
+    closeOnOutsideClick: true,
+    open: false,
+    padding: 0,
+  });
+
+  return popover;
+};
+
+function createFontList(
+  options: { label: string; value: string }[],
+  selected: string | undefined,
+  onChange: (value: string) => void,
+) {
+  const content = document.createElement('div');
+  content.classList.add(FONT_LIST_CLASS);
+
+  const buttons: Record<string, HTMLButtonElement> = {};
+
+  const updateAllButtons = (active?: string) => {
+    Object.entries(buttons).forEach(([value, button]) => {
+      if (value === active) button.setAttribute('data-activate', 'true');
+      else button.removeAttribute('data-activate');
+    });
+  };
+
+  options.forEach(({ label, value }) => {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.classList.add(FONT_OPTION_CLASS);
+    button.textContent = label;
+    button.style.fontFamily = value;
+    if (value === selected) button.setAttribute('data-activate', 'true');
+    button.addEventListener('click', () => {
+      if (selected === value) return;
+      selected = value;
+      updateAllButtons(selected);
+      onChange(value);
+    });
+    buttons[value] = button;
+    content.appendChild(button);
+  });
+
+  return content;
+}
+
+function normalizeFontFamily(font: TextAttributes['font-family']) {
+  if (!font) return '';
+  if (Array.isArray(font)) return encodeFontFamily(font.join(', '));
+  return encodeFontFamily(String(font));
+}
+
+function ensureFontFamilyListStyle() {
+  injectStyleOnce(
+    FONT_LIST_STYLE_ID,
+    `
+.${FONT_LIST_CLASS} {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 4px;
+  min-width: 180px;
+  max-height: 220px;
+  overflow-y: auto;
+}
+.${FONT_OPTION_CLASS} {
+  width: 100%;
+  text-align: left;
+  padding: 6px 10px;
+  border: none;
+  border-radius: 6px;
+  background: #fff;
+  cursor: pointer;
+  font-size: 12px;
+  color: #000000d9;
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+.${FONT_OPTION_CLASS}:hover {
+  background: #f5f5f5;
+}
+.${FONT_OPTION_CLASS}[data-activate="true"] {
+  background: #e6f4ff;
+  color: #0958d9;
+}
+`,
+  );
+}

package/src/editor/plugins/edit-bar/edit-items/font-size.ts

@@ -0,0 +1,116 @@
+import type { TextAttributes } from '../../../../types';
+import { injectStyleOnce } from '../../../../utils';
+import { UpdateElementCommand } from '../../../commands';
+import { IconButton, Popover, TEXT_ICONS } from '../components';
+import type { Button } from '../components/button';
+import type { Icon } from '../components/icons';
+import type { EditItem } from './types';
+
+const FONT_SIZE_CLASS = 'infographic-font-size-grid';
+const FONT_SIZE_STYLE_ID = 'infographic-font-size-grid-style';
+
+const FONT_SIZE_OPTIONS = [
+  { label: 'XS', value: 12 },
+  { label: 'S', value: 14 },
+  { label: 'M', value: 16 },
+  { label: 'L', value: 20 },
+  { label: 'XL', value: 24 },
+] as const;
+
+const FONT_SIZE_STYLES = `
+.${FONT_SIZE_CLASS} {
+  display: grid;
+  grid-template-columns: repeat(5, 32px);
+  grid-auto-rows: 32px;
+  gap: 2px;
+}
+`;
+
+export const FontSize: EditItem<TextAttributes> = (
+  selection,
+  attrs,
+  commander,
+) => {
+  injectStyleOnce(FONT_SIZE_STYLE_ID, FONT_SIZE_STYLES);
+
+  const button = IconButton({ icon: TEXT_ICONS.fontSize });
+  const currentSize = normalizeFontSize(attrs['font-size']);
+  const content = createFontSizeContent(currentSize, (size) => {
+    commander.executeBatch(
+      selection.map(
+        (text) =>
+          new UpdateElementCommand(text, {
+            attributes: { 'font-size': size },
+          }),
+      ),
+    );
+  });
+
+  return Popover({
+    target: button,
+    content,
+    placement: 'top',
+    offset: 12,
+  });
+};
+
+function createFontSizeContent(
+  defaultSize: number,
+  onSizeChange: (size: number) => void,
+) {
+  const content = document.createElement('div');
+  content.classList.add(FONT_SIZE_CLASS);
+
+  let selected = defaultSize;
+  const buttons: Record<string, Button> = {};
+
+  const updateAllButtons = () => {
+    Object.entries(buttons).forEach(([value, button]) => {
+      const isActive = Number(value) === selected;
+      button.setActivate(isActive);
+    });
+  };
+
+  FONT_SIZE_OPTIONS.forEach(({ label, value }) => {
+    const button = IconButton({
+      icon: createLabelIcon(label),
+      onClick: () => {
+        if (selected === value) return;
+        selected = value;
+        updateAllButtons();
+        onSizeChange(value);
+      },
+      activate: value === selected,
+    });
+
+    buttons[String(value)] = button;
+    content.appendChild(button);
+  });
+
+  return content;
+}
+
+function createLabelIcon(label: string): Icon {
+  return () => {
+    const size = '1.2em';
+    const span = document.createElement('span');
+    span.textContent = label;
+    span.style.display = 'inline-flex';
+    span.style.alignItems = 'center';
+    span.style.justifyContent = 'center';
+    span.style.width = size;
+    span.style.height = size;
+    span.style.fontSize = '12px';
+    return span;
+  };
+}
+
+function normalizeFontSize(size: TextAttributes['font-size']) {
+  const DEFAULT_SIZE = 12;
+  if (typeof size === 'number') return size;
+  if (typeof size === 'string') {
+    const num = parseFloat(size);
+    return Number.isFinite(num) ? num : DEFAULT_SIZE;
+  }
+  return DEFAULT_SIZE;
+}

package/src/editor/plugins/edit-bar/edit-items/icon-color.ts

@@ -0,0 +1,101 @@
+import type { IconAttributes } from '../../../../types';
+import { hasColor, injectStyleOnce } from '../../../../utils';
+import { UpdateElementCommand } from '../../../commands';
+import { ColorPicker, Popover } from '../components';
+import type { EditItem } from './types';
+
+const ICON_COLOR_BUTTON_CLASS = 'infographic-icon-color-btn';
+const ICON_COLOR_STYLE_ID = 'infographic-icon-color-style';
+const DEFAULT_COLOR = '#1f1f1f';
+
+export const IconColor: EditItem<IconAttributes> = (
+  selection,
+  attrs,
+  commander,
+) => {
+  ensureIconColorStyles();
+
+  const color = normalizeColor(attrs.fill);
+  const isMixed = attrs.fill === undefined && selection.length > 1;
+
+  const button = document.createElement('button');
+  button.type = 'button';
+  button.classList.add(ICON_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(
+          (icon) =>
+            new UpdateElementCommand(icon, {
+              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?: IconAttributes['fill']) {
+  if (!fill) return undefined;
+  return hasColor(fill) ? fill : undefined;
+}
+
+function setButtonColor(
+  button: HTMLButtonElement,
+  color: string,
+  mixed: boolean,
+) {
+  button.style.setProperty('--infographic-icon-color', color);
+  if (mixed) button.setAttribute('data-mixed', 'true');
+  else button.removeAttribute('data-mixed');
+}
+
+function ensureIconColorStyles() {
+  injectStyleOnce(
+    ICON_COLOR_STYLE_ID,
+    `
+.${ICON_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;
+}
+.${ICON_COLOR_BUTTON_CLASS}::after {
+  content: '';
+  position: absolute;
+  inset: 6px;
+  border-radius: 50%;
+  background: var(--infographic-icon-color, ${DEFAULT_COLOR});
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
+}
+.${ICON_COLOR_BUTTON_CLASS}[data-mixed="true"]::after {
+  background: repeating-linear-gradient(
+    45deg,
+    #d9d9d9 0,
+    #d9d9d9 6px,
+    #f5f5f5 6px,
+    #f5f5f5 12px
+  );
+}
+`,
+  );
+}

package/src/editor/plugins/edit-bar/edit-items/index.ts

@@ -0,0 +1,7 @@
+export * from './align-elements';
+export * from './font-align';
+export * from './font-color';
+export * from './font-family';
+export * from './font-size';
+export * from './icon-color';
+export type * from './types';

package/src/editor/plugins/edit-bar/edit-items/types.ts

@@ -0,0 +1,9 @@
+import type { BaseAttributes } from '../../../../types';
+import type { ICommandManager, Selection } from '../../../types';
+
+export type EditItem<T extends BaseAttributes = BaseAttributes> = (
+  selection: Selection,
+  attrs: T,
+  commander: ICommandManager,
+  options?: Record<string, any>,
+) => HTMLElement;

package/src/editor/plugins/edit-bar/index.ts

@@ -0,0 +1,18 @@
+export { ColorPicker, Popover, Select } from './components';
+export { EditBar } from './edit-bar';
+
+export type {
+  ColorPickerHandle,
+  ColorPickerProps,
+  IconButtonHandle,
+  IconButtonProps,
+  IconProps,
+  PopoverHandle,
+  PopoverPlacement,
+  PopoverProps,
+  SelectHandle,
+  SelectOption,
+  SelectProps,
+  SelectValue,
+} from './components';
+export type { EditBarOptions } from './edit-bar';

package/src/editor/plugins/edit-bar/utils.ts

@@ -0,0 +1,16 @@
+/**
+ * 针对多选时，获取多个属性中相同的属性值
+ */
+export function getSelectionAttrs<T extends Record<string, any>>(
+  attrs: T[],
+): T {
+  if (!attrs.length) return {} as T;
+
+  return Object.keys(attrs[0]).reduce((acc, key) => {
+    const k = key as keyof T;
+    if (attrs.every((attr) => attr[k] === attrs[0][k])) {
+      acc[k] = attrs[0][k];
+    }
+    return acc;
+  }, {} as T);
+}

package/src/editor/plugins/index.ts

@@ -0,0 +1,3 @@
+export { Plugin } from './base';
+export * from './edit-bar';
+export { ResizeElement } from './resize-element';