Skip to content

Commit e601031

Browse files
b4rtazb4rtaz
authored
0.13.2. (#47)
1 parent b7db804 commit e601031

File tree

19 files changed

+276
-139
lines changed

19 files changed

+276
-139
lines changed

‎CHANGELOG.md

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,19 @@
1+
## 0.13.2
2+
3+
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.
4+
5+
```tsx
6+
// 1. custom react component
7+
<SequentialWorkflowDesigner stepEditor={<StepEditor />} ... />
8+
9+
// 2. native editor provider
10+
function stepEditorProvider(step) {
11+
const editor = document.createElement('div'); /* ... */
12+
return editor;
13+
}
14+
<SequentialWorkflowDesigner stepEditor={stepEditorProvider}> ... />
15+
```
16+
117
## 0.13.1
218

319
The `canMoveStep` callback is not called when the step is moved to the same position.

‎README.md

Lines changed: 4 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.1/css/designer.css" rel="stylesheet">
94-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.13.1/css/designer-light.css" rel="stylesheet">
95-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.13.1/css/designer-dark.css" rel="stylesheet">
96-
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.13.1/dist/index.umd.js"></script>
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>
9797
```
9898

9999
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.13.1",
4+
"version": "0.13.2",
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.1"
18+
"sequential-workflow-designer": "^0.13.2"
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.13.1",
28-
"sequential-workflow-designer-angular": "^0.13.1",
27+
"sequential-workflow-designer": "^0.13.2",
28+
"sequential-workflow-designer-angular": "^0.13.2",
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.1:
5184-
version "0.13.1"
5185-
resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.13.1.tgz#a8acbd9bd442a1260f7fe7840e3b97c576309bb6"
5186-
integrity sha512-p29YekTS5DIrl6ZmZpiLtvrhF5pqs3pilxzAXg++38RgjStU7wuCHbrQMO0wkGWVcuUHweMZV8Yw23PSHJhxUw==
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==
51875187
dependencies:
51885188
tslib "^2.3.0"
51895189

5190-
sequential-workflow-designer@^0.13.1:
5191-
version "0.13.1"
5192-
resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.13.1.tgz#332c5324895dd63c350a14a7de418d2f4b9a70ff"
5193-
integrity sha512-Jw/eFRC3GB4FVH6DbpRGqmQT1usQVP+s00uGcS5b+AozmhewTk/Hf1EJS9NTlknYchGbiQ3Dw6rUZqBav5/iaA==
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==
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.1",
9-
"sequential-workflow-designer-react": "^0.13.1"
8+
"sequential-workflow-designer": "^0.13.2",
9+
"sequential-workflow-designer-react": "^0.13.2"
1010
},
1111
"devDependencies": {
1212
"@types/jest": "^29.2.5",

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

Lines changed: 20 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -1,107 +1,31 @@
1-
import { useEffect, useState } from 'react';
2-
import { ObjectCloner, Step, StepsConfiguration, ToolboxConfiguration, ValidatorConfiguration } from 'sequential-workflow-designer';
3-
import { SequentialWorkflowDesigner, wrapDefinition } from 'sequential-workflow-designer-react';
4-
import { GlobalEditor } from './GlobalEditor';
5-
import { StepEditor } from './StepEditor';
6-
import { createSwitchStep, createTaskStep } from './StepUtils';
7-
import { WorkflowDefinition } from './model';
8-
import { useSequentialWorkflowDesignerController } from 'sequential-workflow-designer-react';
1+
import { useState } from 'react';
2+
import { Playground } from './playground/Playground';
3+
import { NativeEditors } from './nativeEditors/NativeEditors';
94

10-
const startDefinition: WorkflowDefinition = {
11-
properties: {
12-
alfa: 'bravo'
13-
},
14-
sequence: [createTaskStep(), createSwitchStep()]
15-
};
16-
17-
const toolboxConfiguration: ToolboxConfiguration = {
18-
groups: [{ name: 'Steps', steps: [createTaskStep(), createSwitchStep()] }]
19-
};
20-
21-
const stepsConfiguration: StepsConfiguration = {
22-
iconUrlProvider: () => null
23-
};
24-
25-
const validatorConfiguration: ValidatorConfiguration = {
26-
step: (step: Step) => Boolean(step.name),
27-
root: (definition: WorkflowDefinition) => Boolean(definition.properties.alfa)
28-
};
5+
const pathKey = 'swdReactPath';
6+
type AppPath = 'playground' | 'nativeEditors';
297

308
export function App() {
31-
const controller = useSequentialWorkflowDesignerController();
32-
const [isVisible, setIsVisible] = useState(true);
33-
const [definition, setDefinition] = useState(() => wrapDefinition(startDefinition));
34-
const [selectedStepId, setSelectedStepId] = useState<string | null>(null);
35-
const [isReadonly, setIsReadonly] = useState(false);
36-
const definitionJson = JSON.stringify(definition.value, null, 2);
37-
38-
useEffect(() => {
39-
console.log(`definition updated, isValid=${definition.isValid}`);
40-
}, [definition]);
41-
42-
function toggleVisibilityClicked() {
43-
setIsVisible(!isVisible);
44-
}
45-
46-
function toggleSelectionClicked() {
47-
const id = definition.value.sequence[0].id;
48-
setSelectedStepId(selectedStepId ? null : id);
49-
}
9+
const [path, setPath] = useState<AppPath>((localStorage[pathKey] as AppPath) || 'playground');
5010

51-
function toggleIsReadonlyClicked() {
52-
setIsReadonly(!isReadonly);
53-
}
54-
55-
function moveViewportToFirstStepClicked() {
56-
const fistStep = definition.value.sequence[0];
57-
if (fistStep) {
58-
controller.moveViewportToStep(fistStep.id);
59-
}
60-
}
61-
62-
function reloadDefinitionClicked() {
63-
const newDefinition = ObjectCloner.deepClone(startDefinition);
64-
setDefinition(wrapDefinition(newDefinition));
11+
function changePath(path: AppPath) {
12+
localStorage[pathKey] = path;
13+
setPath(path);
6514
}
6615

6716
return (
6817
<>
69-
{isVisible && (
70-
<SequentialWorkflowDesigner
71-
undoStackSize={10}
72-
definition={definition}
73-
onDefinitionChange={setDefinition}
74-
selectedStepId={selectedStepId}
75-
isReadonly={isReadonly}
76-
onSelectedStepIdChanged={setSelectedStepId}
77-
toolboxConfiguration={toolboxConfiguration}
78-
stepsConfiguration={stepsConfiguration}
79-
validatorConfiguration={validatorConfiguration}
80-
controlBar={true}
81-
globalEditor={<GlobalEditor />}
82-
stepEditor={<StepEditor />}
83-
controller={controller}
84-
/>
85-
)}
86-
87-
<ul>
88-
<li>Definition: {definitionJson.length} bytes</li>
89-
<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>
92-
</ul>
93-
94-
<div>
95-
<button onClick={toggleVisibilityClicked}>Toggle visibility</button>
96-
<button onClick={reloadDefinitionClicked}>Reload definition</button>
97-
<button onClick={toggleSelectionClicked}>Toggle selection</button>
98-
<button onClick={toggleIsReadonlyClicked}>Toggle readonly</button>
99-
<button onClick={moveViewportToFirstStepClicked}>Move viewport to first step</button>
100-
</div>
101-
102-
<div>
103-
<textarea value={definitionJson} readOnly={true} cols={100} rows={15} />
104-
</div>
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+
</nav>
27+
{path === 'playground' && <Playground />}
28+
{path === 'nativeEditors' && <NativeEditors />}
10529
</>
10630
);
10731
}

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

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,38 @@
1-
body {
1+
body,
2+
h1 {
23
font: 13px/1.3em Arial, Verdana, Serif;
34
}
45
body {
56
margin: 0;
67
padding: 0;
78
}
89

10+
nav {
11+
padding: 10px 5px 0;
12+
background: #333;
13+
}
14+
nav h1 {
15+
display: inline-block;
16+
margin: 0 15px;
17+
padding: 0;
18+
color: #fff;
19+
}
20+
nav button {
21+
background: #999;
22+
border: 0;
23+
padding: 10px 15px;
24+
margin: 0 5px;
25+
cursor: pointer;
26+
border-top-left-radius: 8px;
27+
border-top-right-radius: 8px;
28+
}
29+
nav button.selected {
30+
background: #f9f9f9;
31+
}
32+
nav button:hover {
33+
opacity: 0.8;
34+
}
35+
936
.sqd-designer-react {
1037
width: 100vw;
1138
height: 50vh;

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

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { useState } from 'react';
2+
import { Definition, Step, StepEditorContext } from 'sequential-workflow-designer';
3+
import { SequentialWorkflowDesigner, wrapDefinition } from 'sequential-workflow-designer-react';
4+
5+
export const startDefinition: Definition = {
6+
sequence: [
7+
{
8+
id: '0x1',
9+
componentType: 'task',
10+
name: 'Foo',
11+
properties: {},
12+
type: 'test'
13+
}
14+
],
15+
properties: {}
16+
};
17+
18+
function globalEditorProvider(): HTMLElement {
19+
const editor = document.createElement('div');
20+
editor.innerHTML = 'Global editor';
21+
return editor;
22+
}
23+
24+
function stepEditorProvider(step: Step, context: StepEditorContext): HTMLElement {
25+
const editor = document.createElement('div');
26+
const title = document.createElement('h2');
27+
title.innerText = `Edit ${step.type} step`;
28+
editor.appendChild(title);
29+
const nameInput = document.createElement('input');
30+
nameInput.value = step.name;
31+
nameInput.addEventListener('input', () => {
32+
step.name = nameInput.value;
33+
context.notifyNameChanged();
34+
});
35+
editor.appendChild(nameInput);
36+
return editor;
37+
}
38+
39+
export function NativeEditors() {
40+
const [definition, setDefinition] = useState(() => wrapDefinition(startDefinition));
41+
42+
return (
43+
<>
44+
<SequentialWorkflowDesigner
45+
definition={definition}
46+
onDefinitionChange={setDefinition}
47+
toolboxConfiguration={false}
48+
stepsConfiguration={{}}
49+
controlBar={true}
50+
globalEditor={globalEditorProvider}
51+
stepEditor={stepEditorProvider}
52+
/>
53+
</>
54+
);
55+
}

‎demos/react-app/src/GlobalEditor.tsx renamed to ‎demos/react-app/src/playground/GlobalEditor.tsx

File renamed without changes.

0 commit comments

Comments
 (0)