Merge pull request #612 from PaulHax/material

Material Web for UI

dist/test.html

@@ -9,7 +9,15 @@
       style="display: inline-block; border: 1px solid red;"
       class="itk-vtk-viewer"
       data-url="test-data/first_instar_brain_zyxc.zarr"
-      data-viewport="1000x1000"
+      data-viewport="600x600"
+      data-background-color="008800"
+      data-rotate="false"
+    ></div>
+
+    <div
+      style="display: inline-block; border: 1px solid red;"
+      class="itk-vtk-viewer"
+      data-url="test-data/astronaut.zarr"
       data-background-color="008800"
       data-rotate="false"
     ></div>

package.json

@@ -31,6 +31,7 @@
   "types": "./src/index.d.ts",
   "dependencies": {
     "@kitware/vtk.js": "^25.8.2",
+    "@material/web": "^0.1.0-alpha.0",
     "@thewtex/iconselect.js": "^2.1.2",
     "@xstate/inspect": "^0.4.1",
     "axios": "^0.21.1",
@@ -64,6 +65,7 @@
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^21.0.2",
     "@rollup/plugin-node-resolve": "^13.0.0",
+    "@rollup/plugin-typescript": "^9.0.2",
     "@web3-storage/w3": "^2.6.0",
     "autoprefixer": "^10.2.6",
     "babel-loader": "^8.2.2",

src/UI/reference-ui/package.json

@@ -27,18 +27,22 @@
     "@babel/plugin-transform-runtime": "^7.17.0",
     "@rollup/plugin-commonjs": "^21.0.2",
     "@rollup/plugin-node-resolve": "^13.0.0",
+    "@rollup/plugin-typescript": "^9.0.2",
     "autoprefixer": "^10.4.4",
     "postcss": "^8.4.12",
     "rollup": "^2.70.1",
     "rollup-plugin-ignore": "^1.0.10",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-svgo": "^2.0.0",
-    "rollup-plugin-terser": "^7.0.2"
+    "rollup-plugin-terser": "^7.0.2",
+    "typescript": "^4.8.4"
   },
   "dependencies": {
     "@babel/runtime": "^7.17.6",
+    "@material/web": "^0.1.0-alpha.0",
     "itk-viewer-color-maps": "^1.2.0",
     "itk-viewer-icons": "^11.13.0",
-    "itk-viewer-transfer-function-editor": "^1.2.2"
+    "itk-viewer-transfer-function-editor": "^1.2.2",
+    "lit": "^2.4.0"
   }
 }

src/UI/reference-ui/rollup.config.js

@@ -7,6 +7,7 @@ import commonjs from '@rollup/plugin-commonjs'
 import { terser } from 'rollup-plugin-terser'
 import { babel } from '@rollup/plugin-babel'
 import ignore from 'rollup-plugin-ignore'
+import typescript from '@rollup/plugin-typescript'
 
 export default {
   input: 'src/referenceUIMachineOptions.js',
@@ -24,6 +25,7 @@ export default {
     commonjs({
       transformMixedEsModules: true,
     }),
+    typescript(),
     babel({
       include: ['src/**'],
       extensions: ['.js'],