@pascal-app/editor 1.0.3 → 1.0.5

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

@@ -1,10 +1,21 @@
 'use client'
 
-import { type AnyNodeId, nodeRegistry, useScene } from '@pascal-app/core'
+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>()
@@ -19,6 +30,73 @@ function contribution(kind: string): ComponentType | null {
   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
@@ -40,6 +118,7 @@ export function RegistryActionContributions() {
   )
   return (
     <>
+      <MechanismAction />
       {kinds.map((kind) => {
         const Contribution = contribution(kind)
         return Contribution ? (

package/src/components/editor/riser-diagram-panel.tsx

@@ -6,8 +6,10 @@ import { X } from 'lucide-react'
 import { useMemo } from 'react'
 import useEditor from '../../store/use-editor'
 
-const WASTE_COLOR = '#0ea5e9'
-const VENT_COLOR = '#a855f7'
+// Set per theme on the panel root; the light values are darker so the 9-unit
+// diameter labels read on white.
+const WASTE_COLOR = 'var(--riser-waste)'
+const VENT_COLOR = 'var(--riser-vent)'
 const MARKER_COLOR = '#1e293b'
 const PADDING = 32
 /** Meters → SVG units. The iso projection is in meters; scale up so a
@@ -45,14 +47,14 @@ function RiserDiagramContent() {
   const ty = diagram ? -diagram.bounds.minY * SCALE + PADDING : 0
 
   return (
-    <div className="dark pointer-events-auto absolute top-4 right-4 z-30 flex max-h-[80vh] w-[26rem] flex-col overflow-hidden rounded-2xl border border-border/40 bg-background/95 text-foreground shadow-lg backdrop-blur-xl">
+    <div className="pointer-events-auto absolute top-4 right-4 z-30 flex max-h-[80vh] w-[26rem] flex-col overflow-hidden rounded-2xl border border-border/40 bg-background/95 text-foreground shadow-lg backdrop-blur-xl [--riser-vent:#9333ea] [--riser-waste:#0369a1] dark:[--riser-vent:#a855f7] dark:[--riser-waste:#0ea5e9]">
       <div className="flex items-center justify-between border-border/40 border-b px-4 py-2.5">
         <div className="flex flex-col">
           <span className="font-medium text-sm">Riser Diagram</span>
           <span className="text-muted-foreground text-xs">DWV plumbing isometric</span>
         </div>
         <button
-          className="flex h-7 w-7 items-center justify-center rounded-md transition-colors hover:bg-white/10"
+          className="flex h-7 w-7 items-center justify-center rounded-md transition-colors hover:bg-black/6 dark:hover:bg-white/10"
           onClick={() => setRiserOpen(false)}
         >
           <X className="h-4 w-4 text-muted-foreground" />
@@ -87,18 +89,18 @@ function RiserDiagramContent() {
                     <line
                       className="cursor-pointer"
                       onClick={() => select(line.nodeId)}
-                      stroke={color}
                       strokeDasharray={line.system === 'vent' ? '5 4' : undefined}
                       strokeLinecap="round"
                       strokeWidth={(line.vertical ? 3.5 : 2.5) + (isSel ? 2 : 0)}
+                      style={{ stroke: color }}
                       x1={line.from[0] * SCALE}
                       x2={line.to[0] * SCALE}
                       y1={line.from[1] * SCALE}
                       y2={line.to[1] * SCALE}
                     />
                     <text
-                      fill={color}
                       fontSize={9}
+                      style={{ fill: color }}
                       x={((line.from[0] + line.to[0]) / 2) * SCALE + 4}
                       y={((line.from[1] + line.to[1]) / 2) * SCALE - 3}
                     >
@@ -115,7 +117,12 @@ function RiserDiagramContent() {
                   transform={`translate(${marker.point[0] * SCALE}, ${marker.point[1] * SCALE})`}
                 >
                   {marker.kind === 'vent-termination' ? (
-                    <path d="M -5 0 L 0 -7 L 5 0" fill="none" stroke={VENT_COLOR} strokeWidth={2} />
+                    <path
+                      d="M -5 0 L 0 -7 L 5 0"
+                      fill="none"
+                      strokeWidth={2}
+                      style={{ stroke: VENT_COLOR }}
+                    />
                   ) : (
                     <circle fill={MARKER_COLOR} r={3} stroke={MARKER_COLOR} strokeWidth={1.5} />
                   )}