From 70688998cf87a5c4e075ae2afcaa19a9338f33a7 Mon Sep 17 00:00:00 2001
From: Evangeline Ireland <eireland@concord.org>
Date: Tue, 12 Nov 2024 16:09:54 -0800
Subject: [PATCH] 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 <kswenson@users.noreply.github.com>
---
 .../components/container/container-constants.ts |  2 ++
 v3/src/components/container/free-tile-row.tsx   |  6 +++++-
 v3/src/hooks/use-drag-drop.ts                   | 17 +++++++++++------
 v3/src/lib/dnd-kit/codap-dnd-context.tsx        |  4 ++--
 4 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/v3/src/components/container/container-constants.ts b/v3/src/components/container/container-constants.ts
index 37ba4753c2..2ede8563b0 100644
--- 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
index 81278a6667..79302d6480 100644
--- 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
index 39201cc634..3e03852ee1 100644
--- 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
index 69ccdf7ed0..9f95f7fa70 100644
--- 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}