sequential-workflow-designer 0.24.4 → 0.24.5

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 +95 -73
  3. package/lib/cjs/index.cjs +95 -73
  4. package/lib/esm/index.js +95 -73
  5. package/lib/index.d.ts +15 -19
  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.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>
106
+ <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.5/css/designer.css" rel="stylesheet">
107
+ <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.5/css/designer-light.css" rel="stylesheet">
108
+ <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.5/css/designer-dark.css" rel="stylesheet">
109
+ <script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.5/dist/index.umd.js"></script>
110
110
  ```
111
111
 
112
112
  Call the designer by:
package/dist/index.umd.js CHANGED
@@ -405,17 +405,19 @@
405
405
 
406
406
  class DragStepView {
407
407
  static create(step, theme, componentContext) {
408
+ var _a;
409
+ const body = (_a = componentContext.shadowRoot) !== null && _a !== void 0 ? _a : document.body;
408
410
  const layer = Dom.element('div', {
409
411
  class: `sqd-drag sqd-theme-${theme}`
410
412
  });
411
- componentContext.documentBody.appendChild(layer);
413
+ body.appendChild(layer);
412
414
  const component = componentContext.services.draggedComponent.create(layer, step, componentContext);
413
- return new DragStepView(component, layer, componentContext.documentBody);
415
+ return new DragStepView(component, layer, body);
414
416
  }
415
- constructor(component, layer, documentBody) {
417
+ constructor(component, layer, body) {
416
418
  this.component = component;
417
419
  this.layer = layer;
418
- this.documentBody = documentBody;
420
+ this.body = body;
419
421
  }
420
422
  setPosition(position) {
421
423
  this.layer.style.top = position.y + 'px';
@@ -423,7 +425,7 @@
423
425
  }
424
426
  remove() {
425
427
  this.component.destroy();
426
- this.documentBody.removeChild(this.layer);
428
+ this.body.removeChild(this.layer);
427
429
  }
428
430
  }
429
431
 
@@ -728,11 +730,10 @@
728
730
  const viewportController = context.services.viewportController.create(workspace);
729
731
  const viewport = new ViewportApi(context.workspaceController, viewportController);
730
732
  const toolboxDataProvider = new ToolboxDataProvider(context.componentContext.iconProvider, context.i18n, context.configuration.toolbox);
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);
733
+ return new DesignerApi(context.configuration.shadowRoot, 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
734
  }
733
- constructor(documentOrShadowRoot, documentBody, controlBar, toolbox, editor, workspace, viewport, pathBar, definitionWalker, i18n) {
734
- this.documentOrShadowRoot = documentOrShadowRoot;
735
- this.documentBody = documentBody;
735
+ constructor(shadowRoot, controlBar, toolbox, editor, workspace, viewport, pathBar, definitionWalker, i18n) {
736
+ this.shadowRoot = shadowRoot;
736
737
  this.controlBar = controlBar;
737
738
  this.toolbox = toolbox;
738
739
  this.editor = editor;
@@ -971,15 +972,14 @@
971
972
  }
972
973
 
973
974
  class ComponentContext {
974
- static create(documentOrShadowRoot, documentBody, configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services) {
975
+ static create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services) {
975
976
  const validator = new DefinitionValidator(configuration.validator, state);
976
977
  const iconProvider = new IconProvider(configuration.steps);
977
978
  const stepComponentFactory = new StepComponentFactory(stepExtensionResolver);
978
- return new ComponentContext(documentOrShadowRoot, documentBody, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n);
979
+ return new ComponentContext(configuration.shadowRoot, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n);
979
980
  }
980
- constructor(documentOrShadowRoot, documentBody, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n) {
981
- this.documentOrShadowRoot = documentOrShadowRoot;
982
- this.documentBody = documentBody;
981
+ constructor(shadowRoot, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n) {
982
+ this.shadowRoot = shadowRoot;
983
983
  this.validator = validator;
984
984
  this.iconProvider = iconProvider;
985
985
  this.placeholderController = placeholderController;
@@ -2237,32 +2237,41 @@
2237
2237
  passive: false
2238
2238
  };
2239
2239
  class BehaviorController {
2240
- constructor(documentOrShadowRoot) {
2241
- this.documentOrShadowRoot = documentOrShadowRoot;
2240
+ static create(shadowRoot) {
2241
+ return new BehaviorController(shadowRoot !== null && shadowRoot !== void 0 ? shadowRoot : document, shadowRoot);
2242
+ }
2243
+ constructor(dom, shadowRoot) {
2244
+ this.dom = dom;
2245
+ this.shadowRoot = shadowRoot;
2242
2246
  this.onMouseMove = (e) => {
2243
2247
  e.preventDefault();
2248
+ e.stopPropagation();
2244
2249
  this.move(readMousePosition(e));
2245
2250
  };
2246
2251
  this.onTouchMove = (e) => {
2247
2252
  e.preventDefault();
2253
+ e.stopPropagation();
2248
2254
  this.move(readTouchPosition(e));
2249
2255
  };
2250
2256
  this.onMouseUp = (e) => {
2251
2257
  e.preventDefault();
2258
+ e.stopPropagation();
2252
2259
  this.stop(false, e.target);
2253
2260
  };
2254
2261
  this.onTouchEnd = (e) => {
2255
2262
  var _a;
2256
2263
  e.preventDefault();
2264
+ e.stopPropagation();
2257
2265
  if (!this.state) {
2258
2266
  throw new Error(notInitializedError);
2259
2267
  }
2260
2268
  const position = (_a = this.state.lastPosition) !== null && _a !== void 0 ? _a : this.state.startPosition;
2261
- const element = this.documentOrShadowRoot.elementFromPoint(position.x, position.y);
2269
+ const element = this.dom.elementFromPoint(position.x, position.y);
2262
2270
  this.stop(false, element);
2263
2271
  };
2264
2272
  this.onTouchStart = (e) => {
2265
2273
  e.preventDefault();
2274
+ e.stopPropagation();
2266
2275
  if (e.touches.length !== 1) {
2267
2276
  this.stop(true, null);
2268
2277
  }
@@ -2278,11 +2287,24 @@
2278
2287
  behavior
2279
2288
  };
2280
2289
  behavior.onStart(this.state.startPosition);
2281
- window.addEventListener('mousemove', this.onMouseMove, false);
2282
- window.addEventListener('touchmove', this.onTouchMove, nonPassiveOptions);
2283
- window.addEventListener('mouseup', this.onMouseUp, false);
2284
- window.addEventListener('touchend', this.onTouchEnd, nonPassiveOptions);
2285
- window.addEventListener('touchstart', this.onTouchStart, nonPassiveOptions);
2290
+ if (this.shadowRoot) {
2291
+ this.bind(this.shadowRoot);
2292
+ }
2293
+ this.bind(window);
2294
+ }
2295
+ bind(target) {
2296
+ target.addEventListener('mousemove', this.onMouseMove, false);
2297
+ target.addEventListener('touchmove', this.onTouchMove, nonPassiveOptions);
2298
+ target.addEventListener('mouseup', this.onMouseUp, false);
2299
+ target.addEventListener('touchend', this.onTouchEnd, nonPassiveOptions);
2300
+ target.addEventListener('touchstart', this.onTouchStart, nonPassiveOptions);
2301
+ }
2302
+ unbind(target) {
2303
+ target.removeEventListener('mousemove', this.onMouseMove, false);
2304
+ target.removeEventListener('touchmove', this.onTouchMove, nonPassiveOptions);
2305
+ target.removeEventListener('mouseup', this.onMouseUp, false);
2306
+ target.removeEventListener('touchend', this.onTouchEnd, nonPassiveOptions);
2307
+ target.removeEventListener('touchstart', this.onTouchStart, nonPassiveOptions);
2286
2308
  }
2287
2309
  move(position) {
2288
2310
  if (!this.state) {
@@ -2302,11 +2324,10 @@
2302
2324
  if (!this.state) {
2303
2325
  throw new Error(notInitializedError);
2304
2326
  }
2305
- window.removeEventListener('mousemove', this.onMouseMove, false);
2306
- window.removeEventListener('touchmove', this.onTouchMove, nonPassiveOptions);
2307
- window.removeEventListener('mouseup', this.onMouseUp, false);
2308
- window.removeEventListener('touchend', this.onTouchEnd, nonPassiveOptions);
2309
- window.removeEventListener('touchstart', this.onTouchStart, nonPassiveOptions);
2327
+ if (this.shadowRoot) {
2328
+ this.unbind(this.shadowRoot);
2329
+ }
2330
+ this.unbind(window);
2310
2331
  this.state.behavior.onEnd(interrupt, element);
2311
2332
  this.state = undefined;
2312
2333
  }
@@ -2669,11 +2690,11 @@
2669
2690
  }
2670
2691
 
2671
2692
  class LayoutController {
2672
- constructor(parent) {
2673
- this.parent = parent;
2693
+ constructor(placeholder) {
2694
+ this.placeholder = placeholder;
2674
2695
  }
2675
2696
  isMobile() {
2676
- return this.parent.clientWidth < 400; // TODO
2697
+ return this.placeholder.clientWidth < 400; // TODO
2677
2698
  }
2678
2699
  }
2679
2700
 
@@ -2730,18 +2751,18 @@
2730
2751
  }
2731
2752
 
2732
2753
  class DesignerContext {
2733
- static create(documentOrShadowRoot, documentBody, parent, startDefinition, configuration, services) {
2754
+ static create(placeholder, startDefinition, configuration, services) {
2734
2755
  var _a, _b, _c, _d, _e;
2735
2756
  const definition = ObjectCloner.deepClone(startDefinition);
2736
- const layoutController = new LayoutController(parent);
2737
- const isReadonly = !!configuration.isReadonly;
2757
+ const layoutController = new LayoutController(placeholder);
2758
+ const isReadonly = Boolean(configuration.isReadonly);
2738
2759
  const isToolboxCollapsed = configuration.toolbox ? (_a = configuration.toolbox.isCollapsed) !== null && _a !== void 0 ? _a : layoutController.isMobile() : false;
2739
2760
  const isEditorCollapsed = configuration.editors ? (_b = configuration.editors.isCollapsed) !== null && _b !== void 0 ? _b : layoutController.isMobile() : false;
2740
2761
  const theme = configuration.theme || 'light';
2741
2762
  const state = new DesignerState(definition, isReadonly, isToolboxCollapsed, isEditorCollapsed);
2742
2763
  const workspaceController = new WorkspaceControllerWrapper();
2743
2764
  const placeholderController = services.placeholderController.create();
2744
- const behaviorController = new BehaviorController(documentOrShadowRoot);
2765
+ const behaviorController = BehaviorController.create(configuration.shadowRoot);
2745
2766
  const stepExtensionResolver = StepExtensionResolver.create(services);
2746
2767
  const definitionWalker = (_c = configuration.definitionWalker) !== null && _c !== void 0 ? _c : new DefinitionWalker();
2747
2768
  const i18n = (_d = configuration.i18n) !== null && _d !== void 0 ? _d : ((_, defaultValue) => defaultValue);
@@ -2752,12 +2773,10 @@
2752
2773
  historyController = HistoryController.create(configuration.undoStack, state, stateModifier, configuration);
2753
2774
  }
2754
2775
  const preferenceStorage = (_e = configuration.preferenceStorage) !== null && _e !== void 0 ? _e : new MemoryPreferenceStorage();
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);
2776
+ const componentContext = ComponentContext.create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services);
2777
+ return new DesignerContext(theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController);
2757
2778
  }
2758
- constructor(documentOrShadowRoot, documentBody, theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController) {
2759
- this.documentOrShadowRoot = documentOrShadowRoot;
2760
- this.documentBody = documentBody;
2779
+ constructor(theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController) {
2761
2780
  this.theme = theme;
2762
2781
  this.state = state;
2763
2782
  this.configuration = configuration;
@@ -2803,8 +2822,8 @@
2803
2822
  });
2804
2823
  }
2805
2824
 
2806
- function isElementAttached(element, documentBody) {
2807
- return !(documentBody.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_DISCONNECTED);
2825
+ function isElementAttached(dom, element) {
2826
+ return !(dom.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_DISCONNECTED);
2808
2827
  }
2809
2828
 
2810
2829
  let lastGridPatternId = 0;
@@ -2838,12 +2857,12 @@
2838
2857
  canvas.appendChild(foreground);
2839
2858
  workspace.appendChild(canvas);
2840
2859
  parent.appendChild(workspace);
2841
- const view = new WorkspaceView(componentContext.documentOrShadowRoot, workspace, canvas, pattern, gridPattern, foreground, componentContext);
2860
+ const view = new WorkspaceView(componentContext.shadowRoot, workspace, canvas, pattern, gridPattern, foreground, componentContext);
2842
2861
  window.addEventListener('resize', view.onResizeHandler, false);
2843
2862
  return view;
2844
2863
  }
2845
- constructor(documentOrShadowRoot, workspace, canvas, pattern, gridPattern, foreground, context) {
2846
- this.documentOrShadowRoot = documentOrShadowRoot;
2864
+ constructor(shadowRoot, workspace, canvas, pattern, gridPattern, foreground, context) {
2865
+ this.shadowRoot = shadowRoot;
2847
2866
  this.workspace = workspace;
2848
2867
  this.canvas = canvas;
2849
2868
  this.pattern = pattern;
@@ -2884,9 +2903,11 @@
2884
2903
  handler(readMousePosition(e), e.target, e.button, e.altKey);
2885
2904
  }, false);
2886
2905
  this.canvas.addEventListener('touchstart', e => {
2906
+ var _a;
2887
2907
  e.preventDefault();
2888
2908
  const clientPosition = readTouchClientPosition(e);
2889
- const element = this.documentOrShadowRoot.elementFromPoint(clientPosition.x, clientPosition.y);
2909
+ const dom = (_a = this.shadowRoot) !== null && _a !== void 0 ? _a : document;
2910
+ const element = dom.elementFromPoint(clientPosition.x, clientPosition.y);
2890
2911
  if (element) {
2891
2912
  const position = readTouchPosition(e);
2892
2913
  handler(position, element, 0, false);
@@ -3069,7 +3090,7 @@
3069
3090
  }
3070
3091
 
3071
3092
  class ContextMenu {
3072
- static create(documentBody, position, theme, items) {
3093
+ static create(shadowRoot, position, theme, items) {
3073
3094
  const menu = document.createElement('div');
3074
3095
  menu.style.left = `${position.x}px`;
3075
3096
  menu.style.top = `${position.y}px`;
@@ -3089,16 +3110,19 @@
3089
3110
  elements.push(element);
3090
3111
  menu.appendChild(element);
3091
3112
  }
3092
- const instance = new ContextMenu(documentBody, menu, elements, items, Date.now());
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);
3097
- documentBody.appendChild(menu);
3113
+ const body = shadowRoot !== null && shadowRoot !== void 0 ? shadowRoot : document.body;
3114
+ const dom = shadowRoot !== null && shadowRoot !== void 0 ? shadowRoot : document;
3115
+ const instance = new ContextMenu(body, dom, menu, elements, items, Date.now());
3116
+ dom.addEventListener('mousedown', instance.mouseDown, false);
3117
+ dom.addEventListener('mouseup', instance.mouseUp, false);
3118
+ dom.addEventListener('touchstart', instance.mouseDown, false);
3119
+ dom.addEventListener('touchend', instance.mouseUp, false);
3120
+ body.appendChild(menu);
3098
3121
  return instance;
3099
3122
  }
3100
- constructor(documentBody, menu, elements, items, startTime) {
3101
- this.documentBody = documentBody;
3123
+ constructor(body, dom, menu, elements, items, startTime) {
3124
+ this.body = body;
3125
+ this.dom = dom;
3102
3126
  this.menu = menu;
3103
3127
  this.elements = elements;
3104
3128
  this.items = items;
@@ -3145,19 +3169,18 @@
3145
3169
  }
3146
3170
  tryDestroy() {
3147
3171
  if (this.isAttached) {
3148
- this.documentBody.removeChild(this.menu);
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);
3172
+ this.body.removeChild(this.menu);
3173
+ this.dom.removeEventListener('mousedown', this.mouseDown, false);
3174
+ this.dom.removeEventListener('mouseup', this.mouseUp, false);
3175
+ this.dom.removeEventListener('touchstart', this.mouseDown, false);
3176
+ this.dom.removeEventListener('touchend', this.mouseUp, false);
3153
3177
  this.isAttached = false;
3154
3178
  }
3155
3179
  }
3156
3180
  }
3157
3181
 
3158
3182
  class ContextMenuController {
3159
- constructor(documentBody, theme, configuration, itemsBuilder) {
3160
- this.documentBody = documentBody;
3183
+ constructor(theme, configuration, itemsBuilder) {
3161
3184
  this.theme = theme;
3162
3185
  this.configuration = configuration;
3163
3186
  this.itemsBuilder = itemsBuilder;
@@ -3171,7 +3194,7 @@
3171
3194
  this.current.tryDestroy();
3172
3195
  }
3173
3196
  const items = this.itemsBuilder.build(commandOrNull);
3174
- this.current = ContextMenu.create(this.documentBody, position, this.theme, items);
3197
+ this.current = ContextMenu.create(this.configuration.shadowRoot, position, this.theme, items);
3175
3198
  }
3176
3199
  destroy() {
3177
3200
  if (this.current) {
@@ -3273,7 +3296,7 @@
3273
3296
  const contextMenuItemsBuilder = new ContextMenuItemsBuilder(api.viewport, api.i18n, designerContext.stateModifier, designerContext.state, ((_a = designerContext.services.contextMenu) === null || _a === void 0 ? void 0 : _a.createItemsProvider)
3274
3297
  ? designerContext.services.contextMenu.createItemsProvider(designerContext.customActionController)
3275
3298
  : undefined);
3276
- const contextMenuController = new ContextMenuController(designerContext.documentBody, designerContext.theme, designerContext.configuration, contextMenuItemsBuilder);
3299
+ const contextMenuController = new ContextMenuController(designerContext.theme, designerContext.configuration, contextMenuItemsBuilder);
3277
3300
  const workspace = new Workspace(view, designerContext.definitionWalker, designerContext.state, designerContext.behaviorController, wheelController, contextMenuController, clickBehaviorResolver, api.viewport, designerContext.services);
3278
3301
  setTimeout(() => {
3279
3302
  workspace.updateRootComponent();
@@ -3704,12 +3727,13 @@
3704
3727
  const ignoreTagNames = ['INPUT', 'TEXTAREA', 'SELECT'];
3705
3728
  class KeyboardDaemon {
3706
3729
  static create(api, configuration) {
3707
- const controller = new KeyboardDaemon(api.documentOrShadowRoot, api.controlBar, configuration);
3708
- api.documentOrShadowRoot.addEventListener('keyup', controller.onKeyUp, false);
3730
+ const dom = api.shadowRoot || document;
3731
+ const controller = new KeyboardDaemon(dom, api.controlBar, configuration);
3732
+ dom.addEventListener('keyup', controller.onKeyUp, false);
3709
3733
  return controller;
3710
3734
  }
3711
- constructor(documentOrShadowRoot, controlBarApi, configuration) {
3712
- this.documentOrShadowRoot = documentOrShadowRoot;
3735
+ constructor(dom, controlBarApi, configuration) {
3736
+ this.dom = dom;
3713
3737
  this.controlBarApi = controlBarApi;
3714
3738
  this.configuration = configuration;
3715
3739
  this.onKeyUp = (e) => {
@@ -3733,7 +3757,7 @@
3733
3757
  };
3734
3758
  }
3735
3759
  destroy() {
3736
- this.documentOrShadowRoot.removeEventListener('keyup', this.onKeyUp, false);
3760
+ this.dom.removeEventListener('keyup', this.onKeyUp, false);
3737
3761
  }
3738
3762
  }
3739
3763
  function detectAction(e) {
@@ -4581,7 +4605,7 @@
4581
4605
  * @returns An instance of the designer.
4582
4606
  */
4583
4607
  static create(placeholder, startDefinition, configuration) {
4584
- var _a, _b;
4608
+ var _a;
4585
4609
  if (!placeholder) {
4586
4610
  throw new Error('Placeholder is not defined');
4587
4611
  }
@@ -4590,13 +4614,11 @@
4590
4614
  }
4591
4615
  const config = configuration;
4592
4616
  validateConfiguration(config);
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;
4595
- if (!isElementAttached(placeholder, documentBody)) {
4617
+ if (!isElementAttached((_a = config.shadowRoot) !== null && _a !== void 0 ? _a : document, placeholder)) {
4596
4618
  throw new Error('Placeholder is not attached to the DOM');
4597
4619
  }
4598
4620
  const services = ServicesResolver.resolve(configuration.extensions, config);
4599
- const designerContext = DesignerContext.create(documentOrShadowRoot, documentBody, placeholder, startDefinition, config, services);
4621
+ const designerContext = DesignerContext.create(placeholder, startDefinition, config, services);
4600
4622
  const designerApi = DesignerApi.create(designerContext);
4601
4623
  const view = DesignerView.create(placeholder, designerContext, designerApi);
4602
4624
  const designer = new Designer(view, designerContext.state, designerContext.stateModifier, designerContext.definitionWalker, designerContext.historyController, designerApi);
package/lib/cjs/index.cjs CHANGED
@@ -403,17 +403,19 @@ class PathBarApi {
403
403
 
404
404
  class DragStepView {
405
405
  static create(step, theme, componentContext) {
406
+ var _a;
407
+ const body = (_a = componentContext.shadowRoot) !== null && _a !== void 0 ? _a : document.body;
406
408
  const layer = Dom.element('div', {
407
409
  class: `sqd-drag sqd-theme-${theme}`
408
410
  });
409
- componentContext.documentBody.appendChild(layer);
411
+ body.appendChild(layer);
410
412
  const component = componentContext.services.draggedComponent.create(layer, step, componentContext);
411
- return new DragStepView(component, layer, componentContext.documentBody);
413
+ return new DragStepView(component, layer, body);
412
414
  }
413
- constructor(component, layer, documentBody) {
415
+ constructor(component, layer, body) {
414
416
  this.component = component;
415
417
  this.layer = layer;
416
- this.documentBody = documentBody;
418
+ this.body = body;
417
419
  }
418
420
  setPosition(position) {
419
421
  this.layer.style.top = position.y + 'px';
@@ -421,7 +423,7 @@ class DragStepView {
421
423
  }
422
424
  remove() {
423
425
  this.component.destroy();
424
- this.documentBody.removeChild(this.layer);
426
+ this.body.removeChild(this.layer);
425
427
  }
426
428
  }
427
429
 
@@ -726,11 +728,10 @@ class DesignerApi {
726
728
  const viewportController = context.services.viewportController.create(workspace);
727
729
  const viewport = new ViewportApi(context.workspaceController, viewportController);
728
730
  const toolboxDataProvider = new ToolboxDataProvider(context.componentContext.iconProvider, context.i18n, context.configuration.toolbox);
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);
731
+ return new DesignerApi(context.configuration.shadowRoot, 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
732
  }
731
- constructor(documentOrShadowRoot, documentBody, controlBar, toolbox, editor, workspace, viewport, pathBar, definitionWalker, i18n) {
732
- this.documentOrShadowRoot = documentOrShadowRoot;
733
- this.documentBody = documentBody;
733
+ constructor(shadowRoot, controlBar, toolbox, editor, workspace, viewport, pathBar, definitionWalker, i18n) {
734
+ this.shadowRoot = shadowRoot;
734
735
  this.controlBar = controlBar;
735
736
  this.toolbox = toolbox;
736
737
  this.editor = editor;
@@ -969,15 +970,14 @@ class StepComponentFactory {
969
970
  }
970
971
 
971
972
  class ComponentContext {
972
- static create(documentOrShadowRoot, documentBody, configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services) {
973
+ static create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services) {
973
974
  const validator = new DefinitionValidator(configuration.validator, state);
974
975
  const iconProvider = new IconProvider(configuration.steps);
975
976
  const stepComponentFactory = new StepComponentFactory(stepExtensionResolver);
976
- return new ComponentContext(documentOrShadowRoot, documentBody, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n);
977
+ return new ComponentContext(configuration.shadowRoot, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n);
977
978
  }
978
- constructor(documentOrShadowRoot, documentBody, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n) {
979
- this.documentOrShadowRoot = documentOrShadowRoot;
980
- this.documentBody = documentBody;
979
+ constructor(shadowRoot, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n) {
980
+ this.shadowRoot = shadowRoot;
981
981
  this.validator = validator;
982
982
  this.iconProvider = iconProvider;
983
983
  this.placeholderController = placeholderController;
@@ -2052,32 +2052,41 @@ const nonPassiveOptions = {
2052
2052
  passive: false
2053
2053
  };
2054
2054
  class BehaviorController {
2055
- constructor(documentOrShadowRoot) {
2056
- this.documentOrShadowRoot = documentOrShadowRoot;
2055
+ static create(shadowRoot) {
2056
+ return new BehaviorController(shadowRoot !== null && shadowRoot !== void 0 ? shadowRoot : document, shadowRoot);
2057
+ }
2058
+ constructor(dom, shadowRoot) {
2059
+ this.dom = dom;
2060
+ this.shadowRoot = shadowRoot;
2057
2061
  this.onMouseMove = (e) => {
2058
2062
  e.preventDefault();
2063
+ e.stopPropagation();
2059
2064
  this.move(readMousePosition(e));
2060
2065
  };
2061
2066
  this.onTouchMove = (e) => {
2062
2067
  e.preventDefault();
2068
+ e.stopPropagation();
2063
2069
  this.move(readTouchPosition(e));
2064
2070
  };
2065
2071
  this.onMouseUp = (e) => {
2066
2072
  e.preventDefault();
2073
+ e.stopPropagation();
2067
2074
  this.stop(false, e.target);
2068
2075
  };
2069
2076
  this.onTouchEnd = (e) => {
2070
2077
  var _a;
2071
2078
  e.preventDefault();
2079
+ e.stopPropagation();
2072
2080
  if (!this.state) {
2073
2081
  throw new Error(notInitializedError);
2074
2082
  }
2075
2083
  const position = (_a = this.state.lastPosition) !== null && _a !== void 0 ? _a : this.state.startPosition;
2076
- const element = this.documentOrShadowRoot.elementFromPoint(position.x, position.y);
2084
+ const element = this.dom.elementFromPoint(position.x, position.y);
2077
2085
  this.stop(false, element);
2078
2086
  };
2079
2087
  this.onTouchStart = (e) => {
2080
2088
  e.preventDefault();
2089
+ e.stopPropagation();
2081
2090
  if (e.touches.length !== 1) {
2082
2091
  this.stop(true, null);
2083
2092
  }
@@ -2093,11 +2102,24 @@ class BehaviorController {
2093
2102
  behavior
2094
2103
  };
2095
2104
  behavior.onStart(this.state.startPosition);
2096
- window.addEventListener('mousemove', this.onMouseMove, false);
2097
- window.addEventListener('touchmove', this.onTouchMove, nonPassiveOptions);
2098
- window.addEventListener('mouseup', this.onMouseUp, false);
2099
- window.addEventListener('touchend', this.onTouchEnd, nonPassiveOptions);
2100
- window.addEventListener('touchstart', this.onTouchStart, nonPassiveOptions);
2105
+ if (this.shadowRoot) {
2106
+ this.bind(this.shadowRoot);
2107
+ }
2108
+ this.bind(window);
2109
+ }
2110
+ bind(target) {
2111
+ target.addEventListener('mousemove', this.onMouseMove, false);
2112
+ target.addEventListener('touchmove', this.onTouchMove, nonPassiveOptions);
2113
+ target.addEventListener('mouseup', this.onMouseUp, false);
2114
+ target.addEventListener('touchend', this.onTouchEnd, nonPassiveOptions);
2115
+ target.addEventListener('touchstart', this.onTouchStart, nonPassiveOptions);
2116
+ }
2117
+ unbind(target) {
2118
+ target.removeEventListener('mousemove', this.onMouseMove, false);
2119
+ target.removeEventListener('touchmove', this.onTouchMove, nonPassiveOptions);
2120
+ target.removeEventListener('mouseup', this.onMouseUp, false);
2121
+ target.removeEventListener('touchend', this.onTouchEnd, nonPassiveOptions);
2122
+ target.removeEventListener('touchstart', this.onTouchStart, nonPassiveOptions);
2101
2123
  }
2102
2124
  move(position) {
2103
2125
  if (!this.state) {
@@ -2117,11 +2139,10 @@ class BehaviorController {
2117
2139
  if (!this.state) {
2118
2140
  throw new Error(notInitializedError);
2119
2141
  }
2120
- window.removeEventListener('mousemove', this.onMouseMove, false);
2121
- window.removeEventListener('touchmove', this.onTouchMove, nonPassiveOptions);
2122
- window.removeEventListener('mouseup', this.onMouseUp, false);
2123
- window.removeEventListener('touchend', this.onTouchEnd, nonPassiveOptions);
2124
- window.removeEventListener('touchstart', this.onTouchStart, nonPassiveOptions);
2142
+ if (this.shadowRoot) {
2143
+ this.unbind(this.shadowRoot);
2144
+ }
2145
+ this.unbind(window);
2125
2146
  this.state.behavior.onEnd(interrupt, element);
2126
2147
  this.state = undefined;
2127
2148
  }
@@ -2484,11 +2505,11 @@ function areItemsEqual(item, changeType, stepId) {
2484
2505
  }
2485
2506
 
2486
2507
  class LayoutController {
2487
- constructor(parent) {
2488
- this.parent = parent;
2508
+ constructor(placeholder) {
2509
+ this.placeholder = placeholder;
2489
2510
  }
2490
2511
  isMobile() {
2491
- return this.parent.clientWidth < 400; // TODO
2512
+ return this.placeholder.clientWidth < 400; // TODO
2492
2513
  }
2493
2514
  }
2494
2515
 
@@ -2545,18 +2566,18 @@ class MemoryPreferenceStorage {
2545
2566
  }
2546
2567
 
2547
2568
  class DesignerContext {
2548
- static create(documentOrShadowRoot, documentBody, parent, startDefinition, configuration, services) {
2569
+ static create(placeholder, startDefinition, configuration, services) {
2549
2570
  var _a, _b, _c, _d, _e;
2550
2571
  const definition = ObjectCloner.deepClone(startDefinition);
2551
- const layoutController = new LayoutController(parent);
2552
- const isReadonly = !!configuration.isReadonly;
2572
+ const layoutController = new LayoutController(placeholder);
2573
+ const isReadonly = Boolean(configuration.isReadonly);
2553
2574
  const isToolboxCollapsed = configuration.toolbox ? (_a = configuration.toolbox.isCollapsed) !== null && _a !== void 0 ? _a : layoutController.isMobile() : false;
2554
2575
  const isEditorCollapsed = configuration.editors ? (_b = configuration.editors.isCollapsed) !== null && _b !== void 0 ? _b : layoutController.isMobile() : false;
2555
2576
  const theme = configuration.theme || 'light';
2556
2577
  const state = new DesignerState(definition, isReadonly, isToolboxCollapsed, isEditorCollapsed);
2557
2578
  const workspaceController = new WorkspaceControllerWrapper();
2558
2579
  const placeholderController = services.placeholderController.create();
2559
- const behaviorController = new BehaviorController(documentOrShadowRoot);
2580
+ const behaviorController = BehaviorController.create(configuration.shadowRoot);
2560
2581
  const stepExtensionResolver = StepExtensionResolver.create(services);
2561
2582
  const definitionWalker = (_c = configuration.definitionWalker) !== null && _c !== void 0 ? _c : new sequentialWorkflowModel.DefinitionWalker();
2562
2583
  const i18n = (_d = configuration.i18n) !== null && _d !== void 0 ? _d : ((_, defaultValue) => defaultValue);
@@ -2567,12 +2588,10 @@ class DesignerContext {
2567
2588
  historyController = HistoryController.create(configuration.undoStack, state, stateModifier, configuration);
2568
2589
  }
2569
2590
  const preferenceStorage = (_e = configuration.preferenceStorage) !== null && _e !== void 0 ? _e : new MemoryPreferenceStorage();
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);
2591
+ const componentContext = ComponentContext.create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services);
2592
+ return new DesignerContext(theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController);
2572
2593
  }
2573
- constructor(documentOrShadowRoot, documentBody, theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController) {
2574
- this.documentOrShadowRoot = documentOrShadowRoot;
2575
- this.documentBody = documentBody;
2594
+ constructor(theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController) {
2576
2595
  this.theme = theme;
2577
2596
  this.state = state;
2578
2597
  this.configuration = configuration;
@@ -2618,8 +2637,8 @@ function __awaiter(thisArg, _arguments, P, generator) {
2618
2637
  });
2619
2638
  }
2620
2639
 
2621
- function isElementAttached(element, documentBody) {
2622
- return !(documentBody.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_DISCONNECTED);
2640
+ function isElementAttached(dom, element) {
2641
+ return !(dom.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_DISCONNECTED);
2623
2642
  }
2624
2643
 
2625
2644
  let lastGridPatternId = 0;
@@ -2653,12 +2672,12 @@ class WorkspaceView {
2653
2672
  canvas.appendChild(foreground);
2654
2673
  workspace.appendChild(canvas);
2655
2674
  parent.appendChild(workspace);
2656
- const view = new WorkspaceView(componentContext.documentOrShadowRoot, workspace, canvas, pattern, gridPattern, foreground, componentContext);
2675
+ const view = new WorkspaceView(componentContext.shadowRoot, workspace, canvas, pattern, gridPattern, foreground, componentContext);
2657
2676
  window.addEventListener('resize', view.onResizeHandler, false);
2658
2677
  return view;
2659
2678
  }
2660
- constructor(documentOrShadowRoot, workspace, canvas, pattern, gridPattern, foreground, context) {
2661
- this.documentOrShadowRoot = documentOrShadowRoot;
2679
+ constructor(shadowRoot, workspace, canvas, pattern, gridPattern, foreground, context) {
2680
+ this.shadowRoot = shadowRoot;
2662
2681
  this.workspace = workspace;
2663
2682
  this.canvas = canvas;
2664
2683
  this.pattern = pattern;
@@ -2699,9 +2718,11 @@ class WorkspaceView {
2699
2718
  handler(readMousePosition(e), e.target, e.button, e.altKey);
2700
2719
  }, false);
2701
2720
  this.canvas.addEventListener('touchstart', e => {
2721
+ var _a;
2702
2722
  e.preventDefault();
2703
2723
  const clientPosition = readTouchClientPosition(e);
2704
- const element = this.documentOrShadowRoot.elementFromPoint(clientPosition.x, clientPosition.y);
2724
+ const dom = (_a = this.shadowRoot) !== null && _a !== void 0 ? _a : document;
2725
+ const element = dom.elementFromPoint(clientPosition.x, clientPosition.y);
2705
2726
  if (element) {
2706
2727
  const position = readTouchPosition(e);
2707
2728
  handler(position, element, 0, false);
@@ -2884,7 +2905,7 @@ function findValidationBadgeIndex(extensions) {
2884
2905
  }
2885
2906
 
2886
2907
  class ContextMenu {
2887
- static create(documentBody, position, theme, items) {
2908
+ static create(shadowRoot, position, theme, items) {
2888
2909
  const menu = document.createElement('div');
2889
2910
  menu.style.left = `${position.x}px`;
2890
2911
  menu.style.top = `${position.y}px`;
@@ -2904,16 +2925,19 @@ class ContextMenu {
2904
2925
  elements.push(element);
2905
2926
  menu.appendChild(element);
2906
2927
  }
2907
- const instance = new ContextMenu(documentBody, menu, elements, items, Date.now());
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);
2912
- documentBody.appendChild(menu);
2928
+ const body = shadowRoot !== null && shadowRoot !== void 0 ? shadowRoot : document.body;
2929
+ const dom = shadowRoot !== null && shadowRoot !== void 0 ? shadowRoot : document;
2930
+ const instance = new ContextMenu(body, dom, menu, elements, items, Date.now());
2931
+ dom.addEventListener('mousedown', instance.mouseDown, false);
2932
+ dom.addEventListener('mouseup', instance.mouseUp, false);
2933
+ dom.addEventListener('touchstart', instance.mouseDown, false);
2934
+ dom.addEventListener('touchend', instance.mouseUp, false);
2935
+ body.appendChild(menu);
2913
2936
  return instance;
2914
2937
  }
2915
- constructor(documentBody, menu, elements, items, startTime) {
2916
- this.documentBody = documentBody;
2938
+ constructor(body, dom, menu, elements, items, startTime) {
2939
+ this.body = body;
2940
+ this.dom = dom;
2917
2941
  this.menu = menu;
2918
2942
  this.elements = elements;
2919
2943
  this.items = items;
@@ -2960,19 +2984,18 @@ class ContextMenu {
2960
2984
  }
2961
2985
  tryDestroy() {
2962
2986
  if (this.isAttached) {
2963
- this.documentBody.removeChild(this.menu);
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);
2987
+ this.body.removeChild(this.menu);
2988
+ this.dom.removeEventListener('mousedown', this.mouseDown, false);
2989
+ this.dom.removeEventListener('mouseup', this.mouseUp, false);
2990
+ this.dom.removeEventListener('touchstart', this.mouseDown, false);
2991
+ this.dom.removeEventListener('touchend', this.mouseUp, false);
2968
2992
  this.isAttached = false;
2969
2993
  }
2970
2994
  }
2971
2995
  }
2972
2996
 
2973
2997
  class ContextMenuController {
2974
- constructor(documentBody, theme, configuration, itemsBuilder) {
2975
- this.documentBody = documentBody;
2998
+ constructor(theme, configuration, itemsBuilder) {
2976
2999
  this.theme = theme;
2977
3000
  this.configuration = configuration;
2978
3001
  this.itemsBuilder = itemsBuilder;
@@ -2986,7 +3009,7 @@ class ContextMenuController {
2986
3009
  this.current.tryDestroy();
2987
3010
  }
2988
3011
  const items = this.itemsBuilder.build(commandOrNull);
2989
- this.current = ContextMenu.create(this.documentBody, position, this.theme, items);
3012
+ this.current = ContextMenu.create(this.configuration.shadowRoot, position, this.theme, items);
2990
3013
  }
2991
3014
  destroy() {
2992
3015
  if (this.current) {
@@ -3088,7 +3111,7 @@ class Workspace {
3088
3111
  const contextMenuItemsBuilder = new ContextMenuItemsBuilder(api.viewport, api.i18n, designerContext.stateModifier, designerContext.state, ((_a = designerContext.services.contextMenu) === null || _a === void 0 ? void 0 : _a.createItemsProvider)
3089
3112
  ? designerContext.services.contextMenu.createItemsProvider(designerContext.customActionController)
3090
3113
  : undefined);
3091
- const contextMenuController = new ContextMenuController(designerContext.documentBody, designerContext.theme, designerContext.configuration, contextMenuItemsBuilder);
3114
+ const contextMenuController = new ContextMenuController(designerContext.theme, designerContext.configuration, contextMenuItemsBuilder);
3092
3115
  const workspace = new Workspace(view, designerContext.definitionWalker, designerContext.state, designerContext.behaviorController, wheelController, contextMenuController, clickBehaviorResolver, api.viewport, designerContext.services);
3093
3116
  setTimeout(() => {
3094
3117
  workspace.updateRootComponent();
@@ -3519,12 +3542,13 @@ class ControlBarExtension {
3519
3542
  const ignoreTagNames = ['INPUT', 'TEXTAREA', 'SELECT'];
3520
3543
  class KeyboardDaemon {
3521
3544
  static create(api, configuration) {
3522
- const controller = new KeyboardDaemon(api.documentOrShadowRoot, api.controlBar, configuration);
3523
- api.documentOrShadowRoot.addEventListener('keyup', controller.onKeyUp, false);
3545
+ const dom = api.shadowRoot || document;
3546
+ const controller = new KeyboardDaemon(dom, api.controlBar, configuration);
3547
+ dom.addEventListener('keyup', controller.onKeyUp, false);
3524
3548
  return controller;
3525
3549
  }
3526
- constructor(documentOrShadowRoot, controlBarApi, configuration) {
3527
- this.documentOrShadowRoot = documentOrShadowRoot;
3550
+ constructor(dom, controlBarApi, configuration) {
3551
+ this.dom = dom;
3528
3552
  this.controlBarApi = controlBarApi;
3529
3553
  this.configuration = configuration;
3530
3554
  this.onKeyUp = (e) => {
@@ -3548,7 +3572,7 @@ class KeyboardDaemon {
3548
3572
  };
3549
3573
  }
3550
3574
  destroy() {
3551
- this.documentOrShadowRoot.removeEventListener('keyup', this.onKeyUp, false);
3575
+ this.dom.removeEventListener('keyup', this.onKeyUp, false);
3552
3576
  }
3553
3577
  }
3554
3578
  function detectAction(e) {
@@ -4396,7 +4420,7 @@ class Designer {
4396
4420
  * @returns An instance of the designer.
4397
4421
  */
4398
4422
  static create(placeholder, startDefinition, configuration) {
4399
- var _a, _b;
4423
+ var _a;
4400
4424
  if (!placeholder) {
4401
4425
  throw new Error('Placeholder is not defined');
4402
4426
  }
@@ -4405,13 +4429,11 @@ class Designer {
4405
4429
  }
4406
4430
  const config = configuration;
4407
4431
  validateConfiguration(config);
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;
4410
- if (!isElementAttached(placeholder, documentBody)) {
4432
+ if (!isElementAttached((_a = config.shadowRoot) !== null && _a !== void 0 ? _a : document, placeholder)) {
4411
4433
  throw new Error('Placeholder is not attached to the DOM');
4412
4434
  }
4413
4435
  const services = ServicesResolver.resolve(configuration.extensions, config);
4414
- const designerContext = DesignerContext.create(documentOrShadowRoot, documentBody, placeholder, startDefinition, config, services);
4436
+ const designerContext = DesignerContext.create(placeholder, startDefinition, config, services);
4415
4437
  const designerApi = DesignerApi.create(designerContext);
4416
4438
  const view = DesignerView.create(placeholder, designerContext, designerApi);
4417
4439
  const designer = new Designer(view, designerContext.state, designerContext.stateModifier, designerContext.definitionWalker, designerContext.historyController, designerApi);
package/lib/esm/index.js CHANGED
@@ -402,17 +402,19 @@ class PathBarApi {
402
402
 
403
403
  class DragStepView {
404
404
  static create(step, theme, componentContext) {
405
+ var _a;
406
+ const body = (_a = componentContext.shadowRoot) !== null && _a !== void 0 ? _a : document.body;
405
407
  const layer = Dom.element('div', {
406
408
  class: `sqd-drag sqd-theme-${theme}`
407
409
  });
408
- componentContext.documentBody.appendChild(layer);
410
+ body.appendChild(layer);
409
411
  const component = componentContext.services.draggedComponent.create(layer, step, componentContext);
410
- return new DragStepView(component, layer, componentContext.documentBody);
412
+ return new DragStepView(component, layer, body);
411
413
  }
412
- constructor(component, layer, documentBody) {
414
+ constructor(component, layer, body) {
413
415
  this.component = component;
414
416
  this.layer = layer;
415
- this.documentBody = documentBody;
417
+ this.body = body;
416
418
  }
417
419
  setPosition(position) {
418
420
  this.layer.style.top = position.y + 'px';
@@ -420,7 +422,7 @@ class DragStepView {
420
422
  }
421
423
  remove() {
422
424
  this.component.destroy();
423
- this.documentBody.removeChild(this.layer);
425
+ this.body.removeChild(this.layer);
424
426
  }
425
427
  }
426
428
 
@@ -725,11 +727,10 @@ class DesignerApi {
725
727
  const viewportController = context.services.viewportController.create(workspace);
726
728
  const viewport = new ViewportApi(context.workspaceController, viewportController);
727
729
  const toolboxDataProvider = new ToolboxDataProvider(context.componentContext.iconProvider, context.i18n, context.configuration.toolbox);
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);
730
+ return new DesignerApi(context.configuration.shadowRoot, 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
731
  }
730
- constructor(documentOrShadowRoot, documentBody, controlBar, toolbox, editor, workspace, viewport, pathBar, definitionWalker, i18n) {
731
- this.documentOrShadowRoot = documentOrShadowRoot;
732
- this.documentBody = documentBody;
732
+ constructor(shadowRoot, controlBar, toolbox, editor, workspace, viewport, pathBar, definitionWalker, i18n) {
733
+ this.shadowRoot = shadowRoot;
733
734
  this.controlBar = controlBar;
734
735
  this.toolbox = toolbox;
735
736
  this.editor = editor;
@@ -968,15 +969,14 @@ class StepComponentFactory {
968
969
  }
969
970
 
970
971
  class ComponentContext {
971
- static create(documentOrShadowRoot, documentBody, configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services) {
972
+ static create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services) {
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(documentOrShadowRoot, documentBody, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n);
976
+ return new ComponentContext(configuration.shadowRoot, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n);
976
977
  }
977
- constructor(documentOrShadowRoot, documentBody, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n) {
978
- this.documentOrShadowRoot = documentOrShadowRoot;
979
- this.documentBody = documentBody;
978
+ constructor(shadowRoot, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n) {
979
+ this.shadowRoot = shadowRoot;
980
980
  this.validator = validator;
981
981
  this.iconProvider = iconProvider;
982
982
  this.placeholderController = placeholderController;
@@ -2051,32 +2051,41 @@ const nonPassiveOptions = {
2051
2051
  passive: false
2052
2052
  };
2053
2053
  class BehaviorController {
2054
- constructor(documentOrShadowRoot) {
2055
- this.documentOrShadowRoot = documentOrShadowRoot;
2054
+ static create(shadowRoot) {
2055
+ return new BehaviorController(shadowRoot !== null && shadowRoot !== void 0 ? shadowRoot : document, shadowRoot);
2056
+ }
2057
+ constructor(dom, shadowRoot) {
2058
+ this.dom = dom;
2059
+ this.shadowRoot = shadowRoot;
2056
2060
  this.onMouseMove = (e) => {
2057
2061
  e.preventDefault();
2062
+ e.stopPropagation();
2058
2063
  this.move(readMousePosition(e));
2059
2064
  };
2060
2065
  this.onTouchMove = (e) => {
2061
2066
  e.preventDefault();
2067
+ e.stopPropagation();
2062
2068
  this.move(readTouchPosition(e));
2063
2069
  };
2064
2070
  this.onMouseUp = (e) => {
2065
2071
  e.preventDefault();
2072
+ e.stopPropagation();
2066
2073
  this.stop(false, e.target);
2067
2074
  };
2068
2075
  this.onTouchEnd = (e) => {
2069
2076
  var _a;
2070
2077
  e.preventDefault();
2078
+ e.stopPropagation();
2071
2079
  if (!this.state) {
2072
2080
  throw new Error(notInitializedError);
2073
2081
  }
2074
2082
  const position = (_a = this.state.lastPosition) !== null && _a !== void 0 ? _a : this.state.startPosition;
2075
- const element = this.documentOrShadowRoot.elementFromPoint(position.x, position.y);
2083
+ const element = this.dom.elementFromPoint(position.x, position.y);
2076
2084
  this.stop(false, element);
2077
2085
  };
2078
2086
  this.onTouchStart = (e) => {
2079
2087
  e.preventDefault();
2088
+ e.stopPropagation();
2080
2089
  if (e.touches.length !== 1) {
2081
2090
  this.stop(true, null);
2082
2091
  }
@@ -2092,11 +2101,24 @@ class BehaviorController {
2092
2101
  behavior
2093
2102
  };
2094
2103
  behavior.onStart(this.state.startPosition);
2095
- window.addEventListener('mousemove', this.onMouseMove, false);
2096
- window.addEventListener('touchmove', this.onTouchMove, nonPassiveOptions);
2097
- window.addEventListener('mouseup', this.onMouseUp, false);
2098
- window.addEventListener('touchend', this.onTouchEnd, nonPassiveOptions);
2099
- window.addEventListener('touchstart', this.onTouchStart, nonPassiveOptions);
2104
+ if (this.shadowRoot) {
2105
+ this.bind(this.shadowRoot);
2106
+ }
2107
+ this.bind(window);
2108
+ }
2109
+ bind(target) {
2110
+ target.addEventListener('mousemove', this.onMouseMove, false);
2111
+ target.addEventListener('touchmove', this.onTouchMove, nonPassiveOptions);
2112
+ target.addEventListener('mouseup', this.onMouseUp, false);
2113
+ target.addEventListener('touchend', this.onTouchEnd, nonPassiveOptions);
2114
+ target.addEventListener('touchstart', this.onTouchStart, nonPassiveOptions);
2115
+ }
2116
+ unbind(target) {
2117
+ target.removeEventListener('mousemove', this.onMouseMove, false);
2118
+ target.removeEventListener('touchmove', this.onTouchMove, nonPassiveOptions);
2119
+ target.removeEventListener('mouseup', this.onMouseUp, false);
2120
+ target.removeEventListener('touchend', this.onTouchEnd, nonPassiveOptions);
2121
+ target.removeEventListener('touchstart', this.onTouchStart, nonPassiveOptions);
2100
2122
  }
2101
2123
  move(position) {
2102
2124
  if (!this.state) {
@@ -2116,11 +2138,10 @@ class BehaviorController {
2116
2138
  if (!this.state) {
2117
2139
  throw new Error(notInitializedError);
2118
2140
  }
2119
- window.removeEventListener('mousemove', this.onMouseMove, false);
2120
- window.removeEventListener('touchmove', this.onTouchMove, nonPassiveOptions);
2121
- window.removeEventListener('mouseup', this.onMouseUp, false);
2122
- window.removeEventListener('touchend', this.onTouchEnd, nonPassiveOptions);
2123
- window.removeEventListener('touchstart', this.onTouchStart, nonPassiveOptions);
2141
+ if (this.shadowRoot) {
2142
+ this.unbind(this.shadowRoot);
2143
+ }
2144
+ this.unbind(window);
2124
2145
  this.state.behavior.onEnd(interrupt, element);
2125
2146
  this.state = undefined;
2126
2147
  }
@@ -2483,11 +2504,11 @@ function areItemsEqual(item, changeType, stepId) {
2483
2504
  }
2484
2505
 
2485
2506
  class LayoutController {
2486
- constructor(parent) {
2487
- this.parent = parent;
2507
+ constructor(placeholder) {
2508
+ this.placeholder = placeholder;
2488
2509
  }
2489
2510
  isMobile() {
2490
- return this.parent.clientWidth < 400; // TODO
2511
+ return this.placeholder.clientWidth < 400; // TODO
2491
2512
  }
2492
2513
  }
2493
2514
 
@@ -2544,18 +2565,18 @@ class MemoryPreferenceStorage {
2544
2565
  }
2545
2566
 
2546
2567
  class DesignerContext {
2547
- static create(documentOrShadowRoot, documentBody, parent, startDefinition, configuration, services) {
2568
+ static create(placeholder, startDefinition, configuration, services) {
2548
2569
  var _a, _b, _c, _d, _e;
2549
2570
  const definition = ObjectCloner.deepClone(startDefinition);
2550
- const layoutController = new LayoutController(parent);
2551
- const isReadonly = !!configuration.isReadonly;
2571
+ const layoutController = new LayoutController(placeholder);
2572
+ const isReadonly = Boolean(configuration.isReadonly);
2552
2573
  const isToolboxCollapsed = configuration.toolbox ? (_a = configuration.toolbox.isCollapsed) !== null && _a !== void 0 ? _a : layoutController.isMobile() : false;
2553
2574
  const isEditorCollapsed = configuration.editors ? (_b = configuration.editors.isCollapsed) !== null && _b !== void 0 ? _b : layoutController.isMobile() : false;
2554
2575
  const theme = configuration.theme || 'light';
2555
2576
  const state = new DesignerState(definition, isReadonly, isToolboxCollapsed, isEditorCollapsed);
2556
2577
  const workspaceController = new WorkspaceControllerWrapper();
2557
2578
  const placeholderController = services.placeholderController.create();
2558
- const behaviorController = new BehaviorController(documentOrShadowRoot);
2579
+ const behaviorController = BehaviorController.create(configuration.shadowRoot);
2559
2580
  const stepExtensionResolver = StepExtensionResolver.create(services);
2560
2581
  const definitionWalker = (_c = configuration.definitionWalker) !== null && _c !== void 0 ? _c : new DefinitionWalker();
2561
2582
  const i18n = (_d = configuration.i18n) !== null && _d !== void 0 ? _d : ((_, defaultValue) => defaultValue);
@@ -2566,12 +2587,10 @@ class DesignerContext {
2566
2587
  historyController = HistoryController.create(configuration.undoStack, state, stateModifier, configuration);
2567
2588
  }
2568
2589
  const preferenceStorage = (_e = configuration.preferenceStorage) !== null && _e !== void 0 ? _e : new MemoryPreferenceStorage();
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);
2590
+ const componentContext = ComponentContext.create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services);
2591
+ return new DesignerContext(theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController);
2571
2592
  }
2572
- constructor(documentOrShadowRoot, documentBody, theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController) {
2573
- this.documentOrShadowRoot = documentOrShadowRoot;
2574
- this.documentBody = documentBody;
2593
+ constructor(theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController) {
2575
2594
  this.theme = theme;
2576
2595
  this.state = state;
2577
2596
  this.configuration = configuration;
@@ -2617,8 +2636,8 @@ function __awaiter(thisArg, _arguments, P, generator) {
2617
2636
  });
2618
2637
  }
2619
2638
 
2620
- function isElementAttached(element, documentBody) {
2621
- return !(documentBody.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_DISCONNECTED);
2639
+ function isElementAttached(dom, element) {
2640
+ return !(dom.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_DISCONNECTED);
2622
2641
  }
2623
2642
 
2624
2643
  let lastGridPatternId = 0;
@@ -2652,12 +2671,12 @@ class WorkspaceView {
2652
2671
  canvas.appendChild(foreground);
2653
2672
  workspace.appendChild(canvas);
2654
2673
  parent.appendChild(workspace);
2655
- const view = new WorkspaceView(componentContext.documentOrShadowRoot, workspace, canvas, pattern, gridPattern, foreground, componentContext);
2674
+ const view = new WorkspaceView(componentContext.shadowRoot, workspace, canvas, pattern, gridPattern, foreground, componentContext);
2656
2675
  window.addEventListener('resize', view.onResizeHandler, false);
2657
2676
  return view;
2658
2677
  }
2659
- constructor(documentOrShadowRoot, workspace, canvas, pattern, gridPattern, foreground, context) {
2660
- this.documentOrShadowRoot = documentOrShadowRoot;
2678
+ constructor(shadowRoot, workspace, canvas, pattern, gridPattern, foreground, context) {
2679
+ this.shadowRoot = shadowRoot;
2661
2680
  this.workspace = workspace;
2662
2681
  this.canvas = canvas;
2663
2682
  this.pattern = pattern;
@@ -2698,9 +2717,11 @@ class WorkspaceView {
2698
2717
  handler(readMousePosition(e), e.target, e.button, e.altKey);
2699
2718
  }, false);
2700
2719
  this.canvas.addEventListener('touchstart', e => {
2720
+ var _a;
2701
2721
  e.preventDefault();
2702
2722
  const clientPosition = readTouchClientPosition(e);
2703
- const element = this.documentOrShadowRoot.elementFromPoint(clientPosition.x, clientPosition.y);
2723
+ const dom = (_a = this.shadowRoot) !== null && _a !== void 0 ? _a : document;
2724
+ const element = dom.elementFromPoint(clientPosition.x, clientPosition.y);
2704
2725
  if (element) {
2705
2726
  const position = readTouchPosition(e);
2706
2727
  handler(position, element, 0, false);
@@ -2883,7 +2904,7 @@ function findValidationBadgeIndex(extensions) {
2883
2904
  }
2884
2905
 
2885
2906
  class ContextMenu {
2886
- static create(documentBody, position, theme, items) {
2907
+ static create(shadowRoot, position, theme, items) {
2887
2908
  const menu = document.createElement('div');
2888
2909
  menu.style.left = `${position.x}px`;
2889
2910
  menu.style.top = `${position.y}px`;
@@ -2903,16 +2924,19 @@ class ContextMenu {
2903
2924
  elements.push(element);
2904
2925
  menu.appendChild(element);
2905
2926
  }
2906
- const instance = new ContextMenu(documentBody, menu, elements, items, Date.now());
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);
2911
- documentBody.appendChild(menu);
2927
+ const body = shadowRoot !== null && shadowRoot !== void 0 ? shadowRoot : document.body;
2928
+ const dom = shadowRoot !== null && shadowRoot !== void 0 ? shadowRoot : document;
2929
+ const instance = new ContextMenu(body, dom, menu, elements, items, Date.now());
2930
+ dom.addEventListener('mousedown', instance.mouseDown, false);
2931
+ dom.addEventListener('mouseup', instance.mouseUp, false);
2932
+ dom.addEventListener('touchstart', instance.mouseDown, false);
2933
+ dom.addEventListener('touchend', instance.mouseUp, false);
2934
+ body.appendChild(menu);
2912
2935
  return instance;
2913
2936
  }
2914
- constructor(documentBody, menu, elements, items, startTime) {
2915
- this.documentBody = documentBody;
2937
+ constructor(body, dom, menu, elements, items, startTime) {
2938
+ this.body = body;
2939
+ this.dom = dom;
2916
2940
  this.menu = menu;
2917
2941
  this.elements = elements;
2918
2942
  this.items = items;
@@ -2959,19 +2983,18 @@ class ContextMenu {
2959
2983
  }
2960
2984
  tryDestroy() {
2961
2985
  if (this.isAttached) {
2962
- this.documentBody.removeChild(this.menu);
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);
2986
+ this.body.removeChild(this.menu);
2987
+ this.dom.removeEventListener('mousedown', this.mouseDown, false);
2988
+ this.dom.removeEventListener('mouseup', this.mouseUp, false);
2989
+ this.dom.removeEventListener('touchstart', this.mouseDown, false);
2990
+ this.dom.removeEventListener('touchend', this.mouseUp, false);
2967
2991
  this.isAttached = false;
2968
2992
  }
2969
2993
  }
2970
2994
  }
2971
2995
 
2972
2996
  class ContextMenuController {
2973
- constructor(documentBody, theme, configuration, itemsBuilder) {
2974
- this.documentBody = documentBody;
2997
+ constructor(theme, configuration, itemsBuilder) {
2975
2998
  this.theme = theme;
2976
2999
  this.configuration = configuration;
2977
3000
  this.itemsBuilder = itemsBuilder;
@@ -2985,7 +3008,7 @@ class ContextMenuController {
2985
3008
  this.current.tryDestroy();
2986
3009
  }
2987
3010
  const items = this.itemsBuilder.build(commandOrNull);
2988
- this.current = ContextMenu.create(this.documentBody, position, this.theme, items);
3011
+ this.current = ContextMenu.create(this.configuration.shadowRoot, position, this.theme, items);
2989
3012
  }
2990
3013
  destroy() {
2991
3014
  if (this.current) {
@@ -3087,7 +3110,7 @@ class Workspace {
3087
3110
  const contextMenuItemsBuilder = new ContextMenuItemsBuilder(api.viewport, api.i18n, designerContext.stateModifier, designerContext.state, ((_a = designerContext.services.contextMenu) === null || _a === void 0 ? void 0 : _a.createItemsProvider)
3088
3111
  ? designerContext.services.contextMenu.createItemsProvider(designerContext.customActionController)
3089
3112
  : undefined);
3090
- const contextMenuController = new ContextMenuController(designerContext.documentBody, designerContext.theme, designerContext.configuration, contextMenuItemsBuilder);
3113
+ const contextMenuController = new ContextMenuController(designerContext.theme, designerContext.configuration, contextMenuItemsBuilder);
3091
3114
  const workspace = new Workspace(view, designerContext.definitionWalker, designerContext.state, designerContext.behaviorController, wheelController, contextMenuController, clickBehaviorResolver, api.viewport, designerContext.services);
3092
3115
  setTimeout(() => {
3093
3116
  workspace.updateRootComponent();
@@ -3518,12 +3541,13 @@ class ControlBarExtension {
3518
3541
  const ignoreTagNames = ['INPUT', 'TEXTAREA', 'SELECT'];
3519
3542
  class KeyboardDaemon {
3520
3543
  static create(api, configuration) {
3521
- const controller = new KeyboardDaemon(api.documentOrShadowRoot, api.controlBar, configuration);
3522
- api.documentOrShadowRoot.addEventListener('keyup', controller.onKeyUp, false);
3544
+ const dom = api.shadowRoot || document;
3545
+ const controller = new KeyboardDaemon(dom, api.controlBar, configuration);
3546
+ dom.addEventListener('keyup', controller.onKeyUp, false);
3523
3547
  return controller;
3524
3548
  }
3525
- constructor(documentOrShadowRoot, controlBarApi, configuration) {
3526
- this.documentOrShadowRoot = documentOrShadowRoot;
3549
+ constructor(dom, controlBarApi, configuration) {
3550
+ this.dom = dom;
3527
3551
  this.controlBarApi = controlBarApi;
3528
3552
  this.configuration = configuration;
3529
3553
  this.onKeyUp = (e) => {
@@ -3547,7 +3571,7 @@ class KeyboardDaemon {
3547
3571
  };
3548
3572
  }
3549
3573
  destroy() {
3550
- this.documentOrShadowRoot.removeEventListener('keyup', this.onKeyUp, false);
3574
+ this.dom.removeEventListener('keyup', this.onKeyUp, false);
3551
3575
  }
3552
3576
  }
3553
3577
  function detectAction(e) {
@@ -4395,7 +4419,7 @@ class Designer {
4395
4419
  * @returns An instance of the designer.
4396
4420
  */
4397
4421
  static create(placeholder, startDefinition, configuration) {
4398
- var _a, _b;
4422
+ var _a;
4399
4423
  if (!placeholder) {
4400
4424
  throw new Error('Placeholder is not defined');
4401
4425
  }
@@ -4404,13 +4428,11 @@ class Designer {
4404
4428
  }
4405
4429
  const config = configuration;
4406
4430
  validateConfiguration(config);
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;
4409
- if (!isElementAttached(placeholder, documentBody)) {
4431
+ if (!isElementAttached((_a = config.shadowRoot) !== null && _a !== void 0 ? _a : document, placeholder)) {
4410
4432
  throw new Error('Placeholder is not attached to the DOM');
4411
4433
  }
4412
4434
  const services = ServicesResolver.resolve(configuration.extensions, config);
4413
- const designerContext = DesignerContext.create(documentOrShadowRoot, documentBody, placeholder, startDefinition, config, services);
4435
+ const designerContext = DesignerContext.create(placeholder, startDefinition, config, services);
4414
4436
  const designerApi = DesignerApi.create(designerContext);
4415
4437
  const view = DesignerView.create(placeholder, designerContext, designerApi);
4416
4438
  const designer = new Designer(view, designerContext.state, designerContext.stateModifier, designerContext.definitionWalker, designerContext.historyController, designerApi);
package/lib/index.d.ts CHANGED
@@ -75,10 +75,14 @@ interface Behavior {
75
75
  }
76
76
 
77
77
  declare class BehaviorController {
78
- private readonly documentOrShadowRoot;
78
+ private readonly dom;
79
+ private readonly shadowRoot;
79
80
  private state?;
80
- constructor(documentOrShadowRoot: DocumentOrShadowRoot);
81
+ static create(shadowRoot: ShadowRoot | undefined): BehaviorController;
82
+ private constructor();
81
83
  start(startPosition: Vector, behavior: Behavior): void;
84
+ private bind;
85
+ private unbind;
82
86
  private readonly onMouseMove;
83
87
  private readonly onTouchMove;
84
88
  private readonly onMouseUp;
@@ -273,8 +277,7 @@ declare class StepComponentFactory {
273
277
  }
274
278
 
275
279
  declare class ComponentContext {
276
- readonly documentOrShadowRoot: Document | ShadowRoot;
277
- readonly documentBody: Node;
280
+ readonly shadowRoot: ShadowRoot | undefined;
278
281
  readonly validator: DefinitionValidator;
279
282
  readonly iconProvider: IconProvider;
280
283
  readonly placeholderController: PlaceholderController;
@@ -283,7 +286,7 @@ declare class ComponentContext {
283
286
  readonly services: Services;
284
287
  readonly preferenceStorage: PreferenceStorage;
285
288
  readonly i18n: I18n;
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;
289
+ static create(configuration: DesignerConfiguration, state: DesignerState, stepExtensionResolver: StepExtensionResolver, definitionWalker: DefinitionWalker, preferenceStorage: PreferenceStorage, placeholderController: PlaceholderController, i18n: I18n, services: Services): ComponentContext;
287
290
  private constructor();
288
291
  }
289
292
 
@@ -316,8 +319,8 @@ declare class HistoryController {
316
319
  }
317
320
 
318
321
  declare class LayoutController {
319
- private readonly parent;
320
- constructor(parent: HTMLElement);
322
+ private readonly placeholder;
323
+ constructor(placeholder: HTMLElement);
321
324
  isMobile(): boolean;
322
325
  }
323
326
 
@@ -346,8 +349,6 @@ declare class WorkspaceControllerWrapper implements WorkspaceController {
346
349
  }
347
350
 
348
351
  declare class DesignerContext {
349
- readonly documentOrShadowRoot: Document | ShadowRoot;
350
- readonly documentBody: Node;
351
352
  readonly theme: string;
352
353
  readonly state: DesignerState;
353
354
  readonly configuration: DesignerConfiguration;
@@ -362,8 +363,8 @@ declare class DesignerContext {
362
363
  readonly behaviorController: BehaviorController;
363
364
  readonly customActionController: CustomActionController;
364
365
  readonly 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);
366
+ static create(placeholder: HTMLElement, startDefinition: Definition, configuration: DesignerConfiguration, services: Services): DesignerContext;
367
+ 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);
367
368
  setWorkspaceController(controller: WorkspaceController): void;
368
369
  }
369
370
 
@@ -483,8 +484,7 @@ declare class WorkspaceApi {
483
484
  }
484
485
 
485
486
  declare class DesignerApi {
486
- readonly documentOrShadowRoot: Document | ShadowRoot;
487
- readonly documentBody: Node;
487
+ readonly shadowRoot: ShadowRoot | undefined;
488
488
  readonly controlBar: ControlBarApi;
489
489
  readonly toolbox: ToolboxApi;
490
490
  readonly editor: EditorApi;
@@ -944,13 +944,9 @@ interface DesignerConfiguration<TDefinition extends Definition = Definition> {
944
944
  */
945
945
  i18n?: I18n;
946
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;
950
- /**
951
- * @description The body of the document. By default, the designer will use the `document.body`.
947
+ * @description Pass the shadow root of the shadow root to the designer if the designer is placed inside the shadow DOM.
952
948
  */
953
- documentBody?: Node;
949
+ shadowRoot?: ShadowRoot;
954
950
  }
955
951
  type UidGenerator = () => string;
956
952
  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.4",
4
+ "version": "0.24.5",
5
5
  "type": "module",
6
6
  "main": "./lib/esm/index.js",
7
7
  "types": "./lib/index.d.ts",