1 files changed, 40 insertions, 26 deletions

diff --git a/catalog-ui/src/third-party/cytoscape.js-edge-editation/CytoscapeEdgeEditation.js b/catalog-ui/src/third-party/cytoscape.js-edge-editation/CytoscapeEdgeEditation.js
index 2da6f786ea..0e6ca8b3c2 100644
--- a/catalog-ui/src/third-party/cytoscape.js-edge-editation/CytoscapeEdgeEditation.js
+++ b/catalog-ui/src/third-party/cytoscape.js-edge-editation/CytoscapeEdgeEditation.js
@@ -199,19 +199,7 @@
 
             this._resizeCanvas();
 
-            this._arrowEnd = this._cy.add({
-                group: "nodes",
-                data: {
-                    "id": this.ARROW_END_ID,
-                    "position": {x: 150, y: 150}
-                }
-            });
 
-            this._arrowEnd.css({
-                "opacity": 0,
-                'width': 0.0001,
-                'height': 0.0001
-            });
 
         },
         registerHandle: function (handle) {
@@ -250,13 +238,14 @@
         _drawHandle: function (handle, target) {
 
             var position = this._getHandlePosition(handle, target);
-
+            var handleSize = this.HANDLE_SIZE * this._cy.zoom();
+            
             this._ctx.beginPath();
 
             if (handle.imageUrl) {
                 var base_image = new Image();
                 base_image.src = handle.imageUrl;
-                this._ctx.drawImage(base_image, position.x, position.y, this.HANDLE_SIZE, this.HANDLE_SIZE);
+                this._ctx.drawImage(base_image, position.x, position.y, handleSize, handleSize);
             } else {
                 this._ctx.arc(position.x, position.y, this.HANDLE_SIZE, 0, 2 * Math.PI, false);
                 this._ctx.fillStyle = handle.color;
@@ -272,6 +261,22 @@
             if (this._hover) {
                 toNode = this._hover;
             } else {
+                if (!this._arrowEnd) {
+                    this._arrowEnd = this._cy.add({
+                        group: "nodes",
+                        data: {
+                            "id": this.ARROW_END_ID,
+                            "position": { x: 150, y: 150 }
+                        }
+                    });
+
+                    this._arrowEnd.css({
+                        "opacity": 0,
+                        'width': 0.0001,
+                        'height': 0.0001
+                    });                   
+                }
+
                 this._arrowEnd.renderedPosition(toPosition);
                 toNode = this._arrowEnd;
             }
@@ -301,6 +306,11 @@
                 this._edge.remove();
                 this._edge = null;
             }
+
+            if (this._arrowEnd) {
+                this._arrowEnd.remove();
+                this._arrowEnd = null;
+            }
         },
         _resizeCanvas: function () {
             this._$canvas
@@ -449,7 +459,8 @@
                         var handle = handles[i];
 
                         var position = this._getHandlePosition(handle, this._hover);
-                        if (VectorMath.distance(position, mousePoisition) < this.HANDLE_SIZE) {
+                        var renderedHandleSize = this.HANDLE_SIZE * this._cy.zoom(); //actual number of pixels that handle uses.
+                        if (VectorMath.distance(position, mousePoisition) < renderedHandleSize) {
                             return {
                                 handle: handle,
                                 position: position
@@ -459,19 +470,20 @@
                 }
             }
         },
-        _getHandlePosition: function (handle, target) {
+        _getHandlePosition: function (handle, target) { //returns the upper left point at which to begin drawing the handle
             var position = target.renderedPosition();
-            var width = target.renderedOuterWidth();
-            var height = target.renderedOuterHeight();
+            var width = target.renderedWidth();
+            var height = target.renderedHeight();
+            var renderedHandleSize = this.HANDLE_SIZE * this._cy.zoom(); //actual number of pixels that handle will use.
             var xpos = null;
             var ypos = null;
 
             switch (handle.positionX) {
                 case "left":
-                    xpos = position.x - width / 2 + this.HANDLE_SIZE;
+                    xpos = position.x - width / 2;
                     break;
-                case "right":
-                    xpos = position.x + width / 2 - this.HANDLE_SIZE;
+                case "right": //position.x is the exact center of the node. Need to add half the width to get to the right edge. Then, subtract renderedHandleSize to get handle position
+                    xpos = position.x + width / 2 - renderedHandleSize;
                     break;
                 case "center":
                     xpos = position.x;
@@ -480,19 +492,21 @@
 
             switch (handle.positionY) {
                 case "top":
-                    ypos = position.y - height / 2 + this.HANDLE_SIZE;
+                    ypos = position.y - height / 2;
                     break;
                 case "center":
                     ypos = position.y;
                     break;
                 case "bottom":
-                    ypos = position.y + height / 2 - this.HANDLE_SIZE;
+                    ypos = position.y + height / 2;
                     break;
             }
 
-            var offsetX = handle.offsetX ? handle.offsetX : 0;
-            var offsetY = handle.offsetY ? handle.offsetY : 0;
-            return {x: xpos + offsetX, y: ypos + offsetY};
+            //Determine if handle will be too big and require offset to prevent it from covering too much of the node icon (in which case, move it over by 1/2 the renderedHandleSize, so half the handle overlaps).
+            //Need to use target.width(), which is the size of the node, unrelated to rendered size/zoom
+            var offsetX = (target.width() < 30) ? renderedHandleSize / 2 : 0; 
+            var offsetY = (target.height() < 30) ? renderedHandleSize /2 : 0;
+            return {x: xpos + offsetX, y: ypos - offsetY};
         },
         _getEdgeCSSByHandle: function (handle) {
             var color = handle.lineColor ? handle.lineColor : handle.color;