Skip to content

Commit 0a84390

Browse files
b4rtazb4rtaz
authored
0.19.2. (#127)
1 parent db49623 commit 0a84390

19 files changed

+79
-74
lines changed

‎CHANGELOG.md

+4
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
## 0.19.2
2+
3+
This version adds the `alt` key support. Now when you hold the `alt` key and click on the canvas, the drag and drop is disabled [#126](https://github.com/nocode-js/sequential-workflow-designer/issues/126).
4+
15
## 0.19.1
26

37
Fixed the bug with refreshing the state modifier dependencies.

‎README.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -99,10 +99,10 @@ Add the below code to your head section in HTML document.
9999
```html
100100
<head>
101101
...
102-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.19.1/css/designer.css" rel="stylesheet">
103-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.19.1/css/designer-light.css" rel="stylesheet">
104-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.19.1/css/designer-dark.css" rel="stylesheet">
105-
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.19.1/dist/index.umd.js"></script>
102+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.19.2/css/designer.css" rel="stylesheet">
103+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.19.2/css/designer-light.css" rel="stylesheet">
104+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.19.2/css/designer-dark.css" rel="stylesheet">
105+
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.19.2/dist/index.umd.js"></script>
106106
```
107107

108108
Call the designer by:

‎angular/designer/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "sequential-workflow-designer-angular",
33
"description": "Angular wrapper for Sequential Workflow Designer component.",
4-
"version": "0.19.1",
4+
"version": "0.19.2",
55
"author": {
66
"name": "NoCode JS",
77
"url": "https://nocode-js.com/"
@@ -15,7 +15,7 @@
1515
"peerDependencies": {
1616
"@angular/common": "12 - 16",
1717
"@angular/core": "12 - 16",
18-
"sequential-workflow-designer": "^0.19.1"
18+
"sequential-workflow-designer": "^0.19.2"
1919
},
2020
"dependencies": {
2121
"tslib": "^2.3.0"

‎demos/angular-app/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@
2626
"@angular/platform-browser-dynamic": "^15.2.9",
2727
"@angular/router": "^15.2.9",
2828
"rxjs": "~7.8.0",
29-
"sequential-workflow-designer": "^0.19.1",
30-
"sequential-workflow-designer-angular": "^0.19.1",
29+
"sequential-workflow-designer": "^0.19.2",
30+
"sequential-workflow-designer-angular": "^0.19.2",
3131
"tslib": "^2.3.0",
3232
"zone.js": "~0.13.0"
3333
},

‎demos/angular-app/yarn.lock

+8-8
Original file line numberDiff line numberDiff line change
@@ -5956,17 +5956,17 @@ send@0.18.0:
59565956
range-parser "~1.2.1"
59575957
statuses "2.0.1"
59585958

5959-
sequential-workflow-designer-angular@^0.19.0:
5960-
version "0.19.0"
5961-
resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.19.0.tgz#3ec9bd1584e69615ae293baa987560125e374751"
5962-
integrity sha512-nvUWQevPaS/FOzaDlDZk43pL4A+b0CjZOKGziMmdlBXzS1dBAhK3HlImM8sg7ZXfgDuvBn3FuLUJp/M24VmjhA==
5959+
sequential-workflow-designer-angular@^0.19.2:
5960+
version "0.19.2"
5961+
resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.19.2.tgz#367e51b985c27ea58bf2f824dbc5b94a130f55b2"
5962+
integrity sha512-hSZlLyBSRXOtsEZIwh92NODta8GznS8vBUHh7vgv4+33WCyip+wL8cDB/QqtFYDs/fSvCsxYsNUEgjlOrkLYCw==
59635963
dependencies:
59645964
tslib "^2.3.0"
59655965

5966-
sequential-workflow-designer@^0.19.0:
5967-
version "0.19.0"
5968-
resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.19.0.tgz#988eac7b97ee7dedd23db4d3d324ee7e6366dbcb"
5969-
integrity sha512-p0Cipp+4URv8Fo4i4t/nscVbIoNO0NmxF6w/siv64eRe3Vm4+6Rewn+UApBiamnhYwmyqYl97U830f89+OfuqA==
5966+
sequential-workflow-designer@^0.19.2:
5967+
version "0.19.2"
5968+
resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.19.2.tgz#885e0062d42cb325806273e7637a1407a29de7c7"
5969+
integrity sha512-bAJae/ZTLj5wvCv5+l7ZKWRruy7lgDjYaDAaTLapPrHtf46H4pfXXe5aeSv6mNRcQaKtQ9/MsygxnC/Onlkdng==
59705970
dependencies:
59715971
sequential-workflow-model "^0.2.0"
59725972

‎demos/react-app/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
"dependencies": {
77
"react": "^18.2.0",
88
"react-dom": "^18.2.0",
9-
"sequential-workflow-designer": "^0.19.1",
10-
"sequential-workflow-designer-react": "^0.19.1"
9+
"sequential-workflow-designer": "^0.19.2",
10+
"sequential-workflow-designer-react": "^0.19.2"
1111
},
1212
"devDependencies": {
1313
"@types/jest": "^29.2.5",

‎demos/svelte-app/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@
1616
"eslint": "eslint ./src --ext .ts"
1717
},
1818
"dependencies": {
19-
"sequential-workflow-designer": "^0.19.1",
20-
"sequential-workflow-designer-svelte": "^0.19.1"
19+
"sequential-workflow-designer": "^0.19.2",
20+
"sequential-workflow-designer-svelte": "^0.19.2"
2121
},
2222
"devDependencies": {
2323
"@sveltejs/adapter-static": "^2.0.3",

‎designer/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "sequential-workflow-designer",
33
"description": "Customizable no-code component for building flow-based programming applications.",
4-
"version": "0.19.1",
4+
"version": "0.19.2",
55
"type": "module",
66
"main": "./lib/esm/index.js",
77
"types": "./lib/index.d.ts",

‎designer/src/behaviors/click-behavior-resolver.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,14 @@ import { TriggerCustomActionPressingBehaviorHandler } from './pressing-behaviors
1111
export class ClickBehaviorResolver {
1212
public constructor(private readonly context: DesignerContext) {}
1313

14-
public resolve(commandOrNull: ClickCommand | null, element: Element, isMiddleButton: boolean): Behavior {
14+
public resolve(commandOrNull: ClickCommand | null, element: Element, forceMove: boolean): Behavior {
1515
if (!commandOrNull) {
16-
return MoveViewportBehavior.create(!isMiddleButton, this.context);
16+
return MoveViewportBehavior.create(!forceMove, this.context);
1717
}
1818

1919
switch (commandOrNull.type) {
2020
case ClickCommandType.selectStep:
21-
return SelectStepBehavior.create(commandOrNull.component, isMiddleButton, this.context);
21+
return SelectStepBehavior.create(commandOrNull.component, forceMove, this.context);
2222

2323
case ClickCommandType.rerenderStep:
2424
return PressingBehavior.create(element, new RerenderStepPressingBehaviorHandler(this.context));

‎designer/src/behaviors/select-step-behavior.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ import { DragStepBehavior } from './drag-step-behavior';
88
import { MoveViewportBehavior } from './move-viewport-behavior';
99

1010
export class SelectStepBehavior implements Behavior {
11-
public static create(pressedStepComponent: StepComponent, isMiddleButton: boolean, context: DesignerContext): SelectStepBehavior {
11+
public static create(pressedStepComponent: StepComponent, forceMove: boolean, context: DesignerContext): SelectStepBehavior {
1212
const isDragDisabled =
13-
isMiddleButton ||
13+
forceMove ||
1414
context.state.isDragDisabled ||
1515
!context.stateModifier.isDraggable(pressedStepComponent.step, pressedStepComponent.parentSequence);
1616
return new SelectStepBehavior(pressedStepComponent, isDragDisabled, context.state, context.stateModifier, context);

‎designer/src/core/designer-configuration-validator.ts

+13-18
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,18 @@
11
import { DesignerConfiguration } from '../designer-configuration';
22

3-
function throwDepreciatedError(propertyName: string, groupName: string) {
4-
throw new Error(`The "${propertyName}" property in the "${groupName}" configuration is depreciated`);
5-
}
6-
73
export function validateConfiguration(configuration: DesignerConfiguration) {
8-
if (configuration.controlBar === undefined) {
9-
throw new Error('The "controlBar" property is not defined in the configuration');
10-
}
11-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
12-
if (configuration.toolbox && (configuration.toolbox as any).isHidden !== undefined) {
13-
throwDepreciatedError('isHidden', 'toolbox');
14-
}
15-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
16-
if (configuration.editors && (configuration.editors as any).isHidden !== undefined) {
17-
throwDepreciatedError('isHidden', 'editors');
18-
}
19-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
20-
if ((configuration.steps as any).validator) {
21-
throwDepreciatedError('validator', 'steps');
4+
const validateProperty = (key: keyof DesignerConfiguration) => {
5+
if (configuration[key] === undefined) {
6+
throw new Error(`The "${key}" property is not defined in the configuration`);
7+
}
8+
};
9+
10+
if (!configuration) {
11+
throw new Error('Configuration is not defined');
2212
}
13+
14+
validateProperty('steps');
15+
validateProperty('toolbox');
16+
validateProperty('editors');
17+
validateProperty('controlBar');
2318
}

‎designer/src/designer.ts

+2-6
Original file line numberDiff line numberDiff line change
@@ -27,19 +27,15 @@ export class Designer<TDefinition extends Definition = Definition> {
2727
configuration: DesignerConfiguration<TDef>
2828
): Designer<TDef> {
2929
if (!placeholder) {
30-
throw new Error('Placeholder is not set');
30+
throw new Error('Placeholder is not defined');
3131
}
3232
if (!isElementAttached(placeholder)) {
3333
throw new Error('Placeholder is not attached to the DOM');
3434
}
3535
if (!startDefinition) {
36-
throw new Error('Start definition is not set');
37-
}
38-
if (!configuration) {
39-
throw new Error('Configuration is not set');
36+
throw new Error('Start definition is not defined');
4037
}
4138
const config = configuration as DesignerConfiguration;
42-
4339
validateConfiguration(config);
4440

4541
const services = ServicesResolver.resolve(configuration.extensions, config);

‎designer/src/workspace/workspace-view.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -98,12 +98,12 @@ export class WorkspaceView {
9898
return new Vector(this.canvas.clientWidth, this.canvas.clientHeight);
9999
}
100100

101-
public bindClick(handler: (position: Vector, target: Element, buttonIndex: number) => void) {
101+
public bindClick(handler: (position: Vector, target: Element, buttonIndex: number, altKey: boolean) => void) {
102102
this.canvas.addEventListener(
103103
'mousedown',
104104
e => {
105105
e.preventDefault();
106-
handler(readMousePosition(e), e.target as Element, e.button);
106+
handler(readMousePosition(e), e.target as Element, e.button, e.altKey);
107107
},
108108
false
109109
);
@@ -116,7 +116,7 @@ export class WorkspaceView {
116116
const element = document.elementFromPoint(clientPosition.x, clientPosition.y);
117117
if (element) {
118118
const position = readTouchPosition(e);
119-
handler(position, element, 0);
119+
handler(position, element, 0, false);
120120
}
121121
},
122122
listenerOptions

‎designer/src/workspace/workspace.ts

+12-10
Original file line numberDiff line numberDiff line change
@@ -70,9 +70,9 @@ export class Workspace implements WorkspaceController {
7070
workspace.onStateChanged(r[0], r[1], r[2]);
7171
});
7272

73-
view.bindClick((p, t, b) => workspace.onClick(p, t, b));
74-
view.bindWheel(e => workspace.onWheel(e));
75-
view.bindContextMenu((p, t) => workspace.onContextMenu(p, t));
73+
view.bindClick(workspace.onClick);
74+
view.bindWheel(workspace.onWheel);
75+
view.bindContextMenu(workspace.onContextMenu);
7676
return workspace;
7777
}
7878

@@ -171,28 +171,30 @@ export class Workspace implements WorkspaceController {
171171
this.view.destroy();
172172
}
173173

174-
private onClick(position: Vector, target: Element, buttonIndex: number) {
174+
private readonly onClick = (position: Vector, target: Element, buttonIndex: number, altKey: boolean) => {
175175
const isPrimaryButton = buttonIndex === 0;
176176
const isMiddleButton = buttonIndex === 1;
177177

178178
if (isPrimaryButton || isMiddleButton) {
179+
const forceMove = isMiddleButton || altKey;
180+
179181
const commandOrNull = this.resolveClick(target, position);
180-
const behavior = this.clickBehaviorResolver.resolve(commandOrNull, target, isMiddleButton);
182+
const behavior = this.clickBehaviorResolver.resolve(commandOrNull, target, forceMove);
181183
this.behaviorController.start(position, behavior);
182184
}
183-
}
185+
};
184186

185-
private onWheel(e: WheelEvent) {
187+
private readonly onWheel = (e: WheelEvent) => {
186188
e.preventDefault();
187189
e.stopPropagation();
188190

189191
this.wheelController.onWheel(e);
190-
}
192+
};
191193

192-
private onContextMenu(position: Vector, target: Element) {
194+
private readonly onContextMenu = (position: Vector, target: Element) => {
193195
const commandOrNull = this.resolveClick(target, position);
194196
this.contextMenuController.tryOpen(position, commandOrNull);
195-
}
197+
};
196198

197199
private onIsDraggingChanged(isDragging: boolean) {
198200
this.getRootComponent().setIsDragging(isDragging);

‎examples/assets/editing-restrictions.js

+11-4
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ function createStep(name, properties) {
77
type: 'task',
88
name,
99
properties: Object.assign({
10+
selectable: true,
1011
draggable: true,
1112
deletable: true
1213
}, properties)
@@ -20,6 +21,7 @@ function createLoopStep() {
2021
type: 'loop',
2122
name: 'Loop',
2223
properties: {
24+
selectable: true,
2325
draggable: true,
2426
deletable: true
2527
},
@@ -41,10 +43,12 @@ function load() {
4143
const placeholder = document.getElementById('designer');
4244
const definition = {
4345
sequence: [
44-
createStep('Draggable=true', { draggable: true }),
45-
createStep('Draggable=false', { draggable: false }),
46-
createStep('Deletable=true', { deletable: true }),
47-
createStep('Deletable=false', { deletable: false }),
46+
createStep('isSelectable=true', { selectable: true }),
47+
createStep('isSelectable=false', { selectable: false }),
48+
createStep('isDraggable=true', { draggable: true }),
49+
createStep('isDraggable=false', { draggable: false }),
50+
createStep('isDeletable=true', { deletable: true }),
51+
createStep('isDeletable=false', { deletable: false }),
4852
],
4953
properties: {}
5054
};
@@ -65,6 +69,9 @@ function load() {
6569
},
6670

6771
steps: {
72+
isSelectable: (step) => {
73+
return step.properties.selectable;
74+
},
6875
canInsertStep: (step, _, targetIndex) => {
6976
return window.confirm(`Can insert "${step.name}" (${targetIndex})?`);
7077
},

‎examples/assets/image-filter.js

+1
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,7 @@ const configuration = {
113113
},
114114
},
115115

116+
editors: false,
116117
controlBar: true,
117118
};
118119

‎examples/assets/lib.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ function embedStylesheet(url) {
1919

2020
const baseUrl = isTestEnv()
2121
? '../designer'
22-
: '//cdn.jsdelivr.net/npm/sequential-workflow-designer@0.19.1';
22+
: '//cdn.jsdelivr.net/npm/sequential-workflow-designer@0.19.2';
2323

2424
embedScript(`${baseUrl}/dist/index.umd.js`);
2525
embedStylesheet(`${baseUrl}/css/designer.css`);

‎react/package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "sequential-workflow-designer-react",
33
"description": "React wrapper for Sequential Workflow Designer component.",
4-
"version": "0.19.1",
4+
"version": "0.19.2",
55
"type": "module",
66
"main": "./lib/esm/index.js",
77
"types": "./lib/index.d.ts",
@@ -47,7 +47,7 @@
4747
"peerDependencies": {
4848
"react": "^18.2.0",
4949
"react-dom": "^18.2.0",
50-
"sequential-workflow-designer": "^0.19.1"
50+
"sequential-workflow-designer": "^0.19.2"
5151
},
5252
"devDependencies": {
5353
"@rollup/plugin-node-resolve": "^15.0.1",
@@ -63,7 +63,7 @@
6363
"prettier": "^2.8.2",
6464
"react": "^18.2.0",
6565
"react-dom": "^18.2.0",
66-
"sequential-workflow-designer": "^0.19.1",
66+
"sequential-workflow-designer": "^0.19.2",
6767
"rollup": "^3.18.0",
6868
"rollup-plugin-dts": "^5.2.0",
6969
"rollup-plugin-typescript2": "^0.34.1",

‎svelte/package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "sequential-workflow-designer-svelte",
33
"description": "Svelte wrapper for Sequential Workflow Designer component.",
4-
"version": "0.19.1",
4+
"version": "0.19.2",
55
"license": "MIT",
66
"scripts": {
77
"prepare": "cp ../LICENSE LICENSE",
@@ -28,10 +28,10 @@
2828
],
2929
"peerDependencies": {
3030
"svelte": "^4.0.0",
31-
"sequential-workflow-designer": "^0.19.1"
31+
"sequential-workflow-designer": "^0.19.2"
3232
},
3333
"devDependencies": {
34-
"sequential-workflow-designer": "^0.19.1",
34+
"sequential-workflow-designer": "^0.19.2",
3535
"@sveltejs/adapter-static": "^2.0.3",
3636
"@sveltejs/kit": "^1.20.4",
3737
"@sveltejs/package": "^2.0.0",

0 commit comments

Comments
 (0)