@antv/infographic 0.2.14 → 0.2.15

package/esm/templates/sequence-interaction.js

@@ -0,0 +1,76 @@
+// 多样化的节点样式
+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 }),
+};
+export const 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}`;
+            sequenceInteractionTemplates[templateKey] = {
+                design: {
+                    title: 'default',
+                    structure: Object.assign(Object.assign({}, strAttrs), arrowAttrs),
+                    item: itemAttrs,
+                },
+            };
+        });
+    });
+});

package/esm/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/esm/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/esm/utils/index.js

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

package/esm/utils/measure-text.js

@@ -1,12 +1,39 @@
 import { measureText as measure, registerFont } from 'measury';
+import Tegakizatsu from 'measury/fonts/851tegakizatsu-Regular';
 import AlibabaPuHuiTi from 'measury/fonts/AlibabaPuHuiTi-Regular';
+import Arial from 'measury/fonts/Arial-Regular';
+import LXGWWenKai from 'measury/fonts/LXGWWenKai-Regular';
+import SourceHanSans from 'measury/fonts/SourceHanSans-Regular';
+import SourceHanSerif from 'measury/fonts/SourceHanSerif-Regular';
 import { DEFAULT_FONT } from '../renderer/index.js';
-import { encodeFontFamily } from './font.js';
-let FONT_EXTEND_FACTOR = 1.01;
+import { decodeFontFamily, encodeFontFamily } from './font.js';
+let FONT_EXTEND_FACTOR = 1.015;
 export const setFontExtendFactor = (factor) => {
     FONT_EXTEND_FACTOR = factor;
 };
 registerFont(AlibabaPuHuiTi);
+// Lazy-register extra measury fonts on first use (SSR only needs glyph data).
+const EXTRA_MEASURY_FONTS = {
+    '851tegakizatsu': Tegakizatsu,
+    Arial: Arial,
+    'LXGW WenKai': LXGWWenKai,
+    'Source Han Sans': SourceHanSans,
+    'Source Han Serif': SourceHanSerif,
+};
+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 = 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;
+    registerFont(data);
+    registeredMeasuryFonts.add(primary);
+}
 let canvasContext = undefined;
 let measureSpan = null;
 function getCanvasContext() {
@@ -92,13 +119,14 @@ export function measureText(text = '', attrs) {
     }
     const { fontFamily = 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 = () => measure(content, options);
+    const fallback = () => measure(content, Object.assign(Object.assign({}, options), { fontFamily: decodeFontFamily(fontFamily) }));
     const metrics = (_a = measureTextInBrowser(content, options)) !== null && _a !== void 0 ? _a : fallback();
     // 额外添加 1% 宽高
     return {

package/esm/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/esm/utils/types.js

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

package/esm/version.d.ts

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

package/esm/version.js

@@ -1 +1 @@
-export const VERSION = '0.2.14';
+export const VERSION = '0.2.15';

package/lib/designs/structures/index.d.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/lib/designs/structures/index.js

@@ -51,6 +51,7 @@ __exportStar(require("./sequence-cylinders-3d"), exports);
 __exportStar(require("./sequence-filter-mesh"), exports);
 __exportStar(require("./sequence-funnel"), exports);
 __exportStar(require("./sequence-horizontal-zigzag"), exports);
+__exportStar(require("./sequence-interaction"), exports);
 __exportStar(require("./sequence-mountain"), exports);
 __exportStar(require("./sequence-pyramid"), exports);
 __exportStar(require("./sequence-roadmap-vertical"), exports);

package/lib/designs/structures/relation-dagre-flow.js

@@ -194,141 +194,6 @@ const RelationDagreFlow = (props) => {
             ? `${dashPatternLength / (edgeAnimationSpeed * 10)}s`
             : '1s';
         const straightCornerRadius = edgeCornerRadius;
-        const createStraightPath = (points, dx, dy) => points
-            .map(([x, y], index) => {
-            const prefix = index === 0 ? 'M' : 'L';
-            return `${prefix} ${x + dx} ${y + dy}`;
-        })
-            .join(' ');
-        const createRoundedPath = (points, radius, dx, dy) => {
-            if (points.length < 2)
-                return '';
-            const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
-            const toPoint = ([x, y]) => ({
-                x: x + dx,
-                y: y + dy,
-            });
-            const output = [];
-            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, y, angle, type, fillColor) => {
-            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 [
-                    (0, jsx_runtime_1.jsx)(jsx_1.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 [
-                    (0, jsx_runtime_1.jsx)(jsx_1.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 [
-                (0, jsx_runtime_1.jsx)(jsx_1.Polygon, { points: trianglePoints, fill: fillColor, stroke: fillColor, strokeWidth: Math.max(1, edgeWidth * 0.8) }),
-            ];
-        };
-        const getMidPoint = (points) => {
-            if (points.length === 0)
-                return null;
-            if (points.length === 1)
-                return points[0];
-            let total = 0;
-            const segments = [];
-            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,
-                    ];
-                }
-                target -= segment.length;
-            }
-            return points[Math.floor(points.length / 2)];
-        };
         const getOrthEdgeEndpoints = (sourceId, targetId) => {
             const source = nodeLayoutById.get(sourceId);
             const target = nodeLayoutById.get(targetId);
@@ -430,10 +295,10 @@ const RelationDagreFlow = (props) => {
             const edgeStroke = edgeColorMode === 'gradient' ? `url(#${gradientKey})` : defaultStroke;
             let pathD = '';
             if (straightCornerRadius > 0) {
-                pathD = createRoundedPath(points, straightCornerRadius, pointsOffsetX, pointsOffsetY);
+                pathD = (0, utils_1.createRoundedPath)(points, straightCornerRadius, pointsOffsetX, pointsOffsetY);
             }
             else {
-                pathD = createStraightPath(points, pointsOffsetX, pointsOffsetY);
+                pathD = (0, utils_1.createStraightPath)(points, pointsOffsetX, pointsOffsetY);
             }
             if (!pathD)
                 return;
@@ -446,7 +311,7 @@ const RelationDagreFlow = (props) => {
             }
             if (relation === null || relation === void 0 ? void 0 : relation.label) {
                 let labelPoint = null;
-                const midPoint = getMidPoint(points);
+                const midPoint = (0, utils_1.getMidPoint)(points);
                 if (midPoint) {
                     labelPoint = [
                         midPoint[0] + pointsOffsetX,
@@ -471,7 +336,7 @@ const RelationDagreFlow = (props) => {
                     const tail = points[lastIndex - 1];
                     const angle = Math.atan2(head[1] - tail[1], head[0] - tail[0]);
                     const arrowFill = edgeColorMode === 'gradient' ? targetColor : defaultStroke;
-                    const arrowElements = createArrowElements(head[0] + pointsOffsetX, head[1] + pointsOffsetY, angle, edgeArrowType, arrowFill);
+                    const arrowElements = (0, utils_1.createArrowElements)(head[0] + pointsOffsetX, head[1] + pointsOffsetY, angle, edgeArrowType, arrowFill, edgeWidth, arrowSize);
                     decorElements.push(...arrowElements);
                 }
                 if (direction === 'both') {
@@ -479,7 +344,7 @@ const RelationDagreFlow = (props) => {
                     const tail = points[1];
                     const angle = Math.atan2(head[1] - tail[1], head[0] - tail[0]);
                     const arrowFill = edgeColorMode === 'gradient' ? sourceColor : defaultStroke;
-                    const arrowElements = createArrowElements(head[0] + pointsOffsetX, head[1] + pointsOffsetY, angle, edgeArrowType, arrowFill);
+                    const arrowElements = (0, utils_1.createArrowElements)(head[0] + pointsOffsetX, head[1] + pointsOffsetY, angle, edgeArrowType, arrowFill, edgeWidth, arrowSize);
                     decorElements.push(...arrowElements);
                 }
             }

package/lib/designs/structures/sequence-interaction.d.ts

@@ -0,0 +1,54 @@
+import type { ComponentType } from '../../jsx';
+import type { RelationEdgeDatum } from '../../types';
+import type { BaseStructureProps } from './types';
+/**
+ * 泳道内的节点数据
+ */
+export interface InteractionChildDatum {
+    id: string;
+    label?: string;
+    desc?: string;
+    icon?: string;
+    /**
+     * 手动指定节点的垂直顺序（层级），默认为数组索引
+     * 相同 step 的节点会处于同一高度
+     */
+    step?: number;
+}
+/**
+ * 泳道数据（顶层item）
+ * label 作为泳道标题
+ * children 作为泳道内的节点列表
+ */
+export interface InteractionLaneDatum {
+    label: string;
+    desc?: string;
+    icon?: string;
+    children?: InteractionChildDatum[];
+}
+/**
+ * 交互流程的数据结构
+ * items: 泳道列表，每个泳道有 label 和 children
+ * relations: 节点间的关系
+ */
+export interface InteractionFlowData {
+    title?: string;
+    desc?: string;
+    items?: InteractionLaneDatum[];
+    relations?: RelationEdgeDatum[];
+}
+export interface SequenceInteractionProps extends BaseStructureProps {
+    laneGap?: number;
+    nodeGap?: number;
+    lifelineWidth?: number;
+    arrowWidth?: number;
+    showLifeline?: boolean;
+    padding?: number;
+    arrowType?: 'arrow' | 'triangle';
+    showLaneHeader?: boolean;
+    laneHeaderHeight?: number;
+    edgeStyle?: 'solid' | 'dashed';
+    animated?: boolean;
+    edgeColorMode?: 'solid' | 'gradient';
+}
+export declare const SequenceInteractionFlow: ComponentType<SequenceInteractionProps>;