@knotx/plugins-base-render 0.3.9 → 0.4.0

package/dist/index.cjs

@@ -112,7 +112,7 @@ const _BaseRender = class _BaseRender extends (_a = core.BasePlugin, _nodes_dec
         const draftNode = core.use(() => this.draftNode, { node: id });
         return draftNode || this.getNode({ id });
       },
-      getEdgeRenderer: (type) => this.getEdgeRenderer(type != null ? type : "default") || this.defaultEdgeType,
+      getEdgeRenderer: (type) => this.getEdgeRenderer(type != null ? type : "default") || this.getEdgeRenderer("default"),
       getEdgeWrapper: () => _BaseRender.DEFAULT_EDGE_WRAPPER
     });
   }
@@ -197,24 +197,72 @@ __publicField(_BaseRender, "DEFAULT_NODES_RENDERER", ({
     );
   });
 });
+__publicField(_BaseRender, "EDGE_END_POINT_ORIGIN_CALCULATOR", {
+  "left": (x, y, _width, height) => ({ x, y: y + height / 2 }),
+  "right": (x, y, width, height) => ({ x: x + width, y: y + height / 2 }),
+  "top": (x, y, width, _height) => ({ x: x + width / 2, y }),
+  "bottom": (x, y, width, height) => ({ x: x + width / 2, y: y + height }),
+  "center": (x, y, width, height) => ({ x: x + width / 2, y: y + height / 2 }),
+  "left-top": (x, y, _width, _height) => ({ x, y }),
+  "left-bottom": (x, y, _width, height) => ({ x, y: y + height }),
+  "right-top": (x, y, width, _height) => ({ x: x + width, y }),
+  "right-bottom": (x, y, width, height) => ({ x: x + width, y: y + height })
+});
+__publicField(_BaseRender, "EDGE_END_POINT_POSITION_CALCULATOR", (x, y, width, height, xOffsetConf, yOffsetConf, position) => {
+  const { x: xOrigin, y: yOrigin } = _BaseRender.EDGE_END_POINT_ORIGIN_CALCULATOR[position](x, y, width, height);
+  let yOffset = 0;
+  let xOffset = 0;
+  if (typeof yOffsetConf === "number") {
+    yOffset = yOffsetConf;
+  } else if (yOffsetConf.endsWith("px")) {
+    yOffset = Number(yOffsetConf.replace("px", ""));
+  } else if (yOffsetConf.endsWith("%")) {
+    yOffset = Number(yOffsetConf.replace("%", "")) / 100 * height;
+  }
+  if (typeof xOffsetConf === "number") {
+    xOffset = xOffsetConf;
+  } else if (xOffsetConf.endsWith("px")) {
+    xOffset = Number(xOffsetConf.replace("px", ""));
+  } else if (xOffsetConf.endsWith("%")) {
+    xOffset = Number(xOffsetConf.replace("%", "")) / 100 * width;
+  }
+  return {
+    x: xOrigin + (xOffset || 0),
+    y: yOrigin + (yOffset || 0)
+  };
+});
 __publicField(_BaseRender, "DEFAULT_EDGE_WRAPPER", ({
   id,
   useEdge,
   useNode,
   getEdgeRenderer
 }) => {
-  var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
+  var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v;
   const edge = useEdge(id);
-  const EdgeRenderer = getEdgeRenderer(edge == null ? void 0 : edge.type);
+  const { renderer: EdgeRenderer, config } = getEdgeRenderer(edge == null ? void 0 : edge.type);
   const source = useNode((edge == null ? void 0 : edge.source) || "");
   const target = useNode((edge == null ? void 0 : edge.target) || "");
   if (!edge || !source || !target) {
     return null;
   }
-  const sourceX = ((_b = (_a2 = source.position) == null ? void 0 : _a2.x) != null ? _b : 0) + ((_d = (_c = source.measured) == null ? void 0 : _c.width) != null ? _d : 0);
-  const sourceY = ((_f = (_e = source.position) == null ? void 0 : _e.y) != null ? _f : 0) + ((_h = (_g = source.measured) == null ? void 0 : _g.height) != null ? _h : 0) / 2;
-  const targetX = (_j = (_i = target.position) == null ? void 0 : _i.x) != null ? _j : 0;
-  const targetY = ((_l = (_k = target.position) == null ? void 0 : _k.y) != null ? _l : 0) + ((_n = (_m = target.measured) == null ? void 0 : _m.height) != null ? _n : 0) / 2;
+  const { x: sourceX, y: sourceY } = _BaseRender.EDGE_END_POINT_POSITION_CALCULATOR(
+    (_b = (_a2 = source.position) == null ? void 0 : _a2.x) != null ? _b : 0,
+    (_d = (_c = source.position) == null ? void 0 : _c.y) != null ? _d : 0,
+    (_f = (_e = source.measured) == null ? void 0 : _e.width) != null ? _f : 0,
+    (_h = (_g = source.measured) == null ? void 0 : _g.height) != null ? _h : 0,
+    (_i = edge.sourceXOffset) != null ? _i : config.sourceXOffset,
+    (_j = edge.sourceYOffset) != null ? _j : config.sourceYOffset,
+    (_k = edge.sourcePosition) != null ? _k : config.sourcePosition
+  );
+  const { x: targetX, y: targetY } = _BaseRender.EDGE_END_POINT_POSITION_CALCULATOR(
+    (_m = (_l = target.position) == null ? void 0 : _l.x) != null ? _m : 0,
+    (_o = (_n = target.position) == null ? void 0 : _n.y) != null ? _o : 0,
+    (_q = (_p = target.measured) == null ? void 0 : _p.width) != null ? _q : 0,
+    (_s = (_r = target.measured) == null ? void 0 : _r.height) != null ? _s : 0,
+    (_t = edge.targetXOffset) != null ? _t : config.targetXOffset,
+    (_u = edge.targetYOffset) != null ? _u : config.targetYOffset,
+    (_v = edge.targetPosition) != null ? _v : config.targetPosition
+  );
   return /* @__PURE__ */ jsxRuntime.jsx(
     EdgeRenderer,
     {

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import * as _knotx_core from '@knotx/core';
-import { Node, NodeRenderType, NodePosition, NodeMeasured, Edge, EdgeRenderType, BasePlugin } from '@knotx/core';
+import { Node, NodeRenderType, NodePosition, NodeMeasured, Edge, EdgeRender, BasePlugin, Position } from '@knotx/core';
 import { StraightEdge } from '@knotx/render';
 
 declare module '@knotx/core' {
@@ -25,7 +25,7 @@ interface BaseRenderEdgeWrapperProps {
     id: string;
     useEdge: (id: string) => Edge | undefined;
     useNode: (id: string) => Node | undefined;
-    getEdgeRenderer: (type?: string) => EdgeRenderType;
+    getEdgeRenderer: (type?: string) => EdgeRender;
 }
 interface BaseRenderEdgesWrapperProps extends Omit<BaseRenderEdgeWrapperProps, 'id'> {
     useEdges: () => Edge[];
@@ -60,12 +60,20 @@ declare class BaseRender extends BasePlugin<'baseRender'> {
         useEdge: (id: string) => Edge<_knotx_core.IRecord> | undefined;
         useEdges: () => Edge<_knotx_core.IRecord>[];
         useNode: (id: string) => Node<_knotx_core.IRecord> | undefined;
-        getEdgeRenderer: (type?: string) => typeof StraightEdge | EdgeRenderType<any, any>;
+        getEdgeRenderer: (type?: string) => EdgeRender<any, any>;
         getEdgeWrapper: () => ({ id, useEdge, useNode, getEdgeRenderer, }: BaseRenderEdgeWrapperProps) => JSX.Element | null;
     };
     edgesLayer(): JSX.Element[];
     static DEFAULT_NODE_WRAPPER: ({ id, useNode, getNodeRenderer, getNodePosition, getNodeMeasured, getNodeLevel, }: BaseRenderNodeWrapperProps) => JSX.Element | null;
     static DEFAULT_NODES_RENDERER: ({ useNode, useNodes, getNodeRenderer, getNodePosition, getNodeMeasured, getNodeLevel, getNodeWrapper, }: BaseRenderNodesWrapperProps) => JSX.Element[];
+    static EDGE_END_POINT_ORIGIN_CALCULATOR: Record<Position, (x: number, y: number, width: number, height: number) => {
+        x: number;
+        y: number;
+    }>;
+    static EDGE_END_POINT_POSITION_CALCULATOR: (x: number, y: number, width: number, height: number, xOffsetConf: string | number, yOffsetConf: string | number, position: Position) => {
+        x: number;
+        y: number;
+    };
     static DEFAULT_EDGE_WRAPPER: ({ id, useEdge, useNode, getEdgeRenderer, }: BaseRenderEdgeWrapperProps) => JSX.Element | null;
     static DEFAULT_EDGES_RENDERER: ({ useEdge, useEdges, useNode, getEdgeRenderer, getEdgeWrapper, }: BaseRenderEdgesWrapperProps) => JSX.Element[];
 }

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as _knotx_core from '@knotx/core';
-import { Node, NodeRenderType, NodePosition, NodeMeasured, Edge, EdgeRenderType, BasePlugin } from '@knotx/core';
+import { Node, NodeRenderType, NodePosition, NodeMeasured, Edge, EdgeRender, BasePlugin, Position } from '@knotx/core';
 import { StraightEdge } from '@knotx/render';
 
 declare module '@knotx/core' {
@@ -25,7 +25,7 @@ interface BaseRenderEdgeWrapperProps {
     id: string;
     useEdge: (id: string) => Edge | undefined;
     useNode: (id: string) => Node | undefined;
-    getEdgeRenderer: (type?: string) => EdgeRenderType;
+    getEdgeRenderer: (type?: string) => EdgeRender;
 }
 interface BaseRenderEdgesWrapperProps extends Omit<BaseRenderEdgeWrapperProps, 'id'> {
     useEdges: () => Edge[];
@@ -60,12 +60,20 @@ declare class BaseRender extends BasePlugin<'baseRender'> {
         useEdge: (id: string) => Edge<_knotx_core.IRecord> | undefined;
         useEdges: () => Edge<_knotx_core.IRecord>[];
         useNode: (id: string) => Node<_knotx_core.IRecord> | undefined;
-        getEdgeRenderer: (type?: string) => typeof StraightEdge | EdgeRenderType<any, any>;
+        getEdgeRenderer: (type?: string) => EdgeRender<any, any>;
         getEdgeWrapper: () => ({ id, useEdge, useNode, getEdgeRenderer, }: BaseRenderEdgeWrapperProps) => JSX.Element | null;
     };
     edgesLayer(): JSX.Element[];
     static DEFAULT_NODE_WRAPPER: ({ id, useNode, getNodeRenderer, getNodePosition, getNodeMeasured, getNodeLevel, }: BaseRenderNodeWrapperProps) => JSX.Element | null;
     static DEFAULT_NODES_RENDERER: ({ useNode, useNodes, getNodeRenderer, getNodePosition, getNodeMeasured, getNodeLevel, getNodeWrapper, }: BaseRenderNodesWrapperProps) => JSX.Element[];
+    static EDGE_END_POINT_ORIGIN_CALCULATOR: Record<Position, (x: number, y: number, width: number, height: number) => {
+        x: number;
+        y: number;
+    }>;
+    static EDGE_END_POINT_POSITION_CALCULATOR: (x: number, y: number, width: number, height: number, xOffsetConf: string | number, yOffsetConf: string | number, position: Position) => {
+        x: number;
+        y: number;
+    };
     static DEFAULT_EDGE_WRAPPER: ({ id, useEdge, useNode, getEdgeRenderer, }: BaseRenderEdgeWrapperProps) => JSX.Element | null;
     static DEFAULT_EDGES_RENDERER: ({ useEdge, useEdges, useNode, getEdgeRenderer, getEdgeWrapper, }: BaseRenderEdgesWrapperProps) => JSX.Element[];
 }

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as _knotx_core from '@knotx/core';
-import { Node, NodeRenderType, NodePosition, NodeMeasured, Edge, EdgeRenderType, BasePlugin } from '@knotx/core';
+import { Node, NodeRenderType, NodePosition, NodeMeasured, Edge, EdgeRender, BasePlugin, Position } from '@knotx/core';
 import { StraightEdge } from '@knotx/render';
 
 declare module '@knotx/core' {
@@ -25,7 +25,7 @@ interface BaseRenderEdgeWrapperProps {
     id: string;
     useEdge: (id: string) => Edge | undefined;
     useNode: (id: string) => Node | undefined;
-    getEdgeRenderer: (type?: string) => EdgeRenderType;
+    getEdgeRenderer: (type?: string) => EdgeRender;
 }
 interface BaseRenderEdgesWrapperProps extends Omit<BaseRenderEdgeWrapperProps, 'id'> {
     useEdges: () => Edge[];
@@ -60,12 +60,20 @@ declare class BaseRender extends BasePlugin<'baseRender'> {
         useEdge: (id: string) => Edge<_knotx_core.IRecord> | undefined;
         useEdges: () => Edge<_knotx_core.IRecord>[];
         useNode: (id: string) => Node<_knotx_core.IRecord> | undefined;
-        getEdgeRenderer: (type?: string) => typeof StraightEdge | EdgeRenderType<any, any>;
+        getEdgeRenderer: (type?: string) => EdgeRender<any, any>;
         getEdgeWrapper: () => ({ id, useEdge, useNode, getEdgeRenderer, }: BaseRenderEdgeWrapperProps) => JSX.Element | null;
     };
     edgesLayer(): JSX.Element[];
     static DEFAULT_NODE_WRAPPER: ({ id, useNode, getNodeRenderer, getNodePosition, getNodeMeasured, getNodeLevel, }: BaseRenderNodeWrapperProps) => JSX.Element | null;
     static DEFAULT_NODES_RENDERER: ({ useNode, useNodes, getNodeRenderer, getNodePosition, getNodeMeasured, getNodeLevel, getNodeWrapper, }: BaseRenderNodesWrapperProps) => JSX.Element[];
+    static EDGE_END_POINT_ORIGIN_CALCULATOR: Record<Position, (x: number, y: number, width: number, height: number) => {
+        x: number;
+        y: number;
+    }>;
+    static EDGE_END_POINT_POSITION_CALCULATOR: (x: number, y: number, width: number, height: number, xOffsetConf: string | number, yOffsetConf: string | number, position: Position) => {
+        x: number;
+        y: number;
+    };
     static DEFAULT_EDGE_WRAPPER: ({ id, useEdge, useNode, getEdgeRenderer, }: BaseRenderEdgeWrapperProps) => JSX.Element | null;
     static DEFAULT_EDGES_RENDERER: ({ useEdge, useEdges, useNode, getEdgeRenderer, getEdgeWrapper, }: BaseRenderEdgesWrapperProps) => JSX.Element[];
 }

package/dist/index.js

@@ -110,7 +110,7 @@ const _BaseRender = class _BaseRender extends (_a = BasePlugin, _nodes_dec = [in
         const draftNode = use(() => this.draftNode, { node: id });
         return draftNode || this.getNode({ id });
       },
-      getEdgeRenderer: (type) => this.getEdgeRenderer(type != null ? type : "default") || this.defaultEdgeType,
+      getEdgeRenderer: (type) => this.getEdgeRenderer(type != null ? type : "default") || this.getEdgeRenderer("default"),
       getEdgeWrapper: () => _BaseRender.DEFAULT_EDGE_WRAPPER
     });
   }
@@ -195,24 +195,72 @@ __publicField(_BaseRender, "DEFAULT_NODES_RENDERER", ({
     );
   });
 });
+__publicField(_BaseRender, "EDGE_END_POINT_ORIGIN_CALCULATOR", {
+  "left": (x, y, _width, height) => ({ x, y: y + height / 2 }),
+  "right": (x, y, width, height) => ({ x: x + width, y: y + height / 2 }),
+  "top": (x, y, width, _height) => ({ x: x + width / 2, y }),
+  "bottom": (x, y, width, height) => ({ x: x + width / 2, y: y + height }),
+  "center": (x, y, width, height) => ({ x: x + width / 2, y: y + height / 2 }),
+  "left-top": (x, y, _width, _height) => ({ x, y }),
+  "left-bottom": (x, y, _width, height) => ({ x, y: y + height }),
+  "right-top": (x, y, width, _height) => ({ x: x + width, y }),
+  "right-bottom": (x, y, width, height) => ({ x: x + width, y: y + height })
+});
+__publicField(_BaseRender, "EDGE_END_POINT_POSITION_CALCULATOR", (x, y, width, height, xOffsetConf, yOffsetConf, position) => {
+  const { x: xOrigin, y: yOrigin } = _BaseRender.EDGE_END_POINT_ORIGIN_CALCULATOR[position](x, y, width, height);
+  let yOffset = 0;
+  let xOffset = 0;
+  if (typeof yOffsetConf === "number") {
+    yOffset = yOffsetConf;
+  } else if (yOffsetConf.endsWith("px")) {
+    yOffset = Number(yOffsetConf.replace("px", ""));
+  } else if (yOffsetConf.endsWith("%")) {
+    yOffset = Number(yOffsetConf.replace("%", "")) / 100 * height;
+  }
+  if (typeof xOffsetConf === "number") {
+    xOffset = xOffsetConf;
+  } else if (xOffsetConf.endsWith("px")) {
+    xOffset = Number(xOffsetConf.replace("px", ""));
+  } else if (xOffsetConf.endsWith("%")) {
+    xOffset = Number(xOffsetConf.replace("%", "")) / 100 * width;
+  }
+  return {
+    x: xOrigin + (xOffset || 0),
+    y: yOrigin + (yOffset || 0)
+  };
+});
 __publicField(_BaseRender, "DEFAULT_EDGE_WRAPPER", ({
   id,
   useEdge,
   useNode,
   getEdgeRenderer
 }) => {
-  var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
+  var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v;
   const edge = useEdge(id);
-  const EdgeRenderer = getEdgeRenderer(edge == null ? void 0 : edge.type);
+  const { renderer: EdgeRenderer, config } = getEdgeRenderer(edge == null ? void 0 : edge.type);
   const source = useNode((edge == null ? void 0 : edge.source) || "");
   const target = useNode((edge == null ? void 0 : edge.target) || "");
   if (!edge || !source || !target) {
     return null;
   }
-  const sourceX = ((_b = (_a2 = source.position) == null ? void 0 : _a2.x) != null ? _b : 0) + ((_d = (_c = source.measured) == null ? void 0 : _c.width) != null ? _d : 0);
-  const sourceY = ((_f = (_e = source.position) == null ? void 0 : _e.y) != null ? _f : 0) + ((_h = (_g = source.measured) == null ? void 0 : _g.height) != null ? _h : 0) / 2;
-  const targetX = (_j = (_i = target.position) == null ? void 0 : _i.x) != null ? _j : 0;
-  const targetY = ((_l = (_k = target.position) == null ? void 0 : _k.y) != null ? _l : 0) + ((_n = (_m = target.measured) == null ? void 0 : _m.height) != null ? _n : 0) / 2;
+  const { x: sourceX, y: sourceY } = _BaseRender.EDGE_END_POINT_POSITION_CALCULATOR(
+    (_b = (_a2 = source.position) == null ? void 0 : _a2.x) != null ? _b : 0,
+    (_d = (_c = source.position) == null ? void 0 : _c.y) != null ? _d : 0,
+    (_f = (_e = source.measured) == null ? void 0 : _e.width) != null ? _f : 0,
+    (_h = (_g = source.measured) == null ? void 0 : _g.height) != null ? _h : 0,
+    (_i = edge.sourceXOffset) != null ? _i : config.sourceXOffset,
+    (_j = edge.sourceYOffset) != null ? _j : config.sourceYOffset,
+    (_k = edge.sourcePosition) != null ? _k : config.sourcePosition
+  );
+  const { x: targetX, y: targetY } = _BaseRender.EDGE_END_POINT_POSITION_CALCULATOR(
+    (_m = (_l = target.position) == null ? void 0 : _l.x) != null ? _m : 0,
+    (_o = (_n = target.position) == null ? void 0 : _n.y) != null ? _o : 0,
+    (_q = (_p = target.measured) == null ? void 0 : _p.width) != null ? _q : 0,
+    (_s = (_r = target.measured) == null ? void 0 : _r.height) != null ? _s : 0,
+    (_t = edge.targetXOffset) != null ? _t : config.targetXOffset,
+    (_u = edge.targetYOffset) != null ? _u : config.targetYOffset,
+    (_v = edge.targetPosition) != null ? _v : config.targetPosition
+  );
   return /* @__PURE__ */ jsx(
     EdgeRenderer,
     {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knotx/plugins-base-render",
-  "version": "0.3.9",
+  "version": "0.4.0",
   "description": "Base Render Plugin for Knotx",
   "author": "boenfu",
   "license": "MIT",
@@ -28,19 +28,19 @@
     "dist"
   ],
   "peerDependencies": {
-    "@knotx/jsx": "0.3.9"
+    "@knotx/jsx": "0.4.0"
   },
   "dependencies": {
     "rxjs": "^7.8.1",
-    "@knotx/core": "0.3.9",
-    "@knotx/decorators": "0.3.9",
-    "@knotx/render": "0.3.9"
+    "@knotx/core": "0.4.0",
+    "@knotx/decorators": "0.4.0",
+    "@knotx/render": "0.4.0"
   },
   "devDependencies": {
-    "@knotx/build-config": "0.3.9",
-    "@knotx/eslint-config": "0.3.9",
-    "@knotx/jsx": "0.3.9",
-    "@knotx/typescript-config": "0.3.9"
+    "@knotx/build-config": "0.4.0",
+    "@knotx/eslint-config": "0.4.0",
+    "@knotx/jsx": "0.4.0",
+    "@knotx/typescript-config": "0.4.0"
   },
   "scripts": {
     "build": "unbuild",