@pascal-app/editor 0.6.0 → 0.7.0

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

@@ -265,18 +265,49 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
           )) 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 (paddedBytesPerRow === actualBytesPerRow) {
-            tightPixels = new Uint8ClampedArray(pixels.buffer, pixels.byteOffset, pixels.byteLength)
+          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 {
-            tightPixels = new Uint8ClampedArray(width * height * 4)
+            // 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(
-                  row * paddedBytesPerRow,
-                  row * paddedBytesPerRow + actualBytesPerRow,
-                ),
+                pixels.subarray(srcStart, srcStart + actualBytesPerRow),
                 row * actualBytesPerRow,
               )
             }

package/src/components/editor/use-floorplan-background-placement.ts

@@ -0,0 +1,257 @@
+'use client'
+
+import { emitter, type FenceNode, isCurvedWall, type WallNode } from '@pascal-app/core'
+import { type MouseEvent as ReactMouseEvent, useCallback } from 'react'
+import { getPlanPointDistance } from '../../lib/floorplan'
+import { snapFenceDraftPoint } from '../tools/fence/fence-drafting'
+import type { WallPlanPoint } from '../tools/wall/wall-drafting'
+
+type UseFloorplanBackgroundPlacementArgs = {
+  activePolygonDraftPoints: WallPlanPoint[]
+  ceilingDraftPoints: WallPlanPoint[]
+  clearFencePlacementDraft: () => void
+  clearRoofPlacementDraft: () => void
+  emitFloorplanGridEvent: (
+    type: 'click' | 'double-click' | 'move',
+    planPoint: WallPlanPoint,
+    event: ReactMouseEvent<SVGSVGElement>,
+  ) => WallPlanPoint
+  fenceDraftStart: WallPlanPoint | null
+  fences: FenceNode[]
+  findClosestWallPoint: (
+    point: WallPlanPoint,
+    walls: WallNode[],
+    options?: { canUseWall?: (wall: WallNode) => boolean },
+  ) => {
+    normal: [number, number, number]
+    point: WallPlanPoint
+    t: number
+    wall: WallNode
+  } | null
+  floorplanOpeningLocalY: number
+  getSnappedFloorplanPoint: (point: WallPlanPoint) => WallPlanPoint
+  handleCeilingPlacementPoint: (point: WallPlanPoint) => void
+  handleSlabPlacementPoint: (point: WallPlanPoint) => void
+  handleWallPlacementPoint: (point: WallPlanPoint) => void
+  handleZonePlacementPoint: (point: WallPlanPoint) => void
+  isCeilingBuildActive: boolean
+  isFenceBuildActive: boolean
+  isFloorplanGridInteractionActive: boolean
+  isOpeningPlacementActive: boolean
+  isPolygonBuildActive: boolean
+  isRoofBuildActive: boolean
+  isWallBuildActive: boolean
+  isZoneBuildActive: boolean
+  roofDraftStart: WallPlanPoint | null
+  setCursorPoint: React.Dispatch<React.SetStateAction<WallPlanPoint | null>>
+  setFenceDraftEnd: React.Dispatch<React.SetStateAction<WallPlanPoint | null>>
+  setFenceDraftStart: React.Dispatch<React.SetStateAction<WallPlanPoint | null>>
+  setRoofDraftEnd: React.Dispatch<React.SetStateAction<WallPlanPoint | null>>
+  setRoofDraftStart: React.Dispatch<React.SetStateAction<WallPlanPoint | null>>
+  shiftPressed: boolean
+  snapWallDraftPoint: (args: {
+    point: WallPlanPoint
+    walls: WallNode[]
+    start?: WallPlanPoint
+    angleSnap: boolean
+  }) => WallPlanPoint
+  snapPolygonDraftPoint: (args: {
+    point: WallPlanPoint
+    start?: WallPlanPoint
+    angleSnap: boolean
+  }) => WallPlanPoint
+  toPoint2D: (point: WallPlanPoint) => { x: number; y: number }
+  walls: WallNode[]
+}
+
+export function useFloorplanBackgroundPlacement({
+  activePolygonDraftPoints,
+  ceilingDraftPoints,
+  clearFencePlacementDraft,
+  clearRoofPlacementDraft,
+  emitFloorplanGridEvent,
+  fenceDraftStart,
+  fences,
+  findClosestWallPoint,
+  floorplanOpeningLocalY,
+  getSnappedFloorplanPoint,
+  handleCeilingPlacementPoint,
+  handleSlabPlacementPoint,
+  handleWallPlacementPoint,
+  handleZonePlacementPoint,
+  isCeilingBuildActive,
+  isFenceBuildActive,
+  isFloorplanGridInteractionActive,
+  isOpeningPlacementActive,
+  isPolygonBuildActive,
+  isRoofBuildActive,
+  isWallBuildActive,
+  isZoneBuildActive,
+  roofDraftStart,
+  setCursorPoint,
+  setFenceDraftEnd,
+  setFenceDraftStart,
+  setRoofDraftEnd,
+  setRoofDraftStart,
+  shiftPressed,
+  snapWallDraftPoint,
+  snapPolygonDraftPoint,
+  toPoint2D,
+  walls,
+}: UseFloorplanBackgroundPlacementArgs) {
+  const handleBackgroundPlacementClick = useCallback(
+    (
+      planPoint: WallPlanPoint,
+      event: ReactMouseEvent<SVGSVGElement>,
+      draftStart: WallPlanPoint | null,
+    ) => {
+      if (isOpeningPlacementActive) {
+        const closest = findClosestWallPoint(planPoint, walls, {
+          canUseWall: (wall) => !isCurvedWall(wall),
+        })
+        if (closest) {
+          const dx = closest.wall.end[0] - closest.wall.start[0]
+          const dz = closest.wall.end[1] - closest.wall.start[1]
+          const length = Math.sqrt(dx * dx + dz * dz)
+          const distance = closest.t * length
+
+          emitter.emit('wall:click', {
+            node: closest.wall,
+            point: { x: closest.point[0], y: 0, z: closest.point[1] },
+            localPosition: [distance, floorplanOpeningLocalY, 0],
+            normal: closest.normal,
+            stopPropagation: () => {},
+          } as any)
+        }
+        return true
+      }
+
+      if (isCeilingBuildActive) {
+        emitFloorplanGridEvent('click', planPoint, event)
+
+        const snappedPoint = snapPolygonDraftPoint({
+          point: planPoint,
+          start: ceilingDraftPoints[ceilingDraftPoints.length - 1],
+          angleSnap: ceilingDraftPoints.length > 0 && !shiftPressed,
+        })
+
+        handleCeilingPlacementPoint(snappedPoint)
+        return true
+      }
+
+      if (isRoofBuildActive) {
+        const snappedPoint = getSnappedFloorplanPoint(planPoint)
+        emitFloorplanGridEvent('click', snappedPoint, event)
+        setCursorPoint(snappedPoint)
+
+        if (!roofDraftStart) {
+          setRoofDraftStart(snappedPoint)
+          setRoofDraftEnd(snappedPoint)
+        } else {
+          clearRoofPlacementDraft()
+        }
+        return true
+      }
+
+      if (isFenceBuildActive) {
+        emitFloorplanGridEvent('click', planPoint, event)
+
+        const snappedPoint = snapFenceDraftPoint({
+          point: planPoint,
+          walls,
+          fences,
+          start: fenceDraftStart ?? undefined,
+          angleSnap: Boolean(fenceDraftStart) && !shiftPressed,
+        })
+
+        setCursorPoint(snappedPoint)
+
+        if (!fenceDraftStart) {
+          setFenceDraftStart(snappedPoint)
+          setFenceDraftEnd(snappedPoint)
+        } else if (
+          getPlanPointDistance(toPoint2D(fenceDraftStart), toPoint2D(snappedPoint)) >= 0.01
+        ) {
+          clearFencePlacementDraft()
+        } else {
+          setFenceDraftEnd(snappedPoint)
+        }
+        return true
+      }
+
+      if (isFloorplanGridInteractionActive) {
+        const snappedPoint = emitFloorplanGridEvent('click', planPoint, event)
+        setCursorPoint(snappedPoint)
+        return true
+      }
+
+      if (isPolygonBuildActive) {
+        const snappedPoint = snapPolygonDraftPoint({
+          point: planPoint,
+          start: activePolygonDraftPoints[activePolygonDraftPoints.length - 1],
+          angleSnap: activePolygonDraftPoints.length > 0 && !shiftPressed,
+        })
+
+        if (isZoneBuildActive) {
+          handleZonePlacementPoint(snappedPoint)
+        } else {
+          handleSlabPlacementPoint(snappedPoint)
+        }
+        return true
+      }
+
+      if (!isWallBuildActive) {
+        return false
+      }
+
+      const snappedPoint = snapWallDraftPoint({
+        point: planPoint,
+        walls,
+        start: draftStart ?? undefined,
+        angleSnap: Boolean(draftStart) && !shiftPressed,
+      })
+
+      handleWallPlacementPoint(snappedPoint)
+      return true
+    },
+    [
+      activePolygonDraftPoints,
+      ceilingDraftPoints,
+      clearFencePlacementDraft,
+      clearRoofPlacementDraft,
+      emitFloorplanGridEvent,
+      fenceDraftStart,
+      fences,
+      findClosestWallPoint,
+      floorplanOpeningLocalY,
+      getSnappedFloorplanPoint,
+      handleCeilingPlacementPoint,
+      handleSlabPlacementPoint,
+      handleZonePlacementPoint,
+      isCeilingBuildActive,
+      isFenceBuildActive,
+      isFloorplanGridInteractionActive,
+      isOpeningPlacementActive,
+      isPolygonBuildActive,
+      isRoofBuildActive,
+      isWallBuildActive,
+      isZoneBuildActive,
+      roofDraftStart,
+      setCursorPoint,
+      setFenceDraftEnd,
+      setFenceDraftStart,
+      setRoofDraftEnd,
+      setRoofDraftStart,
+      shiftPressed,
+      snapWallDraftPoint,
+      snapPolygonDraftPoint,
+      toPoint2D,
+      walls,
+      handleWallPlacementPoint,
+    ],
+  )
+
+  return {
+    handleBackgroundPlacementClick,
+  }
+}

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

@@ -0,0 +1,171 @@
+'use client'
+
+import type {
+  AnyNode,
+  CeilingNode,
+  DoorNode,
+  ItemNode,
+  Point2D,
+  RoofNode,
+  RoofSegmentNode,
+  SlabNode,
+  StairNode,
+  StairSegmentNode,
+  WallNode,
+  WindowNode,
+} from '@pascal-app/core'
+import { useCallback } from 'react'
+import {
+  getFloorplanHitNodeId,
+  getFloorplanSelectionIdsInBounds,
+} from '../../lib/floorplan/selection-tool'
+import type { FloorplanSelectionBounds } from '../../lib/floorplan/types'
+import type { WallPlanPoint } from '../tools/wall/wall-drafting'
+
+type OpeningNode = WindowNode | DoorNode
+
+type WallPolygonEntry = {
+  wall: WallNode
+  polygon: Point2D[]
+}
+
+type OpeningPolygonEntry = {
+  opening: OpeningNode
+  polygon: Point2D[]
+}
+
+type SlabPolygonEntry = {
+  slab: SlabNode
+  polygon: Point2D[]
+  holes: Point2D[][]
+}
+
+type CeilingPolygonEntry = {
+  ceiling: CeilingNode
+  polygon: Point2D[]
+  holes: Point2D[][]
+}
+
+type FloorplanRoofEntry = {
+  roof: RoofNode
+  segments: Array<{
+    polygon: Point2D[]
+    segment: RoofSegmentNode
+  }>
+}
+
+type FloorplanItemEntry = {
+  item: ItemNode
+  polygon: Point2D[]
+}
+
+type FloorplanStairSegmentEntry = {
+  polygon: Point2D[]
+  segment: StairSegmentNode | AnyNode
+}
+
+type FloorplanStairEntry = {
+  hitPolygons: Point2D[][]
+  stair: StairNode
+  segments: FloorplanStairSegmentEntry[]
+}
+
+type UseFloorplanHitTestingArgs = {
+  ceilingPolygons: CeilingPolygonEntry[]
+  displaySlabPolygons: SlabPolygonEntry[]
+  displayWallPolygons: WallPolygonEntry[]
+  floorplanItemEntries: FloorplanItemEntry[]
+  floorplanOpeningHitTolerance: number
+  floorplanRoofEntries: FloorplanRoofEntry[]
+  floorplanStairEntries: FloorplanStairEntry[]
+  floorplanWallHitTolerance: number
+  getOpeningCenterLine: (polygon: Point2D[]) => { start: Point2D; end: Point2D } | null
+  isFloorplanItemContextActive: boolean
+  openingsPolygons: OpeningPolygonEntry[]
+  phase: 'site' | 'structure' | 'furnish'
+  toPoint2D: (point: WallPlanPoint) => Point2D
+}
+
+export function useFloorplanHitTesting({
+  ceilingPolygons,
+  displaySlabPolygons,
+  displayWallPolygons,
+  floorplanItemEntries,
+  floorplanOpeningHitTolerance,
+  floorplanRoofEntries,
+  floorplanStairEntries,
+  floorplanWallHitTolerance,
+  getOpeningCenterLine,
+  isFloorplanItemContextActive,
+  openingsPolygons,
+  phase,
+  toPoint2D,
+}: UseFloorplanHitTestingArgs) {
+  const getFloorplanHitIdAtPoint = useCallback(
+    (planPoint: WallPlanPoint) => {
+      const point = toPoint2D(planPoint)
+      return getFloorplanHitNodeId({
+        point,
+        ceilings: ceilingPolygons,
+        phase,
+        isItemContextActive: isFloorplanItemContextActive,
+        items: floorplanItemEntries,
+        openings: openingsPolygons,
+        roofs: floorplanRoofEntries,
+        stairs: floorplanStairEntries,
+        walls: displayWallPolygons,
+        slabs: displaySlabPolygons,
+        openingHitTolerance: floorplanOpeningHitTolerance,
+        wallHitTolerance: floorplanWallHitTolerance,
+        getOpeningCenterLine,
+      })
+    },
+    [
+      ceilingPolygons,
+      displaySlabPolygons,
+      displayWallPolygons,
+      floorplanItemEntries,
+      floorplanOpeningHitTolerance,
+      floorplanRoofEntries,
+      floorplanStairEntries,
+      floorplanWallHitTolerance,
+      getOpeningCenterLine,
+      isFloorplanItemContextActive,
+      openingsPolygons,
+      phase,
+      toPoint2D,
+    ],
+  )
+
+  const getFloorplanSelectionIdsInBoundsForArea = useCallback(
+    (bounds: FloorplanSelectionBounds) =>
+      getFloorplanSelectionIdsInBounds({
+        bounds,
+        ceilings: ceilingPolygons,
+        phase,
+        isItemContextActive: isFloorplanItemContextActive,
+        items: floorplanItemEntries,
+        walls: displayWallPolygons,
+        openings: openingsPolygons,
+        roofs: floorplanRoofEntries,
+        slabs: displaySlabPolygons,
+        stairs: floorplanStairEntries,
+      }),
+    [
+      ceilingPolygons,
+      displaySlabPolygons,
+      displayWallPolygons,
+      floorplanItemEntries,
+      floorplanRoofEntries,
+      floorplanStairEntries,
+      isFloorplanItemContextActive,
+      openingsPolygons,
+      phase,
+    ],
+  )
+
+  return {
+    getFloorplanHitIdAtPoint,
+    getFloorplanSelectionIdsInBounds: getFloorplanSelectionIdsInBoundsForArea,
+  }
+}

package/src/components/editor/use-floorplan-scene-data.ts

@@ -0,0 +1,189 @@
+'use client'
+
+import {
+  type AnyNode,
+  type BuildingNode,
+  type CeilingNode,
+  type DoorNode,
+  type FenceNode,
+  type GuideNode,
+  type LevelNode,
+  type RoofNode,
+  type SiteNode,
+  type SlabNode,
+  type SpawnNode,
+  useScene,
+  type WallNode,
+  type WindowNode,
+  type ZoneNode as ZoneNodeType,
+} from '@pascal-app/core'
+import { useShallow } from 'zustand/react/shallow'
+import { collectLevelDescendants } from '../../lib/floorplan'
+
+type OpeningNode = WindowNode | DoorNode
+
+const DEFAULT_BUILDING_POSITION = [0, 0, 0] as const satisfies [number, number, number]
+
+function useLevelChildren<TNode extends AnyNode>(
+  levelId: LevelNode['id'] | null,
+  typeGuard: (node: AnyNode | undefined) => node is TNode,
+) {
+  return useScene(
+    useShallow((state) => {
+      if (!levelId) {
+        return [] as TNode[]
+      }
+
+      const levelNode = state.nodes[levelId]
+      if (!levelNode || levelNode.type !== 'level') {
+        return [] as TNode[]
+      }
+
+      return levelNode.children.map((childId) => state.nodes[childId]).filter(typeGuard)
+    }),
+  )
+}
+
+export function useFloorplanSceneData({
+  buildingId,
+  levelId,
+}: {
+  buildingId: BuildingNode['id'] | null
+  levelId: LevelNode['id'] | null
+}) {
+  const levelNode = useScene((state) =>
+    levelId ? (state.nodes[levelId] as LevelNode | undefined) : undefined,
+  )
+  const currentBuildingId =
+    levelNode?.type === 'level' && levelNode.parentId
+      ? (levelNode.parentId as BuildingNode['id'])
+      : buildingId
+
+  const buildingRotationY = useScene((state) => {
+    if (!currentBuildingId) return 0
+    const node = state.nodes[currentBuildingId]
+    return node?.type === 'building' ? (node.rotation[1] ?? 0) : 0
+  })
+
+  const buildingPosition = useScene((state) => {
+    if (!currentBuildingId) {
+      return DEFAULT_BUILDING_POSITION
+    }
+
+    const node = state.nodes[currentBuildingId]
+    return node?.type === 'building'
+      ? (node.position as [number, number, number])
+      : DEFAULT_BUILDING_POSITION
+  })
+
+  const site = useScene((state) => {
+    for (const rootNodeId of state.rootNodeIds) {
+      const node = state.nodes[rootNodeId]
+      if (node?.type === 'site') {
+        return node as SiteNode
+      }
+    }
+
+    return null
+  })
+
+  const floorplanLevels = useScene(
+    useShallow((state) => {
+      if (!currentBuildingId) {
+        return [] as LevelNode[]
+      }
+
+      const buildingNode = state.nodes[currentBuildingId]
+      if (!buildingNode || buildingNode.type !== 'building') {
+        return [] as LevelNode[]
+      }
+
+      return buildingNode.children
+        .map((childId) => state.nodes[childId])
+        .filter((node): node is LevelNode => node?.type === 'level')
+        .sort((a, b) => a.level - b.level)
+    }),
+  )
+
+  const walls = useLevelChildren(levelId, (node): node is WallNode => node?.type === 'wall')
+  const fences = useLevelChildren(levelId, (node): node is FenceNode => node?.type === 'fence')
+  const slabs = useLevelChildren(levelId, (node): node is SlabNode => node?.type === 'slab')
+  const ceilings = useLevelChildren(
+    levelId,
+    (node): node is CeilingNode => node?.type === 'ceiling',
+  )
+  const levelGuides = useLevelChildren(levelId, (node): node is GuideNode => node?.type === 'guide')
+  const zones = useLevelChildren(levelId, (node): node is ZoneNodeType => node?.type === 'zone')
+  const spawns = useLevelChildren(levelId, (node): node is SpawnNode => node?.type === 'spawn')
+  const roofs = useScene(
+    useShallow((state) => {
+      if (!levelId) {
+        return [] as RoofNode[]
+      }
+
+      const nextLevelNode = state.nodes[levelId]
+      if (!nextLevelNode || nextLevelNode.type !== 'level') {
+        return [] as RoofNode[]
+      }
+
+      return nextLevelNode.children
+        .map((childId) => state.nodes[childId])
+        .filter((node): node is RoofNode => node?.type === 'roof' && node.visible !== false)
+    }),
+  )
+  const openings = useScene(
+    useShallow((state) => {
+      if (!levelId) {
+        return [] as OpeningNode[]
+      }
+
+      const nextLevelNode = state.nodes[levelId]
+      if (!nextLevelNode || nextLevelNode.type !== 'level') {
+        return [] as OpeningNode[]
+      }
+
+      const nextWalls = nextLevelNode.children
+        .map((childId) => state.nodes[childId])
+        .filter((node): node is WallNode => node?.type === 'wall')
+
+      return nextWalls.flatMap((wall) =>
+        wall.children
+          .map((childId) => state.nodes[childId])
+          .filter((node): node is OpeningNode => node?.type === 'window' || node?.type === 'door'),
+      )
+    }),
+  )
+  const levelDescendantNodes = useScene(
+    useShallow((state) => {
+      if (!levelId) {
+        return [] as AnyNode[]
+      }
+
+      const nextLevelNode = state.nodes[levelId]
+      if (!nextLevelNode || nextLevelNode.type !== 'level') {
+        return [] as AnyNode[]
+      }
+
+      return collectLevelDescendants(nextLevelNode, state.nodes as Record<string, AnyNode>)
+    }),
+  )
+
+  return {
+    buildingPosition,
+    buildingRotationY,
+    currentBuildingId,
+    ceilings,
+    fences,
+    floorplanLevels,
+    levelDescendantNodes,
+    levelGuides,
+    levelNode,
+    openings,
+    roofs,
+    site,
+    slabs,
+    spawns,
+    walls,
+    zones,
+  }
+}