@pascal-app/editor 1.0.1 → 1.0.4

package/src/components/editor-2d/floorplan-open-wall-ends-layer.test.tsx

@@ -0,0 +1,86 @@
+import { expect, test } from 'bun:test'
+import { type AnyNode, LevelNode, useScene, WallNode } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { act } from '@react-three/fiber'
+import useEditor from '../../store/use-editor'
+import useInteractionScope from '../../store/use-interaction-scope'
+import { sceneLayout } from '../../store/view-layout'
+import { withSelectionHarness } from '../../test-utils/selection-harness'
+import { OpenWallEnds3DLayer } from '../editor/open-wall-ends-3d-layer'
+import { FloorplanOpenWallEndsLayer } from './floorplan-open-wall-ends-layer'
+
+test('hidden open-end overlays do not read 2,000 walls during moves, handles, any reshape, or 3D', async () => {
+  await withSelectionHarness(async ({ render }) => {
+    const wall = WallNode.parse({ id: 'wall_a', parentId: 'level_a', start: [0, 0], end: [2, 0] })
+    const walls = [
+      wall,
+      ...Array.from({ length: 1999 }, (_, index) => ({
+        ...wall,
+        id: `wall_${index}` as typeof wall.id,
+        start: [index * 4 + 4, 0] as [number, number],
+        end: [index * 4 + 6, 0] as [number, number],
+      })),
+    ]
+    const level = LevelNode.parse({ id: 'level_a', children: walls.map((node) => node.id) })
+    let reads = 0
+    const nodes = new Proxy<Record<string, AnyNode>>(
+      Object.fromEntries([level, ...walls].map((node) => [node.id, node])),
+      {
+        get(target, key, receiver) {
+          reads++
+          return Reflect.get(target, key, receiver)
+        },
+      },
+    )
+    useScene.setState({ nodes })
+    useViewer.setState({
+      selection: { buildingId: null, levelId: level.id, zoneId: null, selectedIds: [] },
+    })
+    useEditor.setState({ viewLayouts: { edit: sceneLayout('split') }, mode: 'build', tool: 'wall' })
+    const scopes: ReturnType<typeof useInteractionScope.getState>['scope'][] = [
+      { kind: 'moving', node: wall, nodeId: wall.id, nodeType: 'wall', view: '2d' },
+      {
+        kind: 'placing',
+        node: wall,
+        nodeId: wall.id,
+        nodeType: 'wall',
+        view: '2d',
+        pressDrag: false,
+        driver: 'move-tool',
+      },
+      { kind: 'handle-drag', nodeId: wall.id, handle: 'height' },
+      ...(
+        ['endpoint', 'curve', 'control-point', 'tangent', 'boundary', 'hole', 'split'] as const
+      ).map((reshape) => ({
+        kind: 'reshaping' as const,
+        reshape,
+        nodeId: wall.id,
+        driver: 'floorplan' as const,
+      })),
+    ]
+    for (const scope of scopes) {
+      await act(async () => useInteractionScope.setState({ scope }))
+      reads = 0
+      await render(
+        <group>
+          <FloorplanOpenWallEndsLayer />
+          <OpenWallEnds3DLayer />
+        </group>,
+      )
+      expect(reads).toBe(0)
+    }
+    await render(null)
+    await act(async () => {
+      useEditor.setState({ viewLayouts: { edit: sceneLayout('3d') } })
+      useInteractionScope.setState({ scope: { kind: 'idle' } })
+    })
+    reads = 0
+    await render(<FloorplanOpenWallEndsLayer />)
+    expect(reads).toBe(0)
+    await render(null)
+    await act(async () => useEditor.setState({ viewLayouts: { edit: sceneLayout('2d') } }))
+    reads = 0
+    await render(<OpenWallEnds3DLayer />)
+    expect(reads).toBe(0)
+  })
+})

package/src/components/editor-2d/floorplan-open-wall-ends-layer.tsx

@@ -0,0 +1,290 @@
+'use client'
+
+import type { OpenWallEnd } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { memo, useEffect, useState } from 'react'
+import { createPortal } from 'react-dom'
+import {
+  useOpenWallEndFocus,
+  useOpenWallEnds,
+  useOpenWallEndsSuppressed,
+} from '../../hooks/use-open-wall-ends'
+import { openWallEndKey, openWallEndLabel } from '../../lib/floorplan/open-wall-ends'
+import { MEASUREMENT_DANGLING_COLOR } from '../../lib/measurements'
+import useEditor from '../../store/use-editor'
+import { isViewVisible, VIEW_2D } from '../../store/view-layout'
+import { JoinWallsPill } from '../editor/join-walls-pill'
+import { OpenWallEndsHint } from '../editor/open-wall-ends-hint'
+import { useFloorplanRender } from './floorplan-render-context'
+import { resolveFloorplanLabelAngle } from './renderers/floorplan-label-angle'
+
+function sceneScreenPoint(point: [number, number]): { left: number; top: number } | null {
+  const scene = document.querySelector<SVGGElement>('[data-floorplan-scene]')
+  const svg = scene?.ownerSVGElement
+  const ctm = scene?.getScreenCTM()
+  if (!(svg && ctm)) return null
+  const screen = new DOMPoint(point[0], point[1]).matrixTransform(ctm)
+  return { left: screen.x, top: screen.y }
+}
+
+/**
+ * Shows where walls look joined but are not, so a room can't close: a red dot
+ * on each open end, a dashed line to the wall it nearly meets with what is
+ * wrong ("4 cm gap"), and — while drawing — the walls that bound no room dimmed. Hover or click a
+ * dot for "Join walls", which applies core's join planner as one undo step.
+ *
+ * On while walls or rooms are being drawn (the wall tool's variants, Divide);
+ * otherwise only when a wall that bounds no room has a near miss.
+ */
+export const FloorplanOpenWallEndsLayer = memo(function FloorplanOpenWallEndsLayer() {
+  const visible = useEditor((state) => isViewVisible(state, VIEW_2D))
+  const suppressed = useOpenWallEndsSuppressed()
+  return visible && !suppressed ? <ActiveOpenWallEndsLayer /> : null
+})
+
+const ActiveOpenWallEndsLayer = memo(function ActiveOpenWallEndsLayer() {
+  const unit = useViewer((state) => state.unit)
+  const renderContext = useFloorplanRender()
+  const { drawing, drafting, ends: visibleEnds, roomlessWallIds, shown } = useOpenWallEnds()
+  const focus = useOpenWallEndFocus(visibleEnds, drafting)
+  const { activeEnd, activeKey } = focus
+
+  if (!shown) return null
+
+  const unitsPerPixel = Math.max(renderContext?.unitsPerPixel ?? 0.01, 1e-6)
+  const sceneRotationDeg = renderContext?.sceneRotationDeg ?? 0
+  return (
+    <g data-open-wall-ends-layer="">
+      {drawing && roomlessWallIds.length > 0 ? (
+        <style>
+          {`${roomlessWallIds
+            .map(
+              (id) =>
+                `[data-floorplan-scene] .floorplan-registry-entry[data-node-id="${CSS.escape(id)}"]`,
+            )
+            .join(',')}{opacity:0.4}`}
+        </style>
+      ) : null}
+      {visibleEnds.map((end) => {
+        const key = openWallEndKey(end)
+        return (
+          <OpenWallEndMarker
+            active={key === activeKey}
+            end={end}
+            interactive={!!end.candidate && !drafting}
+            key={key}
+            label={openWallEndLabel(end, unit)}
+            onHoverEnd={focus.releaseHover}
+            onHoverStart={() => focus.keepHover(key)}
+            onPin={() => focus.togglePin(key)}
+            sceneRotationDeg={sceneRotationDeg}
+            unitsPerPixel={unitsPerPixel}
+          />
+        )
+      })}
+      {activeEnd ? (
+        <FloorplanJoinWallsPill
+          end={activeEnd}
+          onHoverEnd={focus.releaseHover}
+          onHoverStart={() => focus.keepHover(openWallEndKey(activeEnd))}
+          onJoin={() => focus.join(activeEnd)}
+          refusal={focus.refusal}
+        />
+      ) : null}
+      <OpenWallEndsHint ends={visibleEnds} onShow={(end) => focus.pin(openWallEndKey(end))} />
+    </g>
+  )
+})
+
+function OpenWallEndMarker({
+  active,
+  end,
+  label,
+  interactive,
+  onHoverEnd,
+  onHoverStart,
+  onPin,
+  sceneRotationDeg,
+  unitsPerPixel: upp,
+}: {
+  active: boolean
+  end: OpenWallEnd
+  label: string | null
+  interactive: boolean
+  onHoverEnd: () => void
+  onHoverStart: () => void
+  onPin: () => void
+  sceneRotationDeg: number
+  unitsPerPixel: number
+}) {
+  const [x, z] = end.point
+  const candidate = end.candidate
+  const labelAnchor = candidate
+    ? [(x + candidate.point[0]) / 2, (z + candidate.point[1]) / 2]
+    : [x, z]
+  const stop = (event: { stopPropagation: () => void }) => event.stopPropagation()
+
+  return (
+    <g>
+      {candidate ? (
+        <>
+          <line
+            pointerEvents="none"
+            stroke={MEASUREMENT_DANGLING_COLOR}
+            strokeDasharray={`${4 * upp} ${3 * upp}`}
+            strokeLinecap="round"
+            strokeWidth={1.5 * upp}
+            x1={x}
+            x2={candidate.point[0]}
+            y1={z}
+            y2={candidate.point[1]}
+          />
+          <circle
+            cx={candidate.point[0]}
+            cy={candidate.point[1]}
+            fill="none"
+            pointerEvents="none"
+            r={3.5 * upp}
+            stroke={MEASUREMENT_DANGLING_COLOR}
+            strokeWidth={1.5 * upp}
+          />
+        </>
+      ) : null}
+      <circle
+        cx={x}
+        cy={z}
+        fill={MEASUREMENT_DANGLING_COLOR}
+        pointerEvents="none"
+        r={(active ? 6.5 : 5) * upp}
+        stroke="#ffffff"
+        strokeWidth={1.5 * upp}
+      />
+      {/* Hit target larger than the dot so it is easy to catch at any zoom. */}
+      <circle
+        aria-label={label ?? 'Wall end not joined'}
+        cx={x}
+        cy={z}
+        data-open-wall-end=""
+        fill="transparent"
+        onClick={(event) => {
+          event.stopPropagation()
+          onPin()
+        }}
+        onPointerDown={stop}
+        onPointerEnter={interactive ? onHoverStart : undefined}
+        onPointerLeave={interactive ? onHoverEnd : undefined}
+        onPointerUp={stop}
+        pointerEvents={interactive ? 'all' : 'none'}
+        r={11 * upp}
+        role="button"
+        style={{ cursor: 'pointer' }}
+      />
+      {label ? (
+        <OpenWallEndLabel
+          point={labelAnchor as [number, number]}
+          sceneRotationDeg={sceneRotationDeg}
+          text={label}
+          unitsPerPixel={upp}
+        />
+      ) : null}
+    </g>
+  )
+}
+
+function OpenWallEndLabel({
+  point,
+  sceneRotationDeg,
+  text,
+  unitsPerPixel: upp,
+}: {
+  point: [number, number]
+  sceneRotationDeg: number
+  text: string
+  unitsPerPixel: number
+}) {
+  const fontSize = 10 * upp
+  const padX = 6 * upp
+  const width = text.length * 5.6 * upp + padX * 2
+  const height = fontSize + 6 * upp
+  const angle = resolveFloorplanLabelAngle(0, sceneRotationDeg, true)
+  return (
+    <g
+      pointerEvents="none"
+      transform={`translate(${point[0]} ${point[1]}) rotate(${angle}) translate(0 ${-18 * upp})`}
+    >
+      <rect
+        fill="#ffffff"
+        height={height}
+        opacity={0.94}
+        rx={height / 2}
+        stroke={MEASUREMENT_DANGLING_COLOR}
+        strokeWidth={0.75 * upp}
+        width={width}
+        x={-width / 2}
+        y={-height / 2}
+      />
+      <text
+        dominantBaseline="middle"
+        fill={MEASUREMENT_DANGLING_COLOR}
+        fontFamily="system-ui, -apple-system, sans-serif"
+        fontSize={fontSize}
+        fontWeight="600"
+        textAnchor="middle"
+      >
+        {text}
+      </text>
+    </g>
+  )
+}
+
+function FloorplanJoinWallsPill({
+  end,
+  onHoverEnd,
+  onHoverStart,
+  onJoin,
+  refusal,
+}: {
+  end: OpenWallEnd
+  onHoverEnd: () => void
+  onHoverStart: () => void
+  onJoin: () => void
+  refusal: string | null
+}) {
+  const [position, setPosition] = useState<{ left: number; top: number } | null>(null)
+
+  // Follows pan / zoom: the scene group's screen transform changes without a
+  // React render, so track it per frame while the pill is up.
+  useEffect(() => {
+    let raf = 0
+    const tick = () => {
+      raf = requestAnimationFrame(tick)
+      const next = sceneScreenPoint(end.point)
+      setPosition((current) =>
+        current && next && current.left === next.left && current.top === next.top ? current : next,
+      )
+    }
+    tick()
+    return () => cancelAnimationFrame(raf)
+  }, [end.point])
+
+  if (!position) return null
+
+  return createPortal(
+    <div
+      className="pointer-events-none fixed z-30 flex w-max flex-col items-center"
+      style={{
+        left: position.left,
+        top: position.top,
+        transform: 'translate(-50%, calc(-100% - 40px))',
+      }}
+    >
+      <JoinWallsPill
+        onHoverEnd={onHoverEnd}
+        onHoverStart={onHoverStart}
+        onJoin={onJoin}
+        refusal={refusal}
+      />
+    </div>,
+    document.body,
+  )
+}

package/src/components/editor-2d/floorplan-registered-tool-layer.tsx

@@ -14,8 +14,19 @@ import {
 } from '../../lib/floorplan/floorplan-mode'
 import useEditor from '../../store/use-editor'
 import useFloorplanMode from '../../store/use-floorplan-mode'
+import useInteractionScope, { useReshapingNode } from '../../store/use-interaction-scope'
 
-const lazyToolCache = new WeakMap<() => Promise<unknown>, ComponentType<FloorplanToolContext>>()
+type Loader = () => Promise<{ default: ComponentType<FloorplanToolContext> }>
+const lazyToolCache = new WeakMap<Loader, ComponentType<FloorplanToolContext>>()
+
+function lazyTool(loader: Loader | undefined): ComponentType<FloorplanToolContext> | null {
+  if (!loader) return null
+  const cached = lazyToolCache.get(loader)
+  if (cached) return cached
+  const component = lazy(loader)
+  lazyToolCache.set(loader, component)
+  return component
+}
 
 function registeredFloorplanTool(
   tool: string | null,
@@ -24,13 +35,16 @@ function registeredFloorplanTool(
   if (!tool) return null
   const extension = getFloorplanNodeExtension(nodeRegistry.get(tool))
   if (!isFloorplanToolAvailableInMode(extension?.availableModes, mode)) return null
-  const loader = extension?.tool
-  if (!loader) return null
-  const cached = lazyToolCache.get(loader)
-  if (cached) return cached
-  const component = lazy(loader)
-  lazyToolCache.set(loader, component)
-  return component
+  return lazyTool(extension?.tool)
+}
+
+/** The plan sibling of `def.affordanceTools[reshape]`: a kind's layer for its own reshape. */
+function registeredReshapeLayer(
+  kind: string | null,
+  reshape: string | null,
+): ComponentType<FloorplanToolContext> | null {
+  if (!(kind && reshape)) return null
+  return lazyTool(getFloorplanNodeExtension(nodeRegistry.get(kind))?.reshapeLayers?.[reshape])
 }
 
 export function FloorplanRegisteredToolLayer() {
@@ -42,6 +56,10 @@ export function FloorplanRegisteredToolLayer() {
   const toolDefaults = useEditor((state) =>
     state.tool ? (state.toolDefaults[state.tool] ?? null) : null,
   )
+  const reshape = useInteractionScope((state) =>
+    state.scope.kind === 'reshaping' ? state.scope.reshape : null,
+  )
+  const reshapingNode = useReshapingNode()
   const activeLevelId = useViewer((state) => state.selection.levelId)
   const unit = useViewer((state) => state.unit)
   const metricNotation = useViewer((state) => state.metricNotation)
@@ -55,11 +73,14 @@ export function FloorplanRegisteredToolLayer() {
     useEditor.getState().setTool(null)
     useEditor.getState().setMode('select')
   }, [])
-  if (mode !== 'build') return null
-  const Tool = registeredToolEnabled ? registeredFloorplanTool(tool, floorplanMode) : null
-  return Tool ? (
+  const Active =
+    registeredReshapeLayer(reshapingNode?.type ?? null, reshape) ??
+    (mode === 'build' && registeredToolEnabled
+      ? registeredFloorplanTool(tool, floorplanMode)
+      : null)
+  return Active ? (
     <Suspense fallback={null}>
-      <Tool
+      <Active
         activeLevelId={activeLevelId}
         finishTool={finishTool}
         gridSnapStep={gridSnapStep}

package/src/components/editor-2d/floorplan-registry-action-menu.tsx

@@ -4,6 +4,7 @@ import {
   type AnyNode,
   type AnyNodeId,
   type CeilingNode,
+  collectionIdsOf,
   createSceneApi,
   getWallMidpointHandlePoint,
   type NodeQuickAction,
@@ -38,6 +39,7 @@ import useInteractionScope, {
   useMovingNode,
 } from '../../store/use-interaction-scope'
 import { NodeActionMenu } from '../editor/node-action-menu'
+import { startZoneRoomTransform } from '../editor/room-controls'
 import { IconRefGlyph } from '../ui/icon-ref'
 
 function SideAddGlyph({ direction }: { direction: 'left' | 'right' }) {
@@ -258,6 +260,7 @@ export function FloorplanRegistryActionMenu() {
   const canAddHole = node.type === 'slab' || node.type === 'ceiling'
 
   const handleMove = () => {
+    if (startZoneRoomTransform(node, 'move')) return
     sfxEmitter.emit('sfx:item-pick')
     const sceneNodes = useScene.getState().nodes
     setMovingNode(resolveMoveActionNode(node, sceneNodes) as never)
@@ -321,6 +324,7 @@ export function FloorplanRegistryActionMenu() {
 
   const handleDuplicate = () => {
     if (!node.parentId) return
+    if (startZoneRoomTransform(node, 'duplicate')) return
     sfxEmitter.emit('sfx:item-pick')
     if (registryMoveDisabled(node)) {
       try {
@@ -343,7 +347,13 @@ export function FloorplanRegistryActionMenu() {
         const cloned = prepareFreshPlacementRootDuplicate(node as AnyNode)
         const parsed = def.schema.parse(cloned) as AnyNode
         draftId = parsed.id as AnyNodeId
-        useScene.getState().createNode(parsed, node.parentId as AnyNodeId)
+        useScene.getState().createNodes([
+          {
+            node: parsed,
+            parentId: node.parentId as AnyNodeId,
+            collectionIds: collectionIdsOf(useScene.getState().collections, node.id),
+          },
+        ])
         setMovingNode(parsed as never)
       }
       setMovingNodeOrigin('2d')