@pascal-app/editor 0.9.2 → 1.0.0-beta.2

package/src/components/editor/thumbnail-generator.tsx

@@ -1,47 +1,25 @@
 'use client'
 
-import { emitter, sceneRegistry } from '@pascal-app/core'
+import { emitter } from '@pascal-app/core'
 import {
-  backdropGradient,
-  deepSkyColor,
+  computeHeroFraming,
+  createSnapshotPipeline,
   GRID_LAYER,
-  getSceneTheme,
-  horizonHazeColor,
-  packNormalToRGB,
-  SSGI_PARAMS,
+  heroCameraPose,
+  type SnapshotPipeline,
   snapLevelsToTruePositions,
-  unpackRGBToNormal,
+  THUMBNAIL_HEIGHT,
+  THUMBNAIL_WIDTH,
+  temporarilyHideNodeTypes,
   useViewer,
 } from '@pascal-app/viewer'
 import type { CameraControls } from '@react-three/drei'
 import { useThree } from '@react-three/fiber'
 import { useCallback, useEffect, useRef } from 'react'
 import * as THREE from 'three'
-import { UnsignedByteType } from 'three'
-import { ssgi } from 'three/addons/tsl/display/SSGINode.js'
-import { denoise } from 'three/examples/jsm/tsl/display/DenoiseNode.js'
-import { fxaa } from 'three/examples/jsm/tsl/display/FXAANode.js'
-import {
-  convertToTexture,
-  diffuseColor,
-  float,
-  mix,
-  mrt,
-  normalView,
-  output,
-  pass,
-  sample,
-  screenUV,
-  smoothstep,
-  uniform,
-  vec4,
-} from 'three/tsl'
-import { RenderPipeline, RenderTarget, type WebGPURenderer } from 'three/webgpu'
+import type { WebGPURenderer } from 'three/webgpu'
 import { EDITOR_LAYER } from '../../lib/constants'
 
-const THUMBNAIL_WIDTH = 1920
-const THUMBNAIL_HEIGHT = 1080
-
 export interface SnapshotCameraData {
   position: [number, number, number]
   target: [number, number, number] | null
@@ -64,20 +42,7 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
   const onThumbnailCaptureRef = useRef(onThumbnailCapture)
 
   const thumbnailCameraRef = useRef<THREE.PerspectiveCamera | null>(null)
-  const pipelineRef = useRef<RenderPipeline | null>(null)
-  const renderTargetRef = useRef<RenderTarget | null>(null)
-
-  // Backdrop compositing for scene snapshots (studio renders, project
-  // thumbnails): theme background + sky gradient, same world-ray math as the
-  // viewport backdrop in viewer's post-processing. Uniform-driven so the one
-  // cached pipeline serves both opaque and transparent (preset/item) captures.
-  const bgColorUniform = useRef(uniform(new THREE.Color('#ffffff')))
-  const bgSkyUniform = useRef(uniform(new THREE.Color('#ffffff')))
-  const bgSkyDeepUniform = useRef(uniform(new THREE.Color('#ffffff')))
-  const bgHazeUniform = useRef(uniform(new THREE.Color('#ffffff')))
-  const bgProjInvUniform = useRef(uniform(new THREE.Matrix4()))
-  const bgCamWorldUniform = useRef(uniform(new THREE.Matrix4()))
-  const bgMixUniform = useRef(uniform(1))
+  const pipelineRef = useRef<SnapshotPipeline | null>(null)
 
   useEffect(() => {
     onThumbnailCaptureRef.current = onThumbnailCapture
@@ -93,116 +58,24 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
     let mounted = true
 
     const buildPipeline = async () => {
-      try {
-        if ((gl as any).init) await (gl as any).init()
-        if (!mounted) return
-
-        // pass() handles MRT internally for all material types, including custom
-        // shaders — unlike renderer.setMRT() which crashes on non-NodeMaterials.
-        // pass() also respects camera.layers, so EDITOR_LAYER + GRID_LAYER objects are filtered.
-        const scenePass = pass(scene, cam)
-        scenePass.setMRT(
-          mrt({
-            output,
-            diffuseColor,
-            normal: packNormalToRGB(normalView),
-          }),
-        )
-
-        const scenePassColor = scenePass.getTextureNode('output')
-        const scenePassDepth = scenePass.getTextureNode('depth')
-        const scenePassNormal = scenePass.getTextureNode('normal')
-
-        scenePass.getTexture('diffuseColor').type = UnsignedByteType
-        scenePass.getTexture('normal').type = UnsignedByteType
-
-        const sceneNormal = sample((uv) => unpackRGBToNormal(scenePassNormal.sample(uv)))
-
-        const giPass = ssgi(scenePassColor, scenePassDepth, sceneNormal, cam as any)
-        giPass.sliceCount.value = SSGI_PARAMS.sliceCount
-        giPass.stepCount.value = SSGI_PARAMS.stepCount
-        giPass.radius.value = SSGI_PARAMS.radius
-        giPass.expFactor.value = SSGI_PARAMS.expFactor
-        giPass.thickness.value = SSGI_PARAMS.thickness
-        giPass.backfaceLighting.value = SSGI_PARAMS.backfaceLighting
-        giPass.aoIntensity.value = SSGI_PARAMS.aoIntensity
-        giPass.giIntensity.value = SSGI_PARAMS.giIntensity
-        giPass.useLinearThickness.value = SSGI_PARAMS.useLinearThickness
-        giPass.useScreenSpaceSampling.value = SSGI_PARAMS.useScreenSpaceSampling
-        giPass.useTemporalFiltering = SSGI_PARAMS.useTemporalFiltering
-
-        // r185: SSGI's AO lives in its own single-channel texture (getAONode)
-        // rather than the alpha of one packed rgba texture.
-        const aoTexture = (giPass as any).getAONode()
-        const aoAsRgb = vec4(aoTexture.r, aoTexture.r, aoTexture.r, float(1))
-        const denoisePass = denoise(aoAsRgb, scenePassDepth, sceneNormal, cam)
-        denoisePass.index.value = 0
-        denoisePass.radius.value = 4
-
-        // Same far-field AO fade as the viewport pipeline — without it the
-        // horizon picks up a visible AO line in captures.
-        const aoFarFade = smoothstep(
-          float(0.9994),
-          float(0.9998),
-          scenePassDepth.sample(screenUV).r,
-        )
-        const ao = mix((denoisePass as any).r, float(1), aoFarFade)
-        const sceneRgb = scenePassColor.rgb.mul(ao)
-
-        // Per-pixel world ray from the capture camera → sky gradient above the
-        // horizon (dir.y = 0), flat background below — mirrors the viewport
-        // backdrop. bgMix 0 bypasses it and keeps the capture transparent.
-        const ndc = vec4(
-          screenUV.x.mul(2).sub(1),
-          float(1).sub(screenUV.y).mul(2).sub(1),
-          1,
-          1,
-        ) as any
-        const viewRay = (bgProjInvUniform.current as any).mul(ndc)
-        const worldDir = (bgCamWorldUniform.current as any)
-          .mul(vec4(viewRay.xyz, 0))
-          .xyz.normalize()
-        const bgGradient = backdropGradient({
-          dirY: worldDir.y,
-          background: bgColorUniform.current,
-          haze: bgHazeUniform.current,
-          sky: bgSkyUniform.current,
-          skyDeep: bgSkyDeepUniform.current,
-        })
-        const alpha = scenePassColor.a
-        const finalOutput = vec4(
-          mix(sceneRgb, mix(bgGradient, sceneRgb, alpha), bgMixUniform.current),
-          mix(alpha, float(1), bgMixUniform.current),
-        )
-
-        // FXAA requires a texture node as input; convertToTexture renders finalOutput
-        // into an intermediate RT so FXAA can sample it with neighbour UV offsets.
-        const aaOutput = fxaa(convertToTexture(finalOutput))
-
-        const pipeline = new RenderPipeline(gl as unknown as WebGPURenderer)
-        pipeline.outputNode = aaOutput
-        pipelineRef.current = pipeline
-
-        // Dedicated render target — pipeline outputs here instead of the canvas,
-        // so R3F's main render loop can never overwrite our capture.
-        const { width, height } = gl.domElement
-        renderTargetRef.current = new RenderTarget(width, height, { depthBuffer: true })
-      } catch (error) {
-        console.error(
-          '[thumbnail] Failed to build post-processing pipeline, will use fallback render.',
-          error,
-        )
+      const pipeline = await createSnapshotPipeline({
+        renderer: gl as unknown as WebGPURenderer,
+        scene,
+        camera: cam,
+      })
+      if (!mounted) {
+        pipeline?.dispose()
+        return
       }
+      pipelineRef.current = pipeline
     }
 
-    buildPipeline()
+    void buildPipeline()
 
     return () => {
       mounted = false
       pipelineRef.current?.dispose()
       pipelineRef.current = null
-      renderTargetRef.current?.dispose()
-      renderTargetRef.current = null
     }
   }, [gl, scene])
 
@@ -242,16 +115,15 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
         // uniforms below.
         thumbnailCamera.updateMatrixWorld()
 
-        const theme = getSceneTheme(useViewer.getState().sceneTheme)
-        bgColorUniform.current.value.set(theme.background)
-        bgSkyUniform.current.value.set(theme.backgroundSky ?? theme.background)
-        bgSkyDeepUniform.current.value.set(deepSkyColor(theme.backgroundSky ?? theme.background))
-        bgHazeUniform.current.value.set(
-          horizonHazeColor(theme.backgroundSky ?? theme.background, theme.appearance),
-        )
-        bgProjInvUniform.current.value.copy(thumbnailCamera.projectionMatrixInverse)
-        bgCamWorldUniform.current.value.copy(thumbnailCamera.matrixWorld)
-        bgMixUniform.current.value = transparent ? 0 : 1
+        const pipeline = pipelineRef.current
+        pipeline?.applyEnvironment({
+          theme: useViewer.getState().sceneTheme,
+          transparent,
+          grade: useViewer.getState().shading === 'rendered',
+          // Preset/item captures stay clean; scene captures mirror the canvas.
+          edges: transparent ? 'off' : useViewer.getState().edges,
+          camera: thumbnailCamera,
+        })
 
         // Capture camera data for snapshot storage
         const pos = mainCamera.position
@@ -286,166 +158,66 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
         // are registered. Spawn renders on SCENE_LAYER for occlusion, so the
         // thumbnail camera's layer mask can't filter it either. Returns a
         // function that restores the original visibility.
-        const restoreNodeVisibility = (() => {
-          const saved = new Map<THREE.Object3D, boolean>()
-          for (const type of ['scan', 'guide', 'spawn'] as const) {
-            const ids = sceneRegistry.byType[type]!
-            ids.forEach((id) => {
-              const node = sceneRegistry.nodes.get(id)
-              if (node) {
-                saved.set(node, node.visible)
-                node.visible = false
-              }
+        const restoreNodeVisibility = temporarilyHideNodeTypes(['scan', 'guide', 'spawn'])
+
+        // Auto-save shots don't copy the user's mid-edit camera — they re-pose
+        // onto the same computed hero angle the published thumbnail uses, so a
+        // project's card never shows a half-zoomed working view. Measured after
+        // the level snap so stacked positions frame correctly. User-driven
+        // captures (captureMode set) keep the exact viewport pose.
+        if (snapLevels) {
+          const framing = computeHeroFraming()
+          if (framing) {
+            const pose = heroCameraPose({
+              boxes: framing.boxes,
+              aim: framing.aim,
+              azimuthRad: framing.azimuthRad,
+              aspect: width / height,
             })
-          }
-          return () => {
-            saved.forEach((wasVisible, node) => {
-              node.visible = wasVisible
+            thumbnailCamera.position.set(pose.position[0], pose.position[1], pose.position[2])
+            thumbnailCamera.lookAt(pose.target[0], pose.target[1], pose.target[2])
+            thumbnailCamera.updateMatrixWorld()
+            pipeline?.applyEnvironment({
+              theme: useViewer.getState().sceneTheme,
+              transparent,
+              grade: useViewer.getState().shading === 'rendered',
+              edges: transparent ? 'off' : useViewer.getState().edges,
+              camera: thumbnailCamera,
             })
+            cameraData.position = pose.position
+            cameraData.target = pose.target
           }
-        })()
+        }
 
         let blob: Blob
 
-        if (pipelineRef.current && renderTargetRef.current) {
-          const rt = renderTargetRef.current
-
-          // Resize RT if the canvas dimensions changed
-          if (rt.width !== width || rt.height !== height) {
-            rt.setSize(width, height)
-          }
-
-          const renderer = gl as unknown as WebGPURenderer
+        if (pipeline) {
+          let capturePromise: ReturnType<SnapshotPipeline['capture']>
 
           // Notify other systems (wall cutouts, selection manager) to restore
           // their overrides before capture and re-apply them after.
           try {
             emitter.emit('thumbnail:before-capture', undefined)
-            ;(renderer as any).setClearAlpha(0)
-            renderer.setRenderTarget(rt)
-            pipelineRef.current.render()
+            capturePromise = pipeline.capture({
+              captureMode,
+              cropRegion,
+              standardSize,
+            })
           } finally {
             // Restore level positions, levelMode, and node visibility immediately
             // after the render — before the async GPU readback. Runs in `finally`
             // so a render failure can't leave helpers permanently hidden.
-            renderer.setRenderTarget(null)
             emitter.emit('thumbnail:after-capture', undefined)
             restoreLevels()
             restoreLevelMode?.()
             restoreNodeVisibility()
           }
 
-          // Read pixels from the RT asynchronously.
-          // WebGPU copyTextureToBuffer aligns each row to 256 bytes, so we must
-          // depad the rows before constructing ImageData.
-          const pixels = (await (renderer as any).readRenderTargetPixelsAsync(
-            rt,
-            0,
-            0,
-            width,
-            height,
-          )) as Uint8Array
-
-          const actualBytesPerRow = width * 4
-          const tightTotal = actualBytesPerRow * height
-          const paddedBytesPerRow = Math.ceil(actualBytesPerRow / 256) * 256
-          // Two readback shapes to handle:
-          // - WebGPU (`copyTextureToBuffer`): top-down + 256-byte row padding
-          //   when width*4 isn't already a multiple of 256.
-          // - WebGL2 fallback (iOS Chrome, etc.): tightly-packed but bottom-up
-          //   (OpenGL framebuffer convention).
-          // `isWebGPURenderer` lies — it stays true even when the renderer
-          // falls back to the WebGL backend. Inspect the actual backend
-          // instead (presence of a GPU device, or backend constructor name).
-          const backend = (renderer as any).backend
-          const isWebGPU =
-            !!backend?.device ||
-            backend?.isWebGPUBackend === true ||
-            backend?.constructor?.name === 'WebGPUBackend'
-          let tightPixels: Uint8ClampedArray
-          if (isWebGPU) {
-            // WebGPU: depad rows if needed; orientation is already top-down.
-            if (paddedBytesPerRow === actualBytesPerRow) {
-              tightPixels = new Uint8ClampedArray(
-                pixels.buffer,
-                pixels.byteOffset,
-                Math.min(pixels.byteLength, tightTotal),
-              )
-            } else {
-              tightPixels = new Uint8ClampedArray(tightTotal)
-              for (let row = 0; row < height; row++) {
-                tightPixels.set(
-                  pixels.subarray(
-                    row * paddedBytesPerRow,
-                    row * paddedBytesPerRow + actualBytesPerRow,
-                  ),
-                  row * actualBytesPerRow,
-                )
-              }
-            }
-          } else {
-            // WebGL2: tight buffer in bottom-up order — flip rows.
-            tightPixels = new Uint8ClampedArray(tightTotal)
-            for (let row = 0; row < height; row++) {
-              const srcStart = (height - 1 - row) * actualBytesPerRow
-              tightPixels.set(
-                pixels.subarray(srcStart, srcStart + actualBytesPerRow),
-                row * actualBytesPerRow,
-              )
-            }
-          }
-
-          const imageData = new ImageData(
-            tightPixels as unknown as Uint8ClampedArray<ArrayBuffer>,
-            width,
-            height,
-          )
-          const srcCanvas = new OffscreenCanvas(width, height)
-          srcCanvas.getContext('2d')!.putImageData(imageData, 0, 0)
-
-          let outW: number
-          let outH: number
-
-          if (captureMode === 'viewport') {
-            outW = width
-            outH = height
-            const offscreen = new OffscreenCanvas(outW, outH)
-            offscreen.getContext('2d')!.drawImage(srcCanvas, 0, 0)
-            blob = await offscreen.convertToBlob({ type: 'image/png' })
-          } else if (captureMode === 'area' && cropRegion) {
-            const sx = Math.round(cropRegion.x * width)
-            const sy = Math.round(cropRegion.y * height)
-            outW = Math.round(cropRegion.width * width)
-            outH = Math.round(cropRegion.height * height)
-            const offscreen = new OffscreenCanvas(outW, outH)
-            offscreen.getContext('2d')!.drawImage(srcCanvas, sx, sy, outW, outH, 0, 0, outW, outH)
-            blob = await offscreen.convertToBlob({ type: 'image/png' })
-          } else {
-            // Standard: center-crop to the requested aspect (default 1920×1080)
-            const srcAspect = width / height
-            const dstAspect = standardW / standardH
-            let sx = 0,
-              sy = 0,
-              sWidth = width,
-              sHeight = height
-            if (srcAspect > dstAspect) {
-              sWidth = Math.round(height * dstAspect)
-              sx = Math.round((width - sWidth) / 2)
-            } else if (srcAspect < dstAspect) {
-              sHeight = Math.round(width / dstAspect)
-              sy = Math.round((height - sHeight) / 2)
-            }
-            outW = standardW
-            outH = standardH
-            const offscreen = new OffscreenCanvas(outW, outH)
-            offscreen
-              .getContext('2d')!
-              .drawImage(srcCanvas, sx, sy, sWidth, sHeight, 0, 0, outW, outH)
-            blob = await offscreen.convertToBlob({ type: 'image/png' })
-          }
+          const result = await capturePromise
+          blob = result.blob
 
           if (captureMode !== undefined) cameraData.captureMode = captureMode
-          cameraData.resolution = { w: outW, h: outH }
+          cameraData.resolution = { w: result.outW, h: result.outH }
         } else {
           // Fallback: plain render directly to the canvas
           try {

package/src/components/editor/use-floorplan-hit-testing.test.ts

@@ -0,0 +1,82 @@
+import { describe, expect, test } from 'bun:test'
+import { collectRegistrySelectionIdsInBounds } from './use-floorplan-hit-testing'
+
+const identityMatrix = {
+  inverse() {
+    return this
+  },
+}
+
+function pointFactory() {
+  return {
+    x: 0,
+    y: 0,
+    matrixTransform() {
+      return pointFactoryWithPosition(this.x, this.y)
+    },
+  }
+}
+
+function pointFactoryWithPosition(x: number, y: number) {
+  return {
+    x,
+    y,
+    matrixTransform() {
+      return pointFactoryWithPosition(x, y)
+    },
+  }
+}
+
+function geometry(x: number, y: number, width: number, height: number) {
+  return {
+    getBBox: () => ({ x, y, width, height }),
+    getScreenCTM: () => identityMatrix,
+  } as unknown as SVGGraphicsElement
+}
+
+function entry(nodeId: string, children: SVGGraphicsElement[]) {
+  return {
+    dataset: { nodeId },
+    querySelectorAll: () => children,
+  } as unknown as SVGGElement
+}
+
+function scene(entries: SVGGElement[]) {
+  return {
+    getScreenCTM: () => identityMatrix,
+    ownerSVGElement: {
+      createSVGPoint: pointFactory,
+    },
+    querySelectorAll: () => entries,
+  } as unknown as SVGGElement
+}
+
+describe('collectRegistrySelectionIdsInBounds', () => {
+  test('selects rendered registry geometry and preserves candidate order', () => {
+    const renderedScene = scene([
+      entry('wall_1', [geometry(0, 0, 4, 0.2)]),
+      entry('door_1', [geometry(1, 1, 0.9, 0.9)]),
+      entry('outside_1', [geometry(20, 20, 1, 1)]),
+    ])
+
+    expect(
+      collectRegistrySelectionIdsInBounds(renderedScene, { minX: -1, minY: -1, maxX: 5, maxY: 5 }, [
+        'door_1',
+        'outside_1',
+        'wall_1',
+      ]),
+    ).toEqual(['door_1', 'wall_1'])
+  })
+
+  test('ignores rendered entries outside the selectable registry candidates', () => {
+    const renderedScene = scene([entry('zone_1', [geometry(0, 0, 2, 2)])])
+
+    expect(
+      collectRegistrySelectionIdsInBounds(
+        renderedScene,
+        { minX: -1, minY: -1, maxX: 3, maxY: 3 },
+        [],
+      ),
+    ).toEqual([])
+  })
+})