From bc42235644fd82510638cc44d83d6cbab95d00ed Mon Sep 17 00:00:00 2001 From: jiteshjha Date: Thu, 2 Jun 2016 17:30:30 +0530 Subject: Bug: delete all associated edges --- index.html | 39 ++++++++++++++++++++++++++++++++++++--- 1 file changed, 36 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 8175d07..dbcc0cd 100644 --- a/index.html +++ b/index.html @@ -8,11 +8,11 @@ BODY { font-family: Arial; } - + H1 { font-size: 18px; } - + H2 { font-size: 16px; } @@ -255,10 +255,43 @@ button.appendChild(titleName); }); + editor.addAction('deleteBlock', function(editor, cell) { + var array = []; + var portCount = graph.getSelectionCell().getChildCount(); + array.push(graph.getSelectionCell()); + + for(var i = 0; i < portCount; i++) { + var edgeCount = graph.getSelectionCell().getChildAt(i).getEdgeCount(); + if(edgeCount != 0) { + getEdgeId(graph.getSelectionCell().getChildAt(i)); + + for(var j = 0; j < edgeCount; j++) { + var edgeObject = graph.getSelectionCell().getChildAt(i).getEdgeAt(j); + getEdgeId(edgeObject); + } + } + } + function getEdgeId(eObject) + { + if(eObject != null && eObject.isEdge()) { + for(var j = 0; j < eObject.getEdgeCount(); j++) + { + getEdgeId(eObject.getEdgeAt(j)); + } + if(eObject.edge == true && (array.indexOf(eObject) == -1)) { + array.push(eObject); + } + } + } + + graph.getSelectionModel().setCells(array); + 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'); -- cgit From e6430d6911eb76e9f309e3fe68083454e0ca9a72 Mon Sep 17 00:00:00 2001 From: jiteshjha Date: Fri, 3 Jun 2016 12:28:27 +0530 Subject: added stack-based traversal for edges and delete key action --- config/keyhandler-commons.xml | 9 +-- index.html | 127 ++++++++++++++++++++++++++++++------------ 2 files changed, 92 insertions(+), 44 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 @@ - - - + @@ -20,7 +15,7 @@ - + diff --git a/index.html b/index.html index dbcc0cd..dc3d76c 100644 --- a/index.html +++ b/index.html @@ -171,7 +171,7 @@ content.innerHTML = this.convertValueToString(cell); showModalWindow(this, 'Properties', content, 400, 300); */ - showPropertiesWindow(graph); + showPropertiesWindow(graph, cell); } } @@ -255,36 +255,58 @@ 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 array = []; - var portCount = graph.getSelectionCell().getChildCount(); - array.push(graph.getSelectionCell()); - - for(var i = 0; i < portCount; i++) { - var edgeCount = graph.getSelectionCell().getChildAt(i).getEdgeCount(); - if(edgeCount != 0) { - getEdgeId(graph.getSelectionCell().getChildAt(i)); - - for(var j = 0; j < edgeCount; j++) { - var edgeObject = graph.getSelectionCell().getChildAt(i).getEdgeAt(j); - getEdgeId(edgeObject); + 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); + } } } } - function getEdgeId(eObject) + + + /* getEdgeId() find all the associated edges from an edge. + Pushes the object of that edge into an array of mxCell objects. + */ + function getEdgeId(edgeObject) { - if(eObject != null && eObject.isEdge()) { - for(var j = 0; j < eObject.getEdgeCount(); j++) - { - getEdgeId(eObject.getEdgeAt(j)); - } - if(eObject.edge == true && (array.indexOf(eObject) == -1)) { - array.push(eObject); + 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)); + } } } } - graph.getSelectionModel().setCells(array); + // 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'); }); @@ -431,21 +453,35 @@ }; - function showPropertiesWindow(graph) { + function showPropertiesWindow(graph, cell) { - var array = ["Number of curves", - "color (>0) or mark (<0)", + var array = ["numberOfCurves", + "colorOrMark", "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" + "lineOrMarkSize", + "outputWindowNumber", + "outputWindowPosition", + "outputWindowSize", + "xminAndXmax", + "yminAndYmax", + "zminAndZmax", + "alphaAndTheta", + "bufferSize" ]; + var completeNameArray = {}; + completeNameArray["numberOfCurves"] = "Number of Curves"; + completeNameArray["colorOrMark"] = "color (>0) or mark (<0)"; + completeNameArray["lineOrMarkSize"] = "line or mark size"; + completeNameArray["outputWindowNumber"] = "Output window number (-1 for automatic)"; + completeNameArray["outputWindowPosition"] = "Output window position"; + completeNameArray["outputWindowSize"] = "Output window sizes"; + completeNameArray["xminAndXmax"] = "Xmin and Xmax"; + completeNameArray["yminAndYmax"] = "Ymin and Ymax"; + completeNameArray["zminAndZmax"] = "Zmin and Zmax"; + completeNameArray["alphaAndTheta"] = "Alpha and Theta"; + completeNameArray["bufferSize"] = "Buffer size"; + // Create basic structure for the form. var content = document.createElement('div'); //content.id = "contentProperties"; @@ -470,15 +506,16 @@ // Input Title. var fieldName = array[field]; var namelabel = document.createElement('label'); - namelabel.innerHTML = fieldName; + namelabel.innerHTML = completeNameArray[fieldName.toString()]; myform.appendChild(namelabel); // Input. var input = document.createElement("input"); - input.name = fieldName; + input.name = fieldName.toString(); + input.value = 0; input.style.cssText = 'float: right;'; - input.id = fieldName; + input.id = fieldName.toString(); myform.appendChild(input); // Line break. @@ -502,7 +539,22 @@ // Executes when button 'btn' is clicked. btn.onclick = function() { - + var propertiesObject = { + xyz : document.querySelector('#xyz').value, + id : cell.id, + numberOfCurves : document.querySelector('#numberOfCurves').value, + colorOrMark : document.querySelector('#colorOrMark').value, + lineOrMarkSize : document.querySelector('#lineOrMarkSize').value, + outputWindowNumber : document.querySelector('#outputWindowNumber').value, + outputWindowPosition : document.querySelector('#outputWindowPosition').value, + outputWindowSize : document.querySelector('#outputWindowSize').value, + xminAndXmax : document.querySelector('#xminAndXmax').value, + yminAndYmax : document.querySelector('#yminAndYmax').value, + zminAndZmax : document.querySelector('#zminAndZmax').value, + alphaAndTheta : document.querySelector('#alphaAndTheta').value, + bufferSize : document.querySelector('#bufferSize').value + }; + console.log(propertiesObject); }; myform.appendChild(btn); @@ -515,6 +567,7 @@ //btn.style.cssText='float:right;'; btn.onclick = function() { // Only removes the content div, not the modal window. + }; -- cgit From 9567d99c9411ccefbffa82d0e3aec19f8ee816cd Mon Sep 17 00:00:00 2001 From: jiteshjha Date: Fri, 3 Jun 2016 13:30:55 +0530 Subject: JS Object properties --- css/common.css | 4 ++ index.html | 187 ++++++++++++++++++++++++++------------------------------- 2 files changed, 89 insertions(+), 102 deletions(-) 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 dc3d76c..4e7c8be 100644 --- a/index.html +++ b/index.html @@ -264,44 +264,42 @@ 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); - } + 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)); - } + 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, @@ -455,32 +453,19 @@ function showPropertiesWindow(graph, cell) { - var array = ["numberOfCurves", - "colorOrMark", - "line or mark size", - "lineOrMarkSize", - "outputWindowNumber", - "outputWindowPosition", - "outputWindowSize", - "xminAndXmax", - "yminAndYmax", - "zminAndZmax", - "alphaAndTheta", - "bufferSize" - ]; - - var completeNameArray = {}; - completeNameArray["numberOfCurves"] = "Number of Curves"; - completeNameArray["colorOrMark"] = "color (>0) or mark (<0)"; - completeNameArray["lineOrMarkSize"] = "line or mark size"; - completeNameArray["outputWindowNumber"] = "Output window number (-1 for automatic)"; - completeNameArray["outputWindowPosition"] = "Output window position"; - completeNameArray["outputWindowSize"] = "Output window sizes"; - completeNameArray["xminAndXmax"] = "Xmin and Xmax"; - completeNameArray["yminAndYmax"] = "Ymin and Ymax"; - completeNameArray["zminAndZmax"] = "Zmin and Zmax"; - completeNameArray["alphaAndTheta"] = "Alpha and Theta"; - completeNameArray["bufferSize"] = "Buffer size"; + 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. var content = document.createElement('div'); @@ -502,31 +487,33 @@ 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 = completeNameArray[fieldName.toString()]; - myform.appendChild(namelabel); - - - // Input. - var input = document.createElement("input"); - input.name = fieldName.toString(); - input.value = 0; - input.style.cssText = 'float: right;'; - input.id = fieldName.toString(); - 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. var linebreak = document.createElement('br'); myform.appendChild(linebreak); @@ -539,22 +526,15 @@ // Executes when button 'btn' is clicked. btn.onclick = function() { - var propertiesObject = { - xyz : document.querySelector('#xyz').value, - id : cell.id, - numberOfCurves : document.querySelector('#numberOfCurves').value, - colorOrMark : document.querySelector('#colorOrMark').value, - lineOrMarkSize : document.querySelector('#lineOrMarkSize').value, - outputWindowNumber : document.querySelector('#outputWindowNumber').value, - outputWindowPosition : document.querySelector('#outputWindowPosition').value, - outputWindowSize : document.querySelector('#outputWindowSize').value, - xminAndXmax : document.querySelector('#xminAndXmax').value, - yminAndYmax : document.querySelector('#yminAndYmax').value, - zminAndZmax : document.querySelector('#zminAndZmax').value, - alphaAndTheta : document.querySelector('#alphaAndTheta').value, - bufferSize : document.querySelector('#bufferSize').value - }; - console.log(propertiesObject); + var propertiesObject = { + id: cell.id + }; + + for (var key in defaultProperties) { + if (defaultProperties.hasOwnProperty(key)) { + propertiesObject[key] = document.getElementById(key.toString()).value; + } + } }; myform.appendChild(btn); @@ -563,17 +543,20 @@ 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); -- cgit From 38c03306e407a9c4245c9d494ef186364aae452c Mon Sep 17 00:00:00 2001 From: jiteshjha Date: Fri, 3 Jun 2016 13:43:32 +0530 Subject: formatting --- index.html | 44 ++++++++++++++++++++++---------------------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/index.html b/index.html index 4e7c8be..ca1ec01 100644 --- a/index.html +++ b/index.html @@ -390,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() { @@ -467,36 +467,36 @@ 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 (var key in defaultProperties) { if (defaultProperties.hasOwnProperty(key)) { - // Input Title. + // Input Title var fieldName = defaultProperties[key]; var namelabel = document.createElement('label'); namelabel.innerHTML = defaultProperties[key][0]; myform.appendChild(namelabel); - // Input. + // Input var input = document.createElement("input"); input.name = key; input.value = defaultProperties[key][1]; @@ -504,27 +504,27 @@ input.setAttribute("class", "fieldInput"); myform.appendChild(input); - // Line break. + // Line break var linebreak = document.createElement('br'); myform.appendChild(linebreak); - // Line break. + // 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 @@ -538,7 +538,7 @@ }; myform.appendChild(btn); - // Button - Reset. + // Button - Reset var btn = document.createElement("button"); btn.innerHTML = 'Reset'; btn.type = "button"; @@ -1116,8 +1116,8 @@ }; + Updates connection points before the routing is called. + --> + Overrides methods to preview and create new edges. + --> + Adds in-place highlighting for complete cell area (no hotspot). + --> + Implements a custom resistor shape. Direction currently ignored here. + -->