Skip to content

Commit 30fa065

Browse files
b4rtazb4rtaz
authored
0.13.3. (#53)
1 parent e601031 commit 30fa065

31 files changed

+358
-103
lines changed

‎CHANGELOG.md

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,58 @@
1+
## 0.13.3
2+
3+
This version introduces 4 new features:
4+
5+
* The custom label provider for the toolbox. By default, the toolbox displays a label of a step from the `name` field. You may override this behaviour and pass own label provider now.
6+
7+
```js
8+
const configuration = {
9+
toolbox: {
10+
labelProvider: (step) => `** ${step.name} **`,
11+
// ...
12+
},
13+
// ...
14+
};
15+
```
16+
17+
* Control the collapse of the toolbox.
18+
19+
```js
20+
const configuration = {
21+
toolbox: {
22+
isCollapsed: true, // or false
23+
// ...
24+
},
25+
// ...
26+
};
27+
28+
designer.isToolboxCollapsed(); // returns true or false
29+
designer.setIsToolboxCollapsed(true);
30+
```
31+
32+
* Control the collapse of the editor.
33+
34+
```js
35+
const configuration = {
36+
editors: {
37+
isCollapsed: true, // or false
38+
// ...
39+
},
40+
// ...
41+
};
42+
43+
designer.isEditorCollapsed(); // returns true or false
44+
designer.setIsEditorCollapsed(true);
45+
```
46+
47+
* It's possible now to replace the default unique identifier generator by a custom one.
48+
49+
```js
50+
const configuration = {
51+
uidGenerator: () => Math.random().toString(),
52+
// ...
53+
};
54+
```
55+
156
## 0.13.2
257

358
The react package supports two types of editor providers. Now it's possible to use a provider that returns native DOM elements. We don't want to depreciate the previous approach, this change increases flexibility of the react package.

‎README.md

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -90,10 +90,10 @@ Add the below code to your head section in HTML document.
9090
```html
9191
<head>
9292
...
93-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.13.2/css/designer.css" rel="stylesheet">
94-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.13.2/css/designer-light.css" rel="stylesheet">
95-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.13.2/css/designer-dark.css" rel="stylesheet">
96-
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.13.2/dist/index.umd.js"></script>
93+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.13.3/css/designer.css" rel="stylesheet">
94+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.13.3/css/designer-light.css" rel="stylesheet">
95+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.13.3/css/designer-dark.css" rel="stylesheet">
96+
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.13.3/dist/index.umd.js"></script>
9797
```
9898

9999
Call the designer by:
@@ -162,6 +162,7 @@ const configuration = {
162162
},
163163

164164
toolbox: {
165+
isCollapsed: false,
165166
groups: [
166167
{
167168
name: 'Files',
@@ -179,6 +180,7 @@ const configuration = {
179180
},
180181

181182
editors: {
183+
isCollapsed: false,
182184
globalEditorProvider: (definition, globalContext) => {
183185
const editor = document.createElement('div');
184186
// ...

‎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.2",
4+
"version": "0.13.3",
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.2"
18+
"sequential-workflow-designer": "^0.13.3"
1919
},
2020
"dependencies": {
2121
"tslib": "^2.3.0"

‎angular/designer/src/designer.component.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,8 @@ export interface StepEditorWrapper {
3535
context: StepEditorContext;
3636
}
3737

38+
export type AngularToolboxConfiguration = Omit<ToolboxConfiguration, 'isCollapsed'>;
39+
3840
@Component({
3941
selector: 'sqd-designer',
4042
templateUrl: './designer.component.html'
@@ -57,7 +59,7 @@ export class DesignerComponent implements AfterViewInit, OnChanges, OnDestroy {
5759
@Input('validatorConfiguration')
5860
public validatorConfiguration?: ValidatorConfiguration;
5961
@Input('toolboxConfiguration')
60-
public toolboxConfiguration?: ToolboxConfiguration | false;
62+
public toolboxConfiguration?: AngularToolboxConfiguration | false;
6163
@Input('controlBar')
6264
public controlBar?: boolean;
6365
@Input('extensions')

‎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.13.2",
28-
"sequential-workflow-designer-angular": "^0.13.2",
27+
"sequential-workflow-designer": "^0.13.3",
28+
"sequential-workflow-designer-angular": "^0.13.3",
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 @@ send@0.18.0:
51805180
range-parser "~1.2.1"
51815181
statuses "2.0.1"
51825182

5183-
sequential-workflow-designer-angular@^0.13.2:
5184-
version "0.13.2"
5185-
resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.13.2.tgz#c61f23470390b46fa99c19fc02c8b0e7b3f44755"
5186-
integrity sha512-kWF4vLxlKI0CJPoATV9jrIfULBrLzLpbrSBYO2MgsSk6zLB5LmyBQ3c1qA/if11kn0MEAWbVBwgZubp5DduFLA==
5183+
sequential-workflow-designer-angular@^0.13.3:
5184+
version "0.13.3"
5185+
resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.13.3.tgz#66922b823e1f5fd60cbe32ec8e3bc31d500c0237"
5186+
integrity sha512-e6vkxzHxydVOoNKP7qmY1bkKxZTi4WcZKJMx/uIJ8UtyOZGAk1VNUysQM1D+5Ss6eiQU8r/rr9WFtCiie9CAcA==
51875187
dependencies:
51885188
tslib "^2.3.0"
51895189

5190-
sequential-workflow-designer@^0.13.2:
5191-
version "0.13.2"
5192-
resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.13.2.tgz#db762be8f789a7765529c273f1533a3cdb4cd7ca"
5193-
integrity sha512-bhx5Pobi5WQ1mtvsqXwdE1+2Kn1t3PBrJz8NPtvTTL2AfdQHgKl/DHVmWxN8J1g7D4KbyhdfFXwYETldtO2EKg==
5190+
sequential-workflow-designer@^0.13.3:
5191+
version "0.13.3"
5192+
resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.13.3.tgz#c4edbb3ae1386503f79571ad6212ef064d4547f7"
5193+
integrity sha512-l31MUXwGrNrZWWDHKs90iU7sLSZ1D0iB1ztFlTTJ7X5QqunzAB/BRb25USUo3tcHnAGdZnYN/CN26NmcAOBOfQ==
51945194
dependencies:
51955195
sequential-workflow-model "^0.1.3"
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.13.2",
9-
"sequential-workflow-designer-react": "^0.13.2"
8+
"sequential-workflow-designer": "^0.13.3",
9+
"sequential-workflow-designer-react": "^0.13.3"
1010
},
1111
"devDependencies": {
1212
"@types/jest": "^29.2.5",

‎demos/react-app/src/playground/Playground.tsx

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,8 @@ const validatorConfiguration: ValidatorConfiguration = {
3030
export function Playground() {
3131
const controller = useSequentialWorkflowDesignerController();
3232
const [isVisible, setIsVisible] = useState(true);
33+
const [isToolboxCollapsed, setIsToolboxCollapsed] = useState(false);
34+
const [isEditorCollapsed, setIsEditorCollapsed] = useState(false);
3335
const [definition, setDefinition] = useState(() => wrapDefinition(startDefinition));
3436
const [selectedStepId, setSelectedStepId] = useState<string | null>(null);
3537
const [isReadonly, setIsReadonly] = useState(false);
@@ -52,6 +54,14 @@ export function Playground() {
5254
setIsReadonly(!isReadonly);
5355
}
5456

57+
function toggleToolboxClicked() {
58+
setIsToolboxCollapsed(!isToolboxCollapsed);
59+
}
60+
61+
function toggleEditorClicked() {
62+
setIsEditorCollapsed(!isEditorCollapsed);
63+
}
64+
5565
function moveViewportToFirstStepClicked() {
5666
const fistStep = definition.value.sequence[0];
5767
if (fistStep) {
@@ -64,6 +74,10 @@ export function Playground() {
6474
setDefinition(wrapDefinition(newDefinition));
6575
}
6676

77+
function yesOrNo(value: boolean) {
78+
return value ? '✅ Yes' : '⛔ No';
79+
}
80+
6781
return (
6882
<>
6983
{isVisible && (
@@ -75,27 +89,35 @@ export function Playground() {
7589
isReadonly={isReadonly}
7690
onSelectedStepIdChanged={setSelectedStepId}
7791
toolboxConfiguration={toolboxConfiguration}
92+
isToolboxCollapsed={isToolboxCollapsed}
93+
onIsToolboxCollapsedChanged={setIsToolboxCollapsed}
7894
stepsConfiguration={stepsConfiguration}
7995
validatorConfiguration={validatorConfiguration}
8096
controlBar={true}
8197
globalEditor={<GlobalEditor />}
8298
stepEditor={<StepEditor />}
99+
isEditorCollapsed={isEditorCollapsed}
100+
onIsEditorCollapsedChanged={setIsEditorCollapsed}
83101
controller={controller}
84102
/>
85103
)}
86104

87105
<ul>
88106
<li>Definition: {definitionJson.length} bytes</li>
89107
<li>Selected step: {selectedStepId}</li>
90-
<li>Is readonly: {isReadonly ? '✅ Yes' : 'No'}</li>
91-
<li>Is valid: {definition.isValid === undefined ? '?' : definition.isValid ? '✅ Yes' : '⛔ No'}</li>
108+
<li>Is readonly: {yesOrNo(isReadonly)}</li>
109+
<li>Is valid: {definition.isValid === undefined ? '?' : yesOrNo(definition.isValid)}</li>
110+
<li>Is toolbox collapsed: {yesOrNo(isToolboxCollapsed)}</li>
111+
<li>Is editor collapsed: {yesOrNo(isEditorCollapsed)}</li>
92112
</ul>
93113

94114
<div>
95115
<button onClick={toggleVisibilityClicked}>Toggle visibility</button>
96116
<button onClick={reloadDefinitionClicked}>Reload definition</button>
97117
<button onClick={toggleSelectionClicked}>Toggle selection</button>
98118
<button onClick={toggleIsReadonlyClicked}>Toggle readonly</button>
119+
<button onClick={toggleToolboxClicked}>Toggle toolbox</button>
120+
<button onClick={toggleEditorClicked}>Toggle editor</button>
99121
<button onClick={moveViewportToFirstStepClicked}>Move viewport to first step</button>
100122
</div>
101123

‎designer/css/designer.css

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -130,11 +130,12 @@
130130
}
131131
.sqd-control-bar-button {
132132
display: inline-block;
133-
width: 30px;
134-
height: 30px;
133+
width: 32px;
134+
height: 32px;
135135
border-radius: 5px;
136136
margin-right: 8px;
137137
cursor: pointer;
138+
box-sizing: border-box;
138139
}
139140
.sqd-control-bar-button-icon {
140141
width: 24px;

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

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,11 @@ export class DesignerApi {
1818
context.state,
1919
context,
2020
context.behaviorController,
21-
context.layoutController,
22-
context.componentContext.iconProvider
21+
context.componentContext.iconProvider,
22+
context.configuration.toolbox,
23+
context.configuration.uidGenerator
2324
),
24-
new EditorApi(context.state, context.definitionWalker, context.layoutController, context.definitionModifier),
25+
new EditorApi(context.state, context.definitionWalker, context.definitionModifier),
2526
workspace,
2627
viewport,
2728
new PathBarApi(context.state, context.definitionWalker)

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

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,26 @@ import { DefinitionChangeType, DesignerState } from '../designer-state';
22
import { DefinitionModifier } from '../definition-modifier';
33
import { GlobalEditorContext, StepEditorContext } from '../designer-configuration';
44
import { EditorRenderer, EditorRendererHandler } from './editor-renderer';
5-
import { LayoutController } from '../layout-controller';
65
import { Definition, DefinitionWalker } from '../definition';
6+
import { SimpleEventListener } from '../core';
77

88
export class EditorApi {
99
public constructor(
1010
private readonly state: DesignerState,
1111
private readonly definitionWalker: DefinitionWalker,
12-
private readonly layoutController: LayoutController,
1312
private readonly definitionModifier: DefinitionModifier
1413
) {}
1514

16-
public isVisibleAtStart(): boolean {
17-
return this.layoutController.isMobile();
15+
public isCollapsed(): boolean {
16+
return this.state.isEditorCollapsed;
17+
}
18+
19+
public toggleIsCollapsed() {
20+
this.state.setIsEditorCollapsed(!this.state.isEditorCollapsed);
21+
}
22+
23+
public subscribeIsCollapsed(listener: SimpleEventListener<boolean>) {
24+
this.state.onIsEditorCollapsedChanged.subscribe(listener);
1825
}
1926

2027
public getDefinition(): Definition {

‎designer/src/api/editor-renderer.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ describe('EditorRenderer', () => {
2222

2323
beforeEach(() => {
2424
walker = new DefinitionWalker();
25-
state = new DesignerState(definition, false);
25+
state = new DesignerState(definition, false, false, false);
2626
callback = jasmine.createSpy('callback');
2727
});
2828

0 commit comments

Comments
 (0)