sequential-workflow-designer 0.24.3 → 0.24.4

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 +42 -33
  3. package/lib/cjs/index.cjs +42 -33
  4. package/lib/esm/index.js +42 -33
  5. package/lib/index.d.ts +14 -4
  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.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>
106
+ <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.4/css/designer.css" rel="stylesheet">
107
+ <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.4/css/designer-light.css" rel="stylesheet">
108
+ <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.4/css/designer-dark.css" rel="stylesheet">
109
+ <script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.4/dist/index.umd.js"></script>
110
110
  ```
111
111
 
112
112
  Call the designer by:
package/dist/index.umd.js CHANGED
@@ -728,9 +728,11 @@
728
728
  const viewportController = context.services.viewportController.create(workspace);
729
729
  const viewport = new ViewportApi(context.workspaceController, viewportController);
730
730
  const toolboxDataProvider = new ToolboxDataProvider(context.componentContext.iconProvider, context.i18n, context.configuration.toolbox);
731
- return new DesignerApi(ControlBarApi.create(context.state, context.historyController, context.stateModifier, viewport), new ToolboxApi(context.state, context, context.behaviorController, toolboxDataProvider, context.configuration.uidGenerator), new EditorApi(context.state, context.definitionWalker, context.stateModifier), workspace, viewport, new PathBarApi(context.state, context.definitionWalker), context.definitionWalker, context.i18n);
731
+ return new DesignerApi(context.documentOrShadowRoot, context.documentBody, ControlBarApi.create(context.state, context.historyController, context.stateModifier, viewport), new ToolboxApi(context.state, context, context.behaviorController, toolboxDataProvider, context.configuration.uidGenerator), new EditorApi(context.state, context.definitionWalker, context.stateModifier), workspace, viewport, new PathBarApi(context.state, context.definitionWalker), context.definitionWalker, context.i18n);
732
732
  }
733
- constructor(controlBar, toolbox, editor, workspace, viewport, pathBar, definitionWalker, i18n) {
733
+ constructor(documentOrShadowRoot, documentBody, controlBar, toolbox, editor, workspace, viewport, pathBar, definitionWalker, i18n) {
734
+ this.documentOrShadowRoot = documentOrShadowRoot;
735
+ this.documentBody = documentBody;
734
736
  this.controlBar = controlBar;
735
737
  this.toolbox = toolbox;
736
738
  this.editor = editor;
@@ -969,13 +971,15 @@
969
971
  }
970
972
 
971
973
  class ComponentContext {
972
- static create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services, documentBody) {
974
+ static create(documentOrShadowRoot, documentBody, configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services) {
973
975
  const validator = new DefinitionValidator(configuration.validator, state);
974
976
  const iconProvider = new IconProvider(configuration.steps);
975
977
  const stepComponentFactory = new StepComponentFactory(stepExtensionResolver);
976
- return new ComponentContext(validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n, documentBody);
978
+ return new ComponentContext(documentOrShadowRoot, documentBody, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n);
977
979
  }
978
- constructor(validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n, documentBody) {
980
+ constructor(documentOrShadowRoot, documentBody, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n) {
981
+ this.documentOrShadowRoot = documentOrShadowRoot;
982
+ this.documentBody = documentBody;
979
983
  this.validator = validator;
980
984
  this.iconProvider = iconProvider;
981
985
  this.placeholderController = placeholderController;
@@ -984,7 +988,6 @@
984
988
  this.services = services;
985
989
  this.preferenceStorage = preferenceStorage;
986
990
  this.i18n = i18n;
987
- this.documentBody = documentBody;
988
991
  }
989
992
  }
990
993
 
@@ -2234,7 +2237,8 @@
2234
2237
  passive: false
2235
2238
  };
2236
2239
  class BehaviorController {
2237
- constructor() {
2240
+ constructor(documentOrShadowRoot) {
2241
+ this.documentOrShadowRoot = documentOrShadowRoot;
2238
2242
  this.onMouseMove = (e) => {
2239
2243
  e.preventDefault();
2240
2244
  this.move(readMousePosition(e));
@@ -2254,7 +2258,7 @@
2254
2258
  throw new Error(notInitializedError);
2255
2259
  }
2256
2260
  const position = (_a = this.state.lastPosition) !== null && _a !== void 0 ? _a : this.state.startPosition;
2257
- const element = document.elementFromPoint(position.x, position.y);
2261
+ const element = this.documentOrShadowRoot.elementFromPoint(position.x, position.y);
2258
2262
  this.stop(false, element);
2259
2263
  };
2260
2264
  this.onTouchStart = (e) => {
@@ -2726,7 +2730,7 @@
2726
2730
  }
2727
2731
 
2728
2732
  class DesignerContext {
2729
- static create(documentBody, parent, startDefinition, configuration, services) {
2733
+ static create(documentOrShadowRoot, documentBody, parent, startDefinition, configuration, services) {
2730
2734
  var _a, _b, _c, _d, _e;
2731
2735
  const definition = ObjectCloner.deepClone(startDefinition);
2732
2736
  const layoutController = new LayoutController(parent);
@@ -2737,7 +2741,7 @@
2737
2741
  const state = new DesignerState(definition, isReadonly, isToolboxCollapsed, isEditorCollapsed);
2738
2742
  const workspaceController = new WorkspaceControllerWrapper();
2739
2743
  const placeholderController = services.placeholderController.create();
2740
- const behaviorController = new BehaviorController();
2744
+ const behaviorController = new BehaviorController(documentOrShadowRoot);
2741
2745
  const stepExtensionResolver = StepExtensionResolver.create(services);
2742
2746
  const definitionWalker = (_c = configuration.definitionWalker) !== null && _c !== void 0 ? _c : new DefinitionWalker();
2743
2747
  const i18n = (_d = configuration.i18n) !== null && _d !== void 0 ? _d : ((_, defaultValue) => defaultValue);
@@ -2748,10 +2752,11 @@
2748
2752
  historyController = HistoryController.create(configuration.undoStack, state, stateModifier, configuration);
2749
2753
  }
2750
2754
  const preferenceStorage = (_e = configuration.preferenceStorage) !== null && _e !== void 0 ? _e : new MemoryPreferenceStorage();
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);
2755
+ const componentContext = ComponentContext.create(documentOrShadowRoot, documentBody, configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services);
2756
+ return new DesignerContext(documentOrShadowRoot, documentBody, theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController);
2753
2757
  }
2754
- constructor(documentBody, theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController) {
2758
+ constructor(documentOrShadowRoot, documentBody, theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController) {
2759
+ this.documentOrShadowRoot = documentOrShadowRoot;
2755
2760
  this.documentBody = documentBody;
2756
2761
  this.theme = theme;
2757
2762
  this.state = state;
@@ -2833,11 +2838,12 @@
2833
2838
  canvas.appendChild(foreground);
2834
2839
  workspace.appendChild(canvas);
2835
2840
  parent.appendChild(workspace);
2836
- const view = new WorkspaceView(workspace, canvas, pattern, gridPattern, foreground, componentContext);
2841
+ const view = new WorkspaceView(componentContext.documentOrShadowRoot, workspace, canvas, pattern, gridPattern, foreground, componentContext);
2837
2842
  window.addEventListener('resize', view.onResizeHandler, false);
2838
2843
  return view;
2839
2844
  }
2840
- constructor(workspace, canvas, pattern, gridPattern, foreground, context) {
2845
+ constructor(documentOrShadowRoot, workspace, canvas, pattern, gridPattern, foreground, context) {
2846
+ this.documentOrShadowRoot = documentOrShadowRoot;
2841
2847
  this.workspace = workspace;
2842
2848
  this.canvas = canvas;
2843
2849
  this.pattern = pattern;
@@ -2880,7 +2886,7 @@
2880
2886
  this.canvas.addEventListener('touchstart', e => {
2881
2887
  e.preventDefault();
2882
2888
  const clientPosition = readTouchClientPosition(e);
2883
- const element = document.elementFromPoint(clientPosition.x, clientPosition.y);
2889
+ const element = this.documentOrShadowRoot.elementFromPoint(clientPosition.x, clientPosition.y);
2884
2890
  if (element) {
2885
2891
  const position = readTouchPosition(e);
2886
2892
  handler(position, element, 0, false);
@@ -3084,10 +3090,10 @@
3084
3090
  menu.appendChild(element);
3085
3091
  }
3086
3092
  const instance = new ContextMenu(documentBody, menu, elements, items, Date.now());
3087
- document.addEventListener('mousedown', instance.mouseDown, false);
3088
- document.addEventListener('mouseup', instance.mouseUp, false);
3089
- document.addEventListener('touchstart', instance.mouseDown, false);
3090
- document.addEventListener('touchend', instance.mouseUp, false);
3093
+ documentBody.addEventListener('mousedown', instance.mouseDown, false);
3094
+ documentBody.addEventListener('mouseup', instance.mouseUp, false);
3095
+ documentBody.addEventListener('touchstart', instance.mouseDown, false);
3096
+ documentBody.addEventListener('touchend', instance.mouseUp, false);
3091
3097
  documentBody.appendChild(menu);
3092
3098
  return instance;
3093
3099
  }
@@ -3140,10 +3146,10 @@
3140
3146
  tryDestroy() {
3141
3147
  if (this.isAttached) {
3142
3148
  this.documentBody.removeChild(this.menu);
3143
- document.removeEventListener('mousedown', this.mouseDown, false);
3144
- document.removeEventListener('mouseup', this.mouseUp, false);
3145
- document.removeEventListener('touchstart', this.mouseDown, false);
3146
- document.removeEventListener('touchend', this.mouseUp, false);
3149
+ this.documentBody.removeEventListener('mousedown', this.mouseDown, false);
3150
+ this.documentBody.removeEventListener('mouseup', this.mouseUp, false);
3151
+ this.documentBody.removeEventListener('touchstart', this.mouseDown, false);
3152
+ this.documentBody.removeEventListener('touchend', this.mouseUp, false);
3147
3153
  this.isAttached = false;
3148
3154
  }
3149
3155
  }
@@ -3698,22 +3704,24 @@
3698
3704
  const ignoreTagNames = ['INPUT', 'TEXTAREA', 'SELECT'];
3699
3705
  class KeyboardDaemon {
3700
3706
  static create(api, configuration) {
3701
- const controller = new KeyboardDaemon(api.controlBar, configuration);
3702
- document.addEventListener('keyup', controller.onKeyUp, false);
3707
+ const controller = new KeyboardDaemon(api.documentOrShadowRoot, api.controlBar, configuration);
3708
+ api.documentOrShadowRoot.addEventListener('keyup', controller.onKeyUp, false);
3703
3709
  return controller;
3704
3710
  }
3705
- constructor(controlBarApi, configuration) {
3711
+ constructor(documentOrShadowRoot, controlBarApi, configuration) {
3712
+ this.documentOrShadowRoot = documentOrShadowRoot;
3706
3713
  this.controlBarApi = controlBarApi;
3707
3714
  this.configuration = configuration;
3708
3715
  this.onKeyUp = (e) => {
3709
- const action = detectAction(e);
3716
+ const ke = e;
3717
+ const action = detectAction(ke);
3710
3718
  if (!action) {
3711
3719
  return;
3712
3720
  }
3713
3721
  if (document.activeElement && ignoreTagNames.includes(document.activeElement.tagName)) {
3714
3722
  return;
3715
3723
  }
3716
- if (this.configuration.canHandleKey && !this.configuration.canHandleKey(action, e)) {
3724
+ if (this.configuration.canHandleKey && !this.configuration.canHandleKey(action, ke)) {
3717
3725
  return;
3718
3726
  }
3719
3727
  const isDeletable = this.controlBarApi.canDelete();
@@ -3725,7 +3733,7 @@
3725
3733
  };
3726
3734
  }
3727
3735
  destroy() {
3728
- document.removeEventListener('keyup', this.onKeyUp, false);
3736
+ this.documentOrShadowRoot.removeEventListener('keyup', this.onKeyUp, false);
3729
3737
  }
3730
3738
  }
3731
3739
  function detectAction(e) {
@@ -4573,7 +4581,7 @@
4573
4581
  * @returns An instance of the designer.
4574
4582
  */
4575
4583
  static create(placeholder, startDefinition, configuration) {
4576
- var _a;
4584
+ var _a, _b;
4577
4585
  if (!placeholder) {
4578
4586
  throw new Error('Placeholder is not defined');
4579
4587
  }
@@ -4582,12 +4590,13 @@
4582
4590
  }
4583
4591
  const config = configuration;
4584
4592
  validateConfiguration(config);
4585
- const documentBody = (_a = configuration.documentBody) !== null && _a !== void 0 ? _a : document.body;
4593
+ const documentOrShadowRoot = (_a = configuration.documentOrShadowRoot) !== null && _a !== void 0 ? _a : document;
4594
+ const documentBody = (_b = configuration.documentBody) !== null && _b !== void 0 ? _b : document.body;
4586
4595
  if (!isElementAttached(placeholder, documentBody)) {
4587
4596
  throw new Error('Placeholder is not attached to the DOM');
4588
4597
  }
4589
4598
  const services = ServicesResolver.resolve(configuration.extensions, config);
4590
- const designerContext = DesignerContext.create(documentBody, placeholder, startDefinition, config, services);
4599
+ const designerContext = DesignerContext.create(documentOrShadowRoot, documentBody, placeholder, startDefinition, config, services);
4591
4600
  const designerApi = DesignerApi.create(designerContext);
4592
4601
  const view = DesignerView.create(placeholder, designerContext, designerApi);
4593
4602
  const designer = new Designer(view, designerContext.state, designerContext.stateModifier, designerContext.definitionWalker, designerContext.historyController, designerApi);
package/lib/cjs/index.cjs CHANGED
@@ -726,9 +726,11 @@ class DesignerApi {
726
726
  const viewportController = context.services.viewportController.create(workspace);
727
727
  const viewport = new ViewportApi(context.workspaceController, viewportController);
728
728
  const toolboxDataProvider = new ToolboxDataProvider(context.componentContext.iconProvider, context.i18n, context.configuration.toolbox);
729
- return new DesignerApi(ControlBarApi.create(context.state, context.historyController, context.stateModifier, viewport), new ToolboxApi(context.state, context, context.behaviorController, toolboxDataProvider, context.configuration.uidGenerator), new EditorApi(context.state, context.definitionWalker, context.stateModifier), workspace, viewport, new PathBarApi(context.state, context.definitionWalker), context.definitionWalker, context.i18n);
729
+ return new DesignerApi(context.documentOrShadowRoot, context.documentBody, ControlBarApi.create(context.state, context.historyController, context.stateModifier, viewport), new ToolboxApi(context.state, context, context.behaviorController, toolboxDataProvider, context.configuration.uidGenerator), new EditorApi(context.state, context.definitionWalker, context.stateModifier), workspace, viewport, new PathBarApi(context.state, context.definitionWalker), context.definitionWalker, context.i18n);
730
730
  }
731
- constructor(controlBar, toolbox, editor, workspace, viewport, pathBar, definitionWalker, i18n) {
731
+ constructor(documentOrShadowRoot, documentBody, controlBar, toolbox, editor, workspace, viewport, pathBar, definitionWalker, i18n) {
732
+ this.documentOrShadowRoot = documentOrShadowRoot;
733
+ this.documentBody = documentBody;
732
734
  this.controlBar = controlBar;
733
735
  this.toolbox = toolbox;
734
736
  this.editor = editor;
@@ -967,13 +969,15 @@ class StepComponentFactory {
967
969
  }
968
970
 
969
971
  class ComponentContext {
970
- static create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services, documentBody) {
972
+ static create(documentOrShadowRoot, documentBody, configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services) {
971
973
  const validator = new DefinitionValidator(configuration.validator, state);
972
974
  const iconProvider = new IconProvider(configuration.steps);
973
975
  const stepComponentFactory = new StepComponentFactory(stepExtensionResolver);
974
- return new ComponentContext(validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n, documentBody);
976
+ return new ComponentContext(documentOrShadowRoot, documentBody, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n);
975
977
  }
976
- constructor(validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n, documentBody) {
978
+ constructor(documentOrShadowRoot, documentBody, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n) {
979
+ this.documentOrShadowRoot = documentOrShadowRoot;
980
+ this.documentBody = documentBody;
977
981
  this.validator = validator;
978
982
  this.iconProvider = iconProvider;
979
983
  this.placeholderController = placeholderController;
@@ -982,7 +986,6 @@ class ComponentContext {
982
986
  this.services = services;
983
987
  this.preferenceStorage = preferenceStorage;
984
988
  this.i18n = i18n;
985
- this.documentBody = documentBody;
986
989
  }
987
990
  }
988
991
 
@@ -2049,7 +2052,8 @@ const nonPassiveOptions = {
2049
2052
  passive: false
2050
2053
  };
2051
2054
  class BehaviorController {
2052
- constructor() {
2055
+ constructor(documentOrShadowRoot) {
2056
+ this.documentOrShadowRoot = documentOrShadowRoot;
2053
2057
  this.onMouseMove = (e) => {
2054
2058
  e.preventDefault();
2055
2059
  this.move(readMousePosition(e));
@@ -2069,7 +2073,7 @@ class BehaviorController {
2069
2073
  throw new Error(notInitializedError);
2070
2074
  }
2071
2075
  const position = (_a = this.state.lastPosition) !== null && _a !== void 0 ? _a : this.state.startPosition;
2072
- const element = document.elementFromPoint(position.x, position.y);
2076
+ const element = this.documentOrShadowRoot.elementFromPoint(position.x, position.y);
2073
2077
  this.stop(false, element);
2074
2078
  };
2075
2079
  this.onTouchStart = (e) => {
@@ -2541,7 +2545,7 @@ class MemoryPreferenceStorage {
2541
2545
  }
2542
2546
 
2543
2547
  class DesignerContext {
2544
- static create(documentBody, parent, startDefinition, configuration, services) {
2548
+ static create(documentOrShadowRoot, documentBody, parent, startDefinition, configuration, services) {
2545
2549
  var _a, _b, _c, _d, _e;
2546
2550
  const definition = ObjectCloner.deepClone(startDefinition);
2547
2551
  const layoutController = new LayoutController(parent);
@@ -2552,7 +2556,7 @@ class DesignerContext {
2552
2556
  const state = new DesignerState(definition, isReadonly, isToolboxCollapsed, isEditorCollapsed);
2553
2557
  const workspaceController = new WorkspaceControllerWrapper();
2554
2558
  const placeholderController = services.placeholderController.create();
2555
- const behaviorController = new BehaviorController();
2559
+ const behaviorController = new BehaviorController(documentOrShadowRoot);
2556
2560
  const stepExtensionResolver = StepExtensionResolver.create(services);
2557
2561
  const definitionWalker = (_c = configuration.definitionWalker) !== null && _c !== void 0 ? _c : new sequentialWorkflowModel.DefinitionWalker();
2558
2562
  const i18n = (_d = configuration.i18n) !== null && _d !== void 0 ? _d : ((_, defaultValue) => defaultValue);
@@ -2563,10 +2567,11 @@ class DesignerContext {
2563
2567
  historyController = HistoryController.create(configuration.undoStack, state, stateModifier, configuration);
2564
2568
  }
2565
2569
  const preferenceStorage = (_e = configuration.preferenceStorage) !== null && _e !== void 0 ? _e : new MemoryPreferenceStorage();
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);
2570
+ const componentContext = ComponentContext.create(documentOrShadowRoot, documentBody, configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services);
2571
+ return new DesignerContext(documentOrShadowRoot, documentBody, theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController);
2568
2572
  }
2569
- constructor(documentBody, theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController) {
2573
+ constructor(documentOrShadowRoot, documentBody, theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController) {
2574
+ this.documentOrShadowRoot = documentOrShadowRoot;
2570
2575
  this.documentBody = documentBody;
2571
2576
  this.theme = theme;
2572
2577
  this.state = state;
@@ -2648,11 +2653,12 @@ class WorkspaceView {
2648
2653
  canvas.appendChild(foreground);
2649
2654
  workspace.appendChild(canvas);
2650
2655
  parent.appendChild(workspace);
2651
- const view = new WorkspaceView(workspace, canvas, pattern, gridPattern, foreground, componentContext);
2656
+ const view = new WorkspaceView(componentContext.documentOrShadowRoot, workspace, canvas, pattern, gridPattern, foreground, componentContext);
2652
2657
  window.addEventListener('resize', view.onResizeHandler, false);
2653
2658
  return view;
2654
2659
  }
2655
- constructor(workspace, canvas, pattern, gridPattern, foreground, context) {
2660
+ constructor(documentOrShadowRoot, workspace, canvas, pattern, gridPattern, foreground, context) {
2661
+ this.documentOrShadowRoot = documentOrShadowRoot;
2656
2662
  this.workspace = workspace;
2657
2663
  this.canvas = canvas;
2658
2664
  this.pattern = pattern;
@@ -2695,7 +2701,7 @@ class WorkspaceView {
2695
2701
  this.canvas.addEventListener('touchstart', e => {
2696
2702
  e.preventDefault();
2697
2703
  const clientPosition = readTouchClientPosition(e);
2698
- const element = document.elementFromPoint(clientPosition.x, clientPosition.y);
2704
+ const element = this.documentOrShadowRoot.elementFromPoint(clientPosition.x, clientPosition.y);
2699
2705
  if (element) {
2700
2706
  const position = readTouchPosition(e);
2701
2707
  handler(position, element, 0, false);
@@ -2899,10 +2905,10 @@ class ContextMenu {
2899
2905
  menu.appendChild(element);
2900
2906
  }
2901
2907
  const instance = new ContextMenu(documentBody, menu, elements, items, Date.now());
2902
- document.addEventListener('mousedown', instance.mouseDown, false);
2903
- document.addEventListener('mouseup', instance.mouseUp, false);
2904
- document.addEventListener('touchstart', instance.mouseDown, false);
2905
- document.addEventListener('touchend', instance.mouseUp, false);
2908
+ documentBody.addEventListener('mousedown', instance.mouseDown, false);
2909
+ documentBody.addEventListener('mouseup', instance.mouseUp, false);
2910
+ documentBody.addEventListener('touchstart', instance.mouseDown, false);
2911
+ documentBody.addEventListener('touchend', instance.mouseUp, false);
2906
2912
  documentBody.appendChild(menu);
2907
2913
  return instance;
2908
2914
  }
@@ -2955,10 +2961,10 @@ class ContextMenu {
2955
2961
  tryDestroy() {
2956
2962
  if (this.isAttached) {
2957
2963
  this.documentBody.removeChild(this.menu);
2958
- document.removeEventListener('mousedown', this.mouseDown, false);
2959
- document.removeEventListener('mouseup', this.mouseUp, false);
2960
- document.removeEventListener('touchstart', this.mouseDown, false);
2961
- document.removeEventListener('touchend', this.mouseUp, false);
2964
+ this.documentBody.removeEventListener('mousedown', this.mouseDown, false);
2965
+ this.documentBody.removeEventListener('mouseup', this.mouseUp, false);
2966
+ this.documentBody.removeEventListener('touchstart', this.mouseDown, false);
2967
+ this.documentBody.removeEventListener('touchend', this.mouseUp, false);
2962
2968
  this.isAttached = false;
2963
2969
  }
2964
2970
  }
@@ -3513,22 +3519,24 @@ class ControlBarExtension {
3513
3519
  const ignoreTagNames = ['INPUT', 'TEXTAREA', 'SELECT'];
3514
3520
  class KeyboardDaemon {
3515
3521
  static create(api, configuration) {
3516
- const controller = new KeyboardDaemon(api.controlBar, configuration);
3517
- document.addEventListener('keyup', controller.onKeyUp, false);
3522
+ const controller = new KeyboardDaemon(api.documentOrShadowRoot, api.controlBar, configuration);
3523
+ api.documentOrShadowRoot.addEventListener('keyup', controller.onKeyUp, false);
3518
3524
  return controller;
3519
3525
  }
3520
- constructor(controlBarApi, configuration) {
3526
+ constructor(documentOrShadowRoot, controlBarApi, configuration) {
3527
+ this.documentOrShadowRoot = documentOrShadowRoot;
3521
3528
  this.controlBarApi = controlBarApi;
3522
3529
  this.configuration = configuration;
3523
3530
  this.onKeyUp = (e) => {
3524
- const action = detectAction(e);
3531
+ const ke = e;
3532
+ const action = detectAction(ke);
3525
3533
  if (!action) {
3526
3534
  return;
3527
3535
  }
3528
3536
  if (document.activeElement && ignoreTagNames.includes(document.activeElement.tagName)) {
3529
3537
  return;
3530
3538
  }
3531
- if (this.configuration.canHandleKey && !this.configuration.canHandleKey(action, e)) {
3539
+ if (this.configuration.canHandleKey && !this.configuration.canHandleKey(action, ke)) {
3532
3540
  return;
3533
3541
  }
3534
3542
  const isDeletable = this.controlBarApi.canDelete();
@@ -3540,7 +3548,7 @@ class KeyboardDaemon {
3540
3548
  };
3541
3549
  }
3542
3550
  destroy() {
3543
- document.removeEventListener('keyup', this.onKeyUp, false);
3551
+ this.documentOrShadowRoot.removeEventListener('keyup', this.onKeyUp, false);
3544
3552
  }
3545
3553
  }
3546
3554
  function detectAction(e) {
@@ -4388,7 +4396,7 @@ class Designer {
4388
4396
  * @returns An instance of the designer.
4389
4397
  */
4390
4398
  static create(placeholder, startDefinition, configuration) {
4391
- var _a;
4399
+ var _a, _b;
4392
4400
  if (!placeholder) {
4393
4401
  throw new Error('Placeholder is not defined');
4394
4402
  }
@@ -4397,12 +4405,13 @@ class Designer {
4397
4405
  }
4398
4406
  const config = configuration;
4399
4407
  validateConfiguration(config);
4400
- const documentBody = (_a = configuration.documentBody) !== null && _a !== void 0 ? _a : document.body;
4408
+ const documentOrShadowRoot = (_a = configuration.documentOrShadowRoot) !== null && _a !== void 0 ? _a : document;
4409
+ const documentBody = (_b = configuration.documentBody) !== null && _b !== void 0 ? _b : document.body;
4401
4410
  if (!isElementAttached(placeholder, documentBody)) {
4402
4411
  throw new Error('Placeholder is not attached to the DOM');
4403
4412
  }
4404
4413
  const services = ServicesResolver.resolve(configuration.extensions, config);
4405
- const designerContext = DesignerContext.create(documentBody, placeholder, startDefinition, config, services);
4414
+ const designerContext = DesignerContext.create(documentOrShadowRoot, documentBody, placeholder, startDefinition, config, services);
4406
4415
  const designerApi = DesignerApi.create(designerContext);
4407
4416
  const view = DesignerView.create(placeholder, designerContext, designerApi);
4408
4417
  const designer = new Designer(view, designerContext.state, designerContext.stateModifier, designerContext.definitionWalker, designerContext.historyController, designerApi);
package/lib/esm/index.js CHANGED
@@ -725,9 +725,11 @@ class DesignerApi {
725
725
  const viewportController = context.services.viewportController.create(workspace);
726
726
  const viewport = new ViewportApi(context.workspaceController, viewportController);
727
727
  const toolboxDataProvider = new ToolboxDataProvider(context.componentContext.iconProvider, context.i18n, context.configuration.toolbox);
728
- return new DesignerApi(ControlBarApi.create(context.state, context.historyController, context.stateModifier, viewport), new ToolboxApi(context.state, context, context.behaviorController, toolboxDataProvider, context.configuration.uidGenerator), new EditorApi(context.state, context.definitionWalker, context.stateModifier), workspace, viewport, new PathBarApi(context.state, context.definitionWalker), context.definitionWalker, context.i18n);
728
+ return new DesignerApi(context.documentOrShadowRoot, context.documentBody, ControlBarApi.create(context.state, context.historyController, context.stateModifier, viewport), new ToolboxApi(context.state, context, context.behaviorController, toolboxDataProvider, context.configuration.uidGenerator), new EditorApi(context.state, context.definitionWalker, context.stateModifier), workspace, viewport, new PathBarApi(context.state, context.definitionWalker), context.definitionWalker, context.i18n);
729
729
  }
730
- constructor(controlBar, toolbox, editor, workspace, viewport, pathBar, definitionWalker, i18n) {
730
+ constructor(documentOrShadowRoot, documentBody, controlBar, toolbox, editor, workspace, viewport, pathBar, definitionWalker, i18n) {
731
+ this.documentOrShadowRoot = documentOrShadowRoot;
732
+ this.documentBody = documentBody;
731
733
  this.controlBar = controlBar;
732
734
  this.toolbox = toolbox;
733
735
  this.editor = editor;
@@ -966,13 +968,15 @@ class StepComponentFactory {
966
968
  }
967
969
 
968
970
  class ComponentContext {
969
- static create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services, documentBody) {
971
+ static create(documentOrShadowRoot, documentBody, configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services) {
970
972
  const validator = new DefinitionValidator(configuration.validator, state);
971
973
  const iconProvider = new IconProvider(configuration.steps);
972
974
  const stepComponentFactory = new StepComponentFactory(stepExtensionResolver);
973
- return new ComponentContext(validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n, documentBody);
975
+ return new ComponentContext(documentOrShadowRoot, documentBody, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n);
974
976
  }
975
- constructor(validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n, documentBody) {
977
+ constructor(documentOrShadowRoot, documentBody, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n) {
978
+ this.documentOrShadowRoot = documentOrShadowRoot;
979
+ this.documentBody = documentBody;
976
980
  this.validator = validator;
977
981
  this.iconProvider = iconProvider;
978
982
  this.placeholderController = placeholderController;
@@ -981,7 +985,6 @@ class ComponentContext {
981
985
  this.services = services;
982
986
  this.preferenceStorage = preferenceStorage;
983
987
  this.i18n = i18n;
984
- this.documentBody = documentBody;
985
988
  }
986
989
  }
987
990
 
@@ -2048,7 +2051,8 @@ const nonPassiveOptions = {
2048
2051
  passive: false
2049
2052
  };
2050
2053
  class BehaviorController {
2051
- constructor() {
2054
+ constructor(documentOrShadowRoot) {
2055
+ this.documentOrShadowRoot = documentOrShadowRoot;
2052
2056
  this.onMouseMove = (e) => {
2053
2057
  e.preventDefault();
2054
2058
  this.move(readMousePosition(e));
@@ -2068,7 +2072,7 @@ class BehaviorController {
2068
2072
  throw new Error(notInitializedError);
2069
2073
  }
2070
2074
  const position = (_a = this.state.lastPosition) !== null && _a !== void 0 ? _a : this.state.startPosition;
2071
- const element = document.elementFromPoint(position.x, position.y);
2075
+ const element = this.documentOrShadowRoot.elementFromPoint(position.x, position.y);
2072
2076
  this.stop(false, element);
2073
2077
  };
2074
2078
  this.onTouchStart = (e) => {
@@ -2540,7 +2544,7 @@ class MemoryPreferenceStorage {
2540
2544
  }
2541
2545
 
2542
2546
  class DesignerContext {
2543
- static create(documentBody, parent, startDefinition, configuration, services) {
2547
+ static create(documentOrShadowRoot, documentBody, parent, startDefinition, configuration, services) {
2544
2548
  var _a, _b, _c, _d, _e;
2545
2549
  const definition = ObjectCloner.deepClone(startDefinition);
2546
2550
  const layoutController = new LayoutController(parent);
@@ -2551,7 +2555,7 @@ class DesignerContext {
2551
2555
  const state = new DesignerState(definition, isReadonly, isToolboxCollapsed, isEditorCollapsed);
2552
2556
  const workspaceController = new WorkspaceControllerWrapper();
2553
2557
  const placeholderController = services.placeholderController.create();
2554
- const behaviorController = new BehaviorController();
2558
+ const behaviorController = new BehaviorController(documentOrShadowRoot);
2555
2559
  const stepExtensionResolver = StepExtensionResolver.create(services);
2556
2560
  const definitionWalker = (_c = configuration.definitionWalker) !== null && _c !== void 0 ? _c : new DefinitionWalker();
2557
2561
  const i18n = (_d = configuration.i18n) !== null && _d !== void 0 ? _d : ((_, defaultValue) => defaultValue);
@@ -2562,10 +2566,11 @@ class DesignerContext {
2562
2566
  historyController = HistoryController.create(configuration.undoStack, state, stateModifier, configuration);
2563
2567
  }
2564
2568
  const preferenceStorage = (_e = configuration.preferenceStorage) !== null && _e !== void 0 ? _e : new MemoryPreferenceStorage();
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);
2569
+ const componentContext = ComponentContext.create(documentOrShadowRoot, documentBody, configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services);
2570
+ return new DesignerContext(documentOrShadowRoot, documentBody, theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController);
2567
2571
  }
2568
- constructor(documentBody, theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController) {
2572
+ constructor(documentOrShadowRoot, documentBody, theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController) {
2573
+ this.documentOrShadowRoot = documentOrShadowRoot;
2569
2574
  this.documentBody = documentBody;
2570
2575
  this.theme = theme;
2571
2576
  this.state = state;
@@ -2647,11 +2652,12 @@ class WorkspaceView {
2647
2652
  canvas.appendChild(foreground);
2648
2653
  workspace.appendChild(canvas);
2649
2654
  parent.appendChild(workspace);
2650
- const view = new WorkspaceView(workspace, canvas, pattern, gridPattern, foreground, componentContext);
2655
+ const view = new WorkspaceView(componentContext.documentOrShadowRoot, workspace, canvas, pattern, gridPattern, foreground, componentContext);
2651
2656
  window.addEventListener('resize', view.onResizeHandler, false);
2652
2657
  return view;
2653
2658
  }
2654
- constructor(workspace, canvas, pattern, gridPattern, foreground, context) {
2659
+ constructor(documentOrShadowRoot, workspace, canvas, pattern, gridPattern, foreground, context) {
2660
+ this.documentOrShadowRoot = documentOrShadowRoot;
2655
2661
  this.workspace = workspace;
2656
2662
  this.canvas = canvas;
2657
2663
  this.pattern = pattern;
@@ -2694,7 +2700,7 @@ class WorkspaceView {
2694
2700
  this.canvas.addEventListener('touchstart', e => {
2695
2701
  e.preventDefault();
2696
2702
  const clientPosition = readTouchClientPosition(e);
2697
- const element = document.elementFromPoint(clientPosition.x, clientPosition.y);
2703
+ const element = this.documentOrShadowRoot.elementFromPoint(clientPosition.x, clientPosition.y);
2698
2704
  if (element) {
2699
2705
  const position = readTouchPosition(e);
2700
2706
  handler(position, element, 0, false);
@@ -2898,10 +2904,10 @@ class ContextMenu {
2898
2904
  menu.appendChild(element);
2899
2905
  }
2900
2906
  const instance = new ContextMenu(documentBody, menu, elements, items, Date.now());
2901
- document.addEventListener('mousedown', instance.mouseDown, false);
2902
- document.addEventListener('mouseup', instance.mouseUp, false);
2903
- document.addEventListener('touchstart', instance.mouseDown, false);
2904
- document.addEventListener('touchend', instance.mouseUp, false);
2907
+ documentBody.addEventListener('mousedown', instance.mouseDown, false);
2908
+ documentBody.addEventListener('mouseup', instance.mouseUp, false);
2909
+ documentBody.addEventListener('touchstart', instance.mouseDown, false);
2910
+ documentBody.addEventListener('touchend', instance.mouseUp, false);
2905
2911
  documentBody.appendChild(menu);
2906
2912
  return instance;
2907
2913
  }
@@ -2954,10 +2960,10 @@ class ContextMenu {
2954
2960
  tryDestroy() {
2955
2961
  if (this.isAttached) {
2956
2962
  this.documentBody.removeChild(this.menu);
2957
- document.removeEventListener('mousedown', this.mouseDown, false);
2958
- document.removeEventListener('mouseup', this.mouseUp, false);
2959
- document.removeEventListener('touchstart', this.mouseDown, false);
2960
- document.removeEventListener('touchend', this.mouseUp, false);
2963
+ this.documentBody.removeEventListener('mousedown', this.mouseDown, false);
2964
+ this.documentBody.removeEventListener('mouseup', this.mouseUp, false);
2965
+ this.documentBody.removeEventListener('touchstart', this.mouseDown, false);
2966
+ this.documentBody.removeEventListener('touchend', this.mouseUp, false);
2961
2967
  this.isAttached = false;
2962
2968
  }
2963
2969
  }
@@ -3512,22 +3518,24 @@ class ControlBarExtension {
3512
3518
  const ignoreTagNames = ['INPUT', 'TEXTAREA', 'SELECT'];
3513
3519
  class KeyboardDaemon {
3514
3520
  static create(api, configuration) {
3515
- const controller = new KeyboardDaemon(api.controlBar, configuration);
3516
- document.addEventListener('keyup', controller.onKeyUp, false);
3521
+ const controller = new KeyboardDaemon(api.documentOrShadowRoot, api.controlBar, configuration);
3522
+ api.documentOrShadowRoot.addEventListener('keyup', controller.onKeyUp, false);
3517
3523
  return controller;
3518
3524
  }
3519
- constructor(controlBarApi, configuration) {
3525
+ constructor(documentOrShadowRoot, controlBarApi, configuration) {
3526
+ this.documentOrShadowRoot = documentOrShadowRoot;
3520
3527
  this.controlBarApi = controlBarApi;
3521
3528
  this.configuration = configuration;
3522
3529
  this.onKeyUp = (e) => {
3523
- const action = detectAction(e);
3530
+ const ke = e;
3531
+ const action = detectAction(ke);
3524
3532
  if (!action) {
3525
3533
  return;
3526
3534
  }
3527
3535
  if (document.activeElement && ignoreTagNames.includes(document.activeElement.tagName)) {
3528
3536
  return;
3529
3537
  }
3530
- if (this.configuration.canHandleKey && !this.configuration.canHandleKey(action, e)) {
3538
+ if (this.configuration.canHandleKey && !this.configuration.canHandleKey(action, ke)) {
3531
3539
  return;
3532
3540
  }
3533
3541
  const isDeletable = this.controlBarApi.canDelete();
@@ -3539,7 +3547,7 @@ class KeyboardDaemon {
3539
3547
  };
3540
3548
  }
3541
3549
  destroy() {
3542
- document.removeEventListener('keyup', this.onKeyUp, false);
3550
+ this.documentOrShadowRoot.removeEventListener('keyup', this.onKeyUp, false);
3543
3551
  }
3544
3552
  }
3545
3553
  function detectAction(e) {
@@ -4387,7 +4395,7 @@ class Designer {
4387
4395
  * @returns An instance of the designer.
4388
4396
  */
4389
4397
  static create(placeholder, startDefinition, configuration) {
4390
- var _a;
4398
+ var _a, _b;
4391
4399
  if (!placeholder) {
4392
4400
  throw new Error('Placeholder is not defined');
4393
4401
  }
@@ -4396,12 +4404,13 @@ class Designer {
4396
4404
  }
4397
4405
  const config = configuration;
4398
4406
  validateConfiguration(config);
4399
- const documentBody = (_a = configuration.documentBody) !== null && _a !== void 0 ? _a : document.body;
4407
+ const documentOrShadowRoot = (_a = configuration.documentOrShadowRoot) !== null && _a !== void 0 ? _a : document;
4408
+ const documentBody = (_b = configuration.documentBody) !== null && _b !== void 0 ? _b : document.body;
4400
4409
  if (!isElementAttached(placeholder, documentBody)) {
4401
4410
  throw new Error('Placeholder is not attached to the DOM');
4402
4411
  }
4403
4412
  const services = ServicesResolver.resolve(configuration.extensions, config);
4404
- const designerContext = DesignerContext.create(documentBody, placeholder, startDefinition, config, services);
4413
+ const designerContext = DesignerContext.create(documentOrShadowRoot, documentBody, placeholder, startDefinition, config, services);
4405
4414
  const designerApi = DesignerApi.create(designerContext);
4406
4415
  const view = DesignerView.create(placeholder, designerContext, designerApi);
4407
4416
  const designer = new Designer(view, designerContext.state, designerContext.stateModifier, designerContext.definitionWalker, designerContext.historyController, designerApi);
package/lib/index.d.ts CHANGED
@@ -75,7 +75,9 @@ interface Behavior {
75
75
  }
76
76
 
77
77
  declare class BehaviorController {
78
+ private readonly documentOrShadowRoot;
78
79
  private state?;
80
+ constructor(documentOrShadowRoot: DocumentOrShadowRoot);
79
81
  start(startPosition: Vector, behavior: Behavior): void;
80
82
  private readonly onMouseMove;
81
83
  private readonly onTouchMove;
@@ -271,6 +273,8 @@ declare class StepComponentFactory {
271
273
  }
272
274
 
273
275
  declare class ComponentContext {
276
+ readonly documentOrShadowRoot: Document | ShadowRoot;
277
+ readonly documentBody: Node;
274
278
  readonly validator: DefinitionValidator;
275
279
  readonly iconProvider: IconProvider;
276
280
  readonly placeholderController: PlaceholderController;
@@ -279,8 +283,7 @@ declare class ComponentContext {
279
283
  readonly services: Services;
280
284
  readonly preferenceStorage: PreferenceStorage;
281
285
  readonly i18n: I18n;
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;
286
+ static create(documentOrShadowRoot: Document | ShadowRoot, documentBody: Node, configuration: DesignerConfiguration, state: DesignerState, stepExtensionResolver: StepExtensionResolver, definitionWalker: DefinitionWalker, preferenceStorage: PreferenceStorage, placeholderController: PlaceholderController, i18n: I18n, services: Services): ComponentContext;
284
287
  private constructor();
285
288
  }
286
289
 
@@ -343,6 +346,7 @@ declare class WorkspaceControllerWrapper implements WorkspaceController {
343
346
  }
344
347
 
345
348
  declare class DesignerContext {
349
+ readonly documentOrShadowRoot: Document | ShadowRoot;
346
350
  readonly documentBody: Node;
347
351
  readonly theme: string;
348
352
  readonly state: DesignerState;
@@ -358,8 +362,8 @@ declare class DesignerContext {
358
362
  readonly behaviorController: BehaviorController;
359
363
  readonly customActionController: CustomActionController;
360
364
  readonly 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);
365
+ static create(documentOrShadowRoot: Document | ShadowRoot, documentBody: Node, parent: HTMLElement, startDefinition: Definition, configuration: DesignerConfiguration, services: Services): DesignerContext;
366
+ constructor(documentOrShadowRoot: Document | ShadowRoot, 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);
363
367
  setWorkspaceController(controller: WorkspaceController): void;
364
368
  }
365
369
 
@@ -479,6 +483,8 @@ declare class WorkspaceApi {
479
483
  }
480
484
 
481
485
  declare class DesignerApi {
486
+ readonly documentOrShadowRoot: Document | ShadowRoot;
487
+ readonly documentBody: Node;
482
488
  readonly controlBar: ControlBarApi;
483
489
  readonly toolbox: ToolboxApi;
484
490
  readonly editor: EditorApi;
@@ -937,6 +943,10 @@ interface DesignerConfiguration<TDefinition extends Definition = Definition> {
937
943
  * @description Custom translation function.
938
944
  */
939
945
  i18n?: I18n;
946
+ /**
947
+ * @description The document or shadow root where the designer is rendered. By default, the designer will use the `document`.
948
+ */
949
+ documentOrShadowRoot?: Document | ShadowRoot;
940
950
  /**
941
951
  * @description The body of the document. By default, the designer will use the `document.body`.
942
952
  */
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.3",
4
+ "version": "0.24.4",
5
5
  "type": "module",
6
6
  "main": "./lib/esm/index.js",
7
7
  "types": "./lib/index.d.ts",