@pascal-app/editor 1.0.1 → 1.0.4

package/src/components/ui/panels/room-name-options.test.ts

@@ -0,0 +1,55 @@
+import { describe, expect, test } from 'bun:test'
+import type { RoomNameSection } from '../../../lib/room-name-catalog'
+import { roomNameOptions } from './room-name-options'
+
+const SECTIONS: RoomNameSection[] = [
+  { id: 'living', title: 'Living', names: ['Living room', 'Kitchen', 'Dining room'] },
+  { id: 'sleeping', title: 'Sleeping', names: ['Bedroom', 'Guest room'] },
+  { id: 'outdoor', title: 'Outdoor', names: ['Garden', 'Terrace'] },
+]
+
+const titles = (typed: string) => roomNameOptions(typed, SECTIONS).groups.map((g) => g.title)
+const values = (typed: string) => roomNameOptions(typed, SECTIONS).options.map((o) => o.value)
+
+describe('roomNameOptions', () => {
+  test('empty or blank input lists every section whole, unmatched, no typed row', () => {
+    for (const typed of ['', '   ']) {
+      const { typed: row, groups, options } = roomNameOptions(typed, SECTIONS)
+      expect(row).toBeNull()
+      expect(groups.map((g) => g.title)).toEqual(['Living', 'Sleeping', 'Outdoor'])
+      expect(options.map((o) => o.value)).toEqual(SECTIONS.flatMap((s) => s.names))
+      expect(options.every((o) => o.kind === 'suggestion' && o.match === null)).toBe(true)
+    }
+  })
+
+  test('before any typing, the current name does not filter the list', () => {
+    const { typed, options } = roomNameOptions('Kitchen', SECTIONS, false)
+    expect(typed).toBeNull()
+    expect(options.map((o) => o.value)).toEqual(SECTIONS.flatMap((s) => s.names))
+  })
+
+  test('typing filters across every section and drops the empty ones', () => {
+    expect(titles('room')).toEqual(['Living', 'Sleeping'])
+    expect(values('room')).toEqual(['room', 'Living room', 'Dining room', 'Bedroom', 'Guest room'])
+    expect(titles('ter')).toEqual(['Outdoor'])
+    expect(roomNameOptions('room', SECTIONS).groups[1]?.options[0]?.match).toEqual({
+      start: 3,
+      end: 7,
+    })
+  })
+
+  test('free text is always offered first unless it is exactly a name', () => {
+    const { typed, options } = roomNameOptions('Wine cellar', SECTIONS)
+    expect(typed).toEqual({ kind: 'typed', value: 'Wine cellar', match: null })
+    expect(options).toEqual([typed!])
+    expect(roomNameOptions('Kitchen', SECTIONS).typed).toBeNull()
+    // A case-only difference still offers the text as typed.
+    expect(roomNameOptions('kitchen', SECTIONS).typed?.value).toBe('kitchen')
+  })
+
+  test('the keyboard order is the typed row, then the groups in order', () => {
+    const { groups, options } = roomNameOptions('e', SECTIONS)
+    expect(options.slice(1)).toEqual(groups.flatMap((g) => g.options))
+    expect(options[0]?.kind).toBe('typed')
+  })
+})

package/src/components/ui/panels/room-name-options.ts

@@ -0,0 +1,47 @@
+import type { RoomNameSection } from '../../../lib/room-name-catalog'
+
+export type RoomNameOption = {
+  kind: 'typed' | 'suggestion'
+  value: string
+  match: { start: number; end: number } | null
+}
+
+export type RoomNameGroup = { id: string; title: string; options: RoomNameOption[] }
+
+/**
+ * The room-name combobox's rows. Until the user types, every section is listed
+ * whole — the field's current name is not a filter. Typing keeps, in every
+ * section, the names containing the text (ignoring case and surrounding
+ * spaces), drops the sections left empty, and puts the typed text first as its
+ * own row unless it already is one of the names. `options` is the flat order
+ * the keyboard walks: the typed row, then each group's rows.
+ */
+export function roomNameOptions(
+  typed: string,
+  sections: readonly RoomNameSection[],
+  filtering = true,
+): { typed: RoomNameOption | null; groups: RoomNameGroup[]; options: RoomNameOption[] } {
+  const query = filtering ? typed.trim().toLowerCase() : ''
+  const groups = sections.flatMap((section) => {
+    const options = section.names.flatMap((value): RoomNameOption[] => {
+      const start = query ? value.toLowerCase().indexOf(query) : -1
+      if (query && start < 0) return []
+      return [
+        {
+          kind: 'suggestion',
+          value,
+          match: start >= 0 ? { start, end: start + query.length } : null,
+        },
+      ]
+    })
+    return options.length ? [{ id: section.id, title: section.title, options }] : []
+  })
+  const known = sections.some((section) => section.names.includes(typed))
+  const typedRow: RoomNameOption | null =
+    query && !known ? { kind: 'typed', value: typed, match: null } : null
+  return {
+    typed: typedRow,
+    groups,
+    options: [...(typedRow ? [typedRow] : []), ...groups.flatMap((group) => group.options)],
+  }
+}

package/src/components/ui/panels/room-openings-field.tsx

@@ -0,0 +1,110 @@
+'use client'
+
+import { area, useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { useMemo } from 'react'
+import {
+  endFloorEdit,
+  finishFloorEdit,
+  roomSurfaceOpenings,
+  startFloorEdit,
+  useFloorEditSession,
+} from '../../../lib/floor-edit-session'
+import { type OpeningSurface, startOpeningDraft } from '../../../lib/floor-opening-draft'
+import { formatAreaLabel } from '../../../lib/measurements'
+import { pill } from './room-construction-rows'
+import { ShapeChoice } from './shape-choice'
+
+const count = (n: number) => `${n} ${n === 1 ? 'opening' : 'openings'}`
+
+/**
+ * A room's openings through its floor (or its ceiling), inside the row's
+ * settings. The floor has "Edit floor": a session that outlines the openings
+ * and lists them, with "Cut opening" to draw another — Rectangle or Polygon,
+ * picked before drawing. The ceiling cuts directly (its own shape editing is
+ * "Edit shape").
+ */
+export function RoomOpeningsField({
+  zoneId,
+  surface,
+}: {
+  zoneId: string
+  surface: OpeningSurface
+}) {
+  const nodes = useScene((scene) => scene.nodes)
+  const unit = useViewer((s) => s.unit)
+  const readOnly = useScene((scene) => scene.readOnly)
+  const openings = useMemo(
+    () => roomSurfaceOpenings(nodes, zoneId, surface),
+    [nodes, zoneId, surface],
+  )
+  const editing = useFloorEditSession((s) => surface === 'floor' && s.session?.zoneId === zoneId)
+  const cut = (
+    <ShapeChoice
+      data={`cut-opening-${surface}`}
+      disabled={readOnly}
+      label="Cut opening"
+      onPick={(shape) => startOpeningDraft(zoneId, surface, shape)}
+    />
+  )
+  if (surface === 'ceiling')
+    return (
+      <div className="flex flex-col gap-1" data-room-openings={surface}>
+        {openings.length > 0 && <span>{count(openings.length)}</span>}
+        {cut}
+      </div>
+    )
+  if (!editing)
+    return (
+      <div className="flex min-h-7 items-center justify-between gap-3" data-room-openings={surface}>
+        <span>{openings.length ? count(openings.length) : 'No openings'}</span>
+        <button
+          className={pill}
+          data-edit-floor
+          onClick={() => startFloorEdit(zoneId)}
+          type="button"
+        >
+          Edit floor
+        </button>
+      </div>
+    )
+  return (
+    <div className="flex flex-col gap-1.5" data-room-openings={surface} data-editing-floor>
+      {openings.length === 0 ? (
+        <p>No openings yet. Cut one for a stair void or a hatch.</p>
+      ) : (
+        openings.map((opening, index) => (
+          <button
+            className="flex items-center justify-between rounded-md px-2 py-1 text-left transition-colors hover:bg-accent"
+            data-floor-opening-row={opening.id}
+            key={opening.id}
+            onClick={() => useViewer.getState().setSelection({ selectedIds: [opening.id] })}
+            type="button"
+          >
+            <span className="text-foreground">
+              {opening.source === 'stair'
+                ? 'Stair opening'
+                : opening.source === 'elevator'
+                  ? 'Elevator opening'
+                  : `Opening ${index + 1}`}
+            </span>
+            <span className="font-mono tabular-nums">
+              {formatAreaLabel(area([{ outer: opening.polygon, holes: [] }]), unit, 2)}
+            </span>
+          </button>
+        ))
+      )}
+      {cut}
+      <div className="flex items-center justify-end gap-2">
+        <button
+          className={pill}
+          data-finish-floor-edit
+          onClick={() => (finishFloorEdit() ? undefined : endFloorEdit())}
+          type="button"
+        >
+          Done
+        </button>
+      </div>
+    </div>
+  )
+}