@abi-software/scaffoldvuer 0.4.0-vue3.6 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "0.4.0-vue3.6",
+  "version": "1.0.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -10,13 +10,17 @@
     "serve": "vite --host --force",
     "build-bundle": "vite build",
     "build-static": "vite build -c vite.static-build.js",
-    "styleguide": "vue-cli-service styleguidist",
-    "styleguide:build": "vue-cli-service styleguidist:build",
+    "vuese-gen": "node vuese-generator.js",
+    "vuese-watch": "node vuese-generator.js watch",
     "changelog": "auto-changelog -p --output CHANGELOG.md --template keepachangelog",
     "version": "npm run build-bundle;npm run changelog; git add CHANGELOG.md",
     "release:beta": "npm version prerelease --preid=beta; npm publish --tag beta",
     "release:minor": "npm version minor; npm publish",
-    "release:patch": "npm version patch;  npm publish"
+    "release:patch": "npm version patch;  npm publish",
+    "docs:dev": "vitepress dev docs",
+    "docs:watch": "concurrently \"npm run vuese-watch\" \"npm run docs:dev\"",
+    "docs:build": "npm run vuese-gen; vitepress build docs",
+    "docs:preview": "vitepress preview docs"
   },
   "type": "module",
   "main": "./dist/scaffoldvuer.umd.cjs",
@@ -37,34 +41,37 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/flatmapvuer": "^0.6.0-vue3.2",
-    "@abi-software/svg-sprite": "^0.4.0-vue3-beta.0",
+    "@abi-software/flatmapvuer": "^1.0.0",
+    "@abi-software/svg-sprite": "^1.0.0",
     "@element-plus/icons-vue": "^2.3.1",
     "@vue/compat": "^3.4.15",
-    "axios": "^0.21.2",
     "core-js": "^3.22.5",
-    "current-script-polyfill": "^1.0.0",
     "element-plus": "^2.4.4",
     "minisearch": "^6.0.1",
-    "query-string": "^6.11.1",
+    "pinia": "^2.1.7",
     "simple-dropzone": "^0.8.3",
     "unplugin-vue-components": "^0.26.0",
     "vue": "^3.4.15",
     "vue-router": "^4.2.5",
     "vue3-component-svg-sprite": "^0.0.1",
-    "zincjs": "^1.3.2"
+    "zincjs": "^1.5.1-beta.1"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.6.2",
+    "@vuese/markdown-render": "^2.11.3",
+    "@vuese/parser": "^2.10.3",
     "auto-changelog": "^2.4.0",
     "babel-eslint": "^10.1.0",
     "babel-plugin-component": "^1.1.1",
     "base64-inline-loader": "^2.0.1",
+    "chokidar": "^3.6.0",
+    "concurrently": "^8.2.2",
     "eslint": "^8.56.0",
     "eslint-plugin-vue": "^9.19.2",
     "sass": "^1.69.5",
     "vite": "^5.0.10",
-    "vue-styleguidist": "^4.72.4",
+    "vite-plugin-node-polyfills": "^0.21.0",
+    "vitepress": "^1.0.0-rc.42",
     "webpack-node-externals": "^2.5.2"
   },
   "eslintConfig": {

package/src/App.vue

@@ -111,7 +111,16 @@
           <el-button size="small" @click="featureTextureSlides(true)">
             Body slides
           </el-button>
+          <el-button size="small" @click="featureArmSlides(true)">
+            Arm slides
+          </el-button>
           <el-switch v-model="onClickMarkers" active-text="Markers On Selection" active-color="#8300bf" />
+          <el-switch
+              v-model="wireframe"
+              active-text="wireframe"
+              active-color="#8300bf"
+              @change="wireframeChanged"
+            />
         </el-row>
         <el-row :gutter="20">
           <el-input v-model="input" type="textarea" autosize placeholder="Please input"
@@ -126,7 +135,9 @@
     </el-popover>
     <el-popover placement="bottom" trigger="click" width="800" popper-class="table-popover" :teleported="false">
       <template #default>
-        <ModelsTable @viewModelClicked="viewModelClicked" />
+        <Suspense>
+          <ModelsTable @viewModelClicked="viewModelClicked" />
+        </Suspense>
       </template>
       <template #reference>
         <el-button class="models-button" :icon="ElIconFolderOpened">
@@ -152,7 +163,7 @@ import { shallowRef } from 'vue';
 import { ScaffoldVuer } from "./components/index.js";
 import DropZone from "./app/DropZone.vue";
 import ModelsTable from "./app/ModelsTable.vue";
-import { testSlides, testVolume } from "./app/TextureDemos.js";
+import { testArmSlides, testSlides, testVolume } from "./app/TextureDemos.js";
 import {
   FolderOpened as ElIconFolderOpened,
   Setting as ElIconSetting,
@@ -199,6 +210,7 @@ export default {
       helpMode: false,
       displayMarkers: false,
       onClickMarkers: false,
+      wireframe: false,
       syncMode: false,
       currentTime: 0,
       displayMinimap: false,
@@ -255,6 +267,9 @@ export default {
   created: function () {
     texture_prefix = import.meta.env.VITE_TEXTURE_FOOT_PREFIX;
   },
+  unmounted: function () {
+    this.$refs.dropzone.revokeURLs();
+  },
   methods: {
     exportGLTF: function () {
       this.$refs.scaffold.exportGLTF(false).then((data) => {
@@ -282,9 +297,12 @@ export default {
       });
     },
     objectAdded: function (zincObject) {
-      if (this._objects.length === 0)
+      if (this._objects.length === 0) {
         zincObject.setMarkerMode("on");
-      console.log(zincObject);
+      }
+      if (zincObject.isGeometry) {
+        zincObject._lod._material.wireframe = this.wireframe;
+      }
       this._objects.push(zincObject);
     },
     openMap: function (map) {
@@ -326,6 +344,23 @@ export default {
       this.$refs.scaffold.clearScene();
       testSlides(this.$refs.scaffold, texture_prefix);
     },
+    featureArmSlides: async function (overlap) {
+      //Test texture
+      if (overlap) {
+        const url =
+          "https://mapcore-bucket1.s3.us-west-2.amazonaws.com/texture/arm1/arm_texture_metadata.json";
+        if (this.route.query.url !== encodeURI(url)) {
+          this.router.replace({ path: "/", query: { url } });
+          this.readyCallback = testArmSlides;
+          return;
+        } else {
+          testArmSlides(this.$refs.scaffold);
+          return;
+        }
+      }
+      this.$refs.scaffold.clearScene();
+      testSlides(this.$refs.scaffold, texture_prefix);
+    },
     saveSettings: function () {
       this.sceneSettings.push(this.$refs.scaffold.getState());
     },
@@ -384,13 +419,23 @@ export default {
         cameracontrol.stopAutoTumble();
       }
     },
+    wireframeChanged: function (value) {
+      this._objects.forEach((zincObject) => {
+        if (zincObject.isGeometry) {
+          zincObject._lod._material.wireframe = value;
+        }
+      });
+    },
     onReady: function () {
-      console.log("ready");
-      //window.scaffoldvuer = this.$refs.scaffold;
-      this.$refs.dropzone.revokeURLs();
       if (this.readyCallback) {
         this.readyCallback(this.$refs.scaffold, texture_prefix);
         this.readyCallback = undefined;
+      } else {
+        const url =
+          "https://mapcore-bucket1.s3.us-west-2.amazonaws.com/texture/arm1/arm_texture_metadata.json";
+        if (this.route.query.url === encodeURI(url)) {
+          testArmSlides(this.$refs.scaffold);
+        }
       }
     },
     onSelected: function (data) {

package/src/app/DropZone.vue

@@ -16,6 +16,12 @@
 import { SimpleDropzone } from "simple-dropzone";
 import path from "path";
 
+const getJSON = async (URL) => {
+  return fetch(URL)
+    .then((response) => response.json())
+    .then((responseJson) => {return responseJson});
+}
+
 export default {
   name: "DropZone",
   data: function () {
@@ -33,7 +39,25 @@ export default {
     });
   },
   methods: {
-    createMetadataObjectURLs: function (text, list) {
+    processTextureFile: function(textureData, flatarray) {
+      if (textureData && textureData.images && textureData.images.source) {
+        const images = textureData.images.source;
+        for (let i = 0; i < images.length; i++) {
+          const index = flatarray.findIndex(element => {
+            return element[0].includes(images[i]);
+          });
+          if (index > -1) {
+            const objectURL = URL.createObjectURL(flatarray[index][1]);
+            this.objectURLs.push(objectURL);
+            textureData.images.source[i] = objectURL;
+          }
+        }
+        const content = JSON.stringify(textureData);
+        let blob = new Blob([content], { type: "application/json" });
+        return URL.createObjectURL(blob);
+      }
+    },
+    createMetadataObjectURLs: async function (text, list, flatarray) {
       let content = text;
       for (const [key, file] of Object.entries(list)) {
         if (content.includes(key)) {
@@ -43,7 +67,19 @@ export default {
           this.objectURLs.push(objectURL);
         }
       }
-      let blob = new Blob([content], { type: "application/json" });
+      const data = JSON.parse(content);
+      for (let i = 0; i < data.length; i++) {
+        if (data[i] && data[i].Type) {
+          if (data[i].Type === "Texture") {
+            const textureData = await getJSON(data[i].URL);
+            URL.revokeObjectURL(data[i].URL);
+            const newURL = this.processTextureFile(textureData, flatarray)
+            data[i].URL = newURL;
+          }
+        }
+      }
+      let newContent = JSON.stringify(data);
+      let blob = new Blob([newContent], { type: "application/json" });
       const metaURL = URL.createObjectURL(blob);
       this.objectURLs.push(metaURL);
       this.$emit("files-drop", { url: metaURL, format : "metadata" } );
@@ -60,6 +96,7 @@ export default {
       this.objectURLs = [];    
     },
     localDrop: function (fileMap) {
+      this.revokeURLs();
       const dataMaps = {};
       let list = {};
       let metadata = undefined;
@@ -94,7 +131,7 @@ export default {
         const metaFileURL = URL.createObjectURL(metadata.file);
         fetch(metaFileURL)
           .then((response) => response.text())
-          .then((text) => this.createMetadataObjectURLs(text, list));
+          .then((text) => this.createMetadataObjectURLs(text, list, flatarray));
         URL.revokeObjectURL(metaFileURL);
       }
       if (gltf) {

package/src/app/ModelsInformation.js

@@ -1,53 +1,63 @@
-//import { google } from 'googleapis';
-//const sheets = google.sheets('v4');
-
-/* 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() {
+//import { GoogleSpreadsheet } from 'google-spreadsheet';
 
 /*
-      const serviceAccountAuth = new JWT({
-        // env var values here are copied from service account credentials generated by google
-        // see "Authentication" section in docs for more info
-        email: import.meta.env.VITE_APP_GOOGLE_SERVICE_SCAFFOLDVUER_EMAIL,
-        key: import.meta.env.VITE_APP_GOOGLE_PRIVATE_SCAFFOLDVUER_KEY,
-        scopes: ['https://www.googleapis.com/auth/spreadsheets'],
-      });
-
-      const doc = new GoogleSpreadsheet(import.meta.env.VITE_GOOGLE_SPREADSHEET_ID, serviceAccountAuth);
-
-
-
-      const doc = new GoogleSpreadsheet(import.meta.env.VITE_GOOGLE_SPREADSHEET_ID);
-      await doc.useServiceAccountAuth({
-        client_email: import.meta.env.VITE_APP_GOOGLE_SERVICE_SCAFFOLDVUER_EMAIL,
-        private_key: import.meta.env.VITE_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);
-            */
-
+export default async function(keywords, spreadsheet_id, service_email, service_key) {
+  const tableData = [];
+
+ // const serviceAccountAuth = new JWT({
+ //   email: service_email,
+ //   key: service_key,
+ //   scopes: ['https://www.googleapis.com/auth/spreadsheets'],
+ // });
+
+  const doc = new GoogleSpreadsheet(spreadsheet_id);
+  await doc.loadInfo(); // loads document properties and worksheets
+  const sheet = doc.sheetsByIndex[0];
+  const sheetRows = await sheet.getRows();
+  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];
     }
+    tableData.push(mappedData);
   }
+  return tableData;
+}
+*/
+
+export default async function(keywords, spreadsheet_id) {
+  const gid = '0';
+  const response = await fetch(`https://docs.google.com/spreadsheets/d/${spreadsheet_id}/gviz/tq?tqx=out:json&tq&gid=${gid}`);
+  const txt = await response.text();
+
+  const jsonString = txt.match(/(?<="table":).*(?=}\);)/g)[0];
+  const json = JSON.parse(jsonString);
+  const tableData = [];
+  const labelRow = [];
+  json.cols.forEach(colonne => labelRow.push(colonne.label));
+  const keywordsIndex = [];
+  keywords.forEach(key => keywordsIndex.push(labelRow.indexOf(key)));
+  const rawTable = [];
+  json.rows.forEach(r => {
+    const row = []
+    r.c.forEach(cel => {
+      let value = '';
+      try{value = cel.f ? cel.f : cel.v}
+      catch(e){value = ''}
+      row.push(value)
+    })
+    rawTable.push(row)
+  })
+  rawTable.forEach(row => {
+    const mappedData = {};
+    keywordsIndex.forEach(index => {
+      mappedData[labelRow[index]] = row[index];
+
+    });
+    tableData.push(mappedData);
+  });
+  
+
+  return tableData
 }

package/src/app/ModelsTable.vue

@@ -68,7 +68,8 @@
 
 <script>
 /* eslint-disable no-alert, no-console */
-import models from './ModelsInformation.js'
+import getTableData from "./ModelsInformation.js";
+
 import { 
   ElButton as Button,
   ElInput as Input,
@@ -84,15 +85,20 @@ export default {
     Table,
     TableColumn
   ],
-  mixins: [models],
+  async setup() {
+    const keywords = ["Organ", "Species", "Note", "Location",
+      "Last modified","Blackfynn dataset", "Published", "Discover"];
+    const spreadsheet_id = import.meta.env.VITE_GOOGLE_SPREADSHEET_ID;
+    const service_email = import.meta.env.VITE_GOOGLE_SERVICE_SCAFFOLDVUER_EMAIL;
+    const service_key = import.meta.env.VITE_GOOGLE_PRIVATE_SCAFFOLDVUER_KEY;
+    const tableData = await getTableData(keywords, spreadsheet_id, service_email, service_key);
+    return { tableData };
+  },
   data() {
     return {
       search: '',
     }
   },
-  created: function() {
-    this.getModelsInformation();
-  },
   methods: {
     handleView: function(row) {
       this.$emit("viewModelClicked", row.Location);
@@ -106,9 +112,3 @@ export default {
   }
 };
 </script>
-
-<style scoped lang="scss">
-@use "element-plus/theme-chalk/src/input";
-@use "element-plus/theme-chalk/src/table";
-@use "element-plus/theme-chalk/src/table-column";
-</style>

package/src/app/TextureDemos.js

@@ -44,7 +44,7 @@ export const testVolume = async (scaffoldVuer, texture_prefix) => {
   const material = texture.getMaterial(options);
   zincObject.createMesh(cube, material, meshOptions);
   scaffoldVuer.addZincObject(zincObject);
-  zincObject.morph.matrix.set(
+  zincObject.getMorph().matrix.set(
     -100,
     0,
     0,
@@ -62,10 +62,20 @@ export const testVolume = async (scaffoldVuer, texture_prefix) => {
     0,
     1
   );
-  //console.log(zincObject.morph.matrix)
   window.texture = zincObject;
 };
 
+const addCylinder = (scaffoldVuer) => {
+  const THREE = scaffoldVuer.$module.Zinc.THREE;
+  const cylinderGeometry = new THREE.CylinderGeometry(50, 50, 200,80);
+  const material = new THREE.MeshPhongMaterial( {color: 0xffff00, side : THREE.DoubleSide} ); 
+  const cylinderMesh = new THREE.Mesh( cylinderGeometry, material );
+  const zincGeometry = new scaffoldVuer.$module.Zinc.Geometry();
+  zincGeometry.setMesh(cylinderMesh, false, false);
+  zincGeometry.setName("Cylinder");
+  scaffoldVuer.addZincObject(zincGeometry);
+}
+
 export const testSlides = async (scaffoldVuer, texture_prefix) => {
   const scaffoldModule = scaffoldVuer.$module;
   const texture = await getTexture(scaffoldModule, texture_prefix);
@@ -104,11 +114,118 @@ export const testSlides = async (scaffoldVuer, texture_prefix) => {
   //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();
+  const n = textureSlides.getMorph().matrix.clone();
   n.set(-100, 0, 0, -10, 0, -200, 0, 0, 0, 0, -100, 0, 0, 0, 10, 1);
-  textureSlides.morph.applyMatrix4(n);
+  textureSlides.getMorph().applyMatrix4(n);
   scaffoldVuer.addZincObject(textureSlides);
-  //scaffoldVuer.fitWindow();
-  window.texture = textureSlides;
+  scaffoldVuer.fitWindow();
+  //window.texture = textureSlides;
+  //addCylinder(scaffoldVuer);
 };
 
+const padNumber = (number) => {
+  let string = number.toString();
+  while(string.length < 4) {
+    string = "0" + string;
+  }
+  return string;
+}
+
+const getArmTexture = async (scaffoldModule) => {
+  const imgArray = [];
+  const prefix = "https://mapcore-bucket1.s3.us-west-2.amazonaws.com/texture/arm1/jpg";
+  const texture = new scaffoldModule.Zinc.TextureArray();
+  for (let i = 984; i <= 2184;) {
+    imgArray.push(`${prefix}/${padNumber(i)}.jpg`);
+    i = i + 10 ;
+  }
+  await texture.loadFromImages(imgArray);
+  return texture;
+};
+
+
+/*
+{
+    "id": "mesh-location-orientation",
+    "locations": [
+        {
+            "identifier": 1,
+            "label": "dave",
+            "orientation": "[10.0, 0.0, 0.0, 0.0, 10.0, 0.0, 0.0, 0.0, 10.0]",
+            "position": "[62.97939922758831, 48.5944672602095, 1.2382504590408302e-14]",
+            "scale": "[1, 2, 3]"
+            "reference_point": "corner"
+        }
+    ],
+    "version": "0.1.0"
+}
+*/
+
+//https://threejs.org/docs/#manual/en/introduction/Matrix-transformations
+const applyTransformation = (scaffoldVuer, mesh, rotation, position, scale, reference) => {
+  //if (reference === "centre") {
+  //  mesh.geometry.translate(-0.5, -0.5, -0.5);
+  //}
+  const THREE = scaffoldVuer.$module.Zinc.THREE;
+  const matrix = new THREE.Matrix4();
+  matrix.set(
+    rotation[0],
+    rotation[1],
+    rotation[2],
+    0,
+    rotation[3],
+    rotation[4],
+    rotation[5],
+    0,
+    rotation[6],
+    rotation[7],
+    rotation[8],
+    0,
+    0,
+    0,
+    0,
+    0
+  );
+  const quaternion = new THREE.Quaternion().setFromRotationMatrix(matrix);
+  mesh.position.set(...position);
+  mesh.quaternion.copy( quaternion );
+  mesh.scale.set(...scale);
+  mesh.updateMatrix();
+}
+
+
+
+export const testArmSlides = async (scaffoldVuer) => {
+  const scaffoldModule = scaffoldVuer.$module;
+  const texture = await getArmTexture(scaffoldModule);
+  const textureSlides = new scaffoldModule.Zinc.TextureSlides(texture);
+  textureSlides.setName("Arm texture");
+  textureSlides.createSlides([
+    {
+      direction: "x",
+      value: 0.5,
+    },
+    {
+      direction: "y",
+      value: 0.5,
+    },
+    {
+      direction: "z",
+      value: 0.5,
+    },
+  ]);
+
+  const rotation = [
+    0, 0, 1,
+    0, 1, 0,
+    -1, 0, 0
+  ];
+  const position = [0, -1.0, 0.95];
+  const scale = [1.6, 1.6, 1.2];
+  const reference = "corner";
+  applyTransformation(scaffoldVuer, textureSlides.morph, rotation, position, scale, reference);
+  scaffoldVuer.addZincObject(textureSlides);
+  scaffoldVuer.fitWindow();
+};
+
+

package/src/components/OpacityControls.vue

@@ -96,14 +96,14 @@ export default {
 
 .my-slider {
   position: absolute;
-  width: 109px;
+  width: 135px;
   top: -12px;
   left: 50px;
   pointer-events: auto;
 }
 
 .opacity-container {
-  width: 224px;
+  width: 250px;
   height: 93px;
   border-radius: 4px;
   border: solid 1px #d8dce6;

package/src/components/PrimitiveControls.vue

@@ -11,7 +11,7 @@
         ref="opacityControls" />
       <texture-slides-controls
         v-show="isTextureSlides"
-        class="controls"
+        class="texture-controls"
         ref="tSlidesControls" />
     </div>
     <div
@@ -66,8 +66,11 @@ export default {
       } else {
         this.isTextureSlides = false;
       }
-      if (object && object.morph) this.material = ref(object.morph.material);
-      else this.material = undefined;
+      if (object && object.getMorph()) {
+        this.material = ref(object.getMorph().material);
+      } else {
+        this.material = undefined;
+      }
     }
   }
 };
@@ -88,7 +91,7 @@ export default {
     }
   }
   &.close {
-    right: -220px;
+    right: -250px;
     .my-drawer {
       pointer-events: none;
       opacity: 0;
@@ -102,7 +105,7 @@ export default {
   text-align: left;
   border: 1px solid rgb(220, 223, 230);
   background: #ffffff;
-  width:220px;
+  width:250px;
 }
 
 .drawer-button {

package/src/components/ScaffoldTooltip.vue

@@ -30,6 +30,8 @@
 import { ElPopover as Popover } from "element-plus";
 import { Tooltip } from "@abi-software/flatmapvuer";
 import "@abi-software/flatmapvuer/dist/style.css";
+import { mapState } from 'pinia';
+import { useMainStore } from "@/store/index";
 
 /**
  * A component to control the opacity of the target object.
@@ -67,6 +69,11 @@ export default {
     },
   },
   inject: ['scaffoldUrl'],
+  provide() {
+    return {
+      userApiKey: this.userToken,
+    };
+  },
   data: function () {
     return {
       display: false,
@@ -74,6 +81,7 @@ export default {
     };
   },
   computed: {
+    ...mapState(useMainStore,  ['userToken']),
     position: function () {
       let yOffset = 40;
       if (this.region) {
@@ -92,6 +100,7 @@ export default {
           this.annotationEntry = {
             "featureId": encodeURIComponent(region + this.label),
             "resourceId": encodeURIComponent(this.scaffoldUrl),
+            "resource": encodeURIComponent(this.scaffoldUrl),
           };
         }
       }