Merge branch 'v0.32'

changelog.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [v0.32.4](https://github.com/ivmartel/dwv/releases/tag/v0.32.4) - 18/03/2024
+
+### Fixed
+
+- event.preventDefault for wheel events [#1632](https://github.com/ivmartel/dwv/issues/1632)
+
+## [v0.32.3](https://github.com/ivmartel/dwv/releases/tag/v0.32.3) - 22/09/2023
+
+### Added
+
+- Add support for writing DICOM with unknown VR [#1507](https://github.com/ivmartel/dwv/issues/1481)
+
 ## [v0.32.2](https://github.com/ivmartel/dwv/releases/tag/v0.32.2) - 04/09/2023
 
 ### Added

dist/dwv.d.ts

@@ -18,9 +18,9 @@ export declare function addTagsToDictionary(group: string, tags: object): void;
  * // create the dwv app
  * const app = new dwv.App();
  * // initialise
- * const viewConfig0 = new ViewConfig('layerGroup0');
+ * const viewConfig0 = new dwv.ViewConfig('layerGroup0');
  * const viewConfigs = {'*': [viewConfig0]};
- * const options = new AppOptions(viewConfigs);
+ * const options = new dwv.AppOptions(viewConfigs);
  * app.init(options);
  * // load dicom data
  * app.loadURLs([
@@ -170,9 +170,9 @@ export declare class App {
      * // create the dwv app
      * const app = new dwv.App();
      * // initialise
-     * const viewConfig0 = new ViewConfig('layerGroup0');
+     * const viewConfig0 = new dwv.ViewConfig('layerGroup0');
      * const viewConfigs = {'*': [viewConfig0]};
-     * const options = new AppOptions(viewConfigs);
+     * const options = new dwv.AppOptions(viewConfigs);
      * options.viewOnFirstLoadItem = false;
      * app.init(options);
      * // render button
@@ -721,18 +721,24 @@ export declare class DicomParser {
  * DICOM writer.
  *
  * @example
+ * // add link to html
+ * const link = document.createElement("a");
+ * link.appendChild(document.createTextNode("download"));
+ * const div = document.getElementById("dwv");
+ * div.appendChild(link);
  * // XMLHttpRequest onload callback
  * const onload = function (event) {
- *   const parser = new DicomParser();
+ *   const parser = new dwv.DicomParser();
  *   parser.parse(event.target.response);
- *   // create writer with parser data elements
- *   const writer = new DicomWriter(parser.getDicomElements());
- *   // create modified buffer and put it in a Blol
- *   const blob = new Blob([writer.getBuffer()], {type: 'application/dicom'});
- *   // example download link
- *   const element = document.getElementById("download");
- *   element.href = URL.createObjectURL(blob);
- *   element.download = "anonym.dcm";
+ *   // create writer
+ *   const writer = new dwv.DicomWriter();
+ *   // get buffer using default rules
+ *   const dicomBuffer = writer.getBuffer(parser.getDicomElements());
+ *   // create blob
+ *   const blob = new Blob([dicomBuffer], {type: 'application/dicom'});
+ *   // add blob to download link
+ *   link.href = URL.createObjectURL(blob);
+ *   link.download = "anonym.dcm";
  * };
  * // DICOM file request
  * const request = new XMLHttpRequest();
@@ -2832,9 +2838,9 @@ export declare class Vector3D {
  *   const dicomParser = new dwv.DicomParser();
  *   dicomParser.parse(event.target.response);
  *   // create the image object
- *   const image = createImage(dicomParser.getDicomElements());
+ *   const image = dwv.createImage(dicomParser.getDicomElements());
  *   // create the view
- *   const view = createView(dicomParser.getDicomElements(), image);
+ *   const view = dwv.createView(dicomParser.getDicomElements(), image);
  *   // setup canvas
  *   const canvas = document.createElement('canvas');
  *   canvas.width = 256;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dwv",
-  "version": "0.32.2",
+  "version": "0.32.4",
   "description": "DICOM Web Viewer.",
   "keywords": [
     "DICOM",

resources/doc/jsdoc.conf.json

@@ -25,7 +25,7 @@
       "package": "package.json",
       "theme_opts": {
         "title": "DWV",
-        "footer": "<i>Documentation generated for dwv v0.32.2.</i>",
+        "footer": "<i>Documentation generated for dwv v0.32.4.</i>",
         "sections": [
           "Tutorials",
           "Namespaces",
@@ -50,7 +50,7 @@
         "codepen": {
           "enable_for": ["examples"],
           "options": {
-            "js_external": "https://github.com/ivmartel/dwv/releases/download/v0.32.2/dwv-0.32.2.min.js",
+            "js_external": "https://github.com/ivmartel/dwv/releases/download/v0.32.4/dwv-0.32.4.min.js",
             "html": "<div id='dwv'><div id='layerGroup0'></div></div>"
           }
         }

resources/doc/tutorials/examples.md

@@ -1,6 +1,6 @@
 ## Fiddle
 
-Some fiddles for you to play... Some are bundled with the code, scroll below the method arguments to see the example code.
+Some fiddles for you to play... Some are bundled with the code, scroll below the method arguments to see the example code. They all use the `dwv` prefix since the example are run in a pure javascript environment. This is not necessary in an es6 environment where you use the names defined when you import the classes.
 
 DICOM parsing:
  * [parser example #1](./DicomParser.html#DicomParser): parse DICOM data and display a tag

src/app/application.js

@@ -147,9 +147,9 @@ export class AppOptions {
  * // create the dwv app
  * const app = new dwv.App();
  * // initialise
- * const viewConfig0 = new ViewConfig('layerGroup0');
+ * const viewConfig0 = new dwv.ViewConfig('layerGroup0');
  * const viewConfigs = {'*': [viewConfig0]};
- * const options = new AppOptions(viewConfigs);
+ * const options = new dwv.AppOptions(viewConfigs);
  * app.init(options);
  * // load dicom data
  * app.loadURLs([
@@ -464,9 +464,9 @@ export class App {
    * // create the dwv app
    * const app = new dwv.App();
    * // initialise
-   * const viewConfig0 = new ViewConfig('layerGroup0');
+   * const viewConfig0 = new dwv.ViewConfig('layerGroup0');
    * const viewConfigs = {'*': [viewConfig0]};
-   * const options = new AppOptions(viewConfigs);
+   * const options = new dwv.AppOptions(viewConfigs);
    * options.viewOnFirstLoadItem = false;
    * app.init(options);
    * // render button

src/dicom/dicomParser.js

@@ -31,7 +31,7 @@ import {DataElement} from '../dicom/dataElement';
  * @returns {string} The version of the library.
  */
 export function getDwvVersion() {
-  return '0.32.2';
+  return '0.32.4';
 }
 
 /**
@@ -519,6 +519,18 @@ export function getDataElementPrefixByteSize(vr, isImplicit) {
   return isImplicit ? 8 : is32bitVLVR(vr) ? 12 : 8;
 }
 
+/**
+ * Is the input VR a known VR.
+ *
+ * @param {string} vr The vr to test.
+ * @returns {boolean} True if known.
+ */
+function isKnownVR(vr) {
+  const extraVrTypes = ['NONE', 'ox', 'xx', 'xs'];
+  const knownTypes = Object.keys(vrTypes).concat(extraVrTypes);
+  return knownTypes.includes(vr);
+}
+
 /**
  * DicomParser class.
  *
@@ -799,6 +811,13 @@ export class DicomParser {
       is32bitVL = true;
     }
 
+    // check vr
+    if (!isKnownVR(vr)) {
+      logger.warn('Unknown VR: ' + vr +
+        ' (for tag ' + tag.getKey() + '), treating as \'UN\'');
+      vr = 'UN';
+    }
+
     // Value Length (VL)
     let vl = 0;
     if (is32bitVL) {

src/dicom/dicomWriter.js

@@ -268,18 +268,24 @@ class DefaultTextEncoder {
  * DICOM writer.
  *
  * @example
+ * // add link to html
+ * const link = document.createElement("a");
+ * link.appendChild(document.createTextNode("download"));
+ * const div = document.getElementById("dwv");
+ * div.appendChild(link);
  * // XMLHttpRequest onload callback
  * const onload = function (event) {
- *   const parser = new DicomParser();
+ *   const parser = new dwv.DicomParser();
  *   parser.parse(event.target.response);
- *   // create writer with parser data elements
- *   const writer = new DicomWriter(parser.getDicomElements());
- *   // create modified buffer and put it in a Blol
- *   const blob = new Blob([writer.getBuffer()], {type: 'application/dicom'});
- *   // example download link
- *   const element = document.getElementById("download");
- *   element.href = URL.createObjectURL(blob);
- *   element.download = "anonym.dcm";
+ *   // create writer
+ *   const writer = new dwv.DicomWriter();
+ *   // get buffer using default rules
+ *   const dicomBuffer = writer.getBuffer(parser.getDicomElements());
+ *   // create blob
+ *   const blob = new Blob([dicomBuffer], {type: 'application/dicom'});
+ *   // add blob to download link
+ *   link.href = URL.createObjectURL(blob);
+ *   link.download = "anonym.dcm";
  * };
  * // DICOM file request
  * const request = new XMLHttpRequest();

src/gui/viewLayer.js

@@ -773,8 +773,10 @@ export class ViewLayer {
     // interaction events
     const names = InteractionEventNames;
     for (let i = 0; i < names.length; ++i) {
+      const eventName = names[i];
+      const passive = eventName !== 'wheel';
       this.#containerDiv.addEventListener(
-        names[i], this.#fireEvent, {passive: true});
+        names[i], this.#fireEvent, {passive: passive});
     }
   }
 

src/image/view.js

@@ -59,9 +59,9 @@ export function createView(elements, image) {
  *   const dicomParser = new dwv.DicomParser();
  *   dicomParser.parse(event.target.response);
  *   // create the image object
- *   const image = createImage(dicomParser.getDicomElements());
+ *   const image = dwv.createImage(dicomParser.getDicomElements());
  *   // create the view
- *   const view = createView(dicomParser.getDicomElements(), image);
+ *   const view = dwv.createView(dicomParser.getDicomElements(), image);
  *   // setup canvas
  *   const canvas = document.createElement('canvas');
  *   canvas.width = 256;

src/tools/opacity.js

@@ -13,10 +13,10 @@ import {App} from '../app/application';
  * // create the dwv app
  * const app = new dwv.App();
  * // initialise
- * const viewConfig0 = new ViewConfig('layerGroup0');
+ * const viewConfig0 = new dwv.ViewConfig('layerGroup0');
  * const viewConfigs = {'*': [viewConfig0]};
- * const options = new AppOptions(viewConfigs);
- * options.tools = {Opacity: new ToolConfig()};
+ * const options = new dwv.AppOptions(viewConfigs);
+ * options.tools = {Opacity: new dwv.ToolConfig()};
  * app.init(options);
  * // activate tool
  * app.addEventListener('load', function () {

src/tools/scroll.js

@@ -14,10 +14,10 @@ import {App} from '../app/application';
  * // create the dwv app
  * const app = new dwv.App();
  * // initialise
- * const viewConfig0 = new ViewConfig('layerGroup0');
+ * const viewConfig0 = new dwv.ViewConfig('layerGroup0');
  * const viewConfigs = {'*': [viewConfig0]};
- * const options = new AppOptions(viewConfigs);
- * options.tools = {Scroll: new ToolConfig()};
+ * const options = new dwv.AppOptions(viewConfigs);
+ * options.tools = {Scroll: new dwv.ToolConfig()};
  * app.init(options);
  * // activate tool
  * app.addEventListener('load', function () {
@@ -33,10 +33,10 @@ import {App} from '../app/application';
  * // create the dwv app
  * const app = new dwv.App();
  * // initialise
- * const viewConfig0 = new ViewConfig('layerGroup0');
+ * const viewConfig0 = new dwv.ViewConfig('layerGroup0');
  * const viewConfigs = {'*': [viewConfig0]};
- * const options = new AppOptions(viewConfigs);
- * options.tools = {Scroll: new ToolConfig()};
+ * const options = new dwv.AppOptions(viewConfigs);
+ * options.tools = {Scroll: new dwv.ToolConfig()};
  * app.init(options);
  * // create range
  * const range = document.createElement('input');
@@ -51,7 +51,7 @@ import {App} from '../app/application';
  *   const index = vc.getCurrentIndex();
  *   const values = index.getValues();
  *   values[2] = this.value;
- *   vc.setCurrentIndex(new Index(values));
+ *   vc.setCurrentIndex(new dwv.Index(values));
  * }
  * // activate tool and update range max on load
  * app.addEventListener('load', function () {

src/tools/scrollWheel.js

@@ -53,6 +53,9 @@ export class ScrollWheel {
       this.#wheelDeltaY = 0;
     }
 
+    // prevent default page scroll
+    event.preventDefault();
+
     const up = event.deltaY < 0 ? true : false;
 
     const layerDetails = getLayerDetailsFromEvent(event);

src/tools/windowLevel.js

@@ -17,10 +17,10 @@ import {App} from '../app/application';
  * // create the dwv app
  * const app = new dwv.App();
  * // initialise
- * const viewConfig0 = new ViewConfig('layerGroup0');
+ * const viewConfig0 = new dwv.ViewConfig('layerGroup0');
  * const viewConfigs = {'*': [viewConfig0]};
- * const options = new AppOptions(viewConfigs);
- * options.tools = {WindowLevel: new ToolConfig()};
+ * const options = new dwv.AppOptions(viewConfigs);
+ * options.tools = {WindowLevel: new dwv.ToolConfig()};
  * app.init(options);
  * // activate tool
  * app.addEventListener('load', function () {

src/tools/zoomPan.js

@@ -14,10 +14,10 @@ import {App} from '../app/application';
  * // create the dwv app
  * const app = new dwv.App();
  * // initialise
- * const viewConfig0 = new ViewConfig('layerGroup0');
+ * const viewConfig0 = new dwv.ViewConfig('layerGroup0');
  * const viewConfigs = {'*': [viewConfig0]};
- * const options = new AppOptions(viewConfigs);
- * options.tools = {ZoomAndPan: new ToolConfig()};
+ * const options = new dwv.AppOptions(viewConfigs);
+ * options.tools = {ZoomAndPan: new dwv.ToolConfig()};
  * app.init(options);
  * // activate tool
  * app.addEventListener('load', function () {
@@ -222,6 +222,9 @@ export class ZoomAndPan {
    * @param {object} event The mouse wheel event.
    */
   wheel = (event) => {
+    // prevent default page scroll
+    event.preventDefault();
+
     const step = -event.deltaY / 500;
 
     const layerDetails = getLayerDetailsFromEvent(event);

src/utils/string.js

@@ -108,10 +108,6 @@ export function getFlags(inputStr) {
  *
  * @param {string} inputStr The input string.
  * @param {object} values A object of {value, unit}.
- * @example
- *    const values = {"length": { "value": 33, "unit": "cm" } };
- *    const str = "The length is: {length}.";
- *    const res = dwv.replaceFlags(str, values); // "The length is: 33 cm."
  * @returns {string} The result string.
  */
 export function replaceFlags(inputStr, values) {