Skip to content

Comments

Add flip selection with H/V keyboard shortcuts#51

Open
Microck wants to merge 1 commit intomainfrom
feat/flip-selection
Open

Add flip selection with H/V keyboard shortcuts#51
Microck wants to merge 1 commit intomainfrom
feat/flip-selection

Conversation

@Microck
Copy link
Collaborator

@Microck Microck commented Feb 17, 2026

Description

Add keyboard shortcuts to flip rectangular selections horizontally (H key) or vertically (V key).

Type of Change

  • New feature (non-breaking change which adds functionality)

Changes Made

  • Add flipSelection() function in interaction-shortcuts.js
  • Wire H and V key handlers when selection is active
  • Update keyboard shortcuts modal to document new shortcuts

Testing

  • Tested in Firefox

Test Configuration:

  • OS: Windows 10
  • Browser: Firefox

Checklist

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have tested my changes thoroughly

Related Issues

N/A

@hingler
Copy link
Collaborator

hingler commented Feb 17, 2026

Ran into a bug while testing escape behavior: closePopup is not defined

That's my bad lol, forgot to update a couple func names :/

@Microck Microck force-pushed the feat/flip-selection branch from 0503305 to c8dbc6f Compare February 21, 2026 06:32
Copy link
Collaborator

@hingler hingler left a comment

Choose a reason for hiding this comment

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

LGTM, thanks for making those changes! I'd like to put a pin in the aforementioned comments but I'm fine committing this as-is

}
}
function flipSelection(horizontal) {
if (!rectSelection.active) return;
Copy link
Collaborator

Choose a reason for hiding this comment

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

Would we be OK throwing an error in this case? IDK what the defacto standard is for error handling on the web but I figure we should handle this more gracefully, as flipSelection should only be called when the rectSelection is already active.

const c = getFrameCanvas(rectSelection.L, rectSelection.F, rectSelection.key);
if (!c) return;
const ctx = c.getContext("2d", { willReadFrequently: true });
if (!ctx) return;
Copy link
Collaborator

Choose a reason for hiding this comment

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

Same here— not sure what would be best but i figure if c or ctx are null then we're encountering anomalous behavior which we want to log instead of returning silently to avoid a crash.


ctx.clearRect(rectSelection.x, rectSelection.y, rectSelection.w, rectSelection.h);

const flipped = ctx.createImageData(rectSelection.w, rectSelection.h);
Copy link
Collaborator

Choose a reason for hiding this comment

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

not "mission critical" but at a glance it seems like there should be some more optimal way to snapshot a region of the canvas, flip it, and write it back. Some combination of transformation operations on the dest canvas should work to accomplish the same, I think?

8: "eyedropper"
3: "line",
4: "rect",
5: "text",
Copy link
Collaborator

Choose a reason for hiding this comment

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

rect line and text aren't in yet, unless this is helping support another commit

return;
}
}
if (rectSelection.active && (e.key.toLowerCase() === "h" || e.key.toLowerCase() === "v")) {
Copy link
Collaborator

Choose a reason for hiding this comment

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

also not "mission-critical" but in the future we should maybe be factoring this "event handler" code into a different function.

const tag = e.target && e.target.tagName ? e.target.tagName.toUpperCase() : "";
if (tag !== "INPUT" && tag !== "TEXTAREA" && tag !== "SELECT") {
e.preventDefault();
gridEnabled = !gridEnabled;
Copy link
Collaborator

Choose a reason for hiding this comment

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

gridEnabled does not appear to be defined

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