feat(WebpackExample): Add mesh reading support

Author: thewtex

examples/Webpack/dist/styles.css

@@ -8,6 +8,7 @@ textarea {
   position: absolute;
   box-sizing: border-box;
   width: 100%;
+  height: 80%;
   bottom: 0px;
   left: 0px;
   top: 50px;

examples/Webpack/package.json

@@ -26,7 +26,7 @@
   "dependencies": {
     "curry": "^1.2.0",
     "expose-loader": "^0.7.5",
-    "itk": "^9.2.0"
+    "itk": "^9.5.0"
   },
   "devDependencies": {
     "@babel/core": "^7.2.0",

examples/Webpack/src/index.js

@@ -1,20 +1,22 @@
-import readImageFile from 'itk/readImageFile'
+import readFile from 'itk/readFile'
 import curry from 'curry'
 
 const outputFileInformation = curry(function outputFileInformation (outputTextArea, event) {
   outputTextArea.textContent = "Loading...";
   const dataTransfer = event.dataTransfer
   const files = event.target.files || dataTransfer.files
-  return readImageFile(null, files[0])
-    .then(function ({ image, webWorker }) {
+  return readFile(null, files[0])
+    .then(function ({ image, mesh, webWorker }) {
       webWorker.terminate()
+      const imageOrMesh = image || mesh
+
       function replacer (key, value) {
         if (!!value && value.byteLength !== undefined) {
           return String(value.slice(0, 6)) + '...'
         }
         return value
       }
-      outputTextArea.textContent = JSON.stringify(image, replacer, 4)
+      outputTextArea.textContent = JSON.stringify(imageOrMesh, replacer, 4)
     })
 })
 

examples/Webpack/test/index.js

@@ -3,7 +3,7 @@ import axios from 'axios'
 
 import { outputFileInformation } from '../src/index'
 
-test('Loading an image file and displaying its contents', (t) => {
+test('Load an image file and display its contents', (t) => {
   const expectedOutput = `{
     "imageType": {
         "dimension": 2,
@@ -51,3 +51,46 @@ test('Loading an image file and displaying its contents', (t) => {
         })
     })
 })
+
+test('Load a mesh file and display its contents', (t) => {
+  const expectedOutput = `{
+    "meshType": {
+        "dimension": 3,
+        "pointComponentType": "float",
+        "pointPixelComponentType": null,
+        "pointPixelType": 1,
+        "pointPixelComponents": 0,
+        "cellComponentType": "uint32_t",
+        "cellPixelComponentType": null,
+        "cellPixelType": 1,
+        "cellPixelComponents": 0
+    },
+    "name": "Mesh",
+    "numberOfPoints": 2903,
+    "points": "3.716360092163086,2.3433899879455566,0,4.126560211181641,0.6420270204544067,0...",
+    "numberOfPointPixels": 0,
+    "pointData": null,
+    "numberOfCells": 3263,
+    "cells": "4,4,250,251,210,252...",
+    "numberOfCellPixels": 0,
+    "cellData": null,
+    "cellBufferSize": 18856,
+    "numberofPointPixels": 0,
+    "numberofCellPixels": 0
+}`
+  const meshURL = 'https://data.kitware.com/api/v1/file/5c72abb18d777f072b610e69/download'
+  return axios.get(meshURL, { responseType: 'blob' })
+    .then((response) => {
+      const testFile = new window.File([response.data], 'cow.vtk')
+      // mock the event
+      const event = { target: { files: [testFile] } }
+      const outputTextArea = document.createElement('textarea')
+      document.body.appendChild(outputTextArea)
+      outputFileInformation(outputTextArea, event)
+        .then(function () {
+          outputTextArea.remove()
+          t.equal(outputTextArea.textContent, expectedOutput, 'Text area matches expected output')
+          t.end()
+        })
+    })
+})