sequential-workflow-designer 0.16.9 → 0.17.0

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 (6) hide show
  1. package/README.md +8 -8
  2. package/dist/index.umd.js +66 -37
  3. package/lib/cjs/index.cjs +66 -37
  4. package/lib/esm/index.js +66 -37
  5. package/lib/index.d.ts +27 -15
  6. package/package.json +1 -1
package/README.md CHANGED
@@ -96,10 +96,10 @@ Add the below code to your head section in HTML document.
96
96
  ```html
97
97
  <head>
98
98
  ...
99
- <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.9/css/designer.css" rel="stylesheet">
100
- <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.9/css/designer-light.css" rel="stylesheet">
101
- <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.9/css/designer-dark.css" rel="stylesheet">
102
- <script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.9/dist/index.umd.js"></script>
99
+ <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.17.0/css/designer.css" rel="stylesheet">
100
+ <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.17.0/css/designer-light.css" rel="stylesheet">
101
+ <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.17.0/css/designer-dark.css" rel="stylesheet">
102
+ <script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.17.0/dist/index.umd.js"></script>
103
103
  ```
104
104
 
105
105
  Call the designer by:
@@ -120,10 +120,10 @@ const placeholder = document.getElementById('placeholder');
120
120
  const definition = {
121
121
  properties: {
122
122
  'myProperty': 'my-value',
123
- // global properties...
123
+ // root properties...
124
124
  },
125
125
  sequence: [
126
- // root steps...
126
+ // steps...
127
127
  ]
128
128
  };
129
129
 
@@ -190,12 +190,12 @@ const configuration = {
190
190
 
191
191
  editors: {
192
192
  isCollapsed: false,
193
- globalEditorProvider: (definition, globalContext) => {
193
+ rootEditorProvider: (definition, rootContext, isReadonly) => {
194
194
  const editor = document.createElement('div');
195
195
  // ...
196
196
  return editor;
197
197
  },
198
- stepEditorProvider: (step, stepContext, definition) => {
198
+ stepEditorProvider: (step, stepContext, definition, isReadonly) => {
199
199
  const editor = document.createElement('div');
200
200
  // ...
201
201
  return editor;
package/dist/index.umd.js CHANGED
@@ -88,7 +88,7 @@
88
88
  DefinitionChangeType[DefinitionChangeType["stepDeleted"] = 4] = "stepDeleted";
89
89
  DefinitionChangeType[DefinitionChangeType["stepMoved"] = 5] = "stepMoved";
90
90
  DefinitionChangeType[DefinitionChangeType["stepInserted"] = 6] = "stepInserted";
91
- DefinitionChangeType[DefinitionChangeType["globalPropertyChanged"] = 7] = "globalPropertyChanged";
91
+ DefinitionChangeType[DefinitionChangeType["rootPropertyChanged"] = 7] = "rootPropertyChanged";
92
92
  DefinitionChangeType[DefinitionChangeType["rootReplaced"] = 8] = "rootReplaced";
93
93
  })(exports.DefinitionChangeType || (exports.DefinitionChangeType = {}));
94
94
 
@@ -271,49 +271,48 @@
271
271
 
272
272
  class EditorRenderer {
273
273
  static create(state, definitionWalker, handler) {
274
- const listener = new EditorRenderer(state, definitionWalker, handler);
275
- race(0, state.onDefinitionChanged, state.onSelectedStepIdChanged).subscribe(r => {
276
- const [definitionChanged, selectedStepId] = r;
277
- if (definitionChanged) {
278
- listener.onDefinitionChanged(definitionChanged);
279
- }
280
- else if (selectedStepId !== undefined) {
281
- listener.onSelectedStepIdChanged(selectedStepId);
282
- }
283
- });
284
- listener.tryRender(state.selectedStepId);
274
+ const raceEvent = race(0, state.onDefinitionChanged, state.onSelectedStepIdChanged, state.onIsReadonlyChanged);
275
+ const listener = new EditorRenderer(state, definitionWalker, handler, raceEvent);
276
+ raceEvent.subscribe(listener.raceEventHandler);
277
+ listener.renderIfStepChanged(state.selectedStepId);
285
278
  return listener;
286
279
  }
287
- constructor(state, definitionWalker, handler) {
280
+ constructor(state, definitionWalker, handler, raceEvent) {
288
281
  this.state = state;
289
282
  this.definitionWalker = definitionWalker;
290
283
  this.handler = handler;
284
+ this.raceEvent = raceEvent;
291
285
  this.currentStepId = undefined;
286
+ this.raceEventHandler = ([definitionChanged, selectedStepId, isReadonlyChanged]) => {
287
+ if (isReadonlyChanged !== undefined) {
288
+ this.render(this.state.selectedStepId);
289
+ }
290
+ else if (definitionChanged) {
291
+ if (definitionChanged.changeType === exports.DefinitionChangeType.rootReplaced) {
292
+ this.render(this.state.selectedStepId);
293
+ }
294
+ else {
295
+ this.renderIfStepChanged(this.state.selectedStepId);
296
+ }
297
+ }
298
+ else if (selectedStepId !== undefined) {
299
+ this.renderIfStepChanged(selectedStepId);
300
+ }
301
+ };
292
302
  }
293
303
  destroy() {
294
- // TODO: unsubscribe from events
304
+ this.raceEvent.unsubscribe(this.raceEventHandler);
295
305
  }
296
306
  render(stepId) {
297
307
  const step = stepId ? this.definitionWalker.getById(this.state.definition, stepId) : null;
298
308
  this.currentStepId = stepId;
299
309
  this.handler(step);
300
310
  }
301
- tryRender(stepId) {
311
+ renderIfStepChanged(stepId) {
302
312
  if (this.currentStepId !== stepId) {
303
313
  this.render(stepId);
304
314
  }
305
315
  }
306
- onDefinitionChanged(event) {
307
- if (event.changeType === exports.DefinitionChangeType.rootReplaced) {
308
- this.render(this.state.selectedStepId);
309
- }
310
- else {
311
- this.tryRender(this.state.selectedStepId);
312
- }
313
- }
314
- onSelectedStepIdChanged(stepId) {
315
- this.tryRender(stepId);
316
- }
317
316
  }
318
317
 
319
318
  class EditorApi {
@@ -325,6 +324,9 @@
325
324
  isCollapsed() {
326
325
  return this.state.isEditorCollapsed;
327
326
  }
327
+ isReadonly() {
328
+ return this.state.isReadonly;
329
+ }
328
330
  toggleIsCollapsed() {
329
331
  this.state.setIsEditorCollapsed(!this.state.isEditorCollapsed);
330
332
  }
@@ -354,10 +356,10 @@
354
356
  }
355
357
  };
356
358
  }
357
- createGlobalEditorContext() {
359
+ createRootEditorContext() {
358
360
  return {
359
361
  notifyPropertiesChanged: () => {
360
- this.state.notifyDefinitionChanged(exports.DefinitionChangeType.globalPropertyChanged, null);
362
+ this.state.notifyDefinitionChanged(exports.DefinitionChangeType.rootPropertyChanged, null);
361
363
  }
362
364
  };
363
365
  }
@@ -974,7 +976,7 @@
974
976
  }
975
977
 
976
978
  class Editor {
977
- static create(parent, api, stepEditorClassName, stepEditorProvider, globalEditorClassName, globalEditorProvider) {
979
+ static create(parent, api, stepEditorClassName, stepEditorProvider, rootEditorClassName, rootEditorProvider) {
978
980
  const view = EditorView.create(parent);
979
981
  function render(step) {
980
982
  const definition = api.getDefinition();
@@ -982,13 +984,13 @@
982
984
  let className;
983
985
  if (step) {
984
986
  const stepContext = api.createStepEditorContext(step.id);
985
- content = stepEditorProvider(step, stepContext, definition);
987
+ content = stepEditorProvider(step, stepContext, definition, api.isReadonly());
986
988
  className = stepEditorClassName;
987
989
  }
988
990
  else {
989
- const globalContext = api.createGlobalEditorContext();
990
- content = globalEditorProvider(definition, globalContext);
991
- className = globalEditorClassName;
991
+ const rootContext = api.createRootEditorContext();
992
+ content = rootEditorProvider(definition, rootContext, api.isReadonly());
993
+ className = rootEditorClassName;
992
994
  }
993
995
  view.setContent(content, className);
994
996
  }
@@ -3521,7 +3523,10 @@
3521
3523
  });
3522
3524
  parent.appendChild(toggle);
3523
3525
  parent.appendChild(root);
3524
- const editor = Editor.create(root, api, 'sqd-editor sqd-step-editor', configuration.stepEditorProvider, 'sqd-editor sqd-global-editor', configuration.globalEditorProvider);
3526
+ if (configuration.globalEditorProvider) {
3527
+ throw new Error('globalEditorProvider is renamed to rootEditorProvider');
3528
+ }
3529
+ const editor = Editor.create(root, api, 'sqd-editor sqd-step-editor', configuration.stepEditorProvider, 'sqd-editor sqd-root-editor', configuration.rootEditorProvider);
3525
3530
  return new SmartEditorView(root, toggle, editor);
3526
3531
  }
3527
3532
  constructor(root, toggle, editor) {
@@ -4341,10 +4346,17 @@
4341
4346
  const view = DesignerView.create(placeholder, designerContext, designerApi);
4342
4347
  const designer = new Designer(view, designerContext.state, designerContext.definitionWalker, designerContext.historyController, designerApi);
4343
4348
  view.workspace.onReady.subscribe(() => designer.onReady.forward());
4344
- designerContext.state.onDefinitionChanged.subscribe(() => {
4345
- setTimeout(() => designer.onDefinitionChanged.forward(designerContext.state.definition));
4349
+ race(0, designerContext.state.onDefinitionChanged, designerContext.state.onSelectedStepIdChanged).subscribe(([definition, selectedStepId]) => {
4350
+ if (definition !== undefined) {
4351
+ designer.onDefinitionChanged.forward(designerContext.state.definition);
4352
+ }
4353
+ if (selectedStepId !== undefined) {
4354
+ designer.onSelectedStepIdChanged.forward(designerContext.state.selectedStepId);
4355
+ }
4356
+ });
4357
+ designerContext.state.onViewportChanged.subscribe(viewPort => {
4358
+ designer.onViewportChanged.forward(viewPort);
4346
4359
  });
4347
- designerContext.state.onSelectedStepIdChanged.subscribe(() => designer.onSelectedStepIdChanged.forward(designerContext.state.selectedStepId));
4348
4360
  designerContext.state.onIsToolboxCollapsedChanged.subscribe(isCollapsed => {
4349
4361
  designer.onIsToolboxCollapsedChanged.forward(isCollapsed);
4350
4362
  });
@@ -4367,6 +4379,10 @@
4367
4379
  * @description Fires when the definition has changed.
4368
4380
  */
4369
4381
  this.onDefinitionChanged = new SimpleEvent();
4382
+ /**
4383
+ * @description Fires when the viewport has changed.
4384
+ */
4385
+ this.onViewportChanged = new SimpleEvent();
4370
4386
  /**
4371
4387
  * @description Fires when the selected step has changed.
4372
4388
  */
@@ -4416,6 +4432,19 @@
4416
4432
  selectStepById(stepId) {
4417
4433
  this.state.setSelectedStepId(stepId);
4418
4434
  }
4435
+ /**
4436
+ * @returns the current viewport.
4437
+ */
4438
+ getViewport() {
4439
+ return this.state.viewport;
4440
+ }
4441
+ /**
4442
+ * @description Sets the viewport.
4443
+ * @param viewport Viewport.
4444
+ */
4445
+ setViewport(viewport) {
4446
+ this.state.setViewport(viewport);
4447
+ }
4419
4448
  /**
4420
4449
  * @description Unselects the selected step.
4421
4450
  */
package/lib/cjs/index.cjs CHANGED
@@ -86,7 +86,7 @@ exports.DefinitionChangeType = void 0;
86
86
  DefinitionChangeType[DefinitionChangeType["stepDeleted"] = 4] = "stepDeleted";
87
87
  DefinitionChangeType[DefinitionChangeType["stepMoved"] = 5] = "stepMoved";
88
88
  DefinitionChangeType[DefinitionChangeType["stepInserted"] = 6] = "stepInserted";
89
- DefinitionChangeType[DefinitionChangeType["globalPropertyChanged"] = 7] = "globalPropertyChanged";
89
+ DefinitionChangeType[DefinitionChangeType["rootPropertyChanged"] = 7] = "rootPropertyChanged";
90
90
  DefinitionChangeType[DefinitionChangeType["rootReplaced"] = 8] = "rootReplaced";
91
91
  })(exports.DefinitionChangeType || (exports.DefinitionChangeType = {}));
92
92
 
@@ -269,49 +269,48 @@ function race(timeout, a, b, c) {
269
269
 
270
270
  class EditorRenderer {
271
271
  static create(state, definitionWalker, handler) {
272
- const listener = new EditorRenderer(state, definitionWalker, handler);
273
- race(0, state.onDefinitionChanged, state.onSelectedStepIdChanged).subscribe(r => {
274
- const [definitionChanged, selectedStepId] = r;
275
- if (definitionChanged) {
276
- listener.onDefinitionChanged(definitionChanged);
277
- }
278
- else if (selectedStepId !== undefined) {
279
- listener.onSelectedStepIdChanged(selectedStepId);
280
- }
281
- });
282
- listener.tryRender(state.selectedStepId);
272
+ const raceEvent = race(0, state.onDefinitionChanged, state.onSelectedStepIdChanged, state.onIsReadonlyChanged);
273
+ const listener = new EditorRenderer(state, definitionWalker, handler, raceEvent);
274
+ raceEvent.subscribe(listener.raceEventHandler);
275
+ listener.renderIfStepChanged(state.selectedStepId);
283
276
  return listener;
284
277
  }
285
- constructor(state, definitionWalker, handler) {
278
+ constructor(state, definitionWalker, handler, raceEvent) {
286
279
  this.state = state;
287
280
  this.definitionWalker = definitionWalker;
288
281
  this.handler = handler;
282
+ this.raceEvent = raceEvent;
289
283
  this.currentStepId = undefined;
284
+ this.raceEventHandler = ([definitionChanged, selectedStepId, isReadonlyChanged]) => {
285
+ if (isReadonlyChanged !== undefined) {
286
+ this.render(this.state.selectedStepId);
287
+ }
288
+ else if (definitionChanged) {
289
+ if (definitionChanged.changeType === exports.DefinitionChangeType.rootReplaced) {
290
+ this.render(this.state.selectedStepId);
291
+ }
292
+ else {
293
+ this.renderIfStepChanged(this.state.selectedStepId);
294
+ }
295
+ }
296
+ else if (selectedStepId !== undefined) {
297
+ this.renderIfStepChanged(selectedStepId);
298
+ }
299
+ };
290
300
  }
291
301
  destroy() {
292
- // TODO: unsubscribe from events
302
+ this.raceEvent.unsubscribe(this.raceEventHandler);
293
303
  }
294
304
  render(stepId) {
295
305
  const step = stepId ? this.definitionWalker.getById(this.state.definition, stepId) : null;
296
306
  this.currentStepId = stepId;
297
307
  this.handler(step);
298
308
  }
299
- tryRender(stepId) {
309
+ renderIfStepChanged(stepId) {
300
310
  if (this.currentStepId !== stepId) {
301
311
  this.render(stepId);
302
312
  }
303
313
  }
304
- onDefinitionChanged(event) {
305
- if (event.changeType === exports.DefinitionChangeType.rootReplaced) {
306
- this.render(this.state.selectedStepId);
307
- }
308
- else {
309
- this.tryRender(this.state.selectedStepId);
310
- }
311
- }
312
- onSelectedStepIdChanged(stepId) {
313
- this.tryRender(stepId);
314
- }
315
314
  }
316
315
 
317
316
  class EditorApi {
@@ -323,6 +322,9 @@ class EditorApi {
323
322
  isCollapsed() {
324
323
  return this.state.isEditorCollapsed;
325
324
  }
325
+ isReadonly() {
326
+ return this.state.isReadonly;
327
+ }
326
328
  toggleIsCollapsed() {
327
329
  this.state.setIsEditorCollapsed(!this.state.isEditorCollapsed);
328
330
  }
@@ -352,10 +354,10 @@ class EditorApi {
352
354
  }
353
355
  };
354
356
  }
355
- createGlobalEditorContext() {
357
+ createRootEditorContext() {
356
358
  return {
357
359
  notifyPropertiesChanged: () => {
358
- this.state.notifyDefinitionChanged(exports.DefinitionChangeType.globalPropertyChanged, null);
360
+ this.state.notifyDefinitionChanged(exports.DefinitionChangeType.rootPropertyChanged, null);
359
361
  }
360
362
  };
361
363
  }
@@ -972,7 +974,7 @@ class EditorView {
972
974
  }
973
975
 
974
976
  class Editor {
975
- static create(parent, api, stepEditorClassName, stepEditorProvider, globalEditorClassName, globalEditorProvider) {
977
+ static create(parent, api, stepEditorClassName, stepEditorProvider, rootEditorClassName, rootEditorProvider) {
976
978
  const view = EditorView.create(parent);
977
979
  function render(step) {
978
980
  const definition = api.getDefinition();
@@ -980,13 +982,13 @@ class Editor {
980
982
  let className;
981
983
  if (step) {
982
984
  const stepContext = api.createStepEditorContext(step.id);
983
- content = stepEditorProvider(step, stepContext, definition);
985
+ content = stepEditorProvider(step, stepContext, definition, api.isReadonly());
984
986
  className = stepEditorClassName;
985
987
  }
986
988
  else {
987
- const globalContext = api.createGlobalEditorContext();
988
- content = globalEditorProvider(definition, globalContext);
989
- className = globalEditorClassName;
989
+ const rootContext = api.createRootEditorContext();
990
+ content = rootEditorProvider(definition, rootContext, api.isReadonly());
991
+ className = rootEditorClassName;
990
992
  }
991
993
  view.setContent(content, className);
992
994
  }
@@ -3336,7 +3338,10 @@ class SmartEditorView {
3336
3338
  });
3337
3339
  parent.appendChild(toggle);
3338
3340
  parent.appendChild(root);
3339
- const editor = Editor.create(root, api, 'sqd-editor sqd-step-editor', configuration.stepEditorProvider, 'sqd-editor sqd-global-editor', configuration.globalEditorProvider);
3341
+ if (configuration.globalEditorProvider) {
3342
+ throw new Error('globalEditorProvider is renamed to rootEditorProvider');
3343
+ }
3344
+ const editor = Editor.create(root, api, 'sqd-editor sqd-step-editor', configuration.stepEditorProvider, 'sqd-editor sqd-root-editor', configuration.rootEditorProvider);
3340
3345
  return new SmartEditorView(root, toggle, editor);
3341
3346
  }
3342
3347
  constructor(root, toggle, editor) {
@@ -4156,10 +4161,17 @@ class Designer {
4156
4161
  const view = DesignerView.create(placeholder, designerContext, designerApi);
4157
4162
  const designer = new Designer(view, designerContext.state, designerContext.definitionWalker, designerContext.historyController, designerApi);
4158
4163
  view.workspace.onReady.subscribe(() => designer.onReady.forward());
4159
- designerContext.state.onDefinitionChanged.subscribe(() => {
4160
- setTimeout(() => designer.onDefinitionChanged.forward(designerContext.state.definition));
4164
+ race(0, designerContext.state.onDefinitionChanged, designerContext.state.onSelectedStepIdChanged).subscribe(([definition, selectedStepId]) => {
4165
+ if (definition !== undefined) {
4166
+ designer.onDefinitionChanged.forward(designerContext.state.definition);
4167
+ }
4168
+ if (selectedStepId !== undefined) {
4169
+ designer.onSelectedStepIdChanged.forward(designerContext.state.selectedStepId);
4170
+ }
4171
+ });
4172
+ designerContext.state.onViewportChanged.subscribe(viewPort => {
4173
+ designer.onViewportChanged.forward(viewPort);
4161
4174
  });
4162
- designerContext.state.onSelectedStepIdChanged.subscribe(() => designer.onSelectedStepIdChanged.forward(designerContext.state.selectedStepId));
4163
4175
  designerContext.state.onIsToolboxCollapsedChanged.subscribe(isCollapsed => {
4164
4176
  designer.onIsToolboxCollapsedChanged.forward(isCollapsed);
4165
4177
  });
@@ -4182,6 +4194,10 @@ class Designer {
4182
4194
  * @description Fires when the definition has changed.
4183
4195
  */
4184
4196
  this.onDefinitionChanged = new SimpleEvent();
4197
+ /**
4198
+ * @description Fires when the viewport has changed.
4199
+ */
4200
+ this.onViewportChanged = new SimpleEvent();
4185
4201
  /**
4186
4202
  * @description Fires when the selected step has changed.
4187
4203
  */
@@ -4231,6 +4247,19 @@ class Designer {
4231
4247
  selectStepById(stepId) {
4232
4248
  this.state.setSelectedStepId(stepId);
4233
4249
  }
4250
+ /**
4251
+ * @returns the current viewport.
4252
+ */
4253
+ getViewport() {
4254
+ return this.state.viewport;
4255
+ }
4256
+ /**
4257
+ * @description Sets the viewport.
4258
+ * @param viewport Viewport.
4259
+ */
4260
+ setViewport(viewport) {
4261
+ this.state.setViewport(viewport);
4262
+ }
4234
4263
  /**
4235
4264
  * @description Unselects the selected step.
4236
4265
  */
package/lib/esm/index.js CHANGED
@@ -85,7 +85,7 @@ var DefinitionChangeType;
85
85
  DefinitionChangeType[DefinitionChangeType["stepDeleted"] = 4] = "stepDeleted";
86
86
  DefinitionChangeType[DefinitionChangeType["stepMoved"] = 5] = "stepMoved";
87
87
  DefinitionChangeType[DefinitionChangeType["stepInserted"] = 6] = "stepInserted";
88
- DefinitionChangeType[DefinitionChangeType["globalPropertyChanged"] = 7] = "globalPropertyChanged";
88
+ DefinitionChangeType[DefinitionChangeType["rootPropertyChanged"] = 7] = "rootPropertyChanged";
89
89
  DefinitionChangeType[DefinitionChangeType["rootReplaced"] = 8] = "rootReplaced";
90
90
  })(DefinitionChangeType || (DefinitionChangeType = {}));
91
91
 
@@ -268,49 +268,48 @@ function race(timeout, a, b, c) {
268
268
 
269
269
  class EditorRenderer {
270
270
  static create(state, definitionWalker, handler) {
271
- const listener = new EditorRenderer(state, definitionWalker, handler);
272
- race(0, state.onDefinitionChanged, state.onSelectedStepIdChanged).subscribe(r => {
273
- const [definitionChanged, selectedStepId] = r;
274
- if (definitionChanged) {
275
- listener.onDefinitionChanged(definitionChanged);
276
- }
277
- else if (selectedStepId !== undefined) {
278
- listener.onSelectedStepIdChanged(selectedStepId);
279
- }
280
- });
281
- listener.tryRender(state.selectedStepId);
271
+ const raceEvent = race(0, state.onDefinitionChanged, state.onSelectedStepIdChanged, state.onIsReadonlyChanged);
272
+ const listener = new EditorRenderer(state, definitionWalker, handler, raceEvent);
273
+ raceEvent.subscribe(listener.raceEventHandler);
274
+ listener.renderIfStepChanged(state.selectedStepId);
282
275
  return listener;
283
276
  }
284
- constructor(state, definitionWalker, handler) {
277
+ constructor(state, definitionWalker, handler, raceEvent) {
285
278
  this.state = state;
286
279
  this.definitionWalker = definitionWalker;
287
280
  this.handler = handler;
281
+ this.raceEvent = raceEvent;
288
282
  this.currentStepId = undefined;
283
+ this.raceEventHandler = ([definitionChanged, selectedStepId, isReadonlyChanged]) => {
284
+ if (isReadonlyChanged !== undefined) {
285
+ this.render(this.state.selectedStepId);
286
+ }
287
+ else if (definitionChanged) {
288
+ if (definitionChanged.changeType === DefinitionChangeType.rootReplaced) {
289
+ this.render(this.state.selectedStepId);
290
+ }
291
+ else {
292
+ this.renderIfStepChanged(this.state.selectedStepId);
293
+ }
294
+ }
295
+ else if (selectedStepId !== undefined) {
296
+ this.renderIfStepChanged(selectedStepId);
297
+ }
298
+ };
289
299
  }
290
300
  destroy() {
291
- // TODO: unsubscribe from events
301
+ this.raceEvent.unsubscribe(this.raceEventHandler);
292
302
  }
293
303
  render(stepId) {
294
304
  const step = stepId ? this.definitionWalker.getById(this.state.definition, stepId) : null;
295
305
  this.currentStepId = stepId;
296
306
  this.handler(step);
297
307
  }
298
- tryRender(stepId) {
308
+ renderIfStepChanged(stepId) {
299
309
  if (this.currentStepId !== stepId) {
300
310
  this.render(stepId);
301
311
  }
302
312
  }
303
- onDefinitionChanged(event) {
304
- if (event.changeType === DefinitionChangeType.rootReplaced) {
305
- this.render(this.state.selectedStepId);
306
- }
307
- else {
308
- this.tryRender(this.state.selectedStepId);
309
- }
310
- }
311
- onSelectedStepIdChanged(stepId) {
312
- this.tryRender(stepId);
313
- }
314
313
  }
315
314
 
316
315
  class EditorApi {
@@ -322,6 +321,9 @@ class EditorApi {
322
321
  isCollapsed() {
323
322
  return this.state.isEditorCollapsed;
324
323
  }
324
+ isReadonly() {
325
+ return this.state.isReadonly;
326
+ }
325
327
  toggleIsCollapsed() {
326
328
  this.state.setIsEditorCollapsed(!this.state.isEditorCollapsed);
327
329
  }
@@ -351,10 +353,10 @@ class EditorApi {
351
353
  }
352
354
  };
353
355
  }
354
- createGlobalEditorContext() {
356
+ createRootEditorContext() {
355
357
  return {
356
358
  notifyPropertiesChanged: () => {
357
- this.state.notifyDefinitionChanged(DefinitionChangeType.globalPropertyChanged, null);
359
+ this.state.notifyDefinitionChanged(DefinitionChangeType.rootPropertyChanged, null);
358
360
  }
359
361
  };
360
362
  }
@@ -971,7 +973,7 @@ class EditorView {
971
973
  }
972
974
 
973
975
  class Editor {
974
- static create(parent, api, stepEditorClassName, stepEditorProvider, globalEditorClassName, globalEditorProvider) {
976
+ static create(parent, api, stepEditorClassName, stepEditorProvider, rootEditorClassName, rootEditorProvider) {
975
977
  const view = EditorView.create(parent);
976
978
  function render(step) {
977
979
  const definition = api.getDefinition();
@@ -979,13 +981,13 @@ class Editor {
979
981
  let className;
980
982
  if (step) {
981
983
  const stepContext = api.createStepEditorContext(step.id);
982
- content = stepEditorProvider(step, stepContext, definition);
984
+ content = stepEditorProvider(step, stepContext, definition, api.isReadonly());
983
985
  className = stepEditorClassName;
984
986
  }
985
987
  else {
986
- const globalContext = api.createGlobalEditorContext();
987
- content = globalEditorProvider(definition, globalContext);
988
- className = globalEditorClassName;
988
+ const rootContext = api.createRootEditorContext();
989
+ content = rootEditorProvider(definition, rootContext, api.isReadonly());
990
+ className = rootEditorClassName;
989
991
  }
990
992
  view.setContent(content, className);
991
993
  }
@@ -3335,7 +3337,10 @@ class SmartEditorView {
3335
3337
  });
3336
3338
  parent.appendChild(toggle);
3337
3339
  parent.appendChild(root);
3338
- const editor = Editor.create(root, api, 'sqd-editor sqd-step-editor', configuration.stepEditorProvider, 'sqd-editor sqd-global-editor', configuration.globalEditorProvider);
3340
+ if (configuration.globalEditorProvider) {
3341
+ throw new Error('globalEditorProvider is renamed to rootEditorProvider');
3342
+ }
3343
+ const editor = Editor.create(root, api, 'sqd-editor sqd-step-editor', configuration.stepEditorProvider, 'sqd-editor sqd-root-editor', configuration.rootEditorProvider);
3339
3344
  return new SmartEditorView(root, toggle, editor);
3340
3345
  }
3341
3346
  constructor(root, toggle, editor) {
@@ -4155,10 +4160,17 @@ class Designer {
4155
4160
  const view = DesignerView.create(placeholder, designerContext, designerApi);
4156
4161
  const designer = new Designer(view, designerContext.state, designerContext.definitionWalker, designerContext.historyController, designerApi);
4157
4162
  view.workspace.onReady.subscribe(() => designer.onReady.forward());
4158
- designerContext.state.onDefinitionChanged.subscribe(() => {
4159
- setTimeout(() => designer.onDefinitionChanged.forward(designerContext.state.definition));
4163
+ race(0, designerContext.state.onDefinitionChanged, designerContext.state.onSelectedStepIdChanged).subscribe(([definition, selectedStepId]) => {
4164
+ if (definition !== undefined) {
4165
+ designer.onDefinitionChanged.forward(designerContext.state.definition);
4166
+ }
4167
+ if (selectedStepId !== undefined) {
4168
+ designer.onSelectedStepIdChanged.forward(designerContext.state.selectedStepId);
4169
+ }
4170
+ });
4171
+ designerContext.state.onViewportChanged.subscribe(viewPort => {
4172
+ designer.onViewportChanged.forward(viewPort);
4160
4173
  });
4161
- designerContext.state.onSelectedStepIdChanged.subscribe(() => designer.onSelectedStepIdChanged.forward(designerContext.state.selectedStepId));
4162
4174
  designerContext.state.onIsToolboxCollapsedChanged.subscribe(isCollapsed => {
4163
4175
  designer.onIsToolboxCollapsedChanged.forward(isCollapsed);
4164
4176
  });
@@ -4181,6 +4193,10 @@ class Designer {
4181
4193
  * @description Fires when the definition has changed.
4182
4194
  */
4183
4195
  this.onDefinitionChanged = new SimpleEvent();
4196
+ /**
4197
+ * @description Fires when the viewport has changed.
4198
+ */
4199
+ this.onViewportChanged = new SimpleEvent();
4184
4200
  /**
4185
4201
  * @description Fires when the selected step has changed.
4186
4202
  */
@@ -4230,6 +4246,19 @@ class Designer {
4230
4246
  selectStepById(stepId) {
4231
4247
  this.state.setSelectedStepId(stepId);
4232
4248
  }
4249
+ /**
4250
+ * @returns the current viewport.
4251
+ */
4252
+ getViewport() {
4253
+ return this.state.viewport;
4254
+ }
4255
+ /**
4256
+ * @description Sets the viewport.
4257
+ * @param viewport Viewport.
4258
+ */
4259
+ setViewport(viewport) {
4260
+ this.state.setViewport(viewport);
4261
+ }
4233
4262
  /**
4234
4263
  * @description Unselects the selected step.
4235
4264
  */
package/lib/index.d.ts CHANGED
@@ -361,14 +361,14 @@ declare class EditorRenderer {
361
361
  private readonly state;
362
362
  private readonly definitionWalker;
363
363
  private readonly handler;
364
+ private readonly raceEvent;
364
365
  static create(state: DesignerState, definitionWalker: DefinitionWalker, handler: EditorRendererHandler): EditorRenderer;
365
366
  private currentStepId;
366
367
  private constructor();
367
368
  destroy(): void;
368
369
  private render;
369
- private tryRender;
370
- private onDefinitionChanged;
371
- private onSelectedStepIdChanged;
370
+ private renderIfStepChanged;
371
+ private readonly raceEventHandler;
372
372
  }
373
373
 
374
374
  declare class EditorApi {
@@ -377,12 +377,13 @@ declare class EditorApi {
377
377
  private readonly definitionModifier;
378
378
  constructor(state: DesignerState, definitionWalker: DefinitionWalker, definitionModifier: DefinitionModifier);
379
379
  isCollapsed(): boolean;
380
+ isReadonly(): boolean;
380
381
  toggleIsCollapsed(): void;
381
382
  subscribeIsCollapsed(listener: SimpleEventListener<boolean>): void;
382
383
  getDefinition(): Definition;
383
384
  runRenderer(rendererHandler: EditorRendererHandler): EditorRenderer;
384
385
  createStepEditorContext(stepId: string): StepEditorContext;
385
- createGlobalEditorContext(): GlobalEditorContext;
386
+ createRootEditorContext(): RootEditorContext;
386
387
  }
387
388
 
388
389
  declare class PathBarApi {
@@ -798,8 +799,8 @@ interface ViewportController {
798
799
  focusOnComponent(componentPosition: Vector, componentSize: Vector): void;
799
800
  }
800
801
  interface Viewport {
801
- position: Vector;
802
- scale: number;
802
+ readonly position: Vector;
803
+ readonly scale: number;
803
804
  }
804
805
  interface DaemonExtension {
805
806
  create(api: DesignerApi): Daemon;
@@ -945,20 +946,18 @@ declare enum KeyboardAction {
945
946
  interface EditorsConfiguration<TDefinition extends Definition = Definition> {
946
947
  isCollapsed?: boolean;
947
948
  stepEditorProvider: StepEditorProvider<TDefinition>;
948
- globalEditorProvider: GlobalEditorProvider<TDefinition>;
949
+ rootEditorProvider: RootEditorProvider<TDefinition>;
949
950
  }
950
951
  interface StepEditorContext {
951
952
  notifyNameChanged(): void;
952
953
  notifyPropertiesChanged(): void;
953
954
  notifyChildrenChanged(): void;
954
955
  }
955
- type StepEditorProvider<TDefinition extends Definition = Definition> = (step: Step, context: StepEditorContext, definition: TDefinition) => HTMLElement;
956
- interface GlobalEditorContext {
956
+ type StepEditorProvider<TDefinition extends Definition = Definition> = (step: Step, context: StepEditorContext, definition: TDefinition, isReadonly: boolean) => HTMLElement;
957
+ interface RootEditorContext {
957
958
  notifyPropertiesChanged(): void;
958
959
  }
959
- type RootEditorContext = GlobalEditorContext;
960
- type GlobalEditorProvider<TDefinition extends Definition = Definition> = (definition: TDefinition, context: GlobalEditorContext) => HTMLElement;
961
- type RootEditorProvider = GlobalEditorProvider;
960
+ type RootEditorProvider<TDefinition extends Definition = Definition> = (definition: TDefinition, context: RootEditorContext, isReadonly: boolean) => HTMLElement;
962
961
  interface UndoStack {
963
962
  index: number;
964
963
  items: UndoStackItem[];
@@ -975,7 +974,7 @@ declare enum DefinitionChangeType {
975
974
  stepDeleted = 4,
976
975
  stepMoved = 5,
977
976
  stepInserted = 6,
978
- globalPropertyChanged = 7,
977
+ rootPropertyChanged = 7,
979
978
  rootReplaced = 8
980
979
  }
981
980
 
@@ -1022,7 +1021,7 @@ declare class ControlBarApi {
1022
1021
  declare class Editor {
1023
1022
  private readonly view;
1024
1023
  private readonly renderer;
1025
- static create(parent: HTMLElement, api: EditorApi, stepEditorClassName: string, stepEditorProvider: StepEditorProvider, globalEditorClassName: string, globalEditorProvider: GlobalEditorProvider): Editor;
1024
+ static create(parent: HTMLElement, api: EditorApi, stepEditorClassName: string, stepEditorProvider: StepEditorProvider, rootEditorClassName: string, rootEditorProvider: RootEditorProvider): Editor;
1026
1025
  private constructor();
1027
1026
  destroy(): void;
1028
1027
  }
@@ -1050,6 +1049,10 @@ declare class Designer<TDefinition extends Definition = Definition> {
1050
1049
  * @description Fires when the definition has changed.
1051
1050
  */
1052
1051
  readonly onDefinitionChanged: SimpleEvent<TDefinition>;
1052
+ /**
1053
+ * @description Fires when the viewport has changed.
1054
+ */
1055
+ readonly onViewportChanged: SimpleEvent<Viewport>;
1053
1056
  /**
1054
1057
  * @description Fires when the selected step has changed.
1055
1058
  */
@@ -1086,6 +1089,15 @@ declare class Designer<TDefinition extends Definition = Definition> {
1086
1089
  * @description Selects a step by the id.
1087
1090
  */
1088
1091
  selectStepById(stepId: string): void;
1092
+ /**
1093
+ * @returns the current viewport.
1094
+ */
1095
+ getViewport(): Viewport;
1096
+ /**
1097
+ * @description Sets the viewport.
1098
+ * @param viewport Viewport.
1099
+ */
1100
+ setViewport(viewport: Viewport): void;
1089
1101
  /**
1090
1102
  * @description Unselects the selected step.
1091
1103
  */
@@ -1179,4 +1191,4 @@ declare class StepsExtension extends StepsDesignerExtension {
1179
1191
  interface StepsExtensionConfiguration extends StepsDesignerExtensionConfiguration {
1180
1192
  }
1181
1193
 
1182
- 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, KeyboardAction, KeyboardConfiguration, LabelView, LineGridConfiguration, LineGridDesignerExtension, ObjectCloner, OpenFolderClickCommand, OutputView, PathBarApi, Placeholder, PlaceholderController, PlaceholderControllerExtension, PlaceholderDirection, PlaceholderExtension, PlaceholderView, QuantifiedScaleViewportCalculator, RectPlaceholder, RectPlaceholderConfiguration, RectPlaceholderView, RegionView, RerenderStepClickCommand, RootComponentExtension, RootEditorContext, RootEditorProvider, 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 };
1194
+ 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, Grid, GridExtension, Icons, InputView, JoinView, KeyboardAction, KeyboardConfiguration, LabelView, LineGridConfiguration, LineGridDesignerExtension, ObjectCloner, OpenFolderClickCommand, OutputView, PathBarApi, Placeholder, PlaceholderController, PlaceholderControllerExtension, PlaceholderDirection, PlaceholderExtension, PlaceholderView, QuantifiedScaleViewportCalculator, RectPlaceholder, RectPlaceholderConfiguration, RectPlaceholderView, RegionView, RerenderStepClickCommand, RootComponentExtension, RootEditorContext, RootEditorProvider, 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.9",
4
+ "version": "0.17.0",
5
5
  "type": "module",
6
6
  "main": "./lib/esm/index.js",
7
7
  "types": "./lib/index.d.ts",