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

Add option to toggle ruler visibility (#1479)

Browse Source 
* Sending Toggle Ruler message and setting visibility. Text and markers not working

* Added resize on mount for Ruler Input

* Set default for rulers_visible to pass test

* Ruler Visibility portfolio wide instead of document

* Sending Toggle Ruler message and setting visibility. Text and markers not working

* Ruler Visibility portfolio wide instead of document

* Cleanup

* Reorganize the View menu bar; add toggle rulers hotkey

* Remove non-working redundant bools, and make rulers set per-document

---------

Co-authored-by: Keavon Chambers <keavon@keavon.com>
This commit is contained in:
Bijay Shrestha
2023-11-28 03:34:23 -08:00
committed by GitHub
co-authored by Keavon Chambers
parent 4fdf8410cf
commit 4fead6e7ec
9 changed files with 68 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/panels/Document.svelte
+15 -9
View File
@@ -57,6 +57,7 @@
let rulerOrigin: XY = { x: 0, y: 0 };
let rulerSpacing = 100;
let rulerInterval = 100;
let rulersVisible = true;
// Rendered SVG viewport data
let artworkSvg = "";
@@ -213,10 +214,11 @@
scrollbarMultiplier = multiplier;
}
export function updateDocumentRulers(origin: XY, spacing: number, interval: number) {
export function updateDocumentRulers(origin: XY, spacing: number, interval: number, visible: boolean) {
rulerOrigin = origin;
rulerSpacing = spacing;
rulerInterval = interval;
rulersVisible = visible;
}
// Update mouse cursor icon
@@ -371,8 +373,8 @@
editor.subscriptions.subscribeJsMessage(UpdateDocumentRulers, async (data) => {
await tick();
const { origin, spacing, interval } = data;
updateDocumentRulers(origin, spacing, interval);
const { origin, spacing, interval, visible } = data;
updateDocumentRulers(origin, spacing, interval, visible);
});
// Update mouse cursor icon
@@ -440,13 +442,17 @@
</LayoutCol>
</LayoutCol>
<LayoutCol class="table">
<LayoutRow class="ruler-or-scrollbar top-ruler">
<RulerInput origin={rulerOrigin.x} majorMarkSpacing={rulerSpacing} numberInterval={rulerInterval} direction="Horizontal" bind:this={rulerHorizontal} />
</LayoutRow>
{#if rulersVisible}
<LayoutRow class="ruler-or-scrollbar top-ruler">
<RulerInput origin={rulerOrigin.x} majorMarkSpacing={rulerSpacing} numberInterval={rulerInterval} direction="Horizontal" bind:this={rulerHorizontal} />
</LayoutRow>
{/if}
<LayoutRow class="viewport-container">
<LayoutCol class="ruler-or-scrollbar">
<RulerInput origin={rulerOrigin.y} majorMarkSpacing={rulerSpacing} numberInterval={rulerInterval} direction="Vertical" bind:this={rulerVertical} />
</LayoutCol>
{#if rulersVisible}
<LayoutCol class="ruler-or-scrollbar">
<RulerInput origin={rulerOrigin.y} majorMarkSpacing={rulerSpacing} numberInterval={rulerInterval} direction="Vertical" bind:this={rulerVertical} />
</LayoutCol>
{/if}
<LayoutCol class="viewport-container" styles={{ cursor: canvasCursor }}>
{#if cursorEyedropper}
<EyedropperPreview
frontend/src/components/widgets/inputs/RulerInput.svelte
+4
View File
@@ -3,6 +3,8 @@
</script>
<script lang="ts">
import { onMount } from "svelte";
const RULER_THICKNESS = 16;
const MAJOR_MARK_THICKNESS = 16;
const MEDIUM_MARK_THICKNESS = 6;
@@ -96,6 +98,8 @@
const remainder = n % m;
return Math.floor(remainder >= 0 ? remainder : remainder + m);
}
onMount(resize);
</script>
<div class={`ruler-input ${direction.toLowerCase()}`} bind:this={rulerInput}>