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

Lines changed: 5 additions & 1 deletion
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

Lines changed: 8 additions & 5 deletions
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/[email protected].0/css/designer.css" rel="stylesheet">
87-
<link href="https://cdn.jsdelivr.net/npm/[email protected].0/css/designer-light.css" rel="stylesheet">
88-
<link href="https://cdn.jsdelivr.net/npm/[email protected].0/css/designer-dark.css" rel="stylesheet">
89-
<script src="https://cdn.jsdelivr.net/npm/[email protected].0/dist/index.umd.js"></script>
89+
<link href="https://cdn.jsdelivr.net/npm/[email protected].1/css/designer.css" rel="stylesheet">
90+
<link href="https://cdn.jsdelivr.net/npm/[email protected].1/css/designer-light.css" rel="stylesheet">
91+
<link href="https://cdn.jsdelivr.net/npm/[email protected].1/css/designer-dark.css" rel="stylesheet">
92+
<script src="https://cdn.jsdelivr.net/npm/[email protected].1/dist/index.umd.js"></script>
9093
```
9194

9295
Call the designer by:

‎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.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

Lines changed: 2 additions & 2 deletions
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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5180,17 +5180,17 @@ [email protected]:
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

Lines changed: 2 additions & 2 deletions
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

Lines changed: 1 addition & 1 deletion
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

Lines changed: 6 additions & 6 deletions
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

Lines changed: 9 additions & 2 deletions
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

Lines changed: 25 additions & 0 deletions
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+
}

0 commit comments

Comments
 (0)