Skip to content

Enable canvas selection, rotation, and reversible manual positioning - #97

Merged
martin-raden merged 17 commits into
main-v2from
issue-74-canvas-interactions
Oct 7, 2026
Merged

martin-raden merged 17 commits into
main-v2from
issue-74-canvas-interactions

Conversation

@Alexander-Mitrofanov

@Alexander-Mitrofanov Alexander-Mitrofanov commented Oct 5, 2026 •

Copy link
Copy Markdown
Collaborator

Closes #74.

Nucleotides, numbering labels, and text labels can be dragged individually or together in both static and force layouts. Ctrl-click toggles selection; Ctrl-drag selects fully enclosed elements. Plain element clicks and Ctrl-clicks on the background clear selection. Ctrl-wheel rotates two or more selected elements around the pointer, while ordinary wheel zoom and background panning remain available.

A compact menu beside Crop counts manually positioned graph nodes and provides select-moved, reset-selection, and undo controls. Reset restores selected nodes to their pre-edit positions and fixation; Undo and Ctrl+Z/Command+Z reverse drags, rotation bursts, and resets. Text labels are excluded from the temporary node count and reset, while their moved positions and undo state update the existing model and share links.

The shared pointer handler accounts for zoom and rotation, cancels on disposal, and retains node edits only for the current rendering. SVG and PNG exports preserve the edited layout and omit selection feedback. Region/subsequence overlays follow static dragging, and force convergence cannot refit a manually adjusted layout. History is capped at 100 edits and clears on rerender or disposal.

Based on and targeting main-v2. Viewer/API documentation and regression coverage include mixed selections, click clearing, full rectangle containment, transformed dragging and rotation, reset/undo, text sharing, instance isolation, exports, and cancellation.

Validation:

  • Architecture and all 463 unit tests pass.
  • Native and standalone core browser contracts pass.
  • Chromium and Firefox UI suites, installed package, and help/citation checks pass.
  • All five visual fixtures match the unchanged baselines with zero changed pixels.

@martin-raden

Copy link
Copy Markdown
Member

@Alexander-Mitrofanov

thanks, please revise:

ui changes

  • clear selection also if
    • single click on selectable canvas element (even without drag but it is to be considered the as if initiating a drag)
    • CTRL+click on background without drag

fixation menu

currently, the user cannot undo (without a refresh of the page) the manual movements and fixations

  • add a new menu part right of the cropping slider (reduce the cropping slider width) for manual positioning information and buttons

first ideas for the menu: extend/change as you think appropriate but keep the menu small and compact

  • a text label that gives the current number of manually temporary moved elements (excluding text annotations)

  • a highlight button to highlight all manually defined elements counted (or make the button show the number so when clicking the number all respective nodes are selected)

  • a clear/reset button to reset the positioning of the current selection

    • button is greyed out and disabled if no node is selected
  • maybe provide an "undo" possibility via CTRL+Z

rotation of selected elements

for simple structural changes, rotation of the selection is needed

  • enable rotation of selected elements (if more than 1)
  • rotation center == mouse position
  • rotation is started and defined by CTRL+mousewheel (currently used for faster zoom in/out)

@Alexander-Mitrofanov Alexander-Mitrofanov changed the title Enable canvas selection and grouped dragging in both layouts Enable canvas selection, rotation, and reversible manual positioning Oct 5, 2026
@Alexander-Mitrofanov

Copy link
Copy Markdown
Collaborator Author

@martin-raden Updated in 9d6b04d:

  • Plain clicks on selectable elements and Ctrl-clicks on the background now clear selection. Dragging a selected member still moves the group.
  • Added compact Moved: N, Reset, and Undo controls to the right of the shortened Crop slider. The count excludes text annotations; clicking it selects all manually positioned nodes and numbering labels. Reset is disabled without selected manual nodes and restores their original positions and fixation.
  • Added Ctrl+Z / Command+Z while the canvas is focused. Undo covers drags, grouped wheel rotations, and resets, including text positions and anchors.
  • Ctrl+wheel rotates selections of two or more elements around the mouse position without zooming. Text remains upright, and text positions continue to round-trip through share links.

All 463 unit tests and the native/bundle, Chromium, Firefox, package, help, and visual checks pass. All five visual fixtures remain unchanged. The new GitHub CI jobs are queued waiting for a runner; they have not started yet.

@martin-raden

Copy link
Copy Markdown
Member

@Alexander-Mitrofanov

thanks, please revise:

  • the new "Moved #, Reset, Undo" menu is not visible nor active in Firefox (see screenshot) but works fine in MS Edge. Enable this functionality for Firefox too
grafik
  • beside the "CTRL+mouse" interactions (for linux and windows), also support "COMMAND+mouse" for macOS to make the tool usable on all full PC operating systems.

  • add an "?" info button after "Undo", which opens a dialog explains the selection, movement, rotation, reset and undo behaviour

  • reduce highlighting of a selected node to the node itself (currently also the attached backbone edge is part of the highlighting rectangle)

  • (I think since the recent commit) the canvas area has now a black outline/frame

  • add a "Release" button between "Moved" and "Reset" which reenables force field movement of the currently selected nodes starting from their current positions (instead of their original positions, as done by "Reset")

@martin-raden

martin-raden commented Oct 7, 2026 •

Copy link
Copy Markdown
Member

@Alexander-Mitrofanov

please fix:

  • in MS Edge: the new help dialog for the selection
    • is located in the upper left and takes almost the whole window width.
    • does not show the intended styling

see below

grafik

in Firefox styling and positioning (centered with limited width) is fine.

styling

  • in the selection help dialog, make the placeholder titles for "Moved", "Release", "Reset", "Undo" look the same as the respective buttons for simpler identification. keep the bold font style to make clear it is also a section title.

@martin-raden
martin-raden merged commit 56672d0 into main-v2 Oct 7, 2026
1 check passed
@martin-raden
martin-raden deleted the issue-74-canvas-interactions branch October 7, 2026 16:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants