Skip to content

Commit 2797202

Browse files
devhelprdevhelpr
committed
improved create-connection mode
1 parent 9830fad commit 2797202

File tree

6 files changed

+58
-28
lines changed

6 files changed

+58
-28
lines changed

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,12 @@ w-min h-min
124124
// }
125125
// }
126126
// console.log('blur', this.rectElement?.textContent);
127+
if (
128+
this.canvasAppInstance?.getCanvasAttribute('create-connection')
129+
) {
130+
event.preventDefault();
131+
return false;
132+
}
127133
if (
128134
this.node?.nodeInfo &&
129135
this.rectElement &&
@@ -144,6 +150,7 @@ w-min h-min
144150
}
145151
}
146152
this.updated();
153+
return true;
147154
}}
148155
></textarea>
149156
</div>

‎apps/vps-web/src/styles.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,11 @@ rect-node:has(.hover) > .shape-circle,
140140
@apply bg-blue-500 text-white;
141141
}
142142

143+
.create-connection-mode .rect-thumb-node input,
144+
.create-connection-mode .rect-thumb-node textarea {
145+
@apply pointer-events-none;
146+
}
147+
143148
/* source : https://cssloaders.github.io/ */
144149
.simple-loader {
145150
width: 16px;

‎libs/app-canvas/src/app/components/toolbar.tsx‎

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -450,14 +450,7 @@ export function Toolbar<T extends BaseNodeInfo>(props: {
450450
popupTriggeredFromEffect = false;
451451
hideUL();
452452

453-
if (
454-
props.canvasAppInstance.getCanvasAttribute('mode') ===
455-
'create-connection'
456-
) {
457-
props.canvasAppInstance.setCanvasAttribute('mode', 'default');
458-
createConnectionButton?.classList.remove('bg-blue-500');
459-
assistantButton?.classList.remove('bg-blue-500');
460-
}
453+
exitCreateConnectionMode();
461454
}
462455
);
463456

@@ -500,6 +493,21 @@ export function Toolbar<T extends BaseNodeInfo>(props: {
500493
}
501494
fillTaskList(tasks, label);
502495
};
496+
497+
const switchToCreateConnectionMode = () => {
498+
props.canvasAppInstance.setCanvasAttribute('mode', 'create-connection');
499+
createConnectionButton?.classList.add('bg-blue-500');
500+
assistantButton?.classList.remove('bg-blue-500');
501+
props.canvasAppInstance.rootElement.classList.add('create-connection-mode');
502+
};
503+
const exitCreateConnectionMode = () => {
504+
props.canvasAppInstance.setCanvasAttribute('mode', 'default');
505+
createConnectionButton?.classList.remove('bg-blue-500');
506+
props.canvasAppInstance.rootElement.classList.remove(
507+
'create-connection-mode'
508+
);
509+
};
510+
503511
let createConnectionButton: HTMLButtonElement | null = null;
504512
let assistantButton: HTMLButtonElement | null = null;
505513
const ToolbarComponent = () => (
@@ -516,18 +524,15 @@ export function Toolbar<T extends BaseNodeInfo>(props: {
516524
click={(event: MouseEvent) => {
517525
event.preventDefault();
518526
event.stopPropagation();
519-
createConnectionButton?.classList.toggle('bg-blue-500');
520-
assistantButton?.classList.remove('bg-blue-500');
527+
// createConnectionButton?.classList.toggle('bg-blue-500');
528+
// assistantButton?.classList.remove('bg-blue-500');
521529
if (
522530
props.canvasAppInstance.getCanvasAttribute('mode') ===
523531
'create-connection'
524532
) {
525-
props.canvasAppInstance.setCanvasAttribute('mode', 'default');
533+
exitCreateConnectionMode();
526534
} else {
527-
props.canvasAppInstance.setCanvasAttribute(
528-
'mode',
529-
'create-connection'
530-
);
535+
switchToCreateConnectionMode();
531536
}
532537
return false;
533538
}}
@@ -541,8 +546,7 @@ export function Toolbar<T extends BaseNodeInfo>(props: {
541546
click={(event: MouseEvent) => {
542547
event.preventDefault();
543548
event.stopPropagation();
544-
545-
createConnectionButton?.classList.remove('bg-blue-500');
549+
exitCreateConnectionMode();
546550
assistantButton?.classList.toggle('bg-blue-500');
547551
if (
548552
props.canvasAppInstance.getCanvasAttribute('mode') === 'assistant'

‎libs/visual-programming-system/src/components/css-classes/thumb-css-classes.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ export const getThumbCssClasses = () => {
77
nodePort: 'node-connector',
88
clipPathStyle: 'circle(25%)',
99
circleClasses: 'origin-center relative',
10-
onPointerOverCursor: 'cursor-crosshair',
10+
onPointerOverCreateConnection: 'cursor-crosshair',
11+
onPointerOverPointer: 'cursor-pointer',
1112
hover: 'hover',
1213
cursorNotAllowed: 'cursor-not-allowed',
1314
dragging: 'dragging',

‎libs/visual-programming-system/src/components/thumb-connection-controller.ts‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -240,7 +240,7 @@ export class ThumbConnectionController<
240240
);
241241

242242
(this.nodeComponent.domElement as unknown as SVGElement).classList.add(
243-
this.cssClasses.onPointerOverCursor
243+
this.cssClasses.onPointerOverPointer
244244
);
245245
(this.nodeComponent.domElement as unknown as SVGElement).classList.add(
246246
this.cssClasses.hovering
@@ -255,7 +255,10 @@ export class ThumbConnectionController<
255255
return;
256256
}
257257
(this.nodeComponent.domElement as unknown as SVGElement).classList.remove(
258-
this.cssClasses.onPointerOverCursor
258+
this.cssClasses.onPointerOverCreateConnection
259+
);
260+
(this.nodeComponent.domElement as unknown as SVGElement).classList.remove(
261+
this.cssClasses.onPointerOverPointer
259262
);
260263
(this.nodeComponent.domElement as unknown as SVGElement).classList.remove(
261264
this.cssClasses.hovering
@@ -283,7 +286,10 @@ export class ThumbConnectionController<
283286
this.cssClasses.cursorNotAllowed
284287
);
285288
(this.nodeComponent.domElement as unknown as SVGElement).classList.remove(
286-
this.cssClasses.onPointerOverCursor
289+
this.cssClasses.onPointerOverCreateConnection
290+
);
291+
(this.nodeComponent.domElement as unknown as SVGElement).classList.remove(
292+
this.cssClasses.onPointerOverPointer
287293
);
288294
(this.nodeComponent.domElement as unknown as SVGElement).classList.remove(
289295
this.cssClasses.hovering
@@ -595,7 +601,10 @@ export class ThumbConnectionController<
595601
}
596602

597603
(this.nodeComponent.domElement as unknown as SVGElement).classList.remove(
598-
this.cssClasses.onPointerOverCursor
604+
this.cssClasses.onPointerOverCreateConnection
605+
);
606+
(this.nodeComponent.domElement as unknown as SVGElement).classList.remove(
607+
this.cssClasses.onPointerOverPointer
599608
);
600609
(this.nodeComponent.domElement as unknown as SVGElement).classList.remove(
601610
this.cssClasses.hovering

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

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -420,7 +420,9 @@ export class ThumbNodeConnector<T extends BaseNodeInfo> extends ThumbNode<T> {
420420
if (connections.length >= maxConnections) {
421421
(
422422
this.nodeComponent.domElement as unknown as SVGElement
423-
).classList.remove(this.cssClasses.onPointerOverCursor);
423+
).classList.remove(
424+
this.cssClasses.onPointerOverCreateConnection
425+
);
424426
console.log('start thumb has max connections reached');
425427
return;
426428
}
@@ -441,7 +443,9 @@ export class ThumbNodeConnector<T extends BaseNodeInfo> extends ThumbNode<T> {
441443
if (connections.length >= maxConnections) {
442444
(
443445
this.nodeComponent.domElement as unknown as SVGElement
444-
).classList.remove(this.cssClasses.onPointerOverCursor);
446+
).classList.remove(
447+
this.cssClasses.onPointerOverCreateConnection
448+
);
445449
console.log('end thumb has max connections reached');
446450
return;
447451
}
@@ -452,11 +456,11 @@ export class ThumbNodeConnector<T extends BaseNodeInfo> extends ThumbNode<T> {
452456
}
453457

454458
(this.nodeComponent.domElement as unknown as SVGElement).classList.remove(
455-
this.cssClasses.onPointerOverCursor
459+
this.cssClasses.onPointerOverCreateConnection
456460
);
457461
if (this.nodeComponent.thumbConnectionType !== ThumbConnectionType.end) {
458462
(this.nodeComponent.domElement as unknown as SVGElement).classList.add(
459-
this.cssClasses.onPointerOverCursor
463+
this.cssClasses.onPointerOverCreateConnection
460464
);
461465
}
462466
(this.nodeComponent.domElement as unknown as SVGElement).classList.add(
@@ -483,7 +487,7 @@ export class ThumbNodeConnector<T extends BaseNodeInfo> extends ThumbNode<T> {
483487

484488
(
485489
this.nodeComponent.domElement as unknown as SVGElement
486-
).classList.remove(this.cssClasses.onPointerOverCursor);
490+
).classList.remove(this.cssClasses.onPointerOverCreateConnection);
487491
(
488492
this.nodeComponent.domElement as unknown as SVGElement
489493
).classList.add(this.cssClasses.cursorNotAllowed);
@@ -530,7 +534,7 @@ export class ThumbNodeConnector<T extends BaseNodeInfo> extends ThumbNode<T> {
530534
this.cssClasses.cursorNotAllowed
531535
);
532536
(this.nodeComponent.domElement as unknown as SVGElement).classList.remove(
533-
this.cssClasses.onPointerOverCursor
537+
this.cssClasses.onPointerOverCreateConnection
534538
);
535539
(this.nodeComponent.domElement as unknown as SVGElement).classList.remove(
536540
this.cssClasses.hover

0 commit comments

Comments
 (0)