Created overlay interface so other types can be added (e.g. GSPS)

.github/workflows/build.yml

@@ -12,7 +12,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [14.x, 16.x, 18.x]
+        node-version: [14.x, 16.x, 18.x, 20.x]
 
     steps:
       - name: Checkout

examples/index.js

@@ -10,7 +10,7 @@ async function renderToBmp(dicomFile, bmpFile) {
   // Optionally, provide the path to WebAssembly module.
   // If not provided, the module is trying to be resolved within the same directory.
   await NativePixelDecoder.initializeAsync({
-    webAssemblyModulePathOrUrl: path.resolve(__dirname, '../wasm/bin/native-pixel-decoder.wasm'),
+    webAssemblyModulePathOrUrl: path.resolve(__dirname, './../wasm/bin/native-pixel-decoder.wasm'),
   });
 
   const fileBuffer = fs.readFileSync(dicomFile);

examples/index.ts

@@ -9,7 +9,7 @@ async function renderToBmp(dicomFile: string, bmpFile: string) {
   // Optionally, provide the path to WebAssembly module.
   // If not provided, the module is trying to be resolved within the same directory.
   await NativePixelDecoder.initializeAsync({
-    webAssemblyModulePathOrUrl: path.resolve(__dirname, '../wasm/bin/native-pixel-decoder.wasm'),
+    webAssemblyModulePathOrUrl: path.resolve(__dirname, './../wasm/bin/native-pixel-decoder.wasm'),
   });
 
   const fileBuffer = fs.readFileSync(dicomFile);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dcmjs-imaging",
-  "version": "0.1.15",
+  "version": "0.1.16",
   "description": "DICOM image and overlay rendering for Node.js and browser using dcmjs",
   "main": "build/dcmjs-imaging.min.js",
   "module": "build/dcmjs-imaging.min.js",
@@ -15,7 +15,7 @@
     "doc:generate": "npm run clean:docs && jsdoc -c .jsdocrc.json",
     "start:examples:node:js": "node examples/index.js",
     "start:examples:node:ts": "ts-node examples/index.ts",
-    "start:examples:web": "webpack serve --port 8080 --open --no-client-overlay-warnings",
+    "start:examples:web": "webpack serve --port 8080 --open --no-client-overlay-warnings --no-client-overlay-errors",
     "build": "npm run version && npm run lint && npm run test && npm run coverage && npm run webpack",
     "start": "npm run webpack",
     "version": "node -p -e \"'module.exports = \\'' + require('./package.json').version + '\\';'\" > src/version.js",
@@ -43,7 +43,7 @@
   },
   "homepage": "https://github.com/PantelisGeorgiadis/dcmjs-imaging",
   "dependencies": {
-    "dcmjs": "^0.29.5",
+    "dcmjs": "^0.29.6",
     "loglevel": "^1.8.1",
     "loglevel-plugin-prefix": "^0.8.4"
   },
@@ -56,27 +56,27 @@
     "clang-format": "^1.8.0",
     "copy-webpack-plugin": "^11.0.0",
     "docdash": "^2.0.1",
-    "eslint": "^8.36.0",
+    "eslint": "^8.39.0",
     "jsdoc": "^4.0.2",
-    "karma": "^6.4.1",
+    "karma": "^6.4.2",
     "karma-browserify": "^8.1.0",
     "karma-chai": "^0.1.0",
-    "karma-chrome-launcher": "^3.1.1",
+    "karma-chrome-launcher": "^3.2.0",
     "karma-mocha": "^2.0.1",
     "karma-mocha-reporter": "^2.2.5",
     "karma-sinon": "^1.0.5",
     "mocha": "^10.2.0",
-    "open-cli": "^7.1.0",
+    "open-cli": "^7.2.0",
     "pako": "^2.1.0",
-    "prettier": "^2.8.4",
+    "prettier": "^2.8.8",
     "shx": "^0.3.4",
-    "sinon": "^15.0.1",
+    "sinon": "^15.0.4",
     "terser-webpack-plugin": "^5.3.7",
     "ts-node": "^10.9.1",
-    "tsd": "^0.27.0",
-    "typescript": "^4.9.5",
-    "webpack": "^5.76.1",
-    "webpack-cli": "^5.0.1",
-    "webpack-dev-server": "^4.11.1"
+    "tsd": "^0.28.1",
+    "typescript": "^5.0.4",
+    "webpack": "^5.81.0",
+    "webpack-cli": "^5.0.2",
+    "webpack-dev-server": "^4.13.3"
   }
 }

src/Cache.js

@@ -1,5 +1,5 @@
-const { PixelPipeline } = require('./Pixel');
 const { LutPipeline } = require('./Lut');
+const { PixelPipeline } = require('./Pixel');
 
 //#region LruCache
 class LruCache {
@@ -132,5 +132,5 @@ class LutPipelineCache extends LruCache {
 //#endregion
 
 //#region Exports
-module.exports = { PixelPipelineCache, LutPipelineCache };
+module.exports = { LutPipelineCache, PixelPipelineCache };
 //#endregion

src/Constants.js

@@ -118,12 +118,12 @@ Object.freeze(OverlayColor);
 
 //#region Exports
 module.exports = {
-  TransferSyntax,
-  RenderableTransferSyntaxes,
+  OverlayColor,
   PhotometricInterpretation,
-  PlanarConfiguration,
   PixelRepresentation,
+  PlanarConfiguration,
+  RenderableTransferSyntaxes,
   StandardColorPalette,
-  OverlayColor,
+  TransferSyntax,
 };
 //#endregion

src/DicomImage.js

@@ -1,20 +1,20 @@
 const {
-  RenderableTransferSyntaxes,
-  TransferSyntax,
   OverlayColor,
   PhotometricInterpretation,
+  RenderableTransferSyntaxes,
   StandardColorPalette,
+  TransferSyntax,
 } = require('./Constants');
-const { PixelPipelineCache, LutPipelineCache } = require('./Cache');
+const { LutPipelineCache, PixelPipelineCache } = require('./Cache');
 const {
-  LutPipeline,
   GrayscaleLutPipeline,
-  RgbColorLutPipeline,
+  LutPipeline,
   PaletteColorLutPipeline,
+  RgbColorLutPipeline,
 } = require('./Lut');
 const { Pixel, PixelPipeline } = require('./Pixel');
+const { G60xxOverlay, Overlay } = require('./Overlay');
 const WindowLevel = require('./WindowLevel');
-const Overlay = require('./Overlay');
 
 const dcmjs = require('dcmjs');
 const { DicomMetaDictionary, DicomMessage, ReadBufferStream, WriteBufferStream } = dcmjs.data;
@@ -316,13 +316,15 @@ class DicomImage {
       if (overlays.length > 0) {
         for (let i = 0; i < overlays.length; i++) {
           const overlay = overlays[i];
-          if (
-            frame + 1 < overlay.getFrameOrigin() ||
-            frame + 1 > overlay.getFrameOrigin() + overlay.getNumberOfFrames() - 1
-          ) {
-            continue;
+          if (overlay instanceof G60xxOverlay) {
+            if (
+              frame + 1 < overlay.getFrameOrigin() ||
+              frame + 1 > overlay.getFrameOrigin() + overlay.getNumberOfFrames() - 1
+            ) {
+              continue;
+            }
+            overlay.render(renderedPixels, pixel.getWidth(), pixel.getHeight(), OverlayColor);
           }
-          overlay.render(renderedPixels, pixel.getWidth(), pixel.getHeight(), OverlayColor);
         }
       }
     }

src/Lut.js

@@ -1,6 +1,6 @@
+const { PhotometricInterpretation, StandardColorPalette } = require('./Constants');
 const ColorPalette = require('./ColorPalette');
 const WindowLevel = require('./WindowLevel');
-const { PhotometricInterpretation, StandardColorPalette } = require('./Constants');
 
 //#region Lut
 class Lut {
@@ -1137,18 +1137,18 @@ class PaletteColorLutPipeline extends LutPipeline {
 
 //#region Exports
 module.exports = {
+  CachedLut,
+  CompositeLut,
+  GrayscaleLutPipeline,
+  InvertLut,
   Lut,
   LutPipeline,
-  RescaleLut,
-  VoiLut,
-  InvertLut,
-  PaletteColorLut,
   OutputLut,
-  CompositeLut,
+  PaletteColorLut,
+  PaletteColorLutPipeline,
   PreCalculatedLut,
-  CachedLut,
-  GrayscaleLutPipeline,
+  RescaleLut,
   RgbColorLutPipeline,
-  PaletteColorLutPipeline,
+  VoiLut,
 };
 //#endregion

src/NativePixelDecoder.js

@@ -510,8 +510,8 @@ class NativePixelDecoder {
       throw new Error('NativePixelDecoder module is not initialized');
     }
 
-    const heap8 = new Uint8Array(this.wasmApi.wasmMemory.buffer);
-    const stringData = new Uint8Array(heap8.buffer, pointer, len);
+    const heap = new Uint8Array(this.wasmApi.wasmMemory.buffer);
+    const stringData = new Uint8Array(heap.buffer, pointer, len);
     let str = '';
     for (let i = 0; i < len; i++) {
       str += String.fromCharCode(stringData[i]);

src/Overlay.js

@@ -1,17 +1,62 @@
 const { SingleBitPixelPipeline } = require('./Pixel');
+const log = require('./log');
 
 const dcmjs = require('dcmjs');
 const { Tag } = dcmjs.data;
 
 //#region Overlay
 class Overlay {
   /**
-   * Creates an instance of Overlay.
+   * Renders the overlay on top of a rendered image.
+   * @method
+   * @param {Int32Array} renderedPixels - Rendered ABGR image to be updated with the overlay.
+   * @param {number} width - Rendered image width.
+   * @param {number} height - Rendered image height.
+   * @param {number} color - Overlay color packed in an integer.
+   */
+  // eslint-disable-next-line no-unused-vars
+  render(renderedPixels, width, height, color) {
+    throw new Error('render should be implemented');
+  }
+
+  /**
+   * Creates an array of overlay objects based on the image elements.
+   * @method
+   * @static
+   * @param {Object} elements - DICOM image elements.
+   * @returns {Array<Overlay>} Array of overlay objects.
+   */
+  static fromDicomImageElements(elements) {
+    const ret = [];
+
+    // G60xx
+    const elementKeys = Object.keys(elements);
+    for (let i = 0; i < elementKeys.length; i++) {
+      const element = elementKeys[i];
+      const tag = Tag.fromString(element);
+      if (tag.element() === 0x0010) {
+        if (tag.group() >= 0x6000 && tag.group() <= 0x60ff && tag.group() % 2 === 0) {
+          ret.push(new G60xxOverlay(elements, tag.group()));
+        }
+      }
+    }
+
+    return ret;
+  }
+}
+//#endregion
+
+//#region G60xxOverlay
+class G60xxOverlay extends Overlay {
+  /**
+   * Creates an instance of G60xxOverlay.
    * @constructor
    * @param {Object} elements - DICOM image elements.
    * @param {number} group - Overlay group.
    */
   constructor(elements, group) {
+    super();
+
     this.group = group;
 
     this.height = this._getElement(elements, Tag.fromNumbers(group, 0x0010).toCleanString()) || 0;
@@ -175,12 +220,15 @@ class Overlay {
    */
   render(renderedPixels, width, height, color) {
     if (!this.getData()) {
+      log.warn('G60xx overlay: No data. Skipping...');
       return;
     }
     if (!this.getWidth() || !this.getHeight()) {
+      log.warn('G60xx overlay: No width or height. Skipping...');
       return;
     }
     if (!this.getBitsAllocated()) {
+      log.warn('G60xx overlay: No bits allocated. Skipping...');
       return;
     }
 
@@ -215,29 +263,6 @@ class Overlay {
     }
   }
 
-  /**
-   * Creates an array of overlay objects based on the image elements.
-   * @method
-   * @static
-   * @param {Object} elements - DICOM image elements.
-   * @returns {Array<Overlay>} Array of overlay objects.
-   */
-  static fromDicomImageElements(elements) {
-    const ret = [];
-    const elementKeys = Object.keys(elements);
-    for (let i = 0; i < elementKeys.length; i++) {
-      const element = elementKeys[i];
-      const tag = Tag.fromString(element);
-      if (tag.element() === 0x0010) {
-        if (tag.group() >= 0x6000 && tag.group() <= 0x60ff && tag.group() % 2 === 0) {
-          ret.push(new Overlay(elements, tag.group()));
-        }
-      }
-    }
-
-    return ret;
-  }
-
   //#region Private Methods
   /**
    * Gets element value.
@@ -254,5 +279,5 @@ class Overlay {
 //#endregion
 
 //#region Exports
-module.exports = Overlay;
+module.exports = { G60xxOverlay, Overlay };
 //#endregion

src/Pixel.js

@@ -1,7 +1,7 @@
 const {
   PhotometricInterpretation,
-  PlanarConfiguration,
   PixelRepresentation,
+  PlanarConfiguration,
   TransferSyntax,
 } = require('./Constants');
 const Histogram = require('./Histogram');
@@ -1400,11 +1400,11 @@ class PixelConverter {
 
 //#region Exports
 module.exports = {
+  ColorPixelPipeline,
+  GrayscalePixelPipeline,
   Pixel,
+  PixelConverter,
   PixelPipeline,
-  GrayscalePixelPipeline,
   SingleBitPixelPipeline,
-  ColorPixelPipeline,
-  PixelConverter,
 };
 //#endregion

src/WindowLevel.js

@@ -86,9 +86,9 @@ class WindowLevel {
   static fromDicomImageElements(elements) {
     const ret = [];
 
-    let windowCenters = this._getElement(elements, 'WindowCenter');
-    let windowWidths = this._getElement(elements, 'WindowWidth');
-    let descriptions = this._getElement(elements, 'WindowCenterWidthExplanation');
+    let windowCenters = elements['WindowCenter'];
+    let windowWidths = elements['WindowWidth'];
+    let descriptions = elements['WindowCenterWidthExplanation'];
 
     if (windowCenters === undefined || windowWidths === undefined) {
       return ret;
@@ -120,20 +120,6 @@ class WindowLevel {
 
     return ret;
   }
-
-  //#region Private Methods
-  /**
-   * Gets element value.
-   * @method
-   * @static
-   * @param {Object} elements - Elements.
-   * @param {string} tag - Element tag.
-   * @returns {string|undefined} Element value or undefined if element doesn't exist.
-   */
-  static _getElement(elements, tag) {
-    return elements[tag];
-  }
-  //#endregion
 }
 //#endregion