diff --git a/src/engine/Graphics2d.js b/src/engine/Graphics2d.js index 94668922..1104c73a 100644 --- a/src/engine/Graphics2d.js +++ b/src/engine/Graphics2d.js @@ -470,8 +470,8 @@ class Graphics2d extends React.Component { } // centering: setting canvas image size, to match its HTML element's size - objCanvas.width = wScreen; - objCanvas.height = hScreen; + objCanvas.width = this.m_mount.current.clientWidth; + objCanvas.height = this.m_mount.current.clientHeight; // check is segmentation 2d mode is active // const isSegm = store.graphics2dModeSegmentation; // console.log("Segm2d mode = " + isSegm); @@ -481,9 +481,10 @@ class Graphics2d extends React.Component { } // prepareImageForRender fillBackground(ctx) { - const { hRender, wRender } = this.state; + const w = this.m_mount.current.clientWidth; + const h = this.m_mount.current.clientHeight; ctx.fillStyle = '#000000'; - ctx.fillRect(0, 0, wRender, hRender); + ctx.fillRect(0, 0, w, h); } renderReadyImage() { @@ -491,8 +492,6 @@ class Graphics2d extends React.Component { const ctx = objCanvas.getContext('2d'); const store = this.props; const zoom = store.render2dZoom; - const xPos = store.render2dxPos; - const yPos = store.render2dyPos; const canvasWidth = objCanvas.width; const canvasHeight = objCanvas.height; const newImgWidth = canvasWidth / zoom; @@ -532,6 +531,10 @@ class Graphics2d extends React.Component { } else { createImageBitmap(this.imgData) .then((imageBitmap) => { + const centerX = (canvasWidth - this.imgData.width) / 2; + const centerY = (canvasHeight - this.imgData.height) / 2; + const xPos = store.render2dxPos - centerX; + const yPos = store.render2dyPos - centerY; ctx.drawImage(imageBitmap, xPos, yPos, canvasWidth, canvasHeight, 0, 0, newImgWidth, newImgHeight); }) .then(() => { @@ -554,7 +557,7 @@ class Graphics2d extends React.Component { let yPosNew; const store = this.props; const zoom = store.render2dZoom; - const step = evt.deltaY * 2 ** -10; + const step = (evt.deltaY * 2 ** -10) / 2; let newZoom = zoom + step; if (step < 0) { diff --git a/src/engine/Graphics2d.module.css b/src/engine/Graphics2d.module.css index 2f40942b..5f77c3d4 100644 --- a/src/engine/Graphics2d.module.css +++ b/src/engine/Graphics2d.module.css @@ -5,103 +5,11 @@ .wrapperStyles { width: 100%; - height: 100vh; - justify-content: center; - overflow: scroll; + height: 100%; } .canvasStyles { display: block; - width: 150vw; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); -} - -@media screen and (min-width: 768px) and (max-width: 1023px) { - .wrapperStyles { - height: calc(100% - 2.5rem); - width: calc(100% - 3rem); - border: 2px solid #dc5e47; - border-radius: 10px; - box-sizing: border-box; - } - - .canvasStyles { - aspect-ratio: 1 / 1; - width: 100vh; - } -} - -@media screen and (orientation: landscape) and (min-width: 768px) and (max-width: 1023px) { - .wrapperStyles { - height: calc(100% - 2.5rem); - width: calc(100%- 3rem); - } - - .canvasStyles { - aspect-ratio: 1 / 1; - } -} - -@media screen and (min-width: 1024px) and (orientation: landscape) { - .wrapperStyles { - height: calc(100% - 0.5rem); - width: 80%; - border: 2px solid #dc5e47; - border-radius: 10px; - } - - .canvasStyles { - margin: 0 auto; - box-sizing: border-box; - } -} - -@media screen and (min-width: 1024px) and (orientation: landscape) and (max-width: 2559px) { - .wrapperStyles { - display: block; - height: calc(100% - 0.5rem); - width: 43%; - overflow: hidden; - border: 2px solid #dc5e47; - border-radius: 10px; - } - - .canvasStyles { - width: auto; - margin: 0 auto; - box-sizing: border-box; - } -} - -@media screen and (min-width: 1024px) and (max-width: 2559px) and (orientation: portrait) { - .wrapperStyles { - width: 90%; - height: calc(100% - 0.5rem); - border: 2px solid #dc5e47; - border-radius: 10px; - display: block; - } - - .canvasStyles { - aspect-ratio: 1/1; - width: 150vw; - } -} - -@media screen and (min-width: 2560px) { - .wrapperStyles { - width: 80%; - border: 2px solid #dc5e47; - border-radius: 10px; - display: flex; - align-items: center; - } - - .canvasStyles { - aspect-ratio: 1/1; - width: auto; - } + width: 100%; + height: 100%; } diff --git a/src/engine/tools2d/ToolDistance.js b/src/engine/tools2d/ToolDistance.js index a77bc873..8a172aa0 100644 --- a/src/engine/tools2d/ToolDistance.js +++ b/src/engine/tools2d/ToolDistance.js @@ -113,9 +113,13 @@ class ToolDistance { const zDim = vol.m_zDim; const objCanvas = store.graphics2d.m_mount.current; const canvasRect = objCanvas.getBoundingClientRect(); + const canvasWidth = canvasRect.width; + const canvasHeight = canvasRect.height; + const centerX = (canvasWidth - wScr) / 2; + const centerY = (canvasHeight - hScr) / 2; + const xPos = (store.render2dxPos - centerX) / wScr; + const yPos = (store.render2dyPos - centerY) / hScr; const zoom = store.render2dZoom; - const xPos = store.render2dxPos / canvasRect.width; - const yPos = store.render2dyPos / canvasRect.height; const vTex = { x: 0.0, @@ -152,9 +156,14 @@ class ToolDistance { const zDim = vol.m_zDim; const objCanvas = store.graphics2d.m_mount.current; const canvasRect = objCanvas.getBoundingClientRect(); + const canvasWidth = canvasRect.width; + const canvasHeight = canvasRect.height; + const centerX = (canvasWidth - wScr) / 2; + const centerY = (canvasHeight - hScr) / 2; + const xPos = (store.render2dxPos - centerX) / wScr; + const yPos = (store.render2dyPos - centerY) / hScr; const zoom = store.render2dZoom; - const xPos = store.render2dxPos / canvasRect.width; - const yPos = store.render2dyPos / canvasRect.height; + if (mode2d === Modes2d.TRANSVERSE) { // z const vScr.x = (xTex / xDim - xPos) / zoom; diff --git a/src/engine/tools2d/ToolPick.js b/src/engine/tools2d/ToolPick.js index 1de1152d..d93b51a3 100644 --- a/src/engine/tools2d/ToolPick.js +++ b/src/engine/tools2d/ToolPick.js @@ -60,9 +60,14 @@ class ToolPick { const zDim = vol.m_zDim; const objCanvas = store.graphics2d.m_mount.current; const canvasRect = objCanvas.getBoundingClientRect(); + const canvasWidth = canvasRect.width; + const canvasHeight = canvasRect.height; + const centerX = (canvasWidth - store.graphics2d.imgData.width) / 2; + const centerY = (canvasHeight - store.graphics2d.imgData.height) / 2; + const xPos = (store.render2dxPos - centerX) / store.graphics2d.imgData.width; + const yPos = (store.render2dyPos - centerY) / store.graphics2d.imgData.height; const zoom = store.render2dZoom; - const xPos = store.render2dxPos / canvasRect.width; - const yPos = store.render2dyPos / canvasRect.height; + if (mode2d === Modes2d.TRANSVERSE) { // z: const vTex.x = Math.floor((xPos + xScr * zoom) * xDim); @@ -92,16 +97,16 @@ class ToolPick { const xRatioImage = xScr / this.m_wScreen; const yRatioImage = yScr / this.m_hScreen; - if (xRatioImage > 1.0 || yRatioImage > 1.0) { - // out if rendered image - return; - } const vTex = this.screenToTexture(xRatioImage, yRatioImage, store); const volSet = store.volumeSet; const vol = volSet.getVolume(store.volumeIndex); const xDim = vol.m_xDim; const yDim = vol.m_yDim; + + if (vTex.x < 0 || vTex.y < 0 || vTex.z < 0 || vTex.x >= vol.m_xDim || vTex.y >= vol.m_yDim) { + return; + } /* if (mode2d === Modes2d.SAGGITAL) { // x diff --git a/src/ui/Main.module.css b/src/ui/Main.module.css index b5f8a3fe..c34629c0 100644 --- a/src/ui/Main.module.css +++ b/src/ui/Main.module.css @@ -68,7 +68,7 @@ position: absolute; right: 0; top: 50%; - z-index: 10; + z-index: 2; } .left { display: none; @@ -81,6 +81,7 @@ right: 0; bottom: 0; z-index: 1; + width: 100%; user-select: none; } @@ -127,8 +128,7 @@ display: block; position: absolute; left: 25px; - top: 12%; - z-index: 1010; + top: 15%; } .bottleft { @@ -216,7 +216,7 @@ } .left { - top: 10%; + top: 15%; } }