morgan/editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #131 from pascalorg/feat/zone-labels-polish

Browse Source 
Feat/zone labels polish
This commit is contained in:
Wassim SAMAD
2026-03-04 19:24:53 +09:00
committed by GitHub
parent bee4613b82 5e0c64b760
commit 92f15e28f1
4 changed files with 102 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/editor/app/viewer/[id]/viewer-zone-system.tsx
+4 -10
View File
@@ -25,16 +25,10 @@ export const ViewerZoneSystem = () => {
obj.visible = shouldShow
// Also hide the label
const label = obj.getObjectByName('label')
if (label) {
// Hide label if zone layer is off OR if in solo mode on a different level
const labelPosition = obj.userData.labelPosition as [number, number, number] | undefined
if (shouldShow && labelPosition) {
label.position.set(...labelPosition)
} else {
label.position.set(-9999, -9999, -9999)
}
const targetOpacity = shouldShow ? '1' : '0'
const labelEl = document.getElementById(`${id}-label`)
if (labelEl && labelEl.style.opacity !== targetOpacity) {
labelEl.style.opacity = targetOpacity
}
})
})
apps/editor/components/systems/zone/zone-system.tsx
+6 -14
View File
@@ -27,20 +27,12 @@ export const ZoneSystem = () => {
obj.visible = visible
}
const label = obj.getObjectByName('label')
if (label) {
// Hide label if zone layer is off OR if in solo mode on a different level
const showLabel = visible && !hideInSoloMode;
const labelPosition = obj.userData.labelPosition as [number, number, number] | undefined
const targetX = showLabel && labelPosition ? labelPosition[0] : -9999
if (label.position.x !== targetX) {
if (showLabel && labelPosition) {
label.position.set(...labelPosition)
} else {
label.position.set(-9999, -9999, -9999)
}
}
// Hide label if zone layer is off OR if in solo mode on a different level
const showLabel = visible && !hideInSoloMode
const targetOpacity = showLabel ? '1' : '0'
const labelEl = document.getElementById(`${zoneId}-label`)
if (labelEl && labelEl.style.opacity !== targetOpacity) {
labelEl.style.opacity = targetOpacity
}
})
})
packages/viewer/src/components/renderers/zone/zone-renderer.tsx
+55 -10
View File
@@ -19,9 +19,9 @@ const createWallGradientMaterial = (zoneColor: string) => {
// Use UV y coordinate for vertical gradient (0 at bottom, 1 at top)
const gradientT = uv().y
const opacity = uniform(0);
const opacity = uniform(0)
// Fade opacity from 0.6 at bottom to 0 at top
const finalOpacity = float(0.6).mul(float(1).sub(gradientT)).mul(opacity);
const finalOpacity = float(0.6).mul(float(1).sub(gradientT)).mul(opacity)
return new MeshBasicNodeMaterial({
transparent: true,
@@ -32,7 +32,7 @@ const createWallGradientMaterial = (zoneColor: string) => {
depthTest: false,
userData: {
uOpacity: opacity,
}
},
})
}
@@ -49,7 +49,7 @@ const createFloorMaterial = (zoneColor: string) => {
side: DoubleSide,
depthWrite: false,
depthTest: false,
userData: { uOpacity: opacity}
userData: { uOpacity: opacity },
})
}
@@ -176,25 +176,70 @@ export const ZoneRenderer = ({ node }: { node: ZoneNode }) => {
return null
}
return (
<group ref={ref} {...handlers} userData={{ labelPosition: [centroid[0], 1, centroid[1]] }}>
<Html
name="label"
position={[centroid[0], 1, centroid[1]]}
style={{ pointerEvents: 'none' }}
style={{ pointerEvents: 'none', }}
zIndexRange={[10, 0]}
>
<div style={{
<div id={`${node.id}-label`} style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
transform: 'translate3d(-50%, -50%, 0)',
width: 'max-content',
color: 'white',
textShadow: `-1px -1px 0 ${node.color}, 1px -1px 0 ${node.color}, -1px 1px 0 ${node.color}, 1px 1px 0 ${node.color}`,
opacity: 0,
transition: 'opacity 0.3s ease-in-out',
}}>
<div
style={{
width: 'max-content',
color: 'white',
textShadow: `-1px -1px 0 ${node.color}, 1px -1px 0 ${node.color}, -1px 1px 0 ${node.color}, 1px 1px 0 ${node.color}`,
textAlign: 'center',
}}
>
<span>{node.name}</span>
</div>
<div
className="label-pin"
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
marginTop: '2px',
opacity: 0,
transition: 'opacity 0.5s ease-in-out',
}}
>
<div
style={{
width: '2px',
height: '40px',
backgroundColor: node.color,
}}/>
<div
style={{
width: '10px',
height: '10px',
borderRadius: '50%',
backgroundColor: node.color,
border: `1px solid white`,
}}
/>
</div>
</div>
</Html>
{/* Floor fill */}
<mesh position={[0, Y_OFFSET, 0]} rotation={[-Math.PI / 2, 0, 0]} material={floorMaterial} name="floor">
<mesh
position={[0, Y_OFFSET, 0]}
rotation={[-Math.PI / 2, 0, 0]}
material={floorMaterial}
name="floor"
>
<shapeGeometry args={[floorShape]} />
</mesh>
packages/viewer/src/systems/zone/zone-system.tsx
+35 -3
View File
@@ -6,25 +6,56 @@ import type { MeshBasicNodeMaterial } from 'three/webgpu'
import useViewer from '../../store/use-viewer'
const TRANSITION_DURATION = 400 // ms
const EXIT_DEBOUNCE_MS = 50 // ignore rapid exit→re-enter within this window
export const ZoneSystem = () => {
const lastHighlightedZoneRef = useRef<string | null>(null)
const lastChangeTimeRef = useRef(0)
const isTransitioningRef = useRef(false)
// Debounce exit-to-null: track the raw pending value and when it last changed
const pendingZoneRef = useRef<string | null>(null)
const pendingZoneSinceRef = useRef(0)
useFrame(({clock}, delta) => {
const hoveredId = useViewer.getState().hoveredId
let highlightedZone: string | null = null
let rawZone: string | null = null
if (hoveredId) {
const hoveredNode = useScene.getState().nodes[hoveredId]
if (hoveredNode?.type === 'zone') {
highlightedZone = hoveredId
rawZone = hoveredId
}
}
// Detect zone change
// Update pending zone when the raw value changes
if (rawZone !== pendingZoneRef.current) {
pendingZoneRef.current = rawZone
pendingZoneSinceRef.current = clock.elapsedTime * 1000
}
// Apply non-null immediately; debounce null to filter out brief exits
const age = clock.elapsedTime * 1000 - pendingZoneSinceRef.current
const highlightedZone = rawZone !== null
? rawZone
: age >= EXIT_DEBOUNCE_MS ? null : lastHighlightedZoneRef.current
// Detect stable zone change
if (highlightedZone !== lastHighlightedZoneRef.current) {
// Fade out previous zone label-pin
if (lastHighlightedZoneRef.current) {
const prevLabel = document.getElementById(`${lastHighlightedZoneRef.current}-label`)
const pin = prevLabel?.querySelector('.label-pin') as HTMLElement | null
if (pin) pin.style.opacity = '0'
console.log('setting opacity to 0 for', lastHighlightedZoneRef.current)
}
// Fade in new zone label-pin
if (highlightedZone) {
const label = document.getElementById(`${highlightedZone}-label`)
const pin = label?.querySelector('.label-pin') as HTMLElement | null
if (pin) pin.style.opacity = '1'
console.log('setting opacity to 1 for', highlightedZone)
}
lastHighlightedZoneRef.current = highlightedZone
lastChangeTimeRef.current = clock.elapsedTime * 1000
isTransitioningRef.current = true
@@ -63,6 +94,7 @@ export const ZoneSystem = () => {
const currentOpacity = material.userData.uOpacity.value
material.userData.uOpacity.value = MathUtils.lerp(currentOpacity, targetOpacity, lerpSpeed)
}
})
})