Improve drag target z-indexing and visibiility

Author: CarlosNZ

demo/src/_imports.ts

@@ -3,10 +3,10 @@
  */
 
 /* Installed package */
-export * from 'json-edit-react'
+// export * from 'json-edit-react'
 
 /* Local src */
-// export * from './json-edit-react/src'
+export * from './json-edit-react/src'
 
 /* Compiled local package */
 // export * from './package/build'

src/ButtonPanels.tsx

@@ -71,10 +71,7 @@ export const EditButtons: React.FC<EditButtonProps> = ({
   }
 
   return (
-    <div
-      className="jer-edit-buttons"
-      style={{ opacity: isAdding ? 1 : undefined, zIndex: path.length + 1 }}
-    >
+    <div className="jer-edit-buttons" style={{ opacity: isAdding ? 1 : undefined }}>
       {enableClipboard && (
         <div onClick={handleCopy} className="jer-copy-pulse">
           <Icon name="copy" nodeData={nodeData} />
@@ -138,7 +135,7 @@ export const InputButtons: React.FC<{
   nodeData: NodeData
 }> = ({ onOk, onCancel, nodeData }) => {
   return (
-    <div className="jer-confirm-buttons" style={{ zIndex: nodeData.path.length + 1 }}>
+    <div className="jer-confirm-buttons">
       <div onClick={onOk}>
         <Icon name="ok" nodeData={nodeData} />
       </div>

src/CollectionNode.tsx

@@ -68,14 +68,7 @@ export const CollectionNode: React.FC<CollectionNodeProps> = (props) => {
   } = useCommon({ props, collapsed })
 
   const { dragSourceProps, getDropTargetProps, BottomDropTarget, DropTargetPadding } = useDragNDrop(
-    {
-      canDragOnto,
-      path,
-      nodeData,
-      onMove,
-      onError,
-      translate,
-    }
+    { canDrag, canDragOnto, path, nodeData, onMove, onError, translate }
   )
 
   // This allows us to not render the children on load if they're hidden (which
@@ -390,9 +383,8 @@ export const CollectionNode: React.FC<CollectionNodeProps> = (props) => {
         marginLeft: `${path.length === 0 ? 0 : indent / 2}em`,
         ...getStyles('collection', nodeData),
         position: 'relative',
-        zIndex: path.length,
       }}
-      draggable={canDrag && currentlyEditingElement === null}
+      draggable={canDrag}
       {...dragSourceProps}
       {...getDropTargetProps('above')}
     >

src/ValueNodeWrapper.tsx

@@ -68,14 +68,7 @@ export const ValueNodeWrapper: React.FC<ValueNodeProps> = (props) => {
   } = useCommon({ props })
 
   const { dragSourceProps, getDropTargetProps, BottomDropTarget, DropTargetPadding } = useDragNDrop(
-    {
-      canDragOnto,
-      path,
-      nodeData,
-      onMove,
-      onError,
-      translate,
-    }
+    { canDrag, canDragOnto, path, nodeData, onMove, onError, translate }
   )
 
   const customNodeData = getCustomNode(customNodeDefinitions, nodeData)
@@ -251,9 +244,8 @@ export const ValueNodeWrapper: React.FC<ValueNodeProps> = (props) => {
       style={{
         marginLeft: `${indent / 2}em`,
         position: 'relative',
-        zIndex: path.length + 1,
       }}
-      draggable={canDrag && currentlyEditingElement === null}
+      draggable={canDrag}
       {...dragSourceProps}
       {...getDropTargetProps('above')}
     >
@@ -313,7 +305,7 @@ export const ValueNodeWrapper: React.FC<ValueNodeProps> = (props) => {
             )
           )}
           {showTypeSelector && (
-            <div className="jer-select" style={{ zIndex: path.length + 1 }}>
+            <div className="jer-select">
               <select
                 name={`${name}-type-select`}
                 className="jer-type-select"

src/ValueNodes.tsx

@@ -157,7 +157,6 @@ export const BooleanValue: React.FC<InputProps & { value: boolean }> = ({
       name={toPathString(path)}
       checked={value}
       onChange={() => setValue(!value)}
-      style={{ zIndex: path.length + 2 }}
     />
   ) : (
     <span

src/style.css

@@ -83,6 +83,7 @@ select:focus + .focus {
 }
 
 .jer-editor-container {
+  position: relative;
   font-size: 16px;
   line-height: 1;
   padding: 1em;

src/useCommon.ts

@@ -46,7 +46,10 @@ export const useCommon = ({ props, collapsed }: CommonProps) => {
   const canEdit = useMemo(() => !restrictEditFilter(nodeData), [nodeData])
   const canDelete = useMemo(() => !restrictDeleteFilter(nodeData), [nodeData])
   const canAdd = useMemo(() => !restrictAddFilter(nodeData), [nodeData])
-  const canDrag = useMemo(() => !restrictDragFilter(nodeData) && canDelete, [nodeData])
+  const canDrag = useMemo(
+    () => !restrictDragFilter(nodeData) && canDelete && currentlyEditingElement === null,
+    [nodeData]
+  )
 
   const showError = (errorString: ErrorString) => {
     if (showErrorMessages) {

src/useDragNDrop.tsx

@@ -13,6 +13,7 @@ import {
 import { type TranslateFunction } from './localisation'
 
 interface DnDProps {
+  canDrag: boolean
   canDragOnto: boolean
   path: CollectionKey[]
   nodeData: NodeData
@@ -22,6 +23,7 @@ interface DnDProps {
 }
 
 export const useDragNDrop = ({
+  canDrag,
   canDragOnto,
   path,
   nodeData,
@@ -30,14 +32,15 @@ export const useDragNDrop = ({
   translate,
 }: DnDProps) => {
   const { getStyles } = useTheme()
-  const { dragSource, setDragSource } = useTreeState()
+  const { currentlyEditingElement, dragSource, setDragSource } = useTreeState()
   const [isDragTarget, setIsDragTarget] = useState<Position | false>(false)
 
   const pathString = toPathString(path)
 
   // Props added to items being dragged
-  const dragSourceProps = useMemo(
-    () => ({
+  const dragSourceProps = useMemo(() => {
+    if (!canDrag) return {}
+    return {
       onDragStart: (e: React.DragEvent) => {
         e.stopPropagation()
         setDragSource({ path, pathString })
@@ -46,57 +49,59 @@ export const useDragNDrop = ({
         e.stopPropagation()
         setDragSource({ path: null, pathString: null })
       },
-    }),
-    []
-  )
+    }
+  }, [canDrag])
 
   // Props for the items being dropped onto
   const getDropTargetProps = useMemo(
-    () => (position: Position) => ({
-      onDragOver: (e: React.DragEvent) => {
-        e.stopPropagation()
-        e.preventDefault()
-      },
-      onDrop: (e: React.DragEvent) => {
-        e.stopPropagation()
-        if (!canDragOnto) return
-        handleDrop(position)
-        setDragSource({ path: null, pathString: null })
-        setIsDragTarget(false)
-      },
-      onDragEnter: (e: React.DragEvent) => {
-        e.stopPropagation()
-        if (!canDragOnto) return
-        if (!pathString.startsWith(dragSource.pathString ?? '')) {
-          setIsDragTarget(position)
-        }
-      },
-      onDragExit: (e: React.DragEvent) => {
-        e.stopPropagation()
-        if (!canDragOnto) return
-        setIsDragTarget(false)
-      },
-    }),
-    [dragSource]
+    () => (position: Position) => {
+      if (!canDragOnto) return {}
+      return {
+        onDragOver: (e: React.DragEvent) => {
+          e.stopPropagation()
+          e.preventDefault()
+        },
+        onDrop: (e: React.DragEvent) => {
+          e.stopPropagation()
+          handleDrop(position)
+          setDragSource({ path: null, pathString: null })
+          setIsDragTarget(false)
+        },
+        onDragEnter: (e: React.DragEvent) => {
+          e.stopPropagation()
+          if (!pathString.startsWith(dragSource.pathString ?? '')) {
+            setIsDragTarget(position)
+          }
+        },
+        onDragExit: (e: React.DragEvent) => {
+          e.stopPropagation()
+          setIsDragTarget(false)
+        },
+      }
+    },
+    [dragSource, canDragOnto]
   )
 
   // A dummy component to allow us to detect when dragging onto the *bottom*
   // half of an element -- takes up exactly 50% its container height and is
   // locked to the bottom.
   const BottomDropTarget = useMemo(
-    () => (
-      <div
-        style={{
-          height: '50%',
-          position: 'absolute',
-          width: '100%',
-          top: '50%',
-          zIndex: path.length,
-        }}
-        {...getDropTargetProps('below')}
-      ></div>
-    ),
-    [dragSource]
+    () =>
+      canDragOnto && dragSource.pathString !== null ? (
+        <div
+          className="jer-drop-target-bottom"
+          style={{
+            height: '50%',
+            position: 'absolute',
+            width: '100%',
+            top: '50%',
+            zIndex: path.length,
+            // border: '1px dotted green',
+          }}
+          {...getDropTargetProps('below')}
+        ></div>
+      ) : null,
+    [dragSource, canDragOnto]
   )
 
   // "Padding" element displayed either above or below a node to indicate