sequential-workflow-designer 0.29.1 → 0.29.2
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 +4 -4
- package/css/designer-soft.css +205 -0
- package/dist/index.umd.js +1 -1
- package/lib/cjs/index.cjs +1 -1
- package/lib/esm/index.js +1 -1
- package/package.json +7 -1
- package/sass/designer-soft.scss +47 -0
package/README.md
CHANGED
|
@@ -104,10 +104,10 @@ Add the below code to your head section in HTML document.
|
|
|
104
104
|
```html
|
|
105
105
|
<head>
|
|
106
106
|
...
|
|
107
|
-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.29.
|
|
108
|
-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.29.
|
|
109
|
-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.29.
|
|
110
|
-
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.29.
|
|
107
|
+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.29.2/css/designer.css" rel="stylesheet">
|
|
108
|
+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.29.2/css/designer-light.css" rel="stylesheet">
|
|
109
|
+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.29.2/css/designer-dark.css" rel="stylesheet">
|
|
110
|
+
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.29.2/dist/index.umd.js"></script>
|
|
111
111
|
```
|
|
112
112
|
|
|
113
113
|
Call the designer by:
|
|
@@ -0,0 +1,205 @@
|
|
|
1
|
+
/* internal */
|
|
2
|
+
.sqd-theme-soft .sqd-toolbox {
|
|
3
|
+
background: #fff;
|
|
4
|
+
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
|
|
5
|
+
border: none;
|
|
6
|
+
border-radius: 10px;
|
|
7
|
+
}
|
|
8
|
+
.sqd-theme-soft .sqd-toolbox-header-title {
|
|
9
|
+
color: #000;
|
|
10
|
+
}
|
|
11
|
+
.sqd-theme-soft .sqd-toolbox-filter-input {
|
|
12
|
+
background: #fff;
|
|
13
|
+
color: #000;
|
|
14
|
+
border: 1px solid #dbdbdb;
|
|
15
|
+
border-radius: 10px;
|
|
16
|
+
}
|
|
17
|
+
.sqd-theme-soft .sqd-toolbox-filter-input:focus {
|
|
18
|
+
border-color: #c3c3c3;
|
|
19
|
+
}
|
|
20
|
+
.sqd-theme-soft .sqd-toolbox-group-title {
|
|
21
|
+
color: #000;
|
|
22
|
+
background: #efefef;
|
|
23
|
+
border-radius: 10px;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.sqd-theme-soft .sqd-toolbox-item {
|
|
27
|
+
color: #000;
|
|
28
|
+
border: 1px solid #dbdbdb;
|
|
29
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
30
|
+
background: #fff;
|
|
31
|
+
border-radius: 5px;
|
|
32
|
+
}
|
|
33
|
+
.sqd-theme-soft .sqd-toolbox-item:hover {
|
|
34
|
+
border-color: #cfcfcf;
|
|
35
|
+
background: #fff;
|
|
36
|
+
}
|
|
37
|
+
.sqd-theme-soft .sqd-toolbox-item .sqd-toolbox-item-icon.sqd-no-icon {
|
|
38
|
+
background: #e9e9e9;
|
|
39
|
+
border-radius: 4px;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.sqd-theme-soft .sqd-control-bar {
|
|
43
|
+
background: #fff;
|
|
44
|
+
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
|
|
45
|
+
border: none;
|
|
46
|
+
border-radius: 10px;
|
|
47
|
+
}
|
|
48
|
+
.sqd-theme-soft .sqd-control-bar-button {
|
|
49
|
+
border: 1px solid #c3c3c3;
|
|
50
|
+
background: #fff;
|
|
51
|
+
border-radius: 5px;
|
|
52
|
+
}
|
|
53
|
+
.sqd-theme-soft .sqd-control-bar-button:hover {
|
|
54
|
+
border-color: #939393;
|
|
55
|
+
background: #fff;
|
|
56
|
+
}
|
|
57
|
+
.sqd-theme-soft .sqd-control-bar-button .sqd-icon-path {
|
|
58
|
+
fill: #000;
|
|
59
|
+
}
|
|
60
|
+
.sqd-theme-soft .sqd-control-bar-button.sqd-delete .sqd-icon-path {
|
|
61
|
+
fill: #e01a24;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.sqd-theme-soft .sqd-smart-editor {
|
|
65
|
+
background: #fff;
|
|
66
|
+
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
|
|
67
|
+
}
|
|
68
|
+
.sqd-theme-soft .sqd-smart-editor-toggle {
|
|
69
|
+
background: #fff;
|
|
70
|
+
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.sqd-theme-soft.sqd-context-menu {
|
|
74
|
+
background: #fff;
|
|
75
|
+
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
|
|
76
|
+
border: none;
|
|
77
|
+
border-radius: 4px;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.sqd-theme-soft .sqd-context-menu-group {
|
|
81
|
+
color: #888;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.sqd-theme-soft .sqd-context-menu-item {
|
|
85
|
+
color: #000;
|
|
86
|
+
border-radius: 4px;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.sqd-theme-soft .sqd-context-menu-item:hover {
|
|
90
|
+
background: #eee;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.sqd-theme-soft.sqd-designer {
|
|
94
|
+
background: #f9f9f9;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.sqd-theme-soft .sqd-line-grid-path {
|
|
98
|
+
stroke: #ebebeb;
|
|
99
|
+
stroke-width: 1;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.sqd-theme-soft .sqd-join {
|
|
103
|
+
stroke-width: 2;
|
|
104
|
+
stroke: #2a2a2a;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.sqd-theme-soft .sqd-region {
|
|
108
|
+
stroke: #e9e9e9;
|
|
109
|
+
stroke-width: 2;
|
|
110
|
+
stroke-dasharray: 3;
|
|
111
|
+
}
|
|
112
|
+
.sqd-theme-soft .sqd-region.sqd-selected {
|
|
113
|
+
stroke: #ed4800;
|
|
114
|
+
stroke-width: 2;
|
|
115
|
+
stroke-dasharray: 0;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.sqd-theme-soft .sqd-placeholder .sqd-placeholder-rect {
|
|
119
|
+
fill: #e9e9e9;
|
|
120
|
+
stroke: #707070;
|
|
121
|
+
stroke-width: 1;
|
|
122
|
+
stroke-dasharray: 3;
|
|
123
|
+
}
|
|
124
|
+
.sqd-theme-soft .sqd-placeholder.sqd-hover .sqd-placeholder-rect {
|
|
125
|
+
fill: #ed4800;
|
|
126
|
+
}
|
|
127
|
+
.sqd-theme-soft .sqd-placeholder-icon-path {
|
|
128
|
+
fill: #2b2b2b;
|
|
129
|
+
}
|
|
130
|
+
.sqd-theme-soft .sqd-placeholder.sqd-hover .sqd-placeholder-icon-path {
|
|
131
|
+
fill: #fff;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.sqd-theme-soft .sqd-validation-error {
|
|
135
|
+
fill: #ffa200;
|
|
136
|
+
}
|
|
137
|
+
.sqd-theme-soft .sqd-validation-error-icon-path {
|
|
138
|
+
fill: #000;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.sqd-theme-soft .sqd-root-start-stop-circle {
|
|
142
|
+
fill: #3747dd;
|
|
143
|
+
}
|
|
144
|
+
.sqd-theme-soft .sqd-root-start-stop-icon {
|
|
145
|
+
fill: #fff;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.sqd-theme-soft .sqd-step-task .sqd-step-task-rect {
|
|
149
|
+
fill: #fff;
|
|
150
|
+
stroke-width: 1;
|
|
151
|
+
stroke: #dbdbdb;
|
|
152
|
+
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.1));
|
|
153
|
+
}
|
|
154
|
+
.sqd-theme-soft .sqd-step-task .sqd-step-task-rect.sqd-selected {
|
|
155
|
+
stroke: #ed4800;
|
|
156
|
+
stroke-width: 2;
|
|
157
|
+
}
|
|
158
|
+
.sqd-theme-soft .sqd-step-task .sqd-step-task-text {
|
|
159
|
+
fill: #000;
|
|
160
|
+
}
|
|
161
|
+
.sqd-theme-soft .sqd-step-task .sqd-step-task-empty-icon {
|
|
162
|
+
fill: #e9e9e9;
|
|
163
|
+
}
|
|
164
|
+
.sqd-theme-soft .sqd-step-task .sqd-input {
|
|
165
|
+
fill: #fff;
|
|
166
|
+
stroke-width: 2;
|
|
167
|
+
stroke: #2a2a2a;
|
|
168
|
+
}
|
|
169
|
+
.sqd-theme-soft .sqd-step-task .sqd-output {
|
|
170
|
+
fill: #2a2a2a;
|
|
171
|
+
stroke-width: 0;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
.sqd-theme-soft .sqd-step-switch > .sqd-label-primary > .sqd-label-text {
|
|
175
|
+
fill: #fff;
|
|
176
|
+
}
|
|
177
|
+
.sqd-theme-soft .sqd-step-switch > .sqd-label-primary > .sqd-label-rect {
|
|
178
|
+
fill: #3747dd;
|
|
179
|
+
stroke-width: 0;
|
|
180
|
+
}
|
|
181
|
+
.sqd-theme-soft .sqd-step-switch > .sqd-label-secondary > .sqd-label-rect {
|
|
182
|
+
fill: #e9e9e9;
|
|
183
|
+
stroke-width: 0;
|
|
184
|
+
}
|
|
185
|
+
.sqd-theme-soft .sqd-step-switch > .sqd-label-secondary > .sqd-label-text {
|
|
186
|
+
fill: #555555;
|
|
187
|
+
}
|
|
188
|
+
.sqd-theme-soft .sqd-step-switch > g > .sqd-input {
|
|
189
|
+
fill: #fff;
|
|
190
|
+
stroke-width: 2;
|
|
191
|
+
stroke: #2a2a2a;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
.sqd-theme-soft .sqd-step-container > .sqd-label > .sqd-label-text {
|
|
195
|
+
fill: #fff;
|
|
196
|
+
}
|
|
197
|
+
.sqd-theme-soft .sqd-step-container > .sqd-label > .sqd-label-rect {
|
|
198
|
+
fill: #3747dd;
|
|
199
|
+
stroke-width: 0;
|
|
200
|
+
}
|
|
201
|
+
.sqd-theme-soft .sqd-step-container > g > .sqd-input {
|
|
202
|
+
fill: #fff;
|
|
203
|
+
stroke-width: 2;
|
|
204
|
+
stroke: #2a2a2a;
|
|
205
|
+
}
|
package/dist/index.umd.js
CHANGED
|
@@ -1747,10 +1747,10 @@
|
|
|
1747
1747
|
let totalBranchesWidth = 0;
|
|
1748
1748
|
let maxBranchesHeight = 0;
|
|
1749
1749
|
branchNames.forEach(branchName => {
|
|
1750
|
-
const component = viewContext.createSequenceComponent(g, step.branches[branchName]);
|
|
1751
1750
|
const labelY = paddingTop + cfg.nameLabel.height + cfg.connectionHeight;
|
|
1752
1751
|
const translatedBranchName = viewContext.i18n(`stepComponent.${step.type}.branchName`, branchName);
|
|
1753
1752
|
const labelView = LabelView.create(g, labelY, cfg.branchNameLabel, translatedBranchName, 'secondary');
|
|
1753
|
+
const component = viewContext.createSequenceComponent(g, step.branches[branchName]);
|
|
1754
1754
|
const halfOfWidestBranchElement = Math.max(labelView.width, cfg.minBranchWidth) / 2;
|
|
1755
1755
|
const branchOffsetLeft = Math.max(halfOfWidestBranchElement - component.view.joinX, 0) + cfg.paddingX;
|
|
1756
1756
|
const branchOffsetRight = Math.max(halfOfWidestBranchElement - (component.view.width - component.view.joinX), 0) + cfg.paddingX;
|
package/lib/cjs/index.cjs
CHANGED
|
@@ -1562,10 +1562,10 @@ const createSwitchStepComponentViewFactory = (cfg) => (parent, stepContext, view
|
|
|
1562
1562
|
let totalBranchesWidth = 0;
|
|
1563
1563
|
let maxBranchesHeight = 0;
|
|
1564
1564
|
branchNames.forEach(branchName => {
|
|
1565
|
-
const component = viewContext.createSequenceComponent(g, step.branches[branchName]);
|
|
1566
1565
|
const labelY = paddingTop + cfg.nameLabel.height + cfg.connectionHeight;
|
|
1567
1566
|
const translatedBranchName = viewContext.i18n(`stepComponent.${step.type}.branchName`, branchName);
|
|
1568
1567
|
const labelView = LabelView.create(g, labelY, cfg.branchNameLabel, translatedBranchName, 'secondary');
|
|
1568
|
+
const component = viewContext.createSequenceComponent(g, step.branches[branchName]);
|
|
1569
1569
|
const halfOfWidestBranchElement = Math.max(labelView.width, cfg.minBranchWidth) / 2;
|
|
1570
1570
|
const branchOffsetLeft = Math.max(halfOfWidestBranchElement - component.view.joinX, 0) + cfg.paddingX;
|
|
1571
1571
|
const branchOffsetRight = Math.max(halfOfWidestBranchElement - (component.view.width - component.view.joinX), 0) + cfg.paddingX;
|
package/lib/esm/index.js
CHANGED
|
@@ -1561,10 +1561,10 @@ const createSwitchStepComponentViewFactory = (cfg) => (parent, stepContext, view
|
|
|
1561
1561
|
let totalBranchesWidth = 0;
|
|
1562
1562
|
let maxBranchesHeight = 0;
|
|
1563
1563
|
branchNames.forEach(branchName => {
|
|
1564
|
-
const component = viewContext.createSequenceComponent(g, step.branches[branchName]);
|
|
1565
1564
|
const labelY = paddingTop + cfg.nameLabel.height + cfg.connectionHeight;
|
|
1566
1565
|
const translatedBranchName = viewContext.i18n(`stepComponent.${step.type}.branchName`, branchName);
|
|
1567
1566
|
const labelView = LabelView.create(g, labelY, cfg.branchNameLabel, translatedBranchName, 'secondary');
|
|
1567
|
+
const component = viewContext.createSequenceComponent(g, step.branches[branchName]);
|
|
1568
1568
|
const halfOfWidestBranchElement = Math.max(labelView.width, cfg.minBranchWidth) / 2;
|
|
1569
1569
|
const branchOffsetLeft = Math.max(halfOfWidestBranchElement - component.view.joinX, 0) + cfg.paddingX;
|
|
1570
1570
|
const branchOffsetRight = Math.max(halfOfWidestBranchElement - (component.view.width - component.view.joinX), 0) + cfg.paddingX;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "sequential-workflow-designer",
|
|
3
3
|
"description": "Customizable no-code component for building flow-based programming applications.",
|
|
4
|
-
"version": "0.29.
|
|
4
|
+
"version": "0.29.2",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./lib/esm/index.js",
|
|
7
7
|
"types": "./lib/index.d.ts",
|
|
@@ -22,6 +22,9 @@
|
|
|
22
22
|
"./css/designer-light.css": {
|
|
23
23
|
"default": "./css/designer-light.css"
|
|
24
24
|
},
|
|
25
|
+
"./css/designer-soft.css": {
|
|
26
|
+
"default": "./css/designer-soft.css"
|
|
27
|
+
},
|
|
25
28
|
"./css/designer-dark.css": {
|
|
26
29
|
"default": "./css/designer-dark.css"
|
|
27
30
|
},
|
|
@@ -34,6 +37,9 @@
|
|
|
34
37
|
"./sass/designer-light.scss": {
|
|
35
38
|
"default": "./sass/designer-light.scss"
|
|
36
39
|
},
|
|
40
|
+
"./sass/designer-soft.scss": {
|
|
41
|
+
"default": "./sass/designer-soft.scss"
|
|
42
|
+
},
|
|
37
43
|
"./sass/designer-dark.scss": {
|
|
38
44
|
"default": "./sass/designer-dark.scss"
|
|
39
45
|
}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
@import './designer-theme.scss';
|
|
2
|
+
|
|
3
|
+
$joinColor: #2a2a2a;
|
|
4
|
+
|
|
5
|
+
@include sqd-theme-ui-toolbox(
|
|
6
|
+
'soft',
|
|
7
|
+
$groupBackgroundColor: #efefef,
|
|
8
|
+
$filterBorder: 1px solid #dbdbdb,
|
|
9
|
+
$filterBorderColorFocused: #c3c3c3,
|
|
10
|
+
$panelBoxShadow: (0 1px 4px rgba(0, 0, 0, 0.15))
|
|
11
|
+
);
|
|
12
|
+
@include sqd-theme-ui-toolbox-item(
|
|
13
|
+
'soft',
|
|
14
|
+
$itemBorder: 1px solid #dbdbdb,
|
|
15
|
+
$itemBorderHovered: #cfcfcf,
|
|
16
|
+
$itemBoxShadow: (0 1px 3px rgba(0, 0, 0, 0.1)),
|
|
17
|
+
$noIconBackgroundColor: #e9e9e9
|
|
18
|
+
);
|
|
19
|
+
@include sqd-theme-ui-control-bar('soft', $panelBoxShadow: (0 1px 4px rgba(0, 0, 0, 0.15)));
|
|
20
|
+
@include sqd-theme-ui-editor('soft', $panelBoxShadow: (0 1px 4px rgba(0, 0, 0, 0.15)), $toggleBoxShadow: (0 1px 4px rgba(0, 0, 0, 0.1)));
|
|
21
|
+
@include sqd-theme-ui-context-menu('soft');
|
|
22
|
+
|
|
23
|
+
@include sqd-theme-workspace('soft');
|
|
24
|
+
@include sqd-theme-line-grid('soft', $strokeColor: #ebebeb);
|
|
25
|
+
@include sqd-theme-join('soft', $joinStrokeColor: $joinColor);
|
|
26
|
+
@include sqd-theme-region('soft', $strokeColor: #e9e9e9);
|
|
27
|
+
@include sqd-theme-placeholder('soft', $rectFillColor: #e9e9e9, $rectStrokeColor: #707070);
|
|
28
|
+
@include sqd-theme-validation-error-badge('soft');
|
|
29
|
+
|
|
30
|
+
@include sqd-theme-start-stop-root-component('soft', $circleFillColor: #3747dd);
|
|
31
|
+
|
|
32
|
+
@include sqd-theme-task-step-component(
|
|
33
|
+
'soft',
|
|
34
|
+
$rectStrokeColor: #dbdbdb,
|
|
35
|
+
$rectShadow: (0 1px 3px rgba(0, 0, 0, 0.1)),
|
|
36
|
+
$emptyIconColor: #e9e9e9,
|
|
37
|
+
$inputStrokeColor: $joinColor,
|
|
38
|
+
$outputFillColor: $joinColor
|
|
39
|
+
);
|
|
40
|
+
@include sqd-theme-switch-step-component(
|
|
41
|
+
'soft',
|
|
42
|
+
$labelPrimaryFillColor: #3747dd,
|
|
43
|
+
$labelSecondaryTextColor: #555555,
|
|
44
|
+
$labelSecondaryFillColor: #e9e9e9,
|
|
45
|
+
$inputStrokeColor: $joinColor
|
|
46
|
+
);
|
|
47
|
+
@include sqd-theme-container-step-component('soft', $labelFillColor: #3747dd, $inputStrokeColor: $joinColor);
|