@zenode/designer 3.5.7 → 3.5.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/assets/demo.svg +108 -0
- package/package.json +3 -2
package/README.md
CHANGED
package/assets/demo.svg
ADDED
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 500" width="100%" height="auto" style="background-color: #FAFAFA; border-radius: 8px;">
|
|
2
|
+
<defs>
|
|
3
|
+
<!-- Background Grid -->
|
|
4
|
+
<pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
|
|
5
|
+
<path d="M 20 0 L 0 0 0 20" fill="none" stroke="#E5E7EB" stroke-width="0.5" />
|
|
6
|
+
</pattern>
|
|
7
|
+
<!-- Markers -->
|
|
8
|
+
<marker id="marker-arrow-000000" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
|
|
9
|
+
<path d="M 0 0 L 10 5 L 0 10 z" fill="#000000" />
|
|
10
|
+
</marker>
|
|
11
|
+
<marker id="marker-arrow-666666" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
|
|
12
|
+
<path d="M 0 0 L 10 5 L 0 10 z" fill="#666666" />
|
|
13
|
+
</marker>
|
|
14
|
+
<marker id="marker-arrow-333333" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
|
|
15
|
+
<path d="M 0 0 L 10 5 L 0 10 z" fill="#333333" />
|
|
16
|
+
</marker>
|
|
17
|
+
<marker id="marker-arrow-444444" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
|
|
18
|
+
<path d="M 0 0 L 10 5 L 0 10 z" fill="#444444" />
|
|
19
|
+
</marker>
|
|
20
|
+
</defs>
|
|
21
|
+
|
|
22
|
+
<rect width="100%" height="100%" fill="url(#grid)" />
|
|
23
|
+
<!-- Animation uses SMIL to bypass strict NPM CSP -->
|
|
24
|
+
|
|
25
|
+
<g transform="translate(0,-60)">
|
|
26
|
+
<!-- Connections -->
|
|
27
|
+
<g class="connections">
|
|
28
|
+
<g>
|
|
29
|
+
<path d="M 130 200 L 240 200" fill="none" stroke="#000000" stroke-width="2" stroke-dasharray="8,4" marker-end="url(#marker-arrow-000000)">
|
|
30
|
+
<animate attributeName="stroke-dashoffset" from="0" to="-24" dur="1s" repeatCount="indefinite" />
|
|
31
|
+
</path>
|
|
32
|
+
</g>
|
|
33
|
+
<g>
|
|
34
|
+
<path d="M 340 240 C 340 304 276 400 340 400" fill="none" stroke="#666666" stroke-width="2" stroke-dasharray="8,4" marker-end="url(#marker-arrow-666666)">
|
|
35
|
+
<animate attributeName="stroke-dashoffset" from="0" to="-24" dur="1s" repeatCount="indefinite" />
|
|
36
|
+
</path>
|
|
37
|
+
</g>
|
|
38
|
+
<g>
|
|
39
|
+
<path d="M 440 360 C 490 360 490 280 540 280" fill="none" stroke="#333333" stroke-width="2" stroke-dasharray="4,2" marker-end="url(#marker-arrow-333333)">
|
|
40
|
+
<animate attributeName="stroke-dashoffset" from="0" to="-24" dur="1s" repeatCount="indefinite" />
|
|
41
|
+
</path>
|
|
42
|
+
</g>
|
|
43
|
+
<g>
|
|
44
|
+
<path d="M 580 240 L 580 220 L 580 180 L 640 180 L 660 180" fill="none" stroke="#444444" stroke-width="2" stroke-dasharray="8,4" marker-end="url(#marker-arrow-444444)">
|
|
45
|
+
<animate attributeName="stroke-dashoffset" from="0" to="-24" dur="1s" repeatCount="indefinite" />
|
|
46
|
+
</path>
|
|
47
|
+
</g>
|
|
48
|
+
<g>
|
|
49
|
+
<path d="M 780 180 C 823.7 180 874.2 289.3 874.2 289.3" fill="none" stroke="#666666" stroke-width="2" stroke-dasharray="8,4" marker-end="url(#marker-arrow-666666)">
|
|
50
|
+
<animate attributeName="stroke-dashoffset" from="0" to="-24" dur="1s" repeatCount="indefinite" />
|
|
51
|
+
</path>
|
|
52
|
+
</g>
|
|
53
|
+
</g>
|
|
54
|
+
|
|
55
|
+
<!-- Nodes -->
|
|
56
|
+
<g class="placed-nodes">
|
|
57
|
+
<!-- Start Node -->
|
|
58
|
+
<g transform="translate(100,200)">
|
|
59
|
+
<circle cx="0" cy="0" r="30" fill="#3B82F6" fill-opacity="0.35" stroke="#1D4ED8" stroke-width="1.5"></circle>
|
|
60
|
+
<g transform="translate(-10, -10)" stroke="#000000" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
61
|
+
<circle cx="10" cy="10" r="10"></circle>
|
|
62
|
+
<path d="M7 7 L12 10 L7 13 Z" fill="currentColor"></path>
|
|
63
|
+
</g>
|
|
64
|
+
</g>
|
|
65
|
+
|
|
66
|
+
<!-- Process Node 1 -->
|
|
67
|
+
<g transform="translate(340,200)">
|
|
68
|
+
<path d="M -92,-40 H 92 A 8,8 0 0 1 100,-32 V 32 A 8,8 0 0 1 92,40 H -92 A 8,8 0 0 1 -100,32 V -32 A 8,8 0 0 1 -92,-40 Z" fill="#F8FAFC" fill-opacity="0.9" stroke="#CBD5E1" stroke-width="1"></path>
|
|
69
|
+
<text y="4" class="node-text" fill="rgb(40, 61, 226)">process 1</text>
|
|
70
|
+
</g>
|
|
71
|
+
|
|
72
|
+
<!-- Process Node 2 -->
|
|
73
|
+
<g transform="translate(440,400)">
|
|
74
|
+
<path d="M -92,-40 H 92 A 8,8 0 0 1 100,-32 V 32 A 8,8 0 0 1 92,40 H -92 A 8,8 0 0 1 -100,32 V -32 A 8,8 0 0 1 -92,-40 Z" fill="#F8FAFC" fill-opacity="0.9" stroke="#CBD5E1" stroke-width="1"></path>
|
|
75
|
+
<text y="4" class="node-text" fill="rgb(255, 61, 61)">process 2</text>
|
|
76
|
+
</g>
|
|
77
|
+
|
|
78
|
+
<!-- Timer/Decision Node -->
|
|
79
|
+
<g transform="translate(580,280)">
|
|
80
|
+
<path d="M 0 -40 L 40 0 L 0 40 L -40 0 Z" fill="#EC4899" fill-opacity="0.35" stroke="#BE185D" stroke-width="1.5"></path>
|
|
81
|
+
<g transform="translate(-12, -12)" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
82
|
+
<circle cx="12" cy="13" r="8"></circle>
|
|
83
|
+
<path d="M12 10v6"></path>
|
|
84
|
+
<path d="M9 13h6"></path>
|
|
85
|
+
</g>
|
|
86
|
+
</g>
|
|
87
|
+
|
|
88
|
+
<!-- Complete Node -->
|
|
89
|
+
<g transform="translate(720,180)">
|
|
90
|
+
<path d="M -55,-40 H 55 A 5,5 0 0 1 60,-35 V 35 A 5,5 0 0 1 55,40 H -55 A 5,5 0 0 1 -60,35 V -35 A 5,5 0 0 1 -55,-40 Z" fill="#8B5CF6" fill-opacity="0.35" stroke="#6D28D9" stroke-width="1.5"></path>
|
|
91
|
+
<g transform="translate(-10, -20)" stroke="#22a720" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
92
|
+
<path d="M18 6 7 17l-5-5"></path>
|
|
93
|
+
<path d="m22 10-7.5 7.5L13 16"></path>
|
|
94
|
+
</g>
|
|
95
|
+
<text y="14" class="node-text" fill="rgb(34, 167, 32)">complete</text>
|
|
96
|
+
</g>
|
|
97
|
+
|
|
98
|
+
<!-- End/Stop Node -->
|
|
99
|
+
<g transform="translate(900,320)">
|
|
100
|
+
<path d="M 0 -40 L 25 -30 L 39 -7 L 34 20 L 13 37 L -13 37 L -34 20 L -39 -7 L -25 -30 Z" fill="#FB923C" fill-opacity="0.35" stroke="#C2410C" stroke-width="1.5"></path>
|
|
101
|
+
<g transform="translate(-10, -10)" stroke="#ff0000" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
102
|
+
<path d="M8 7v6"></path>
|
|
103
|
+
<path d="M12 7v6"></path>
|
|
104
|
+
</g>
|
|
105
|
+
</g>
|
|
106
|
+
</g>
|
|
107
|
+
</g>
|
|
108
|
+
</svg>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zenode/designer",
|
|
3
|
-
"version": "3.5.
|
|
3
|
+
"version": "3.5.8",
|
|
4
4
|
"description": "A high-performance, pro-grade diagramming engine for web-based design tools.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"files": [
|
|
@@ -8,7 +8,8 @@
|
|
|
8
8
|
"README.md",
|
|
9
9
|
"APIs.md",
|
|
10
10
|
"LICENSE",
|
|
11
|
-
"zenode.css"
|
|
11
|
+
"zenode.css",
|
|
12
|
+
"assets"
|
|
12
13
|
],
|
|
13
14
|
"main": "./dist/index.cjs",
|
|
14
15
|
"module": "./dist/index.js",
|