sequential-workflow-designer 0.19.1 → 0.19.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -4
- package/dist/index.umd.js +48 -55
- package/lib/cjs/index.cjs +48 -55
- package/lib/esm/index.js +48 -55
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -43,6 +43,7 @@ Pro:
|
|
|
43
43
|
* [🍬 Custom Theme Flat](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/custom-theme-flat.html)
|
|
44
44
|
* [🌹 Custom Step Types](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/custom-step-types.html)
|
|
45
45
|
* [📺 Popup Editor](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/popup-editor.html)
|
|
46
|
+
* [💼 Copy Paste](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/copy-paste.html)
|
|
46
47
|
* [👈 Goto](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/goto.html)
|
|
47
48
|
* [📁 Folders](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/folders.html)
|
|
48
49
|
* [⭕ Wheel Mode](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/wheel-mode.html)
|
|
@@ -99,10 +100,10 @@ Add the below code to your head section in HTML document.
|
|
|
99
100
|
```html
|
|
100
101
|
<head>
|
|
101
102
|
...
|
|
102
|
-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.19.
|
|
103
|
-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.19.
|
|
104
|
-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.19.
|
|
105
|
-
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.19.
|
|
103
|
+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.19.3/css/designer.css" rel="stylesheet">
|
|
104
|
+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.19.3/css/designer-light.css" rel="stylesheet">
|
|
105
|
+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.19.3/css/designer-dark.css" rel="stylesheet">
|
|
106
|
+
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.19.3/dist/index.umd.js"></script>
|
|
106
107
|
```
|
|
107
108
|
|
|
108
109
|
Call the designer by:
|
package/dist/index.umd.js
CHANGED
|
@@ -1786,7 +1786,7 @@
|
|
|
1786
1786
|
}
|
|
1787
1787
|
|
|
1788
1788
|
const SCALES = [0.06, 0.08, 0.1, 0.12, 0.16, 0.2, 0.26, 0.32, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1];
|
|
1789
|
-
const MAX_DELTA_Y = 16;
|
|
1789
|
+
const MAX_DELTA_Y$1 = 16;
|
|
1790
1790
|
const quantifiedScale = new NextQuantifiedNumber(SCALES);
|
|
1791
1791
|
class QuantifiedScaleViewportCalculator {
|
|
1792
1792
|
static zoom(current, direction) {
|
|
@@ -1803,8 +1803,8 @@
|
|
|
1803
1803
|
const nextScale = quantifiedScale.next(current.scale, e.deltaY < 0);
|
|
1804
1804
|
let scale;
|
|
1805
1805
|
const absDeltaY = Math.abs(e.deltaY);
|
|
1806
|
-
if (absDeltaY < MAX_DELTA_Y) {
|
|
1807
|
-
const fraction = absDeltaY / MAX_DELTA_Y;
|
|
1806
|
+
if (absDeltaY < MAX_DELTA_Y$1) {
|
|
1807
|
+
const fraction = absDeltaY / MAX_DELTA_Y$1;
|
|
1808
1808
|
const step = nextScale.next - nextScale.current;
|
|
1809
1809
|
scale = current.scale + step * fraction;
|
|
1810
1810
|
}
|
|
@@ -2795,7 +2795,7 @@
|
|
|
2795
2795
|
bindClick(handler) {
|
|
2796
2796
|
this.canvas.addEventListener('mousedown', e => {
|
|
2797
2797
|
e.preventDefault();
|
|
2798
|
-
handler(readMousePosition(e), e.target, e.button);
|
|
2798
|
+
handler(readMousePosition(e), e.target, e.button, e.altKey);
|
|
2799
2799
|
}, false);
|
|
2800
2800
|
this.canvas.addEventListener('touchstart', e => {
|
|
2801
2801
|
e.preventDefault();
|
|
@@ -2803,7 +2803,7 @@
|
|
|
2803
2803
|
const element = document.elementFromPoint(clientPosition.x, clientPosition.y);
|
|
2804
2804
|
if (element) {
|
|
2805
2805
|
const position = readTouchPosition(e);
|
|
2806
|
-
handler(position, element, 0);
|
|
2806
|
+
handler(position, element, 0, false);
|
|
2807
2807
|
}
|
|
2808
2808
|
}, listenerOptions$1);
|
|
2809
2809
|
}
|
|
@@ -2863,8 +2863,8 @@
|
|
|
2863
2863
|
}
|
|
2864
2864
|
|
|
2865
2865
|
class SelectStepBehavior {
|
|
2866
|
-
static create(pressedStepComponent,
|
|
2867
|
-
const isDragDisabled =
|
|
2866
|
+
static create(pressedStepComponent, forceMove, context) {
|
|
2867
|
+
const isDragDisabled = forceMove ||
|
|
2868
2868
|
context.state.isDragDisabled ||
|
|
2869
2869
|
!context.stateModifier.isDraggable(pressedStepComponent.step, pressedStepComponent.parentSequence);
|
|
2870
2870
|
return new SelectStepBehavior(pressedStepComponent, isDragDisabled, context.state, context.stateModifier, context);
|
|
@@ -2953,13 +2953,13 @@
|
|
|
2953
2953
|
constructor(context) {
|
|
2954
2954
|
this.context = context;
|
|
2955
2955
|
}
|
|
2956
|
-
resolve(commandOrNull, element,
|
|
2956
|
+
resolve(commandOrNull, element, forceMove) {
|
|
2957
2957
|
if (!commandOrNull) {
|
|
2958
|
-
return MoveViewportBehavior.create(!
|
|
2958
|
+
return MoveViewportBehavior.create(!forceMove, this.context);
|
|
2959
2959
|
}
|
|
2960
2960
|
switch (commandOrNull.type) {
|
|
2961
2961
|
case exports.ClickCommandType.selectStep:
|
|
2962
|
-
return SelectStepBehavior.create(commandOrNull.component,
|
|
2962
|
+
return SelectStepBehavior.create(commandOrNull.component, forceMove, this.context);
|
|
2963
2963
|
case exports.ClickCommandType.rerenderStep:
|
|
2964
2964
|
return PressingBehavior.create(element, new RerenderStepPressingBehaviorHandler(this.context));
|
|
2965
2965
|
case exports.ClickCommandType.openFolder:
|
|
@@ -3195,9 +3195,9 @@
|
|
|
3195
3195
|
race(0, designerContext.state.onDefinitionChanged, designerContext.state.onSelectedStepIdChanged, designerContext.state.onFolderPathChanged).subscribe(r => {
|
|
3196
3196
|
workspace.onStateChanged(r[0], r[1], r[2]);
|
|
3197
3197
|
});
|
|
3198
|
-
view.bindClick(
|
|
3199
|
-
view.bindWheel(
|
|
3200
|
-
view.bindContextMenu(
|
|
3198
|
+
view.bindClick(workspace.onClick);
|
|
3199
|
+
view.bindWheel(workspace.onWheel);
|
|
3200
|
+
view.bindContextMenu(workspace.onContextMenu);
|
|
3201
3201
|
return workspace;
|
|
3202
3202
|
}
|
|
3203
3203
|
constructor(view, definitionWalker, state, behaviorController, wheelController, contextMenuController, clickBehaviorResolver, viewportApi, services) {
|
|
@@ -3214,6 +3214,25 @@
|
|
|
3214
3214
|
this.isValid = false;
|
|
3215
3215
|
this.selectedStepComponent = null;
|
|
3216
3216
|
this.validationErrorBadgeIndex = null;
|
|
3217
|
+
this.onClick = (position, target, buttonIndex, altKey) => {
|
|
3218
|
+
const isPrimaryButton = buttonIndex === 0;
|
|
3219
|
+
const isMiddleButton = buttonIndex === 1;
|
|
3220
|
+
if (isPrimaryButton || isMiddleButton) {
|
|
3221
|
+
const forceMove = isMiddleButton || altKey;
|
|
3222
|
+
const commandOrNull = this.resolveClick(target, position);
|
|
3223
|
+
const behavior = this.clickBehaviorResolver.resolve(commandOrNull, target, forceMove);
|
|
3224
|
+
this.behaviorController.start(position, behavior);
|
|
3225
|
+
}
|
|
3226
|
+
};
|
|
3227
|
+
this.onWheel = (e) => {
|
|
3228
|
+
e.preventDefault();
|
|
3229
|
+
e.stopPropagation();
|
|
3230
|
+
this.wheelController.onWheel(e);
|
|
3231
|
+
};
|
|
3232
|
+
this.onContextMenu = (position, target) => {
|
|
3233
|
+
const commandOrNull = this.resolveClick(target, position);
|
|
3234
|
+
this.contextMenuController.tryOpen(position, commandOrNull);
|
|
3235
|
+
};
|
|
3217
3236
|
}
|
|
3218
3237
|
updateRootComponent() {
|
|
3219
3238
|
this.selectedStepComponent = null;
|
|
@@ -3278,24 +3297,6 @@
|
|
|
3278
3297
|
this.contextMenuController.destroy();
|
|
3279
3298
|
this.view.destroy();
|
|
3280
3299
|
}
|
|
3281
|
-
onClick(position, target, buttonIndex) {
|
|
3282
|
-
const isPrimaryButton = buttonIndex === 0;
|
|
3283
|
-
const isMiddleButton = buttonIndex === 1;
|
|
3284
|
-
if (isPrimaryButton || isMiddleButton) {
|
|
3285
|
-
const commandOrNull = this.resolveClick(target, position);
|
|
3286
|
-
const behavior = this.clickBehaviorResolver.resolve(commandOrNull, target, isMiddleButton);
|
|
3287
|
-
this.behaviorController.start(position, behavior);
|
|
3288
|
-
}
|
|
3289
|
-
}
|
|
3290
|
-
onWheel(e) {
|
|
3291
|
-
e.preventDefault();
|
|
3292
|
-
e.stopPropagation();
|
|
3293
|
-
this.wheelController.onWheel(e);
|
|
3294
|
-
}
|
|
3295
|
-
onContextMenu(position, target) {
|
|
3296
|
-
const commandOrNull = this.resolveClick(target, position);
|
|
3297
|
-
this.contextMenuController.tryOpen(position, commandOrNull);
|
|
3298
|
-
}
|
|
3299
3300
|
onIsDraggingChanged(isDragging) {
|
|
3300
3301
|
this.getRootComponent().setIsDragging(isDragging);
|
|
3301
3302
|
}
|
|
@@ -3740,6 +3741,7 @@
|
|
|
3740
3741
|
}
|
|
3741
3742
|
}
|
|
3742
3743
|
|
|
3744
|
+
const MAX_DELTA_Y = 25;
|
|
3743
3745
|
const listenerOptions = {
|
|
3744
3746
|
passive: false
|
|
3745
3747
|
};
|
|
@@ -3818,9 +3820,9 @@
|
|
|
3818
3820
|
e.preventDefault();
|
|
3819
3821
|
e.stopPropagation();
|
|
3820
3822
|
if (this.content) {
|
|
3821
|
-
const delta = e.deltaY
|
|
3823
|
+
const delta = Math.sign(e.deltaY) * Math.min(Math.abs(e.deltaY), MAX_DELTA_Y);
|
|
3822
3824
|
const scrollTop = this.getScrollTop();
|
|
3823
|
-
this.setScrollTop(scrollTop
|
|
3825
|
+
this.setScrollTop(scrollTop - delta);
|
|
3824
3826
|
}
|
|
3825
3827
|
}
|
|
3826
3828
|
startScroll(startPosition) {
|
|
@@ -4444,25 +4446,19 @@
|
|
|
4444
4446
|
}
|
|
4445
4447
|
}
|
|
4446
4448
|
|
|
4447
|
-
function throwDepreciatedError(propertyName, groupName) {
|
|
4448
|
-
throw new Error(`The "${propertyName}" property in the "${groupName}" configuration is depreciated`);
|
|
4449
|
-
}
|
|
4450
4449
|
function validateConfiguration(configuration) {
|
|
4451
|
-
|
|
4452
|
-
|
|
4453
|
-
|
|
4454
|
-
|
|
4455
|
-
|
|
4456
|
-
|
|
4457
|
-
|
|
4458
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
4459
|
-
if (configuration.editors && configuration.editors.isHidden !== undefined) {
|
|
4460
|
-
throwDepreciatedError('isHidden', 'editors');
|
|
4461
|
-
}
|
|
4462
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
4463
|
-
if (configuration.steps.validator) {
|
|
4464
|
-
throwDepreciatedError('validator', 'steps');
|
|
4450
|
+
const validateProperty = (key) => {
|
|
4451
|
+
if (configuration[key] === undefined) {
|
|
4452
|
+
throw new Error(`The "${key}" property is not defined in the configuration`);
|
|
4453
|
+
}
|
|
4454
|
+
};
|
|
4455
|
+
if (!configuration) {
|
|
4456
|
+
throw new Error('Configuration is not defined');
|
|
4465
4457
|
}
|
|
4458
|
+
validateProperty('steps');
|
|
4459
|
+
validateProperty('toolbox');
|
|
4460
|
+
validateProperty('editors');
|
|
4461
|
+
validateProperty('controlBar');
|
|
4466
4462
|
}
|
|
4467
4463
|
|
|
4468
4464
|
class Designer {
|
|
@@ -4475,16 +4471,13 @@
|
|
|
4475
4471
|
*/
|
|
4476
4472
|
static create(placeholder, startDefinition, configuration) {
|
|
4477
4473
|
if (!placeholder) {
|
|
4478
|
-
throw new Error('Placeholder is not
|
|
4474
|
+
throw new Error('Placeholder is not defined');
|
|
4479
4475
|
}
|
|
4480
4476
|
if (!isElementAttached(placeholder)) {
|
|
4481
4477
|
throw new Error('Placeholder is not attached to the DOM');
|
|
4482
4478
|
}
|
|
4483
4479
|
if (!startDefinition) {
|
|
4484
|
-
throw new Error('Start definition is not
|
|
4485
|
-
}
|
|
4486
|
-
if (!configuration) {
|
|
4487
|
-
throw new Error('Configuration is not set');
|
|
4480
|
+
throw new Error('Start definition is not defined');
|
|
4488
4481
|
}
|
|
4489
4482
|
const config = configuration;
|
|
4490
4483
|
validateConfiguration(config);
|
package/lib/cjs/index.cjs
CHANGED
|
@@ -1784,7 +1784,7 @@ class NextQuantifiedNumber {
|
|
|
1784
1784
|
}
|
|
1785
1785
|
|
|
1786
1786
|
const SCALES = [0.06, 0.08, 0.1, 0.12, 0.16, 0.2, 0.26, 0.32, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1];
|
|
1787
|
-
const MAX_DELTA_Y = 16;
|
|
1787
|
+
const MAX_DELTA_Y$1 = 16;
|
|
1788
1788
|
const quantifiedScale = new NextQuantifiedNumber(SCALES);
|
|
1789
1789
|
class QuantifiedScaleViewportCalculator {
|
|
1790
1790
|
static zoom(current, direction) {
|
|
@@ -1801,8 +1801,8 @@ class QuantifiedScaleViewportCalculator {
|
|
|
1801
1801
|
const nextScale = quantifiedScale.next(current.scale, e.deltaY < 0);
|
|
1802
1802
|
let scale;
|
|
1803
1803
|
const absDeltaY = Math.abs(e.deltaY);
|
|
1804
|
-
if (absDeltaY < MAX_DELTA_Y) {
|
|
1805
|
-
const fraction = absDeltaY / MAX_DELTA_Y;
|
|
1804
|
+
if (absDeltaY < MAX_DELTA_Y$1) {
|
|
1805
|
+
const fraction = absDeltaY / MAX_DELTA_Y$1;
|
|
1806
1806
|
const step = nextScale.next - nextScale.current;
|
|
1807
1807
|
scale = current.scale + step * fraction;
|
|
1808
1808
|
}
|
|
@@ -2610,7 +2610,7 @@ class WorkspaceView {
|
|
|
2610
2610
|
bindClick(handler) {
|
|
2611
2611
|
this.canvas.addEventListener('mousedown', e => {
|
|
2612
2612
|
e.preventDefault();
|
|
2613
|
-
handler(readMousePosition(e), e.target, e.button);
|
|
2613
|
+
handler(readMousePosition(e), e.target, e.button, e.altKey);
|
|
2614
2614
|
}, false);
|
|
2615
2615
|
this.canvas.addEventListener('touchstart', e => {
|
|
2616
2616
|
e.preventDefault();
|
|
@@ -2618,7 +2618,7 @@ class WorkspaceView {
|
|
|
2618
2618
|
const element = document.elementFromPoint(clientPosition.x, clientPosition.y);
|
|
2619
2619
|
if (element) {
|
|
2620
2620
|
const position = readTouchPosition(e);
|
|
2621
|
-
handler(position, element, 0);
|
|
2621
|
+
handler(position, element, 0, false);
|
|
2622
2622
|
}
|
|
2623
2623
|
}, listenerOptions$1);
|
|
2624
2624
|
}
|
|
@@ -2678,8 +2678,8 @@ class MoveViewportBehavior {
|
|
|
2678
2678
|
}
|
|
2679
2679
|
|
|
2680
2680
|
class SelectStepBehavior {
|
|
2681
|
-
static create(pressedStepComponent,
|
|
2682
|
-
const isDragDisabled =
|
|
2681
|
+
static create(pressedStepComponent, forceMove, context) {
|
|
2682
|
+
const isDragDisabled = forceMove ||
|
|
2683
2683
|
context.state.isDragDisabled ||
|
|
2684
2684
|
!context.stateModifier.isDraggable(pressedStepComponent.step, pressedStepComponent.parentSequence);
|
|
2685
2685
|
return new SelectStepBehavior(pressedStepComponent, isDragDisabled, context.state, context.stateModifier, context);
|
|
@@ -2768,13 +2768,13 @@ class ClickBehaviorResolver {
|
|
|
2768
2768
|
constructor(context) {
|
|
2769
2769
|
this.context = context;
|
|
2770
2770
|
}
|
|
2771
|
-
resolve(commandOrNull, element,
|
|
2771
|
+
resolve(commandOrNull, element, forceMove) {
|
|
2772
2772
|
if (!commandOrNull) {
|
|
2773
|
-
return MoveViewportBehavior.create(!
|
|
2773
|
+
return MoveViewportBehavior.create(!forceMove, this.context);
|
|
2774
2774
|
}
|
|
2775
2775
|
switch (commandOrNull.type) {
|
|
2776
2776
|
case exports.ClickCommandType.selectStep:
|
|
2777
|
-
return SelectStepBehavior.create(commandOrNull.component,
|
|
2777
|
+
return SelectStepBehavior.create(commandOrNull.component, forceMove, this.context);
|
|
2778
2778
|
case exports.ClickCommandType.rerenderStep:
|
|
2779
2779
|
return PressingBehavior.create(element, new RerenderStepPressingBehaviorHandler(this.context));
|
|
2780
2780
|
case exports.ClickCommandType.openFolder:
|
|
@@ -3010,9 +3010,9 @@ class Workspace {
|
|
|
3010
3010
|
race(0, designerContext.state.onDefinitionChanged, designerContext.state.onSelectedStepIdChanged, designerContext.state.onFolderPathChanged).subscribe(r => {
|
|
3011
3011
|
workspace.onStateChanged(r[0], r[1], r[2]);
|
|
3012
3012
|
});
|
|
3013
|
-
view.bindClick(
|
|
3014
|
-
view.bindWheel(
|
|
3015
|
-
view.bindContextMenu(
|
|
3013
|
+
view.bindClick(workspace.onClick);
|
|
3014
|
+
view.bindWheel(workspace.onWheel);
|
|
3015
|
+
view.bindContextMenu(workspace.onContextMenu);
|
|
3016
3016
|
return workspace;
|
|
3017
3017
|
}
|
|
3018
3018
|
constructor(view, definitionWalker, state, behaviorController, wheelController, contextMenuController, clickBehaviorResolver, viewportApi, services) {
|
|
@@ -3029,6 +3029,25 @@ class Workspace {
|
|
|
3029
3029
|
this.isValid = false;
|
|
3030
3030
|
this.selectedStepComponent = null;
|
|
3031
3031
|
this.validationErrorBadgeIndex = null;
|
|
3032
|
+
this.onClick = (position, target, buttonIndex, altKey) => {
|
|
3033
|
+
const isPrimaryButton = buttonIndex === 0;
|
|
3034
|
+
const isMiddleButton = buttonIndex === 1;
|
|
3035
|
+
if (isPrimaryButton || isMiddleButton) {
|
|
3036
|
+
const forceMove = isMiddleButton || altKey;
|
|
3037
|
+
const commandOrNull = this.resolveClick(target, position);
|
|
3038
|
+
const behavior = this.clickBehaviorResolver.resolve(commandOrNull, target, forceMove);
|
|
3039
|
+
this.behaviorController.start(position, behavior);
|
|
3040
|
+
}
|
|
3041
|
+
};
|
|
3042
|
+
this.onWheel = (e) => {
|
|
3043
|
+
e.preventDefault();
|
|
3044
|
+
e.stopPropagation();
|
|
3045
|
+
this.wheelController.onWheel(e);
|
|
3046
|
+
};
|
|
3047
|
+
this.onContextMenu = (position, target) => {
|
|
3048
|
+
const commandOrNull = this.resolveClick(target, position);
|
|
3049
|
+
this.contextMenuController.tryOpen(position, commandOrNull);
|
|
3050
|
+
};
|
|
3032
3051
|
}
|
|
3033
3052
|
updateRootComponent() {
|
|
3034
3053
|
this.selectedStepComponent = null;
|
|
@@ -3093,24 +3112,6 @@ class Workspace {
|
|
|
3093
3112
|
this.contextMenuController.destroy();
|
|
3094
3113
|
this.view.destroy();
|
|
3095
3114
|
}
|
|
3096
|
-
onClick(position, target, buttonIndex) {
|
|
3097
|
-
const isPrimaryButton = buttonIndex === 0;
|
|
3098
|
-
const isMiddleButton = buttonIndex === 1;
|
|
3099
|
-
if (isPrimaryButton || isMiddleButton) {
|
|
3100
|
-
const commandOrNull = this.resolveClick(target, position);
|
|
3101
|
-
const behavior = this.clickBehaviorResolver.resolve(commandOrNull, target, isMiddleButton);
|
|
3102
|
-
this.behaviorController.start(position, behavior);
|
|
3103
|
-
}
|
|
3104
|
-
}
|
|
3105
|
-
onWheel(e) {
|
|
3106
|
-
e.preventDefault();
|
|
3107
|
-
e.stopPropagation();
|
|
3108
|
-
this.wheelController.onWheel(e);
|
|
3109
|
-
}
|
|
3110
|
-
onContextMenu(position, target) {
|
|
3111
|
-
const commandOrNull = this.resolveClick(target, position);
|
|
3112
|
-
this.contextMenuController.tryOpen(position, commandOrNull);
|
|
3113
|
-
}
|
|
3114
3115
|
onIsDraggingChanged(isDragging) {
|
|
3115
3116
|
this.getRootComponent().setIsDragging(isDragging);
|
|
3116
3117
|
}
|
|
@@ -3555,6 +3556,7 @@ class SmartEditorExtension {
|
|
|
3555
3556
|
}
|
|
3556
3557
|
}
|
|
3557
3558
|
|
|
3559
|
+
const MAX_DELTA_Y = 25;
|
|
3558
3560
|
const listenerOptions = {
|
|
3559
3561
|
passive: false
|
|
3560
3562
|
};
|
|
@@ -3633,9 +3635,9 @@ class ScrollBoxView {
|
|
|
3633
3635
|
e.preventDefault();
|
|
3634
3636
|
e.stopPropagation();
|
|
3635
3637
|
if (this.content) {
|
|
3636
|
-
const delta = e.deltaY
|
|
3638
|
+
const delta = Math.sign(e.deltaY) * Math.min(Math.abs(e.deltaY), MAX_DELTA_Y);
|
|
3637
3639
|
const scrollTop = this.getScrollTop();
|
|
3638
|
-
this.setScrollTop(scrollTop
|
|
3640
|
+
this.setScrollTop(scrollTop - delta);
|
|
3639
3641
|
}
|
|
3640
3642
|
}
|
|
3641
3643
|
startScroll(startPosition) {
|
|
@@ -4259,25 +4261,19 @@ function setDefaults(services, configuration) {
|
|
|
4259
4261
|
}
|
|
4260
4262
|
}
|
|
4261
4263
|
|
|
4262
|
-
function throwDepreciatedError(propertyName, groupName) {
|
|
4263
|
-
throw new Error(`The "${propertyName}" property in the "${groupName}" configuration is depreciated`);
|
|
4264
|
-
}
|
|
4265
4264
|
function validateConfiguration(configuration) {
|
|
4266
|
-
|
|
4267
|
-
|
|
4268
|
-
|
|
4269
|
-
|
|
4270
|
-
|
|
4271
|
-
|
|
4272
|
-
|
|
4273
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
4274
|
-
if (configuration.editors && configuration.editors.isHidden !== undefined) {
|
|
4275
|
-
throwDepreciatedError('isHidden', 'editors');
|
|
4276
|
-
}
|
|
4277
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
4278
|
-
if (configuration.steps.validator) {
|
|
4279
|
-
throwDepreciatedError('validator', 'steps');
|
|
4265
|
+
const validateProperty = (key) => {
|
|
4266
|
+
if (configuration[key] === undefined) {
|
|
4267
|
+
throw new Error(`The "${key}" property is not defined in the configuration`);
|
|
4268
|
+
}
|
|
4269
|
+
};
|
|
4270
|
+
if (!configuration) {
|
|
4271
|
+
throw new Error('Configuration is not defined');
|
|
4280
4272
|
}
|
|
4273
|
+
validateProperty('steps');
|
|
4274
|
+
validateProperty('toolbox');
|
|
4275
|
+
validateProperty('editors');
|
|
4276
|
+
validateProperty('controlBar');
|
|
4281
4277
|
}
|
|
4282
4278
|
|
|
4283
4279
|
class Designer {
|
|
@@ -4290,16 +4286,13 @@ class Designer {
|
|
|
4290
4286
|
*/
|
|
4291
4287
|
static create(placeholder, startDefinition, configuration) {
|
|
4292
4288
|
if (!placeholder) {
|
|
4293
|
-
throw new Error('Placeholder is not
|
|
4289
|
+
throw new Error('Placeholder is not defined');
|
|
4294
4290
|
}
|
|
4295
4291
|
if (!isElementAttached(placeholder)) {
|
|
4296
4292
|
throw new Error('Placeholder is not attached to the DOM');
|
|
4297
4293
|
}
|
|
4298
4294
|
if (!startDefinition) {
|
|
4299
|
-
throw new Error('Start definition is not
|
|
4300
|
-
}
|
|
4301
|
-
if (!configuration) {
|
|
4302
|
-
throw new Error('Configuration is not set');
|
|
4295
|
+
throw new Error('Start definition is not defined');
|
|
4303
4296
|
}
|
|
4304
4297
|
const config = configuration;
|
|
4305
4298
|
validateConfiguration(config);
|
package/lib/esm/index.js
CHANGED
|
@@ -1783,7 +1783,7 @@ class NextQuantifiedNumber {
|
|
|
1783
1783
|
}
|
|
1784
1784
|
|
|
1785
1785
|
const SCALES = [0.06, 0.08, 0.1, 0.12, 0.16, 0.2, 0.26, 0.32, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1];
|
|
1786
|
-
const MAX_DELTA_Y = 16;
|
|
1786
|
+
const MAX_DELTA_Y$1 = 16;
|
|
1787
1787
|
const quantifiedScale = new NextQuantifiedNumber(SCALES);
|
|
1788
1788
|
class QuantifiedScaleViewportCalculator {
|
|
1789
1789
|
static zoom(current, direction) {
|
|
@@ -1800,8 +1800,8 @@ class QuantifiedScaleViewportCalculator {
|
|
|
1800
1800
|
const nextScale = quantifiedScale.next(current.scale, e.deltaY < 0);
|
|
1801
1801
|
let scale;
|
|
1802
1802
|
const absDeltaY = Math.abs(e.deltaY);
|
|
1803
|
-
if (absDeltaY < MAX_DELTA_Y) {
|
|
1804
|
-
const fraction = absDeltaY / MAX_DELTA_Y;
|
|
1803
|
+
if (absDeltaY < MAX_DELTA_Y$1) {
|
|
1804
|
+
const fraction = absDeltaY / MAX_DELTA_Y$1;
|
|
1805
1805
|
const step = nextScale.next - nextScale.current;
|
|
1806
1806
|
scale = current.scale + step * fraction;
|
|
1807
1807
|
}
|
|
@@ -2609,7 +2609,7 @@ class WorkspaceView {
|
|
|
2609
2609
|
bindClick(handler) {
|
|
2610
2610
|
this.canvas.addEventListener('mousedown', e => {
|
|
2611
2611
|
e.preventDefault();
|
|
2612
|
-
handler(readMousePosition(e), e.target, e.button);
|
|
2612
|
+
handler(readMousePosition(e), e.target, e.button, e.altKey);
|
|
2613
2613
|
}, false);
|
|
2614
2614
|
this.canvas.addEventListener('touchstart', e => {
|
|
2615
2615
|
e.preventDefault();
|
|
@@ -2617,7 +2617,7 @@ class WorkspaceView {
|
|
|
2617
2617
|
const element = document.elementFromPoint(clientPosition.x, clientPosition.y);
|
|
2618
2618
|
if (element) {
|
|
2619
2619
|
const position = readTouchPosition(e);
|
|
2620
|
-
handler(position, element, 0);
|
|
2620
|
+
handler(position, element, 0, false);
|
|
2621
2621
|
}
|
|
2622
2622
|
}, listenerOptions$1);
|
|
2623
2623
|
}
|
|
@@ -2677,8 +2677,8 @@ class MoveViewportBehavior {
|
|
|
2677
2677
|
}
|
|
2678
2678
|
|
|
2679
2679
|
class SelectStepBehavior {
|
|
2680
|
-
static create(pressedStepComponent,
|
|
2681
|
-
const isDragDisabled =
|
|
2680
|
+
static create(pressedStepComponent, forceMove, context) {
|
|
2681
|
+
const isDragDisabled = forceMove ||
|
|
2682
2682
|
context.state.isDragDisabled ||
|
|
2683
2683
|
!context.stateModifier.isDraggable(pressedStepComponent.step, pressedStepComponent.parentSequence);
|
|
2684
2684
|
return new SelectStepBehavior(pressedStepComponent, isDragDisabled, context.state, context.stateModifier, context);
|
|
@@ -2767,13 +2767,13 @@ class ClickBehaviorResolver {
|
|
|
2767
2767
|
constructor(context) {
|
|
2768
2768
|
this.context = context;
|
|
2769
2769
|
}
|
|
2770
|
-
resolve(commandOrNull, element,
|
|
2770
|
+
resolve(commandOrNull, element, forceMove) {
|
|
2771
2771
|
if (!commandOrNull) {
|
|
2772
|
-
return MoveViewportBehavior.create(!
|
|
2772
|
+
return MoveViewportBehavior.create(!forceMove, this.context);
|
|
2773
2773
|
}
|
|
2774
2774
|
switch (commandOrNull.type) {
|
|
2775
2775
|
case ClickCommandType.selectStep:
|
|
2776
|
-
return SelectStepBehavior.create(commandOrNull.component,
|
|
2776
|
+
return SelectStepBehavior.create(commandOrNull.component, forceMove, this.context);
|
|
2777
2777
|
case ClickCommandType.rerenderStep:
|
|
2778
2778
|
return PressingBehavior.create(element, new RerenderStepPressingBehaviorHandler(this.context));
|
|
2779
2779
|
case ClickCommandType.openFolder:
|
|
@@ -3009,9 +3009,9 @@ class Workspace {
|
|
|
3009
3009
|
race(0, designerContext.state.onDefinitionChanged, designerContext.state.onSelectedStepIdChanged, designerContext.state.onFolderPathChanged).subscribe(r => {
|
|
3010
3010
|
workspace.onStateChanged(r[0], r[1], r[2]);
|
|
3011
3011
|
});
|
|
3012
|
-
view.bindClick(
|
|
3013
|
-
view.bindWheel(
|
|
3014
|
-
view.bindContextMenu(
|
|
3012
|
+
view.bindClick(workspace.onClick);
|
|
3013
|
+
view.bindWheel(workspace.onWheel);
|
|
3014
|
+
view.bindContextMenu(workspace.onContextMenu);
|
|
3015
3015
|
return workspace;
|
|
3016
3016
|
}
|
|
3017
3017
|
constructor(view, definitionWalker, state, behaviorController, wheelController, contextMenuController, clickBehaviorResolver, viewportApi, services) {
|
|
@@ -3028,6 +3028,25 @@ class Workspace {
|
|
|
3028
3028
|
this.isValid = false;
|
|
3029
3029
|
this.selectedStepComponent = null;
|
|
3030
3030
|
this.validationErrorBadgeIndex = null;
|
|
3031
|
+
this.onClick = (position, target, buttonIndex, altKey) => {
|
|
3032
|
+
const isPrimaryButton = buttonIndex === 0;
|
|
3033
|
+
const isMiddleButton = buttonIndex === 1;
|
|
3034
|
+
if (isPrimaryButton || isMiddleButton) {
|
|
3035
|
+
const forceMove = isMiddleButton || altKey;
|
|
3036
|
+
const commandOrNull = this.resolveClick(target, position);
|
|
3037
|
+
const behavior = this.clickBehaviorResolver.resolve(commandOrNull, target, forceMove);
|
|
3038
|
+
this.behaviorController.start(position, behavior);
|
|
3039
|
+
}
|
|
3040
|
+
};
|
|
3041
|
+
this.onWheel = (e) => {
|
|
3042
|
+
e.preventDefault();
|
|
3043
|
+
e.stopPropagation();
|
|
3044
|
+
this.wheelController.onWheel(e);
|
|
3045
|
+
};
|
|
3046
|
+
this.onContextMenu = (position, target) => {
|
|
3047
|
+
const commandOrNull = this.resolveClick(target, position);
|
|
3048
|
+
this.contextMenuController.tryOpen(position, commandOrNull);
|
|
3049
|
+
};
|
|
3031
3050
|
}
|
|
3032
3051
|
updateRootComponent() {
|
|
3033
3052
|
this.selectedStepComponent = null;
|
|
@@ -3092,24 +3111,6 @@ class Workspace {
|
|
|
3092
3111
|
this.contextMenuController.destroy();
|
|
3093
3112
|
this.view.destroy();
|
|
3094
3113
|
}
|
|
3095
|
-
onClick(position, target, buttonIndex) {
|
|
3096
|
-
const isPrimaryButton = buttonIndex === 0;
|
|
3097
|
-
const isMiddleButton = buttonIndex === 1;
|
|
3098
|
-
if (isPrimaryButton || isMiddleButton) {
|
|
3099
|
-
const commandOrNull = this.resolveClick(target, position);
|
|
3100
|
-
const behavior = this.clickBehaviorResolver.resolve(commandOrNull, target, isMiddleButton);
|
|
3101
|
-
this.behaviorController.start(position, behavior);
|
|
3102
|
-
}
|
|
3103
|
-
}
|
|
3104
|
-
onWheel(e) {
|
|
3105
|
-
e.preventDefault();
|
|
3106
|
-
e.stopPropagation();
|
|
3107
|
-
this.wheelController.onWheel(e);
|
|
3108
|
-
}
|
|
3109
|
-
onContextMenu(position, target) {
|
|
3110
|
-
const commandOrNull = this.resolveClick(target, position);
|
|
3111
|
-
this.contextMenuController.tryOpen(position, commandOrNull);
|
|
3112
|
-
}
|
|
3113
3114
|
onIsDraggingChanged(isDragging) {
|
|
3114
3115
|
this.getRootComponent().setIsDragging(isDragging);
|
|
3115
3116
|
}
|
|
@@ -3554,6 +3555,7 @@ class SmartEditorExtension {
|
|
|
3554
3555
|
}
|
|
3555
3556
|
}
|
|
3556
3557
|
|
|
3558
|
+
const MAX_DELTA_Y = 25;
|
|
3557
3559
|
const listenerOptions = {
|
|
3558
3560
|
passive: false
|
|
3559
3561
|
};
|
|
@@ -3632,9 +3634,9 @@ class ScrollBoxView {
|
|
|
3632
3634
|
e.preventDefault();
|
|
3633
3635
|
e.stopPropagation();
|
|
3634
3636
|
if (this.content) {
|
|
3635
|
-
const delta = e.deltaY
|
|
3637
|
+
const delta = Math.sign(e.deltaY) * Math.min(Math.abs(e.deltaY), MAX_DELTA_Y);
|
|
3636
3638
|
const scrollTop = this.getScrollTop();
|
|
3637
|
-
this.setScrollTop(scrollTop
|
|
3639
|
+
this.setScrollTop(scrollTop - delta);
|
|
3638
3640
|
}
|
|
3639
3641
|
}
|
|
3640
3642
|
startScroll(startPosition) {
|
|
@@ -4258,25 +4260,19 @@ function setDefaults(services, configuration) {
|
|
|
4258
4260
|
}
|
|
4259
4261
|
}
|
|
4260
4262
|
|
|
4261
|
-
function throwDepreciatedError(propertyName, groupName) {
|
|
4262
|
-
throw new Error(`The "${propertyName}" property in the "${groupName}" configuration is depreciated`);
|
|
4263
|
-
}
|
|
4264
4263
|
function validateConfiguration(configuration) {
|
|
4265
|
-
|
|
4266
|
-
|
|
4267
|
-
|
|
4268
|
-
|
|
4269
|
-
|
|
4270
|
-
|
|
4271
|
-
|
|
4272
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
4273
|
-
if (configuration.editors && configuration.editors.isHidden !== undefined) {
|
|
4274
|
-
throwDepreciatedError('isHidden', 'editors');
|
|
4275
|
-
}
|
|
4276
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
4277
|
-
if (configuration.steps.validator) {
|
|
4278
|
-
throwDepreciatedError('validator', 'steps');
|
|
4264
|
+
const validateProperty = (key) => {
|
|
4265
|
+
if (configuration[key] === undefined) {
|
|
4266
|
+
throw new Error(`The "${key}" property is not defined in the configuration`);
|
|
4267
|
+
}
|
|
4268
|
+
};
|
|
4269
|
+
if (!configuration) {
|
|
4270
|
+
throw new Error('Configuration is not defined');
|
|
4279
4271
|
}
|
|
4272
|
+
validateProperty('steps');
|
|
4273
|
+
validateProperty('toolbox');
|
|
4274
|
+
validateProperty('editors');
|
|
4275
|
+
validateProperty('controlBar');
|
|
4280
4276
|
}
|
|
4281
4277
|
|
|
4282
4278
|
class Designer {
|
|
@@ -4289,16 +4285,13 @@ class Designer {
|
|
|
4289
4285
|
*/
|
|
4290
4286
|
static create(placeholder, startDefinition, configuration) {
|
|
4291
4287
|
if (!placeholder) {
|
|
4292
|
-
throw new Error('Placeholder is not
|
|
4288
|
+
throw new Error('Placeholder is not defined');
|
|
4293
4289
|
}
|
|
4294
4290
|
if (!isElementAttached(placeholder)) {
|
|
4295
4291
|
throw new Error('Placeholder is not attached to the DOM');
|
|
4296
4292
|
}
|
|
4297
4293
|
if (!startDefinition) {
|
|
4298
|
-
throw new Error('Start definition is not
|
|
4299
|
-
}
|
|
4300
|
-
if (!configuration) {
|
|
4301
|
-
throw new Error('Configuration is not set');
|
|
4294
|
+
throw new Error('Start definition is not defined');
|
|
4302
4295
|
}
|
|
4303
4296
|
const config = configuration;
|
|
4304
4297
|
validateConfiguration(config);
|
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.19.
|
|
4
|
+
"version": "0.19.3",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./lib/esm/index.js",
|
|
7
7
|
"types": "./lib/index.d.ts",
|