beautify

1 files changed, 378 insertions, 459 deletions

diff --git a/index.html b/index.html
index cf39511..91e1665 100644
--- a/index.html
+++ b/index.html
@@ -31,8 +31,6 @@
     <script type="text/javascript" src="details.js"></script>
     <script type="text/javascript" src="json2.js"></script>
     <script type="text/javascript">
-        
-
         function main(container, outline, toolbar, sidebar, status) {
             // Checks if the browser is supported
             if (!mxClient.isBrowserSupported()) {
@@ -108,125 +106,96 @@
                 graph.panningHandler.autoExpand = true;
 
                 // Creates a right-click menu
-                graph.panningHandler.factoryMethod = function(menu, cell, evt)
-                {
-                        
-                        if (cell != null)
+                graph.panningHandler.factoryMethod = function(menu, cell, evt) {
+
+                    if (cell != null) {
+
+                        if (cell.value == "ExplicitInputPort" || cell.value == "ExplicitOutputPort" || cell.value == "CommandPort" || cell.value == "ControlPort") {
+
+                        } else if (cell.isEdge() == true) // @ToDo: Pooja: Different edge value cases.
                         {
-                            
-                            if( cell.value == "ExplicitInputPort" || cell.value == "ExplicitOutputPort" || cell.value == "CommandPort" || cell.value == "ControlPort")
-                            {
-                                
-                            }
-                            else if (cell.isEdge() == true)// @ToDo: Pooja: Different edge value cases.
-                            {
-                                
-                                menu.addItem('Delete', 'images/delete2.png', function()
-                                {
-                                    editor.execute('delete');
-                                });
-                                var edgeformat = menu.addItem('Format', null, null);
-                                
-                                menu.addItem('Border Color', 'images/draw-brush.png', function()
-                                {
-                                    // @ToDo: Pooja: Functionality to be put.   
-                                    showColorWheel(graph,cell,'edgeStrokeColor');  
-
-                                }, edgeformat);
-                                menu.addItem('Text and Text Font', 'images/edit.png', function()
-                                {
-                                    alert('Edit...');// @ToDo: Pooja: Functionality to be put.
-                                }, edgeformat);
-                                menu.addItem('Text Color', 'images/edit.png', function()
-                                {
-                                    alert('Edit...');// @ToDo: Pooja: Functionality to be put.
-                                }, edgeformat);
-                                
-                            }
-                            else 
-                            {
-                                menu.addItem('Block Parameters...', 'images/gear.gif', function()
-                                {
-                                    showPropertiesWindow(graph, cell);
-                                });
-                                
-                                menu.addItem('Cut', 'images/cut.png', function()
-                                {
-                                    editor.execute('cut');
-                                });
-                                menu.addItem('Copy', 'images/copy.png', function()
-                                {
-                                    editor.execute('copy');
-                                });
-                                menu.addItem('Delete', 'images/delete2.png', function()
-                                {
-                                    editor.execute('delete');
-                                });
-                                
-                                menu.addItem('Selection to superblock', 'images/superblock.png', function()
-                                {
-                                 // @ToDo: Pooja: Functionality to be put.
-                                });
-                                var format = menu.addItem('Format', null, null);
-                                
-                                menu.addItem('Rotate', 'images/rotate.png', function()
-                                {
-                                    editor.execute('rotateCustom');
-                                }, format);
-                                menu.addItem('Border Color', 'images/draw-brush.png', function()
-                                {
-                                    showColorWheel(graph,cell,'vertexStrokeColor'); 
-
-                                }, format);
-                                menu.addItem('Fill Color', 'images/edit.png', function()
-                                {
-                                   showColorWheel(graph,cell,'vertexFillColor'); 
-                                }, format);
-                                menu.addItem('Details', null, function()
-                                {
-                                    // @ToDo: Pooja: Functionality to be put.
-                                });
-                            }
-                        }
-                        else {
-                            menu.addItem('Undo', 'images/undo.png', function()
-                            {
-                                editor.execute('undo');
+
+                            menu.addItem('Delete', 'images/delete2.png', function() {
+                                editor.execute('delete');
                             });
-                            menu.addItem('Redo', 'images/redo.png', function()
-                            {
-                                editor.execute('redo');
+                            var edgeformat = menu.addItem('Format', null, null);
+
+                            menu.addItem('Border Color', 'images/draw-brush.png', function() {
+                                // @ToDo: Pooja: Functionality to be put.   
+                                showColorWheel(graph, cell, 'edgeStrokeColor');
+
+                            }, edgeformat);
+                            menu.addItem('Text and Text Font', 'images/edit.png', function() {
+                                alert('Edit...'); // @ToDo: Pooja: Functionality to be put.
+                            }, edgeformat);
+                            menu.addItem('Text Color', 'images/edit.png', function() {
+                                alert('Edit...'); // @ToDo: Pooja: Functionality to be put.
+                            }, edgeformat);
+
+                        } else {
+                            menu.addItem('Block Parameters...', 'images/gear.gif', function() {
+                                showPropertiesWindow(graph, cell);
                             });
-                            menu.addItem('Paste', 'images/paste.png', function()
-                            {
-                                editor.execute('paste');
+
+                            menu.addItem('Cut', 'images/cut.png', function() {
+                                editor.execute('cut');
                             });
-                            menu.addItem('Select all', 'images/selectall.png', function()
-                            {
-                                editor.execute('selectAll');
+                            menu.addItem('Copy', 'images/copy.png', function() {
+                                editor.execute('copy');
                             });
-                            menu.addItem('Set Context', null, function()
-                            {
-                               // @ToDo: Pooja: Functionality to be put.
+                            menu.addItem('Delete', 'images/delete2.png', function() {
+                                editor.execute('delete');
                             });
-                            menu.addItem('Setup', 'images/setup.png', function()
-                            {
+
+                            menu.addItem('Selection to superblock', 'images/superblock.png', function() {
                                 // @ToDo: Pooja: Functionality to be put.
                             });
-                            menu.addItem('Zoom In', 'images/zoom_in.png', function()
-                            {
-                                editor.execute('zoomIn');
-                            });
-                            menu.addItem('Zoom Out', 'images/zoom_out.png', function()
-                            {
-                                editor.execute('zoomOut');
-                            });
-                            menu.addItem('Diagram background...', null, function()
-                            {
-                                showColorWheel(graph,cell,'bgColor');
+                            var format = menu.addItem('Format', null, null);
+
+                            menu.addItem('Rotate', 'images/rotate.png', function() {
+                                editor.execute('rotateCustom');
+                            }, format);
+                            menu.addItem('Border Color', 'images/draw-brush.png', function() {
+                                showColorWheel(graph, cell, 'vertexStrokeColor');
+
+                            }, format);
+                            menu.addItem('Fill Color', 'images/edit.png', function() {
+                                showColorWheel(graph, cell, 'vertexFillColor');
+                            }, format);
+                            menu.addItem('Details', null, function() {
+                                // @ToDo: Pooja: Functionality to be put.
                             });
-                        }                    
-                   
+                        }
+                    } else {
+                        menu.addItem('Undo', 'images/undo.png', function() {
+                            editor.execute('undo');
+                        });
+                        menu.addItem('Redo', 'images/redo.png', function() {
+                            editor.execute('redo');
+                        });
+                        menu.addItem('Paste', 'images/paste.png', function() {
+                            editor.execute('paste');
+                        });
+                        menu.addItem('Select all', 'images/selectall.png', function() {
+                            editor.execute('selectAll');
+                        });
+                        menu.addItem('Set Context', null, function() {
+                            // @ToDo: Pooja: Functionality to be put.
+                        });
+                        menu.addItem('Setup', 'images/setup.png', function() {
+                            // @ToDo: Pooja: Functionality to be put.
+                        });
+                        menu.addItem('Zoom In', 'images/zoom_in.png', function() {
+                            editor.execute('zoomIn');
+                        });
+                        menu.addItem('Zoom Out', 'images/zoom_out.png', function() {
+                            editor.execute('zoomOut');
+                        });
+                        menu.addItem('Diagram background...', null, function() {
+                            showColorWheel(graph, cell, 'bgColor');
+                        });
+                    }
+
                 };
 
                 //var config = mxUtils.load('config/editor-commons.xml').getDocumentElement();
@@ -240,9 +209,8 @@
                    using mxEventSource.addListener.
                 */
                 var undoManager = new mxUndoManager();
-                var listener = function(sender, evt)
-                {
-                  undoManager.undoableEditHappened(evt.getProperty('edit'));
+                var listener = function(sender, evt) {
+                    undoManager.undoableEditHappened(evt.getProperty('edit'));
                 };
                 graph.getModel().addListener(mxEvent.UNDO, listener);
                 graph.getModel().addListener(mxEvent.REDO, listener);
@@ -250,11 +218,11 @@
                 graph.getView().addListener(mxEvent.REDO, listener);
 
                 editor.addAction('undoCustom', function(editor, cell) {
-                  undoManager.undo();
+                    undoManager.undo();
                 });
 
                 editor.addAction('redoCustom', function(editor, cell) {
-                  undoManager.redo();
+                    undoManager.redo();
                 });
 
                 /*
@@ -262,92 +230,84 @@
                   and then check if that edge satisfies one of the port constraints.
 
                 */
-                graph.addListener(mxEvent.CLICK, function(sender, evt)
-                {
-                  var selectedEdgeObject = graph.getSelectionCell();
-                  if (selectedEdgeObject != null && selectedEdgeObject.isEdge() == true)
-                  {
-
+                graph.addListener(mxEvent.CLICK, function(sender, evt) {
                     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 && 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");
-                          }
-                          
-                          /*
-                            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])
+                    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;
                             }
-                          }
-                          
-                          // 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]);
+
+                            if (selectedEdgeObject.isEdge() == true) {
+                                source = getEdgeId(selectedEdgeObject);
+                            }
+                            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");
+                                    }
+
+                                    /*
+                                      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]);
+                                        }
+                                    }
+                                }
                             }
-                          }
                         }
-                      }
                     }
-                  }
                 });
 
                 // Disables drag-and-drop into non-swimlanes.
@@ -513,182 +473,147 @@
                 */
                 editor.addAction('rotateCustom', function(editor, cell) {
                     selectedCell = graph.getSelectionCell();
-                    if (selectedCell != null)
-                    {
-                        var cells=[];
+                    if (selectedCell != null) {
+                        var cells = [];
                         cells.push(selectedCell);
-                        for(var i=0; i < selectedCell.getChildCount();i++)
+                        for (var i = 0; i < selectedCell.getChildCount(); i++)
                             cells.push(selectedCell.getChildAt(i));
                         graph.getModel().beginUpdate();
-                        try
-                        {
-                            for (var i = 0; i < cells.length; i++)
-                            {
+                        try {
+                            for (var i = 0; i < cells.length; i++) {
                                 var cell = cells[i];
-                            if (cell.isVertex() == true)
-                            {
-                                var geo = graph.getCellGeometry(cell);
-                    
-                                if (geo != null)
-                                {
-                                    // Rotates the size and position in the geometry
-                                    geo = geo.clone();
-                                    geo.x += geo.width / 2 - geo.height / 2;
-                                    geo.y += geo.height / 2 - geo.width / 2;
-                                    var tmp = geo.width;
-                                    geo.width = geo.height;
-                                    geo.height = tmp;
-                                    graph.getModel().setGeometry(cell, geo);
-                                    // Reads the current direction and advances by 90 degrees
-                                    var state = graph.view.getState(cell);
-                                    
-                                    if (state != null)
-                                    {
-                                        if(cell.isConnectable() == true) {
-                                            if(cell.value == "ExplicitOutputPort" || cell.value == "ImplicitOutputPort") {
-                                                var dir = state.style[mxConstants.STYLE_DIRECTION] || 'east';
-                                                var geoCell = cell.getGeometry();
-                                                if (dir == 'east' || dir == 'west')
-                                                {
-                                                    var temp = geoCell.x;
-                                                    geoCell.x = geoCell.y - 0.0625;
-                                                    geoCell.y = temp + 0.0625;
-                                                    cell.setGeometry(geoCell);
-                                                    if(dir == 'east')
-                                                        dir = 'south';
-                                                    else
-                                                        dir = 'north';
-                                                }
-                                                else if (dir == 'south' || dir == 'north')
-                                                {
-                                                    
-                                                    geoCell.y = geoCell.x + 0.0625;
-                                                    if(dir == 'south') {
-                                                        dir = 'west';
-                                                        geoCell.x = 0-0.125;
+                                if (cell.isVertex() == true) {
+                                    var geo = graph.getCellGeometry(cell);
+
+                                    if (geo != null) {
+                                        // Rotates the size and position in the geometry
+                                        geo = geo.clone();
+                                        geo.x += geo.width / 2 - geo.height / 2;
+                                        geo.y += geo.height / 2 - geo.width / 2;
+                                        var tmp = geo.width;
+                                        geo.width = geo.height;
+                                        geo.height = tmp;
+                                        graph.getModel().setGeometry(cell, geo);
+                                        // Reads the current direction and advances by 90 degrees
+                                        var state = graph.view.getState(cell);
+
+                                        if (state != null) {
+                                            if (cell.isConnectable() == true) {
+                                                if (cell.value == "ExplicitOutputPort" || cell.value == "ImplicitOutputPort") {
+                                                    var dir = state.style[mxConstants.STYLE_DIRECTION] || 'east';
+                                                    var geoCell = cell.getGeometry();
+                                                    if (dir == 'east' || dir == 'west') {
+                                                        var temp = geoCell.x;
+                                                        geoCell.x = geoCell.y - 0.0625;
+                                                        geoCell.y = temp + 0.0625;
+                                                        cell.setGeometry(geoCell);
+                                                        if (dir == 'east')
+                                                            dir = 'south';
+                                                        else
+                                                            dir = 'north';
+                                                    } else if (dir == 'south' || dir == 'north') {
+
+                                                        geoCell.y = geoCell.x + 0.0625;
+                                                        if (dir == 'south') {
+                                                            dir = 'west';
+                                                            geoCell.x = 0 - 0.125;
+                                                        } else {
+                                                            dir = 'east';
+                                                            geoCell.x = 1;
+                                                        }
+                                                        cell.setGeometry(geoCell);
                                                     }
-                                                    else {
-                                                        dir = 'east';
-                                                        geoCell.x = 1;
+                                                } else if (cell.value == "ExplicitInputPort" || cell.value == "ImplicitInputPort") {
+                                                    var dir = state.style[mxConstants.STYLE_DIRECTION] || 'east';
+                                                    var geoCell = cell.getGeometry();
+                                                    if (dir == 'south' || dir == 'north') {
+                                                        geoCell.y = geoCell.x - 0.0625;
+                                                        if (dir == 'south') {
+                                                            dir = 'west';
+                                                            geoCell.x = 1 + 0.125;
+                                                        } else {
+                                                            dir = 'east';
+                                                            geoCell.x = 0;
+                                                        }
+                                                        cell.setGeometry(geoCell);
+                                                    } else if (dir == 'east' || dir == 'west') {
+                                                        geoCell = geoCell.clone();
+                                                        var temp = geoCell.x;
+                                                        geoCell.x = parseFloat(geoCell.y) + 0.0625;
+                                                        geoCell.y = temp - 0.0625;
+                                                        cell.setGeometry(geoCell);
+                                                        if (dir == 'east')
+                                                            dir = 'south';
+                                                        else
+                                                            dir = 'north';
                                                     }
-                                                    cell.setGeometry(geoCell);
-                                                }
-                                            }
-                                            else if(cell.value == "ExplicitInputPort" || cell.value == "ImplicitInputPort") {
-                                                var dir = state.style[mxConstants.STYLE_DIRECTION] || 'east';
-                                                var geoCell = cell.getGeometry();
-                                                if (dir == 'south' || dir == 'north')
-                                                {
-                                                    geoCell.y = geoCell.x - 0.0625;
-                                                    if(dir == 'south') {
-                                                        dir = 'west';
-                                                        geoCell.x = 1 + 0.125;
-                                                    }
-                                                    else {
-                                                        dir = 'east';
-                                                        geoCell.x = 0;
-                                                    }
-                                                    cell.setGeometry(geoCell);
-                                                }
-                                                else if (dir == 'east' || dir == 'west')
-                                                {
-                                                    geoCell = geoCell.clone();
-                                                    var temp = geoCell.x;
-                                                    geoCell.x = parseFloat(geoCell.y) + 0.0625;
-                                                    geoCell.y = temp - 0.0625;
-                                                    cell.setGeometry(geoCell);
-                                                    if(dir == 'east')
-                                                        dir = 'south';
-                                                    else
-                                                        dir = 'north';
-                                                }
-                                            }
-                                            else if(cell.value == 'CommandPort') {
-                                                var dir = state.style[mxConstants.STYLE_DIRECTION] || 'east';
-                                                var geoCell = cell.getGeometry();
-                                                if (dir == 'south' || dir == 'north')
-                                                {
-                                                    var temp = geoCell.x;
-                                                    geoCell.x = geoCell.y + 0.0625;
-                                                    geoCell.y = temp - 0.0625;
-                                                    cell.setGeometry(geoCell);
-                                                    if(dir == 'south')
-                                                        dir = 'west';
-                                                    else
-                                                        dir = 'east';
-                                                }
-                                                else if (dir == 'east' || dir == 'west')
-                                                {
-                                                    geoCell.y = parseFloat(geoCell.x) - 0.0625;
-                                                    if(dir == 'east') {
-                                                        dir = 'south';
-                                                        geoCell.x = 0-0.0625;
+                                                } else if (cell.value == 'CommandPort') {
+                                                    var dir = state.style[mxConstants.STYLE_DIRECTION] || 'east';
+                                                    var geoCell = cell.getGeometry();
+                                                    if (dir == 'south' || dir == 'north') {
+                                                        var temp = geoCell.x;
+                                                        geoCell.x = geoCell.y + 0.0625;
+                                                        geoCell.y = temp - 0.0625;
+                                                        cell.setGeometry(geoCell);
+                                                        if (dir == 'south')
+                                                            dir = 'west';
+                                                        else
+                                                            dir = 'east';
+                                                    } else if (dir == 'east' || dir == 'west') {
+                                                        geoCell.y = parseFloat(geoCell.x) - 0.0625;
+                                                        if (dir == 'east') {
+                                                            dir = 'south';
+                                                            geoCell.x = 0 - 0.0625;
+                                                        } else {
+                                                            dir = 'north';
+                                                            geoCell.x = 1 + 0.0625;
+                                                        }
+                                                        cell.setGeometry(geoCell);
                                                     }
-                                                    else {
-                                                        dir = 'north';
-                                                        geoCell.x = 1 + 0.0625;
+                                                } else if (cell.value == 'ControlPort') {
+                                                    var dir = state.style[mxConstants.STYLE_DIRECTION] || 'east';
+                                                    var geoCell = cell.getGeometry();
+                                                    if (dir == 'south' || dir == 'north') {
+                                                        var temp = geoCell.x;
+                                                        geoCell.x = geoCell.y - 0.0625;
+                                                        geoCell.y = temp + 0.0625;
+                                                        cell.setGeometry(geoCell);
+                                                        if (dir == 'south')
+                                                            dir = 'west';
+                                                        else
+                                                            dir = 'east';
+                                                    } else if (dir == 'east' || dir == 'west') {
+                                                        geoCell.y = parseFloat(geoCell.x) + 0.0625;
+                                                        if (dir == 'east') {
+                                                            dir = 'south';
+
+                                                            geoCell.x = 1 + 0.0625;
+                                                        } else {
+                                                            dir = 'north';
+                                                            geoCell.x = 0 - 0.0625;
+                                                        }
+                                                        cell.setGeometry(geoCell);
                                                     }
-                                                    cell.setGeometry(geoCell);
                                                 }
-                                            }
-                                            else if(cell.value == 'ControlPort') {
+                                            } else {
                                                 var dir = state.style[mxConstants.STYLE_DIRECTION] || 'east';
-                                                var geoCell = cell.getGeometry();
-                                                if (dir == 'south' || dir == 'north')
-                                                {
-                                                    var temp = geoCell.x;
-                                                    geoCell.x = geoCell.y - 0.0625;
-                                                    geoCell.y = temp + 0.0625;
-                                                    cell.setGeometry(geoCell);
-                                                    if(dir == 'south')
-                                                        dir = 'west';
-                                                    else
-                                                        dir = 'east';
-                                                }
-                                                else if (dir == 'east' || dir == 'west')
-                                                {
-                                                    geoCell.y = parseFloat(geoCell.x) + 0.0625;
-                                                    if(dir == 'east') {
-                                                        dir = 'south';
-                                                        
-                                                        geoCell.x = 1 + 0.0625;
-                                                    }
-                                                    else {
-                                                        dir = 'north';
-                                                        geoCell.x = 0-0.0625;
-                                                    }
-                                                    cell.setGeometry(geoCell);
+
+                                                if (dir == 'east') {
+                                                    dir = 'south';
+                                                } else if (dir == 'south') {
+                                                    dir = 'west';
+                                                } else if (dir == 'west') {
+                                                    dir = 'north';
+                                                } else if (dir == 'north') {
+                                                    dir = 'east';
                                                 }
                                             }
+                                            graph.setCellStyles(mxConstants.STYLE_DIRECTION, dir, [cell]);
                                         }
-                                        else {
-                                            var dir = state.style[mxConstants.STYLE_DIRECTION] || 'east';
-                                            
-                                            if (dir == 'east')
-                                            {
-                                                dir = 'south';
-                                            }
-                                            else if (dir == 'south')
-                                            {
-                                                dir = 'west';
-                                            }
-                                            else if (dir == 'west')
-                                            {
-                                                dir = 'north';
-                                            }
-                                            else if (dir == 'north')
-                                            {
-                                                dir = 'east';
-                                            }
-                                        }
-                                        graph.setCellStyles(mxConstants.STYLE_DIRECTION, dir, [cell]);
                                     }
-                                }                               
+                                }
                             }
-                        }
-                        }
-                        finally
-                        {
+                        } finally {
                             graph.getModel().endUpdate();
                         }
                     }
@@ -767,25 +692,25 @@
                 toolbar.appendChild(spacer.cloneNode(true));
 
 
-		/*
+                /*
                     Maverick
                     This method is used for loading the stylesheet from the file.
                     Reference: http://www.w3schools.com/xsl/xsl_client.asp
 	        */
-	
-	        function loadXMLDoc(filename) {
-	            if (window.ActiveXObject) {
-	                xhttp = new ActiveXObject("Msxml2.XMLHTTP");
-	            } else {
-	                xhttp = new XMLHttpRequest();
-	            }
-	            xhttp.open("GET", filename, false);
-	            try {
-	                xhttp.responseType = "msxml-document"
-	            } catch (err) {}
-	            xhttp.send("");
-	            return xhttp.responseXML;
-	        }
+
+                function loadXMLDoc(filename) {
+                    if (window.ActiveXObject) {
+                        xhttp = new ActiveXObject("Msxml2.XMLHTTP");
+                    } else {
+                        xhttp = new XMLHttpRequest();
+                    }
+                    xhttp.open("GET", filename, false);
+                    try {
+                        xhttp.responseType = "msxml-document"
+                    } catch (err) {}
+                    xhttp.send("");
+                    return xhttp.responseXML;
+                }
 
 
                 /*              
@@ -1083,21 +1008,21 @@
 
 
 
-	    function showColorWheel(graph, cell, selectProperty) {
-	      
-	        // Create basic structure for the form
-	        var content = document.createElement('div');
-	        content.setAttribute("id", "colorProperties");
+        function showColorWheel(graph, cell, selectProperty) {
+
+            // Create basic structure for the form
+            var content = document.createElement('div');
+            content.setAttribute("id", "colorProperties");
 
-	        // Add Form
-	        var myform = document.createElement("form");
-	        myform.method = "";
-	        myform.setAttribute("id","formProperties");
+            // Add Form
+            var myform = document.createElement("form");
+            myform.method = "";
+            myform.setAttribute("id", "formProperties");
+
+            // Line break
+            var linebreak = document.createElement('br');
+            myform.appendChild(linebreak);
 
-	         // Line break
-	        var linebreak = document.createElement('br');
-	        myform.appendChild(linebreak);
-	        
             // Input Title
             var fieldName = 'Color';
             var namelabel = document.createElement('label');
@@ -1115,80 +1040,74 @@
             // Line break
             var linebreak = document.createElement('br');
             myform.appendChild(linebreak);
-            
+
             // Line break
             var linebreak = document.createElement('br');
             myform.appendChild(linebreak);
-	        
-	        // Line break
-	        var linebreak = document.createElement('br');
-	        myform.appendChild(linebreak);
-	        var picker = document.createElement('div');
-	        picker.setAttribute("id", "picker");
-	        myform.appendChild(picker);
-	        // Line break
-	        var linebreak = document.createElement('br');
-	        myform.appendChild(linebreak);
-	        
-	        // Button - Submit
-	        var btn = document.createElement("button");
-	        btn.innerHTML = 'Submit';
-	        btn.type = "button";
-	        btn.name = "submit";
-	        btn.style.cssText = 'margin-left: 75px';
-	        
-	        // Executes when button 'btn' is clicked
-	        btn.onclick = function() {
-	            var input=document.getElementById('color').value;
-	            if(selectProperty == "edgeStrokeColor") {
-	                var style = graph.getModel().getStyle(cell);
-	                if(style == null) {
-	                    style = 'strokeColor='+input;
-	                    graph.getModel().setStyle(cell, style);
-	                }
-	                else {
-	                    style = style.replace(/strokeColor=#[a-fA-F0-9]{6,}/g, "strokeColor="+input);
-	                    graph.getModel().setStyle(cell, style);
-	                }
-	            }
-	            else if(selectProperty == "bgColor") {
-	            graph.container.style.backgroundColor=input;
-	            }
-	            else if(selectProperty == "vertexStrokeColor") {
-	                var style = graph.getModel().getStyle(cell);
-	                if(style.indexOf('strokeColor') > -1) {
-	                    style = style.replace(/strokeColor=#[a-fA-F0-9]{6,}/g, "strokeColor="+input);
-	                    graph.getModel().setStyle(cell, style);
-	                }
-	                else {
-	                    style = style + ';' + 'strokeColor='+input;
-	                    graph.getModel().setStyle(cell, style);
-	                }
-	            }
-	            else if(selectProperty == "vertexFillColor") {
-	                var style = graph.getModel().getStyle(cell);                    
-	                if(style.indexOf('fillColor') > -1) {
-	                    style = style.replace(/fillColor=#[a-fA-F0-9]{6,}/g, "fillColor="+input);
-	                    graph.getModel().setStyle(cell, style);
-	                }
-	                else {
-	                    style = style + ';' + 'fillColor='+input;
-	                    graph.getModel().setStyle(cell, style);
-	                }
-	            }
-	            
-	            
-	            
-	        };
-	        myform.appendChild(btn);
-	        
-	        content.appendChild(myform);
-	        showModalWindow(graph, 'Diagram background...', content,285,340);
-	        // Invokes the farbtastic functionality 
-	         $(document).ready(function() {
-	             $('#picker').farbtastic('#color');
-	        });
-	    };
+
+            // Line break
+            var linebreak = document.createElement('br');
+            myform.appendChild(linebreak);
+            var picker = document.createElement('div');
+            picker.setAttribute("id", "picker");
+            myform.appendChild(picker);
+            // Line break
+            var linebreak = document.createElement('br');
+            myform.appendChild(linebreak);
+
+            // Button - Submit
+            var btn = document.createElement("button");
+            btn.innerHTML = 'Submit';
+            btn.type = "button";
+            btn.name = "submit";
+            btn.style.cssText = 'margin-left: 75px';
+
+            // Executes when button 'btn' is clicked
+            btn.onclick = function() {
+                var input = document.getElementById('color').value;
+                if (selectProperty == "edgeStrokeColor") {
+                    var style = graph.getModel().getStyle(cell);
+                    if (style == null) {
+                        style = 'strokeColor=' + input;
+                        graph.getModel().setStyle(cell, style);
+                    } else {
+                        style = style.replace(/strokeColor=#[a-fA-F0-9]{6,}/g, "strokeColor=" + input);
+                        graph.getModel().setStyle(cell, style);
+                    }
+                } else if (selectProperty == "bgColor") {
+                    graph.container.style.backgroundColor = input;
+                } else if (selectProperty == "vertexStrokeColor") {
+                    var style = graph.getModel().getStyle(cell);
+                    if (style.indexOf('strokeColor') > -1) {
+                        style = style.replace(/strokeColor=#[a-fA-F0-9]{6,}/g, "strokeColor=" + input);
+                        graph.getModel().setStyle(cell, style);
+                    } else {
+                        style = style + ';' + 'strokeColor=' + input;
+                        graph.getModel().setStyle(cell, style);
+                    }
+                } else if (selectProperty == "vertexFillColor") {
+                    var style = graph.getModel().getStyle(cell);
+                    if (style.indexOf('fillColor') > -1) {
+                        style = style.replace(/fillColor=#[a-fA-F0-9]{6,}/g, "fillColor=" + input);
+                        graph.getModel().setStyle(cell, style);
+                    } else {
+                        style = style + ';' + 'fillColor=' + input;
+                        graph.getModel().setStyle(cell, style);
+                    }
+                }
+
+
+
+            };
+            myform.appendChild(btn);
+
+            content.appendChild(myform);
+            showModalWindow(graph, 'Diagram background...', content, 285, 340);
+            // Invokes the farbtastic functionality 
+            $(document).ready(function() {
+                $('#picker').farbtastic('#color');
+            });
+        };
 
         function createButtonImage(button, image) {
             if (image != null) {
@@ -2156,4 +2075,4 @@
     });
 </script>
 
-</html>
+</html>
\ No newline at end of file