@capillarytech/blaze-ui 5.4.1 → 5.6.0

package/CapExpressionEditor/js/grammar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grammar.d.ts","sourceRoot":"","sources":["../../../components/CapExpressionEditor/js/grammar.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,wBAizFG"}

package/CapExpressionEditor/types.d.ts

@@ -0,0 +1,18 @@
+import type { CapInputTextAreaProps } from '../CapInput';
+/** Expression grammar configuration object */
+export type ExpressionGrammar = Record<string, unknown>;
+export interface CapExpressionEditorProps extends Omit<CapInputTextAreaProps, 'value' | 'onChange'> {
+    /** Expression grammar configuration */
+    grammar?: ExpressionGrammar;
+    /** Expected types for expression validation (e.g. ['boolean']) */
+    expected?: string[];
+    /** Type source identifier for type resolution */
+    typeSource?: string;
+    /** Delimiters for expression parsing (e.g. ['{{', '}}']) */
+    delims?: string[];
+    /** Initial expression value */
+    expression?: string;
+    /** Callback when expression changes. Receives parsed JSON, expression string, and error state */
+    onChange?: (expressionJSON: Record<string, unknown>, expression: string, isError: boolean) => void;
+}
+//# sourceMappingURL=types.d.ts.map

package/CapExpressionEditor/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../components/CapExpressionEditor/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAC;AAEzD,8CAA8C;AAC9C,MAAM,MAAM,iBAAiB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAExD,MAAM,WAAW,wBACf,SAAQ,IAAI,CAAC,qBAAqB,EAAE,OAAO,GAAG,UAAU,CAAC;IACzD,uCAAuC;IACvC,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,iDAAiD;IACjD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,+BAA+B;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iGAAiG;IACjG,QAAQ,CAAC,EAAE,CACT,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACvC,UAAU,EAAE,MAAM,EAClB,OAAO,EAAE,OAAO,KACb,IAAI,CAAC;CACX"}

package/CapLevelGraphRenderer/index.js

@@ -4974,20 +4974,11 @@ var _client = __webpack_require__(5338);
 var _CapTooltip = _interopRequireDefault(__webpack_require__(85684));
 var _jsxRuntime = __webpack_require__(74848);
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/**
- * Custom tooltip tool for x6 graph edges
- * Extends ToolsView.ToolItem to provide tooltip functionality on edge hover
- *
- * Note: Uses type assertions for @antv/x6 properties as the library's TypeScript
- * definitions may not fully expose all ToolItem properties.
- */
 class TooltipTool extends _x.ToolsView.ToolItem {
   constructor(props) {
     super(props);
     this.onMouseMove = e => {
-      if (this.timer) {
-        window.clearTimeout(this.timer);
-      }
+      window.clearTimeout(this.timer);
       this.updatePosition(e);
       this.timer = window.setTimeout(() => {
         if (this.tooltipVisible) {
@@ -5002,8 +4993,7 @@ class TooltipTool extends _x.ToolsView.ToolItem {
     super.render();
     this.knob = _x.ToolsView.createElement('div', false);
     this.knob.style.position = 'absolute';
-    const container = this.container;
-    container.appendChild(this.knob);
+    this.container.appendChild(this.knob);
     this.updatePosition();
     document.addEventListener('mousemove', this.onMouseMove);
     return this;
@@ -5011,9 +5001,8 @@ class TooltipTool extends _x.ToolsView.ToolItem {
   toggleTooltip(visible) {
     const root = (0, _client.createRoot)(this.knob);
     if (visible) {
-      const tooltipText = this.options.tooltip;
       root.render(/*#__PURE__*/(0, _jsxRuntime.jsx)(_CapTooltip.default, {
-        title: tooltipText,
+        title: this.options.tooltip,
         visible: true,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {})
       }));
@@ -5024,9 +5013,8 @@ class TooltipTool extends _x.ToolsView.ToolItem {
     const {
       style
     } = this.knob;
-    const graph = this.graph;
-    if (e && graph) {
-      const p = graph.clientToGraph(e.clientX, e.clientY);
+    if (e) {
+      const p = this.graph.clientToGraph(e.clientX, e.clientY);
       style.display = 'block';
       style.left = p.x + "px";
       style.top = p.y + "px";
@@ -5038,21 +5026,16 @@ class TooltipTool extends _x.ToolsView.ToolItem {
   }
   onMouseLeave() {
     this.updatePosition();
-    if (this.timer) {
-      window.clearTimeout(this.timer);
-    }
+    window.clearTimeout(this.timer);
     window.setTimeout(() => this.toggleTooltip(false), this.delay);
     document.removeEventListener('mousemove', this.onMouseMove);
   }
   delegateEvents() {
-    const cellView = this.cellView;
-    cellView.on('cell:mouseleave', this.onMouseLeave, this);
+    this.cellView.on('cell:mouseleave', this.onMouseLeave, this);
     return super.delegateEvents();
   }
   onRemove() {
-    const cellView = this.cellView;
-    // @ts-expect-error - x6's off method signature may vary
-    cellView.off('cell:mouseleave', this.onMouseLeave, this);
+    this.cellView.off('cell:mouseleave', this.onMouseLeave, this);
   }
 }
 TooltipTool.config({
@@ -12656,14 +12639,15 @@ var ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ = __webpack_require__(31601);
 var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(76314);
 var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, `.cap-level-graph-renderer-v2 .level-graph-pagination-container,.cap-level-graph-renderer-v2 .level-graph-pagination-row,.cap-level-graph-renderer-v2 .level-graph-pagination-left,.cap-level-graph-renderer-v2 .level-graph-pagination-right{display:flex}.cap-level-graph-renderer-v2 .level-graph-pagination-row{justify-content:flex-end;height:1.714rem;margin-bottom:2.571rem}.cap-level-graph-renderer-v2 .level-graph-pagination-row .level-graph-pagination-left{margin-right:1.714rem}.cap-level-graph-renderer-v2 .level-graph-pagination-row .level-graph-pagination-left > span + .anticon{margin:0}.cap-level-graph-renderer-v2 .level-graph-pagination-row .level-graph-pagination-left,.cap-level-graph-renderer-v2 .level-graph-pagination-row .level-graph-pagination-right{justify-content:center;align-items:center;min-width:fit-content;height:100%;padding:0}`, ""]);
+___CSS_LOADER_EXPORT___.push([module.id, `.cap-level-graph-renderer-v2 .level-graph-pagination-container,.cap-level-graph-renderer-v2 .level-graph-pagination-row,.cap-level-graph-renderer-v2 .level-graph-pagination-left,.cap-level-graph-renderer-v2 .level-graph-pagination-right{display:flex}.cap-level-graph-renderer-v2 .level-graph-pagination-row{justify-content:flex-end;height:1.714rem;margin-bottom:2.571rem}.cap-level-graph-renderer-v2 .level-graph-pagination-row .level-graph-pagination-left{margin-right:1.714rem}.cap-level-graph-renderer-v2 .level-graph-pagination-row .level-graph-pagination-left>span+.anticon{margin:0}.cap-level-graph-renderer-v2 .level-graph-pagination-row .level-graph-pagination-left,.cap-level-graph-renderer-v2 .level-graph-pagination-row .level-graph-pagination-right{justify-content:center;align-items:center;min-width:fit-content;height:100%;padding:0}`, ""]);
 // Exports
 ___CSS_LOADER_EXPORT___.locals = {
 	"cap-level-graph-renderer-v2": `cap-level-graph-renderer-v2`,
 	"level-graph-pagination-container": `level-graph-pagination-container`,
 	"level-graph-pagination-row": `level-graph-pagination-row`,
 	"level-graph-pagination-left": `level-graph-pagination-left`,
-	"level-graph-pagination-right": `level-graph-pagination-right`
+	"level-graph-pagination-right": `level-graph-pagination-right`,
+	"anticon": `anticon`
 };
 module.exports = ___CSS_LOADER_EXPORT___;
 
@@ -17922,10 +17906,11 @@ var _x = __webpack_require__(28890);
 __webpack_require__(90460);
 var _classnames = _interopRequireDefault(__webpack_require__(46942));
 var _get = _interopRequireDefault(__webpack_require__(58156));
+var _propTypes = _interopRequireDefault(__webpack_require__(43363));
 var _react = _interopRequireWildcard(__webpack_require__(9206));
 var _CapButton = _interopRequireDefault(__webpack_require__(80739));
 var _CapIcon = _interopRequireDefault(__webpack_require__(65124));
-var _styles = _interopRequireDefault(__webpack_require__(50742));
+__webpack_require__(50742);
 var _Tooltip = _interopRequireDefault(__webpack_require__(30405));
 var _jsxRuntime = __webpack_require__(74848);
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
@@ -17945,67 +17930,56 @@ const edgeObj = {};
 const idSeparator = ' ';
 const CapLevelGraphRenderer = _ref => {
   let {
-    nodes = [],
+    nodes,
     graphId,
-    className = '',
-    graphWidth = '31.25rem',
-    graphHeight = '31.25rem',
-    showToolTip = false,
-    connections = [],
-    graphStyles = {},
-    offsetHeight = 20,
-    defaultStartX = 0,
-    defaultStartY = 0,
-    scrollerProps = {},
-    scrollClassName = '',
-    containerStyles = {},
-    lineStrokeColor = 'gray',
-    defaultEleWidth = 100,
-    defaultEleDistance = 20,
-    offsetLineDistance = 18,
-    forwardConnProps = {},
-    reverseConnProps = {},
-    allowForwardArrowTooltip = false,
-    allowReverseArrowTooltip = false
+    className,
+    graphWidth,
+    showToolTip,
+    connections,
+    graphStyles,
+    graphHeight,
+    offsetHeight,
+    defaultStartX,
+    defaultStartY,
+    scrollerProps,
+    containerStyles,
+    lineStrokeColor,
+    defaultEleWidth,
+    scrollClassName,
+    forwardConnProps,
+    reverseConnProps,
+    defaultEleDistance,
+    offsetLineDistance,
+    allowForwardArrowTooltip,
+    allowReverseArrowTooltip
   } = _ref;
   const graphRef = (0, _react.useRef)(null);
   const [scrollbarPosition, setScrollbarPosition] = (0, _react.useState)(0);
-  const totalAvailWidth = nodes.length * defaultEleWidth + defaultEleDistance * (nodes.length - 1) - parseInt(String(graphWidth), 10);
+  const totalAvailWidth = nodes.length * defaultEleWidth + defaultEleDistance * (nodes.length - 1) - parseInt(graphWidth, 10);
   (0, _react.useEffect)(() => {
-    // Initialize graph and events
+    // Initlize graph and events
     initializeGraph();
     initializeEvents();
   }, []);
   (0, _react.useEffect)(() => {
-    // Draw nodes after graph initialization
+    // Draw nodes after graph inilization
     drawNodes();
   }, [nodes, connections]);
   (0, _react.useEffect)(() => {
-    // Initialize and set scroll position on pagination change
-    if (graphRef.current) {
-      graphRef.current.setScrollbarPosition(scrollbarPosition);
-    }
+    // Initilize and set scroll position on pagination change
+    graphRef.current.setScrollbarPosition(scrollbarPosition);
   }, [nodes, connections, scrollbarPosition]);
 
-  // Initialize Graph area
+  // Initlize Graph area
   const initializeGraph = (0, _react.useCallback)(() => {
     if (showToolTip) {
       _x.Graph.registerEdgeTool('tooltip', _Tooltip.default, true);
     }
-    const container = document.getElementById(graphId);
-    if (!container) {
-      console.error("[CapLevelGraphRenderer] Container with id \"" + graphId + "\" not found");
-      return;
-    }
-    // Convert string width/height to numbers if needed
-    const width = typeof graphWidth === 'string' ? parseInt(graphWidth, 10) : graphWidth;
-    const height = typeof graphHeight === 'string' ? parseInt(graphHeight, 10) : graphHeight;
     graphRef.current = new _x.Graph({
-      container,
+      container: document.getElementById(graphId),
       resizing: false,
-      width,
-      height,
-      // @ts-expect-error - @antv/x6 Graph options may not have complete TypeScript definitions
+      width: graphWidth,
+      height: graphHeight,
       fitView: true,
       scroller: _extends({
         padding: 0,
@@ -18016,7 +17990,7 @@ const CapLevelGraphRenderer = _ref => {
       }, scrollerProps),
       interacting: false
     });
-  }, [graphId, graphWidth, graphHeight, scrollClassName, scrollerProps, showToolTip]);
+  }, []);
   const drawNodes = (0, _react.useCallback)(function (eleWidth, distance, offsetY) {
     if (eleWidth === void 0) {
       eleWidth = defaultEleWidth;
@@ -18027,15 +18001,13 @@ const CapLevelGraphRenderer = _ref => {
     if (offsetY === void 0) {
       offsetY = offsetHeight;
     }
-    if (!graphRef.current) return;
     let nextX = defaultStartX;
     nodes.forEach((_ref2, index) => {
-      var _graphRef$current;
       let {
         id,
         component,
         height,
-        props = {},
+        props,
         toolTip = ''
       } = _ref2;
       const Component = component;
@@ -18043,7 +18015,7 @@ const CapLevelGraphRenderer = _ref => {
       const y = defaultStartY;
       const endX = nextX + eleWidth;
       // draw the node
-      (_graphRef$current = graphRef.current) == null || _graphRef$current.addNode({
+      graphRef.current.addNode({
         id,
         x,
         y,
@@ -18054,7 +18026,7 @@ const CapLevelGraphRenderer = _ref => {
         zIndex: 2
       });
 
-      // Adding node positions to obj
+      // Adding node poisitions to obj
       nodePostionObj[id] = {
         x,
         y,
@@ -18069,13 +18041,12 @@ const CapLevelGraphRenderer = _ref => {
       nextX = endX + distance;
       // Skip connection for last node
       if (nodes[index + 1]) {
-        var _graphRef$current2;
         // offsetY - Connection offset height from node point
         const forwardEdgeId = "" + id + idSeparator + nodes[index + 1].id;
         edgeObj[forwardEdgeId] = {
           forward: true
         };
-        (_graphRef$current2 = graphRef.current) == null || _graphRef$current2.addEdge({
+        graphRef.current.addEdge({
           id: forwardEdgeId,
           sourcePoint: {
             x: endX,
@@ -18094,13 +18065,12 @@ const CapLevelGraphRenderer = _ref => {
       }
       // Forward connection ends
     });
-    calculateAndDrawRevConnections();
-  }, [nodes, defaultEleWidth, defaultEleDistance, offsetHeight, defaultStartX, defaultStartY, lineStrokeColor, forwardConnProps]);
+    calculateAndDrawRevConnections(nodes);
+  }, [nodes]);
 
   // Calculate levels / Split connections based on level and Draw reverse connection
   const calculateAndDrawRevConnections = (0, _react.useCallback)(() => {
-    if (!graphRef.current) return;
-    let connectionListTemp = [...connections];
+    let connectionListTemp = connections;
     // maintains in and out list for each node
     const connectionObj = {};
     // maintains connections by level
@@ -18123,15 +18093,15 @@ const CapLevelGraphRenderer = _ref => {
             return source.id !== sourceId || target.id !== targetId;
           });
           // check if two nodes have connection or not
-          const isConnection = filterConnection.length !== connectionListTemp.length;
-          if (isConnection) {
+          const isConncection = filterConnection.length !== connectionListTemp.length;
+          if (isConncection) {
             // If connection, connections is assigned with filterList to avoid unwanted iteration
             connectionListTemp = filterConnection;
             if (!lastTargetIndex && levelIndex !== 1) {
               lastTargetIndex = targetIndex;
             }
-            // Put in next level when two connection get interacts
-            if (lastTargetIndex !== undefined && targetIndex <= lastTargetIndex && levelIndex !== 1) {
+            // Put in next level when two connection get intracts
+            if (targetIndex <= lastTargetIndex && levelIndex !== 1) {
               levels.push({
                 sourceId: source.id,
                 targetId: target.id
@@ -18174,8 +18144,8 @@ const CapLevelGraphRenderer = _ref => {
     drawReverseConnections(nodes, connectionObj, levelList);
   }, [connections, nodes]);
 
-  // Get height between two nodes having connection
-  // This Avoid connection overlaps over node
+  // Get height bewteen a two nodes having connection
+  // This Avoid connection overloops over node
   const getMaxHeight = (nodeList, sourceId, targetId) => {
     let maxY1 = 0;
     let isStart = false;
@@ -18183,11 +18153,9 @@ const CapLevelGraphRenderer = _ref => {
       let {
         id
       } = _ref4;
-      const position = nodePostionObj[id];
-      if (!position) return;
       const {
         y1
-      } = position;
+      } = nodePostionObj[id];
       if (id === targetId) {
         isStart = true;
       }
@@ -18203,45 +18171,38 @@ const CapLevelGraphRenderer = _ref => {
 
   // Draw reverse connection
   const drawReverseConnections = (nodeList, connectionObj, levelList) => {
-    if (!graphRef.current) return;
-
     // Iterate level list by level by level
     levelList.forEach((levels, index) => {
       // Iterate connection on a each level
       levels.forEach((_ref5, levelItemIndex) => {
-        var _graphRef$current3;
         let {
           sourceId,
           targetId
         } = _ref5;
-        const sourcePosition = nodePostionObj[sourceId];
-        const targetPosition = nodePostionObj[targetId];
-        if (!sourcePosition || !targetPosition) return;
-
         // Get source and target total connection count
         const srcConCount = connectionObj[sourceId].in.length + connectionObj[sourceId].out.length + 1;
         const targetConCount = connectionObj[targetId].in.length + connectionObj[targetId].out.length + 1;
 
         // split connection based on connection count for a node
-        let x = sourcePosition.x + sourcePosition.width / srcConCount;
-        let x1 = targetPosition.x1 - targetPosition.width / targetConCount;
+        let x = nodePostionObj[sourceId].x + nodePostionObj[sourceId].width / srcConCount;
+        let x1 = nodePostionObj[targetId].x1 - nodePostionObj[targetId].width / targetConCount;
         if (connectionObj[sourceId].out.includes(targetId)) {
           // set start position of connection, based on connection count and arrangements
-          x = sourcePosition.x + sourcePosition.width / srcConCount * ([...connectionObj[sourceId].out, ...connectionObj[sourceId].in].indexOf(targetId) + 1);
+          x = nodePostionObj[sourceId].x + nodePostionObj[sourceId].width / srcConCount * ([...connectionObj[sourceId].out, ...connectionObj[sourceId].in].indexOf(targetId) + 1);
         }
         if (connectionObj[targetId].in.includes(sourceId)) {
           // set end position of connection, based on connection count and arrangements
-          x1 = targetPosition.x1 - targetPosition.width / targetConCount * ([...connectionObj[targetId].in, ...connectionObj[targetId].out].indexOf(sourceId) + 1);
+          x1 = nodePostionObj[targetId].x1 - nodePostionObj[targetId].width / targetConCount * ([...connectionObj[targetId].in, ...connectionObj[targetId].out].indexOf(sourceId) + 1);
         }
 
-        // Handle connection overlaps over node
+        // Handle connection overloops over node
         const maxHeight = getMaxHeight(nodeList, sourceId, targetId);
         const {
           y1: y
-        } = sourcePosition;
+        } = nodePostionObj[sourceId];
         const {
           y1
-        } = targetPosition;
+        } = nodePostionObj[targetId];
         const v1 = {
           x,
           y: maxHeight + offsetLineDistance * (index + 1)
@@ -18254,7 +18215,7 @@ const CapLevelGraphRenderer = _ref => {
         edgeObj[reverseEdgeId] = {
           reverse: true
         };
-        (_graphRef$current3 = graphRef.current) == null || _graphRef$current3.addEdge({
+        graphRef.current.addEdge({
           id: reverseEdgeId,
           sourcePoint: [x, y],
           target: [x1, y1],
@@ -18271,9 +18232,8 @@ const CapLevelGraphRenderer = _ref => {
             }, reverseConnProps)
           }
         }).setConnector('jumpover');
-        // adding empty edge at last level
+        // adding emtpy edge at last level
         if (levelList.length - 1 === index && levels.length - 1 === levelItemIndex) {
-          var _graphRef$current4;
           const v3 = {
             x: v1.x - 8,
             y: v1.y + 8
@@ -18282,7 +18242,7 @@ const CapLevelGraphRenderer = _ref => {
             x: v2.x - 8,
             y: v2.y + 8
           };
-          (_graphRef$current4 = graphRef.current) == null || _graphRef$current4.addEdge({
+          graphRef.current.addEdge({
             id: "" + sourceId + idSeparator + targetId + "-end",
             sourcePoint: [x, y],
             target: [x1, y1],
@@ -18304,7 +18264,6 @@ const CapLevelGraphRenderer = _ref => {
     });
   };
   const initializeEvents = (0, _react.useCallback)(() => {
-    if (!graphRef.current) return;
     graphRef.current.on('node:mousedown', data => {
       const targetElement = (0, _get.default)(data, 'e.target', {});
       if (targetElement.tagName === 'INPUT') {
@@ -18317,14 +18276,12 @@ const CapLevelGraphRenderer = _ref => {
           edge = {}
         } = _ref6;
         const edgeId = edge.id;
-        if (edgeId && edgeObj[edgeId] && (allowForwardArrowTooltip && edgeObj[edgeId].forward || allowReverseArrowTooltip && edgeObj[edgeId].reverse)) {
+        if (edgeObj[edgeId] && (allowForwardArrowTooltip && edgeObj[edgeId].forward || allowReverseArrowTooltip && edgeObj[edgeId].reverse)) {
           const [sourceId, targetId] = edgeId.split(idSeparator);
           const sourceToolTip = (0, _get.default)(nodePostionObj, [sourceId, 'toolTip']);
           const targetToolTip = (0, _get.default)(nodePostionObj, [targetId, 'toolTip']);
           if (sourceToolTip && targetToolTip) {
-            // Type assertion needed because @antv/x6 Edge type may not expose addTools in TypeScript definitions
-            const edgeWithTools = edge;
-            edgeWithTools.addTools == null || edgeWithTools.addTools([{
+            edge.addTools([{
               name: 'tooltip',
               args: {
                 tooltip: sourceToolTip + " - " + targetToolTip
@@ -18337,34 +18294,33 @@ const CapLevelGraphRenderer = _ref => {
         let {
           edge
         } = _ref7;
-        // Type assertion needed because @antv/x6 Edge type may not expose removeTools in TypeScript definitions
-        edge.removeTools == null || edge.removeTools();
+        edge.removeTools();
       });
     }
-  }, [showToolTip, allowForwardArrowTooltip, allowReverseArrowTooltip]);
+  });
   const onPreviousPageClick = (0, _react.useCallback)(() => {
-    let newScrollValue = parseFloat((scrollbarPosition - (defaultEleWidth + defaultEleDistance)).toFixed(5));
+    let newScrollValue = parseFloat((scrollbarPosition - (defaultEleWidth + defaultEleDistance)).toFixed(5), 10);
     if (newScrollValue < 0) {
       newScrollValue = 0;
     }
     if (newScrollValue >= 0) setScrollbarPosition(newScrollValue);
-  }, [scrollbarPosition, defaultEleWidth, defaultEleDistance]);
+  }, [scrollbarPosition]);
   const onNextPageClick = (0, _react.useCallback)(() => {
-    let newScrollValue = parseFloat((scrollbarPosition + defaultEleWidth + defaultEleDistance).toFixed(5));
+    let newScrollValue = parseFloat((scrollbarPosition + defaultEleWidth + defaultEleDistance).toFixed(5), 10);
     if (newScrollValue > totalAvailWidth) {
       newScrollValue = totalAvailWidth;
     }
     if (newScrollValue <= totalAvailWidth) setScrollbarPosition(newScrollValue);
-  }, [nodes, scrollbarPosition, defaultEleWidth, defaultEleDistance, totalAvailWidth]);
+  }, [nodes, scrollbarPosition]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: (0, _classnames.default)(_styles.default['cap-level-graph-renderer-v2'], className),
+    className: (0, _classnames.default)('cap-level-graph-renderer-v2', className),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: _styles.default['level-graph-pagination-row'],
+      className: "level-graph-pagination-row",
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: _styles.default['level-graph-pagination-container'],
+        className: "level-graph-pagination-container",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CapButton.default, {
           type: "flat",
-          className: "" + _styles.default['level-graph-pagination-left'],
+          className: "pointer-cursor level-graph-pagination-left",
           disabled: scrollbarPosition <= 0,
           onClick: onPreviousPageClick,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapIcon.default, {
@@ -18372,8 +18328,8 @@ const CapLevelGraphRenderer = _ref => {
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapButton.default, {
           type: "flat",
-          className: "" + _styles.default['level-graph-pagination-right'],
-          disabled: parseFloat((scrollbarPosition + defaultEleWidth + defaultEleDistance).toFixed(5)) > totalAvailWidth,
+          className: "pointer-cursor level-graph-pagination-right",
+          disabled: parseFloat((scrollbarPosition + defaultEleWidth + defaultEleDistance).toFixed(5), 10) > totalAvailWidth,
           onClick: onNextPageClick,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapIcon.default, {
             type: "chevron-right"
@@ -18381,7 +18337,7 @@ const CapLevelGraphRenderer = _ref => {
         })]
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: _styles.default['graph-renderer-container'],
+      className: "graph-renderer-container",
       style: _extends({}, containerStyles),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         id: graphId,
@@ -18390,6 +18346,53 @@ const CapLevelGraphRenderer = _ref => {
     })]
   });
 };
+CapLevelGraphRenderer.propTypes = {
+  nodes: _propTypes.default.array,
+  showToolTip: _propTypes.default.bool,
+  className: _propTypes.default.string,
+  connections: _propTypes.default.array,
+  graphStyles: _propTypes.default.object,
+  offsetHeight: _propTypes.default.number,
+  defaultStartX: _propTypes.default.number,
+  defaultStartY: _propTypes.default.number,
+  scrollerProps: _propTypes.default.object,
+  scrollClassName: _propTypes.default.string,
+  containerStyles: _propTypes.default.object,
+  lineStrokeColor: _propTypes.default.string,
+  defaultEleWidth: _propTypes.default.number,
+  reverseConnProps: _propTypes.default.object,
+  forwardConnProps: _propTypes.default.object,
+  defaultEleDistance: _propTypes.default.number,
+  offsetLineDistance: _propTypes.default.number,
+  graphId: _propTypes.default.string.isRequired,
+  graphWidth: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  graphHeight: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  allowForwardArrowTooltip: _propTypes.default.bool,
+  allowReverseArrowTooltip: _propTypes.default.bool
+};
+CapLevelGraphRenderer.defaultProps = {
+  nodes: [],
+  className: '',
+  graphStyles: {},
+  connections: [],
+  defaultStartX: 0,
+  defaultStartY: 0,
+  offsetHeight: 20,
+  scrollerProps: {},
+  showToolTip: false,
+  containerStyles: {},
+  graphWidth: '500px',
+  scrollClassName: '',
+  graphHeight: '500px',
+  reverseConnProps: {},
+  forwardConnProps: {},
+  defaultEleWidth: 100,
+  defaultEleDistance: 20,
+  offsetLineDistance: 18,
+  lineStrokeColor: 'gray',
+  allowForwardArrowTooltip: false,
+  allowReverseArrowTooltip: false
+};
 var _default = exports["default"] = CapLevelGraphRenderer;
 })();