feat(UMDExample): Support loading meshes

thewtex · thewtex · commit 778fd3ec5636 · 2019-04-07T16:09:11.000-04:00
diff --git a/examples/UMD/dist/index.html b/examples/UMD/dist/index.html
@@ -4,13 +4,13 @@
     <title>itk.js UMD Example</title>
     <meta charset="UTF-8" />
     <link rel="stylesheet" href="styles.css">
-    <script src="https://unpkg.com/itk@9.4.0/umd/itk.js"></script>
+    <script src="https://unpkg.com/itk@9.5.0/umd/itk.js"></script>
   </head>
 
   <body>
-    <!-- Image selector -->
+    <!-- Selector -->
     <div>
-      <label>Select image:</label>
+      <label>Select image or mesh:</label>
       <input name="inputFile" type="file">
     </div>
 
diff --git a/examples/UMD/dist/index.js b/examples/UMD/dist/index.js
@@ -5,15 +5,16 @@ function processFile(event) {
   var dataTransfer = event.dataTransfer;
   var files = event.target.files || dataTransfer.files;
 
-  return itk.readImageFile(null, files[0]).then(function({ image, webWorker }) {
+  return itk.readFile(null, files[0]).then(function({ image, mesh, webWorker }) {
     webWorker.terminate();
+    var 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/UMD/dist/styles.css b/examples/UMD/dist/styles.css
@@ -8,6 +8,7 @@ textarea {
   position: absolute;
   box-sizing: border-box;
   width: 100%;
+  height: 80%;
   bottom: 0px;
   left: 0px;
   top: 50px;
diff --git a/examples/UMD/karma.conf.js b/examples/UMD/karma.conf.js
@@ -17,7 +17,7 @@ module.exports = function init (config) {
     basePath: '',
     frameworks: ['tap'],
     files: [
-      'https://unpkg.com/itk@9.4.0/umd/itk.js',
+      'https://unpkg.com/itk@9.5.0/umd/itk.js',
       './dist/index.js',
       './test/index.js'
     ],
diff --git a/examples/UMD/package.json b/examples/UMD/package.json
@@ -22,7 +22,6 @@
     "url": "https://github.com/InsightSoftwareConsortium/itk-js/issues"
   },
   "homepage": "https://github.com/InsightSoftwareConsortium/itk-js#readme",
-  "dependencies": {},
   "devDependencies": {
     "axios": "^0.18.0",
     "karma": "^2.0.0",
diff --git a/examples/UMD/test/index.js b/examples/UMD/test/index.js
@@ -1,7 +1,7 @@
 import test from 'tape'
 import axios from 'axios'
 
-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,
@@ -44,6 +44,51 @@ test('Loading an image file and displaying its contents', (t) => {
       document.body.appendChild(outputTextArea)
       processFile(event)
         .then(function () {
+          outputTextArea.remove(outputTextArea)
+          t.equal(outputTextArea.textContent, expectedOutput, 'Text area matches expected output')
+          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)
+      processFile(event)
+        .then(function () {
+          outputTextArea.remove()
           t.equal(outputTextArea.textContent, expectedOutput, 'Text area matches expected output')
           t.end()
         })

Original file line number	Diff line number	Diff line change
`@@ -5,15 +5,16 @@ function processFile(event) {`
`5`	`5`	`var dataTransfer = event.dataTransfer;`
`6`	`6`	`var files = event.target.files \|\| dataTransfer.files;`
`7`	`7`
`8`		`- return itk.readImageFile(null, files[0]).then(function({ image, webWorker }) {`
	`8`	`+ return itk.readFile(null, files[0]).then(function({ image, mesh, webWorker }) {`
`9`	`9`	`webWorker.terminate();`
	`10`	`+ var imageOrMesh = image \|\| mesh;`
`10`	`11`
`11`	`12`	`function replacer(key, value) {`
`12`	`13`	`if (!!value && value.byteLength !== undefined) {`
`13`	`14`	`return String(value.slice(0, 6)) + "...";`
`14`	`15`	`}`
`15`	`16`	`return value;`
`16`	`17`	`}`
`17`		`- outputTextArea.textContent = JSON.stringify(image, replacer, 4);`
	`18`	`+ outputTextArea.textContent = JSON.stringify(imageOrMesh, replacer, 4);`
`18`	`19`	`});`
`19`	`20`	`}`