bring back site edition + zindex fix

2026-02-09 16:11:50 +09:00
parent b80db63ca6
commit cba709cb81
4 changed files with 241 additions and 40 deletions
@@ -1,4 +1,5 @@
 import { type SiteNode, useRegistry } from '@pascal-app/core'
+import { Html } from '@react-three/drei'
 import { useMemo, useRef } from 'react'
 import { BufferGeometry, DoubleSide, Float32BufferAttribute, type Group, Shape } from 'three'
 import { useNodeEvents } from '../../../hooks/use-node-events'
@@ -60,6 +61,19 @@ export const SiteRenderer = ({ node }: { node: SiteNode }) => {
    return createBoundaryLineGeometry(node.polygon.points)
  }, [node?.polygon?.points])

+  // Edge distances for labels
+  const edges = useMemo(() => {
+    const polygon = node?.polygon?.points ?? []
+    if (polygon.length < 2) return []
+    return polygon.map(([x1, z1], i) => {
+      const [x2, z2] = polygon[(i + 1) % polygon.length]!
+      const midX = (x1! + x2) / 2
+      const midZ = (z1! + z2) / 2
+      const dist = Math.sqrt((x2 - x1!) ** 2 + (z2 - z1!) ** 2)
+      return { midX, midZ, dist }
+    })
+  }, [node?.polygon?.points])
+
  const handlers = useNodeEvents(node, 'site')

  if (!node || !floorShape || !lineGeometry) {
@@ -98,6 +112,21 @@ export const SiteRenderer = ({ node }: { node: SiteNode }) => {
          opacity={0.6}
        />
      </line>
+
+      {/* Edge distance labels */}
+      {edges.map((edge, i) => (
+        <Html
+          center
+          key={`edge-${i}`}
+          position={[edge.midX, 0.5, edge.midZ]}
+          style={{ pointerEvents: 'none', userSelect: 'none' }}
+          zIndexRange={[10, 0]}
+        >
+          <div className="whitespace-nowrap rounded bg-black/75 px-1.5 py-0.5 font-mono text-white text-xs backdrop-blur-sm">
+            {edge.dist.toFixed(2)}m
+          </div>
+        </Html>
+      ))}
    </group>
  )
 }
@@ -180,7 +180,8 @@ export const ZoneRenderer = ({ node }: { node: ZoneNode }) => {
    <group ref={ref} {...handlers}>
      <Html name="label" position={[centroid[0], 1, centroid[1]]} style={{
        pointerEvents: 'none'
-      }}>
+      }}
+          zIndexRange={[10, 0]}>
        <div style={{
          transform: 'translate3d(-50%, -50%, 0)',
          width: 'max-content',