From b06ae980294c811c105c388c011235008ec6b2e4 Mon Sep 17 00:00:00 2001
From: Pooja Soundalgekar
Date: Tue, 12 Jul 2016 13:44:45 +0530
Subject: rebased orientation

---
 index.html     |  87 ++++++++--
 orientation.js | 503 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 580 insertions(+), 10 deletions(-)
 create mode 100644 orientation.js

diff --git a/index.html b/index.html
index a8c1179..9326b31 100755
--- a/index.html
+++ b/index.html
@@ -16,6 +16,7 @@
     <script type="text/javascript" src="details.js"></script>
     <script type="text/javascript" src="setup.js"></script>
     <script type="text/javascript" src="combined.js"></script>
+    <script type="text/javascript" src="orientation.js"></script>
 
     <script type="text/javascript">
         // Stores edgeState for every recently created edge in updateFixedTerminalPoint() function
@@ -189,22 +190,26 @@
                             });
 
                             menu.addItem('Selection to superblock', 'images/superblock.png', function() {
-                                // @ToDo: Pooja: Functionality to be put.
+                                // @ToDo: Functionality to be put.
                             });
                             var format = menu.addItem('Format', null, null);
-
                             menu.addItem('Rotate', 'images/rotate.png', function() {
                                 editor.execute('rotateCustom');
                             }, format);
+                            menu.addItem('Flip', 'images/rotate.png', function() {
+                                editor.execute('flipCustom');
+                            }, format);
+                            menu.addItem('Mirror', 'images/rotate.png', function() {
+                                editor.execute('mirrorCustom');
+                            }, 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.
+                                // @ToDo: Functionality to be put.
                             });
                         }
                     } else {
@@ -705,31 +710,65 @@
                                 var inputPort, outputPort, controlPort, commandPort;
                                 if (cellvar.model.in.height == null) {
                                     inputPort = 0;
-                                } else {
+                                }
+                                else {
                                     inputPort = cellvar.model.in.height;
                                 }
                                 if (cellvar.model.out.height == null) {
                                     outputPort = 0;
-                                } else {
+                                }
+                                else {
                                     outputPort = cellvar.model.out.height;
                                 }
                                 if (cellvar.model.evtin.height == null) {
                                     controlPort = 0;
-                                } else {
+                                }
+                                else {
                                     controlPort = cellvar.model.evtin.height;
                                 }
                                 if (cellvar.model.evtout.height == null) {
                                     commandPort = 0;
-                                } else {
+                                }
+                                else {
                                     commandPort = cellvar.model.evtout.height;
                                 }
+
+                                var flip = false, mirror = false;
+                                if(cell.style.indexOf('stencilFlipV') == -1){
+                                    flip = false;
+                                }
+                                else
+                                {
+                                    var x = cell.style.indexOf('stencilFlipV');
+                                    if(cell.style.charAt(x+13) == 0){
+                                        flip = false;
+                                    }
+                                    else{
+                                        flip = true;
+                                    }
+
+                                }
+                                if(cell.style.indexOf('stencilFlipH') == -1){
+                                    mirror = false;
+                                }
+                                else
+                                {
+                                    var x = cell.style.indexOf('stencilFlipH');
+                                    if(cell.style.charAt(x+13) == 0){
+                                        mirror = false;
+                                    }
+                                    else{
+                                        mirror = true;
+                                    }
+
+                                }
                                 var geometry = cell.getGeometry();
                                 text = 'Block Name : ' + cell.value.getAttribute('blockElementName') + "\n" +
                                     'Simulation : ' + cell.value.getAttribute('simulationFunctionName') + "\n" +
                                     'UID : ' + cell.id + "\n" +
                                     'Style : ' + cell.style + "\n" +
-                                    'Flip : ' + getData(cellvar.graphics.flip)[0] + "\n" +
-                                    'Mirror : false' + "\n" +
+                                    'Flip : ' + flip + "\n" +
+                                    'Mirror : ' + mirror + "\n" +
                                     'Input Ports : ' + inputPort + "\n" +
                                     'Output Ports : ' + outputPort + "\n" +
                                     'Control Ports : ' + controlPort + "\n" +
@@ -812,6 +851,29 @@
                     button.appendChild(titleName);
                 });
 
+                /*
+                 * @jiteshjha, @pooja
+                 * rotateCustom(@parameters) is defined in 'orientation.js'
+                 */
+                editor.addAction('rotateCustom', function(editor, cell) {
+                    rotateCustom(editor, graph, cell);
+                }, null, null, 'Ctrl+R');
+
+                /*
+                 * @jiteshjha, @pooja
+                 * flipCustom(@parameters) is defined in 'orientation.js'
+                 */
+                editor.addAction('flipCustom', function(editor, cell) {
+                    flipCustom(editor, graph, cell);
+                }, null, null, 'Ctrl+R');
+
+                /*
+                 * @jiteshjha, @pooja
+                 * mirrorCustom(@parameters) is defined in 'orientation.js'
+                 */
+                 editor.addAction('mirrorCustom', function(editor, cell) {
+                    mirrorCustom(editor, graph, cell);
+                }, null, null, 'Ctrl+R');
 
                 // @jiteshjha, @pooja
                 /*
@@ -2571,6 +2633,8 @@
                         // Set label
                         style['label'] = label;
 
+                        style['imagePath'] = style['image'];
+
                         // Set image as null
                         style['image'] = null;
 
@@ -2635,6 +2699,9 @@
 
                     // @Chhavi: Additional attribute to store the block's instance
                     v1.blockInstance = createInstanceTag(details_instance);
+                    v1.currentAngle = 0;
+                    v1.flipX = 1;
+                    v1.flipY = 1;
                     createPorts(graph, v1, inputPorts, controlPorts, outputPorts, commandPorts);
                     v1.setConnectable(false);
                 } finally {
diff --git a/orientation.js b/orientation.js
new file mode 100644
index 0000000..d70da0f
--- /dev/null
+++ b/orientation.js
@@ -0,0 +1,503 @@
+/*
+    @pooja,
+    orientation.js contains the implementation of
+    block tranformation functions (rotation, flip and mirror)
+*/
+
+function transformBlockImage(graph, cell) {
+    var imageName=cell.style;
+    if(imageName.indexOf(";") != -1)
+    {
+        imageName=imageName.substring(0, imageName.indexOf(";"));
+    }
+    var value = graph.getModel().getValue(cell);
+    var dec = new mxCodec();
+    var details = dec.decode(value);
+    // Get the stylesheet for the graph
+    var stylesheet = graph.getStylesheet();
+    // From the stylesheet, get the style of the particular block
+    var style = stylesheet.styles[imageName];
+    var geometry = cell.getGeometry();
+    var point_x = geometry.x;
+    var point_y = geometry.y;
+    //IS_GC is to check if browser is Google Chrome, IS_FF is for Firefox. Updating the image style.
+    if( mxClient.IS_GC == true){
+        details['label'] = '<img src="' + style['imagePath'] + '" height=80px; width=80px; style="  transform:translate(' + point_x + 'px,' + point_y + 'px) rotate(' + cell.currentAngle + 'deg) scale(' + cell.flipX + ',' + cell.flipY + '); "/>';
+    }
+    else{
+        details['label'] = '<img src="' + style['imagePath'] + '" height=80px; width=80px; style="  transform: rotate(' + cell.currentAngle + 'deg) scale(' + cell.flipX + ',' + cell.flipY + '); "/>';
+    }
+    var enc = new mxCodec(mxUtils.createXmlDocument());
+    var value = enc.encode(details);
+    graph.getModel().setValue(cell, value);
+}
+
+function rotateCustom(editor, graph, cell) {
+  var selectedCell = graph.getSelectionCell();
+  if (selectedCell != null) {
+      var cells = [];
+      cells.push(selectedCell);
+
+      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++) {
+              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) {
+                              var dir = state.style[mxConstants.STYLE_ROTATION] || '0';
+                              var geoCell = cell.getGeometry();
+                              /*
+                                  To rotate the ports in sync with the block rotation.
+                                  A rotate makes port directing east direct to south, south direct to west, west direct to north and north direct to east.
+                              */
+                              if (cell.value == "ExplicitOutputPort" || cell.value == "ImplicitOutputPort") {
+                                  if (dir == '0' || dir == '180') {
+                                      var temp = geoCell.x;
+                                      geoCell.x = geoCell.y - 0.0625;
+                                      geoCell.y = temp + 0.0625;
+                                      if (dir == '0') {
+                                          dir = '90';
+                                      }
+                                      else {
+                                          dir = '270';
+                                      }
+
+                                  } else if (dir == '90' || dir == '270') {
+                                      geoCell.y = geoCell.x + 0.0625;
+                                      if (dir == '90') {
+                                          dir = '180';
+                                          geoCell.x = 0 - 0.125;
+                                      } else {
+                                          dir = '0';
+                                          geoCell.x = 1;
+                                      }
+                                  }
+                                  cell.setGeometry(geoCell);
+                              } else if (cell.value == "ExplicitInputPort" || cell.value == "ImplicitInputPort") {
+                                  if (dir == '90' || dir == '270') {
+                                      geoCell.y = geoCell.x - 0.0625;
+                                      if (dir == '90') {
+                                          dir = '180';
+                                          geoCell.x = 1 + 0.125;
+                                      } else {
+                                          dir = '0';
+                                          geoCell.x = 0;
+                                      }
+                                  } else if (dir == '0' || dir == '180') {
+                                      geoCell = geoCell.clone();
+                                      var temp = geoCell.x;
+                                      geoCell.x = parseFloat(geoCell.y) + 0.0625;
+                                      geoCell.y = temp - 0.0625;
+                                      if (dir == '0'){
+                                          dir = '90';
+                                      }
+                                      else{
+                                          dir = '270';
+                                      }
+                                  }
+                                   cell.setGeometry(geoCell);
+                              } else if (cell.value == 'CommandPort') {
+
+                                  if (dir == '0' || dir == '180') {
+                                      var temp = geoCell.x;
+                                      geoCell.x = geoCell.y + 0.0625;
+                                      geoCell.y = temp - 0.0625;
+                                      if (dir == '0'){
+                                          dir = '90';
+                                      }
+                                      else{
+                                          dir = '270';
+                                      }
+                                  } else if (dir == '90' || dir == '270') {
+                                      geoCell.y = parseFloat(geoCell.x) - 0.0625;
+                                      if (dir == '90') {
+                                          dir = '180';
+                                          geoCell.x = 0 - 0.0625;
+                                      } else {
+                                          dir = '0';
+                                          geoCell.x = 1 + 0.0625;
+                                      }
+                                  }
+                                  cell.setGeometry(geoCell);
+                              } else if (cell.value == 'ControlPort') {
+                                  if (dir == '0' || dir == '180') {
+                                      var temp= geoCell.x;
+                                      geoCell.x = geoCell.y - 0.0625;
+                                      geoCell.y = temp + 0.0625;
+                                      if (dir == '0'){
+                                          dir = '90';
+                                      }
+                                      else{
+                                          dir = '270';
+                                      }
+                                  } else if (dir == '90' || dir == '270') {
+                                      geoCell.y = parseFloat(geoCell.x) + 0.0625;
+                                      if (dir == '90') {
+                                          dir = '180';
+                                          geoCell.x = 1 + 0.0625;
+                                      } else {
+                                          dir = '0';
+                                          geoCell.x = 0 - 0.0625;
+                                      }
+                                  }
+                                  cell.setGeometry(geoCell);
+                              }
+                          }
+                          graph.setCellStyles(mxConstants.STYLE_ROTATION, dir, [cell]);
+                      }
+                  }
+              }
+              if(cell.isConnectable()==false){
+                  var state = graph.view.getState(cell);
+                  if (state != null) {
+                      var dir = state.style[mxConstants.STYLE_ROTATION] || '0';
+                      dir = (dir+90)%360;
+                      graph.setCellStyles(mxConstants.STYLE_ROTATION, dir, [cell]);
+                  }
+                  if(cell.value.getAttribute('label')!= null && cell.value.getAttribute('label').substring(1,4)=="img")
+                  {
+                      cell.currentAngle=(parseInt(cell.currentAngle)+90)%360;
+                      var imageName=cell.style;
+                      transformBlockImage(graph, cell);
+                  }
+              }
+          }
+      } finally {
+          graph.getModel().endUpdate();
+      }
+  }
+}
+
+function flipCustom(editor, graph, cell) {
+  var selectedCell = graph.getSelectionCell();
+  if (selectedCell != null) {
+      var cells = [];
+      cells.push(selectedCell);
+
+      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++) {
+              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 flips the ports
+                      var state = graph.view.getState(cell);
+                      if (state != null) {
+                          if (cell.isConnectable() == true) {
+                              var dir = state.style[mxConstants.STYLE_ROTATION] || '0';
+                              var flip = state.style[mxConstants.STYLE_STENCIL_FLIPV] || '0';
+                              var geoCell = cell.getGeometry();
+
+                              /*
+                                  To flip the ports in sync with the block flip.
+                                  A flip makes port directing north direct to south and vice versa.
+                                  A port directing east or west will have to aligh with the other ports which have same direction.
+                              */
+
+                              if (cell.value == 'CommandPort' || cell.value == 'ControlPort') {
+                                  if (dir == '90' || dir == '270') {
+                                      if(cell.value == 'CommandPort') {
+                                         if (dir == '90')
+                                          {
+                                              geoCell.y = geoCell.y - 1 - 0.125 ;
+                                              dir = '270';
+                                          }
+                                          else
+                                          {
+                                              geoCell.y = geoCell.y + 1 + 0.125;
+                                              dir = '90';
+                                          }
+                                      }
+                                      else {
+                                          if (dir == '90')
+                                          {
+                                              geoCell.y = geoCell.y + 1 + 0.125;
+                                              dir = '270';
+                                          }
+                                          else
+                                          {
+                                              geoCell.y = geoCell.y - 1 - 0.125;
+                                              dir = '90';
+                                          }
+                                      }
+                                  }
+                                  else if (dir == '0' || dir == '180')
+                                  {
+                                      if(cell.value == 'CommandPort'){
+                                          geoCell.y = 1 - geoCell.y - 0.125;
+                                      }
+                                      else{
+                                          geoCell.y = 1 - geoCell.y + 0.125;
+                                      }
+                                  }
+                                  cell.setGeometry(geoCell);
+                              }
+                              else if (cell.value == "ExplicitOutputPort" ||
+                                  cell.value == "ImplicitOutputPort" || cell.value == "ExplicitInputPort" || cell.value == "ImplicitInputPort") {
+                                  if (dir == '90' || dir == '270') {
+                                      if(cell.value == "ExplicitOutputPort" || cell.value == "ImplicitOutputPort") {
+                                          if (dir == '90')
+                                          {
+                                              geoCell.y = geoCell.y - 1 - 0.125 ;
+                                              dir = '270';
+                                          }
+                                          else
+                                          {
+                                              geoCell.y = geoCell.y + 1 + 0.125;
+                                              dir = '90';
+                                          }
+                                      }
+                                      else {
+                                         if (dir == '90')
+                                          {
+                                              geoCell.y = geoCell.y + 1 + 0.125;
+                                              dir = '270';
+                                          }
+                                          else
+                                          {
+                                              geoCell.y = geoCell.y - 1 - 0.125;
+                                              dir = '90';
+                                          }
+                                      }
+                                  }
+                                  else if(dir == '0' || dir == '180')
+                                  {
+                                      geoCell.y = 1 - geoCell.y;
+                                  }
+                                  cell.setGeometry(geoCell);
+                              }
+                          }
+                          graph.setCellStyles(mxConstants.STYLE_ROTATION, dir, [cell]);
+                          if(flip == '0'){
+                              graph.setCellStyles(mxConstants.STYLE_STENCIL_FLIPV, '1', [cell]);
+                          }
+                          else{
+                              graph.setCellStyles(mxConstants.STYLE_STENCIL_FLIPV, '0', [cell]);
+                          }
+                      }
+                  }
+              }
+              if(cell.isConnectable()==false)
+              {
+                  var state = graph.view.getState(cell);
+                  if (state != null) {
+                      var dir = state.style[mxConstants.STYLE_ROTATION];
+                      var flip = state.style[mxConstants.STYLE_STENCIL_FLIPV] || '0';
+                      if(flip == '0'){
+                          graph.setCellStyles(mxConstants.STYLE_STENCIL_FLIPV, '1', [cell]);
+                      }
+                      else{
+                          graph.setCellStyles(mxConstants.STYLE_STENCIL_FLIPV, '0', [cell]);
+                      }
+                      if(dir == '0' || dir == '180'){
+                          dir = (dir+180)%360;
+
+                      }
+                      graph.setCellStyles(mxConstants.STYLE_ROTATION, dir, [cell]);
+                  }
+                  if(cell.value.getAttribute('label')!= null && cell.value.getAttribute('label').substring(1,4)=="img")
+                  {
+                      if(cell.currentAngle == 90 || cell.currentAngle == 270){
+                          cell.flipX=-parseInt(cell.flipX);
+                      }
+                      else {
+                          cell.flipY=-parseInt(cell.flipY);
+                      }
+                      transformBlockImage(graph, cell);
+                  }
+              }
+          }
+      } finally {
+          graph.getModel().endUpdate();
+      }
+  }
+}
+
+function mirrorCustom(editor, graph, cell) {
+  var selectedCell = graph.getSelectionCell();
+
+  if (selectedCell != null) {
+      var cells = [];
+
+      cells.push(selectedCell);
+
+      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++) {
+              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 mirrors the ports
+                      var state = graph.view.getState(cell);
+                      if (state != null) {
+                          var dir = state.style[mxConstants.STYLE_ROTATION] || '0';
+                          var mirror = state.style[mxConstants.STYLE_STENCIL_FLIPH] || '0';
+                          if (cell.isConnectable() == true) {
+                              var geoCell = cell.getGeometry();
+
+                               /*
+                                  To mirror the ports in sync with the block mirror.
+                                  A mirror makes port directing east direct to west and vice versa.
+                                  A port directing north or south will have to aligh with the other ports which have same direction.
+                              */
+
+                              if (cell.value == "ExplicitOutputPort" || cell.value == "ImplicitOutputPort" || cell.value == "ExplicitInputPort" || cell.value == "ImplicitInputPort") {
+                                  if(dir == '180' || dir == '0'){
+                                      if(cell.value == "ExplicitOutputPort" || cell.value == "ImplicitOutputPort") {
+                                          if (dir == '0')
+                                          {
+                                              geoCell.x = geoCell.x - 1 - 0.125;
+                                              dir = '180';
+                                          }
+                                          else
+                                          {
+                                              geoCell.x = geoCell.x + 1 + 0.125;
+                                              dir = '0';
+                                          }
+                                      }
+                                      else {
+                                          geoCell = geoCell.clone();
+                                          if (dir == '0')
+                                          {
+                                              geoCell.x = geoCell.x + 1 + 0.125;
+                                              dir = '180';
+                                          }
+                                          else
+                                          {
+                                              geoCell.x = geoCell.x - 1 - 0.125;
+                                              dir = '0';
+                                          }
+                                      }
+                                  }
+                                  else if (dir == '90' || dir == '270')
+                                  {
+                                      if(cell.value == "ExplicitOutputPort" || cell.value == "ImplicitOutputPort"){
+                                          geoCell.x = 1 - geoCell.x - 0.125;
+                                      }
+                                      else{
+                                          geoCell.x = 1 - geoCell.x + 0.125;
+                                      }
+                                  }
+                                  cell.setGeometry(geoCell);
+                              }
+                              else if (cell.value == 'CommandPort' || cell.value == 'ControlPort') {
+                                  if (dir == '0' || dir == '180') {
+                                      if(cell.value == 'CommandPort') {
+                                          if (dir == '180')
+                                          {
+                                              geoCell.x = geoCell.x + 1 + 0.125;
+                                              dir = '0';
+                                          }
+                                          else
+                                          {
+                                              geoCell.x = geoCell.x - 1 - 0.125;
+                                              dir = '180';
+                                          }
+                                      }
+                                      else{
+                                          if (dir == '180')
+                                          {
+                                              geoCell.x = geoCell.x - 1 - 0.125;
+                                              dir = '0';
+                                          }
+                                          else
+                                          {
+                                              geoCell.x = geoCell.x + 1 + 0.125;
+                                              dir = '180';
+                                          }
+                                      }
+                                  }
+                                  else if(dir == '90' || dir == '270')
+                                  {
+                                      geoCell.x = 1 - geoCell.x;
+                                  }
+                                  cell.setGeometry(geoCell);
+                              }
+                          }
+                          graph.setCellStyles(mxConstants.STYLE_ROTATION, dir, [cell]);
+                          if(mirror == '0'){
+                              graph.setCellStyles(mxConstants.STYLE_STENCIL_FLIPH, '1', [cell]);
+                          }
+                          else{
+                              graph.setCellStyles(mxConstants.STYLE_STENCIL_FLIPH, '0', [cell]);
+                          }
+                      }
+                  }
+              }
+
+              if(cell.isConnectable()==false){
+                  var state = graph.view.getState(cell);
+                  if (state != null) {
+                          var dir = state.style[mxConstants.STYLE_ROTATION];
+                          var mirror = state.style[mxConstants.STYLE_STENCIL_FLIPH] || '0';
+                          if(mirror == '0'){
+                              graph.setCellStyles(mxConstants.STYLE_STENCIL_FLIPH, '1', [cell]);
+                          }
+                          else{
+                              graph.setCellStyles(mxConstants.STYLE_STENCIL_FLIPH, '0', [cell]);
+                          }
+                          if(dir == '90' || dir == '270'){
+                              dir = (dir+180)%360;
+
+                          }
+                          graph.setCellStyles(mxConstants.STYLE_ROTATION, dir, [cell]);
+                  }
+                  if(cell.value.getAttribute('label') != null && cell.value.getAttribute('label').substring(1,4)=="img" )
+                  {
+                      if(cell.currentAngle == 90 || cell.currentAngle == 270){
+                          cell.flipY=-parseInt(cell.flipY);
+                      }
+                      else {
+                          cell.flipX=-parseInt(cell.flipX);
+                      }
+                      transformBlockImage(graph, cell);
+                  }
+              }
+          }
+      } finally {
+          graph.getModel().endUpdate();
+      }
+  }
+}
-- 
cgit 


From 80f624b54fe7db6c4884b9323f1b380e5cbf3945 Mon Sep 17 00:00:00 2001
From: Pooja Soundalgekar
Date: Tue, 12 Jul 2016 15:26:02 +0530
Subject: removed Ctrl R in orientation

---
 index.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 9326b31..4a65646 100755
--- a/index.html
+++ b/index.html
@@ -857,7 +857,7 @@
                  */
                 editor.addAction('rotateCustom', function(editor, cell) {
                     rotateCustom(editor, graph, cell);
-                }, null, null, 'Ctrl+R');
+                });
 
                 /*
                  * @jiteshjha, @pooja
@@ -865,7 +865,7 @@
                  */
                 editor.addAction('flipCustom', function(editor, cell) {
                     flipCustom(editor, graph, cell);
-                }, null, null, 'Ctrl+R');
+                });
 
                 /*
                  * @jiteshjha, @pooja
@@ -873,7 +873,7 @@
                  */
                  editor.addAction('mirrorCustom', function(editor, cell) {
                     mirrorCustom(editor, graph, cell);
-                }, null, null, 'Ctrl+R');
+                });
 
                 // @jiteshjha, @pooja
                 /*
-- 
cgit 


From 5b55cf3036020eebf89bc43270d502b18f399347 Mon Sep 17 00:00:00 2001
From: Pooja Soundalgekar
Date: Tue, 12 Jul 2016 15:41:05 +0530
Subject: flip and mirror images in orientation

---
 images/flip.png   | Bin 0 -> 540 bytes
 images/mirror.png | Bin 0 -> 581 bytes
 index.html        |   4 ++--
 3 files changed, 2 insertions(+), 2 deletions(-)
 create mode 100644 images/flip.png
 create mode 100644 images/mirror.png

diff --git a/images/flip.png b/images/flip.png
new file mode 100644
index 0000000..6dbbb5e
Binary files /dev/null and b/images/flip.png differ
diff --git a/images/mirror.png b/images/mirror.png
new file mode 100644
index 0000000..2676528
Binary files /dev/null and b/images/mirror.png differ
diff --git a/index.html b/index.html
index 4a65646..52adf8a 100755
--- a/index.html
+++ b/index.html
@@ -196,10 +196,10 @@
                             menu.addItem('Rotate', 'images/rotate.png', function() {
                                 editor.execute('rotateCustom');
                             }, format);
-                            menu.addItem('Flip', 'images/rotate.png', function() {
+                            menu.addItem('Flip', 'images/flip.png', function() {
                                 editor.execute('flipCustom');
                             }, format);
-                            menu.addItem('Mirror', 'images/rotate.png', function() {
+                            menu.addItem('Mirror', 'images/mirror.png', function() {
                                 editor.execute('mirrorCustom');
                             }, format);
                             menu.addItem('Border Color', 'images/draw-brush.png', function() {
-- 
cgit 


From 237595a09c62195ba7f2ac11460fbe277ed1874b Mon Sep 17 00:00:00 2001
From: Pooja Soundalgekar
Date: Tue, 12 Jul 2016 15:44:54 +0530
Subject: formatMenu in orientation

---
 index.html | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index 52adf8a..a4f3632 100755
--- a/index.html
+++ b/index.html
@@ -192,22 +192,22 @@
                             menu.addItem('Selection to superblock', 'images/superblock.png', function() {
                                 // @ToDo: Functionality to be put.
                             });
-                            var format = menu.addItem('Format', null, null);
+                            var formatMenu = menu.addItem('Format', null, null);
                             menu.addItem('Rotate', 'images/rotate.png', function() {
                                 editor.execute('rotateCustom');
-                            }, format);
+                            }, formatMenu);
                             menu.addItem('Flip', 'images/flip.png', function() {
                                 editor.execute('flipCustom');
-                            }, format);
+                            }, formatMenu);
                             menu.addItem('Mirror', 'images/mirror.png', function() {
                                 editor.execute('mirrorCustom');
-                            }, format);
+                            }, formatMenu);
                             menu.addItem('Border Color', 'images/draw-brush.png', function() {
                                 showColorWheel(graph, cell, 'vertexStrokeColor');
-                            }, format);
+                            }, formatMenu);
                             menu.addItem('Fill Color', 'images/edit.png', function() {
                                 showColorWheel(graph, cell, 'vertexFillColor');
-                            }, format);
+                            }, formatMenu);
                             menu.addItem('Details', null, function() {
                                 // @ToDo: Functionality to be put.
                             });
-- 
cgit 


From 478f4d2ac25195ddd948d713fd975e973ebd7c3a Mon Sep 17 00:00:00 2001
From: Pooja Soundalgekar
Date: Tue, 12 Jul 2016 17:10:53 +0530
Subject: for all blocks orientation

---
 orientation.js | 75 +++++++++++++++++++++++++++++++---------------------------
 1 file changed, 40 insertions(+), 35 deletions(-)

diff --git a/orientation.js b/orientation.js
index d70da0f..72e885f 100644
--- a/orientation.js
+++ b/orientation.js
@@ -33,16 +33,17 @@ function transformBlockImage(graph, cell) {
 }
 
 function rotateCustom(editor, graph, cell) {
-  var selectedCell = graph.getSelectionCell();
-  if (selectedCell != null) {
-      var cells = [];
-      cells.push(selectedCell);
+  var selectedCells = graph.getSelectionCells();
+  graph.getModel().beginUpdate();
+  try {
+    for ( var count = 0 ; count < selectedCells.length; count++){
+      var selectedCell = selectedCells[count];
+      if (selectedCell != null) {
+          var cells = [];
+          cells.push(selectedCell);
 
-      for (var i = 0; i < selectedCell.getChildCount(); i++)
-          cells.push(selectedCell.getChildAt(i));
-
-      graph.getModel().beginUpdate();
-      try {
+          for (var i = 0; i < selectedCell.getChildCount(); i++)
+              cells.push(selectedCell.getChildAt(i));
 
           for (var i = 0; i < cells.length; i++) {
               var cell = cells[i];
@@ -179,23 +180,25 @@ function rotateCustom(editor, graph, cell) {
                   }
               }
           }
-      } finally {
-          graph.getModel().endUpdate();
       }
+    }
+  }
+  finally {
+            graph.getModel().endUpdate();
   }
 }
 
 function flipCustom(editor, graph, cell) {
-  var selectedCell = graph.getSelectionCell();
-  if (selectedCell != null) {
-      var cells = [];
-      cells.push(selectedCell);
-
-      for (var i = 0; i < selectedCell.getChildCount(); i++)
-          cells.push(selectedCell.getChildAt(i));
-
-      graph.getModel().beginUpdate();
-      try {
+  var selectedCells = graph.getSelectionCells();
+  graph.getModel().beginUpdate();
+  try {
+    for ( var count = 0 ; count < selectedCells.length; count++){
+      var selectedCell = selectedCells[count];
+      if (selectedCell != null) {
+          var cells = [];
+          cells.push(selectedCell);
+          for (var i = 0; i < selectedCell.getChildCount(); i++)
+              cells.push(selectedCell.getChildAt(i));
           for (var i = 0; i < cells.length; i++) {
               var cell = cells[i];
               if (cell.isVertex() == true) {
@@ -336,25 +339,26 @@ function flipCustom(editor, graph, cell) {
                   }
               }
           }
-      } finally {
-          graph.getModel().endUpdate();
       }
+    }
+  } finally {
+          graph.getModel().endUpdate();
   }
 }
 
 function mirrorCustom(editor, graph, cell) {
-  var selectedCell = graph.getSelectionCell();
-
-  if (selectedCell != null) {
-      var cells = [];
-
-      cells.push(selectedCell);
+  var selectedCells = graph.getSelectionCells();
+  graph.getModel().beginUpdate();
+  try {
+    for ( var count = 0 ; count < selectedCells.length; count++){
+      var selectedCell = selectedCells[count];
+      if (selectedCell != null) {
+          var cells = [];
 
-      for (var i = 0; i < selectedCell.getChildCount(); i++)
-          cells.push(selectedCell.getChildAt(i));
+          cells.push(selectedCell);
 
-      graph.getModel().beginUpdate();
-      try {
+          for (var i = 0; i < selectedCell.getChildCount(); i++)
+              cells.push(selectedCell.getChildAt(i));
           for (var i = 0; i < cells.length; i++) {
               var cell = cells[i];
               if (cell.isVertex() == true) {
@@ -496,8 +500,9 @@ function mirrorCustom(editor, graph, cell) {
                   }
               }
           }
-      } finally {
-          graph.getModel().endUpdate();
       }
+    }
+  } finally {
+          graph.getModel().endUpdate();
   }
 }
-- 
cgit 


From 69ab3cbceb9c9efa281e3ec6e17cc884ea6c10ad Mon Sep 17 00:00:00 2001
From: Pooja Soundalgekar
Date: Tue, 12 Jul 2016 23:37:21 +0530
Subject: colour for all blocks

---
 index.html | 48 +++++++++++++++++++++++++++++-------------------
 1 file changed, 29 insertions(+), 19 deletions(-)

diff --git a/index.html b/index.html
index a4f3632..b22e435 100755
--- a/index.html
+++ b/index.html
@@ -2466,28 +2466,38 @@
             btn.style.cssText = 'margin-left: 75px';
             // Executes when button 'btn' is clicked
             btn.onclick = function() {
-                var input = document.getElementById('color').value;
-                var style = graph.getModel().getStyle(cell);
+                var selectedCells = graph.getSelectionCells();
+                graph.getModel().beginUpdate();
+                try {
+                    for ( var count = 0 ; count < selectedCells.length; count++){
+                        var selectedCell = selectedCells[count];
+                        var input = document.getElementById('color').value;
+                        var style = graph.getModel().getStyle(selectedCell);
 
-                if (style != null) {
-                    var styleObject = styleToObject(style);
-                }
+                        if (style != null) {
+                            var styleObject = styleToObject(style);
+                        }
 
-                if (selectProperty == "edgeStrokeColor") {
-                    styleObject['strokeColor'] = input;
-                } else if (selectProperty == "bgColor") {
-                    graph.container.style.backgroundColor = input;
-                } else if (selectProperty == "vertexStrokeColor") {
-                    styleObject['strokeColor'] = input;
-                } else if (selectProperty == "vertexFillColor") {
-                    styleObject['fillColor'] = input;
-                } else if (selectProperty == "edgeTextColor") {
-                    styleObject['fontColor'] = input;
-                }
+                        if (selectProperty == "edgeStrokeColor") {
+                            styleObject['strokeColor'] = input;
+                        } else if (selectProperty == "bgColor") {
+                            graph.container.style.backgroundColor = input;
+                        } else if (selectProperty == "vertexStrokeColor") {
+                            styleObject['strokeColor'] = input;
+                        } else if (selectProperty == "vertexFillColor") {
+                            styleObject['fillColor'] = input;
+                        } else if (selectProperty == "edgeTextColor") {
+                            styleObject['fontColor'] = input;
+                        }
 
-                if (style != null) {
-                    style = objectToStyle(styleObject);
-                    graph.getModel().setStyle(cell, style);
+                        if (style != null) {
+                            style = objectToStyle(styleObject);
+                            graph.getModel().setStyle(selectedCell, style);
+                        }
+                    }
+                }
+                finally {
+                    graph.getModel().endUpdate();
                 }
 
                 wind.destroy();
-- 
cgit 


From ce05ba7adb6aa74508924360660ae442d3e2e5bd Mon Sep 17 00:00:00 2001
From: Pooja Soundalgekar
Date: Wed, 13 Jul 2016 00:01:01 +0530
Subject: made final changes

---
 index.html | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index b22e435..fcdf709 100755
--- a/index.html
+++ b/index.html
@@ -734,13 +734,15 @@
                                 }
 
                                 var flip = false, mirror = false;
-                                if(cell.style.indexOf('stencilFlipV') == -1){
+                                var style = cell.style;
+                                var styleObject = styleToObject(style);
+                                if(styleObject['stencilFlipV'] == null){
                                     flip = false;
                                 }
                                 else
                                 {
-                                    var x = cell.style.indexOf('stencilFlipV');
-                                    if(cell.style.charAt(x+13) == 0){
+                                    
+                                    if(styleObject['stencilFlipV'] == 0){
                                         flip = false;
                                     }
                                     else{
@@ -748,13 +750,13 @@
                                     }
 
                                 }
-                                if(cell.style.indexOf('stencilFlipH') == -1){
+                                if(styleObject['stencilFlipH'] == null){
                                     mirror = false;
                                 }
                                 else
                                 {
-                                    var x = cell.style.indexOf('stencilFlipH');
-                                    if(cell.style.charAt(x+13) == 0){
+                                   
+                                    if(styleObject['stencilFlipH'] == 0 ){
                                         mirror = false;
                                     }
                                     else{
@@ -762,6 +764,7 @@
                                     }
 
                                 }
+                                style = objectToStyle(styleObject);
                                 var geometry = cell.getGeometry();
                                 text = 'Block Name : ' + cell.value.getAttribute('blockElementName') + "\n" +
                                     'Simulation : ' + cell.value.getAttribute('simulationFunctionName') + "\n" +
@@ -1688,7 +1691,9 @@
             if (style.indexOf(';') == -1) {
                 style = style + ';';
             }
-
+            else if ( style[style.length-1] != ';'){
+            	style = style + ';';
+        	}
             var defaultStyle = style.substring(0, style.indexOf(';'));
             var styleObject = {
                 "default": defaultStyle
-- 
cgit 


From 986dfa66294e69f3e78c00c49b4f0146de23709b Mon Sep 17 00:00:00 2001
From: Pooja Soundalgekar
Date: Wed, 13 Jul 2016 00:17:02 +0530
Subject: comments put beatuified

---
 index.html     |  66 ++---
 orientation.js | 850 +++++++++++++++++++++++++++------------------------------
 2 files changed, 423 insertions(+), 493 deletions(-)

diff --git a/index.html b/index.html
index fcdf709..fdd71cf 100755
--- a/index.html
+++ b/index.html
@@ -710,56 +710,47 @@
                                 var inputPort, outputPort, controlPort, commandPort;
                                 if (cellvar.model.in.height == null) {
                                     inputPort = 0;
-                                }
-                                else {
+                                } else {
                                     inputPort = cellvar.model.in.height;
                                 }
                                 if (cellvar.model.out.height == null) {
                                     outputPort = 0;
-                                }
-                                else {
+                                } else {
                                     outputPort = cellvar.model.out.height;
                                 }
                                 if (cellvar.model.evtin.height == null) {
                                     controlPort = 0;
-                                }
-                                else {
+                                } else {
                                     controlPort = cellvar.model.evtin.height;
                                 }
                                 if (cellvar.model.evtout.height == null) {
                                     commandPort = 0;
-                                }
-                                else {
+                                } else {
                                     commandPort = cellvar.model.evtout.height;
                                 }
 
-                                var flip = false, mirror = false;
+                                var flip = false,
+                                    mirror = false;
                                 var style = cell.style;
                                 var styleObject = styleToObject(style);
-                                if(styleObject['stencilFlipV'] == null){
+                                if (styleObject['stencilFlipV'] == null) {
                                     flip = false;
-                                }
-                                else
-                                {
-                                    
-                                    if(styleObject['stencilFlipV'] == 0){
+                                } else {
+
+                                    if (styleObject['stencilFlipV'] == 0) {
                                         flip = false;
-                                    }
-                                    else{
+                                    } else {
                                         flip = true;
                                     }
 
                                 }
-                                if(styleObject['stencilFlipH'] == null){
+                                if (styleObject['stencilFlipH'] == null) {
                                     mirror = false;
-                                }
-                                else
-                                {
-                                   
-                                    if(styleObject['stencilFlipH'] == 0 ){
+                                } else {
+
+                                    if (styleObject['stencilFlipH'] == 0) {
                                         mirror = false;
-                                    }
-                                    else{
+                                    } else {
                                         mirror = true;
                                     }
 
@@ -794,12 +785,12 @@
 
                     if (mxUtils.isNode(cell.value)) {
                         var stylesheet = graph.getStylesheet();
-						var attribute = cell.value.getAttribute('style');
-                        if(attribute == null){
+                        var attribute = cell.value.getAttribute('style');
+                        if (attribute == null) {
                             attribute = cell.value.getAttribute('interfaceFunctionName');
                         }
                         var style = stylesheet.styles[attribute];
-						var displayedLabel = style['displayedLabel'];
+                        var displayedLabel = style['displayedLabel'];
                         if (displayedLabel != null) {
                             var displayParameter = cell.blockInstance.instance.displayParameter;
                             for (i in displayParameter) {
@@ -874,7 +865,7 @@
                  * @jiteshjha, @pooja
                  * mirrorCustom(@parameters) is defined in 'orientation.js'
                  */
-                 editor.addAction('mirrorCustom', function(editor, cell) {
+                editor.addAction('mirrorCustom', function(editor, cell) {
                     mirrorCustom(editor, graph, cell);
                 });
 
@@ -1174,7 +1165,7 @@
                     button.type = "button";
                     button.name = "submit";
                     node.appendChild(button);
-                    
+
                     /*
                         Maverick
                         Reference: www.htmlgoodies.com
@@ -1474,7 +1465,7 @@
                                 Maverick
                                 Connecting the links. 
                             */
-                            
+
                             currentNode = rootNode.firstChild;
                             while (currentNode != null) {
                                 var curNodeName = currentNode.nodeName;
@@ -1688,12 +1679,10 @@
         */
 
         function styleToObject(style) {
-            if (style.indexOf(';') == -1) {
+            //To add semicolon at the end if it isn't already present.
+            if (style[style.length - 1] != ';') {
                 style = style + ';';
             }
-            else if ( style[style.length-1] != ';'){
-            	style = style + ';';
-        	}
             var defaultStyle = style.substring(0, style.indexOf(';'));
             var styleObject = {
                 "default": defaultStyle
@@ -2474,7 +2463,7 @@
                 var selectedCells = graph.getSelectionCells();
                 graph.getModel().beginUpdate();
                 try {
-                    for ( var count = 0 ; count < selectedCells.length; count++){
+                    for (var count = 0; count < selectedCells.length; count++) {
                         var selectedCell = selectedCells[count];
                         var input = document.getElementById('color').value;
                         var style = graph.getModel().getStyle(selectedCell);
@@ -2500,8 +2489,7 @@
                             graph.getModel().setStyle(selectedCell, style);
                         }
                     }
-                }
-                finally {
+                } finally {
                     graph.getModel().endUpdate();
                 }
 
@@ -3365,4 +3353,4 @@
     });
 </script>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/orientation.js b/orientation.js
index 72e885f..6071758 100644
--- a/orientation.js
+++ b/orientation.js
@@ -3,12 +3,10 @@
     orientation.js contains the implementation of
     block tranformation functions (rotation, flip and mirror)
 */
-
 function transformBlockImage(graph, cell) {
-    var imageName=cell.style;
-    if(imageName.indexOf(";") != -1)
-    {
-        imageName=imageName.substring(0, imageName.indexOf(";"));
+    var imageName = cell.style;
+    if (imageName.indexOf(";") != -1) {
+        imageName = imageName.substring(0, imageName.indexOf(";"));
     }
     var value = graph.getModel().getValue(cell);
     var dec = new mxCodec();
@@ -21,10 +19,9 @@ function transformBlockImage(graph, cell) {
     var point_x = geometry.x;
     var point_y = geometry.y;
     //IS_GC is to check if browser is Google Chrome, IS_FF is for Firefox. Updating the image style.
-    if( mxClient.IS_GC == true){
+    if (mxClient.IS_GC == true) {
         details['label'] = '<img src="' + style['imagePath'] + '" height=80px; width=80px; style="  transform:translate(' + point_x + 'px,' + point_y + 'px) rotate(' + cell.currentAngle + 'deg) scale(' + cell.flipX + ',' + cell.flipY + '); "/>';
-    }
-    else{
+    } else {
         details['label'] = '<img src="' + style['imagePath'] + '" height=80px; width=80px; style="  transform: rotate(' + cell.currentAngle + 'deg) scale(' + cell.flipX + ',' + cell.flipY + '); "/>';
     }
     var enc = new mxCodec(mxUtils.createXmlDocument());
@@ -33,476 +30,421 @@ function transformBlockImage(graph, cell) {
 }
 
 function rotateCustom(editor, graph, cell) {
-  var selectedCells = graph.getSelectionCells();
-  graph.getModel().beginUpdate();
-  try {
-    for ( var count = 0 ; count < selectedCells.length; count++){
-      var selectedCell = selectedCells[count];
-      if (selectedCell != null) {
-          var cells = [];
-          cells.push(selectedCell);
+    var selectedCells = graph.getSelectionCells();
+    graph.getModel().beginUpdate();
+    try {
+        for (var count = 0; count < selectedCells.length; count++) {
+            var selectedCell = selectedCells[count];
+            if (selectedCell != null) {
+                var cells = [];
+                cells.push(selectedCell);
 
-          for (var i = 0; i < selectedCell.getChildCount(); i++)
-              cells.push(selectedCell.getChildAt(i));
+                for (var i = 0; i < selectedCell.getChildCount(); i++)
+                    cells.push(selectedCell.getChildAt(i));
 
-          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) {
-                              var dir = state.style[mxConstants.STYLE_ROTATION] || '0';
-                              var geoCell = cell.getGeometry();
-                              /*
-                                  To rotate the ports in sync with the block rotation.
-                                  A rotate makes port directing east direct to south, south direct to west, west direct to north and north direct to east.
-                              */
-                              if (cell.value == "ExplicitOutputPort" || cell.value == "ImplicitOutputPort") {
-                                  if (dir == '0' || dir == '180') {
-                                      var temp = geoCell.x;
-                                      geoCell.x = geoCell.y - 0.0625;
-                                      geoCell.y = temp + 0.0625;
-                                      if (dir == '0') {
-                                          dir = '90';
-                                      }
-                                      else {
-                                          dir = '270';
-                                      }
+                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) {
+                                    var dir = state.style[mxConstants.STYLE_ROTATION] || '0';
+                                    var geoCell = cell.getGeometry();
+                                    /*
+                                        To rotate the ports in sync with the block rotation.
+                                        A rotate makes port directing east direct to south, south direct to west, west direct to north and north direct to east.
+                                    */
+                                    if (cell.value == "ExplicitOutputPort" || cell.value == "ImplicitOutputPort") {
+                                        if (dir == '0' || dir == '180') {
+                                            var temp = geoCell.x;
+                                            geoCell.x = geoCell.y - 0.0625;
+                                            geoCell.y = temp + 0.0625;
+                                            if (dir == '0') {
+                                                dir = '90';
+                                            } else {
+                                                dir = '270';
+                                            }
 
-                                  } else if (dir == '90' || dir == '270') {
-                                      geoCell.y = geoCell.x + 0.0625;
-                                      if (dir == '90') {
-                                          dir = '180';
-                                          geoCell.x = 0 - 0.125;
-                                      } else {
-                                          dir = '0';
-                                          geoCell.x = 1;
-                                      }
-                                  }
-                                  cell.setGeometry(geoCell);
-                              } else if (cell.value == "ExplicitInputPort" || cell.value == "ImplicitInputPort") {
-                                  if (dir == '90' || dir == '270') {
-                                      geoCell.y = geoCell.x - 0.0625;
-                                      if (dir == '90') {
-                                          dir = '180';
-                                          geoCell.x = 1 + 0.125;
-                                      } else {
-                                          dir = '0';
-                                          geoCell.x = 0;
-                                      }
-                                  } else if (dir == '0' || dir == '180') {
-                                      geoCell = geoCell.clone();
-                                      var temp = geoCell.x;
-                                      geoCell.x = parseFloat(geoCell.y) + 0.0625;
-                                      geoCell.y = temp - 0.0625;
-                                      if (dir == '0'){
-                                          dir = '90';
-                                      }
-                                      else{
-                                          dir = '270';
-                                      }
-                                  }
-                                   cell.setGeometry(geoCell);
-                              } else if (cell.value == 'CommandPort') {
+                                        } else if (dir == '90' || dir == '270') {
+                                            geoCell.y = geoCell.x + 0.0625;
+                                            if (dir == '90') {
+                                                dir = '180';
+                                                geoCell.x = 0 - 0.125;
+                                            } else {
+                                                dir = '0';
+                                                geoCell.x = 1;
+                                            }
+                                        }
+                                        cell.setGeometry(geoCell);
+                                    } else if (cell.value == "ExplicitInputPort" || cell.value == "ImplicitInputPort") {
+                                        if (dir == '90' || dir == '270') {
+                                            geoCell.y = geoCell.x - 0.0625;
+                                            if (dir == '90') {
+                                                dir = '180';
+                                                geoCell.x = 1 + 0.125;
+                                            } else {
+                                                dir = '0';
+                                                geoCell.x = 0;
+                                            }
+                                        } else if (dir == '0' || dir == '180') {
+                                            geoCell = geoCell.clone();
+                                            var temp = geoCell.x;
+                                            geoCell.x = parseFloat(geoCell.y) + 0.0625;
+                                            geoCell.y = temp - 0.0625;
+                                            if (dir == '0') {
+                                                dir = '90';
+                                            } else {
+                                                dir = '270';
+                                            }
+                                        }
+                                        cell.setGeometry(geoCell);
+                                    } else if (cell.value == 'CommandPort') {
 
-                                  if (dir == '0' || dir == '180') {
-                                      var temp = geoCell.x;
-                                      geoCell.x = geoCell.y + 0.0625;
-                                      geoCell.y = temp - 0.0625;
-                                      if (dir == '0'){
-                                          dir = '90';
-                                      }
-                                      else{
-                                          dir = '270';
-                                      }
-                                  } else if (dir == '90' || dir == '270') {
-                                      geoCell.y = parseFloat(geoCell.x) - 0.0625;
-                                      if (dir == '90') {
-                                          dir = '180';
-                                          geoCell.x = 0 - 0.0625;
-                                      } else {
-                                          dir = '0';
-                                          geoCell.x = 1 + 0.0625;
-                                      }
-                                  }
-                                  cell.setGeometry(geoCell);
-                              } else if (cell.value == 'ControlPort') {
-                                  if (dir == '0' || dir == '180') {
-                                      var temp= geoCell.x;
-                                      geoCell.x = geoCell.y - 0.0625;
-                                      geoCell.y = temp + 0.0625;
-                                      if (dir == '0'){
-                                          dir = '90';
-                                      }
-                                      else{
-                                          dir = '270';
-                                      }
-                                  } else if (dir == '90' || dir == '270') {
-                                      geoCell.y = parseFloat(geoCell.x) + 0.0625;
-                                      if (dir == '90') {
-                                          dir = '180';
-                                          geoCell.x = 1 + 0.0625;
-                                      } else {
-                                          dir = '0';
-                                          geoCell.x = 0 - 0.0625;
-                                      }
-                                  }
-                                  cell.setGeometry(geoCell);
-                              }
-                          }
-                          graph.setCellStyles(mxConstants.STYLE_ROTATION, dir, [cell]);
-                      }
-                  }
-              }
-              if(cell.isConnectable()==false){
-                  var state = graph.view.getState(cell);
-                  if (state != null) {
-                      var dir = state.style[mxConstants.STYLE_ROTATION] || '0';
-                      dir = (dir+90)%360;
-                      graph.setCellStyles(mxConstants.STYLE_ROTATION, dir, [cell]);
-                  }
-                  if(cell.value.getAttribute('label')!= null && cell.value.getAttribute('label').substring(1,4)=="img")
-                  {
-                      cell.currentAngle=(parseInt(cell.currentAngle)+90)%360;
-                      var imageName=cell.style;
-                      transformBlockImage(graph, cell);
-                  }
-              }
-          }
-      }
+                                        if (dir == '0' || dir == '180') {
+                                            var temp = geoCell.x;
+                                            geoCell.x = geoCell.y + 0.0625;
+                                            geoCell.y = temp - 0.0625;
+                                            if (dir == '0') {
+                                                dir = '90';
+                                            } else {
+                                                dir = '270';
+                                            }
+                                        } else if (dir == '90' || dir == '270') {
+                                            geoCell.y = parseFloat(geoCell.x) - 0.0625;
+                                            if (dir == '90') {
+                                                dir = '180';
+                                                geoCell.x = 0 - 0.0625;
+                                            } else {
+                                                dir = '0';
+                                                geoCell.x = 1 + 0.0625;
+                                            }
+                                        }
+                                        cell.setGeometry(geoCell);
+                                    } else if (cell.value == 'ControlPort') {
+                                        if (dir == '0' || dir == '180') {
+                                            var temp = geoCell.x;
+                                            geoCell.x = geoCell.y - 0.0625;
+                                            geoCell.y = temp + 0.0625;
+                                            if (dir == '0') {
+                                                dir = '90';
+                                            } else {
+                                                dir = '270';
+                                            }
+                                        } else if (dir == '90' || dir == '270') {
+                                            geoCell.y = parseFloat(geoCell.x) + 0.0625;
+                                            if (dir == '90') {
+                                                dir = '180';
+                                                geoCell.x = 1 + 0.0625;
+                                            } else {
+                                                dir = '0';
+                                                geoCell.x = 0 - 0.0625;
+                                            }
+                                        }
+                                        cell.setGeometry(geoCell);
+                                    }
+                                }
+                                graph.setCellStyles(mxConstants.STYLE_ROTATION, dir, [cell]);
+                            }
+                        }
+                    }
+                    if (cell.isConnectable() == false) {
+                        var state = graph.view.getState(cell);
+                        if (state != null) {
+                            var dir = state.style[mxConstants.STYLE_ROTATION] || '0';
+                            dir = (dir + 90) % 360;
+                            graph.setCellStyles(mxConstants.STYLE_ROTATION, dir, [cell]);
+                        }
+                        if (cell.value.getAttribute('label') != null && cell.value.getAttribute('label').substring(1, 4) == "img") {
+                            cell.currentAngle = (parseInt(cell.currentAngle) + 90) % 360;
+                            var imageName = cell.style;
+                            transformBlockImage(graph, cell);
+                        }
+                    }
+                }
+            }
+        }
+    } finally {
+        graph.getModel().endUpdate();
     }
-  }
-  finally {
-            graph.getModel().endUpdate();
-  }
 }
 
 function flipCustom(editor, graph, cell) {
-  var selectedCells = graph.getSelectionCells();
-  graph.getModel().beginUpdate();
-  try {
-    for ( var count = 0 ; count < selectedCells.length; count++){
-      var selectedCell = selectedCells[count];
-      if (selectedCell != null) {
-          var cells = [];
-          cells.push(selectedCell);
-          for (var i = 0; i < selectedCell.getChildCount(); i++)
-              cells.push(selectedCell.getChildAt(i));
-          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 flips the ports
-                      var state = graph.view.getState(cell);
-                      if (state != null) {
-                          if (cell.isConnectable() == true) {
-                              var dir = state.style[mxConstants.STYLE_ROTATION] || '0';
-                              var flip = state.style[mxConstants.STYLE_STENCIL_FLIPV] || '0';
-                              var geoCell = cell.getGeometry();
+    var selectedCells = graph.getSelectionCells();
+    graph.getModel().beginUpdate();
+    try {
+        for (var count = 0; count < selectedCells.length; count++) {
+            var selectedCell = selectedCells[count];
+            if (selectedCell != null) {
+                var cells = [];
+                cells.push(selectedCell);
+                for (var i = 0; i < selectedCell.getChildCount(); i++)
+                    cells.push(selectedCell.getChildAt(i));
+                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 flips the ports
+                            var state = graph.view.getState(cell);
+                            if (state != null) {
+                                if (cell.isConnectable() == true) {
+                                    var dir = state.style[mxConstants.STYLE_ROTATION] || '0';
+                                    var flip = state.style[mxConstants.STYLE_STENCIL_FLIPV] || '0';
+                                    var geoCell = cell.getGeometry();
 
-                              /*
-                                  To flip the ports in sync with the block flip.
-                                  A flip makes port directing north direct to south and vice versa.
-                                  A port directing east or west will have to aligh with the other ports which have same direction.
-                              */
+                                    /*
+                                        To flip the ports in sync with the block flip.
+                                        A flip makes port directing north direct to south and vice versa.
+                                        A port directing east or west will have to aligh with the other ports which have same direction.
+                                    */
 
-                              if (cell.value == 'CommandPort' || cell.value == 'ControlPort') {
-                                  if (dir == '90' || dir == '270') {
-                                      if(cell.value == 'CommandPort') {
-                                         if (dir == '90')
-                                          {
-                                              geoCell.y = geoCell.y - 1 - 0.125 ;
-                                              dir = '270';
-                                          }
-                                          else
-                                          {
-                                              geoCell.y = geoCell.y + 1 + 0.125;
-                                              dir = '90';
-                                          }
-                                      }
-                                      else {
-                                          if (dir == '90')
-                                          {
-                                              geoCell.y = geoCell.y + 1 + 0.125;
-                                              dir = '270';
-                                          }
-                                          else
-                                          {
-                                              geoCell.y = geoCell.y - 1 - 0.125;
-                                              dir = '90';
-                                          }
-                                      }
-                                  }
-                                  else if (dir == '0' || dir == '180')
-                                  {
-                                      if(cell.value == 'CommandPort'){
-                                          geoCell.y = 1 - geoCell.y - 0.125;
-                                      }
-                                      else{
-                                          geoCell.y = 1 - geoCell.y + 0.125;
-                                      }
-                                  }
-                                  cell.setGeometry(geoCell);
-                              }
-                              else if (cell.value == "ExplicitOutputPort" ||
-                                  cell.value == "ImplicitOutputPort" || cell.value == "ExplicitInputPort" || cell.value == "ImplicitInputPort") {
-                                  if (dir == '90' || dir == '270') {
-                                      if(cell.value == "ExplicitOutputPort" || cell.value == "ImplicitOutputPort") {
-                                          if (dir == '90')
-                                          {
-                                              geoCell.y = geoCell.y - 1 - 0.125 ;
-                                              dir = '270';
-                                          }
-                                          else
-                                          {
-                                              geoCell.y = geoCell.y + 1 + 0.125;
-                                              dir = '90';
-                                          }
-                                      }
-                                      else {
-                                         if (dir == '90')
-                                          {
-                                              geoCell.y = geoCell.y + 1 + 0.125;
-                                              dir = '270';
-                                          }
-                                          else
-                                          {
-                                              geoCell.y = geoCell.y - 1 - 0.125;
-                                              dir = '90';
-                                          }
-                                      }
-                                  }
-                                  else if(dir == '0' || dir == '180')
-                                  {
-                                      geoCell.y = 1 - geoCell.y;
-                                  }
-                                  cell.setGeometry(geoCell);
-                              }
-                          }
-                          graph.setCellStyles(mxConstants.STYLE_ROTATION, dir, [cell]);
-                          if(flip == '0'){
-                              graph.setCellStyles(mxConstants.STYLE_STENCIL_FLIPV, '1', [cell]);
-                          }
-                          else{
-                              graph.setCellStyles(mxConstants.STYLE_STENCIL_FLIPV, '0', [cell]);
-                          }
-                      }
-                  }
-              }
-              if(cell.isConnectable()==false)
-              {
-                  var state = graph.view.getState(cell);
-                  if (state != null) {
-                      var dir = state.style[mxConstants.STYLE_ROTATION];
-                      var flip = state.style[mxConstants.STYLE_STENCIL_FLIPV] || '0';
-                      if(flip == '0'){
-                          graph.setCellStyles(mxConstants.STYLE_STENCIL_FLIPV, '1', [cell]);
-                      }
-                      else{
-                          graph.setCellStyles(mxConstants.STYLE_STENCIL_FLIPV, '0', [cell]);
-                      }
-                      if(dir == '0' || dir == '180'){
-                          dir = (dir+180)%360;
+                                    if (cell.value == 'CommandPort' || cell.value == 'ControlPort') {
+                                        if (dir == '90' || dir == '270') {
+                                            if (cell.value == 'CommandPort') {
+                                                if (dir == '90') {
+                                                    geoCell.y = geoCell.y - 1 - 0.125;
+                                                    dir = '270';
+                                                } else {
+                                                    geoCell.y = geoCell.y + 1 + 0.125;
+                                                    dir = '90';
+                                                }
+                                            } else {
+                                                if (dir == '90') {
+                                                    geoCell.y = geoCell.y + 1 + 0.125;
+                                                    dir = '270';
+                                                } else {
+                                                    geoCell.y = geoCell.y - 1 - 0.125;
+                                                    dir = '90';
+                                                }
+                                            }
+                                        } else if (dir == '0' || dir == '180') {
+                                            if (cell.value == 'CommandPort') {
+                                                geoCell.y = 1 - geoCell.y - 0.125;
+                                            } else {
+                                                geoCell.y = 1 - geoCell.y + 0.125;
+                                            }
+                                        }
+                                        cell.setGeometry(geoCell);
+                                    } else if (cell.value == "ExplicitOutputPort" ||
+                                        cell.value == "ImplicitOutputPort" || cell.value == "ExplicitInputPort" || cell.value == "ImplicitInputPort") {
+                                        if (dir == '90' || dir == '270') {
+                                            if (cell.value == "ExplicitOutputPort" || cell.value == "ImplicitOutputPort") {
+                                                if (dir == '90') {
+                                                    geoCell.y = geoCell.y - 1 - 0.125;
+                                                    dir = '270';
+                                                } else {
+                                                    geoCell.y = geoCell.y + 1 + 0.125;
+                                                    dir = '90';
+                                                }
+                                            } else {
+                                                if (dir == '90') {
+                                                    geoCell.y = geoCell.y + 1 + 0.125;
+                                                    dir = '270';
+                                                } else {
+                                                    geoCell.y = geoCell.y - 1 - 0.125;
+                                                    dir = '90';
+                                                }
+                                            }
+                                        } else if (dir == '0' || dir == '180') {
+                                            geoCell.y = 1 - geoCell.y;
+                                        }
+                                        cell.setGeometry(geoCell);
+                                    }
+                                }
+                                graph.setCellStyles(mxConstants.STYLE_ROTATION, dir, [cell]);
+                                if (flip == '0') {
+                                    graph.setCellStyles(mxConstants.STYLE_STENCIL_FLIPV, '1', [cell]);
+                                } else {
+                                    graph.setCellStyles(mxConstants.STYLE_STENCIL_FLIPV, '0', [cell]);
+                                }
+                            }
+                        }
+                    }
+                    if (cell.isConnectable() == false) {
+                        var state = graph.view.getState(cell);
+                        if (state != null) {
+                            var dir = state.style[mxConstants.STYLE_ROTATION];
+                            var flip = state.style[mxConstants.STYLE_STENCIL_FLIPV] || '0';
+                            if (flip == '0') {
+                                graph.setCellStyles(mxConstants.STYLE_STENCIL_FLIPV, '1', [cell]);
+                            } else {
+                                graph.setCellStyles(mxConstants.STYLE_STENCIL_FLIPV, '0', [cell]);
+                            }
+                            if (dir == '0' || dir == '180') {
+                                dir = (dir + 180) % 360;
 
-                      }
-                      graph.setCellStyles(mxConstants.STYLE_ROTATION, dir, [cell]);
-                  }
-                  if(cell.value.getAttribute('label')!= null && cell.value.getAttribute('label').substring(1,4)=="img")
-                  {
-                      if(cell.currentAngle == 90 || cell.currentAngle == 270){
-                          cell.flipX=-parseInt(cell.flipX);
-                      }
-                      else {
-                          cell.flipY=-parseInt(cell.flipY);
-                      }
-                      transformBlockImage(graph, cell);
-                  }
-              }
-          }
-      }
+                            }
+                            graph.setCellStyles(mxConstants.STYLE_ROTATION, dir, [cell]);
+                        }
+                        if (cell.value.getAttribute('label') != null && cell.value.getAttribute('label').substring(1, 4) == "img") {
+                            if (cell.currentAngle == 90 || cell.currentAngle == 270) {
+                                cell.flipX = -parseInt(cell.flipX);
+                            } else {
+                                cell.flipY = -parseInt(cell.flipY);
+                            }
+                            transformBlockImage(graph, cell);
+                        }
+                    }
+                }
+            }
+        }
+    } finally {
+        graph.getModel().endUpdate();
     }
-  } finally {
-          graph.getModel().endUpdate();
-  }
 }
 
 function mirrorCustom(editor, graph, cell) {
-  var selectedCells = graph.getSelectionCells();
-  graph.getModel().beginUpdate();
-  try {
-    for ( var count = 0 ; count < selectedCells.length; count++){
-      var selectedCell = selectedCells[count];
-      if (selectedCell != null) {
-          var cells = [];
+    var selectedCells = graph.getSelectionCells();
+    graph.getModel().beginUpdate();
+    try {
+        for (var count = 0; count < selectedCells.length; count++) {
+            var selectedCell = selectedCells[count];
+            if (selectedCell != null) {
+                var cells = [];
 
-          cells.push(selectedCell);
+                cells.push(selectedCell);
 
-          for (var i = 0; i < selectedCell.getChildCount(); i++)
-              cells.push(selectedCell.getChildAt(i));
-          for (var i = 0; i < cells.length; i++) {
-              var cell = cells[i];
-              if (cell.isVertex() == true) {
-                  var geo = graph.getCellGeometry(cell);
+                for (var i = 0; i < selectedCell.getChildCount(); i++)
+                    cells.push(selectedCell.getChildAt(i));
+                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 mirrors the ports
-                      var state = graph.view.getState(cell);
-                      if (state != null) {
-                          var dir = state.style[mxConstants.STYLE_ROTATION] || '0';
-                          var mirror = state.style[mxConstants.STYLE_STENCIL_FLIPH] || '0';
-                          if (cell.isConnectable() == true) {
-                              var geoCell = cell.getGeometry();
+                        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 mirrors the ports
+                            var state = graph.view.getState(cell);
+                            if (state != null) {
+                                var dir = state.style[mxConstants.STYLE_ROTATION] || '0';
+                                var mirror = state.style[mxConstants.STYLE_STENCIL_FLIPH] || '0';
+                                if (cell.isConnectable() == true) {
+                                    var geoCell = cell.getGeometry();
 
-                               /*
+                                    /*
                                   To mirror the ports in sync with the block mirror.
                                   A mirror makes port directing east direct to west and vice versa.
                                   A port directing north or south will have to aligh with the other ports which have same direction.
                               */
 
-                              if (cell.value == "ExplicitOutputPort" || cell.value == "ImplicitOutputPort" || cell.value == "ExplicitInputPort" || cell.value == "ImplicitInputPort") {
-                                  if(dir == '180' || dir == '0'){
-                                      if(cell.value == "ExplicitOutputPort" || cell.value == "ImplicitOutputPort") {
-                                          if (dir == '0')
-                                          {
-                                              geoCell.x = geoCell.x - 1 - 0.125;
-                                              dir = '180';
-                                          }
-                                          else
-                                          {
-                                              geoCell.x = geoCell.x + 1 + 0.125;
-                                              dir = '0';
-                                          }
-                                      }
-                                      else {
-                                          geoCell = geoCell.clone();
-                                          if (dir == '0')
-                                          {
-                                              geoCell.x = geoCell.x + 1 + 0.125;
-                                              dir = '180';
-                                          }
-                                          else
-                                          {
-                                              geoCell.x = geoCell.x - 1 - 0.125;
-                                              dir = '0';
-                                          }
-                                      }
-                                  }
-                                  else if (dir == '90' || dir == '270')
-                                  {
-                                      if(cell.value == "ExplicitOutputPort" || cell.value == "ImplicitOutputPort"){
-                                          geoCell.x = 1 - geoCell.x - 0.125;
-                                      }
-                                      else{
-                                          geoCell.x = 1 - geoCell.x + 0.125;
-                                      }
-                                  }
-                                  cell.setGeometry(geoCell);
-                              }
-                              else if (cell.value == 'CommandPort' || cell.value == 'ControlPort') {
-                                  if (dir == '0' || dir == '180') {
-                                      if(cell.value == 'CommandPort') {
-                                          if (dir == '180')
-                                          {
-                                              geoCell.x = geoCell.x + 1 + 0.125;
-                                              dir = '0';
-                                          }
-                                          else
-                                          {
-                                              geoCell.x = geoCell.x - 1 - 0.125;
-                                              dir = '180';
-                                          }
-                                      }
-                                      else{
-                                          if (dir == '180')
-                                          {
-                                              geoCell.x = geoCell.x - 1 - 0.125;
-                                              dir = '0';
-                                          }
-                                          else
-                                          {
-                                              geoCell.x = geoCell.x + 1 + 0.125;
-                                              dir = '180';
-                                          }
-                                      }
-                                  }
-                                  else if(dir == '90' || dir == '270')
-                                  {
-                                      geoCell.x = 1 - geoCell.x;
-                                  }
-                                  cell.setGeometry(geoCell);
-                              }
-                          }
-                          graph.setCellStyles(mxConstants.STYLE_ROTATION, dir, [cell]);
-                          if(mirror == '0'){
-                              graph.setCellStyles(mxConstants.STYLE_STENCIL_FLIPH, '1', [cell]);
-                          }
-                          else{
-                              graph.setCellStyles(mxConstants.STYLE_STENCIL_FLIPH, '0', [cell]);
-                          }
-                      }
-                  }
-              }
+                                    if (cell.value == "ExplicitOutputPort" || cell.value == "ImplicitOutputPort" || cell.value == "ExplicitInputPort" || cell.value == "ImplicitInputPort") {
+                                        if (dir == '180' || dir == '0') {
+                                            if (cell.value == "ExplicitOutputPort" || cell.value == "ImplicitOutputPort") {
+                                                if (dir == '0') {
+                                                    geoCell.x = geoCell.x - 1 - 0.125;
+                                                    dir = '180';
+                                                } else {
+                                                    geoCell.x = geoCell.x + 1 + 0.125;
+                                                    dir = '0';
+                                                }
+                                            } else {
+                                                geoCell = geoCell.clone();
+                                                if (dir == '0') {
+                                                    geoCell.x = geoCell.x + 1 + 0.125;
+                                                    dir = '180';
+                                                } else {
+                                                    geoCell.x = geoCell.x - 1 - 0.125;
+                                                    dir = '0';
+                                                }
+                                            }
+                                        } else if (dir == '90' || dir == '270') {
+                                            if (cell.value == "ExplicitOutputPort" || cell.value == "ImplicitOutputPort") {
+                                                geoCell.x = 1 - geoCell.x - 0.125;
+                                            } else {
+                                                geoCell.x = 1 - geoCell.x + 0.125;
+                                            }
+                                        }
+                                        cell.setGeometry(geoCell);
+                                    } else if (cell.value == 'CommandPort' || cell.value == 'ControlPort') {
+                                        if (dir == '0' || dir == '180') {
+                                            if (cell.value == 'CommandPort') {
+                                                if (dir == '180') {
+                                                    geoCell.x = geoCell.x + 1 + 0.125;
+                                                    dir = '0';
+                                                } else {
+                                                    geoCell.x = geoCell.x - 1 - 0.125;
+                                                    dir = '180';
+                                                }
+                                            } else {
+                                                if (dir == '180') {
+                                                    geoCell.x = geoCell.x - 1 - 0.125;
+                                                    dir = '0';
+                                                } else {
+                                                    geoCell.x = geoCell.x + 1 + 0.125;
+                                                    dir = '180';
+                                                }
+                                            }
+                                        } else if (dir == '90' || dir == '270') {
+                                            geoCell.x = 1 - geoCell.x;
+                                        }
+                                        cell.setGeometry(geoCell);
+                                    }
+                                }
+                                graph.setCellStyles(mxConstants.STYLE_ROTATION, dir, [cell]);
+                                if (mirror == '0') {
+                                    graph.setCellStyles(mxConstants.STYLE_STENCIL_FLIPH, '1', [cell]);
+                                } else {
+                                    graph.setCellStyles(mxConstants.STYLE_STENCIL_FLIPH, '0', [cell]);
+                                }
+                            }
+                        }
+                    }
 
-              if(cell.isConnectable()==false){
-                  var state = graph.view.getState(cell);
-                  if (state != null) {
-                          var dir = state.style[mxConstants.STYLE_ROTATION];
-                          var mirror = state.style[mxConstants.STYLE_STENCIL_FLIPH] || '0';
-                          if(mirror == '0'){
-                              graph.setCellStyles(mxConstants.STYLE_STENCIL_FLIPH, '1', [cell]);
-                          }
-                          else{
-                              graph.setCellStyles(mxConstants.STYLE_STENCIL_FLIPH, '0', [cell]);
-                          }
-                          if(dir == '90' || dir == '270'){
-                              dir = (dir+180)%360;
+                    if (cell.isConnectable() == false) {
+                        var state = graph.view.getState(cell);
+                        if (state != null) {
+                            var dir = state.style[mxConstants.STYLE_ROTATION];
+                            var mirror = state.style[mxConstants.STYLE_STENCIL_FLIPH] || '0';
+                            if (mirror == '0') {
+                                graph.setCellStyles(mxConstants.STYLE_STENCIL_FLIPH, '1', [cell]);
+                            } else {
+                                graph.setCellStyles(mxConstants.STYLE_STENCIL_FLIPH, '0', [cell]);
+                            }
+                            if (dir == '90' || dir == '270') {
+                                dir = (dir + 180) % 360;
 
-                          }
-                          graph.setCellStyles(mxConstants.STYLE_ROTATION, dir, [cell]);
-                  }
-                  if(cell.value.getAttribute('label') != null && cell.value.getAttribute('label').substring(1,4)=="img" )
-                  {
-                      if(cell.currentAngle == 90 || cell.currentAngle == 270){
-                          cell.flipY=-parseInt(cell.flipY);
-                      }
-                      else {
-                          cell.flipX=-parseInt(cell.flipX);
-                      }
-                      transformBlockImage(graph, cell);
-                  }
-              }
-          }
-      }
+                            }
+                            graph.setCellStyles(mxConstants.STYLE_ROTATION, dir, [cell]);
+                        }
+                        if (cell.value.getAttribute('label') != null && cell.value.getAttribute('label').substring(1, 4) == "img") {
+                            if (cell.currentAngle == 90 || cell.currentAngle == 270) {
+                                cell.flipY = -parseInt(cell.flipY);
+                            } else {
+                                cell.flipX = -parseInt(cell.flipX);
+                            }
+                            transformBlockImage(graph, cell);
+                        }
+                    }
+                }
+            }
+        }
+    } finally {
+        graph.getModel().endUpdate();
     }
-  } finally {
-          graph.getModel().endUpdate();
-  }
-}
+}
\ No newline at end of file
-- 
cgit