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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "0.4.0-vue3.6",
+  "version": "0.4.0-vue3.7",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -10,13 +10,15 @@
     "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": "vuese gen",
     "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": "vuese gen;vitepress dev docs",
+    "docs:build": "vuese gen;vitepress build docs",
+    "docs:preview": "vitepress preview docs"
   },
   "type": "module",
   "main": "./dist/scaffoldvuer.umd.cjs",
@@ -52,10 +54,11 @@
     "vue": "^3.4.15",
     "vue-router": "^4.2.5",
     "vue3-component-svg-sprite": "^0.0.1",
-    "zincjs": "^1.3.2"
+    "zincjs": "^1.3.3"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.6.2",
+    "@vuese/cli": "^2.14.3",
     "auto-changelog": "^2.4.0",
     "babel-eslint": "^10.1.0",
     "babel-plugin-component": "^1.1.1",
@@ -64,7 +67,8 @@
     "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": {
@@ -84,5 +88,12 @@
   "browserslist": [
     "> 1%",
     "last 2 versions"
-  ]
+  ],
+  "vuese": {
+    "include": [
+      "src/components/ScaffoldVuer.vue"
+    ],
+    "genType": "markdown",
+    "outDir": "docs"
+  }
 }

package/src/App.vue

@@ -111,6 +111,9 @@
           <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-row>
         <el-row :gutter="20">
@@ -126,7 +129,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 +157,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,
@@ -326,6 +331,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());
     },
@@ -391,6 +413,12 @@ export default {
       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/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

@@ -66,6 +66,17 @@ export const testVolume = async (scaffoldVuer, texture_prefix) => {
   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);
@@ -108,7 +119,117 @@ export const testSlides = async (scaffoldVuer, texture_prefix) => {
   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;
+  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
+  );
+  console.log(matrix)
+  const quaternion = new THREE.Quaternion().setFromRotationMatrix(matrix);
+  console.log(quaternion);
+  mesh.position.set(...position);
+  mesh.quaternion.copy( quaternion );
+  mesh.scale.set(...scale);
+  mesh.updateMatrix();
+  console.log(rotation)
+}
+
+
+
+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 = [
+     Math.cos(Math.PI / 2.0), 0, Math.sin(Math.PI / 2.0),
+    0, 1, 0,
+    -Math.sin(Math.PI / 2.0), 0, Math.cos(Math.PI / 2.0)
+  ];
+  const position = [0, -1.0, 0.95];
+  const scale = [1.6, 1.6, 1.2];
+  const reference = "centre";
+  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
@@ -88,7 +88,7 @@ export default {
     }
   }
   &.close {
-    right: -220px;
+    right: -250px;
     .my-drawer {
       pointer-events: none;
       opacity: 0;
@@ -102,7 +102,7 @@ export default {
   text-align: left;
   border: 1px solid rgb(220, 223, 230);
   background: #ffffff;
-  width:220px;
+  width:250px;
 }
 
 .drawer-button {