sequential-workflow-designer 0.16.3 → 0.16.4
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 +5 -5
- package/dist/index.umd.js +181 -158
- package/lib/cjs/index.cjs +181 -158
- package/lib/esm/index.js +181 -158
- package/lib/index.d.ts +38 -16
- package/package.json +1 -1
package/lib/esm/index.js
CHANGED
|
@@ -73,57 +73,6 @@ class ControlBarApi {
|
|
|
73
73
|
}
|
|
74
74
|
}
|
|
75
75
|
|
|
76
|
-
class SimpleEvent {
|
|
77
|
-
constructor() {
|
|
78
|
-
this.listeners = [];
|
|
79
|
-
}
|
|
80
|
-
subscribe(listener) {
|
|
81
|
-
this.listeners.push(listener);
|
|
82
|
-
}
|
|
83
|
-
unsubscribe(listener) {
|
|
84
|
-
const index = this.listeners.indexOf(listener);
|
|
85
|
-
if (index >= 0) {
|
|
86
|
-
this.listeners.splice(index, 1);
|
|
87
|
-
}
|
|
88
|
-
else {
|
|
89
|
-
throw new Error('Unknown listener');
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
forward(value) {
|
|
93
|
-
if (this.listeners.length > 0) {
|
|
94
|
-
this.listeners.forEach(listener => listener(value));
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
count() {
|
|
98
|
-
return this.listeners.length;
|
|
99
|
-
}
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
class Vector {
|
|
103
|
-
constructor(x, y) {
|
|
104
|
-
this.x = x;
|
|
105
|
-
this.y = y;
|
|
106
|
-
}
|
|
107
|
-
add(v) {
|
|
108
|
-
return new Vector(this.x + v.x, this.y + v.y);
|
|
109
|
-
}
|
|
110
|
-
subtract(v) {
|
|
111
|
-
return new Vector(this.x - v.x, this.y - v.y);
|
|
112
|
-
}
|
|
113
|
-
multiplyByScalar(s) {
|
|
114
|
-
return new Vector(this.x * s, this.y * s);
|
|
115
|
-
}
|
|
116
|
-
divideByScalar(s) {
|
|
117
|
-
return new Vector(this.x / s, this.y / s);
|
|
118
|
-
}
|
|
119
|
-
round() {
|
|
120
|
-
return new Vector(Math.round(this.x), Math.round(this.y));
|
|
121
|
-
}
|
|
122
|
-
distance() {
|
|
123
|
-
return Math.sqrt(Math.pow(this.x, 2) + Math.pow(this.y, 2));
|
|
124
|
-
}
|
|
125
|
-
}
|
|
126
|
-
|
|
127
76
|
var DefinitionChangeType;
|
|
128
77
|
(function (DefinitionChangeType) {
|
|
129
78
|
DefinitionChangeType[DefinitionChangeType["stepNameChanged"] = 1] = "stepNameChanged";
|
|
@@ -134,88 +83,7 @@ var DefinitionChangeType;
|
|
|
134
83
|
DefinitionChangeType[DefinitionChangeType["stepInserted"] = 6] = "stepInserted";
|
|
135
84
|
DefinitionChangeType[DefinitionChangeType["globalPropertyChanged"] = 7] = "globalPropertyChanged";
|
|
136
85
|
DefinitionChangeType[DefinitionChangeType["rootReplaced"] = 8] = "rootReplaced";
|
|
137
|
-
})(DefinitionChangeType || (DefinitionChangeType = {}));
|
|
138
|
-
class DesignerState {
|
|
139
|
-
constructor(definition, isReadonly, isToolboxCollapsed, isEditorCollapsed) {
|
|
140
|
-
this.definition = definition;
|
|
141
|
-
this.isReadonly = isReadonly;
|
|
142
|
-
this.isToolboxCollapsed = isToolboxCollapsed;
|
|
143
|
-
this.isEditorCollapsed = isEditorCollapsed;
|
|
144
|
-
this.onViewportChanged = new SimpleEvent();
|
|
145
|
-
this.onSelectedStepIdChanged = new SimpleEvent();
|
|
146
|
-
this.onFolderPathChanged = new SimpleEvent();
|
|
147
|
-
this.onIsReadonlyChanged = new SimpleEvent();
|
|
148
|
-
this.onIsDraggingChanged = new SimpleEvent();
|
|
149
|
-
this.onIsDragDisabledChanged = new SimpleEvent();
|
|
150
|
-
this.onDefinitionChanged = new SimpleEvent();
|
|
151
|
-
this.onIsToolboxCollapsedChanged = new SimpleEvent();
|
|
152
|
-
this.onIsEditorCollapsedChanged = new SimpleEvent();
|
|
153
|
-
this.viewport = {
|
|
154
|
-
position: new Vector(0, 0),
|
|
155
|
-
scale: 1
|
|
156
|
-
};
|
|
157
|
-
this.selectedStepId = null;
|
|
158
|
-
this.folderPath = [];
|
|
159
|
-
this.isDragging = false;
|
|
160
|
-
this.isDragDisabled = false;
|
|
161
|
-
}
|
|
162
|
-
setSelectedStepId(stepId) {
|
|
163
|
-
if (this.selectedStepId !== stepId) {
|
|
164
|
-
this.selectedStepId = stepId;
|
|
165
|
-
this.onSelectedStepIdChanged.forward(stepId);
|
|
166
|
-
}
|
|
167
|
-
}
|
|
168
|
-
pushStepIdToFolderPath(stepId) {
|
|
169
|
-
this.folderPath.push(stepId);
|
|
170
|
-
this.onFolderPathChanged.forward(this.folderPath);
|
|
171
|
-
}
|
|
172
|
-
setFolderPath(path) {
|
|
173
|
-
this.folderPath = path;
|
|
174
|
-
this.onFolderPathChanged.forward(path);
|
|
175
|
-
}
|
|
176
|
-
tryGetLastStepIdFromFolderPath() {
|
|
177
|
-
return this.folderPath.length > 0 ? this.folderPath[this.folderPath.length - 1] : null;
|
|
178
|
-
}
|
|
179
|
-
setDefinition(definition) {
|
|
180
|
-
this.definition = definition;
|
|
181
|
-
this.notifyDefinitionChanged(DefinitionChangeType.rootReplaced, null);
|
|
182
|
-
}
|
|
183
|
-
notifyDefinitionChanged(changeType, stepId) {
|
|
184
|
-
this.onDefinitionChanged.forward({ changeType, stepId });
|
|
185
|
-
}
|
|
186
|
-
setViewport(viewport) {
|
|
187
|
-
this.viewport = viewport;
|
|
188
|
-
this.onViewportChanged.forward(viewport);
|
|
189
|
-
}
|
|
190
|
-
setIsReadonly(isReadonly) {
|
|
191
|
-
if (this.isReadonly !== isReadonly) {
|
|
192
|
-
this.isReadonly = isReadonly;
|
|
193
|
-
this.onIsReadonlyChanged.forward(isReadonly);
|
|
194
|
-
}
|
|
195
|
-
}
|
|
196
|
-
setIsDragging(isDragging) {
|
|
197
|
-
if (this.isDragging !== isDragging) {
|
|
198
|
-
this.isDragging = isDragging;
|
|
199
|
-
this.onIsDraggingChanged.forward(isDragging);
|
|
200
|
-
}
|
|
201
|
-
}
|
|
202
|
-
toggleIsDragDisabled() {
|
|
203
|
-
this.isDragDisabled = !this.isDragDisabled;
|
|
204
|
-
this.onIsDragDisabledChanged.forward(this.isDragDisabled);
|
|
205
|
-
}
|
|
206
|
-
setIsToolboxCollapsed(isCollapsed) {
|
|
207
|
-
if (this.isToolboxCollapsed !== isCollapsed) {
|
|
208
|
-
this.isToolboxCollapsed = isCollapsed;
|
|
209
|
-
this.onIsToolboxCollapsedChanged.forward(isCollapsed);
|
|
210
|
-
}
|
|
211
|
-
}
|
|
212
|
-
setIsEditorCollapsed(isCollapsed) {
|
|
213
|
-
if (this.isEditorCollapsed !== isCollapsed) {
|
|
214
|
-
this.isEditorCollapsed = isCollapsed;
|
|
215
|
-
this.onIsEditorCollapsedChanged.forward(isCollapsed);
|
|
216
|
-
}
|
|
217
|
-
}
|
|
218
|
-
}
|
|
86
|
+
})(DefinitionChangeType || (DefinitionChangeType = {}));
|
|
219
87
|
|
|
220
88
|
class Dom {
|
|
221
89
|
static svg(name, attributes) {
|
|
@@ -305,6 +173,31 @@ class ObjectCloner {
|
|
|
305
173
|
}
|
|
306
174
|
}
|
|
307
175
|
|
|
176
|
+
class Vector {
|
|
177
|
+
constructor(x, y) {
|
|
178
|
+
this.x = x;
|
|
179
|
+
this.y = y;
|
|
180
|
+
}
|
|
181
|
+
add(v) {
|
|
182
|
+
return new Vector(this.x + v.x, this.y + v.y);
|
|
183
|
+
}
|
|
184
|
+
subtract(v) {
|
|
185
|
+
return new Vector(this.x - v.x, this.y - v.y);
|
|
186
|
+
}
|
|
187
|
+
multiplyByScalar(s) {
|
|
188
|
+
return new Vector(this.x * s, this.y * s);
|
|
189
|
+
}
|
|
190
|
+
divideByScalar(s) {
|
|
191
|
+
return new Vector(this.x / s, this.y / s);
|
|
192
|
+
}
|
|
193
|
+
round() {
|
|
194
|
+
return new Vector(Math.round(this.x), Math.round(this.y));
|
|
195
|
+
}
|
|
196
|
+
distance() {
|
|
197
|
+
return Math.sqrt(Math.pow(this.x, 2) + Math.pow(this.y, 2));
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
|
|
308
201
|
class Uid {
|
|
309
202
|
static next() {
|
|
310
203
|
const bytes = new Uint8Array(16);
|
|
@@ -313,6 +206,32 @@ class Uid {
|
|
|
313
206
|
}
|
|
314
207
|
}
|
|
315
208
|
|
|
209
|
+
class SimpleEvent {
|
|
210
|
+
constructor() {
|
|
211
|
+
this.listeners = [];
|
|
212
|
+
}
|
|
213
|
+
subscribe(listener) {
|
|
214
|
+
this.listeners.push(listener);
|
|
215
|
+
}
|
|
216
|
+
unsubscribe(listener) {
|
|
217
|
+
const index = this.listeners.indexOf(listener);
|
|
218
|
+
if (index >= 0) {
|
|
219
|
+
this.listeners.splice(index, 1);
|
|
220
|
+
}
|
|
221
|
+
else {
|
|
222
|
+
throw new Error('Unknown listener');
|
|
223
|
+
}
|
|
224
|
+
}
|
|
225
|
+
forward(value) {
|
|
226
|
+
if (this.listeners.length > 0) {
|
|
227
|
+
this.listeners.forEach(listener => listener(value));
|
|
228
|
+
}
|
|
229
|
+
}
|
|
230
|
+
count() {
|
|
231
|
+
return this.listeners.length;
|
|
232
|
+
}
|
|
233
|
+
}
|
|
234
|
+
|
|
316
235
|
function race(timeout, a, b, c) {
|
|
317
236
|
const value = [undefined, undefined, undefined];
|
|
318
237
|
const result = new SimpleEvent();
|
|
@@ -2171,7 +2090,9 @@ class DefinitionModifier {
|
|
|
2171
2090
|
}
|
|
2172
2091
|
SequenceModifier.insertStep(step, targetSequence, targetIndex);
|
|
2173
2092
|
this.state.notifyDefinitionChanged(DefinitionChangeType.stepInserted, step.id);
|
|
2174
|
-
this.
|
|
2093
|
+
if (!this.configuration.steps.isAutoSelectDisabled) {
|
|
2094
|
+
this.state.setSelectedStepId(step.id);
|
|
2095
|
+
}
|
|
2175
2096
|
return true;
|
|
2176
2097
|
}
|
|
2177
2098
|
isDraggable(step, parentSequence) {
|
|
@@ -2190,7 +2111,9 @@ class DefinitionModifier {
|
|
|
2190
2111
|
}
|
|
2191
2112
|
apply();
|
|
2192
2113
|
this.state.notifyDefinitionChanged(DefinitionChangeType.stepMoved, step.id);
|
|
2193
|
-
this.
|
|
2114
|
+
if (!this.configuration.steps.isAutoSelectDisabled) {
|
|
2115
|
+
this.state.setSelectedStepId(step.id);
|
|
2116
|
+
}
|
|
2194
2117
|
return true;
|
|
2195
2118
|
}
|
|
2196
2119
|
isDuplicable(step, parentSequence) {
|
|
@@ -2231,13 +2154,101 @@ class DefinitionModifier {
|
|
|
2231
2154
|
}
|
|
2232
2155
|
}
|
|
2233
2156
|
|
|
2157
|
+
class DesignerState {
|
|
2158
|
+
constructor(definition, isReadonly, isToolboxCollapsed, isEditorCollapsed) {
|
|
2159
|
+
this.definition = definition;
|
|
2160
|
+
this.isReadonly = isReadonly;
|
|
2161
|
+
this.isToolboxCollapsed = isToolboxCollapsed;
|
|
2162
|
+
this.isEditorCollapsed = isEditorCollapsed;
|
|
2163
|
+
this.onViewportChanged = new SimpleEvent();
|
|
2164
|
+
this.onSelectedStepIdChanged = new SimpleEvent();
|
|
2165
|
+
this.onFolderPathChanged = new SimpleEvent();
|
|
2166
|
+
this.onIsReadonlyChanged = new SimpleEvent();
|
|
2167
|
+
this.onIsDraggingChanged = new SimpleEvent();
|
|
2168
|
+
this.onIsDragDisabledChanged = new SimpleEvent();
|
|
2169
|
+
this.onDefinitionChanged = new SimpleEvent();
|
|
2170
|
+
this.onIsToolboxCollapsedChanged = new SimpleEvent();
|
|
2171
|
+
this.onIsEditorCollapsedChanged = new SimpleEvent();
|
|
2172
|
+
this.viewport = {
|
|
2173
|
+
position: new Vector(0, 0),
|
|
2174
|
+
scale: 1
|
|
2175
|
+
};
|
|
2176
|
+
this.selectedStepId = null;
|
|
2177
|
+
this.folderPath = [];
|
|
2178
|
+
this.isDragging = false;
|
|
2179
|
+
this.isDragDisabled = false;
|
|
2180
|
+
}
|
|
2181
|
+
setSelectedStepId(stepId) {
|
|
2182
|
+
if (this.selectedStepId !== stepId) {
|
|
2183
|
+
this.selectedStepId = stepId;
|
|
2184
|
+
this.onSelectedStepIdChanged.forward(stepId);
|
|
2185
|
+
}
|
|
2186
|
+
}
|
|
2187
|
+
pushStepIdToFolderPath(stepId) {
|
|
2188
|
+
this.folderPath.push(stepId);
|
|
2189
|
+
this.onFolderPathChanged.forward(this.folderPath);
|
|
2190
|
+
}
|
|
2191
|
+
setFolderPath(path) {
|
|
2192
|
+
this.folderPath = path;
|
|
2193
|
+
this.onFolderPathChanged.forward(path);
|
|
2194
|
+
}
|
|
2195
|
+
tryGetLastStepIdFromFolderPath() {
|
|
2196
|
+
return this.folderPath.length > 0 ? this.folderPath[this.folderPath.length - 1] : null;
|
|
2197
|
+
}
|
|
2198
|
+
setDefinition(definition) {
|
|
2199
|
+
this.definition = definition;
|
|
2200
|
+
this.notifyDefinitionChanged(DefinitionChangeType.rootReplaced, null);
|
|
2201
|
+
}
|
|
2202
|
+
notifyDefinitionChanged(changeType, stepId) {
|
|
2203
|
+
this.onDefinitionChanged.forward({ changeType, stepId });
|
|
2204
|
+
}
|
|
2205
|
+
setViewport(viewport) {
|
|
2206
|
+
this.viewport = viewport;
|
|
2207
|
+
this.onViewportChanged.forward(viewport);
|
|
2208
|
+
}
|
|
2209
|
+
setIsReadonly(isReadonly) {
|
|
2210
|
+
if (this.isReadonly !== isReadonly) {
|
|
2211
|
+
this.isReadonly = isReadonly;
|
|
2212
|
+
this.onIsReadonlyChanged.forward(isReadonly);
|
|
2213
|
+
}
|
|
2214
|
+
}
|
|
2215
|
+
setIsDragging(isDragging) {
|
|
2216
|
+
if (this.isDragging !== isDragging) {
|
|
2217
|
+
this.isDragging = isDragging;
|
|
2218
|
+
this.onIsDraggingChanged.forward(isDragging);
|
|
2219
|
+
}
|
|
2220
|
+
}
|
|
2221
|
+
toggleIsDragDisabled() {
|
|
2222
|
+
this.isDragDisabled = !this.isDragDisabled;
|
|
2223
|
+
this.onIsDragDisabledChanged.forward(this.isDragDisabled);
|
|
2224
|
+
}
|
|
2225
|
+
setIsToolboxCollapsed(isCollapsed) {
|
|
2226
|
+
if (this.isToolboxCollapsed !== isCollapsed) {
|
|
2227
|
+
this.isToolboxCollapsed = isCollapsed;
|
|
2228
|
+
this.onIsToolboxCollapsedChanged.forward(isCollapsed);
|
|
2229
|
+
}
|
|
2230
|
+
}
|
|
2231
|
+
setIsEditorCollapsed(isCollapsed) {
|
|
2232
|
+
if (this.isEditorCollapsed !== isCollapsed) {
|
|
2233
|
+
this.isEditorCollapsed = isCollapsed;
|
|
2234
|
+
this.onIsEditorCollapsedChanged.forward(isCollapsed);
|
|
2235
|
+
}
|
|
2236
|
+
}
|
|
2237
|
+
}
|
|
2238
|
+
|
|
2234
2239
|
class HistoryController {
|
|
2235
|
-
static create(state, definitionModifier, configuration) {
|
|
2240
|
+
static create(initialStack, state, definitionModifier, configuration) {
|
|
2236
2241
|
if (!configuration.undoStackSize || configuration.undoStackSize < 1) {
|
|
2237
2242
|
throw new Error('Invalid undo stack size');
|
|
2238
2243
|
}
|
|
2239
|
-
const
|
|
2240
|
-
|
|
2244
|
+
const stack = initialStack || {
|
|
2245
|
+
index: 0,
|
|
2246
|
+
items: []
|
|
2247
|
+
};
|
|
2248
|
+
const controller = new HistoryController(stack, state, definitionModifier, configuration.undoStackSize);
|
|
2249
|
+
if (!initialStack) {
|
|
2250
|
+
controller.remember(DefinitionChangeType.rootReplaced, null);
|
|
2251
|
+
}
|
|
2241
2252
|
state.onDefinitionChanged.subscribe(event => {
|
|
2242
2253
|
if (event.changeType !== DefinitionChangeType.rootReplaced) {
|
|
2243
2254
|
controller.remember(event.changeType, event.stepId);
|
|
@@ -2245,49 +2256,51 @@ class HistoryController {
|
|
|
2245
2256
|
});
|
|
2246
2257
|
return controller;
|
|
2247
2258
|
}
|
|
2248
|
-
constructor(state, definitionModifier, stackSize) {
|
|
2259
|
+
constructor(stack, state, definitionModifier, stackSize) {
|
|
2260
|
+
this.stack = stack;
|
|
2249
2261
|
this.state = state;
|
|
2250
2262
|
this.definitionModifier = definitionModifier;
|
|
2251
2263
|
this.stackSize = stackSize;
|
|
2252
|
-
this.stack = [];
|
|
2253
|
-
this.currentIndex = 0;
|
|
2254
2264
|
}
|
|
2255
2265
|
canUndo() {
|
|
2256
|
-
return this.
|
|
2266
|
+
return this.stack.index > 1;
|
|
2257
2267
|
}
|
|
2258
2268
|
undo() {
|
|
2259
|
-
this.
|
|
2269
|
+
this.stack.index--;
|
|
2260
2270
|
this.commit();
|
|
2261
2271
|
}
|
|
2262
2272
|
canRedo() {
|
|
2263
|
-
return this.
|
|
2273
|
+
return this.stack.index < this.stack.items.length;
|
|
2264
2274
|
}
|
|
2265
2275
|
redo() {
|
|
2266
|
-
this.
|
|
2276
|
+
this.stack.index++;
|
|
2267
2277
|
this.commit();
|
|
2268
2278
|
}
|
|
2279
|
+
dump() {
|
|
2280
|
+
return Object.assign({}, this.stack);
|
|
2281
|
+
}
|
|
2269
2282
|
remember(changeType, stepId) {
|
|
2270
2283
|
const definition = ObjectCloner.deepClone(this.state.definition);
|
|
2271
|
-
if (this.stack.length > 0 && this.
|
|
2272
|
-
const lastItem = this.stack[this.stack.length - 1];
|
|
2284
|
+
if (this.stack.items.length > 0 && this.stack.index === this.stack.items.length) {
|
|
2285
|
+
const lastItem = this.stack.items[this.stack.items.length - 1];
|
|
2273
2286
|
if (areItemsEqual(lastItem, changeType, stepId)) {
|
|
2274
2287
|
lastItem.definition = definition;
|
|
2275
2288
|
return;
|
|
2276
2289
|
}
|
|
2277
2290
|
}
|
|
2278
|
-
this.stack.splice(this.
|
|
2279
|
-
this.stack.push({
|
|
2291
|
+
this.stack.items.splice(this.stack.index);
|
|
2292
|
+
this.stack.items.push({
|
|
2280
2293
|
definition,
|
|
2281
2294
|
changeType,
|
|
2282
2295
|
stepId
|
|
2283
2296
|
});
|
|
2284
|
-
if (this.stack.length > this.stackSize) {
|
|
2285
|
-
this.stack.splice(0, this.stack.length - this.stackSize - 1);
|
|
2297
|
+
if (this.stack.items.length > this.stackSize) {
|
|
2298
|
+
this.stack.items.splice(0, this.stack.items.length - this.stackSize - 1);
|
|
2286
2299
|
}
|
|
2287
|
-
this.
|
|
2300
|
+
this.stack.index = this.stack.items.length;
|
|
2288
2301
|
}
|
|
2289
2302
|
commit() {
|
|
2290
|
-
const definition = ObjectCloner.deepClone(this.stack[this.
|
|
2303
|
+
const definition = ObjectCloner.deepClone(this.stack.items[this.stack.index - 1].definition);
|
|
2291
2304
|
this.definitionModifier.replaceDefinition(definition);
|
|
2292
2305
|
}
|
|
2293
2306
|
}
|
|
@@ -2360,7 +2373,7 @@ class DesignerContext {
|
|
|
2360
2373
|
const definitionModifier = new DefinitionModifier(definitionWalker, state, configuration);
|
|
2361
2374
|
let historyController = undefined;
|
|
2362
2375
|
if (configuration.undoStackSize) {
|
|
2363
|
-
historyController = HistoryController.create(state, definitionModifier, configuration);
|
|
2376
|
+
historyController = HistoryController.create(configuration.undoStack, state, definitionModifier, configuration);
|
|
2364
2377
|
}
|
|
2365
2378
|
const componentContext = ComponentContext.create(configuration.steps, configuration.validator, state, stepExtensionResolver, services);
|
|
2366
2379
|
return new DesignerContext(theme, state, configuration, services, componentContext, definitionWalker, definitionModifier, layoutController, workspaceController, behaviorController, historyController);
|
|
@@ -4111,24 +4124,25 @@ class Designer {
|
|
|
4111
4124
|
const designerContext = DesignerContext.create(placeholder, startDefinition, config, services);
|
|
4112
4125
|
const designerApi = DesignerApi.create(designerContext);
|
|
4113
4126
|
const view = DesignerView.create(placeholder, designerContext, designerApi);
|
|
4114
|
-
const designer = new Designer(view, designerContext.state, designerContext.definitionWalker, designerApi);
|
|
4127
|
+
const designer = new Designer(view, designerContext.state, designerContext.definitionWalker, designerContext.historyController, designerApi);
|
|
4115
4128
|
view.workspace.onReady.subscribe(() => designer.onReady.forward());
|
|
4116
4129
|
designerContext.state.onDefinitionChanged.subscribe(() => {
|
|
4117
4130
|
setTimeout(() => designer.onDefinitionChanged.forward(designerContext.state.definition));
|
|
4118
4131
|
});
|
|
4119
4132
|
designerContext.state.onSelectedStepIdChanged.subscribe(() => designer.onSelectedStepIdChanged.forward(designerContext.state.selectedStepId));
|
|
4120
|
-
|
|
4133
|
+
designerContext.state.onIsToolboxCollapsedChanged.subscribe(isCollapsed => {
|
|
4121
4134
|
designer.onIsToolboxCollapsedChanged.forward(isCollapsed);
|
|
4122
4135
|
});
|
|
4123
|
-
|
|
4136
|
+
designerContext.state.onIsEditorCollapsedChanged.subscribe(isCollapsed => {
|
|
4124
4137
|
designer.onIsEditorCollapsedChanged.forward(isCollapsed);
|
|
4125
4138
|
});
|
|
4126
4139
|
return designer;
|
|
4127
4140
|
}
|
|
4128
|
-
constructor(view, state, walker, api) {
|
|
4141
|
+
constructor(view, state, walker, historyController, api) {
|
|
4129
4142
|
this.view = view;
|
|
4130
4143
|
this.state = state;
|
|
4131
4144
|
this.walker = walker;
|
|
4145
|
+
this.historyController = historyController;
|
|
4132
4146
|
this.api = api;
|
|
4133
4147
|
/**
|
|
4134
4148
|
* @description Fires when the designer is initialized and ready to use.
|
|
@@ -4241,6 +4255,15 @@ class Designer {
|
|
|
4241
4255
|
setIsEditorCollapsed(isCollapsed) {
|
|
4242
4256
|
this.state.setIsEditorCollapsed(isCollapsed);
|
|
4243
4257
|
}
|
|
4258
|
+
/**
|
|
4259
|
+
* @description Dump the undo stack.
|
|
4260
|
+
*/
|
|
4261
|
+
dumpUndoStack() {
|
|
4262
|
+
if (!this.historyController) {
|
|
4263
|
+
throw new Error('Undo feature is not activated');
|
|
4264
|
+
}
|
|
4265
|
+
return this.historyController.dump();
|
|
4266
|
+
}
|
|
4244
4267
|
/**
|
|
4245
4268
|
* @param needle A step, a sequence or a step id.
|
|
4246
4269
|
* @returns parent steps and branch names.
|
package/lib/index.d.ts
CHANGED
|
@@ -63,16 +63,6 @@ interface DefinitionChangedEvent {
|
|
|
63
63
|
changeType: DefinitionChangeType;
|
|
64
64
|
stepId: string | null;
|
|
65
65
|
}
|
|
66
|
-
declare enum DefinitionChangeType {
|
|
67
|
-
stepNameChanged = 1,
|
|
68
|
-
stepPropertyChanged = 2,
|
|
69
|
-
stepChildrenChanged = 3,
|
|
70
|
-
stepDeleted = 4,
|
|
71
|
-
stepMoved = 5,
|
|
72
|
-
stepInserted = 6,
|
|
73
|
-
globalPropertyChanged = 7,
|
|
74
|
-
rootReplaced = 8
|
|
75
|
-
}
|
|
76
66
|
declare class DesignerState {
|
|
77
67
|
definition: Definition;
|
|
78
68
|
isReadonly: boolean;
|
|
@@ -261,17 +251,17 @@ declare class ComponentContext {
|
|
|
261
251
|
}
|
|
262
252
|
|
|
263
253
|
declare class HistoryController {
|
|
254
|
+
private readonly stack;
|
|
264
255
|
private readonly state;
|
|
265
256
|
private readonly definitionModifier;
|
|
266
257
|
private readonly stackSize;
|
|
267
|
-
static create(state: DesignerState, definitionModifier: DefinitionModifier, configuration: DesignerConfiguration): HistoryController;
|
|
268
|
-
|
|
269
|
-
private currentIndex;
|
|
270
|
-
constructor(state: DesignerState, definitionModifier: DefinitionModifier, stackSize: number);
|
|
258
|
+
static create(initialStack: UndoStack | undefined, state: DesignerState, definitionModifier: DefinitionModifier, configuration: DesignerConfiguration): HistoryController;
|
|
259
|
+
constructor(stack: UndoStack, state: DesignerState, definitionModifier: DefinitionModifier, stackSize: number);
|
|
271
260
|
canUndo(): boolean;
|
|
272
261
|
undo(): void;
|
|
273
262
|
canRedo(): boolean;
|
|
274
263
|
redo(): void;
|
|
264
|
+
dump(): UndoStack;
|
|
275
265
|
private remember;
|
|
276
266
|
private commit;
|
|
277
267
|
}
|
|
@@ -832,6 +822,10 @@ interface DesignerConfiguration<TDefinition extends Definition = Definition> {
|
|
|
832
822
|
* @description The depth of the undo stack. If not set, undo/redo feature will be disabled.
|
|
833
823
|
*/
|
|
834
824
|
undoStackSize?: number;
|
|
825
|
+
/**
|
|
826
|
+
* @description The initial undo stack. If not set, the undo stack will be empty.
|
|
827
|
+
*/
|
|
828
|
+
undoStack?: UndoStack;
|
|
835
829
|
/**
|
|
836
830
|
* @description The common configuration of the steps.
|
|
837
831
|
*/
|
|
@@ -925,6 +919,10 @@ interface StepsConfiguration {
|
|
|
925
919
|
isDeletable?: (step: Step, parentSequence: Sequence) => boolean;
|
|
926
920
|
canDeleteStep?: (step: Step, parentSequence: Sequence) => boolean;
|
|
927
921
|
isDuplicable?: (step: Step, parentSequence: Sequence) => boolean;
|
|
922
|
+
/**
|
|
923
|
+
* @description The designer automatically selects the step after it is dropped. If true, the step will not be selected.
|
|
924
|
+
*/
|
|
925
|
+
isAutoSelectDisabled?: boolean;
|
|
928
926
|
iconUrlProvider?: StepIconUrlProvider;
|
|
929
927
|
}
|
|
930
928
|
type StepIconUrlProvider = (componentType: ComponentType, type: string) => string | null;
|
|
@@ -948,7 +946,26 @@ type StepEditorProvider<TDefinition extends Definition = Definition> = (step: St
|
|
|
948
946
|
interface GlobalEditorContext {
|
|
949
947
|
notifyPropertiesChanged(): void;
|
|
950
948
|
}
|
|
951
|
-
type GlobalEditorProvider<TDefinition extends Definition = Definition> = (definition: TDefinition, context: GlobalEditorContext) => HTMLElement;
|
|
949
|
+
type GlobalEditorProvider<TDefinition extends Definition = Definition> = (definition: TDefinition, context: GlobalEditorContext) => HTMLElement;
|
|
950
|
+
interface UndoStack {
|
|
951
|
+
index: number;
|
|
952
|
+
items: UndoStackItem[];
|
|
953
|
+
}
|
|
954
|
+
interface UndoStackItem {
|
|
955
|
+
definition: Definition;
|
|
956
|
+
changeType: DefinitionChangeType;
|
|
957
|
+
stepId: string | null;
|
|
958
|
+
}
|
|
959
|
+
declare enum DefinitionChangeType {
|
|
960
|
+
stepNameChanged = 1,
|
|
961
|
+
stepPropertyChanged = 2,
|
|
962
|
+
stepChildrenChanged = 3,
|
|
963
|
+
stepDeleted = 4,
|
|
964
|
+
stepMoved = 5,
|
|
965
|
+
stepInserted = 6,
|
|
966
|
+
globalPropertyChanged = 7,
|
|
967
|
+
rootReplaced = 8
|
|
968
|
+
}
|
|
952
969
|
|
|
953
970
|
declare class DefinitionModifier {
|
|
954
971
|
private readonly definitionWalker;
|
|
@@ -1002,6 +1019,7 @@ declare class Designer<TDefinition extends Definition = Definition> {
|
|
|
1002
1019
|
private readonly view;
|
|
1003
1020
|
private readonly state;
|
|
1004
1021
|
private readonly walker;
|
|
1022
|
+
private readonly historyController;
|
|
1005
1023
|
private readonly api;
|
|
1006
1024
|
/**
|
|
1007
1025
|
* Creates a designer.
|
|
@@ -1092,6 +1110,10 @@ declare class Designer<TDefinition extends Definition = Definition> {
|
|
|
1092
1110
|
* @description Sets a flag that indicates whether the editor is collapsed.
|
|
1093
1111
|
*/
|
|
1094
1112
|
setIsEditorCollapsed(isCollapsed: boolean): void;
|
|
1113
|
+
/**
|
|
1114
|
+
* @description Dump the undo stack.
|
|
1115
|
+
*/
|
|
1116
|
+
dumpUndoStack(): UndoStack;
|
|
1095
1117
|
/**
|
|
1096
1118
|
* @param needle A step, a sequence or a step id.
|
|
1097
1119
|
* @returns parent steps and branch names.
|
|
@@ -1145,4 +1167,4 @@ declare class StepsExtension extends StepsDesignerExtension {
|
|
|
1145
1167
|
interface StepsExtensionConfiguration extends StepsDesignerExtensionConfiguration {
|
|
1146
1168
|
}
|
|
1147
1169
|
|
|
1148
|
-
export { Attributes, Badge, BadgeExtension, BadgeView, Badges, BadgesResult, BaseClickCommand, CenteredViewportCalculator, ClassicWheelControllerExtension, ClickCommand, ClickCommandType, ClickDetails, Component, ComponentContext, ComponentView, ContainerStep, ContainerStepComponentViewConfiguration, ContainerStepExtensionConfiguration, ControlBarApi, CustomAction, CustomActionHandler, CustomActionHandlerContext, Daemon, DaemonExtension, DefaultSequenceComponent, DefaultSequenceComponentView, DefaultViewportController, DefaultViewportControllerExtension, DefinitionChangeType, DefinitionChangedEvent, Designer, DesignerApi, DesignerConfiguration, DesignerContext, DesignerExtension, DesignerState, Dom, DraggedComponent, DraggedComponentExtension, Editor, EditorApi, EditorsConfiguration, GlobalEditorContext, GlobalEditorProvider, Grid, GridExtension, Icons, InputView, JoinView, LabelView, LineGridConfiguration, LineGridDesignerExtension, ObjectCloner, OpenFolderClickCommand, OutputView, PathBarApi, Placeholder, PlaceholderController, PlaceholderControllerExtension, PlaceholderDirection, PlaceholderExtension, PlaceholderView, QuantifiedScaleViewportCalculator, RectPlaceholder, RectPlaceholderConfiguration, RectPlaceholderView, RegionView, RerenderStepClickCommand, RootComponentExtension, RootValidator, SelectStepClickCommand, SequenceComponent, SequenceComponentExtension, SequenceContext, SequencePlaceIndicator, Services, ServicesResolver, SimpleEvent, SimpleEventListener, StepComponent, StepComponentView, StepComponentViewContext, StepComponentViewFactory, StepComponentViewWrapperExtension, StepContext, StepDefinition, StepDescriptionProvider, StepEditorContext, StepEditorProvider, StepExtension, StepExtensionResolver, StepIconUrlProvider, StepLabelProvider, StepValidator, StepsConfiguration, StepsDesignerExtension, StepsDesignerExtensionConfiguration, StepsExtension, StepsExtensionConfiguration, SwitchStep, SwitchStepComponentViewConfiguration, SwitchStepExtensionConfiguration, TaskStep, TaskStepComponentViewConfiguration, TaskStepExtensionConfiguration, ToolboxApi, ToolboxConfiguration, ToolboxGroupConfiguration, TriggerCustomActionClickCommand, UiComponent, UiComponentExtension, Uid, UidGenerator, ValidationErrorBadgeExtension, ValidationErrorBadgeExtensionConfiguration, ValidationErrorBadgeViewConfiguration, ValidatorConfiguration, Vector, Viewport, ViewportController, ViewportControllerExtension, WheelController, WheelControllerExtension, WorkspaceApi, createContainerStepComponentViewFactory, createSwitchStepComponentViewFactory, createTaskStepComponentViewFactory, race };
|
|
1170
|
+
export { Attributes, Badge, BadgeExtension, BadgeView, Badges, BadgesResult, BaseClickCommand, CenteredViewportCalculator, ClassicWheelControllerExtension, ClickCommand, ClickCommandType, ClickDetails, Component, ComponentContext, ComponentView, ContainerStep, ContainerStepComponentViewConfiguration, ContainerStepExtensionConfiguration, ControlBarApi, CustomAction, CustomActionHandler, CustomActionHandlerContext, Daemon, DaemonExtension, DefaultSequenceComponent, DefaultSequenceComponentView, DefaultViewportController, DefaultViewportControllerExtension, DefinitionChangeType, DefinitionChangedEvent, Designer, DesignerApi, DesignerConfiguration, DesignerContext, DesignerExtension, DesignerState, Dom, DraggedComponent, DraggedComponentExtension, Editor, EditorApi, EditorsConfiguration, GlobalEditorContext, GlobalEditorProvider, Grid, GridExtension, Icons, InputView, JoinView, LabelView, LineGridConfiguration, LineGridDesignerExtension, ObjectCloner, OpenFolderClickCommand, OutputView, PathBarApi, Placeholder, PlaceholderController, PlaceholderControllerExtension, PlaceholderDirection, PlaceholderExtension, PlaceholderView, QuantifiedScaleViewportCalculator, RectPlaceholder, RectPlaceholderConfiguration, RectPlaceholderView, RegionView, RerenderStepClickCommand, RootComponentExtension, RootValidator, SelectStepClickCommand, SequenceComponent, SequenceComponentExtension, SequenceContext, SequencePlaceIndicator, Services, ServicesResolver, SimpleEvent, SimpleEventListener, StepComponent, StepComponentView, StepComponentViewContext, StepComponentViewFactory, StepComponentViewWrapperExtension, StepContext, StepDefinition, StepDescriptionProvider, StepEditorContext, StepEditorProvider, StepExtension, StepExtensionResolver, StepIconUrlProvider, StepLabelProvider, StepValidator, StepsConfiguration, StepsDesignerExtension, StepsDesignerExtensionConfiguration, StepsExtension, StepsExtensionConfiguration, SwitchStep, SwitchStepComponentViewConfiguration, SwitchStepExtensionConfiguration, TaskStep, TaskStepComponentViewConfiguration, TaskStepExtensionConfiguration, ToolboxApi, ToolboxConfiguration, ToolboxGroupConfiguration, TriggerCustomActionClickCommand, UiComponent, UiComponentExtension, Uid, UidGenerator, UndoStack, UndoStackItem, ValidationErrorBadgeExtension, ValidationErrorBadgeExtensionConfiguration, ValidationErrorBadgeViewConfiguration, ValidatorConfiguration, Vector, Viewport, ViewportController, ViewportControllerExtension, WheelController, WheelControllerExtension, WorkspaceApi, createContainerStepComponentViewFactory, createSwitchStepComponentViewFactory, createTaskStepComponentViewFactory, race };
|
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.16.
|
|
4
|
+
"version": "0.16.4",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./lib/esm/index.js",
|
|
7
7
|
"types": "./lib/index.d.ts",
|