Skip to content

Commit 6d70154

Browse files
b4rtazb4rtaz
authored
0.24.7. (#168)
1 parent ca02ee7 commit 6d70154

21 files changed

+118
-52
lines changed

‎CHANGELOG.md

+4
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
# 0.24.7
2+
3+
This version introduces the ability to adjust the appearance of the start-stop root component.
4+
15
# 0.24.6
26

37
Fixed a bug where the designer remained in an invalid state when rendered inside a placeholder with a width or height of 0px.

‎README.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -103,10 +103,10 @@ Add the below code to your head section in HTML document.
103103
```html
104104
<head>
105105
...
106-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.6/css/designer.css" rel="stylesheet">
107-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.6/css/designer-light.css" rel="stylesheet">
108-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.6/css/designer-dark.css" rel="stylesheet">
109-
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.6/dist/index.umd.js"></script>
106+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.7/css/designer.css" rel="stylesheet">
107+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.7/css/designer-light.css" rel="stylesheet">
108+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.7/css/designer-dark.css" rel="stylesheet">
109+
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.7/dist/index.umd.js"></script>
110110
```
111111

112112
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.24.6",
4+
"version": "0.24.7",
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.24.6"
18+
"sequential-workflow-designer": "^0.24.7"
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.24.6",
30-
"sequential-workflow-designer-angular": "^0.24.6",
29+
"sequential-workflow-designer": "^0.24.7",
30+
"sequential-workflow-designer-angular": "^0.24.7",
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.24.6:
6748-
version "0.24.6"
6749-
resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.24.6.tgz#342e7b3aa75b5bd021ddd3fa8b7271001f2b14ac"
6750-
integrity sha512-USyB8FXHEIZ6IXBzHe31jPovMtfqjHCsAhOeWQ6qAZCjVVRe1ymCIdAoixVK7TvKONursMqlcGoQ2O+iAdMABw==
6747+
sequential-workflow-designer-angular@^0.24.7:
6748+
version "0.24.7"
6749+
resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.24.7.tgz#0cbfc6b6844719e9bd62d6ab54a29893c0411f5d"
6750+
integrity sha512-xCDLflTlY2XivxLxQejub6/ozG9nlaaT48FrjPVYCJBgmXjC+7HUegCDK5bO+oBhBV5QdouSQN1zFhP1TP0+iw==
67516751
dependencies:
67526752
tslib "^2.3.0"
67536753

6754-
sequential-workflow-designer@^0.24.6:
6755-
version "0.24.6"
6756-
resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.24.6.tgz#0be6112837177db19c2e5e69e15e5a827243097d"
6757-
integrity sha512-zjv60NrWKYZY8ZiL+PAG3DZK3lJX/cjBkgQ/IYElsk2rwHl6+srOFWSRKx2cEfHHNueTovNQLFVsFIWRvAtVNg==
6754+
sequential-workflow-designer@^0.24.7:
6755+
version "0.24.7"
6756+
resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.24.7.tgz#865f03fcfc547acbaa7e7daebaeca3ca77e91e5f"
6757+
integrity sha512-mwsNK4jDHv1GBQnN13gr8mbK4cHAd66Q5PX4TlQOt9ky20osiF1+TOxpwJtfRSFXO8o4KO944YUVe2IPYY6xnA==
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.24.6",
10-
"sequential-workflow-designer-react": "^0.24.6"
9+
"sequential-workflow-designer": "^0.24.7",
10+
"sequential-workflow-designer-react": "^0.24.7"
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.24.6",
20-
"sequential-workflow-designer-svelte": "^0.24.6"
19+
"sequential-workflow-designer": "^0.24.7",
20+
"sequential-workflow-designer-svelte": "^0.24.7"
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.24.6",
4+
"version": "0.24.7",
55
"type": "module",
66
"main": "./lib/esm/index.js",
77
"types": "./lib/index.d.ts",

‎designer/src/services.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,7 @@ function setDefaults(services: Partial<Services>, configuration: DesignerConfigu
135135
services.grid = LineGridExtension.create();
136136
}
137137
if (!services.rootComponent) {
138-
services.rootComponent = new StartStopRootComponentExtension();
138+
services.rootComponent = StartStopRootComponentExtension.create();
139139
}
140140
if (!services.sequenceComponent) {
141141
services.sequenceComponent = new DefaultSequenceComponentExtension();

‎designer/src/workspace/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
export * from './badges';
22
export * from './common-views';
33
export * from './sequence';
4+
export * from './start-stop-root';
45
export * from './container-step';
56
export * from './grid';
67
export * from './switch-step';

‎designer/src/workspace/start-stop-root/index.ts

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export * from './start-stop-root-component-extension-configuration';
2+
export * from './start-stop-root-component-view-configuration';
3+
export * from './start-stop-root-component-extension';

‎designer/src/workspace/start-stop-root/start-stop-root-component-extension-configuration.ts

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { StartStopRootComponentViewConfiguration } from './start-stop-root-component-view-configuration';
2+
3+
export interface StartStopRootComponentExtensionConfiguration {
4+
view: StartStopRootComponentViewConfiguration;
5+
}

‎designer/src/workspace/start-stop-root/start-stop-root-component-extension.ts

+31-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,35 @@
1-
import { RootComponentExtension } from '../../designer-extension';
1+
import { Sequence } from 'sequential-workflow-model';
2+
import { ComponentContext } from '../../component-context';
3+
import { Icons } from '../../core';
4+
import { RootComponentExtension, SequencePlaceIndicator } from '../../designer-extension';
25
import { StartStopRootComponent } from './start-stop-root-component';
6+
import { StartStopRootComponentExtensionConfiguration } from './start-stop-root-component-extension-configuration';
7+
import { Component } from '../component';
8+
9+
const defaultConfiguration: StartStopRootComponentExtensionConfiguration = {
10+
view: {
11+
size: 30,
12+
defaultIconSize: 22,
13+
folderIconSize: 18,
14+
startIconD: Icons.play,
15+
stopIconD: Icons.stop,
16+
folderIconD: Icons.folder
17+
}
18+
};
319

420
export class StartStopRootComponentExtension implements RootComponentExtension {
5-
public readonly create = StartStopRootComponent.create;
21+
public static create(configuration?: StartStopRootComponentExtensionConfiguration) {
22+
return new StartStopRootComponentExtension(configuration ?? defaultConfiguration);
23+
}
24+
25+
private constructor(private readonly configuration: StartStopRootComponentExtensionConfiguration) {}
26+
27+
public create(
28+
parentElement: SVGElement,
29+
sequence: Sequence,
30+
parentPlaceIndicator: SequencePlaceIndicator | null,
31+
context: ComponentContext
32+
): Component {
33+
return StartStopRootComponent.create(parentElement, sequence, parentPlaceIndicator, context, this.configuration.view);
34+
}
635
}

‎designer/src/workspace/start-stop-root/start-stop-root-component-view-configuration.ts

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export interface StartStopRootComponentViewConfiguration {
2+
size: number;
3+
defaultIconSize: number;
4+
folderIconSize: number;
5+
folderIconD: string;
6+
startIconD: string;
7+
stopIconD: string;
8+
}

‎designer/src/workspace/start-stop-root/start-stop-root-component-view.spec.ts

+9-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { Icons } from '../../core';
12
import { Dom } from '../../core/dom';
23
import { createComponentContextStub } from '../../test-tools/stubs';
34
import { StartStopRootComponentView } from './start-stop-root-component-view';
@@ -6,7 +7,14 @@ describe('StartStopRootComponentView', () => {
67
it('create() creates view', () => {
78
const parent = Dom.svg('svg');
89
const componentContext = createComponentContextStub();
9-
StartStopRootComponentView.create(parent, [], null, componentContext);
10+
StartStopRootComponentView.create(parent, [], null, componentContext, {
11+
size: 30,
12+
defaultIconSize: 22,
13+
folderIconSize: 22,
14+
folderIconD: Icons.folder,
15+
startIconD: Icons.play,
16+
stopIconD: Icons.stop
17+
});
1018
expect(parent.children.length).not.toEqual(0);
1119
});
1220
});

‎designer/src/workspace/start-stop-root/start-stop-root-component-view.ts

+15-17
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,15 @@ import { ComponentContext } from '../../component-context';
66
import { DefaultSequenceComponent } from '../sequence/default-sequence-component';
77
import { SequencePlaceIndicator } from '../../designer-extension';
88
import { Badges } from '../badges/badges';
9-
10-
const SIZE = 30;
11-
const DEFAULT_ICON_SIZE = 22;
12-
const FOLDER_ICON_SIZE = 18;
9+
import { StartStopRootComponentViewConfiguration } from './start-stop-root-component-view-configuration';
1310

1411
export class StartStopRootComponentView implements ComponentView {
1512
public static create(
1613
parent: SVGElement,
1714
sequence: Sequence,
1815
parentPlaceIndicator: SequencePlaceIndicator | null,
19-
context: ComponentContext
16+
context: ComponentContext,
17+
cfg: StartStopRootComponentViewConfiguration
2018
): StartStopRootComponentView {
2119
const g = Dom.svg('g', {
2220
class: 'sqd-root-start-stop'
@@ -36,24 +34,24 @@ export class StartStopRootComponentView implements ComponentView {
3634
);
3735
const view = sequenceComponent.view;
3836

39-
const x = view.joinX - SIZE / 2;
40-
const endY = SIZE + view.height;
37+
const x = view.joinX - cfg.size / 2;
38+
const endY = cfg.size + view.height;
4139

42-
const iconSize = parentPlaceIndicator ? FOLDER_ICON_SIZE : DEFAULT_ICON_SIZE;
43-
const startCircle = createCircle(parentPlaceIndicator ? Icons.folder : Icons.play, iconSize);
40+
const iconSize = parentPlaceIndicator ? cfg.folderIconSize : cfg.defaultIconSize;
41+
const startCircle = createCircle(parentPlaceIndicator ? cfg.folderIconD : cfg.startIconD, cfg.size, iconSize);
4442
Dom.translate(startCircle, x, 0);
4543
g.appendChild(startCircle);
4644

47-
Dom.translate(view.g, 0, SIZE);
45+
Dom.translate(view.g, 0, cfg.size);
4846

49-
const endCircle = createCircle(parentPlaceIndicator ? Icons.folder : Icons.stop, iconSize);
47+
const endCircle = createCircle(parentPlaceIndicator ? cfg.folderIconD : cfg.stopIconD, cfg.size, iconSize);
5048
Dom.translate(endCircle, x, endY);
5149
g.appendChild(endCircle);
5250

5351
let startPlaceholder: Placeholder | null = null;
5452
let endPlaceholder: Placeholder | null = null;
5553
if (parentPlaceIndicator) {
56-
const size = new Vector(SIZE, SIZE);
54+
const size = new Vector(cfg.size, cfg.size);
5755
startPlaceholder = context.services.placeholder.createForArea(
5856
g,
5957
size,
@@ -73,12 +71,12 @@ export class StartStopRootComponentView implements ComponentView {
7371
Dom.translate(endPlaceholder.view.g, x, endY);
7472
}
7573

76-
const badges = Badges.createForRoot(g, new Vector(x + SIZE, 0), context);
74+
const badges = Badges.createForRoot(g, new Vector(x + cfg.size, 0), context);
7775

7876
return new StartStopRootComponentView(
7977
g,
8078
view.width,
81-
view.height + SIZE * 2,
79+
view.height + cfg.size * 2,
8280
view.joinX,
8381
sequenceComponent,
8482
startPlaceholder,
@@ -103,8 +101,8 @@ export class StartStopRootComponentView implements ComponentView {
103101
}
104102
}
105103

106-
function createCircle(d: string, iconSize: number): SVGGElement {
107-
const r = SIZE / 2;
104+
function createCircle(d: string, size: number, iconSize: number): SVGGElement {
105+
const r = size / 2;
108106
const circle = Dom.svg('circle', {
109107
class: 'sqd-root-start-stop-circle',
110108
cx: r,
@@ -115,7 +113,7 @@ function createCircle(d: string, iconSize: number): SVGGElement {
115113
const g = Dom.svg('g');
116114
g.appendChild(circle);
117115

118-
const offset = (SIZE - iconSize) / 2;
116+
const offset = (size - iconSize) / 2;
119117
const icon = Icons.appendPath(g, 'sqd-root-start-stop-icon', d, iconSize);
120118
Dom.translate(icon, offset, offset);
121119
return g;

‎designer/src/workspace/start-stop-root/start-stop-root-component.spec.ts

+9-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { Icons } from '../../core';
12
import { Dom } from '../../core/dom';
23
import { createComponentContextStub } from '../../test-tools/stubs';
34
import { StartStopRootComponent } from './start-stop-root-component';
@@ -6,7 +7,14 @@ describe('StartStopRootComponent', () => {
67
it('create() creates component', () => {
78
const parent = Dom.svg('svg');
89
const componentContext = createComponentContextStub();
9-
const component = StartStopRootComponent.create(parent, [], null, componentContext);
10+
const component = StartStopRootComponent.create(parent, [], null, componentContext, {
11+
size: 30,
12+
defaultIconSize: 22,
13+
folderIconSize: 22,
14+
folderIconD: Icons.folder,
15+
startIconD: Icons.play,
16+
stopIconD: Icons.stop
17+
});
1018

1119
expect(component).toBeDefined();
1220
});

‎designer/src/workspace/start-stop-root/start-stop-root-component.ts

+4-2
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,17 @@ import { ComponentContext } from '../../component-context';
44
import { StartStopRootComponentView } from './start-stop-root-component-view';
55
import { SequencePlaceIndicator } from '../../designer-extension';
66
import { StepComponent } from '../step-component';
7+
import { StartStopRootComponentViewConfiguration } from './start-stop-root-component-view-configuration';
78

89
export class StartStopRootComponent implements Component {
910
public static create(
1011
parentElement: SVGElement,
1112
sequence: Sequence,
1213
parentPlaceIndicator: SequencePlaceIndicator | null,
13-
context: ComponentContext
14+
context: ComponentContext,
15+
viewConfiguration: StartStopRootComponentViewConfiguration
1416
): StartStopRootComponent {
15-
const view = StartStopRootComponentView.create(parentElement, sequence, parentPlaceIndicator, context);
17+
const view = StartStopRootComponentView.create(parentElement, sequence, parentPlaceIndicator, context, viewConfiguration);
1618
return new StartStopRootComponent(view);
1719
}
1820

‎examples/assets/lib.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ function embedStylesheet(url) {
1313
document.write(`<link href="${url}" rel="stylesheet">`);
1414
}
1515

16-
const baseUrl = isTestEnv() ? '../designer' : '//cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.6';
16+
const baseUrl = isTestEnv() ? '../designer' : '//cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.7';
1717

1818
embedScript(`${baseUrl}/dist/index.umd.js`);
1919
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.24.6",
4+
"version": "0.24.7",
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.24.6"
50+
"sequential-workflow-designer": "^0.24.7"
5151
},
5252
"devDependencies": {
5353
"@rollup/plugin-node-resolve": "^15.0.1",
@@ -63,7 +63,7 @@
6363
"prettier": "^3.2.5",
6464
"react": "^18.2.0",
6565
"react-dom": "^18.2.0",
66-
"sequential-workflow-designer": "^0.24.6",
66+
"sequential-workflow-designer": "^0.24.7",
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.24.6",
4+
"version": "0.24.7",
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.24.6"
31+
"sequential-workflow-designer": "^0.24.7"
3232
},
3333
"devDependencies": {
34-
"sequential-workflow-designer": "^0.24.6",
34+
"sequential-workflow-designer": "^0.24.7",
3535
"@sveltejs/adapter-static": "^2.0.3",
3636
"@sveltejs/kit": "^1.20.4",
3737
"@sveltejs/package": "^2.0.0",

0 commit comments

Comments
 (0)