From 76c1af578af8880f499259067908db8a5342f5ec Mon Sep 17 00:00:00 2001
From: Zaid Safadi <zsafadi@hotmail.com>
Date: Mon, 9 Apr 2018 23:37:46 -0400
Subject: [PATCH] Update resize example to allow setting irregular image size
 (Row/Col pixel spacing) when fitting the image to window or zoom in/out

---
 example/resize/index.html | 23 ++++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/example/resize/index.html b/example/resize/index.html
index 2de1495f..d838135c 100644
--- a/example/resize/index.html
+++ b/example/resize/index.html
@@ -23,7 +23,13 @@ <h1>
 
     <br>
     <br>
-
+    <label>Row Pixel Spacing:</label>
+    <input id="rowPixelSpacing" type="text" value="" />
+    <span>&#32;</span>
+    <label>Column Pixel Spacing:</label>
+    <input id="colPixelSpacing" type="text" value="" />
+    <br>
+    <br>
     <button id="reset" class="btn">Reset & fit to window</button>
     <button id="randomZoomPan" class="btn">Apply random zoom & pan</button>
 
@@ -58,6 +64,9 @@ <h1>
     cornerstone.enable(element);
     cornerstone.loadImage(imageId).then(function(image) {
         cornerstone.displayImage(element, image);
+
+        document.getElementById('rowPixelSpacing').value = image.rowPixelSpacing;
+        document.getElementById('colPixelSpacing').value = image.columnPixelSpacing;
     });
 
     function doResize(width, height) {
@@ -95,13 +104,20 @@ <h1>
     });
 
     document.getElementById('reset').addEventListener('click', function (e) {
+        let image = cornerstone.getImage(element);
+
         element.style.width = '256px';
         element.style.height = '256px';
+
+        image.rowPixelSpacing = parseInt (document.getElementById('rowPixelSpacing').value, 10);
+        image.columnPixelSpacing = parseInt(document.getElementById('colPixelSpacing').value, 10);
+
         cornerstone.resize(element, true);
     });
 
     document.getElementById('randomZoomPan').addEventListener('click', function (e) {
         let viewport = cornerstone.getViewport(element);
+        let image = cornerstone.getImage(element);
         const scale = viewport.scale;
         const minScale = scale - scale / 2;
         const maxScale = scale + scale / 2;
@@ -109,6 +125,11 @@ <h1>
         viewport.translation.x = getRandomFloat(-50.0, 50.0)
         viewport.translation.y = getRandomFloat(-50.0, 50.0)
 
+
+
+        image.rowPixelSpacing = parseInt(document.getElementById('rowPixelSpacing').value, 10);
+        image.columnPixelSpacing = parseInt(document.getElementById('colPixelSpacing').value, 10);
+
         cornerstone.setViewport(element, viewport);
     });