Improve the edges: add curve when nodes not aligned, improved visibility

Author: GREENRAT-K405

src/config/cytoscape-style.js

@@ -46,6 +46,7 @@ const style = [
         style: {
             curveStyle: 'bezier',
             targetArrowShape: 'triangle',
+            arrowScale: 1.2,
         },
     },
     {
@@ -54,7 +55,29 @@ const style = [
             width: 'data(style.thickness)',
             lineColor: 'data(style.backgroundColor)',
             targetArrowColor: 'data(style.backgroundColor)',
-            curveStyle: 'segments',
+            curveStyle: (ele) => {
+                const source = ele.source();
+                const target = ele.target();
+
+                // Get positions
+                const p1 = source.position();
+                const p2 = target.position();
+
+                // Calculate difference
+                const dx = Math.abs(p1.x - p2.x);
+                const dy = Math.abs(p1.y - p2.y);
+
+                // Define a threshold for what counts as "aligned"
+                const threshold = 10;
+
+                // If aligned horizontally OR vertically, be straight
+                if (dx < threshold || dy < threshold) {
+                    return 'straight';
+                }
+
+                // use unbundled-bezier to respect bend points
+                return 'unbundled-bezier';
+            },
             segmentDistances: 'data(bendData.bendDistance)',
             segmentWeights: 'data(bendData.bendWeight)',
             edgeDistances: 'node-position',
@@ -67,13 +90,13 @@ const style = [
             label: 'data(label)',
             edgeTextRotation: 'autorotate',
             zIndex: 999,
+            fontSize: 12,
             textBackgroundOpacity: 1,
-            color: '#000',
+            textBackgroundPadding: '3px',
+            textBorderWidth: 0,
+            color: '#333',
             textBackgroundColor: '#fff',
             textBackgroundShape: 'roundrectangle',
-            textBorderColor: '#fff',
-            textBorderWidth: 2,
-            textBorderOpacity: 1,
         },
     },
     {

src/config/defaultStyles.js

@@ -9,8 +9,8 @@ const NodeStyle = {
 };
 
 const EdgeStyle = {
-    thickness: 1,
-    backgroundColor: null,
+    thickness: 2,
+    backgroundColor: '#555',
     shape: 'solid',
 };
 

src/graph-builder/graph-core/1-core.js

@@ -39,6 +39,9 @@ class CoreGraph {
         }
         // if (cy) this.cy = cy;
         this.cy = cytoscape({ ...cyOptions, container: element });
+        this.cy.on('position', 'node', () => {
+            this.cy.edges().updateStyle();
+        });
         this.id = id;
         this.projectName = projectName;
         this.authorName = authorName;
@@ -81,50 +84,48 @@ class CoreGraph {
         this.cy.nodeEditing({
             resizeToContentCueEnabled: () => false,
             setWidth: (node, width) => {
-                // HARD ENFORCEMENT: Snap width every frame during resize
-                const snappedWidth = this.snapDimensionToGrid(width);
-                node.data('style', { ...node.data('style'), width: snappedWidth });
+                // Allow free resizing during drag - snapping will happen on resizeend
+                node.data('style', { ...node.data('style'), width });
 
                 // Adjust position to maintain edge alignment based on resize handle
                 const resizeType = node.scratch('resizeType');
                 if (resizeType && (resizeType.includes('left') || resizeType.includes('right'))) {
                     const currentPos = node.position();
                     const initialPos = node.scratch('resizeInitialPos');
                     const initialWidth = node.scratch('width');
-                    const widthDelta = snappedWidth - initialWidth;
+                    const widthDelta = width - initialWidth;
 
                     let newX = currentPos.x;
                     if (resizeType.includes('left')) {
                         newX = initialPos.x - widthDelta / 2;
                     } else if (resizeType.includes('right')) {
                         newX = initialPos.x + widthDelta / 2;
                     }
-                    node.position({ x: this.snapToGrid(newX), y: currentPos.y });
+                    node.position({ x: newX, y: currentPos.y });
                 }
-                return snappedWidth;
+                return width;
             },
             setHeight: (node, height) => {
-                // HARD ENFORCEMENT: Snap height every frame during resize
-                const snappedHeight = this.snapDimensionToGrid(height);
-                node.data('style', { ...node.data('style'), height: snappedHeight });
+                // Allow free resizing during drag - snapping will happen on resizeend
+                node.data('style', { ...node.data('style'), height });
 
                 // Adjust position to maintain edge alignment based on resize handle
                 const resizeType = node.scratch('resizeType');
                 if (resizeType && (resizeType.includes('top') || resizeType.includes('bottom'))) {
                     const currentPos = node.position();
                     const initialPos = node.scratch('resizeInitialPos');
                     const initialHeight = node.scratch('height');
-                    const heightDelta = snappedHeight - initialHeight;
+                    const heightDelta = height - initialHeight;
 
                     let newY = currentPos.y;
                     if (resizeType.includes('top')) {
                         newY = initialPos.y - heightDelta / 2;
                     } else if (resizeType.includes('bottom')) {
                         newY = initialPos.y + heightDelta / 2;
                     }
-                    node.position({ x: currentPos.x, y: this.snapToGrid(newY) });
+                    node.position({ x: currentPos.x, y: newY });
                 }
-                return snappedHeight;
+                return height;
             },
             isNoResizeMode(node) { return node.data('type') !== 'ordin'; },
             isNoControlsMode(node) { return node.data('type') !== 'ordin'; },