@pascal-app/editor 1.0.1 → 1.0.4

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

@@ -0,0 +1,273 @@
+'use client'
+
+import { type OpenWallEnd, sceneRegistry } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { Html } from '@react-three/drei'
+import { useFrame } from '@react-three/fiber'
+import { memo, useEffect, useMemo, useRef } from 'react'
+import { BoxGeometry, CircleGeometry, type Group, RingGeometry } from 'three'
+import { MeshBasicNodeMaterial } from 'three/webgpu'
+import {
+  useOpenWallEndFocus,
+  useOpenWallEnds,
+  useOpenWallEndsSuppressed,
+} from '../../hooks/use-open-wall-ends'
+import { EDITOR_LAYER } from '../../lib/constants'
+import { openWallEndKey, openWallEndLabel } from '../../lib/floorplan/open-wall-ends'
+import { MEASUREMENT_DANGLING_COLOR } from '../../lib/measurements'
+import { cn } from '../../lib/utils'
+import useEditor from '../../store/use-editor'
+import { isViewVisible, VIEW_3D, visibleScene } from '../../store/view-layout'
+import { JoinWallsPill } from './join-walls-pill'
+import { OpenWallEndsHint } from './open-wall-ends-hint'
+
+/**
+ * The 3D twin of `FloorplanOpenWallEndsLayer`: at each wall end that isn't
+ * joined, a red disc on the floor with a dashed ribbon to the wall it nearly
+ * meets, and a screen-space dot carrying the same label ("4 cm gap") and, on
+ * hover or click, the same "Join walls" pill. The floor geometry ignores depth
+ * so it reads through cutaway walls like the snap beacon; the dot is DOM, so
+ * it stays clickable where a wall stands between it and the camera.
+ *
+ * Shares the analysis with the floor plan (`useOpenWallEnds`). Mounted inside
+ * ToolManager's building-local group — wall points are building-local plan
+ * coordinates — and lifted to the active level's floor each frame.
+ */
+
+const FLOOR_LIFT = 0.02
+const DISC_RADIUS = 0.07
+const DISC_OUTLINE = 0.095
+const DASH_LEN = 0.06
+const DASH_GAP = 0.04
+const LINE_WIDTH = 0.025
+const MAX_DASHES = 40
+const NO_RAYCAST = () => null
+
+function createMarkerResources() {
+  const materialOptions = {
+    depthTest: false,
+    depthWrite: false,
+    toneMapped: false,
+    transparent: true,
+  }
+  return {
+    redMaterial: new MeshBasicNodeMaterial({
+      ...materialOptions,
+      color: MEASUREMENT_DANGLING_COLOR,
+    }),
+    outlineMaterial: new MeshBasicNodeMaterial({ ...materialOptions, color: 0xff_ff_ff }),
+    discGeometry: new CircleGeometry(1, 24),
+    ringGeometry: new RingGeometry(0.7, 1, 24),
+    dashGeometry: new BoxGeometry(1, 1, 1),
+  }
+}
+
+type MarkerResources = ReturnType<typeof createMarkerResources>
+
+type Vec3 = [number, number, number]
+
+export const OpenWallEnds3DLayer = memo(function OpenWallEnds3DLayer() {
+  const visible = useEditor((state) => isViewVisible(state, VIEW_3D))
+  const suppressed = useOpenWallEndsSuppressed()
+  return visible && !suppressed ? <ActiveOpenWallEnds3DLayer /> : null
+})
+
+const ActiveOpenWallEnds3DLayer = memo(function ActiveOpenWallEnds3DLayer() {
+  const levelId = useViewer((state) => state.selection.levelId)
+  const unit = useViewer((state) => state.unit)
+  const { drafting, ends } = useOpenWallEnds()
+  // Split view shows the hint once, over the floor plan.
+  const hintHere = useEditor((state) => visibleScene(state) === '3d')
+  const focus = useOpenWallEndFocus(ends, drafting)
+  const groupRef = useRef<Group>(null)
+  const hasEnds = ends.length > 0
+  const resources = useMemo(() => (hasEnds ? createMarkerResources() : null), [hasEnds])
+  // Resources passed as mesh props are shared and aren't disposed by R3F.
+  useEffect(
+    () => () => {
+      if (resources) for (const resource of Object.values(resources)) resource.dispose()
+    },
+    [resources],
+  )
+
+  useFrame(() => {
+    const group = groupRef.current
+    if (!group) return
+    const levelMesh = levelId ? sceneRegistry.nodes.get(levelId) : null
+    group.position.y = levelMesh ? levelMesh.position.y : 0
+  })
+
+  if (!resources) return null
+  return (
+    <group ref={groupRef}>
+      {ends.map((end) => {
+        const key = openWallEndKey(end)
+        const active = focus.activeEnd !== null && key === focus.activeKey
+        return (
+          <OpenWallEndMarker3D
+            active={active}
+            end={end}
+            interactive={!!end.candidate && !drafting}
+            key={key}
+            label={openWallEndLabel(end, unit)}
+            onHoverEnd={focus.releaseHover}
+            onHoverStart={() => focus.keepHover(key)}
+            onJoin={() => focus.join(end)}
+            onPin={() => focus.togglePin(key)}
+            refusal={active ? focus.refusal : null}
+            resources={resources}
+          />
+        )
+      })}
+      {hintHere ? (
+        // Html only to reach the DOM from inside the canvas; the hint portals
+        // itself to the body and centres on the 3D view.
+        <Html style={{ pointerEvents: 'none' }}>
+          <OpenWallEndsHint ends={ends} onShow={(end) => focus.pin(openWallEndKey(end))} />
+        </Html>
+      ) : null}
+    </group>
+  )
+})
+
+function OpenWallEndMarker3D({
+  active,
+  end,
+  interactive,
+  label,
+  onHoverEnd,
+  onHoverStart,
+  onJoin,
+  onPin,
+  refusal,
+  resources,
+}: {
+  active: boolean
+  end: OpenWallEnd
+  interactive: boolean
+  label: string | null
+  onHoverEnd: () => void
+  onHoverStart: () => void
+  onJoin: () => void
+  onPin: () => void
+  refusal: string | null
+  resources: MarkerResources
+}) {
+  const { dashGeometry, discGeometry, ringGeometry, redMaterial, outlineMaterial } = resources
+  const [x, z] = end.point
+  const target = end.candidate?.point
+  const { dashes, angleY, dashLength } = useMemo(() => {
+    if (!target) return { dashes: [] as Vec3[], angleY: 0, dashLength: 0 }
+    const dx = target[0] - x
+    const dz = target[1] - z
+    const length = Math.hypot(dx, dz)
+    const angle = -Math.atan2(dz, dx)
+    if (length < 1e-4) return { dashes: [] as Vec3[], angleY: angle, dashLength: 0 }
+    const period = Math.max(DASH_LEN + DASH_GAP, length / MAX_DASHES)
+    const centres: Vec3[] = []
+    for (let d = Math.min(period, length) / 2; d < length; d += period) {
+      centres.push([x + (dx / length) * d, FLOOR_LIFT, z + (dz / length) * d])
+    }
+    return { dashes: centres, angleY: angle, dashLength: Math.min(DASH_LEN, length) }
+  }, [target, x, z])
+  const stop = (event: { stopPropagation: () => void }) => event.stopPropagation()
+
+  return (
+    <>
+      {dashes.map((centre, index) => (
+        <mesh
+          geometry={dashGeometry}
+          key={index}
+          layers={EDITOR_LAYER}
+          material={redMaterial}
+          position={centre}
+          raycast={NO_RAYCAST}
+          renderOrder={1005}
+          rotation={[0, angleY, 0]}
+          scale={[dashLength, 0.002, LINE_WIDTH]}
+        />
+      ))}
+      {target ? (
+        <mesh
+          geometry={ringGeometry}
+          layers={EDITOR_LAYER}
+          material={redMaterial}
+          position={[target[0], FLOOR_LIFT + 0.001, target[1]]}
+          raycast={NO_RAYCAST}
+          renderOrder={1006}
+          rotation={[-Math.PI / 2, 0, 0]}
+          scale={[DISC_RADIUS * 0.8, DISC_RADIUS * 0.8, 1]}
+        />
+      ) : null}
+      <mesh
+        geometry={discGeometry}
+        layers={EDITOR_LAYER}
+        material={outlineMaterial}
+        position={[x, FLOOR_LIFT + 0.002, z]}
+        raycast={NO_RAYCAST}
+        renderOrder={1006}
+        rotation={[-Math.PI / 2, 0, 0]}
+        scale={[DISC_OUTLINE, DISC_OUTLINE, 1]}
+      />
+      <mesh
+        geometry={discGeometry}
+        layers={EDITOR_LAYER}
+        material={redMaterial}
+        position={[x, FLOOR_LIFT + 0.003, z]}
+        raycast={NO_RAYCAST}
+        renderOrder={1007}
+        rotation={[-Math.PI / 2, 0, 0]}
+        scale={[DISC_RADIUS, DISC_RADIUS, 1]}
+      />
+      <Html
+        center
+        position={[x, FLOOR_LIFT, z]}
+        style={{ pointerEvents: 'none', userSelect: 'none' }}
+        zIndexRange={[25, 0]}
+      >
+        <div className="relative flex items-center justify-center">
+          <div className="pointer-events-none absolute bottom-full left-1/2 mb-1.5 flex -translate-x-1/2 flex-col items-center gap-1.5">
+            {active ? (
+              <JoinWallsPill
+                onHoverEnd={onHoverEnd}
+                onHoverStart={onHoverStart}
+                onJoin={onJoin}
+                refusal={refusal}
+              />
+            ) : null}
+            {label ? (
+              <div
+                className="whitespace-nowrap rounded-[3px] px-[5px] py-[2px] font-medium font-sans text-[11px] text-white"
+                style={{ backgroundColor: MEASUREMENT_DANGLING_COLOR }}
+              >
+                {label}
+              </div>
+            ) : null}
+          </div>
+          <button
+            aria-label={label ?? 'Wall end not joined'}
+            className={cn(
+              'h-3.5 w-3.5 rounded-full border-2 border-white shadow-sm transition-transform',
+              interactive
+                ? 'pointer-events-auto cursor-pointer hover:scale-125'
+                : 'pointer-events-none',
+              active && 'scale-125',
+            )}
+            data-open-wall-end=""
+            onClick={(event) => {
+              event.stopPropagation()
+              onPin()
+            }}
+            onPointerDown={stop}
+            onPointerEnter={interactive ? onHoverStart : undefined}
+            onPointerLeave={interactive ? onHoverEnd : undefined}
+            onPointerUp={stop}
+            style={{ backgroundColor: MEASUREMENT_DANGLING_COLOR }}
+            tabIndex={interactive ? 0 : -1}
+            type="button"
+          />
+        </div>
+      </Html>
+    </>
+  )
+}

package/src/components/editor/open-wall-ends-hint.tsx

@@ -0,0 +1,89 @@
+'use client'
+
+import { type AnyNodeId, emitter, type OpenWallEnd } from '@pascal-app/core'
+import { useEffect, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { openWallEndsSummary } from '../../lib/floorplan/open-wall-ends'
+import { MEASUREMENT_DANGLING_COLOR } from '../../lib/measurements'
+
+// The viewer area holds the floor plan and the 3D view side by side, so its
+// top centre clears both views' corner controls in 2D, 3D and split alike.
+const viewerArea = () => document.querySelector('[data-pascal-viewer-3d]')?.parentElement ?? null
+
+// The views slide in and out without resizing, so the anchor's box is read
+// per frame while the hint is up, like the Join pill's anchor.
+function useViewerAreaTopCenter(): { left: number; top: number } | null {
+  const [anchor, setAnchor] = useState<{ left: number; top: number } | null>(null)
+  useEffect(() => {
+    let raf = 0
+    const tick = () => {
+      raf = requestAnimationFrame(tick)
+      const rect = viewerArea()?.getBoundingClientRect()
+      const next =
+        rect && rect.width > 0 ? { left: rect.left + rect.width / 2, top: rect.top } : null
+      setAnchor((current) =>
+        current && next && current.left === next.left && current.top === next.top ? current : next,
+      )
+    }
+    tick()
+    return () => cancelAnimationFrame(raf)
+  }, [])
+  return anchor
+}
+
+/**
+ * "2 wall ends aren't joined — rooms can't close", centred at the top of the
+ * viewer area. Mounted by one view only (the floor plan when it shows, else
+ * the 3D view), so split view shows it once.
+ * Show walks the joinable ends one by one: it focuses the 3D camera on the
+ * wall and asks the view to pin that end's Join pill.
+ */
+export function OpenWallEndsHint({
+  ends,
+  onShow,
+}: {
+  ends: readonly OpenWallEnd[]
+  onShow: (end: OpenWallEnd) => void
+}) {
+  const anchor = useViewerAreaTopCenter()
+  const [cursor, setCursor] = useState(0)
+  const joinable = ends.filter((end) => end.candidate)
+  const summary = openWallEndsSummary(joinable.length)
+  if (!(anchor && summary)) return null
+
+  const showNext = () => {
+    const target = joinable[cursor % joinable.length]
+    if (!target) return
+    setCursor((value) => value + 1)
+    onShow(target)
+    emitter.emit('camera-controls:focus', { nodeId: target.wallId as AnyNodeId })
+  }
+
+  return createPortal(
+    <div
+      className="pointer-events-auto fixed z-30 flex -translate-x-1/2 items-center gap-2 whitespace-nowrap rounded-full border border-border bg-background/95 py-1 pr-1 pl-3 text-xs shadow-lg backdrop-blur-md"
+      data-open-wall-end=""
+      onPointerDown={(event) => event.stopPropagation()}
+      onPointerUp={(event) => event.stopPropagation()}
+      style={{ left: anchor.left, top: anchor.top + 16 }}
+    >
+      <span
+        aria-hidden
+        className="h-2 w-2 shrink-0 rounded-full"
+        style={{ backgroundColor: MEASUREMENT_DANGLING_COLOR }}
+      />
+      <span className="text-foreground">{summary}</span>
+      <button
+        className="rounded-full px-3 py-1 font-medium text-foreground transition-colors hover:bg-accent"
+        onClick={(event) => {
+          event.stopPropagation()
+          showNext()
+        }}
+        type="button"
+      >
+        Show
+      </button>
+    </div>,
+    document.body,
+  )
+}

package/src/components/editor/quick-measurement-hud.tsx

@@ -6,11 +6,12 @@ import {
   selectQuickMeasurementHudEntry,
   useQuickMeasurementHud,
 } from '../../store/use-quick-measurement-hud'
+import { visibleScene } from '../../store/view-layout'
 import { QuickMeasurementCard } from './quick-measurement-card'
 
 export function QuickMeasurementHud() {
-  const viewMode = useEditor((state) => state.viewMode)
-  const entry = useQuickMeasurementHud((state) => selectQuickMeasurementHudEntry(state, viewMode))
+  const scene = useEditor(visibleScene)
+  const entry = useQuickMeasurementHud((state) => selectQuickMeasurementHudEntry(state, scene))
   const unit = useViewer((state) => state.unit)
   const metricNotation = useViewer((state) => state.metricNotation)
 

package/src/components/editor/registry-action-contributions.test.tsx

@@ -0,0 +1,63 @@
+import { afterEach, describe, expect, test } from 'bun:test'
+import { type AnyNode, registerNode, useInteractive } from '@pascal-app/core'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { MechanismButton, selectedMechanismNode } from './registry-action-contributions'
+
+const switchMechanism = {
+  has: (node: AnyNode) => (node as unknown as { joints: number }).joints > 0,
+  isOn: (node: AnyNode, state: ReturnType<typeof useInteractive.getState>) =>
+    Boolean(state.mechanisms[node.id]),
+  set: (node: AnyNode, on: boolean) => useInteractive.getState().setMechanism(node.id, on),
+}
+
+// A kind that only declares the capability: no action-menu contribution, no E action.
+function articulated(joints: number): AnyNode {
+  const kind = `test:mechanism-${crypto.randomUUID()}`
+  registerNode({
+    kind,
+    schemaVersion: 1,
+    category: 'furnish',
+    defaults: () => ({}),
+    capabilities: { mechanism: switchMechanism },
+  } as never)
+  return { object: 'node', id: `${kind}_1`, type: kind, joints } as unknown as AnyNode
+}
+
+const byId = (...nodes: AnyNode[]) => Object.fromEntries(nodes.map((node) => [node.id, node]))
+
+afterEach(() => {
+  for (const id of Object.keys(useInteractive.getState().mechanisms))
+    useInteractive.getState().removeMechanism(id as never)
+})
+
+describe('mechanism action in the action menu', () => {
+  test('the only selected node gets Play when its kind declares a mechanism', () => {
+    const node = articulated(2)
+    expect(selectedMechanismNode([node.id], byId(node))).toBe(node)
+  })
+
+  test('no Play without moving parts, for a multi-selection, or without the capability', () => {
+    const still = articulated(0)
+    expect(selectedMechanismNode([still.id], byId(still))).toBeUndefined()
+
+    const node = articulated(2)
+    const other = { object: 'node', id: 'other_1', type: 'other' } as unknown as AnyNode
+    expect(selectedMechanismNode([node.id, other.id], byId(node, other))).toBeUndefined()
+    expect(selectedMechanismNode([other.id], byId(other))).toBeUndefined()
+  })
+
+  test('the button reads Play, then Stop while the mechanism runs', () => {
+    const node = articulated(1)
+    const idle = renderToStaticMarkup(
+      <MechanismButton mechanism={switchMechanism} node={node} running={false} />,
+    )
+    expect(idle).toContain('aria-label="Play"')
+    expect(idle).toContain('aria-pressed="false"')
+
+    const running = renderToStaticMarkup(
+      <MechanismButton mechanism={switchMechanism} node={node} running />,
+    )
+    expect(running).toContain('aria-label="Stop"')
+    expect(running).toContain('aria-pressed="true"')
+  })
+})

package/src/components/editor/registry-action-contributions.tsx

@@ -0,0 +1,132 @@
+'use client'
+
+import {
+  type AnyNode,
+  type AnyNodeId,
+  type MechanismCapability,
+  nodeMechanism,
+  nodeRegistry,
+  toggleMechanism,
+  useInteractive,
+  useScene,
+} from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { DoorClosed, DoorOpen, PanelTopClose, PanelTopOpen, Play, Square } from 'lucide-react'
+import { type ComponentType, lazy, Suspense } from 'react'
+import { useShallow } from 'zustand/react/shallow'
+import { getFloorplanNodeExtension } from '../../lib/floorplan/floorplan-extension'
+import { ActionMenuButton } from './action-menu-button'
+
+type Loader = () => Promise<{ default: ComponentType }>
+const lazyCache = new WeakMap<Loader, ComponentType>()
+
+function contribution(kind: string): ComponentType | null {
+  const loader = getFloorplanNodeExtension(nodeRegistry.get(kind))?.actionMenu?.actions
+  if (!loader) return null
+  const cached = lazyCache.get(loader)
+  if (cached) return cached
+  const component = lazy(loader)
+  lazyCache.set(loader, component)
+  return component
+}
+
+/** The node the action menu's Play/Stop runs: the only selected node, when its kind declares a mechanism. */
+export function selectedMechanismNode(
+  selectedIds: readonly string[],
+  nodes: Readonly<Record<string, AnyNode>>,
+): AnyNode | undefined {
+  const node = selectedIds.length === 1 ? nodes[selectedIds[0]!] : undefined
+  return nodeMechanism(node) ? node : undefined
+}
+
+function MechanismGlyph({
+  icon,
+  running,
+}: {
+  icon: MechanismCapability['icon']
+  running: boolean
+}) {
+  const Glyph =
+    icon === 'door'
+      ? running
+        ? DoorClosed
+        : DoorOpen
+      : icon === 'window'
+        ? running
+          ? PanelTopClose
+          : PanelTopOpen
+        : running
+          ? Square
+          : Play
+  return <Glyph className="h-4 w-4" />
+}
+
+export function MechanismButton({
+  node,
+  mechanism,
+  running,
+}: {
+  node: AnyNode
+  mechanism: MechanismCapability
+  running: boolean
+}) {
+  const label = mechanism.icon ? (running ? 'Close' : 'Open') : running ? 'Stop' : 'Play'
+  return (
+    <ActionMenuButton
+      keys={['E']}
+      label={label}
+      onClick={(event) => {
+        event.stopPropagation()
+        toggleMechanism(mechanism, node)
+      }}
+      pressed={running}
+    >
+      <MechanismGlyph icon={mechanism.icon} running={running} />
+    </ActionMenuButton>
+  )
+}
+
+/** Play/Stop for a single selected node whose kind declares `capabilities.mechanism`. */
+function MechanismAction() {
+  const selected = useViewer((s) => s.selection.selectedIds)
+  const node = useScene((s) => selectedMechanismNode(selected, s.nodes))
+  const mechanism = nodeMechanism(node)
+  const running = useInteractive((s) => (node && mechanism ? mechanism.isOn(node, s) : false))
+  return node && mechanism ? (
+    <MechanismButton mechanism={mechanism} node={node} running={running} />
+  ) : null
+}
+
+/**
+ * The buttons kinds add to the action menu for selections holding them
+ * (`extensions['pascal:editor/floorplan'].actionMenu.actions`), in 2D and 3D
+ * alike. Each contribution reads the selection and decides its own visibility.
+ */
+export function RegistryActionContributions() {
+  const selectedIds = useViewer((s) => s.selection.selectedIds)
+  const kinds = useScene(
+    useShallow((s) =>
+      Array.from(
+        new Set(
+          selectedIds.flatMap((id) => {
+            const type = s.nodes[id as AnyNodeId]?.type
+            return type ? [type] : []
+          }),
+        ),
+      ).sort(),
+    ),
+  )
+  return (
+    <>
+      <MechanismAction />
+      {kinds.map((kind) => {
+        const Contribution = contribution(kind)
+        return Contribution ? (
+          <Suspense fallback={null} key={kind}>
+            <Contribution />
+          </Suspense>
+        ) : null
+      })}
+    </>
+  )
+}