elementari icon indicating copy to clipboard operation
elementari copied to clipboard

Move/remove/add structure sites

Open janosh opened this issue 6 months ago • 1 comments

closes #138

Summary by CodeRabbit

  • New Features
    • Introduced Edit Atoms mode with transform controls for moving, adding (A), and deleting (Delete/Backspace) atoms.
    • Added Undo/Redo history with buttons and Ctrl/Cmd+Z / Ctrl/Cmd+Y shortcuts.
    • Live XYZ/ABC coordinate HUD during drags.
    • New Undo and Redo icons in the icon set.
  • UI/UX
    • Mode selector now includes “Edit Atoms”; selection handling supports multi-select (Shift+Click) and centroid-based transforms.
  • Accessibility
    • Improved focus, role, and keyboard handling for the structure editor.
  • Tests
    • Extensive end-to-end coverage for edit mode, selection, transforms, and undo/redo.

janosh avatar Sep 06 '25 17:09 janosh

Walkthrough

Adds Undo/Redo icons. Introduces edit mode with atom add/move/delete, selection, TransformControls integration, and undo/redo history in structure components. Expands StructureScene public props and measure_mode. Adds extensive Playwright tests for edit-mode interactions, selection behavior, keyboard shortcuts, and UI state.

Changes

Cohort / File(s) Summary
Icons update
src/lib/icons.ts
Added Undo and Redo entries to icon_data (viewBox/path). IconName now includes 'Undo' and 'Redo'.
Structure editing + history
src/lib/structure/Structure.svelte, src/lib/structure/StructureScene.svelte
Added edit mode to measure_mode. Implemented undo/redo history with batching for continuous ops. Integrated TransformControls for atom editing, multi-select, HUD coordinates, add/delete atoms, and lifecycle hooks (on_operation_start, on_operation_end, on_atom_move). Added types and props (original_atom_count). Selection, rendering, and event handling updated (including image atoms).
Playwright tests for edit mode
tests/playwright/structure/structure-scene.test.ts, tests/playwright/structure/structure.test.ts
New test suites validating edit-mode UI/UX: selection, multi-select, transform controls, live coordinates, keyboard shortcuts (undo/redo, add/delete), mode transitions, image atoms behavior, and console error checks.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  participant U as User
  participant S as Structure (Svelte)
  participant SS as StructureScene (Svelte)
  participant H as History (in Structure)

  rect rgba(225,240,255,0.5)
  note over U,S: Enter Edit Mode
  U->>S: Select "Edit"
  S->>SS: set measure_mode = 'edit'
  end

  rect rgba(235,255,235,0.5)
  note over U,SS: Start operation (drag/add/delete)
  U->>SS: Select atom(s) / drag / press A / Delete
  SS-->>S: on_operation_start()
  S->>H: pre-save if needed
  SS->>S: on_atom_move(event {site_idx/new_position/...})
  S->>H: save post-change (batched if continuous)
  SS-->>S: on_operation_end()
  end

  rect rgba(255,245,225,0.5)
  note over U,H: Undo / Redo
  U->>S: Ctrl/Cmd+Z / Ctrl/Cmd+Y or buttons
  S->>H: undo()/redo()
  H-->>S: restore structure snapshot
  S->>SS: re-render with updated structure
  end
sequenceDiagram
  autonumber
  participant U as User
  participant SS as StructureScene
  participant S as Structure

  U->>SS: Drag multiple selected atoms
  SS-->>S: on_operation_start()
  loop during drag
    SS->>S: on_atom_move({ batched positions, new_abc? })
  end
  SS-->>S: on_operation_end()
  S->>S: save_to_history (once per continuous op)

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60–90 minutes

Possibly related PRs

  • janosh/matterviz#85 — Also modifies src/lib/icons.ts icon_data; overlaps with icon set evolution.

Suggested labels

structure, enhancement, ux

Poem

I nudged an atom—hop, a tiny shove—
Undo, redo, like pawprints in a grove.
I shift, I add, I sometimes delete,
A lattice waltz beneath my feet.
With gentle clicks I sculpt the view—
Carrot-shortcuts: Z, then Y—brand new! 🥕✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)
Check name Status Explanation Resolution
Out of Scope Changes Check ⚠️ Warning The pull request includes extensive undo/redo history infrastructure, new Undo/Redo icons, keyboard shortcuts, and related UI and API changes that fall outside the original scope of interactive add, move, and delete atom functionality defined in issue #138. Consider extracting the undo/redo history system with its icon assets and keyboard shortcuts into a separate feature request or PR and limit this changeset to just the add, move, and delete atom interactions specified by issue #138, or otherwise update the linked issue to cover the additional undo/redo capabilities.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check ✅ Passed The pull request title succinctly captures the core functionality of adding, moving, and removing structure sites, matching the changeset’s focus on interactive atom editing within the structure editor.
Linked Issues Check ✅ Passed The pull request fully implements the interactive add, move, and delete site functionality defined in issue #138 by providing UI controls and keyboard shortcuts for atom addition, movement, and deletion in edit mode, emitting on_atom_move events and updating the structure accordingly.
Docstring Coverage ✅ Passed No functions found in the changes. Docstring coverage check skipped.
✨ Finishing touches
  • [ ] 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • [ ] Create PR with unit tests
  • [ ] Post copyable unit tests in a comment
  • [ ] Commit unit tests in branch edit-structure

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

coderabbitai[bot] avatar Sep 06 '25 17:09 coderabbitai[bot]