Skip to content

Commit 957b90d

Browse files
b4rtazb4rtaz
authored
0.18.3. (#116)
1 parent 20a2df9 commit 957b90d

File tree

13 files changed

+74
-31
lines changed

13 files changed

+74
-31
lines changed

‎CHANGELOG.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,16 @@
1+
## 0.18.3
2+
3+
Added a feature to the sequential-workflow-designer-react package that enables re-rendering the canvas when you pass a new instance of the wrapped definition. The instance of the definition must remain the same. This enables easy manipulation of the definition from outside the designer in your React application.
4+
5+
```tsx
6+
function action() {
7+
const newStep: Step = { /* ... */ };
8+
9+
definition.value.sequence.push(newStep);
10+
setDefinition({ ...definition });
11+
}
12+
```
13+
114
## 0.18.2
215

316
This version corrects a bug in the `moveViewportToStep` method that caused the viewport to move to the incorrect position.

‎README.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -96,10 +96,10 @@ Add the below code to your head section in HTML document.
9696
```html
9797
<head>
9898
...
99-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.18.2/css/designer.css" rel="stylesheet">
100-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.18.2/css/designer-light.css" rel="stylesheet">
101-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.18.2/css/designer-dark.css" rel="stylesheet">
102-
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.18.2/dist/index.umd.js"></script>
99+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.18.3/css/designer.css" rel="stylesheet">
100+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.18.3/css/designer-light.css" rel="stylesheet">
101+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.18.3/css/designer-dark.css" rel="stylesheet">
102+
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.18.3/dist/index.umd.js"></script>
103103
```
104104

105105
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.18.2",
4+
"version": "0.18.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.18.2"
18+
"sequential-workflow-designer": "^0.18.3"
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
@@ -26,8 +26,8 @@
2626
"@angular/platform-browser-dynamic": "^15.2.9",
2727
"@angular/router": "^15.2.9",
2828
"rxjs": "~7.8.0",
29-
"sequential-workflow-designer": "^0.18.2",
30-
"sequential-workflow-designer-angular": "^0.18.2",
29+
"sequential-workflow-designer": "^0.18.3",
30+
"sequential-workflow-designer-angular": "^0.18.3",
3131
"tslib": "^2.3.0",
3232
"zone.js": "~0.13.0"
3333
},

‎demos/angular-app/yarn.lock

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5956,17 +5956,17 @@ send@0.18.0:
59565956
range-parser "~1.2.1"
59575957
statuses "2.0.1"
59585958

5959-
sequential-workflow-designer-angular@^0.18.2:
5960-
version "0.18.2"
5961-
resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.18.2.tgz#30fa8257d79a402ebd8523ba06567c8d6ed01e93"
5962-
integrity sha512-gHIeBCJo9q/+a0r7geGgA//oEO/wXQXEAUwUQ8nwfPBWrm2/mwW77SSX7JnVO1jnrptcThL0ynDKeyzPa/qdQg==
5959+
sequential-workflow-designer-angular@^0.18.3:
5960+
version "0.18.3"
5961+
resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.18.3.tgz#4bfb9943c987ac6b609c657a34d48701d10484f0"
5962+
integrity sha512-mJGok8qR0xDffn+tNBS3O8wCK9xgu8n/xiIVCurwqcPJ46jvHiQdjnJfS4Ea8bj5MGC1uRQvle9zO8puNlRzbw==
59635963
dependencies:
59645964
tslib "^2.3.0"
59655965

5966-
sequential-workflow-designer@^0.18.2:
5967-
version "0.18.2"
5968-
resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.18.2.tgz#03c4bd0ed3e6d0a78cfa43a8f8a59c4787fdf910"
5969-
integrity sha512-BCWQWw6BwIaENsEt+73XYhfxP782wb7ludgqJYMuY9TDjTRjY4dii03gh9FLYDKwBMDQxdFdCbYcgvT2BhbXkw==
5966+
sequential-workflow-designer@^0.18.3:
5967+
version "0.18.3"
5968+
resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.18.3.tgz#3c2165550160216fb40e2eb945c654d5ae5d505c"
5969+
integrity sha512-IchagYDpIYNvIVv4HleKn+x+ZfItVDxoQqQbBF1Ms7vEZdd0CwfvB17NBZLfz02LTGyGE/GGGPc8IEvqkajvMQ==
59705970
dependencies:
59715971
sequential-workflow-model "^0.2.0"
59725972

‎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.18.2",
10-
"sequential-workflow-designer-react": "^0.18.2"
9+
"sequential-workflow-designer": "^0.18.3",
10+
"sequential-workflow-designer-react": "^0.18.3"
1111
},
1212
"devDependencies": {
1313
"@types/jest": "^29.2.5",

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

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,12 +42,22 @@ export function Playground() {
4242
const [definition, setDefinition] = useState(() => wrapDefinition(startDefinition));
4343
const [selectedStepId, setSelectedStepId] = useState<string | null>(null);
4444
const [isReadonly, setIsReadonly] = useState(false);
45+
const [moveViewportToStep, setMoveViewportToStep] = useState<string | null>(null);
4546
const definitionJson = JSON.stringify(definition.value, null, 2);
4647

4748
useEffect(() => {
4849
console.log(`definition updated, isValid=${definition.isValid}`);
4950
}, [definition]);
5051

52+
useEffect(() => {
53+
if (moveViewportToStep) {
54+
if (controller.isReady()) {
55+
controller.moveViewportToStep(moveViewportToStep);
56+
}
57+
setMoveViewportToStep(null);
58+
}
59+
}, [controller, moveViewportToStep]);
60+
5161
function toggleVisibilityClicked() {
5262
setIsVisible(!isVisible);
5363
}
@@ -72,12 +82,24 @@ export function Playground() {
7282
function moveViewportToFirstStepClicked() {
7383
const fistStep = definition.value.sequence[0];
7484
if (fistStep) {
75-
controller.moveViewportToStep(fistStep.id);
85+
setMoveViewportToStep(fistStep.id);
7686
}
7787
}
7888

89+
function appendStepClicked() {
90+
const newStep = createTaskStep();
91+
92+
// We need to keep the same reference to the definition, but the wrapped definition must be a new instance.
93+
definition.value.sequence.push(newStep);
94+
setDefinition({ ...definition });
95+
96+
setSelectedStepId(newStep.id);
97+
setMoveViewportToStep(newStep.id);
98+
}
99+
79100
function reloadDefinitionClicked() {
80101
const newDefinition = ObjectCloner.deepClone(startDefinition);
102+
setSelectedStepId(null);
81103
setDefinition(wrapDefinition(newDefinition));
82104
}
83105

@@ -126,6 +148,7 @@ export function Playground() {
126148
<button onClick={toggleToolboxClicked}>Toggle toolbox</button>
127149
<button onClick={toggleEditorClicked}>Toggle editor</button>
128150
<button onClick={moveViewportToFirstStepClicked}>Move viewport to first step</button>
151+
<button onClick={appendStepClicked}>Append step</button>
129152
</div>
130153

131154
<div>

‎demos/svelte-app/package.json

Lines changed: 2 additions & 2 deletions
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.18.2",
20-
"sequential-workflow-designer-svelte": "^0.18.2"
19+
"sequential-workflow-designer": "^0.18.3",
20+
"sequential-workflow-designer-svelte": "^0.18.3"
2121
},
2222
"devDependencies": {
2323
"@sveltejs/adapter-static": "^2.0.3",

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

‎examples/assets/lib.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ function embedStylesheet(url) {
1919

2020
const baseUrl = isTestEnv()
2121
? '../designer'
22-
: '//cdn.jsdelivr.net/npm/sequential-workflow-designer@0.18.2';
22+
: '//cdn.jsdelivr.net/npm/sequential-workflow-designer@0.18.3';
2323

2424
embedScript(`${baseUrl}/dist/index.umd.js`);
2525
embedStylesheet(`${baseUrl}/css/designer.css`);

‎react/package.json

Lines changed: 3 additions & 3 deletions
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.18.2",
4+
"version": "0.18.3",
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.18.2"
50+
"sequential-workflow-designer": "^0.18.3"
5151
},
5252
"devDependencies": {
5353
"@rollup/plugin-node-resolve": "^15.0.1",
@@ -63,7 +63,7 @@
6363
"prettier": "^2.8.2",
6464
"react": "^18.2.0",
6565
"react-dom": "^18.2.0",
66-
"sequential-workflow-designer": "^0.18.2",
66+
"sequential-workflow-designer": "^0.18.3",
6767
"rollup": "^3.18.0",
6868
"rollup-plugin-dts": "^5.2.0",
6969
"rollup-plugin-typescript2": "^0.34.1",

‎react/src/SequentialWorkflowDesigner.tsx

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@ export function SequentialWorkflowDesigner<TDefinition extends Definition>(props
7272

7373
const designerRef = useRef<Designer<TDefinition> | null>(null);
7474
const editorRootRef = useRef<ReactDOM.Root | null>(null);
75+
const wrappedDefinitionRef = useRef<WrappedDefinition | null>(null);
7576

7677
const definition = props.definition;
7778
const selectedStepId = props.selectedStepId;
@@ -97,8 +98,9 @@ export function SequentialWorkflowDesigner<TDefinition extends Definition>(props
9798

9899
function forwardDefinition() {
99100
if (designerRef.current) {
100-
const def = wrapDefinition(designerRef.current.getDefinition(), designerRef.current.isValid());
101-
onDefinitionChangeRef.current(def);
101+
const wd = wrapDefinition(designerRef.current.getDefinition(), designerRef.current.isValid());
102+
wrappedDefinitionRef.current = wd;
103+
onDefinitionChangeRef.current(wd);
102104
}
103105
}
104106

@@ -189,6 +191,11 @@ export function SequentialWorkflowDesigner<TDefinition extends Definition>(props
189191
if (designerRef.current) {
190192
const isNotChanged = definition.value === designerRef.current.getDefinition();
191193
if (isNotChanged) {
194+
if (wrappedDefinitionRef.current !== definition) {
195+
wrappedDefinitionRef.current = definition;
196+
designerRef.current.updateRootComponent();
197+
}
198+
192199
if (selectedStepId !== undefined && selectedStepId !== designerRef.current.getSelectedStepId()) {
193200
if (selectedStepId) {
194201
designerRef.current.selectStepById(selectedStepId);

‎svelte/package.json

Lines changed: 3 additions & 3 deletions
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.18.2",
4+
"version": "0.18.3",
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.18.2"
31+
"sequential-workflow-designer": "^0.18.3"
3232
},
3333
"devDependencies": {
34-
"sequential-workflow-designer": "^0.18.2",
34+
"sequential-workflow-designer": "^0.18.3",
3535
"@sveltejs/adapter-static": "^2.0.3",
3636
"@sveltejs/kit": "^1.20.4",
3737
"@sveltejs/package": "^2.0.0",

0 commit comments

Comments
 (0)