@knotx/render 0.0.3 → 0.0.5

package/dist/index.cjs

@@ -1,48 +1,440 @@
 'use strict';
 
 const jsxRuntime = require('@knotx/jsx/jsx-runtime');
+const core = require('@knotx/core');
+const BezierJS = require('bezier-js');
 
-function BezierEdge({
+function _interopNamespaceCompat(e) {
+  if (e && typeof e === 'object' && 'default' in e) return e;
+  const n = Object.create(null);
+  if (e) {
+    for (const k in e) {
+      n[k] = e[k];
+    }
+  }
+  n.default = e;
+  return n;
+}
+
+const BezierJS__namespace = /*#__PURE__*/_interopNamespaceCompat(BezierJS);
+
+var MarkerType = /* @__PURE__ */ ((MarkerType2) => {
+  MarkerType2["Arrow"] = "arrow";
+  MarkerType2["ArrowClosed"] = "arrowclosed";
+  return MarkerType2;
+})(MarkerType || {});
+function BaseEdge({
+  pathBuilder: PathBuilder,
   sourceX,
   sourceY,
   targetX,
   targetY,
-  edge: _edge
+  interactionWidth = 20,
+  label,
+  markerEnd,
+  markerStart
 }) {
-  let controlPoint1X;
-  let controlPoint1Y;
-  let controlPoint2X;
-  let controlPoint2Y;
-  {
-    const midX = (targetX - sourceX) / 2;
-    controlPoint1X = sourceX + midX;
-    controlPoint1Y = sourceY;
-    controlPoint2X = targetX - midX;
-    controlPoint2Y = targetY;
-  }
-  const path = `M ${sourceX} ${sourceY} C ${controlPoint1X} ${controlPoint1Y}, ${controlPoint2X} ${controlPoint2Y}, ${targetX} ${targetY}`;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "path",
-    {
-      d: path,
-      fill: "none",
-      stroke: "currentColor"
+  const path = new PathBuilder(sourceX, sourceY, targetX, targetY);
+  const pathString = path.buildPath();
+  const labelPosition = label ? path.interpolate(0.5) : void 0;
+  const getMarkerUrl = (marker) => {
+    if (!marker)
+      return void 0;
+    if (typeof marker === "string") {
+      return `url(#${marker})`;
     }
-  );
+    return `url(#${marker.id})`;
+  };
+  const markerEndUrl = getMarkerUrl(markerEnd);
+  const markerStartUrl = getMarkerUrl(markerStart);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "svg",
+      {
+        className: core.bem("edge", "wrapper"),
+        style: {
+          position: "absolute",
+          left: 0,
+          top: 0,
+          overflow: "visible",
+          pointerEvents: "none",
+          stroke: "currentColor"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
+            markerEnd && typeof markerEnd === "object" && /* @__PURE__ */ jsxRuntime.jsxs(
+              "marker",
+              {
+                id: markerEnd.id,
+                markerWidth: markerEnd.width || 10,
+                markerHeight: markerEnd.height || 10,
+                refX: markerEnd.width || 10,
+                refY: (markerEnd.height || 10) / 2,
+                markerUnits: markerEnd.markerUnits || "strokeWidth",
+                orient: markerEnd.orient || "auto",
+                children: [
+                  markerEnd.type === "arrow" /* Arrow */ && /* @__PURE__ */ jsxRuntime.jsx(
+                    "path",
+                    {
+                      d: "M 0 0 L 10 5 L 0 10",
+                      fill: "none",
+                      stroke: markerEnd.color || "currentColor",
+                      strokeWidth: markerEnd.strokeWidth || 1
+                    }
+                  ),
+                  markerEnd.type === "arrowclosed" /* ArrowClosed */ && /* @__PURE__ */ jsxRuntime.jsx(
+                    "path",
+                    {
+                      d: "M 0 0 L 10 5 L 0 10 z",
+                      fill: markerEnd.color || "currentColor",
+                      stroke: markerEnd.color || "currentColor",
+                      strokeWidth: markerEnd.strokeWidth || 1
+                    }
+                  ),
+                  markerEnd.type !== "arrow" /* Arrow */ && markerEnd.type !== "arrowclosed" /* ArrowClosed */ && /* @__PURE__ */ jsxRuntime.jsx(
+                    "path",
+                    {
+                      d: "M 0 0 L 10 5 L 0 10",
+                      fill: "none",
+                      stroke: markerEnd.color || "currentColor",
+                      strokeWidth: markerEnd.strokeWidth || 1
+                    }
+                  )
+                ]
+              }
+            ),
+            markerStart && typeof markerStart === "object" && /* @__PURE__ */ jsxRuntime.jsxs(
+              "marker",
+              {
+                id: markerStart.id,
+                markerWidth: markerStart.width || 10,
+                markerHeight: markerStart.height || 10,
+                refX: 0,
+                refY: (markerStart.height || 10) / 2,
+                markerUnits: markerStart.markerUnits || "strokeWidth",
+                orient: markerStart.orient || "auto",
+                children: [
+                  markerStart.type === "arrow" /* Arrow */ && /* @__PURE__ */ jsxRuntime.jsx(
+                    "path",
+                    {
+                      d: "M 10 0 L 0 5 L 10 10",
+                      fill: "none",
+                      stroke: markerStart.color || "currentColor",
+                      strokeWidth: markerStart.strokeWidth || 1
+                    }
+                  ),
+                  markerStart.type === "arrowclosed" /* ArrowClosed */ && /* @__PURE__ */ jsxRuntime.jsx(
+                    "path",
+                    {
+                      d: "M 10 0 L 0 5 L 10 10 z",
+                      fill: markerStart.color || "currentColor",
+                      stroke: markerStart.color || "currentColor",
+                      strokeWidth: markerStart.strokeWidth || 1
+                    }
+                  ),
+                  markerStart.type !== "arrow" /* Arrow */ && markerStart.type !== "arrowclosed" /* ArrowClosed */ && /* @__PURE__ */ jsxRuntime.jsx(
+                    "path",
+                    {
+                      d: "M 10 0 L 0 5 L 10 10",
+                      fill: "none",
+                      stroke: markerStart.color || "currentColor",
+                      strokeWidth: markerStart.strokeWidth || 1
+                    }
+                  )
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              d: pathString,
+              fill: "none",
+              className: core.bem("edge", "path"),
+              markerEnd: markerEndUrl,
+              markerStart: markerStartUrl
+            }
+          ),
+          interactionWidth && /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              d: pathString,
+              fill: "none",
+              strokeOpacity: 0,
+              strokeWidth: interactionWidth,
+              className: core.bem("edge", "interaction")
+            }
+          )
+        ]
+      }
+    ),
+    label && labelPosition && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          left: labelPosition.x,
+          top: labelPosition.y,
+          transform: "translate(-50%, -50%)"
+        },
+        children: label
+      }
+    )
+  ] });
+}
+
+var __defProp$3 = Object.defineProperty;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp$3(obj, key + "" , value);
+class PathBuilder {
+  constructor(sourceX, sourceY, targetX, targetY) {
+    this.sourceX = sourceX;
+    this.sourceY = sourceY;
+    this.targetX = targetX;
+    this.targetY = targetY;
+    this.sourceX = sourceX;
+    this.sourceY = sourceY;
+    this.targetX = targetX;
+    this.targetY = targetY;
+  }
+}
+class StraightPathBuilder extends PathBuilder {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "type", "straight");
+  }
+  buildPath() {
+    return `M ${this.sourceX} ${this.sourceY} L ${this.targetX} ${this.targetY}`;
+  }
+  interpolate(t) {
+    return { x: this.sourceX + t * (this.targetX - this.sourceX), y: this.sourceY + t * (this.targetY - this.sourceY) };
+  }
+}
+class BezierPathBuilder extends PathBuilder {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "type", "bezier");
+  }
+  getBezierInstance() {
+    const midX = (this.targetX - this.sourceX) / 2;
+    const controlPoint1X = this.sourceX + midX;
+    const controlPoint1Y = this.sourceY;
+    const controlPoint2X = this.targetX - midX;
+    const controlPoint2Y = this.targetY;
+    return new BezierJS__namespace.Bezier(
+      this.sourceX,
+      this.sourceY,
+      controlPoint1X,
+      controlPoint1Y,
+      controlPoint2X,
+      controlPoint2Y,
+      this.targetX,
+      this.targetY
+    );
+  }
+  buildPath() {
+    const bezier = this.getBezierInstance();
+    return bezier.toSVG();
+  }
+  interpolate(t) {
+    const bezier = this.getBezierInstance();
+    const point = bezier.get(t);
+    return { x: point.x, y: point.y };
+  }
 }
 
-function StraightEdge({ sourceX, sourceY, targetX, targetY }) {
+var __defProp$2 = Object.defineProperty;
+var __defProps$1 = Object.defineProperties;
+var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
+var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
+var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$2 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$2.call(b, prop))
+      __defNormalProp$2(a, prop, b[prop]);
+  if (__getOwnPropSymbols$2)
+    for (var prop of __getOwnPropSymbols$2(b)) {
+      if (__propIsEnum$2.call(b, prop))
+        __defNormalProp$2(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
+var __objRest$1 = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$2.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$2)
+    for (var prop of __getOwnPropSymbols$2(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$2.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function BezierEdge(_a) {
+  var _b = _a, {
+    edge: _edge
+  } = _b, rest = __objRest$1(_b, [
+    "edge"
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "line",
+    BaseEdge,
+    __spreadProps$1(__spreadValues$2({}, rest), {
+      pathBuilder: BezierPathBuilder
+    })
+  );
+}
+
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$1.call(b, prop))
+      __defNormalProp$1(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(b)) {
+      if (__propIsEnum$1.call(b, prop))
+        __defNormalProp$1(a, prop, b[prop]);
+    }
+  return a;
+};
+let markerCounter = 0;
+function getArrowMarker(color) {
+  const id = `arrow-${markerCounter++}`;
+  return {
+    id,
+    type: MarkerType.Arrow,
+    color,
+    width: 10,
+    height: 10
+  };
+}
+function getArrowClosedMarker(color) {
+  const id = `arrowclosed-${markerCounter++}`;
+  return {
+    id,
+    type: MarkerType.ArrowClosed,
+    color,
+    width: 10,
+    height: 10
+  };
+}
+function getCustomMarker(type, options = {}) {
+  const id = `custom-${type}-${markerCounter++}`;
+  return __spreadValues$1({
+    id,
+    type
+  }, options);
+}
+function getArrowHeadMarkers(color) {
+  const markerStart = getArrowClosedMarker(color);
+  const markerEnd = getArrowClosedMarker(color);
+  return {
+    markerStart,
+    markerEnd
+  };
+}
+function MarkerDefinitions({ markers }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("defs", { children: markers.map((marker) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "marker",
     {
-      x1: sourceX,
-      y1: sourceY,
-      x2: targetX,
-      y2: targetY,
-      stroke: "currentColor"
+      id: marker.id,
+      markerWidth: marker.width || 10,
+      markerHeight: marker.height || 10,
+      refX: marker.type.includes("start") ? 0 : marker.width || 10,
+      refY: (marker.height || 10) / 2,
+      markerUnits: marker.markerUnits || "strokeWidth",
+      orient: marker.orient || "auto",
+      children: [
+        marker.type === MarkerType.Arrow && /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: marker.type.includes("start") ? "M 10 0 L 0 5 L 10 10" : "M 0 0 L 10 5 L 0 10",
+            fill: "none",
+            stroke: marker.color || "currentColor",
+            strokeWidth: marker.strokeWidth || 1
+          }
+        ),
+        marker.type === MarkerType.ArrowClosed && /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: marker.type.includes("start") ? "M 10 0 L 0 5 L 10 10 z" : "M 0 0 L 10 5 L 0 10 z",
+            fill: marker.color || "currentColor",
+            stroke: marker.color || "currentColor",
+            strokeWidth: marker.strokeWidth || 1
+          }
+        ),
+        marker.type !== MarkerType.Arrow && marker.type !== MarkerType.ArrowClosed && /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: marker.type.includes("start") ? "M 10 0 L 0 5 L 10 10" : "M 0 0 L 10 5 L 0 10",
+            fill: "none",
+            stroke: marker.color || "currentColor",
+            strokeWidth: marker.strokeWidth || 1
+          }
+        )
+      ]
+    },
+    marker.id
+  )) });
+}
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
     }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function StraightEdge(_a) {
+  var _b = _a, {
+    edge: _edge
+  } = _b, rest = __objRest(_b, [
+    "edge"
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    BaseEdge,
+    __spreadProps(__spreadValues({}, rest), {
+      pathBuilder: StraightPathBuilder
+    })
   );
 }
 
 exports.BezierEdge = BezierEdge;
+exports.MarkerDefinitions = MarkerDefinitions;
+exports.MarkerType = MarkerType;
 exports.StraightEdge = StraightEdge;
+exports.getArrowClosedMarker = getArrowClosedMarker;
+exports.getArrowHeadMarkers = getArrowHeadMarkers;
+exports.getArrowMarker = getArrowMarker;
+exports.getCustomMarker = getCustomMarker;

package/dist/index.d.cts

@@ -1,10 +1,96 @@
 import { EdgeProps } from '@knotx/core';
 
-interface BezierEdgeOptions {
-    direction?: 'horizontal' | 'vertical';
+declare abstract class PathBuilder<TType extends string> {
+    readonly sourceX: number;
+    readonly sourceY: number;
+    readonly targetX: number;
+    readonly targetY: number;
+    constructor(sourceX: number, sourceY: number, targetX: number, targetY: number);
+    abstract type: TType;
+    /**
+     * Builds the svg string for the path.
+     */
+    abstract buildPath(): string;
+    /**
+     * Interpolates the position for the path at a given t value.
+     * @param t - The t value to interpolate at.
+     * @returns The interpolated position.
+     */
+    abstract interpolate(t: number): {
+        x: number;
+        y: number;
+    };
 }
-declare function BezierEdge({ sourceX, sourceY, targetX, targetY, edge: _edge, }: EdgeProps<BezierEdgeOptions>): JSX.Element;
+type PathBuilderType<T extends string = any> = new (...args: ConstructorParameters<typeof PathBuilder<T>>) => PathBuilder<T>;
 
-declare function StraightEdge({ sourceX, sourceY, targetX, targetY }: EdgeProps): JSX.Element;
+declare enum MarkerType {
+    Arrow = "arrow",
+    ArrowClosed = "arrowclosed"
+}
+interface MarkerProps {
+    id: string;
+    type: MarkerType | string;
+    color?: string;
+    width?: number;
+    height?: number;
+    markerUnits?: string;
+    orient?: string;
+    strokeWidth?: number;
+}
+interface BaseEdgeProps {
+    pathBuilder: PathBuilderType;
+    sourceX: number;
+    sourceY: number;
+    targetX: number;
+    targetY: number;
+    interactionWidth?: number;
+    label?: string;
+    markerEnd?: string | MarkerProps;
+    markerStart?: string | MarkerProps;
+}
+
+interface BezierEdgeOptions extends EdgeProps, Omit<BaseEdgeProps, 'pathBuilder'> {
+}
+declare function BezierEdge({ edge: _edge, ...rest }: BezierEdgeOptions): JSX.Element;
+
+/**
+ * 创建一个标准的箭头 marker
+ * @param color - marker 的颜色
+ * @returns marker 配置
+ */
+declare function getArrowMarker(color?: string): MarkerProps;
+/**
+ * 创建一个实心箭头 marker
+ * @param color - marker 的颜色
+ * @returns marker 配置
+ */
+declare function getArrowClosedMarker(color?: string): MarkerProps;
+/**
+ * 创建自定义 marker
+ * @param type - marker 类型
+ * @param options - marker 选项
+ * @returns marker 配置
+ */
+declare function getCustomMarker(type: string, options?: Omit<Partial<MarkerProps>, 'id' | 'type'>): MarkerProps;
+/**
+ * 创建两个实心箭头作为起点和终点的marker
+ * @param color - marker 的颜色
+ * @returns 包含开始和结束marker的对象
+ */
+declare function getArrowHeadMarkers(color?: string): {
+    markerStart: MarkerProps;
+    markerEnd: MarkerProps;
+};
+/**
+ * Marker 注册表组件，可以集中管理并重用 marker
+ */
+interface MarkerDefinitionsProps {
+    markers: MarkerProps[];
+}
+declare function MarkerDefinitions({ markers }: MarkerDefinitionsProps): JSX.Element;
+
+interface StraightEdgeOptions extends EdgeProps, Omit<BaseEdgeProps, 'pathBuilder'> {
+}
+declare function StraightEdge({ edge: _edge, ...rest }: StraightEdgeOptions): JSX.Element;
 
-export { BezierEdge, type BezierEdgeOptions, StraightEdge };
+export { BezierEdge, type BezierEdgeOptions, MarkerDefinitions, type MarkerDefinitionsProps, MarkerType, StraightEdge, type StraightEdgeOptions, getArrowClosedMarker, getArrowHeadMarkers, getArrowMarker, getCustomMarker };

package/dist/index.d.mts

@@ -1,10 +1,96 @@
 import { EdgeProps } from '@knotx/core';
 
-interface BezierEdgeOptions {
-    direction?: 'horizontal' | 'vertical';
+declare abstract class PathBuilder<TType extends string> {
+    readonly sourceX: number;
+    readonly sourceY: number;
+    readonly targetX: number;
+    readonly targetY: number;
+    constructor(sourceX: number, sourceY: number, targetX: number, targetY: number);
+    abstract type: TType;
+    /**
+     * Builds the svg string for the path.
+     */
+    abstract buildPath(): string;
+    /**
+     * Interpolates the position for the path at a given t value.
+     * @param t - The t value to interpolate at.
+     * @returns The interpolated position.
+     */
+    abstract interpolate(t: number): {
+        x: number;
+        y: number;
+    };
 }
-declare function BezierEdge({ sourceX, sourceY, targetX, targetY, edge: _edge, }: EdgeProps<BezierEdgeOptions>): JSX.Element;
+type PathBuilderType<T extends string = any> = new (...args: ConstructorParameters<typeof PathBuilder<T>>) => PathBuilder<T>;
 
-declare function StraightEdge({ sourceX, sourceY, targetX, targetY }: EdgeProps): JSX.Element;
+declare enum MarkerType {
+    Arrow = "arrow",
+    ArrowClosed = "arrowclosed"
+}
+interface MarkerProps {
+    id: string;
+    type: MarkerType | string;
+    color?: string;
+    width?: number;
+    height?: number;
+    markerUnits?: string;
+    orient?: string;
+    strokeWidth?: number;
+}
+interface BaseEdgeProps {
+    pathBuilder: PathBuilderType;
+    sourceX: number;
+    sourceY: number;
+    targetX: number;
+    targetY: number;
+    interactionWidth?: number;
+    label?: string;
+    markerEnd?: string | MarkerProps;
+    markerStart?: string | MarkerProps;
+}
+
+interface BezierEdgeOptions extends EdgeProps, Omit<BaseEdgeProps, 'pathBuilder'> {
+}
+declare function BezierEdge({ edge: _edge, ...rest }: BezierEdgeOptions): JSX.Element;
+
+/**
+ * 创建一个标准的箭头 marker
+ * @param color - marker 的颜色
+ * @returns marker 配置
+ */
+declare function getArrowMarker(color?: string): MarkerProps;
+/**
+ * 创建一个实心箭头 marker
+ * @param color - marker 的颜色
+ * @returns marker 配置
+ */
+declare function getArrowClosedMarker(color?: string): MarkerProps;
+/**
+ * 创建自定义 marker
+ * @param type - marker 类型
+ * @param options - marker 选项
+ * @returns marker 配置
+ */
+declare function getCustomMarker(type: string, options?: Omit<Partial<MarkerProps>, 'id' | 'type'>): MarkerProps;
+/**
+ * 创建两个实心箭头作为起点和终点的marker
+ * @param color - marker 的颜色
+ * @returns 包含开始和结束marker的对象
+ */
+declare function getArrowHeadMarkers(color?: string): {
+    markerStart: MarkerProps;
+    markerEnd: MarkerProps;
+};
+/**
+ * Marker 注册表组件，可以集中管理并重用 marker
+ */
+interface MarkerDefinitionsProps {
+    markers: MarkerProps[];
+}
+declare function MarkerDefinitions({ markers }: MarkerDefinitionsProps): JSX.Element;
+
+interface StraightEdgeOptions extends EdgeProps, Omit<BaseEdgeProps, 'pathBuilder'> {
+}
+declare function StraightEdge({ edge: _edge, ...rest }: StraightEdgeOptions): JSX.Element;
 
-export { BezierEdge, type BezierEdgeOptions, StraightEdge };
+export { BezierEdge, type BezierEdgeOptions, MarkerDefinitions, type MarkerDefinitionsProps, MarkerType, StraightEdge, type StraightEdgeOptions, getArrowClosedMarker, getArrowHeadMarkers, getArrowMarker, getCustomMarker };

package/dist/index.d.ts

@@ -1,10 +1,96 @@
 import { EdgeProps } from '@knotx/core';
 
-interface BezierEdgeOptions {
-    direction?: 'horizontal' | 'vertical';
+declare abstract class PathBuilder<TType extends string> {
+    readonly sourceX: number;
+    readonly sourceY: number;
+    readonly targetX: number;
+    readonly targetY: number;
+    constructor(sourceX: number, sourceY: number, targetX: number, targetY: number);
+    abstract type: TType;
+    /**
+     * Builds the svg string for the path.
+     */
+    abstract buildPath(): string;
+    /**
+     * Interpolates the position for the path at a given t value.
+     * @param t - The t value to interpolate at.
+     * @returns The interpolated position.
+     */
+    abstract interpolate(t: number): {
+        x: number;
+        y: number;
+    };
 }
-declare function BezierEdge({ sourceX, sourceY, targetX, targetY, edge: _edge, }: EdgeProps<BezierEdgeOptions>): JSX.Element;
+type PathBuilderType<T extends string = any> = new (...args: ConstructorParameters<typeof PathBuilder<T>>) => PathBuilder<T>;
 
-declare function StraightEdge({ sourceX, sourceY, targetX, targetY }: EdgeProps): JSX.Element;
+declare enum MarkerType {
+    Arrow = "arrow",
+    ArrowClosed = "arrowclosed"
+}
+interface MarkerProps {
+    id: string;
+    type: MarkerType | string;
+    color?: string;
+    width?: number;
+    height?: number;
+    markerUnits?: string;
+    orient?: string;
+    strokeWidth?: number;
+}
+interface BaseEdgeProps {
+    pathBuilder: PathBuilderType;
+    sourceX: number;
+    sourceY: number;
+    targetX: number;
+    targetY: number;
+    interactionWidth?: number;
+    label?: string;
+    markerEnd?: string | MarkerProps;
+    markerStart?: string | MarkerProps;
+}
+
+interface BezierEdgeOptions extends EdgeProps, Omit<BaseEdgeProps, 'pathBuilder'> {
+}
+declare function BezierEdge({ edge: _edge, ...rest }: BezierEdgeOptions): JSX.Element;
+
+/**
+ * 创建一个标准的箭头 marker
+ * @param color - marker 的颜色
+ * @returns marker 配置
+ */
+declare function getArrowMarker(color?: string): MarkerProps;
+/**
+ * 创建一个实心箭头 marker
+ * @param color - marker 的颜色
+ * @returns marker 配置
+ */
+declare function getArrowClosedMarker(color?: string): MarkerProps;
+/**
+ * 创建自定义 marker
+ * @param type - marker 类型
+ * @param options - marker 选项
+ * @returns marker 配置
+ */
+declare function getCustomMarker(type: string, options?: Omit<Partial<MarkerProps>, 'id' | 'type'>): MarkerProps;
+/**
+ * 创建两个实心箭头作为起点和终点的marker
+ * @param color - marker 的颜色
+ * @returns 包含开始和结束marker的对象
+ */
+declare function getArrowHeadMarkers(color?: string): {
+    markerStart: MarkerProps;
+    markerEnd: MarkerProps;
+};
+/**
+ * Marker 注册表组件，可以集中管理并重用 marker
+ */
+interface MarkerDefinitionsProps {
+    markers: MarkerProps[];
+}
+declare function MarkerDefinitions({ markers }: MarkerDefinitionsProps): JSX.Element;
+
+interface StraightEdgeOptions extends EdgeProps, Omit<BaseEdgeProps, 'pathBuilder'> {
+}
+declare function StraightEdge({ edge: _edge, ...rest }: StraightEdgeOptions): JSX.Element;
 
-export { BezierEdge, type BezierEdgeOptions, StraightEdge };
+export { BezierEdge, type BezierEdgeOptions, MarkerDefinitions, type MarkerDefinitionsProps, MarkerType, StraightEdge, type StraightEdgeOptions, getArrowClosedMarker, getArrowHeadMarkers, getArrowMarker, getCustomMarker };

package/dist/index.mjs

@@ -1,45 +1,417 @@
-import { jsx } from '@knotx/jsx/jsx-runtime';
+import { jsxs, Fragment, jsx } from '@knotx/jsx/jsx-runtime';
+import { bem } from '@knotx/core';
+import * as BezierJS from 'bezier-js';
 
-function BezierEdge({
+var MarkerType = /* @__PURE__ */ ((MarkerType2) => {
+  MarkerType2["Arrow"] = "arrow";
+  MarkerType2["ArrowClosed"] = "arrowclosed";
+  return MarkerType2;
+})(MarkerType || {});
+function BaseEdge({
+  pathBuilder: PathBuilder,
   sourceX,
   sourceY,
   targetX,
   targetY,
-  edge: _edge
+  interactionWidth = 20,
+  label,
+  markerEnd,
+  markerStart
 }) {
-  let controlPoint1X;
-  let controlPoint1Y;
-  let controlPoint2X;
-  let controlPoint2Y;
-  {
-    const midX = (targetX - sourceX) / 2;
-    controlPoint1X = sourceX + midX;
-    controlPoint1Y = sourceY;
-    controlPoint2X = targetX - midX;
-    controlPoint2Y = targetY;
-  }
-  const path = `M ${sourceX} ${sourceY} C ${controlPoint1X} ${controlPoint1Y}, ${controlPoint2X} ${controlPoint2Y}, ${targetX} ${targetY}`;
-  return /* @__PURE__ */ jsx(
-    "path",
-    {
-      d: path,
-      fill: "none",
-      stroke: "currentColor"
+  const path = new PathBuilder(sourceX, sourceY, targetX, targetY);
+  const pathString = path.buildPath();
+  const labelPosition = label ? path.interpolate(0.5) : void 0;
+  const getMarkerUrl = (marker) => {
+    if (!marker)
+      return void 0;
+    if (typeof marker === "string") {
+      return `url(#${marker})`;
     }
-  );
+    return `url(#${marker.id})`;
+  };
+  const markerEndUrl = getMarkerUrl(markerEnd);
+  const markerStartUrl = getMarkerUrl(markerStart);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        className: bem("edge", "wrapper"),
+        style: {
+          position: "absolute",
+          left: 0,
+          top: 0,
+          overflow: "visible",
+          pointerEvents: "none",
+          stroke: "currentColor"
+        },
+        children: [
+          /* @__PURE__ */ jsxs("defs", { children: [
+            markerEnd && typeof markerEnd === "object" && /* @__PURE__ */ jsxs(
+              "marker",
+              {
+                id: markerEnd.id,
+                markerWidth: markerEnd.width || 10,
+                markerHeight: markerEnd.height || 10,
+                refX: markerEnd.width || 10,
+                refY: (markerEnd.height || 10) / 2,
+                markerUnits: markerEnd.markerUnits || "strokeWidth",
+                orient: markerEnd.orient || "auto",
+                children: [
+                  markerEnd.type === "arrow" /* Arrow */ && /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: "M 0 0 L 10 5 L 0 10",
+                      fill: "none",
+                      stroke: markerEnd.color || "currentColor",
+                      strokeWidth: markerEnd.strokeWidth || 1
+                    }
+                  ),
+                  markerEnd.type === "arrowclosed" /* ArrowClosed */ && /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: "M 0 0 L 10 5 L 0 10 z",
+                      fill: markerEnd.color || "currentColor",
+                      stroke: markerEnd.color || "currentColor",
+                      strokeWidth: markerEnd.strokeWidth || 1
+                    }
+                  ),
+                  markerEnd.type !== "arrow" /* Arrow */ && markerEnd.type !== "arrowclosed" /* ArrowClosed */ && /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: "M 0 0 L 10 5 L 0 10",
+                      fill: "none",
+                      stroke: markerEnd.color || "currentColor",
+                      strokeWidth: markerEnd.strokeWidth || 1
+                    }
+                  )
+                ]
+              }
+            ),
+            markerStart && typeof markerStart === "object" && /* @__PURE__ */ jsxs(
+              "marker",
+              {
+                id: markerStart.id,
+                markerWidth: markerStart.width || 10,
+                markerHeight: markerStart.height || 10,
+                refX: 0,
+                refY: (markerStart.height || 10) / 2,
+                markerUnits: markerStart.markerUnits || "strokeWidth",
+                orient: markerStart.orient || "auto",
+                children: [
+                  markerStart.type === "arrow" /* Arrow */ && /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: "M 10 0 L 0 5 L 10 10",
+                      fill: "none",
+                      stroke: markerStart.color || "currentColor",
+                      strokeWidth: markerStart.strokeWidth || 1
+                    }
+                  ),
+                  markerStart.type === "arrowclosed" /* ArrowClosed */ && /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: "M 10 0 L 0 5 L 10 10 z",
+                      fill: markerStart.color || "currentColor",
+                      stroke: markerStart.color || "currentColor",
+                      strokeWidth: markerStart.strokeWidth || 1
+                    }
+                  ),
+                  markerStart.type !== "arrow" /* Arrow */ && markerStart.type !== "arrowclosed" /* ArrowClosed */ && /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: "M 10 0 L 0 5 L 10 10",
+                      fill: "none",
+                      stroke: markerStart.color || "currentColor",
+                      strokeWidth: markerStart.strokeWidth || 1
+                    }
+                  )
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: pathString,
+              fill: "none",
+              className: bem("edge", "path"),
+              markerEnd: markerEndUrl,
+              markerStart: markerStartUrl
+            }
+          ),
+          interactionWidth && /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: pathString,
+              fill: "none",
+              strokeOpacity: 0,
+              strokeWidth: interactionWidth,
+              className: bem("edge", "interaction")
+            }
+          )
+        ]
+      }
+    ),
+    label && labelPosition && /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          left: labelPosition.x,
+          top: labelPosition.y,
+          transform: "translate(-50%, -50%)"
+        },
+        children: label
+      }
+    )
+  ] });
+}
+
+var __defProp$3 = Object.defineProperty;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp$3(obj, key + "" , value);
+class PathBuilder {
+  constructor(sourceX, sourceY, targetX, targetY) {
+    this.sourceX = sourceX;
+    this.sourceY = sourceY;
+    this.targetX = targetX;
+    this.targetY = targetY;
+    this.sourceX = sourceX;
+    this.sourceY = sourceY;
+    this.targetX = targetX;
+    this.targetY = targetY;
+  }
+}
+class StraightPathBuilder extends PathBuilder {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "type", "straight");
+  }
+  buildPath() {
+    return `M ${this.sourceX} ${this.sourceY} L ${this.targetX} ${this.targetY}`;
+  }
+  interpolate(t) {
+    return { x: this.sourceX + t * (this.targetX - this.sourceX), y: this.sourceY + t * (this.targetY - this.sourceY) };
+  }
+}
+class BezierPathBuilder extends PathBuilder {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "type", "bezier");
+  }
+  getBezierInstance() {
+    const midX = (this.targetX - this.sourceX) / 2;
+    const controlPoint1X = this.sourceX + midX;
+    const controlPoint1Y = this.sourceY;
+    const controlPoint2X = this.targetX - midX;
+    const controlPoint2Y = this.targetY;
+    return new BezierJS.Bezier(
+      this.sourceX,
+      this.sourceY,
+      controlPoint1X,
+      controlPoint1Y,
+      controlPoint2X,
+      controlPoint2Y,
+      this.targetX,
+      this.targetY
+    );
+  }
+  buildPath() {
+    const bezier = this.getBezierInstance();
+    return bezier.toSVG();
+  }
+  interpolate(t) {
+    const bezier = this.getBezierInstance();
+    const point = bezier.get(t);
+    return { x: point.x, y: point.y };
+  }
 }
 
-function StraightEdge({ sourceX, sourceY, targetX, targetY }) {
+var __defProp$2 = Object.defineProperty;
+var __defProps$1 = Object.defineProperties;
+var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
+var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
+var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$2 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$2.call(b, prop))
+      __defNormalProp$2(a, prop, b[prop]);
+  if (__getOwnPropSymbols$2)
+    for (var prop of __getOwnPropSymbols$2(b)) {
+      if (__propIsEnum$2.call(b, prop))
+        __defNormalProp$2(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
+var __objRest$1 = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$2.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$2)
+    for (var prop of __getOwnPropSymbols$2(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$2.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function BezierEdge(_a) {
+  var _b = _a, {
+    edge: _edge
+  } = _b, rest = __objRest$1(_b, [
+    "edge"
+  ]);
   return /* @__PURE__ */ jsx(
-    "line",
+    BaseEdge,
+    __spreadProps$1(__spreadValues$2({}, rest), {
+      pathBuilder: BezierPathBuilder
+    })
+  );
+}
+
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$1.call(b, prop))
+      __defNormalProp$1(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(b)) {
+      if (__propIsEnum$1.call(b, prop))
+        __defNormalProp$1(a, prop, b[prop]);
+    }
+  return a;
+};
+let markerCounter = 0;
+function getArrowMarker(color) {
+  const id = `arrow-${markerCounter++}`;
+  return {
+    id,
+    type: MarkerType.Arrow,
+    color,
+    width: 10,
+    height: 10
+  };
+}
+function getArrowClosedMarker(color) {
+  const id = `arrowclosed-${markerCounter++}`;
+  return {
+    id,
+    type: MarkerType.ArrowClosed,
+    color,
+    width: 10,
+    height: 10
+  };
+}
+function getCustomMarker(type, options = {}) {
+  const id = `custom-${type}-${markerCounter++}`;
+  return __spreadValues$1({
+    id,
+    type
+  }, options);
+}
+function getArrowHeadMarkers(color) {
+  const markerStart = getArrowClosedMarker(color);
+  const markerEnd = getArrowClosedMarker(color);
+  return {
+    markerStart,
+    markerEnd
+  };
+}
+function MarkerDefinitions({ markers }) {
+  return /* @__PURE__ */ jsx("defs", { children: markers.map((marker) => /* @__PURE__ */ jsxs(
+    "marker",
     {
-      x1: sourceX,
-      y1: sourceY,
-      x2: targetX,
-      y2: targetY,
-      stroke: "currentColor"
+      id: marker.id,
+      markerWidth: marker.width || 10,
+      markerHeight: marker.height || 10,
+      refX: marker.type.includes("start") ? 0 : marker.width || 10,
+      refY: (marker.height || 10) / 2,
+      markerUnits: marker.markerUnits || "strokeWidth",
+      orient: marker.orient || "auto",
+      children: [
+        marker.type === MarkerType.Arrow && /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: marker.type.includes("start") ? "M 10 0 L 0 5 L 10 10" : "M 0 0 L 10 5 L 0 10",
+            fill: "none",
+            stroke: marker.color || "currentColor",
+            strokeWidth: marker.strokeWidth || 1
+          }
+        ),
+        marker.type === MarkerType.ArrowClosed && /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: marker.type.includes("start") ? "M 10 0 L 0 5 L 10 10 z" : "M 0 0 L 10 5 L 0 10 z",
+            fill: marker.color || "currentColor",
+            stroke: marker.color || "currentColor",
+            strokeWidth: marker.strokeWidth || 1
+          }
+        ),
+        marker.type !== MarkerType.Arrow && marker.type !== MarkerType.ArrowClosed && /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: marker.type.includes("start") ? "M 10 0 L 0 5 L 10 10" : "M 0 0 L 10 5 L 0 10",
+            fill: "none",
+            stroke: marker.color || "currentColor",
+            strokeWidth: marker.strokeWidth || 1
+          }
+        )
+      ]
+    },
+    marker.id
+  )) });
+}
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
     }
+  return target;
+};
+function StraightEdge(_a) {
+  var _b = _a, {
+    edge: _edge
+  } = _b, rest = __objRest(_b, [
+    "edge"
+  ]);
+  return /* @__PURE__ */ jsx(
+    BaseEdge,
+    __spreadProps(__spreadValues({}, rest), {
+      pathBuilder: StraightPathBuilder
+    })
   );
 }
 
-export { BezierEdge, StraightEdge };
+export { BezierEdge, MarkerDefinitions, MarkerType, StraightEdge, getArrowClosedMarker, getArrowHeadMarkers, getArrowMarker, getCustomMarker };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@knotx/render",
   "type": "module",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "Render for Knotx",
   "author": "boenfu",
   "license": "MIT",
@@ -12,8 +12,7 @@
     "directory": "packages/data"
   },
   "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
+    "access": "public"
   },
   "sideEffects": false,
   "exports": {
@@ -30,13 +29,15 @@
     "dist"
   ],
   "dependencies": {
-    "@knotx/core": "0.0.3"
+    "bezier-js": "^6.1.4",
+    "@knotx/core": "0.0.5"
   },
   "devDependencies": {
-    "@knotx/eslint-config": "0.0.3",
-    "@knotx/build-config": "0.0.3",
-    "@knotx/jsx": "0.0.3",
-    "@knotx/typescript-config": "0.0.3"
+    "@types/bezier-js": "^4.1.3",
+    "@knotx/build-config": "0.0.5",
+    "@knotx/eslint-config": "0.0.5",
+    "@knotx/jsx": "0.0.5",
+    "@knotx/typescript-config": "0.0.5"
   },
   "scripts": {
     "build": "unbuild --failOnWarn=false",