Skip to content

Commit f4408fd

Browse files
devhelprdevhelpr
committed
updatesVisualAfterCompute
1 parent 477bcf6 commit f4408fd

File tree

7 files changed

+104
-14
lines changed

7 files changed

+104
-14
lines changed

‎apps/vps-web/src/app/custom-nodes-v2/pie-chart-visual.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,22 @@ import {
55
} from '@devhelpr/visual-programming-system';
66
import { NodeInfo } from '@devhelpr/web-flow-executor';
77

8+
/*
9+
TODO : fix that this work for both main thread and worker
10+
11+
... currently this is only used in the worker AND it is also called from the main thread when
12+
using the Timeline slider... but with the wrong input (the result of the previous node
13+
... instead of the output of the current node)
14+
)
15+
16+
17+
... sendOutputNode opgeven aan flowengine?
18+
19+
*/
20+
821
export const pieChartVisual: NodeVisual<NodeInfo> = {
922
updateVisual: (data: unknown, parentNode: HTMLElement) => {
23+
console.log('pieChartVisual', data);
1024
// Clear the parent node before rendering... should this be handled by the framework?
1125
parentNode.innerHTML = '';
1226
renderElement(<div>Pie Chart {data}</div>, parentNode);

‎apps/vps-web/src/app/custom-nodes/classes/base-rect-node-class.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,10 @@ export class BaseRectNode {
6666
this.flowEngine = flowEngine;
6767
}
6868

69+
initNode(_node: IRectNodeComponent<NodeInfo>) {
70+
//
71+
}
72+
6973
updateVisual: ((data: any) => void) | undefined = undefined;
7074

7175
getSettingsPopup:

‎apps/vps-web/src/app/custom-nodes/classes/rect-node-class.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,16 @@ export const createNodeClass = (
9292
static readonly nodeTitle: string = nodeDefinition.nodeTypeName;
9393
static readonly category: string = nodeDefinition.category ?? 'Default';
9494
static readonly description: string = nodeDefinition.description;
95+
// node.nodeInfo.updatesVisualAfterCompute
96+
97+
initNode(node: IRectNodeComponent<NodeInfo>) {
98+
super.initNode(node);
99+
if (!node.nodeInfo) {
100+
node.nodeInfo = {};
101+
}
102+
103+
node.nodeInfo.updatesVisualAfterCompute = true;
104+
}
95105

96106
initializeCompute = () => {
97107
if (compute.initializeCompute) {

‎apps/vps-web/src/app/custom-nodes/rect-node.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -164,6 +164,9 @@ export const getRectNode =
164164

165165
rectNode.rectInstance = rect;
166166
rectNode.canvasAppInstance = nodeInstance.contextInstance;
167+
168+
rectNode.initNode(node);
169+
167170
rectNode.onResize = (width: number, height: number) => {
168171
node.restrictHeight = height;
169172
if (height < (node?.height ?? 0)) {

‎libs/app-canvas/src/app/flow-app.element.tsx‎

Lines changed: 53 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1537,6 +1537,15 @@ export class FlowAppElement extends AppElement<NodeInfo> {
15371537
return { step, pathStep, stepSize };
15381538
};
15391539

1540+
const getNextStep = (step: number) => {
1541+
if (step + 1 >= connectionExecuteHistory.length) {
1542+
return false;
1543+
}
1544+
const pathStep = connectionExecuteHistory[step + 1];
1545+
1546+
return { step, pathStep };
1547+
};
1548+
15401549
const updateMessageBubble = (sliderValue: number) => {
15411550
const result = getSliderNodeByPosition(sliderValue);
15421551
if (result === false) {
@@ -1636,10 +1645,27 @@ export class FlowAppElement extends AppElement<NodeInfo> {
16361645
const nodeState = pathStep.nodeStates.get(
16371646
pathStep.connection.endNode.id
16381647
);
1639-
pathStep.connection.endNode.nodeInfo?.updateVisual(
1640-
pathStep.connectionValue,
1641-
nodeState
1642-
);
1648+
if (
1649+
pathStep.connection.endNode.nodeInfo.updatesVisualAfterCompute
1650+
) {
1651+
const nextStep = getNextStep(step);
1652+
console.log('updatesVisualAfterCompute', nextStep, step);
1653+
if (nextStep) {
1654+
pathStep.connection.endNode.nodeInfo?.updateVisual(
1655+
pathStep.connectionValue
1656+
);
1657+
} else {
1658+
pathStep.connection.endNode.nodeInfo?.updateVisual(
1659+
pathStep.connectionValue,
1660+
nodeState
1661+
);
1662+
}
1663+
} else {
1664+
pathStep.connection.endNode.nodeInfo?.updateVisual(
1665+
pathStep.connectionValue,
1666+
nodeState
1667+
);
1668+
}
16431669
} else {
16441670
if (pathStep.nextNodeStates) {
16451671
this.canvasApp?.setNodeStates(pathStep.nextNodeStates);
@@ -2530,7 +2556,17 @@ export class FlowAppElement extends AppElement<NodeInfo> {
25302556
undefined,
25312557
runCounter,
25322558
false,
2533-
this.flowEngine?.computeAsync
2559+
this.flowEngine?.computeAsync,
2560+
(data, node) => {
2561+
if (
2562+
node &&
2563+
node.nodeInfo &&
2564+
node.nodeInfo.updateVisual &&
2565+
node.nodeInfo.updatesVisualAfterCompute
2566+
) {
2567+
node.nodeInfo.updateVisual(data);
2568+
}
2569+
}
25342570
);
25352571
} else {
25362572
run(
@@ -2543,7 +2579,18 @@ export class FlowAppElement extends AppElement<NodeInfo> {
25432579
undefined,
25442580
undefined,
25452581
runCounter,
2546-
false
2582+
false,
2583+
undefined,
2584+
(data, node) => {
2585+
if (
2586+
node &&
2587+
node.nodeInfo &&
2588+
node.nodeInfo.updateVisual &&
2589+
node.nodeInfo.updatesVisualAfterCompute
2590+
) {
2591+
node.nodeInfo.updateVisual(data);
2592+
}
2593+
}
25472594
);
25482595
}
25492596
}

‎libs/web-flow-executor/src/flow-engine/flow-engine.ts‎

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -171,11 +171,11 @@ const triggerExecution = (
171171
) => {
172172
let result: any = false;
173173
const formInfo = nextNode.nodeInfo as unknown as NodeInfo;
174-
const storeNodeStates = () => {
174+
const storeNodeStates = (storeInput: string | any[]) => {
175175
const nodeStates = canvasApp.getNodeStates();
176176
if (!canvasApp.isContextOnly) {
177-
let inputToHistory: any = input;
178-
const inputAsObject: any = input;
177+
let inputToHistory: any = storeInput;
178+
const inputAsObject: any = storeInput;
179179
if (
180180
inputAsObject &&
181181
typeof inputAsObject === 'object' &&
@@ -193,7 +193,9 @@ const triggerExecution = (
193193
connectionExecuteHistory.push(lastConnectionExecutionHistory);
194194
}
195195
};
196-
storeNodeStates();
196+
if (!nextNode.nodeInfo?.updatesVisualAfterCompute) {
197+
storeNodeStates(result);
198+
}
197199
if (runCounter) {
198200
if (
199201
nextNode.nodeInfo?.isUINode &&
@@ -266,6 +268,9 @@ const triggerExecution = (
266268
// result = computeResult.result ?? computeResult.output ?? '';
267269

268270
sendOutputToNode?.(computeResult.output, nextNode);
271+
if (nextNode.nodeInfo?.updatesVisualAfterCompute) {
272+
storeNodeStates(computeResult.output);
273+
}
269274

270275
decrementHelper(
271276
runCounter,
@@ -859,10 +864,10 @@ export const runNodeFromThumb = (
859864
connection: IConnectionNodeComponent<NodeInfo>,
860865
scopeId?: string
861866
) => {
862-
const storeNodeStates = () => {
867+
const storeNodeStates = (storeInput: string | any[]) => {
863868
if (!canvasApp.isContextOnly) {
864-
let inputToHistory: any = input;
865-
const inputAsObject: any = input;
869+
let inputToHistory: any = storeInput;
870+
const inputAsObject: any = storeInput;
866871
if (
867872
inputAsObject &&
868873
typeof inputAsObject === 'object' &&
@@ -881,7 +886,9 @@ export const runNodeFromThumb = (
881886
connectionExecuteHistory.push(lastConnectionExecutionHistory);
882887
}
883888
};
884-
storeNodeStates();
889+
if (!nextNode.nodeInfo?.updatesVisualAfterCompute) {
890+
storeNodeStates(input);
891+
}
885892
firstStoreNodeState = false;
886893

887894
if (runCounter) {
@@ -953,6 +960,10 @@ export const runNodeFromThumb = (
953960
result = computeResult.result ?? computeResult.output ?? '';
954961
sendOutputToNode?.(result, nextNode);
955962

963+
if (nextNode.nodeInfo?.updatesVisualAfterCompute) {
964+
storeNodeStates(result);
965+
}
966+
956967
decrementHelper(runCounter, computeResult.output ?? '', nextNode);
957968
result = computeResult.result;
958969
followPath = computeResult.followPath;

‎libs/web-flow-executor/src/types/node-info.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ export interface NodeInfo extends BaseNodeInfo {
3636
supportsDecorators?: boolean;
3737

3838
updateVisual?: (data: any, dataContext?: any) => void;
39+
updatesVisualAfterCompute?: boolean;
3940

4041
initializeOnStartFlow?: boolean;
4142
isUINode?: boolean;

0 commit comments

Comments
 (0)