Add create functions, update example

src/image/image.js

@@ -5,6 +5,8 @@ import {getTypedArray} from '../dicom/dicomParser';
 import {ListenerHandler} from '../utils/listen';
 import {colourRange} from './iterator';
 import {RescaleSlopeAndIntercept} from './rsi';
+import {ImageFactory} from './imageFactory';
+import {MaskFactory} from './maskFactory';
 
 // doc imports
 /* eslint-disable no-unused-vars */
@@ -37,6 +39,35 @@ function getSliceIndex(volumeGeometry, sliceGeometry) {
   return new Index(values);
 }
 
+/**
+ * Create an Image from DICOM elements.
+ *
+ * @param {object} elements The DICOM elements.
+ * @returns {Image} The Image object.
+ */
+export function createImage(elements) {
+  const factory = new ImageFactory();
+  return factory.create(
+    elements,
+    elements['7FE00010'].value[0],
+    1
+  );
+}
+
+/**
+ * Create a mask Image from DICOM elements.
+ *
+ * @param {object} elements The DICOM elements.
+ * @returns {Image} The mask Image object.
+ */
+export function createMaskImage(elements) {
+  const factory = new MaskFactory();
+  return factory.create(
+    elements,
+    elements['7FE00010'].value[0]
+  );
+}
+
 /**
  * Image class.
  * Usable once created, optional are:
@@ -47,17 +78,11 @@ function getSliceIndex(volumeGeometry, sliceGeometry) {
  * @example
  * // XMLHttpRequest onload callback
  * const onload = function (event) {
- *   // setup the dicom parser
+ *   // parse the dicom buffer
  *   const dicomParser = new dwv.DicomParser();
- *   // parse the buffer
  *   dicomParser.parse(event.target.response);
- *   // create the image
- *   const imageFactory = new dwv.ImageFactory();
- *   // inputs are dicom tags and buffer
- *   const image = imageFactory.create(
- *     dicomParser.getDicomElements(),
- *     dicomParser.getDicomElements()['7FE00010'].value[0]
- *   );
+ *   // create the image object
+ *   const image = createImage(dicomParser.getDicomElements());
  *   // result div
  *   const div = document.getElementById('dwv');
  *   // display the image size

src/image/view.js

@@ -7,6 +7,7 @@ import {generateImageDataMonochrome} from './viewMonochrome';
 import {generateImageDataPaletteColor} from './viewPaletteColor';
 import {generateImageDataRgb} from './viewRgb';
 import {generateImageDataYbrFull} from './viewYbrFull';
+import {ViewFactory} from './viewFactory';
 import {getSliceIterator} from '../image/iterator';
 import {ListenerHandler} from '../utils/listen';
 import {logger} from '../utils/logger';
@@ -15,7 +16,7 @@ import {logger} from '../utils/logger';
 /* eslint-disable no-unused-vars */
 import {Image} from './image';
 import {Matrix33} from '../math/matrix';
-import {Point, Point3D} from '../math/point';
+import {Point} from '../math/point';
 /* eslint-enable no-unused-vars */
 
 /**
@@ -32,11 +33,54 @@ export const viewEventNames = [
   'alphafuncchange'
 ];
 
+/**
+ * Create a View from DICOM elements and image.
+ *
+ * @param {object} elements The DICOM elements.
+ * @param {Image} image The associated image.
+ * @returns {View} The View object.
+ */
+export function createView(elements, image) {
+  const factory = new ViewFactory();
+  return factory.create(elements, image);
+}
+
 /**
  * View class.
  *
  * Need to set the window lookup table once created
  * (either directly or with helper methods).
+ *
+ * @example
+ * // XMLHttpRequest onload callback
+ * const onload = function (event) {
+ *   // parse the dicom buffer
+ *   const dicomParser = new dwv.DicomParser();
+ *   dicomParser.parse(event.target.response);
+ *   // create the image object
+ *   const image = createImage(dicomParser.getDicomElements());
+ *   // create the view
+ *   const view = createView(dicomParser.getDicomElements(), image);
+ *   // setup canvas
+ *   const canvas = document.createElement('canvas');
+ *   canvas.width = 256;
+ *   canvas.height = 256;
+ *   const ctx = canvas.getContext("2d");
+ *   // update the image data
+ *   const imageData = ctx.createImageData(256, 256);
+ *   view.generateImageData(imageData);
+ *   ctx.putImageData(imageData, 0, 0);
+ *   // update html
+ *   const div = document.getElementById('dwv');
+ *   div.appendChild(canvas);;
+ * };
+ * // DICOM file request
+ * const request = new XMLHttpRequest();
+ * const url = 'https://raw.githubusercontent.com/ivmartel/dwv/master/tests/data/bbmri-53323851.dcm';
+ * request.open('GET', url);
+ * request.responseType = 'arraybuffer';
+ * request.onload = onload;
+ * request.send();
  */
 export class View {
 

src/index.js

@@ -27,8 +27,15 @@ import {LayerGroup} from './gui/layerGroup';
 import {ViewLayer} from './gui/viewLayer';
 import {DrawLayer} from './gui/drawLayer';
 // image
-import {Image} from './image/image';
-import {View} from './image/view';
+import {
+  Image,
+  createImage,
+  createMaskImage
+} from './image/image';
+import {
+  View,
+  createView
+} from './image/view';
 import {Geometry} from './image/geometry';
 import {Size} from './image/size';
 import {Spacing} from './image/spacing';
@@ -85,6 +92,9 @@ export {
   defaultPresets,
   i18n,
   addTagsToDictionary,
+  createImage,
+  createMaskImage,
+  createView,
   getDwvVersion,
   getUID,
   getElementsFromJSONTags,