@pascal-app/editor 0.9.1 → 0.9.2

package/src/lib/floorplan/floorplan-export.tsx

@@ -0,0 +1,364 @@
+'use client'
+
+import {
+  type AnyNode,
+  type AnyNodeId,
+  type FloorplanGeometry,
+  type LiveNodeOverrides,
+  nodeRegistry,
+  resolveBuildingForLevel,
+  useScene,
+} from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { createElement } from 'react'
+import { flushSync } from 'react-dom'
+import { createRoot } from 'react-dom/client'
+import { FloorplanGeometryRenderer } from '../../components/editor-2d/renderers/floorplan-geometry-renderer'
+import {
+  buildContext,
+  floorplanLayerRank,
+  getFloorplanLevelData,
+  isFloorplanNodeVisible,
+  splitFloorplanOverlay,
+} from '../../components/editor-2d/renderers/floorplan-registry-layer'
+import { FLOORPLAN_VIEW_ROTATION_DEG } from './geometry'
+
+/**
+ * Floorplan PDF export.
+ *
+ * Re-runs the same registry-driven geometry pipeline the live 2D layer uses
+ * (`def.floorplan(node, ctx)` → `FloorplanGeometryRenderer`) headlessly, with
+ * a neutral `viewState` so nodes render in their default, unselected form.
+ * Every level of the active building becomes its own page, titled with the
+ * level's label, with the plan fit to the page (independent of the live
+ * pan/zoom). jsPDF + svg2pdf are dynamically imported so they only load when
+ * an export actually runs.
+ *
+ * `scope: 'structure'` keeps only `category === 'structure'` nodes (walls,
+ * slabs, ceilings, doors, windows, stairs, columns, roofs…); `'full'` keeps
+ * every node that has a floorplan builder and is visible.
+ */
+export type FloorplanExportScope = 'full' | 'structure'
+
+const SVG_NS = 'http://www.w3.org/2000/svg'
+/** Meters of margin around the plan bounds. */
+const PADDING_M = 1
+/** PDF page margin + title band, in pt. */
+const PAGE_MARGIN_PT = 36
+const TITLE_BAND_PT = 28
+
+// Neutral view state — no selection / hover / palette, so builders emit their
+// default appearance (the core palette only carries selection/handle colors).
+const NEUTRAL_VIEW_STATE = {
+  selected: false,
+  highlighted: false,
+  hovered: false,
+  moving: false,
+  palette: undefined,
+} as const
+
+type ExportLevel = { id: AnyNodeId; label: string }
+
+export async function exportFloorplanPdf(scope: FloorplanExportScope): Promise<void> {
+  const nodes = useScene.getState().nodes
+  const unit = useViewer.getState().unit
+  const levels = resolveExportLevels(nodes)
+  if (levels.length === 0) {
+    console.warn('[floorplan-export] no level to export')
+    return
+  }
+
+  const [{ jsPDF }, { svg2pdf }] = await Promise.all([import('jspdf'), import('svg2pdf.js')])
+  const doc = new jsPDF({ orientation: 'landscape', unit: 'pt', format: 'a4' })
+  const pageW = doc.internal.pageSize.getWidth()
+  const pageH = doc.internal.pageSize.getHeight()
+
+  const host = document.createElement('div')
+  host.style.cssText =
+    'position:fixed;left:-10000px;top:0;width:1px;height:1px;overflow:hidden;pointer-events:none;'
+  document.body.appendChild(host)
+
+  let pageCount = 0
+  try {
+    for (const level of levels) {
+      const geometries = collectFloorplanGeometry(nodes, level.id, scope, unit)
+      if (geometries.length === 0) continue
+
+      // Rotate the exported plan to the same north-up orientation the on-screen
+      // 2D view uses when aligned to north (user rotation offset = 0), so a PDF
+      // points north instead of drawing raw plan-local axes.
+      const buildingId = resolveBuildingForLevel(level.id, nodes as Record<AnyNodeId, AnyNode>)
+      const building = buildingId ? nodes[buildingId] : undefined
+      const buildingRotationY = building?.type === 'building' ? (building.rotation[1] ?? 0) : 0
+      const rotationDeg = FLOORPLAN_VIEW_ROTATION_DEG - (buildingRotationY * 180) / Math.PI
+
+      const mounted = await mountFloorplanSvg(host, geometries, rotationDeg)
+      if (!mounted) continue
+
+      try {
+        if (pageCount > 0) doc.addPage()
+        pageCount++
+
+        doc.setFontSize(14)
+        doc.text(level.label, PAGE_MARGIN_PT, PAGE_MARGIN_PT + 12)
+
+        // Fit the plan into the page below the title band, preserving aspect.
+        const boxX = PAGE_MARGIN_PT
+        const boxY = PAGE_MARGIN_PT + TITLE_BAND_PT
+        const boxW = pageW - PAGE_MARGIN_PT * 2
+        const boxH = pageH - PAGE_MARGIN_PT * 2 - TITLE_BAND_PT
+        const aspect = mounted.width / mounted.height
+        let w = boxW
+        let h = w / aspect
+        if (h > boxH) {
+          h = boxH
+          w = h * aspect
+        }
+        const x = boxX + (boxW - w) / 2
+        const y = boxY + (boxH - h) / 2
+
+        // svg2pdf doesn't honour `vector-effect: non-scaling-stroke` (which
+        // many builders use to keep door/window/stair line weights constant
+        // on screen). Left as-is, those pixel-sized widths render as
+        // metre-wide strokes — huge grey blobs. Convert them to the real-unit
+        // width that lands at the intended point weight once svg2pdf scales
+        // the plan onto the page.
+        inlineNonScalingStrokes(mounted.svg, w / mounted.width)
+
+        await svg2pdf(mounted.svg, doc, { x, y, width: w, height: h })
+      } finally {
+        mounted.cleanup()
+      }
+    }
+
+    if (pageCount === 0) {
+      console.warn(`[floorplan-export] nothing to export for scope "${scope}"`)
+      return
+    }
+
+    const date = new Date().toISOString().split('T')[0]
+    doc.save(`floorplan_${scope}_${date}.pdf`)
+  } finally {
+    host.remove()
+  }
+}
+
+type MountedFloorplan = {
+  svg: SVGSVGElement
+  /** Padded viewBox dimensions, in meters — used for aspect-preserving fit. */
+  width: number
+  height: number
+  cleanup: () => void
+}
+
+async function mountFloorplanSvg(
+  parent: HTMLElement,
+  geometries: { id: AnyNodeId; base: FloorplanGeometry }[],
+  rotationDeg: number,
+): Promise<MountedFloorplan | null> {
+  const container = document.createElement('div')
+  parent.appendChild(container)
+  const root = createRoot(container)
+  const cleanup = () => {
+    root.unmount()
+    container.remove()
+  }
+
+  // Render a full `<svg>` as the React root child so React enters the SVG
+  // namespace at the `<svg>` tag, then mutate the DOM node afterwards —
+  // viewBox/background depend on the post-mount measured bounds.
+  flushSync(() => {
+    root.render(
+      createElement(
+        'svg',
+        { xmlns: SVG_NS },
+        createElement(
+          'g',
+          { 'data-floorplan-content': '' },
+          createElement(
+            'g',
+            { transform: `rotate(${rotationDeg})` },
+            geometries.map(({ id, base }) =>
+              createElement(FloorplanGeometryRenderer, { key: id, geometry: base }),
+            ),
+          ),
+        ),
+      ),
+    )
+  })
+
+  // Give async asset images (item icons) a couple of frames to resolve so
+  // they're included in the measured bounds and the rendered output.
+  await nextFrames(2)
+
+  const svg = container.querySelector('svg')
+  const content = svg?.querySelector('[data-floorplan-content]') as SVGGraphicsElement | null
+  const bbox = content?.getBBox()
+  if (!svg || !bbox || bbox.width === 0 || bbox.height === 0) {
+    cleanup()
+    return null
+  }
+
+  const minX = bbox.x - PADDING_M
+  const minY = bbox.y - PADDING_M
+  const width = bbox.width + PADDING_M * 2
+  const height = bbox.height + PADDING_M * 2
+  svg.setAttribute('viewBox', `${minX} ${minY} ${width} ${height}`)
+  svg.setAttribute('width', `${width}`)
+  svg.setAttribute('height', `${height}`)
+
+  const background = document.createElementNS(SVG_NS, 'rect')
+  background.setAttribute('x', `${minX}`)
+  background.setAttribute('y', `${minY}`)
+  background.setAttribute('width', `${width}`)
+  background.setAttribute('height', `${height}`)
+  background.setAttribute('fill', '#ffffff')
+  svg.insertBefore(background, svg.firstChild)
+
+  return { svg, width, height, cleanup }
+}
+
+/**
+ * Bake `vector-effect: non-scaling-stroke` widths into real user units.
+ *
+ * svg2pdf ignores the non-scaling hint, so a `stroke-width="1.25"` meant as
+ * "1.25 screen px" would otherwise render as 1.25 metres on the page. We
+ * rewrite each such width (and any dash pattern) to `px / ptPerUnit` so it
+ * lands at ~`px` points once svg2pdf scales the plan by `ptPerUnit`, then drop
+ * the now-misleading attribute.
+ */
+function inlineNonScalingStrokes(svg: SVGSVGElement, ptPerUnit: number) {
+  if (!Number.isFinite(ptPerUnit) || ptPerUnit <= 0) return
+  for (const el of svg.querySelectorAll('[vector-effect="non-scaling-stroke"]')) {
+    const sw = el.getAttribute('stroke-width')
+    if (sw) {
+      const px = Number.parseFloat(sw)
+      if (Number.isFinite(px)) el.setAttribute('stroke-width', `${px / ptPerUnit}`)
+    }
+    const dash = el.getAttribute('stroke-dasharray')
+    if (dash) {
+      const scaled = dash
+        .split(/[\s,]+/)
+        .map((v) => {
+          const n = Number.parseFloat(v)
+          return Number.isFinite(n) ? `${n / ptPerUnit}` : v
+        })
+        .join(' ')
+      el.setAttribute('stroke-dasharray', scaled)
+    }
+    el.removeAttribute('vector-effect')
+  }
+}
+
+function collectFloorplanGeometry(
+  nodes: Record<string, AnyNode>,
+  levelId: AnyNodeId,
+  scope: FloorplanExportScope,
+  unit: 'metric' | 'imperial',
+): { id: AnyNodeId; base: FloorplanGeometry }[] {
+  const noLiveOverrides = new Map<string, LiveNodeOverrides>()
+  const levelNodeIdsByType = new Map<string, AnyNodeId[]>()
+  const entries: { id: AnyNodeId; node: AnyNode }[] = []
+
+  const visit = (id: AnyNodeId) => {
+    const node = nodes[id]
+    if (!node) return
+    const def = nodeRegistry.get(node.type)
+    if (def?.computeFloorplanLevelData) {
+      const ids = levelNodeIdsByType.get(node.type)
+      if (ids) ids.push(id)
+      else levelNodeIdsByType.set(node.type, [id])
+    }
+    if (
+      def?.floorplan &&
+      isFloorplanNodeVisible(node) &&
+      (scope === 'full' || def.category === 'structure')
+    ) {
+      entries.push({ id, node })
+    }
+    const childIds = (node as { children?: AnyNodeId[] }).children
+    if (Array.isArray(childIds)) for (const cid of childIds) visit(cid)
+  }
+  visit(levelId)
+
+  // Document order is paint order — sort the same way the live layer does so
+  // zones sit under walls/slabs/furniture rather than on top of them.
+  entries.sort((a, b) => floorplanLayerRank(a.node.type) - floorplanLayerRank(b.node.type))
+
+  // One-shot per-type cache for `computeFloorplanLevelData`; value type is
+  // module-private to the registry layer, so let it infer.
+  const levelDataCache = new Map()
+  const out: { id: AnyNodeId; base: FloorplanGeometry }[] = []
+  for (const { id, node } of entries) {
+    const builder = nodeRegistry.get(node.type)?.floorplan
+    if (!builder) continue
+    const levelData = getFloorplanLevelData(
+      node.type,
+      nodes,
+      noLiveOverrides,
+      levelNodeIdsByType,
+      levelDataCache,
+    )
+    const ctx = buildContext(node, nodes, { ...NEUTRAL_VIEW_STATE, unit }, levelData)
+    const geometry = builder(node, ctx)
+    if (!geometry) continue
+    const { base } = splitFloorplanOverlay(geometry)
+    if (base) out.push({ id, base })
+  }
+  return out
+}
+
+/**
+ * Levels to export, ordered bottom-to-top. The active building (the building
+ * owning the selected level, or the first one found) contributes all of its
+ * level children; if there is no building wrapper we fall back to the single
+ * resolved level.
+ */
+function resolveExportLevels(nodes: Record<string, AnyNode>): ExportLevel[] {
+  const selected = useViewer.getState().selection.levelId as AnyNodeId | null | undefined
+  const activeLevelId = selected && nodes[selected] ? selected : firstLevelId(nodes)
+  if (!activeLevelId) return []
+
+  const buildingId = resolveBuildingForLevel(activeLevelId, nodes as Record<AnyNodeId, AnyNode>)
+  let levelNodes: AnyNode[]
+  if (buildingId) {
+    const childIds = (nodes[buildingId] as { children?: AnyNodeId[] }).children ?? []
+    levelNodes = childIds.map((id) => nodes[id]).filter((n): n is AnyNode => n?.type === 'level')
+  } else {
+    const node = nodes[activeLevelId]
+    levelNodes = node ? [node] : []
+  }
+
+  levelNodes.sort((a, b) => levelIndexOf(a) - levelIndexOf(b))
+  return levelNodes.map((n) => ({ id: n.id as AnyNodeId, label: levelLabelOf(n) }))
+}
+
+function firstLevelId(nodes: Record<string, AnyNode>): AnyNodeId | null {
+  for (const node of Object.values(nodes)) {
+    if (node.type === 'level') return node.id as AnyNodeId
+  }
+  return null
+}
+
+function levelIndexOf(node: AnyNode): number {
+  return (node as { level?: number }).level ?? 0
+}
+
+function levelLabelOf(node: AnyNode): string {
+  const name = node.name?.trim()
+  if (name) return name
+  return `Level ${levelIndexOf(node)}`
+}
+
+function nextFrames(count: number): Promise<void> {
+  return new Promise((resolve) => {
+    const tick = (remaining: number) => {
+      if (remaining <= 0) {
+        resolve()
+        return
+      }
+      requestAnimationFrame(() => tick(remaining - 1))
+    }
+    tick(count)
+  })
+}

package/src/lib/floorplan/geometry.ts

@@ -1,6 +1,19 @@
 import type { Point2D } from '@pascal-app/core'
 import type { FloorplanLineSegment, FloorplanSelectionBounds } from './types'
 
+// Baseline rotation (deg) that orients the plan-local scene "north up" on
+// screen. The on-screen floor-plan scene `<g>` is rotated by
+// `FLOORPLAN_VIEW_ROTATION_DEG + userRotation - buildingRotation`; the PDF
+// export mirrors the aligned-to-north case (user offset 0) so an export points
+// the same way as the app's north-aligned view.
+//
+// North is world −Z: with a 0 baseline a rotation-0 reference image (top =
+// −Z) reads upright in the north-aligned view, and "align north" maps to a
+// 3D camera azimuth of 0. The old 90° baseline made north world −X, so
+// north-up floorplan scans displayed sideways whenever the compass claimed
+// the view was aligned.
+export const FLOORPLAN_VIEW_ROTATION_DEG = 0
+
 export function clampPlanValue(value: number, min: number, max: number) {
   return Math.min(Math.max(value, min), max)
 }
@@ -11,6 +24,46 @@ export function rotatePlanVector(x: number, y: number, rotation: number): [numbe
   return [x * cos + y * sin, -x * sin + y * cos]
 }
 
+// Converts a world X/Z point into the floor-plan-local (building-local)
+// frame used by the SVG scene `<g>` and every stored node position. The
+// inverse of `floorplanLocalToWorldPoint`. Shared so the floor-plan panel
+// and the 2D move overlay resolve the same frame — feeding a world-space
+// `original` into a local-space cursor solver lands the drop off by the
+// building's world X/Z (worse for an off-origin building).
+export function worldToFloorplanLocalPoint(
+  worldX: number,
+  worldZ: number,
+  buildingPosition: readonly [number, number, number],
+  buildingRotationY: number,
+): Point2D {
+  const dx = worldX - buildingPosition[0]
+  const dz = worldZ - buildingPosition[2]
+  const cos = Math.cos(buildingRotationY)
+  const sin = Math.sin(buildingRotationY)
+
+  return {
+    x: dx * cos - dz * sin,
+    y: dx * sin + dz * cos,
+  }
+}
+
+// Inverse of `worldToFloorplanLocalPoint`: floor-plan-local X/Y → world X/Z.
+export function floorplanLocalToWorldPoint(
+  point: Point2D | [number, number],
+  buildingPosition: readonly [number, number, number],
+  buildingRotationY: number,
+): { x: number; z: number } {
+  const localX = Array.isArray(point) ? point[0] : point.x
+  const localY = Array.isArray(point) ? point[1] : point.y
+  const cos = Math.cos(buildingRotationY)
+  const sin = Math.sin(buildingRotationY)
+
+  return {
+    x: buildingPosition[0] + localX * cos + localY * sin,
+    z: buildingPosition[2] - localX * sin + localY * cos,
+  }
+}
+
 export function getRotatedRectanglePolygon(
   center: Point2D,
   width: number,

package/src/lib/floorplan/index.ts

@@ -8,6 +8,8 @@ export {
 export {
   clampPlanValue,
   doesPolygonIntersectSelectionBounds,
+  FLOORPLAN_VIEW_ROTATION_DEG,
+  floorplanLocalToWorldPoint,
   getDistanceToWallSegment,
   getFloorplanSelectionBounds,
   getPlanPointDistance,
@@ -20,6 +22,7 @@ export {
   movePlanPointTowards,
   pointMatchesWallPlanPoint,
   rotatePlanVector,
+  worldToFloorplanLocalPoint,
 } from './geometry'
 export {
   buildFloorplanItemEntry,

package/src/lib/floorplan/items.ts

@@ -82,7 +82,7 @@ export function getItemFloorplanTransform(
       )
       const wallLocalZ =
         item.asset.attachTo === 'wall-side'
-          ? ((parentNode.thickness ?? 0.1) / 2) * (item.side === 'back' ? -1 : 1)
+          ? ((parentNode.thickness ?? 0.1) / 2) * (item.side === 'front' ? 1 : -1)
           : item.position[2]
       const [offsetX, offsetY] = rotatePlanVector(item.position[0], wallLocalZ, wallRotation)
 
@@ -164,7 +164,10 @@ type Point = {
 
 function getItemDimensionPolygon(item: ItemNode, transform: FloorplanNodeTransform): Point[] {
   const [width, , depth] = getScaledDimensions(item)
-  const centerLocalZ = item.asset.attachTo === 'wall-side' ? -depth / 2 : 0
+  // Wall-side items extend depth-ward away from the wall (into the room); push
+  // the footprint centre a half-depth out along local +Z. A negative offset
+  // would lay the box across the wall onto the far side (mirrored from 3D).
+  const centerLocalZ = item.asset.attachTo === 'wall-side' ? depth / 2 : 0
   const [offsetX, offsetY] = rotatePlanVector(0, centerLocalZ, transform.rotation)
 
   return getRotatedRectanglePolygon(

package/src/lib/floorplan/plan-coords.ts

@@ -0,0 +1,21 @@
+import type { FloorplanAffordancePoint } from '@pascal-app/core'
+
+/**
+ * Convert client (screen) coordinates into floor-plan plan coordinates via
+ * the mounted floor-plan scene `<g>`'s screen CTM. The scene `<g>` maps plan
+ * X/Z directly to SVG x/y (Z stored as the Y axis on screen — same convention
+ * as `toSvgPlanPoint`), so the returned point is in the same level-frame
+ * meters node placements use. Null when no floor plan is mounted.
+ */
+export function clientToPlan(clientX: number, clientY: number): FloorplanAffordancePoint | null {
+  const target = document.querySelector('g[data-floorplan-scene]') as SVGGElement | null
+  const svg = target?.ownerSVGElement
+  if (!(svg && target)) return null
+  const ctm = target.getScreenCTM()
+  if (!ctm) return null
+  const point = svg.createSVGPoint()
+  point.x = clientX
+  point.y = clientY
+  const transformed = point.matrixTransform(ctm.inverse())
+  return [transformed.x, transformed.y]
+}