Merge pull request #9 from jiteshjha/bug-delete-edges

Bug: delete all associated edges

3 files changed, 139 insertions, 71 deletions

diff --git a/config/keyhandler-commons.xml b/config/keyhandler-commons.xml
index 3e690cd..9d21f45 100644
--- a/config/keyhandler-commons.xml
+++ b/config/keyhandler-commons.xml
@@ -6,12 +6,7 @@
 		<add as="34" action="enterGroup"/>
 		<add as="35" action="refresh"/>
 		<add as="36" action="home"/>
-		<!-- Up, Down, Left, Right arrows perform moving instead of toggling -->
-		<!--<add as="37" action="selectPrevious"/>
-		<add as="38" action="selectParent"/>
-		<add as="40" action="selectChild"/>
-		<add as="39" action="selectNext"/> -->
-		<add as="46" action="delete"/>
+		<add as="46" action="deleteBlock"/>
 		<add as="65" control="1" action="selectAll"/>
 		<add as="90" control="1" action="undo"/>
 		<add as="89" control="1" action="redo"/>
@@ -20,7 +15,7 @@
 		<add as="86" control="1" action="paste"/>
 		<add as="71" control="1" action="group"/>
 		<add as="85" control="1" action="ungroup"/>
-		<add as="113" action="edit"/>		
+		<add as="113" action="edit"/>
 		<add as="123" action="showProperties"/>
 		<add as="107" action="zoomIn"/>
 		<add as="109" action="zoomOut"/>
diff --git a/css/common.css b/css/common.css
index fb41533..d6694a5 100644
--- a/css/common.css
+++ b/css/common.css
@@ -172,3 +172,7 @@ td.mxPopupMenuIcon {
 	margin-left:2pc;
 	margin-bottom:2pc;
 }
+
+.fieldInput {
+	float: right;
+}
diff --git a/index.html b/index.html
index 8175d07..ca1ec01 100644
--- a/index.html
+++ b/index.html
@@ -8,11 +8,11 @@
         BODY {
             font-family: Arial;
         }
-        
+
         H1 {
             font-size: 18px;
         }
-        
+
         H2 {
             font-size: 16px;
         }
@@ -171,7 +171,7 @@
                             content.innerHTML = this.convertValueToString(cell);
                             showModalWindow(this, 'Properties', content, 400, 300);
                             */
-                            showPropertiesWindow(graph);
+                            showPropertiesWindow(graph, cell);
                         }
                     }
 
@@ -255,10 +255,63 @@
                     button.appendChild(titleName);
                 });
 
+                // @jiteshjha, @pooja
+                /*
+                   On selection and deletion of any block, 'deleteBlock'
+                   function deletes all the associated edges with that block.
+                   Used Preorder traversal for edges.
+                */
+                editor.addAction('deleteBlock', function(editor, cell) {
+                    var cells = [];
+                    var selectionCells = graph.getSelectionCells();
+                    for (var k = 0; k < selectionCells.length; k++) {
+                        var portCount = selectionCells[k].getChildCount();
+                        cells.push(selectionCells[k]);
+                        // Finds all the port with edges of the selected cell, and calls getEdgeId() for
+                        // each edge object of that port.
+                        for (var i = 0; i < portCount; i++) {
+                            var edgeCount = selectionCells[k].getChildAt(i).getEdgeCount();
+                            if (edgeCount != 0) {
+                                getEdgeId(selectionCells[k].getChildAt(i));
+
+                                for (var j = 0; j < edgeCount; j++) {
+                                    var edgeObject = selectionCells[k].getChildAt(i).getEdgeAt(j);
+                                    getEdgeId(edgeObject);
+                                }
+                            }
+                        }
+                    }
+
+
+                    /* getEdgeId() find all the associated edges from an edge.
+                     Pushes the object of that edge into an array of mxCell objects.
+                     */
+                    function getEdgeId(edgeObject) {
+                        var cellStack = [];
+                        if (edgeObject != null && edgeObject.isEdge() == true) {
+                            cellStack.push(edgeObject);
+                            while (cellStack.length != 0) {
+                                var tempEdgeObject = cellStack.pop();
+                                if (tempEdgeObject.edge == true && (cells.indexOf(tempEdgeObject) == -1)) {
+                                    cells.push(tempEdgeObject);
+                                }
+                                for (var j = 0; j < tempEdgeObject.getEdgeCount(); j++) {
+                                    cellStack.push(tempEdgeObject.getEdgeAt(j));
+                                }
+                            }
+                        }
+                    }
+
+                    // The mxCells to be deleted are first highlighted,
+                    // and then the selection is deleted in a single go.
+                    graph.getSelectionModel().setCells(cells);
+                    editor.execute('delete');
+                });
+
                 addToolbarButton(editor, toolbar, 'toggle', 'Expand All', 'images/navigate_plus.png');
                 toolbar.appendChild(spacer.cloneNode(true));
 
-                addToolbarButton(editor, toolbar, 'delete', 'Delete', 'images/delete2.png');
+                addToolbarButton(editor, toolbar, 'deleteBlock', 'Delete', 'images/delete2.png');
                 toolbar.appendChild(spacer.cloneNode(true));
 
                 addToolbarButton(editor, toolbar, 'cut', 'Cut', 'images/cut.png');
@@ -337,7 +390,7 @@
                     }
                 };
                 // Transfer initial focus to graph container for keystroke handling
-                //graph.container.focus();
+                // graph.container.focus();
                 // Handles keystroke events
                 var keyHandler = new mxKeyHandler(graph);
                 keyHandler.bindKey(37, function() {
@@ -398,96 +451,112 @@
         };
 
 
-        function showPropertiesWindow(graph) {
-
-            var array = ["Number of curves",
-                "color (>0) or mark (<0)",
-                "line or mark size",
-                "Output window number (-1 for automatic)",
-                "Output window position",
-                "Output window sizes",
-                "Xmin and Xmax",
-                "Ymin and Ymax",
-                "Zmin and Zmax",
-                "Alpha and Theta",
-                "Buffer size"
-            ];
+        function showPropertiesWindow(graph, cell) {
+
+            var defaultProperties = {
+                nbr_curves: ["Number of curves", 1],
+                clrs: ["color (>0) or mark (<0)", [1, 2, 3, 4, 5, 6, 7, 13]],
+                siz: ["line or mark size", [1, 1, 1, 1, 1, 1, 1, 1]],
+                win: ["Output window number (-1 for automatic)", -1],
+                wpos: ["Output window position", [-1, -1]],
+                wdim: ["Output window sizes", [-1, -1]],
+                vec_x: ["Xmin and Xmax", [-15, 15]],
+                vec_y: ["Ymin and Ymax", [-15, 15]],
+                vec_z: ["Zmin and Zmax", [-15, 15]],
+                param3ds: ["Alpha and Theta", [50, 280]],
+                N: ["Buffer size", 2]
+            };
 
-            // Create basic structure for the form.
+            // Create basic structure for the form
             var content = document.createElement('div');
             //content.id = "contentProperties";
             content.setAttribute("id", "contentProperties");
 
-            // Heading of content.
+            // Heading of content
             var heading = document.createElement('h2');
             heading.innerHTML = "Set Scope Parameters";
             heading.id = "headingProperties"
             content.appendChild(heading);
 
-            // Add Form.
+            // Add Form
             var myform = document.createElement("form");
             myform.method = "post";
             myform.id = "formProperties";
 
-            // Line break.
+            // Line break
             var linebreak = document.createElement('br');
             myform.appendChild(linebreak);
 
-            for (field in array) {
-                // Input Title.
-                var fieldName = array[field];
-                var namelabel = document.createElement('label');
-                namelabel.innerHTML = fieldName;
-                myform.appendChild(namelabel);
-
-
-                // Input.
-                var input = document.createElement("input");
-                input.name = fieldName;
-                input.style.cssText = 'float: right;';
-                input.id = fieldName;
-                myform.appendChild(input);
-
-                // Line break.
-                var linebreak = document.createElement('br');
-                myform.appendChild(linebreak);
-
-                // Line break.
-                var linebreak = document.createElement('br');
-                myform.appendChild(linebreak);
-
+            for (var key in defaultProperties) {
+                if (defaultProperties.hasOwnProperty(key)) {
+
+                    // Input Title
+                    var fieldName = defaultProperties[key];
+                    var namelabel = document.createElement('label');
+                    namelabel.innerHTML = defaultProperties[key][0];
+                    myform.appendChild(namelabel);
+
+                    // Input
+                    var input = document.createElement("input");
+                    input.name = key;
+                    input.value = defaultProperties[key][1];
+                    input.setAttribute("id", key.toString());
+                    input.setAttribute("class", "fieldInput");
+                    myform.appendChild(input);
+
+                    // Line break
+                    var linebreak = document.createElement('br');
+                    myform.appendChild(linebreak);
+
+                    // Line break
+                    var linebreak = document.createElement('br');
+                    myform.appendChild(linebreak);
+                }
             }
-            // Line break.
+
+            // Line break
             var linebreak = document.createElement('br');
             myform.appendChild(linebreak);
 
-            // Button - Submit.
+            // Button - Submit
             var btn = document.createElement("button");
             btn.innerHTML = 'Submit';
             btn.type = "button";
             btn.name = "submit";
 
-            // Executes when button 'btn' is clicked.
+            // Executes when button 'btn' is clicked
             btn.onclick = function() {
+                var propertiesObject = {
+                    id: cell.id
+                };
 
+                for (var key in defaultProperties) {
+                    if (defaultProperties.hasOwnProperty(key)) {
+                        propertiesObject[key] = document.getElementById(key.toString()).value;
+                    }
+                }
             };
             myform.appendChild(btn);
 
-            // Button - Reset.
+            // Button - Reset
             var btn = document.createElement("button");
             btn.innerHTML = 'Reset';
             btn.type = "button";
             btn.name = "submit";
-            btn.id = "resetButtonProperties"
-                //btn.style.cssText='float:right;';
+            btn.id = "resetButtonProperties";
             btn.onclick = function() {
-                // Only removes the content div, not the modal window.
+                // Reset
+                for (var key in defaultProperties) {
+                    if (defaultProperties.hasOwnProperty(key)) {
+                        var element = document.getElementById(key.toString());
+                        element.value = defaultProperties[key][1];
+                    }
+                }
             };
 
-
             myform.appendChild(btn);
             // Base height without fields : 135 px
-            height = 135 + 26 * array.length + 15;
+            height = 135 + 26 * defaultProperties.length + 15;
 
             content.appendChild(myform);
             showModalWindow(graph, 'Properties', content, 450, height);
@@ -1047,8 +1116,8 @@
         };
     </script>
     <!--
-		Updates connection points before the routing is called.
--->
+    	Updates connection points before the routing is called.
+    -->
     <script type="text/javascript">
         // Computes the position of edge to edge connection points.
         mxGraphView.prototype.updateFixedTerminalPoint = function(edge, terminal, source, constraint) {
@@ -1114,8 +1183,8 @@
     </script>
 
     <!--
-	Overrides methods to preview and create new edges.
--->
+      Overrides methods to preview and create new edges.
+    -->
     <script type="text/javascript">
         // Sets source terminal point for edge-to-edge connections.
         mxConnectionHandler.prototype.createEdgeState = function(me) {
@@ -1221,8 +1290,8 @@
         };
     </script>
     <!--
-	Adds in-place highlighting for complete cell area (no hotspot).
--->
+	    Adds in-place highlighting for complete cell area (no hotspot).
+    -->
     <script type="text/javascript">
         mxConnectionHandlerCreateMarker = mxConnectionHandler.prototype.createMarker;
         mxConnectionHandler.prototype.createMarker = function() {
@@ -1247,8 +1316,8 @@
         }
     </script>
     <!--
-	Imlements a custom resistor shape. Direction currently ignored here.
--->
+	   Implements a custom resistor shape. Direction currently ignored here.
+    -->
     <script type="text/javascript">
         mxEdgeStyle.WireConnector = function(state, source, target, hints, result) {
             // Creates array of all way- and terminalpoints
@@ -1359,7 +1428,7 @@
     <div id="toolbarContainer" style="position:absolute;white-space:nowrap;overflow:hidden;top:0px;left:0px;max-height:24px;height:36px;right:0px;padding:6px;background-image:url('images/toolbar_bg.gif');">
     </div>
 
-    <!-- Creates a container for the toolboox -->
+    <!-- Creates a container for the toolbox -->
     <div id="sidebarContainer" class="ui-accordion ui-widget ui-helper-reset" style="position:absolute;overflow:scroll;top:36px;left:0px;bottom:36px;max-width:266px;width:270px;padding-top:10px;padding-left:4px;">
     </div>