Improve performance of coordinate translation

Author: hackermd

src/annotations/_AnnotationManager.js

@@ -22,10 +22,11 @@ import { areCodedConceptsEqual, getContentItemNameCodedConcept } from '../utils'
 const { Marker, Markup } = Enums
 
 class _AnnotationManager {
-  constructor ({ map, pyramid, drawingSource } = {}) {
+  constructor ({ map, pyramid, affine, drawingSource } = {}) {
     const markupManager = new _MarkupManager({
       map,
       pyramid,
+      affine,
       drawingSource,
       formatters: {
         [Marker.Arrow]: arrowFormat,
@@ -37,6 +38,7 @@ class _AnnotationManager {
     this.props = {
       map,
       pyramid,
+      affine,
       markupManager
     }
 

src/annotations/_AnnotationManager.test.js

@@ -79,6 +79,7 @@ describe('_AnnotationManager', () => {
       set: jest.fn()
     }
     map = { addOverlay: jest.fn(), addLayer: jest.fn() }
+    // TODO
     _markupManager = new _MarkupManager()
     _annotationManager = new _AnnotationManager({
       map: {}

src/annotations/markups/_MarkupManager.js

@@ -60,9 +60,18 @@ const _getShortestLineBetweenOverlayAndFeature = (feature, overlay) => {
 }
 
 class _MarkupManager {
-  constructor ({ map, pyramid, drawingSource, formatters, onClick, onStyle } = {}) {
+  constructor ({
+    map,
+    pyramid,
+    affine,
+    drawingSource,
+    formatters,
+    onClick,
+    onStyle
+  } = {}) {
     this._map = map
     this._pyramid = pyramid
+    this._affine = affine
     this._formatters = formatters
     this._drawingSource = drawingSource
 
@@ -251,7 +260,12 @@ class _MarkupManager {
           const view = this._map.getView()
           const unitSuffix = _getUnitSuffix(view)
           const format = this._getFormatter(event.target)
-          const output = format(event.target, unitSuffix, this._pyramid)
+          const output = format(
+            event.target,
+            unitSuffix,
+            this._pyramid,
+            this._affine
+          )
           this.update({
             feature,
             value: output,

src/annotations/markups/measurement.js

@@ -15,9 +15,9 @@ import {
  *
  * @private
  */
-export const _format = (feature, units, pyramid) => {
-  const area = _getFeatureArea(feature, pyramid)
-  const length = _getFeatureLength(feature, pyramid)
+export const _format = (feature, units, pyramid, affine) => {
+  const area = _getFeatureArea(feature, pyramid, affine)
+  const length = _getFeatureLength(feature, pyramid, affine)
   const value = length || area || 0
   return length
     ? `${value.toFixed(2)} ${units}`
@@ -39,22 +39,23 @@ const _isMeasurement = (feature) =>
 /**
  * Measurement markup definition.
  *
- * @param {object} dependencies Shared dependencies
- * @param {object} dependencies.map Viewer's map instance
- * @param {object} dependencies.pyramid Pyramid metadata
- * @param {object} dependencies.markupManager MarkupManager shared instance
+ * @param {object} dependencies - Shared dependencies
+ * @param {object} dependencies.map - Viewer's map instance
+ * @param {object} dependencies.pyramid - Pyramid metadata
+ * @param {number[][]} dependencies.affine - 3x3 affine transformation matrix
+ * @param {object} dependencies.markupManager - MarkupManager shared instance
  *
  * @private
  */
-const MeasurementMarkup = ({ map, pyramid, markupManager }) => {
+const MeasurementMarkup = ({ map, pyramid, affine, markupManager }) => {
   return {
     onAdd: (feature) => {
       if (_isMeasurement(feature)) {
         const view = map.getView()
         const unitSuffix = _getUnitSuffix(view)
         markupManager.create({
           feature,
-          value: _format(feature, unitSuffix, pyramid)
+          value: _format(feature, unitSuffix, pyramid, affine)
         })
       }
     },
@@ -81,7 +82,7 @@ const MeasurementMarkup = ({ map, pyramid, markupManager }) => {
       const markup = markupManager.get(id)
       markupManager.update({
         feature,
-        value: _format(feature, unitSuffix, pyramid),
+        value: _format(feature, unitSuffix, pyramid, affine),
         coordinate: markup.overlay.getPosition()
       })
     },

src/scoord3dUtils.js

@@ -7,9 +7,7 @@ import LineStringGeometry from 'ol/geom/LineString'
 
 import {
   applyInverseTransform,
-  applyTransform,
-  buildInverseTransform,
-  buildTransform
+  applyTransform
 } from './utils.js'
 
 /**
@@ -18,17 +16,22 @@ import {
  *
  * @param {object} feature - OpenLayers Feature
  * @param {Object[]} pyramid - Metadata for resolution levels of image pyramid
+ * @param {number[][]} affine - 3x3 affine transformation matrix
  * @returns {Scoord3D} DICOM Microscopy Viewer Scoord3D
  * @private
  */
-function _geometry2Scoord3d (feature, pyramid) {
+function _geometry2Scoord3d (feature, pyramid, affine) {
   const geometry = feature.getGeometry()
   console.info('map coordinates from pixel matrix to slide coordinate system')
   const frameOfReferenceUID = pyramid[pyramid.length - 1].FrameOfReferenceUID
   const type = geometry.getType()
   if (type === 'Point') {
     let coordinates = geometry.getCoordinates()
-    coordinates = _geometryCoordinates2scoord3dCoordinates(coordinates, pyramid)
+    coordinates = _geometryCoordinates2scoord3dCoordinates(
+      coordinates,
+      pyramid,
+      affine
+    )
     return new Point({
       coordinates,
       frameOfReferenceUID: frameOfReferenceUID
@@ -39,16 +42,15 @@ function _geometry2Scoord3d (feature, pyramid) {
      * Each subsequent linear ring defines a hole in the surface.
      */
     const coordinates = geometry.getCoordinates()[0].map((c) => {
-      return _geometryCoordinates2scoord3dCoordinates(c, pyramid)
+      return _geometryCoordinates2scoord3dCoordinates(c, pyramid, affine)
     })
     return new Polygon({
       coordinates,
       frameOfReferenceUID: frameOfReferenceUID
     })
   } else if (type === 'LineString') {
     const coordinates = geometry.getCoordinates().map((c) => {
-      const result = _geometryCoordinates2scoord3dCoordinates(c, pyramid)
-      return result
+      return _geometryCoordinates2scoord3dCoordinates(c, pyramid, affine)
     })
     return new Polyline({
       coordinates,
@@ -65,7 +67,7 @@ function _geometry2Scoord3d (feature, pyramid) {
       [center[0], center[1] + radius, 0]
     ]
     coordinates = coordinates.map((c) => {
-      return _geometryCoordinates2scoord3dCoordinates(c, pyramid)
+      return _geometryCoordinates2scoord3dCoordinates(c, pyramid, affine)
     })
     return new Ellipse({
       coordinates,
@@ -83,25 +85,30 @@ function _geometry2Scoord3d (feature, pyramid) {
  *
  * @param {Scoord3D} scoord3d - DICOM Microscopy Viewer Scoord3D
  * @param {Object[]} pyramid - Metadata for resolution levels of image pyramid
+ * @param {number[][]} affine - 3x3 affine transformation matrix
  * @returns {object} Openlayers Geometry
  * @private
  */
-function _scoord3d2Geometry (scoord3d, pyramid) {
+function _scoord3d2Geometry (scoord3d, pyramid, affine) {
   console.info('map coordinates from slide coordinate system to pixel matrix')
   const type = scoord3d.graphicType
   const data = scoord3d.graphicData
 
   if (type === 'POINT') {
-    const coordinates = _scoord3dCoordinates2geometryCoordinates(data, pyramid)
+    const coordinates = _scoord3dCoordinates2geometryCoordinates(
+      data,
+      pyramid,
+      affine
+    )
     return new PointGeometry(coordinates)
   } else if (type === 'POLYLINE') {
     const coordinates = data.map((d) => {
-      return _scoord3dCoordinates2geometryCoordinates(d, pyramid)
+      return _scoord3dCoordinates2geometryCoordinates(d, pyramid, affine)
     })
     return new LineStringGeometry(coordinates)
   } else if (type === 'POLYGON') {
     const coordinates = data.map((d) => {
-      return _scoord3dCoordinates2geometryCoordinates(d, pyramid)
+      return _scoord3dCoordinates2geometryCoordinates(d, pyramid, affine)
     })
     return new PolygonGeometry([coordinates])
   } else if (type === 'ELLIPSE') {
@@ -122,7 +129,7 @@ function _scoord3d2Geometry (scoord3d, pyramid) {
       point2
     ]
     coordinates = coordinates.map((d) => {
-      return _scoord3dCoordinates2geometryCoordinates(d, pyramid)
+      return _scoord3dCoordinates2geometryCoordinates(d, pyramid, affine)
     })
     // to flat coordinates
     coordinates = [
@@ -177,29 +184,20 @@ function getPixelSpacing (metadata) {
  *
  * @param {array} coordinates - Array of Openlayers map coordinates
  * @param {object} pyramid - Metadata of images in the pyramid
+ * @param {number[][]} affine - 3x3 affine transformation matrix
  * @returns {array} Array of slide coordinates
  * @private
  */
-function _geometryCoordinates2scoord3dCoordinates (coordinates, pyramid) {
+function _geometryCoordinates2scoord3dCoordinates (
+  coordinates,
+  pyramid,
+  affine
+) {
   let transform = false
   if (!Array.isArray(coordinates[0])) {
     coordinates = [coordinates]
     transform = true
   }
-  const metadata = pyramid[pyramid.length - 1]
-  const origin = metadata.TotalPixelMatrixOriginSequence[0]
-  const orientation = metadata.ImageOrientationSlide
-  const spacing = getPixelSpacing(metadata)
-  const offset = [
-    Number(origin.XOffsetInSlideCoordinateSystem),
-    Number(origin.YOffsetInSlideCoordinateSystem)
-  ]
-
-  const affine = buildTransform({
-    offset,
-    orientation,
-    spacing
-  })
   coordinates = coordinates.map((c) => {
     const pixelCoord = [c[0], -(c[1] + 1)]
     const slideCoord = applyTransform({ coordinate: pixelCoord, affine })
@@ -216,30 +214,21 @@ function _geometryCoordinates2scoord3dCoordinates (coordinates, pyramid) {
  *
  * @param {array} coordinates - Array of slide coordinates
  * @param {object} pyramid - Metadata of images in the pyramid
+ * @param {number[][]} affine - 3x3 affine transformation matrix
  * @returns {array} Array of Openlayers map coordinates
  * @private
  */
-function _scoord3dCoordinates2geometryCoordinates (coordinates, pyramid) {
+function _scoord3dCoordinates2geometryCoordinates (
+  coordinates,
+  pyramid,
+  affine
+) {
   let transform = false
   if (!Array.isArray(coordinates[0])) {
     coordinates = [coordinates]
     transform = true
   }
-  const metadata = pyramid[pyramid.length - 1]
-  const orientation = metadata.ImageOrientationSlide
-  const spacing = getPixelSpacing(metadata)
-  const origin = metadata.TotalPixelMatrixOriginSequence[0]
-  const offset = [
-    Number(origin.XOffsetInSlideCoordinateSystem),
-    Number(origin.YOffsetInSlideCoordinateSystem)
-  ]
-
   let outOfFrame = false
-  const affine = buildInverseTransform({
-    offset,
-    orientation,
-    spacing
-  })
   coordinates = coordinates.map((c) => {
     if (c[0] > 25 || c[1] > 76) {
       outOfFrame = true
@@ -292,18 +281,19 @@ function _computeAreaOfPolygon (coordinates) {
  *
  * @param {Feature} feature - Openlayers feature
  * @param {object} pyramid - Metadata of images in the pyramid
+ * @param {number[][]} affine - 3x3 affine transformation matrix
  * @returns {number} Length in millimeter
  * @private
  */
-function _getFeatureLength (feature, pyramid) {
+function _getFeatureLength (feature, pyramid, affine) {
   const geometry = feature.getGeometry()
   const type = geometry.getType()
 
   if (type === 'LineString') {
     const coordinates = geometry.getCoordinates()
     if (coordinates && coordinates.length) {
       const scoord3dCoordinates = coordinates.map((c) =>
-        _geometryCoordinates2scoord3dCoordinates(c, pyramid)
+        _geometryCoordinates2scoord3dCoordinates(c, pyramid, affine)
       )
       let length = 0
       for (let i = 0; i < (scoord3dCoordinates.length - 1); i++) {
@@ -327,10 +317,11 @@ function _getFeatureLength (feature, pyramid) {
  *
  * @param {Feature} feature - Openlayers feature
  * @param {object} pyramid - Metadata of images in the pyramid
+ * @param {number[][]} affine - 3x3 affine transformation matrix
  * @returns {number} Area in square millimeter
  * @private
  */
-function _getFeatureArea (feature, pyramid) {
+function _getFeatureArea (feature, pyramid, affine) {
   let geometry = feature.getGeometry()
   let type = geometry.getType()
 
@@ -344,7 +335,9 @@ function _getFeatureArea (feature, pyramid) {
     if (coordinates && coordinates.length) {
       const scoord3dCoordinates = geometry
         .getCoordinates()[0]
-        .map((c) => _geometryCoordinates2scoord3dCoordinates(c, pyramid))
+        .map((c) => {
+          return _geometryCoordinates2scoord3dCoordinates(c, pyramid, affine)
+        })
       return _computeAreaOfPolygon(scoord3dCoordinates) * 1000
     }
   }