@knotx/render 0.0.5 → 0.0.7

package/dist/index.cjs

@@ -32,11 +32,12 @@ function BaseEdge({
   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;
@@ -185,17 +186,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 +211,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;
@@ -283,7 +284,8 @@ function BezierEdge(_a) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     BaseEdge,
     __spreadProps$1(__spreadValues$2({}, rest), {
-      pathBuilder: BezierPathBuilder
+      pathBuilder: BezierPathBuilder,
+      context: void 0
     })
   );
 }
@@ -425,15 +427,20 @@ function StraightEdge(_a) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     BaseEdge,
     __spreadProps(__spreadValues({}, rest), {
-      pathBuilder: StraightPathBuilder
+      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,8 +55,8 @@ interface MarkerProps {
     orient?: string;
     strokeWidth?: number;
 }
-interface BaseEdgeProps {
-    pathBuilder: PathBuilderType;
+interface BaseEdgeProps<TPathBuilderContext = void> {
+    pathBuilder: PathBuilderType<any, TPathBuilderContext>;
     sourceX: number;
     sourceY: number;
     targetX: number;
@@ -47,9 +65,11 @@ interface BaseEdgeProps {
     label?: string;
     markerEnd?: string | MarkerProps;
     markerStart?: string | MarkerProps;
+    context: TPathBuilderContext;
 }
+declare function BaseEdge<TPathBuilderContext = never>({ pathBuilder: PathBuilder, sourceX, sourceY, targetX, targetY, interactionWidth, label, markerEnd, markerStart, context, }: BaseEdgeProps<TPathBuilderContext>): JSX.Element;
 
-interface BezierEdgeOptions extends EdgeProps, Omit<BaseEdgeProps, 'pathBuilder'> {
+interface BezierEdgeOptions extends EdgeProps, Omit<BaseEdgeProps, 'pathBuilder' | 'context'> {
 }
 declare function BezierEdge({ edge: _edge, ...rest }: BezierEdgeOptions): JSX.Element;
 
@@ -89,8 +109,8 @@ interface MarkerDefinitionsProps {
 }
 declare function MarkerDefinitions({ markers }: MarkerDefinitionsProps): JSX.Element;
 
-interface StraightEdgeOptions extends EdgeProps, Omit<BaseEdgeProps, 'pathBuilder'> {
+interface StraightEdgeOptions extends EdgeProps, Omit<BaseEdgeProps, 'pathBuilder' | 'context'> {
 }
 declare function StraightEdge({ edge: _edge, ...rest }: StraightEdgeOptions): JSX.Element;
 
-export { BezierEdge, type BezierEdgeOptions, MarkerDefinitions, type MarkerDefinitionsProps, MarkerType, StraightEdge, type StraightEdgeOptions, getArrowClosedMarker, getArrowHeadMarkers, getArrowMarker, getCustomMarker };
+export { BaseEdge, type BaseEdgeProps, BezierEdge, type BezierEdgeOptions, BezierPathBuilder, MarkerDefinitions, type MarkerDefinitionsProps, type MarkerProps, MarkerType, PathBuilder, type PathBuilderType, StraightEdge, type StraightEdgeOptions, 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,8 +55,8 @@ interface MarkerProps {
     orient?: string;
     strokeWidth?: number;
 }
-interface BaseEdgeProps {
-    pathBuilder: PathBuilderType;
+interface BaseEdgeProps<TPathBuilderContext = void> {
+    pathBuilder: PathBuilderType<any, TPathBuilderContext>;
     sourceX: number;
     sourceY: number;
     targetX: number;
@@ -47,9 +65,11 @@ interface BaseEdgeProps {
     label?: string;
     markerEnd?: string | MarkerProps;
     markerStart?: string | MarkerProps;
+    context: TPathBuilderContext;
 }
+declare function BaseEdge<TPathBuilderContext = never>({ pathBuilder: PathBuilder, sourceX, sourceY, targetX, targetY, interactionWidth, label, markerEnd, markerStart, context, }: BaseEdgeProps<TPathBuilderContext>): JSX.Element;
 
-interface BezierEdgeOptions extends EdgeProps, Omit<BaseEdgeProps, 'pathBuilder'> {
+interface BezierEdgeOptions extends EdgeProps, Omit<BaseEdgeProps, 'pathBuilder' | 'context'> {
 }
 declare function BezierEdge({ edge: _edge, ...rest }: BezierEdgeOptions): JSX.Element;
 
@@ -89,8 +109,8 @@ interface MarkerDefinitionsProps {
 }
 declare function MarkerDefinitions({ markers }: MarkerDefinitionsProps): JSX.Element;
 
-interface StraightEdgeOptions extends EdgeProps, Omit<BaseEdgeProps, 'pathBuilder'> {
+interface StraightEdgeOptions extends EdgeProps, Omit<BaseEdgeProps, 'pathBuilder' | 'context'> {
 }
 declare function StraightEdge({ edge: _edge, ...rest }: StraightEdgeOptions): JSX.Element;
 
-export { BezierEdge, type BezierEdgeOptions, MarkerDefinitions, type MarkerDefinitionsProps, MarkerType, StraightEdge, type StraightEdgeOptions, getArrowClosedMarker, getArrowHeadMarkers, getArrowMarker, getCustomMarker };
+export { BaseEdge, type BaseEdgeProps, BezierEdge, type BezierEdgeOptions, BezierPathBuilder, MarkerDefinitions, type MarkerDefinitionsProps, type MarkerProps, MarkerType, PathBuilder, type PathBuilderType, StraightEdge, type StraightEdgeOptions, 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,8 +55,8 @@ interface MarkerProps {
     orient?: string;
     strokeWidth?: number;
 }
-interface BaseEdgeProps {
-    pathBuilder: PathBuilderType;
+interface BaseEdgeProps<TPathBuilderContext = void> {
+    pathBuilder: PathBuilderType<any, TPathBuilderContext>;
     sourceX: number;
     sourceY: number;
     targetX: number;
@@ -47,9 +65,11 @@ interface BaseEdgeProps {
     label?: string;
     markerEnd?: string | MarkerProps;
     markerStart?: string | MarkerProps;
+    context: TPathBuilderContext;
 }
+declare function BaseEdge<TPathBuilderContext = never>({ pathBuilder: PathBuilder, sourceX, sourceY, targetX, targetY, interactionWidth, label, markerEnd, markerStart, context, }: BaseEdgeProps<TPathBuilderContext>): JSX.Element;
 
-interface BezierEdgeOptions extends EdgeProps, Omit<BaseEdgeProps, 'pathBuilder'> {
+interface BezierEdgeOptions extends EdgeProps, Omit<BaseEdgeProps, 'pathBuilder' | 'context'> {
 }
 declare function BezierEdge({ edge: _edge, ...rest }: BezierEdgeOptions): JSX.Element;
 
@@ -89,8 +109,8 @@ interface MarkerDefinitionsProps {
 }
 declare function MarkerDefinitions({ markers }: MarkerDefinitionsProps): JSX.Element;
 
-interface StraightEdgeOptions extends EdgeProps, Omit<BaseEdgeProps, 'pathBuilder'> {
+interface StraightEdgeOptions extends EdgeProps, Omit<BaseEdgeProps, 'pathBuilder' | 'context'> {
 }
 declare function StraightEdge({ edge: _edge, ...rest }: StraightEdgeOptions): JSX.Element;
 
-export { BezierEdge, type BezierEdgeOptions, MarkerDefinitions, type MarkerDefinitionsProps, MarkerType, StraightEdge, type StraightEdgeOptions, getArrowClosedMarker, getArrowHeadMarkers, getArrowMarker, getCustomMarker };
+export { BaseEdge, type BaseEdgeProps, BezierEdge, type BezierEdgeOptions, BezierPathBuilder, MarkerDefinitions, type MarkerDefinitionsProps, type MarkerProps, MarkerType, PathBuilder, type PathBuilderType, StraightEdge, type StraightEdgeOptions, StraightPathBuilder, getArrowClosedMarker, getArrowHeadMarkers, getArrowMarker, getCustomMarker };

package/dist/index.mjs

@@ -16,11 +16,12 @@ function BaseEdge({
   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;
@@ -169,17 +170,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 +195,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;
@@ -267,7 +268,8 @@ function BezierEdge(_a) {
   return /* @__PURE__ */ jsx(
     BaseEdge,
     __spreadProps$1(__spreadValues$2({}, rest), {
-      pathBuilder: BezierPathBuilder
+      pathBuilder: BezierPathBuilder,
+      context: void 0
     })
   );
 }
@@ -409,9 +411,10 @@ function StraightEdge(_a) {
   return /* @__PURE__ */ jsx(
     BaseEdge,
     __spreadProps(__spreadValues({}, rest), {
-      pathBuilder: StraightPathBuilder
+      pathBuilder: StraightPathBuilder,
+      context: void 0
     })
   );
 }
 
-export { 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.5",
+  "version": "0.0.7",
   "description": "Render for Knotx",
   "author": "boenfu",
   "license": "MIT",