spoint 0.1.638 → 0.1.640

package/client/core/camera.js

@@ -268,28 +268,38 @@ export function createCameraController(camera, scene) {
     inputPitchDelta *= decay
   }
 
+  // must apply+decay look deltas here: the gameplay branch in update() is unreachable in edit mode (early return), so this is the only place the fly-cam rotates
+  function updateEditFlyCam(frameDt, inputState) {
+    applyLookInput(frameDt)
+    const sy = Math.sin(yaw), cy = Math.cos(yaw), sp = Math.sin(pitch), cp = Math.cos(pitch)
+    const fwd = (inputState.forward?1:0)-(inputState.backward?1:0)
+    const strafe = (inputState.right?1:0)-(inputState.left?1:0)
+    const up = (inputState.jump?1:0)-(inputState.crouch?1:0)
+    const moving = (fwd || strafe || up) ? 1 : 0
+    editBoost = moving ? Math.min(editBoostMax, editBoost + editBoostRate * frameDt) : 1
+    const altMul = _editAltitudeSpeedMul(editCamPos.x, editCamPos.y, editCamPos.z)
+    const maxV = editCamSpeed * editBoost * altMul
+    const wishX = (fwd*sy + strafe*(-cy)) * maxV, wishY = up * maxV, wishZ = (fwd*cy + strafe*sy) * maxV
+    const aT = 1 - Math.exp(-editAccelHz * frameDt)
+    editVel.x += (wishX - editVel.x) * aT; editVel.y += (wishY - editVel.y) * aT; editVel.z += (wishZ - editVel.z) * aT
+    editCamPos.x += editVel.x * frameDt; editCamPos.y += editVel.y * frameDt; editCamPos.z += editVel.z * frameDt
+    // must scale horizontal look by cos(pitch), or a steep downward pitch still aims level (fly-cam looks into empty sky)
+    camera.position.copy(editCamPos); camera.lookAt(editCamPos.x + sy*cp*100, editCamPos.y + sp*100, editCamPos.z + cy*cp*100)
+  }
+
+  // head hidden only while camera is inside the player head (dist<0.01), restored the moment it zooms out
+  function updateHeadBoneVisibility(inHead) {
+    if (!headBone || inHead === headBoneHidden) return
+    if (inHead) { headBone.scale.set(0, 0, 0); headBone.position.y -= fpsHeadDownOffset }
+    else { headBone.scale.set(1, 1, 1); headBone.position.y += fpsHeadDownOffset }
+    headBoneHidden = inHead
+    if (_onCameraInHead) try { _onCameraInHead(inHead) } catch (_) {}
+  }
+
   function update(localPlayer, localMesh, frameDt, inputState) {
     if (mode === 'custom' || mode === 'fixed') return
     if (!localPlayer && !editMode) return
-    if (editMode && inputState) {
-      // must apply+decay look deltas here: the gameplay branch below is unreachable in edit mode (early return), so this is the only place the fly-cam rotates
-      applyLookInput(frameDt)
-      const sy = Math.sin(yaw), cy = Math.cos(yaw), sp = Math.sin(pitch), cp = Math.cos(pitch)
-      const fwd = (inputState.forward?1:0)-(inputState.backward?1:0)
-      const strafe = (inputState.right?1:0)-(inputState.left?1:0)
-      const up = (inputState.jump?1:0)-(inputState.crouch?1:0)
-      const moving = (fwd || strafe || up) ? 1 : 0
-      editBoost = moving ? Math.min(editBoostMax, editBoost + editBoostRate * frameDt) : 1
-      const altMul = _editAltitudeSpeedMul(editCamPos.x, editCamPos.y, editCamPos.z)
-      const maxV = editCamSpeed * editBoost * altMul
-      const wishX = (fwd*sy + strafe*(-cy)) * maxV, wishY = up * maxV, wishZ = (fwd*cy + strafe*sy) * maxV
-      const aT = 1 - Math.exp(-editAccelHz * frameDt)
-      editVel.x += (wishX - editVel.x) * aT; editVel.y += (wishY - editVel.y) * aT; editVel.z += (wishZ - editVel.z) * aT
-      editCamPos.x += editVel.x * frameDt; editCamPos.y += editVel.y * frameDt; editCamPos.z += editVel.z * frameDt
-      // must scale horizontal look by cos(pitch), or a steep downward pitch still aims level (fly-cam looks into empty sky)
-      camera.position.copy(editCamPos); camera.lookAt(editCamPos.x + sy*cp*100, editCamPos.y + sp*100, editCamPos.z + cy*cp*100)
-      return
-    }
+    if (editMode && inputState) { updateEditFlyCam(frameDt, inputState); return }
     if (localMesh) camTarget.set(localMesh.position.x, localMesh.position.y + headHeight, localMesh.position.z)
     else camTarget.set(localPlayer.position[0], localPlayer.position[1] + headHeight, localPlayer.position[2])
     applyLookInput(frameDt)
@@ -300,14 +310,7 @@ export function createCameraController(camera, scene) {
     const sy = Math.sin(yaw), cy = Math.cos(yaw), sp = Math.sin(pitch), cp = Math.cos(pitch)
     const fwdX = sy*cp, fwdY = sp, fwdZ = cy*cp
     const dist = mode === 'fps' ? 0 : zoomStages[zoomIndex]
-    // head hidden only while camera is inside the player head (dist<0.01), restored the moment it zooms out
-    const inHead = dist < 0.01
-    if (headBone && inHead !== headBoneHidden) {
-      if (inHead) { headBone.scale.set(0, 0, 0); headBone.position.y -= fpsHeadDownOffset }
-      else { headBone.scale.set(1, 1, 1); headBone.position.y += fpsHeadDownOffset }
-      headBoneHidden = inHead
-      if (_onCameraInHead) try { _onCameraInHead(inHead) } catch (_) {}
-    }
+    updateHeadBoneVisibility(dist < 0.01)
     if (dist < 0.01) updateFPS(localMesh, frameDt, fwdX, fwdY, fwdZ)
     else updateTPS(dist, localMesh, frameDt, fwdX, fwdY, fwdZ, -cy, sy)
   }
@@ -353,6 +356,30 @@ export function createCameraController(camera, scene) {
     return len > 0.001 ? [dx/len, dy/len, dz/len] : [fwdX, fwdY, fwdZ]
   }
 
+  // On entering edit mode the fly-cam takes over (driven by update()'s editMode
+  // branch). CAPTURE the gameplay camera orientation first so it can be restored
+  // on exit -- yaw/pitch/zoomIndex are SHARED with the fly-cam (the editMode
+  // branch mutates yaw/pitch), so without this the gameplay camera returns to the
+  // editor's last orientation, not its pre-edit follow pose (the "camera did not
+  // return to the correct location" defect).
+  function setEditMode(enabled, localMesh) {
+    if (enabled && !editMode) {
+      _gameplayCam = { yaw, pitch, zoomIndex }
+      // seed the fly-cam offset back-and-up from the player (not glued to the head-height spot, which could stare into a wall)
+      const px = localMesh ? localMesh.position.x : camera.position.x
+      const py = localMesh ? localMesh.position.y : camera.position.y
+      const pz = localMesh ? localMesh.position.z : camera.position.z
+      const sy = Math.sin(yaw), cy = Math.cos(yaw)
+      editCamPos.set(px - sy * 8, py + 5, pz - cy * 8)
+      pitch = -0.35
+      editVel.set(0, 0, 0); editBoost = 1
+    } else if (!enabled && editMode && _gameplayCam) {
+      yaw = _gameplayCam.yaw; pitch = _gameplayCam.pitch; zoomIndex = _gameplayCam.zoomIndex
+      _gameplayCam = null
+    }
+    editMode = enabled
+  }
+
   return {
     update, applyConfig, getAimDirection, setMode, getMode: () => mode,
     setEnvironment: meshes => { envMeshes.length = 0; envMeshes.push(...meshes); _bvhDirty = true },
@@ -385,29 +412,7 @@ export function createCameraController(camera, scene) {
     setVRYaw: v => { yaw = v }, getVRYaw: () => yaw,
     setVRPitch: v => { pitch = v }, getVRPitch: () => pitch,
     adjustVRPitch: delta => { pitch = Math.max(pitchMin, Math.min(pitchMax, pitch + delta)) },
-    setEditMode: (enabled, localMesh) => {
-      // On entering edit mode the fly-cam takes over (driven by update()'s editMode
-      // branch). CAPTURE the gameplay camera orientation first so it can be restored
-      // on exit -- yaw/pitch/zoomIndex are SHARED with the fly-cam (the editMode
-      // branch mutates yaw/pitch), so without this the gameplay camera returns to the
-      // editor's last orientation, not its pre-edit follow pose (the "camera did not
-      // return to the correct location" defect).
-      if (enabled && !editMode) {
-        _gameplayCam = { yaw, pitch, zoomIndex }
-        // seed the fly-cam offset back-and-up from the player (not glued to the head-height spot, which could stare into a wall)
-        const px = localMesh ? localMesh.position.x : camera.position.x
-        const py = localMesh ? localMesh.position.y : camera.position.y
-        const pz = localMesh ? localMesh.position.z : camera.position.z
-        const sy = Math.sin(yaw), cy = Math.cos(yaw)
-        editCamPos.set(px - sy * 8, py + 5, pz - cy * 8)
-        pitch = -0.35
-        editVel.set(0, 0, 0); editBoost = 1
-      } else if (!enabled && editMode && _gameplayCam) {
-        yaw = _gameplayCam.yaw; pitch = _gameplayCam.pitch; zoomIndex = _gameplayCam.zoomIndex
-        _gameplayCam = null
-      }
-      editMode = enabled
-    },
+    setEditMode,
     getEditMode: () => editMode,
     getEditCameraPosition: () => editCamPos,
     setEditCameraPosition: (x, y, z) => { editCamPos.set(x, y, z); editVel.set(0, 0, 0); editBoost = 1; _lastAltSampleX = Infinity; _lastAltSampleZ = Infinity },

package/client/editor/SceneHierarchy.js

@@ -30,6 +30,70 @@ function attachContextMenu(el, getItems) {
   return C.useContextMenu(el, null, ({ x, y }) => openContextMenu(x, y, getItems()))
 }
 
+// Shared node classification, reused by both the tree-row icon glyph and the search `type:` scope filter.
+function classifyNode(node) {
+  if (node.model) return 'model'
+  if (node.custom && node.custom.mesh) return 'primitive'
+  if (node._appName || node.appName) return 'app'
+  return 'other'
+}
+const _typeGlyph = { model: 'M', primitive: 'P', app: 'A', other: 'o' }
+
+function nodeMatchesQuery(node, q) {
+  const id = (node.id || '').toLowerCase(), app = (node._appName || node.appName || node.label || '').toLowerCase()
+  let typeFilter = null
+  const m = /^type:(\w+)\s*/.exec(q)
+  if (m) { typeFilter = m[1]; q = q.slice(m[0].length) }
+  if (typeFilter && classifyNode(node) !== typeFilter) return false
+  if (!q) return true
+  return id.includes(q) || app.includes(q)
+}
+function subtreeMatchesQuery(node, q) {
+  if (!q) return true
+  if (nodeMatchesQuery(node, q)) return true
+  return (node.children || []).some(child => subtreeMatchesQuery(child, q))
+}
+function flattenTree(nodes, depth, q, seen, expanded, out) {
+  for (const node of nodes || []) {
+    if (q && !subtreeMatchesQuery(node, q)) continue
+    if (!seen.has(node.id)) { seen.add(node.id); expanded.add(node.id) }
+    const kids = node.children || []
+    const hasKids = kids.length > 0
+    const isExpanded = q ? true : expanded.has(node.id)
+    out.push({ node, depth, hasKids, expanded: isExpanded })
+    if (hasKids && isExpanded) flattenTree(kids, depth + 1, q, seen, expanded, out)
+  }
+  return out
+}
+
+// Drop an id from a batch drag if it is an ancestor of another id in the same batch -- reparenting an ancestor
+// under its own descendant target (or moving it while the descendant also moves) is structurally impossible.
+function isAncestorOf(parentOf, candidateId, descendantId) {
+  let p = parentOf.get(descendantId)
+  while (p != null) { if (p === candidateId) return true; p = parentOf.get(p) }
+  return false
+}
+function dedupeNonAncestors(parentOf, ids) {
+  if (ids.length < 2) return ids
+  return ids.filter(id => !ids.some(other => other !== id && isAncestorOf(parentOf, id, other)))
+}
+
+function indexParents(nodes, parentId, parentOf) {
+  for (const n of nodes || []) { parentOf.set(n.id, parentId); indexParents(n.children, n.id, parentOf) }
+}
+
+// Above VIRTUALIZE_THRESHOLD, only viewport+overscan rows render as real TreeItems; the rest become 2 sized spacer divs.
+function sliceVirtualWindow(rows, scrollTop, viewportH, rowHeight, overscan) {
+  const visibleCount = Math.max(1, Math.ceil((viewportH || 400) / rowHeight))
+  const startIdx = Math.max(0, Math.floor(scrollTop / rowHeight) - overscan)
+  const endIdx = Math.min(rows.length, startIdx + visibleCount + overscan * 2)
+  return {
+    spacerTop: startIdx * rowHeight,
+    spacerBottom: (rows.length - endIdx) * rowHeight,
+    renderedRows: rows.slice(startIdx, endIdx)
+  }
+}
+
 export function createSceneHierarchy(container, { onSelect, onFocus, onDelete, onDuplicate, onRename, onReparent, onLockChange, onHiddenChange } = {}) {
   let _ents = [], _q = '', _sel = null
   const _expanded = new Set()
@@ -42,42 +106,6 @@ export function createSceneHierarchy(container, { onSelect, onFocus, onDelete, o
   const _locked = new Set()
   const _hiddenInEditor = new Set()
 
-  // Shared node classification, reused by both the tree-row icon glyph and the search `type:` scope filter.
-  function classify(node) {
-    if (node.model) return 'model'
-    if (node.custom && node.custom.mesh) return 'primitive'
-    if (node._appName || node.appName) return 'app'
-    return 'other'
-  }
-  const _typeGlyph = { model: 'M', primitive: 'P', app: 'A', other: 'o' }
-
-  function matches(node) {
-    const id = (node.id || '').toLowerCase(), app = (node._appName || node.appName || node.label || '').toLowerCase()
-    let q = _q, typeFilter = null
-    const m = /^type:(\w+)\s*/.exec(q)
-    if (m) { typeFilter = m[1]; q = q.slice(m[0].length) }
-    if (typeFilter && classify(node) !== typeFilter) return false
-    if (!q) return true
-    return id.includes(q) || app.includes(q)
-  }
-  function subtreeMatches(node) {
-    if (!_q) return true
-    if (matches(node)) return true
-    return (node.children || []).some(subtreeMatches)
-  }
-  function flatten(nodes, depth, out) {
-    for (const node of nodes || []) {
-      if (_q && !subtreeMatches(node)) continue
-      if (!_seen.has(node.id)) { _seen.add(node.id); _expanded.add(node.id) }
-      const kids = node.children || []
-      const hasKids = kids.length > 0
-      const expanded = _q ? true : _expanded.has(node.id)
-      out.push({ node, depth, hasKids, expanded })
-      if (hasKids && expanded) flatten(kids, depth + 1, out)
-    }
-    return out
-  }
-
   container.classList.add('ds-ep-panel')
   container.style.cssText = 'display:flex;flex-direction:column;height:100%;min-height:0'
 
@@ -95,18 +123,6 @@ export function createSceneHierarchy(container, { onSelect, onFocus, onDelete, o
     return all.has(node.id) && all.size > 1 ? [...all] : [node.id]
   }
 
-  // Drop an id from a batch drag if it is an ancestor of another id in the same batch -- reparenting an ancestor
-  // under its own descendant target (or moving it while the descendant also moves) is structurally impossible.
-  function _isAncestorOf(candidateId, descendantId) {
-    let p = _parentOf.get(descendantId)
-    while (p != null) { if (p === candidateId) return true; p = _parentOf.get(p) }
-    return false
-  }
-  function _dedupeNonAncestors(ids) {
-    if (ids.length < 2) return ids
-    return ids.filter(id => !ids.some(other => other !== id && _isAncestorOf(id, other)))
-  }
-
   function nodeMenuItems(node) {
     const hasParent = !!_parentOf.get(node.id)
     const ids = _bulkIds(node)
@@ -144,6 +160,72 @@ export function createSceneHierarchy(container, { onSelect, onFocus, onDelete, o
     ]
   }
 
+  function attachRowKebab(el, node) {
+    if (el.querySelector('[data-kebab]')) return
+    const kebab = document.createElement('button')
+    kebab.setAttribute('data-kebab', '')
+    kebab.textContent = '...'
+    kebab.title = 'More actions'
+    kebab.style.cssText = 'position:absolute;right:4px;top:50%;transform:translateY(-50%);background:transparent;border:none;color:rgba(255,255,255,0.4);cursor:pointer;font:11px monospace;padding:2px 6px;opacity:0;transition:opacity 0.1s'
+    kebab.addEventListener('click', (e) => {
+      e.preventDefault(); e.stopPropagation()
+      const rect = kebab.getBoundingClientRect()
+      openContextMenu(rect.left, rect.bottom, nodeMenuItems(node))
+    })
+    if (getComputedStyle(el).position === 'static') el.style.position = 'relative'
+    el.appendChild(kebab)
+    el.addEventListener('mouseenter', () => { kebab.style.opacity = '1' })
+    el.addEventListener('mouseleave', () => { kebab.style.opacity = '0' })
+  }
+
+  // Top/bottom third of a row = sibling-of-target reparent; middle third = child. children is an
+  // unordered Set server-side, so this only picks the parent, not sibling order.
+  function attachRowDragDrop(el, node, id) {
+    // If this row is part of the current multi-selection, drag the whole set as one batch; otherwise single-id drag (existing behavior).
+    const _dragIds = _bulkIds(node)
+    const drag = C.useDraggable(el, { data: _dragIds.length > 1 ? { id, ids: _dragIds } : { id }, kind: 'scene-node' })
+    let _indicator = null
+    const _clearIndicator = () => { if (_indicator) { _indicator.remove(); _indicator = null } }
+    const _showIndicator = (edge) => {
+      _clearIndicator()
+      _indicator = document.createElement('div')
+      _indicator.className = 'ds-ep-tree-drop-indicator'
+      _indicator.style.cssText = `position:absolute;left:0;right:0;height:2px;background:var(--accent,#4af);pointer-events:none;z-index:10;${edge === 'top' ? 'top:-1px' : 'bottom:-1px'}`
+      if (getComputedStyle(el).position === 'static') el.style.position = 'relative'
+      el.appendChild(_indicator)
+    }
+    const drop = C.useDropTarget(el, {
+      accepts: ['scene-node'],
+      onDragOver: (payload) => {
+        const clientY = payload?.pointerEvent?.clientY
+        if (clientY == null) { _clearIndicator(); return }
+        const r = el.getBoundingClientRect()
+        const frac = (clientY - r.top) / r.height
+        if (frac < 0.25) _showIndicator('top')
+        else if (frac > 0.75) _showIndicator('bottom')
+        else _clearIndicator()
+      },
+      onDragLeave: _clearIndicator,
+      onDrop: ({ data, pointerEvent }) => {
+        _clearIndicator()
+        if (!data?.id) return
+        const dragIds = dedupeNonAncestors(_parentOf, data.ids && data.ids.length > 1 ? data.ids : [data.id])
+        if (dragIds.includes(id)) return
+        const r = el.getBoundingClientRect()
+        const frac = pointerEvent ? (pointerEvent.clientY - r.top) / r.height : 0.5
+        if (frac < 0.25 || frac > 0.75) {
+          const siblingParent = _parentOf.get(id) || null
+          dragIds.forEach(dragId => onReparent(dragId, siblingParent))
+          showToast((dragIds.length > 1 ? `Moved ${dragIds.length} entities` : 'Moved ' + dragIds[0]) + ' to ' + (siblingParent ? 'be a sibling of ' + id : 'root'))
+        } else {
+          dragIds.forEach(dragId => onReparent(dragId, id))
+          showToast((dragIds.length > 1 ? `Reparented ${dragIds.length} entities` : 'Reparented ' + dragIds[0]) + ' -> ' + id)
+        }
+      }
+    })
+    _menuTeardowns.push(() => { drag.destroy(); drop.destroy(); _clearIndicator() })
+  }
+
   function attachRowBehaviors(rows) {
     clearItemMenus()
     const els = container.querySelectorAll('.ds-ep-tree-item[data-eid]')
@@ -160,68 +242,8 @@ export function createSceneHierarchy(container, { onSelect, onFocus, onDelete, o
         // (immune to vdom node replacement between mousedown and click).
       }
       _menuTeardowns.push(attachContextMenu(el, () => nodeMenuItems(node)))
-      if (!el.querySelector('[data-kebab]')) {
-        const kebab = document.createElement('button')
-        kebab.setAttribute('data-kebab', '')
-        kebab.textContent = '...'
-        kebab.title = 'More actions'
-        kebab.style.cssText = 'position:absolute;right:4px;top:50%;transform:translateY(-50%);background:transparent;border:none;color:rgba(255,255,255,0.4);cursor:pointer;font:11px monospace;padding:2px 6px;opacity:0;transition:opacity 0.1s'
-        kebab.addEventListener('click', (e) => {
-          e.preventDefault(); e.stopPropagation()
-          const rect = kebab.getBoundingClientRect()
-          openContextMenu(rect.left, rect.bottom, nodeMenuItems(node))
-        })
-        if (getComputedStyle(el).position === 'static') el.style.position = 'relative'
-        el.appendChild(kebab)
-        el.addEventListener('mouseenter', () => { kebab.style.opacity = '1' })
-        el.addEventListener('mouseleave', () => { kebab.style.opacity = '0' })
-      }
-      if (onReparent && typeof C.useDraggable === 'function') {
-        // If this row is part of the current multi-selection, drag the whole set as one batch; otherwise single-id drag (existing behavior).
-        const _dragIds = _bulkIds(node)
-        const drag = C.useDraggable(el, { data: _dragIds.length > 1 ? { id, ids: _dragIds } : { id }, kind: 'scene-node' })
-        // Top/bottom third of a row = sibling-of-target reparent; middle third = child. children is an unordered Set server-side, so this only picks the parent, not sibling order.
-        let _indicator = null
-        const _clearIndicator = () => { if (_indicator) { _indicator.remove(); _indicator = null } }
-        const _showIndicator = (edge) => {
-          _clearIndicator()
-          _indicator = document.createElement('div')
-          _indicator.className = 'ds-ep-tree-drop-indicator'
-          _indicator.style.cssText = `position:absolute;left:0;right:0;height:2px;background:var(--accent,#4af);pointer-events:none;z-index:10;${edge === 'top' ? 'top:-1px' : 'bottom:-1px'}`
-          if (getComputedStyle(el).position === 'static') el.style.position = 'relative'
-          el.appendChild(_indicator)
-        }
-        const drop = C.useDropTarget(el, {
-          accepts: ['scene-node'],
-          onDragOver: (payload) => {
-            const clientY = payload?.pointerEvent?.clientY
-            if (clientY == null) { _clearIndicator(); return }
-            const r = el.getBoundingClientRect()
-            const frac = (clientY - r.top) / r.height
-            if (frac < 0.25) _showIndicator('top')
-            else if (frac > 0.75) _showIndicator('bottom')
-            else _clearIndicator()
-          },
-          onDragLeave: _clearIndicator,
-          onDrop: ({ data, pointerEvent }) => {
-            _clearIndicator()
-            if (!data?.id) return
-            const dragIds = _dedupeNonAncestors(data.ids && data.ids.length > 1 ? data.ids : [data.id])
-            if (dragIds.includes(id)) return
-            const r = el.getBoundingClientRect()
-            const frac = pointerEvent ? (pointerEvent.clientY - r.top) / r.height : 0.5
-            if (frac < 0.25 || frac > 0.75) {
-              const siblingParent = _parentOf.get(id) || null
-              dragIds.forEach(dragId => onReparent(dragId, siblingParent))
-              showToast((dragIds.length > 1 ? `Moved ${dragIds.length} entities` : 'Moved ' + dragIds[0]) + ' to ' + (siblingParent ? 'be a sibling of ' + id : 'root'))
-            } else {
-              dragIds.forEach(dragId => onReparent(dragId, id))
-              showToast((dragIds.length > 1 ? `Reparented ${dragIds.length} entities` : 'Reparented ' + dragIds[0]) + ' -> ' + id)
-            }
-          }
-        })
-        _menuTeardowns.push(() => { drag.destroy(); drop.destroy(); _clearIndicator() })
-      }
+      attachRowKebab(el, node)
+      if (onReparent && typeof C.useDraggable === 'function') attachRowDragDrop(el, node, id)
     })
   }
 
@@ -235,7 +257,7 @@ export function createSceneHierarchy(container, { onSelect, onFocus, onDelete, o
     const { node, depth, hasKids, expanded } = row
     const _label = node.label || node._appName || node.appName || node.id
     const _appTag = node._appName || node.appName || ''
-    const _glyph = node.light ? 'L' : _typeGlyph[classify(node)]
+    const _glyph = node.light ? 'L' : _typeGlyph[classifyNode(node)]
     const _flags = (_locked.has(node.id) ? ' 🔒' : '') + (_hiddenInEditor.has(node.id) ? ' 👁‍🗨' : '')
     return C.TreeItem({
       label: '[' + _glyph + '] ' + _label + _flags,
@@ -248,20 +270,34 @@ export function createSceneHierarchy(container, { onSelect, onFocus, onDelete, o
     })
   }
 
+  function bindPanelBodyRef(el, virtualized) {
+    if (!el) return
+    _viewportH = el.clientHeight
+    if (virtualized && !el._dsScrollListener) {
+      el._dsScrollListener = true
+      el.addEventListener('scroll', () => { _scrollTop = el.scrollTop; _viewportH = el.clientHeight; render() }, { passive: true })
+    }
+    if (el._dsRootDrop || !onReparent || typeof C.useDropTarget !== 'function') return
+    el._dsRootDrop = true
+    const d = C.useDropTarget(el, { accepts: ['scene-node'], onDrop: ({ data }) => {
+      if (!data?.id) return
+      const dragIds = dedupeNonAncestors(_parentOf, data.ids && data.ids.length > 1 ? data.ids : [data.id]).filter(id => _parentOf.get(id))
+      if (!dragIds.length) return
+      dragIds.forEach(id => onReparent(id, null))
+      showToast(dragIds.length > 1 ? `Unparented ${dragIds.length} entities` : 'Unparented ' + dragIds[0])
+    } })
+    el._dsRootDropDestroy = d.destroy
+  }
+
   let _lastRows = []
   function render() {
-    const rows = flatten(_ents, 0, [])
+    const rows = flattenTree(_ents, 0, _q, _seen, _expanded, [])
     _lastRows = rows
 
     const virtualized = rows.length > VIRTUALIZE_THRESHOLD
     let treeChildren, spacerTop = 0, spacerBottom = 0, renderedRows = rows
     if (virtualized) {
-      const visibleCount = Math.max(1, Math.ceil((_viewportH || 400) / ROW_HEIGHT))
-      const startIdx = Math.max(0, Math.floor(_scrollTop / ROW_HEIGHT) - OVERSCAN)
-      const endIdx = Math.min(rows.length, startIdx + visibleCount + OVERSCAN * 2)
-      spacerTop = startIdx * ROW_HEIGHT
-      spacerBottom = (rows.length - endIdx) * ROW_HEIGHT
-      renderedRows = rows.slice(startIdx, endIdx)
+      ;({ spacerTop, spacerBottom, renderedRows } = sliceVirtualWindow(rows, _scrollTop, _viewportH, ROW_HEIGHT, OVERSCAN))
       treeChildren = renderedRows.map(_rowEl)
     } else {
       treeChildren = rows.map(_rowEl)
@@ -273,24 +309,7 @@ export function createSceneHierarchy(container, { onSelect, onFocus, onDelete, o
       : h('div', {
           class: 'ds-ep-panel-body flush', style: 'flex:1;min-height:0;overflow-y:auto',
           // Drop onto the panel background (not a row) = unparent to root.
-          ref: (el) => {
-            if (!el) return
-            _viewportH = el.clientHeight
-            if (virtualized && !el._dsScrollListener) {
-              el._dsScrollListener = true
-              el.addEventListener('scroll', () => { _scrollTop = el.scrollTop; _viewportH = el.clientHeight; render() }, { passive: true })
-            }
-            if (el._dsRootDrop || !onReparent || typeof C.useDropTarget !== 'function') return
-            el._dsRootDrop = true
-            const d = C.useDropTarget(el, { accepts: ['scene-node'], onDrop: ({ data }) => {
-              if (!data?.id) return
-              const dragIds = _dedupeNonAncestors(data.ids && data.ids.length > 1 ? data.ids : [data.id]).filter(id => _parentOf.get(id))
-              if (!dragIds.length) return
-              dragIds.forEach(id => onReparent(id, null))
-              showToast(dragIds.length > 1 ? `Unparented ${dragIds.length} entities` : 'Unparented ' + dragIds[0])
-            } })
-            el._dsRootDropDestroy = d.destroy
-          }
+          ref: (el) => bindPanelBodyRef(el, virtualized)
         },
           virtualized
             ? h('div', null,
@@ -314,19 +333,16 @@ export function createSceneHierarchy(container, { onSelect, onFocus, onDelete, o
   }
 
   const _parentOf = new Map()
-  function indexParents(nodes, parentId) {
-    for (const n of nodes || []) { _parentOf.set(n.id, parentId); indexParents(n.children, n.id) }
-  }
 
   container.tabIndex = 0
 
-  // Capture-phase delegated click + multi-select handlers, immune to vdom node replacement
-  // between mousedown and mouseup (applyDiff re-renders the entire tree, which can swap the
-  // DOM node under an in-progress pointer interaction -- see the row
+  // Capture-phase delegated multi-select handler, immune to vdom node replacement between
+  // mousedown and mouseup (applyDiff re-renders the entire tree, which can swap the DOM node
+  // under an in-progress pointer interaction -- see the row
   // scene-hierarchy-click-races-vdom-rerender-lost-click). The capture phase fires on the
   // STABLE container before the event reaches any individual row element, so the data-eid
   // lookup always succeeds regardless of whether the row was re-rendered mid-click.
-  container.addEventListener('mousedown', (e) => {
+  function onContainerMouseDown(e) {
     if (!e.ctrlKey && !e.metaKey && !e.shiftKey) {
       if (_multiSel.size) { _multiSel.clear(); render() }
       return
@@ -336,9 +352,9 @@ export function createSceneHierarchy(container, { onSelect, onFocus, onDelete, o
     const id = item.getAttribute('data-eid')
     if (_multiSel.has(id)) _multiSel.delete(id); else _multiSel.add(id)
     render()
-  }, true)
+  }
 
-  container.addEventListener('click', (e) => {
+  function onContainerClick(e) {
     const item = e.target.closest('.ds-ep-tree-item[data-eid]')
     if (!item) return
     const id = item.getAttribute('data-eid')
@@ -348,9 +364,9 @@ export function createSceneHierarchy(container, { onSelect, onFocus, onDelete, o
     _sel = id
     onSelect?.(id)
     render()
-  }, true)
+  }
 
-  container.addEventListener('keydown', (e) => {
+  function onContainerKeyDown(e) {
     if (!_lastRows.length) return
     const idx = _sel ? _lastRows.findIndex(r => r.node.id === _sel) : -1
     if (e.key === 'ArrowDown') {
@@ -379,11 +395,15 @@ export function createSceneHierarchy(container, { onSelect, onFocus, onDelete, o
         if (ok) { onDelete(id); showToast('Deleted ' + id) }
       })
     }
-  })
+  }
+
+  container.addEventListener('mousedown', onContainerMouseDown, true)
+  container.addEventListener('click', onContainerClick, true)
+  container.addEventListener('keydown', onContainerKeyDown)
 
   render()
   return {
-    updateEntities(ents) { _ents = ents || []; _parentOf.clear(); indexParents(_ents, null); render() },
+    updateEntities(ents) { _ents = ents || []; _parentOf.clear(); indexParents(_ents, null, _parentOf); render() },
     setSelected(id) { _sel = id; render() },
     get selectedId() { return _sel },
     // Client-side-only lock/hidden-in-editor sets, read by editor.js (pick-gating) and app.js (editor-overlay

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoint",
-  "version": "0.1.638",
+  "version": "0.1.640",
   "description": "Physics and netcode SDK for multiplayer game servers",
   "type": "module",
   "workspaces": [

package/src/terrain/ColliderStreamer.js

@@ -34,6 +34,55 @@
 
 const _now = () => (typeof performance !== 'undefined' ? performance.now() : Date.now())
 
+// Rough per-shape resident-body byte estimate: dominated by the args payload (convex hull point
+// arrays are the only variable-size shape here; box/capsule args are a handful of floats) plus a
+// fixed per-body/broadphase-node overhead so even tiny shapes count for something under the budget.
+const _BODY_OVERHEAD_BYTES = 256
+function estimateBodyBytes(a) {
+  if (!a) return _BODY_OVERHEAD_BYTES
+  const args = a.args
+  let n = 0
+  if (args && typeof args.byteLength === 'number') n = args.byteLength
+  else if (Array.isArray(args)) n = args.length * 4
+  return _BODY_OVERHEAD_BYTES + n
+}
+
+// Chunk placements memoized per (cx,cz) for world lifetime: classify is expensive and the ring is walked twice per rebuild.
+const chunkKey = (cx, cz) => ((cx & 0x3fffff) * 0x400000) + (cz & 0x3fffff)
+
+// Greedy same-pass clustering: merges centers within mergeRadius of an already-picked center so their
+// rings aren't walked twice, then caps the result to maxCenters (nearest-to-existing-pick-order, i.e.
+// whichever centers getCenters() returns first win a slot -- callers should return closer/more-recent
+// players first if they want to bias which players keep their ring under a maxCenters squeeze).
+function clusterCenters(centers, mergeRadius, maxCenters) {
+  const picked = []
+  for (const c of centers) {
+    let merged = false
+    for (const p of picked) { if (Math.hypot(c[0] - p[0], c[1] - p[1]) <= mergeRadius) { merged = true; break } }
+    if (!merged) picked.push(c)
+    if (picked.length >= maxCenters) break
+  }
+  return picked
+}
+
+// A rebuild is due if ANY center moved more than the hysteresis threshold from its previous ring
+// position, OR the player POPULATION changed (a new player joined with no ring yet, or one left) --
+// matching centers positionally (not by count alone) so a same-size swap (player A left, player B
+// joined at a different spot in the same tick) still triggers, since neither raw count nor "closest
+// pair distance" alone would catch that combination reliably.
+function ringMoved(centers, curCenters, moveThreshold) {
+  if (curCenters.length !== centers.length) return true
+  for (let i = 0; i < centers.length; i++) {
+    let nearest = Infinity
+    for (let j = 0; j < curCenters.length; j++) {
+      const d = Math.hypot(centers[i][0] - curCenters[j][0], centers[i][1] - curCenters[j][1])
+      if (d < nearest) nearest = d
+    }
+    if (nearest > moveThreshold) return true
+  }
+  return false
+}
+
 export function createColliderStreamer(spec = {}) {
   const physics = spec.physics
   // getCenters (preferred, multi-player) wins over getCenter (legacy single-center shim) when both are given.
@@ -94,23 +143,9 @@ export function createColliderStreamer(spec = {}) {
     const b = _lru.get(placementId)
     if (b !== undefined) { _residentBytes -= b; _lru.delete(placementId) }
   }
-  // Rough per-shape resident-body byte estimate: dominated by the args payload (convex hull point
-  // arrays are the only variable-size shape here; box/capsule args are a handful of floats) plus a
-  // fixed per-body/broadphase-node overhead so even tiny shapes count for something under the budget.
-  const _BODY_OVERHEAD_BYTES = 256
-  function _estimateBytes(a) {
-    if (!a) return _BODY_OVERHEAD_BYTES
-    const args = a.args
-    let n = 0
-    if (args && typeof args.byteLength === 'number') n = args.byteLength
-    else if (Array.isArray(args)) n = args.length * 4
-    return _BODY_OVERHEAD_BYTES + n
-  }
   let curCenter = null, rebuilding = false, disposed = false, _timer = null, rebuildCount = 0
   let curCenters = []  // last-used ring centers, for diagnostics/tests
 
-  // Chunk placements memoized per (cx,cz) for world lifetime: classify is expensive and the ring is walked twice per rebuild.
-  const _chunkKey = (cx, cz) => ((cx & 0x3fffff) * 0x400000) + (cz & 0x3fffff)
   const _CHUNK_CACHE_CAP = 4096
   const _chunkCache = new Map()
   function _chunkCacheGet(k) {
@@ -130,7 +165,7 @@ export function createColliderStreamer(spec = {}) {
   // unbudgeted=true: initial pre-gameplay start() build, computes the whole ring in one pass.
   function _beginBudget(unbudgeted) { _budgetDeadline = _now() + COMPUTE_BUDGET_MS; _newThisPass = 0; _deferred = false; _budgetOff = !!unbudgeted }
   function chunkPlacements(cx, cz) {
-    const k = _chunkKey(cx, cz)
+    const k = chunkKey(cx, cz)
     let v = _chunkCacheGet(k)
     if (v) return v
     if (!_budgetOff && (_newThisPass >= MAX_NEW_CHUNKS_PER_PASS || _now() >= _budgetDeadline)) { _deferred = true; return _EMPTY }
@@ -140,21 +175,6 @@ export function createColliderStreamer(spec = {}) {
 
   const radiusSq = radius * radius, keepRadiusSq = keepRadius * keepRadius
 
-  // Greedy same-pass clustering: merges centers within mergeRadius of an already-picked center so their
-  // rings aren't walked twice, then caps the result to maxCenters (nearest-to-existing-pick-order, i.e.
-  // whichever centers getCenters() returns first win a slot -- callers should return closer/more-recent
-  // players first if they want to bias which players keep their ring under a maxCenters squeeze).
-  function _clusterCenters(centers) {
-    const picked = []
-    for (const c of centers) {
-      let merged = false
-      for (const p of picked) { if (Math.hypot(c[0] - p[0], c[1] - p[1]) <= mergeRadius) { merged = true; break } }
-      if (!merged) picked.push(c)
-      if (picked.length >= maxCenters) break
-    }
-    return picked
-  }
-
   // Ring walk around ONE center; classifies each candidate into desired/keep from one distance calc.
   // Returns raw per-center results (not yet capped) -- capping happens after the union across all
   // centers in classifyRings below, so a candidate close to center B doesn't lose its cap slot just
@@ -202,7 +222,7 @@ export function createColliderStreamer(spec = {}) {
   function scheduleAdd(p) {
     const a = bodyArgs(p); if (!a) return
     const placementId = p[idField]
-    _touch(placementId, _estimateBytes(a))
+    _touch(placementId, estimateBodyBytes(a))
     if (_useQueue) {
       live.set(placementId, _PENDING)
       physics.enqueueAdd(a.shape, a.args, a.position, 'static', { rotation: a.rotation, shapeKey: a.shapeKey }, (id) => {
@@ -297,7 +317,7 @@ export function createColliderStreamer(spec = {}) {
             addDeadline = _now() + ADD_BUDGET_MS
           }
         } else {
-          _touch(p[idField], _lru.get(p[idField]) ?? _estimateBytes(bodyArgs(p))) // re-affirm LRU recency for a still-desired survivor
+          _touch(p[idField], _lru.get(p[idField]) ?? estimateBodyBytes(bodyArgs(p))) // re-affirm LRU recency for a still-desired survivor
         }
       }
       // skip remove pass if budget-deferred: an incomplete keep set would wrongly drop in-range bodies; curCenters stays stale so _check re-converges.
@@ -328,30 +348,13 @@ export function createColliderStreamer(spec = {}) {
     if (disposed) return
     _timer = setTimeout(_check, deferredRetry ? 16 : intervalMs)
   }
-  // A rebuild is due if ANY center moved more than the hysteresis threshold from its previous ring
-  // position, OR the player POPULATION changed (a new player joined with no ring yet, or one left) --
-  // matching centers positionally (not by count alone) so a same-size swap (player A left, player B
-  // joined at a different spot in the same tick) still triggers, since neither raw count nor "closest
-  // pair distance" alone would catch that combination reliably.
-  function _ringMoved(centers) {
-    if (curCenters.length !== centers.length) return true
-    for (let i = 0; i < centers.length; i++) {
-      let nearest = Infinity
-      for (let j = 0; j < curCenters.length; j++) {
-        const d = Math.hypot(centers[i][0] - curCenters[j][0], centers[i][1] - curCenters[j][1])
-        if (d < nearest) nearest = d
-      }
-      if (nearest > radius * rebuildAt) return true
-    }
-    return false
-  }
   function _check() {
     if (disposed) return
     try {
       const raw = getCenters()
       if (raw.length && !rebuilding) {
-        const centers = _clusterCenters(raw)
-        if (!curCenters.length || _ringMoved(centers)) {
+        const centers = clusterCenters(raw, mergeRadius, maxCenters)
+        if (!curCenters.length || ringMoved(centers, curCenters, radius * rebuildAt)) {
           _rebuildMulti(centers).then(d => _scheduleNext(!!d)).catch(() => _scheduleNext(false))
           return
         }
@@ -364,7 +367,7 @@ export function createColliderStreamer(spec = {}) {
     if (disposed) return
     if (typeof spec.prewarm === 'function' && typeof physics.preallocatePool === 'function') spec.prewarm(physics, cap)
     const raw = getCenters()
-    const centers = raw.length ? _clusterCenters(raw) : [[0, 0]]
+    const centers = raw.length ? clusterCenters(raw, mergeRadius, maxCenters) : [[0, 0]]
     await _rebuildMulti(centers, true)
     setColliderIds(_liveIds)
     _timer = setTimeout(_check, intervalMs)