@antv/infographic 0.2.14 → 0.2.15

package/lib/designs/utils/geometry.js

@@ -0,0 +1,256 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getEdgePathD = exports.getLabelPosition = exports.getPointAtT = exports.getTangentAngle = exports.getNodesAnchors = exports.createArrowElements = exports.createRoundedPath = exports.createStraightPath = exports.getMidPoint = void 0;
+const jsx_runtime_1 = require("@antv/infographic/jsx-runtime");
+const jsx_1 = require("../../jsx");
+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)];
+};
+exports.getMidPoint = getMidPoint;
+const createStraightPath = (points, dx, dy) => points
+    .map(([x, y], index) => {
+    const prefix = index === 0 ? 'M' : 'L';
+    return `${prefix} ${x + dx} ${y + dy}`;
+})
+    .join(' ');
+exports.createStraightPath = createStraightPath;
+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(' ');
+};
+exports.createRoundedPath = createRoundedPath;
+const createArrowElements = (x, y, angle, type, fillColor, edgeWidth, arrowSize) => {
+    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) }),
+    ];
+};
+exports.createArrowElements = createArrowElements;
+// LT: Left Top (radio), LC: Left Center (1/2), LB: Left Bottom (1 - radio)
+// RT: Right Top (radio), RC: Right Center (1/2), RB: Right Bottom (1 - radio)
+const getNodesAnchors = (node) => {
+    const { x, y, width, height, radio = 0.25 } = node;
+    const q1H = height * radio;
+    const halfH = height * 0.5;
+    const q3H = height * (1 - radio);
+    return {
+        LT: { x, y: y + q1H },
+        LC: { x, y: y + halfH },
+        LB: { x, y: y + q3H },
+        RT: { x: x + width, y: y + q1H },
+        RC: { x: x + width, y: y + halfH },
+        RB: { x: x + width, y: y + q3H },
+    };
+};
+exports.getNodesAnchors = getNodesAnchors;
+const getTangentAngle = (points, t) => {
+    const len = points.length;
+    // Cubic Bezier (Self loop)
+    if (len === 4) {
+        const p0 = points[0], p1 = points[1], p2 = points[2], p3 = points[3];
+        if (t === 0) {
+            return Math.atan2(p1[1] - p0[1], p1[0] - p0[0]);
+        }
+        else {
+            return Math.atan2(p3[1] - p2[1], p3[0] - p2[0]);
+        }
+    }
+    // Quad Bezier (Curved)
+    if (len === 3) {
+        const p0 = points[0], p1 = points[1], p2 = points[2];
+        if (t === 0) {
+            return Math.atan2(p1[1] - p0[1], p1[0] - p0[0]);
+        }
+        else {
+            return Math.atan2(p2[1] - p1[1], p2[0] - p1[0]);
+        }
+    }
+    // Line
+    if (len === 2) {
+        const p0 = points[0], p1 = points[1];
+        const angle = Math.atan2(p1[1] - p0[1], p1[0] - p0[0]);
+        return angle;
+    }
+    return 0;
+};
+exports.getTangentAngle = getTangentAngle;
+/**
+ * 计算贝塞尔曲线上任意 t (0-1) 位置的点
+ */
+const getPointAtT = (points, t = 0.5) => {
+    const len = points.length;
+    if (len === 4) {
+        const [p0, p1, p2, p3] = points;
+        const mt = 1 - t;
+        // B(t) = (1-t)^3*P0 + 3(1-t)^2*t*P1 + 3(1-t)*t^2*P2 + t^3*P3
+        return [
+            Math.pow(mt, 3) * p0[0] +
+                3 * Math.pow(mt, 2) * t * p1[0] +
+                3 * mt * Math.pow(t, 2) * p2[0] +
+                Math.pow(t, 3) * p3[0],
+            Math.pow(mt, 3) * p0[1] +
+                3 * Math.pow(mt, 2) * t * p1[1] +
+                3 * mt * Math.pow(t, 2) * p2[1] +
+                Math.pow(t, 3) * p3[1],
+        ];
+    }
+    if (len === 3) {
+        const [p0, p1, p2] = points;
+        const mt = 1 - t;
+        // B(t) = (1-t)^2*P0 + 2(1-t)*t*P1 + t^2*P2
+        return [
+            Math.pow(mt, 2) * p0[0] + 2 * mt * t * p1[0] + Math.pow(t, 2) * p2[0],
+            Math.pow(mt, 2) * p0[1] + 2 * mt * t * p1[1] + Math.pow(t, 2) * p2[1],
+        ];
+    }
+    if (len === 2) {
+        const [p0, p1] = points;
+        return [p0[0] + (p1[0] - p0[0]) * t, p0[1] + (p1[1] - p0[1]) * t];
+    }
+    return points[0] || [0, 0];
+};
+exports.getPointAtT = getPointAtT;
+const getLabelPosition = (points, selfLoopOffset = 10) => {
+    const len = points.length;
+    // 默认取中点
+    const labelPoint = (0, exports.getPointAtT)(points);
+    if (len === 4) {
+        // 针对自连接(len=4)的特殊偏移处理
+        labelPoint[0] += selfLoopOffset;
+    }
+    return labelPoint;
+};
+exports.getLabelPosition = getLabelPosition;
+const getEdgePathD = (points) => {
+    const len = points.length;
+    if (len === 4) {
+        const [p0, p1, p2, p3] = points;
+        return `M ${p0[0]} ${p0[1]} C ${p1[0]} ${p1[1]} ${p2[0]} ${p2[1]} ${p3[0]} ${p3[1]}`;
+    }
+    if (len === 3) {
+        const [p0, p1, p2] = points;
+        return `M ${p0[0]} ${p0[1]} Q ${p1[0]} ${p1[1]} ${p2[0]} ${p2[1]}`;
+    }
+    if (len === 2) {
+        const [p0, p1] = points;
+        return `M ${p0[0]} ${p0[1]} L ${p1[0]} ${p1[1]}`;
+    }
+    return '';
+};
+exports.getEdgePathD = getEdgePathD;

package/lib/designs/utils/index.d.ts

@@ -1,4 +1,5 @@
 export * from './color';
+export * from './geometry';
 export * from './hierarchy-color';
 export * from './item';
 export * from './normalize-percent';

package/lib/designs/utils/index.js

@@ -15,6 +15,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./color"), exports);
+__exportStar(require("./geometry"), exports);
 __exportStar(require("./hierarchy-color"), exports);
 __exportStar(require("./item"), exports);
 __exportStar(require("./normalize-percent"), exports);

package/lib/editor/managers/sync-registry.d.ts

@@ -1,3 +1,4 @@
+import type { InfographicOptionPath } from '../../options';
 import { ISyncRegistry, SyncHandler } from '../types';
 type OptionsGetter = () => any;
 export declare class SyncRegistry implements ISyncRegistry {
@@ -6,7 +7,7 @@ export declare class SyncRegistry implements ISyncRegistry {
     private isDispatching;
     private isDestroyed;
     constructor(getOptions: OptionsGetter);
-    register(path: string, handler: SyncHandler, options?: {
+    register(path: InfographicOptionPath | (string & {}), handler: SyncHandler, options?: {
         immediate?: boolean;
     }): () => void;
     trigger(path: string, newVal: any, oldVal: any): void;

package/lib/editor/types/editor.d.ts

@@ -1,3 +1,4 @@
+import type { InfographicOptionPath } from '../../options';
 import type { ICommandManager } from './command';
 import type { IInteractionManager } from './interaction';
 import type { IPluginManager } from './plugin';
@@ -10,7 +11,7 @@ export interface IEditor {
     state: IStateManager;
     syncRegistry: ISyncRegistry;
     getDocument(): SVGSVGElement;
-    registerSync(path: string, handler: SyncHandler, options?: {
+    registerSync(path: InfographicOptionPath | (string & {}), handler: SyncHandler, options?: {
         immediate?: boolean;
     }): () => void;
     destroy(): void;

package/lib/editor/types/sync.d.ts

@@ -1,3 +1,4 @@
+import type { InfographicOptionPath } from '../../options';
 /**
  * Sync callback
  * @param newValue The new value after modification
@@ -12,7 +13,7 @@ export interface ISyncRegistry {
      * @param options.immediate Whether to execute immediately (used for view initialization)
      * @returns unregister function
      */
-    register(path: string, handler: SyncHandler, options?: {
+    register(path: InfographicOptionPath | (string & {}), handler: SyncHandler, options?: {
         immediate?: boolean;
     }): () => void;
     /**

package/lib/editor/utils/object.js

@@ -12,62 +12,69 @@ const lodash_es_1 = require("lodash-es");
  */
 function applyOptionUpdates(target, source, basePath = '', options) {
     const { bubbleUp = false, collector } = options !== null && options !== void 0 ? options : {};
-    // Set to store unique parent paths that need notification
-    const parentPathsToNotify = new Set();
-    applyOptionUpdatesInternal(target, source, basePath, collector, bubbleUp, parentPathsToNotify);
-    // Bubbling notification: from the deepest parent path to the shallowest
-    if (bubbleUp && collector && parentPathsToNotify.size > 0) {
-        // Sort by path depth in descending order (deepest first)
-        const sortedPaths = Array.from(parentPathsToNotify).sort((a, b) => {
-            const depthA = a === '' ? 0 : a.split('.').length;
-            const depthB = b === '' ? 0 : b.split('.').length;
-            return depthB - depthA;
-        });
-        for (const parentPath of sortedPaths) {
-            const newVal = parentPath ? (0, lodash_es_1.get)(target, parentPath) : target;
-            // For parent paths, we provide the cloned new value.
-            // oldVal is passed as undefined as tracking branch node state is complex.
-            collector(parentPath, (0, lodash_es_1.cloneDeep)(newVal), undefined);
-        }
+    const hasChange = applyOptionUpdatesInternal(target, source, basePath, collector, bubbleUp);
+    if (basePath === '' && hasChange && bubbleUp && collector) {
+        collector('', (0, lodash_es_1.cloneDeep)(target), undefined);
     }
 }
-function applyOptionUpdatesInternal(target, source, basePath, collector, bubbleUp, parentPathsToNotify) {
+/**
+ * Internal recursive function.
+ * Returns true if any change occurred within this branch (or its children).
+ */
+function applyOptionUpdatesInternal(target, source, basePath, collector, bubbleUp) {
+    let hasChange = false;
     Object.keys(source).forEach((key) => {
+        if (key === '__proto__' || key === 'constructor' || key === 'prototype') {
+            return;
+        }
         const fullPath = basePath ? `${basePath}.${key}` : key;
         const updateValue = source[key];
         const oldValue = target[key];
+        let childChanged = false;
         if (updateValue === undefined) {
-            delete target[key];
-            collector === null || collector === void 0 ? void 0 : collector(fullPath, undefined, oldValue);
-            if (bubbleUp)
-                collectParentPaths(basePath, parentPathsToNotify);
+            // Handle deletion: Only delete and notify if the key actually exists
+            if (key in target) {
+                delete target[key];
+                collector === null || collector === void 0 ? void 0 : collector(fullPath, undefined, oldValue);
+                childChanged = true;
+            }
         }
         else if ((0, lodash_es_1.isPlainObject)(updateValue)) {
-            if (!(0, lodash_es_1.isPlainObject)(target[key])) {
+            // Handle nested object
+            const oldValueIsObject = (0, lodash_es_1.isPlainObject)(target[key]);
+            if (!oldValueIsObject) {
                 target[key] = {};
             }
-            applyOptionUpdatesInternal(target[key], updateValue, fullPath, collector, bubbleUp, parentPathsToNotify);
+            const grandChildChanged = applyOptionUpdatesInternal(target[key], updateValue, fullPath, collector, bubbleUp);
+            if (!oldValueIsObject) {
+                // Overwriting a primitive with an object is always a change.
+                childChanged = true;
+                // If the object was empty (grandChildChanged is false), we still need to report it.
+                if (!grandChildChanged) {
+                    collector === null || collector === void 0 ? void 0 : collector(fullPath, target[key], oldValue);
+                }
+            }
+            else {
+                childChanged = grandChildChanged;
+            }
         }
         else {
+            // Handle primitive update
             target[key] = updateValue;
             if (!(0, lodash_es_1.isEqual)(updateValue, oldValue)) {
                 collector === null || collector === void 0 ? void 0 : collector(fullPath, updateValue, oldValue);
-                if (bubbleUp)
-                    collectParentPaths(basePath, parentPathsToNotify);
+                childChanged = true;
             }
         }
+        if (childChanged) {
+            hasChange = true;
+        }
     });
-}
-/**
- * Collects all parent paths of a given path and adds them to the provided set.
- */
-function collectParentPaths(path, set) {
-    if (!path) {
-        set.add(''); // Root path
-        return;
-    }
-    const parts = path.split('.');
-    for (let i = parts.length; i >= 0; i--) {
-        set.add(parts.slice(0, i).join('.'));
+    // Bubbling: Notify if any child changed in this branch
+    // The recursion naturally ensures this happens in "deepest-first" (post-order) sequence.
+    if (hasChange && bubbleUp && basePath !== '') {
+        // Current target is now fully updated for this scope.
+        collector === null || collector === void 0 ? void 0 : collector(basePath, (0, lodash_es_1.cloneDeep)(target), undefined);
     }
+    return hasChange;
 }

package/lib/options/types.d.ts

@@ -2,6 +2,7 @@ import type { DesignOptions, ParsedDesignsOptions } from '../designs';
 import type { ElementProps, IInteraction, IPlugin } from '../editor';
 import type { ThemeConfig } from '../themes';
 import type { Data, Padding, ParsedData } from '../types';
+import type { Path } from '../utils';
 export interface InfographicOptions {
     /** 容器，可以是选择器或者 HTMLElement */
     container?: string | HTMLElement;
@@ -58,4 +59,9 @@ interface SVGOptions {
     /** 是否启用背景 */
     background?: boolean;
 }
+/**
+ * All valid property paths for Infographic Options.
+ * Use this to validate paths in SyncRegistry and other places.
+ */
+export type InfographicOptionPath = Path<UpdatableInfographicOptions>;
 export {};

package/lib/runtime/Infographic.js

@@ -105,18 +105,31 @@ class Infographic {
      * Compose the SVG template
      */
     compose(parsedOptions) {
-        const { design, data } = parsedOptions;
+        var _a, _b;
+        const { design, data, themeConfig } = parsedOptions;
         const { title, item, items, structure } = design;
         const { component: Structure, props: structureProps } = structure;
         const Title = title.component;
         const Item = item.component;
         const Items = items.map((it) => it.component);
-        const svg = (0, jsx_1.renderSVG)((0, jsx_runtime_1.jsx)(Structure, Object.assign({ data: data, Title: Title, Item: Item, Items: Items, options: parsedOptions }, structureProps)));
-        const template = (0, utils_1.parseSVG)(svg);
-        if (!template) {
-            throw new Error('Failed to parse SVG template');
+        // Apply theme font-family before measurement so measureText uses the correct font
+        const themeFontFamily = (_b = (_a = themeConfig === null || themeConfig === void 0 ? void 0 : themeConfig.base) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b['font-family'];
+        const previousDefaultFont = renderer_1.DEFAULT_FONT;
+        if (themeFontFamily)
+            (0, renderer_1.setDefaultFont)(themeFontFamily);
+        try {
+            const svg = (0, jsx_1.renderSVG)((0, jsx_runtime_1.jsx)(Structure, Object.assign({ data: data, Title: Title, Item: Item, Items: Items, options: parsedOptions }, structureProps)));
+            const template = (0, utils_1.parseSVG)(svg);
+            if (!template) {
+                throw new Error('Failed to parse SVG template');
+            }
+            return template;
+        }
+        finally {
+            // Restore previous default font
+            if (themeFontFamily)
+                (0, renderer_1.setDefaultFont)(previousDefaultFont);
         }
-        return template;
     }
     getTypes() {
         const parsedOptions = this.parsedOptions;

package/lib/syntax/index.js

@@ -114,27 +114,47 @@ 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 : {});
-                const existingItems = Array.isArray(current.items)
-                    ? current.items
-                    : [];
-                const normalizedItems = normalizeItems(existingItems);
-                const itemMap = new Map();
-                normalizedItems.forEach((item) => {
-                    if (item.id)
-                        itemMap.set(item.id, item);
-                });
-                parsed.items.forEach((item) => {
-                    const existing = itemMap.get(item.id);
-                    if (existing) {
-                        if (!existing.label && item.label)
-                            existing.label = item.label;
+                // 优先使用已存在的数据列表 (sequences, lists, etc.)
+                const dataKeys = Object.keys(schema_1.DataSchema.fields).filter((key) => key !== 'items' && key !== 'relations');
+                let hasStructuredData = false;
+                // 尝试找到一个非空的数据源
+                for (const key of dataKeys) {
+                    if (Array.isArray(current[key]) && current[key].length > 0) {
+                        hasStructuredData = true;
+                        break;
                     }
-                    else {
-                        normalizedItems.push(item);
-                        itemMap.set(item.id, item);
-                    }
-                });
-                current.items = normalizedItems;
+                }
+                // 如果 items 已包含层级结构数据（带 children），也视为结构化数据
+                if (!hasStructuredData &&
+                    Array.isArray(current.items) &&
+                    current.items.length > 0 &&
+                    current.items.some((item) => Array.isArray(item.children) && item.children.length > 0)) {
+                    hasStructuredData = true;
+                }
+                // 如果没有找到其他数据源，才尝试合并 items
+                if (!hasStructuredData) {
+                    const existingItems = Array.isArray(current.items)
+                        ? current.items
+                        : [];
+                    const normalizedItems = normalizeItems(existingItems);
+                    const itemMap = new Map();
+                    normalizedItems.forEach((item) => {
+                        if (item.id)
+                            itemMap.set(item.id, item);
+                    });
+                    parsed.items.forEach((item) => {
+                        const existing = itemMap.get(item.id);
+                        if (existing) {
+                            if (!existing.label && item.label)
+                                existing.label = item.label;
+                        }
+                        else {
+                            normalizedItems.push(item);
+                            itemMap.set(item.id, item);
+                        }
+                    });
+                    current.items = normalizedItems;
+                }
                 current.relations = parsed.relations;
                 options.data = current;
             }

package/lib/syntax/relations.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.parseRelationsNode = parseRelationsNode;
 const mapper_1 = require("./mapper");
 const schema_1 = require("./schema");
-const RELATION_TOKEN = /[<>=o.x-]{2,}/;
-const ARROW_TOKEN = /[<>=o.x-]{2,}/g;
+const RELATION_TOKEN = /(?:[<>o.x-]{2,}|[<>=]{2,})/;
+const ARROW_TOKEN = /(?:[<>o.x-]{2,}|[<>=]{2,})/g;
 function normalizeLabel(text) {
     let label = text.trim();
     if (!label)
@@ -106,6 +106,30 @@ function readEdge(text, startIndex) {
     let label = labelPrefix || undefined;
     let directionToken = arrowToken;
     let index = arrowEnd;
+    // Detect split bidirectional arrow pattern: <- label ->
+    {
+        const leftHasLeft = directionToken.includes('<');
+        const leftHasRight = directionToken.includes('>');
+        if (leftHasLeft && !leftHasRight) {
+            const lookahead = new RegExp(ARROW_TOKEN.source, 'g');
+            lookahead.lastIndex = arrowEnd;
+            const rightMatch = lookahead.exec(text);
+            if (rightMatch &&
+                rightMatch[0].includes('>') &&
+                !rightMatch[0].includes('<')) {
+                const middleText = text.slice(arrowEnd, rightMatch.index).trim();
+                if (middleText) {
+                    const splitLabel = normalizeLabel(middleText);
+                    return {
+                        label: splitLabel || label,
+                        direction: 'both',
+                        reverse: false,
+                        nextIndex: rightMatch.index + rightMatch[0].length,
+                    };
+                }
+            }
+        }
+    }
     index = skipSpaces(text, index);
     if (text[index] === '|') {
         const pipeEnd = text.indexOf('|', index + 1);

package/lib/syntax/schema.js

@@ -53,6 +53,7 @@ exports.RelationSchema = object({
     direction: enumOf(['forward', 'both', 'none']),
     showArrow: enumOf(['true', 'false']),
     arrowType: enumOf(['arrow', 'triangle', 'diamond']),
+    lineStyle: enumOf(['solid', 'dashed']),
 }, { allowUnknown: true });
 exports.ThemeSchema = object({
     type: string(),

package/lib/templates/built-in.js

@@ -8,9 +8,10 @@ const hierarchy_tree_1 = require("./hierarchy-tree");
 const list_zigzag_1 = require("./list-zigzag");
 const registry_1 = require("./registry");
 const relation_dagre_flow_1 = require("./relation-dagre-flow");
+const sequence_interaction_1 = require("./sequence-interaction");
 const sequence_stairs_1 = require("./sequence-stairs");
 const word_cloud_1 = require("./word-cloud");
-const BUILT_IN_TEMPLATES = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ 'compare-hierarchy-left-right-circle-node-pill-badge': {
+const BUILT_IN_TEMPLATES = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ 'compare-hierarchy-left-right-circle-node-pill-badge': {
         design: {
             structure: {
                 type: 'compare-hierarchy-left-right',
@@ -650,7 +651,7 @@ const BUILT_IN_TEMPLATES = Object.assign(Object.assign(Object.assign(Object.assi
                 },
             ],
         },
-    } }, chart_pie_1.chartPieTemplates), compare_quadrant_1.compareQuadrantTemplates), hierarchy_tree_1.hierarchyTreeTemplates), hierarchy_mindmap_1.hierarchyMindmapTemplates), sequence_stairs_1.sequenceStairsTemplates), word_cloud_1.wordCloudTemplate), list_zigzag_1.listZigzagTemplates), relation_dagre_flow_1.relationDagreFlowTemplates), hierarchy_structure_1.hierarchyStructureTemplates);
+    } }, chart_pie_1.chartPieTemplates), compare_quadrant_1.compareQuadrantTemplates), hierarchy_tree_1.hierarchyTreeTemplates), hierarchy_mindmap_1.hierarchyMindmapTemplates), sequence_stairs_1.sequenceStairsTemplates), word_cloud_1.wordCloudTemplate), list_zigzag_1.listZigzagTemplates), relation_dagre_flow_1.relationDagreFlowTemplates), sequence_interaction_1.sequenceInteractionTemplates), hierarchy_structure_1.hierarchyStructureTemplates);
 Object.entries(BUILT_IN_TEMPLATES).forEach(([name, options]) => {
     (0, registry_1.registerTemplate)(name, options);
 });

package/lib/templates/sequence-interaction.d.ts

@@ -0,0 +1,2 @@
+import type { TemplateOptions } from './types';
+export declare const sequenceInteractionTemplates: Record<string, TemplateOptions>;