Skip to content

Commit f6e889c

Browse files
b4rtazb4rtaz
authored
0.14.0. (#65)
1 parent 21907a3 commit f6e889c

32 files changed

+484
-81
lines changed

‎CHANGELOG.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,27 @@
1+
## 0.14.0
2+
3+
This version introduces the context menu, providing a new and interactive way to engage with the designer. If you want, you can disable this feature using the `contextMenu` property in the configuration.
4+
5+
```ts
6+
const configuration = {
7+
contextMenu: false,
8+
// ...
9+
};
10+
```
11+
12+
Introducing a new feature: step duplication! Now, you have the ability to duplicate any step in your definition along with its children. This convenient option can be accessed from the context menu. Please note that the feature is disabled by default. To enable it, you must set your own callback for the isDuplicable property.
13+
14+
```ts
15+
const configuration = {
16+
steps: {
17+
isDuplicable: (step, parentSequence) => {
18+
return true;
19+
},
20+
},
21+
// ...
22+
};
23+
```
24+
125
## 0.13.7
226

327
This version fixes change detections in the Angular package. Thanks @wildercarrot!

‎README.md

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -93,10 +93,10 @@ Add the below code to your head section in HTML document.
9393
```html
9494
<head>
9595
...
96-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.13.7/css/designer.css" rel="stylesheet">
97-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.13.7/css/designer-light.css" rel="stylesheet">
98-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.13.7/css/designer-dark.css" rel="stylesheet">
99-
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.13.7/dist/index.umd.js"></script>
96+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.14.0/css/designer.css" rel="stylesheet">
97+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.14.0/css/designer-light.css" rel="stylesheet">
98+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.14.0/css/designer-dark.css" rel="stylesheet">
99+
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.14.0/dist/index.umd.js"></script>
100100
```
101101

102102
Call the designer by:
@@ -142,6 +142,9 @@ const configuration = {
142142
isDeletable: (step, parentSequence) => {
143143
return step.properties['isDeletable'];
144144
},
145+
isDuplicable: (step, parentSequence) => {
146+
return true;
147+
},
145148
canInsertStep: (step, targetSequence, targetIndex) => {
146149
return targetSequence.length < 5;
147150
},
@@ -197,6 +200,7 @@ const configuration = {
197200
},
198201

199202
controlBar: true,
203+
contextMenu: true,
200204
};
201205

202206
const designer = Designer.create(placeholder, definition, configuration);
@@ -212,6 +216,7 @@ const configuration = {
212216
toolbox: false,
213217
editors: false,
214218
controlBar: false,
219+
contextMenu: false,
215220
// ...
216221
}
217222
```

‎angular/designer/package.json

Lines changed: 2 additions & 2 deletions
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.13.7",
4+
"version": "0.14.0",
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.13.7"
18+
"sequential-workflow-designer": "^0.14.0"
1919
},
2020
"dependencies": {
2121
"tslib": "^2.3.0"

‎demos/angular-app/package.json

Lines changed: 2 additions & 2 deletions
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.13.7",
30-
"sequential-workflow-designer-angular": "^0.13.7",
29+
"sequential-workflow-designer": "^0.14.0",
30+
"sequential-workflow-designer-angular": "^0.14.0",
3131
"tslib": "^2.3.0",
3232
"zone.js": "~0.13.0"
3333
},

‎demos/angular-app/yarn.lock

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5956,24 +5956,24 @@ send@0.18.0:
59565956
range-parser "~1.2.1"
59575957
statuses "2.0.1"
59585958

5959-
sequential-workflow-designer-angular@^0.13.7:
5960-
version "0.13.7"
5961-
resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.13.7.tgz#bf4b88f614f285e9b2850b3fca54b24ba815341b"
5962-
integrity sha512-GHNdGLIS+OsdJuc6i6ptTsXuP/PONETsmMbhSnuCy+2GQKwODWE9gFnzK0j7wbrTNfLnRGgK+Nz0r0s33RgnUA==
5959+
sequential-workflow-designer-angular@^0.14.0:
5960+
version "0.14.0"
5961+
resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.14.0.tgz#64d0d479a71f7fb05bd61afa5c44310b9f19c74a"
5962+
integrity sha512-qFkyBn8YSgcLQLVlhrh5Doue4rnJsnZqbJN/ZhUXP79yhKGRj6J7uxc9X8W5AKooGCUjAKahviongUJyFgj7Hw==
59635963
dependencies:
59645964
tslib "^2.3.0"
59655965

5966-
sequential-workflow-designer@^0.13.7:
5967-
version "0.13.7"
5968-
resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.13.7.tgz#74451fca1501a25ba216228e17996773a74435b0"
5969-
integrity sha512-nS/Lk/DsYeP1XvkdEVeyiyXft+uOELwxCJHPELdPqfu9661k4IRHCmcJhfUywmrbjEFB8Qud9UmO35LpDfuXXA==
5966+
sequential-workflow-designer@^0.14.0:
5967+
version "0.14.0"
5968+
resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.14.0.tgz#6866785bc1bb44d8f69a8a3c39d62671e6b4afaa"
5969+
integrity sha512-sYqDMbNbHx89zaaRooFrFkpsDNszVtKqSUqxnFcue+y9++QNfauyaFaZ8q4l4vjy6Ojd7aFGEEeu76r87E5nNQ==
59705970
dependencies:
5971-
sequential-workflow-model "^0.1.4"
5971+
sequential-workflow-model "^0.2.0"
59725972

5973-
sequential-workflow-model@^0.1.4:
5974-
version "0.1.4"
5975-
resolved "https://registry.yarnpkg.com/sequential-workflow-model/-/sequential-workflow-model-0.1.4.tgz#fcda9b0d802c00668ff1cd4860bf5c9141cfe788"
5976-
integrity sha512-z44I8CQqP51sO7gHqH0/7GjmBOt2yczmmEGdRdJaczogDtZ1E6kucLkcvA4LugXFFuxTilYldY7NKFFTK+XWDA==
5973+
sequential-workflow-model@^0.2.0:
5974+
version "0.2.0"
5975+
resolved "https://registry.yarnpkg.com/sequential-workflow-model/-/sequential-workflow-model-0.2.0.tgz#7266378b67eeef3973a98fd07a32bb753c8666ec"
5976+
integrity sha512-oK+He1N/0Ogg4Z/7KbAzhBRTJEqpPewQAIV7G9WvxhLcpTHvrR9rTMykDwWDVdroNFiLQYa00nYvjqrCIzYfqg==
59775977

59785978
serialize-javascript@^6.0.0, serialize-javascript@^6.0.1:
59795979
version "6.0.1"

‎demos/react-app/package.json

Lines changed: 2 additions & 2 deletions
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.13.7",
10-
"sequential-workflow-designer-react": "^0.13.7"
9+
"sequential-workflow-designer": "^0.14.0",
10+
"sequential-workflow-designer-react": "^0.14.0"
1111
},
1212
"devDependencies": {
1313
"@types/jest": "^29.2.5",

‎designer/css/designer-dark.css

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,20 @@
5858
stroke: #707070;
5959
}
6060

61+
/* dark > .sqd-context-menu */
62+
63+
.sqd-theme-dark.sqd-context-menu {
64+
box-shadow: 0 0 8px rgba(0, 0, 0, .2);
65+
background: #3F3F3F;
66+
color: #FFF;
67+
}
68+
.sqd-theme-dark .sqd-context-menu-group {
69+
color: #CCC;
70+
}
71+
.sqd-theme-dark .sqd-context-menu-item:hover {
72+
background: #525252;
73+
}
74+
6175
/* dark > .sqd-smart-editor */
6276

6377
.sqd-theme-dark .sqd-smart-editor {

‎designer/css/designer-light.css

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,19 @@
5656
stroke: #000;
5757
}
5858

59+
/* light > .sqd-context-menu */
60+
61+
.sqd-theme-light.sqd-context-menu {
62+
box-shadow: 0 0 8px rgba(0, 0, 0, .2);
63+
background: #FFF;
64+
}
65+
.sqd-theme-light .sqd-context-menu-group {
66+
color: #888;
67+
}
68+
.sqd-theme-light .sqd-context-menu-item:hover {
69+
background: #EEE;
70+
}
71+
5972
/* light > .sqd-smart-editor */
6073

6174
.sqd-theme-light .sqd-smart-editor {

‎designer/css/designer.css

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
width: 100%;
66
height: 100%;
77
}
8-
.sqd-designer, .sqd-drag {
8+
.sqd-designer, .sqd-drag, .sqd-context-menu {
99
font-size: 13px;
1010
line-height: 1em;
1111
}
@@ -167,6 +167,32 @@
167167
stroke-width: 2;
168168
}
169169

170+
/* .sqd-context-menu */
171+
172+
.sqd-context-menu {
173+
position: absolute;
174+
z-index: 2000000000;
175+
border-radius: 4px;
176+
overflow: hidden;
177+
padding: 5px;
178+
}
179+
.sqd-context-menu-group, .sqd-context-menu-item {
180+
width: 130px;
181+
padding: 8px 10px;
182+
white-space: nowrap;
183+
text-overflow: ellipsis;
184+
overflow: hidden;
185+
}
186+
.sqd-context-menu-group {
187+
font-size: 11px;
188+
line-height: 1em;
189+
}
190+
.sqd-context-menu-item {
191+
border-radius: 5px;
192+
cursor: pointer;
193+
transition: background 70ms;
194+
}
195+
170196
/* .sqd-smart-editor */
171197

172198
.sqd-smart-editor-toggle {

‎designer/package.json

Lines changed: 3 additions & 3 deletions
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.13.7",
4+
"version": "0.14.0",
55
"type": "module",
66
"main": "./lib/esm/index.js",
77
"types": "./lib/index.d.ts",
@@ -57,10 +57,10 @@
5757
"prettier:fix": "prettier --write ./src"
5858
},
5959
"dependencies": {
60-
"sequential-workflow-model": "^0.1.4"
60+
"sequential-workflow-model": "^0.2.0"
6161
},
6262
"peerDependencies": {
63-
"sequential-workflow-model": "^0.1.4"
63+
"sequential-workflow-model": "^0.2.0"
6464
},
6565
"devDependencies": {
6666
"@rollup/plugin-node-resolve": "^15.0.1",

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

Lines changed: 10 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
import { Vector } from '../core';
21
import { DesignerContext } from '../designer-context';
32
import { DesignerState } from '../designer-state';
4-
import { ClickCommandType, ClickDetails, Component } from '../workspace';
3+
import { ClickCommand, ClickCommandType } from '../workspace';
54
import { Behavior } from './behavior';
65
import { MoveViewportBehavior } from './move-viewport-behavior';
76
import { SelectStepBehavior } from './select-step-behavior';
@@ -13,30 +12,26 @@ import { TriggerCustomActionPressingBehaviorHandler } from './pressing-behaviors
1312
export class ClickBehaviorResolver {
1413
public constructor(private readonly designerContext: DesignerContext, private readonly state: DesignerState) {}
1514

16-
public resolve(rootComponent: Component, element: Element, position: Vector, forceDisableDrag: boolean): Behavior {
17-
const click: ClickDetails = {
18-
element,
19-
position,
20-
scale: this.state.viewport.scale
21-
};
22-
23-
const command = rootComponent.resolveClick(click);
24-
if (!command) {
15+
public resolve(commandOrNull: ClickCommand | null, element: Element, forceDisableDrag: boolean): Behavior {
16+
if (!commandOrNull) {
2517
return MoveViewportBehavior.create(this.state, true);
2618
}
2719

28-
switch (command.type) {
20+
switch (commandOrNull.type) {
2921
case ClickCommandType.selectStep:
30-
return SelectStepBehavior.create(command.component, forceDisableDrag, this.designerContext);
22+
return SelectStepBehavior.create(commandOrNull.component, forceDisableDrag, this.designerContext);
3123

3224
case ClickCommandType.rerenderStep:
3325
return PressingBehavior.create(element, new RerenderStepPressingBehaviorHandler(this.designerContext));
3426

3527
case ClickCommandType.openFolder:
36-
return PressingBehavior.create(element, new OpenFolderPressingBehaviorHandler(command, this.designerContext));
28+
return PressingBehavior.create(element, new OpenFolderPressingBehaviorHandler(commandOrNull, this.designerContext));
3729

3830
case ClickCommandType.triggerCustomAction:
39-
return PressingBehavior.create(element, new TriggerCustomActionPressingBehaviorHandler(command, this.designerContext));
31+
return PressingBehavior.create(
32+
element,
33+
new TriggerCustomActionPressingBehaviorHandler(commandOrNull, this.designerContext)
34+
);
4035

4136
default:
4237
throw new Error('Not supported behavior type');

‎designer/src/behaviors/drag-step-behavior-view.spec.ts

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
1-
import { createDesignerConfigurationStub, createComponentContextStub, createStepStub } from '../test-tools/stubs';
1+
import { createComponentContextStub, createStepStub } from '../test-tools/stubs';
22
import { DragStepView } from './drag-step-behavior-view';
33

44
describe('DragStepView', () => {
55
it('creates view', () => {
66
const appendChildSpy = spyOn(document.body, 'appendChild').and.stub();
77

88
const step = createStepStub();
9-
const configuration = createDesignerConfigurationStub();
109
const componentContext = createComponentContextStub();
1110

12-
const component = DragStepView.create(step, configuration, componentContext);
11+
const component = DragStepView.create(step, 'light', componentContext);
1312

1413
expect(component).toBeDefined();
1514
expect(appendChildSpy).toHaveBeenCalled();

‎designer/src/behaviors/drag-step-behavior-view.ts

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
import { Dom } from '../core/dom';
22
import { Vector } from '../core/vector';
33
import { Step } from '../definition';
4-
import { DesignerConfiguration } from '../designer-configuration';
54
import { ComponentContext } from '../component-context';
65
import { DraggedComponent } from '../designer-extension';
76

87
export class DragStepView {
9-
public static create(step: Step, configuration: DesignerConfiguration, componentContext: ComponentContext): DragStepView {
10-
const theme = configuration.theme || 'light';
8+
public static create(step: Step, theme: string, componentContext: ComponentContext): DragStepView {
119
const layer = Dom.element('div', {
1210
class: `sqd-drag sqd-theme-${theme}`
1311
});

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { StepComponent } from '../workspace/step-component';
1212

1313
export class DragStepBehavior implements Behavior {
1414
public static create(designerContext: DesignerContext, step: Step, draggedStepComponent?: StepComponent): DragStepBehavior {
15-
const view = DragStepView.create(step, designerContext.configuration, designerContext.componentContext);
15+
const view = DragStepView.create(step, designerContext.theme, designerContext.componentContext);
1616
return new DragStepBehavior(
1717
view,
1818
designerContext.workspaceController,

‎designer/src/core/step-duplicator.spec.ts

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { BranchedStep, DefinitionWalker, SequentialStep, Step } from 'sequential-workflow-model';
2+
import { StepDuplicator } from './step-duplicator';
3+
import { Uid } from './uid';
4+
5+
describe('StepDuplicator', () => {
6+
const saveStep: Step = {
7+
type: 'save',
8+
componentType: 'task',
9+
id: '0x0',
10+
name: 'Save',
11+
properties: {}
12+
};
13+
14+
const loopStep: SequentialStep = {
15+
type: 'loop',
16+
componentType: 'container',
17+
id: '0x1',
18+
name: 'Loop',
19+
properties: {},
20+
sequence: [saveStep]
21+
};
22+
23+
const ifStep: BranchedStep = {
24+
type: 'if',
25+
componentType: 'switch',
26+
id: '0x2',
27+
name: 'If',
28+
properties: {},
29+
branches: {
30+
true: [loopStep],
31+
false: []
32+
}
33+
};
34+
35+
it('duplicates correctly', () => {
36+
const duplicator = new StepDuplicator(Uid.next, new DefinitionWalker());
37+
38+
const duplicatedIf = duplicator.duplicate(ifStep) as BranchedStep;
39+
40+
expect(duplicatedIf).not.toBe(ifStep);
41+
expect(duplicatedIf.id).not.toBe(ifStep.id);
42+
expect(duplicatedIf.type).toBe('if');
43+
44+
const duplicatedLoop = duplicatedIf.branches.true[0] as SequentialStep;
45+
expect(duplicatedLoop).not.toBe(loopStep);
46+
expect(duplicatedLoop.id).not.toBe(loopStep.id);
47+
expect(duplicatedLoop.type).toBe('loop');
48+
49+
const duplicatedSave = duplicatedLoop.sequence[0];
50+
expect(duplicatedSave).not.toBe(saveStep);
51+
expect(duplicatedSave.id).not.toBe(saveStep.id);
52+
expect(duplicatedSave.type).toBe('save');
53+
});
54+
});

0 commit comments

Comments
 (0)