@antv/infographic 0.1.2 → 0.1.3

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

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

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

@@ -0,0 +1,115 @@
+import { getFonts } from '../../../../renderer';
+import { decodeFontFamily, encodeFontFamily, injectStyleOnce, } from '../../../../utils';
+import { UpdateElementCommand } from '../../../commands';
+import { IconButton, Popover, TEXT_ICONS } from '../components';
+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 = (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, selected, onChange) {
+    const content = document.createElement('div');
+    content.classList.add(FONT_LIST_CLASS);
+    const buttons = {};
+    const updateAllButtons = (active) => {
+        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) {
+    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/esm/editor/plugins/edit-bar/edit-items/font-size.d.ts

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

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

@@ -0,0 +1,88 @@
+import { injectStyleOnce } from '../../../../utils';
+import { UpdateElementCommand } from '../../../commands';
+import { IconButton, Popover, TEXT_ICONS } from '../components';
+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 },
+];
+const FONT_SIZE_STYLES = `
+.${FONT_SIZE_CLASS} {
+  display: grid;
+  grid-template-columns: repeat(5, 32px);
+  grid-auto-rows: 32px;
+  gap: 2px;
+}
+`;
+export const FontSize = (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, onSizeChange) {
+    const content = document.createElement('div');
+    content.classList.add(FONT_SIZE_CLASS);
+    let selected = defaultSize;
+    const buttons = {};
+    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) {
+    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) {
+    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/esm/editor/plugins/edit-bar/edit-items/icon-color.d.ts

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

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

@@ -0,0 +1,77 @@
+import { hasColor, injectStyleOnce } from '../../../../utils';
+import { UpdateElementCommand } from '../../../commands';
+import { ColorPicker, Popover } from '../components';
+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 = (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) {
+    if (!fill)
+        return undefined;
+    return hasColor(fill) ? fill : undefined;
+}
+function setButtonColor(button, color, mixed) {
+    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/esm/editor/plugins/edit-bar/edit-items/index.d.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/esm/editor/plugins/edit-bar/edit-items/index.js

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

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

@@ -0,0 +1,3 @@
+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/esm/editor/plugins/edit-bar/edit-items/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,4 @@
+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/esm/editor/plugins/edit-bar/index.js

@@ -0,0 +1,2 @@
+export { ColorPicker, Popover, Select } from './components';
+export { EditBar } from './edit-bar';

package/esm/editor/plugins/edit-bar/utils.d.ts

@@ -0,0 +1,4 @@
+/**
+ * 针对多选时，获取多个属性中相同的属性值
+ */
+export declare function getSelectionAttrs<T extends Record<string, any>>(attrs: T[]): T;

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

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

package/esm/editor/plugins/index.d.ts

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

package/esm/editor/plugins/index.js

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

package/esm/editor/plugins/resize-element.d.ts

@@ -0,0 +1,45 @@
+import type { IPlugin, PluginInitOptions } from '../types';
+import { Plugin } from './base';
+export declare class ResizeElement extends Plugin implements IPlugin {
+    name: string;
+    private target;
+    private container?;
+    private outline?;
+    private overlay?;
+    private handles;
+    private activeHandle;
+    private activePointerId;
+    private startPointer?;
+    private startRect?;
+    private startAttrs?;
+    private lastRect?;
+    private lastViewportRect?;
+    init(options: PluginInitOptions): void;
+    destroy(): void;
+    private handleSelectionChange;
+    private handleDeactivate;
+    private handleGeometryChange;
+    private handleHistoryChange;
+    private ensureContainer;
+    private updateHandles;
+    private hideHandles;
+    private removeContainer;
+    private handlePointerDown;
+    private handlePointerMove;
+    private handlePointerUp;
+    private cancelDrag;
+    private applyRect;
+    private getViewportRect;
+    private clientToElement;
+    private getCurrentAttributes;
+    private getHandlePoints;
+    private applyDelta;
+    private clampRect;
+    private hasRectChanged;
+    private emitSelectionGeometryChange;
+    private getHandleLine;
+    private static readonly HANDLE_SIZE;
+    private static readonly LINE_STROKE_WIDTH;
+    private static readonly MIN_SIZE;
+    private static readonly HANDLE_POSITIONS;
+}