@antv/infographic 0.1.1 → 0.1.3

package/lib/editor/plugins/edit-bar/edit-items/font-color.js

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FontColor = void 0;
+const utils_1 = require("../../../../utils");
+const commands_1 = require("../../../commands");
+const components_1 = require("../components");
+const FONT_COLOR_BUTTON_CLASS = 'infographic-font-color-btn';
+const FONT_COLOR_STYLE_ID = 'infographic-font-color-style';
+const DEFAULT_COLOR = '#1f1f1f';
+const FontColor = (selection, attrs, commander) => {
+    ensureFontColorStyles();
+    const color = normalizeColor(attrs.fill);
+    const isMixed = attrs.fill === undefined && selection.length > 1;
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.classList.add(FONT_COLOR_BUTTON_CLASS);
+    setButtonColor(button, color ?? DEFAULT_COLOR, isMixed);
+    const picker = (0, components_1.ColorPicker)({
+        value: color ?? DEFAULT_COLOR,
+        onChange: (nextColor) => {
+            setButtonColor(button, nextColor, false);
+            commander.executeBatch(selection.map((text) => new commands_1.UpdateElementCommand(text, {
+                attributes: { fill: nextColor },
+            })));
+        },
+    });
+    return (0, components_1.Popover)({
+        target: button,
+        content: picker,
+        placement: ['top', 'bottom'],
+        offset: 12,
+        trigger: 'hover',
+        closeOnOutsideClick: true,
+        open: false,
+        padding: 0,
+    });
+};
+exports.FontColor = FontColor;
+function normalizeColor(fill) {
+    if (!fill)
+        return undefined;
+    return (0, utils_1.hasColor)(fill) ? fill : undefined;
+}
+function setButtonColor(button, color, mixed) {
+    button.style.setProperty('--infographic-font-color', color);
+    if (mixed)
+        button.setAttribute('data-mixed', 'true');
+    else
+        button.removeAttribute('data-mixed');
+}
+function ensureFontColorStyles() {
+    (0, utils_1.injectStyleOnce)(FONT_COLOR_STYLE_ID, `
+.${FONT_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;
+}
+.${FONT_COLOR_BUTTON_CLASS}::after {
+  content: '';
+  position: absolute;
+  inset: 6px;
+  border-radius: 50%;
+  background: var(--infographic-font-color, ${DEFAULT_COLOR});
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
+}
+.${FONT_COLOR_BUTTON_CLASS}[data-mixed="true"]::after {
+  background: repeating-linear-gradient(
+    45deg,
+    #d9d9d9 0,
+    #d9d9d9 6px,
+    #f5f5f5 6px,
+    #f5f5f5 12px
+  );
+}
+`);
+}

package/lib/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/lib/editor/plugins/edit-bar/edit-items/font-family.js

@@ -0,0 +1,119 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FontFamily = void 0;
+const renderer_1 = require("../../../../renderer");
+const utils_1 = require("../../../../utils");
+const commands_1 = require("../../../commands");
+const components_1 = require("../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 = '默认';
+const FontFamily = (selection, attrs, commander) => {
+    ensureFontFamilyListStyle();
+    const fonts = (0, renderer_1.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 commands_1.UpdateElementCommand(text, {
+            attributes: { 'font-family': (0, utils_1.decodeFontFamily)(value) },
+        })));
+    });
+    const button = (0, components_1.IconButton)({ icon: components_1.TEXT_ICONS.fontFamily });
+    const popover = (0, components_1.Popover)({
+        target: button,
+        content,
+        placement: ['top', 'bottom'],
+        offset: 12,
+        trigger: 'hover',
+        closeOnOutsideClick: true,
+        open: false,
+        padding: 0,
+    });
+    return popover;
+};
+exports.FontFamily = FontFamily;
+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 (0, utils_1.encodeFontFamily)(font.join(', '));
+    return (0, utils_1.encodeFontFamily)(String(font));
+}
+function ensureFontFamilyListStyle() {
+    (0, utils_1.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/lib/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/lib/editor/plugins/edit-bar/edit-items/font-size.js

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FontSize = void 0;
+const utils_1 = require("../../../../utils");
+const commands_1 = require("../../../commands");
+const components_1 = require("../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;
+}
+`;
+const FontSize = (selection, attrs, commander) => {
+    (0, utils_1.injectStyleOnce)(FONT_SIZE_STYLE_ID, FONT_SIZE_STYLES);
+    const button = (0, components_1.IconButton)({ icon: components_1.TEXT_ICONS.fontSize });
+    const currentSize = normalizeFontSize(attrs['font-size']);
+    const content = createFontSizeContent(currentSize, (size) => {
+        commander.executeBatch(selection.map((text) => new commands_1.UpdateElementCommand(text, {
+            attributes: { 'font-size': size },
+        })));
+    });
+    return (0, components_1.Popover)({
+        target: button,
+        content,
+        placement: 'top',
+        offset: 12,
+    });
+};
+exports.FontSize = FontSize;
+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 = (0, components_1.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/lib/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/lib/editor/plugins/edit-bar/edit-items/icon-color.js

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconColor = void 0;
+const utils_1 = require("../../../../utils");
+const commands_1 = require("../../../commands");
+const components_1 = require("../components");
+const ICON_COLOR_BUTTON_CLASS = 'infographic-icon-color-btn';
+const ICON_COLOR_STYLE_ID = 'infographic-icon-color-style';
+const DEFAULT_COLOR = '#1f1f1f';
+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 = (0, components_1.ColorPicker)({
+        value: color ?? DEFAULT_COLOR,
+        onChange: (nextColor) => {
+            setButtonColor(button, nextColor, false);
+            commander.executeBatch(selection.map((icon) => new commands_1.UpdateElementCommand(icon, {
+                attributes: { fill: nextColor },
+            })));
+        },
+    });
+    return (0, components_1.Popover)({
+        target: button,
+        content: picker,
+        placement: ['top', 'bottom'],
+        offset: 12,
+        trigger: 'hover',
+        closeOnOutsideClick: true,
+        open: false,
+        padding: 0,
+    });
+};
+exports.IconColor = IconColor;
+function normalizeColor(fill) {
+    if (!fill)
+        return undefined;
+    return (0, utils_1.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() {
+    (0, utils_1.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/lib/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/lib/editor/plugins/edit-bar/edit-items/index.js

@@ -0,0 +1,22 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./align-elements"), exports);
+__exportStar(require("./font-align"), exports);
+__exportStar(require("./font-color"), exports);
+__exportStar(require("./font-family"), exports);
+__exportStar(require("./font-size"), exports);
+__exportStar(require("./icon-color"), exports);

package/lib/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/lib/editor/plugins/edit-bar/edit-items/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/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/lib/editor/plugins/edit-bar/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditBar = exports.Select = exports.Popover = exports.ColorPicker = void 0;
+var components_1 = require("./components");
+Object.defineProperty(exports, "ColorPicker", { enumerable: true, get: function () { return components_1.ColorPicker; } });
+Object.defineProperty(exports, "Popover", { enumerable: true, get: function () { return components_1.Popover; } });
+Object.defineProperty(exports, "Select", { enumerable: true, get: function () { return components_1.Select; } });
+var edit_bar_1 = require("./edit-bar");
+Object.defineProperty(exports, "EditBar", { enumerable: true, get: function () { return edit_bar_1.EditBar; } });

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

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

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSelectionAttrs = getSelectionAttrs;
+/**
+ * 针对多选时，获取多个属性中相同的属性值
+ */
+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/lib/editor/plugins/index.d.ts

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

package/lib/editor/plugins/index.js

@@ -0,0 +1,22 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResizeElement = exports.Plugin = void 0;
+var base_1 = require("./base");
+Object.defineProperty(exports, "Plugin", { enumerable: true, get: function () { return base_1.Plugin; } });
+__exportStar(require("./edit-bar"), exports);
+var resize_element_1 = require("./resize-element");
+Object.defineProperty(exports, "ResizeElement", { enumerable: true, get: function () { return resize_element_1.ResizeElement; } });

package/lib/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;
+}