sequential-workflow-designer 0.24.2 → 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.
- package/README.md +4 -4
- package/dist/index.umd.js +53 -41
- package/lib/cjs/index.cjs +53 -41
- package/lib/esm/index.js +53 -41
- package/lib/index.d.ts +15 -4
- 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.
|
|
107
|
-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.
|
|
108
|
-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.
|
|
109
|
-
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.
|
|
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
|
|
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
|
|
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
|
|
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 =
|
|
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(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,12 @@
|
|
|
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
|
|
2752
|
-
return new DesignerContext(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(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;
|
|
2760
|
+
this.documentBody = documentBody;
|
|
2755
2761
|
this.theme = theme;
|
|
2756
2762
|
this.state = state;
|
|
2757
2763
|
this.configuration = configuration;
|
|
@@ -2832,11 +2838,12 @@
|
|
|
2832
2838
|
canvas.appendChild(foreground);
|
|
2833
2839
|
workspace.appendChild(canvas);
|
|
2834
2840
|
parent.appendChild(workspace);
|
|
2835
|
-
const view = new WorkspaceView(workspace, canvas, pattern, gridPattern, foreground, componentContext);
|
|
2841
|
+
const view = new WorkspaceView(componentContext.documentOrShadowRoot, workspace, canvas, pattern, gridPattern, foreground, componentContext);
|
|
2836
2842
|
window.addEventListener('resize', view.onResizeHandler, false);
|
|
2837
2843
|
return view;
|
|
2838
2844
|
}
|
|
2839
|
-
constructor(workspace, canvas, pattern, gridPattern, foreground, context) {
|
|
2845
|
+
constructor(documentOrShadowRoot, workspace, canvas, pattern, gridPattern, foreground, context) {
|
|
2846
|
+
this.documentOrShadowRoot = documentOrShadowRoot;
|
|
2840
2847
|
this.workspace = workspace;
|
|
2841
2848
|
this.canvas = canvas;
|
|
2842
2849
|
this.pattern = pattern;
|
|
@@ -2879,7 +2886,7 @@
|
|
|
2879
2886
|
this.canvas.addEventListener('touchstart', e => {
|
|
2880
2887
|
e.preventDefault();
|
|
2881
2888
|
const clientPosition = readTouchClientPosition(e);
|
|
2882
|
-
const element =
|
|
2889
|
+
const element = this.documentOrShadowRoot.elementFromPoint(clientPosition.x, clientPosition.y);
|
|
2883
2890
|
if (element) {
|
|
2884
2891
|
const position = readTouchPosition(e);
|
|
2885
2892
|
handler(position, element, 0, false);
|
|
@@ -3062,7 +3069,7 @@
|
|
|
3062
3069
|
}
|
|
3063
3070
|
|
|
3064
3071
|
class ContextMenu {
|
|
3065
|
-
static create(position, theme, items) {
|
|
3072
|
+
static create(documentBody, position, theme, items) {
|
|
3066
3073
|
const menu = document.createElement('div');
|
|
3067
3074
|
menu.style.left = `${position.x}px`;
|
|
3068
3075
|
menu.style.top = `${position.y}px`;
|
|
@@ -3082,15 +3089,16 @@
|
|
|
3082
3089
|
elements.push(element);
|
|
3083
3090
|
menu.appendChild(element);
|
|
3084
3091
|
}
|
|
3085
|
-
const instance = new ContextMenu(menu, elements, items, Date.now());
|
|
3086
|
-
|
|
3087
|
-
|
|
3088
|
-
|
|
3089
|
-
|
|
3090
|
-
|
|
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);
|
|
3091
3098
|
return instance;
|
|
3092
3099
|
}
|
|
3093
|
-
constructor(menu, elements, items, startTime) {
|
|
3100
|
+
constructor(documentBody, menu, elements, items, startTime) {
|
|
3101
|
+
this.documentBody = documentBody;
|
|
3094
3102
|
this.menu = menu;
|
|
3095
3103
|
this.elements = elements;
|
|
3096
3104
|
this.items = items;
|
|
@@ -3137,18 +3145,19 @@
|
|
|
3137
3145
|
}
|
|
3138
3146
|
tryDestroy() {
|
|
3139
3147
|
if (this.isAttached) {
|
|
3140
|
-
|
|
3141
|
-
|
|
3142
|
-
|
|
3143
|
-
|
|
3144
|
-
|
|
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);
|
|
3145
3153
|
this.isAttached = false;
|
|
3146
3154
|
}
|
|
3147
3155
|
}
|
|
3148
3156
|
}
|
|
3149
3157
|
|
|
3150
3158
|
class ContextMenuController {
|
|
3151
|
-
constructor(theme, configuration, itemsBuilder) {
|
|
3159
|
+
constructor(documentBody, theme, configuration, itemsBuilder) {
|
|
3160
|
+
this.documentBody = documentBody;
|
|
3152
3161
|
this.theme = theme;
|
|
3153
3162
|
this.configuration = configuration;
|
|
3154
3163
|
this.itemsBuilder = itemsBuilder;
|
|
@@ -3162,7 +3171,7 @@
|
|
|
3162
3171
|
this.current.tryDestroy();
|
|
3163
3172
|
}
|
|
3164
3173
|
const items = this.itemsBuilder.build(commandOrNull);
|
|
3165
|
-
this.current = ContextMenu.create(position, this.theme, items);
|
|
3174
|
+
this.current = ContextMenu.create(this.documentBody, position, this.theme, items);
|
|
3166
3175
|
}
|
|
3167
3176
|
destroy() {
|
|
3168
3177
|
if (this.current) {
|
|
@@ -3264,7 +3273,7 @@
|
|
|
3264
3273
|
const contextMenuItemsBuilder = new ContextMenuItemsBuilder(api.viewport, api.i18n, designerContext.stateModifier, designerContext.state, ((_a = designerContext.services.contextMenu) === null || _a === void 0 ? void 0 : _a.createItemsProvider)
|
|
3265
3274
|
? designerContext.services.contextMenu.createItemsProvider(designerContext.customActionController)
|
|
3266
3275
|
: undefined);
|
|
3267
|
-
const contextMenuController = new ContextMenuController(designerContext.theme, designerContext.configuration, contextMenuItemsBuilder);
|
|
3276
|
+
const contextMenuController = new ContextMenuController(designerContext.documentBody, designerContext.theme, designerContext.configuration, contextMenuItemsBuilder);
|
|
3268
3277
|
const workspace = new Workspace(view, designerContext.definitionWalker, designerContext.state, designerContext.behaviorController, wheelController, contextMenuController, clickBehaviorResolver, api.viewport, designerContext.services);
|
|
3269
3278
|
setTimeout(() => {
|
|
3270
3279
|
workspace.updateRootComponent();
|
|
@@ -3695,22 +3704,24 @@
|
|
|
3695
3704
|
const ignoreTagNames = ['INPUT', 'TEXTAREA', 'SELECT'];
|
|
3696
3705
|
class KeyboardDaemon {
|
|
3697
3706
|
static create(api, configuration) {
|
|
3698
|
-
const controller = new KeyboardDaemon(api.controlBar, configuration);
|
|
3699
|
-
|
|
3707
|
+
const controller = new KeyboardDaemon(api.documentOrShadowRoot, api.controlBar, configuration);
|
|
3708
|
+
api.documentOrShadowRoot.addEventListener('keyup', controller.onKeyUp, false);
|
|
3700
3709
|
return controller;
|
|
3701
3710
|
}
|
|
3702
|
-
constructor(controlBarApi, configuration) {
|
|
3711
|
+
constructor(documentOrShadowRoot, controlBarApi, configuration) {
|
|
3712
|
+
this.documentOrShadowRoot = documentOrShadowRoot;
|
|
3703
3713
|
this.controlBarApi = controlBarApi;
|
|
3704
3714
|
this.configuration = configuration;
|
|
3705
3715
|
this.onKeyUp = (e) => {
|
|
3706
|
-
const
|
|
3716
|
+
const ke = e;
|
|
3717
|
+
const action = detectAction(ke);
|
|
3707
3718
|
if (!action) {
|
|
3708
3719
|
return;
|
|
3709
3720
|
}
|
|
3710
3721
|
if (document.activeElement && ignoreTagNames.includes(document.activeElement.tagName)) {
|
|
3711
3722
|
return;
|
|
3712
3723
|
}
|
|
3713
|
-
if (this.configuration.canHandleKey && !this.configuration.canHandleKey(action,
|
|
3724
|
+
if (this.configuration.canHandleKey && !this.configuration.canHandleKey(action, ke)) {
|
|
3714
3725
|
return;
|
|
3715
3726
|
}
|
|
3716
3727
|
const isDeletable = this.controlBarApi.canDelete();
|
|
@@ -3722,7 +3733,7 @@
|
|
|
3722
3733
|
};
|
|
3723
3734
|
}
|
|
3724
3735
|
destroy() {
|
|
3725
|
-
|
|
3736
|
+
this.documentOrShadowRoot.removeEventListener('keyup', this.onKeyUp, false);
|
|
3726
3737
|
}
|
|
3727
3738
|
}
|
|
3728
3739
|
function detectAction(e) {
|
|
@@ -4570,7 +4581,7 @@
|
|
|
4570
4581
|
* @returns An instance of the designer.
|
|
4571
4582
|
*/
|
|
4572
4583
|
static create(placeholder, startDefinition, configuration) {
|
|
4573
|
-
var _a;
|
|
4584
|
+
var _a, _b;
|
|
4574
4585
|
if (!placeholder) {
|
|
4575
4586
|
throw new Error('Placeholder is not defined');
|
|
4576
4587
|
}
|
|
@@ -4579,12 +4590,13 @@
|
|
|
4579
4590
|
}
|
|
4580
4591
|
const config = configuration;
|
|
4581
4592
|
validateConfiguration(config);
|
|
4582
|
-
const
|
|
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;
|
|
4583
4595
|
if (!isElementAttached(placeholder, documentBody)) {
|
|
4584
4596
|
throw new Error('Placeholder is not attached to the DOM');
|
|
4585
4597
|
}
|
|
4586
4598
|
const services = ServicesResolver.resolve(configuration.extensions, config);
|
|
4587
|
-
const designerContext = DesignerContext.create(placeholder, startDefinition, config, services
|
|
4599
|
+
const designerContext = DesignerContext.create(documentOrShadowRoot, documentBody, placeholder, startDefinition, config, services);
|
|
4588
4600
|
const designerApi = DesignerApi.create(designerContext);
|
|
4589
4601
|
const view = DesignerView.create(placeholder, designerContext, designerApi);
|
|
4590
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
|
|
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
|
|
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
|
|
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 =
|
|
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(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,12 @@ 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
|
|
2567
|
-
return new DesignerContext(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(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;
|
|
2575
|
+
this.documentBody = documentBody;
|
|
2570
2576
|
this.theme = theme;
|
|
2571
2577
|
this.state = state;
|
|
2572
2578
|
this.configuration = configuration;
|
|
@@ -2647,11 +2653,12 @@ class WorkspaceView {
|
|
|
2647
2653
|
canvas.appendChild(foreground);
|
|
2648
2654
|
workspace.appendChild(canvas);
|
|
2649
2655
|
parent.appendChild(workspace);
|
|
2650
|
-
const view = new WorkspaceView(workspace, canvas, pattern, gridPattern, foreground, componentContext);
|
|
2656
|
+
const view = new WorkspaceView(componentContext.documentOrShadowRoot, workspace, canvas, pattern, gridPattern, foreground, componentContext);
|
|
2651
2657
|
window.addEventListener('resize', view.onResizeHandler, false);
|
|
2652
2658
|
return view;
|
|
2653
2659
|
}
|
|
2654
|
-
constructor(workspace, canvas, pattern, gridPattern, foreground, context) {
|
|
2660
|
+
constructor(documentOrShadowRoot, workspace, canvas, pattern, gridPattern, foreground, context) {
|
|
2661
|
+
this.documentOrShadowRoot = documentOrShadowRoot;
|
|
2655
2662
|
this.workspace = workspace;
|
|
2656
2663
|
this.canvas = canvas;
|
|
2657
2664
|
this.pattern = pattern;
|
|
@@ -2694,7 +2701,7 @@ class WorkspaceView {
|
|
|
2694
2701
|
this.canvas.addEventListener('touchstart', e => {
|
|
2695
2702
|
e.preventDefault();
|
|
2696
2703
|
const clientPosition = readTouchClientPosition(e);
|
|
2697
|
-
const element =
|
|
2704
|
+
const element = this.documentOrShadowRoot.elementFromPoint(clientPosition.x, clientPosition.y);
|
|
2698
2705
|
if (element) {
|
|
2699
2706
|
const position = readTouchPosition(e);
|
|
2700
2707
|
handler(position, element, 0, false);
|
|
@@ -2877,7 +2884,7 @@ function findValidationBadgeIndex(extensions) {
|
|
|
2877
2884
|
}
|
|
2878
2885
|
|
|
2879
2886
|
class ContextMenu {
|
|
2880
|
-
static create(position, theme, items) {
|
|
2887
|
+
static create(documentBody, position, theme, items) {
|
|
2881
2888
|
const menu = document.createElement('div');
|
|
2882
2889
|
menu.style.left = `${position.x}px`;
|
|
2883
2890
|
menu.style.top = `${position.y}px`;
|
|
@@ -2897,15 +2904,16 @@ class ContextMenu {
|
|
|
2897
2904
|
elements.push(element);
|
|
2898
2905
|
menu.appendChild(element);
|
|
2899
2906
|
}
|
|
2900
|
-
const instance = new ContextMenu(menu, elements, items, Date.now());
|
|
2901
|
-
|
|
2902
|
-
|
|
2903
|
-
|
|
2904
|
-
|
|
2905
|
-
|
|
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);
|
|
2906
2913
|
return instance;
|
|
2907
2914
|
}
|
|
2908
|
-
constructor(menu, elements, items, startTime) {
|
|
2915
|
+
constructor(documentBody, menu, elements, items, startTime) {
|
|
2916
|
+
this.documentBody = documentBody;
|
|
2909
2917
|
this.menu = menu;
|
|
2910
2918
|
this.elements = elements;
|
|
2911
2919
|
this.items = items;
|
|
@@ -2952,18 +2960,19 @@ class ContextMenu {
|
|
|
2952
2960
|
}
|
|
2953
2961
|
tryDestroy() {
|
|
2954
2962
|
if (this.isAttached) {
|
|
2955
|
-
|
|
2956
|
-
|
|
2957
|
-
|
|
2958
|
-
|
|
2959
|
-
|
|
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);
|
|
2960
2968
|
this.isAttached = false;
|
|
2961
2969
|
}
|
|
2962
2970
|
}
|
|
2963
2971
|
}
|
|
2964
2972
|
|
|
2965
2973
|
class ContextMenuController {
|
|
2966
|
-
constructor(theme, configuration, itemsBuilder) {
|
|
2974
|
+
constructor(documentBody, theme, configuration, itemsBuilder) {
|
|
2975
|
+
this.documentBody = documentBody;
|
|
2967
2976
|
this.theme = theme;
|
|
2968
2977
|
this.configuration = configuration;
|
|
2969
2978
|
this.itemsBuilder = itemsBuilder;
|
|
@@ -2977,7 +2986,7 @@ class ContextMenuController {
|
|
|
2977
2986
|
this.current.tryDestroy();
|
|
2978
2987
|
}
|
|
2979
2988
|
const items = this.itemsBuilder.build(commandOrNull);
|
|
2980
|
-
this.current = ContextMenu.create(position, this.theme, items);
|
|
2989
|
+
this.current = ContextMenu.create(this.documentBody, position, this.theme, items);
|
|
2981
2990
|
}
|
|
2982
2991
|
destroy() {
|
|
2983
2992
|
if (this.current) {
|
|
@@ -3079,7 +3088,7 @@ class Workspace {
|
|
|
3079
3088
|
const contextMenuItemsBuilder = new ContextMenuItemsBuilder(api.viewport, api.i18n, designerContext.stateModifier, designerContext.state, ((_a = designerContext.services.contextMenu) === null || _a === void 0 ? void 0 : _a.createItemsProvider)
|
|
3080
3089
|
? designerContext.services.contextMenu.createItemsProvider(designerContext.customActionController)
|
|
3081
3090
|
: undefined);
|
|
3082
|
-
const contextMenuController = new ContextMenuController(designerContext.theme, designerContext.configuration, contextMenuItemsBuilder);
|
|
3091
|
+
const contextMenuController = new ContextMenuController(designerContext.documentBody, designerContext.theme, designerContext.configuration, contextMenuItemsBuilder);
|
|
3083
3092
|
const workspace = new Workspace(view, designerContext.definitionWalker, designerContext.state, designerContext.behaviorController, wheelController, contextMenuController, clickBehaviorResolver, api.viewport, designerContext.services);
|
|
3084
3093
|
setTimeout(() => {
|
|
3085
3094
|
workspace.updateRootComponent();
|
|
@@ -3510,22 +3519,24 @@ class ControlBarExtension {
|
|
|
3510
3519
|
const ignoreTagNames = ['INPUT', 'TEXTAREA', 'SELECT'];
|
|
3511
3520
|
class KeyboardDaemon {
|
|
3512
3521
|
static create(api, configuration) {
|
|
3513
|
-
const controller = new KeyboardDaemon(api.controlBar, configuration);
|
|
3514
|
-
|
|
3522
|
+
const controller = new KeyboardDaemon(api.documentOrShadowRoot, api.controlBar, configuration);
|
|
3523
|
+
api.documentOrShadowRoot.addEventListener('keyup', controller.onKeyUp, false);
|
|
3515
3524
|
return controller;
|
|
3516
3525
|
}
|
|
3517
|
-
constructor(controlBarApi, configuration) {
|
|
3526
|
+
constructor(documentOrShadowRoot, controlBarApi, configuration) {
|
|
3527
|
+
this.documentOrShadowRoot = documentOrShadowRoot;
|
|
3518
3528
|
this.controlBarApi = controlBarApi;
|
|
3519
3529
|
this.configuration = configuration;
|
|
3520
3530
|
this.onKeyUp = (e) => {
|
|
3521
|
-
const
|
|
3531
|
+
const ke = e;
|
|
3532
|
+
const action = detectAction(ke);
|
|
3522
3533
|
if (!action) {
|
|
3523
3534
|
return;
|
|
3524
3535
|
}
|
|
3525
3536
|
if (document.activeElement && ignoreTagNames.includes(document.activeElement.tagName)) {
|
|
3526
3537
|
return;
|
|
3527
3538
|
}
|
|
3528
|
-
if (this.configuration.canHandleKey && !this.configuration.canHandleKey(action,
|
|
3539
|
+
if (this.configuration.canHandleKey && !this.configuration.canHandleKey(action, ke)) {
|
|
3529
3540
|
return;
|
|
3530
3541
|
}
|
|
3531
3542
|
const isDeletable = this.controlBarApi.canDelete();
|
|
@@ -3537,7 +3548,7 @@ class KeyboardDaemon {
|
|
|
3537
3548
|
};
|
|
3538
3549
|
}
|
|
3539
3550
|
destroy() {
|
|
3540
|
-
|
|
3551
|
+
this.documentOrShadowRoot.removeEventListener('keyup', this.onKeyUp, false);
|
|
3541
3552
|
}
|
|
3542
3553
|
}
|
|
3543
3554
|
function detectAction(e) {
|
|
@@ -4385,7 +4396,7 @@ class Designer {
|
|
|
4385
4396
|
* @returns An instance of the designer.
|
|
4386
4397
|
*/
|
|
4387
4398
|
static create(placeholder, startDefinition, configuration) {
|
|
4388
|
-
var _a;
|
|
4399
|
+
var _a, _b;
|
|
4389
4400
|
if (!placeholder) {
|
|
4390
4401
|
throw new Error('Placeholder is not defined');
|
|
4391
4402
|
}
|
|
@@ -4394,12 +4405,13 @@ class Designer {
|
|
|
4394
4405
|
}
|
|
4395
4406
|
const config = configuration;
|
|
4396
4407
|
validateConfiguration(config);
|
|
4397
|
-
const
|
|
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;
|
|
4398
4410
|
if (!isElementAttached(placeholder, documentBody)) {
|
|
4399
4411
|
throw new Error('Placeholder is not attached to the DOM');
|
|
4400
4412
|
}
|
|
4401
4413
|
const services = ServicesResolver.resolve(configuration.extensions, config);
|
|
4402
|
-
const designerContext = DesignerContext.create(placeholder, startDefinition, config, services
|
|
4414
|
+
const designerContext = DesignerContext.create(documentOrShadowRoot, documentBody, placeholder, startDefinition, config, services);
|
|
4403
4415
|
const designerApi = DesignerApi.create(designerContext);
|
|
4404
4416
|
const view = DesignerView.create(placeholder, designerContext, designerApi);
|
|
4405
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
|
|
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
|
|
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
|
|
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 =
|
|
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(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,12 @@ 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
|
|
2566
|
-
return new DesignerContext(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(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;
|
|
2574
|
+
this.documentBody = documentBody;
|
|
2569
2575
|
this.theme = theme;
|
|
2570
2576
|
this.state = state;
|
|
2571
2577
|
this.configuration = configuration;
|
|
@@ -2646,11 +2652,12 @@ class WorkspaceView {
|
|
|
2646
2652
|
canvas.appendChild(foreground);
|
|
2647
2653
|
workspace.appendChild(canvas);
|
|
2648
2654
|
parent.appendChild(workspace);
|
|
2649
|
-
const view = new WorkspaceView(workspace, canvas, pattern, gridPattern, foreground, componentContext);
|
|
2655
|
+
const view = new WorkspaceView(componentContext.documentOrShadowRoot, workspace, canvas, pattern, gridPattern, foreground, componentContext);
|
|
2650
2656
|
window.addEventListener('resize', view.onResizeHandler, false);
|
|
2651
2657
|
return view;
|
|
2652
2658
|
}
|
|
2653
|
-
constructor(workspace, canvas, pattern, gridPattern, foreground, context) {
|
|
2659
|
+
constructor(documentOrShadowRoot, workspace, canvas, pattern, gridPattern, foreground, context) {
|
|
2660
|
+
this.documentOrShadowRoot = documentOrShadowRoot;
|
|
2654
2661
|
this.workspace = workspace;
|
|
2655
2662
|
this.canvas = canvas;
|
|
2656
2663
|
this.pattern = pattern;
|
|
@@ -2693,7 +2700,7 @@ class WorkspaceView {
|
|
|
2693
2700
|
this.canvas.addEventListener('touchstart', e => {
|
|
2694
2701
|
e.preventDefault();
|
|
2695
2702
|
const clientPosition = readTouchClientPosition(e);
|
|
2696
|
-
const element =
|
|
2703
|
+
const element = this.documentOrShadowRoot.elementFromPoint(clientPosition.x, clientPosition.y);
|
|
2697
2704
|
if (element) {
|
|
2698
2705
|
const position = readTouchPosition(e);
|
|
2699
2706
|
handler(position, element, 0, false);
|
|
@@ -2876,7 +2883,7 @@ function findValidationBadgeIndex(extensions) {
|
|
|
2876
2883
|
}
|
|
2877
2884
|
|
|
2878
2885
|
class ContextMenu {
|
|
2879
|
-
static create(position, theme, items) {
|
|
2886
|
+
static create(documentBody, position, theme, items) {
|
|
2880
2887
|
const menu = document.createElement('div');
|
|
2881
2888
|
menu.style.left = `${position.x}px`;
|
|
2882
2889
|
menu.style.top = `${position.y}px`;
|
|
@@ -2896,15 +2903,16 @@ class ContextMenu {
|
|
|
2896
2903
|
elements.push(element);
|
|
2897
2904
|
menu.appendChild(element);
|
|
2898
2905
|
}
|
|
2899
|
-
const instance = new ContextMenu(menu, elements, items, Date.now());
|
|
2900
|
-
|
|
2901
|
-
|
|
2902
|
-
|
|
2903
|
-
|
|
2904
|
-
|
|
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);
|
|
2905
2912
|
return instance;
|
|
2906
2913
|
}
|
|
2907
|
-
constructor(menu, elements, items, startTime) {
|
|
2914
|
+
constructor(documentBody, menu, elements, items, startTime) {
|
|
2915
|
+
this.documentBody = documentBody;
|
|
2908
2916
|
this.menu = menu;
|
|
2909
2917
|
this.elements = elements;
|
|
2910
2918
|
this.items = items;
|
|
@@ -2951,18 +2959,19 @@ class ContextMenu {
|
|
|
2951
2959
|
}
|
|
2952
2960
|
tryDestroy() {
|
|
2953
2961
|
if (this.isAttached) {
|
|
2954
|
-
|
|
2955
|
-
|
|
2956
|
-
|
|
2957
|
-
|
|
2958
|
-
|
|
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);
|
|
2959
2967
|
this.isAttached = false;
|
|
2960
2968
|
}
|
|
2961
2969
|
}
|
|
2962
2970
|
}
|
|
2963
2971
|
|
|
2964
2972
|
class ContextMenuController {
|
|
2965
|
-
constructor(theme, configuration, itemsBuilder) {
|
|
2973
|
+
constructor(documentBody, theme, configuration, itemsBuilder) {
|
|
2974
|
+
this.documentBody = documentBody;
|
|
2966
2975
|
this.theme = theme;
|
|
2967
2976
|
this.configuration = configuration;
|
|
2968
2977
|
this.itemsBuilder = itemsBuilder;
|
|
@@ -2976,7 +2985,7 @@ class ContextMenuController {
|
|
|
2976
2985
|
this.current.tryDestroy();
|
|
2977
2986
|
}
|
|
2978
2987
|
const items = this.itemsBuilder.build(commandOrNull);
|
|
2979
|
-
this.current = ContextMenu.create(position, this.theme, items);
|
|
2988
|
+
this.current = ContextMenu.create(this.documentBody, position, this.theme, items);
|
|
2980
2989
|
}
|
|
2981
2990
|
destroy() {
|
|
2982
2991
|
if (this.current) {
|
|
@@ -3078,7 +3087,7 @@ class Workspace {
|
|
|
3078
3087
|
const contextMenuItemsBuilder = new ContextMenuItemsBuilder(api.viewport, api.i18n, designerContext.stateModifier, designerContext.state, ((_a = designerContext.services.contextMenu) === null || _a === void 0 ? void 0 : _a.createItemsProvider)
|
|
3079
3088
|
? designerContext.services.contextMenu.createItemsProvider(designerContext.customActionController)
|
|
3080
3089
|
: undefined);
|
|
3081
|
-
const contextMenuController = new ContextMenuController(designerContext.theme, designerContext.configuration, contextMenuItemsBuilder);
|
|
3090
|
+
const contextMenuController = new ContextMenuController(designerContext.documentBody, designerContext.theme, designerContext.configuration, contextMenuItemsBuilder);
|
|
3082
3091
|
const workspace = new Workspace(view, designerContext.definitionWalker, designerContext.state, designerContext.behaviorController, wheelController, contextMenuController, clickBehaviorResolver, api.viewport, designerContext.services);
|
|
3083
3092
|
setTimeout(() => {
|
|
3084
3093
|
workspace.updateRootComponent();
|
|
@@ -3509,22 +3518,24 @@ class ControlBarExtension {
|
|
|
3509
3518
|
const ignoreTagNames = ['INPUT', 'TEXTAREA', 'SELECT'];
|
|
3510
3519
|
class KeyboardDaemon {
|
|
3511
3520
|
static create(api, configuration) {
|
|
3512
|
-
const controller = new KeyboardDaemon(api.controlBar, configuration);
|
|
3513
|
-
|
|
3521
|
+
const controller = new KeyboardDaemon(api.documentOrShadowRoot, api.controlBar, configuration);
|
|
3522
|
+
api.documentOrShadowRoot.addEventListener('keyup', controller.onKeyUp, false);
|
|
3514
3523
|
return controller;
|
|
3515
3524
|
}
|
|
3516
|
-
constructor(controlBarApi, configuration) {
|
|
3525
|
+
constructor(documentOrShadowRoot, controlBarApi, configuration) {
|
|
3526
|
+
this.documentOrShadowRoot = documentOrShadowRoot;
|
|
3517
3527
|
this.controlBarApi = controlBarApi;
|
|
3518
3528
|
this.configuration = configuration;
|
|
3519
3529
|
this.onKeyUp = (e) => {
|
|
3520
|
-
const
|
|
3530
|
+
const ke = e;
|
|
3531
|
+
const action = detectAction(ke);
|
|
3521
3532
|
if (!action) {
|
|
3522
3533
|
return;
|
|
3523
3534
|
}
|
|
3524
3535
|
if (document.activeElement && ignoreTagNames.includes(document.activeElement.tagName)) {
|
|
3525
3536
|
return;
|
|
3526
3537
|
}
|
|
3527
|
-
if (this.configuration.canHandleKey && !this.configuration.canHandleKey(action,
|
|
3538
|
+
if (this.configuration.canHandleKey && !this.configuration.canHandleKey(action, ke)) {
|
|
3528
3539
|
return;
|
|
3529
3540
|
}
|
|
3530
3541
|
const isDeletable = this.controlBarApi.canDelete();
|
|
@@ -3536,7 +3547,7 @@ class KeyboardDaemon {
|
|
|
3536
3547
|
};
|
|
3537
3548
|
}
|
|
3538
3549
|
destroy() {
|
|
3539
|
-
|
|
3550
|
+
this.documentOrShadowRoot.removeEventListener('keyup', this.onKeyUp, false);
|
|
3540
3551
|
}
|
|
3541
3552
|
}
|
|
3542
3553
|
function detectAction(e) {
|
|
@@ -4384,7 +4395,7 @@ class Designer {
|
|
|
4384
4395
|
* @returns An instance of the designer.
|
|
4385
4396
|
*/
|
|
4386
4397
|
static create(placeholder, startDefinition, configuration) {
|
|
4387
|
-
var _a;
|
|
4398
|
+
var _a, _b;
|
|
4388
4399
|
if (!placeholder) {
|
|
4389
4400
|
throw new Error('Placeholder is not defined');
|
|
4390
4401
|
}
|
|
@@ -4393,12 +4404,13 @@ class Designer {
|
|
|
4393
4404
|
}
|
|
4394
4405
|
const config = configuration;
|
|
4395
4406
|
validateConfiguration(config);
|
|
4396
|
-
const
|
|
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;
|
|
4397
4409
|
if (!isElementAttached(placeholder, documentBody)) {
|
|
4398
4410
|
throw new Error('Placeholder is not attached to the DOM');
|
|
4399
4411
|
}
|
|
4400
4412
|
const services = ServicesResolver.resolve(configuration.extensions, config);
|
|
4401
|
-
const designerContext = DesignerContext.create(placeholder, startDefinition, config, services
|
|
4413
|
+
const designerContext = DesignerContext.create(documentOrShadowRoot, documentBody, placeholder, startDefinition, config, services);
|
|
4402
4414
|
const designerApi = DesignerApi.create(designerContext);
|
|
4403
4415
|
const view = DesignerView.create(placeholder, designerContext, designerApi);
|
|
4404
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
|
-
|
|
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,8 @@ declare class WorkspaceControllerWrapper implements WorkspaceController {
|
|
|
343
346
|
}
|
|
344
347
|
|
|
345
348
|
declare class DesignerContext {
|
|
349
|
+
readonly documentOrShadowRoot: Document | ShadowRoot;
|
|
350
|
+
readonly documentBody: Node;
|
|
346
351
|
readonly theme: string;
|
|
347
352
|
readonly state: DesignerState;
|
|
348
353
|
readonly configuration: DesignerConfiguration;
|
|
@@ -357,8 +362,8 @@ declare class DesignerContext {
|
|
|
357
362
|
readonly behaviorController: BehaviorController;
|
|
358
363
|
readonly customActionController: CustomActionController;
|
|
359
364
|
readonly historyController: HistoryController | undefined;
|
|
360
|
-
static create(parent: HTMLElement, startDefinition: Definition, configuration: DesignerConfiguration, services: Services
|
|
361
|
-
constructor(theme: string, state: DesignerState, configuration: DesignerConfiguration, services: Services, componentContext: ComponentContext, definitionWalker: DefinitionWalker, i18n: I18n, stateModifier: StateModifier, layoutController: LayoutController, workspaceController: WorkspaceControllerWrapper, placeholderController: PlaceholderController, behaviorController: BehaviorController, customActionController: CustomActionController, historyController: HistoryController | undefined);
|
|
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);
|
|
362
367
|
setWorkspaceController(controller: WorkspaceController): void;
|
|
363
368
|
}
|
|
364
369
|
|
|
@@ -478,6 +483,8 @@ declare class WorkspaceApi {
|
|
|
478
483
|
}
|
|
479
484
|
|
|
480
485
|
declare class DesignerApi {
|
|
486
|
+
readonly documentOrShadowRoot: Document | ShadowRoot;
|
|
487
|
+
readonly documentBody: Node;
|
|
481
488
|
readonly controlBar: ControlBarApi;
|
|
482
489
|
readonly toolbox: ToolboxApi;
|
|
483
490
|
readonly editor: EditorApi;
|
|
@@ -936,6 +943,10 @@ interface DesignerConfiguration<TDefinition extends Definition = Definition> {
|
|
|
936
943
|
* @description Custom translation function.
|
|
937
944
|
*/
|
|
938
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;
|
|
939
950
|
/**
|
|
940
951
|
* @description The body of the document. By default, the designer will use the `document.body`.
|
|
941
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.
|
|
4
|
+
"version": "0.24.4",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./lib/esm/index.js",
|
|
7
7
|
"types": "./lib/index.d.ts",
|