#34

frontend/src/components/DraggableDroppableTagRow.tsx

@@ -13,7 +13,6 @@ import type { CSSProperties, FC, MutableRefObject } from 'react'
 import type { Tag } from '@/types'
 
 type Props = {
-    activeDndId?:      string
     tag:              Tag
     nestLevel:        number
     pathKey:          string
@@ -22,15 +21,7 @@ type Props = {
     sp?:              boolean }
 
 
-const DraggableDroppableTagRow: FC<Props> = ({
+const DraggableDroppableTagRow: FC<Props> = ({ tag, nestLevel, pathKey, parentTagId, suppressClickRef, sp }) => {
-    activeDndId,
-    tag,
-    nestLevel,
-    pathKey,
-    parentTagId,
-    suppressClickRef,
-    sp,
-}) => {
   const behaviourSettings = useClientBehaviourSettings ()
   const animationMode = behaviourSettings.animation ?? 'normal'
   const layoutTransition = clientAnimationTransition (
@@ -62,23 +53,18 @@ const DraggableDroppableTagRow: FC<Props> = ({
   const { attributes,
 	  listeners,
 	  setNodeRef: setDragRef,
-	  transform } = useDraggable ({ id:    dndId,
+	  transform,
-					data:  { kind:   'tag',
+	  isDragging: dragging } = useDraggable ({ id:    dndId,
-						 dndId,
+						   data:  { kind:   'tag',
-						 tagId:  tag.id,
+							    tagId:  tag.id,
-						 parentTagId,
+							    parentTagId } })
-						 nestLevel } })
 
   const { setNodeRef: setDropRef, isOver: over } = useDroppable ({
       id:   dndId,
       data: { kind: 'tag', tagId: tag.id } })
 
-  const activeDragging = activeDndId === dndId
   const style: CSSProperties = { transform:   CSS.Translate.toString (transform),
-				 visibility:  activeDragging ? 'hidden' : 'visible' }
+				 visibility:  dragging ? 'hidden' : 'visible' }
-  const innerClassName = cn (
-      'inline-flex min-w-0 max-w-full items-baseline overflow-hidden',
-      sp && 'touch-pan-y')
 
   return (
       <div
@@ -91,16 +77,12 @@ const DraggableDroppableTagRow: FC<Props> = ({
 	      return
 	    const dx = e.clientX - p.x
 	    const dy = e.clientY - p.y
-
 	    if (dx * dx + dy * dy >= 9)
 	      armEatNextClick ()
 	  }}
 	  onPointerUpCapture={() => {
 	    downPosRef.current = null
 	  }}
-	  onPointerCancelCapture={() => {
-	    downPosRef.current = null
-	  }}
 	  onClickCapture={e => {
 	    if (suppressClickRef.current)
 	      {
@@ -108,35 +90,24 @@ const DraggableDroppableTagRow: FC<Props> = ({
 		e.stopPropagation ()
 	      }
 	  }}
-	  ref={setDropRef}
+	  ref={node => {
+	    setDragRef (node)
+	    setDropRef (node)
+	  }}
+	  style={style}
 	  className={cn (
 	      'min-w-0 max-w-full overflow-hidden rounded select-none',
-	      sp && 'touch-pan-y',
 	      over && 'ring-2 ring-offset-2')}
-	  >
+	  {...attributes}
-	{activeDragging
+	  {...listeners}>
-	 ? (
+	<motion.div
-	    <div
+	    className="flex min-w-0 max-w-full items-baseline overflow-hidden"
-		ref={setDragRef}
+	    transition={{ layout: layoutTransition }}
-		style={style}
+	    layoutId={animationMode === 'off'
-		className={innerClassName}
+		? undefined
-		{...attributes}
+		: `tag-${ sp ? 'sp-' : '' }${ tag.id }`}>
-		{...listeners}>
+	  <TagLink tag={tag} nestLevel={nestLevel}/>
-	      <TagLink tag={tag} nestLevel={nestLevel}/>
+	</motion.div>
-	    </div>)
-	 : (
-	    <motion.div
-		ref={setDragRef}
-		style={style}
-		className={innerClassName}
-		{...attributes}
-		{...listeners}
-		transition={{ layout: layoutTransition }}
-		layoutId={animationMode === 'off'
-		    ? undefined
-		    : `tag-${ sp ? 'sp-' : '' }${ tag.id }`}>
-	      <TagLink tag={tag} nestLevel={nestLevel}/>
-	    </motion.div>)}
       </div>)
 }
 

frontend/src/components/TagDetailSidebar.tsx

@@ -1,13 +1,11 @@
 import { DndContext,
 	 DragOverlay,
-	 MeasuringStrategy,
 	 MouseSensor,
 	 TouchSensor,
-	 pointerWithin,
 	 useDroppable,
 	 useSensor,
 	 useSensors } from '@dnd-kit/core'
-import { restrictToWindowEdges, snapCenterToCursor } from '@dnd-kit/modifiers'
+import { restrictToWindowEdges } from '@dnd-kit/modifiers'
 import { useQueryClient } from '@tanstack/react-query'
 import { motion } from 'framer-motion'
 import { useEffect, useMemo, useRef, useState } from 'react'
@@ -27,23 +25,15 @@ import { postsKeys, tagsKeys } from '@/lib/queryKeys'
 import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
 import { dateString, originalCreatedAtString } from '@/lib/utils'
 
-import type { CollisionDetection, DragEndEvent } from '@dnd-kit/core'
+import type { DragEndEvent } from '@dnd-kit/core'
 import type { FC, MutableRefObject, ReactNode } from 'react'
 
 import type { Category, Post, TagWithSections } from '@/types'
 
 type TagByCategory = { [key in Category]: TagWithSections[] }
 
-const tagCollisionDetection: CollisionDetection = args => {
-  return pointerWithin (args)
-}
-
-const alwaysMeasureDroppables = {
-    droppable: { strategy: MeasuringStrategy.Always } } as const
-
 
 const renderTagTree = (
-    activeDndId:       string | undefined,
     tag:              TagWithSections,
     nestLevel:        number,
     path:             string,
@@ -55,7 +45,6 @@ const renderTagTree = (
   const self = (
       <li key={key} className="mb-1">
 	<DraggableDroppableTagRow
-	    activeDndId={activeDndId}
 	    tag={tag}
 	    nestLevel={nestLevel}
 	    pathKey={key}
@@ -69,14 +58,7 @@ const renderTagTree = (
       ...((tag.children
 	   ?.sort ((a, b) => a.name < b.name ? -1 : 1)
 	   .flatMap (child =>
-	      renderTagTree (
+	      renderTagTree (child, nestLevel + 1, key, suppressClickRef, tag.id, sp)))
-		  activeDndId,
-		  child,
-		  nestLevel + 1,
-		  key,
-		  suppressClickRef,
-		  tag.id,
-		  sp)))
 	  ?? [])]
 }
 
@@ -195,35 +177,12 @@ const DropSlot = ({ cat }: { cat: Category }) => {
       </li>)
 }
 
-const EmptyCategoryDropSection = (
-    { cat, children }: { cat: Category
-			 children: ReactNode }) => {
-  const { setNodeRef, isOver: over } = useDroppable ({
-      id:   `slot:${ cat }`,
-      data: { kind: 'slot', cat } })
-
-  return (
-      <div ref={setNodeRef} className="my-3">
-	{children}
-	<ul>
-	  <li className="h-1">
-	    {over && <div className="h-0.5 w-full rounded bg-sky-400"/>}
-	  </li>
-	</ul>
-      </div>)
-}
-
 
 type Props = {
     className?: string
     post:       Post
     sp?:        boolean }
 
-type ActiveTagDrag = {
-    dndId:       string
-    tagId:      number
-    nestLevel:  number }
-
 
 const TagDetailSidebar: FC<Props> = ({ className, post, sp }) => {
   sp = Boolean (sp)
@@ -253,7 +212,7 @@ const TagDetailSidebar: FC<Props> = ({ className, post, sp }) => {
     return tagsTmp
   }, [post])
 
-  const [activeTagDrag, setActiveTagDrag] = useState<ActiveTagDrag | null> (null)
+  const [activeTagId, setActiveTagId] = useState<number | null> (null)
   const [dragging, setDragging] = useState (false)
   const [saving, setSaving] = useState (false)
   const [tags, setTags] = useState (baseTags)
@@ -261,7 +220,6 @@ const TagDetailSidebar: FC<Props> = ({ className, post, sp }) => {
       () => buildFlatTagByCategory (tags),
       [tags],
   )
-  const activeDndId = activeTagDrag?.dndId
 
   const suppressClickRef = useRef (false)
 
@@ -370,19 +328,9 @@ const TagDetailSidebar: FC<Props> = ({ className, post, sp }) => {
 	<TagSearch/>
 	<DndContext
 	    sensors={sensors}
-	    collisionDetection={tagCollisionDetection}
-	    measuring={alwaysMeasureDroppables}
 	    onDragStart={e => {
 	      if (e.active.data.current?.kind === 'tag')
-		{
+		setActiveTagId (e.active.data.current?.tagId ?? null)
-		  const tagId = e.active.data.current?.tagId
-		  const nestLevel = e.active.data.current?.nestLevel
-		  const dndId = e.active.data.current?.dndId
-		  setActiveTagDrag (
-		      tagId == null || nestLevel == null || dndId == null
-		      ? null
-		      : { dndId, tagId, nestLevel })
-		}
 	      setDragging (true)
 	      suppressClickRef.current = true
 	      document.body.style.userSelect = 'none'
@@ -393,13 +341,13 @@ const TagDetailSidebar: FC<Props> = ({ className, post, sp }) => {
 		suppressClickRef.current = false}, { capture: true, once: true })
 	    }}
 	    onDragCancel={() => {
-	      setActiveTagDrag (null)
+	      setActiveTagId (null)
 	      setDragging (false)
 	      document.body.style.userSelect = ''
 	      suppressClickRef.current = false
 	    }}
 	    onDragEnd={async e => {
-	      setActiveTagDrag (null)
+	      setActiveTagId (null)
 	      setDragging (false)
 	      await onDragEnd (e)
 	      document.body.style.userSelect = ''
@@ -414,31 +362,22 @@ const TagDetailSidebar: FC<Props> = ({ className, post, sp }) => {
 	    if (!(categoryTags.length > 0 || dragging))
 	      return null
 
-	    const sectionTitle = (
-		<SubsectionTitle>
-		  <motion.div
-		      layoutId={animationMode === 'off'
-			  ? undefined
-			  : `tag-${ sp ? 'sp-' : '' }${ cat }`}
-		      transition={{ layout: layoutTransition }}>
-		    {CATEGORY_NAMES[cat]}
-		  </motion.div>
-		</SubsectionTitle>)
-
-	    if (!(categoryTags.length > 0))
-	      return (
-		  <EmptyCategoryDropSection cat={cat} key={cat}>
-		    {sectionTitle}
-		  </EmptyCategoryDropSection>)
-
 	    return (
 		<div className="my-3" key={cat}>
-		  {sectionTitle}
+		  <SubsectionTitle>
+		    <motion.div
+			layoutId={animationMode === 'off'
+			    ? undefined
+			    : `tag-${ sp ? 'sp-' : '' }${ cat }`}
+			transition={{ layout: layoutTransition }}>
+		      {CATEGORY_NAMES[cat]}
+		    </motion.div>
+		  </SubsectionTitle>
+
 		  <ul>
 		    {(tagRelationDisplay === 'grouped'
 		      ? (tags[cat] ?? []).flatMap (tag =>
 			    renderTagTree (
-				activeDndId,
 				tag,
 				0,
 				`cat-${ cat }`,
@@ -450,7 +389,6 @@ const TagDetailSidebar: FC<Props> = ({ className, post, sp }) => {
 		      : (flatTagsByCategory[cat] ?? []).map (tag => (
 			  <li key={`flat-${ cat }-${ tag.id }`} className="mb-1">
 			    <DraggableDroppableTagRow
-				activeDndId={activeDndId}
 				tag={tag}
 				nestLevel={0}
 				pathKey={`flat-${ cat }-${ tag.id }`}
@@ -503,14 +441,11 @@ const TagDetailSidebar: FC<Props> = ({ className, post, sp }) => {
 		</ul>
 	      </motion.div>)}
 
-	  <DragOverlay
+	  <DragOverlay adjustScale={false}>
-	      adjustScale={false}
-	      modifiers={[snapCenterToCursor]}
-	      dropAnimation={animationMode === 'off' ? null : undefined}>
 	    <div className="pointer-events-none">
-	      {activeTagDrag != null && (() => {
+	      {activeTagId != null && (() => {
-		const tag = findTag (tags, activeTagDrag.tagId)
+		const tag = findTag (tags, activeTagId)
-		return tag && <TagLink tag={tag} nestLevel={activeTagDrag.nestLevel}/>
+		return tag && <TagLink tag={tag}/>
 	      }) ()}
 	    </div>
 	  </DragOverlay>