From fcf1dfdff4483d4d53406b373b07435e0bdf499a Mon Sep 17 00:00:00 2001 From: jiteshjha Date: Tue, 7 Jun 2016 20:48:54 +0530 Subject: Initial port constraints --- index.html | 91 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 84 insertions(+), 7 deletions(-) (limited to 'index.html') diff --git a/index.html b/index.html index 564d6a7..bb72f95 100644 --- a/index.html +++ b/index.html @@ -99,12 +99,91 @@ //var config = mxUtils.load('config/editor-commons.xml').getDocumentElement(); var config = mxUtils.load('config/keyhandler-commons.xml').getDocumentElement(); editor.configure(config); + var undoManager = new mxUndoManager(); + var listener = function(sender, evt) + { + undoManager.undoableEditHappened(evt.getProperty('edit')); + }; + graph.getModel().addListener(mxEvent.UNDO, listener); + graph.getModel().addListener(mxEvent.REDO, listener); + graph.getView().addListener(mxEvent.UNDO, listener); + graph.getView().addListener(mxEvent.REDO, listener); + + editor.addAction('undoCustom', function(editor, cell) { + undoManager.undo(); + }); + + editor.addAction('redoCustom', function(editor, cell) { + undoManager.redo(); + }); + + graph.addListener(mxEvent.CLICK, function(sender, evt) + { + console.log(undoManager.history); + console.log(undoManager.canUndo()); + var selectedEdgeObject = graph.getSelectionCell(); + if (selectedEdgeObject != null && selectedEdgeObject.isEdge() == true) + { + + var selectedEdgeObject = graph.getSelectionCell(); + var target = selectedEdgeObject.target; + var source; + + if(selectedEdgeObject != null && selectedEdgeObject.isEdge() == true) { + function getEdgeId(edgeObject) { + while (edgeObject.source != null && edgeObject.source.isEdge() == true) { + edgeObject = edgeObject.source; + } + return edgeObject.source; + } + + if(selectedEdgeObject.isEdge() == true) { + source = getEdgeId(selectedEdgeObject); + } + + if(source != null && (source.value != "ExplicitOutputPort" || target.value != "ExplicitInputPort")) { + alert("Explicit data input port must be connected to explicit data output port"); + //var edges = graph.getModel().getEdges(source); + //console.log(edges); + //undoManager.history.shift(); + //graph.getModel().remove(selectedEdgeObject); + //console.log(graph.getModel()); + //model.beginUpdate(); + //model.parent = null; //null + //model.previous = null; //null + //model.child = selectedEdgeObject; // + //model.endUpdate(); + /*graph.getModel().parent = null; + graph.getModel().previous = null; + graph.getModel().child = selectedEdgeObject;*/ + editor.execute('undo'); + undoManager.history.splice(-1,1); + //undoManager.history.pop(); + console.log(undoManager.history.length); + var storage = []; + for(i in undoManager.history) { + if(undoManager.history[i] != null) { + storage.push(undoManager.history[i]) + } + } + undoManager.clear(); + for(i in storage) { + if(storage[i] != null) { + undoManager.undoableEditHappened(storage[i]); + } + } + //console.log(selectedEdgeObject); + } + } + } + }); // Disables drag-and-drop into non-swimlanes. graph.isValidDropTarget = function(cell, cells, evt) { return this.isSwimlane(cell); }; + // Disables drilling into non-swimlanes. graph.isValidRoot = function(cell) { return this.isValidDropTarget(cell); @@ -255,6 +334,8 @@ button.appendChild(titleName); }); + + // @jiteshjha, @pooja /* On selection and deletion of any block, 'deleteBlock' @@ -311,18 +392,14 @@ addToolbarButton(editor, toolbar, 'toggle', 'Expand All', 'images/navigate_plus.png'); toolbar.appendChild(spacer.cloneNode(true)); - addToolbarButton(editor, toolbar, 'deleteBlock', 'Delete', 'images/delete2.png'); - toolbar.appendChild(spacer.cloneNode(true)); - addToolbarButton(editor, toolbar, 'cut', 'Cut', 'images/cut.png'); addToolbarButton(editor, toolbar, 'copy', 'Copy', 'images/copy.png'); addToolbarButton(editor, toolbar, 'paste', 'Paste', 'images/paste.png'); toolbar.appendChild(spacer.cloneNode(true)); - addToolbarButton(editor, toolbar, 'undo', '', 'images/undo.png'); - addToolbarButton(editor, toolbar, 'redo', '', 'images/redo.png'); - + addToolbarButton(editor, toolbar, 'undoCustom', '', 'images/undo.png'); + addToolbarButton(editor, toolbar, 'redoCustom', '', 'images/redo.png'); toolbar.appendChild(spacer.cloneNode(true)); addToolbarButton(editor, toolbar, 'show', 'Show', 'images/camera.png'); @@ -1203,7 +1280,7 @@ // 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()); + return me.getState() != null; }; // Updates target terminal point for edge-to-edge connections. -- cgit From ee0897e4de99a188d448ff7edf1e165f9282b3ba Mon Sep 17 00:00:00 2001 From: jiteshjha Date: Wed, 8 Jun 2016 10:13:16 +0530 Subject: Clean code --- index.html | 32 ++++++++++++-------------------- 1 file changed, 12 insertions(+), 20 deletions(-) (limited to 'index.html') diff --git a/index.html b/index.html index bb72f95..278a700 100644 --- a/index.html +++ b/index.html @@ -99,6 +99,13 @@ //var config = mxUtils.load('config/editor-commons.xml').getDocumentElement(); var config = mxUtils.load('config/keyhandler-commons.xml').getDocumentElement(); editor.configure(config); + + // @jiteshjha, @pooja + /* + The code creates a function that informs the undoManager of an undoable edit + and binds it to the undo event of mxGraphModel and mxGraphView + using mxEventSource.addListener. + */ var undoManager = new mxUndoManager(); var listener = function(sender, evt) { @@ -117,10 +124,12 @@ undoManager.redo(); }); + /* + For every click on the graph, check if the selected mxCell is the recently created edge, + and then check if that edge satisfies one of the port constraints. + */ graph.addListener(mxEvent.CLICK, function(sender, evt) { - console.log(undoManager.history); - console.log(undoManager.canUndo()); var selectedEdgeObject = graph.getSelectionCell(); if (selectedEdgeObject != null && selectedEdgeObject.isEdge() == true) { @@ -143,23 +152,8 @@ if(source != null && (source.value != "ExplicitOutputPort" || target.value != "ExplicitInputPort")) { alert("Explicit data input port must be connected to explicit data output port"); - //var edges = graph.getModel().getEdges(source); - //console.log(edges); - //undoManager.history.shift(); - //graph.getModel().remove(selectedEdgeObject); - //console.log(graph.getModel()); - //model.beginUpdate(); - //model.parent = null; //null - //model.previous = null; //null - //model.child = selectedEdgeObject; // - //model.endUpdate(); - /*graph.getModel().parent = null; - graph.getModel().previous = null; - graph.getModel().child = selectedEdgeObject;*/ editor.execute('undo'); undoManager.history.splice(-1,1); - //undoManager.history.pop(); - console.log(undoManager.history.length); var storage = []; for(i in undoManager.history) { if(undoManager.history[i] != null) { @@ -172,7 +166,6 @@ undoManager.undoableEditHappened(storage[i]); } } - //console.log(selectedEdgeObject); } } } @@ -1278,9 +1271,8 @@ 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; + return me.getState() != null || mxEvent.isRightMouseButton(me.getEvent()); }; // Updates target terminal point for edge-to-edge connections. -- cgit From 679ad3cd87015ad8332955821bcd07c381440691 Mon Sep 17 00:00:00 2001 From: jiteshjha Date: Wed, 8 Jun 2016 11:54:23 +0530 Subject: Implementation of given connection constraints --- index.html | 64 ++++++++++++++++++++++++++++++++++++++++++++++---------------- 1 file changed, 48 insertions(+), 16 deletions(-) (limited to 'index.html') diff --git a/index.html b/index.html index 278a700..04f4504 100644 --- a/index.html +++ b/index.html @@ -127,6 +127,7 @@ /* For every click on the graph, check if the selected mxCell is the recently created edge, and then check if that edge satisfies one of the port constraints. + */ graph.addListener(mxEvent.CLICK, function(sender, evt) { @@ -149,22 +150,53 @@ if(selectedEdgeObject.isEdge() == true) { source = getEdgeId(selectedEdgeObject); } - - if(source != null && (source.value != "ExplicitOutputPort" || target.value != "ExplicitInputPort")) { - alert("Explicit data input port must be connected to explicit data output port"); - editor.execute('undo'); - undoManager.history.splice(-1,1); - var storage = []; - for(i in undoManager.history) { - if(undoManager.history[i] != null) { - storage.push(undoManager.history[i]) - } - } - undoManager.clear(); - for(i in storage) { - if(storage[i] != null) { - undoManager.undoableEditHappened(storage[i]); - } + if(source != null && target != null) { + if(!(((source.value == "ExplicitOutputPort" && target.value == "ExplicitInputPort") + || (source.value == "ExplicitInputPort" && target.value == "ExplicitOutputPort") + || (source.value == "ImplicitOutputPort" && target.value == "ImplicitInputPort") + || (source.value == "ImplicitInputPort" && target.value == "ImplicitOutputPort") + || (source.value == "CommandPort" && target.value == "ControlPort") + || (source.value == "ControlPort" && target.value == "CommandPort")) + && (source.getEdgeCount() <= 1 && source.isVertex() == true + && target.getEdgeCount() <=1 && target.isVertex() == true) + )) { + + if(!(source.getEdgeCount() <= 1 && source.isVertex() == true + && target.getEdgeCount() <=1 && target.isVertex() == true)) { + alert("Port is already connected, please select an please select an unconnected port or a valid link"); + } + else if(source.value == "ImplicitInputPort") { + alert("Implicit data input port must be connected to implicit data output port"); + } + else if(source.value == "ImplicitOutputPort") { + alert("Implicit data output port must be connected to implicit data input port"); + } + else if(source.value == "ExplicitOutputPort") { + alert("Explicit data output port must be connected to explicit data input port"); + } + else if(source.value == "ExplicitInputPort") { + alert("Explicit data input port must be connected to explicit data output port"); + } + else if(source.value = "ControlPort") { + alert("Control port must be connected to command port"); + } + else if(source.value = "CommandPort") { + alert("Command port must be connected to control port"); + } + editor.execute('undo'); + undoManager.history.splice(-1,1); + var storage = []; + for(i in undoManager.history) { + if(undoManager.history[i] != null) { + storage.push(undoManager.history[i]) + } + } + undoManager.clear(); + for(i in storage) { + if(storage[i] != null) { + undoManager.undoableEditHappened(storage[i]); + } + } } } } -- cgit From 97538b089128001ae1d9deb0d437b0d0b67f0c35 Mon Sep 17 00:00:00 2001 From: Jitesh Kumar Jha Date: Fri, 10 Jun 2016 11:11:07 +0530 Subject: Update mxUndomanager comments --- index.html | 14 ++++++++++++++ 1 file changed, 14 insertions(+) (limited to 'index.html') diff --git a/index.html b/index.html index 04f4504..c97b0a5 100644 --- a/index.html +++ b/index.html @@ -183,15 +183,29 @@ else if(source.value = "CommandPort") { alert("Command port must be connected to control port"); } + + /* + Remove last mxEvent from the undoManager history stack, + Store all the remaining undo mxEvents into a temporary array, + clears the history, and readds the mxEvents into the undoManager history stack. + */ editor.execute('undo'); + + // Remove the last element from the history array. undoManager.history.splice(-1,1); + + // storage[] -> temporary array var storage = []; for(i in undoManager.history) { if(undoManager.history[i] != null) { storage.push(undoManager.history[i]) } } + + // Clear the undoManager history, and reset the undoManager pointer to avoid any undo of null events. undoManager.clear(); + + // Move the remaning mxEvents back into the undoManager history stack. for(i in storage) { if(storage[i] != null) { undoManager.undoableEditHappened(storage[i]); -- cgit