@knotx/render 0.0.6 → 0.0.8

package/dist/index.cjs

@@ -18,6 +18,25 @@ function _interopNamespaceCompat(e) {
 
 const BezierJS__namespace = /*#__PURE__*/_interopNamespaceCompat(BezierJS);
 
+var __defProp$4 = Object.defineProperty;
+var __defProps$2 = Object.defineProperties;
+var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
+var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
+var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$3 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$3.call(b, prop))
+      __defNormalProp$4(a, prop, b[prop]);
+  if (__getOwnPropSymbols$3)
+    for (var prop of __getOwnPropSymbols$3(b)) {
+      if (__propIsEnum$3.call(b, prop))
+        __defNormalProp$4(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
 var MarkerType = /* @__PURE__ */ ((MarkerType2) => {
   MarkerType2["Arrow"] = "arrow";
   MarkerType2["ArrowClosed"] = "arrowclosed";
@@ -29,14 +48,18 @@ function BaseEdge({
   sourceY,
   targetX,
   targetY,
+  edge,
+  className,
+  style,
   interactionWidth = 20,
   label,
   markerEnd,
-  markerStart
+  markerStart,
+  context
 }) {
   const path = new PathBuilder(sourceX, sourceY, targetX, targetY);
-  const pathString = path.buildPath();
-  const labelPosition = label ? path.interpolate(0.5) : void 0;
+  const pathString = path.buildPath(context);
+  const labelPosition = label ? path.interpolate(0.5, context) : void 0;
   const getMarkerUrl = (marker) => {
     if (!marker)
       return void 0;
@@ -50,18 +73,22 @@ function BaseEdge({
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "svg",
-      {
-        className: core.bem("edge", "wrapper"),
-        style: {
+      __spreadProps$2(__spreadValues$3({
+        className: `${core.bem("edge", "wrapper")}${className ? ` ${className}` : ""}`,
+        style: __spreadValues$3({
           position: "absolute",
           left: 0,
           top: 0,
           overflow: "visible",
           pointerEvents: "none",
           stroke: "currentColor"
-        },
+        }, style)
+      }, edge ? {
+        "data-edge-source": edge.source,
+        "data-edge-target": edge.target
+      } : {}), {
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
+          Boolean(markerEnd || markerStart) && /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
             markerEnd && typeof markerEnd === "object" && /* @__PURE__ */ jsxRuntime.jsxs(
               "marker",
               {
@@ -166,7 +193,7 @@ function BaseEdge({
             }
           )
         ]
-      }
+      })
     ),
     label && labelPosition && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -185,17 +212,13 @@ function BaseEdge({
 
 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);
+var __publicField = (obj, key, value) => __defNormalProp$3(obj, typeof key !== "symbol" ? key + "" : 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 {
@@ -214,33 +237,37 @@ 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
-    );
+    __publicField(this, "bezier");
   }
   buildPath() {
-    const bezier = this.getBezierInstance();
+    const bezier = this.requireBezierInstance();
     return bezier.toSVG();
   }
   interpolate(t) {
-    const bezier = this.getBezierInstance();
+    const bezier = this.requireBezierInstance();
     const point = bezier.get(t);
     return { x: point.x, y: point.y };
   }
+  requireBezierInstance() {
+    if (!this.bezier) {
+      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;
+      this.bezier = new BezierJS__namespace.Bezier(
+        this.sourceX,
+        this.sourceY,
+        controlPoint1X,
+        controlPoint1Y,
+        controlPoint2X,
+        controlPoint2Y,
+        this.targetX,
+        this.targetY
+      );
+    }
+    return this.bezier;
+  }
 }
 
 var __defProp$2 = Object.defineProperty;
@@ -262,28 +289,12 @@ var __spreadValues$2 = (a, b) => {
   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"
-  ]);
+function BezierEdge(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     BaseEdge,
-    __spreadProps$1(__spreadValues$2({}, rest), {
-      pathBuilder: BezierPathBuilder
+    __spreadProps$1(__spreadValues$2({}, props), {
+      pathBuilder: BezierPathBuilder,
+      context: void 0
     })
   );
 }
@@ -404,37 +415,24 @@ var __spreadValues = (a, b) => {
   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"
-  ]);
+function StraightEdge(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     BaseEdge,
-    __spreadProps(__spreadValues({}, rest), {
-      pathBuilder: StraightPathBuilder
+    __spreadProps(__spreadValues({}, props), {
+      pathBuilder: StraightPathBuilder,
+      context: void 0
     })
   );
 }
 
 exports.BaseEdge = BaseEdge;
 exports.BezierEdge = BezierEdge;
+exports.BezierPathBuilder = BezierPathBuilder;
 exports.MarkerDefinitions = MarkerDefinitions;
 exports.MarkerType = MarkerType;
+exports.PathBuilder = PathBuilder;
 exports.StraightEdge = StraightEdge;
+exports.StraightPathBuilder = StraightPathBuilder;
 exports.getArrowClosedMarker = getArrowClosedMarker;
 exports.getArrowHeadMarkers = getArrowHeadMarkers;
 exports.getArrowMarker = getArrowMarker;

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 import { EdgeProps } from '@knotx/core';
 
-declare abstract class PathBuilder<TType extends string> {
+declare abstract class PathBuilder<TType extends string, TContext = never> {
     readonly sourceX: number;
     readonly sourceY: number;
     readonly targetX: number;
@@ -10,18 +10,36 @@ declare abstract class PathBuilder<TType extends string> {
     /**
      * Builds the svg string for the path.
      */
-    abstract buildPath(): string;
+    abstract buildPath(context: TContext): 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): {
+    abstract interpolate(t: number, context: TContext): {
         x: number;
         y: number;
     };
 }
-type PathBuilderType<T extends string = any> = new (...args: ConstructorParameters<typeof PathBuilder<T>>) => PathBuilder<T>;
+type PathBuilderType<T extends string = any, TContext = void> = new (...args: ConstructorParameters<typeof PathBuilder<T, TContext>>) => PathBuilder<T, TContext>;
+declare class StraightPathBuilder extends PathBuilder<'straight'> {
+    type: "straight";
+    buildPath(): string;
+    interpolate(t: number): {
+        x: number;
+        y: number;
+    };
+}
+declare class BezierPathBuilder extends PathBuilder<'bezier'> {
+    type: "bezier";
+    private bezier?;
+    buildPath(): string;
+    interpolate(t: number): {
+        x: number;
+        y: number;
+    };
+    private requireBezierInstance;
+}
 
 declare enum MarkerType {
     Arrow = "arrow",
@@ -37,22 +55,21 @@ interface MarkerProps {
     orient?: string;
     strokeWidth?: number;
 }
-interface BaseEdgeProps {
-    pathBuilder: PathBuilderType;
-    sourceX: number;
-    sourceY: number;
-    targetX: number;
-    targetY: number;
+interface BaseEdgeProps<TPathBuilderContext = void> extends EdgeProps {
+    className?: string;
+    style?: Record<string, any>;
     interactionWidth?: number;
     label?: string;
     markerEnd?: string | MarkerProps;
     markerStart?: string | MarkerProps;
+    pathBuilder: PathBuilderType<any, TPathBuilderContext>;
+    context: TPathBuilderContext;
 }
-declare function BaseEdge({ pathBuilder: PathBuilder, sourceX, sourceY, targetX, targetY, interactionWidth, label, markerEnd, markerStart, }: BaseEdgeProps): JSX.Element;
+declare function BaseEdge<TPathBuilderContext = never>({ pathBuilder: PathBuilder, sourceX, sourceY, targetX, targetY, edge, className, style, interactionWidth, label, markerEnd, markerStart, context, }: BaseEdgeProps<TPathBuilderContext>): JSX.Element;
 
-interface BezierEdgeOptions extends EdgeProps, Omit<BaseEdgeProps, 'pathBuilder'> {
+interface BezierEdgeProps extends Omit<BaseEdgeProps, 'pathBuilder' | 'context'> {
 }
-declare function BezierEdge({ edge: _edge, ...rest }: BezierEdgeOptions): JSX.Element;
+declare function BezierEdge(props: BezierEdgeProps): JSX.Element;
 
 /**
  * 创建一个标准的箭头 marker
@@ -90,8 +107,8 @@ interface MarkerDefinitionsProps {
 }
 declare function MarkerDefinitions({ markers }: MarkerDefinitionsProps): JSX.Element;
 
-interface StraightEdgeOptions extends EdgeProps, Omit<BaseEdgeProps, 'pathBuilder'> {
+interface StraightEdgeProps extends Omit<BaseEdgeProps, 'pathBuilder' | 'context'> {
 }
-declare function StraightEdge({ edge: _edge, ...rest }: StraightEdgeOptions): JSX.Element;
+declare function StraightEdge(props: StraightEdgeProps): JSX.Element;
 
-export { BaseEdge, type BaseEdgeProps, BezierEdge, type BezierEdgeOptions, MarkerDefinitions, type MarkerDefinitionsProps, type MarkerProps, MarkerType, StraightEdge, type StraightEdgeOptions, getArrowClosedMarker, getArrowHeadMarkers, getArrowMarker, getCustomMarker };
+export { BaseEdge, type BaseEdgeProps, BezierEdge, type BezierEdgeProps, BezierPathBuilder, MarkerDefinitions, type MarkerDefinitionsProps, type MarkerProps, MarkerType, PathBuilder, type PathBuilderType, StraightEdge, type StraightEdgeProps, StraightPathBuilder, getArrowClosedMarker, getArrowHeadMarkers, getArrowMarker, getCustomMarker };

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import { EdgeProps } from '@knotx/core';
 
-declare abstract class PathBuilder<TType extends string> {
+declare abstract class PathBuilder<TType extends string, TContext = never> {
     readonly sourceX: number;
     readonly sourceY: number;
     readonly targetX: number;
@@ -10,18 +10,36 @@ declare abstract class PathBuilder<TType extends string> {
     /**
      * Builds the svg string for the path.
      */
-    abstract buildPath(): string;
+    abstract buildPath(context: TContext): 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): {
+    abstract interpolate(t: number, context: TContext): {
         x: number;
         y: number;
     };
 }
-type PathBuilderType<T extends string = any> = new (...args: ConstructorParameters<typeof PathBuilder<T>>) => PathBuilder<T>;
+type PathBuilderType<T extends string = any, TContext = void> = new (...args: ConstructorParameters<typeof PathBuilder<T, TContext>>) => PathBuilder<T, TContext>;
+declare class StraightPathBuilder extends PathBuilder<'straight'> {
+    type: "straight";
+    buildPath(): string;
+    interpolate(t: number): {
+        x: number;
+        y: number;
+    };
+}
+declare class BezierPathBuilder extends PathBuilder<'bezier'> {
+    type: "bezier";
+    private bezier?;
+    buildPath(): string;
+    interpolate(t: number): {
+        x: number;
+        y: number;
+    };
+    private requireBezierInstance;
+}
 
 declare enum MarkerType {
     Arrow = "arrow",
@@ -37,22 +55,21 @@ interface MarkerProps {
     orient?: string;
     strokeWidth?: number;
 }
-interface BaseEdgeProps {
-    pathBuilder: PathBuilderType;
-    sourceX: number;
-    sourceY: number;
-    targetX: number;
-    targetY: number;
+interface BaseEdgeProps<TPathBuilderContext = void> extends EdgeProps {
+    className?: string;
+    style?: Record<string, any>;
     interactionWidth?: number;
     label?: string;
     markerEnd?: string | MarkerProps;
     markerStart?: string | MarkerProps;
+    pathBuilder: PathBuilderType<any, TPathBuilderContext>;
+    context: TPathBuilderContext;
 }
-declare function BaseEdge({ pathBuilder: PathBuilder, sourceX, sourceY, targetX, targetY, interactionWidth, label, markerEnd, markerStart, }: BaseEdgeProps): JSX.Element;
+declare function BaseEdge<TPathBuilderContext = never>({ pathBuilder: PathBuilder, sourceX, sourceY, targetX, targetY, edge, className, style, interactionWidth, label, markerEnd, markerStart, context, }: BaseEdgeProps<TPathBuilderContext>): JSX.Element;
 
-interface BezierEdgeOptions extends EdgeProps, Omit<BaseEdgeProps, 'pathBuilder'> {
+interface BezierEdgeProps extends Omit<BaseEdgeProps, 'pathBuilder' | 'context'> {
 }
-declare function BezierEdge({ edge: _edge, ...rest }: BezierEdgeOptions): JSX.Element;
+declare function BezierEdge(props: BezierEdgeProps): JSX.Element;
 
 /**
  * 创建一个标准的箭头 marker
@@ -90,8 +107,8 @@ interface MarkerDefinitionsProps {
 }
 declare function MarkerDefinitions({ markers }: MarkerDefinitionsProps): JSX.Element;
 
-interface StraightEdgeOptions extends EdgeProps, Omit<BaseEdgeProps, 'pathBuilder'> {
+interface StraightEdgeProps extends Omit<BaseEdgeProps, 'pathBuilder' | 'context'> {
 }
-declare function StraightEdge({ edge: _edge, ...rest }: StraightEdgeOptions): JSX.Element;
+declare function StraightEdge(props: StraightEdgeProps): JSX.Element;
 
-export { BaseEdge, type BaseEdgeProps, BezierEdge, type BezierEdgeOptions, MarkerDefinitions, type MarkerDefinitionsProps, type MarkerProps, MarkerType, StraightEdge, type StraightEdgeOptions, getArrowClosedMarker, getArrowHeadMarkers, getArrowMarker, getCustomMarker };
+export { BaseEdge, type BaseEdgeProps, BezierEdge, type BezierEdgeProps, BezierPathBuilder, MarkerDefinitions, type MarkerDefinitionsProps, type MarkerProps, MarkerType, PathBuilder, type PathBuilderType, StraightEdge, type StraightEdgeProps, StraightPathBuilder, getArrowClosedMarker, getArrowHeadMarkers, getArrowMarker, getCustomMarker };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { EdgeProps } from '@knotx/core';
 
-declare abstract class PathBuilder<TType extends string> {
+declare abstract class PathBuilder<TType extends string, TContext = never> {
     readonly sourceX: number;
     readonly sourceY: number;
     readonly targetX: number;
@@ -10,18 +10,36 @@ declare abstract class PathBuilder<TType extends string> {
     /**
      * Builds the svg string for the path.
      */
-    abstract buildPath(): string;
+    abstract buildPath(context: TContext): 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): {
+    abstract interpolate(t: number, context: TContext): {
         x: number;
         y: number;
     };
 }
-type PathBuilderType<T extends string = any> = new (...args: ConstructorParameters<typeof PathBuilder<T>>) => PathBuilder<T>;
+type PathBuilderType<T extends string = any, TContext = void> = new (...args: ConstructorParameters<typeof PathBuilder<T, TContext>>) => PathBuilder<T, TContext>;
+declare class StraightPathBuilder extends PathBuilder<'straight'> {
+    type: "straight";
+    buildPath(): string;
+    interpolate(t: number): {
+        x: number;
+        y: number;
+    };
+}
+declare class BezierPathBuilder extends PathBuilder<'bezier'> {
+    type: "bezier";
+    private bezier?;
+    buildPath(): string;
+    interpolate(t: number): {
+        x: number;
+        y: number;
+    };
+    private requireBezierInstance;
+}
 
 declare enum MarkerType {
     Arrow = "arrow",
@@ -37,22 +55,21 @@ interface MarkerProps {
     orient?: string;
     strokeWidth?: number;
 }
-interface BaseEdgeProps {
-    pathBuilder: PathBuilderType;
-    sourceX: number;
-    sourceY: number;
-    targetX: number;
-    targetY: number;
+interface BaseEdgeProps<TPathBuilderContext = void> extends EdgeProps {
+    className?: string;
+    style?: Record<string, any>;
     interactionWidth?: number;
     label?: string;
     markerEnd?: string | MarkerProps;
     markerStart?: string | MarkerProps;
+    pathBuilder: PathBuilderType<any, TPathBuilderContext>;
+    context: TPathBuilderContext;
 }
-declare function BaseEdge({ pathBuilder: PathBuilder, sourceX, sourceY, targetX, targetY, interactionWidth, label, markerEnd, markerStart, }: BaseEdgeProps): JSX.Element;
+declare function BaseEdge<TPathBuilderContext = never>({ pathBuilder: PathBuilder, sourceX, sourceY, targetX, targetY, edge, className, style, interactionWidth, label, markerEnd, markerStart, context, }: BaseEdgeProps<TPathBuilderContext>): JSX.Element;
 
-interface BezierEdgeOptions extends EdgeProps, Omit<BaseEdgeProps, 'pathBuilder'> {
+interface BezierEdgeProps extends Omit<BaseEdgeProps, 'pathBuilder' | 'context'> {
 }
-declare function BezierEdge({ edge: _edge, ...rest }: BezierEdgeOptions): JSX.Element;
+declare function BezierEdge(props: BezierEdgeProps): JSX.Element;
 
 /**
  * 创建一个标准的箭头 marker
@@ -90,8 +107,8 @@ interface MarkerDefinitionsProps {
 }
 declare function MarkerDefinitions({ markers }: MarkerDefinitionsProps): JSX.Element;
 
-interface StraightEdgeOptions extends EdgeProps, Omit<BaseEdgeProps, 'pathBuilder'> {
+interface StraightEdgeProps extends Omit<BaseEdgeProps, 'pathBuilder' | 'context'> {
 }
-declare function StraightEdge({ edge: _edge, ...rest }: StraightEdgeOptions): JSX.Element;
+declare function StraightEdge(props: StraightEdgeProps): JSX.Element;
 
-export { BaseEdge, type BaseEdgeProps, BezierEdge, type BezierEdgeOptions, MarkerDefinitions, type MarkerDefinitionsProps, type MarkerProps, MarkerType, StraightEdge, type StraightEdgeOptions, getArrowClosedMarker, getArrowHeadMarkers, getArrowMarker, getCustomMarker };
+export { BaseEdge, type BaseEdgeProps, BezierEdge, type BezierEdgeProps, BezierPathBuilder, MarkerDefinitions, type MarkerDefinitionsProps, type MarkerProps, MarkerType, PathBuilder, type PathBuilderType, StraightEdge, type StraightEdgeProps, StraightPathBuilder, getArrowClosedMarker, getArrowHeadMarkers, getArrowMarker, getCustomMarker };

package/dist/index.mjs

@@ -2,6 +2,25 @@ import { jsxs, Fragment, jsx } from '@knotx/jsx/jsx-runtime';
 import { bem } from '@knotx/core';
 import * as BezierJS from 'bezier-js';
 
+var __defProp$4 = Object.defineProperty;
+var __defProps$2 = Object.defineProperties;
+var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
+var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
+var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$3 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$3.call(b, prop))
+      __defNormalProp$4(a, prop, b[prop]);
+  if (__getOwnPropSymbols$3)
+    for (var prop of __getOwnPropSymbols$3(b)) {
+      if (__propIsEnum$3.call(b, prop))
+        __defNormalProp$4(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
 var MarkerType = /* @__PURE__ */ ((MarkerType2) => {
   MarkerType2["Arrow"] = "arrow";
   MarkerType2["ArrowClosed"] = "arrowclosed";
@@ -13,14 +32,18 @@ function BaseEdge({
   sourceY,
   targetX,
   targetY,
+  edge,
+  className,
+  style,
   interactionWidth = 20,
   label,
   markerEnd,
-  markerStart
+  markerStart,
+  context
 }) {
   const path = new PathBuilder(sourceX, sourceY, targetX, targetY);
-  const pathString = path.buildPath();
-  const labelPosition = label ? path.interpolate(0.5) : void 0;
+  const pathString = path.buildPath(context);
+  const labelPosition = label ? path.interpolate(0.5, context) : void 0;
   const getMarkerUrl = (marker) => {
     if (!marker)
       return void 0;
@@ -34,18 +57,22 @@ function BaseEdge({
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
       "svg",
-      {
-        className: bem("edge", "wrapper"),
-        style: {
+      __spreadProps$2(__spreadValues$3({
+        className: `${bem("edge", "wrapper")}${className ? ` ${className}` : ""}`,
+        style: __spreadValues$3({
           position: "absolute",
           left: 0,
           top: 0,
           overflow: "visible",
           pointerEvents: "none",
           stroke: "currentColor"
-        },
+        }, style)
+      }, edge ? {
+        "data-edge-source": edge.source,
+        "data-edge-target": edge.target
+      } : {}), {
         children: [
-          /* @__PURE__ */ jsxs("defs", { children: [
+          Boolean(markerEnd || markerStart) && /* @__PURE__ */ jsxs("defs", { children: [
             markerEnd && typeof markerEnd === "object" && /* @__PURE__ */ jsxs(
               "marker",
               {
@@ -150,7 +177,7 @@ function BaseEdge({
             }
           )
         ]
-      }
+      })
     ),
     label && labelPosition && /* @__PURE__ */ jsx(
       "div",
@@ -169,17 +196,13 @@ function BaseEdge({
 
 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);
+var __publicField = (obj, key, value) => __defNormalProp$3(obj, typeof key !== "symbol" ? key + "" : 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 {
@@ -198,33 +221,37 @@ 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
-    );
+    __publicField(this, "bezier");
   }
   buildPath() {
-    const bezier = this.getBezierInstance();
+    const bezier = this.requireBezierInstance();
     return bezier.toSVG();
   }
   interpolate(t) {
-    const bezier = this.getBezierInstance();
+    const bezier = this.requireBezierInstance();
     const point = bezier.get(t);
     return { x: point.x, y: point.y };
   }
+  requireBezierInstance() {
+    if (!this.bezier) {
+      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;
+      this.bezier = new BezierJS.Bezier(
+        this.sourceX,
+        this.sourceY,
+        controlPoint1X,
+        controlPoint1Y,
+        controlPoint2X,
+        controlPoint2Y,
+        this.targetX,
+        this.targetY
+      );
+    }
+    return this.bezier;
+  }
 }
 
 var __defProp$2 = Object.defineProperty;
@@ -246,28 +273,12 @@ var __spreadValues$2 = (a, b) => {
   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"
-  ]);
+function BezierEdge(props) {
   return /* @__PURE__ */ jsx(
     BaseEdge,
-    __spreadProps$1(__spreadValues$2({}, rest), {
-      pathBuilder: BezierPathBuilder
+    __spreadProps$1(__spreadValues$2({}, props), {
+      pathBuilder: BezierPathBuilder,
+      context: void 0
     })
   );
 }
@@ -388,30 +399,14 @@ var __spreadValues = (a, b) => {
   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"
-  ]);
+function StraightEdge(props) {
   return /* @__PURE__ */ jsx(
     BaseEdge,
-    __spreadProps(__spreadValues({}, rest), {
-      pathBuilder: StraightPathBuilder
+    __spreadProps(__spreadValues({}, props), {
+      pathBuilder: StraightPathBuilder,
+      context: void 0
     })
   );
 }
 
-export { BaseEdge, BezierEdge, MarkerDefinitions, MarkerType, StraightEdge, getArrowClosedMarker, getArrowHeadMarkers, getArrowMarker, getCustomMarker };
+export { BaseEdge, BezierEdge, BezierPathBuilder, MarkerDefinitions, MarkerType, PathBuilder, StraightEdge, StraightPathBuilder, getArrowClosedMarker, getArrowHeadMarkers, getArrowMarker, getCustomMarker };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@knotx/render",
   "type": "module",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "description": "Render for Knotx",
   "author": "boenfu",
   "license": "MIT",
@@ -30,14 +30,14 @@
   ],
   "dependencies": {
     "bezier-js": "^6.1.4",
-    "@knotx/core": "0.0.5"
+    "@knotx/core": "0.0.6"
   },
   "devDependencies": {
     "@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"
+    "@knotx/build-config": "0.0.6",
+    "@knotx/eslint-config": "0.0.6",
+    "@knotx/jsx": "0.0.6",
+    "@knotx/typescript-config": "0.0.6"
   },
   "scripts": {
     "build": "unbuild --failOnWarn=false",