feat: pdf render as pngs (#290)

* feat: pdf render as pngs

* fix: ci

* Update docs

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

.github/workflows/build-docs.yml

@@ -14,17 +14,17 @@ jobs:
     steps:
       # CLone repo at current branch
       - name: Clone repo
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
         with:
           persist-credentials: false
           ref: ${{ github.head_ref }}
           token: ${{ secrets.GIT_TOKEN }}
 
       # Setup node environment
       - name: Setup Node.js environment
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
-          node-version: "14"
+          node-version: "20"
 
       # Install node modules
       - name: Install node modules
@@ -33,7 +33,7 @@ jobs:
 
       # Clone template
       - name: Clone docdash template
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
         with:
           repository: clenemt/docdash
           path: ./template/docdash/

.github/workflows/deploy.yml

@@ -1,5 +1,3 @@
-# This is a basic workflow to help you get started with Actions
-
 name: CI-Release
 
 # Controls when the action will run. Triggers the workflow on push or pull request
@@ -18,11 +16,13 @@ jobs:
     # Steps represent a sequence of tasks that will be executed as part of the job
     steps:
       # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
       # Setup node environment
       - name: Setup Node.js environment
-        uses: actions/[email protected]
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
 
       # Clean examples and docs file
       - name: Clean examples and docs file

README.md

@@ -8,9 +8,9 @@
 
 ## Dicom Image Toolkit for CornerstoneJS
 
-### Current version: 2.1.0
+### Current version: 2.1.1
 
-### Latest Published Release: 2.1.0
+### Latest Published Release: 2.1.1
 
 This library provides common DICOM functionalities to be used in web-applications: it's wrapper that simplifies the use of cornerstone-js environment.
 

dist/imaging/imageRendering.d.ts

@@ -40,9 +40,10 @@ export declare function loadAndCacheImages(series: Series, callback: (payload: {
  * @function renderDICOMPDF
  * @param {Object} seriesStack - The original series data object
  * @param {String} elementId - The html div id used for rendering or its DOM HTMLElement
+ * @param {Boolean} convertToImage - An optional flag to convert pdf to image, default is false
  * @returns {Promise} - Return a promise which will resolve when pdf is displayed
  */
-export declare const renderDICOMPDF: (seriesStack: Series, elementId: string | HTMLElement) => Promise<true>;
+export declare const renderDICOMPDF: (seriesStack: Series, elementId: string | HTMLElement, convertToImage?: boolean) => Promise<true>;
 /**
  * Render an image (png or jpg) from File on a html div using cornerstone
  * @instance
@@ -51,7 +52,7 @@ export declare const renderDICOMPDF: (seriesStack: Series, elementId: string | H
  * @param {String} elementId - The html div id used for rendering or its DOM HTMLElement
  * @returns {Promise} - Return a promise which will resolve when image is displayed
  */
-export declare const renderFileImage: (file: File, elementId: string | HTMLElement) => Promise<unknown> | undefined;
+export declare const renderFileImage: (file: File, elementId: string | HTMLElement) => Promise<true>;
 /**
  * Render an image (png or jpg) from web url on a html div using cornerstone
  * @instance

dist/imaging/loaders/fileLoader.d.ts

@@ -31,3 +31,12 @@ export declare const populateFileManager: (file: File) => void;
  * @return {String} current file image id
  */
 export declare const getFileImageId: (file: File) => string | null;
+/**
+ * Return the common data file manager
+ * @instance
+ * @function getFileManager
+ * @returns {Object} the file manager
+ */
+export declare const getFileManager: () => {
+    [key: string]: string;
+};

dist/imaging/parsers/pdf.d.ts

@@ -0,0 +1,27 @@
+/** @module imaging/parsers/pdf
+ *  @desc  This file provides functionalities for
+ *         managing pdf files using pdfjs-dist library
+ */
+import { pdfType } from "../types";
+/**
+ * This module provides the following functions to be exported:
+ * convertToPNG(pdf, pageNumber)
+ * generateFiles(fileURL)
+ */
+/**
+ * Convert a pdf page to a png image in base64 format
+ * @instance
+ * @function convertToPNG
+ * @param {pdfType} pdf - The pdf object
+ * @param {number} pageNumber - The page number to be converted
+ * @returns {string} The png image in base64 format
+ */
+export declare const convertToPNG: (pdf: pdfType, pageNumber: number) => Promise<string>;
+/**
+ * Generate an array of files from a pdf file
+ * @instance
+ * @function generateFiles
+ * @param {string} fileURL - The url of the pdf file
+ * @returns {File[]} An array of files
+ */
+export declare const generateFiles: (fileURL: string) => Promise<File[]>;

dist/imaging/tools/custom/contourTool.d.ts

@@ -380,15 +380,15 @@ export class ContoursTool {
      */
     fireModifiedEvent(element: any, measurementData: any): void;
     fireCompletedEvent(element: any, measurementData: any): void;
-    set spacing(arg: any);
+    set spacing(value: any);
     get spacing(): any;
-    set activeHandleRadius(arg: any);
+    set activeHandleRadius(value: any);
     get activeHandleRadius(): any;
-    set completeHandleRadius(arg: any);
+    set completeHandleRadius(value: any);
     get completeHandleRadius(): any;
-    set alwaysShowHandles(arg: any);
+    set alwaysShowHandles(value: any);
     get alwaysShowHandles(): any;
-    set invalidColor(arg: any);
+    set invalidColor(value: any);
     get invalidColor(): any;
     /**
      * Ends the active drawing loop and removes the polygon.

dist/imaging/tools/main.d.ts

@@ -15,7 +15,7 @@ declare const initializeCSTools: (settings?: ToolSettings, style?: ToolStyle) =>
 /**
  * Create stack object to sync stack tools
  * @function csToolsCreateStack
- * @param {HTMLElement} element - The target hmtl element.
+ * @param {HTMLElement} element - The target html element.
  * @param {Array?} imageIds - Stack image ids.
  * @param {String} currentImageId - The current image id.
  */

dist/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference path="../decs.d.ts" />
 declare const VERSION: string;
 import cornerstone from "cornerstone-core";
 import cornerstoneTools from "cornerstone-tools";
@@ -28,8 +29,8 @@ import { buildNrrdImage, getNrrdImageId, loadNrrdImage, getImageIdFromSlice, get
 import { getDicomImageId, cacheImage, cacheImages } from "./imaging/loaders/dicomLoader";
 import { loadReslicedImage } from "./imaging/loaders/resliceLoader";
 import { loadMultiFrameImage, buildMultiFrameImage, getMultiFrameImageId, clearMultiFrameCache } from "./imaging/loaders/multiframeLoader";
-import { fileManager, resetFileLoader, resetFileManager, populateFileManager, getFileImageId } from "./imaging/loaders/fileLoader";
+import { getFileManager, resetFileLoader, resetFileManager, populateFileManager, getFileImageId } from "./imaging/loaders/fileLoader";
 import { getColormapsList, applyColorMap, addColorMap, fillPixelData, HSVToRGB } from "./imaging/imageColormaps";
 import { saveAnnotations, loadAnnotations } from "./imaging/tools/io";
 import { addMouseKeyHandlers, removeMouseKeyHandlers, toggleMouseToolsListeners } from "./imaging/tools/interaction";
-export { VERSION, cornerstone, cornerstoneTools, parseDicom, segModule, cornerstoneDICOMImageLoader, checkAndClearMemory, checkMemoryAllocation, getUsedMemory, getAvailableMemory, getPerformanceMonitor, activatePerformanceMonitor, deactivatePerformanceMonitor, store, parseECG, renderECG, unrenderECG, syncECGFrame, updateECGFrame, getDefaultECGLayout, getImagePresets, setImagePreset, setImageCustomPreset, getNormalOrientation, getMinPixelValue, getMaxPixelValue, getPixelRepresentation, getTypedArrayFromDataType, getSortedStack, randomId, getMeanValue, getReslicedMetadata, getReslicedPixeldata, getDistanceBetweenSlices, getImageMetadata, buildHeader, getCachedPixelData, buildData, buildDataAsync, importNRRDImage, exportImageToBase64, anonymize, buildLayer, updateLayer, getActiveLayer, setActiveLayer, initializeImageLoader, initializeWebImageLoader, initializeFileImageLoader, registerNRRDImageLoader, registerResliceLoader, registerMultiFrameImageLoader, updateLoadedStack, readFile, readFiles, parseDataSet, clearImageParsing, clearImageCache, loadAndCacheImages, renderFileImage, renderDICOMPDF, renderWebImage, disableViewport, unloadViewport, resizeViewport, renderImage, updateImage, resetViewports, updateViewportData, toggleMouseToolsListeners, storeViewportData, invertImage, flipImageHorizontal, flipImageVertical, rotateImageLeft, rotateImageRight, resliceSeries, getColormapsList, applyColorMap, addColorMap, fillPixelData, HSVToRGB, parseContours, updateLarvitarManager, populateLarvitarManager, getLarvitarManager, getLarvitarImageTracker, resetLarvitarManager, removeSeriesFromLarvitarManager, getSeriesDataFromLarvitarManager, getImageFrame, getSopInstanceUIDFromLarvitarManager, buildNrrdImage, getNrrdImageId, loadNrrdImage, getImageIdFromSlice, getSliceNumberFromImageId, getNrrdSerieDimensions, loadReslicedImage, getDicomImageId, cacheImage, cacheImages, loadMultiFrameImage, buildMultiFrameImage, getMultiFrameImageId, clearMultiFrameCache, fileManager, resetFileLoader, resetFileManager, populateFileManager, getFileImageId, addDiameterTool, addContoursTool, addMaskEditingTool, getCurrentMaskData, addStackStateToElement, addSeedsTool, clearMeasurements, getToolState, clearToolStateByName, updateDiameterTool, addToolStateSingleSlice, clearCornerstoneElements, syncToolStack, updateStackToolState, setSegmentationConfig, csToolsCreateStack, csToolsUpdateImageIds, csToolsUpdateImageIndex, initializeCSTools, setToolsStyle, addDefaultTools, addTool, setToolActive, setToolDisabled, setToolEnabled, setToolPassive, exportAnnotations, DEFAULT_TOOLS, dvTools, getDefaultToolsByType, setDefaultToolsProps, registerExternalTool, saveAnnotations, loadAnnotations, addMouseKeyHandlers, removeMouseKeyHandlers, initSegmentationModule, addSegmentationMask, setActiveLabelmap, setActiveSegment, undoLastStroke, redoLastStroke, setBrushProps, hexToRgb, rgbToHex, clearSegmentationState, deleteMask, enableBrushTool, disableBrushTool, toggleContourMode, toggleVisibility, getActiveLabelmapBuffer };
+export { VERSION, cornerstone, cornerstoneTools, parseDicom, segModule, cornerstoneDICOMImageLoader, checkAndClearMemory, checkMemoryAllocation, getUsedMemory, getAvailableMemory, getPerformanceMonitor, activatePerformanceMonitor, deactivatePerformanceMonitor, store, parseECG, renderECG, unrenderECG, syncECGFrame, updateECGFrame, getDefaultECGLayout, getImagePresets, setImagePreset, setImageCustomPreset, getNormalOrientation, getMinPixelValue, getMaxPixelValue, getPixelRepresentation, getTypedArrayFromDataType, getSortedStack, randomId, getMeanValue, getReslicedMetadata, getReslicedPixeldata, getDistanceBetweenSlices, getImageMetadata, buildHeader, getCachedPixelData, buildData, buildDataAsync, importNRRDImage, exportImageToBase64, anonymize, buildLayer, updateLayer, getActiveLayer, setActiveLayer, initializeImageLoader, initializeWebImageLoader, initializeFileImageLoader, registerNRRDImageLoader, registerResliceLoader, registerMultiFrameImageLoader, updateLoadedStack, readFile, readFiles, parseDataSet, clearImageParsing, clearImageCache, loadAndCacheImages, renderFileImage, renderDICOMPDF, renderWebImage, disableViewport, unloadViewport, resizeViewport, renderImage, updateImage, resetViewports, updateViewportData, toggleMouseToolsListeners, storeViewportData, invertImage, flipImageHorizontal, flipImageVertical, rotateImageLeft, rotateImageRight, resliceSeries, getColormapsList, applyColorMap, addColorMap, fillPixelData, HSVToRGB, parseContours, updateLarvitarManager, populateLarvitarManager, getLarvitarManager, getLarvitarImageTracker, resetLarvitarManager, removeSeriesFromLarvitarManager, getSeriesDataFromLarvitarManager, getImageFrame, getSopInstanceUIDFromLarvitarManager, buildNrrdImage, getNrrdImageId, loadNrrdImage, getImageIdFromSlice, getSliceNumberFromImageId, getNrrdSerieDimensions, loadReslicedImage, getDicomImageId, cacheImage, cacheImages, loadMultiFrameImage, buildMultiFrameImage, getMultiFrameImageId, clearMultiFrameCache, getFileManager, resetFileLoader, resetFileManager, populateFileManager, getFileImageId, addDiameterTool, addContoursTool, addMaskEditingTool, getCurrentMaskData, addStackStateToElement, addSeedsTool, clearMeasurements, getToolState, clearToolStateByName, updateDiameterTool, addToolStateSingleSlice, clearCornerstoneElements, syncToolStack, updateStackToolState, setSegmentationConfig, csToolsCreateStack, csToolsUpdateImageIds, csToolsUpdateImageIndex, initializeCSTools, setToolsStyle, addDefaultTools, addTool, setToolActive, setToolDisabled, setToolEnabled, setToolPassive, exportAnnotations, DEFAULT_TOOLS, dvTools, getDefaultToolsByType, setDefaultToolsProps, registerExternalTool, saveAnnotations, loadAnnotations, addMouseKeyHandlers, removeMouseKeyHandlers, initSegmentationModule, addSegmentationMask, setActiveLabelmap, setActiveSegment, undoLastStroke, redoLastStroke, setBrushProps, hexToRgb, rgbToHex, clearSegmentationState, deleteMask, enableBrushTool, disableBrushTool, toggleContourMode, toggleVisibility, getActiveLabelmapBuffer };

docs/examples/4d.html

@@ -45,7 +45,145 @@
         <pre class="h-100">
           <code class="javascript" style="background-color: #000000">
           <p style="font-size:0.6vw;">
-
+            let currentMode = "stack";
+            let demoFiles = [];
+            let counter = 0;
+            let animation = false;
+            let animationId = null;
+            let frames_number = 0;
+
+            const getDemoFileNames = function () {
+              let demoFileList = [];
+              for (let i = 1; i < 195; i++) {
+                let filename = "image_(" + i + ").dcm";
+                demoFileList.push(filename);
+              }
+              return demoFileList;
+            };
+
+            // init all
+            larvitar.initializeImageLoader();
+            larvitar.initializeCSTools();
+            larvitar.store.initialize();
+            larvitar.store.addViewport("viewer");
+
+            // create files from the demo folder
+            async function createFile(fileName, cb) {
+              let response = await fetch("./demo/4d/" + fileName);
+              let data = await response.blob();
+              let file = new File([data], fileName);
+              demoFiles.push(file);
+              counter++;
+              if (counter == 194) {
+                cb();
+              }
+            }
+
+            // handle button to change scroll modality
+            function triggerHandleToggle() {
+              let newMode = currentMode === "stack" ? "slice" : "stack";
+              let newModeTxt = newMode === "stack" ? "Slices" : "Frames";
+              if (newMode === "stack") {
+                animation = false;
+                clearInterval(animationId);
+              }
+              larvitar.DEFAULT_TOOLS["CustomMouseWheelScroll"].currentMode = newMode;
+              larvitar.DEFAULT_TOOLS[
+                "CustomMouseWheelScroll"
+              ].configuration.currentMode = newMode;
+              currentMode = newMode;
+              $("#toggleButton").html("Scroll Mode: " + newModeTxt);
+              let animationText =
+                newMode === "stack" ? "" : "Press 'p' to start/stop animation";
+              $("#animation").html(animationText);
+            }
+            // Attach click event to the button
+            const toggleButton = document.getElementById("toggleButton");
+            toggleButton.addEventListener("click", triggerHandleToggle);
+
+            // Update UI regarding timeId, timestamp and sliceId
+            function changeStamps() {
+              $("#image-time").html(
+                "Image Time Id: " +
+                  larvitar.store.get(["viewports", "viewer", "timeId"]) +
+                  " of " +
+                  larvitar.store.get(["viewports", "viewer", "maxTimeId"])
+              );
+              $("#timestamp").html(
+                "Image Time: " +
+                  larvitar.store.get(["viewports", "viewer", "timestamp"])
+              );
+              $("#slicenum").html(
+                "Slice Number: " +
+                  parseInt(
+                    Math.floor(
+                      larvitar.store.get(["viewports", "viewer", "sliceId"]) /
+                        frames_number
+                    ) + 1
+                  ) +
+                  " of 2"
+              );
+            }
+
+            // main render function
+            function renderSerie() {
+              larvitar.readFiles(demoFiles).then(seriesStack => {
+                let seriesId = _.keys(seriesStack)[0];
+                let serie = seriesStack[seriesId];
+                larvitar.populateLarvitarManager(seriesId, serie);
+                let manager = larvitar.getLarvitarManager();
+                let multiFrameSerie = manager[seriesId];
+                let frameId = 0;
+                larvitar
+                  .renderImage(multiFrameSerie, "viewer", frameId)
+                  .then(() => {
+                    frames_number = manager[seriesId].numberOfTemporalPositions;
+                    larvitar.addDefaultTools();
+                    larvitar.setToolActive("CustomMouseWheelScroll");
+                    // add information on UI regarding timeId, timestamp and sliceId
+                    changeStamps();
+
+                    // add event listener to the wheel to update the UI
+                    document
+                      .getElementById("viewer")
+                      .addEventListener("wheel", function (event) {
+                        changeStamps();
+                      });
+
+                    // add event listener to the keypress to start/stop the animation
+                    document.onkeypress = function (e) {
+                      if (e.key === "p" && currentMode === "slice") {
+                        animation = !animation;
+                        if (animation) {
+                          let sliceId = larvitar.store.get([
+                            "viewports",
+                            "viewer",
+                            "sliceId"
+                          ]);
+                          animationId = setInterval(function () {
+                            const sliceNumber = Math.floor(sliceId / frames_number);
+                            sliceId =
+                              sliceId === (sliceNumber + 1) * frames_number - 1
+                                ? sliceId - (frames_number - 1)
+                                : sliceId + 1;
+
+                            larvitar.updateImage(serie, "viewer", sliceId, false);
+                            changeStamps();
+                          }, 100);
+                        } else {
+                          clearInterval(animationId);
+                        }
+                      }
+                    };
+                  })
+                  .catch(err => console.error(err));
+              });
+            }
+
+            let demoFileList = getDemoFileNames();
+            _.each(demoFileList, function (demoFile) {
+              createFile(demoFile, renderSerie);
+            });
           </p>
           </code>
         </pre>

docs/examples/defaultTools.html

@@ -254,7 +254,7 @@
             tool_counter == tools.length - 1 ? 0 : tool_counter + increment;
           tool_counter = tool_counter < 0 ? 0 : tool_counter;
           let tool = tools[tool_counter];
-          larvitar.setToolActive(tool);
+          larvitar.setToolActive(tool, { mouseButtonMask: 1 });
           $("#active-tool").html("Active Tool: " + tool);
         }
       };