Fix print background

Add vertex shape to settings
Fix separate style

script/Appilcation.js

@@ -220,7 +220,7 @@ Application.prototype._PrintRedrawGraph = function()
     
     context.translate(bbox.minPoint.inverse().x, bbox.minPoint.inverse().y);
     
-    this._RedrawGraph(context, bbox.minPoint.inverse(), this.backgroundCommonStyle, false, 
+    this._RedrawGraph(context, bbox.minPoint.inverse(), this.backgroundPrintStyle, false, 
         this.vertexPrintCommonStyle, this.vertexPrintSelectedVertexStyles, 
         this.edgePrintCommonStyle,   this.edgePrintSelectedStyles);
     
@@ -361,7 +361,7 @@ Application.prototype._RedrawEdge = function(edge, arcDrawer, commonStyle, selec
 
 Application.prototype._RedrawEdgeWithStyle = function(edge, style, arcDrawer, commonStyle, selectedStyles)
 {
-    arcDrawer.Draw(edge, style.GetStyle({}));
+    arcDrawer.Draw(edge, style.GetStyle({}, edge));
 }
 
 Application.prototype.RedrawEdgeProgress = function(context, edge, progress)
@@ -394,7 +394,7 @@ Application.prototype.RedrawNodes = function(context)
 
     for (i = 0; i < this.graph.vertices.length; i ++)
     {
-		graphDrawer.Draw(this.graph.vertices[i], this.graph.vertices[i].currentStyle.GetStyle({}));
+		graphDrawer.Draw(this.graph.vertices[i], this.graph.vertices[i].currentStyle.GetStyle({}, this.graph.vertices[i]));
     }	
 }
 
@@ -1615,20 +1615,20 @@ Application.prototype.GetSelectionRect = function(rect)
   return this.selectionRect;
 }
 
-Application.prototype.GetStyle = function(type, styleName, index)
+Application.prototype.GetStyle = function(type, styleName, object, index)
 {
     if (type == "vertex")
     {
         if (styleName == "common")
         {
-            return this.vertexCommonStyle;
+            return object !== undefined ? object.getStyleFor(0) : this.vertexCommonStyle;
         }
         else if (styleName == "selected")
         {
             if (index == undefined)
                 index = 0;
 
-            return this.vertexSelectedVertexStyles[index];
+            return object !== undefined && index == 0 ? object.getStyleFor(1) : this.vertexSelectedVertexStyles[index];
         }
         else if (styleName == "printed")
         {
@@ -1648,11 +1648,11 @@ Application.prototype.GetStyle = function(type, styleName, index)
     {
         if (styleName == "common")
         {
-            return this.edgeCommonStyle;
+            return object !== undefined ? object.getStyleFor(0) : this.edgeCommonStyle;
         }
         else if (styleName == "selected")
         {
-            return this.edgeSelectedStyles[0];
+            return object !== undefined && index == 0 ? object.getStyleFor(1) : this.edgeSelectedStyles[0];
         }
         else if (styleName == "printed")
         {

script/BaseBackgroundDrawer.js

@@ -9,8 +9,17 @@ function CommonBackgroundStyle()
 	this.commonOpacity = 1.0;
 }
 
+CommonBackgroundStyle.prototype.ShouldLoad = function (field)
+{
+  return true;
+}
+
+PrintBackgroundStyle.prototype = Object.create(CommonBackgroundStyle.prototype);
+
 function PrintBackgroundStyle()
 {
+  CommonBackgroundStyle.apply(this, arguments);
+
 	this.commonColor   = '#ffffff';
 	this.commonOpacity = 1.0;
 }

script/BaseEdge.js

@@ -111,7 +111,7 @@ BaseEdge.prototype.LoadFromXML = function (xml, graph)
       for(var indexField in parsedSave)
       {
         var index = parseInt(indexField);
-        this.ownStyles[index] = this.getStyleFor(index);
+        this.ownStyles[index] = FullObjectCopy(this.getStyleFor(index));
         for(var field in parsedSave[indexField])
         {
             if (this.ownStyles[index].ShouldLoad(field))
@@ -184,8 +184,8 @@ BaseEdge.prototype.GetEdgePositions = function()
     
     var position1 = this.vertex1.position;
     var position2 = this.vertex2.position;
-    var diameter1 = this.vertex1.model.diameter + parseInt(this.vertex1.currentStyle.GetStyle({}).lineWidth);
+    var diameter1 = this.vertex1.model.diameter + parseInt(this.vertex1.currentStyle.GetStyle({}, this.vertex1).lineWidth);
-    var diameter2 = this.vertex2.model.diameter + parseInt(this.vertex2.currentStyle.GetStyle({}).lineWidth);
+    var diameter2 = this.vertex2.model.diameter + parseInt(this.vertex2.currentStyle.GetStyle({}, this.vertex2).lineWidth);
 
     var direction = position1.subtract(position2);
     
@@ -219,18 +219,18 @@ BaseEdge.prototype.GetEdgePositions = function()
 
 	vertexes.forEach(function(data) 
         {
-            var shape = data.vertex.currentStyle.GetStyle({}).shape;
+            var shape = data.vertex.currentStyle.GetStyle({}, data.vertex).shape;
             if (shape == VertexCircleShape)
             {
                 var direction = data.direction.multiply(0.5);        
         
                 res.push(data.position.subtract(direction.multiply(data.diameter)));
             }
-            else if (shape == VertexSquareShape || shape == VertexTriangleShape)
+            else
             {
                 var lineFinish1 = data.direction.multiply(-1).multiply(1000.0);
             
-                var pointsVertex1 = shape == VertexSquareShape ? GetSquarePoints(data.diameter) : GetTrianglePoints(data.diameter);
+                var pointsVertex1 = GetPointsForShape(shape, data.diameter);
                 pointsVertex1.push(pointsVertex1[0]);
             
                 for (var i = 0; i < pointsVertex1.length - 1; i ++)
@@ -284,7 +284,7 @@ BaseEdge.prototype.getStyleFor = function (index)
 {
   if (this.ownStyles.hasOwnProperty(index))
   {
-    return FullObjectCopy(this.ownStyles[index]);
+    return this.ownStyles[index];
   }
   else
   {
@@ -295,7 +295,7 @@ BaseEdge.prototype.getStyleFor = function (index)
     else
       style = globalApplication.GetStyle("edge", "selected");
 
-    return FullObjectCopy(style);
+    return style;
   }
 }
 

script/BaseEdgeDrawer.js

@@ -1,17 +1,25 @@
 /**
  * Graph drawer.
  */
- 
+
+
+ const lineDashTypes = [
+          [],
+          [4, 4],
+          [12, 12],
+          [16, 4, 4, 4],
+        ];
+
  function BaseEdgeStyle()
  {
    this.baseStyles = [];
  }
  
- BaseEdgeStyle.prototype.GetStyle = function (baseStyle)
+ BaseEdgeStyle.prototype.GetStyle = function (baseStyle, object)
  {
    this.baseStyles.forEach(function(element) {
-     var styleObject = globalApplication.GetStyle("edge", element);
+     var styleObject = globalApplication.GetStyle("edge", element, object);
-     baseStyle       = styleObject.GetStyle(baseStyle);
+     baseStyle       = styleObject.GetStyle(baseStyle, object);
    });
  
    if (this.hasOwnProperty('weightText'))
@@ -22,8 +30,12 @@
      baseStyle.fillStyle   = this.fillStyle;
    if (this.hasOwnProperty('textPadding'))
      baseStyle.textPadding = this.textPadding;
-     if (this.hasOwnProperty('textStrockeWidth'))
+   if (this.hasOwnProperty('textStrockeWidth'))
      baseStyle.textStrockeWidth = this.textStrockeWidth;
+   if (this.hasOwnProperty('lineDash'))
+     baseStyle.lineDash = this.lineDash;
+   if (this.hasOwnProperty('widthFactor'))
+     baseStyle.widthFactor = this.widthFactor;
  
    return baseStyle;
  }
@@ -42,6 +54,8 @@ function CommonEdgeStyle()
  	this.fillStyle   = '#68aeba';
  	this.textPadding = 4;
 	this.textStrockeWidth = 2;
+    this.lineDash = lineDashTypes[0];
+    this.widthFactor = 1;
 }
 
 CommonEdgeStyle.prototype = Object.create(BaseEdgeStyle.prototype);
@@ -55,6 +69,8 @@ function CommonPrintEdgeStyle()
  	this.fillStyle   = '#FFFFFF';
  	this.textPadding = 4;
 	this.textStrockeWidth = 2;
+
+    this.baseStyles.push("common");
 }
 CommonPrintEdgeStyle.prototype = Object.create(BaseEdgeStyle.prototype);
 
@@ -180,8 +196,8 @@ BaseEdgeDrawer.prototype.Draw = function(baseEdge, arcStyle)
     
   this.SetupStyle(baseEdge, arcStyle);
     
-  var lengthArrow = baseEdge.model.width * 4;
+  var lengthArrow = baseEdge.model.width * 4 * (Math.min(this.style.widthFactor * 1.5, 1));
-  var widthArrow  = baseEdge.model.width * 2;
+  var widthArrow  = baseEdge.model.width * 2 * (Math.min(this.style.widthFactor * 1.5, 1));
   var position1 = baseEdge.vertex1.position;
   var position2 = baseEdge.vertex2.position;
   var direction = position1.subtract(position2); 
@@ -236,10 +252,11 @@ BaseEdgeDrawer.prototype.Draw = function(baseEdge, arcStyle)
 
 BaseEdgeDrawer.prototype.SetupStyle = function(baseEdge, arcStyle)
 {
-  this.context.lineWidth   = baseEdge.model.width;
+  this.context.lineWidth   = baseEdge.model.width * arcStyle.widthFactor;
   this.context.strokeStyle = arcStyle.strokeStyle;
   this.context.fillStyle   = arcStyle.fillStyle;
   this.model               = baseEdge.model;
+  this.style               = arcStyle;
 }
 
 BaseEdgeDrawer.prototype.DrawArc = function(position1, position2, arcStyle)
@@ -249,13 +266,13 @@ BaseEdgeDrawer.prototype.DrawArc = function(position1, position2, arcStyle)
       this.drawArc.DrawArc(position1, position2, arcStyle);
       return;
   }
-    
+   
+  this.context.setLineDash(arcStyle.lineDash);
   if (position1.equals(position2))
   {
     this.context.beginPath();
     this.context.arc(position1.x - Math.cos(this.model.GetLoopShiftAngel()) * this.model.GetLoopSize(), 
                      position1.y - Math.sin(this.model.GetLoopShiftAngel()) * this.model.GetLoopSize(), this.model.GetLoopSize(), 0, 2 * Math.PI);
-    this.context.closePath();
     this.context.stroke();
   }
   else
@@ -263,9 +280,9 @@ BaseEdgeDrawer.prototype.DrawArc = function(position1, position2, arcStyle)
     this.context.beginPath();
     this.context.moveTo(position1.x, position1.y);
     this.context.lineTo(position2.x, position2.y);
-    this.context.closePath();
+    this.context.stroke();
-    this.context.stroke();  
   }
+  this.context.setLineDash([]);  
 }
 
 BaseEdgeDrawer.prototype.DrawWeight = function(position1, position2, text, arcStyle, hasPair)
@@ -417,7 +434,6 @@ ProgressArcDrawer.prototype.Draw = function(baseEdge, arcStyle)
         this.context.beginPath();
         this.context.arc(positions[0].x - Math.cos(this.baseDrawer.model.GetLoopShiftAngel()) * this.baseDrawer.model.GetLoopSize(),
                          positions[0].y - Math.sin(this.baseDrawer.model.GetLoopShiftAngel()) * this.baseDrawer.model.GetLoopSize(), this.baseDrawer.model.GetLoopSize(), this.progress * 2 * Math.PI, this.progress * 2 * Math.PI + sizeInRadian);
-        this.context.closePath();
         this.context.stroke();
     }
     else
@@ -429,7 +445,6 @@ ProgressArcDrawer.prototype.Draw = function(baseEdge, arcStyle)
         this.context.beginPath();
         this.context.moveTo(startPosition.x, startPosition.y);
         this.context.lineTo(finishPosition.x, finishPosition.y);
-        this.context.closePath();
         this.context.stroke();
     }
 }
@@ -445,6 +460,7 @@ CurvedArcDrawer.prototype = Object.create(BaseEdgeDrawer.prototype);
 
 CurvedArcDrawer.prototype.DrawArc = function(position1, position2, arcStyle)
 {
+  this.context.setLineDash(arcStyle.lineDash);  
   if (position1.equals(position2))
   {
     this.context.beginPath();
@@ -464,6 +480,7 @@ CurvedArcDrawer.prototype.DrawArc = function(position1, position2, arcStyle)
     this.context.bezierCurveTo(firstBezierPoint.x, firstBezierPoint.y, secondBezierPoint.x, secondBezierPoint.y, position2.x, position2.y);
     this.context.stroke(); 
   }
+  this.context.setLineDash([]);
 }
 
 CurvedArcDrawer.prototype.GetStartArrowDiretion = function(position1, position2, lengthArrow) 

script/BaseVertex.js

@@ -70,7 +70,7 @@ BaseVertex.prototype.LoadFromXML = function (xml)
       for(var indexField in parsedSave)
       {
         var index = parseInt(indexField);
-        this.ownStyles[index] = this.getStyleFor(index);
+        this.ownStyles[index] = FullObjectCopy(this.getStyleFor(index));
         for(var field in parsedSave[indexField])
         {
             if (this.ownStyles[index].ShouldLoad(field))
@@ -99,20 +99,20 @@ BaseVertex.prototype.IsUndefinedPosition = function ()
 
 BaseVertex.prototype.HitTest = function (pos)
 {
-  var shape = this.hasOwnProperty('currentStyle') ? this.currentStyle.GetStyle({}).shape : VertexCircleShape;
+  var shape = this.hasOwnProperty('currentStyle') ? this.currentStyle.GetStyle({}, this).shape : VertexCircleShape;
-  var width = this.hasOwnProperty('currentStyle') ? this.currentStyle.GetStyle({}).lineWidth : 0;
+  var width = this.hasOwnProperty('currentStyle') ? this.currentStyle.GetStyle({}, this).lineWidth : 0;
   
   if (shape == VertexCircleShape)
   {
   	return this.position.distance(pos) < this.model.diameter / 2.0 + width;
   }
-  else if (shape == VertexSquareShape || shape == VertexTriangleShape)
+  else
   {
     var relativPos  = (new Point(pos.x, pos.y)).subtract(this.position);
     var lineFinish1 = relativPos.add(new Point(1000, 0));
     var lineFinish2 = relativPos.add(new Point(-1000, 0));
 
-    var pointsVertex1 = shape == VertexSquareShape ? GetSquarePoints(this.model.diameter + width) : GetTrianglePoints(this.model.diameter + width);
+    var pointsVertex1 = GetPointsForShape(shape, this.model.diameter + width);
     pointsVertex1.push(pointsVertex1[0]);
 
     var hitNumber1 = 0;
@@ -148,14 +148,14 @@ BaseVertex.prototype.resetOwnStyle = function (index)
 
 BaseVertex.prototype.setOwnStyle = function (index, style)
 {
-  this.ownStyles[index] = style;
+  this.ownStyles[index] = FullObjectCopy(style);
 }
 
 BaseVertex.prototype.getStyleFor = function (index)
 {
   if (this.ownStyles.hasOwnProperty(index))
   {
-    return FullObjectCopy(this.ownStyles[index]);
+    return this.ownStyles[index];
   }
   else
   {
@@ -166,7 +166,7 @@ BaseVertex.prototype.getStyleFor = function (index)
     else
       style = globalApplication.GetStyle("vertex", "selected");
 
-    return FullObjectCopy(style);
+    return style;
   }
 }
 

script/BaseVertexDrawer.js

@@ -6,9 +6,11 @@
 
 
 // Vertex shape
-const VertexCircleShape = 0,
+const VertexCircleShape   = 0,
-      VertexSquareShape = 1,
+      VertexSquareShape   = 1,
-      VertexTriangleShape = 2;
+      VertexTriangleShape = 2,
+	  VertexPentagonShape = 3,
+	  VertexHomeShape     = 4;
 
 function GetSquarePoints(diameter)
 {
@@ -38,17 +40,45 @@ function GetTrianglePoints(diameter)
 
   	return res;
 }
+
+function GetPentagonPoints(diameter)
+{
+	var res = [];
+
+	var baseValue = diameter / 2 * 1.2;
+
+  	res.push(new Point(0, - baseValue));
+	res.push((new Point(0, - baseValue)).rotate(new Point(0, 0), 72));
+	res.push((new Point(0, - baseValue)).rotate(new Point(0, 0), 72 * 2));
+	res.push((new Point(0, - baseValue)).rotate(new Point(0, 0), 72 * 3));
+	res.push((new Point(0, - baseValue)).rotate(new Point(0, 0), 72 * 4));
+	res.push((new Point(0, - baseValue)).rotate(new Point(0, 0), 72 * 5));
+
+  	return res;
+}
+
+function GetPointsForShape(shape, diameter)
+{
+	var pointsVertex1 = null;
+	switch (parseInt(shape))
+	{
+		case VertexSquareShape:   pointsVertex1 = GetSquarePoints(diameter); break;
+		case VertexTriangleShape: pointsVertex1 = GetTrianglePoints(diameter); break;
+		case VertexPentagonShape: pointsVertex1 = GetPentagonPoints(diameter); break;
+	}
+	return pointsVertex1;
+}
  
 function BaseVertexStyle()
 {
   this.baseStyles = [];
 }
 
-BaseVertexStyle.prototype.GetStyle = function (baseStyle)
+BaseVertexStyle.prototype.GetStyle = function (baseStyle, object)
 {
 	this.baseStyles.forEach(function(element) {
-		var styleObject = globalApplication.GetStyle("vertex", element);
+		var styleObject = globalApplication.GetStyle("vertex", element, object);
-		baseStyle       = styleObject.GetStyle(baseStyle);
+		baseStyle       = styleObject.GetStyle(baseStyle, object);
 	});
 
 	if (this.hasOwnProperty('lineWidth'))
@@ -291,24 +321,12 @@ BaseVertexDrawer.prototype.DrawShape = function(baseGraph)
   {
   	this.context.arc(baseGraph.position.x, baseGraph.position.y, baseGraph.model.diameter / 2.0, 0, 2 * Math.PI);
   }
-  else if (this.currentStyle.shape == VertexSquareShape)
+  else
   {
-	var points = GetSquarePoints(baseGraph.model.diameter);
+	var points = GetPointsForShape(this.currentStyle.shape, baseGraph.model.diameter);
 
 	this.context.moveTo(baseGraph.position.x + points[points.length - 1].x, baseGraph.position.y + points[points.length - 1].y);
 
-	var context = this.context;
-	
-	points.forEach(function(point) {
-		context.lineTo(baseGraph.position.x + point.x, baseGraph.position.y + point.y);
-	  });
-  }
-  else if (this.currentStyle.shape == VertexTriangleShape)
-  {
-	var points = GetTrianglePoints(baseGraph.model.diameter)
-
-	this.context.moveTo(baseGraph.position.x + points[points.length - 1].x, baseGraph.position.y + points[points.length - 1].y);
-	
 	var context = this.context;
 
 	points.forEach(function(point) {

script/EventHandlers.js

@@ -1402,17 +1402,18 @@ SetupVertexStyle.prototype.show = function(index, selectedVertexes)
 
     var fillFields = function()
     {
-        var fullStyle = style.GetStyle({});
+        var fullStyle = style.GetStyle({}, forAll ? undefined : selectedVertexes[0]);
 
         $( "#vertexFillColor" ).val(fullStyle.fillStyle);
         $( "#vertexStrokeColor" ).val(fullStyle.strokeStyle);
         $( "#vertexTextColor" ).val(fullStyle.mainTextColor);
         $( "#vertexStrokeSize" ).val(fullStyle.lineWidth);
+        $( "#vertexShape" ).val(fullStyle.shape);         
     }
     
     var redrawVertex = function()
     {
-        var fullStyle = style.GetStyle({});
+        var fullStyle = style.GetStyle({}, forAll ? undefined : selectedVertexes[0]);
 
         if (fullStyle.fillStyle != $( "#vertexFillColor" ).val())
             style.fillStyle     = $( "#vertexFillColor" ).val();
@@ -1425,6 +1426,9 @@ SetupVertexStyle.prototype.show = function(index, selectedVertexes)
 
         if (fullStyle.lineWidth != $( "#vertexStrokeSize" ).val())
             style.lineWidth     = parseInt($( "#vertexStrokeSize" ).val());
+
+        if (fullStyle.shape != $( "#vertexShape" ).val())
+            style.shape    = parseInt($( "#vertexShape" ).val());
         
         var canvas  = document.getElementById( "VertexPreview" );
         var context = canvas.getContext('2d');    
@@ -1438,8 +1442,10 @@ SetupVertexStyle.prototype.show = function(index, selectedVertexes)
         var baseVertex  = new BaseVertex(canvas.width / 2, canvas.height / 2, new BaseEnumVertices(this));
         baseVertex.mainText = "1";
         baseVertex.upText   = "Up Text";
+        if (!forAll)
+            baseVertex.ownStyles = selectedVertexes[0].ownStyles;
         
-        graphDrawer.Draw(baseVertex, style.GetStyle({}));
+        graphDrawer.Draw(baseVertex, style.GetStyle({}, baseVertex));
         
         context.restore();
     }
@@ -1507,6 +1513,7 @@ SetupVertexStyle.prototype.show = function(index, selectedVertexes)
     $( "#vertexStrokeColor" ).change(redrawVertex);
     $( "#vertexTextColor" ).change(redrawVertex);
     $( "#vertexStrokeSize" ).change(redrawVertex);
+    $( "#vertexShape" ).change(redrawVertex);    
 }
 
 /**
@@ -1542,16 +1549,16 @@ SetupEdgeStyle.prototype.show = function(index, selectedEdges)
 
     var fillFields = function()
     {
-        var fullStyle = style.GetStyle({});
+        var fullStyle = style.GetStyle({}, forAll ? undefined : selectedEdges[0]);
 
         $( "#edgeFillColor" ).val(fullStyle.fillStyle);
         $( "#edgeStrokeColor" ).val(fullStyle.strokeStyle);
-        $( "#edgeTextColor" ).val(fullStyle.weightText);
+        $( "#edgeTextColor" ).val(fullStyle.weightText);       
     }
     
     var redrawVertex = function()
     {
-        var fullStyle = style.GetStyle({});
+        var fullStyle = style.GetStyle({}, forAll ? undefined : selectedEdges[0]);
 
         if (fullStyle.fillStyle != $( "#edgeFillColor" ).val())
             style.fillStyle     = $( "#edgeFillColor" ).val();
@@ -1579,7 +1586,10 @@ SetupEdgeStyle.prototype.show = function(index, selectedEdges)
 
         var baseEdge     = new BaseEdge(baseVertex1, baseVertex2, true, 10, "Text");
         
-        graphDrawer.Draw(baseEdge, style.GetStyle({}));
+        if (!forAll)
+            baseEdge.ownStyles = selectedEdges[0].ownStyles;
+
+        graphDrawer.Draw(baseEdge, style.GetStyle({}, baseEdge));
         
         context.restore();
     }

script/point.js

@@ -58,6 +58,7 @@ Point.prototype.rotate = function(center, degrees){
     this.y = offset.x * Math.sin(radians) + offset.y * Math.cos(radians);
     this.x = this.x + center.x;
     this.y = this.y + center.y;
+    return this;
 };
 
 Point.prototype.offset = function(dx, dy){

script/utils.js

@@ -25,7 +25,9 @@ function gDecodeFromHTML(str)
 
 function FullObjectCopy(obj)
 {
-  return Object.assign(Object.create(obj), obj);
+  var newObj = Object.create(Object.getPrototypeOf(obj));
+
+  return Object.assign(newObj, obj);
 }
 
 function FullArrayCopy(arr)

tpl/home.php

@@ -411,7 +411,7 @@
           <div class="form-group row">
             <label for="vertexStrokeSize" class="col-sm-5 col-form-label"><?= L('stroke_size') ?></label>
             <div class="col-sm-5">
-              <input type="number" class="form-control" id="vertexStrokeSize" placeholder="10">
+              <input type="number" class="form-control" id="vertexStrokeSize" placeholder="10" min="1">
             </div>
           </div>
           <div class="form-group row">
@@ -420,6 +420,17 @@
               <input type="color" class="form-control" id="vertexTextColor" value="#FFAA22">
             </div>
           </div>
+          <div class="form-group row">
+            <label for="vertexShape" class="col-sm-5 col-form-label">Shape</label>
+            <div class="col-sm-5">
+              <select id="vertexShape">
+                <option value="0">Circle</option>
+                <option value="1">Squere</option>
+                <option value="2">Triangle</option>
+                <option value="3">Pentagon</option>
+              </select>
+            </div>
+          </div>          
         </fieldset>
         </form>