feat(UnpkgIOExample): Add support for reading meshes

thewtex · thewtex · commit fc0dacf612a6 · 2019-04-07T16:19:31.000-04:00
diff --git a/examples/UnpkgIO/dist/index.html b/examples/UnpkgIO/dist/index.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
+    <link rel="stylesheet" href="styles.css">
   </head>
   <body>
     <div>
diff --git a/examples/UnpkgIO/package.json b/examples/UnpkgIO/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",
diff --git a/examples/UnpkgIO/src/index.js b/examples/UnpkgIO/src/index.js
@@ -1,19 +1,21 @@
-import readImageFile from 'itk/readImageFile'
+import readFile from 'itk/readFile'
 import curry from 'curry'
 
 const outputFileInformation = curry(function outputFileInformation (outputTextArea, event) {
   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)
     })
 })
 
diff --git a/examples/UnpkgIO/test/index.js b/examples/UnpkgIO/test/index.js
@@ -6,7 +6,7 @@ import config from './itkConfig'
 import { outputFileInformation } from '../src/index'
 console.log(config)
 
-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,
@@ -49,8 +49,52 @@ test('Loading an image file and displaying its contents', (t) => {
       document.body.appendChild(outputTextArea)
       outputFileInformation(outputTextArea, event)
         .then(function () {
+          outputTextArea.remove()
           t.equal(outputTextArea.textContent, expectedOutput)
           t.end()
         })
     })
 })
+
+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()
+        })
+    })
+})
