Merge pull request #57 from AToMPM/segment-restriction

Restrict edge ends to be within icon bounding box

client/behavioursc_canvas.js

@@ -405,7 +405,7 @@ __canvasBehaviourStatechart = {
 			else if( this.__currentState == this.__STATE_DRAGGING_CONNECTION_PATH_CTRL_POINT )
 			{
 				if( name == __EVENT_MOUSE_MOVE ) {
-                    ConnectionUtils.previewControlPointTranslation(GUIUtils.convertToCanvasX(event), GUIUtils.convertToCanvasY(event));
+                    ConnectionUtils.previewControlPointTranslation(GUIUtils.convertToCanvasX(event), GUIUtils.convertToCanvasY(event), event.ctrlKey);
 				}
 				else if( name == __EVENT_LEFT_RELEASE_CTRL_POINT )
 				{

client/connection_utils.js

@@ -200,18 +200,68 @@ ConnectionUtils = function(){
 		connectionPathEditingOverlay = {};
 		currentControlPoint = undefined;
 	};
-	
-	/**
-	 * Moves the control point and its overlay to the specified coordinates
-	 */
-	this.previewControlPointTranslation = function(x,y){
-		var _x = parseInt( currentControlPoint.node.getAttribute('_x') ),
-			 _y = parseInt( currentControlPoint.node.getAttribute('_y') );
-		currentControlPoint.translate(x-_x,y-_y);
-		currentControlPoint.node.setAttribute('_x',x);
-		currentControlPoint.node.setAttribute('_y',y);
-		ConnectionUtils.updateConnectionPath(true);
-	};
+
+    /**
+     * Moves the control point and its overlay to the specified coordinates
+     */
+    this.previewControlPointTranslation = function (x, y, ctrl_key_down) {
+
+        // if the control key is not down,
+        // restrict control point to within bounding box
+        if (!ctrl_key_down) {
+            let new_points = this.restrictControlPoint(x, y);
+            x = new_points[0];
+            y = new_points[1];
+        }
+
+        let _x = parseInt(currentControlPoint.node.getAttribute('_x')),
+            _y = parseInt(currentControlPoint.node.getAttribute('_y'));
+
+        currentControlPoint.translate(x - _x, y - _y);
+
+        currentControlPoint.node.setAttribute('_x', x);
+        currentControlPoint.node.setAttribute('_y', y);
+        ConnectionUtils.updateConnectionPath(true);
+    };
+
+    /**
+     * Restricts the control point to within an icon's bounding box
+     */
+    this.restrictControlPoint = function (x, y) {
+        let start = currentControlPoint.node.getAttribute("__start");
+        let end = currentControlPoint.node.getAttribute("__end");
+
+        // something went wrong, or we're not an
+		// outside edge, so return the points
+        if (start == undefined && end == undefined) {
+            return [x, y];
+        }
+
+        //get the bounding box rectangle
+        let icon = __getIcon(start || end);
+        let bbox = icon.getBBox();
+
+        //get the dimensions
+        let iconX = bbox.x;
+        let iconY = bbox.y;
+
+        let width = bbox.width;
+        let height = bbox.height;
+
+        //restrict x and y to within the bounding box
+        if (x < iconX) {
+            x = iconX;
+        } else if (x > iconX + width) {
+            x = iconX + width;
+        }
+
+        if (y < iconY) {
+            y = iconY;
+        } else if (y > iconY + height) {
+            y = iconY + height;
+        }
+        return [Math.round(x), Math.round(y)];
+    };
 	
 	/**
 	 * Show the connection path editing overlay. This shows draggable circles

doc/overview.rst

@@ -226,6 +226,10 @@ When in the **EDGE EDITING** state,
 | Action                                | Shortcut(s)                                                                 |
 +=======================================+=============================================================================+
 | Move control point                    | Left-press any control point, drag it to desired position and release.      |
+|                                       |                                                                             |
+|                                       | If editing a control point attached to an icon, movement is restricted to   |
+|                                       | within that icon's bounding box. If free movement is desired,               |
+|                                       | hold CTRL while moving the control point.                                   |
 +---------------------------------------+-----------------------------------------------------------------------------+
 | Vertically/Horizontally align control | Left-click any control point and click TAB.                                 |
 | point to previous control point       |                                                                             |