@antv/infographic 0.2.2 → 0.2.4

package/src/resource/loader.ts

@@ -1,3 +1,4 @@
+import type { ItemDatum } from '../types';
 import { getOrCreateDefs } from '../utils';
 import {
   loadImageBase64Resource,
@@ -12,34 +13,41 @@ import { getResourceId, parseResourceConfig } from './utils';
 async function getResource(
   scene: ResourceScene,
   config: string | ResourceConfig,
+  datum?: ItemDatum,
 ): Promise<Resource | null> {
   const cfg = parseResourceConfig(config);
   if (!cfg) return null;
   cfg.scene ||= scene;
   const { source, data, format, encoding } = cfg;
 
-  if (source === 'inline') {
-    const isDataURI = data.startsWith('data:');
-    if (format === 'svg' && encoding === 'raw') {
-      return loadSVGResource(data);
+  let resource: Resource | null = null;
+  try {
+    if (source === 'inline') {
+      const isDataURI = data.startsWith('data:');
+      if (format === 'svg' && encoding === 'raw') {
+        resource = loadSVGResource(data);
+      } else if (format === 'svg' && isDataURI) {
+        resource = await loadImageBase64Resource(data);
+      } else if (isDataURI || format === 'image') {
+        resource = await loadImageBase64Resource(data);
+      } else {
+        resource = loadSVGResource(data);
+      }
+    } else if (source === 'remote') {
+      resource = await loadRemoteResource(data, format);
+    } else if (source === 'search') {
+      resource = await loadSearchResource(data, format);
+    } else {
+      const customLoader = getCustomResourceLoader();
+      if (customLoader) resource = await customLoader(cfg);
     }
-    if (format === 'svg' && isDataURI) {
-      return await loadImageBase64Resource(data);
-    }
-    if (isDataURI || format === 'image') {
-      return await loadImageBase64Resource(data);
-    }
-    return loadSVGResource(data);
-  } else if (source === 'remote') {
-    return await loadRemoteResource(data, format);
-  } else if (source === 'search') {
-    return await loadSearchResource(data, format);
-  } else {
-    const customLoader = getCustomResourceLoader();
-    if (customLoader) return await customLoader(cfg);
+  } catch {
+    resource = null;
   }
 
-  return null;
+  if (resource) return resource;
+
+  return await loadSearchResource(getFallbackQuery(cfg, scene, datum), format);
 }
 
 const RESOURCE_MAP = new Map<string, Resource>();
@@ -53,6 +61,7 @@ export async function loadResource(
   svg: SVGSVGElement | null,
   scene: ResourceScene,
   config: string | ResourceConfig,
+  datum?: ItemDatum,
 ): Promise<string | null> {
   if (!svg) return null;
   const cfg = parseResourceConfig(config);
@@ -61,7 +70,7 @@ export async function loadResource(
 
   const resource = RESOURCE_MAP.has(id)
     ? RESOURCE_MAP.get(id) || null
-    : await getResource(scene, cfg);
+    : await getResource(scene, cfg, datum);
 
   if (!resource) return null;
 
@@ -76,3 +85,28 @@ export async function loadResource(
 
   return id;
 }
+
+function getFallbackQuery(
+  cfg: ResourceConfig,
+  scene: ResourceScene,
+  datum?: ItemDatum,
+): string {
+  const defaultQuery = scene === 'illus' ? 'illustration' : 'icon';
+  const datumQuery =
+    normalizeQuery(datum?.label) || normalizeQuery(datum?.desc);
+  if (datumQuery) return datumQuery;
+
+  const data = normalizeQuery(cfg.data);
+  if (!data) return defaultQuery;
+  if (cfg.source === 'inline') return defaultQuery;
+  if (data.startsWith('data:')) return defaultQuery;
+  if (data.startsWith('<svg') || data.startsWith('<symbol'))
+    return defaultQuery;
+  return data;
+}
+
+function normalizeQuery(value?: string): string | null {
+  if (typeof value !== 'string') return null;
+  const trimmed = value.trim();
+  return trimmed ? trimmed : null;
+}

package/src/templates/built-in.ts

@@ -1,5 +1,7 @@
 import { hierarchyMindmapTemplates } from './hierarchy-mindmap';
+import { hierarchyStructureTemplates } from './hierarchy-structure';
 import { hierarchyTreeTemplates } from './hierarchy-tree';
+import { listZigzagTemplates } from './list-zigzag';
 import { registerTemplate } from './registry';
 import { sequenceStairsTemplates } from './sequence-stairs';
 import type { TemplateOptions } from './types';
@@ -807,6 +809,8 @@ const BUILT_IN_TEMPLATES: Record<string, TemplateOptions> = {
   ...hierarchyMindmapTemplates,
   ...sequenceStairsTemplates,
   ...wordCloudTemplate,
+  ...listZigzagTemplates,
+  ...hierarchyStructureTemplates,
 };
 
 Object.entries(BUILT_IN_TEMPLATES).forEach(([name, options]) => {

package/src/templates/hierarchy-structure.ts

@@ -0,0 +1,23 @@
+import type { TemplateOptions } from './types';
+
+export const hierarchyStructureTemplates: Record<string, TemplateOptions> = {
+  'hierarchy-structure': {
+    design: {
+      title: 'default',
+      structure: {
+        type: 'hierarchy-structure',
+      },
+      item: 'simple',
+    },
+  },
+  'hierarchy-structure-mirror': {
+    design: {
+      title: 'default',
+      structure: {
+        type: 'hierarchy-structure',
+        layerLabelPosition: 'right',
+      },
+      item: 'simple',
+    },
+  },
+};

package/src/templates/list-zigzag.ts

@@ -0,0 +1,70 @@
+import type { TemplateOptions } from './types';
+
+export const listZigzagTemplates: Record<string, TemplateOptions> = {
+  'list-zigzag-up-compact-card': {
+    design: {
+      title: 'default',
+      structure: {
+        type: 'list-zigzag-up',
+      },
+      items: [
+        {
+          type: 'compact-card',
+        },
+      ],
+    },
+    themeConfig: {
+      colorPrimary: '#17CA2C',
+    },
+  },
+  'list-zigzag-up-simple': {
+    design: {
+      title: 'default',
+      structure: {
+        type: 'list-zigzag-up',
+      },
+      items: [
+        {
+          type: 'simple',
+          usePaletteColor: true,
+        },
+      ],
+    },
+    themeConfig: {
+      colorPrimary: '#17CA2C',
+    },
+  },
+  'list-zigzag-down-compact-card': {
+    design: {
+      title: 'default',
+      structure: {
+        type: 'list-zigzag-down',
+      },
+      items: [
+        {
+          type: 'compact-card',
+        },
+      ],
+    },
+    themeConfig: {
+      colorPrimary: '#17CA2C',
+    },
+  },
+  'list-zigzag-down-simple': {
+    design: {
+      title: 'default',
+      structure: {
+        type: 'list-zigzag-down',
+      },
+      items: [
+        {
+          type: 'simple',
+          usePaletteColor: true,
+        },
+      ],
+    },
+    themeConfig: {
+      colorPrimary: '#17CA2C',
+    },
+  },
+};