Diagram - Parcel Sorter

#Route a sample batch

Seven fictional parcels carry destination marks A, B and C. Two diverters feed three collection bays and a reject pocket. Route batch runs the finite sample; Pause holds the current transfer and Step transfer completes one departure-to-arrival transfer. There is no operational integration.

1. Leave both diverters on Follow mark and Route batch. The finite sample finishes with seven delivered parcels: three in A, two in B and two in C.
2. Reset and block Bay A. Step once to bring Parcel 1 to the first diverter; Step again holds it there. Unblock A, then Step or Route batch to continue. Alternatively choose All onward, then Reject at the second diverter, to recover through the reject pocket.
3. Switch a gate using its scene button or named companion selector. First diverter cycles Follow mark, All to A and All onward. Second cycles Follow mark, All to B, All to C and Reject. Changes affect departures from that junction; they never reroute a parcel already on a conveyor segment.
4. Inspect any parcel by its destination-marked shape or Inspect parcel. The readout shows the original mark, current location, committed destination, holding recovery or final collection. Forced routing can collect a parcel in a different bay; the readout explicitly says its mark differs. Delivered counts physical collection, not destination correctness.
5. Each bay holds three parcels. All to A eventually holds a fourth arrival at the first diverter. Clear removes the collected parcels to the outgoing collection area and frees that bay, while preserving all delivery totals and parcel identities. Reset starts the original sample with empty, open bays and Follow mark gates.

All onward followed by Reject collects the complete seven-parcel sample in the reject pocket. Once every parcel has finished, Clear and reopen keep the batch complete; inspect the outcomes or Reset for another sample.

#Authored scene and host state

scene.ts owns the fixed equipment model: intake, two circular gate plates, three open collection trays, reject pocket and six straight public Diagram connectors. createDiagramScene supplies the public line segments; both transverse conveyor rollers and moving parcel positions use those same segments. These projected belts are inside Diagram.Viewport and share its normal world transform with genuine Diagram equipment and parcel nodes. There is no private renderer, DOM measurement adapter, substitute canvas or routing engine.

state.ts owns the seven original sample marks, locations, statuses, reserved route, diverter choices, block flags and physical occupancy. One parcel transfers at a time; later parcels wait in intake. A transfer is the departure-to-arrival movement of that parcel over one fixed connector, rather than a whole parcel journey. At intake it moves to the first junction. At the first junction Follow mark sends A to Bay A and B/C onward. At the second, Follow mark sends B/C to their bays and an onward A to Reject. Explicit gate choices override the mark. Collected parcels retain their original marks.

A bay is checked and reserved at departure from its feeding junction. A blocked or full bay holds the parcel at that junction and pauses the batch. Clearing, reopening or changing that junction's gate re-evaluates the holding condition but leaves the recovered parcel ready until Step or Route batch. A new block does not cancel a transfer already reserved; that parcel still arrives. Changing the first gate after a parcel has reached the second junction does not affect it. Occupancy and delivered/rejected/held/remaining counts derive from the same host state; Clear frees physical capacity without subtracting deliveries.

ParcelSorterDemo synchronizes each newer presentation with the public controlled store.synchronize(model, revision, transactionId) path. All stable parcel IDs survive progress, clearing and Reset. Public Session selection and manual viewport survive transfer updates. This presentation has no editing history: controlled synchronization clears history and no per-frame Undo entries are created. Equipment is fixed, editing constraints and shortcuts are disabled, and the page offers no geometry/history editor.

#Clock, Pause and reduced motion

SorterClock uses an injected scheduler and a single requestAnimationFrame callback. Each transfer lasts 850ms; it commits at departure and completes at the exact endpoint. The batch stops at completion or a holding junction. Pause cancels the callback and keeps normal playback's interpolated position; resuming completes the remaining transfer. Step pauses first and completes exactly the current transfer, or begins and completes one new transfer. There is no automatic replay or looping. Reset fences old callbacks and restores the complete original host state.

Reduced motion displays static transfer endpoints instead of traveling parcels, with the same order, destination reservations, holding conditions, next-action text and final counts. Step always provides static endpoint inspection. A media preference change pauses first. The visibility listener pauses when the model becomes hidden and requires explicit resume. Destruction removes visibility/media listeners, cancels the clock and disposes the Store; Diagram owns its Session/viewport lifecycle.

#Keyboard and dependencies

Tab reaches PrimeVue Button, Select and Checkbox controls. Select supports Arrow keys, Home/End, Enter and Escape; Checkbox uses Space. Completing a timed run or final Step moves focus to Reset only when its now-disabled action owned focus. Clear returns focus to that bay's Block checkbox only when Clear owned focus; other focused controls remain in place. Every scene diverter/blockage has a named keyboard companion. Canvas parcel selection has the named Inspect parcel equivalent. Scene controls stay out of the Tab sequence so zoom never forces users through tiny targets. Narrow screens start at 70% zoom around intake and the first diverter; pan to reach the second junction. Reset restores that readable view. Fit line restores the complete authored envelope; pan and zoom preserve route alignment.

Copy ParcelSorterDemo.vue with its _shared/parcel-sorter files. Keep state.ts, scene.ts, clock.ts, SorterFraming.vue, ParcelInspection.vue, ParcelButton.vue, SorterIcon.vue and styles.css together. The provider children read current selection and framing state through useDiagramContext(). Companion controls use PrimeVue Button, Select and Checkbox plus individual PrimeIcons Vue imports. The physical drawing uses inline content and requires no external artwork.

#Customize and limits

Change sample marks in MARKS, gate options/rules in nextPlace, bay capacity in CAPACITY, and transfer duration in TRANSFER_MS. Keep state.ts route identities and scene.ts connector identities consistent. Edit authored equipment bounds/connector endpoints in FIXTURE; public scene segments remain the single route geometry source. The shipped sample supports seven parcels and three collection slots per bay; larger fixtures require a deliberate intake/output layout and capacity design.

Customize equipment and parcel content through the Diagram.NodeDef templates in ParcelSorterDemo.vue, and adjust their presentation in local styles.css. Change the surrounding PrimeVue companion controls while retaining their first, second, block and inspect handlers so canvas and keyboard actions continue to use the same host state.

This is a finite in-memory illustration, with no real shipments, operational control, physics, collisions, persistence, backend, scheduling, external monitoring or workflow engine. Custom Vue symbols have no portable export-fidelity claim. Physical touch and native hidden-tab behavior require separate environment verification; deterministic lifecycle tests do not substitute for those checks. Related public guides: controlled state.