xcos-wires-final

1 files changed, 463 insertions, 37 deletions

diff --git a/index.html b/index.html
index 368e171..ad96921 100644
--- a/index.html
+++ b/index.html
@@ -24,11 +24,29 @@
 	<script src="jquery/jquery-1.8.2.js"></script>
 	<script type="text/javascript" src="details.js"></script>
 	<script type="text/javascript" src="json2.js"></script>
-	<!-- Example code -->
 	<script type="text/javascript">
-		// Program starts here. Creates a sample graph in the
-		// DOM node with the specified ID. This function is invoked
-		// from the onLoad event handler of the document (see below).
+		// If connect preview is not moved away then getCellAt is used to detect the cell under
+		// the mouse if the mouse is over the preview shape in IE (no event transparency), ie.
+		// the built-in hit-detection of the HTML document will not be used in this case.
+		mxConnectionHandler.prototype.movePreviewAway = false;
+		mxConnectionHandler.prototype.waypointsEnabled = true;
+		mxGraph.prototype.resetEdgesOnConnect = false;
+		mxConstants.SHADOWCOLOR = '#C0C0C0';
+
+
+
+		// Enables guides
+		mxGraphHandler.prototype.guidesEnabled = true;
+
+	    // Alt disables guides
+	    mxGuide.prototype.isEnabledForEvent = function(evt)
+	    {
+	    	return !mxEvent.isAltDown(evt);
+	    };
+
+		// Enables snapping waypoints to terminals
+		mxEdgeHandler.prototype.snapToTerminals = true;
+
 		function main(container, outline, toolbar, sidebar, status)
 		{
 			// Checks if the browser is supported
@@ -46,18 +64,6 @@
 				// windows and the rubberband selection.
 				mxConstants.MIN_HOTSPOT_SIZE = 16;
 				mxConstants.DEFAULT_HOTSPOT = 1;
-				
-				// Enables guides
-				mxGraphHandler.prototype.guidesEnabled = true;
-
-			    // Alt disables guides
-			    mxGuide.prototype.isEnabledForEvent = function(evt)
-				{
-					return !mxEvent.isAltDown(evt);
-				};
-
-				// Enables snapping waypoints to terminals
-				mxEdgeHandler.prototype.snapToTerminals = true;
 
 				// Workaround for Internet Explorer ignoring certain CSS directives
 				if (mxClient.IS_QUIRKS)
@@ -69,7 +75,7 @@
 					new mxDivResizer(sidebar);
 					new mxDivResizer(status);
 				}
-				
+
 				// Creates a wrapper editor with a graph inside the given container.
 				// The editor is used to create certain functionality for the
 				// graph, such as the rubberband selection, but most parts
@@ -78,15 +84,16 @@
 				var graph = editor.graph;
 				var model = graph.getModel();
 
+				graph.view.scale = 1;
+				graph.setPanning(true);
+				graph.setConnectable(true);
+				graph.setConnectableEdges(true);
+				graph.setDisconnectOnMove(false);
+				graph.foldingEnabled = false;
+
 				// Disable highlight of cells when dragging from toolbar
 				graph.setDropEnabled(false);
 
-				// Uses the port icon while connections are previewed
-				graph.connectionHandler.getConnectImage = function(state)
-				{
-					return new mxImage(state.style[mxConstants.STYLE_IMAGE], 16, 16);
-				};
-
 				// Centers the port icon on the target port
 				graph.connectionHandler.targetConnectImage = true;
 
@@ -95,6 +102,7 @@
 
 				// Sets the graph container and configures the editor
 				editor.setGraphContainer(container);
+
 				//var config = mxUtils.load('config/editor-commons.xml').getDocumentElement();
 				var config = mxUtils.load('config/keyhandler-commons.xml').getDocumentElement();
 				editor.configure(config);
@@ -190,7 +198,8 @@
 					// Disables any default behaviour for the double click
 					mxEvent.consume(evt);
 				};
-				
+
+
 				graph.getTooltipForCell = function(cell){
 					var text = null;
 					// If cell is a block or port
@@ -248,6 +257,10 @@
 
 				// Adds sidebar icons.
 				addIcons(graph,sidebar);
+
+				var style = graph.getStylesheet().getDefaultEdgeStyle();			
+
+				style['edgeStyle'] = 'wireEdgeStyle';
 				
 				// Creates a new DIV that is used as a toolbar and adds
 				// toolbar buttons.
@@ -380,9 +393,47 @@
 			    keyHandler.bindKey(40, function(){
 			    	nudge(40);
 			    });
+
+				// Starts connections on the background in wire-mode
+				var connectionHandlerIsStartEvent = graph.connectionHandler.isStartEvent;
+				graph.connectionHandler.isStartEvent = function(me)
+				{
+					return connectionHandlerIsStartEvent.apply(this, arguments);
+				};
+
+				// Avoids any connections for gestures within tolerance except when in wire-mode
+				// or when over a port
+				var connectionHandlerMouseUp = graph.connectionHandler.mouseUp;
+				graph.connectionHandler.mouseUp = function(sender, me)
+				{
+					if (this.first != null && this.previous != null)
+					{
+						var point = mxUtils.convertPoint(this.graph.container, me.getX(), me.getY());
+						var dx = Math.abs(point.x - this.first.x);
+						var dy = Math.abs(point.y - this.first.y);
+
+						if (dx < this.graph.tolerance && dy < this.graph.tolerance)
+						{
+							// Selects edges in non-wire mode for single clicks, but starts
+							// connecting for non-edges regardless of wire-mode
+							if (this.graph.getModel().isEdge(this.previous.cell))
+							{
+								this.reset();
+							}
+
+							return;
+						}
+					}
+
+					connectionHandlerMouseUp.apply(this, arguments);
+				};
+
+
+				mxEvent.disableContextMenu(container);
 			}
-		}
-		
+		};
+
+
 		function createButtonImage(button, image){
 			if (image != null)
 			{
@@ -481,7 +532,8 @@
 			graph.tooltipHandler.hide();
 			wnd.setVisible(true);
 		};
-		
+
+
 		function addSidebarIcon(graph, sidebar, name, image)
 		{
 			
@@ -1037,7 +1089,7 @@
 				}
 			}
 		};
-		
+
 		function configureStylesheet(graph)
 		{
 			var req = mxUtils.load('styles/Xcos-style.xml');
@@ -1046,6 +1098,388 @@
 			dec.decode(root, graph.stylesheet);
 		};
 	</script>
+<!--
+		Updates connection points before the routing is called.
+-->
+	<script type="text/javascript">
+		// Computes the position of edge to edge connection points.
+		mxGraphView.prototype.updateFixedTerminalPoint = function(edge, terminal, source, constraint)
+		{
+			var pt = null;
+
+			if (constraint != null)
+			{
+				pt = this.graph.getConnectionPoint(terminal, constraint);
+			}
+
+			if (source)
+			{
+				edge.sourceSegment = null;
+			}
+			else
+			{
+				edge.targetSegment = null;
+			}
+
+			if (pt == null)
+			{
+				var s = this.scale;
+				var tr = this.translate;
+				var orig = edge.origin;
+				var geo = this.graph.getCellGeometry(edge.cell);
+				pt = geo.getTerminalPoint(source);
+
+				// Computes edge-to-edge connection point
+				if (pt != null)
+				{
+					pt = new mxPoint(s * (tr.x + pt.x + orig.x),
+									 s * (tr.y + pt.y + orig.y));
+
+					// Finds nearest segment on edge and computes intersection
+					if (terminal != null && terminal.absolutePoints != null)
+					{
+						var seg = mxUtils.findNearestSegment(terminal, pt.x, pt.y);
+
+						// Finds orientation of the segment
+						var p0 = terminal.absolutePoints[seg];
+						var pe = terminal.absolutePoints[seg + 1];
+						var horizontal = (p0.x - pe.x == 0);
+
+						// Stores the segment in the edge state
+						var key = (source) ? 'sourceConstraint' : 'targetConstraint';
+						var value = (horizontal) ? 'horizontal' : 'vertical';
+						edge.style[key] = value;
+
+						// Keeps the coordinate within the segment bounds
+						if (horizontal)
+						{
+							pt.x = p0.x;
+							pt.y = Math.min(pt.y, Math.max(p0.y, pe.y));
+							pt.y = Math.max(pt.y, Math.min(p0.y, pe.y));
+						}
+						else
+						{
+							pt.y = p0.y;
+							pt.x = Math.min(pt.x, Math.max(p0.x, pe.x));
+							pt.x = Math.max(pt.x, Math.min(p0.x, pe.x));
+						}
+					}
+				}
+				// Computes constraint connection points on vertices and ports
+				else if (terminal != null && terminal.cell.geometry.relative)
+				{
+					pt = new mxPoint(this.getRoutingCenterX(terminal),
+						this.getRoutingCenterY(terminal));
+				}
+
+				// Snaps point to grid
+				/*if (pt != null)
+				{
+					var tr = this.graph.view.translate;
+					var s = this.graph.view.scale;
+
+					pt.x = (this.graph.snap(pt.x / s - tr.x) + tr.x) * s;
+					pt.y = (this.graph.snap(pt.y / s - tr.y) + tr.y) * s;
+				}*/
+			}
+
+			edge.setAbsoluteTerminalPoint(pt, source);
+		};
+	</script>
+
+<!--
+	Overrides methods to preview and create new edges.
+-->
+	<script type="text/javascript">
+		// Sets source terminal point for edge-to-edge connections.
+		mxConnectionHandler.prototype.createEdgeState = function(me)
+		{
+			var edge = this.graph.createEdge();
+
+			if (this.sourceConstraint != null && this.previous != null)
+			{
+				edge.style = mxConstants.STYLE_EXIT_X+'='+this.sourceConstraint.point.x+';'+
+					mxConstants.STYLE_EXIT_Y+'='+this.sourceConstraint.point.y+';';
+			}
+			else if (this.graph.model.isEdge(me.getCell()))
+			{
+				var scale = this.graph.view.scale;
+				var tr = this.graph.view.translate;
+				var pt = new mxPoint(this.graph.snap(me.getGraphX() / scale) - tr.x,
+						this.graph.snap(me.getGraphY() / scale) - tr.y);
+				edge.geometry.setTerminalPoint(pt, true);
+			}
+
+			return this.graph.view.createState(edge);
+		};
+
+		// Uses right mouse button to create edges on background (see also: lines 67 ff)
+		mxConnectionHandler.prototype.isStopEvent = function(me)
+		{
+			return me.getState() != null || mxEvent.isRightMouseButton(me.getEvent());
+		};
+
+		// Updates target terminal point for edge-to-edge connections.
+		mxConnectionHandlerUpdateCurrentState = mxConnectionHandler.prototype.updateCurrentState;
+		mxConnectionHandler.prototype.updateCurrentState = function(me)
+		{
+			mxConnectionHandlerUpdateCurrentState.apply(this, arguments);
+
+			if (this.edgeState != null)
+			{
+				this.edgeState.cell.geometry.setTerminalPoint(null, false);
+
+				if (this.shape != null && this.currentState != null &&
+					this.currentState.view.graph.model.isEdge(this.currentState.cell))
+				{
+					var scale = this.graph.view.scale;
+					var tr = this.graph.view.translate;
+					var pt = new mxPoint(this.graph.snap(me.getGraphX() / scale) - tr.x,
+							this.graph.snap(me.getGraphY() / scale) - tr.y);
+					this.edgeState.cell.geometry.setTerminalPoint(pt, false);
+				}
+			}
+		};
+
+		// Updates the terminal and control points in the cloned preview.
+		mxEdgeSegmentHandler.prototype.clonePreviewState = function(point, terminal)
+		{
+			var clone = mxEdgeHandler.prototype.clonePreviewState.apply(this, arguments);
+			clone.cell = clone.cell.clone();
+
+			if (this.isSource || this.isTarget)
+			{
+				clone.cell.geometry = clone.cell.geometry.clone();
+
+				// Sets the terminal point of an edge if we're moving one of the endpoints
+				if (this.graph.getModel().isEdge(clone.cell))
+				{
+					// TODO: Only set this if the target or source terminal is an edge
+					clone.cell.geometry.setTerminalPoint(point, this.isSource);
+				}
+				else
+				{
+					clone.cell.geometry.setTerminalPoint(null, this.isSource);
+				}
+			}
+
+			return clone;
+		};
+
+		var mxEdgeHandlerConnect = mxEdgeHandler.prototype.connect;
+		mxEdgeHandler.prototype.connect = function(edge, terminal, isSource, isClone, me)
+		{
+			var result = null;
+			var model = this.graph.getModel();
+			var parent = model.getParent(edge);
+
+			model.beginUpdate();
+			try
+			{
+				result = mxEdgeHandlerConnect.apply(this, arguments);
+				var geo = model.getGeometry(result);
+
+				if (geo != null)
+				{
+					geo = geo.clone();
+					var pt = null;
+
+					if (model.isEdge(terminal))
+					{
+						pt = this.abspoints[(this.isSource) ? 0 : this.abspoints.length - 1];
+						pt.x = pt.x / this.graph.view.scale - this.graph.view.translate.x;
+						pt.y = pt.y / this.graph.view.scale - this.graph.view.translate.y;
+
+						var pstate = this.graph.getView().getState(
+								this.graph.getModel().getParent(edge));
+
+						if (pstate != null)
+						{
+							pt.x -= pstate.origin.x;
+							pt.y -= pstate.origin.y;
+						}
+
+						pt.x -= this.graph.panDx / this.graph.view.scale;
+						pt.y -= this.graph.panDy / this.graph.view.scale;
+					}
+
+					geo.setTerminalPoint(pt, isSource);
+					model.setGeometry(edge, geo);
+				}
+			}
+			finally
+			{
+				model.endUpdate();
+			}
+
+			return result;
+		};
+	</script>
+<!--
+	Adds in-place highlighting for complete cell area (no hotspot).
+-->
+	<script type="text/javascript">
+		mxConnectionHandlerCreateMarker = mxConnectionHandler.prototype.createMarker;
+		mxConnectionHandler.prototype.createMarker = function()
+		{
+			var marker = mxConnectionHandlerCreateMarker.apply(this, arguments);
+
+			// Uses complete area of cell for new connections (no hotspot)
+			marker.intersects = function(state, evt)
+			{
+				return true;
+			};
+
+			return marker;
+		};
+
+		mxEdgeHandlerCreateMarker = mxEdgeHandler.prototype.createMarker;
+		mxEdgeHandler.prototype.createMarker = function()
+		{
+			var marker = mxEdgeHandlerCreateMarker.apply(this, arguments);
+
+			// Adds in-place highlighting when reconnecting existing edges
+			marker.highlight.highlight = this.graph.connectionHandler.marker.highlight.highlight;
+
+			return marker;
+		}
+	</script>
+	<!--
+	Imlements a custom resistor shape. Direction currently ignored here.
+-->
+	<script type="text/javascript">
+	mxEdgeStyle.WireConnector = function(state, source, target, hints, result)
+	{
+		// Creates array of all way- and terminalpoints
+		var pts = state.absolutePoints;
+		var horizontal = true;
+		var hint = null;
+
+		// Gets the initial connection from the source terminal or edge
+		if (source != null && state.view.graph.model.isEdge(source.cell))
+		{
+			horizontal = state.style['sourceConstraint'] == 'horizontal';
+		}
+		else if (source != null)
+		{
+			horizontal = source.style['portConstraint'] != 'vertical';
+
+			// Checks the direction of the shape and rotates
+			var direction = source.style[mxConstants.STYLE_DIRECTION];
+
+			if (direction == 'north' || direction == 'south')
+			{
+				horizontal = !horizontal;
+			}
+		}
+
+		// Adds the first point
+		// TODO: Should move along connected segment
+		var pt = pts[0];
+
+		if (pt == null && source != null)
+		{
+			pt = new mxPoint(state.view.getRoutingCenterX(source), state.view.getRoutingCenterY(source));
+		}
+		else if (pt != null)
+		{
+			pt = pt.clone();
+		}
+
+		var first = pt;
+
+		// Adds the waypoints
+		if (hints != null && hints.length > 0)
+		{
+			// FIXME: First segment not movable
+			/*hint = state.view.transformControlPoint(state, hints[0]);
+			mxLog.show();
+			mxLog.debug(hints.length,'hints0.y='+hint.y, pt.y)
+
+			if (horizontal && Math.floor(hint.y) != Math.floor(pt.y))
+			{
+				mxLog.show();
+				mxLog.debug('add waypoint');
+
+				pt = new mxPoint(pt.x, hint.y);
+				result.push(pt);
+				pt = pt.clone();
+				//horizontal = !horizontal;
+			}*/
+
+			for (var i = 0; i < hints.length; i++)
+			{
+				horizontal = !horizontal;
+				hint = state.view.transformControlPoint(state, hints[i]);
+
+				if (horizontal)
+				{
+					if (pt.y != hint.y)
+					{
+						pt.y = hint.y;
+						result.push(pt.clone());
+					}
+				}
+				else if (pt.x != hint.x)
+				{
+					pt.x = hint.x;
+					result.push(pt.clone());
+				}
+			}
+		}
+		else
+		{
+			hint = pt;
+		}
+
+		// Adds the last point
+		pt = pts[pts.length - 1];
+
+		// TODO: Should move along connected segment
+		if (pt == null && target != null)
+		{
+			pt = new mxPoint(state.view.getRoutingCenterX(target), state.view.getRoutingCenterY(target));
+		}
+
+		if (horizontal)
+		{
+			if (pt.y != hint.y && first.x != pt.x)
+			{
+				result.push(new mxPoint(pt.x, hint.y));
+			}
+		}
+		else if (pt.x != hint.x && first.y != pt.y)
+		{
+			result.push(new mxPoint(hint.x, pt.y));
+		}
+	};
+
+	mxStyleRegistry.putValue('wireEdgeStyle', mxEdgeStyle.WireConnector);
+
+	// This connector needs an mxEdgeSegmentHandler
+	mxGraphCreateHandler = mxGraph.prototype.createHandler;
+	mxGraph.prototype.createHandler = function(state)
+	{
+		var result = null;
+
+		if (state != null)
+		{
+			if (this.model.isEdge(state.cell))
+			{
+				var style = this.view.getEdgeStyle(state);
+
+				if (style == mxEdgeStyle.WireConnector)
+				{
+					return new mxEdgeSegmentHandler(state);
+				}
+			}
+		}
+
+		return mxGraphCreateHandler.apply(this, arguments);
+	};
+	</script>
+
+
 </head>
 
 <!-- Page passes the container for the graph to the program -->
@@ -1055,14 +1489,6 @@
 			document.getElementById('sidebarContainer'),
 			document.getElementById('statusContainer'));" style="margin:0px;">
 	
-	<!-- Creates a container for the splash screen -->
-	<div id="splash"
-		style="position:absolute;top:0px;left:0px;width:100%;height:100%;background:white;z-index:1;">
-		<center id="splash" style="padding-top:230px;">
-			<img src="images/loading.gif">
-		</center>
-	</div>
-	
 	<!-- Creates a container for the sidebar -->
 	<div id="toolbarContainer"
 		style="position:absolute;white-space:nowrap;overflow:hidden;top:0px;left:0px;max-height:24px;height:36px;right:0px;padding:6px;background-image:url('images/toolbar_bg.gif');">
@@ -1176,4 +1602,4 @@
 			});
 		});
   </script>	
-</html>
\ No newline at end of file
+</html>