feat: Introduce CursorLayer (#149)

Author: draedful

src/components/canvas/GraphComponent/index.tsx

@@ -133,6 +133,7 @@ export class GraphComponent<
             return;
           }
           this.context.graph.getGraphLayer().captureEvents(this);
+          this.context.graph.lockCursor("grabbing");
           const xy = getXY(this.context.canvas, event);
           startDragCoords = this.context.camera.applyToPoint(xy[0], xy[1]);
         })
@@ -150,6 +151,7 @@ export class GraphComponent<
         })
         .on(EVENTS.DRAG_END, (_event: MouseEvent) => {
           this.context.graph.getGraphLayer().releaseCapture();
+          this.context.graph.unlockCursor();
           startDragCoords = undefined;
           onDrop?.(_event);
         });

src/components/canvas/blocks/Block.ts

@@ -93,6 +93,8 @@ export class Block<T extends TBlock = TBlock, Props extends TBlockProps = TBlock
 > {
   public static IS = IS_BLOCK_TYPE;
 
+  public cursor?: string = "pointer";
+
   // from controller mixin
   public readonly isBlock = true;
 

src/components/canvas/blocks/controllers/BlockController.ts

@@ -61,13 +61,15 @@ export class BlockController {
       dragListener(block.context.ownerDocument)
         .on(EVENTS.DRAG_START, (_event: MouseEvent) => {
           block.context.graph.getGraphLayer().captureEvents(block);
+          block.context.graph.lockCursor("grabbing");
           dispatchEvents(draggingElements, createCustomDragEvent(EVENTS.DRAG_START, _event));
         })
         .on(EVENTS.DRAG_UPDATE, (_event: MouseEvent) => {
           dispatchEvents(draggingElements, createCustomDragEvent(EVENTS.DRAG_UPDATE, _event));
         })
         .on(EVENTS.DRAG_END, (_event: MouseEvent) => {
           block.context.graph.getGraphLayer().releaseCapture();
+          block.context.graph.unlockCursor();
           dispatchEvents(draggingElements, createCustomDragEvent(EVENTS.DRAG_END, _event));
         });
     });

src/components/canvas/layers/connectionLayer/ConnectionLayer.ts

@@ -200,14 +200,16 @@ export class ConnectionLayer extends Layer<
       nativeEvent.stopPropagation();
       dragListener(this.root.ownerDocument)
         .on(EVENTS.DRAG_START, (dStartEvent: MouseEvent) => {
+          this.context.graph.lockCursor("crosshair");
           this.onStartConnection(dStartEvent, this.context.graph.getPointInCameraSpace(dStartEvent));
         })
         .on(EVENTS.DRAG_UPDATE, (dUpdateEvent: MouseEvent) =>
           this.onMoveNewConnection(dUpdateEvent, this.context.graph.getPointInCameraSpace(dUpdateEvent))
         )
-        .on(EVENTS.DRAG_END, (dEndEvent: MouseEvent) =>
-          this.onEndNewConnection(this.context.graph.getPointInCameraSpace(dEndEvent))
-        );
+        .on(EVENTS.DRAG_END, (dEndEvent: MouseEvent) => {
+          this.context.graph.unlockCursor();
+          this.onEndNewConnection(this.context.graph.getPointInCameraSpace(dEndEvent));
+        });
     }
   };