feat(graph): enhance event handling for mousedown to allow default prevention and improve drag functionality

Author: draedful

src/graph.ts

@@ -9,7 +9,7 @@ import { CursorLayer, CursorLayerCursorTypes } from "./components/canvas/layers/
 import { GraphLayer } from "./components/canvas/layers/graphLayer/GraphLayer";
 import { SelectionLayer } from "./components/canvas/layers/selectionLayer/SelectionLayer";
 import { TGraphColors, TGraphConstants, initGraphColors, initGraphConstants } from "./graphConfig";
-import { GraphEvent, GraphEventParams, GraphEventsDefinitions } from "./graphEvents";
+import { GraphEvent, GraphEventParams, GraphEventsDefinitions, isGraphEvent } from "./graphEvents";
 import { scheduler } from "./lib/Scheduler";
 import { HitTest } from "./services/HitTest";
 import { Layer, LayerPublicProps } from "./services/Layer";
@@ -335,6 +335,25 @@ export class Graph {
       cancelable: true,
     });
     this.eventEmitter.dispatchEvent(event);
+
+    /*
+     * !!!IMPORTANT!!!
+     * Users or layers must be able to prevent the default drag action.
+     * Simply subscribing to the "mousedown" event does not allow handling the event at the very end of the chain,
+     * so manual handling of the event is required here.
+     *
+     * In example - NewBlockLayer prevent default drag action to allow duplicate blocks with Alt key.
+     *
+     * @example
+     * ```typescript
+     * graph.on("mousedown", (event) => {
+     *   event.preventDefault(); // Prevent drag
+     * });
+     * ```
+     * */
+    if (eventName === "mousedown" && isGraphEvent(event) && !event.isDefaultPrevented()) {
+      this.dragService.handleMouseDown(event);
+    }
     return event;
   }
 

src/graphEvents.ts

@@ -72,6 +72,10 @@ export class GraphEvent<T = unknown> extends CustomEvent<T> {
   public stopGraphEventPropagation() {
     this.graphEventPropagationStopped = true;
   }
+
+  public isDefaultPrevented() {
+    return this.graphEventDefaultPrevented || this.defaultPrevented;
+  }
 }
 
 export function isGraphEvent<T = unknown>(event: CustomEvent<T>): event is GraphEvent<T> {

src/services/drag/DragService.ts

@@ -52,9 +52,9 @@ export class DragService {
   public readonly $state = signal<DragState>(this.createIdleState());
 
   constructor(private graph: Graph) {
-    this.unsubscribeMouseDown = graph.on("mousedown", this.handleMouseDown, {
-      capture: true,
-    });
+    // this.unsubscribeMouseDown = graph.on("mousedown", this.handleMouseDown, {
+    //   capture: true,
+    // });
   }
 
   /**
@@ -98,7 +98,7 @@ export class DragService {
   /**
    * Handle mousedown on graph - determine if drag should start
    */
-  private handleMouseDown = (event: GraphMouseEvent): void => {
+  public handleMouseDown = (event: GraphMouseEvent): void => {
     // Prevent initiating new drag while one is already in progress
     // Check actual drag state, not just emitter presence (emitter may exist but drag not started yet)
     if (this.currentDragEmitter && this.$state.value.isDragging) {