Skip to content

Commit 878fa18

Browse files
b4rtazb4rtaz
authored
0.22.0. (#156)
1 parent 864b61a commit 878fa18

33 files changed

+176
-115
lines changed

‎CHANGELOG.md

+4
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
# 0.22.0
2+
3+
This version refactors the code responsible for displaying placeholders.
4+
15
# 0.21.4
26

37
This version fixes the problem with scrolling the toolbox on mobile devices by using two fingers.

‎README.md

+6-5
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ Features:
2525
* [❎ Fullscreen](https://nocode-js.github.io/sequential-workflow-designer/examples/fullscreen.html)
2626
* [🌅 Image Filter](https://nocode-js.github.io/sequential-workflow-designer/examples/image-filter.html)
2727
* [🔴 Particles](https://nocode-js.github.io/sequential-workflow-designer/examples/particles.html)
28-
* [🇪🇸 Internationalization](https://nocode-js.github.io/sequential-workflow-designer/examples/i18n.html)
28+
* [🌍 Internationalization](https://nocode-js.github.io/sequential-workflow-designer/examples/i18n.html)
2929
* [⛅ Light Dark](https://nocode-js.github.io/sequential-workflow-designer/examples/light-dark.html)
3030
* [🤖 Code Generator](https://nocode-js.github.io/sequential-workflow-designer/examples/code-generator.html)
3131
* [🌻 Rendering Test](https://nocode-js.github.io/sequential-workflow-designer/examples/rendering-test.html)
@@ -56,6 +56,7 @@ Pro:
5656
* [🔰 Badges](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/badges.html)
5757
* [🎩 Custom Viewport](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/custom-viewport.html)
5858
* [🛎 Clickable Placeholder](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/clickable-placeholder.html)
59+
* [📮 Conditional Placeholders](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/conditional-placeholders.html)
5960
* [React Pro Demo](https://nocode-js.com/examples/sequential-workflow-designer-pro/react-pro-app/build/index.html)
6061
* [Angular Pro Demo](https://nocode-js.com/examples/sequential-workflow-designer-pro/angular-pro-app/angular-app/index.html)
6162

@@ -102,10 +103,10 @@ Add the below code to your head section in HTML document.
102103
```html
103104
<head>
104105
...
105-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.21.4/css/designer.css" rel="stylesheet">
106-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.21.4/css/designer-light.css" rel="stylesheet">
107-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.21.4/css/designer-dark.css" rel="stylesheet">
108-
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.21.4/dist/index.umd.js"></script>
106+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.22.0/css/designer.css" rel="stylesheet">
107+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.22.0/css/designer-light.css" rel="stylesheet">
108+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.22.0/css/designer-dark.css" rel="stylesheet">
109+
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.22.0/dist/index.umd.js"></script>
109110
```
110111

111112
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.21.4",
4+
"version": "0.22.0",
55
"author": {
66
"name": "NoCode JS",
77
"url": "https://nocode-js.com/"
@@ -15,7 +15,7 @@
1515
"peerDependencies": {
1616
"@angular/common": "12 - 18",
1717
"@angular/core": "12 - 18",
18-
"sequential-workflow-designer": "^0.21.4"
18+
"sequential-workflow-designer": "^0.22.0"
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": "^17.3.9",
2727
"@angular/router": "^17.3.9",
2828
"rxjs": "~7.8.0",
29-
"sequential-workflow-designer": "^0.21.4",
30-
"sequential-workflow-designer-angular": "^0.21.4",
29+
"sequential-workflow-designer": "^0.22.0",
30+
"sequential-workflow-designer-angular": "^0.22.0",
3131
"tslib": "^2.3.0",
3232
"zone.js": "~0.14.6"
3333
},

‎demos/angular-app/yarn.lock

+8-8
Original file line numberDiff line numberDiff line change
@@ -6744,17 +6744,17 @@ send@0.18.0:
67446744
range-parser "~1.2.1"
67456745
statuses "2.0.1"
67466746

6747-
sequential-workflow-designer-angular@^0.21.4:
6748-
version "0.21.4"
6749-
resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.21.4.tgz#765782eaacbec2c64c403a27f372a4404ad7b5c2"
6750-
integrity sha512-xO3Nt8xNrHUWltxFFacruUIVHNzfb1YXmn6SVjMZ4c57G2N88jffXj2RAJ8rV1UxCoWLrI+oUr1LpsPjH500XQ==
6747+
sequential-workflow-designer-angular@^0.22.0:
6748+
version "0.22.0"
6749+
resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.22.0.tgz#41cd251e489d6a8a76ba45a0ffc2e22737158176"
6750+
integrity sha512-LtsYACS/3ozos8Z4QbCwufVXmX0SegSH+1j6sEKk16BGbwGb4oG2y+mB4qJW1I4SoR7Xe9U3Zl/YNrZQ/tMBgw==
67516751
dependencies:
67526752
tslib "^2.3.0"
67536753

6754-
sequential-workflow-designer@^0.21.4:
6755-
version "0.21.4"
6756-
resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.21.4.tgz#33e531d6b23803a87c6c080cb41bce2f610f3ea6"
6757-
integrity sha512-rGEOE0DOuhEvNt9EdY5FRtc78YladyBZIO22GcRTvwibDD6uEiisz+OUpJwbgrRwGc07Xok5lDBo/Y8+8entMg==
6754+
sequential-workflow-designer@^0.22.0:
6755+
version "0.22.0"
6756+
resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.22.0.tgz#21ad20dcc69c7bfec99079035c9f2d2133f307c9"
6757+
integrity sha512-cnIhcZlbZTvZPR7WEeZWRgqsfMoe2NXCrl8asZQ/pRDtvaE/hs/c0h3Knm9a4nsx/lZfzAOF5FJ6NgNO3jEUyQ==
67586758
dependencies:
67596759
sequential-workflow-model "^0.2.0"
67606760

‎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.21.4",
10-
"sequential-workflow-designer-react": "^0.21.4"
9+
"sequential-workflow-designer": "^0.22.0",
10+
"sequential-workflow-designer-react": "^0.22.0"
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.21.4",
20-
"sequential-workflow-designer-svelte": "^0.21.4"
19+
"sequential-workflow-designer": "^0.22.0",
20+
"sequential-workflow-designer-svelte": "^0.22.0"
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.21.4",
4+
"version": "0.22.0",
55
"type": "module",
66
"main": "./lib/esm/index.js",
77
"types": "./lib/index.d.ts",

‎designer/src/behaviors/default-dragged-component.ts

+4-3
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,16 @@ export class DefaultDraggedComponent implements DraggedComponent {
1313

1414
parent.appendChild(canvas);
1515

16-
const fakeStepContext: StepContext = {
16+
const previewStepContext: StepContext = {
1717
parentSequence: [],
1818
step,
1919
depth: 0,
2020
position: 0,
2121
isInputConnected: true,
22-
isOutputConnected: true
22+
isOutputConnected: true,
23+
isPreview: true
2324
};
24-
const stepComponent = componentContext.stepComponentFactory.create(canvas, fakeStepContext, componentContext);
25+
const stepComponent = componentContext.stepComponentFactory.create(canvas, previewStepContext, componentContext);
2526

2627
Dom.attrs(canvas, {
2728
width: stepComponent.view.width + SAFE_OFFSET * 2,

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

+43-2
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,57 @@
1+
import { BranchedStep } from 'sequential-workflow-model';
12
import { createComponentContextStub, createStepStub } from '../test-tools/stubs';
23
import { DragStepView } from './drag-step-behavior-view';
34

45
describe('DragStepView', () => {
5-
it('creates view', () => {
6-
const appendChildSpy = spyOn(document.body, 'appendChild').and.stub();
6+
let appendChildSpy: jasmine.Spy;
7+
let removeChildSpy: jasmine.Spy;
8+
9+
beforeEach(() => {
10+
appendChildSpy = spyOn(document.body, 'appendChild').and.callThrough();
11+
removeChildSpy = spyOn(document.body, 'removeChild').and.callThrough();
12+
});
713

14+
it('creates view', () => {
815
const step = createStepStub();
916
const componentContext = createComponentContextStub();
1017

1118
const component = DragStepView.create(step, 'light', componentContext);
1219

1320
expect(component).toBeDefined();
1421
expect(appendChildSpy).toHaveBeenCalled();
22+
expect(document.body.getElementsByClassName('sqd-drag').length).toBe(1);
23+
24+
component.remove();
25+
26+
expect(removeChildSpy).toHaveBeenCalled();
27+
expect(document.body.getElementsByClassName('sqd-drag').length).toBe(0);
28+
});
29+
30+
it('does not create any placeholder', () => {
31+
const step: BranchedStep = {
32+
id: 'f00',
33+
componentType: 'switch', // This component should have at least 2 placeholders if it is not rendered as a preview.
34+
name: 'Foo',
35+
properties: {},
36+
branches: {
37+
true: [],
38+
false: []
39+
},
40+
type: 'foo'
41+
};
42+
const componentContext = createComponentContextStub();
43+
const createForGapSpy = spyOn(componentContext.services.placeholder, 'createForGap').and.callThrough();
44+
const createForAreaSpy = spyOn(componentContext.services.placeholder, 'createForArea').and.callThrough();
45+
46+
const component = DragStepView.create(step, 'light', componentContext);
47+
48+
expect(component).toBeDefined();
49+
expect(appendChildSpy).toHaveBeenCalled();
50+
expect(createForGapSpy).not.toHaveBeenCalled();
51+
expect(createForAreaSpy).not.toHaveBeenCalled();
52+
53+
component.remove();
54+
55+
expect(removeChildSpy).toHaveBeenCalled();
1556
});
1657
});

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

+26-3
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,23 @@
11
import { Vector } from '../core/vector';
22
import { Step } from '../definition';
33
import { DesignerContext } from '../designer-context';
4-
import { Placeholder } from '../workspace/component';
4+
import { FoundPlaceholders, Placeholder } from '../workspace/component';
55
import { Behavior } from './behavior';
66
import { DragStepView } from './drag-step-behavior-view';
77
import { PlaceholderFinder } from './placeholder-finder';
88
import { DesignerState } from '../designer-state';
99
import { StateModifier } from '../modifier/state-modifier';
1010
import { WorkspaceController } from '../workspace/workspace-controller';
1111
import { StepComponent } from '../workspace/step-component';
12+
import { PlaceholderController } from '../designer-extension';
1213

1314
export class DragStepBehavior implements Behavior {
1415
public static create(designerContext: DesignerContext, step: Step, draggedStepComponent?: StepComponent): DragStepBehavior {
1516
const view = DragStepView.create(step, designerContext.theme, designerContext.componentContext);
1617
return new DragStepBehavior(
1718
view,
1819
designerContext.workspaceController,
20+
designerContext.placeholderController,
1921
designerContext.state,
2022
step,
2123
designerContext.stateModifier,
@@ -27,12 +29,13 @@ export class DragStepBehavior implements Behavior {
2729
finder: PlaceholderFinder;
2830
startPosition: Vector;
2931
offset: Vector;
30-
};
32+
} & FoundPlaceholders;
3133
private currentPlaceholder?: Placeholder;
3234

3335
private constructor(
3436
private readonly view: DragStepView,
3537
private readonly workspaceController: WorkspaceController,
38+
private readonly placeholderController: PlaceholderController,
3639
private readonly designerState: DesignerState,
3740
private readonly step: Step,
3841
private readonly stateModifier: StateModifier,
@@ -44,6 +47,7 @@ export class DragStepBehavior implements Behavior {
4447

4548
if (this.draggedStepComponent) {
4649
this.draggedStepComponent.setIsDisabled(true);
50+
this.draggedStepComponent.setIsDragging(true);
4751

4852
const hasSameSize =
4953
this.draggedStepComponent.view.width === this.view.component.width &&
@@ -62,12 +66,17 @@ export class DragStepBehavior implements Behavior {
6266
this.view.setPosition(position.subtract(offset));
6367
this.designerState.setIsDragging(true);
6468

65-
const placeholders = this.workspaceController.getPlaceholders();
69+
const { placeholders, components } = this.resolvePlaceholders(this.draggedStepComponent);
6670
this.state = {
71+
placeholders,
72+
components,
6773
startPosition: position,
6874
finder: PlaceholderFinder.create(placeholders, this.designerState),
6975
offset
7076
};
77+
78+
placeholders.forEach(placeholder => placeholder.setIsVisible(true));
79+
components.forEach(component => component.setIsDragging(true));
7180
}
7281

7382
public onMove(delta: Vector) {
@@ -94,6 +103,8 @@ export class DragStepBehavior implements Behavior {
94103
throw new Error('Invalid state');
95104
}
96105

106+
this.state.placeholders.forEach(placeholder => placeholder.setIsVisible(false));
107+
this.state.components.forEach(component => component.setIsDragging(false));
97108
this.state.finder.destroy();
98109
this.state = undefined;
99110

@@ -117,11 +128,23 @@ export class DragStepBehavior implements Behavior {
117128
if (!modified) {
118129
if (this.draggedStepComponent) {
119130
this.draggedStepComponent.setIsDisabled(false);
131+
this.draggedStepComponent.setIsDragging(false);
120132
}
121133
if (this.currentPlaceholder) {
122134
this.currentPlaceholder.setIsHover(false);
123135
}
124136
}
125137
this.currentPlaceholder = undefined;
126138
}
139+
140+
private resolvePlaceholders(skipComponent: StepComponent | undefined): FoundPlaceholders {
141+
const result = this.workspaceController.resolvePlaceholders(skipComponent);
142+
if (this.placeholderController.canShow) {
143+
const canShow = this.placeholderController.canShow;
144+
result.placeholders = result.placeholders.filter(placeholder =>
145+
canShow(placeholder.parentSequence, placeholder.index, this.step.componentType, this.step.type)
146+
);
147+
}
148+
return result;
149+
}
127150
}

‎designer/src/component-context.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,12 @@ export class ComponentContext {
1515
stepExtensionResolver: StepExtensionResolver,
1616
definitionWalker: DefinitionWalker,
1717
preferenceStorage: PreferenceStorage,
18+
placeholderController: PlaceholderController,
1819
i18n: I18n,
1920
services: Services
2021
): ComponentContext {
2122
const validator = new DefinitionValidator(configuration.validator, state);
2223
const iconProvider = new IconProvider(configuration.steps);
23-
const placeholderController = services.placeholderController.create();
2424
const stepComponentFactory = new StepComponentFactory(stepExtensionResolver);
2525
return new ComponentContext(
2626
validator,

‎designer/src/designer-context.ts

+5
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { Services } from './services';
1212
import { StepExtensionResolver } from './workspace/step-extension-resolver';
1313
import { WorkspaceController, WorkspaceControllerWrapper } from './workspace/workspace-controller';
1414
import { MemoryPreferenceStorage } from './core/memory-preference-storage';
15+
import { PlaceholderController } from './designer-extension';
1516

1617
export class DesignerContext {
1718
public static create(
@@ -31,6 +32,7 @@ export class DesignerContext {
3132
const theme = configuration.theme || 'light';
3233
const state = new DesignerState(definition, isReadonly, isToolboxCollapsed, isEditorCollapsed);
3334
const workspaceController = new WorkspaceControllerWrapper();
35+
const placeholderController = services.placeholderController.create();
3436
const behaviorController = new BehaviorController();
3537
const stepExtensionResolver = StepExtensionResolver.create(services);
3638
const definitionWalker = configuration.definitionWalker ?? new DefinitionWalker();
@@ -50,6 +52,7 @@ export class DesignerContext {
5052
stepExtensionResolver,
5153
definitionWalker,
5254
preferenceStorage,
55+
placeholderController,
5356
i18n,
5457
services
5558
);
@@ -65,6 +68,7 @@ export class DesignerContext {
6568
stateModifier,
6669
layoutController,
6770
workspaceController,
71+
placeholderController,
6872
behaviorController,
6973
customActionController,
7074
historyController
@@ -82,6 +86,7 @@ export class DesignerContext {
8286
public readonly stateModifier: StateModifier,
8387
public readonly layoutController: LayoutController,
8488
public readonly workspaceController: WorkspaceControllerWrapper,
89+
public readonly placeholderController: PlaceholderController,
8590
public readonly behaviorController: BehaviorController,
8691
public readonly customActionController: CustomActionController,
8792
public readonly historyController: HistoryController | undefined

‎designer/src/designer-extension.ts

+3
Original file line numberDiff line numberDiff line change
@@ -71,13 +71,15 @@ export interface StepContext<S extends Step = Step> {
7171
position: number;
7272
isInputConnected: boolean;
7373
isOutputConnected: boolean;
74+
isPreview: boolean;
7475
}
7576

7677
export interface SequenceContext {
7778
sequence: Sequence;
7879
depth: number;
7980
isInputConnected: boolean;
8081
isOutputConnected: boolean;
82+
isPreview: boolean;
8183
}
8284

8385
export interface StepComponentViewWrapperExtension {
@@ -183,6 +185,7 @@ export interface PlaceholderControllerExtension {
183185

184186
export interface PlaceholderController {
185187
canCreate(sequence: Sequence, index: number): boolean;
188+
canShow?: (sequence: Sequence, index: number, draggingStepComponentType: ComponentType, draggingStepType: string) => boolean;
186189
}
187190

188191
// PlaceholderExtension

0 commit comments

Comments
 (0)