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

Fix viewport bounds getting out of sync at times, like when toggling rulers

Browse Source
This commit is contained in:
Keavon Chambers
2024-07-28 05:42:27 -07:00
parent a4a513911d
commit 06177597ae
19 changed files with 124 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/panels/Document.svelte
+17 -21
View File
@@ -4,6 +4,7 @@
import type { DocumentState } from "@graphite/state-providers/document";
import { textInputCleanup } from "@graphite/utility-functions/keyboard-entry";
import { extractPixelData, rasterizeSVGCanvas } from "@graphite/utility-functions/rasterization";
import { updateBoundsOfViewports } from "@graphite/utility-functions/viewports";
import type { Editor } from "@graphite/wasm-communication/editor";
import {
type MouseCursorIcon,
@@ -12,7 +13,6 @@
DisplayEditableTextboxTransform,
DisplayRemoveEditableTextbox,
TriggerTextCommit,
TriggerViewportResize,
UpdateDocumentArtwork,
UpdateDocumentRulers,
UpdateDocumentScrollbars,
@@ -344,19 +344,6 @@
showTextInput = false;
}
// Resize elements to render the new viewport size
export function viewportResize() {
if (!viewport) return;
// Resize the canvas
canvasSvgWidth = Math.ceil(parseFloat(getComputedStyle(viewport).width));
canvasSvgHeight = Math.ceil(parseFloat(getComputedStyle(viewport).height));
// Resize the rulers
rulerHorizontal?.resize();
rulerVertical?.resize();
}
onMount(() => {
// Update rendered SVGs
editor.subscriptions.subscribeJsMessage(UpdateDocumentArtwork, async (data) => {
@@ -418,15 +405,24 @@
displayRemoveEditableTextbox();
});
// Resize elements to render the new viewport size
editor.subscriptions.subscribeJsMessage(TriggerViewportResize, async () => {
await tick();
viewportResize();
});
// Once this component is mounted, we want to resend the document bounds to the backend via the resize event handler which does that
window.dispatchEvent(new Event("resize"));
const viewportResizeObserver = new ResizeObserver(() => {
if (!viewport) return;
// Resize the canvas
canvasSvgWidth = Math.ceil(parseFloat(getComputedStyle(viewport).width));
canvasSvgHeight = Math.ceil(parseFloat(getComputedStyle(viewport).height));
// Resize the rulers
rulerHorizontal?.resize();
rulerVertical?.resize();
// Send the new bounds of the viewports to the backend
if (viewport.parentElement) updateBoundsOfViewports(editor, viewport.parentElement);
});
if (viewport) viewportResizeObserver.observe(viewport);
});
</script>
frontend/src/components/window/workspace/Workspace.svelte
-2
View File
@@ -78,8 +78,6 @@
panelSizes[nextSiblingName] = ((nextSiblingSize + mouseDelta) / totalResizingSpaceOccupied) * proportionBeingResized * 100;
panelSizes[prevSiblingName] = ((prevSiblingSize - mouseDelta) / totalResizingSpaceOccupied) * proportionBeingResized * 100;
window.dispatchEvent(new CustomEvent("resize"));
};
const cleanup = (e: PointerEvent) => {
frontend/src/io-managers/input.ts
+3 -15
View File
@@ -8,6 +8,7 @@ import { makeKeyboardModifiersBitfield, textInputCleanup, getLocalizedScanCode }
import { platformIsMac } from "@graphite/utility-functions/platform";
import { extractPixelData } from "@graphite/utility-functions/rasterization";
import { stripIndents } from "@graphite/utility-functions/strip-indents";
import { updateBoundsOfViewports } from "@graphite/utility-functions/viewports";
import { type Editor } from "@graphite/wasm-communication/editor";
import { TriggerPaste } from "@graphite/wasm-communication/messages";
@@ -29,7 +30,7 @@ export function createInputManager(editor: Editor, dialog: DialogState, portfoli
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const listeners: { target: EventListenerTarget; eventName: EventName; action: (event: any) => void; options?: AddEventListenerOptions }[] = [
{ target: window, eventName: "resize", action: () => onWindowResize(window.document.body) },
{ target: window, eventName: "resize", action: () => updateBoundsOfViewports(editor, window.document.body) },
{ target: window, eventName: "beforeunload", action: (e: BeforeUnloadEvent) => onBeforeUnload(e) },
{ target: window, eventName: "keyup", action: (e: KeyboardEvent) => onKeyUp(e) },
{ target: window, eventName: "keydown", action: (e: KeyboardEvent) => onKeyDown(e) },
@@ -240,19 +241,6 @@ export function createInputManager(editor: Editor, dialog: DialogState, portfoli
// Window events
function onWindowResize(container: HTMLElement) {
const viewports = Array.from(container.querySelectorAll("[data-viewport]"));
const boundsOfViewports = viewports.map((canvas) => {
const bounds = canvas.getBoundingClientRect();
return [bounds.left, bounds.top, bounds.right, bounds.bottom];
});
const flattened = boundsOfViewports.flat();
const data = Float64Array.from(flattened);
if (boundsOfViewports.length > 0) editor.handle.boundsOfViewports(data);
}
async function onBeforeUnload(e: BeforeUnloadEvent) {
const activeDocument = get(portfolio).documents[get(portfolio).activeDocumentIndex];
if (activeDocument && !activeDocument.isAutoSaved) editor.handle.triggerAutoSave(activeDocument.id);
@@ -390,7 +378,7 @@ export function createInputManager(editor: Editor, dialog: DialogState, portfoli
// Bind the event listeners
bindListeners();
// Resize on creation
onWindowResize(window.document.body);
updateBoundsOfViewports(editor, window.document.body);
// Return the destructor
return unbindListeners;
frontend/src/state-providers/document.ts
+4 -11
View File
@@ -5,7 +5,6 @@ import { type Editor } from "@graphite/wasm-communication/editor";
import {
defaultWidgetLayout,
patchWidgetLayout,
TriggerRefreshBoundsOfViewports,
UpdateDocumentBarLayout,
UpdateDocumentModeLayout,
UpdateToolOptionsLayout,
@@ -13,6 +12,7 @@ import {
UpdateWorkingColorsLayout,
UpdateNodeGraphBarLayout,
TriggerGraphViewOverlay,
TriggerDelayedZoomCanvasToFitAll,
} from "@graphite/wasm-communication/messages";
// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
@@ -83,16 +83,6 @@ export function createDocumentState(editor: Editor) {
});
});
// Other
editor.subscriptions.subscribeJsMessage(TriggerRefreshBoundsOfViewports, async () => {
// Wait to display the unpopulated document panel (missing: tools, options bar content, scrollbar positioning, and canvas)
await tick();
// Wait to display the populated document panel
await tick();
// Request a resize event so the viewport gets measured now that the canvas is populated and positioned correctly
window.dispatchEvent(new CustomEvent("resize"));
});
// Show or hide the graph view overlay
editor.subscriptions.subscribeJsMessage(TriggerGraphViewOverlay, (triggerGraphViewOverlay) => {
update((state) => {
@@ -100,6 +90,9 @@ export function createDocumentState(editor: Editor) {
return state;
});
});
editor.subscriptions.subscribeJsMessage(TriggerDelayedZoomCanvasToFitAll, () => {
setTimeout(() => editor.handle.zoomCanvasToFitAll(), 0);
});
return {
subscribe,
frontend/src/utility-functions/viewports.ts
+14
View File
@@ -0,0 +1,14 @@
import { type Editor } from "@graphite/wasm-communication/editor";
export function updateBoundsOfViewports(editor: Editor, container: HTMLElement) {
const viewports = Array.from(container.querySelectorAll("[data-viewport]"));
const boundsOfViewports = viewports.map((canvas) => {
const bounds = canvas.getBoundingClientRect();
return [bounds.left, bounds.top, bounds.right, bounds.bottom];
});
const flattened = boundsOfViewports.flat();
const data = Float64Array.from(flattened);
if (boundsOfViewports.length > 0) editor.handle.boundsOfViewports(data);
}
frontend/src/wasm-communication/messages.ts
+3 -6
View File
@@ -649,6 +649,8 @@ export class TriggerCopyToClipboardBlobUrl extends JsMessage {
readonly blobUrl!: string;
}
export class TriggerDelayedZoomCanvasToFitAll extends JsMessage {}
export class TriggerDownloadBlobUrl extends JsMessage {
readonly layerName!: string;
@@ -672,8 +674,6 @@ export class TriggerDownloadTextFile extends JsMessage {
readonly name!: string;
}
export class TriggerRefreshBoundsOfViewports extends JsMessage {}
export class TriggerRevokeBlobUrl extends JsMessage {
readonly url!: string;
}
@@ -782,8 +782,6 @@ export class TriggerAboutGraphiteLocalizedCommitDate extends JsMessage {
readonly commitDate!: string;
}
export class TriggerViewportResize extends JsMessage {}
// TODO: Eventually remove this (probably starting late 2024)
export class TriggerUpgradeDocumentToVectorManipulationFormat extends JsMessage {
readonly documentId!: bigint;
@@ -1428,6 +1426,7 @@ export const messageMakers: Record<string, MessageMaker> = {
DisplayRemoveEditableTextbox,
TriggerAboutGraphiteLocalizedCommitDate,
TriggerCopyToClipboardBlobUrl,
TriggerDelayedZoomCanvasToFitAll,
TriggerFetchAndOpenDocument,
TriggerDownloadBlobUrl,
TriggerDownloadImage,
@@ -1441,13 +1440,11 @@ export const messageMakers: Record<string, MessageMaker> = {
TriggerLoadPreferences,
TriggerOpenDocument,
TriggerPaste,
TriggerRefreshBoundsOfViewports,
TriggerRevokeBlobUrl,
TriggerSavePreferences,
TriggerTextCommit,
TriggerTextCopy,
TriggerUpgradeDocumentToVectorManipulationFormat,
TriggerViewportResize,
TriggerVisitLink,
UpdateActiveDocument,
UpdateBox,