sequential-workflow-designer 0.24.0 → 0.24.2

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 +19 -15
  3. package/lib/cjs/index.cjs +19 -15
  4. package/lib/esm/index.js +19 -15
  5. package/lib/index.d.ts +7 -2
  6. package/package.json +1 -1
package/README.md CHANGED
@@ -103,10 +103,10 @@ Add the below code to your head section in HTML document.
103
103
  ```html
104
104
  <head>
105
105
  ...
106
- <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.0/css/designer.css" rel="stylesheet">
107
- <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.0/css/designer-light.css" rel="stylesheet">
108
- <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.0/css/designer-dark.css" rel="stylesheet">
109
- <script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.0/dist/index.umd.js"></script>
106
+ <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.2/css/designer.css" rel="stylesheet">
107
+ <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.2/css/designer-light.css" rel="stylesheet">
108
+ <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.2/css/designer-dark.css" rel="stylesheet">
109
+ <script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.2/dist/index.umd.js"></script>
110
110
  ```
111
111
 
112
112
  Call the designer by:
package/dist/index.umd.js CHANGED
@@ -408,13 +408,14 @@
408
408
  const layer = Dom.element('div', {
409
409
  class: `sqd-drag sqd-theme-${theme}`
410
410
  });
411
- document.body.appendChild(layer);
411
+ componentContext.documentBody.appendChild(layer);
412
412
  const component = componentContext.services.draggedComponent.create(layer, step, componentContext);
413
- return new DragStepView(component, layer);
413
+ return new DragStepView(component, layer, componentContext.documentBody);
414
414
  }
415
- constructor(component, layer) {
415
+ constructor(component, layer, documentBody) {
416
416
  this.component = component;
417
417
  this.layer = layer;
418
+ this.documentBody = documentBody;
418
419
  }
419
420
  setPosition(position) {
420
421
  this.layer.style.top = position.y + 'px';
@@ -422,7 +423,7 @@
422
423
  }
423
424
  remove() {
424
425
  this.component.destroy();
425
- document.body.removeChild(this.layer);
426
+ this.documentBody.removeChild(this.layer);
426
427
  }
427
428
  }
428
429
 
@@ -968,13 +969,13 @@
968
969
  }
969
970
 
970
971
  class ComponentContext {
971
- static create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services) {
972
+ static create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services, documentBody) {
972
973
  const validator = new DefinitionValidator(configuration.validator, state);
973
974
  const iconProvider = new IconProvider(configuration.steps);
974
975
  const stepComponentFactory = new StepComponentFactory(stepExtensionResolver);
975
- return new ComponentContext(validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n);
976
+ return new ComponentContext(validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n, documentBody);
976
977
  }
977
- constructor(validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n) {
978
+ constructor(validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n, documentBody) {
978
979
  this.validator = validator;
979
980
  this.iconProvider = iconProvider;
980
981
  this.placeholderController = placeholderController;
@@ -983,6 +984,7 @@
983
984
  this.services = services;
984
985
  this.preferenceStorage = preferenceStorage;
985
986
  this.i18n = i18n;
987
+ this.documentBody = documentBody;
986
988
  }
987
989
  }
988
990
 
@@ -2724,7 +2726,7 @@
2724
2726
  }
2725
2727
 
2726
2728
  class DesignerContext {
2727
- static create(parent, startDefinition, configuration, services) {
2729
+ static create(parent, startDefinition, configuration, services, documentBody) {
2728
2730
  var _a, _b, _c, _d, _e;
2729
2731
  const definition = ObjectCloner.deepClone(startDefinition);
2730
2732
  const layoutController = new LayoutController(parent);
@@ -2746,7 +2748,7 @@
2746
2748
  historyController = HistoryController.create(configuration.undoStack, state, stateModifier, configuration);
2747
2749
  }
2748
2750
  const preferenceStorage = (_e = configuration.preferenceStorage) !== null && _e !== void 0 ? _e : new MemoryPreferenceStorage();
2749
- const componentContext = ComponentContext.create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services);
2751
+ const componentContext = ComponentContext.create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services, documentBody);
2750
2752
  return new DesignerContext(theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController);
2751
2753
  }
2752
2754
  constructor(theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController) {
@@ -2795,8 +2797,8 @@
2795
2797
  });
2796
2798
  }
2797
2799
 
2798
- function isElementAttached(element) {
2799
- return !(document.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_DISCONNECTED);
2800
+ function isElementAttached(element, documentBody) {
2801
+ return !(documentBody.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_DISCONNECTED);
2800
2802
  }
2801
2803
 
2802
2804
  let lastGridPatternId = 0;
@@ -4568,19 +4570,21 @@
4568
4570
  * @returns An instance of the designer.
4569
4571
  */
4570
4572
  static create(placeholder, startDefinition, configuration) {
4573
+ var _a;
4571
4574
  if (!placeholder) {
4572
4575
  throw new Error('Placeholder is not defined');
4573
4576
  }
4574
- if (!isElementAttached(placeholder)) {
4575
- throw new Error('Placeholder is not attached to the DOM');
4576
- }
4577
4577
  if (!startDefinition) {
4578
4578
  throw new Error('Start definition is not defined');
4579
4579
  }
4580
4580
  const config = configuration;
4581
4581
  validateConfiguration(config);
4582
+ const documentBody = (_a = configuration.documentBody) !== null && _a !== void 0 ? _a : document.body;
4583
+ if (!isElementAttached(placeholder, documentBody)) {
4584
+ throw new Error('Placeholder is not attached to the DOM');
4585
+ }
4582
4586
  const services = ServicesResolver.resolve(configuration.extensions, config);
4583
- const designerContext = DesignerContext.create(placeholder, startDefinition, config, services);
4587
+ const designerContext = DesignerContext.create(placeholder, startDefinition, config, services, documentBody);
4584
4588
  const designerApi = DesignerApi.create(designerContext);
4585
4589
  const view = DesignerView.create(placeholder, designerContext, designerApi);
4586
4590
  const designer = new Designer(view, designerContext.state, designerContext.stateModifier, designerContext.definitionWalker, designerContext.historyController, designerApi);
package/lib/cjs/index.cjs CHANGED
@@ -406,13 +406,14 @@ class DragStepView {
406
406
  const layer = Dom.element('div', {
407
407
  class: `sqd-drag sqd-theme-${theme}`
408
408
  });
409
- document.body.appendChild(layer);
409
+ componentContext.documentBody.appendChild(layer);
410
410
  const component = componentContext.services.draggedComponent.create(layer, step, componentContext);
411
- return new DragStepView(component, layer);
411
+ return new DragStepView(component, layer, componentContext.documentBody);
412
412
  }
413
- constructor(component, layer) {
413
+ constructor(component, layer, documentBody) {
414
414
  this.component = component;
415
415
  this.layer = layer;
416
+ this.documentBody = documentBody;
416
417
  }
417
418
  setPosition(position) {
418
419
  this.layer.style.top = position.y + 'px';
@@ -420,7 +421,7 @@ class DragStepView {
420
421
  }
421
422
  remove() {
422
423
  this.component.destroy();
423
- document.body.removeChild(this.layer);
424
+ this.documentBody.removeChild(this.layer);
424
425
  }
425
426
  }
426
427
 
@@ -966,13 +967,13 @@ class StepComponentFactory {
966
967
  }
967
968
 
968
969
  class ComponentContext {
969
- static create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services) {
970
+ static create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services, documentBody) {
970
971
  const validator = new DefinitionValidator(configuration.validator, state);
971
972
  const iconProvider = new IconProvider(configuration.steps);
972
973
  const stepComponentFactory = new StepComponentFactory(stepExtensionResolver);
973
- return new ComponentContext(validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n);
974
+ return new ComponentContext(validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n, documentBody);
974
975
  }
975
- constructor(validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n) {
976
+ constructor(validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n, documentBody) {
976
977
  this.validator = validator;
977
978
  this.iconProvider = iconProvider;
978
979
  this.placeholderController = placeholderController;
@@ -981,6 +982,7 @@ class ComponentContext {
981
982
  this.services = services;
982
983
  this.preferenceStorage = preferenceStorage;
983
984
  this.i18n = i18n;
985
+ this.documentBody = documentBody;
984
986
  }
985
987
  }
986
988
 
@@ -2539,7 +2541,7 @@ class MemoryPreferenceStorage {
2539
2541
  }
2540
2542
 
2541
2543
  class DesignerContext {
2542
- static create(parent, startDefinition, configuration, services) {
2544
+ static create(parent, startDefinition, configuration, services, documentBody) {
2543
2545
  var _a, _b, _c, _d, _e;
2544
2546
  const definition = ObjectCloner.deepClone(startDefinition);
2545
2547
  const layoutController = new LayoutController(parent);
@@ -2561,7 +2563,7 @@ class DesignerContext {
2561
2563
  historyController = HistoryController.create(configuration.undoStack, state, stateModifier, configuration);
2562
2564
  }
2563
2565
  const preferenceStorage = (_e = configuration.preferenceStorage) !== null && _e !== void 0 ? _e : new MemoryPreferenceStorage();
2564
- const componentContext = ComponentContext.create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services);
2566
+ const componentContext = ComponentContext.create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services, documentBody);
2565
2567
  return new DesignerContext(theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController);
2566
2568
  }
2567
2569
  constructor(theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController) {
@@ -2610,8 +2612,8 @@ function __awaiter(thisArg, _arguments, P, generator) {
2610
2612
  });
2611
2613
  }
2612
2614
 
2613
- function isElementAttached(element) {
2614
- return !(document.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_DISCONNECTED);
2615
+ function isElementAttached(element, documentBody) {
2616
+ return !(documentBody.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_DISCONNECTED);
2615
2617
  }
2616
2618
 
2617
2619
  let lastGridPatternId = 0;
@@ -4383,19 +4385,21 @@ class Designer {
4383
4385
  * @returns An instance of the designer.
4384
4386
  */
4385
4387
  static create(placeholder, startDefinition, configuration) {
4388
+ var _a;
4386
4389
  if (!placeholder) {
4387
4390
  throw new Error('Placeholder is not defined');
4388
4391
  }
4389
- if (!isElementAttached(placeholder)) {
4390
- throw new Error('Placeholder is not attached to the DOM');
4391
- }
4392
4392
  if (!startDefinition) {
4393
4393
  throw new Error('Start definition is not defined');
4394
4394
  }
4395
4395
  const config = configuration;
4396
4396
  validateConfiguration(config);
4397
+ const documentBody = (_a = configuration.documentBody) !== null && _a !== void 0 ? _a : document.body;
4398
+ if (!isElementAttached(placeholder, documentBody)) {
4399
+ throw new Error('Placeholder is not attached to the DOM');
4400
+ }
4397
4401
  const services = ServicesResolver.resolve(configuration.extensions, config);
4398
- const designerContext = DesignerContext.create(placeholder, startDefinition, config, services);
4402
+ const designerContext = DesignerContext.create(placeholder, startDefinition, config, services, documentBody);
4399
4403
  const designerApi = DesignerApi.create(designerContext);
4400
4404
  const view = DesignerView.create(placeholder, designerContext, designerApi);
4401
4405
  const designer = new Designer(view, designerContext.state, designerContext.stateModifier, designerContext.definitionWalker, designerContext.historyController, designerApi);
package/lib/esm/index.js CHANGED
@@ -405,13 +405,14 @@ class DragStepView {
405
405
  const layer = Dom.element('div', {
406
406
  class: `sqd-drag sqd-theme-${theme}`
407
407
  });
408
- document.body.appendChild(layer);
408
+ componentContext.documentBody.appendChild(layer);
409
409
  const component = componentContext.services.draggedComponent.create(layer, step, componentContext);
410
- return new DragStepView(component, layer);
410
+ return new DragStepView(component, layer, componentContext.documentBody);
411
411
  }
412
- constructor(component, layer) {
412
+ constructor(component, layer, documentBody) {
413
413
  this.component = component;
414
414
  this.layer = layer;
415
+ this.documentBody = documentBody;
415
416
  }
416
417
  setPosition(position) {
417
418
  this.layer.style.top = position.y + 'px';
@@ -419,7 +420,7 @@ class DragStepView {
419
420
  }
420
421
  remove() {
421
422
  this.component.destroy();
422
- document.body.removeChild(this.layer);
423
+ this.documentBody.removeChild(this.layer);
423
424
  }
424
425
  }
425
426
 
@@ -965,13 +966,13 @@ class StepComponentFactory {
965
966
  }
966
967
 
967
968
  class ComponentContext {
968
- static create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services) {
969
+ static create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services, documentBody) {
969
970
  const validator = new DefinitionValidator(configuration.validator, state);
970
971
  const iconProvider = new IconProvider(configuration.steps);
971
972
  const stepComponentFactory = new StepComponentFactory(stepExtensionResolver);
972
- return new ComponentContext(validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n);
973
+ return new ComponentContext(validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n, documentBody);
973
974
  }
974
- constructor(validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n) {
975
+ constructor(validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n, documentBody) {
975
976
  this.validator = validator;
976
977
  this.iconProvider = iconProvider;
977
978
  this.placeholderController = placeholderController;
@@ -980,6 +981,7 @@ class ComponentContext {
980
981
  this.services = services;
981
982
  this.preferenceStorage = preferenceStorage;
982
983
  this.i18n = i18n;
984
+ this.documentBody = documentBody;
983
985
  }
984
986
  }
985
987
 
@@ -2538,7 +2540,7 @@ class MemoryPreferenceStorage {
2538
2540
  }
2539
2541
 
2540
2542
  class DesignerContext {
2541
- static create(parent, startDefinition, configuration, services) {
2543
+ static create(parent, startDefinition, configuration, services, documentBody) {
2542
2544
  var _a, _b, _c, _d, _e;
2543
2545
  const definition = ObjectCloner.deepClone(startDefinition);
2544
2546
  const layoutController = new LayoutController(parent);
@@ -2560,7 +2562,7 @@ class DesignerContext {
2560
2562
  historyController = HistoryController.create(configuration.undoStack, state, stateModifier, configuration);
2561
2563
  }
2562
2564
  const preferenceStorage = (_e = configuration.preferenceStorage) !== null && _e !== void 0 ? _e : new MemoryPreferenceStorage();
2563
- const componentContext = ComponentContext.create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services);
2565
+ const componentContext = ComponentContext.create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services, documentBody);
2564
2566
  return new DesignerContext(theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController);
2565
2567
  }
2566
2568
  constructor(theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController) {
@@ -2609,8 +2611,8 @@ function __awaiter(thisArg, _arguments, P, generator) {
2609
2611
  });
2610
2612
  }
2611
2613
 
2612
- function isElementAttached(element) {
2613
- return !(document.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_DISCONNECTED);
2614
+ function isElementAttached(element, documentBody) {
2615
+ return !(documentBody.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_DISCONNECTED);
2614
2616
  }
2615
2617
 
2616
2618
  let lastGridPatternId = 0;
@@ -4382,19 +4384,21 @@ class Designer {
4382
4384
  * @returns An instance of the designer.
4383
4385
  */
4384
4386
  static create(placeholder, startDefinition, configuration) {
4387
+ var _a;
4385
4388
  if (!placeholder) {
4386
4389
  throw new Error('Placeholder is not defined');
4387
4390
  }
4388
- if (!isElementAttached(placeholder)) {
4389
- throw new Error('Placeholder is not attached to the DOM');
4390
- }
4391
4391
  if (!startDefinition) {
4392
4392
  throw new Error('Start definition is not defined');
4393
4393
  }
4394
4394
  const config = configuration;
4395
4395
  validateConfiguration(config);
4396
+ const documentBody = (_a = configuration.documentBody) !== null && _a !== void 0 ? _a : document.body;
4397
+ if (!isElementAttached(placeholder, documentBody)) {
4398
+ throw new Error('Placeholder is not attached to the DOM');
4399
+ }
4396
4400
  const services = ServicesResolver.resolve(configuration.extensions, config);
4397
- const designerContext = DesignerContext.create(placeholder, startDefinition, config, services);
4401
+ const designerContext = DesignerContext.create(placeholder, startDefinition, config, services, documentBody);
4398
4402
  const designerApi = DesignerApi.create(designerContext);
4399
4403
  const view = DesignerView.create(placeholder, designerContext, designerApi);
4400
4404
  const designer = new Designer(view, designerContext.state, designerContext.stateModifier, designerContext.definitionWalker, designerContext.historyController, designerApi);
package/lib/index.d.ts CHANGED
@@ -279,7 +279,8 @@ declare class ComponentContext {
279
279
  readonly services: Services;
280
280
  readonly preferenceStorage: PreferenceStorage;
281
281
  readonly i18n: I18n;
282
- static create(configuration: DesignerConfiguration, state: DesignerState, stepExtensionResolver: StepExtensionResolver, definitionWalker: DefinitionWalker, preferenceStorage: PreferenceStorage, placeholderController: PlaceholderController, i18n: I18n, services: Services): ComponentContext;
282
+ readonly documentBody: Node;
283
+ static create(configuration: DesignerConfiguration, state: DesignerState, stepExtensionResolver: StepExtensionResolver, definitionWalker: DefinitionWalker, preferenceStorage: PreferenceStorage, placeholderController: PlaceholderController, i18n: I18n, services: Services, documentBody: Node): ComponentContext;
283
284
  private constructor();
284
285
  }
285
286
 
@@ -356,7 +357,7 @@ declare class DesignerContext {
356
357
  readonly behaviorController: BehaviorController;
357
358
  readonly customActionController: CustomActionController;
358
359
  readonly historyController: HistoryController | undefined;
359
- static create(parent: HTMLElement, startDefinition: Definition, configuration: DesignerConfiguration, services: Services): DesignerContext;
360
+ static create(parent: HTMLElement, startDefinition: Definition, configuration: DesignerConfiguration, services: Services, documentBody: Node): DesignerContext;
360
361
  constructor(theme: string, state: DesignerState, configuration: DesignerConfiguration, services: Services, componentContext: ComponentContext, definitionWalker: DefinitionWalker, i18n: I18n, stateModifier: StateModifier, layoutController: LayoutController, workspaceController: WorkspaceControllerWrapper, placeholderController: PlaceholderController, behaviorController: BehaviorController, customActionController: CustomActionController, historyController: HistoryController | undefined);
361
362
  setWorkspaceController(controller: WorkspaceController): void;
362
363
  }
@@ -935,6 +936,10 @@ interface DesignerConfiguration<TDefinition extends Definition = Definition> {
935
936
  * @description Custom translation function.
936
937
  */
937
938
  i18n?: I18n;
939
+ /**
940
+ * @description The body of the document. By default, the designer will use the `document.body`.
941
+ */
942
+ documentBody?: Node;
938
943
  }
939
944
  type UidGenerator = () => string;
940
945
  type I18n = (key: string, defaultValue: string) => string;
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.24.0",
4
+ "version": "0.24.2",
5
5
  "type": "module",
6
6
  "main": "./lib/esm/index.js",
7
7
  "types": "./lib/index.d.ts",