Skip to content

Commit 7a628af

Browse files
b4rtazb4rtaz
authored
0.9.1. (#29)
1 parent 1276c52 commit 7a628af

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+418
-200
lines changed

‎CHANGELOG.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
1+
## 0.9.1
2+
3+
Fixed the bug with displaying nested placeholders in folders.
4+
15
## 0.9.0
26

37
#### Breaking Changes
48

5-
This version changes the main configuration. The "isHidden" properties are depreciated now and will be removed. Also we added a possibility to hide the control bar. To hide the control bar or other UI component you need to set `false` in the corresponding configuration property.
9+
This version changes the main configuration. The "isHidden" properties are prohibited. Also we added a possibility to hide the control bar. To hide the control bar or other UI component you need to set `false` in the corresponding configuration property.
610

711
```js
812
const configuration = {

‎README.md

+8-5
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
[![Build Status](https://img.shields.io/endpoint.svg?url=https%3A%2F%2Factions-badge.atrox.dev%2Fb4rtaz%2Fsequential-workflow-designer%2Fbadge%3Fref%3Dmain&style=flat-square)](https://actions-badge.atrox.dev/b4rtaz/sequential-workflow-designer/goto?ref=main) [![License: MIT](https://img.shields.io/github/license/mashape/apistatus.svg?style=flat-square)](/LICENSE) [![View this project on NPM](https://img.shields.io/npm/v/sequential-workflow-designer.svg?style=flat-square)](https://npmjs.org/package/sequential-workflow-designer)
66

7-
Sequential workflow designer with 0 external dependencies for web. It's written in pure TypeScript and uses SVG for rendering. This designer is not associated with any workflow engine. It's full generic. You may create any kind application by this, from graphical programming languages to workflow designers.
7+
Sequential workflow designer with 0 external dependencies for web. It's written in pure TypeScript and uses SVG for rendering. This designer is not associated with any workflow engine. It's full generic. You may create any kind application by this, from graphical programming languages to workflow builders.
88

99
Features:
1010

@@ -39,7 +39,10 @@ Pro:
3939
* [👈 Goto](https://nocode-js.github.io/sequential-workflow-designer-pro-demo/demos/webpack-pro-app/public/goto.html)
4040
* [📁 Folders](https://nocode-js.github.io/sequential-workflow-designer-pro-demo/demos/webpack-pro-app/public/folders.html)
4141
* [⭕ Wheel Mode](https://nocode-js.github.io/sequential-workflow-designer-pro-demo/demos/webpack-pro-app/public/wheel-mode.html)
42+
* [🐭 Minimal Root Component](https://nocode-js.github.io/sequential-workflow-designer-pro-demo/demos/webpack-pro-app/public/minimal-root-component.html)
4243
* [🦁 External UI Components](https://nocode-js.github.io/sequential-workflow-designer-pro-demo/demos/webpack-pro-app/public/external-ui-components.html)
44+
* [👋 Custom Dragged Component](https://nocode-js.github.io/sequential-workflow-designer-pro-demo/demos/webpack-pro-app/public/custom-dragged-component.html)
45+
* [🎩 Custom View Port](https://nocode-js.github.io/sequential-workflow-designer-pro-demo/demos/webpack-pro-app/public/custom-view-port.html)
4346

4447
## 👩‍💻 Integrations
4548

@@ -83,10 +86,10 @@ Add the below code to your head section in HTML document.
8386
```html
8487
<head>
8588
...
86-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.9.0/css/designer.css" rel="stylesheet">
87-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.9.0/css/designer-light.css" rel="stylesheet">
88-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.9.0/css/designer-dark.css" rel="stylesheet">
89-
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.9.0/dist/index.umd.js"></script>
89+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.9.1/css/designer.css" rel="stylesheet">
90+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.9.1/css/designer-light.css" rel="stylesheet">
91+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.9.1/css/designer-dark.css" rel="stylesheet">
92+
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.9.1/dist/index.umd.js"></script>
9093
```
9194

9295
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.9.0",
4+
"version": "0.9.1",
55
"author": {
66
"name": "NoCode JS",
77
"url": "https://nocode-js.com/"
@@ -15,7 +15,7 @@
1515
"peerDependencies": {
1616
"@angular/common": "14 - 15",
1717
"@angular/core": "14 - 15",
18-
"sequential-workflow-designer": "^0.9.0"
18+
"sequential-workflow-designer": "^0.9.1"
1919
},
2020
"dependencies": {
2121
"tslib": "^2.3.0"

‎demos/angular-app/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@
2424
"@angular/platform-browser-dynamic": "^15.2.2",
2525
"@angular/router": "^15.2.2",
2626
"rxjs": "~7.8.0",
27-
"sequential-workflow-designer": "^0.9.0",
28-
"sequential-workflow-designer-angular": "^0.9.0",
27+
"sequential-workflow-designer": "^0.9.1",
28+
"sequential-workflow-designer-angular": "^0.9.1",
2929
"tslib": "^2.3.0",
3030
"zone.js": "~0.13.0"
3131
},

‎demos/angular-app/yarn.lock

+8-8
Original file line numberDiff line numberDiff line change
@@ -5180,17 +5180,17 @@ send@0.18.0:
51805180
range-parser "~1.2.1"
51815181
statuses "2.0.1"
51825182

5183-
sequential-workflow-designer-angular@^0.9.0:
5184-
version "0.9.0"
5185-
resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.9.0.tgz#d2bf7fbc69134eaab15f7d2d790aae026efa1f1a"
5186-
integrity sha512-hUUG49zyU5DPg0yY6cjCvGkbtNitEU8VQZE7WCyboZ4HoMHRxoJPNNu+/y/dpexlQUWtjRW4YFTJFpFqyAfY+A==
5183+
sequential-workflow-designer-angular@^0.9.1:
5184+
version "0.9.1"
5185+
resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.9.1.tgz#51ee1dd350a8f7e5fca1fe5f43388bcba841cd4c"
5186+
integrity sha512-OfqOMHqpfKIvCnWylq3+PTGvizyyspIlb67OcCUVgL3V4uRwvcI3gbHJqbCIvNPzcLuSay5MB6RjAy3SKVX3/Q==
51875187
dependencies:
51885188
tslib "^2.3.0"
51895189

5190-
sequential-workflow-designer@^0.9.0:
5191-
version "0.9.0"
5192-
resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.9.0.tgz#efe5d4d642272fa60727550705617a4d49afde78"
5193-
integrity sha512-wui9F+Har4ZGKulQ6rv07e1wIBrKPaKS12Bl2FcImQJUfOS9btIL3ZicMuS+FgmR4tEAeFRErSplYM5oISqiLg==
5190+
sequential-workflow-designer@^0.9.1:
5191+
version "0.9.1"
5192+
resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.9.1.tgz#c385e4f362d982ceadcb64ac0257656f9e2ed4c8"
5193+
integrity sha512-F5NbAqcvbIZSOXtPtpXUMN5J8Tw62Bp727IzK7JR8e8NZNH6sqKEd/RdNCypdjXQ6fXjxGSjSBPP1X6b9SGJkg==
51945194
dependencies:
51955195
sequential-workflow-model "^0.1.1"
51965196

‎demos/react-app/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
"dependencies": {
66
"react": "^18.2.0",
77
"react-dom": "^18.2.0",
8-
"sequential-workflow-designer": "^0.9.0",
9-
"sequential-workflow-designer-react": "^0.9.0"
8+
"sequential-workflow-designer": "^0.9.1",
9+
"sequential-workflow-designer-react": "^0.9.1"
1010
},
1111
"devDependencies": {
1212
"@types/jest": "^29.2.5",

‎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.9.0",
4+
"version": "0.9.1",
55
"type": "module",
66
"main": "./lib/esm/index.js",
77
"types": "./lib/index.d.ts",

‎designer/src/api/control-bar-api.ts

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import { DefinitionModifier } from '../definition-modifier';
22
import { DesignerState } from '../designer-state';
33
import { HistoryController } from '../history-controller';
4-
import { WorkspaceController } from '../workspace/workspace-controller';
4+
import { ViewPortApi } from './view-port-api';
55

66
export class ControlBarApi {
77
public constructor(
88
private readonly state: DesignerState,
9-
private readonly workspaceController: WorkspaceController,
109
private readonly historyController: HistoryController | undefined,
11-
private readonly definitionModifier: DefinitionModifier
10+
private readonly definitionModifier: DefinitionModifier,
11+
private readonly viewPortApi: ViewPortApi
1212
) {}
1313

1414
/**
@@ -26,15 +26,15 @@ export class ControlBarApi {
2626
}
2727

2828
public resetViewPort() {
29-
this.workspaceController.resetViewPort();
29+
this.viewPortApi.resetViewPort();
3030
}
3131

3232
public zoomIn() {
33-
this.workspaceController.zoom(true);
33+
this.viewPortApi.zoom(true);
3434
}
3535

3636
public zoomOut() {
37-
this.workspaceController.zoom(false);
37+
this.viewPortApi.zoom(false);
3838
}
3939

4040
public isDragDisabled(): boolean {

‎designer/src/api/designer-api.ts

+9-2
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,21 @@ import { ControlBarApi } from './control-bar-api';
33
import { EditorApi } from './editor-api';
44
import { PathBarApi } from './path-bar-api';
55
import { ToolboxApi } from './toolbox-api';
6+
import { ViewPortApi } from './view-port-api';
67
import { WorkspaceApi } from './workspace-api';
78

89
export class DesignerApi {
910
public static create(context: DesignerContext): DesignerApi {
11+
const workspaceApi = new WorkspaceApi(context.state, context.workspaceController);
12+
const viewPortController = context.services.viewPortController.create(workspaceApi);
13+
const viewPortApi = new ViewPortApi(context.workspaceController, viewPortController);
14+
1015
return new DesignerApi(
11-
new ControlBarApi(context.state, context.workspaceController, context.historyController, context.definitionModifier),
16+
new ControlBarApi(context.state, context.historyController, context.definitionModifier, viewPortApi),
1217
new ToolboxApi(context.state, context, context.behaviorController, context.layoutController, context.configuration.steps),
1318
new EditorApi(context.state, context.stepsTraverser, context.layoutController, context.definitionModifier),
14-
new WorkspaceApi(context.state, context.workspaceController),
19+
workspaceApi,
20+
viewPortApi,
1521
new PathBarApi(context.state, context.stepsTraverser)
1622
);
1723
}
@@ -21,6 +27,7 @@ export class DesignerApi {
2127
public readonly toolbox: ToolboxApi,
2228
public readonly editor: EditorApi,
2329
public readonly workspace: WorkspaceApi,
30+
public readonly viewPort: ViewPortApi,
2431
public readonly pathBar: PathBarApi
2532
) {}
2633
}

‎designer/src/api/view-port-api.ts

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { Vector } from '../core';
2+
import { ViewPortController } from '../designer-extension';
3+
import { WorkspaceControllerWrapper } from '../workspace/workspace-controller';
4+
5+
export class ViewPortApi {
6+
public constructor(
7+
private readonly workspaceController: WorkspaceControllerWrapper,
8+
private readonly viewPortController: ViewPortController
9+
) {}
10+
11+
public resetViewPort() {
12+
this.viewPortController.setDefault();
13+
}
14+
15+
public zoom(direction: boolean) {
16+
this.viewPortController.zoom(direction);
17+
}
18+
19+
public moveViewPortToStep(stepId: string) {
20+
const component = this.workspaceController.getComponentByStepId(stepId);
21+
const componentPosition = component.view.getClientPosition();
22+
const componentSize = new Vector(component.view.width, component.view.height);
23+
this.viewPortController.focusOnComponent(componentPosition, componentSize);
24+
}
25+
}

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

+12-3
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,21 @@
11
import { Vector } from '../core';
2-
import { DesignerState, ViewPort } from '../designer-state';
2+
import { ViewPort } from '../designer-extension';
3+
import { DesignerState } from '../designer-state';
34
import { WorkspaceControllerWrapper } from '../workspace/workspace-controller';
45

56
export class WorkspaceApi {
67
public constructor(private readonly state: DesignerState, private readonly workspaceController: WorkspaceControllerWrapper) {}
78

8-
public getClientPosition(): Vector {
9-
return this.workspaceController.getClientPosition();
9+
public getCanvasPosition(): Vector {
10+
return this.workspaceController.getCanvasPosition();
11+
}
12+
13+
public getCanvasSize(): Vector {
14+
return this.workspaceController.getCanvasSize();
15+
}
16+
17+
public getRootComponentSize(): Vector {
18+
return this.workspaceController.getRootComponentSize();
1019
}
1120

1221
public getViewPort(): ViewPort {

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

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { DraggedComponentExtension } from '../designer-extension';
2+
import { DefaultDraggedComponent } from './default-dragged-component';
3+
4+
export class DefaultDraggedComponentExtension implements DraggedComponentExtension {
5+
public readonly create = DefaultDraggedComponent.create;
6+
}

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

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { Step } from 'sequential-workflow-model';
2+
import { ComponentContext } from '../component-context';
3+
import { Dom } from '../core';
4+
import { DraggedComponent, StepContext } from '../designer-extension';
5+
6+
const SAFE_OFFSET = 10;
7+
8+
export class DefaultDraggedComponent implements DraggedComponent {
9+
public static create(parent: HTMLElement, step: Step, componentContext: ComponentContext): DefaultDraggedComponent {
10+
const canvas = Dom.svg('svg');
11+
canvas.style.marginLeft = -SAFE_OFFSET + 'px';
12+
canvas.style.marginTop = -SAFE_OFFSET + 'px';
13+
14+
parent.appendChild(canvas);
15+
16+
const fakeStepContext: StepContext = {
17+
parentSequence: [],
18+
step,
19+
depth: 0,
20+
position: 0,
21+
isInputConnected: true,
22+
isOutputConnected: true
23+
};
24+
const stepComponent = componentContext.stepComponentFactory.create(canvas, fakeStepContext, componentContext);
25+
26+
Dom.attrs(canvas, {
27+
width: stepComponent.view.width + SAFE_OFFSET * 2,
28+
height: stepComponent.view.height + SAFE_OFFSET * 2
29+
});
30+
31+
Dom.translate(stepComponent.view.g, SAFE_OFFSET, SAFE_OFFSET);
32+
return new DefaultDraggedComponent(stepComponent.view.width, stepComponent.view.height);
33+
}
34+
35+
private constructor(public readonly width: number, public readonly height: number) {}
36+
37+
public destroy() {
38+
// Nothing to destroy...
39+
}
40+
}

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

+7-26
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,7 @@ import { Vector } from '../core/vector';
33
import { Step } from '../definition';
44
import { DesignerConfiguration } from '../designer-configuration';
55
import { ComponentContext } from '../component-context';
6-
import { StepContext } from '../designer-extension';
7-
8-
const SAFE_OFFSET = 10;
6+
import { DraggedComponent } from '../designer-extension';
97

108
export class DragStepView {
119
public static create(step: Step, configuration: DesignerConfiguration, componentContext: ComponentContext): DragStepView {
@@ -15,37 +13,20 @@ export class DragStepView {
1513
});
1614
document.body.appendChild(layer);
1715

18-
const canvas = Dom.svg('svg');
19-
layer.appendChild(canvas);
20-
21-
const fakeStepContext: StepContext = {
22-
parentSequence: [],
23-
step,
24-
depth: 0,
25-
position: 0,
26-
isInputConnected: true,
27-
isOutputConnected: true
28-
};
29-
const stepComponent = componentContext.stepComponentFactory.create(canvas, fakeStepContext, componentContext);
30-
31-
Dom.attrs(canvas, {
32-
width: stepComponent.view.width + SAFE_OFFSET * 2,
33-
height: stepComponent.view.height + SAFE_OFFSET * 2
34-
});
35-
36-
Dom.translate(stepComponent.view.g, SAFE_OFFSET, SAFE_OFFSET);
16+
const component = componentContext.services.draggedComponent.create(layer, step, componentContext);
3717

38-
return new DragStepView(stepComponent.view.width, stepComponent.view.height, layer);
18+
return new DragStepView(component, layer);
3919
}
4020

41-
private constructor(public readonly width: number, public readonly height: number, private readonly layer: HTMLElement) {}
21+
private constructor(public readonly component: DraggedComponent, private readonly layer: HTMLElement) {}
4222

4323
public setPosition(position: Vector) {
44-
this.layer.style.top = position.y - SAFE_OFFSET + 'px';
45-
this.layer.style.left = position.x - SAFE_OFFSET + 'px';
24+
this.layer.style.top = position.y + 'px';
25+
this.layer.style.left = position.x + 'px';
4626
}
4727

4828
public remove() {
29+
this.component.destroy();
4930
document.body.removeChild(this.layer);
5031
}
5132
}

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

+17-7
Original file line numberDiff line numberDiff line change
@@ -39,22 +39,32 @@ export class DragStepBehavior implements Behavior {
3939
) {}
4040

4141
public onStart(position: Vector) {
42-
let offset: Vector;
42+
let offset: Vector | null = null;
43+
4344
if (this.draggedStepComponent) {
4445
this.draggedStepComponent.setIsDisabled(true);
4546

46-
const clientPosition = this.draggedStepComponent.view.getClientPosition();
47-
offset = position.subtract(clientPosition);
48-
} else {
49-
offset = new Vector(this.view.width / 2, this.view.height / 2);
47+
const hasSameSize =
48+
this.draggedStepComponent.view.width === this.view.component.width &&
49+
this.draggedStepComponent.view.height === this.view.component.height;
50+
if (hasSameSize) {
51+
// Mouse cursor will be positioned on the same place as the source component.
52+
const clientPosition = this.draggedStepComponent.view.getClientPosition();
53+
offset = position.subtract(clientPosition);
54+
}
55+
}
56+
if (!offset) {
57+
// Mouse cursor will be positioned in the center of the component.
58+
offset = new Vector(this.view.component.width, this.view.component.height).divideByScalar(2);
5059
}
5160

5261
this.view.setPosition(position.subtract(offset));
5362
this.designerState.setIsDragging(true);
5463

64+
const placeholders = this.workspaceController.getPlaceholders();
5565
this.state = {
5666
startPosition: position,
57-
finder: PlaceholderFinder.create(this.workspaceController.getPlaceholders(), this.designerState),
67+
finder: PlaceholderFinder.create(placeholders, this.designerState),
5868
offset
5969
};
6070
}
@@ -64,7 +74,7 @@ export class DragStepBehavior implements Behavior {
6474
const newPosition = this.state.startPosition.subtract(delta).subtract(this.state.offset);
6575
this.view.setPosition(newPosition);
6676

67-
const placeholder = this.state.finder.find(newPosition, this.view.width, this.view.height);
77+
const placeholder = this.state.finder.find(newPosition, this.view.component.width, this.view.component.height);
6878

6979
if (this.currentPlaceholder !== placeholder) {
7080
if (this.currentPlaceholder) {

0 commit comments

Comments
 (0)