@antv/infographic 0.2.16 → 0.2.18

package/lib/options/types.d.ts

@@ -4,8 +4,8 @@ import type { ThemeConfig } from '../themes';
 import type { Data, Padding, ParsedData } from '../types';
 import type { Path } from '../utils';
 export interface InfographicOptions {
-    /** 容器，可以是选择器或者 HTMLElement */
-    container?: string | HTMLElement;
+    /** 容器，可以是选择器、Element 或 ShadowRoot */
+    container?: string | Element | ShadowRoot;
     /** 宽度 */
     width?: number | string;
     /** 高度 */
@@ -34,7 +34,7 @@ export interface InfographicOptions {
     elements?: ElementProps[];
 }
 export interface ParsedInfographicOptions {
-    container: HTMLElement;
+    container: Element | ShadowRoot;
     width?: number | string;
     height?: number | string;
     padding?: Padding;

package/lib/renderer/renderer.js

@@ -50,7 +50,7 @@ class Renderer {
                 });
             });
             try {
-                observer.observe(document, {
+                observer.observe(this.options.container, {
                     childList: true,
                     subtree: true,
                 });

package/lib/resource/loaders/search.js

@@ -16,7 +16,6 @@ const image_1 = require("./image");
 const remote_1 = require("./remote");
 const svg_1 = require("./svg");
 const queryIcon = (query) => __awaiter(void 0, void 0, void 0, function* () {
-    var _a;
     try {
         const params = new URLSearchParams({ text: query, topK: '1' });
         const url = `${constants_1.ICON_SERVICE_URL}?${params.toString()}`;
@@ -24,9 +23,9 @@ const queryIcon = (query) => __awaiter(void 0, void 0, void 0, function* () {
         if (!response.ok)
             return null;
         const result = yield response.json();
-        if (!(result === null || result === void 0 ? void 0 : result.status) || !Array.isArray((_a = result.data) === null || _a === void 0 ? void 0 : _a.data))
+        if (!(result === null || result === void 0 ? void 0 : result.success) || !Array.isArray(result.data))
             return null;
-        return result.data.data[0] || null;
+        return result.data[0] || null;
     }
     catch (error) {
         console.error(`Failed to query icon for "${query}":`, error);
@@ -58,9 +57,6 @@ function loadSearchResource(query, format) {
                 const svgText = commaIndex >= 0 ? result.slice(commaIndex + 1) : result;
                 return (0, svg_1.loadSVGResource)(svgText);
             }
-            if (mimeType === 'image/svg+xml' && format === 'svg' && isBase64) {
-                return (0, image_1.loadImageBase64Resource)(result);
-            }
             return (0, image_1.loadImageBase64Resource)(result);
         }
         return (0, remote_1.loadRemoteResource)(result, format);

package/lib/runtime/options.js

@@ -19,7 +19,7 @@ const createDefaultInteractions = () => [
 ];
 exports.DEFAULT_OPTIONS = {
     padding: 20,
-    theme: 'light',
+    theme: 'default',
     themeConfig: {
         palette: 'antv',
     },

package/lib/syntax/index.js

@@ -16,6 +16,15 @@ const mapper_1 = require("./mapper");
 const parser_1 = require("./parser");
 const relations_1 = require("./relations");
 const schema_1 = require("./schema");
+const ALLOWED_ROOT_KEYS = new Set([
+    'infographic',
+    'template',
+    'design',
+    'data',
+    'theme',
+    'width',
+    'height',
+]);
 function normalizeItems(items) {
     var _a;
     const seen = new Set();
@@ -36,6 +45,13 @@ function normalizeItems(items) {
     }
     return normalized.reverse();
 }
+function assignMissingNodeIds(items) {
+    items.forEach((item) => {
+        if (!item.id && item.label) {
+            item.id = item.label;
+        }
+    });
+}
 function resolveTemplate(node, errors) {
     if (!node)
         return undefined;
@@ -49,12 +65,42 @@ function resolveTemplate(node, errors) {
     }
     return undefined;
 }
+function inferTemplateFromBareFirstLine(entries, warnings) {
+    if ('infographic' in entries || 'template' in entries) {
+        return undefined;
+    }
+    const [firstEntry] = Object.entries(entries);
+    if (!firstEntry)
+        return undefined;
+    const [key, node] = firstEntry;
+    if (ALLOWED_ROOT_KEYS.has(key) || node.kind !== 'object') {
+        return undefined;
+    }
+    if (node.value !== undefined || Object.keys(node.entries).length > 0) {
+        return undefined;
+    }
+    warnings.push({
+        path: 'template',
+        line: node.line,
+        code: 'implicit_template',
+        message: 'Inferred template from a bare first line. Prefix it with "infographic" or "template" to make the syntax explicit.',
+        raw: key,
+    });
+    return {
+        template: key,
+        inferredKey: key,
+    };
+}
 function parseSyntax(input) {
     var _a;
     const { ast, errors } = (0, parser_1.parseSyntaxToAst)(input);
     const warnings = [];
     const options = {};
     const mergedEntries = Object.assign({}, ast.entries);
+    const inferredTemplate = inferTemplateFromBareFirstLine(ast.entries, warnings);
+    if (inferredTemplate) {
+        delete mergedEntries[inferredTemplate.inferredKey];
+    }
     const infographicNode = ast.entries.infographic;
     let templateFromInfographic;
     if (infographicNode && infographicNode.kind === 'object') {
@@ -65,17 +111,8 @@ function parseSyntax(input) {
                 mergedEntries[key] = value;
         });
     }
-    const allowedRootKeys = new Set([
-        'infographic',
-        'template',
-        'design',
-        'data',
-        'theme',
-        'width',
-        'height',
-    ]);
     Object.keys(mergedEntries).forEach((key) => {
-        if (!allowedRootKeys.has(key)) {
+        if (!ALLOWED_ROOT_KEYS.has(key)) {
             errors.push({
                 path: key,
                 line: mergedEntries[key].line,
@@ -92,6 +129,9 @@ function parseSyntax(input) {
     if (!options.template && templateFromInfographic) {
         options.template = templateFromInfographic;
     }
+    if (!options.template && inferredTemplate) {
+        options.template = inferredTemplate.template;
+    }
     const designNode = mergedEntries.design;
     if (designNode) {
         const design = (0, mapper_1.mapWithSchema)(designNode, schema_1.DesignSchema, 'design', errors);
@@ -114,6 +154,12 @@ function parseSyntax(input) {
             const parsed = (0, relations_1.parseRelationsNode)(relationsNode, errors, 'data.relations');
             if (parsed.relations.length > 0 || parsed.items.length > 0) {
                 const current = ((_a = options.data) !== null && _a !== void 0 ? _a : {});
+                if (Array.isArray(current.items)) {
+                    assignMissingNodeIds(current.items);
+                }
+                if (Array.isArray(current.nodes)) {
+                    assignMissingNodeIds(current.nodes);
+                }
                 // 优先使用已存在的数据列表 (sequences, lists, etc.)
                 const dataKeys = Object.keys(schema_1.DataSchema.fields).filter((key) => key !== 'items' && key !== 'relations');
                 let hasStructuredData = false;

package/lib/syntax/mapper.js

@@ -12,11 +12,20 @@ function createValueNode(value, line) {
 }
 const HEX_COLOR_PATTERN = /^(#[0-9a-f]{8}|#[0-9a-f]{6}|#[0-9a-f]{4}|#[0-9a-f]{3})/i;
 const FUNCTION_COLOR_PATTERN = /^((?:rgb|rgba|hsl|hsla)\([^)]*\))/i;
+function normalizeBooleanLiteral(value) {
+    const trimmed = value.trim();
+    if (/^true$/i.test(trimmed))
+        return 'true';
+    if (/^false$/i.test(trimmed))
+        return 'false';
+    return undefined;
+}
 function parseScalar(value) {
     const trimmed = value.trim();
-    if (trimmed === 'true')
+    const normalizedBoolean = normalizeBooleanLiteral(trimmed);
+    if (normalizedBoolean === 'true')
         return true;
-    if (trimmed === 'false')
+    if (normalizedBoolean === 'false')
         return false;
     if (/^-?\d+(\.\d+)?$/.test(trimmed))
         return parseFloat(trimmed);
@@ -182,11 +191,12 @@ function mapWithSchema(node, schema, path, errors) {
                 addError(errors, node, path, 'schema_mismatch', 'Expected boolean value.');
                 return undefined;
             }
-            if (value !== 'true' && value !== 'false') {
+            const normalizedBoolean = normalizeBooleanLiteral(value);
+            if (!normalizedBoolean) {
                 addError(errors, node, path, 'invalid_value', 'Invalid boolean value.', value);
                 return undefined;
             }
-            return value === 'true';
+            return normalizedBoolean === 'true';
         }
         case 'enum': {
             const value = readScalar(node);
@@ -194,11 +204,15 @@ function mapWithSchema(node, schema, path, errors) {
                 addError(errors, node, path, 'schema_mismatch', 'Expected enum value.');
                 return undefined;
             }
-            if (!schema.values.includes(value)) {
+            const normalizedBoolean = normalizeBooleanLiteral(value);
+            const enumValue = normalizedBoolean && schema.values.includes(normalizedBoolean)
+                ? normalizedBoolean
+                : value;
+            if (!schema.values.includes(enumValue)) {
                 addError(errors, node, path, 'invalid_value', 'Invalid enum value.', value);
                 return undefined;
             }
-            return value;
+            return enumValue;
         }
         case 'array': {
             if (node.kind === 'array') {

package/lib/syntax/parser.js

@@ -27,6 +27,13 @@ function getIndentInfo(line) {
 function stripComments(content) {
     return content.trimEnd();
 }
+function isCommentLine(content) {
+    const trimmed = content.trimStart();
+    return trimmed.startsWith('#') || trimmed.startsWith('//');
+}
+function isCodeFenceLine(content) {
+    return /^```[\w-]*\s*$/.test(content.trim());
+}
 function looksLikeRelationExpression(text) {
     return /[<>=o.x-]{2,}/.test(text);
 }
@@ -137,6 +144,8 @@ function parseSyntaxToAst(input) {
         if (!line.trim())
             return;
         const { indent, content } = getIndentInfo(line);
+        if (isCommentLine(content) || isCodeFenceLine(content))
+            return;
         const stripped = stripComments(content);
         if (!stripped.trim())
             return;

package/lib/syntax/types.d.ts

@@ -16,7 +16,7 @@ export interface ArrayNode {
     line: number;
     items: SyntaxNode[];
 }
-export type SyntaxErrorCode = 'unknown_key' | 'schema_mismatch' | 'invalid_value' | 'bad_indent' | 'bad_list' | 'bad_syntax';
+export type SyntaxErrorCode = 'implicit_template' | 'unknown_key' | 'schema_mismatch' | 'invalid_value' | 'bad_indent' | 'bad_list' | 'bad_syntax';
 export interface SyntaxError {
     path: string;
     line: number;

package/lib/templates/registry.d.ts

@@ -1,4 +1,5 @@
 import type { TemplateOptions } from './types';
 export declare function registerTemplate(type: string, template: TemplateOptions): void;
+export declare function resolveTemplateKey(type: string): string | undefined;
 export declare function getTemplate(type: string): TemplateOptions | undefined;
 export declare function getTemplates(): string[];

package/lib/templates/registry.js

@@ -1,12 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.registerTemplate = registerTemplate;
+exports.resolveTemplateKey = resolveTemplateKey;
 exports.getTemplate = getTemplate;
 exports.getTemplates = getTemplates;
+const utils_1 = require("./utils");
 const TEMPLATE_REGISTRY = new Map();
 function registerTemplate(type, template) {
     TEMPLATE_REGISTRY.set(type, template);
 }
+function resolveTemplateKey(type) {
+    if (TEMPLATE_REGISTRY.has(type))
+        return type;
+    return (0, utils_1.findClosestTemplateKey)(type, TEMPLATE_REGISTRY.keys());
+}
 function getTemplate(type) {
     return TEMPLATE_REGISTRY.get(type);
 }

package/lib/templates/utils.d.ts

@@ -0,0 +1 @@
+export declare function findClosestTemplateKey(type: string, keys: Iterable<string>): string | undefined;

package/lib/templates/utils.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.findClosestTemplateKey = findClosestTemplateKey;
+function normalizeTemplateKey(type) {
+    return type
+        .trim()
+        .toLowerCase()
+        .replace(/[_\s]+/g, '-')
+        .replace(/-+/g, '-');
+}
+function getLevenshteinDistance(source, target) {
+    if (source === target)
+        return 0;
+    if (!source.length)
+        return target.length;
+    if (!target.length)
+        return source.length;
+    const previous = Array.from({ length: target.length + 1 }, (_, index) => index);
+    const current = new Array(target.length + 1);
+    for (let sourceIndex = 1; sourceIndex <= source.length; sourceIndex += 1) {
+        current[0] = sourceIndex;
+        const sourceCode = source.charCodeAt(sourceIndex - 1);
+        for (let targetIndex = 1; targetIndex <= target.length; targetIndex += 1) {
+            const replaceCost = sourceCode === target.charCodeAt(targetIndex - 1) ? 0 : 1;
+            current[targetIndex] = Math.min(previous[targetIndex] + 1, current[targetIndex - 1] + 1, previous[targetIndex - 1] + replaceCost);
+        }
+        for (let index = 0; index < current.length; index += 1) {
+            previous[index] = current[index];
+        }
+    }
+    return previous[target.length];
+}
+function getCommonPrefixLength(source, target) {
+    const limit = Math.min(source.length, target.length);
+    let index = 0;
+    while (index < limit &&
+        source.charCodeAt(index) === target.charCodeAt(index)) {
+        index += 1;
+    }
+    return index;
+}
+function isBetterMatch(bestMatch, bestDistance, bestPrefixLength, candidateKey, candidateDistance, candidatePrefixLength) {
+    return (candidateDistance < bestDistance ||
+        (candidateDistance === bestDistance &&
+            candidatePrefixLength > bestPrefixLength) ||
+        (candidateDistance === bestDistance &&
+            candidatePrefixLength === bestPrefixLength &&
+            (!bestMatch || candidateKey < bestMatch)));
+}
+function findClosestTemplateKey(type, keys) {
+    const normalizedType = normalizeTemplateKey(type);
+    if (!normalizedType)
+        return undefined;
+    let bestMatch;
+    let bestDistance = Number.POSITIVE_INFINITY;
+    let bestPrefixLength = -1;
+    for (const key of keys) {
+        const normalizedKey = normalizeTemplateKey(key);
+        if (normalizedKey === normalizedType) {
+            return key;
+        }
+        const distance = getLevenshteinDistance(normalizedType, normalizedKey);
+        const prefixLength = getCommonPrefixLength(normalizedType, normalizedKey);
+        if (isBetterMatch(bestMatch, bestDistance, bestPrefixLength, key, distance, prefixLength)) {
+            bestMatch = key;
+            bestDistance = distance;
+            bestPrefixLength = prefixLength;
+        }
+    }
+    return bestMatch;
+}

package/lib/themes/built-in.js

@@ -1,6 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const registry_1 = require("./registry");
+(0, registry_1.registerTheme)('light', {
+    colorBg: '#ffffff',
+});
 (0, registry_1.registerTheme)('dark', {
     colorBg: '#1F1F1F',
     base: {

package/lib/utils/padding.js

@@ -31,7 +31,7 @@ function setSVGPadding(svg, padding) {
         setSVGPaddingInNode(svg, padding);
     }
     else {
-        if (document.contains(svg)) {
+        if (svg.isConnected) {
             setSVGPaddingInBrowser(svg, padding);
         }
         else {

package/lib/utils/style.d.ts

@@ -1 +1,3 @@
-export declare function injectStyleOnce(id: string, styles: string): void;
+type StyleTarget = Document | ShadowRoot | Node | null | undefined;
+export declare function injectStyleOnce(id: string, styles: string, target?: StyleTarget): void;
+export {};

package/lib/utils/style.js

@@ -1,11 +1,34 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.injectStyleOnce = injectStyleOnce;
-function injectStyleOnce(id, styles) {
-    if (document.getElementById(id))
+function resolveStyleRoot(target) {
+    if (!target)
+        return document;
+    if (target instanceof Document || target instanceof ShadowRoot)
+        return target;
+    if (!target.isConnected)
+        return document;
+    const root = target.getRootNode();
+    return root instanceof ShadowRoot ? root : document;
+}
+function hasStyle(root, id) {
+    if (root instanceof Document)
+        return Boolean(root.getElementById(id));
+    return Boolean(root.querySelector(`#${id}`));
+}
+function injectStyleOnce(id, styles, target) {
+    var _a;
+    const root = resolveStyleRoot(target);
+    if (hasStyle(root, id))
         return;
-    const style = document.createElement('style');
+    const doc = root instanceof Document ? root : ((_a = root.ownerDocument) !== null && _a !== void 0 ? _a : document);
+    const style = doc.createElement('style');
     style.id = id;
     style.textContent = styles;
-    document.head.appendChild(style);
+    if (root instanceof Document) {
+        root.head.appendChild(style);
+    }
+    else {
+        root.appendChild(style);
+    }
 }

package/lib/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "0.2.16";
+export declare const VERSION = "0.2.18";

package/lib/version.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VERSION = void 0;
-exports.VERSION = '0.2.16';
+exports.VERSION = '0.2.18';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/infographic",
-  "version": "0.2.16",
+  "version": "0.2.18",
   "description": "An Infographic Generation and Rendering Framework, bring words to life!",
   "keywords": [
     "antv",

package/src/constants/service.ts

@@ -1 +1 @@
-export const ICON_SERVICE_URL = 'https://www.weavefox.cn/api/open/v1/icon';
+export const ICON_SERVICE_URL = 'https://www.weavefox.cn/api/v1/infographic/icon';

package/src/designs/structures/chart-line.tsx

@@ -18,6 +18,9 @@ export interface ChartLineProps extends BaseStructureProps {
   valueFormatter?: (value: number, datum: ItemDatum) => string;
 }
 
+const ITEM_POSITION_H = 'center' as const;
+const ITEM_POSITION_V = 'normal' as const;
+
 export const ChartLine: ComponentType<ChartLineProps> = (props) => {
   const {
     Title,
@@ -55,8 +58,8 @@ export const ChartLine: ComponentType<ChartLineProps> = (props) => {
     indexes: [0],
     datum: items[0],
     data,
-    positionH: 'center',
-    positionV: 'normal',
+    positionH: ITEM_POSITION_H,
+    positionV: ITEM_POSITION_V,
   };
   const sampleBounds = getElementBounds(<Item {...itemProps} />);
   const labelWidth = sampleBounds.width;
@@ -121,6 +124,8 @@ export const ChartLine: ComponentType<ChartLineProps> = (props) => {
   const tickElements: JSXElement[] = [];
 
   const ticksY = scaleY.ticks(6);
+  const formatTickY = scaleY.tickFormat(6);
+
   ticksY.forEach((tick) => {
     const yPos = chartOriginY + scaleY(tick);
     gridElements.push(
@@ -145,7 +150,7 @@ export const ChartLine: ComponentType<ChartLineProps> = (props) => {
         fontSize={12}
         fill={axisColor}
       >
-        {Number.isInteger(tick) ? tick.toString() : tick.toFixed(1)}
+        {formatTickY(tick)}
       </Text>,
     );
   });
@@ -394,7 +399,6 @@ export const ChartLine: ComponentType<ChartLineProps> = (props) => {
           </linearGradient>
           <linearGradient id={gradientAreaId} x1="0%" y1="0%" x2="100%" y2="0%">
             {areaStops}
-            <stop offset="100%" stopColor={colorPrimary} stopOpacity="0.04" />
           </linearGradient>
         </Defs>
         <Group>{gridElements}</Group>

package/src/editor/interactions/dblclick-edit-text.ts

@@ -92,7 +92,7 @@ function editText(text: TextElement, options?: EditTextOptions) {
   const entity = getTextEntity(text);
   if (!entity) return;
 
-  ensureEditorStyles();
+  ensureEditorStyles(entity);
   new InlineTextEditor(entity, options).start();
 }
 
@@ -240,7 +240,7 @@ class InlineTextEditor {
   }
 }
 
-function ensureEditorStyles() {
+function ensureEditorStyles(target?: Node) {
   injectStyleOnce(
     EDITOR_STYLE_ID,
     `
@@ -256,5 +256,6 @@ function ensureEditorStyles() {
   background-color: #b3d4fc;
 }
 `,
+    target,
   );
 }

package/src/editor/managers/interaction.ts

@@ -16,6 +16,7 @@ import type {
   SelectionChangePayload,
   SelectMode,
 } from '../types';
+import { eventPathContains } from '../utils';
 import { Extension } from '../utils';
 
 export class InteractionManager implements IInteractionManager {
@@ -129,18 +130,19 @@ export class InteractionManager implements IInteractionManager {
 
   private handleClick = (event: MouseEvent) => {
     const doc = this.editor.getDocument();
-    const target = event.target;
+    const path = typeof event.composedPath === 'function' ? event.composedPath() : [];
+    const insideInfographic =
+      eventPathContains(event, doc) ||
+      path.some(
+        (node) => node instanceof HTMLElement && isInfographicComponent(node),
+      );
 
-    if (!target) {
+    if (!event.target) {
       this.deactivate();
       return;
     }
     // 点击画布 SVG 或者标记为组件的元素
-    if (
-      doc.contains(target as Node) ||
-      isInfographicComponent(target as HTMLElement)
-    )
-      this.activate();
+    if (insideInfographic) this.activate();
     else this.deactivate();
   };
 

package/src/editor/plugins/components/button.ts

@@ -7,6 +7,7 @@ export interface IconButtonProps {
   icon: Icon;
   onClick?: () => void;
   activate?: boolean;
+  root?: Node;
 }
 
 export interface IconButtonHandle {
@@ -18,8 +19,9 @@ export const IconButton = ({
   icon,
   onClick,
   activate = false,
+  root,
 }: IconButtonProps): Button => {
-  ensureIconButtonStyle();
+  ensureIconButtonStyle(root);
 
   const button = document.createElement('button');
   button.type = 'button';
@@ -44,7 +46,7 @@ export const IconButton = ({
 const ICON_BUTTON_CLASS = 'infographic-edit-bar-icon-btn';
 const ICON_BUTTON_STYLE_ID = 'infographic-edit-bar-icon-btn-style';
 
-function ensureIconButtonStyle() {
+function ensureIconButtonStyle(target?: Node) {
   injectStyleOnce(
     ICON_BUTTON_STYLE_ID,
     `
@@ -73,5 +75,6 @@ function ensureIconButtonStyle() {
   background-color: #d9d9d9;
 }
 `,
+    target,
   );
 }

package/src/editor/plugins/components/color-picker.ts

@@ -6,6 +6,7 @@ export type ColorPickerProps = {
   value?: string;
   swatches?: string[];
   onChange?: (value: string) => void;
+  root?: Node;
 };
 
 export type ColorPickerHandle = {
@@ -66,7 +67,7 @@ export function ColorPicker(
     throw new Error('ColorPicker can only be used in the browser.');
   }
 
-  ensureColorPickerStyles();
+  ensureColorPickerStyles(props.root);
 
   const container = document.createElement('div');
   container.classList.add(COLOR_PICKER_CLASS);
@@ -279,7 +280,7 @@ function createSwitchLabel(text: string): HTMLSpanElement {
   return span;
 }
 
-function ensureColorPickerStyles() {
+function ensureColorPickerStyles(target?: Node) {
   injectStyleOnce(
     COLOR_PICKER_STYLE_ID,
     `
@@ -393,5 +394,6 @@ function ensureColorPickerStyles() {
   color: #ffffff;
 }
 `,
+    target,
   );
 }