Skip to content

Commit a696f69

Browse files
b4rtazb4rtaz
authored
0.33.0 (#203)
1 parent 6d12712 commit a696f69

34 files changed

+518
-177
lines changed

‎CHANGELOG.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,22 @@
1+
# 0.33.0
2+
3+
This version introduces a new restriction callback: `canUnselectStep`. You can now prevent a step from being unselected based on your custom logic. When an unselection is blocked, the `onStepUnselectionBlocked` event is triggered.
4+
5+
```ts
6+
const configuration = {
7+
steps: {
8+
canUnselectStep: (step, parentSequence) => {
9+
return areChangesSaved() === true;
10+
},
11+
},
12+
// ...
13+
};
14+
15+
designer.onStepUnselectionBlocked((targetStepId) => { /* ... */ });
16+
```
17+
18+
Please note that you should NOT use `window.confirm()` or other blocking functions inside the `canUnselectStep` callback, as this callback may be invoked multiple times during drag operations. To handle this correctly, implement your own UI logic to notify the user about any required actions before unselection can proceed. Please check [this example](https://nocode-js.github.io/sequential-workflow-designer/react-app/#save-required-editor).
19+
120
# 0.32.0
221

322
This introduces internal changes related to the dragged component.

‎README.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -106,10 +106,10 @@ Add the below code to your head section in HTML document.
106106
```html
107107
<head>
108108
...
109-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.32.0/css/designer.css" rel="stylesheet">
110-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.32.0/css/designer-light.css" rel="stylesheet">
111-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.32.0/css/designer-dark.css" rel="stylesheet">
112-
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.32.0/dist/index.umd.js"></script>
109+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.33.0/css/designer.css" rel="stylesheet">
110+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.33.0/css/designer-light.css" rel="stylesheet">
111+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.33.0/css/designer-dark.css" rel="stylesheet">
112+
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.33.0/dist/index.umd.js"></script>
113113
```
114114

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

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,8 @@ export class DesignerComponent implements AfterViewInit, OnChanges, OnDestroy {
113113
@Output()
114114
public readonly onSelectedStepIdChanged = new EventEmitter<string | null>();
115115
@Output()
116+
public readonly onStepUnselectionBlocked = new EventEmitter<string | null>();
117+
@Output()
116118
public readonly onIsToolboxCollapsedChanged = new EventEmitter<boolean>();
117119
@Output()
118120
public readonly onIsEditorCollapsedChanged = new EventEmitter<boolean>();
@@ -243,6 +245,9 @@ export class DesignerComponent implements AfterViewInit, OnChanges, OnDestroy {
243245
designer.onSelectedStepIdChanged.subscribe(stepId => {
244246
this.ngZone.run(() => this.onSelectedStepIdChanged.emit(stepId));
245247
});
248+
designer.onStepUnselectionBlocked.subscribe(targetStepId => {
249+
this.ngZone.run(() => this.onStepUnselectionBlocked.emit(targetStepId));
250+
});
246251
designer.onIsToolboxCollapsedChanged.subscribe(isCollapsed => {
247252
this.ngZone.run(() => this.onIsToolboxCollapsedChanged.emit(isCollapsed));
248253
});

‎demos/angular-app/package.json‎

Lines changed: 2 additions & 2 deletions
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.32.0",
30-
"sequential-workflow-designer-angular": "^0.32.0",
29+
"sequential-workflow-designer": "^0.33.0",
30+
"sequential-workflow-designer-angular": "^0.33.0",
3131
"tslib": "^2.3.0",
3232
"zone.js": "~0.14.6"
3333
},

‎demos/react-app/package.json‎

Lines changed: 2 additions & 2 deletions
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.32.0",
10-
"sequential-workflow-designer-react": "^0.32.0"
9+
"sequential-workflow-designer": "^0.33.0",
10+
"sequential-workflow-designer-react": "^0.33.0"
1111
},
1212
"devDependencies": {
1313
"@types/jest": "^29.2.5",

‎demos/react-app/src/App.tsx‎

Lines changed: 36 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,53 @@
11
import { useState } from 'react';
22
import { Playground } from './playground/Playground';
33
import { NativeEditors } from './nativeEditors/NativeEditors';
4+
import { SaveRequiredEditor } from './saveRequiredEditor/SaveRequiredEditor';
45

5-
const pathKey = 'swdReactPath';
6-
type AppPath = 'playground' | 'nativeEditors';
6+
const TABS = [
7+
{
8+
label: '🍭 Playground',
9+
path: 'playground'
10+
},
11+
{
12+
label: '🔌 Native Editors',
13+
path: 'native-editors'
14+
},
15+
{
16+
label: '🔴 Save Required Editor',
17+
path: 'save-required-editor'
18+
}
19+
];
720

821
export function App() {
9-
const [path, setPath] = useState<AppPath>((localStorage[pathKey] as AppPath) || 'playground');
22+
const [path, setPath] = useState<string>(window.location.hash?.substring(1) || 'playground');
1023

11-
function changePath(path: AppPath) {
12-
localStorage[pathKey] = path;
24+
function changePath(path: string) {
25+
window.location.hash = path;
1326
setPath(path);
1427
}
1528

1629
return (
1730
<>
18-
<nav>
19-
<h1>SWD for React Demo</h1>
20-
<button onClick={() => changePath('playground')} className={path === 'playground' ? 'selected' : ''}>
21-
Playground
22-
</button>
23-
<button onClick={() => changePath('nativeEditors')} className={path === 'nativeEditors' ? 'selected' : ''}>
24-
Native editors
25-
</button>
26-
<a href="https://github.com/nocode-js/sequential-workflow-designer/tree/main/react" className="github">
27-
GitHub
28-
</a>
31+
<nav className="title-bar">
32+
<div className="column demo">
33+
Select Demo:{' '}
34+
<select defaultValue={path}>
35+
{TABS.map(t => (
36+
<option key={t.path} value={t.path} onClick={() => changePath(t.path)}>
37+
{t.label}
38+
</option>
39+
))}
40+
</select>
41+
</div>
42+
<div className="column link">
43+
<a href="https://github.com/nocode-js/sequential-workflow-designer/tree/main/react" className="github">
44+
SWD for React
45+
</a>
46+
</div>
2947
</nav>
3048
{path === 'playground' && <Playground />}
31-
{path === 'nativeEditors' && <NativeEditors />}
49+
{path === 'native-editors' && <NativeEditors />}
50+
{path === 'save-required-editor' && <SaveRequiredEditor />}
3251
</>
3352
);
3453
}

‎demos/react-app/src/index.css‎

Lines changed: 47 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,69 @@
11
body,
22
h1 {
33
font:
4-
13px/1.3em Arial,
4+
14px/1.3em 'Open Sans',
5+
Arial,
56
Verdana,
67
Serif;
78
}
8-
body {
9-
margin: 0;
10-
padding: 0;
11-
}
129

13-
nav {
14-
padding: 10px 5px 0;
15-
background: #333;
16-
}
17-
nav h1 {
18-
display: inline-block;
19-
margin: 0 15px;
10+
html,
11+
body,
12+
#root {
13+
margin: 0;
2014
padding: 0;
21-
color: #fff;
15+
width: 100%;
16+
height: 100%;
17+
background: #fff;
2218
}
23-
nav button {
24-
background: #999;
25-
border: 0;
26-
padding: 10px 15px;
27-
margin: 0 5px;
28-
cursor: pointer;
29-
border-top-left-radius: 8px;
30-
border-top-right-radius: 8px;
19+
#root {
20+
display: flex;
21+
flex-direction: column;
3122
}
32-
nav button.selected {
33-
background: #f9f9f9;
23+
24+
.title-bar {
25+
display: flex;
26+
min-height: 60px;
27+
align-items: center;
28+
width: 100%;
29+
background: #fff;
30+
box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.06);
3431
}
35-
nav button:hover {
36-
opacity: 0.8;
32+
.title-bar .column {
33+
padding: 10px;
3734
}
38-
nav .github {
39-
margin: 0 5px;
40-
color: #fff;
35+
.title-bar .column.link {
36+
flex: 1;
37+
text-align: right;
4138
}
42-
nav .github:hover {
39+
.title-bar .column.link a {
40+
color: #222;
4341
text-decoration: none;
4442
}
45-
@media only screen and (max-width: 700px) {
46-
nav h1 {
47-
display: none;
48-
}
43+
.title-bar .column.link a:hover {
44+
text-decoration: underline;
4945
}
5046

47+
.designer {
48+
flex: 1;
49+
position: relative;
50+
}
5151
.sqd-designer-react {
52-
width: 100vw;
53-
height: 50vh;
52+
position: absolute;
53+
top: 0;
54+
bottom: 0;
55+
left: 0;
56+
right: 0;
57+
overflow: hidden;
5458
}
55-
.sqd-editor {
59+
.sqd-designer-react .sqd-editor {
5660
padding: 10px;
61+
line-height: 1.35em;
62+
}
63+
64+
.sidebar {
65+
flex: 1;
5766
}
58-
input:read-only {
59-
opacity: 0.35;
67+
.sidebar textarea {
68+
width: 100%;
6069
}

‎demos/react-app/src/index.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,7 @@ import { App } from './App';
55
import './index.css';
66

77
import 'sequential-workflow-designer/css/designer.css';
8-
import 'sequential-workflow-designer/css/designer-light.css';
9-
import 'sequential-workflow-designer/css/designer-dark.css';
8+
import 'sequential-workflow-designer/css/designer-soft.css';
109

1110
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
1211
root.render(

‎demos/react-app/src/nativeEditors/NativeEditors.tsx‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,15 @@ export const startDefinition: Definition = {
1616
};
1717

1818
function rootEditorProvider(): HTMLElement {
19+
const h2 = document.createElement('h2');
20+
h2.innerText = '🔌 Native Editors Demo';
21+
22+
const p = document.createElement('p');
23+
p.innerHTML = 'This demo demonstrates how to use natively implemented editors inside React application.';
24+
1925
const editor = document.createElement('div');
20-
editor.innerHTML = 'Root editor';
26+
editor.appendChild(h2);
27+
editor.appendChild(p);
2128
return editor;
2229
}
2330

@@ -40,9 +47,10 @@ export function NativeEditors() {
4047
const [definition, setDefinition] = useState(() => wrapDefinition(startDefinition));
4148

4249
return (
43-
<>
50+
<div className="designer">
4451
<SequentialWorkflowDesigner
4552
definition={definition}
53+
theme="soft"
4654
onDefinitionChange={setDefinition}
4755
toolboxConfiguration={false}
4856
stepsConfiguration={{}}
@@ -51,6 +59,6 @@ export function NativeEditors() {
5159
rootEditor={rootEditorProvider}
5260
stepEditor={stepEditorProvider}
5361
/>
54-
</>
62+
</div>
5563
);
5664
}

0 commit comments

Comments
 (0)