alphard/Comfyui-LayerForge
1
0
Fork 0
mirror of https://github.com/Azornes/Comfyui-LayerForge.git synced 2026-03-21 20:52:12 -03:00
Code Issues Packages Projects Releases Wiki Activity

Center canvas viewport on fullscreen toggle

Browse Source 
Adds logic to adjust the canvas viewport to keep content centered when entering or exiting fullscreen mode. The adjustment calculates the difference in container sizes and updates the viewport position accordingly, improving user experience during fullscreen transitions.
This commit is contained in:
Dariusz L
2025-07-27 22:51:37 +02:00
parent 9e4e618955
commit 7701ceda56
2 changed files with 81 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
js/CanvasView.js
View File

@@ -734,7 +734,36 @@ async function createCanvasWidget(node, widget, app) {
let backdrop = null;
let originalParent = null;
let isEditorOpen = false;
/**
* Adjusts the viewport to keep the content centered when the container size changes.
* @param rectA The original rectangle.
* @param rectB The new rectangle.
* @param direction Determines whether to apply the adjustment for opening (-1) or closing (1).
*/
const adjustViewportForCentering = (rectA, rectB, direction) => {
if (!rectA || !rectB)
return;
const widthDiff = rectB.width - rectA.width;
const heightDiff = rectB.height - rectA.height;
const adjustX = (widthDiff / 2) / canvas.viewport.zoom;
const adjustY = (heightDiff / 2) / canvas.viewport.zoom;
canvas.viewport.x -= adjustX * direction;
canvas.viewport.y -= adjustY * direction;
const action = direction === 1 ? 'OPENING' : 'CLOSING';
log.info(`FULLSCREEN ${action} - Viewport adjusted for centering:`, {
widthDiff, heightDiff, adjustX, adjustY,
viewport_after: { x: canvas.viewport.x, y: canvas.viewport.y, zoom: canvas.viewport.zoom }
});
};
const closeEditor = () => {
// Get fullscreen rect BEFORE removing from DOM
const fullscreenRect = backdrop?.querySelector('.painter-modal-content')?.getBoundingClientRect();
const currentRect = originalParent?.getBoundingClientRect();
log.info(`FULLSCREEN CLOSING - Window sizes:`, {
current: { width: currentRect?.width, height: currentRect?.height },
fullscreen: { width: fullscreenRect?.width, height: fullscreenRect?.height },
viewport_before: { x: canvas.viewport.x, y: canvas.viewport.y, zoom: canvas.viewport.zoom }
});
if (originalParent && backdrop) {
originalParent.appendChild(mainContainer);
document.body.removeChild(backdrop);
@@ -745,6 +774,7 @@ async function createCanvasWidget(node, widget, app) {
// Remove ESC key listener when editor closes
document.removeEventListener('keydown', handleEscKey);
setTimeout(() => {
adjustViewportForCentering(currentRect, fullscreenRect, -1);
canvas.render();
if (node.onResize) {
node.onResize();
@@ -781,6 +811,9 @@ async function createCanvasWidget(node, widget, app) {
// Add ESC key listener when editor opens
document.addEventListener('keydown', handleEscKey);
setTimeout(() => {
const originalRect = originalParent.getBoundingClientRect();
const fullscreenRect = modalContent.getBoundingClientRect();
adjustViewportForCentering(originalRect, fullscreenRect, 1);
canvas.render();
if (node.onResize) {
node.onResize();