Skip to content

Commit c5cb38f

Browse files
devhelprdevhelpr
committed
edit thumbs/ports on compositions
1 parent 87021fb commit c5cb38f

File tree

5 files changed

+124
-27
lines changed

5 files changed

+124
-27
lines changed

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

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,8 @@ import {
3535
IFlowCanvasBase,
3636
renderElement,
3737
createJSXElement,
38+
ThumbType,
39+
ThumbConnectionType,
3840
} from '@devhelpr/visual-programming-system';
3941

4042
import {
@@ -1384,6 +1386,26 @@ export class AppElement<T extends BaseNodeInfo> {
13841386

13851387
setupTasksInDropdown(selectNodeTypeHTMLElement, true, composition.id);
13861388

1389+
let maxInputThumbIndex = -1;
1390+
let maxOutputThumbIndex = -1;
1391+
const existingThumbs: FlowNode<T>[] = [];
1392+
1393+
canvasApp?.elements.forEach((element) => {
1394+
const nodeHelper = element as unknown as IRectNodeComponent<T>;
1395+
const baseNodeInfo = nodeHelper.nodeInfo as BaseNodeInfo;
1396+
if (
1397+
baseNodeInfo?.type === 'thumb-input' ||
1398+
baseNodeInfo?.type === 'thumb-output'
1399+
) {
1400+
existingThumbs.push(mapShapeNodeToFlowNode(nodeHelper));
1401+
if (baseNodeInfo?.type === 'thumb-input') {
1402+
maxInputThumbIndex++;
1403+
} else {
1404+
maxOutputThumbIndex++;
1405+
}
1406+
}
1407+
});
1408+
13871409
const onExitCompositionMode = () => {
13881410
if (composition.id !== this.compositionUnderEdit?.id) {
13891411
(
@@ -1400,6 +1422,81 @@ export class AppElement<T extends BaseNodeInfo> {
14001422
// TODO : indien nieuwe thumb-input/output nodes, dan toevoegen aan compositon node op canvas
14011423
// TODO : indien thumb-input/output nodes verwijderd, dan deze verwijderen van composition node op canvas
14021424

1425+
// use
1426+
// this.addThumbToComposition
1427+
// this.editThumbFromComposition
1428+
// this.deleteThumbFromComposition
1429+
1430+
canvasApp?.elements.forEach((element) => {
1431+
const nodeHelper = element as unknown as IRectNodeComponent<T>;
1432+
const baseNodeInfo = nodeHelper.nodeInfo as BaseNodeInfo;
1433+
if (
1434+
this.canvasApp &&
1435+
(baseNodeInfo?.type === 'thumb-input' ||
1436+
baseNodeInfo?.type === 'thumb-output')
1437+
) {
1438+
const isEXistingThumb = existingThumbs.find((thumb) => {
1439+
return thumb.id === nodeHelper.id;
1440+
});
1441+
if (!isEXistingThumb) {
1442+
// new thumb/port
1443+
1444+
let thumbType: ThumbType = ThumbType.EndConnectorLeft;
1445+
let thumbConnectionType: ThumbConnectionType =
1446+
ThumbConnectionType.end;
1447+
let thumbIndex = maxInputThumbIndex + 1;
1448+
1449+
if (baseNodeInfo?.type === 'thumb-output') {
1450+
thumbType = ThumbType.StartConnectorRight;
1451+
thumbConnectionType = ThumbConnectionType.start;
1452+
thumbIndex = maxOutputThumbIndex + 1;
1453+
maxOutputThumbIndex++;
1454+
} else {
1455+
maxInputThumbIndex++;
1456+
}
1457+
1458+
const newThumb: IThumb = {
1459+
thumbType: thumbType,
1460+
thumbIndex: thumbIndex,
1461+
connectionType: thumbConnectionType,
1462+
color: 'white',
1463+
label: ' ',
1464+
name: nodeHelper.id,
1465+
prefixLabel: baseNodeInfo.formValues?.['thumbName'],
1466+
};
1467+
this.addThumbToComposition(
1468+
this.canvasApp,
1469+
composition.id,
1470+
newThumb
1471+
);
1472+
} else {
1473+
// existing thumb/port
1474+
1475+
let thumbType: ThumbType = ThumbType.EndConnectorLeft;
1476+
let thumbConnectionType: ThumbConnectionType =
1477+
ThumbConnectionType.end;
1478+
if (baseNodeInfo?.type === 'thumb-output') {
1479+
thumbType = ThumbType.StartConnectorRight;
1480+
thumbConnectionType = ThumbConnectionType.start;
1481+
}
1482+
const thumb: IThumb = {
1483+
thumbType: thumbType,
1484+
thumbIndex: 0,
1485+
connectionType: thumbConnectionType,
1486+
color: 'white',
1487+
label: ' ',
1488+
name: nodeHelper.id,
1489+
prefixLabel: baseNodeInfo.formValues?.['thumbName'],
1490+
};
1491+
this.editThumbFromComposition(
1492+
this.canvasApp,
1493+
composition.id,
1494+
thumb
1495+
);
1496+
}
1497+
}
1498+
});
1499+
14031500
// Only store the nodes and not the thumbs and connections to the thumbs
14041501
// nodesIdsToIgnore contains the node and connection id's of the thumbs
14051502
// and connections to the thumbs. In below code this list gets updated

‎libs/app-canvas/src/app/node-task-registry/gl-node-task-registry.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -228,8 +228,8 @@ export const setupGLNodeTaskRegistry = (
228228
registerGLNodeFactory('palette', getPaletteNode, 'Palette');
229229
registerGLNodeFactory('circle-node', getCircleNode, 'Metaball(2d)');
230230

231-
registerGLNodeFactory('thumb-input', getThumbInputNode, 'ThumbInput');
232-
registerGLNodeFactory('thumb-output', getThumbOutputNode, 'ThumbOutput');
231+
registerGLNodeFactory('thumb-input', getThumbInputNode, 'Input port');
232+
registerGLNodeFactory('thumb-output', getThumbOutputNode, 'Output port');
233233

234234
registerGLNodeFactory(
235235
'define-vec2-variable-node',

‎libs/visual-programming-system/src/canvas-app/index.ts‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1552,23 +1552,24 @@ export class FlowCanvas<T extends BaseNodeInfo>
15521552

15531553
if (rectInstance.nodeComponent?.thumbConnectors) {
15541554
const thumbIndex = rectInstance.nodeComponent.thumbConnectors.findIndex(
1555-
(t) =>
1556-
t.thumbIdentifierWithinNode === thumb.thumbIdentifierWithinNode &&
1557-
thumb.thumbIdentifierWithinNode
1555+
(t) => t.thumbName === thumb.name && thumb.name
15581556
);
15591557
if (thumbIndex >= 0) {
15601558
const thumbNode =
15611559
rectInstance.nodeComponent.thumbConnectors[thumbIndex];
15621560

15631561
if (thumbNode) {
1562+
thumbNode.prefixLabel = thumb.prefixLabel;
1563+
updateThumbPrefixLabel(thumb.prefixLabel ?? '', thumbNode);
1564+
15641565
rectInstance.nodeComponent.connections.forEach((c) => {
15651566
if (c.startNodeThumb?.id === thumbNode.id) {
15661567
c.startNodeThumb.thumbConstraint = getThumbConstraint(
15671568
thumb.thumbConstraint
15681569
);
1569-
c.startNodeThumb.prefixLabel = thumb.prefixLabel;
1570+
// c.startNodeThumb.prefixLabel = thumb.prefixLabel;
15701571

1571-
updateThumbPrefixLabel(thumb.prefixLabel ?? '', c.startNodeThumb);
1572+
// updateThumbPrefixLabel(thumb.prefixLabel ?? '', c.startNodeThumb);
15721573

15731574
if (
15741575
(c.startNodeThumb?.thumbConstraint ?? '') !==
@@ -1582,9 +1583,9 @@ export class FlowCanvas<T extends BaseNodeInfo>
15821583
c.endNodeThumb.thumbConstraint = getThumbConstraint(
15831584
thumb.thumbConstraint
15841585
);
1585-
c.endNodeThumb.prefixLabel = thumb.prefixLabel;
1586+
// c.endNodeThumb.prefixLabel = thumb.prefixLabel;
15861587

1587-
updateThumbPrefixLabel(thumb.prefixLabel ?? '', c.endNodeThumb);
1588+
// updateThumbPrefixLabel(thumb.prefixLabel ?? '', c.endNodeThumb);
15881589

15891590
if (
15901591
(c.endNodeThumb?.thumbConstraint ?? '') !==

‎libs/visual-programming-system/src/components/thumb-node-connector.ts‎

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -188,22 +188,21 @@ export class ThumbNodeConnector<T extends BaseNodeInfo> extends ThumbNode<T> {
188188
this.circleElement.domElement
189189
);
190190
}
191-
if (thumb.prefixLabel) {
192-
createElement(
193-
'div',
194-
{
195-
class: `${this.cssClasses.prefixLabelClasses} ${
196-
thumb.prefixLabelCssClass ?? 'text-white'
197-
} ${
198-
thumb.connectionType === ThumbConnectionType.end
199-
? this.cssClasses.prefixLabelEndClasses
200-
: this.cssClasses.prefixLabelStartClasses
201-
}`,
202-
},
203-
this.circleElement.domElement,
204-
thumb.prefixLabel
205-
);
206-
}
191+
createElement(
192+
'div',
193+
{
194+
class: `${this.cssClasses.prefixLabelClasses} ${
195+
thumb.prefixLabelCssClass ?? 'text-white'
196+
} ${
197+
thumb.connectionType === ThumbConnectionType.end
198+
? this.cssClasses.prefixLabelEndClasses
199+
: this.cssClasses.prefixLabelStartClasses
200+
}`,
201+
},
202+
this.circleElement.domElement,
203+
thumb.prefixLabel ?? ''
204+
);
205+
207206
let additionalInnerCirlceClasses = '';
208207
if (connectionType === ThumbConnectionType.end) {
209208
additionalInnerCirlceClasses = this.cssClasses.innerCircleClasses;

‎libs/web-flow-executor/src/node-task-registry/canvas-node-task-registry.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -402,8 +402,8 @@ export const setupCanvasNodeTaskRegistry = (
402402
registerNodeFactory(sendNodeToNodeTreeNodeName, sendNodeToNodeTree);
403403
registerNodeFactory(sendResetToNodeTreeNodeName, sendResetToNodeTree);
404404

405-
registerNodeFactory('thumb-input', getThumbInputNode, 'ThumbInput');
406-
registerNodeFactory('thumb-output', getThumbOutputNode, 'ThumbOutput');
405+
registerNodeFactory('thumb-input', getThumbInputNode, 'Input port');
406+
registerNodeFactory('thumb-output', getThumbOutputNode, 'Output port');
407407

408408
registerNodeFactory('test-node', getTestNode, 'Test Node');
409409
registerNodeFactory(

0 commit comments

Comments
 (0)