diff options
| -rw-r--r-- | css/common.css | 12 | ||||
| -rw-r--r-- | index.html | 248 |
2 files changed, 229 insertions, 31 deletions
diff --git a/css/common.css b/css/common.css index 5300635..86a1453 100644 --- a/css/common.css +++ b/css/common.css @@ -196,3 +196,15 @@ td.mxPopupMenuIcon { margin-left: 160px; width: 50px; } + +.boldButton { + font-weight: bold; +} + +.italicButton { + font-style: italic; +} + +.underlineButton { + text-decoration: underline; +} @@ -119,36 +119,39 @@ for edges that reflects their target terminal. */ + + graph.model.getStyle = function(cell) { var style = null; if (cell != null) { - // Get style for the recently created mxCell. style = mxGraphModel.prototype.getStyle.apply(this, arguments); - // If the mxCell is an edge and if it's a fully formed edge if (this.isEdge(cell) && cell.source != null) { var target = this.getTerminal(cell, false); - if (target != null) { - /* cell.name attribute defines the link name so that it can be parsed in the XML during XSLT transformation. */ - var cellSource = cell.source; - while (cellSource.isEdge() == true) { - cellSource = cellSource.source; + while(cellSource.isEdge() == true) { + cellSource = cellSource.source; } if (cellSource.value == "ExplicitOutputPort" || cellSource.value == "ExplicitInputPort") { - style += ';' + 'ExplicitLink'; + if(style == null) { + style += ';' + 'ExplicitLink' + ';'; + } cell.name = "ExplicitLink"; } else if (cellSource.value == "ImplicitOutputPort" || cellSource.value == "ImplicitInputPort") { - style += ';' + 'ImplicitLink'; + if(style == null) { + style += ';' + 'ImplicitLink' + ';'; + } cell.name = "ImplicitLink"; } else if (cellSource.value == "CommandPort" || cellSource.value == "ControlPort") { - style += ';' + 'CommandControlLink'; + if(style == null) { + style += ';' + 'CommandControlLink' + ';'; + } cell.name = "CommandControlLink"; } } @@ -174,15 +177,14 @@ var edgeformat = menu.addItem('Format', null, null); menu.addItem('Border Color', 'images/draw-brush.png', function() { - // @ToDo: Pooja: Functionality to be put. showColorWheel(graph, cell, 'edgeStrokeColor'); }, edgeformat); menu.addItem('Text and Text Font', 'images/edit.png', function() { - alert('Edit...'); // @ToDo: Pooja: Functionality to be put. + showTextEditWindow(graph, cell); }, edgeformat); menu.addItem('Text Color', 'images/edit.png', function() { - alert('Edit...'); // @ToDo: Pooja: Functionality to be put. + showColorWheel(graph, cell, 'edgeTextColor'); }, edgeformat); } else { @@ -448,7 +450,9 @@ content.innerHTML = this.convertValueToString(cell); showModalWindow(this, 'Properties', content, 400, 300); */ - showPropertiesWindow(graph, cell); + if(cell.isVertex() == true) { + showPropertiesWindow(graph, cell); + } } } @@ -1215,6 +1219,191 @@ wind = showModalWindow(graph, 'Properties', content, 450, height); }; + + + function showTextEditWindow(graph, cell) { + var defaultProperties = { + text: ["Text", "text"], + fontFamily : ["FontFamily", [ + "Arial", + "Dialog", + "Verdana", + "Times New Roman" + ]], + fontSize: ["fontSize", 10] + }; + // Create basic structure for the form + var content = document.createElement('div'); + content.setAttribute("id", "contentProperties"); + // Heading of content + var heading = document.createElement('h2'); + heading.innerHTML = "Text and Text Font"; + heading.id = "headingProperties" + content.appendChild(heading); + // Add Form + var myform = document.createElement("form"); + myform.method = "post"; + myform.id = "formProperties"; + // 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); + if(key == "fontFamily") { + //Here we create a "select" element (a drop down list). + var newList = document.createElement("select"); + newList.style.cssText = "float:right"; + newList.setAttribute("id", key.toString()); + var dropdownItems = defaultProperties[key][1]; + // Iterate over the dropdown options and create html elements + dropdownItems.forEach(function (value, i) { + option = document.createElement('option'); + option.value = value; + option.text = value; + newList.appendChild(option); + }); + myform.appendChild(newList); + } + else { + 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); + // Button - Bold + var btn = document.createElement("button"); + btn.innerHTML = 'Bold'; + btn.setAttribute("id", "boldButton"); + btn.type = "button"; + btn.name = "submit"; + btn.onclick = function() { + var trigger = document.getElementById('boldButton'); + trigger.classList.toggle('boldButton'); + var style = graph.getModel().getStyle(cell); + if (style.indexOf('fontStyle') > -1) { + var previousValue = parseInt(style.charAt(style.indexOf('fontStyle') + 'fontStyle='.length)); + if(previousValue == 1 || previousValue == 3 || previousValue == 5 || previousValue == 7) { + previousValue -= 1; + } + else { + previousValue += 1; + } + style = style.replace(/fontStyle=(.*);/, "fontStyle=" + previousValue + ';'); + } else { + style += 'fontStyle=' + '1' + ';'; + } + graph.getModel().setStyle(cell, style); + } + myform.appendChild(btn); + // Button - Italics + var btn = document.createElement("button"); + btn.innerHTML = 'Italic'; + btn.setAttribute("id", "italicButton"); + btn.type = "button"; + btn.name = "submit"; + btn.onclick = function() { + var trigger = document.getElementById('italicButton'); + trigger.classList.toggle('italicButton'); + var style = graph.getModel().getStyle(cell); + if (style.indexOf('fontStyle') > -1) { + var previousValue = parseInt(style.charAt(style.indexOf('fontStyle') + 'fontStyle='.length)); + if(previousValue == 2 || previousValue == 3 || previousValue == 6 || previousValue == 7) { + previousValue -= 2; + } + else { + previousValue += 2; + } + style = style.replace(/fontStyle=(.*);/, "fontStyle=" + previousValue + ';'); + } else { + style += 'fontStyle=' + '2' + ';'; + } + graph.getModel().setStyle(cell, style); + } + myform.appendChild(btn); + // Button - Underline + var btn = document.createElement("button"); + btn.innerHTML = 'Underline'; + btn.setAttribute("id", "underlineButton"); + btn.type = "button"; + btn.name = "submit"; + btn.onclick = function() { + var trigger = document.getElementById('underlineButton'); + trigger.classList.toggle('underlineButton'); + var style = graph.getModel().getStyle(cell); + if (style.indexOf('fontStyle') > -1) { + var previousValue = parseInt(style.charAt(style.indexOf('fontStyle') + 'fontStyle='.length)); + if(previousValue == 4 || previousValue == 5 || previousValue == 6 || previousValue == 7) { + previousValue -= 4; + } + else { + previousValue += 4; + } + style = style.replace(/fontStyle=(.*);/, "fontStyle=" + previousValue + ';'); + } else { + style += 'fontStyle=' + '4' + ';'; + } + graph.getModel().setStyle(cell, style); + } + myform.appendChild(btn); + // Line break + var linebreak = document.createElement('br'); + myform.appendChild(linebreak); + // Line break + var linebreak = document.createElement('br'); + myform.appendChild(linebreak); + // Button - Submit + var btn = document.createElement("button"); + btn.innerHTML = 'Submit'; + btn.type = "button"; + btn.name = "submit"; + // 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; + } + } + var style = graph.getModel().getStyle(cell); + if (style.indexOf('fontSize') > -1) { + style = style.replace(/fontSize=(.*);/, "fontSize=" + propertiesObject['fontSize'] + ';'); + } else { + style += 'fontSize=' + propertiesObject['fontSize'] + ';'; + } + if (style.indexOf('fontFamily') > -1) { + style = style.replace(/fontFamily=(.*);/, "fontFamily=" + propertiesObject['fontFamily'] + ';'); + } else { + style += 'fontFamily=' + propertiesObject['fontFamily'] + ';'; + } + graph.getModel().setStyle(cell, style); + graph.getModel().setValue(cell, propertiesObject['text']); + }; + myform.appendChild(btn); + // Base height without fields : 135 px + height = 135 + 26 * defaultProperties.length + 15; + content.appendChild(myform); + showModalWindow(graph, 'Text and Text font', content, 450, height); + }; /* @jiteshjha, @pooja showSetupWindow dialog box @@ -1392,26 +1581,21 @@ }; function showColorWheel(graph, cell, selectProperty) { - // Create basic structure for the form var content = document.createElement('div'); content.setAttribute("id", "colorProperties"); - // Add Form var myform = document.createElement("form"); myform.method = ""; myform.setAttribute("id", "formProperties"); - // Line break var linebreak = document.createElement('br'); myform.appendChild(linebreak); - // Input Title var fieldName = 'Color'; var namelabel = document.createElement('label'); namelabel.innerHTML = fieldName; myform.appendChild(namelabel); - // Input var input = document.createElement("input"); input.name = fieldName; @@ -1419,15 +1603,12 @@ input.style.cssText = 'float: right;'; input.setAttribute("id", "color"); 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); @@ -1437,25 +1618,22 @@ // Line break var linebreak = document.createElement('br'); myform.appendChild(linebreak); - // Button - Submit var btn = document.createElement("button"); btn.innerHTML = 'Submit'; btn.type = "button"; btn.name = "submit"; btn.style.cssText = 'margin-left: 75px'; - - var wind = null; // Executes when button 'btn' is clicked btn.onclick = function() { var input = document.getElementById('color').value; if (selectProperty == "edgeStrokeColor") { var style = graph.getModel().getStyle(cell); - if (style == null) { - style = 'strokeColor=' + input; + if (style.indexOf('strokeColor') > -1) { + style = style.replace(/strokeColor=#[a-fA-F0-9]{6,}/g, "strokeColor=" + input); graph.getModel().setStyle(cell, style); } else { - style = style.replace(/strokeColor=#[a-fA-F0-9]{6,}/g, "strokeColor=" + input); + style += 'strokeColor=' + input + ';'; graph.getModel().setStyle(cell, style); } } else if (selectProperty == "bgColor") { @@ -1479,12 +1657,20 @@ graph.getModel().setStyle(cell, style); } } - wind.destroy(); + else if(selectProperty == "edgeTextColor") { + var style = graph.getModel().getStyle(cell); + if (style.indexOf('fontColor') > -1) { + style = style.replace(/fontColor=#[a-fA-F0-9]{6,}/g, "fontColor=" + input); + graph.getModel().setStyle(cell, style); + } else { + style = style + 'fontColor=' + input + ';'; + graph.getModel().setStyle(cell, style); + } + } }; myform.appendChild(btn); - content.appendChild(myform); - wind = showModalWindow(graph, 'Diagram background...', content, 285, 340); + showModalWindow(graph, 'Diagram background...', content, 285, 340); // Invokes the farbtastic functionality $(document).ready(function() { $('#picker').farbtastic('#color'); |