Merge pull request #170 from Pooja-Mahadev-Soundalgekar/master

rebased orientation

4 files changed, 557 insertions, 37 deletions

diff --git a/images/flip.png b/images/flip.png
new file mode 100644
index 0000000..6dbbb5e
--- /dev/null
+++ b/images/flip.png
diff --git a/images/mirror.png b/images/mirror.png
new file mode 100644
index 0000000..2676528
--- /dev/null
+++ b/images/mirror.png
diff --git a/index.html b/index.html
index 786960a..f941380 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);
-
+                            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');
+                            }, formatMenu);
+                            menu.addItem('Mirror', 'images/mirror.png', function() {
+                                editor.execute('mirrorCustom');
+                            }, 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: Pooja: Functionality to be put.
+                                // @ToDo: Functionality to be put.
                             });
                         }
                     } else {
@@ -723,13 +728,41 @@
                                 } else {
                                     commandPort = cellvar.model.evtout.height;
                                 }
+
+                                var flip = false,
+                                    mirror = false;
+                                var style = cell.style;
+                                var styleObject = styleToObject(style);
+                                if (styleObject['stencilFlipV'] == null) {
+                                    flip = false;
+                                } else {
+
+                                    if (styleObject['stencilFlipV'] == 0) {
+                                        flip = false;
+                                    } else {
+                                        flip = true;
+                                    }
+
+                                }
+                                if (styleObject['stencilFlipH'] == null) {
+                                    mirror = false;
+                                } else {
+
+                                    if (styleObject['stencilFlipH'] == 0) {
+                                        mirror = false;
+                                    } else {
+                                        mirror = true;
+                                    }
+
+                                }
+                                style = objectToStyle(styleObject);
                                 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" +
@@ -752,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) {
@@ -812,6 +845,29 @@
                     button.appendChild(titleName);
                 });
 
+                /*
+                 * @jiteshjha, @pooja
+                 * rotateCustom(@parameters) is defined in 'orientation.js'
+                 */
+                editor.addAction('rotateCustom', function(editor, cell) {
+                    rotateCustom(editor, graph, cell);
+                });
+
+                /*
+                 * @jiteshjha, @pooja
+                 * flipCustom(@parameters) is defined in 'orientation.js'
+                 */
+                editor.addAction('flipCustom', function(editor, cell) {
+                    flipCustom(editor, graph, cell);
+                });
+
+                /*
+                 * @jiteshjha, @pooja
+                 * mirrorCustom(@parameters) is defined in 'orientation.js'
+                 */
+                editor.addAction('mirrorCustom', function(editor, cell) {
+                    mirrorCustom(editor, graph, cell);
+                });
 
                 // @jiteshjha, @pooja
                 /*
@@ -1123,7 +1179,7 @@
                     button.type = "button";
                     button.name = "submit";
                     node.appendChild(button);
-                    
+
                     /*
                         Maverick
                         Reference: www.htmlgoodies.com
@@ -1433,7 +1489,7 @@
                                 Maverick
                                 Connecting the links. 
                             */
-                            
+
                             currentNode = rootNode.firstChild;
                             while (currentNode != null) {
                                 var curNodeName = currentNode.nodeName;
@@ -1647,10 +1703,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 + ';';
             }
-
             var defaultStyle = style.substring(0, style.indexOf(';'));
             var styleObject = {
                 "default": defaultStyle
@@ -2428,28 +2484,37 @@
             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();
@@ -2594,6 +2659,8 @@
                         // Set label
                         style['label'] = label;
 
+                        style['imagePath'] = style['image'];
+
                         // Set image as null
                         style['image'] = null;
 
@@ -2658,6 +2725,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 {
@@ -3306,4 +3376,4 @@
     });
 </script>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/orientation.js b/orientation.js
new file mode 100644
index 0000000..6071758
--- /dev/null
+++ b/orientation.js
@@ -0,0 +1,450 @@
+/*
+    @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 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 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 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.
+                                    */
+
+                                    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 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 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();
+    }
+}
\ No newline at end of file