cytoscape-edge-bend-editing - npm Package Compare versions

Comparing version 1.1.3 to 1.1.4

package.json

 {
   "name": "cytoscape-edge-bend-editing",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "A Cytoscape.js extension enables editing edge bend points",
@@ -5,0 +5,0 @@ "main": "cytoscape-edge-bend-editing.js",

README.md

@@ -12,8 +12,9 @@ cytoscape-edge-bend-editing
 A Cytoscape.js extension enables editing edge bend points. 
- * To add a bend point right click where you want to add the bend point and click 'Add Bend Point' on the context menu. 
- * To remove a bend point click on the bend point and click 'Remove Bend Point' on the context menu. 
- * To move a bend point drag and drop it.
-    (Note that these operations can be performed if the edge is selected)
+ * To add a bend point select the edge, right click where you want to add the bend point and click 'Add Bend Point' on the context menu (requires 'cytoscape.js-context-menus' extension). 
+ * To remove a bend point select the edge, right click on the bend point and click 'Remove Bend Point' on the context menu (requires 'cytoscape.js-context-menus' extension). 
+ * To move a bend point drag and drop it when the edge is selected.
+ * Alternatively, 
+    * You can click anywhere on the edge to introduce and relocate a bend point by dragging.
+    * A bend point is removed if it is dropped near to the line between its neighbours.
 
-
 ## Dependencies
@@ -23,2 +24,3 @@
  * cytoscape-undo-redo.js(optional) ^1.0.1
+ * cytoscape-context-menus.js(optional) ^1.0.3
 
@@ -25,0 +27,0 @@

src/bendPointUtilities.js

@@ -192,3 +192,6 @@ var bendPointUtilities = {
     
-    var weight = intersectX == srcPoint.x?0:(intersectX - srcPoint.x) / (tgtPoint.x - srcPoint.x);
+    var d1 = this.calculateDistance(srcPoint, tgtPoint);
+    var d2 = this.calculateDistance(srcPoint, intersectionPoint);
+    var weight = d2 / d1;
+    
     var distance = Math.sqrt(Math.pow((intersectY - bendPoint.y), 2)
@@ -262,7 +265,9 @@ + Math.pow((intersectX - bendPoint.x), 2));
     
-    var edgeStartX = edge._private.rscratch.startX;
-    var edgeStartY = edge._private.rscratch.startY;
-    var edgeEndX = edge._private.rscratch.endX;
-    var edgeEndY = edge._private.rscratch.endY;
+    var startAndEndPoints = this.getStartAndEndPoints(edge);
     
+    var edgeStartX = startAndEndPoints.startX;
+    var edgeStartY = startAndEndPoints.startY;
+    var edgeEndX = startAndEndPoints.endX;
+    var edgeEndY = startAndEndPoints.endY;
+    
     var startWeight = this.convertToRelativeBendPosition(edge, {x: edgeStartX, y: edgeStartY}).weight;
@@ -387,2 +392,27 @@ var endWeight = this.convertToRelativeBendPosition(edge, {x: edgeEndX, y: edgeEndY}).weight;
     return dist;
+  },
+  // Get the start and end points of the given edge in case of they are not included in rscratch
+  getStartAndEndPoints: function(edge) {
+    var rs = edge._private.rscratch;
+    var isHaystack = rs.edgeType === 'haystack';
+    var startX, startY, endX, endY;
+    
+    if( isHaystack ){
+      startX = rs.haystackPts[0];
+      startY = rs.haystackPts[1];
+      endX = rs.haystackPts[2];
+      endY = rs.haystackPts[3];
+    } else {
+      startX = rs.arrowStartX;
+      startY = rs.arrowStartY;
+      endX = rs.arrowEndX;
+      endY = rs.arrowEndY;
+    }
+    
+    return {
+      startX: startX,
+      startY: startY,
+      endX: endX,
+      endY: endY
+    };
   }
@@ -389,0 +419,0 @@ };

src/index.js

@@ -49,9 +49,2 @@ ;(function($$, $){ 'use strict';
       
-      if(cy.contextMenus == null) {
-        var exceptionStr = "To use cytoscape.js-edge-bend-editing extension you must include cytoscape.js-context-menus extension"
-          + "\n" + "Please see 'https://github.com/iVis-at-Bilkent/cytoscape.js-context-menus'";
-  
-        throw exceptionStr;
-      }
-      
       // merge the options with default ones
@@ -58,0 +51,0 @@ options = extend(defaults, opts);

src/UIUtilities.js

@@ -74,13 +74,15 @@ var debounce = require('./debounce');
       
-      // If context menus is active just append menu items else activate the extension
-      // with initial menu items
-      if (cy.isContextMenusActive()) {
-        cy.appendMenuItems(menuItems);
+      if(cy.contextMenus) {
+        // If context menus is active just append menu items else activate the extension
+        // with initial menu items
+        if (cy.isContextMenusActive()) {
+          cy.appendMenuItems(menuItems);
+        }
+        else {
+          cy.contextMenus({
+            menuItems: menuItems,
+            menuItemClasses: ['cy-edge-bend-editing-cxt-operation']
+          });
+        }
       }
-      else {
-        cy.contextMenus({
-          menuItems: menuItems,
-          menuItemClasses: ['cy-edge-bend-editing-cxt-operation']
-        });
-      }
       
@@ -318,10 +320,12 @@ var _sizeCanvas = debounce(function () {
         var moveBendParam;
+        var createBendOnDrag;
         
         cy.on('tapstart', 'edge', eTapStart = function (event) {
           var edge = this;
+          movedBendEdge = edge;
           
           moveBendParam = {
             edge: edge,
-            weights: edge.scratch('cyedgebendeditingWeights') ? [].concat(edge.scratch('cyedgebendeditingWeights')) : edge.scratch('cyedgebendeditingWeights'),
-            distances: edge.scratch('cyedgebendeditingDistances') ? [].concat(edge.scratch('cyedgebendeditingDistances')) : edge.scratch('cyedgebendeditingDistances')
+            weights: edge.scratch('cyedgebendeditingWeights') ? [].concat(edge.scratch('cyedgebendeditingWeights')) : [],
+            distances: edge.scratch('cyedgebendeditingDistances') ? [].concat(edge.scratch('cyedgebendeditingDistances')) : []
           };
@@ -335,5 +339,8 @@
             movedBendIndex = index;
-            movedBendEdge = edge;
+//            movedBendEdge = edge;
             disableGestures();
           }
+          else {
+            createBendOnDrag = true;
+          }
         });
@@ -344,2 +351,10 @@
           
+          if(createBendOnDrag) {
+            bendPointUtilities.addBendPoint(edge, event.cyPosition);
+            movedBendIndex = getContainingBendShapeIndex(event.cyPosition.x, event.cyPosition.y, edge);
+            movedBendEdge = edge;
+            createBendOnDrag = undefined;
+            disableGestures();
+          }
+          
           if (movedBendEdge === undefined || movedBendIndex === undefined) {
@@ -365,2 +380,71 @@ return;
           
+          if( edge !== undefined ) {
+            if( movedBendIndex != undefined ) {
+              var startAndEndPoints = bendPointUtilities.getStartAndEndPoints(edge);
+              
+              var edgeStartX = startAndEndPoints.startX;
+              var edgeStartY = startAndEndPoints.startY;
+              var edgeEndX = startAndEndPoints.endX;
+              var edgeEndY = startAndEndPoints.endY;
+              
+              var segPts = bendPointUtilities.getSegmentPoints(edge);
+              var allPts = [edgeStartX, edgeStartY].concat(segPts).concat([edgeEndX, edgeEndY]);
+              
+              var pointIndex = movedBendIndex + 1;
+              var preIndex = pointIndex - 1;
+              var posIndex = pointIndex + 1;
+              
+              var point = {
+                x: allPts[2 * pointIndex],
+                y: allPts[2 * pointIndex + 1]
+              };
+              
+              var prePoint = {
+                x: allPts[2 * preIndex],
+                y: allPts[2 * preIndex + 1]
+              };
+              
+              var posPoint = {
+                x: allPts[2 * posIndex],
+                y: allPts[2 * posIndex + 1]
+              };
+              
+              var nearToLine;
+              
+              if( ( point.x === prePoint.x && point.y === prePoint.y ) || ( point.x === prePoint.x && point.y === prePoint.y ) ) {
+                nearToLine = true;
+              }
+              else {
+                var m1 = ( prePoint.y - posPoint.y ) / ( prePoint.x - posPoint.x );
+                var m2 = -1 / m1;
+
+                var srcTgtPointsAndTangents = {
+                  srcPoint: prePoint,
+                  tgtPoint: posPoint,
+                  m1: m1,
+                  m2: m2
+                };
+
+                //get the intersection of the current segment with the new bend point
+                var currentIntersection = bendPointUtilities.getIntersection(edge, point, srcTgtPointsAndTangents);
+                var dist = Math.sqrt( Math.pow( (point.x - currentIntersection.x), 2 ) 
+                        + Math.pow( (point.y - currentIntersection.y), 2 ));
+                
+//                var length = Math.sqrt( Math.pow( (posPoint.x - prePoint.x), 2 ) 
+//                        + Math.pow( (posPoint.y - prePoint.y), 2 ));
+                
+                if( dist  < 8 ) {
+                  nearToLine = true;
+                }
+                
+              }
+              
+              if( nearToLine )
+              {
+                bendPointUtilities.removeBendPoint(edge, movedBendIndex);
+              }
+              
+            }
+          }
+          
           if (edge !== undefined && moveBendParam !== undefined && edge.scratch('cyedgebendeditingWeights')
@@ -377,2 +461,3 @@ && edge.scratch('cyedgebendeditingWeights').toString() != moveBendParam.weights.toString()) {
           moveBendParam = undefined;
+          createBendOnDrag = undefined;
 
@@ -379,0 +464,0 @@ resetGestures();

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

186362

increased by8.29%

Lines of code

2945

increased by7.64%

Number of lines in readme file

95

increased by2.15%

No dependency changes