From f249c310e265481c32963b78fb4bb86e23f9b7d6 Mon Sep 17 00:00:00 2001 From: Joel Arbuckle Date: Thu, 30 Jan 2025 09:49:08 -0800 Subject: [PATCH 1/3] Removed the assumption that annotation SVG exists --- examples/src/dzi/dziView.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/examples/src/dzi/dziView.tsx b/examples/src/dzi/dziView.tsx index 79d0d4e4..9f036cd0 100644 --- a/examples/src/dzi/dziView.tsx +++ b/examples/src/dzi/dziView.tsx @@ -16,7 +16,7 @@ import { Vec2, type vec2 } from '@alleninstitute/vis-geometry'; type Props = { id: string; dzi: DziImage; - svgOverlay: HTMLImageElement; + svgOverlay?: HTMLImageElement; wheel: (e: React.WheelEvent) => void; } & DziRenderSettings; @@ -77,7 +77,10 @@ export function DziView(props: Props) { } return null; }; - const compose = buildCompositor(svgOverlay, { camera: cam }); + let render = (ctx: CanvasRenderingContext2D, image: ImageData) => ctx.putImageData(image, 0, 0); + if (svgOverlay) { + render = buildCompositor(svgOverlay, { camera }); + } server.beginRendering( renderMyData, (e) => { @@ -87,10 +90,10 @@ export function DziView(props: Props) { break; case 'progress': // wanna see the tiles as they arrive? - e.server.copyToClient(compose); + e.server.copyToClient(render); break; case 'finished': { - e.server.copyToClient(compose); + e.server.copyToClient(render); } } }, From fa5fc8aeeeeacc5e71a79d0c1b80664cfa94649c Mon Sep 17 00:00:00 2001 From: Joel Arbuckle Date: Fri, 31 Jan 2025 14:42:05 -0800 Subject: [PATCH 2/3] Reworked the compose/render function --- examples/src/dzi/dziView.tsx | 41 +++++++++++++++++------------------- 1 file changed, 19 insertions(+), 22 deletions(-) diff --git a/examples/src/dzi/dziView.tsx b/examples/src/dzi/dziView.tsx index 9f036cd0..e6157665 100644 --- a/examples/src/dzi/dziView.tsx +++ b/examples/src/dzi/dziView.tsx @@ -20,22 +20,6 @@ type Props = { wheel: (e: React.WheelEvent) => void; } & DziRenderSettings; -function buildCompositor(svg: HTMLImageElement, settings: DziRenderSettings) { - return (ctx: CanvasRenderingContext2D, image: ImageData) => { - const { width, height } = svg; - const { camera } = settings; - const svgSize: vec2 = [width, height]; - const start = Vec2.mul(camera.view.minCorner, svgSize); - const wh = Vec2.sub(Vec2.mul(camera.view.maxCorner, svgSize), start); - const [sx, sy] = start; - const [sw, sh] = wh; - // first, draw the results from webGL - ctx.putImageData(image, 0, 0); - // then add our svg overlay - ctx.drawImage(svg, sx, sy, sw, sh, 0, 0, ctx.canvas.width, ctx.canvas.height); - }; -} - export function DziView(props: Props) { const { svgOverlay, camera, dzi, wheel, id } = props; const server = useContext(renderServerContext); @@ -69,6 +53,22 @@ export function DziView(props: Props) { }, [server]); useEffect(() => { + + const compose = (ctx: CanvasRenderingContext2D, image: ImageData) => { + // first, draw the results from webGL + ctx.putImageData(image, 0, 0); + + if (svgOverlay) { // then add our svg overlay + const { width, height } = svgOverlay; + const svgSize: vec2 = [width, height]; + const start = Vec2.mul(cam.view.minCorner, svgSize); + const wh = Vec2.sub(Vec2.mul(cam.view.maxCorner, svgSize), start); + const [sx, sy] = start; + const [sw, sh] = wh; + ctx.drawImage(svgOverlay, sx, sy, sw, sh, 0, 0, ctx.canvas.width, ctx.canvas.height); + } + }; + if (server && renderer.current && cnvs.current) { const renderMyData: RenderFrameFn = (target, cache, callback) => { if (renderer.current) { @@ -77,10 +77,6 @@ export function DziView(props: Props) { } return null; }; - let render = (ctx: CanvasRenderingContext2D, image: ImageData) => ctx.putImageData(image, 0, 0); - if (svgOverlay) { - render = buildCompositor(svgOverlay, { camera }); - } server.beginRendering( renderMyData, (e) => { @@ -90,10 +86,10 @@ export function DziView(props: Props) { break; case 'progress': // wanna see the tiles as they arrive? - e.server.copyToClient(render); + e.server.copyToClient(compose); break; case 'finished': { - e.server.copyToClient(render); + e.server.copyToClient(compose); } } }, @@ -101,6 +97,7 @@ export function DziView(props: Props) { ); } }, [server, renderer.current, cnvs.current, cam]); + return ( Date: Fri, 31 Jan 2025 15:05:55 -0800 Subject: [PATCH 3/3] Fix prettier issues --- examples/src/dzi/dzi-viewer.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/src/dzi/dzi-viewer.tsx b/examples/src/dzi/dzi-viewer.tsx index e987ef03..e9e1454e 100644 --- a/examples/src/dzi/dzi-viewer.tsx +++ b/examples/src/dzi/dzi-viewer.tsx @@ -51,7 +51,8 @@ export function DziViewer(props: Props) { // first, draw the results from webGL ctx.putImageData(image, 0, 0); - if (svgOverlay) { // then add our svg overlay + if (svgOverlay) { + // then add our svg overlay const { width, height } = svgOverlay; const svgSize: vec2 = [width, height]; const start = Vec2.mul(camera.view.minCorner, svgSize); @@ -84,7 +85,6 @@ export function DziViewer(props: Props) { } }, [server, svgOverlay, dzi, camera]); - // we have to add the listener this way because onWheel is a passive listener by default // that means we can't preventDefault to stop scrolling useEffect(() => {