Add edge with parameter for style.

script/Appilcation.js

@@ -52,6 +52,7 @@ function Application(document, window)
     this.selectionRect  = null;
 
     this.defaultVertexSize = null;
+    this.defaultEdgeWidth = null;
 };
 
 // List of graph.
@@ -1407,7 +1408,11 @@ Application.prototype.SaveUserSettings = function()
 
     checkValue.push({field: "defaultVertexSize",
                       value: this.defaultVertexSize,
-                      check: this.defaultVertexSize != null});                     
+                      check: this.defaultVertexSize != null}); 
+
+    checkValue.push({field: "defaultEdgeWidth",
+                      value: this.defaultEdgeWidth,
+                      check: this.defaultEdgeWidth != null});
     
     //checkValue.push({field: "vertexPrintCommonStyle",
     //                 value: this.vertexPrintCommonStyle});
@@ -1464,8 +1469,13 @@ Application.prototype.LoadUserSettings = function(json)
     checkValue.push({field: "defaultVertexSize",
                     value: "defaultVertexSize",
                     check: null,
-                    deep: false});                  
+                    deep: false});
-    
+
+    checkValue.push({field: "defaultEdgeWidth",
+                    value: "defaultEdgeWidth",
+                    check: null,
+                    deep: false});
+
     //checkValue.push({field: "vertexPrintCommonStyle",
     //                 value: this.vertexPrintCommonStyle});
 
@@ -1769,3 +1779,35 @@ Application.prototype.ResetVertexSize = function()
         this.graph.vertices[i].model.diameter = this.GetDefaultVertexSize();
     }     
 }
+
+Application.prototype.SetDefaultEdgeWidth = function(width)
+{
+    var oldDefaultWidth = this.GetDefaultEdgeWidth();
+    this.defaultEdgeWidth = width;
+
+    for (i = 0; i < this.graph.edges.length; i ++)
+    {
+        if (this.graph.vertices[i].model.width == oldDefaultWidth)
+        {
+            this.graph.vertices[i].model.width = width;
+        }
+    }     
+}
+
+Application.prototype.GetDefaultEdgeWidth = function(diameter)
+{
+    if (this.defaultVertexSize != null)
+        return this.defaultEdgeWidth;
+    else
+        return defaultEdgeWidth;
+}
+
+Application.prototype.ResetEdgeWidth = function()
+{
+    this.defaultVertexSize = null;
+
+    for (i = 0; i < this.graph.edges.length; i ++)
+    {
+        this.graph.edges[i].model.width = this.GetDefaultEdgeWidth();
+    }     
+}

script/BaseEdgeDrawer.js

@@ -34,8 +34,6 @@
      baseStyle.textStrockeWidth = this.textStrockeWidth;
    if (this.hasOwnProperty('lineDash'))
      baseStyle.lineDash = this.lineDash;
-   if (this.hasOwnProperty('widthFactor'))
-     baseStyle.widthFactor = this.widthFactor;
  
    return baseStyle;
  }
@@ -54,8 +52,7 @@ function CommonEdgeStyle()
  	this.fillStyle   = '#68aeba';
  	this.textPadding = 4;
 	this.textStrockeWidth = 2;
-    this.lineDash = lineDashTypes[0];
+  this.lineDash = 0;
-    this.widthFactor = 1;
 }
 
 CommonEdgeStyle.prototype = Object.create(BaseEdgeStyle.prototype);
@@ -196,8 +193,8 @@ BaseEdgeDrawer.prototype.Draw = function(baseEdge, arcStyle)
     
   this.SetupStyle(baseEdge, arcStyle);
     
-  var lengthArrow = baseEdge.model.width * 4 * (Math.min(this.style.widthFactor * 1.5, 1));
+  var lengthArrow = Math.max(baseEdge.model.width * 4, 8);
-  var widthArrow  = baseEdge.model.width * 2 * (Math.min(this.style.widthFactor * 1.5, 1));
+  var widthArrow  =  Math.max(baseEdge.model.width * 2, 4);
   var position1 = baseEdge.vertex1.position;
   var position2 = baseEdge.vertex2.position;
   var direction = position1.subtract(position2); 
@@ -252,7 +249,7 @@ BaseEdgeDrawer.prototype.Draw = function(baseEdge, arcStyle)
 
 BaseEdgeDrawer.prototype.SetupStyle = function(baseEdge, arcStyle)
 {
-  this.context.lineWidth   = baseEdge.model.width * arcStyle.widthFactor;
+  this.context.lineWidth   = baseEdge.model.width;
   this.context.strokeStyle = arcStyle.strokeStyle;
   this.context.fillStyle   = arcStyle.fillStyle;
   this.model               = baseEdge.model;
@@ -267,7 +264,7 @@ BaseEdgeDrawer.prototype.DrawArc = function(position1, position2, arcStyle)
       return;
   }
    
-  this.context.setLineDash(arcStyle.lineDash);
+  this.context.setLineDash(lineDashTypes[arcStyle.lineDash]);
   if (position1.equals(position2))
   {
     this.context.beginPath();
@@ -460,7 +457,7 @@ CurvedArcDrawer.prototype = Object.create(BaseEdgeDrawer.prototype);
 
 CurvedArcDrawer.prototype.DrawArc = function(position1, position2, arcStyle)
 {
-  this.context.setLineDash(arcStyle.lineDash);  
+  this.context.setLineDash(lineDashTypes[arcStyle.lineDash]);
   if (position1.equals(position2))
   {
     this.context.beginPath();

script/EdgeModel.js

@@ -4,10 +4,12 @@
  */
 
 var EdgeModels = {"line": 0, "cruvled" : 1};
+
+const defaultEdgeWidth = 4;
                 
 function EdgeModel()
 {
-    this.width = 4;
+    this.width = globalApplication.GetDefaultEdgeWidth();
     this.type  = EdgeModels.line;
     this.curvedValue = EdgeModel.prototype.defaultCruved;
     this.default = true;

script/EventHandlers.js

@@ -1409,7 +1409,7 @@ SetupVertexStyle.prototype.show = function(index, selectedVertexes)
         $( "#vertexTextColor" ).val(fullStyle.mainTextColor);
         $( "#vertexStrokeSize" ).val(fullStyle.lineWidth);
         $( "#vertexShape" ).val(fullStyle.shape);
-        $( "#vertexSize" ).val(forAll ? (new VertexModel()).diameter : selectedVertexes[0].model.diameter);
+        $( "#vertexSize" ).val(forAll ? app.GetDefaultVertexSize() : selectedVertexes[0].model.diameter);
     }
     
     var redrawVertex = function()
@@ -1583,7 +1583,9 @@ SetupEdgeStyle.prototype.show = function(index, selectedEdges)
 
         $( "#edgeFillColor" ).val(fullStyle.fillStyle);
         $( "#edgeStrokeColor" ).val(fullStyle.strokeStyle);
-        $( "#edgeTextColor" ).val(fullStyle.weightText);       
+        $( "#edgeTextColor" ).val(fullStyle.weightText);
+        $( "#edgeStyle" ).val(fullStyle.lineDash);
+        $( "#edgeWidth" ).val(forAll ? app.GetDefaultEdgeWidth() : selectedEdges[0].model.width);
     }
     
     var redrawVertex = function()
@@ -1598,6 +1600,11 @@ SetupEdgeStyle.prototype.show = function(index, selectedEdges)
 
         if (fullStyle.weightText != $( "#edgeTextColor" ).val())
             style.weightText    = $( "#edgeTextColor" ).val();
+
+        if (fullStyle.lineDash != $( "#edgeStyle" ).val())
+            style.lineDash    = $( "#edgeStyle" ).val();
+
+        var edgeWidth = parseInt($( "#edgeWidth" ).val());
         
         var canvas  = document.getElementById( "EdgePreview" );
         var context = canvas.getContext('2d');    
@@ -1619,16 +1626,35 @@ SetupEdgeStyle.prototype.show = function(index, selectedEdges)
         if (!forAll)
             baseEdge.ownStyles = selectedEdges[0].ownStyles;
 
+        baseEdge.model.width = edgeWidth;
+
         graphDrawer.Draw(baseEdge, style.GetStyle({}, baseEdge));
         
         context.restore();
     }
     
+    var applyWidth = function(width)
+        {
+            if (forAll)
+            {
+                app.SetDefaultEdgeWidth(width);
+            }
+            else
+            {
+                selectedEdges.forEach(function(edge) {
+                        edge.model.width = width;
+                    });
+            }
+        };    
+
 	dialogButtons[g_default] = 
            {
                text    : g_default,
                class   : "MarginLeft",
                click   : function() {
+
+                    applyWidth(forAll ? (new EdgeModel()).width : app.GetDefaultEdgeWidth());
+
                     if (forAll)
                     {
                         app.ResetEdgeStyle(index);
@@ -1646,6 +1672,9 @@ SetupEdgeStyle.prototype.show = function(index, selectedEdges)
            };
     
 	dialogButtons[g_save] = function() {
+
+                applyWidth(parseInt($( "#edgeWidth" ).val()));
+
                 if (forAll)
                 {
                     app.SetEdgeStyle(index, style);
@@ -1680,10 +1709,14 @@ SetupEdgeStyle.prototype.show = function(index, selectedEdges)
     $( "#edgeFillColor" ).unbind();
     $( "#edgeStrokeColor" ).unbind();
     $( "#edgeTextColor" ).unbind();
+    $( "#edgeStyle" ).unbind();
+    $( "#edgeWidth" ).unbind();    
     
     $( "#edgeFillColor" ).change(redrawVertex);
     $( "#edgeStrokeColor" ).change(redrawVertex);
     $( "#edgeTextColor" ).change(redrawVertex);
+    $( "#edgeStyle" ).change(redrawVertex);
+    $( "#edgeWidth" ).change(redrawVertex);
 }
 
 /**

tpl/home.php

@@ -417,7 +417,7 @@
           <div class="form-group row">
             <label for="vertexTextColor" class="col-sm-5 col-form-label"><?= L('text_color') ?></label>
             <div class="col-sm-5">
-              <input type="color" class="form-control" id="vertexTextColor" value="#FFAA22">
+                <input type="color" class="form-control" id="vertexTextColor" value="#FFAA22">
             </div>
           </div>
           <div class="form-group row">
@@ -464,6 +464,23 @@
               <input type="color" class="form-control" id="edgeFillColor" value="#FFAA22">
             </div>
           </div>
+          <div class="form-group row">
+            <label for="edgeStyle" class="col-sm-5 col-form-label">Line Style</label>
+            <div class="col-sm-5">
+              <select id="edgeStyle">
+                <option value="0">Solid</option>
+                <option value="1">Dotted</option>
+                <option value="2">Dashed</option>
+                <option value="3">Dashdotted</option>
+              </select>
+            </div>
+          </div>
+          <div class="form-group row">
+            <label for="edgeWidth" class="col-sm-5 col-form-label">Edge width</label>
+            <div class="col-sm-5">
+              <input type="number" class="form-control" id="edgeWidth" placeholder="3" min="1" min="20">
+            </div>
+          </div>
         </fieldset>
         </form>