fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-10-01 19:58:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

Improve viewport rulers by tilting tick marks to align with tilted documents (#3844)

Browse Source 
* Add support for tilted rulers

* Fix Ruler Text

* Address PR review

* Fix per review

* Code review

---------

Co-authored-by: Keavon Chambers <keavon@keavon.com>
This commit is contained in:
Kulcode
2026-05-01 17:01:43 +00:00
committed by Timon
co-authored by Keavon Chambers
parent 4474de4662
commit 4c1974c200
4 changed files with 116 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/panels/Document.svelte
+23 -5
View File
@@ -44,6 +44,7 @@
let rulerSpacing = 100;
let rulerInterval = 100;
let rulersVisible = true;
let rulerTilt = 0;
// Rendered SVG viewport data
let artworkSvg = "";
@@ -287,11 +288,12 @@
scrollbarMultiplier = { x: multiplier[0], y: multiplier[1] };
}
export function updateDocumentRulers(origin: [number, number], spacing: number, interval: number, visible: boolean) {
export function updateDocumentRulers(origin: [number, number], spacing: number, interval: number, visible: boolean, tilt: number) {
rulerOrigin = { x: origin[0], y: origin[1] };
rulerSpacing = spacing;
rulerInterval = interval;
rulersVisible = visible;
rulerTilt = tilt;
}
// Update mouse cursor icon
@@ -487,8 +489,8 @@
subscriptions.subscribeFrontendMessage("UpdateDocumentRulers", async (data) => {
await tick();
const { origin, spacing, interval, visible } = data;
updateDocumentRulers(origin, spacing, interval, visible);
const { origin, spacing, interval, visible, tilt } = data;
updateDocumentRulers(origin, spacing, interval, visible, tilt);
});
// Update mouse cursor icon
@@ -595,13 +597,29 @@
{#if rulersVisible}
<LayoutRow class="ruler-or-scrollbar top-ruler">
<LayoutCol class="ruler-corner"></LayoutCol>
<RulerInput origin={rulerOrigin.x} majorMarkSpacing={rulerSpacing} numberInterval={rulerInterval} direction="Horizontal" bind:this={rulerHorizontal} />
<RulerInput
originX={rulerOrigin.x}
originY={rulerOrigin.y}
tilt={rulerTilt}
majorMarkSpacing={rulerSpacing}
numberInterval={rulerInterval}
direction="Horizontal"
bind:this={rulerHorizontal}
/>
</LayoutRow>
{/if}
<LayoutRow class="viewport-container-inner-1">
{#if rulersVisible}
<LayoutCol class="ruler-or-scrollbar">
<RulerInput origin={rulerOrigin.y} majorMarkSpacing={rulerSpacing} numberInterval={rulerInterval} direction="Vertical" bind:this={rulerVertical} />
<RulerInput
originX={rulerOrigin.x}
originY={rulerOrigin.y}
tilt={rulerTilt}
majorMarkSpacing={rulerSpacing}
numberInterval={rulerInterval}
direction="Vertical"
bind:this={rulerVertical}
/>
</LayoutCol>
{/if}
<LayoutCol class="viewport-container-inner-2" styles={{ cursor: canvasCursor }} data-viewport-container>