Fix three-dimensional spatial coordinates

* Add offsets to x and y coordinate
* Set z offset to zero instead of one (projected onto the glass slide)

Author: hackermd

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "dicom-microscopy-viewer",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "Interactive web-based viewer for DICOM Microscopy Images",
   "main": "build/dicom-microscopy-viewer.js",
   "scripts": {

package.json

@@ -132,7 +132,7 @@ function _scoord3d2Geometry(scoord3d, pyramid) {
       [
         (point1[0] + point2[0]) / parseFloat(2),
         (point1[1] + point2[1]) / parseFloat(2),
-        1
+        0
       ],
       point2
     ];
@@ -163,35 +163,53 @@ function _scoord3dCoordinates2geometryCoordinates(coordinates, pyramid) {
   * slide coordinate system
 */
 function _coordinateFormatGeometry2Scoord3d(coordinates, pyramid) {
-  if(coordinates.length === 3){
+  let transform = false;
+  if(!(coordinates[0] instanceof Array)) {
     coordinates = [coordinates];
+    transform = true;
   }
-  coordinates.map(coord =>{
-    const pixelSpacing = _getPixelSpacing(pyramid[pyramid.length-1]);
-    const x = (coord[0] * pixelSpacing[0]).toFixed(4);
-    const y = (-(coord[1] - 1) * pixelSpacing[1]).toFixed(4);
-    const z = (1).toFixed(4);
-    coordinates = [Number(x), Number(y), Number(z)];
-  })
-  return(coordinates);
+  const metadata = pyramid[pyramid.length-1];
+  const origin = metadata.TotalPixelMatrixOriginSequence[0];
+  const xOffset = Number(origin.XOffsetInSlideCoordinateSystem);
+  const yOffset = Number(origin.YOffsetInSlideCoordinateSystem);
+  const pixelSpacing = _getPixelSpacing(metadata);
+  coordinates = coordinates.map(point => {
+    const x = Number((xOffset + (point[0] * pixelSpacing[0])).toFixed(4));
+    const y = Number((yOffset - ((point[1] - 1) * pixelSpacing[1])).toFixed(4));
+    const z = Number((0).toFixed(4));
+    return [x, y, z];
+  });
+  if (transform) {
+    return coordinates[0];
+  }
+  return coordinates;
 }
 
 /*
   * Translate millimeters into pixel units of total pixel matrix of
   * slide coordinate system
 */
 function _coordinateFormatScoord3d2Geometry(coordinates, pyramid) {
-  if(coordinates.length === 3){
+  let transform = false;
+  if(!(coordinates[0] instanceof Array)) {
     coordinates = [coordinates];
+    transform = true;
   }
-  coordinates.map(coord =>{
+  const metadata = pyramid[pyramid.length-1];
+  const origin = metadata.TotalPixelMatrixOriginSequence[0];
+  const xOffset = Number(origin.XOffsetInSlideCoordinateSystem);
+  const yOffset = Number(origin.YOffsetInSlideCoordinateSystem);
+  coordinates = coordinates.map(coord =>{
     const pixelSpacing = _getPixelSpacing(pyramid[pyramid.length-1]);
-    const x = (coord[0] / pixelSpacing[0] - 1);
-    const y = -(coord[1] /pixelSpacing[1] - 1);
+    const x = (coord[0] / pixelSpacing[0] - 1) - xOffset;
+    const y = -(coord[1] /pixelSpacing[1] - 1) - yOffset;
     const z = coord[2];
-    coordinates = [x, y, z];
+    return [x, y, z];
   });
-   return(coordinates);
+  if (transform) {
+    return coordinates[0];
+  }
+  return coordinates;
 }
 
 function _getROIFromFeature(feature, pyramid){

src/api.js

@@ -13,77 +13,77 @@ describe('dicomMicroscopyViewer.api.VLWholeSlideMicroscopyImageViewer', ()=> {
     const properties = {};
     const ellipse = new dicomMicroscopyViewer.scoord3d.Ellipse({
       coordinates: [
-        [8.0, 9.2, 1],
-        [8.4, 9.2, 1],
-        [8.2, 9.0, 1],
-        [8.2, 9.4, 1]
+        [8.0, 9.2, 0],
+        [8.4, 9.2, 0],
+        [8.2, 9.0, 0],
+        [8.2, 9.4, 0]
       ],
       frameOfReferenceUID: '1.2.3'
     });
     const point = new dicomMicroscopyViewer.scoord3d.Point({
-      coordinates: [9.0467, 8.7631, 1],
+      coordinates: [9.0467, 8.7631, 0],
       frameOfReferenceUID: '1.2.3'
     });
     const box = new dicomMicroscopyViewer.scoord3d.Polyline({
       coordinates: [
-        [8.8824, 8.8684, 1],
-        [9.2255, 9.9634, 1],
-        [10.3205, 9.6203, 1],
-        [9.9774, 8.5253, 1],
-        [8.8824, 8.8684, 1]
+        [8.8824, 8.8684, 0],
+        [9.2255, 9.9634, 0],
+        [10.3205, 9.6203, 0],
+        [9.9774, 8.5253, 0],
+        [8.8824, 8.8684, 0]
       ],
       frameOfReferenceUID: '1.2.3'
     })
     const polygon = new dicomMicroscopyViewer.scoord3d.Polyline({
       coordinates: [
-        [7.8326, 8.4428, 1],
-        [7.1919, 7.9169, 1],
-        [8.7772, 7.2831, 1],
-        [7.8326, 8.4428, 1]
+        [7.8326, 8.4428, 0],
+        [7.1919, 7.9169, 0],
+        [8.7772, 7.2831, 0],
+        [7.8326, 8.4428, 0]
       ],
       frameOfReferenceUID: '1.2.3'
     })
     const freehandPolygon = new dicomMicroscopyViewer.scoord3d.Polyline({
       coordinates: [
-        [6.9340, 7.0669, 1],
-        [6.9340, 7.0669, 1],
-        [6.9189, 7.0216, 1],
-        [6.9114, 6.9973, 1],
-        [6.9114, 6.9797, 1],
-        [6.9139, 6.9621, 1],
-        [6.9216, 6.9470, 1],
-        [6.9292, 6.9344, 1],
-        [6.9419, 6.9294, 1],
-        [6.9496, 6.9269, 1],
-        [6.9597, 6.9243, 1],
-        [6.9674, 6.9243, 1],
-        [6.9674, 6.9243, 1],
-        [6.9340, 7.0669, 1]
+        [6.9340, 7.0669, 0],
+        [6.9340, 7.0669, 0],
+        [6.9189, 7.0216, 0],
+        [6.9114, 6.9973, 0],
+        [6.9114, 6.9797, 0],
+        [6.9139, 6.9621, 0],
+        [6.9216, 6.9470, 0],
+        [6.9292, 6.9344, 0],
+        [6.9419, 6.9294, 0],
+        [6.9496, 6.9269, 0],
+        [6.9597, 6.9243, 0],
+        [6.9674, 6.9243, 0],
+        [6.9674, 6.9243, 0],
+        [6.9340, 7.0669, 0]
       ],
       frameOfReferenceUID: '1.2.3'
     })
     const line = new dicomMicroscopyViewer.scoord3d.Polyline({
       coordinates: [
-        [7.0442, 7.5295, 1],
-        [7.6725, 7.0580, 1]
+        [7.0442, 7.5295, 0],
+        [7.6725, 7.0580, 0]
       ],
       frameOfReferenceUID: '1.2.3'
     })
     const freeHandLine = new dicomMicroscopyViewer.scoord3d.Polyline({
       coordinates: [
-        [6.6769, 9.1169, 1],
-        [6.6769, 9.1169, 1],
-        [6.6668, 9.1119, 1],
-        [6.6567, 9.1043, 1],
-        [6.6366, 9.0817, 1],
-        [6.6182, 9.0423, 1],
-        [6.6182, 9.0322, 1],
-        [6.6182, 9.0197, 1],
-        [6.6233, 9.0096, 1],
-        [6.6258, 9.0020, 1],
-        [6.6284, 8.9995, 1],
-        [6.6334, 8.9945, 1],
-        [6.6360, 8.9945, 1]
+        [6.6769, 9.1169, 0],
+        [6.6769, 9.1169, 0],
+        [6.6668, 9.1119, 0],
+        [6.6567, 9.1043, 0],
+        [6.6366, 9.0817, 0],
+        [6.6182, 9.0423, 0],
+        [6.6182, 9.0322, 0],
+        [6.6182, 9.0197, 0],
+        [6.6233, 9.0096, 0],
+        [6.6258, 9.0020, 0],
+        [6.6284, 8.9995, 0],
+        [6.6334, 8.9945, 0],
+        [6.6360, 8.9945, 0]
       ],
       frameOfReferenceUID: '1.2.3'
     })