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,58 @@ 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) {
+        select(entity, index > startIndex) // first item replaces selection, others add to selection
+      }
+    })
+  }, [getAllVisibleEntities, getId, select])
+
+  const handleSelect = useCallback((entity: Entity, multiple?: boolean) => {
+    // if this is a shift-click and we have a last selected item, do range selection
+    if (multiple && lastSelectedItem && lastSelectedItem !== entity) {
+      handleRangeSelection(lastSelectedItem, entity)
+    } else {
+      select(entity, multiple)
+    }
+  }, [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 +161,8 @@ const Hierarchy: React.FC = () => {
     canRemove: canRemove,
     canDuplicate: canDuplicate,
     canDrag: canDrag,
-    canReorder: canReorder
+    canReorder: canReorder,
+    onLastSelectedChange: handleLastSelectedChange
   }
 
   return (

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

@@ -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,17 @@ 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 isCtrlClick = event.type === ClickType.CONTEXT_MENU && event.ctrlKey
+        const isShiftClick = event.type === ClickType.CLICK && event.shiftKey
+        const isDoubleClick = event.type === ClickType.CLICK && event.detail > 1 && onDoubleSelect
+
+        // update last selected item for non-multiple selections
+        if (!isCtrlClick && !isShiftClick && onLastSelectedChange) {
+          onLastSelectedChange(value)
         }
+
+        onSelect(value, isCtrlClick || isShiftClick)
+        if (isDoubleClick) onDoubleSelect(value)
       }
 
       const handleOpen = (_: React.MouseEvent) => {