@antv/infographic 0.2.13 → 0.2.15

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',
@@ -149,6 +150,18 @@ const BUILT_IN_TEMPLATES = Object.assign(Object.assign(Object.assign(Object.assi
             structure: { type: 'relation-circle' },
             items: [{ type: 'icon-badge' }],
         },
+    }, 'relation-network-icon-badge': {
+        design: {
+            title: 'default',
+            structure: { type: 'relation-network' },
+            items: [{ type: 'icon-badge' }],
+        },
+    }, 'relation-network-simple-circle-node': {
+        design: {
+            title: 'default',
+            structure: { type: 'relation-network' },
+            items: [{ type: 'simple-circle-node' }],
+        },
     }, 'sequence-steps-badge-card': {
         design: {
             title: 'default',
@@ -306,6 +319,18 @@ const BUILT_IN_TEMPLATES = Object.assign(Object.assign(Object.assign(Object.assi
             structure: { type: 'list-sector', startAngle: -180, endAngle: 0 },
             items: [{ type: 'plain-text' }],
         },
+    }, 'list-waterfall-badge-card': {
+        design: {
+            title: 'default',
+            structure: { type: 'list-waterfall' },
+            items: [{ type: 'badge-card' }],
+        },
+    }, 'list-waterfall-compact-card': {
+        design: {
+            title: 'default',
+            structure: { type: 'list-waterfall' },
+            items: [{ type: 'compact-card' }],
+        },
     }, 'sequence-roadmap-vertical-plain-text': {
         design: {
             title: 'default',
@@ -626,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>;

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,26 +6,56 @@ 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");
-const is_browser_1 = require("./is-browser");
-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);
-let canvasContext = null;
+// 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() {
-    if (canvasContext)
+    if (typeof document === 'undefined')
+        return null;
+    if (canvasContext !== undefined)
         return canvasContext;
     const canvas = document.createElement('canvas');
     canvasContext = canvas.getContext('2d');
     return canvasContext;
 }
 function getMeasureSpan() {
+    if (typeof document === 'undefined')
+        return null;
     if (!document.body)
         return null;
     if (measureSpan)
@@ -83,6 +113,8 @@ function measureTextInBrowser(content, { fontFamily, fontSize, fontWeight, lineH
     span.style.lineHeight = `${lineHeightPx}px`;
     span.textContent = content;
     const rect = span.getBoundingClientRect();
+    if (content && rect.width <= 0 && rect.height <= 0)
+        return null;
     return { width: rect.width, height: rect.height };
 }
 function measureText(text = '', attrs) {
@@ -95,16 +127,15 @@ 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 metrics = (0, is_browser_1.isBrowser)()
-        ? ((_a = measureTextInBrowser(content, options)) !== null && _a !== void 0 ? _a : fallback())
-        : fallback();
+    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 {
         width: Math.ceil(metrics.width * FONT_EXTEND_FACTOR),

package/lib/utils/padding.d.ts

@@ -1,3 +1,4 @@
 import type { Padding, ParsedPadding } from '../types';
 export declare function parsePadding(padding: Padding | undefined): ParsedPadding;
 export declare function setSVGPadding(svg: SVGSVGElement, padding: ParsedPadding): void;
+export declare function getBoundViewBox(svg: SVGSVGElement, padding: ParsedPadding): string;

package/lib/utils/padding.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.parsePadding = parsePadding;
 exports.setSVGPadding = setSVGPadding;
+exports.getBoundViewBox = getBoundViewBox;
 const is_node_1 = require("./is-node");
 const svg_1 = require("./svg");
 const viewbox_1 = require("./viewbox");
@@ -65,7 +66,7 @@ function setSVGPaddingInNode(svg, padding) {
         viewBox: `${viewBox.x - left} ${viewBox.y - top} ${viewBox.width + left + right} ${viewBox.height + top + bottom}`,
     });
 }
-function setSVGPaddingInBrowser(svg, padding) {
+function getBoundViewBox(svg, padding) {
     const bbox = svg.getBBox();
     const clientRect = svg.getBoundingClientRect();
     const scaleX = clientRect.width > 0 ? bbox.width / clientRect.width : 1;
@@ -79,8 +80,12 @@ function setSVGPaddingInBrowser(svg, padding) {
     const newY = bbox.y - topSvg;
     const newWidth = bbox.width + leftSvg + rightSvg;
     const newHeight = bbox.height + topSvg + bottomSvg;
+    return `${newX} ${newY} ${newWidth} ${newHeight}`;
+}
+function setSVGPaddingInBrowser(svg, padding) {
+    const viewBox = getBoundViewBox(svg, padding);
     (0, svg_1.setAttributes)(svg, {
-        viewBox: `${newX} ${newY} ${newWidth} ${newHeight}`,
+        viewBox,
     });
 }
 function waitForLayout(element, callback) {

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.13";
+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.13';
+exports.VERSION = '0.2.15';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/infographic",
-  "version": "0.2.13",
+  "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);
         }