Skip to content

Added Crumble Zoom+pan & scroll#1051

Open
DeDuckProject wants to merge 3 commits intoquantumlib:mainfrom
DeDuckProject:feature/crumble-scroll-zoom-pan
Open

Added Crumble Zoom+pan & scroll#1051
DeDuckProject wants to merge 3 commits intoquantumlib:mainfrom
DeDuckProject:feature/crumble-scroll-zoom-pan

Conversation

@DeDuckProject
Copy link
Copy Markdown
Contributor

@DeDuckProject DeDuckProject commented Apr 8, 2026

Added Crumble zoom,pan and scroll behaviour:

  • Added zoom/pan for qubit grid (left view)
  • Added vertical scroll for timeline (right) view
  • changed some "magic numbers" to consts (QUBIT_HIGHLIGHT_SIZE, MAX_QUBIT_COORDINATE)

zoom/pan/scroll feature demo

Closes #1040

+ Added vertical scroll for timeline (right) view
+ changed some "magic numbers" to consts (QUBIT_HIGHLIGHT_SIZE, MAX_QUBIT_COORDINATE)
@DeDuckProject DeDuckProject changed the title Added Zoom+pan for qubit grid (left view) Added Crumble Zoom+pan & scroll Apr 8, 2026
Copy link
Copy Markdown
Collaborator

@Strilanc Strilanc left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I really like this functionality, but want to tweak how it's triggered.

} finally {
ctx.restore();
}
return maxTimelineScrollY;
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's super counter-intuitive that the draw command would return maxTimelineScrollY. Provide an alternate route to get at it, like a getMaxTimelineScrollY method, and don't return it here.

Alternatively, declare a DrawSummary struct with a maxTimelineScrollY and return that. And update the docstring of this method to say it's returning that value.

* @param {!number} curMouseScreenY
*/
constructor(circuit, curLayer, focusedSet, timelineSet, curMouseX, curMouseY, mouseDownX, mouseDownY, boxHighlightPreview) {
constructor(circuit, curLayer, focusedSet, timelineSet, curMouseX, curMouseY, mouseDownX, mouseDownY, boxHighlightPreview, viewportX=0, viewportY=0, viewportZoom=1, timelineScrollY=0, curMouseScreenX=undefined, curMouseScreenY=undefined) {
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why are these new parameters defaulting to values, when the old ones weren't?

}

function handleQubitGridZoomPan(ev) {
if (ev.ctrlKey || ev.metaKey) {
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the control scheme should be the following:

  1. When you middle-click+drag on either of the views, dragging the mouse should pan. For the timeline view it might be best to keep the X panning locked... but there would be value in the user being able to indicate they want the current layer to be more to the left so they see further into the circuit.

  2. When you scroll the mouse wheel while hovering over the timeslice view, it should zoom around the mouse pointer. (Note you can efficiently pan by zooming out with the mouse in one position then zooming in with the mouse in a new position. This, plus the middle-dragging for panning, obsoletes the need for the modifier keys.)

  3. When you scroll the mouse wheel while hovering over the timeline view, it should scroll the list of qubits ...or zoom the list. I'm not sure. Scrolling makes sense from a "this is a list" perspective and zooming makes sense from "behave the same as the thing right next to you" perspective. Only way to tell would be to try it and see which felt better.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure, as for (1), using the middle click+drag does makes sense. Regarding whether the timeline X panning should be locked - the implementation is definitely simpler if we keep it locked, but I agree that allowing for X scroll is something that a user might want. I think I'll give it a go and see how it feels.

(2) that makes sense for the mouse. However, I think it would make using the touchpad (which is what I tested on) unintuitive. I'd argue that using the modifier key for zoom is a better compromise, but I'll give it some more thought tomorrow. What do you think?

(3) if we do decide to go for "scroll is zoom for timeslice" in (2) - then indeed it's not clear whether scrolling for scroll would feel natural here. I will say that with current implementation (scroll is pan) it does feel natural even though it only scrolls the Y axis at the moment.

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hm, I didn't consider using a touchpad. It would also make sense to consider pinch actions etc for users with touch screens on their laptops.

I'm fine with timeslice wheeling meaning to scroll rather than to zoom.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Currently pinch works on my touchpad, so I assume it should work similarly on a touch screen - but I'll check.

So to summarize, I think the approach would be:

  1. add middle click + drag to pan both panels; As for timeline - ideally we'll add X panning as well (if it's simple enough. We'll probably want to reset X when user moves between layers for focus.
  2. Leaving the modifier+scroll for zoom for mouse users; touchpad users can use modifier/pinch for zoom; regular scrolling just pans.
  3. since scroll is pan - timeline behaviour will stay the same and feel natural; There will be no zoom in timeline panel.

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.

Need for scroll / zoom in / zoom out features in Crumble

2 participants