improved creating connections mode

Author: devhelpr

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

@@ -532,7 +532,7 @@ export function Toolbar<T extends BaseNodeInfo>(props: {
           return false;
         }}
       >
-        <span class="icon icon-arrow_right_alt px-2" />
+        <span class="inline-block icon icon-arrow_right_alt px-2 -rotate-45 scale-[1.5]" />
       </button>
       <button
         getElement={(element: HTMLButtonElement) => {

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

@@ -13,5 +13,6 @@ export const getRectNodeCssClasses = () => {
     dragging: 'dragging',
     draggingNoPointer: 'pointer-events-none',
     draggingPointerAuto: 'pointer-events-auto',
+    creatingConnection: 'cursor-crosshair',
   };
 };

libs/visual-programming-system/src/components/rect-thumb.ts

@@ -394,12 +394,23 @@ export class RectThumb<T extends BaseNodeInfo> extends Rect<T> {
     //   this.nodeComponent.id,
     //   this.nodeComponent
     // );
+
     (this.nodeComponent.domElement as unknown as SVGElement).classList.remove(
       this.cssClasses.droppingCursorPointer
     );
-    (this.nodeComponent.domElement as unknown as SVGElement).classList.add(
-      this.cssClasses.droppingCursorPointer
-    );
+    const isCreatingConnecting =
+      this.canvasApp?.getCanvasAttribute('mode') === 'create-connection';
+
+    if (isCreatingConnecting) {
+      (this.nodeComponent.domElement as unknown as SVGElement).classList.add(
+        this.cssClasses.creatingConnection
+      );
+    } else {
+      (this.nodeComponent.domElement as unknown as SVGElement).classList.add(
+        this.cssClasses.droppingCursorPointer
+      );
+    }
+
     (this.nodeComponent.domElement as unknown as SVGElement).classList.remove(
       this.cssClasses.droppingNotAllowed
     );
@@ -577,6 +588,9 @@ export class RectThumb<T extends BaseNodeInfo> extends Rect<T> {
     (this.nodeComponent.domElement as unknown as SVGElement).classList.remove(
       this.cssClasses.dropping
     );
+    (this.nodeComponent.domElement as unknown as SVGElement).classList.remove(
+      this.cssClasses.creatingConnection
+    );
 
     (this.nodeComponent.domElement as unknown as SVGElement).style.filter =
       'none';