feat: add double-click event support for graph components (#92)

Co-authored-by: Antamansid <[email protected]>

Author: Antamansid

src/graphEvents.ts

@@ -14,11 +14,12 @@ export const extractNativeGraphMouseEvent = (event: GraphMouseEvent) => {
   return event.detail.sourceEvent instanceof MouseEvent ? event.detail.sourceEvent : null;
 };
 
-export type GraphMouseEventNames = "mousedown" | "click" | "mouseenter" | "mouseleave";
+export type GraphMouseEventNames = "mousedown" | "click" | "dblclick" | "mouseenter" | "mouseleave";
 
 export interface BaseGraphEventDefinition {
   mousedown: (event: GraphMouseEvent) => void;
   click: (event: GraphMouseEvent) => void;
+  dblclick: (event: GraphMouseEvent) => void;
   mouseenter: (event: GraphMouseEvent) => void;
   mouseleave: (event: GraphMouseEvent) => void;
 }
@@ -41,7 +42,7 @@ export interface GraphEventsDefinitions extends BaseGraphEventDefinition {
   "colors-changed": (event: CustomEvent<{ colors: TGraphColors }>) => void;
   "state-change": (event: CustomEvent<{ state: GraphState }>) => void;
 }
-const graphMouseEvents = ["mousedown", "click", "mouseenter", "mousemove", "mouseleave"];
+const graphMouseEvents = ["mousedown", "click", "dblclick", "mouseenter", "mousemove", "mouseleave"];
 
 export type UnwrapGraphEvents<
   Key extends keyof GraphEventsDefinitions,

src/react-component/events.ts

@@ -2,6 +2,7 @@ import { GraphEventsDefinitions, UnwrapGraphEvents, UnwrapGraphEventsDetail } fr
 
 export type TGraphEventCallbacks = {
   click: (data: UnwrapGraphEventsDetail<"click">, event: UnwrapGraphEvents<"click">) => void;
+  dblclick: (data: UnwrapGraphEventsDetail<"dblclick">, event: UnwrapGraphEvents<"dblclick">) => void;
   onCameraChange: (data: UnwrapGraphEventsDetail<"camera-change">, event: UnwrapGraphEvents<"camera-change">) => void;
   onBlockDragStart: (
     data: UnwrapGraphEventsDetail<"block-drag-start">,
@@ -30,6 +31,7 @@ export type GraphEvent<T extends keyof TGraphEventCallbacks> = Parameters<TGraph
 
 export const GraphCallbacksMap: Record<keyof TGraphEventCallbacks, keyof GraphEventsDefinitions> = {
   click: "click",
+  dblclick: "dblclick",
   onCameraChange: "camera-change",
   onBlockDragStart: "block-drag-start",
   onBlockDrag: "block-drag",

src/stories/main/GraphEditor.tsx

@@ -28,6 +28,7 @@ const action =
 const callbacks = {
   mousedown: action("mousedown"),
   click: action("click"),
+  dblclick: action("dblclick"),
   mouseenter: action("mouseenter"),
   mouseleave: action("mouseleave"),
   onCameraChange: action("onCameraChange"),