Diagram - Aircraft Cabin

#Choose seats in an aircraft

Aster 120 is an original, fictional single-aisle cabin. Choose a cabin section to enlarge its seats, or a named row for a close view.

1. Choose Forward in Cabin section. Its eight rows enlarge. On a narrow screen, the first row is centered at a readable size; Show row reaches every other row. Full aircraft restores the complete orientation view.
2. Keep Mira active and choose Row 2. Click seat 2A, or select it in Choose seat and press Review seat. A PrimeVue dialog shows Mira, seat 2A, its window position and illustrative $15.00 fee. Cancel, Close or Escape leaves assignments unchanged. Confirm seat saves it; the seat and party strip now show MV / 2A. Continue with Choose seat for Owen or return to the cabin.
3. Activate Owen and try 2A. The visible message explains that it belongs to Mira, and both assignments and the total remain unchanged. Try 2D for the unavailable case, then review and confirm 2B. The exact party total is $25.00.
4. Activate Mira and review 3A. The dialog names the seat being replaced and the resulting party total. Confirm to release 2A; cancel to keep it. Choosing a passenger with an existing assignment selects and centers that seat's row. Switching passengers preserves every other assignment.
5. Choose Window, Aisle or Extra space. Nonmatching canvas seats fade and named seat choices filter. Existing assignments remain. A nonmatching pointer choice explains how to choose another seat or return to Any seat.
6. Choose Find seats together. The sample finds adjacent seats on one side of one row in the current section and shows the group and its fee before applying. Review group opens one dialog listing every passenger, seat and fee. Confirm seats moves the whole party atomically; cancel keeps the previous seats. Four passengers cannot occupy a three-seat side together; the message offers individual selection. A two-person Window or Aisle preference likewise has no adjacent matching group.
7. Unassign releases the active passenger's seat. Clear all releases the whole party and keeps the current party, preference and navigation. Reset cabin restores two passengers, Mira active, Any seat, empty assignments and the full-aircraft view.

#Diagram and application ownership

The aircraft is a locked Diagram frame. Its original cabin outline, cockpit, windows, aisle, exits and service geometry render through a custom node template. All 120 seats are genuine fixed Diagram symbol nodes, created with the public createDiagramSymbolNode API and an original DiagramSymbolRegistry definition. The two sections contain 48 and 72 seats respectively. There is no separate canvas or DOM geometry adapter.

One managed Store owns the model's IDs, layers, geometry and symbol references. The public Session owns selection, focus, pan, zoom, Fit and Reveal. Per-node editing constraints prohibit movement, resize, rotation, deletion, duplication, connection, ports and content edits. The demo does not offer model history actions.

The host owns one immutable passenger-to-seat assignment map. Initials, strip IDs, fee totals, conflicts and seat ownership all derive from that map. Selecting or focusing a seat is inspection; it never creates a second basket. Assignments and preferences do not mutate the Diagram model or add Undo entries. Named seat selection alone inspects; Review seat and pointer seat buttons both open a proposal in a PrimeVue Dialog. Only confirmation saves new seat assignments, after revalidating the party, preference and previous assignments against the reviewed snapshot. A stale review rejects with recovery copy rather than applying an unreviewed seat or total. The dialog has a separate confirmed state, with a next-passenger action or Done. Public Session selection/focus remains inspection; it does not commit a booking.

Availability, positions, row groups and fees are static fixture data. Passenger count uses the first one to four fictional names; shrinking the party releases removed passengers' seats. A together suggestion is invalidated by passenger, section, row, preference or assignment changes and checked again before review and confirmation. The search may reuse the current party's own seats while atomically replacing its assignments. It never crosses an aisle, row or section.

#Exact illustrative fees

Fees use integer USD minor units throughout selection and summation. Formatting converts the final integer to dollars. Forward adds 1000 units; Main adds zero. Window adds 500, aisle adds 300 and middle adds zero. Extra-space rows 1 and 9 add 1800. These are demonstration values, not an airline price or eligibility policy.

For example, 2A costs 1500 units and 2B costs 1000, totaling 2500 ($25.00). 1D plus 1E costs 5900 ($59.00). No floating-point dollars are accumulated.

#Copy and customize

Copy AircraftCabinDemo.vue with its local _shared/aircraft-cabin files, including CabinNavigation.vue, CabinIcon.vue, fixture.ts, assignments.ts and styles.css. The navigation child reads current Diagram state through useDiagramContext() beneath the root. Retain those relative imports or update them together. The surrounding controls use PrimeVue Button, Select and Dialog, with individual PrimeIcons Vue imports. Load the application styles from Setup; the aircraft artwork is inline vector content.

Change SEAT_SYMBOL to author another seat silhouette. Change row placement, sections, unavailable IDs, extra-space flags or integer fee attributes in fixture.ts; keep unique model IDs and the same public symbol registry setup. Change PASSENGERS for other fictional labels. assignments.ts holds the pure one-to-one validation, preference predicate, adjacent-group search, review/confirm validation and fee functions. Adjust those explicitly when introducing a different seating pattern. The main custom-node template renders the original vector paths from fixture.ts. Its longer, smoothly rounded nose and shorter rounded rear frame the fixed cabin in a compact seat-map outline. The drawing has no projecting wings or tail fins. AIRCRAFT_BOUNDS defines both the public Diagram frame and SVG viewBox. When changing the silhouette, keep those bounds aligned and large enough for every contour, and keep all seats and service areas inside the body.

#Keyboard, navigation and lifecycle

Named Party size, Cabin section, Show row and Seat preference controls use standard PrimeVue keyboard behavior. Open a choice, use arrows or Home/End, and Enter to select; Escape dismisses it. Choose seat and Review seat provide the keyboard equivalent of the pointer seat buttons. The 120 canvas seat buttons are removed from the tab sequence to keep the surrounding controls reachable. Unavailable seats remain inspectable and reject with visible recovery copy. The modal traps focus, has a named heading and supports Escape, Cancel and Close. Cancel returns focus to the review trigger. After confirming a group, its removed review trigger falls back to Find seats together. Continuing to an unseated passenger focuses that passenger in the strip. Closing a confirmed review keeps the saved assignments.

Passenger buttons expose their active state and current seat in their accessible name. Seat names include ID, position, extra-space flag, fee and owner/availability. One polite live region announces actions and rejection; it does not depend on pan or zoom frames. Meaning uses IDs, initials and text as well as semantic colors.

Full-aircraft overview deliberately favors orientation; choose a section or row for readable IDs. Wide section views fit their seats; narrow section views center the first row. The navigation toolbar occupies a reserved gutter below the seat viewport, keeping the enlarged bottom seats clear. Manual pan and zoom remain where the visitor leaves them until an explicit framing action or an assigned-passenger reveal. Preferences and assignment IDs survive all navigation. The drawing and assignment changes are immediate: there is no playback clock or motion-dependent outcome. On destruction, the host Store is disposed and Diagram cleans up its Session and observers. Returning to this route creates a fresh empty party.

#Scope and related APIs

This is a synthetic, finite in-memory selection example. Its booking-style confirmation is local demonstration state, with no actual reservation, checkout, purchase, persistence, inventory service, operational passenger data or airline-specific safety/eligibility interpretation. It does not claim a physical cabin certification or a performance benchmark. Very small overview seats are for orientation; the named row controls supply the close view.

See symbols, navigation, editing, templates and theming for the underlying public contracts.