From 7e25976c239d650532e08a2ec38fb255ee94ef15 Mon Sep 17 00:00:00 2001 From: anth0nycodes Date: Sun, 8 Mar 2026 00:14:29 -0500 Subject: [PATCH 1/9] fix: canvas dimensions WIP --- src/components/canvas.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/components/canvas.tsx b/src/components/canvas.tsx index 40153a5..ece561c 100644 --- a/src/components/canvas.tsx +++ b/src/components/canvas.tsx @@ -51,7 +51,15 @@ export function Canvas({ currentTool }: CanvasProps) { const initCanvasDimensions = () => setupCanvas(fc); initCanvasDimensions(); - window.addEventListener("resize", initCanvasDimensions); + let resizeTimeout: number; + + const resizeObserver = new ResizeObserver(() => { + clearTimeout(resizeTimeout); + resizeTimeout = setTimeout(() => initCanvasDimensions(), 50); // debounce to prevent rapid calls + }); + + resizeObserver.observe(document.documentElement); + resizeObserver.observe(document.body); // Make all created paths erasable fc.on("object:added", (e) => { @@ -62,7 +70,7 @@ export function Canvas({ currentTool }: CanvasProps) { return () => { fc.dispose(); - window.removeEventListener("resize", initCanvasDimensions); + resizeObserver.disconnect(); }; }, []); From 5cbf15ee723de8ceff06342a190892d4934e35c0 Mon Sep 17 00:00:00 2001 From: anth0nycodes Date: Sun, 8 Mar 2026 23:53:11 -0400 Subject: [PATCH 2/9] wip --- src/components/canvas.tsx | 50 +++++++++++++++++++++++++++++---------- 1 file changed, 37 insertions(+), 13 deletions(-) diff --git a/src/components/canvas.tsx b/src/components/canvas.tsx index ece561c..0527957 100644 --- a/src/components/canvas.tsx +++ b/src/components/canvas.tsx @@ -8,21 +8,39 @@ import { useEraserPopover } from "@/context/eraser-popover/use-eraser-popover"; import { usePencilPopover } from "@/context/pencil-popover/use-pencil-popover"; import { getOS } from "@/lib/helpers"; -function setupCanvas(fc: FabricCanvas) { - // Get the full document dimensions +const EXPANSION_INCREMENT = 500; + +function updateCanvasWidth(fc: FabricCanvas) { const contentWidth = Math.max( document.documentElement.clientWidth, document.body.clientWidth ); + + fc.setDimensions({ width: contentWidth }); +} + +// TODO: fix vertical overflow caused by canvas increment logic +function updateCanvasHeight(fc: FabricCanvas) { const contentHeight = Math.max( document.documentElement.clientHeight, document.body.clientHeight ); + const viewportHeight = window.innerHeight; + const scrollReachY = window.scrollY + viewportHeight; + const currentHeight = fc.getHeight(); + console.log("Current canvas height:", currentHeight); - fc.setDimensions({ - width: contentWidth, - height: contentHeight, - }); + let newHeight = currentHeight || viewportHeight; + + while (newHeight < scrollReachY) { + newHeight += EXPANSION_INCREMENT; + } + + if (newHeight > currentHeight) { + fc.setDimensions({ + height: Math.max(contentHeight, newHeight), + }); + } } interface CanvasProps { @@ -48,18 +66,24 @@ export function Canvas({ currentTool }: CanvasProps) { fcRef.current = fc; - const initCanvasDimensions = () => setupCanvas(fc); - initCanvasDimensions(); + const handleResize = () => { + updateCanvasWidth(fc); + updateCanvasHeight(fc); + }; + + const handleScroll = () => updateCanvasHeight(fc); + handleResize(); // Initial sizing let resizeTimeout: number; const resizeObserver = new ResizeObserver(() => { clearTimeout(resizeTimeout); - resizeTimeout = setTimeout(() => initCanvasDimensions(), 50); // debounce to prevent rapid calls + resizeTimeout = setTimeout(handleResize, 50); // debounce to prevent rapid calls }); resizeObserver.observe(document.documentElement); resizeObserver.observe(document.body); + window.addEventListener("scroll", handleScroll); // Make all created paths erasable fc.on("object:added", (e) => { @@ -71,6 +95,7 @@ export function Canvas({ currentTool }: CanvasProps) { return () => { fc.dispose(); resizeObserver.disconnect(); + window.removeEventListener("scroll", handleScroll); }; }, []); @@ -196,9 +221,8 @@ export function Canvas({ currentTool }: CanvasProps) { }, []); return ( - +
+ +
); } From e181bdf03b782123a6adec87260fe13456c3ca6f Mon Sep 17 00:00:00 2001 From: anth0nycodes Date: Mon, 9 Mar 2026 00:06:48 -0400 Subject: [PATCH 3/9] add comments --- src/components/canvas.tsx | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/src/components/canvas.tsx b/src/components/canvas.tsx index 0527957..a14c2f9 100644 --- a/src/components/canvas.tsx +++ b/src/components/canvas.tsx @@ -26,19 +26,20 @@ function updateCanvasHeight(fc: FabricCanvas) { document.body.clientHeight ); const viewportHeight = window.innerHeight; - const scrollReachY = window.scrollY + viewportHeight; const currentHeight = fc.getHeight(); - console.log("Current canvas height:", currentHeight); + let newCanvasHeight = currentHeight || viewportHeight; - let newHeight = currentHeight || viewportHeight; + // total distance from top of page to bottom of visible screen + const scrollReachY = window.scrollY + viewportHeight; - while (newHeight < scrollReachY) { - newHeight += EXPANSION_INCREMENT; + // expand until canvas covers bottom of visible screen + while (newCanvasHeight < scrollReachY) { + newCanvasHeight += EXPANSION_INCREMENT; } - if (newHeight > currentHeight) { + if (newCanvasHeight > currentHeight) { fc.setDimensions({ - height: Math.max(contentHeight, newHeight), + height: Math.max(contentHeight, newCanvasHeight), }); } } From 94dc27de2dd6e2617378d28fb4510e9a91613b33 Mon Sep 17 00:00:00 2001 From: anth0nycodes Date: Mon, 9 Mar 2026 00:30:12 -0400 Subject: [PATCH 4/9] update variable names to be simpler and more comprehensive --- src/components/canvas.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/canvas.tsx b/src/components/canvas.tsx index a14c2f9..a637dc5 100644 --- a/src/components/canvas.tsx +++ b/src/components/canvas.tsx @@ -26,18 +26,18 @@ function updateCanvasHeight(fc: FabricCanvas) { document.body.clientHeight ); const viewportHeight = window.innerHeight; - const currentHeight = fc.getHeight(); - let newCanvasHeight = currentHeight || viewportHeight; + const currentCanvasHeight = fc.getHeight(); + let newCanvasHeight = currentCanvasHeight || contentHeight; // total distance from top of page to bottom of visible screen - const scrollReachY = window.scrollY + viewportHeight; + const visibleBottomY = window.scrollY + viewportHeight; // expand until canvas covers bottom of visible screen - while (newCanvasHeight < scrollReachY) { + while (newCanvasHeight < visibleBottomY) { newCanvasHeight += EXPANSION_INCREMENT; } - if (newCanvasHeight > currentHeight) { + if (newCanvasHeight > currentCanvasHeight) { fc.setDimensions({ height: Math.max(contentHeight, newCanvasHeight), }); From 6e54ba0a0f2991cf93de8f1f241261663f687e7c Mon Sep 17 00:00:00 2001 From: anth0nycodes Date: Mon, 9 Mar 2026 01:27:07 -0400 Subject: [PATCH 5/9] revert --- src/components/canvas.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/canvas.tsx b/src/components/canvas.tsx index a637dc5..78de926 100644 --- a/src/components/canvas.tsx +++ b/src/components/canvas.tsx @@ -222,8 +222,9 @@ export function Canvas({ currentTool }: CanvasProps) { }, []); return ( -
- -
+ ); } From 10417febf3a18abc9e417ee9aef48d03b1455496 Mon Sep 17 00:00:00 2001 From: anth0nycodes Date: Tue, 10 Mar 2026 21:56:05 -0400 Subject: [PATCH 6/9] fix --- src/components/canvas.tsx | 37 +++++++++++++++++++++++++++---------- 1 file changed, 27 insertions(+), 10 deletions(-) diff --git a/src/components/canvas.tsx b/src/components/canvas.tsx index 7c276e0..af74fee 100644 --- a/src/components/canvas.tsx +++ b/src/components/canvas.tsx @@ -19,27 +19,42 @@ function updateCanvasWidth(fc: FabricCanvas) { fc.setDimensions({ width: contentWidth }); } -// TODO: fix vertical overflow caused by canvas increment logic function updateCanvasHeight(fc: FabricCanvas) { const contentHeight = Math.max( document.documentElement.clientHeight, document.body.clientHeight ); - const viewportHeight = window.innerHeight; + + fc.setDimensions({ + height: contentHeight, + }); +} + +function updateDynamicCanvasHeight(fc: FabricCanvas) { + const { scrollY: scrollYAmount, innerHeight: viewportHeight } = window; const currentCanvasHeight = fc.getHeight(); - let newCanvasHeight = currentCanvasHeight || contentHeight; + let newCanvasHeight = currentCanvasHeight; + const visibleBottomY = viewportHeight + scrollYAmount; + + fc.setDimensions({ height: 0 }); - // total distance from top of page to bottom of visible screen - const visibleBottomY = window.scrollY + viewportHeight; + const contentScrollHeight = Math.max( + document.documentElement.scrollHeight, + document.body.scrollHeight + ); + + fc.setDimensions({ height: currentCanvasHeight }); - // expand until canvas covers bottom of visible screen - while (newCanvasHeight < visibleBottomY) { + while ( + newCanvasHeight < visibleBottomY && + visibleBottomY <= contentScrollHeight + ) { newCanvasHeight += EXPANSION_INCREMENT; } if (newCanvasHeight > currentCanvasHeight) { fc.setDimensions({ - height: Math.max(contentHeight, newCanvasHeight), + height: Math.max(newCanvasHeight, viewportHeight), }); } } @@ -71,10 +86,12 @@ export function Canvas({ currentTool }: CanvasProps) { updateCanvasWidth(fc); updateCanvasHeight(fc); }; - - const handleScroll = () => updateCanvasHeight(fc); handleResize(); // Initial sizing + const handleScroll = () => { + updateDynamicCanvasHeight(fc); + }; + let resizeTimeout: number; const resizeObserver = new ResizeObserver(() => { From 4d12f5d6c44d4b8800af7f34abee755f2d74c321 Mon Sep 17 00:00:00 2001 From: anth0nycodes Date: Tue, 10 Mar 2026 22:01:03 -0400 Subject: [PATCH 7/9] add alert cap --- src/components/canvas.tsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/components/canvas.tsx b/src/components/canvas.tsx index af74fee..3765dfa 100644 --- a/src/components/canvas.tsx +++ b/src/components/canvas.tsx @@ -8,7 +8,8 @@ import { useEraserPopover } from "@/context/eraser-popover/use-eraser-popover"; import { usePencilPopover } from "@/context/pencil-popover/use-pencil-popover"; import { getOS } from "@/lib/helpers"; -const EXPANSION_INCREMENT = 500; +const EXPANSION_INCREMENT_IN_PIXELS = 500; +const CANVAS_MAX_HEIGHT_IN_PIXELS = 15000; // Set a maximum height to prevent excessive canvas size function updateCanvasWidth(fc: FabricCanvas) { const contentWidth = Math.max( @@ -45,11 +46,19 @@ function updateDynamicCanvasHeight(fc: FabricCanvas) { fc.setDimensions({ height: currentCanvasHeight }); + if (currentCanvasHeight > CANVAS_MAX_HEIGHT_IN_PIXELS) { + alert( + "Tracemark does not support pages with this height. Please try again on a different website." + ); + // TODO: remove alert and replace with better user-facing error handling + return; + } + while ( newCanvasHeight < visibleBottomY && visibleBottomY <= contentScrollHeight ) { - newCanvasHeight += EXPANSION_INCREMENT; + newCanvasHeight += EXPANSION_INCREMENT_IN_PIXELS; } if (newCanvasHeight > currentCanvasHeight) { From e11a97e9ba5b7a6c4f40f0af7f50f0c61a0c67dd Mon Sep 17 00:00:00 2001 From: anth0nycodes Date: Tue, 10 Mar 2026 22:33:45 -0400 Subject: [PATCH 8/9] updated cap and added another condition --- src/components/canvas.tsx | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/src/components/canvas.tsx b/src/components/canvas.tsx index 3765dfa..30dca41 100644 --- a/src/components/canvas.tsx +++ b/src/components/canvas.tsx @@ -9,7 +9,7 @@ import { usePencilPopover } from "@/context/pencil-popover/use-pencil-popover"; import { getOS } from "@/lib/helpers"; const EXPANSION_INCREMENT_IN_PIXELS = 500; -const CANVAS_MAX_HEIGHT_IN_PIXELS = 15000; // Set a maximum height to prevent excessive canvas size +const CANVAS_MAX_HEIGHT_IN_PIXELS = 8000; // Set a maximum height to prevent excessive canvas size function updateCanvasWidth(fc: FabricCanvas) { const contentWidth = Math.max( @@ -46,17 +46,24 @@ function updateDynamicCanvasHeight(fc: FabricCanvas) { fc.setDimensions({ height: currentCanvasHeight }); - if (currentCanvasHeight > CANVAS_MAX_HEIGHT_IN_PIXELS) { + if ( + visibleBottomY >= currentCanvasHeight && + (currentCanvasHeight || newCanvasHeight) > CANVAS_MAX_HEIGHT_IN_PIXELS + ) { alert( - "Tracemark does not support pages with this height. Please try again on a different website." + "This page is too tall for Tracemark to support. You can still draw on the visible canvas area, but it won't expand further." ); + fc.setDimensions({ + height: CANVAS_MAX_HEIGHT_IN_PIXELS, + }); // TODO: remove alert and replace with better user-facing error handling return; } while ( newCanvasHeight < visibleBottomY && - visibleBottomY <= contentScrollHeight + visibleBottomY <= contentScrollHeight && + newCanvasHeight < CANVAS_MAX_HEIGHT_IN_PIXELS ) { newCanvasHeight += EXPANSION_INCREMENT_IN_PIXELS; } From 55483494848084d9af563eb9757e7f5b85cb33de Mon Sep 17 00:00:00 2001 From: anth0nycodes Date: Tue, 10 Mar 2026 23:06:03 -0400 Subject: [PATCH 9/9] remove redundant check --- src/components/canvas.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/canvas.tsx b/src/components/canvas.tsx index 30dca41..9580dd5 100644 --- a/src/components/canvas.tsx +++ b/src/components/canvas.tsx @@ -48,7 +48,7 @@ function updateDynamicCanvasHeight(fc: FabricCanvas) { if ( visibleBottomY >= currentCanvasHeight && - (currentCanvasHeight || newCanvasHeight) > CANVAS_MAX_HEIGHT_IN_PIXELS + currentCanvasHeight > CANVAS_MAX_HEIGHT_IN_PIXELS ) { alert( "This page is too tall for Tracemark to support. You can still draw on the visible canvas area, but it won't expand further."