Skip to content

Commit a8884cd

Browse files
SyncfusionBuildSyncfusionBuild
committed
Integrated latest changes at 09-11-2025 10:30:15 AM
1 parent 7e44e22 commit a8884cd

File tree

59 files changed

+1984
-51
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

59 files changed

+1984
-51
lines changed

‎ej2-javascript/code-snippet/diagram/shapes-contentFnTemplateSVG/index.css‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
#container {
2+
visibility: hidden;
3+
}
4+
5+
#loader {
6+
color: #008cff;
7+
font-family: 'Helvetica Neue', 'calibiri';
8+
font-size: 14px;
9+
height: 40px;
10+
left: 45%;
11+
position: absolute;
12+
top: 45%;
13+
width: 30%;
14+
}
15+
16+
#element {
17+
display: block;
18+
}

‎ej2-javascript/code-snippet/diagram/shapes-contentFnTemplateSVG/index.js‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
var nodes = [
2+
{
3+
id: 'node1',
4+
offsetX: 250,
5+
offsetY: 250,
6+
width: 100,
7+
height: 100,
8+
shape: {
9+
type: 'Native',
10+
scale: 'Stretch',
11+
content: template.bind(this)
12+
}
13+
},
14+
{
15+
id: 'node2',
16+
offsetX: 450,
17+
offsetY: 250,
18+
width: 100,
19+
height: 100,
20+
shape: {
21+
type: 'Native',
22+
scale: 'Stretch',
23+
content: template.bind(this)
24+
}
25+
}
26+
];
27+
28+
// Template for the SVG Shape.
29+
function template(obj) {
30+
if (obj.id == 'node1') {
31+
return `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
32+
<rect width="24" height="24" fill="#007BFF" />
33+
<path d="M6.5 7.5L17.5 16.5L12 21V3L17.5 7.5L6.5 16.5" fill="none" stroke="white" stroke-width="2" />
34+
</svg>`;
35+
};
36+
return `<svg width="200" height="200">
37+
<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"></path>
38+
</svg>`;
39+
};
40+
41+
// Initialize Diagram component.
42+
var diagram = new ej.diagrams.Diagram({
43+
width: '100%',
44+
height: '600px',
45+
nodes: nodes
46+
});
47+
48+
// Render initialized diagram.
49+
diagram.appendTo('#element');

‎ej2-javascript/code-snippet/diagram/shapes-contentFnTemplateSVG/index.ts‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { Diagram, NodeModel } from '@syncfusion/ej2-diagrams';
2+
3+
// A node is created and stored in nodes array.
4+
let nodes: NodeModel[] = [
5+
{
6+
id: 'node1',
7+
offsetX: 250,
8+
offsetY: 250,
9+
width: 100,
10+
height: 100,
11+
shape: {
12+
type: 'Native',
13+
scale: 'Stretch',
14+
content: template.bind(this)
15+
}
16+
},
17+
{
18+
id: 'node2',
19+
offsetX: 450,
20+
offsetY: 250,
21+
width: 100,
22+
height: 100,
23+
shape: {
24+
type: 'Native',
25+
scale: 'Stretch',
26+
content: template.bind(this)
27+
}
28+
}
29+
];
30+
31+
// Template for the SVG Shape.
32+
function template(obj: any) {
33+
if (obj.id == 'node1') {
34+
return `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
35+
<rect width="24" height="24" fill="#007BFF" />
36+
<path d="M6.5 7.5L17.5 16.5L12 21V3L17.5 7.5L6.5 16.5" fill="none" stroke="white" stroke-width="2" />
37+
</svg>`;
38+
};
39+
return `<svg width="200" height="200">
40+
<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"></path>
41+
</svg>`;
42+
};
43+
44+
// Initialize Diagram component.
45+
let diagram: Diagram = new Diagram({
46+
width: '100%',
47+
height: '600px',
48+
nodes: nodes
49+
});
50+
51+
// Render initialized diagram.
52+
diagram.appendTo('#element');

‎ej2-javascript/code-snippet/diagram/shapes-contentFnTemplateSVG/js/index.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<title>EJ2 Diagram</title>
6+
<meta charset="utf-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<meta name="description" content="Typescript UI Controls">
9+
<meta name="author" content="Syncfusion">
10+
<link href="index.css" rel="stylesheet">
11+
<link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-base/styles/material.css" rel="stylesheet">
12+
<link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-buttons/styles/material.css" rel="stylesheet">
13+
<link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-popups/styles/material.css" rel="stylesheet">
14+
<link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-splitbuttons/styles/material.css" rel="stylesheet">
15+
<link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-diagrams/styles/material.css" rel="stylesheet">
16+
<link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-navigations/styles/fabric.css" rel="stylesheet">
17+
<script src="https://cdn.syncfusion.com/ej2/31.1.17/dist/ej2.min.js" type="text/javascript"></script>
18+
</head>
19+
20+
<body>
21+
<div id="container">
22+
<div id="element"></div>
23+
</div>
24+
<script>
25+
var ele = document.getElementById('container');
26+
if (ele) {
27+
ele.style.visibility = "visible";
28+
}
29+
</script>
30+
<script src="index.js" type="text/javascript"></script>
31+
</body>
32+
33+
</html>

‎ej2-javascript/code-snippet/diagram/shapes-contentFnTemplateSVG/systemjs.config.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
System.config({
2+
transpiler: "typescript",
3+
typescriptOptions: {
4+
compilerOptions: {
5+
target: "umd",
6+
module: "commonjs",
7+
moduleResolution: "node",
8+
emitDecoratorMetadata: true,
9+
experimentalDecorators: true
10+
}
11+
},
12+
paths: {
13+
"syncfusion:": "https://cdn.syncfusion.com/ej2/31.1.17/"
14+
},
15+
map: {
16+
main: "index.ts",
17+
typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
18+
"@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
19+
"@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
20+
"@syncfusion/ej2-diagrams": "syncfusion:ej2-diagrams/dist/ej2-diagrams.umd.min.js",
21+
"@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
22+
"@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
23+
"@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
24+
"@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
25+
"@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
26+
"@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
27+
"@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
28+
"@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
29+
"@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
30+
"@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
31+
"@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js"
32+
}
33+
});
34+
35+
System.import('index.ts').catch(console.error.bind(console)).then(function () {
36+
document.getElementById('loader').style.display = "none";
37+
document.getElementById('container').style.visibility = "visible";
38+
});

‎ej2-javascript/code-snippet/diagram/shapes-contentFnTemplateSVG/ts/index.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<title>EJ2 Diagram</title>
6+
<meta charset="utf-8" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<meta name="description" content="Typescript UI Controls" />
9+
<meta name="author" content="Syncfusion" />
10+
<link href="index.css" rel="stylesheet" />
11+
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
12+
<link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-base/styles/material.css" rel="stylesheet" />
13+
<link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-buttons/styles/material.css" rel="stylesheet" />
14+
<link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-popups/styles/material.css" rel="stylesheet" />
15+
<link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
16+
<link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-diagrams/styles/material.css" rel="stylesheet" />
17+
<link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-navigations/styles/fabric.css" rel="stylesheet" />
18+
<script src="systemjs.config.js"></script>
19+
</head>
20+
21+
<body>
22+
<div id='loader'>Loading....</div>
23+
<div id='container'>
24+
<div id='element'></div>
25+
</div>
26+
</body>
27+
28+
</html>

‎ej2-javascript/code-snippet/diagram/shapes-cs12/index.css‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
#container {
2+
visibility: hidden;
3+
}
4+
5+
#loader {
6+
color: #008cff;
7+
font-family: 'Helvetica Neue', 'calibiri';
8+
font-size: 14px;
9+
height: 40px;
10+
left: 45%;
11+
position: absolute;
12+
top: 45%;
13+
width: 30%;
14+
}
15+
16+
#element {
17+
display: block;
18+
}

‎ej2-javascript/code-snippet/diagram/shapes-cs12/index.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
var nodes = [
2+
{
3+
id: 'node1',
4+
offsetX: 250,
5+
offsetY: 250,
6+
width: 100,
7+
height: 100,
8+
shape: {
9+
type: 'Native',
10+
scale: 'Stretch'
11+
}
12+
},
13+
{
14+
id: 'node2',
15+
offsetX: 450,
16+
offsetY: 250,
17+
width: 70,
18+
height: 55,
19+
shape: {
20+
type: 'Native',
21+
scale: 'Stretch'
22+
}
23+
}
24+
];
25+
26+
// Initialize Diagram component.
27+
var diagram = new ej.diagrams.Diagram({
28+
width: '100%',
29+
height: '600px',
30+
nodes: nodes,
31+
nodeTemplate: '#nodeTemplate'
32+
});
33+
34+
// Render initialized diagram.
35+
diagram.appendTo('#element');

‎ej2-javascript/code-snippet/diagram/shapes-cs12/index.ts‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { Diagram, NodeModel } from '@syncfusion/ej2-diagrams';
2+
3+
// A node is created and stored in nodes array.
4+
let nodes: NodeModel[] = [
5+
{
6+
id: 'node1',
7+
offsetX: 250,
8+
offsetY: 250,
9+
width: 100,
10+
height: 100,
11+
shape: {
12+
type: 'Native',
13+
scale: 'Stretch'
14+
},
15+
},
16+
{
17+
id: 'node2',
18+
offsetX: 450,
19+
offsetY: 250,
20+
width: 70,
21+
height: 55,
22+
shape: {
23+
type: 'Native',
24+
scale: 'Stretch'
25+
}
26+
},
27+
];
28+
29+
// Initialize Diagram component.
30+
let diagram: Diagram = new Diagram({
31+
width: '100%',
32+
height: '600px',
33+
nodes: nodes,
34+
nodeTemplate: '#nodeTemplate'
35+
});
36+
37+
// Render initialized diagram.
38+
diagram.appendTo('#element');

0 commit comments

Comments
 (0)