sequential-workflow-designer 0.16.10 → 0.18.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 +40 -35
  3. package/lib/cjs/index.cjs +40 -35
  4. package/lib/esm/index.js +40 -36
  5. package/lib/index.d.ts +12 -13
  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.10/css/designer.css" rel="stylesheet">
100
- <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.10/css/designer-light.css" rel="stylesheet">
101
- <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.10/css/designer-dark.css" rel="stylesheet">
102
- <script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.10/dist/index.umd.js"></script>
99
+ <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.18.0/css/designer.css" rel="stylesheet">
100
+ <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.18.0/css/designer-light.css" rel="stylesheet">
101
+ <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.18.0/css/designer-dark.css" rel="stylesheet">
102
+ <script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.18.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
 
@@ -205,6 +205,11 @@
205
205
  }
206
206
  }
207
207
 
208
+ function getAbsolutePosition(element) {
209
+ const rect = element.getBoundingClientRect();
210
+ return new Vector(rect.x + window.scrollX, rect.y + window.scrollY);
211
+ }
212
+
208
213
  class Uid {
209
214
  static next() {
210
215
  const bytes = new Uint8Array(16);
@@ -271,10 +276,10 @@
271
276
 
272
277
  class EditorRenderer {
273
278
  static create(state, definitionWalker, handler) {
274
- const raceEvent = race(0, state.onDefinitionChanged, state.onSelectedStepIdChanged);
279
+ const raceEvent = race(0, state.onDefinitionChanged, state.onSelectedStepIdChanged, state.onIsReadonlyChanged);
275
280
  const listener = new EditorRenderer(state, definitionWalker, handler, raceEvent);
276
281
  raceEvent.subscribe(listener.raceEventHandler);
277
- listener.tryRender(state.selectedStepId);
282
+ listener.renderIfStepChanged(state.selectedStepId);
278
283
  return listener;
279
284
  }
280
285
  constructor(state, definitionWalker, handler, raceEvent) {
@@ -283,12 +288,20 @@
283
288
  this.handler = handler;
284
289
  this.raceEvent = raceEvent;
285
290
  this.currentStepId = undefined;
286
- this.raceEventHandler = ([definitionChanged, selectedStepId]) => {
287
- if (definitionChanged) {
288
- this.onDefinitionChanged(definitionChanged);
291
+ this.raceEventHandler = ([definitionChanged, selectedStepId, isReadonlyChanged]) => {
292
+ if (isReadonlyChanged !== undefined) {
293
+ this.render(this.state.selectedStepId);
294
+ }
295
+ else if (definitionChanged) {
296
+ if (definitionChanged.changeType === exports.DefinitionChangeType.rootReplaced) {
297
+ this.render(this.state.selectedStepId);
298
+ }
299
+ else {
300
+ this.renderIfStepChanged(this.state.selectedStepId);
301
+ }
289
302
  }
290
303
  else if (selectedStepId !== undefined) {
291
- this.onSelectedStepIdChanged(selectedStepId);
304
+ this.renderIfStepChanged(selectedStepId);
292
305
  }
293
306
  };
294
307
  }
@@ -300,22 +313,11 @@
300
313
  this.currentStepId = stepId;
301
314
  this.handler(step);
302
315
  }
303
- tryRender(stepId) {
316
+ renderIfStepChanged(stepId) {
304
317
  if (this.currentStepId !== stepId) {
305
318
  this.render(stepId);
306
319
  }
307
320
  }
308
- onDefinitionChanged(event) {
309
- if (event.changeType === exports.DefinitionChangeType.rootReplaced) {
310
- this.render(this.state.selectedStepId);
311
- }
312
- else {
313
- this.tryRender(this.state.selectedStepId);
314
- }
315
- }
316
- onSelectedStepIdChanged(stepId) {
317
- this.tryRender(stepId);
318
- }
319
321
  }
320
322
 
321
323
  class EditorApi {
@@ -327,6 +329,9 @@
327
329
  isCollapsed() {
328
330
  return this.state.isEditorCollapsed;
329
331
  }
332
+ isReadonly() {
333
+ return this.state.isReadonly;
334
+ }
330
335
  toggleIsCollapsed() {
331
336
  this.state.setIsEditorCollapsed(!this.state.isEditorCollapsed);
332
337
  }
@@ -356,10 +361,10 @@
356
361
  }
357
362
  };
358
363
  }
359
- createGlobalEditorContext() {
364
+ createRootEditorContext() {
360
365
  return {
361
366
  notifyPropertiesChanged: () => {
362
- this.state.notifyDefinitionChanged(exports.DefinitionChangeType.globalPropertyChanged, null);
367
+ this.state.notifyDefinitionChanged(exports.DefinitionChangeType.rootPropertyChanged, null);
363
368
  }
364
369
  };
365
370
  }
@@ -474,9 +479,8 @@
474
479
  const hasSameSize = this.draggedStepComponent.view.width === this.view.component.width &&
475
480
  this.draggedStepComponent.view.height === this.view.component.height;
476
481
  if (hasSameSize) {
477
- const scroll = new Vector(window.scrollX, window.scrollY);
478
482
  // Mouse cursor will be positioned on the same place as the source component.
479
- const pagePosition = this.draggedStepComponent.view.getClientPosition().add(scroll);
483
+ const pagePosition = this.draggedStepComponent.view.getClientPosition();
480
484
  offset = position.subtract(pagePosition);
481
485
  }
482
486
  }
@@ -976,7 +980,7 @@
976
980
  }
977
981
 
978
982
  class Editor {
979
- static create(parent, api, stepEditorClassName, stepEditorProvider, globalEditorClassName, globalEditorProvider) {
983
+ static create(parent, api, stepEditorClassName, stepEditorProvider, rootEditorClassName, rootEditorProvider) {
980
984
  const view = EditorView.create(parent);
981
985
  function render(step) {
982
986
  const definition = api.getDefinition();
@@ -984,13 +988,13 @@
984
988
  let className;
985
989
  if (step) {
986
990
  const stepContext = api.createStepEditorContext(step.id);
987
- content = stepEditorProvider(step, stepContext, definition);
991
+ content = stepEditorProvider(step, stepContext, definition, api.isReadonly());
988
992
  className = stepEditorClassName;
989
993
  }
990
994
  else {
991
- const globalContext = api.createGlobalEditorContext();
992
- content = globalEditorProvider(definition, globalContext);
993
- className = globalEditorClassName;
995
+ const rootContext = api.createRootEditorContext();
996
+ content = rootEditorProvider(definition, rootContext, api.isReadonly());
997
+ className = rootEditorClassName;
994
998
  }
995
999
  view.setContent(content, className);
996
1000
  }
@@ -1271,8 +1275,7 @@
1271
1275
  this.height = height;
1272
1276
  }
1273
1277
  getClientPosition() {
1274
- const rect = this.lines[0].getBoundingClientRect();
1275
- return new Vector(rect.x, rect.y);
1278
+ return getAbsolutePosition(this.lines[0]);
1276
1279
  }
1277
1280
  resolveClick(click) {
1278
1281
  const regionPosition = this.getClientPosition();
@@ -1669,8 +1672,7 @@
1669
1672
  return !!outputView;
1670
1673
  },
1671
1674
  getClientPosition() {
1672
- const r = rect.getBoundingClientRect();
1673
- return new Vector(r.x, r.y);
1675
+ return getAbsolutePosition(rect);
1674
1676
  },
1675
1677
  resolveClick(click) {
1676
1678
  return g.contains(click.element) ? true : null;
@@ -2657,8 +2659,7 @@
2657
2659
  });
2658
2660
  }
2659
2661
  getCanvasPosition() {
2660
- const rect = this.canvas.getBoundingClientRect();
2661
- return new Vector(rect.x + window.scrollX, rect.y + window.scrollY);
2662
+ return getAbsolutePosition(this.canvas);
2662
2663
  }
2663
2664
  getCanvasSize() {
2664
2665
  return new Vector(this.canvas.clientWidth, this.canvas.clientHeight);
@@ -3523,7 +3524,10 @@
3523
3524
  });
3524
3525
  parent.appendChild(toggle);
3525
3526
  parent.appendChild(root);
3526
- const editor = Editor.create(root, api, 'sqd-editor sqd-step-editor', configuration.stepEditorProvider, 'sqd-editor sqd-global-editor', configuration.globalEditorProvider);
3527
+ if (configuration.globalEditorProvider) {
3528
+ throw new Error('globalEditorProvider is renamed to rootEditorProvider');
3529
+ }
3530
+ const editor = Editor.create(root, api, 'sqd-editor sqd-step-editor', configuration.stepEditorProvider, 'sqd-editor sqd-root-editor', configuration.rootEditorProvider);
3527
3531
  return new SmartEditorView(root, toggle, editor);
3528
3532
  }
3529
3533
  constructor(root, toggle, editor) {
@@ -4597,6 +4601,7 @@
4597
4601
  exports.createContainerStepComponentViewFactory = createContainerStepComponentViewFactory;
4598
4602
  exports.createSwitchStepComponentViewFactory = createSwitchStepComponentViewFactory;
4599
4603
  exports.createTaskStepComponentViewFactory = createTaskStepComponentViewFactory;
4604
+ exports.getAbsolutePosition = getAbsolutePosition;
4600
4605
  exports.race = race;
4601
4606
 
4602
4607
  }));
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
 
@@ -203,6 +203,11 @@ class Vector {
203
203
  }
204
204
  }
205
205
 
206
+ function getAbsolutePosition(element) {
207
+ const rect = element.getBoundingClientRect();
208
+ return new Vector(rect.x + window.scrollX, rect.y + window.scrollY);
209
+ }
210
+
206
211
  class Uid {
207
212
  static next() {
208
213
  const bytes = new Uint8Array(16);
@@ -269,10 +274,10 @@ function race(timeout, a, b, c) {
269
274
 
270
275
  class EditorRenderer {
271
276
  static create(state, definitionWalker, handler) {
272
- const raceEvent = race(0, state.onDefinitionChanged, state.onSelectedStepIdChanged);
277
+ const raceEvent = race(0, state.onDefinitionChanged, state.onSelectedStepIdChanged, state.onIsReadonlyChanged);
273
278
  const listener = new EditorRenderer(state, definitionWalker, handler, raceEvent);
274
279
  raceEvent.subscribe(listener.raceEventHandler);
275
- listener.tryRender(state.selectedStepId);
280
+ listener.renderIfStepChanged(state.selectedStepId);
276
281
  return listener;
277
282
  }
278
283
  constructor(state, definitionWalker, handler, raceEvent) {
@@ -281,12 +286,20 @@ class EditorRenderer {
281
286
  this.handler = handler;
282
287
  this.raceEvent = raceEvent;
283
288
  this.currentStepId = undefined;
284
- this.raceEventHandler = ([definitionChanged, selectedStepId]) => {
285
- if (definitionChanged) {
286
- this.onDefinitionChanged(definitionChanged);
289
+ this.raceEventHandler = ([definitionChanged, selectedStepId, isReadonlyChanged]) => {
290
+ if (isReadonlyChanged !== undefined) {
291
+ this.render(this.state.selectedStepId);
292
+ }
293
+ else if (definitionChanged) {
294
+ if (definitionChanged.changeType === exports.DefinitionChangeType.rootReplaced) {
295
+ this.render(this.state.selectedStepId);
296
+ }
297
+ else {
298
+ this.renderIfStepChanged(this.state.selectedStepId);
299
+ }
287
300
  }
288
301
  else if (selectedStepId !== undefined) {
289
- this.onSelectedStepIdChanged(selectedStepId);
302
+ this.renderIfStepChanged(selectedStepId);
290
303
  }
291
304
  };
292
305
  }
@@ -298,22 +311,11 @@ class EditorRenderer {
298
311
  this.currentStepId = stepId;
299
312
  this.handler(step);
300
313
  }
301
- tryRender(stepId) {
314
+ renderIfStepChanged(stepId) {
302
315
  if (this.currentStepId !== stepId) {
303
316
  this.render(stepId);
304
317
  }
305
318
  }
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
319
  }
318
320
 
319
321
  class EditorApi {
@@ -325,6 +327,9 @@ class EditorApi {
325
327
  isCollapsed() {
326
328
  return this.state.isEditorCollapsed;
327
329
  }
330
+ isReadonly() {
331
+ return this.state.isReadonly;
332
+ }
328
333
  toggleIsCollapsed() {
329
334
  this.state.setIsEditorCollapsed(!this.state.isEditorCollapsed);
330
335
  }
@@ -354,10 +359,10 @@ class EditorApi {
354
359
  }
355
360
  };
356
361
  }
357
- createGlobalEditorContext() {
362
+ createRootEditorContext() {
358
363
  return {
359
364
  notifyPropertiesChanged: () => {
360
- this.state.notifyDefinitionChanged(exports.DefinitionChangeType.globalPropertyChanged, null);
365
+ this.state.notifyDefinitionChanged(exports.DefinitionChangeType.rootPropertyChanged, null);
361
366
  }
362
367
  };
363
368
  }
@@ -472,9 +477,8 @@ class DragStepBehavior {
472
477
  const hasSameSize = this.draggedStepComponent.view.width === this.view.component.width &&
473
478
  this.draggedStepComponent.view.height === this.view.component.height;
474
479
  if (hasSameSize) {
475
- const scroll = new Vector(window.scrollX, window.scrollY);
476
480
  // Mouse cursor will be positioned on the same place as the source component.
477
- const pagePosition = this.draggedStepComponent.view.getClientPosition().add(scroll);
481
+ const pagePosition = this.draggedStepComponent.view.getClientPosition();
478
482
  offset = position.subtract(pagePosition);
479
483
  }
480
484
  }
@@ -974,7 +978,7 @@ class EditorView {
974
978
  }
975
979
 
976
980
  class Editor {
977
- static create(parent, api, stepEditorClassName, stepEditorProvider, globalEditorClassName, globalEditorProvider) {
981
+ static create(parent, api, stepEditorClassName, stepEditorProvider, rootEditorClassName, rootEditorProvider) {
978
982
  const view = EditorView.create(parent);
979
983
  function render(step) {
980
984
  const definition = api.getDefinition();
@@ -982,13 +986,13 @@ class Editor {
982
986
  let className;
983
987
  if (step) {
984
988
  const stepContext = api.createStepEditorContext(step.id);
985
- content = stepEditorProvider(step, stepContext, definition);
989
+ content = stepEditorProvider(step, stepContext, definition, api.isReadonly());
986
990
  className = stepEditorClassName;
987
991
  }
988
992
  else {
989
- const globalContext = api.createGlobalEditorContext();
990
- content = globalEditorProvider(definition, globalContext);
991
- className = globalEditorClassName;
993
+ const rootContext = api.createRootEditorContext();
994
+ content = rootEditorProvider(definition, rootContext, api.isReadonly());
995
+ className = rootEditorClassName;
992
996
  }
993
997
  view.setContent(content, className);
994
998
  }
@@ -1269,8 +1273,7 @@ class RegionView {
1269
1273
  this.height = height;
1270
1274
  }
1271
1275
  getClientPosition() {
1272
- const rect = this.lines[0].getBoundingClientRect();
1273
- return new Vector(rect.x, rect.y);
1276
+ return getAbsolutePosition(this.lines[0]);
1274
1277
  }
1275
1278
  resolveClick(click) {
1276
1279
  const regionPosition = this.getClientPosition();
@@ -1667,8 +1670,7 @@ const createTaskStepComponentViewFactory = (isInterrupted, cfg) => (parentElemen
1667
1670
  return !!outputView;
1668
1671
  },
1669
1672
  getClientPosition() {
1670
- const r = rect.getBoundingClientRect();
1671
- return new Vector(r.x, r.y);
1673
+ return getAbsolutePosition(rect);
1672
1674
  },
1673
1675
  resolveClick(click) {
1674
1676
  return g.contains(click.element) ? true : null;
@@ -2472,8 +2474,7 @@ class WorkspaceView {
2472
2474
  });
2473
2475
  }
2474
2476
  getCanvasPosition() {
2475
- const rect = this.canvas.getBoundingClientRect();
2476
- return new Vector(rect.x + window.scrollX, rect.y + window.scrollY);
2477
+ return getAbsolutePosition(this.canvas);
2477
2478
  }
2478
2479
  getCanvasSize() {
2479
2480
  return new Vector(this.canvas.clientWidth, this.canvas.clientHeight);
@@ -3338,7 +3339,10 @@ class SmartEditorView {
3338
3339
  });
3339
3340
  parent.appendChild(toggle);
3340
3341
  parent.appendChild(root);
3341
- const editor = Editor.create(root, api, 'sqd-editor sqd-step-editor', configuration.stepEditorProvider, 'sqd-editor sqd-global-editor', configuration.globalEditorProvider);
3342
+ if (configuration.globalEditorProvider) {
3343
+ throw new Error('globalEditorProvider is renamed to rootEditorProvider');
3344
+ }
3345
+ const editor = Editor.create(root, api, 'sqd-editor sqd-step-editor', configuration.stepEditorProvider, 'sqd-editor sqd-root-editor', configuration.rootEditorProvider);
3342
3346
  return new SmartEditorView(root, toggle, editor);
3343
3347
  }
3344
3348
  constructor(root, toggle, editor) {
@@ -4411,6 +4415,7 @@ exports.WorkspaceApi = WorkspaceApi;
4411
4415
  exports.createContainerStepComponentViewFactory = createContainerStepComponentViewFactory;
4412
4416
  exports.createSwitchStepComponentViewFactory = createSwitchStepComponentViewFactory;
4413
4417
  exports.createTaskStepComponentViewFactory = createTaskStepComponentViewFactory;
4418
+ exports.getAbsolutePosition = getAbsolutePosition;
4414
4419
  exports.race = race;
4415
4420
  Object.keys(sequentialWorkflowModel).forEach(function (k) {
4416
4421
  if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
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
 
@@ -202,6 +202,11 @@ class Vector {
202
202
  }
203
203
  }
204
204
 
205
+ function getAbsolutePosition(element) {
206
+ const rect = element.getBoundingClientRect();
207
+ return new Vector(rect.x + window.scrollX, rect.y + window.scrollY);
208
+ }
209
+
205
210
  class Uid {
206
211
  static next() {
207
212
  const bytes = new Uint8Array(16);
@@ -268,10 +273,10 @@ function race(timeout, a, b, c) {
268
273
 
269
274
  class EditorRenderer {
270
275
  static create(state, definitionWalker, handler) {
271
- const raceEvent = race(0, state.onDefinitionChanged, state.onSelectedStepIdChanged);
276
+ const raceEvent = race(0, state.onDefinitionChanged, state.onSelectedStepIdChanged, state.onIsReadonlyChanged);
272
277
  const listener = new EditorRenderer(state, definitionWalker, handler, raceEvent);
273
278
  raceEvent.subscribe(listener.raceEventHandler);
274
- listener.tryRender(state.selectedStepId);
279
+ listener.renderIfStepChanged(state.selectedStepId);
275
280
  return listener;
276
281
  }
277
282
  constructor(state, definitionWalker, handler, raceEvent) {
@@ -280,12 +285,20 @@ class EditorRenderer {
280
285
  this.handler = handler;
281
286
  this.raceEvent = raceEvent;
282
287
  this.currentStepId = undefined;
283
- this.raceEventHandler = ([definitionChanged, selectedStepId]) => {
284
- if (definitionChanged) {
285
- this.onDefinitionChanged(definitionChanged);
288
+ this.raceEventHandler = ([definitionChanged, selectedStepId, isReadonlyChanged]) => {
289
+ if (isReadonlyChanged !== undefined) {
290
+ this.render(this.state.selectedStepId);
291
+ }
292
+ else if (definitionChanged) {
293
+ if (definitionChanged.changeType === DefinitionChangeType.rootReplaced) {
294
+ this.render(this.state.selectedStepId);
295
+ }
296
+ else {
297
+ this.renderIfStepChanged(this.state.selectedStepId);
298
+ }
286
299
  }
287
300
  else if (selectedStepId !== undefined) {
288
- this.onSelectedStepIdChanged(selectedStepId);
301
+ this.renderIfStepChanged(selectedStepId);
289
302
  }
290
303
  };
291
304
  }
@@ -297,22 +310,11 @@ class EditorRenderer {
297
310
  this.currentStepId = stepId;
298
311
  this.handler(step);
299
312
  }
300
- tryRender(stepId) {
313
+ renderIfStepChanged(stepId) {
301
314
  if (this.currentStepId !== stepId) {
302
315
  this.render(stepId);
303
316
  }
304
317
  }
305
- onDefinitionChanged(event) {
306
- if (event.changeType === DefinitionChangeType.rootReplaced) {
307
- this.render(this.state.selectedStepId);
308
- }
309
- else {
310
- this.tryRender(this.state.selectedStepId);
311
- }
312
- }
313
- onSelectedStepIdChanged(stepId) {
314
- this.tryRender(stepId);
315
- }
316
318
  }
317
319
 
318
320
  class EditorApi {
@@ -324,6 +326,9 @@ class EditorApi {
324
326
  isCollapsed() {
325
327
  return this.state.isEditorCollapsed;
326
328
  }
329
+ isReadonly() {
330
+ return this.state.isReadonly;
331
+ }
327
332
  toggleIsCollapsed() {
328
333
  this.state.setIsEditorCollapsed(!this.state.isEditorCollapsed);
329
334
  }
@@ -353,10 +358,10 @@ class EditorApi {
353
358
  }
354
359
  };
355
360
  }
356
- createGlobalEditorContext() {
361
+ createRootEditorContext() {
357
362
  return {
358
363
  notifyPropertiesChanged: () => {
359
- this.state.notifyDefinitionChanged(DefinitionChangeType.globalPropertyChanged, null);
364
+ this.state.notifyDefinitionChanged(DefinitionChangeType.rootPropertyChanged, null);
360
365
  }
361
366
  };
362
367
  }
@@ -471,9 +476,8 @@ class DragStepBehavior {
471
476
  const hasSameSize = this.draggedStepComponent.view.width === this.view.component.width &&
472
477
  this.draggedStepComponent.view.height === this.view.component.height;
473
478
  if (hasSameSize) {
474
- const scroll = new Vector(window.scrollX, window.scrollY);
475
479
  // Mouse cursor will be positioned on the same place as the source component.
476
- const pagePosition = this.draggedStepComponent.view.getClientPosition().add(scroll);
480
+ const pagePosition = this.draggedStepComponent.view.getClientPosition();
477
481
  offset = position.subtract(pagePosition);
478
482
  }
479
483
  }
@@ -973,7 +977,7 @@ class EditorView {
973
977
  }
974
978
 
975
979
  class Editor {
976
- static create(parent, api, stepEditorClassName, stepEditorProvider, globalEditorClassName, globalEditorProvider) {
980
+ static create(parent, api, stepEditorClassName, stepEditorProvider, rootEditorClassName, rootEditorProvider) {
977
981
  const view = EditorView.create(parent);
978
982
  function render(step) {
979
983
  const definition = api.getDefinition();
@@ -981,13 +985,13 @@ class Editor {
981
985
  let className;
982
986
  if (step) {
983
987
  const stepContext = api.createStepEditorContext(step.id);
984
- content = stepEditorProvider(step, stepContext, definition);
988
+ content = stepEditorProvider(step, stepContext, definition, api.isReadonly());
985
989
  className = stepEditorClassName;
986
990
  }
987
991
  else {
988
- const globalContext = api.createGlobalEditorContext();
989
- content = globalEditorProvider(definition, globalContext);
990
- className = globalEditorClassName;
992
+ const rootContext = api.createRootEditorContext();
993
+ content = rootEditorProvider(definition, rootContext, api.isReadonly());
994
+ className = rootEditorClassName;
991
995
  }
992
996
  view.setContent(content, className);
993
997
  }
@@ -1268,8 +1272,7 @@ class RegionView {
1268
1272
  this.height = height;
1269
1273
  }
1270
1274
  getClientPosition() {
1271
- const rect = this.lines[0].getBoundingClientRect();
1272
- return new Vector(rect.x, rect.y);
1275
+ return getAbsolutePosition(this.lines[0]);
1273
1276
  }
1274
1277
  resolveClick(click) {
1275
1278
  const regionPosition = this.getClientPosition();
@@ -1666,8 +1669,7 @@ const createTaskStepComponentViewFactory = (isInterrupted, cfg) => (parentElemen
1666
1669
  return !!outputView;
1667
1670
  },
1668
1671
  getClientPosition() {
1669
- const r = rect.getBoundingClientRect();
1670
- return new Vector(r.x, r.y);
1672
+ return getAbsolutePosition(rect);
1671
1673
  },
1672
1674
  resolveClick(click) {
1673
1675
  return g.contains(click.element) ? true : null;
@@ -2471,8 +2473,7 @@ class WorkspaceView {
2471
2473
  });
2472
2474
  }
2473
2475
  getCanvasPosition() {
2474
- const rect = this.canvas.getBoundingClientRect();
2475
- return new Vector(rect.x + window.scrollX, rect.y + window.scrollY);
2476
+ return getAbsolutePosition(this.canvas);
2476
2477
  }
2477
2478
  getCanvasSize() {
2478
2479
  return new Vector(this.canvas.clientWidth, this.canvas.clientHeight);
@@ -3337,7 +3338,10 @@ class SmartEditorView {
3337
3338
  });
3338
3339
  parent.appendChild(toggle);
3339
3340
  parent.appendChild(root);
3340
- 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);
3341
3345
  return new SmartEditorView(root, toggle, editor);
3342
3346
  }
3343
3347
  constructor(root, toggle, editor) {
@@ -4368,4 +4372,4 @@ class StepsDesignerExtension {
4368
4372
  class StepsExtension extends StepsDesignerExtension {
4369
4373
  }
4370
4374
 
4371
- export { Badges, CenteredViewportCalculator, ClassicWheelControllerExtension, ClickCommandType, ComponentContext, ControlBarApi, DefaultSequenceComponent, DefaultSequenceComponentView, DefaultViewportController, DefaultViewportControllerExtension, DefinitionChangeType, Designer, DesignerApi, DesignerContext, DesignerState, Dom, Editor, EditorApi, Icons, InputView, JoinView, KeyboardAction, LabelView, LineGridDesignerExtension, ObjectCloner, OutputView, PathBarApi, PlaceholderDirection, QuantifiedScaleViewportCalculator, RectPlaceholder, RectPlaceholderView, RegionView, ServicesResolver, SimpleEvent, StepComponent, StepExtensionResolver, StepsDesignerExtension, StepsExtension, ToolboxApi, Uid, ValidationErrorBadgeExtension, Vector, WorkspaceApi, createContainerStepComponentViewFactory, createSwitchStepComponentViewFactory, createTaskStepComponentViewFactory, race };
4375
+ export { Badges, CenteredViewportCalculator, ClassicWheelControllerExtension, ClickCommandType, ComponentContext, ControlBarApi, DefaultSequenceComponent, DefaultSequenceComponentView, DefaultViewportController, DefaultViewportControllerExtension, DefinitionChangeType, Designer, DesignerApi, DesignerContext, DesignerState, Dom, Editor, EditorApi, Icons, InputView, JoinView, KeyboardAction, LabelView, LineGridDesignerExtension, ObjectCloner, OutputView, PathBarApi, PlaceholderDirection, QuantifiedScaleViewportCalculator, RectPlaceholder, RectPlaceholderView, RegionView, ServicesResolver, SimpleEvent, StepComponent, StepExtensionResolver, StepsDesignerExtension, StepsExtension, ToolboxApi, Uid, ValidationErrorBadgeExtension, Vector, WorkspaceApi, createContainerStepComponentViewFactory, createSwitchStepComponentViewFactory, createTaskStepComponentViewFactory, getAbsolutePosition, race };
package/lib/index.d.ts CHANGED
@@ -309,6 +309,8 @@ declare class Dom {
309
309
  static toggleClass(element: Element, isEnabled: boolean, className: string): void;
310
310
  }
311
311
 
312
+ declare function getAbsolutePosition(element: Element): Vector;
313
+
312
314
  declare class Uid {
313
315
  static next(): string;
314
316
  }
@@ -367,10 +369,8 @@ declare class EditorRenderer {
367
369
  private constructor();
368
370
  destroy(): void;
369
371
  private render;
370
- private tryRender;
372
+ private renderIfStepChanged;
371
373
  private readonly raceEventHandler;
372
- private onDefinitionChanged;
373
- private onSelectedStepIdChanged;
374
374
  }
375
375
 
376
376
  declare class EditorApi {
@@ -379,12 +379,13 @@ declare class EditorApi {
379
379
  private readonly definitionModifier;
380
380
  constructor(state: DesignerState, definitionWalker: DefinitionWalker, definitionModifier: DefinitionModifier);
381
381
  isCollapsed(): boolean;
382
+ isReadonly(): boolean;
382
383
  toggleIsCollapsed(): void;
383
384
  subscribeIsCollapsed(listener: SimpleEventListener<boolean>): void;
384
385
  getDefinition(): Definition;
385
386
  runRenderer(rendererHandler: EditorRendererHandler): EditorRenderer;
386
387
  createStepEditorContext(stepId: string): StepEditorContext;
387
- createGlobalEditorContext(): GlobalEditorContext;
388
+ createRootEditorContext(): RootEditorContext;
388
389
  }
389
390
 
390
391
  declare class PathBarApi {
@@ -947,20 +948,18 @@ declare enum KeyboardAction {
947
948
  interface EditorsConfiguration<TDefinition extends Definition = Definition> {
948
949
  isCollapsed?: boolean;
949
950
  stepEditorProvider: StepEditorProvider<TDefinition>;
950
- globalEditorProvider: GlobalEditorProvider<TDefinition>;
951
+ rootEditorProvider: RootEditorProvider<TDefinition>;
951
952
  }
952
953
  interface StepEditorContext {
953
954
  notifyNameChanged(): void;
954
955
  notifyPropertiesChanged(): void;
955
956
  notifyChildrenChanged(): void;
956
957
  }
957
- type StepEditorProvider<TDefinition extends Definition = Definition> = (step: Step, context: StepEditorContext, definition: TDefinition) => HTMLElement;
958
- interface GlobalEditorContext {
958
+ type StepEditorProvider<TDefinition extends Definition = Definition> = (step: Step, context: StepEditorContext, definition: TDefinition, isReadonly: boolean) => HTMLElement;
959
+ interface RootEditorContext {
959
960
  notifyPropertiesChanged(): void;
960
961
  }
961
- type RootEditorContext = GlobalEditorContext;
962
- type GlobalEditorProvider<TDefinition extends Definition = Definition> = (definition: TDefinition, context: GlobalEditorContext) => HTMLElement;
963
- type RootEditorProvider = GlobalEditorProvider;
962
+ type RootEditorProvider<TDefinition extends Definition = Definition> = (definition: TDefinition, context: RootEditorContext, isReadonly: boolean) => HTMLElement;
964
963
  interface UndoStack {
965
964
  index: number;
966
965
  items: UndoStackItem[];
@@ -977,7 +976,7 @@ declare enum DefinitionChangeType {
977
976
  stepDeleted = 4,
978
977
  stepMoved = 5,
979
978
  stepInserted = 6,
980
- globalPropertyChanged = 7,
979
+ rootPropertyChanged = 7,
981
980
  rootReplaced = 8
982
981
  }
983
982
 
@@ -1024,7 +1023,7 @@ declare class ControlBarApi {
1024
1023
  declare class Editor {
1025
1024
  private readonly view;
1026
1025
  private readonly renderer;
1027
- static create(parent: HTMLElement, api: EditorApi, stepEditorClassName: string, stepEditorProvider: StepEditorProvider, globalEditorClassName: string, globalEditorProvider: GlobalEditorProvider): Editor;
1026
+ static create(parent: HTMLElement, api: EditorApi, stepEditorClassName: string, stepEditorProvider: StepEditorProvider, rootEditorClassName: string, rootEditorProvider: RootEditorProvider): Editor;
1028
1027
  private constructor();
1029
1028
  destroy(): void;
1030
1029
  }
@@ -1194,4 +1193,4 @@ declare class StepsExtension extends StepsDesignerExtension {
1194
1193
  interface StepsExtensionConfiguration extends StepsDesignerExtensionConfiguration {
1195
1194
  }
1196
1195
 
1197
- 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 };
1196
+ 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, getAbsolutePosition, 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.10",
4
+ "version": "0.18.0",
5
5
  "type": "module",
6
6
  "main": "./lib/esm/index.js",
7
7
  "types": "./lib/index.d.ts",