sequential-workflow-designer 0.18.3 → 0.18.5

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.
Files changed (8) hide show
  1. package/README.md +19 -17
  2. package/css/designer.css +2 -0
  3. package/dist/index.umd.js +177 -118
  4. package/lib/cjs/index.cjs +177 -118
  5. package/lib/esm/index.js +177 -118
  6. package/lib/index.d.ts +79 -67
  7. package/package.json +1 -1
  8. package/sass/designer.scss +2 -0
package/README.md CHANGED
@@ -39,19 +39,21 @@ Features:
39
39
 
40
40
  Pro:
41
41
 
42
- * [🤩 Pro Components](https://nocode-js.github.io/sequential-workflow-designer-pro-demo/demos/webpack-pro-app/public/pro-components.html)
43
- * [🍬 Custom Theme Flat](https://nocode-js.github.io/sequential-workflow-designer-pro-demo/demos/webpack-pro-app/public/custom-theme-flat.html)
44
- * [🌹 Custom Step Types](https://nocode-js.github.io/sequential-workflow-designer-pro-demo/demos/webpack-pro-app/public/custom-step-types.html)
45
- * [👈 Goto](https://nocode-js.github.io/sequential-workflow-designer-pro-demo/demos/webpack-pro-app/public/goto.html)
46
- * [📁 Folders](https://nocode-js.github.io/sequential-workflow-designer-pro-demo/demos/webpack-pro-app/public/folders.html)
47
- * [⭕ Wheel Mode](https://nocode-js.github.io/sequential-workflow-designer-pro-demo/demos/webpack-pro-app/public/wheel-mode.html)
48
- * [💠 Grid](https://nocode-js.github.io/sequential-workflow-designer-pro-demo/demos/webpack-pro-app/public/grid.html)
49
- * [🐭 Minimal Root Component](https://nocode-js.github.io/sequential-workflow-designer-pro-demo/demos/webpack-pro-app/public/minimal-root-component.html)
50
- * [🦁 External UI Components](https://nocode-js.github.io/sequential-workflow-designer-pro-demo/demos/webpack-pro-app/public/external-ui-components.html)
51
- * [👋 Custom Dragged Component](https://nocode-js.github.io/sequential-workflow-designer-pro-demo/demos/webpack-pro-app/public/custom-dragged-component.html)
52
- * [🔰 Badges](https://nocode-js.github.io/sequential-workflow-designer-pro-demo/demos/webpack-pro-app/public/badges.html)
53
- * [🎩 Custom Viewport](https://nocode-js.github.io/sequential-workflow-designer-pro-demo/demos/webpack-pro-app/public/custom-viewport.html)
54
- * [🛎 Clickable Placeholder](https://nocode-js.github.io/sequential-workflow-designer-pro-demo/demos/webpack-pro-app/public/clickable-placeholder.html)
42
+ * [🤩 Pro Components](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/pro-components.html)
43
+ * [🍬 Custom Theme Flat](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/custom-theme-flat.html)
44
+ * [🌹 Custom Step Types](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/custom-step-types.html)
45
+ * [👈 Goto](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/goto.html)
46
+ * [📁 Folders](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/folders.html)
47
+ * [⭕ Wheel Mode](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/wheel-mode.html)
48
+ * [💠 Grid](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/grid.html)
49
+ * [🐭 Minimal Root Component](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/minimal-root-component.html)
50
+ * [🦁 External UI Components](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/external-ui-components.html)
51
+ * [👋 Custom Dragged Component](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/custom-dragged-component.html)
52
+ * [🔰 Badges](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/badges.html)
53
+ * [🎩 Custom Viewport](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/custom-viewport.html)
54
+ * [🛎 Clickable Placeholder](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/clickable-placeholder.html)
55
+ * [React Pro Demo](https://nocode-js.com/examples/sequential-workflow-designer-pro/react-pro-app/build/index.html)
56
+ * [Angular Pro Demo](https://nocode-js.com/examples/sequential-workflow-designer-pro/angular-pro-app/angular-app/index.html)
55
57
 
56
58
  ## 👩‍💻 Integrations
57
59
 
@@ -96,10 +98,10 @@ Add the below code to your head section in HTML document.
96
98
  ```html
97
99
  <head>
98
100
  ...
99
- <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.18.3/css/designer.css" rel="stylesheet">
100
- <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.18.3/css/designer-light.css" rel="stylesheet">
101
- <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.18.3/css/designer-dark.css" rel="stylesheet">
102
- <script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.18.3/dist/index.umd.js"></script>
101
+ <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.18.5/css/designer.css" rel="stylesheet">
102
+ <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.18.5/css/designer-light.css" rel="stylesheet">
103
+ <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.18.5/css/designer-dark.css" rel="stylesheet">
104
+ <script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.18.5/dist/index.umd.js"></script>
103
105
  ```
104
106
 
105
107
  Call the designer by:
package/css/designer.css CHANGED
@@ -35,6 +35,7 @@
35
35
  z-index: 20;
36
36
  box-sizing: border-box;
37
37
  width: 130px;
38
+ -webkit-user-select: none;
38
39
  user-select: none;
39
40
  }
40
41
 
@@ -247,6 +248,7 @@
247
248
  flex: 1;
248
249
  position: relative;
249
250
  display: block;
251
+ -webkit-user-select: none;
250
252
  user-select: none;
251
253
  }
252
254
 
package/dist/index.umd.js CHANGED
@@ -4,94 +4,6 @@
4
4
  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.sequentialWorkflowDesigner = {}));
5
5
  })(this, (function (exports) { 'use strict';
6
6
 
7
- class ControlBarApi {
8
- constructor(state, historyController, definitionModifier, viewportApi) {
9
- this.state = state;
10
- this.historyController = historyController;
11
- this.definitionModifier = definitionModifier;
12
- this.viewportApi = viewportApi;
13
- }
14
- /**
15
- * @deprecated Don't use this method
16
- */
17
- subscribe(handler) {
18
- // TODO: this should be refactored
19
- this.state.onIsReadonlyChanged.subscribe(handler);
20
- this.state.onSelectedStepIdChanged.subscribe(handler);
21
- this.state.onIsDragDisabledChanged.subscribe(handler);
22
- if (this.isUndoRedoSupported()) {
23
- this.state.onDefinitionChanged.subscribe(handler);
24
- }
25
- }
26
- resetViewport() {
27
- this.viewportApi.resetViewport();
28
- }
29
- zoomIn() {
30
- this.viewportApi.zoom(true);
31
- }
32
- zoomOut() {
33
- this.viewportApi.zoom(false);
34
- }
35
- isDragDisabled() {
36
- return this.state.isDragDisabled;
37
- }
38
- toggleIsDragDisabled() {
39
- this.state.toggleIsDragDisabled();
40
- }
41
- isUndoRedoSupported() {
42
- return !!this.historyController;
43
- }
44
- tryUndo() {
45
- if (this.canUndo() && this.historyController) {
46
- this.historyController.undo();
47
- return true;
48
- }
49
- return false;
50
- }
51
- canUndo() {
52
- return !!this.historyController && this.historyController.canUndo() && !this.state.isReadonly && !this.state.isDragging;
53
- }
54
- tryRedo() {
55
- if (this.canRedo() && this.historyController) {
56
- this.historyController.redo();
57
- return true;
58
- }
59
- return false;
60
- }
61
- canRedo() {
62
- return !!this.historyController && this.historyController.canRedo() && !this.state.isReadonly && !this.state.isDragging;
63
- }
64
- tryDelete() {
65
- if (this.canDelete() && this.state.selectedStepId) {
66
- this.definitionModifier.tryDelete(this.state.selectedStepId);
67
- return true;
68
- }
69
- return false;
70
- }
71
- canDelete() {
72
- return (!!this.state.selectedStepId &&
73
- !this.state.isReadonly &&
74
- !this.state.isDragging &&
75
- this.definitionModifier.isDeletable(this.state.selectedStepId));
76
- }
77
- }
78
-
79
- exports.KeyboardAction = void 0;
80
- (function (KeyboardAction) {
81
- KeyboardAction["delete"] = "delete";
82
- })(exports.KeyboardAction || (exports.KeyboardAction = {}));
83
- exports.DefinitionChangeType = void 0;
84
- (function (DefinitionChangeType) {
85
- DefinitionChangeType[DefinitionChangeType["stepNameChanged"] = 1] = "stepNameChanged";
86
- DefinitionChangeType[DefinitionChangeType["stepPropertyChanged"] = 2] = "stepPropertyChanged";
87
- DefinitionChangeType[DefinitionChangeType["stepChildrenChanged"] = 3] = "stepChildrenChanged";
88
- DefinitionChangeType[DefinitionChangeType["stepDeleted"] = 4] = "stepDeleted";
89
- DefinitionChangeType[DefinitionChangeType["stepMoved"] = 5] = "stepMoved";
90
- DefinitionChangeType[DefinitionChangeType["stepInserted"] = 6] = "stepInserted";
91
- DefinitionChangeType[DefinitionChangeType["rootPropertyChanged"] = 7] = "rootPropertyChanged";
92
- DefinitionChangeType[DefinitionChangeType["rootReplaced"] = 8] = "rootReplaced";
93
- })(exports.DefinitionChangeType || (exports.DefinitionChangeType = {}));
94
-
95
7
  class Dom {
96
8
  static svg(name, attributes) {
97
9
  const element = document.createElementNS('http://www.w3.org/2000/svg', name);
@@ -221,6 +133,11 @@
221
133
  class SimpleEvent {
222
134
  constructor() {
223
135
  this.listeners = [];
136
+ this.forward = (value) => {
137
+ if (this.listeners.length > 0) {
138
+ this.listeners.forEach(listener => listener(value));
139
+ }
140
+ };
224
141
  }
225
142
  subscribe(listener) {
226
143
  this.listeners.push(listener);
@@ -234,14 +151,18 @@
234
151
  throw new Error('Unknown listener');
235
152
  }
236
153
  }
237
- forward(value) {
238
- if (this.listeners.length > 0) {
239
- this.listeners.forEach(listener => listener(value));
240
- }
241
- }
242
154
  count() {
243
155
  return this.listeners.length;
244
156
  }
157
+ first() {
158
+ return new Promise(resolve => {
159
+ const handler = (value) => {
160
+ this.unsubscribe(handler);
161
+ resolve(value);
162
+ };
163
+ this.subscribe(handler);
164
+ });
165
+ }
245
166
  }
246
167
 
247
168
  function race(timeout, a, b, c) {
@@ -274,6 +195,99 @@
274
195
  return result;
275
196
  }
276
197
 
198
+ class ControlBarApi {
199
+ static create(state, historyController, definitionModifier, viewportApi) {
200
+ const api = new ControlBarApi(state, historyController, definitionModifier, viewportApi);
201
+ state.onIsReadonlyChanged.subscribe(api.onStateChanged.forward);
202
+ state.onSelectedStepIdChanged.subscribe(api.onStateChanged.forward);
203
+ state.onIsDragDisabledChanged.subscribe(api.onStateChanged.forward);
204
+ if (api.isUndoRedoSupported()) {
205
+ state.onDefinitionChanged.subscribe(api.onStateChanged.forward);
206
+ }
207
+ return api;
208
+ }
209
+ constructor(state, historyController, definitionModifier, viewportApi) {
210
+ this.state = state;
211
+ this.historyController = historyController;
212
+ this.definitionModifier = definitionModifier;
213
+ this.viewportApi = viewportApi;
214
+ this.onStateChanged = new SimpleEvent();
215
+ }
216
+ /**
217
+ * @deprecated Don't use this method
218
+ */
219
+ subscribe(handler) {
220
+ this.onStateChanged.subscribe(handler);
221
+ }
222
+ resetViewport() {
223
+ this.viewportApi.resetViewport();
224
+ }
225
+ zoomIn() {
226
+ this.viewportApi.zoom(true);
227
+ }
228
+ zoomOut() {
229
+ this.viewportApi.zoom(false);
230
+ }
231
+ isDragDisabled() {
232
+ return this.state.isDragDisabled;
233
+ }
234
+ toggleIsDragDisabled() {
235
+ this.state.toggleIsDragDisabled();
236
+ }
237
+ isUndoRedoSupported() {
238
+ return !!this.historyController;
239
+ }
240
+ tryUndo() {
241
+ if (this.canUndo() && this.historyController) {
242
+ this.historyController.undo();
243
+ return true;
244
+ }
245
+ return false;
246
+ }
247
+ canUndo() {
248
+ return !!this.historyController && this.historyController.canUndo() && !this.state.isReadonly && !this.state.isDragging;
249
+ }
250
+ tryRedo() {
251
+ if (this.canRedo() && this.historyController) {
252
+ this.historyController.redo();
253
+ return true;
254
+ }
255
+ return false;
256
+ }
257
+ canRedo() {
258
+ return !!this.historyController && this.historyController.canRedo() && !this.state.isReadonly && !this.state.isDragging;
259
+ }
260
+ tryDelete() {
261
+ if (this.canDelete() && this.state.selectedStepId) {
262
+ this.definitionModifier.tryDelete(this.state.selectedStepId);
263
+ return true;
264
+ }
265
+ return false;
266
+ }
267
+ canDelete() {
268
+ return (!!this.state.selectedStepId &&
269
+ !this.state.isReadonly &&
270
+ !this.state.isDragging &&
271
+ this.definitionModifier.isDeletable(this.state.selectedStepId));
272
+ }
273
+ }
274
+
275
+ exports.KeyboardAction = void 0;
276
+ (function (KeyboardAction) {
277
+ KeyboardAction["delete"] = "delete";
278
+ })(exports.KeyboardAction || (exports.KeyboardAction = {}));
279
+ exports.DefinitionChangeType = void 0;
280
+ (function (DefinitionChangeType) {
281
+ DefinitionChangeType[DefinitionChangeType["stepNameChanged"] = 1] = "stepNameChanged";
282
+ DefinitionChangeType[DefinitionChangeType["stepPropertyChanged"] = 2] = "stepPropertyChanged";
283
+ DefinitionChangeType[DefinitionChangeType["stepChildrenChanged"] = 3] = "stepChildrenChanged";
284
+ DefinitionChangeType[DefinitionChangeType["stepDeleted"] = 4] = "stepDeleted";
285
+ DefinitionChangeType[DefinitionChangeType["stepMoved"] = 5] = "stepMoved";
286
+ DefinitionChangeType[DefinitionChangeType["stepInserted"] = 6] = "stepInserted";
287
+ DefinitionChangeType[DefinitionChangeType["rootPropertyChanged"] = 7] = "rootPropertyChanged";
288
+ DefinitionChangeType[DefinitionChangeType["rootReplaced"] = 8] = "rootReplaced";
289
+ })(exports.DefinitionChangeType || (exports.DefinitionChangeType = {}));
290
+
277
291
  class EditorRenderer {
278
292
  static create(state, definitionWalker, handler) {
279
293
  const raceEvent = race(0, state.onDefinitionChanged, state.onSelectedStepIdChanged, state.onIsReadonlyChanged);
@@ -374,13 +388,13 @@
374
388
  constructor(state, definitionWalker) {
375
389
  this.state = state;
376
390
  this.definitionWalker = definitionWalker;
391
+ this.onStateChanged = race(0, this.state.onFolderPathChanged, this.state.onDefinitionChanged);
377
392
  }
378
393
  /**
379
394
  * @deprecated Don't use this method
380
395
  */
381
396
  subscribe(handler) {
382
- // TODO: this should be refactored
383
- race(0, this.state.onFolderPathChanged, this.state.onDefinitionChanged).subscribe(handler);
397
+ this.onStateChanged.subscribe(handler);
384
398
  }
385
399
  setFolderPath(path) {
386
400
  this.state.setFolderPath(path);
@@ -700,7 +714,7 @@
700
714
  const viewportController = context.services.viewportController.create(workspace);
701
715
  const viewport = new ViewportApi(context.workspaceController, viewportController);
702
716
  const toolboxDataProvider = new ToolboxDataProvider(context.componentContext.iconProvider, context.configuration.toolbox);
703
- return new DesignerApi(new ControlBarApi(context.state, context.historyController, context.definitionModifier, viewport), new ToolboxApi(context.state, context, context.behaviorController, toolboxDataProvider, context.configuration.uidGenerator), new EditorApi(context.state, context.definitionWalker, context.definitionModifier), workspace, viewport, new PathBarApi(context.state, context.definitionWalker));
717
+ return new DesignerApi(ControlBarApi.create(context.state, context.historyController, context.definitionModifier, viewport), new ToolboxApi(context.state, context, context.behaviorController, toolboxDataProvider, context.configuration.uidGenerator), new EditorApi(context.state, context.definitionWalker, context.definitionModifier), workspace, viewport, new PathBarApi(context.state, context.definitionWalker));
704
718
  }
705
719
  constructor(controlBar, toolbox, editor, workspace, viewport, pathBar) {
706
720
  this.controlBar = controlBar;
@@ -2443,11 +2457,11 @@
2443
2457
  };
2444
2458
  const controller = new HistoryController(stack, state, definitionModifier, configuration.undoStackSize);
2445
2459
  if (!initialStack) {
2446
- controller.remember(exports.DefinitionChangeType.rootReplaced, null);
2460
+ controller.rememberCurrent(exports.DefinitionChangeType.rootReplaced, null);
2447
2461
  }
2448
2462
  state.onDefinitionChanged.subscribe(event => {
2449
2463
  if (event.changeType !== exports.DefinitionChangeType.rootReplaced) {
2450
- controller.remember(event.changeType, event.stepId);
2464
+ controller.rememberCurrent(event.changeType, event.stepId);
2451
2465
  }
2452
2466
  });
2453
2467
  return controller;
@@ -2475,8 +2489,18 @@
2475
2489
  dump() {
2476
2490
  return Object.assign({}, this.stack);
2477
2491
  }
2478
- remember(changeType, stepId) {
2479
- const definition = ObjectCloner.deepClone(this.state.definition);
2492
+ replaceDefinition(definition) {
2493
+ if (definition == this.state.definition) {
2494
+ throw new Error('Cannot use the same instance of definition');
2495
+ }
2496
+ this.remember(definition, exports.DefinitionChangeType.rootReplaced, null);
2497
+ this.commit();
2498
+ }
2499
+ rememberCurrent(changeType, stepId) {
2500
+ this.remember(this.state.definition, changeType, stepId);
2501
+ }
2502
+ remember(sourceDefinition, changeType, stepId) {
2503
+ const definition = ObjectCloner.deepClone(sourceDefinition);
2480
2504
  if (this.stack.items.length > 0 && this.stack.index === this.stack.items.length) {
2481
2505
  const lastItem = this.stack.items[this.stack.items.length - 1];
2482
2506
  if (areItemsEqual(lastItem, changeType, stepId)) {
@@ -2501,7 +2525,7 @@
2501
2525
  }
2502
2526
  }
2503
2527
  function areItemsEqual(item, changeType, stepId) {
2504
- return item.changeType === changeType && item.stepId === stepId;
2528
+ return changeType !== exports.DefinitionChangeType.rootReplaced && item.changeType === changeType && item.stepId === stepId;
2505
2529
  }
2506
2530
 
2507
2531
  class LayoutController {
@@ -2592,6 +2616,31 @@
2592
2616
  }
2593
2617
  }
2594
2618
 
2619
+ /******************************************************************************
2620
+ Copyright (c) Microsoft Corporation.
2621
+
2622
+ Permission to use, copy, modify, and/or distribute this software for any
2623
+ purpose with or without fee is hereby granted.
2624
+
2625
+ THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
2626
+ REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
2627
+ AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
2628
+ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
2629
+ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
2630
+ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
2631
+ PERFORMANCE OF THIS SOFTWARE.
2632
+ ***************************************************************************** */
2633
+
2634
+ function __awaiter(thisArg, _arguments, P, generator) {
2635
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
2636
+ return new (P || (P = Promise))(function (resolve, reject) {
2637
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
2638
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
2639
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
2640
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
2641
+ });
2642
+ }
2643
+
2595
2644
  function isElementAttached(element) {
2596
2645
  return !(document.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_DISCONNECTED);
2597
2646
  }
@@ -3046,7 +3095,6 @@
3046
3095
  setTimeout(() => {
3047
3096
  workspace.updateRootComponent();
3048
3097
  api.viewport.resetViewport();
3049
- workspace.onReady.forward();
3050
3098
  });
3051
3099
  designerContext.setWorkspaceController(workspace);
3052
3100
  designerContext.state.onViewportChanged.subscribe(vp => workspace.onViewportChanged(vp));
@@ -3069,7 +3117,7 @@
3069
3117
  this.clickBehaviorResolver = clickBehaviorResolver;
3070
3118
  this.viewportApi = viewportApi;
3071
3119
  this.services = services;
3072
- this.onReady = new SimpleEvent();
3120
+ this.onRendered = new SimpleEvent();
3073
3121
  this.isValid = false;
3074
3122
  this.selectedStepComponent = null;
3075
3123
  this.validationErrorBadgeIndex = null;
@@ -3098,6 +3146,7 @@
3098
3146
  this.view.render(sequence, parentSequencePlaceIndicator);
3099
3147
  this.trySelectStepComponent(this.state.selectedStepId);
3100
3148
  this.updateBadges();
3149
+ this.onRendered.forward();
3101
3150
  }
3102
3151
  updateBadges() {
3103
3152
  const result = BadgesResultFactory.create(this.services);
@@ -3393,7 +3442,7 @@
3393
3442
  view.bindZoomOutButtonClick(() => bar.onZoomOutButtonClicked());
3394
3443
  view.bindDisableDragButtonClick(() => bar.onMoveButtonClicked());
3395
3444
  view.bindDeleteButtonClick(() => bar.onDeleteButtonClicked());
3396
- api.controlBar.subscribe(() => bar.refreshButtons());
3445
+ api.controlBar.onStateChanged.subscribe(() => bar.refreshButtons());
3397
3446
  if (isUndoRedoSupported) {
3398
3447
  view.bindUndoButtonClick(() => bar.onUndoButtonClicked());
3399
3448
  view.bindRedoButtonClick(() => bar.onRedoButtonClicked());
@@ -4348,7 +4397,7 @@
4348
4397
  const designerApi = DesignerApi.create(designerContext);
4349
4398
  const view = DesignerView.create(placeholder, designerContext, designerApi);
4350
4399
  const designer = new Designer(view, designerContext.state, designerContext.definitionWalker, designerContext.historyController, designerApi);
4351
- view.workspace.onReady.subscribe(() => designer.onReady.forward());
4400
+ view.workspace.onRendered.first().then(designer.onReady.forward);
4352
4401
  race(0, designerContext.state.onDefinitionChanged, designerContext.state.onSelectedStepIdChanged).subscribe(([definition, selectedStepId]) => {
4353
4402
  if (definition !== undefined) {
4354
4403
  designer.onDefinitionChanged.forward(designerContext.state.definition);
@@ -4357,15 +4406,9 @@
4357
4406
  designer.onSelectedStepIdChanged.forward(designerContext.state.selectedStepId);
4358
4407
  }
4359
4408
  });
4360
- designerContext.state.onViewportChanged.subscribe(viewPort => {
4361
- designer.onViewportChanged.forward(viewPort);
4362
- });
4363
- designerContext.state.onIsToolboxCollapsedChanged.subscribe(isCollapsed => {
4364
- designer.onIsToolboxCollapsedChanged.forward(isCollapsed);
4365
- });
4366
- designerContext.state.onIsEditorCollapsedChanged.subscribe(isCollapsed => {
4367
- designer.onIsEditorCollapsedChanged.forward(isCollapsed);
4368
- });
4409
+ designerContext.state.onViewportChanged.subscribe(designer.onViewportChanged.forward);
4410
+ designerContext.state.onIsToolboxCollapsedChanged.subscribe(designer.onIsToolboxCollapsedChanged.forward);
4411
+ designerContext.state.onIsEditorCollapsedChanged.subscribe(designer.onIsEditorCollapsedChanged.forward);
4369
4412
  return designer;
4370
4413
  }
4371
4414
  constructor(view, state, walker, historyController, api) {
@@ -4506,10 +4549,20 @@
4506
4549
  * @description Dump the undo stack.
4507
4550
  */
4508
4551
  dumpUndoStack() {
4509
- if (!this.historyController) {
4510
- throw new Error('Undo feature is not activated');
4511
- }
4512
- return this.historyController.dump();
4552
+ return this.getHistoryController().dump();
4553
+ }
4554
+ /**
4555
+ * Replaces the current definition with a new one and adds the previous definition to the undo stack.
4556
+ * @param definition A new definition.
4557
+ */
4558
+ replaceDefinition(definition) {
4559
+ return __awaiter(this, void 0, void 0, function* () {
4560
+ this.getHistoryController().replaceDefinition(definition);
4561
+ yield Promise.all([
4562
+ this.view.workspace.onRendered.first(),
4563
+ this.onDefinitionChanged.first()
4564
+ ]);
4565
+ });
4513
4566
  }
4514
4567
  /**
4515
4568
  * @param needle A step, a sequence or a step id.
@@ -4530,6 +4583,12 @@
4530
4583
  destroy() {
4531
4584
  this.view.destroy();
4532
4585
  }
4586
+ getHistoryController() {
4587
+ if (!this.historyController) {
4588
+ throw new Error('Undo feature is not activated');
4589
+ }
4590
+ return this.historyController;
4591
+ }
4533
4592
  }
4534
4593
 
4535
4594
  class LineGridDesignerExtension {