Merge pull request #184 from epam/EPMUII-3204-Center-2D-view

EPMUII-3204-Center-2D-view
epam · Dec 5, 2023 · 92a404a · 92a404a
2 parents e4cd136 + 5bf503d
commit 92a404a
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 116 deletions.
diff --git 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,18 +481,17 @@ 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() {
     const objCanvas = this.m_mount.current;
     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
@@ -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
@@ -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
@@ -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
@@ -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%;
   }
 }