Diagram - Device Teardown

#Explore an original tablet

This fictional tablet starts assembled, with a slim bezel around a full-size display. The ten components include a rear cover, battery pack, chassis rail, logic board, front camera, USB-C connector, adhesive seal, touchscreen, cover glass and front bezel. The geometric parts form an original unitless 2D illustration, with no real device measurements or hardware access. Separate parts places them in an authored layout; Assemble device brings them together again.

1. Choose Separate parts to see the ten parts and their attached callouts. Pause holds the current placement; Resume continues it. Assemble device or Separate parts can reverse an unfinished transition from its current positions.
2. Choose a part in the drawing or numbered outline. Selection leaves the surrounding parts visible and opens a short description directly below the canvas. Click the same part again, choose Clear above the canvas, or press Escape to clear the selection. Isolate part is an explicit action. In isolation, Fit part pauses any ongoing transition and enlarges even the small camera module for inspection. Show all parts restores the surrounding device while retaining selection; after Fit part, it also restores the previous camera. Clear, Escape or selecting another part restores that camera too.
3. Turn Front bezel or Rear cover off to look inside. Their identities remain in the outline with a Hidden badge. Inspecting hidden housing keeps the other parts visible, disables Isolate part and offers Reveal layer. Hiding an isolated housing part also exits isolation.
4. Choose Assembly steps to start with every part separated. Each Step assembly installs one part, in outline order, from rear cover through front bezel. The installed count and next-part guidance stop after ten steps. Assemble device returns all placements directly to the assembled arrangement through the same bounded transition.
5. Pan and zoom or choose Fit parts to inspect the whole exploded layout. Fit device frames the assembled envelope. Separate parts and Assembly steps frame all placements; Assemble device frames the tablet. These arrangement actions exit isolation and retain the selected identity. Inspection, housing changes, Pause and Resume preserve manual navigation. Reset restores assembled placements, both housing layers, no selection, collapsed detail and the initial framing.

#Model, Session and host ownership

fixture.ts defines the ten stable part identities, names, roles and assembled/exploded bounds. scene.ts creates ten genuine public Diagram groups. Each group owns a child part with a public embedded rectangular symbol body, so the custom hardware drawing is not clipped by ordinary card corner rounding. It also owns an attached straight connector sourced from that part's unique bottom-center port. Public createDiagramScene supplies the callout endpoints; the callout SVG is in the normal viewport world and follows the same transform as the genuine nodes. Transparent frame nodes provide explicit fit envelopes. There is no private renderer, runtime DOM geometry adapter or substitute canvas.

TeardownClock owns placement amounts, arrangement mode, installed step, selected identity, isolation and housing flags. DeviceTeardownDemo derives the detail from the selected identity and owns focus restoration, media/visibility listeners and feedback. Each published presentation passes through public controlled store.synchronize(model, revision, transactionId). Group, child, connector, layer and port identities stay stable. Housing and isolation alter layer visibility rather than deleting parts.

Diagram Session owns selection, focus and manual navigation. Host selection also retains the chosen identity when its layer is hidden. Controlled updates preserve navigation and visible selection; a hidden selected part may leave Session selection while its host identity and detail remain available. Editing constraints and shortcuts are disabled. Controlled synchronization creates no per-frame saved Undo history; this page offers no geometry editor or Undo action. Reset clears the host view and public Session selection/focus, then reframes the camera.

#Motion and lifecycle

A full assembled-to-exploded transition lasts 650ms. The single scheduled callback interpolates each part's position and dimensions with a bounded ease, then commits exact endpoint amounts. Reversing samples the current placement and scales duration to the remaining distance. Pause cancels the callback and retains that placement; Resume finishes the remaining distance. Callouts appear when a part reaches at least 99% of its separated placement, where the labels can be read without overlap. Assembly steps are explicit static placements, with no automatic stepping, autoplay, looping or physics.

Reduced motion applies exact assembled/exploded endpoints immediately and schedules no traveling frames. The ten-step installation order remains available. Changing the media preference pauses the current transition first. Hiding the model pauses and requires explicit Resume. Reset fences old callbacks. Destruction cancels the clock, removes media/visibility listeners and disposes the Store; Diagram manages its own Session/viewport lifecycle.

#Keyboard and copied source

Tab reaches the PrimeVue buttons, housing checkboxes and numbered outline. Enter or Space activates buttons; Space toggles a checkbox. The outline provides a named keyboard equivalent for every drawing part, so canvas targets stay outside the Tab sequence. Keyboard inspection keeps focus in the numbered outline. Escape anywhere in the example clears inspection. Clear or Escape from a drawing/inspection control returns focus to the matching outline item. Revealing hidden housing moves focus to Isolate part after it becomes enabled, only when the disappearing Reveal layer button owned focus; a surviving checkbox keeps focus. The final Step and a completed transition move focus to Assemble device only if the action that became disabled owned focus; other controls retain their focus.

Both wide and narrow views initially frame the portrait tablet at a readable size. Separate parts frames the complete layout; Fit parts, Fit device, zoom and pan remain available. Full names wrap in the outline and detail. The inspection controls sit above the canvas, and the part description sits immediately below it, ahead of the outline. Neither covers the drawing.

Copy DeviceTeardownDemo.vue and every helper in its source tabs, including the shared export controls. Place the helpers under your @/ alias using the paths shown on the tabs. The provider children read selection and framing state through useDiagramContext(). Surrounding controls use PrimeVue Button and Checkbox plus individual PrimeIcons Vue components. Keep the active PrimeVue theme and Diagram styling. The home screen is illustrative, not a set of interactive apps. Screen, enclosure and board text use theme-aware foregrounds matched to their material; the dark chip keeps a light marking in both themes. Inline SVG supplies the artwork. There are no external images, fonts, private showcase helpers or extra rendering libraries. The spec is test-only and excluded from Copy.

#Customize and limits

Edit PARTS in fixture.ts to change names, roles or placements. Keep stable IDs, unique layer/port identities and group-child relationships consistent in deviceDocument. The PARTS order defines assembly order; visiblePart defines housing/isolation rules. inspectPart implements non-isolating selection and repeat-click clearing; isolatePart refuses hidden or missing selections. Change TRANSITION_MS or the easing in clock.ts for timing. Adjust the Diagram.NodeDef SVG content for node content and the callout projection for short labels. Local styles inherit semantic surface, text and primary tokens.

Replace the surrounding controls while retaining the view, choose, housing, startAssembly, stepAssembly, toggleIsolation, fitPart, clearSelection and reset handlers so drawing and keyboard actions share the same host state. Expand the fixture only with a deliberate layout, fit envelope, assembly sequence and label plan.

This is a finite in-memory educational illustration. It provides no CAD/3D engine, WebGL, dimensions, material model, mechanical simulation, device control, real telemetry, clinical interpretation, persistence or backend. Custom Vue/SVG node content has 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: groups and containers, geometry and measurement and controlled state.