fix: graph collision detection for drag/drop (#1517)

v3/src/components/graph/components/graph-component.tsx

@@ -11,16 +11,20 @@ import {useGraphController} from "../hooks/use-graph-controller"
 import {GraphLayoutContext} from '../hooks/use-graph-layout-context'
 import {useInitGraphLayout} from '../hooks/use-init-graph-layout'
 import {InstanceIdContext, useNextInstanceId} from "../../../hooks/use-instance-id-context"
+import { registerTileCollisionDetection } from "../../../lib/dnd-kit/dnd-detect-collision"
 import {AxisProviderContext} from '../../axis/hooks/use-axis-provider-context'
 import {AxisLayoutContext} from "../../axis/models/axis-layout-context"
 import {usePixiPointsArray} from '../../data-display/hooks/use-pixi-points-array'
 import {GraphController} from "../models/graph-controller"
 import {isGraphContentModel} from "../models/graph-content-model"
 import {Graph} from "./graph"
+import { graphCollisionDetection, kGraphIdBase } from './graph-drag-drop'
 import { kTitleBarHeight } from "../../constants"
 import {AttributeDragOverlay} from "../../drag-drop/attribute-drag-overlay"
 import "../register-adornment-types"
 
+registerTileCollisionDetection(kGraphIdBase, graphCollisionDetection)
+
 export const GraphComponent = observer(function GraphComponent({tile}: ITileBaseProps) {
   const graphModel = isGraphContentModel(tile?.content) ? tile?.content : undefined
 

v3/src/components/graph/components/graph-drag-drop.ts

@@ -0,0 +1,21 @@
+import { closestCenter, CollisionDetection, pointerWithin, rectIntersection } from "@dnd-kit/core"
+
+export const kGraphIdBase = "graph"
+
+const isGraphDropTarget = ({ id }: { id: string | number }) => /^graph.+-drop$/.test(`${id}`)
+
+export const graphCollisionDetection: CollisionDetection = (args) => {
+  const graphTargets = args.droppableContainers.filter(isGraphDropTarget)
+
+  // prioritize pointer within a target; need fallback for keyboard sensor
+  const collisions = pointerWithin({ ...args, droppableContainers: graphTargets })
+  if (collisions.length) return collisions
+
+  // determine the targets that are intersecting the drag rect
+  const intersectingTargets = rectIntersection({ ...args, droppableContainers: graphTargets })
+  const intersectingTargetIds = new Set<string>(intersectingTargets.map(({ id }) => `${id}`))
+
+  // use closest center to choose among the intersecting drop targets
+  const intersectingContainers = graphTargets.filter(({ id }) => intersectingTargetIds.has(`${id}`))
+  return closestCenter({ ...args, droppableContainers: intersectingContainers })
+}

v3/src/lib/dnd-kit/dnd-detect-collision.ts

@@ -39,11 +39,5 @@ export const dndDetectCollision: CollisionDetection = (args) => {
     }
   }
 
-  // if we're in the graph component, use rectangle intersection on the drop targets (e.g. axes, plot)
-  if (collisions.find(collision => /graph.+component-drop-overlay/.test(`${collision.id}`))) {
-    const containers = args.droppableContainers.filter(({id}) => /graph.+-drop/.test(`${id}`))
-    return rectIntersection({ ...args, droppableContainers: containers })
-  }
-
   return collisions
 }