sequential-workflow-designer 0.24.1 → 0.24.3

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 +30 -23
  3. package/lib/cjs/index.cjs +30 -23
  4. package/lib/esm/index.js +30 -23
  5. package/lib/index.d.ts +7 -5
  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.1/css/designer.css" rel="stylesheet">
107
- <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.1/css/designer-light.css" rel="stylesheet">
108
- <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.1/css/designer-dark.css" rel="stylesheet">
109
- <script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.1/dist/index.umd.js"></script>
106
+ <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.3/css/designer.css" rel="stylesheet">
107
+ <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.3/css/designer-light.css" rel="stylesheet">
108
+ <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.3/css/designer-dark.css" rel="stylesheet">
109
+ <script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.3/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(documentBody, parent, startDefinition, configuration, services) {
2728
2730
  var _a, _b, _c, _d, _e;
2729
2731
  const definition = ObjectCloner.deepClone(startDefinition);
2730
2732
  const layoutController = new LayoutController(parent);
@@ -2746,10 +2748,11 @@
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);
2750
- return new DesignerContext(theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController);
2751
+ const componentContext = ComponentContext.create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services, documentBody);
2752
+ return new DesignerContext(documentBody, theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController);
2751
2753
  }
2752
- constructor(theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController) {
2754
+ constructor(documentBody, theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController) {
2755
+ this.documentBody = documentBody;
2753
2756
  this.theme = theme;
2754
2757
  this.state = state;
2755
2758
  this.configuration = configuration;
@@ -2795,8 +2798,8 @@
2795
2798
  });
2796
2799
  }
2797
2800
 
2798
- function isElementAttached(element) {
2799
- return !(document.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_DISCONNECTED);
2801
+ function isElementAttached(element, documentBody) {
2802
+ return !(documentBody.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_DISCONNECTED);
2800
2803
  }
2801
2804
 
2802
2805
  let lastGridPatternId = 0;
@@ -3060,7 +3063,7 @@
3060
3063
  }
3061
3064
 
3062
3065
  class ContextMenu {
3063
- static create(position, theme, items) {
3066
+ static create(documentBody, position, theme, items) {
3064
3067
  const menu = document.createElement('div');
3065
3068
  menu.style.left = `${position.x}px`;
3066
3069
  menu.style.top = `${position.y}px`;
@@ -3080,15 +3083,16 @@
3080
3083
  elements.push(element);
3081
3084
  menu.appendChild(element);
3082
3085
  }
3083
- const instance = new ContextMenu(menu, elements, items, Date.now());
3086
+ const instance = new ContextMenu(documentBody, menu, elements, items, Date.now());
3084
3087
  document.addEventListener('mousedown', instance.mouseDown, false);
3085
3088
  document.addEventListener('mouseup', instance.mouseUp, false);
3086
3089
  document.addEventListener('touchstart', instance.mouseDown, false);
3087
3090
  document.addEventListener('touchend', instance.mouseUp, false);
3088
- document.body.appendChild(menu);
3091
+ documentBody.appendChild(menu);
3089
3092
  return instance;
3090
3093
  }
3091
- constructor(menu, elements, items, startTime) {
3094
+ constructor(documentBody, menu, elements, items, startTime) {
3095
+ this.documentBody = documentBody;
3092
3096
  this.menu = menu;
3093
3097
  this.elements = elements;
3094
3098
  this.items = items;
@@ -3135,7 +3139,7 @@
3135
3139
  }
3136
3140
  tryDestroy() {
3137
3141
  if (this.isAttached) {
3138
- document.body.removeChild(this.menu);
3142
+ this.documentBody.removeChild(this.menu);
3139
3143
  document.removeEventListener('mousedown', this.mouseDown, false);
3140
3144
  document.removeEventListener('mouseup', this.mouseUp, false);
3141
3145
  document.removeEventListener('touchstart', this.mouseDown, false);
@@ -3146,7 +3150,8 @@
3146
3150
  }
3147
3151
 
3148
3152
  class ContextMenuController {
3149
- constructor(theme, configuration, itemsBuilder) {
3153
+ constructor(documentBody, theme, configuration, itemsBuilder) {
3154
+ this.documentBody = documentBody;
3150
3155
  this.theme = theme;
3151
3156
  this.configuration = configuration;
3152
3157
  this.itemsBuilder = itemsBuilder;
@@ -3160,7 +3165,7 @@
3160
3165
  this.current.tryDestroy();
3161
3166
  }
3162
3167
  const items = this.itemsBuilder.build(commandOrNull);
3163
- this.current = ContextMenu.create(position, this.theme, items);
3168
+ this.current = ContextMenu.create(this.documentBody, position, this.theme, items);
3164
3169
  }
3165
3170
  destroy() {
3166
3171
  if (this.current) {
@@ -3262,7 +3267,7 @@
3262
3267
  const contextMenuItemsBuilder = new ContextMenuItemsBuilder(api.viewport, api.i18n, designerContext.stateModifier, designerContext.state, ((_a = designerContext.services.contextMenu) === null || _a === void 0 ? void 0 : _a.createItemsProvider)
3263
3268
  ? designerContext.services.contextMenu.createItemsProvider(designerContext.customActionController)
3264
3269
  : undefined);
3265
- const contextMenuController = new ContextMenuController(designerContext.theme, designerContext.configuration, contextMenuItemsBuilder);
3270
+ const contextMenuController = new ContextMenuController(designerContext.documentBody, designerContext.theme, designerContext.configuration, contextMenuItemsBuilder);
3266
3271
  const workspace = new Workspace(view, designerContext.definitionWalker, designerContext.state, designerContext.behaviorController, wheelController, contextMenuController, clickBehaviorResolver, api.viewport, designerContext.services);
3267
3272
  setTimeout(() => {
3268
3273
  workspace.updateRootComponent();
@@ -4568,6 +4573,7 @@
4568
4573
  * @returns An instance of the designer.
4569
4574
  */
4570
4575
  static create(placeholder, startDefinition, configuration) {
4576
+ var _a;
4571
4577
  if (!placeholder) {
4572
4578
  throw new Error('Placeholder is not defined');
4573
4579
  }
@@ -4576,11 +4582,12 @@
4576
4582
  }
4577
4583
  const config = configuration;
4578
4584
  validateConfiguration(config);
4579
- if (!config.disableDomAttachmentCheck && !isElementAttached(placeholder)) {
4585
+ const documentBody = (_a = configuration.documentBody) !== null && _a !== void 0 ? _a : document.body;
4586
+ if (!isElementAttached(placeholder, documentBody)) {
4580
4587
  throw new Error('Placeholder is not attached to the DOM');
4581
4588
  }
4582
4589
  const services = ServicesResolver.resolve(configuration.extensions, config);
4583
- const designerContext = DesignerContext.create(placeholder, startDefinition, config, services);
4590
+ const designerContext = DesignerContext.create(documentBody, placeholder, startDefinition, config, services);
4584
4591
  const designerApi = DesignerApi.create(designerContext);
4585
4592
  const view = DesignerView.create(placeholder, designerContext, designerApi);
4586
4593
  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(documentBody, parent, startDefinition, configuration, services) {
2543
2545
  var _a, _b, _c, _d, _e;
2544
2546
  const definition = ObjectCloner.deepClone(startDefinition);
2545
2547
  const layoutController = new LayoutController(parent);
@@ -2561,10 +2563,11 @@ 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);
2565
- return new DesignerContext(theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController);
2566
+ const componentContext = ComponentContext.create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services, documentBody);
2567
+ return new DesignerContext(documentBody, theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController);
2566
2568
  }
2567
- constructor(theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController) {
2569
+ constructor(documentBody, theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController) {
2570
+ this.documentBody = documentBody;
2568
2571
  this.theme = theme;
2569
2572
  this.state = state;
2570
2573
  this.configuration = configuration;
@@ -2610,8 +2613,8 @@ function __awaiter(thisArg, _arguments, P, generator) {
2610
2613
  });
2611
2614
  }
2612
2615
 
2613
- function isElementAttached(element) {
2614
- return !(document.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_DISCONNECTED);
2616
+ function isElementAttached(element, documentBody) {
2617
+ return !(documentBody.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_DISCONNECTED);
2615
2618
  }
2616
2619
 
2617
2620
  let lastGridPatternId = 0;
@@ -2875,7 +2878,7 @@ function findValidationBadgeIndex(extensions) {
2875
2878
  }
2876
2879
 
2877
2880
  class ContextMenu {
2878
- static create(position, theme, items) {
2881
+ static create(documentBody, position, theme, items) {
2879
2882
  const menu = document.createElement('div');
2880
2883
  menu.style.left = `${position.x}px`;
2881
2884
  menu.style.top = `${position.y}px`;
@@ -2895,15 +2898,16 @@ class ContextMenu {
2895
2898
  elements.push(element);
2896
2899
  menu.appendChild(element);
2897
2900
  }
2898
- const instance = new ContextMenu(menu, elements, items, Date.now());
2901
+ const instance = new ContextMenu(documentBody, menu, elements, items, Date.now());
2899
2902
  document.addEventListener('mousedown', instance.mouseDown, false);
2900
2903
  document.addEventListener('mouseup', instance.mouseUp, false);
2901
2904
  document.addEventListener('touchstart', instance.mouseDown, false);
2902
2905
  document.addEventListener('touchend', instance.mouseUp, false);
2903
- document.body.appendChild(menu);
2906
+ documentBody.appendChild(menu);
2904
2907
  return instance;
2905
2908
  }
2906
- constructor(menu, elements, items, startTime) {
2909
+ constructor(documentBody, menu, elements, items, startTime) {
2910
+ this.documentBody = documentBody;
2907
2911
  this.menu = menu;
2908
2912
  this.elements = elements;
2909
2913
  this.items = items;
@@ -2950,7 +2954,7 @@ class ContextMenu {
2950
2954
  }
2951
2955
  tryDestroy() {
2952
2956
  if (this.isAttached) {
2953
- document.body.removeChild(this.menu);
2957
+ this.documentBody.removeChild(this.menu);
2954
2958
  document.removeEventListener('mousedown', this.mouseDown, false);
2955
2959
  document.removeEventListener('mouseup', this.mouseUp, false);
2956
2960
  document.removeEventListener('touchstart', this.mouseDown, false);
@@ -2961,7 +2965,8 @@ class ContextMenu {
2961
2965
  }
2962
2966
 
2963
2967
  class ContextMenuController {
2964
- constructor(theme, configuration, itemsBuilder) {
2968
+ constructor(documentBody, theme, configuration, itemsBuilder) {
2969
+ this.documentBody = documentBody;
2965
2970
  this.theme = theme;
2966
2971
  this.configuration = configuration;
2967
2972
  this.itemsBuilder = itemsBuilder;
@@ -2975,7 +2980,7 @@ class ContextMenuController {
2975
2980
  this.current.tryDestroy();
2976
2981
  }
2977
2982
  const items = this.itemsBuilder.build(commandOrNull);
2978
- this.current = ContextMenu.create(position, this.theme, items);
2983
+ this.current = ContextMenu.create(this.documentBody, position, this.theme, items);
2979
2984
  }
2980
2985
  destroy() {
2981
2986
  if (this.current) {
@@ -3077,7 +3082,7 @@ class Workspace {
3077
3082
  const contextMenuItemsBuilder = new ContextMenuItemsBuilder(api.viewport, api.i18n, designerContext.stateModifier, designerContext.state, ((_a = designerContext.services.contextMenu) === null || _a === void 0 ? void 0 : _a.createItemsProvider)
3078
3083
  ? designerContext.services.contextMenu.createItemsProvider(designerContext.customActionController)
3079
3084
  : undefined);
3080
- const contextMenuController = new ContextMenuController(designerContext.theme, designerContext.configuration, contextMenuItemsBuilder);
3085
+ const contextMenuController = new ContextMenuController(designerContext.documentBody, designerContext.theme, designerContext.configuration, contextMenuItemsBuilder);
3081
3086
  const workspace = new Workspace(view, designerContext.definitionWalker, designerContext.state, designerContext.behaviorController, wheelController, contextMenuController, clickBehaviorResolver, api.viewport, designerContext.services);
3082
3087
  setTimeout(() => {
3083
3088
  workspace.updateRootComponent();
@@ -4383,6 +4388,7 @@ class Designer {
4383
4388
  * @returns An instance of the designer.
4384
4389
  */
4385
4390
  static create(placeholder, startDefinition, configuration) {
4391
+ var _a;
4386
4392
  if (!placeholder) {
4387
4393
  throw new Error('Placeholder is not defined');
4388
4394
  }
@@ -4391,11 +4397,12 @@ class Designer {
4391
4397
  }
4392
4398
  const config = configuration;
4393
4399
  validateConfiguration(config);
4394
- if (!config.disableDomAttachmentCheck && !isElementAttached(placeholder)) {
4400
+ const documentBody = (_a = configuration.documentBody) !== null && _a !== void 0 ? _a : document.body;
4401
+ if (!isElementAttached(placeholder, documentBody)) {
4395
4402
  throw new Error('Placeholder is not attached to the DOM');
4396
4403
  }
4397
4404
  const services = ServicesResolver.resolve(configuration.extensions, config);
4398
- const designerContext = DesignerContext.create(placeholder, startDefinition, config, services);
4405
+ const designerContext = DesignerContext.create(documentBody, placeholder, startDefinition, config, services);
4399
4406
  const designerApi = DesignerApi.create(designerContext);
4400
4407
  const view = DesignerView.create(placeholder, designerContext, designerApi);
4401
4408
  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(documentBody, parent, startDefinition, configuration, services) {
2542
2544
  var _a, _b, _c, _d, _e;
2543
2545
  const definition = ObjectCloner.deepClone(startDefinition);
2544
2546
  const layoutController = new LayoutController(parent);
@@ -2560,10 +2562,11 @@ 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);
2564
- return new DesignerContext(theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController);
2565
+ const componentContext = ComponentContext.create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services, documentBody);
2566
+ return new DesignerContext(documentBody, theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController);
2565
2567
  }
2566
- constructor(theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController) {
2568
+ constructor(documentBody, theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController) {
2569
+ this.documentBody = documentBody;
2567
2570
  this.theme = theme;
2568
2571
  this.state = state;
2569
2572
  this.configuration = configuration;
@@ -2609,8 +2612,8 @@ function __awaiter(thisArg, _arguments, P, generator) {
2609
2612
  });
2610
2613
  }
2611
2614
 
2612
- function isElementAttached(element) {
2613
- return !(document.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_DISCONNECTED);
2615
+ function isElementAttached(element, documentBody) {
2616
+ return !(documentBody.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_DISCONNECTED);
2614
2617
  }
2615
2618
 
2616
2619
  let lastGridPatternId = 0;
@@ -2874,7 +2877,7 @@ function findValidationBadgeIndex(extensions) {
2874
2877
  }
2875
2878
 
2876
2879
  class ContextMenu {
2877
- static create(position, theme, items) {
2880
+ static create(documentBody, position, theme, items) {
2878
2881
  const menu = document.createElement('div');
2879
2882
  menu.style.left = `${position.x}px`;
2880
2883
  menu.style.top = `${position.y}px`;
@@ -2894,15 +2897,16 @@ class ContextMenu {
2894
2897
  elements.push(element);
2895
2898
  menu.appendChild(element);
2896
2899
  }
2897
- const instance = new ContextMenu(menu, elements, items, Date.now());
2900
+ const instance = new ContextMenu(documentBody, menu, elements, items, Date.now());
2898
2901
  document.addEventListener('mousedown', instance.mouseDown, false);
2899
2902
  document.addEventListener('mouseup', instance.mouseUp, false);
2900
2903
  document.addEventListener('touchstart', instance.mouseDown, false);
2901
2904
  document.addEventListener('touchend', instance.mouseUp, false);
2902
- document.body.appendChild(menu);
2905
+ documentBody.appendChild(menu);
2903
2906
  return instance;
2904
2907
  }
2905
- constructor(menu, elements, items, startTime) {
2908
+ constructor(documentBody, menu, elements, items, startTime) {
2909
+ this.documentBody = documentBody;
2906
2910
  this.menu = menu;
2907
2911
  this.elements = elements;
2908
2912
  this.items = items;
@@ -2949,7 +2953,7 @@ class ContextMenu {
2949
2953
  }
2950
2954
  tryDestroy() {
2951
2955
  if (this.isAttached) {
2952
- document.body.removeChild(this.menu);
2956
+ this.documentBody.removeChild(this.menu);
2953
2957
  document.removeEventListener('mousedown', this.mouseDown, false);
2954
2958
  document.removeEventListener('mouseup', this.mouseUp, false);
2955
2959
  document.removeEventListener('touchstart', this.mouseDown, false);
@@ -2960,7 +2964,8 @@ class ContextMenu {
2960
2964
  }
2961
2965
 
2962
2966
  class ContextMenuController {
2963
- constructor(theme, configuration, itemsBuilder) {
2967
+ constructor(documentBody, theme, configuration, itemsBuilder) {
2968
+ this.documentBody = documentBody;
2964
2969
  this.theme = theme;
2965
2970
  this.configuration = configuration;
2966
2971
  this.itemsBuilder = itemsBuilder;
@@ -2974,7 +2979,7 @@ class ContextMenuController {
2974
2979
  this.current.tryDestroy();
2975
2980
  }
2976
2981
  const items = this.itemsBuilder.build(commandOrNull);
2977
- this.current = ContextMenu.create(position, this.theme, items);
2982
+ this.current = ContextMenu.create(this.documentBody, position, this.theme, items);
2978
2983
  }
2979
2984
  destroy() {
2980
2985
  if (this.current) {
@@ -3076,7 +3081,7 @@ class Workspace {
3076
3081
  const contextMenuItemsBuilder = new ContextMenuItemsBuilder(api.viewport, api.i18n, designerContext.stateModifier, designerContext.state, ((_a = designerContext.services.contextMenu) === null || _a === void 0 ? void 0 : _a.createItemsProvider)
3077
3082
  ? designerContext.services.contextMenu.createItemsProvider(designerContext.customActionController)
3078
3083
  : undefined);
3079
- const contextMenuController = new ContextMenuController(designerContext.theme, designerContext.configuration, contextMenuItemsBuilder);
3084
+ const contextMenuController = new ContextMenuController(designerContext.documentBody, designerContext.theme, designerContext.configuration, contextMenuItemsBuilder);
3080
3085
  const workspace = new Workspace(view, designerContext.definitionWalker, designerContext.state, designerContext.behaviorController, wheelController, contextMenuController, clickBehaviorResolver, api.viewport, designerContext.services);
3081
3086
  setTimeout(() => {
3082
3087
  workspace.updateRootComponent();
@@ -4382,6 +4387,7 @@ class Designer {
4382
4387
  * @returns An instance of the designer.
4383
4388
  */
4384
4389
  static create(placeholder, startDefinition, configuration) {
4390
+ var _a;
4385
4391
  if (!placeholder) {
4386
4392
  throw new Error('Placeholder is not defined');
4387
4393
  }
@@ -4390,11 +4396,12 @@ class Designer {
4390
4396
  }
4391
4397
  const config = configuration;
4392
4398
  validateConfiguration(config);
4393
- if (!config.disableDomAttachmentCheck && !isElementAttached(placeholder)) {
4399
+ const documentBody = (_a = configuration.documentBody) !== null && _a !== void 0 ? _a : document.body;
4400
+ if (!isElementAttached(placeholder, documentBody)) {
4394
4401
  throw new Error('Placeholder is not attached to the DOM');
4395
4402
  }
4396
4403
  const services = ServicesResolver.resolve(configuration.extensions, config);
4397
- const designerContext = DesignerContext.create(placeholder, startDefinition, config, services);
4404
+ const designerContext = DesignerContext.create(documentBody, placeholder, startDefinition, config, services);
4398
4405
  const designerApi = DesignerApi.create(designerContext);
4399
4406
  const view = DesignerView.create(placeholder, designerContext, designerApi);
4400
4407
  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
 
@@ -342,6 +343,7 @@ declare class WorkspaceControllerWrapper implements WorkspaceController {
342
343
  }
343
344
 
344
345
  declare class DesignerContext {
346
+ readonly documentBody: Node;
345
347
  readonly theme: string;
346
348
  readonly state: DesignerState;
347
349
  readonly configuration: DesignerConfiguration;
@@ -356,8 +358,8 @@ declare class DesignerContext {
356
358
  readonly behaviorController: BehaviorController;
357
359
  readonly customActionController: CustomActionController;
358
360
  readonly historyController: HistoryController | undefined;
359
- static create(parent: HTMLElement, startDefinition: Definition, configuration: DesignerConfiguration, services: Services): DesignerContext;
360
- 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
+ static create(documentBody: Node, parent: HTMLElement, startDefinition: Definition, configuration: DesignerConfiguration, services: Services): DesignerContext;
362
+ constructor(documentBody: Node, 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
363
  setWorkspaceController(controller: WorkspaceController): void;
362
364
  }
363
365
 
@@ -936,9 +938,9 @@ interface DesignerConfiguration<TDefinition extends Definition = Definition> {
936
938
  */
937
939
  i18n?: I18n;
938
940
  /**
939
- * @description By default, the designer checks if the placeholder is attached to the DOM. This flag may disable this check.
941
+ * @description The body of the document. By default, the designer will use the `document.body`.
940
942
  */
941
- disableDomAttachmentCheck?: boolean;
943
+ documentBody?: Node;
942
944
  }
943
945
  type UidGenerator = () => string;
944
946
  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.1",
4
+ "version": "0.24.3",
5
5
  "type": "module",
6
6
  "main": "./lib/esm/index.js",
7
7
  "types": "./lib/index.d.ts",