sequential-workflow-designer 0.16.9 → 0.16.10

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 +4 -4
  2. package/dist/index.umd.js +41 -15
  3. package/lib/cjs/index.cjs +41 -15
  4. package/lib/esm/index.js +41 -15
  5. package/lib/index.d.ts +17 -2
  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.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>
103
103
  ```
104
104
 
105
105
  Call the designer by:
package/dist/index.umd.js CHANGED
@@ -271,27 +271,29 @@
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
- });
274
+ const raceEvent = race(0, state.onDefinitionChanged, state.onSelectedStepIdChanged);
275
+ const listener = new EditorRenderer(state, definitionWalker, handler, raceEvent);
276
+ raceEvent.subscribe(listener.raceEventHandler);
284
277
  listener.tryRender(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]) => {
287
+ if (definitionChanged) {
288
+ this.onDefinitionChanged(definitionChanged);
289
+ }
290
+ else if (selectedStepId !== undefined) {
291
+ this.onSelectedStepIdChanged(selectedStepId);
292
+ }
293
+ };
292
294
  }
293
295
  destroy() {
294
- // TODO: unsubscribe from events
296
+ this.raceEvent.unsubscribe(this.raceEventHandler);
295
297
  }
296
298
  render(stepId) {
297
299
  const step = stepId ? this.definitionWalker.getById(this.state.definition, stepId) : null;
@@ -4341,10 +4343,17 @@
4341
4343
  const view = DesignerView.create(placeholder, designerContext, designerApi);
4342
4344
  const designer = new Designer(view, designerContext.state, designerContext.definitionWalker, designerContext.historyController, designerApi);
4343
4345
  view.workspace.onReady.subscribe(() => designer.onReady.forward());
4344
- designerContext.state.onDefinitionChanged.subscribe(() => {
4345
- setTimeout(() => designer.onDefinitionChanged.forward(designerContext.state.definition));
4346
+ race(0, designerContext.state.onDefinitionChanged, designerContext.state.onSelectedStepIdChanged).subscribe(([definition, selectedStepId]) => {
4347
+ if (definition !== undefined) {
4348
+ designer.onDefinitionChanged.forward(designerContext.state.definition);
4349
+ }
4350
+ if (selectedStepId !== undefined) {
4351
+ designer.onSelectedStepIdChanged.forward(designerContext.state.selectedStepId);
4352
+ }
4353
+ });
4354
+ designerContext.state.onViewportChanged.subscribe(viewPort => {
4355
+ designer.onViewportChanged.forward(viewPort);
4346
4356
  });
4347
- designerContext.state.onSelectedStepIdChanged.subscribe(() => designer.onSelectedStepIdChanged.forward(designerContext.state.selectedStepId));
4348
4357
  designerContext.state.onIsToolboxCollapsedChanged.subscribe(isCollapsed => {
4349
4358
  designer.onIsToolboxCollapsedChanged.forward(isCollapsed);
4350
4359
  });
@@ -4367,6 +4376,10 @@
4367
4376
  * @description Fires when the definition has changed.
4368
4377
  */
4369
4378
  this.onDefinitionChanged = new SimpleEvent();
4379
+ /**
4380
+ * @description Fires when the viewport has changed.
4381
+ */
4382
+ this.onViewportChanged = new SimpleEvent();
4370
4383
  /**
4371
4384
  * @description Fires when the selected step has changed.
4372
4385
  */
@@ -4416,6 +4429,19 @@
4416
4429
  selectStepById(stepId) {
4417
4430
  this.state.setSelectedStepId(stepId);
4418
4431
  }
4432
+ /**
4433
+ * @returns the current viewport.
4434
+ */
4435
+ getViewport() {
4436
+ return this.state.viewport;
4437
+ }
4438
+ /**
4439
+ * @description Sets the viewport.
4440
+ * @param viewport Viewport.
4441
+ */
4442
+ setViewport(viewport) {
4443
+ this.state.setViewport(viewport);
4444
+ }
4419
4445
  /**
4420
4446
  * @description Unselects the selected step.
4421
4447
  */
package/lib/cjs/index.cjs CHANGED
@@ -269,27 +269,29 @@ 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
- });
272
+ const raceEvent = race(0, state.onDefinitionChanged, state.onSelectedStepIdChanged);
273
+ const listener = new EditorRenderer(state, definitionWalker, handler, raceEvent);
274
+ raceEvent.subscribe(listener.raceEventHandler);
282
275
  listener.tryRender(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]) => {
285
+ if (definitionChanged) {
286
+ this.onDefinitionChanged(definitionChanged);
287
+ }
288
+ else if (selectedStepId !== undefined) {
289
+ this.onSelectedStepIdChanged(selectedStepId);
290
+ }
291
+ };
290
292
  }
291
293
  destroy() {
292
- // TODO: unsubscribe from events
294
+ this.raceEvent.unsubscribe(this.raceEventHandler);
293
295
  }
294
296
  render(stepId) {
295
297
  const step = stepId ? this.definitionWalker.getById(this.state.definition, stepId) : null;
@@ -4156,10 +4158,17 @@ class Designer {
4156
4158
  const view = DesignerView.create(placeholder, designerContext, designerApi);
4157
4159
  const designer = new Designer(view, designerContext.state, designerContext.definitionWalker, designerContext.historyController, designerApi);
4158
4160
  view.workspace.onReady.subscribe(() => designer.onReady.forward());
4159
- designerContext.state.onDefinitionChanged.subscribe(() => {
4160
- setTimeout(() => designer.onDefinitionChanged.forward(designerContext.state.definition));
4161
+ race(0, designerContext.state.onDefinitionChanged, designerContext.state.onSelectedStepIdChanged).subscribe(([definition, selectedStepId]) => {
4162
+ if (definition !== undefined) {
4163
+ designer.onDefinitionChanged.forward(designerContext.state.definition);
4164
+ }
4165
+ if (selectedStepId !== undefined) {
4166
+ designer.onSelectedStepIdChanged.forward(designerContext.state.selectedStepId);
4167
+ }
4168
+ });
4169
+ designerContext.state.onViewportChanged.subscribe(viewPort => {
4170
+ designer.onViewportChanged.forward(viewPort);
4161
4171
  });
4162
- designerContext.state.onSelectedStepIdChanged.subscribe(() => designer.onSelectedStepIdChanged.forward(designerContext.state.selectedStepId));
4163
4172
  designerContext.state.onIsToolboxCollapsedChanged.subscribe(isCollapsed => {
4164
4173
  designer.onIsToolboxCollapsedChanged.forward(isCollapsed);
4165
4174
  });
@@ -4182,6 +4191,10 @@ class Designer {
4182
4191
  * @description Fires when the definition has changed.
4183
4192
  */
4184
4193
  this.onDefinitionChanged = new SimpleEvent();
4194
+ /**
4195
+ * @description Fires when the viewport has changed.
4196
+ */
4197
+ this.onViewportChanged = new SimpleEvent();
4185
4198
  /**
4186
4199
  * @description Fires when the selected step has changed.
4187
4200
  */
@@ -4231,6 +4244,19 @@ class Designer {
4231
4244
  selectStepById(stepId) {
4232
4245
  this.state.setSelectedStepId(stepId);
4233
4246
  }
4247
+ /**
4248
+ * @returns the current viewport.
4249
+ */
4250
+ getViewport() {
4251
+ return this.state.viewport;
4252
+ }
4253
+ /**
4254
+ * @description Sets the viewport.
4255
+ * @param viewport Viewport.
4256
+ */
4257
+ setViewport(viewport) {
4258
+ this.state.setViewport(viewport);
4259
+ }
4234
4260
  /**
4235
4261
  * @description Unselects the selected step.
4236
4262
  */
package/lib/esm/index.js CHANGED
@@ -268,27 +268,29 @@ 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
- });
271
+ const raceEvent = race(0, state.onDefinitionChanged, state.onSelectedStepIdChanged);
272
+ const listener = new EditorRenderer(state, definitionWalker, handler, raceEvent);
273
+ raceEvent.subscribe(listener.raceEventHandler);
281
274
  listener.tryRender(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]) => {
284
+ if (definitionChanged) {
285
+ this.onDefinitionChanged(definitionChanged);
286
+ }
287
+ else if (selectedStepId !== undefined) {
288
+ this.onSelectedStepIdChanged(selectedStepId);
289
+ }
290
+ };
289
291
  }
290
292
  destroy() {
291
- // TODO: unsubscribe from events
293
+ this.raceEvent.unsubscribe(this.raceEventHandler);
292
294
  }
293
295
  render(stepId) {
294
296
  const step = stepId ? this.definitionWalker.getById(this.state.definition, stepId) : null;
@@ -4155,10 +4157,17 @@ class Designer {
4155
4157
  const view = DesignerView.create(placeholder, designerContext, designerApi);
4156
4158
  const designer = new Designer(view, designerContext.state, designerContext.definitionWalker, designerContext.historyController, designerApi);
4157
4159
  view.workspace.onReady.subscribe(() => designer.onReady.forward());
4158
- designerContext.state.onDefinitionChanged.subscribe(() => {
4159
- setTimeout(() => designer.onDefinitionChanged.forward(designerContext.state.definition));
4160
+ race(0, designerContext.state.onDefinitionChanged, designerContext.state.onSelectedStepIdChanged).subscribe(([definition, selectedStepId]) => {
4161
+ if (definition !== undefined) {
4162
+ designer.onDefinitionChanged.forward(designerContext.state.definition);
4163
+ }
4164
+ if (selectedStepId !== undefined) {
4165
+ designer.onSelectedStepIdChanged.forward(designerContext.state.selectedStepId);
4166
+ }
4167
+ });
4168
+ designerContext.state.onViewportChanged.subscribe(viewPort => {
4169
+ designer.onViewportChanged.forward(viewPort);
4160
4170
  });
4161
- designerContext.state.onSelectedStepIdChanged.subscribe(() => designer.onSelectedStepIdChanged.forward(designerContext.state.selectedStepId));
4162
4171
  designerContext.state.onIsToolboxCollapsedChanged.subscribe(isCollapsed => {
4163
4172
  designer.onIsToolboxCollapsedChanged.forward(isCollapsed);
4164
4173
  });
@@ -4181,6 +4190,10 @@ class Designer {
4181
4190
  * @description Fires when the definition has changed.
4182
4191
  */
4183
4192
  this.onDefinitionChanged = new SimpleEvent();
4193
+ /**
4194
+ * @description Fires when the viewport has changed.
4195
+ */
4196
+ this.onViewportChanged = new SimpleEvent();
4184
4197
  /**
4185
4198
  * @description Fires when the selected step has changed.
4186
4199
  */
@@ -4230,6 +4243,19 @@ class Designer {
4230
4243
  selectStepById(stepId) {
4231
4244
  this.state.setSelectedStepId(stepId);
4232
4245
  }
4246
+ /**
4247
+ * @returns the current viewport.
4248
+ */
4249
+ getViewport() {
4250
+ return this.state.viewport;
4251
+ }
4252
+ /**
4253
+ * @description Sets the viewport.
4254
+ * @param viewport Viewport.
4255
+ */
4256
+ setViewport(viewport) {
4257
+ this.state.setViewport(viewport);
4258
+ }
4233
4259
  /**
4234
4260
  * @description Unselects the selected step.
4235
4261
  */
package/lib/index.d.ts CHANGED
@@ -361,12 +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
370
  private tryRender;
371
+ private readonly raceEventHandler;
370
372
  private onDefinitionChanged;
371
373
  private onSelectedStepIdChanged;
372
374
  }
@@ -798,8 +800,8 @@ interface ViewportController {
798
800
  focusOnComponent(componentPosition: Vector, componentSize: Vector): void;
799
801
  }
800
802
  interface Viewport {
801
- position: Vector;
802
- scale: number;
803
+ readonly position: Vector;
804
+ readonly scale: number;
803
805
  }
804
806
  interface DaemonExtension {
805
807
  create(api: DesignerApi): Daemon;
@@ -1050,6 +1052,10 @@ declare class Designer<TDefinition extends Definition = Definition> {
1050
1052
  * @description Fires when the definition has changed.
1051
1053
  */
1052
1054
  readonly onDefinitionChanged: SimpleEvent<TDefinition>;
1055
+ /**
1056
+ * @description Fires when the viewport has changed.
1057
+ */
1058
+ readonly onViewportChanged: SimpleEvent<Viewport>;
1053
1059
  /**
1054
1060
  * @description Fires when the selected step has changed.
1055
1061
  */
@@ -1086,6 +1092,15 @@ declare class Designer<TDefinition extends Definition = Definition> {
1086
1092
  * @description Selects a step by the id.
1087
1093
  */
1088
1094
  selectStepById(stepId: string): void;
1095
+ /**
1096
+ * @returns the current viewport.
1097
+ */
1098
+ getViewport(): Viewport;
1099
+ /**
1100
+ * @description Sets the viewport.
1101
+ * @param viewport Viewport.
1102
+ */
1103
+ setViewport(viewport: Viewport): void;
1089
1104
  /**
1090
1105
  * @description Unselects the selected step.
1091
1106
  */
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.16.10",
5
5
  "type": "module",
6
6
  "main": "./lib/esm/index.js",
7
7
  "types": "./lib/index.d.ts",