@abi-software/scaffoldvuer 0.2.2-beta.2 → 0.2.3-alpha

package/src/ScaffoldVuer-wc.js

@@ -1,14 +1,14 @@
-import Vue from 'vue'
-import vueCustomElement from 'vue-custom-element';
-
-Vue.use(vueCustomElement);
-
-import ScaffoldVuer from "./components/ScaffoldVuer.vue";
-
-Vue.customElement("scaffoldvuer-wc", ScaffoldVuer);
-
-/*
-const wrappedElement = wrap(Vue, ScaffoldVuer);
-
-window.customElements.define("scaffoldvuer-wc", wrappedElement);
+import Vue from 'vue'
+import vueCustomElement from 'vue-custom-element';
+
+Vue.use(vueCustomElement);
+
+import ScaffoldVuer from "./components/ScaffoldVuer.vue";
+
+Vue.customElement("scaffoldvuer-wc", ScaffoldVuer);
+
+/*
+const wrappedElement = wrap(Vue, ScaffoldVuer);
+
+window.customElements.define("scaffoldvuer-wc", wrappedElement);
 */

package/src/{components → app}/DropZone.vue

@@ -1,114 +1,114 @@
-<template>
-  <div
-    ref="dropEl"
-    class="dropzone"
-  >
-    <slot />
-    <input
-      ref="fileInput"
-      type="file"
-    >
-  </div>
-</template>
-
-<script>
-/* eslint-disable no-alert, no-console */
-import { SimpleDropzone } from "simple-dropzone";
-import path from "path";
-
-export default {
-  name: "DropZone",
-  data: function () {
-    return {
-      objectURLs: [],
-    };
-  },
-  mounted: function () {
-    const dropCtrl = new SimpleDropzone(
-      this.$refs.dropEl,
-      this.$refs.fileInput
-    );
-    dropCtrl.on("drop", ({ files }) => {
-      this.localDrop(files);
-    });
-  },
-  methods: {
-    createMetadataObjectURLs: function (text, list) {
-      let content = text;
-      for (const [key, file] of Object.entries(list)) {
-        if (content.includes(key)) {
-          const objectURL = URL.createObjectURL(file);
-          const re = new RegExp(key, "g");
-          content = content.replace(re, objectURL);
-          this.objectURLs.push(objectURL);
-        }
-      }
-      let blob = new Blob([content], { type: "application/json" });
-      const metaURL = URL.createObjectURL(blob);
-      this.objectURLs.push(metaURL);
-      this.$emit("files-drop", { url: metaURL, format : "metadata" } );
-    },
-    createGLTFURL: function (content, binary) {
-      let type =  binary ? 'model/gltf+binary' : 'model/gltf+json';
-      let blob = new Blob([content], { type });
-      const gltfURL = URL.createObjectURL(blob);
-      this.objectURLs.push(gltfURL);
-      this.$emit("files-drop", { url: gltfURL, format : "gltf" });
-    },
-    revokeURLs: function () {
-      this.objectURLs.forEach(objectURL => URL.revokeObjectURL(objectURL));
-      this.objectURLs = [];    
-    },
-    localDrop: function (fileMap) {
-      const dataMaps = {};
-      let list = {};
-      let metadata = undefined;
-      let gltf = undefined;
-      let binary = false;
-      const flatarray = Array.from(fileMap);
-      let rootPath = "";
-      for (let i = 0; i < flatarray.length; i++) {
-        if (flatarray[i][1].name.includes("metadata.json")) {
-          rootPath = flatarray[i][0].replace(flatarray[i][1].name, "");
-          metadata = { rootPath, file: flatarray[i][1] };
-          break;
-        }
-        if (flatarray[i][1].name.includes(".glb")) {
-          gltf = { rootPath, file: flatarray[i][1] };
-          binary = true;
-          break;
-        }
-        if (flatarray[i][1].name.includes(".gltf")) {
-          gltf = { rootPath, file: flatarray[i][1] };
-          binary = false;
-          break;
-        }
-      }
-      if (metadata) {
-        flatarray.forEach(([filePath, file]) => {
-          if (file.name.match(/\.(json)$/)) {
-            const relativePath = path.relative(rootPath, filePath);
-            list[relativePath] = file;
-          }
-        });
-        const metaFileURL = URL.createObjectURL(metadata.file);
-        fetch(metaFileURL)
-          .then((response) => response.text())
-          .then((text) => this.createMetadataObjectURLs(text, list));
-        URL.revokeObjectURL(metaFileURL);
-      }
-      if (gltf) {
-        this.createGLTFURL(gltf.file, binary);
-      }
-    },
-  },
-};
-</script>
-
-<style scoped lang="scss">
-.dropzone {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-}
-</style>
+<template>
+  <div
+    ref="dropEl"
+    class="dropzone"
+  >
+    <slot />
+    <input
+      ref="fileInput"
+      type="file"
+    >
+  </div>
+</template>
+
+<script>
+/* eslint-disable no-alert, no-console */
+import { SimpleDropzone } from "simple-dropzone";
+import path from "path";
+
+export default {
+  name: "DropZone",
+  data: function () {
+    return {
+      objectURLs: [],
+    };
+  },
+  mounted: function () {
+    const dropCtrl = new SimpleDropzone(
+      this.$refs.dropEl,
+      this.$refs.fileInput
+    );
+    dropCtrl.on("drop", ({ files }) => {
+      this.localDrop(files);
+    });
+  },
+  methods: {
+    createMetadataObjectURLs: function (text, list) {
+      let content = text;
+      for (const [key, file] of Object.entries(list)) {
+        if (content.includes(key)) {
+          const objectURL = URL.createObjectURL(file);
+          const re = new RegExp(key, "g");
+          content = content.replace(re, objectURL);
+          this.objectURLs.push(objectURL);
+        }
+      }
+      let blob = new Blob([content], { type: "application/json" });
+      const metaURL = URL.createObjectURL(blob);
+      this.objectURLs.push(metaURL);
+      this.$emit("files-drop", { url: metaURL, format : "metadata" } );
+    },
+    createGLTFURL: function (content, binary) {
+      let type =  binary ? 'model/gltf+binary' : 'model/gltf+json';
+      let blob = new Blob([content], { type });
+      const gltfURL = URL.createObjectURL(blob);
+      this.objectURLs.push(gltfURL);
+      this.$emit("files-drop", { url: gltfURL, format : "gltf" });
+    },
+    revokeURLs: function () {
+      this.objectURLs.forEach(objectURL => URL.revokeObjectURL(objectURL));
+      this.objectURLs = [];    
+    },
+    localDrop: function (fileMap) {
+      const dataMaps = {};
+      let list = {};
+      let metadata = undefined;
+      let gltf = undefined;
+      let binary = false;
+      const flatarray = Array.from(fileMap);
+      let rootPath = "";
+      for (let i = 0; i < flatarray.length; i++) {
+        if (flatarray[i][1].name.includes("metadata.json")) {
+          rootPath = flatarray[i][0].replace(flatarray[i][1].name, "");
+          metadata = { rootPath, file: flatarray[i][1] };
+          break;
+        }
+        if (flatarray[i][1].name.includes(".glb")) {
+          gltf = { rootPath, file: flatarray[i][1] };
+          binary = true;
+          break;
+        }
+        if (flatarray[i][1].name.includes(".gltf")) {
+          gltf = { rootPath, file: flatarray[i][1] };
+          binary = false;
+          break;
+        }
+      }
+      if (metadata) {
+        flatarray.forEach(([filePath, file]) => {
+          if (file.name.match(/\.(json)$/)) {
+            const relativePath = path.relative(rootPath, filePath);
+            list[relativePath] = file;
+          }
+        });
+        const metaFileURL = URL.createObjectURL(metadata.file);
+        fetch(metaFileURL)
+          .then((response) => response.text())
+          .then((text) => this.createMetadataObjectURLs(text, list));
+        URL.revokeObjectURL(metaFileURL);
+      }
+      if (gltf) {
+        this.createGLTFURL(gltf.file, binary);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.dropzone {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+</style>

package/src/{components → app}/ModelsInformation.js

@@ -1,35 +1,35 @@
-const { GoogleSpreadsheet } = require('google-spreadsheet');
-
-/* eslint-disable no-alert, no-console */
-export default {
-  data: function() {
-    return {
-      tableData: [],
-    };
-  },
-  methods: {
-    createTable: async function(sheetRows, keywords) {
-      for (let i = 0; i < sheetRows.length; i++) {
-        let mappedData = {};
-        for (let j = 0; j < keywords.length; j++) {
-          let keyword = keywords[j];
-          mappedData[keyword] = sheetRows[i][keyword];
-        }
-        this.tableData.push(mappedData);
-      }
-    },
-    getModelsInformation: async function() {
-      const doc = new GoogleSpreadsheet(process.env.VUE_APP_GOOGLE_SPREADSHEET_ID);
-      await doc.useServiceAccountAuth({
-        client_email: process.env.VUE_APP_GOOGLE_SERVICE_SCAFFOLDVUER_EMAIL,
-        private_key: process.env.VUE_APP_GOOGLE_PRIVATE_SCAFFOLDVUER_KEY,
-      });
-      await doc.loadInfo(); // loads document properties and worksheets
-      const sheet = doc.sheetsByIndex[0];
-      const sheetRows = await sheet.getRows();
-      const keys = ["Organ", "Species", "Note", "Location",
-        "Last modified","Blackfynn dataset", "Published", "Discover"];
-      this.createTable(sheetRows, keys);
-    }
-  }
-}
+const { GoogleSpreadsheet } = require('google-spreadsheet');
+
+/* eslint-disable no-alert, no-console */
+export default {
+  data: function() {
+    return {
+      tableData: [],
+    };
+  },
+  methods: {
+    createTable: async function(sheetRows, keywords) {
+      for (let i = 0; i < sheetRows.length; i++) {
+        let mappedData = {};
+        for (let j = 0; j < keywords.length; j++) {
+          let keyword = keywords[j];
+          mappedData[keyword] = sheetRows[i][keyword];
+        }
+        this.tableData.push(mappedData);
+      }
+    },
+    getModelsInformation: async function() {
+      const doc = new GoogleSpreadsheet(process.env.VUE_APP_GOOGLE_SPREADSHEET_ID);
+      await doc.useServiceAccountAuth({
+        client_email: process.env.VUE_APP_GOOGLE_SERVICE_SCAFFOLDVUER_EMAIL,
+        private_key: process.env.VUE_APP_GOOGLE_PRIVATE_SCAFFOLDVUER_KEY,
+      });
+      await doc.loadInfo(); // loads document properties and worksheets
+      const sheet = doc.sheetsByIndex[0];
+      const sheetRows = await sheet.getRows();
+      const keys = ["Organ", "Species", "Note", "Location",
+        "Last modified","Blackfynn dataset", "Published", "Discover"];
+      this.createTable(sheetRows, keys);
+    }
+  }
+}

package/src/{components → app}/ModelsTable.vue

@@ -1,113 +1,113 @@
-<template>
-  <div>
-    <el-input
-      v-model="search"
-      size="mini"
-      placeholder="Type to search"
-    />
-    <el-table
-      :data="tableData.filter(
-        data => !search || 
-          data.Organ.toLowerCase().includes(search.toLowerCase()) ||
-          data.Species.toLowerCase().includes(search.toLowerCase()) ||
-          data.Note.toLowerCase().includes(search.toLowerCase()))"
-      style="width: 100%;"
-      height="600"
-    >
-      <el-table-column
-        prop="Organ"
-        label="Organ"
-        width="100"
-      />
-      <el-table-column
-        prop="Species"
-        label="Species"
-        width="100"
-      />
-      <el-table-column
-        prop="Note"
-        label="Note"
-        width="200"
-      />
-      <el-table-column
-        prop="Last modified"
-        label="Last modified"
-        width="250"
-      /> 
-      <el-table-column
-        fixed="right"
-        label="Action"
-        width="300"
-      >
-        <template slot-scope="scope">
-          <el-button
-            size="mini"
-            @click="handleView(scope.row)"
-          >
-            View
-          </el-button>
-          <el-button
-            v-if="scope.row.Discover !== 'Not even'"
-            size="mini"
-            @click="handleDiscover(scope.row)"
-          >
-            Discover
-          </el-button>
-          <el-button
-            v-if="scope.row['Blackfynn dataset'] !== '/'"
-            size="mini"
-            @click="handleBlackfynn(scope.row)"
-          >
-            Blackfynn
-          </el-button>
-        </template>
-      </el-table-column>   
-    </el-table>
-  </div>
-</template>
-
-<script>
-/* eslint-disable no-alert, no-console */
-import Vue from "vue";
-import models from './ModelsInformation'
-import { Button, Input, Table, TableColumn } from "element-ui";
-import lang from "element-ui/lib/locale/lang/en";
-import locale from "element-ui/lib/locale";
-
-locale.use(lang);
-Vue.use(Button);
-Vue.use(Input);
-Vue.use(Table);
-Vue.use(TableColumn);
-
-
-export default {
-  name: "ModelsTable",
-  mixins: [models],
-  data() {
-    return {
-      search: '',
-    }
-  },
-  created: function() {
-    this.getModelsInformation();
-  },
-  methods: {
-    handleView: function(row) {
-      this.$emit("viewModelClicked", row.Location);
-    },
-    handleDiscover: function(row) {
-      window.open(row.Discover, "_blank");
-    },
-    handleBlackfynn: function(row) {
-      window.open(row['Blackfynn dataset'], "_blank");
-    },
-  }
-};
-</script>
-
-<style scoped lang="scss">
-@import "~element-ui/packages/theme-chalk/src/input";
-@import "~element-ui/packages/theme-chalk/src/table";
-@import "~element-ui/packages/theme-chalk/src/table-column";
-</style>
+<template>
+  <div>
+    <el-input
+      v-model="search"
+      size="mini"
+      placeholder="Type to search"
+    />
+    <el-table
+      :data="tableData.filter(
+        data => !search || 
+          data.Organ.toLowerCase().includes(search.toLowerCase()) ||
+          data.Species.toLowerCase().includes(search.toLowerCase()) ||
+          data.Note.toLowerCase().includes(search.toLowerCase()))"
+      style="width: 100%;"
+      height="600"
+    >
+      <el-table-column
+        prop="Organ"
+        label="Organ"
+        width="100"
+      />
+      <el-table-column
+        prop="Species"
+        label="Species"
+        width="100"
+      />
+      <el-table-column
+        prop="Note"
+        label="Note"
+        width="200"
+      />
+      <el-table-column
+        prop="Last modified"
+        label="Last modified"
+        width="250"
+      /> 
+      <el-table-column
+        fixed="right"
+        label="Action"
+        width="300"
+      >
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            @click="handleView(scope.row)"
+          >
+            View
+          </el-button>
+          <el-button
+            v-if="scope.row.Discover !== 'Not even'"
+            size="mini"
+            @click="handleDiscover(scope.row)"
+          >
+            Discover
+          </el-button>
+          <el-button
+            v-if="scope.row['Blackfynn dataset'] !== '/'"
+            size="mini"
+            @click="handleBlackfynn(scope.row)"
+          >
+            Blackfynn
+          </el-button>
+        </template>
+      </el-table-column>   
+    </el-table>
+  </div>
+</template>
+
+<script>
+/* eslint-disable no-alert, no-console */
+import Vue from "vue";
+import models from './ModelsInformation'
+import { Button, Input, Table, TableColumn } from "element-ui";
+import lang from "element-ui/lib/locale/lang/en";
+import locale from "element-ui/lib/locale";
+
+locale.use(lang);
+Vue.use(Button);
+Vue.use(Input);
+Vue.use(Table);
+Vue.use(TableColumn);
+
+
+export default {
+  name: "ModelsTable",
+  mixins: [models],
+  data() {
+    return {
+      search: '',
+    }
+  },
+  created: function() {
+    this.getModelsInformation();
+  },
+  methods: {
+    handleView: function(row) {
+      this.$emit("viewModelClicked", row.Location);
+    },
+    handleDiscover: function(row) {
+      window.open(row.Discover, "_blank");
+    },
+    handleBlackfynn: function(row) {
+      window.open(row['Blackfynn dataset'], "_blank");
+    },
+  }
+};
+</script>
+
+<style scoped lang="scss">
+@import "~element-ui/packages/theme-chalk/src/input";
+@import "~element-ui/packages/theme-chalk/src/table";
+@import "~element-ui/packages/theme-chalk/src/table-column";
+</style>

package/src/app/TextureDemos.js

@@ -0,0 +1,114 @@
+import volumeTexture from "zincjs/src/shaders/volumeTexture.js";
+
+const getVolumeTexture = (texture) => {
+  const myUniforms = volumeTexture.getUniforms();
+  myUniforms.volume_scale.value.set(
+    texture.size.width / texture.size.depth,
+    texture.size.height / texture.size.depth,
+    1
+  );
+  myUniforms.diffuse.value = texture.impl;
+  myUniforms.depth.value = texture.size.depth;
+  myUniforms.volume_dims.value = [200, 200, 200];
+  const options = {
+    fs: volumeTexture.fs,
+    vs: volumeTexture.vs,
+    uniforms: myUniforms,
+    glslVersion: volumeTexture.glslVersion,
+  };
+  return options;
+};
+
+const getTexture = async (scaffoldModule, texture_prefix) => {
+  const imgArray = [];
+  const texture = new scaffoldModule.Zinc.TextureArray();
+  for (let i = 1733; i < 1860; i++) {
+    imgArray.push(`${texture_prefix}/foot${i}.jpg`);
+    //imgArray.push(`${process.env.VUE_APP_TEXTURE_FOOT_PREFIX}/foot${i}.jpg`);
+  }
+  await texture.loadFromImages(imgArray);
+  return texture;
+};
+
+export const testVolume = async (scaffoldVuer, texture_prefix) => {
+  const cube = new scaffoldVuer.$module.Zinc.THREE.BoxGeometry(1, 1, 1);
+  const zincObject = new scaffoldVuer.$module.Zinc.Geometry();
+  zincObject.setName("Texture volume");
+  cube.translate(0.5, 0.5, 0.5);
+  let meshOptions = {};
+  meshOptions.opacity = 1.0;
+  meshOptions.localTimeEnabled = false;
+  meshOptions.localMorphColour = false;
+  const texture = await getTexture(scaffoldVuer.$module, texture_prefix);
+  const options = getVolumeTexture(texture);
+  const material = texture.getMaterial(options);
+  zincObject.createMesh(cube, material, meshOptions);
+  scaffoldVuer.addZincObject(zincObject);
+  zincObject.morph.matrix.set(
+    -100,
+    0,
+    0,
+    -60,
+    0,
+    -100,
+    0,
+    -100,
+    0,
+    0,
+    -100,
+    30,
+    0,
+    0,
+    0,
+    1
+  );
+  //console.log(zincObject.morph.matrix)
+  window.texture = zincObject;
+};
+
+export const testSlides = async (scaffoldVuer, texture_prefix) => {
+  const scaffoldModule = scaffoldVuer.$module;
+  const texture = await getTexture(scaffoldModule, texture_prefix);
+  const textureSlides = new scaffoldModule.Zinc.TextureSlides(texture);
+  textureSlides.setName("Texture slides");
+  textureSlides.createSlides([
+    {
+      direction: "y",
+      value: 0.1,
+    },
+    {
+      direction: "y",
+      value: 0.3,
+    },
+    {
+      direction: "y",
+      value: 0.5,
+    },
+    {
+      direction: "y",
+      value: 0.7,
+    },
+    {
+      direction: "y",
+      value: 0.9,
+    },
+    {
+      direction: "x",
+      value: 0.5,
+    },
+    {
+      direction: "z",
+      value: 0.5,
+    },
+  ]);
+  //textureSlides.morph.matrix.set(-100, 0, 0, 0, 0, -100, 0, 0, 0, 0, -100, 0, -60, -100, 30, 1);
+  //textureSlides.morph.matrix.set( -100, 0, 0, -60, 0, -100, 0, -100, 0, 0, -100, 30, 0, 0, 0, 1 );
+
+  const n = textureSlides.morph.matrix.clone();
+  n.set(-100, 0, 0, -10, 0, -200, 0, 0, 0, 0, -100, 0, 0, 0, 10, 1);
+  textureSlides.morph.applyMatrix4(n);
+  scaffoldVuer.addZincObject(textureSlides);
+  //scaffoldVuer.fitWindow();
+  window.texture = textureSlides;
+};
+