add range select for Tree component

Author: nicoecheza

packages/@dcl/inspector/src/components/Hierarchy/Hierarchy.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import { Entity } from '@dcl/ecs'
 
 import { CAMERA, PLAYER, ROOT } from '../../lib/sdk/tree'
@@ -86,6 +86,7 @@ const Hierarchy: React.FC = () => {
     centerViewOnEntity
   } = useTree()
   const selectedEntities = useEntitiesWith((components) => components.Selection)
+  const [lastSelectedItem, setLastSelectedItem] = useState<Entity | undefined>(undefined)
 
   const isSelected = useCallback(
     (entity: Entity) => {
@@ -94,13 +95,67 @@ const Hierarchy: React.FC = () => {
     [selectedEntities]
   )
 
+  const getAllVisibleEntities = useCallback(() => {
+    const entities: Entity[] = []
+
+    const traverse = (entity: Entity) => {
+      if (!isHidden(entity)) {
+        entities.push(entity)
+        if (isOpen(entity)) {
+          getChildren(entity).forEach((child) => traverse(child))
+        }
+      }
+    }
+
+    traverse(ROOT)
+
+    return entities
+  }, [getChildren, isOpen, isHidden])
+
+  const handleRangeSelection = useCallback(
+    (fromEntity: Entity, toEntity: Entity) => {
+      const allEntities = getAllVisibleEntities()
+      const fromIndex = allEntities.findIndex((e) => getId(e) === getId(fromEntity))
+      const toIndex = allEntities.findIndex((e) => getId(e) === getId(toEntity))
+
+      const startIndex = Math.min(fromIndex, toIndex)
+      const endIndex = Math.max(fromIndex, toIndex)
+
+      allEntities.forEach((entity, index) => {
+        if (index >= startIndex && index <= endIndex) {
+          void select(entity, index > startIndex) // first item replaces selection, others add to selection
+        }
+      })
+    },
+    [getAllVisibleEntities, getId, select]
+  )
+
+  const handleSelect = useCallback(
+    (entity: Entity, clickType?: 'single' | 'ctrl' | 'shift') => {
+      if (clickType === 'shift' && lastSelectedItem) {
+        handleRangeSelection(lastSelectedItem, entity)
+      } else {
+        const isMultipleSelection = clickType === 'ctrl' || clickType === 'shift'
+        void select(entity, isMultipleSelection)
+      }
+    },
+    [select, lastSelectedItem, handleRangeSelection]
+  )
+
+  const handleLastSelectedChange = useCallback(
+    (entity: Entity) => {
+      if (entity !== lastSelectedItem) setLastSelectedItem(entity)
+    },
+    [lastSelectedItem]
+  )
+
   const props = {
     getExtraContextMenu: ContextMenu,
     onAddChild: addChild,
     onDrop: setParent,
     onRemove: remove,
     onRename: rename,
-    onSelect: select,
+    onSelect: handleSelect,
     onDoubleSelect: centerViewOnEntity,
     onSetOpen: setOpen,
     onDuplicate: duplicate,
@@ -115,7 +170,8 @@ const Hierarchy: React.FC = () => {
     canRemove: canRemove,
     canDuplicate: canDuplicate,
     canDrag: canDrag,
-    canReorder: canReorder
+    canReorder: canReorder,
+    onLastSelectedChange: handleLastSelectedChange
   }
 
   return (

packages/@dcl/inspector/src/components/ProjectAssetExplorer/ProjectView.tsx

@@ -175,7 +175,6 @@ function ProjectView({ folders, thumbnails }: Props) {
             onCancel={() => setSearch('')}
           />
           <FilesTree
-            tree={tree}
             className="editor-assets-tree"
             value={ROOT}
             onAddChild={noop}

packages/@dcl/inspector/src/components/Tree/Tree.tsx

@@ -33,7 +33,7 @@ type Props<T> = {
   canDrag?: (value: T) => boolean
   canReorder?: (source: T, target: T, type: DropType) => boolean
   onSetOpen: (value: T, isOpen: boolean) => void
-  onSelect: (value: T, multiple?: boolean) => void
+  onSelect: (value: T, clickType?: 'single' | 'ctrl' | 'shift') => void
   onDoubleSelect?: (value: T) => void
   onDrop: (source: T, target: T, dropType: DropType) => void
   onRename: (value: T, label: string) => void
@@ -42,6 +42,7 @@ type Props<T> = {
   onDuplicate: (value: T) => void
   getDragContext?: () => unknown
   dndType?: string
+  onLastSelectedChange?: (value: T) => void
 }
 
 type EmptyString = ''
@@ -81,7 +82,8 @@ export function Tree<T>() {
         onDoubleSelect,
         onSetOpen,
         getDragContext = () => ({}),
-        dndType = 'tree'
+        dndType = 'tree',
+        onLastSelectedChange
       } = props
       const ref = useRef<HTMLDivElement>(null)
       const id = getId(value)
@@ -152,12 +154,18 @@ export function Tree<T>() {
       const quitInsertMode = () => setInsertMode(false)
 
       const handleSelect = (event: React.MouseEvent) => {
-        if (event.type === ClickType.CONTEXT_MENU && event.ctrlKey) {
-          onSelect(value, true)
-        } else if (event.type === ClickType.CLICK) {
-          onSelect(value, event.shiftKey)
-          if (event.detail > 1 && onDoubleSelect) onDoubleSelect(value)
+        const isMac = /Mac|iPhone|iPod|iPad/.test(navigator.userAgent)
+        const isCtrlClick = (isMac ? event.type === ClickType.CONTEXT_MENU : event.type === ClickType.CLICK) && event.ctrlKey
+        const isShiftClick = event.type === ClickType.CLICK && event.shiftKey
+        const isDoubleClick = event.type === ClickType.CLICK && event.detail > 1 && onDoubleSelect
+        const clickType = isCtrlClick ? 'ctrl' : isShiftClick ? 'shift' : 'single'
+
+        if (clickType === 'single' && onLastSelectedChange) {
+          onLastSelectedChange(value)
         }
+
+        onSelect(value, clickType)
+        if (isDoubleClick) onDoubleSelect(value)
       }
 
       const handleOpen = (_: React.MouseEvent) => {