Final - won't touch again

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;
+}
diff --git a/index.html b/index.html
index 6bc89f0..742b901 100644
--- a/index.html
+++ b/index.html
@@ -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');