Skip to content

Commit 7cf58c9

Browse files
prakashperumal1892prakashperumal1892
authored
Merge pull request #4517 from syncfusion-content/EJ2-978765-HTMLSVGHF
978765: HTML and SVG HF
2 parents 9287ab1 + 9bfa47e commit 7cf58c9

File tree

17 files changed

+419
-34
lines changed

17 files changed

+419
-34
lines changed

‎ej2-asp-core-mvc/code-snippet/diagram/shapes/HTML-FnContent/HTML.cs‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Linq;
4+
using System.Web;
5+
using System.Web.Mvc;
6+
using Syncfusion.EJ2.Diagrams;
7+
using System.Drawing;
8+
9+
namespace EJ2MVCSampleBrowser.Controllers.Diagram {
10+
public partial class DiagramController: Controller {
11+
private string CreateNodeContent(string nodeId)
12+
{
13+
return $"<div style='background:#6BA5D7;height:100%;width:100%;'><button type='button' style='width:100px'>Button</button></div>";
14+
};
15+
16+
public ActionResult Nodes()
17+
{
18+
List<DiagramNode> nodes = new List<DiagramNode>();
19+
nodes.Add(new DiagramNode()
20+
{
21+
Id = "node1",
22+
Width = 100,
23+
Height = 100,
24+
OffsetX = 100,
25+
OffsetY = 100,
26+
Shape = new DiagramHtml() { Type = Syncfusion.EJ2.Diagrams.Shapes.HTML , content = CreateNodeContent("node1") }
27+
});
28+
ViewBag.nodes = nodes;
29+
return View();
30+
};
31+
};
32+
};

‎ej2-asp-core-mvc/code-snippet/diagram/shapes/HTML-FnContent/tagHelper‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
<ejs-diagram id="container" width="100%" height="700px" nodes="ViewBag.nodes">
2+
</ejs-diagram>

‎ej2-asp-core-mvc/code-snippet/diagram/shapes/HTML-Template/HTML.cs‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@
88

99
namespace EJ2MVCSampleBrowser.Controllers.Diagram {
1010
public partial class DiagramController: Controller {
11-
// GET: Nodes
1211
public ActionResult Nodes() {
1312
List < DiagramNode > nodes = new List < DiagramNode > ();
1413
nodes.Add(new DiagramNode() {
@@ -17,11 +16,10 @@ public ActionResult Nodes() {
1716
Height = 100,
1817
OffsetX = 100,
1918
OffsetY = 100,
20-
nodeTemplate: "#nodetemplate",
21-
Shape = new { type = "HTML"},
19+
Shape = new DiagramHtml() { Type = Syncfusion.EJ2.Diagrams.Shapes.HTML }
2220
});
2321
ViewBag.nodes = nodes;
2422
return View();
25-
}
26-
}
27-
}
23+
};
24+
};
25+
};

‎ej2-asp-core-mvc/code-snippet/diagram/shapes/HTML-Template/tagHelper‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,5 @@
1-
<ejs-diagram id="container" width="100%" height="700px" nodes="ViewBag.nodes">
2-
</ejs-diagram>
1+
<ejs-diagram id="container" width="100%" height="700px" nodes="ViewBag.nodes" nodeTemplate="#nodeTemplate">
2+
</ejs-diagram>
3+
<script id="nodeTemplate" type="text/x-template">
4+
<div style='background:#6BA5D7;height:100%;width:100%;'><button type='button' style='width:100px'> Button</button></div>
5+
</script>

‎ej2-asp-core-mvc/code-snippet/diagram/shapes/HTML-TemplateFnNode/HTML.cs‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Linq;
4+
using System.Web;
5+
using System.Web.Mvc;
6+
using Syncfusion.EJ2.Diagrams;
7+
using System.Drawing;
8+
9+
namespace EJ2MVCSampleBrowser.Controllers.Diagram {
10+
public partial class DiagramController: Controller {
11+
public string CreateNodeContent(string nodeId)
12+
{
13+
return $"<div style='background:#6BA5D7;height:100%;width:100%;'><button type='button' style='width:100px'> Button</button></div>";
14+
};
15+
16+
public ActionResult Nodes()
17+
{
18+
List<DiagramNode> nodes = new List<DiagramNode>();
19+
nodes.Add(new DiagramNode()
20+
{
21+
Id = "node1",
22+
Width = 100,
23+
Height = 100,
24+
OffsetX = 100,
25+
OffsetY = 100,
26+
Shape = new DiagramHtml() { Type = Syncfusion.EJ2.Diagrams.Shapes.HTML }
27+
});
28+
ViewBag.nodes = nodes;
29+
return View();
30+
};
31+
};
32+
};

‎ej2-asp-core-mvc/code-snippet/diagram/shapes/HTML-TemplateFnNode/tagHelper‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<ejs-diagram id="container" width="100%" height="700px" nodes="ViewBag.nodes"
2+
nodeTemplate="ViewBag.CreateNodeContent('node1')">
3+
</ejs-diagram>

‎ej2-asp-core-mvc/code-snippet/diagram/shapes/HTML/HTML.cs‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@
88

99
namespace EJ2MVCSampleBrowser.Controllers.Diagram {
1010
public partial class DiagramController: Controller {
11-
// GET: Nodes
1211
public ActionResult Nodes() {
1312
List < DiagramNode > nodes = new List < DiagramNode > ();
1413
nodes.Add(new DiagramNode() {
@@ -17,12 +16,10 @@ public ActionResult Nodes() {
1716
Height = 100,
1817
OffsetX = 100,
1918
OffsetY = 100,
20-
Shape = new { type = "HTML", content= "<div style='background:#6BA5D7;height:100%;width:100%;'><button type='button' style='width:100px'> Button</button></div>" },
19+
Shape = new DiagramHtml() { Type = Syncfusion.EJ2.Diagrams.Shapes.HTML , content= "<div style='background:#6BA5D7;height:100%;width:100%;'><button type='button' style='width:100px'> Button</button></div>" }
2120
});
2221
ViewBag.nodes = nodes;
23-
24-
2522
return View();
26-
}
27-
}
28-
}
23+
};
24+
};
25+
};

‎ej2-asp-core-mvc/code-snippet/diagram/shapes/Native-TemplateFnNode/HTML.cs‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Linq;
4+
using System.Web;
5+
using System.Web.Mvc;
6+
using Syncfusion.EJ2.Diagrams;
7+
using System.Drawing;
8+
9+
namespace EJ2MVCSampleBrowser.Controllers.Diagram {
10+
public partial class DiagramController: Controller {
11+
public string CreateNodeContent(string nodeId)
12+
{
13+
return $"<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill='#2196F3' height='200px' width='200px' viewBox='0 0 365.892 365.892' xml:space='preserve'><g><circle cx='182.945' cy='286.681' r='41.494'/><path d='M182.946,176.029c-35.658,0-69.337,17.345-90.09,46.398c-5.921,8.288-4.001,19.806,4.286,25.726 c3.249,2.321,6.994,3.438,10.704,3.438c5.754,0,11.423-2.686,15.021-7.724c13.846-19.383,36.305-30.954,60.078-30.954 c23.775,0,46.233,11.571,60.077,30.953c5.919,8.286,17.437,10.209,25.726,4.288c8.288-5.92,10.208-17.438,4.288-25.726 C252.285,193.373,218.606,176.029,182.946,176.029z'/><path d='M182.946,106.873c-50.938,0-99.694,21.749-133.77,59.67c-6.807,7.576-6.185,19.236,1.392,26.044 c3.523,3.166,7.929,4.725,12.32,4.725c5.051-0.001,10.082-2.063,13.723-6.116c27.091-30.148,65.849-47.439,106.336-47.439 s79.246,17.291,106.338,47.438c6.808,7.576,18.468,8.198,26.043,1.391c7.576-6.808,8.198-18.468,1.391-26.043 C282.641,128.621,233.883,106.873,182.946,106.873z'/><path d='M360.611,112.293c-47.209-48.092-110.305-74.577-177.665-74.577c-67.357,0-130.453,26.485-177.664,74.579 c-7.135,7.269-7.027,18.944,0.241,26.079c3.59,3.524,8.255,5.282,12.918,5.281c4.776,0,9.551-1.845,13.161-5.522 c40.22-40.971,93.968-63.534,151.344-63.534c57.379,0,111.127,22.563,151.343,63.532c7.136,7.269,18.812,7.376,26.08,0.242 C367.637,131.238,367.745,119.562,360.611,112.293z'/></g></svg>";
14+
};
15+
16+
public ActionResult Nodes()
17+
{
18+
List<DiagramNode> nodes = new List<DiagramNode>();
19+
nodes.Add(new DiagramNode()
20+
{
21+
Id = "node1",
22+
Width = 100,
23+
Height = 100,
24+
OffsetX = 100,
25+
OffsetY = 100,
26+
Shape = new DiagramNative() { Type = Syncfusion.EJ2.Diagrams.Shapes.Native, Scale = Stretch.Stretch }
27+
});
28+
ViewBag.nodes = nodes;
29+
return View();
30+
};
31+
};
32+
};

‎ej2-asp-core-mvc/code-snippet/diagram/shapes/Native-TemplateFnNode/tagHelper‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<ejs-diagram id="container" width="100%" height="700px" nodes="ViewBag.nodes"
2+
nodeTemplate="ViewBag.CreateNodeContent('node1')">
3+
</ejs-diagram>

‎ej2-asp-core-mvc/code-snippet/diagram/shapes/native-FnContent/native.cs‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Linq;
4+
using System.Web;
5+
using System.Web.Mvc;
6+
using Syncfusion.EJ2.Diagrams;
7+
using System.Drawing;
8+
9+
namespace EJ2MVCSampleBrowser.Controllers.Diagram {
10+
public partial class DiagramController: Controller {
11+
private string CreateNodeContent(string nodeId)
12+
{
13+
return @"<svg width='200' height='200'>
14+
<path d='M 13.69 3.77 C 13.69 3.77 12.22 0.03 16.83 0 C 16.83 0 19.9 0.13 19 4.32 C 18.99 4.36 18.98 4.41 18.97 4.45 C 17.98 8.77 15.87 12.87 15.04 15.03 H 19.85 C 19.85 15.03 21.06 19.61 16.71 20 H 2.42 C 2.42 20 -1.39 18.58 0.55 14.68 L 4.24 3.84 H 0.63 C 0.63 3.84 -0.76 0.94 2.74 0.03 L 16.79 0 L 15.9 0.36 L 14.43 2.08 L 13.69 3.77 Z M 13.64 1.33 C 13.64 1.33 13.34 1.81 13.3 2.31 H 2.1 C 2.1 2.31 2.03 1.44 2.98 1.27 L 13.64 1.33 Z M 18.48 16.47 C 18.48 16.47 18.32 19.15 15.74 18.34 C 15.74 18.34 14.72 17.77 14.8 16.48 L 18.48 16.47 Z M 14.25 3.74 C 14.25 3.74 15.05 3.48 15.12 2.24 C 15.12 2.24 15.3 1.1 16.95 1.55 C 16.95 1.55 17.94 1.9 17.26 3.95 C 17.26 3.95 14.52 12.45 13.53 14.29 C 13.53 14.29 12.22 16.94 13.65 18.52 H 3.09 C 3.09 18.52 0.87 18.07 2.18 14.9 C 2.18 14.9 5.79 5.36 6.11 3.74 L 14.25 3.74 Z' visibility='visible' opacity='1' fill='skyblue' stroke='black' stroke-width='1' stroke-dasharray='none'/>
15+
</svg>";
16+
};
17+
18+
public ActionResult Nodes()
19+
{
20+
List<DiagramNode> nodes = new List<DiagramNode>();
21+
nodes.Add(new DiagramNode()
22+
{
23+
Id = "node1",
24+
Width = 100,
25+
Height = 100,
26+
OffsetX = 100,
27+
OffsetY = 100,
28+
Shape = new DiagramNative() { Type = Syncfusion.EJ2.Diagrams.Shapes.Native, Scale = Stretch.Stretch, content = CreateNodeContent("node1") }
29+
});
30+
ViewBag.nodes = nodes;
31+
return View();
32+
};
33+
};
34+
};

0 commit comments

Comments
 (0)