Implement ruler bounds visualization for the AABB of selected layers (#4090)

* Implement ruler bounds visualization for the AABB of selected layers

* Code review fixes
This commit is contained in:
Keavon Chambers
2026-05-01 18:23:51 -07:00
committed by GitHub
parent eddd742f9b
commit 42f4c1396b
5 changed files with 127 additions and 37 deletions
@@ -47,6 +47,7 @@
let rulerTilt = 0;
let rulerFlip = false;
let rulerCursorPosition: { x: number; y: number } | undefined;
let rulerSelectionQuad: [number, number][] | undefined;
let viewportBounds: DOMRect | undefined;
// Rendered SVG viewport data
@@ -291,13 +292,14 @@
scrollbarMultiplier = { x: multiplier[0], y: multiplier[1] };
}
export function updateDocumentRulers(origin: [number, number], spacing: number, interval: number, visible: boolean, tilt: number, flip: boolean) {
export function updateDocumentRulers(origin: [number, number], spacing: number, interval: number, visible: boolean, tilt: number, flip: boolean, selectionQuad: [number, number][] | undefined) {
rulerOrigin = { x: origin[0], y: origin[1] };
rulerSpacing = spacing;
rulerInterval = interval;
rulersVisible = visible;
rulerTilt = tilt;
rulerFlip = flip;
rulerSelectionQuad = selectionQuad;
}
function updateRulerCursorPosition(e: PointerEvent) {
@@ -498,8 +500,8 @@
subscriptions.subscribeFrontendMessage("UpdateDocumentRulers", async (data) => {
await tick();
const { origin, spacing, interval, visible, tilt, flip } = data;
updateDocumentRulers(origin, spacing, interval, visible, tilt, flip);
const { origin, spacing, interval, visible, tilt, flip, selectionQuad } = data;
updateDocumentRulers(origin, spacing, interval, visible, tilt, flip, selectionQuad || undefined);
});
// Update mouse cursor icon
@@ -615,6 +617,7 @@
numberInterval={rulerInterval}
direction="Horizontal"
cursorPosition={rulerCursorPosition}
selectionQuad={rulerSelectionQuad}
bind:this={rulerHorizontal}
/>
</LayoutRow>
@@ -631,6 +634,7 @@
numberInterval={rulerInterval}
direction="Vertical"
cursorPosition={rulerCursorPosition}
selectionQuad={rulerSelectionQuad}
bind:this={rulerVertical}
/>
</LayoutCol>