sequential-workflow-designer 0.34.1 → 0.35.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 +5 -5
  2. package/dist/index.umd.js +23 -16
  3. package/lib/cjs/index.cjs +23 -16
  4. package/lib/esm/index.js +23 -16
  5. package/lib/index.d.ts +3 -0
  6. package/package.json +1 -1
package/README.md CHANGED
@@ -10,7 +10,7 @@ Features:
10
10
 
11
11
  * 0 external dependencies,
12
12
  * fully generic and configurable,
13
- * use light/dark themes or customize easily,
13
+ * use light/dark/soft themes or customize easily,
14
14
  * compatible with modern browsers and mobile devices,
15
15
  * the definition is stored as JSON,
16
16
  * supports [Angular](./angular/designer/), [React](./react/) and [Svelte](./svelte/).
@@ -106,10 +106,10 @@ Add the below code to your head section in HTML document.
106
106
  ```html
107
107
  <head>
108
108
  ...
109
- <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.34.1/css/designer.css" rel="stylesheet">
110
- <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.34.1/css/designer-light.css" rel="stylesheet">
111
- <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.34.1/css/designer-dark.css" rel="stylesheet">
112
- <script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.34.1/dist/index.umd.js"></script>
109
+ <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.35.0/css/designer.css" rel="stylesheet">
110
+ <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.35.0/css/designer-light.css" rel="stylesheet">
111
+ <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.35.0/css/designer-dark.css" rel="stylesheet">
112
+ <script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.35.0/dist/index.umd.js"></script>
113
113
  ```
114
114
 
115
115
  Call the designer by:
package/dist/index.umd.js CHANGED
@@ -119,7 +119,7 @@
119
119
 
120
120
  function getAbsolutePosition(element) {
121
121
  const rect = element.getBoundingClientRect();
122
- return new Vector(rect.x + window.scrollX, rect.y + window.scrollY);
122
+ return new Vector(rect.left + window.scrollX, rect.top + window.scrollY);
123
123
  }
124
124
 
125
125
  class Uid {
@@ -468,14 +468,14 @@
468
468
  static create(designerContext, step, attachedStepComponent) {
469
469
  const isAttached = Boolean(attachedStepComponent);
470
470
  const view = DragStepView.create(step, isAttached, designerContext.theme, designerContext.componentContext);
471
- return new DragStepBehavior(view, designerContext.workspaceController, designerContext.placeholderController, designerContext.state, step, designerContext.stateModifier, attachedStepComponent);
471
+ return new DragStepBehavior(view, step, designerContext.workspaceController, designerContext.placeholderController, designerContext.state, designerContext.stateModifier, attachedStepComponent);
472
472
  }
473
- constructor(view, workspaceController, placeholderController, designerState, step, stateModifier, attachedStepComponent) {
473
+ constructor(view, step, workspaceController, placeholderController, designerState, stateModifier, attachedStepComponent) {
474
474
  this.view = view;
475
+ this.step = step;
475
476
  this.workspaceController = workspaceController;
476
477
  this.placeholderController = placeholderController;
477
478
  this.designerState = designerState;
478
- this.step = step;
479
479
  this.stateModifier = stateModifier;
480
480
  this.attachedStepComponent = attachedStepComponent;
481
481
  }
@@ -489,13 +489,14 @@
489
489
  if (hasSameSize) {
490
490
  // Mouse cursor will be positioned on the same place as the source component.
491
491
  const pagePosition = this.attachedStepComponent.view.getClientPosition();
492
- offset = position.subtract(pagePosition);
492
+ offset = position.subtract(pagePosition).divideByScalar(this.designerState.viewport.scale);
493
493
  }
494
494
  }
495
495
  if (!offset) {
496
496
  // Mouse cursor will be positioned in the center of the component.
497
497
  offset = new Vector(this.view.component.width, this.view.component.height).divideByScalar(2);
498
498
  }
499
+ offset = offset.multiplyByScalar(this.view.component.scale);
499
500
  this.view.setPosition(position.subtract(offset));
500
501
  this.designerState.setIsDragging(true);
501
502
  const { placeholders, components } = this.resolvePlaceholders(this.attachedStepComponent);
@@ -2760,9 +2761,9 @@
2760
2761
  const validator = new DefinitionValidator(configuration.validator, state);
2761
2762
  const iconProvider = new IconProvider(configuration.steps);
2762
2763
  const stepComponentFactory = new StepComponentFactory(stepExtensionResolver);
2763
- return new ComponentContext(configuration.shadowRoot, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n);
2764
+ return new ComponentContext(configuration.shadowRoot, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n, state);
2764
2765
  }
2765
- constructor(shadowRoot, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n) {
2766
+ constructor(shadowRoot, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n, state) {
2766
2767
  this.shadowRoot = shadowRoot;
2767
2768
  this.validator = validator;
2768
2769
  this.iconProvider = iconProvider;
@@ -2772,6 +2773,10 @@
2772
2773
  this.services = services;
2773
2774
  this.preferenceStorage = preferenceStorage;
2774
2775
  this.i18n = i18n;
2776
+ this.state = state;
2777
+ }
2778
+ getViewportScale() {
2779
+ return this.state.viewport.scale;
2775
2780
  }
2776
2781
  }
2777
2782
 
@@ -4322,12 +4327,12 @@
4322
4327
  }
4323
4328
  }
4324
4329
 
4325
- const SAFE_OFFSET = 10;
4330
+ // We need some padding around the step component to make sure shadows are not clipped.
4331
+ const PADDING = 10;
4326
4332
  class DefaultDraggedComponent {
4327
- static create(parent, step, _, componentContext) {
4333
+ static create(parent, step, isAttached, componentContext) {
4334
+ const scale = isAttached ? componentContext.getViewportScale() : 1;
4328
4335
  const canvas = Dom.svg('svg');
4329
- canvas.style.marginLeft = -10 + 'px';
4330
- canvas.style.marginTop = -10 + 'px';
4331
4336
  parent.appendChild(canvas);
4332
4337
  const previewStepContext = {
4333
4338
  parentSequence: [],
@@ -4340,15 +4345,17 @@
4340
4345
  };
4341
4346
  const stepComponent = componentContext.stepComponentFactory.create(canvas, previewStepContext, componentContext);
4342
4347
  Dom.attrs(canvas, {
4343
- width: stepComponent.view.width + SAFE_OFFSET * 2,
4344
- height: stepComponent.view.height + SAFE_OFFSET * 2
4348
+ width: stepComponent.view.width + PADDING * 2,
4349
+ height: stepComponent.view.height + PADDING * 2,
4350
+ style: `transform: scale(${scale}) translate(${ -10}px, ${ -10}px); transform-origin: 0 0;`
4345
4351
  });
4346
- Dom.translate(stepComponent.view.g, SAFE_OFFSET, SAFE_OFFSET);
4347
- return new DefaultDraggedComponent(stepComponent.view.width, stepComponent.view.height);
4352
+ Dom.translate(stepComponent.view.g, PADDING, PADDING);
4353
+ return new DefaultDraggedComponent(stepComponent.view.width, stepComponent.view.height, scale);
4348
4354
  }
4349
- constructor(width, height) {
4355
+ constructor(width, height, scale) {
4350
4356
  this.width = width;
4351
4357
  this.height = height;
4358
+ this.scale = scale;
4352
4359
  }
4353
4360
  destroy() {
4354
4361
  // Nothing to destroy...
package/lib/cjs/index.cjs CHANGED
@@ -117,7 +117,7 @@ class Vector {
117
117
 
118
118
  function getAbsolutePosition(element) {
119
119
  const rect = element.getBoundingClientRect();
120
- return new Vector(rect.x + window.scrollX, rect.y + window.scrollY);
120
+ return new Vector(rect.left + window.scrollX, rect.top + window.scrollY);
121
121
  }
122
122
 
123
123
  class Uid {
@@ -466,14 +466,14 @@ class DragStepBehavior {
466
466
  static create(designerContext, step, attachedStepComponent) {
467
467
  const isAttached = Boolean(attachedStepComponent);
468
468
  const view = DragStepView.create(step, isAttached, designerContext.theme, designerContext.componentContext);
469
- return new DragStepBehavior(view, designerContext.workspaceController, designerContext.placeholderController, designerContext.state, step, designerContext.stateModifier, attachedStepComponent);
469
+ return new DragStepBehavior(view, step, designerContext.workspaceController, designerContext.placeholderController, designerContext.state, designerContext.stateModifier, attachedStepComponent);
470
470
  }
471
- constructor(view, workspaceController, placeholderController, designerState, step, stateModifier, attachedStepComponent) {
471
+ constructor(view, step, workspaceController, placeholderController, designerState, stateModifier, attachedStepComponent) {
472
472
  this.view = view;
473
+ this.step = step;
473
474
  this.workspaceController = workspaceController;
474
475
  this.placeholderController = placeholderController;
475
476
  this.designerState = designerState;
476
- this.step = step;
477
477
  this.stateModifier = stateModifier;
478
478
  this.attachedStepComponent = attachedStepComponent;
479
479
  }
@@ -487,13 +487,14 @@ class DragStepBehavior {
487
487
  if (hasSameSize) {
488
488
  // Mouse cursor will be positioned on the same place as the source component.
489
489
  const pagePosition = this.attachedStepComponent.view.getClientPosition();
490
- offset = position.subtract(pagePosition);
490
+ offset = position.subtract(pagePosition).divideByScalar(this.designerState.viewport.scale);
491
491
  }
492
492
  }
493
493
  if (!offset) {
494
494
  // Mouse cursor will be positioned in the center of the component.
495
495
  offset = new Vector(this.view.component.width, this.view.component.height).divideByScalar(2);
496
496
  }
497
+ offset = offset.multiplyByScalar(this.view.component.scale);
497
498
  this.view.setPosition(position.subtract(offset));
498
499
  this.designerState.setIsDragging(true);
499
500
  const { placeholders, components } = this.resolvePlaceholders(this.attachedStepComponent);
@@ -2575,9 +2576,9 @@ class ComponentContext {
2575
2576
  const validator = new DefinitionValidator(configuration.validator, state);
2576
2577
  const iconProvider = new IconProvider(configuration.steps);
2577
2578
  const stepComponentFactory = new StepComponentFactory(stepExtensionResolver);
2578
- return new ComponentContext(configuration.shadowRoot, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n);
2579
+ return new ComponentContext(configuration.shadowRoot, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n, state);
2579
2580
  }
2580
- constructor(shadowRoot, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n) {
2581
+ constructor(shadowRoot, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n, state) {
2581
2582
  this.shadowRoot = shadowRoot;
2582
2583
  this.validator = validator;
2583
2584
  this.iconProvider = iconProvider;
@@ -2587,6 +2588,10 @@ class ComponentContext {
2587
2588
  this.services = services;
2588
2589
  this.preferenceStorage = preferenceStorage;
2589
2590
  this.i18n = i18n;
2591
+ this.state = state;
2592
+ }
2593
+ getViewportScale() {
2594
+ return this.state.viewport.scale;
2590
2595
  }
2591
2596
  }
2592
2597
 
@@ -4137,12 +4142,12 @@ class DesignerView {
4137
4142
  }
4138
4143
  }
4139
4144
 
4140
- const SAFE_OFFSET = 10;
4145
+ // We need some padding around the step component to make sure shadows are not clipped.
4146
+ const PADDING = 10;
4141
4147
  class DefaultDraggedComponent {
4142
- static create(parent, step, _, componentContext) {
4148
+ static create(parent, step, isAttached, componentContext) {
4149
+ const scale = isAttached ? componentContext.getViewportScale() : 1;
4143
4150
  const canvas = Dom.svg('svg');
4144
- canvas.style.marginLeft = -10 + 'px';
4145
- canvas.style.marginTop = -10 + 'px';
4146
4151
  parent.appendChild(canvas);
4147
4152
  const previewStepContext = {
4148
4153
  parentSequence: [],
@@ -4155,15 +4160,17 @@ class DefaultDraggedComponent {
4155
4160
  };
4156
4161
  const stepComponent = componentContext.stepComponentFactory.create(canvas, previewStepContext, componentContext);
4157
4162
  Dom.attrs(canvas, {
4158
- width: stepComponent.view.width + SAFE_OFFSET * 2,
4159
- height: stepComponent.view.height + SAFE_OFFSET * 2
4163
+ width: stepComponent.view.width + PADDING * 2,
4164
+ height: stepComponent.view.height + PADDING * 2,
4165
+ style: `transform: scale(${scale}) translate(${ -10}px, ${ -10}px); transform-origin: 0 0;`
4160
4166
  });
4161
- Dom.translate(stepComponent.view.g, SAFE_OFFSET, SAFE_OFFSET);
4162
- return new DefaultDraggedComponent(stepComponent.view.width, stepComponent.view.height);
4167
+ Dom.translate(stepComponent.view.g, PADDING, PADDING);
4168
+ return new DefaultDraggedComponent(stepComponent.view.width, stepComponent.view.height, scale);
4163
4169
  }
4164
- constructor(width, height) {
4170
+ constructor(width, height, scale) {
4165
4171
  this.width = width;
4166
4172
  this.height = height;
4173
+ this.scale = scale;
4167
4174
  }
4168
4175
  destroy() {
4169
4176
  // Nothing to destroy...
package/lib/esm/index.js CHANGED
@@ -116,7 +116,7 @@ class Vector {
116
116
 
117
117
  function getAbsolutePosition(element) {
118
118
  const rect = element.getBoundingClientRect();
119
- return new Vector(rect.x + window.scrollX, rect.y + window.scrollY);
119
+ return new Vector(rect.left + window.scrollX, rect.top + window.scrollY);
120
120
  }
121
121
 
122
122
  class Uid {
@@ -465,14 +465,14 @@ class DragStepBehavior {
465
465
  static create(designerContext, step, attachedStepComponent) {
466
466
  const isAttached = Boolean(attachedStepComponent);
467
467
  const view = DragStepView.create(step, isAttached, designerContext.theme, designerContext.componentContext);
468
- return new DragStepBehavior(view, designerContext.workspaceController, designerContext.placeholderController, designerContext.state, step, designerContext.stateModifier, attachedStepComponent);
468
+ return new DragStepBehavior(view, step, designerContext.workspaceController, designerContext.placeholderController, designerContext.state, designerContext.stateModifier, attachedStepComponent);
469
469
  }
470
- constructor(view, workspaceController, placeholderController, designerState, step, stateModifier, attachedStepComponent) {
470
+ constructor(view, step, workspaceController, placeholderController, designerState, stateModifier, attachedStepComponent) {
471
471
  this.view = view;
472
+ this.step = step;
472
473
  this.workspaceController = workspaceController;
473
474
  this.placeholderController = placeholderController;
474
475
  this.designerState = designerState;
475
- this.step = step;
476
476
  this.stateModifier = stateModifier;
477
477
  this.attachedStepComponent = attachedStepComponent;
478
478
  }
@@ -486,13 +486,14 @@ class DragStepBehavior {
486
486
  if (hasSameSize) {
487
487
  // Mouse cursor will be positioned on the same place as the source component.
488
488
  const pagePosition = this.attachedStepComponent.view.getClientPosition();
489
- offset = position.subtract(pagePosition);
489
+ offset = position.subtract(pagePosition).divideByScalar(this.designerState.viewport.scale);
490
490
  }
491
491
  }
492
492
  if (!offset) {
493
493
  // Mouse cursor will be positioned in the center of the component.
494
494
  offset = new Vector(this.view.component.width, this.view.component.height).divideByScalar(2);
495
495
  }
496
+ offset = offset.multiplyByScalar(this.view.component.scale);
496
497
  this.view.setPosition(position.subtract(offset));
497
498
  this.designerState.setIsDragging(true);
498
499
  const { placeholders, components } = this.resolvePlaceholders(this.attachedStepComponent);
@@ -2574,9 +2575,9 @@ class ComponentContext {
2574
2575
  const validator = new DefinitionValidator(configuration.validator, state);
2575
2576
  const iconProvider = new IconProvider(configuration.steps);
2576
2577
  const stepComponentFactory = new StepComponentFactory(stepExtensionResolver);
2577
- return new ComponentContext(configuration.shadowRoot, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n);
2578
+ return new ComponentContext(configuration.shadowRoot, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n, state);
2578
2579
  }
2579
- constructor(shadowRoot, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n) {
2580
+ constructor(shadowRoot, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n, state) {
2580
2581
  this.shadowRoot = shadowRoot;
2581
2582
  this.validator = validator;
2582
2583
  this.iconProvider = iconProvider;
@@ -2586,6 +2587,10 @@ class ComponentContext {
2586
2587
  this.services = services;
2587
2588
  this.preferenceStorage = preferenceStorage;
2588
2589
  this.i18n = i18n;
2590
+ this.state = state;
2591
+ }
2592
+ getViewportScale() {
2593
+ return this.state.viewport.scale;
2589
2594
  }
2590
2595
  }
2591
2596
 
@@ -4136,12 +4141,12 @@ class DesignerView {
4136
4141
  }
4137
4142
  }
4138
4143
 
4139
- const SAFE_OFFSET = 10;
4144
+ // We need some padding around the step component to make sure shadows are not clipped.
4145
+ const PADDING = 10;
4140
4146
  class DefaultDraggedComponent {
4141
- static create(parent, step, _, componentContext) {
4147
+ static create(parent, step, isAttached, componentContext) {
4148
+ const scale = isAttached ? componentContext.getViewportScale() : 1;
4142
4149
  const canvas = Dom.svg('svg');
4143
- canvas.style.marginLeft = -10 + 'px';
4144
- canvas.style.marginTop = -10 + 'px';
4145
4150
  parent.appendChild(canvas);
4146
4151
  const previewStepContext = {
4147
4152
  parentSequence: [],
@@ -4154,15 +4159,17 @@ class DefaultDraggedComponent {
4154
4159
  };
4155
4160
  const stepComponent = componentContext.stepComponentFactory.create(canvas, previewStepContext, componentContext);
4156
4161
  Dom.attrs(canvas, {
4157
- width: stepComponent.view.width + SAFE_OFFSET * 2,
4158
- height: stepComponent.view.height + SAFE_OFFSET * 2
4162
+ width: stepComponent.view.width + PADDING * 2,
4163
+ height: stepComponent.view.height + PADDING * 2,
4164
+ style: `transform: scale(${scale}) translate(${ -10}px, ${ -10}px); transform-origin: 0 0;`
4159
4165
  });
4160
- Dom.translate(stepComponent.view.g, SAFE_OFFSET, SAFE_OFFSET);
4161
- return new DefaultDraggedComponent(stepComponent.view.width, stepComponent.view.height);
4166
+ Dom.translate(stepComponent.view.g, PADDING, PADDING);
4167
+ return new DefaultDraggedComponent(stepComponent.view.width, stepComponent.view.height, scale);
4162
4168
  }
4163
- constructor(width, height) {
4169
+ constructor(width, height, scale) {
4164
4170
  this.width = width;
4165
4171
  this.height = height;
4172
+ this.scale = scale;
4166
4173
  }
4167
4174
  destroy() {
4168
4175
  // Nothing to destroy...
package/lib/index.d.ts CHANGED
@@ -300,8 +300,10 @@ declare class ComponentContext {
300
300
  readonly services: Services;
301
301
  readonly preferenceStorage: PreferenceStorage;
302
302
  readonly i18n: I18n;
303
+ private readonly state;
303
304
  static create(configuration: DesignerConfiguration, state: DesignerState, stepExtensionResolver: StepExtensionResolver, placeholderController: PlaceholderController, definitionWalker: DefinitionWalker, preferenceStorage: PreferenceStorage, i18n: I18n, services: Services): ComponentContext;
304
305
  private constructor();
306
+ getViewportScale(): number;
305
307
  }
306
308
 
307
309
  declare class CustomActionController {
@@ -925,6 +927,7 @@ interface DraggedComponentExtension {
925
927
  interface DraggedComponent {
926
928
  width: number;
927
929
  height: number;
930
+ scale: number;
928
931
  destroy(): void;
929
932
  }
930
933
  interface GridExtension {
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.34.1",
4
+ "version": "0.35.0",
5
5
  "type": "module",
6
6
  "main": "./lib/esm/index.js",
7
7
  "types": "./lib/index.d.ts",