Made connector lines start/end at bounding box edges, made arrow appear on end of line

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@1336 eee81c28-f429-11dd-99c0-75d572ba1ddd

editor/svgcanvas.js

@@ -7080,7 +7080,8 @@ function BatchCommand(text) {
 		// This shouldn't ever happen...
 		if(full_bb == null) return null;
 		
-		if(elems.length == 1) return full_bb;
+		// full_bb doesn't include the stoke, so this does no good!
+// 		if(elems.length == 1) return full_bb;
 		
 		var max_x = full_bb.x + full_bb.width;
 		var max_y = full_bb.y + full_bb.height;

extensions/ext-arrows.js

@@ -30,7 +30,7 @@ $(function() {
 			$('#arrow_panel').toggle(on);
 			
 			if(on) {
-				var has_arrow = selElems[0].getAttribute("marker-mid");
+				var has_arrow = selElems[0].getAttribute("marker-end");
 				$("#arrow_list").val(has_arrow?"arrow":"none");
 			}
 		}
@@ -46,7 +46,7 @@ $(function() {
 					"attr": {
 						"viewBox": "0 0 10 10",
 						"id": m_id,
-						"refX": 5,
+						"refX": 10,
 						"refY": 5,
 						"markerUnits": "strokeWidth",
 						"markerWidth": 5,
@@ -66,11 +66,11 @@ $(function() {
 				defs.appendChild(marker);
 			}
 			
-			selElems[0].setAttribute("marker-mid", "url(#" + m_id + ")");
+			selElems[0].setAttribute("marker-end", "url(#" + m_id + ")");
 		}
 
 		function remArrow() {
-			selElems[0].removeAttribute("marker-mid");
+			selElems[0].removeAttribute("marker-end");
 		}
 		
 		

extensions/ext-connector.js

@@ -113,14 +113,12 @@ $(function() {
 					var end = $(this).data("c_end");
 					if(start == elem.id || end == elem.id) {
 						var bb = svgCanvas.getStrokedBBox([elem]);
-						var x = bb.x + bb.width/2;
-						var y = bb.y + bb.height/2;
 						connections.push({
 							elem: elem,
 							connector: this,
 							is_start: start == elem.id,
-							start_x: x,
+							start_x: bb.x,
-							start_y: y
+							start_y: bb.y
 						});	
 					}
 				});
@@ -139,14 +137,54 @@ $(function() {
 					var conn = connections[i];
 					var line = conn.connector;
 					var elem = conn.elem;
+
+					var pre = conn.is_start?'start':'end';
+					
+					// Update bbox for this element
 					var bb = svgCanvas.getStrokedBBox([elem]);
-					var pt_x = bb.x + bb.width/2;
+					bb.x = conn.start_x;
-					var pt_y = bb.y + bb.height/2;
+					bb.y = conn.start_y;
-					setPoint(line, conn.is_start?0:'end', pt_x, pt_y, true);
+					$(line).data(pre+'_bb', bb);
+					
+					var alt_pre = conn.is_start?'end':'start';
+					
+					// Get center pt of connected element
+					var bb2 = $(line).data(alt_pre+'_bb');
+					var src_x = bb2.x + bb2.width/2;
+					var src_y = bb2.y + bb2.height/2;
+					
+					// Set point of element being moved
+					var pt = getBBintersect(src_x, src_y, bb);
+					setPoint(line, conn.is_start?0:'end', pt.x, pt.y, true);
+					
+					// Set point of connected element
+					var pt2 = getBBintersect(pt.x, pt.y, $(line).data(alt_pre + '_bb'));
+					setPoint(line, conn.is_start?'end':0, pt2.x, pt2.y, true);
 				}
 			}
 		}
 		
+		function getBBintersect(x, y, bb) {
+			var mid_x = bb.x + bb.width/2;
+			var mid_y = bb.y + bb.height/2;
+			var len_x = x - mid_x;
+			var len_y = y - mid_y;
+			
+			var slope = Math.abs(len_y/len_x);
+			
+			var ratio;
+			
+			if(slope < bb.height/bb.width) {
+				ratio = (bb.width/2) / Math.abs(len_x);
+			} else {
+				ratio = (bb.height/2) / Math.abs(len_y);
+			}
+			return {
+				x: mid_x + len_x * ratio,
+				y: mid_y + len_y * ratio
+			}
+		}
+		
 		// Do once
 		(function() {
 			var gse = svgCanvas.groupSelectedElements;
@@ -180,9 +218,20 @@ $(function() {
 					svgCanvas.getEditorNS(true);
 				}
 			});
-			findConnectors();
+// 			updateConnectors();
 		}
 		
+// 		$(svgroot).parent().mousemove(function(e) {
+// // 			if(started 
+// // 				|| svgCanvas.getMode() != "connector"
+// // 				|| e.target.parentNode.parentNode != svgcontent) return;
+// 			
+// 			console.log('y')
+// // 			if(e.target.parentNode.parentNode === svgcontent) {
+// // 					
+// // 			}
+// 		});
+		
 		return {
 			name: "Connector",
 			svgicons: "images/conn.svg",
@@ -240,12 +289,14 @@ $(function() {
 								"id": getNextId(),
 								"points": (x+','+y+' '+x+','+y+' '+start_x+','+start_y),
 								"stroke": '#000',
-								"stroke-width": 1,
+								"stroke-width": 3,
 								"fill": "none",
 								"opacity": .5,
 								"style": "pointer-events:none"
 							}
 						});
+						
+						$(cur_line).data('start_bb', bb);
 					}
 					return {
 						started: true
@@ -266,7 +317,15 @@ $(function() {
 				var mode = svgCanvas.getMode();
 				
 				if(mode == "connector" && started) {
-					// Set middle point for marker
+
+					// Set start point (adjusts based on bb)
+					var pt = getBBintersect(x, y, $(cur_line).data('start_bb'));
+					start_x = pt.x;
+					start_y = pt.y;
+					
+					setPoint(cur_line, 0, pt.x, pt.y, true);
+					
+					// Set end point
 					setPoint(cur_line, 'end', x, y, true);
 				} else if(mode == "select") {
 					var slen = selElems.length;
@@ -288,10 +347,32 @@ $(function() {
 							var conn = connections[i];
 							var line = conn.connector;
 							var elem = conn.elem;
-							var pt_x = conn.start_x + diff_x;
+							
-							var pt_y = conn.start_y + diff_y;
+							var pre = conn.is_start?'start':'end';
-							setPoint(line, conn.is_start?0:'end', pt_x, pt_y, true);
+							
+							// Update bbox for this element
+							var bb = $(line).data(pre+'_bb');
+							bb.x = conn.start_x + diff_x;
+							bb.y = conn.start_y + diff_y;
+							$(line).data(pre+'_bb', bb);
+							
+							var alt_pre = conn.is_start?'end':'start';
+							
+							// Get center pt of connected element
+							var bb2 = $(line).data(alt_pre+'_bb');
+							var src_x = bb2.x + bb2.width/2;
+							var src_y = bb2.y + bb2.height/2;
+							
+							// Set point of element being moved
+							var pt = getBBintersect(src_x, src_y, bb);
+							setPoint(line, conn.is_start?0:'end', pt.x, pt.y, true);
+							
+							// Set point of connected element
+							var pt2 = getBBintersect(pt.x, pt.y, $(line).data(alt_pre + '_bb'));
+							setPoint(line, conn.is_start?'end':0, pt2.x, pt2.y, true);
+
 						}
+						
 					}
 				} 
 			},
@@ -340,12 +421,13 @@ $(function() {
 						}
 						
 						var bb = svgCanvas.getStrokedBBox([end_elem]);
-						var x = bb.x + bb.width/2;
+						
-						var y = bb.y + bb.height/2;
+						var pt = getBBintersect(start_x, start_y, bb);
-						setPoint(cur_line, 'end', x, y, true);
+						setPoint(cur_line, 'end', pt.x, pt.y, true);
 						$(cur_line)
 							.data("c_start", start_id)
-							.data("c_end", end_id);
+							.data("c_end", end_id)
+							.data("end_bb", bb);
 						se_ns = svgCanvas.getEditorNS(true);
 						cur_line.setAttributeNS(se_ns, "se:connector", conn_str);
 						cur_line.setAttribute('class', conn_sel.substr(1));
@@ -392,7 +474,15 @@ $(function() {
 				}
 				
 				updateConnectors();
-			}
+			},
+// 			toolButtonStateUpdate: function(opts) {
+// 				if(opts.nostroke) {
+// 					if ($('#mode_connect').hasClass('tool_button_current')) {
+// 						clickSelect();
+// 					}
+// 				}
+// 				$('#mode_connect').toggleClass('tool_button',opts.nostroke).toggleClass('tool_button_disabled',opts.nostroke);
+// 			}
 		};
 	});
 });