Skip to content

Commit d2b7682

Browse files
devhelprdevhelpr
committed
wip preview during drag for expression node
1 parent ec5fe8a commit d2b7682

File tree

8 files changed

+321
-71
lines changed

8 files changed

+321
-71
lines changed

‎apps/vps-web/public/example-flows/openai-chat.json‎

Lines changed: 55 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,8 @@
4646
"id": "d186a002-218b-47dc-aae8-07522a3da6ed",
4747
"x": 4884.506147983388,
4848
"y": 1009.1273282872045,
49-
"width": 120.00009833855496,
50-
"height": 271.9999843224544,
49+
"width": 119.99988753750729,
50+
"height": 55.9999475175034,
5151
"nodeType": "Shape",
5252
"nodeInfo": {
5353
"type": "show-input",
@@ -63,8 +63,8 @@
6363
"id": "383eb9cf-3b45-489e-8281-720b702b9159",
6464
"x": 3512.552987627518,
6565
"y": 136.17347981853035,
66-
"width": 201.1171873586062,
67-
"height": 247.99996465474342,
66+
"width": 174.4217534240508,
67+
"height": 84.00000505633744,
6868
"nodeType": "Shape",
6969
"nodeInfo": {
7070
"type": "scope-variable",
@@ -187,8 +187,8 @@
187187
"id": "b936e1cd-134c-4476-b412-342c7d89c762",
188188
"x": 5787.047025933024,
189189
"y": 1453.0422559463495,
190-
"width": 119.99998240247322,
191-
"height": 127.99991303160962,
190+
"width": 119.99988753750729,
191+
"height": 55.9999475175034,
192192
"nodeType": "Shape",
193193
"nodeInfo": {
194194
"type": "show-input",
@@ -241,8 +241,8 @@
241241
"id": "6e164a19-962b-412d-ad81-8505dcc24783",
242242
"x": 4289.45230369801,
243243
"y": 131.82249463348714,
244-
"width": 334.2420187391389,
245-
"height": 391.99992546532206,
244+
"width": 174.4217534240508,
245+
"height": 83.99992127625511,
246246
"nodeType": "Shape",
247247
"nodeInfo": {
248248
"type": "scope-variable",
@@ -471,8 +471,8 @@
471471
"id": "597efff5-91e1-40f2-bd4d-993567abb93a",
472472
"x": 3907.5027324817256,
473473
"y": 121.30990247573527,
474-
"width": 174.42199402554016,
475-
"height": 84.00017949798207,
474+
"width": 174.4217534240508,
475+
"height": 84.00000505633744,
476476
"nodeType": "Shape",
477477
"nodeInfo": {
478478
"type": "scope-variable",
@@ -713,8 +713,8 @@
713713
"id": "f02b98f8-d7be-40ec-82da-0fcaddda5663",
714714
"x": 7104.066480245833,
715715
"y": 2410.638712709603,
716-
"width": 119.99998240247322,
717-
"height": 272.0003692984435,
716+
"width": 119.99988753750729,
717+
"height": 55.9999475175034,
718718
"nodeType": "Shape",
719719
"nodeInfo": {
720720
"type": "show-input",
@@ -866,8 +866,8 @@
866866
"id": "4cc0b061-02d6-420b-9c3f-ed50df95794b",
867867
"x": 3910.384778031812,
868868
"y": 289.10280548571495,
869-
"width": 174.42199402554016,
870-
"height": 83.99997599832973,
869+
"width": 174.4217534240508,
870+
"height": 84.00000505633744,
871871
"nodeType": "Shape",
872872
"nodeInfo": {
873873
"type": "scope-variable",
@@ -971,6 +971,44 @@
971971
"isSettingsPopup": true
972972
}
973973
},
974+
{
975+
"id": "3c21441b-9128-473c-b938-8a05b8d324e2",
976+
"x": 2337.595865004378,
977+
"y": 929.3991074870719,
978+
"width": 239.14025762663505,
979+
"height": 33.551151440424064,
980+
"nodeType": "Shape",
981+
"nodeInfo": {
982+
"type": "annotation",
983+
"formValues": {
984+
"annotation": "Whats the weather in iceland?",
985+
"fontSize": "16",
986+
"fontWeight": "false"
987+
},
988+
"isSettingsPopup": true,
989+
"nodeCannotBeReplaced": true,
990+
"isAnnotation": true
991+
}
992+
},
993+
{
994+
"id": "addd6ec3-fb2b-40d2-8c4d-06da32d0d6f9",
995+
"x": 2085.1978430032973,
996+
"y": 1376.7902189482422,
997+
"width": 240,
998+
"height": 68.27181070535289,
999+
"nodeType": "Shape",
1000+
"nodeInfo": {
1001+
"type": "annotation",
1002+
"formValues": {
1003+
"annotation": "Whats the weather in the Netherlands?",
1004+
"fontSize": "16",
1005+
"fontWeight": "false"
1006+
},
1007+
"isSettingsPopup": true,
1008+
"nodeCannotBeReplaced": true,
1009+
"isAnnotation": true
1010+
}
1011+
},
9741012
{
9751013
"id": "a16c5c54-c867-41af-a922-9a014786c513",
9761014
"x": 4735.060180549357,
@@ -988,7 +1026,7 @@
9881026
},
9891027
{
9901028
"id": "9c9efadf-8473-439f-849b-1fa8cbc09ad5",
991-
"x": 5004.506246321943,
1029+
"x": 5004.506035520895,
9921030
"y": 1039.1273282872044,
9931031
"endX": 5209.1160447793645,
9941032
"endY": 1032.1597462040577,
@@ -1078,7 +1116,7 @@
10781116
},
10791117
{
10801118
"id": "7619188f-269f-46a1-b144-d641b411a547",
1081-
"x": 5907.047008335498,
1119+
"x": 5907.046913470532,
10821120
"y": 1483.0422559463495,
10831121
"endX": 6125.624335242733,
10841122
"endY": 1685.1782664011737,
@@ -1363,7 +1401,7 @@
13631401
},
13641402
{
13651403
"id": "aa63fd0c-c4ee-46b8-abd4-d6d2d6c142c2",
1366-
"x": 7224.066462648307,
1404+
"x": 7224.066367783341,
13671405
"y": 2440.638712709603,
13681406
"endX": 7514.402511648329,
13691407
"endY": 2446.8065326820933,
@@ -1630,46 +1668,6 @@
16301668
"nodeType": "Connection",
16311669
"layer": 1,
16321670
"nodeInfo": {}
1633-
},
1634-
{
1635-
"id": "3c21441b-9128-473c-b938-8a05b8d324e2",
1636-
"x": 2337.595752835108,
1637-
"y": 927.2445510994069,
1638-
"width": 239.14025762663505,
1639-
"height": 33.551151440424064,
1640-
"nodeType": "Shape",
1641-
"nodeInfo": {
1642-
"type": "annotation",
1643-
"formValues": {
1644-
"annotation": "Whats the weather in iceland?",
1645-
"fontSize": "16",
1646-
"fontWeight": "false"
1647-
},
1648-
"isSettingsPopup": true,
1649-
"nodeCannotBeReplaced": true,
1650-
"isAnnotation": true,
1651-
"taskType": "annotation"
1652-
}
1653-
},
1654-
{
1655-
"id": "addd6ec3-fb2b-40d2-8c4d-06da32d0d6f9",
1656-
"x": 2085.1980859100327,
1657-
"y": 1376.5811729497887,
1658-
"width": 240,
1659-
"height": 68.27181070535289,
1660-
"nodeType": "Shape",
1661-
"nodeInfo": {
1662-
"type": "annotation",
1663-
"formValues": {
1664-
"annotation": "Whats the weather in the Netherlands?",
1665-
"fontSize": "16",
1666-
"fontWeight": "false"
1667-
},
1668-
"isSettingsPopup": true,
1669-
"nodeCannotBeReplaced": true,
1670-
"isAnnotation": true,
1671-
"taskType": "annotation"
1672-
}
16731671
}
16741672
]
16751673
}

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

Lines changed: 124 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,7 @@ import {
119119
removeAllCompositions,
120120
resetRunIndex,
121121
run,
122+
runNode,
122123
runNodeFromThumb,
123124
runPath,
124125
runPathForNodeConnectionPairs,
@@ -189,7 +190,8 @@ export class FlowAppElement extends AppElement<NodeInfo> {
189190
| ((
190191
shouldClearExecutionHistory?: boolean,
191192
isStoreOnly?: boolean,
192-
flowChangeType?: FlowChangeType
193+
flowChangeType?: FlowChangeType,
194+
node?: IRectNodeComponent<NodeInfo>
193195
) => void)
194196
| undefined = undefined;
195197

@@ -251,6 +253,81 @@ export class FlowAppElement extends AppElement<NodeInfo> {
251253
this.canvasActionPayload = payload;
252254
});
253255

256+
let intervalCancel: any = undefined;
257+
let intervalPreview: any = undefined;
258+
this.canvasApp.setOnDraggingOverNode((node, draggedNode, isCancelling) => {
259+
const connection = draggedNode as IConnectionNodeComponent<NodeInfo>;
260+
if (connection.startNodeThumb) {
261+
console.log('draggedNode', draggedNode, isCancelling);
262+
const text = node.nodeInfo?.formValues?.annotation;
263+
if (
264+
text &&
265+
node &&
266+
node.nodeInfo?.type === 'annotation' &&
267+
connection &&
268+
connection.nodeType === NodeType.Connection &&
269+
connection.endNode &&
270+
connection.startNodeThumb &&
271+
this.canvasApp
272+
) {
273+
const endNode = connection.endNode;
274+
275+
if (isCancelling) {
276+
clearTimeout(intervalCancel);
277+
clearTimeout(intervalPreview);
278+
intervalPreview = undefined;
279+
console.log('CANCEL Preview!', getIsStopAnimations());
280+
resetRunIndex();
281+
(this.runButton?.domElement as HTMLButtonElement).disabled = false;
282+
setStopAnimations();
283+
// Wait until isStopAnimations is set to false
284+
intervalCancel = setInterval(() => {
285+
if (!getIsStopAnimations()) {
286+
clearInterval(intervalCancel);
287+
if (
288+
endNode.nodeInfo?.supportsPreview &&
289+
endNode.nodeInfo?.cancelPreview
290+
) {
291+
endNode.nodeInfo?.cancelPreview();
292+
}
293+
}
294+
}, 0);
295+
} else if (
296+
endNode.nodeInfo?.supportsPreview &&
297+
endNode.nodeInfo?.compute
298+
) {
299+
clearTimeout(intervalPreview);
300+
301+
console.log('TRIGGER Preview!', getIsStopAnimations());
302+
resetRunIndex();
303+
(this.runButton?.domElement as HTMLButtonElement).disabled = false;
304+
setStopAnimations();
305+
// Wait until isStopAnimations is set to false
306+
intervalPreview = setInterval(() => {
307+
if (!getIsStopAnimations()) {
308+
clearInterval(intervalPreview);
309+
if (endNode.nodeInfo?.compute) {
310+
endNode.nodeInfo?.compute(
311+
this.transformValueForNodeTrigger(text),
312+
-1,
313+
{
314+
showPreview: true,
315+
},
316+
undefined,
317+
undefined,
318+
this.createRunCounterContext(false, false),
319+
connection
320+
);
321+
}
322+
}
323+
}, 0);
324+
}
325+
}
326+
}
327+
328+
return false;
329+
});
330+
254331
this.canvasApp.setOnDroppedOnNode((node, droppedNode) => {
255332
const connection = droppedNode as IConnectionNodeComponent<NodeInfo>;
256333
if (connection.startNodeThumb) {
@@ -281,6 +358,14 @@ export class FlowAppElement extends AppElement<NodeInfo> {
281358
interval = setInterval(() => {
282359
if (!getIsStopAnimations()) {
283360
clearInterval(interval);
361+
clearInterval(intervalPreview);
362+
intervalPreview = undefined;
363+
if (
364+
endNode.nodeInfo?.supportsPreview &&
365+
endNode.nodeInfo?.cancelPreview
366+
) {
367+
endNode.nodeInfo?.cancelPreview();
368+
}
284369
runNodeFromThumb(
285370
startNodeThumb,
286371
canvasApp,
@@ -291,7 +376,7 @@ export class FlowAppElement extends AppElement<NodeInfo> {
291376
endNode,
292377
undefined,
293378
undefined,
294-
this.createRunCounterContext(true, false)
379+
this.createRunCounterContext(false, false)
295380
);
296381
}
297382
}, 0);
@@ -475,7 +560,8 @@ export class FlowAppElement extends AppElement<NodeInfo> {
475560
const canvasUpdated = (
476561
shouldClearExecutionHistory = false,
477562
_isStoreOnly?: boolean,
478-
flowChangeType: FlowChangeType = FlowChangeType.Unknown
563+
flowChangeType: FlowChangeType = FlowChangeType.Unknown,
564+
node?: INodeComponent<NodeInfo>
479565
) => {
480566
if (
481567
this.currentCanvasApp?.isContextOnly ||
@@ -494,7 +580,8 @@ export class FlowAppElement extends AppElement<NodeInfo> {
494580
flowChangeType === FlowChangeType.AddNode ||
495581
flowChangeType === FlowChangeType.UpdateNode ||
496582
flowChangeType === FlowChangeType.AddConnection ||
497-
flowChangeType === FlowChangeType.UpdateConnection
583+
flowChangeType === FlowChangeType.UpdateConnection ||
584+
flowChangeType === FlowChangeType.TriggerNode
498585
) {
499586
let interval: any = undefined;
500587
clearTimeout(interval);
@@ -506,7 +593,30 @@ export class FlowAppElement extends AppElement<NodeInfo> {
506593
interval = setInterval(() => {
507594
if (!getIsStopAnimations()) {
508595
clearInterval(interval);
509-
this.run();
596+
if (flowChangeType === FlowChangeType.TriggerNode) {
597+
if (node && this.canvasApp) {
598+
runNode(
599+
node as IRectNodeComponent<NodeInfo>,
600+
this.canvasApp,
601+
(_input: string | any[]) => {
602+
//
603+
},
604+
undefined,
605+
0,
606+
0,
607+
undefined,
608+
undefined,
609+
undefined,
610+
this.createRunCounterContext(false, false),
611+
false,
612+
{
613+
triggerNode: true,
614+
}
615+
);
616+
}
617+
} else {
618+
this.run();
619+
}
510620
}
511621
}, 0);
512622
}
@@ -520,9 +630,15 @@ export class FlowAppElement extends AppElement<NodeInfo> {
520630
(
521631
shouldClearExecutionHistory?: boolean,
522632
isStoreOnly?: boolean,
523-
flowChangeType?: FlowChangeType
633+
flowChangeType?: FlowChangeType,
634+
node?: INodeComponent<NodeInfo>
524635
) => {
525-
canvasUpdated(shouldClearExecutionHistory, isStoreOnly, flowChangeType);
636+
canvasUpdated(
637+
shouldClearExecutionHistory,
638+
isStoreOnly,
639+
flowChangeType,
640+
node
641+
);
526642
}
527643
);
528644

@@ -2248,7 +2364,7 @@ export class FlowAppElement extends AppElement<NodeInfo> {
22482364
endNode,
22492365
undefined,
22502366
undefined,
2251-
this.createRunCounterContext(true, false)
2367+
this.createRunCounterContext(false, false)
22522368
);
22532369
}
22542370
}, 0);

0 commit comments

Comments
 (0)