Fixes bug where user can drag components under toolshelf (#1584)

* Fixes bug where user can drag components under toolshelf * Changes top limit to codap-container * chore: code review tweaks --------- Co-authored-by: Kirk Swenson <[email protected]>
concord-consortium · Nov 13, 2024 · 7068899 · 7068899
1 parent ba86b99
commit 7068899
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 9 deletions.
diff --git a/v3/src/components/container/container-constants.ts b/v3/src/components/container/container-constants.ts
@@ -1 +1,3 @@
 export const kContainerClass = "codap-container"
+// scrollable document content that bounds drags
+export const kDragContainerClass = "drag-container"
diff --git a/v3/src/components/container/free-tile-row.tsx b/v3/src/components/container/free-tile-row.tsx
@@ -1,9 +1,11 @@
+import { clsx } from "clsx"
 import { observer } from "mobx-react-lite"
 import React, { useEffect, useRef } from "react"
 import { IFreeTileRow } from "../../models/document/free-tile-row"
 import { ITileModel } from "../../models/tiles/tile-model"
 import { uiState } from "../../models/ui-state"
 import { mstReaction } from "../../utilities/mst-reaction"
+import { kDragContainerClass } from "./container-constants"
 import { FreeTileComponent } from "./free-tile-component"
 
 import "./free-tile-row.scss"
@@ -46,8 +48,10 @@ export const FreeTileRowComponent = observer(function FreeTileRowComponent(
     }
   }
 
+  const classes = clsx("free-tile-row", "tile-row", kDragContainerClass)
+
   return (
-    <div className="free-tile-row tile-row" ref={rowRef} onPointerDown={handlePointerDown}>
+    <div className={classes} ref={rowRef} onPointerDown={handlePointerDown}>
       {
         row?.tileIds.map(tileId => {
           const tile = getTile(tileId)

diff --git a/v3/src/hooks/use-drag-drop.ts b/v3/src/hooks/use-drag-drop.ts
@@ -2,7 +2,7 @@ import {
   Active, DataRef, DragEndEvent, Modifier, useDndMonitor,
   useDraggable, UseDraggableArguments, useDroppable, UseDroppableArguments
 } from "@dnd-kit/core"
-import { kTitleBarHeight } from "../components/constants"
+import { kDragContainerClass } from "../components/container/container-constants"
 import { IDataSet } from "../models/data/data-set"
 import { useInstanceIdContext } from "./use-instance-id-context"
 import { useTileModelContext } from "./use-tile-model-context"
@@ -145,12 +145,17 @@ export const containerSnapToGridModifier: Modifier = ({transform, active}) => {
   }
 }
 
-export const restrictDragToArea: Modifier = ({transform, activeNodeRect, containerNodeRect}) =>{
+function isElement(target?: EventTarget | null) : target is Element {
+  return !!target && "closest" in target && typeof target.closest === "function"
+}
+
+export const restrictDragToContainer: Modifier = ({activeNodeRect, activatorEvent, transform}) =>{
   // Prevent dragging upwards beyond the main container but allow dragging freely in other directions
-  const codapContainerTop = kTitleBarHeight
-  if (activeNodeRect && containerNodeRect) {
-    if (activeNodeRect.top + transform.y < codapContainerTop) {
-      transform.y = containerNodeRect.top - activeNodeRect.top
+  const container = isElement(activatorEvent?.target) ? activatorEvent.target.closest(`.${kDragContainerClass}`) : null
+  const containerTop = container ? container.getBoundingClientRect().top - container.scrollTop : null
+  if (activeNodeRect && containerTop != null) {
+    if (activeNodeRect.top + transform.y < containerTop) {
+      transform.y = containerTop - activeNodeRect.top
     }
   }
   return transform

diff --git a/v3/src/lib/dnd-kit/codap-dnd-context.tsx b/v3/src/lib/dnd-kit/codap-dnd-context.tsx
@@ -4,7 +4,7 @@ import {
 } from "@dnd-kit/core"
 import React, { ReactNode } from "react"
 import { dataInteractiveState } from "../../data-interactive/data-interactive-state"
-import { containerSnapToGridModifier, restrictDragToArea } from "../../hooks/use-drag-drop"
+import { containerSnapToGridModifier, restrictDragToContainer } from "../../hooks/use-drag-drop"
 import { urlParams } from "../../utilities/url-params"
 import { canAutoScroll } from "./dnd-can-auto-scroll"
 import { dndDetectCollision } from "./dnd-detect-collision"
@@ -38,7 +38,7 @@ export const CodapDndContext = ({ children }: IProps) => {
     <DndContext
       autoScroll={autoScrollOptions}
       collisionDetection={dndDetectCollision}
-      modifiers={[containerSnapToGridModifier, restrictDragToArea]}
+      modifiers={[containerSnapToGridModifier, restrictDragToContainer]}
       onDragEnd={() => dataInteractiveState.endDrag()}
       sensors={sensors} >
       {children}