@antv/infographic 0.2.14 → 0.2.15

package/lib/templates/sequence-interaction.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sequenceInteractionTemplates = void 0;
+// 多样化的节点样式
+const items = {
+    'badge-card': {
+        type: 'badge-card',
+        width: 160,
+        height: 60,
+    },
+    'compact-card': {
+        type: 'compact-card',
+        width: 180,
+        height: 60,
+    },
+    'capsule-item': {
+        type: 'capsule-item',
+        width: 150,
+        height: 60,
+    },
+    'rounded-rect-node': {
+        type: 'rounded-rect-node',
+        width: 140,
+        height: 60,
+    },
+};
+// 基础结构属性
+const baseStructureAttrs = {
+    type: 'sequence-interaction',
+    showLaneHeader: true,
+    arrowType: 'triangle',
+};
+// 箭头样式配置
+const arrowStyles = {
+    default: {},
+    dashed: {
+        edgeStyle: 'dashed',
+    },
+    animated: {
+        edgeStyle: 'dashed',
+        animated: true,
+    },
+};
+// 结构布局配置
+const structures = {
+    // 默认：带生命线
+    default: Object.assign(Object.assign({}, baseStructureAttrs), { showLifeline: true, nodeGap: 40 }),
+    // 紧凑：更小间距
+    compact: Object.assign(Object.assign({}, baseStructureAttrs), { showLifeline: true, nodeGap: 20 }),
+    // 宽松：更大间距
+    wide: Object.assign(Object.assign({}, baseStructureAttrs), { showLifeline: true, nodeGap: 60 }),
+};
+exports.sequenceInteractionTemplates = {};
+// 排除某些不合适的组合
+const omit = [
+// 后续如果有不合适的可以排除掉
+];
+Object.entries(structures).forEach(([strKey, strAttrs]) => {
+    Object.entries(arrowStyles).forEach(([arrowKey, arrowAttrs]) => {
+        Object.entries(items).forEach(([itemKey, itemAttrs]) => {
+            const parts = [strKey];
+            if (arrowKey !== 'default') {
+                parts.push(arrowKey);
+            }
+            parts.push(itemKey);
+            const appendix = parts.join('-');
+            if (omit.includes(appendix))
+                return;
+            const templateKey = `sequence-interaction-${appendix}`;
+            exports.sequenceInteractionTemplates[templateKey] = {
+                design: {
+                    title: 'default',
+                    structure: Object.assign(Object.assign({}, strAttrs), arrowAttrs),
+                    item: itemAttrs,
+                },
+            };
+        });
+    });
+});

package/lib/types/data.d.ts

@@ -49,6 +49,7 @@ export interface RelationEdgeDatum extends BaseDatum {
     direction?: 'forward' | 'both' | 'none';
     showArrow?: boolean;
     arrowType?: 'arrow' | 'triangle' | 'diamond';
+    lineStyle?: 'solid' | 'dashed';
 }
 /**
  * 统计型数据项

package/lib/utils/index.d.ts

@@ -17,5 +17,6 @@ export * from './recognizer';
 export * from './style';
 export * from './svg';
 export * from './text';
+export * from './types';
 export * from './uuid';
 export * from './viewbox';

package/lib/utils/index.js

@@ -33,5 +33,6 @@ __exportStar(require("./recognizer"), exports);
 __exportStar(require("./style"), exports);
 __exportStar(require("./svg"), exports);
 __exportStar(require("./text"), exports);
+__exportStar(require("./types"), exports);
 __exportStar(require("./uuid"), exports);
 __exportStar(require("./viewbox"), exports);

package/lib/utils/measure-text.js

@@ -6,15 +6,42 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.setFontExtendFactor = void 0;
 exports.measureText = measureText;
 const measury_1 = require("measury");
+const _851tegakizatsu_Regular_1 = __importDefault(require("measury/fonts/851tegakizatsu-Regular"));
 const AlibabaPuHuiTi_Regular_1 = __importDefault(require("measury/fonts/AlibabaPuHuiTi-Regular"));
+const Arial_Regular_1 = __importDefault(require("measury/fonts/Arial-Regular"));
+const LXGWWenKai_Regular_1 = __importDefault(require("measury/fonts/LXGWWenKai-Regular"));
+const SourceHanSans_Regular_1 = __importDefault(require("measury/fonts/SourceHanSans-Regular"));
+const SourceHanSerif_Regular_1 = __importDefault(require("measury/fonts/SourceHanSerif-Regular"));
 const renderer_1 = require("../renderer");
 const font_1 = require("./font");
-let FONT_EXTEND_FACTOR = 1.01;
+let FONT_EXTEND_FACTOR = 1.015;
 const setFontExtendFactor = (factor) => {
     FONT_EXTEND_FACTOR = factor;
 };
 exports.setFontExtendFactor = setFontExtendFactor;
 (0, measury_1.registerFont)(AlibabaPuHuiTi_Regular_1.default);
+// Lazy-register extra measury fonts on first use (SSR only needs glyph data).
+const EXTRA_MEASURY_FONTS = {
+    '851tegakizatsu': _851tegakizatsu_Regular_1.default,
+    Arial: Arial_Regular_1.default,
+    'LXGW WenKai': LXGWWenKai_Regular_1.default,
+    'Source Han Sans': SourceHanSans_Regular_1.default,
+    'Source Han Serif': SourceHanSerif_Regular_1.default,
+};
+const registeredMeasuryFonts = new Set();
+function ensureMeasuryFont(fontFamily) {
+    var _a, _b;
+    // decodeFontFamily: '"851tegakizatsu", sans-serif' → '851tegakizatsu, sans-serif'
+    // split by comma and take the first family name
+    const primary = (_b = (_a = (0, font_1.decodeFontFamily)(fontFamily)) === null || _a === void 0 ? void 0 : _a.split(',')[0]) === null || _b === void 0 ? void 0 : _b.trim();
+    if (!primary || registeredMeasuryFonts.has(primary))
+        return;
+    const data = EXTRA_MEASURY_FONTS[primary];
+    if (!data)
+        return;
+    (0, measury_1.registerFont)(data);
+    registeredMeasuryFonts.add(primary);
+}
 let canvasContext = undefined;
 let measureSpan = null;
 function getCanvasContext() {
@@ -100,13 +127,14 @@ function measureText(text = '', attrs) {
     }
     const { fontFamily = renderer_1.DEFAULT_FONT, fontSize = 14, fontWeight = 'normal', lineHeight = 1.4, } = attrs;
     const content = text.toString();
+    ensureMeasuryFont(fontFamily);
     const options = {
         fontFamily,
         fontSize: parseFloat(fontSize.toString()),
         fontWeight,
         lineHeight,
     };
-    const fallback = () => (0, measury_1.measureText)(content, options);
+    const fallback = () => (0, measury_1.measureText)(content, Object.assign(Object.assign({}, options), { fontFamily: (0, font_1.decodeFontFamily)(fontFamily) }));
     const metrics = (_a = measureTextInBrowser(content, options)) !== null && _a !== void 0 ? _a : fallback();
     // 额外添加 1% 宽高
     return {

package/lib/utils/types.d.ts

@@ -0,0 +1,16 @@
+type Prev = [never, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+type StopType = string | number | boolean | symbol | undefined | null | ((...args: any[]) => any) | Array<any>;
+type Join<K, P> = K extends string | number ? P extends string | number ? `${K}${'' extends P ? '' : '.'}${P}` : never : never;
+type ValidKey<T> = keyof {
+    [K in keyof T as string extends K ? never : number extends K ? never : K]: any;
+};
+/**
+ * 递归生成 T 的所有点语法路径 (例如 "design.structure" 或 "data.items")
+ * @template T 目标对象类型
+ * @template D 递归深度限制，默认 3 层 (足以覆盖大多数配置嵌套)
+ */
+export type Path<T, D extends number = 3> = [D] extends [never] ? never : T extends StopType ? never : {
+    [K in ValidKey<T>]-?: K extends string | number ? // 生成: 当前路径 K 或 "K + 子路径"
+    K | Join<K, Path<NonNullable<T[K]>, Prev[D]>> : never;
+}[ValidKey<T>];
+export {};

package/lib/utils/types.js

@@ -0,0 +1,13 @@
+"use strict";
+// =============================================================================
+// Path Helper Types (路径生成工具类型)
+//
+// 作用：递归提取对象的所有可选路径（点语法），用于 SyncRegistry 等场景的类型安全与补全。
+//
+// [Input]:
+// type Obj = { a: { b: { c: string } }, d: number };
+//
+// [Output]:
+// "a" | "a.b" | "a.b.c" | "d"
+// =============================================================================
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "0.2.14";
+export declare const VERSION = "0.2.15";

package/lib/version.js

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

package/package.json

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

package/src/designs/structures/index.ts

@@ -31,6 +31,7 @@ export * from './sequence-cylinders-3d';
 export * from './sequence-filter-mesh';
 export * from './sequence-funnel';
 export * from './sequence-horizontal-zigzag';
+export * from './sequence-interaction';
 export * from './sequence-mountain';
 export * from './sequence-pyramid';
 export * from './sequence-roadmap-vertical';

package/src/designs/structures/relation-dagre-flow.tsx

@@ -1,10 +1,18 @@
 import { DagreLayout } from '@antv/layout';
 import type { ComponentType, JSXElement } from '../../jsx';
-import { Defs, getElementBounds, Group, Path, Polygon, Text } from '../../jsx';
+import { Defs, getElementBounds, Group, Path, Text } from '../../jsx';
 import type { ItemDatum, RelationData, RelationEdgeDatum } from '../../types';
 import { BtnAdd, BtnsGroup, ItemsGroup } from '../components';
 import { FlexLayout } from '../layouts';
-import { getColorPrimary, getPaletteColor, getThemeColors } from '../utils';
+import {
+  createArrowElements,
+  createRoundedPath,
+  createStraightPath,
+  getColorPrimary,
+  getMidPoint,
+  getPaletteColor,
+  getThemeColors,
+} from '../utils';
 import { registerStructure } from './registry';
 import type { BaseStructureProps } from './types';
 
@@ -332,183 +340,7 @@ export const RelationDagreFlow: ComponentType<RelationDagreFlowProps> = (
         : '1s';
 
     const straightCornerRadius = edgeCornerRadius;
-    const createStraightPath = (
-      points: [number, number][],
-      dx: number,
-      dy: number,
-    ) =>
-      points
-        .map(([x, y], index) => {
-          const prefix = index === 0 ? 'M' : 'L';
-          return `${prefix} ${x + dx} ${y + dy}`;
-        })
-        .join(' ');
-
-    const createRoundedPath = (
-      points: [number, number][],
-      radius: number,
-      dx: number,
-      dy: number,
-    ) => {
-      if (points.length < 2) return '';
-      const clamp = (value: number, min: number, max: number) =>
-        Math.min(max, Math.max(min, value));
-      const toPoint = ([x, y]: [number, number]) => ({
-        x: x + dx,
-        y: y + dy,
-      });
-      const output: string[] = [];
-      const first = toPoint(points[0]);
-      output.push(`M ${first.x} ${first.y}`);
-
-      if (points.length === 2) {
-        const last = toPoint(points[1]);
-        output.push(`L ${last.x} ${last.y}`);
-        return output.join(' ');
-      }
-
-      for (let i = 1; i < points.length - 1; i += 1) {
-        const prev = points[i - 1];
-        const curr = points[i];
-        const next = points[i + 1];
-        const v0x = curr[0] - prev[0];
-        const v0y = curr[1] - prev[1];
-        const v1x = next[0] - curr[0];
-        const v1y = next[1] - curr[1];
-        const d0 = Math.hypot(v0x, v0y);
-        const d1 = Math.hypot(v1x, v1y);
-        if (d0 === 0 || d1 === 0) {
-          const currPoint = toPoint(curr);
-          output.push(`L ${currPoint.x} ${currPoint.y}`);
-          continue;
-        }
-        const r = clamp(radius, 0, Math.min(d0, d1) / 2);
-        if (r === 0) {
-          const currPoint = toPoint(curr);
-          output.push(`L ${currPoint.x} ${currPoint.y}`);
-          continue;
-        }
-        const u0x = v0x / d0;
-        const u0y = v0y / d0;
-        const u1x = v1x / d1;
-        const u1y = v1y / d1;
-        const start = toPoint([curr[0] - u0x * r, curr[1] - u0y * r]);
-        const end = toPoint([curr[0] + u1x * r, curr[1] + u1y * r]);
-        output.push(`L ${start.x} ${start.y}`);
-        const currPoint = toPoint(curr);
-        output.push(`Q ${currPoint.x} ${currPoint.y} ${end.x} ${end.y}`);
-      }
-
-      const last = toPoint(points[points.length - 1]);
-      output.push(`L ${last.x} ${last.y}`);
-      return output.join(' ');
-    };
-    const createArrowElements = (
-      x: number,
-      y: number,
-      angle: number,
-      type: 'arrow' | 'triangle' | 'diamond',
-      fillColor: string,
-    ): JSXElement[] => {
-      const ux = Math.cos(angle);
-      const uy = Math.sin(angle);
-      const px = -uy;
-      const py = ux;
-      const length = arrowSize;
-      const halfWidth = arrowSize * 0.55;
-
-      if (type === 'arrow') {
-        const leftX = x - ux * length + px * halfWidth;
-        const leftY = y - uy * length + py * halfWidth;
-        const rightX = x - ux * length - px * halfWidth;
-        const rightY = y - uy * length - py * halfWidth;
-        return [
-          <Path
-            d={`M ${leftX} ${leftY} L ${x} ${y} L ${rightX} ${rightY}`}
-            stroke={fillColor}
-            strokeWidth={Math.max(1.5, edgeWidth)}
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            fill="none"
-          />,
-        ];
-      }
 
-      if (type === 'diamond') {
-        const diamondLength = length * 1.25;
-        const diamondWidth = halfWidth * 0.75;
-        const midX = x - ux * diamondLength * 0.5;
-        const midY = y - uy * diamondLength * 0.5;
-        const diamondPoints = [
-          { x, y },
-          { x: midX + px * diamondWidth, y: midY + py * diamondWidth },
-          { x: x - ux * diamondLength, y: y - uy * diamondLength },
-          { x: midX - px * diamondWidth, y: midY - py * diamondWidth },
-        ];
-        return [
-          <Polygon
-            points={diamondPoints}
-            fill={fillColor}
-            stroke={fillColor}
-            strokeWidth={Math.max(1, edgeWidth * 0.8)}
-          />,
-        ];
-      }
-
-      const trianglePoints = [
-        { x, y },
-        {
-          x: x - ux * length + px * halfWidth,
-          y: y - uy * length + py * halfWidth,
-        },
-        {
-          x: x - ux * length - px * halfWidth,
-          y: y - uy * length - py * halfWidth,
-        },
-      ];
-      return [
-        <Polygon
-          points={trianglePoints}
-          fill={fillColor}
-          stroke={fillColor}
-          strokeWidth={Math.max(1, edgeWidth * 0.8)}
-        />,
-      ];
-    };
-    const getMidPoint = (points: [number, number][]) => {
-      if (points.length === 0) return null;
-      if (points.length === 1) return points[0];
-      let total = 0;
-      const segments: {
-        length: number;
-        start: [number, number];
-        end: [number, number];
-      }[] = [];
-      for (let i = 0; i < points.length - 1; i += 1) {
-        const start = points[i];
-        const end = points[i + 1];
-        const length = Math.hypot(end[0] - start[0], end[1] - start[1]);
-        segments.push({ length, start, end });
-        total += length;
-      }
-      if (total === 0) return points[0];
-      let target = total / 2;
-      for (let i = 0; i < segments.length; i += 1) {
-        const segment = segments[i];
-        if (target <= segment.length || i === segments.length - 1) {
-          const ratio =
-            segment.length === 0
-              ? 0
-              : Math.max(0, Math.min(1, target / segment.length));
-          return [
-            segment.start[0] + (segment.end[0] - segment.start[0]) * ratio,
-            segment.start[1] + (segment.end[1] - segment.start[1]) * ratio,
-          ] as [number, number];
-        }
-        target -= segment.length;
-      }
-      return points[Math.floor(points.length / 2)];
-    };
     const getOrthEdgeEndpoints = (sourceId: string, targetId: string) => {
       const source = nodeLayoutById.get(sourceId);
       const target = nodeLayoutById.get(targetId);
@@ -733,6 +565,8 @@ export const RelationDagreFlow: ComponentType<RelationDagreFlowProps> = (
             angle,
             edgeArrowType,
             arrowFill,
+            edgeWidth,
+            arrowSize,
           );
           decorElements.push(...arrowElements);
         }
@@ -748,6 +582,8 @@ export const RelationDagreFlow: ComponentType<RelationDagreFlowProps> = (
             angle,
             edgeArrowType,
             arrowFill,
+            edgeWidth,
+            arrowSize,
           );
           decorElements.push(...arrowElements);
         }