Skip to content

Commit a92f6b9

Browse files
b4rtazb4rtaz
authored
Merge pull request #13 from nocode-js/develop
0.4.0.
2 parents 4795dd6 + 28f6e7c commit a92f6b9

Some content is hidden

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

66 files changed

+1229
-425
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,4 @@ coverage/
55
.vscode/
66
lib/
77
dist/
8+
yarn-*.log

‎CHANGELOG.md

+9
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
1+
## 0.4.0
2+
3+
This version brings rendering speed improvements. Check the `stress-test.html` example. This version contains many internal changes to support the `folder` component in the pro version.
4+
5+
#### Breaking Changes
6+
7+
* Replaced all icons to material icons.
8+
* Normalized step CSS classes. All components have the `sqd-step-<componentType>-` prefix from now.
9+
110
## 0.3.0
211

312
This version introduces new build formats (ESM, UMD) of the package.

‎README.md

+6-4
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,13 @@ Features:
2525
* [⏩ Live Testing](https://nocode-js.github.io/sequential-workflow-designer/examples/live-testing.html)
2626
* [🔴 Particles](https://nocode-js.github.io/sequential-workflow-designer/examples/particles.html)
2727
* [🤖 Code Generator](https://nocode-js.github.io/sequential-workflow-designer/examples/code-generator.html)
28+
* [🔩 Stress Test](https://nocode-js.github.io/sequential-workflow-designer/examples/stress-test.html)
2829

2930
Pro:
3031

3132
* 🤩 [Pro Components](https://nocode-js.github.io/sequential-workflow-designer-pro-demo/examples/webpack/public/pro-components.html)
3233
* 👈 [Goto](https://nocode-js.github.io/sequential-workflow-designer-pro-demo/examples/webpack/public/goto.html)
34+
* 📁 [Folders](https://nocode-js.github.io/sequential-workflow-designer-pro-demo/examples/webpack/public/folders.html)
3335

3436
## 🚀 Installation
3537

@@ -69,10 +71,10 @@ Add the below code to your head section in HTML document.
6971
```html
7072
<head>
7173
...
72-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.3.0/css/designer.css" rel="stylesheet">
73-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.3.0/css/designer-light.css" rel="stylesheet">
74-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.3.0/css/designer-dark.css" rel="stylesheet">
75-
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.3.0/dist/index.umd.js"></script>
74+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.4.0/css/designer.css" rel="stylesheet">
75+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.4.0/css/designer-light.css" rel="stylesheet">
76+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.4.0/css/designer-dark.css" rel="stylesheet">
77+
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.4.0/dist/index.umd.js"></script>
7678
```
7779

7880
Call the designer by:

‎designer/css/designer-dark.css

+42-12
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,9 @@
3333
.sqd-theme-dark .sqd-toolbox-item-icon.sqd-no-icon {
3434
background: #C6C6C6;
3535
}
36+
.sqd-theme-dark .sqd-control-bar-button.sqd-delete .sqd-icon-path {
37+
fill: #E01A24;
38+
}
3639

3740
/* dark > .sqd-control-bar */
3841

@@ -46,6 +49,25 @@
4649
background: #D3D3D3;
4750
}
4851

52+
/* dark > .sqd-path-bar */
53+
54+
.sqd-theme-dark .sqd-path-bar {
55+
background: #3F3F3F;
56+
color: #FFF;
57+
}
58+
.sqd-theme-dark .sqd-path-bar-item:hover {
59+
border-color: #D3D3D3;
60+
}
61+
.sqd-theme-dark .sqd-path-bar-reset-button {
62+
border: 1px solid transparent;
63+
}
64+
.sqd-theme-dark .sqd-path-bar-reset-button .sqd-icon-path {
65+
fill: #FFF;
66+
}
67+
.sqd-theme-dark .sqd-path-bar-reset-button:hover {
68+
border-color: #D3D3D3;
69+
}
70+
4971
/* dark > .sqd-workspace */
5072

5173
.sqd-theme-dark .sqd-grid-path {
@@ -64,20 +86,20 @@
6486
background: #6F6F6F;
6587
}
6688

67-
/* dark > .sqd-task */
89+
/* dark > .sqd-step-task */
6890

69-
.sqd-theme-dark .sqd-task-rect {
91+
.sqd-theme-dark .sqd-step-task-rect {
7092
fill: #C6C6C6;
7193
stroke: none;
7294
filter: drop-shadow(0 1.5px 1.5px rgba(0, 0, 0, .15));
7395
}
74-
.sqd-theme-dark .sqd-task-rect.sqd-selected {
96+
.sqd-theme-dark .sqd-step-task-rect.sqd-selected {
7597
stroke: #FFF;
7698
}
77-
.sqd-theme-dark .sqd-task-text {
99+
.sqd-theme-dark .sqd-step-task-text {
78100
fill: #000;
79101
}
80-
.sqd-theme-dark .sqd-task-empty-icon {
102+
.sqd-theme-dark .sqd-step-task-empty-icon {
81103
fill: #C6C6C6;
82104
}
83105

@@ -110,24 +132,32 @@
110132
fill: #FFF;
111133
}
112134

113-
/* dark > .sqd-start-stop */
135+
/* dark > .sqd-step-start-stop */
114136

115-
.sqd-theme-dark .sqd-start-stop {
137+
.sqd-theme-dark .sqd-step-start-stop-circle {
116138
fill: #2C18DF;
117139
}
118-
.sqd-theme-dark .sqd-start-stop-icon {
140+
.sqd-theme-dark .sqd-step-start-stop-icon {
119141
fill: #FFF;
120142
}
121143

122144
/* dark > .sqd-placeholder */
123145

124-
.sqd-theme-dark .sqd-placeholder {
125-
fill: none;
146+
.sqd-theme-dark .sqd-placeholder .sqd-placeholder-rect {
147+
fill: #0E0E0E;
126148
stroke: #6A6A6A;
127149
}
128-
.sqd-theme-dark .sqd-placeholder.sqd-hover {
129-
fill: #0E0E0E;
150+
.sqd-theme-dark .sqd-placeholder-icon-path {
151+
fill: #FFF;
130152
}
153+
.sqd-theme-dark .sqd-placeholder.sqd-hover .sqd-placeholder-rect {
154+
fill: #ED4800;
155+
}
156+
.sqd-theme-dark .sqd-placeholder.sqd-hover .sqd-placeholder-icon-path {
157+
fill: #FFF;
158+
}
159+
160+
/* dark > .sqd-validation-error */
131161

132162
.sqd-theme-dark .sqd-validation-error {
133163
fill: #FFA200;

‎designer/css/designer-light.css

+40-10
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,28 @@
4343
.sqd-theme-light .sqd-control-bar-button:hover {
4444
border-color: #939393;
4545
}
46+
.sqd-theme-light .sqd-control-bar-button.sqd-delete .sqd-icon-path {
47+
fill: #E01A24;
48+
}
49+
50+
/* light > .sqd-path-bar */
51+
52+
.sqd-theme-light .sqd-path-bar {
53+
background: #FFF;
54+
box-shadow: 0 0 8px rgba(0, 0, 0, .15), 0 2px 4px rgba(0, 0, 0, .15);
55+
}
56+
.sqd-theme-light .sqd-path-bar-item:hover {
57+
border-color: #939393;
58+
}
59+
.sqd-theme-light .sqd-path-bar-separator {
60+
color: #D0D0D0;
61+
}
62+
.sqd-theme-light .sqd-path-bar-reset-button {
63+
border: 1px solid transparent;
64+
}
65+
.sqd-theme-light .sqd-path-bar-reset-button:hover {
66+
border-color: #939393;
67+
}
4668

4769
/* light > .sqd-workspace */
4870

@@ -64,20 +86,20 @@
6486
box-shadow: 0 0 8px rgba(0, 0, 0, .15);
6587
}
6688

67-
/* light > .sqd-task */
89+
/* light > .sqd-step-task */
6890

69-
.sqd-theme-light .sqd-task-rect {
91+
.sqd-theme-light .sqd-step-task-rect {
7092
fill: #FFF;
7193
stroke: #C3C3C3;
7294
filter: drop-shadow(0 1.5px 1.5px rgba(0, 0, 0, .15));
7395
}
74-
.sqd-theme-light .sqd-task-rect.sqd-selected {
96+
.sqd-theme-light .sqd-step-task-rect.sqd-selected {
7597
stroke: #ED4800;
7698
}
77-
.sqd-theme-light .sqd-task-text {
99+
.sqd-theme-light .sqd-step-task-text {
78100
fill: #000;
79101
}
80-
.sqd-theme-light .sqd-task-empty-icon {
102+
.sqd-theme-light .sqd-step-task-empty-icon {
81103
fill: #C6C6C6;
82104
}
83105

@@ -110,24 +132,32 @@
110132
fill: #FFF;
111133
}
112134

113-
/* light > .sqd-start-stop */
135+
/* light > .sqd-step-start-stop */
114136

115-
.sqd-theme-light .sqd-start-stop {
137+
.sqd-theme-light .sqd-step-start-stop-circle {
116138
fill: #2C18DF;
117139
}
118-
.sqd-theme-light .sqd-start-stop-icon {
140+
.sqd-theme-light .sqd-step-start-stop-icon {
119141
fill: #FFF;
120142
}
121143

122144
/* light > .sqd-placeholder */
123145

124-
.sqd-theme-light .sqd-placeholder {
146+
.sqd-theme-light .sqd-placeholder .sqd-placeholder-rect {
125147
fill: #D8D8D8;
126148
stroke: #6A6A6A;
127149
}
128-
.sqd-theme-light .sqd-placeholder.sqd-hover {
150+
.sqd-theme-light .sqd-placeholder-icon-path {
151+
fill: #2B2B2B;
152+
}
153+
.sqd-theme-light .sqd-placeholder.sqd-hover .sqd-placeholder-rect {
129154
fill: #ED4800;
130155
}
156+
.sqd-theme-light .sqd-placeholder.sqd-hover .sqd-placeholder-icon-path {
157+
fill: #FFF;
158+
}
159+
160+
/* light > .sqd-validation-error */
131161

132162
.sqd-theme-light .sqd-validation-error {
133163
fill: #FFA200;

‎designer/css/designer.css

+45-5
Original file line numberDiff line numberDiff line change
@@ -145,6 +145,46 @@
145145
opacity: .2;
146146
}
147147

148+
/* .sqd-path-bar */
149+
150+
.sqd-path-bar {
151+
position: absolute;
152+
bottom: 68px;
153+
padding: 4px;
154+
left: 10px;
155+
z-index: 20;
156+
border-radius: 10px;
157+
}
158+
.sqd-path-bar-reset-button {
159+
display: inline-block;
160+
vertical-align: middle;
161+
width: 26px;
162+
height: 26px;
163+
border-radius: 5px;
164+
cursor: pointer;
165+
}
166+
.sqd-path-bar-reset-button-icon {
167+
width: 20px;
168+
height: 20px;
169+
margin: 3px 0 0 3px;
170+
}
171+
.sqd-path-bar-items {
172+
margin-left: 2px;
173+
display: inline-block;
174+
vertical-align: middle;
175+
}
176+
.sqd-path-bar-item {
177+
display: inline-block;
178+
padding: 6px;
179+
border-radius: 5px;
180+
cursor: pointer;
181+
border: 1px solid transparent;
182+
}
183+
.sqd-path-bar-separator {
184+
display: inline-block;
185+
padding: 0 2px;
186+
}
187+
148188
/* .sqd-workspace */
149189

150190
.sqd-workspace {
@@ -216,15 +256,15 @@
216256
right: 0;
217257
}
218258

219-
/* .sqd-task */
259+
/* .sqd-step-task */
220260

221-
.sqd-task-rect {
261+
.sqd-step-task-rect {
222262
stroke-width: 1;
223263
}
224-
.sqd-task-rect.sqd-selected {
264+
.sqd-step-task-rect.sqd-selected {
225265
stroke-width: 2;
226266
}
227-
.sqd-task-text {
267+
.sqd-step-task-text {
228268
text-anchor: left;
229269
dominant-baseline: central;
230270
}
@@ -252,7 +292,7 @@
252292

253293
/* .sqd-placeholder */
254294

255-
.sqd-placeholder {
295+
.sqd-placeholder .sqd-placeholder-rect {
256296
stroke-width: 1;
257297
stroke-dasharray: 3;
258298
}

‎designer/package.json

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "sequential-workflow-designer",
3-
"version": "0.3.0",
3+
"version": "0.4.0",
44
"main": "./lib/index.mjs",
55
"types": "./lib/index.d.ts",
66
"repository": {
@@ -49,6 +49,7 @@
4949
"designer",
5050
"builder",
5151
"nocode",
52-
"lowcode"
52+
"lowcode",
53+
"flow"
5354
]
5455
}

0 commit comments

Comments
 (0)