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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "0.4.0-vue3.7",
+  "version": "1.0.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -10,14 +10,16 @@
     "serve": "vite --host --force",
     "build-bundle": "vite build",
     "build-static": "vite build -c vite.static-build.js",
-    "vuese-gen": "vuese gen",
+    "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",
-    "docs:dev": "vuese gen;vitepress dev docs",
-    "docs:build": "vuese gen;vitepress build docs",
+    "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",
@@ -39,30 +41,31 @@
     "*.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.3"
+    "zincjs": "^1.5.1-beta.1"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.6.2",
-    "@vuese/cli": "^2.14.3",
+    "@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",
@@ -88,12 +91,5 @@
   "browserslist": [
     "> 1%",
     "last 2 versions"
-  ],
-  "vuese": {
-    "include": [
-      "src/components/ScaffoldVuer.vue"
-    ],
-    "genType": "markdown",
-    "outDir": "docs"
-  }
+  ]
 }

package/src/App.vue

@@ -115,6 +115,12 @@
             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"
@@ -204,6 +210,7 @@ export default {
       helpMode: false,
       displayMarkers: false,
       onClickMarkers: false,
+      wireframe: false,
       syncMode: false,
       currentTime: 0,
       displayMinimap: false,
@@ -260,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) => {
@@ -287,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) {
@@ -406,10 +419,14 @@ 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;

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/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,7 +62,6 @@ export const testVolume = async (scaffoldVuer, texture_prefix) => {
     0,
     1
   );
-  //console.log(zincObject.morph.matrix)
   window.texture = zincObject;
 };
 
@@ -115,9 +114,9 @@ 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;
@@ -187,14 +186,11 @@ const applyTransformation = (scaffoldVuer, mesh, rotation, position, scale, refe
     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)
 }
 
 
@@ -220,13 +216,13 @@ export const testArmSlides = async (scaffoldVuer) => {
   ]);
 
   const rotation = [
-     Math.cos(Math.PI / 2.0), 0, Math.sin(Math.PI / 2.0),
+    0, 0, 1,
     0, 1, 0,
-    -Math.sin(Math.PI / 2.0), 0, Math.cos(Math.PI / 2.0)
+    -1, 0, 0
   ];
   const position = [0, -1.0, 0.95];
   const scale = [1.6, 1.6, 1.2];
-  const reference = "centre";
+  const reference = "corner";
   applyTransformation(scaffoldVuer, textureSlides.morph, rotation, position, scale, reference);
   scaffoldVuer.addZincObject(textureSlides);
   scaffoldVuer.fitWindow();

package/src/components/PrimitiveControls.vue

@@ -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;
+      }
     }
   }
 };

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),
           };
         }
       }

package/src/components/ScaffoldVuer.vue

@@ -2076,6 +2076,7 @@ export default {
     left: 53px !important;
   }
 }
+
 .scaffold-select-box {
   border-radius: 4px;
   border: 1px solid rgb(144, 147, 153);

package/src/main.js

@@ -1,17 +1,29 @@
 import { createApp } from 'vue'
+import { createPinia } from 'pinia'
 import * as VueRouter from 'vue-router'
 import App from './App.vue'
+import { useMainStore } from '@/store/index'
 
 const routes = [
   { path: '/'},
 ]
 
+const app = createApp(App)
+
 const router = VueRouter.createRouter({
   // 4. Provide the history implementation to use. We are using the hash history for simplicity here.
   history: VueRouter.createWebHashHistory(),
   routes,
 })
-
-const app = createApp(App)
 app.use(router)
+const pinia = createPinia()
+
+app.use(pinia)
+
+const mainStore = useMainStore()
+const token = document.cookie.split("; ").find((row) => row.startsWith("user-token"))
+if (mainStore && token) {
+  mainStore.setUserToken(token.split("=")[1])
+}
+
 app.mount('#app')

package/src/scripts/GraphicsHighlight.js

@@ -1,4 +1,27 @@
 import { THREE } from 'zincjs';
+
+const setEmissiveColour = (fullList, colour, setDepthFunc) => {
+  for (let i = 0; i < fullList.length; i++) {
+    if (fullList[i] && fullList[i].material && fullList[i].material.emissive) {
+      let object = fullList[i].userData;
+      if (object && object.isZincObject) {
+        object.setEmissiveRGB(colour);
+      } else if (fullList[i].material && fullList[i].material.emissive) {
+        fullList[i].material.emissive.setRGB(...colour);
+      }
+      if (setDepthFunc && fullList[i].material.depthFunc) {
+        fullList[i].material.depthFunc = THREE.LessEqualDepth;
+      }
+      fullList[i].children.forEach(child => {
+        const object = child.userData;
+        if (object && object.isZincObject && child.material && child.material.emissive) {
+          child.material.emissive.setRGB(...colour);
+        }
+      });
+    }
+  }
+}
+
 /**
  * This module manages highlighted and selected objects in 3D modules. 
  * 
@@ -57,17 +80,50 @@ const GraphicsHighlight = function() {
     }
     return _temp1;
   }
-  
+
+
+   /*
+    * Not sure why the following block does not work
+    *
   this.setHighlighted = function(objects) {
     const previousHighlightedObjects = [...currentHighlightedObjects];
-    _this.resetHighlighted();
     // Selected object cannot be highlighted
     const array = getUnmatchingObjects(objects, currentSelectedObjects);
     const fullList = getFullListOfObjects(array);
-    for (let i = 0; i < fullList.length; i++) {
-      if (fullList[i] && fullList[i].material && fullList[i].material.emissive)
-        fullList[i].material.emissive.setRGB(..._this.highlightColour);
+    const different = isDifferent(array, previousHighlightedObjects);
+    console.log("highlight:", different)
+    if (different) {
+      _this.resetHighlighted();
+      setEmissiveColour(fullList, _this.highlightColour, false);
+    }
+    currentHighlightedObjects = array;
+    return different;
+  }
+
+  this.setSelected = function(objects) {
+    // first find highlighted object that are not selected
+    const previousHSelectedObjects = [...currentSelectedObjects];
+    const fullList = getFullListOfObjects(objects);
+    const different = isDifferent(objects, previousHSelectedObjects);
+    console.log("selected:", different)
+    if (different) {
+      _this.resetHighlighted();
+      _this.resetSelected();
+      setEmissiveColour(fullList, _this.selectColour, false);
     }
+    currentSelectedObjects = objects;
+    return different;
+  }
+  */
+
+
+  this.setHighlighted = function(objects) {
+    const previousHighlightedObjects = [...currentHighlightedObjects];
+    _this.resetHighlighted();
+    // Selected object cannot be highlighted
+    const array = getUnmatchingObjects(objects, currentSelectedObjects);
+    const fullList = getFullListOfObjects(array);
+    setEmissiveColour(fullList, _this.highlightColour, false);
     currentHighlightedObjects = array;
     return isDifferent(currentHighlightedObjects, previousHighlightedObjects);
   }
@@ -79,10 +135,7 @@ const GraphicsHighlight = function() {
     _this.resetHighlighted();
     _this.resetSelected();
     const fullList = getFullListOfObjects(objects);
-    for (let i = 0; i < fullList.length; i++) {
-    	if (fullList[i] && fullList[i].material && fullList[i].material.emissive)
-        fullList[i].material.emissive.setRGB(..._this.selectColour);
-    }
+    setEmissiveColour(fullList, _this.selectColour, false);
     currentSelectedObjects = objects;
     return isDifferent(currentSelectedObjects, previousHSelectedObjects);
   }
@@ -98,27 +151,13 @@ const GraphicsHighlight = function() {
   
   this.resetHighlighted = function() {
     const fullList = getFullListOfObjects(currentHighlightedObjects);
-    for (let i = 0; i < fullList.length; i++) {
-      if (fullList[i] && fullList[i].material) {
-        if (fullList[i].material.emissive)
-          fullList[i].material.emissive.setRGB(..._this.originalColour);
-        if (fullList[i].material.depthFunc)
-          fullList[i].material.depthFunc = THREE.LessEqualDepth;
-      }
-    }
+    setEmissiveColour(fullList, _this.originalColour, true);
     currentHighlightedObjects = [];
   }
   
   this.resetSelected = function() {
     const fullList = getFullListOfObjects(currentSelectedObjects);
-    for (let i = 0; i < fullList.length; i++) {
-    	if (fullList[i] && fullList[i].material) {
-    		if (fullList[i].material.emissive)
-          fullList[i].material.emissive.setRGB(..._this.originalColour);
-    		if (fullList[i].material.depthFunc)
-          fullList[i].material.depthFunc = THREE.LessEqualDepth;
-    	}
-    }
+    setEmissiveColour(fullList, _this.originalColour, true);
     currentSelectedObjects = [];
   }
   

package/src/scripts/OrgansRenderer.js

@@ -201,7 +201,7 @@ const OrgansSceneData = function() {
       if (intersected.object.userData && 
         intersected.object.userData.isMarker) {
         marker = true;
-        intersectedObject = intersected.object.userData.parent.morph;
+        intersectedObject = intersected.object.userData.parent.getMorph();
       } else {
         intersectedObject = intersected.object;
       }

package/src/scripts/RendererModule.js

@@ -114,8 +114,8 @@ RendererModule.prototype.setHighlightedByZincObjects = function(
     let morphs = [];
     if (zincObjects) {
       zincObjects.forEach(zincObject => {
-        if (zincObject && zincObject.morph)
-          morphs.push(zincObject.morph);
+        if (zincObject && zincObject.getMorph())
+          morphs.push(zincObject.getMorph());
       });
     }
 
@@ -179,8 +179,12 @@ RendererModule.prototype.setSelectedByZincObjects = function(
   let morphs = [];
   if (zincObjects) {
     zincObjects.forEach(zincObject => {
-      if (zincObject && zincObject.morph)
-        morphs.push(zincObject.morph);
+      if (zincObject) {
+        const morph = zincObject.getMorph();
+        if (morph) {
+          morphs.push(morph);
+        }
+      }
     });
   }
 
@@ -194,17 +198,7 @@ const addGlyphToArray = function(objects) {
 }
 
 RendererModule.prototype.findObjectsByGroupName = function(groupName) {
-  const geometries = this.scene.findGeometriesWithGroupName(groupName);
-  const objects = [];
-  for (let i = 0; i < geometries.length; i ++ ) {
-    objects.push(geometries[i].morph);
-  }
-  const glyphsets = this.scene.findGlyphsetsWithGroupName(groupName);
-  for (let i = 0; i < glyphsets.length; i ++ ) {
-    glyphsets[i].forEachGlyph(addGlyphToArray(objects));
-  }
-  
-  return objects;
+  return this.scene.findObjectsWithGroupName(groupName);
 }
 
 RendererModule.prototype.setHighlightedByGroupName = function(groupName, propagateChanges) {

package/src/store/index.js

@@ -0,0 +1,24 @@
+import { defineStore } from 'pinia'
+
+/**
+ * Activate the store when run the application individually.
+ * If the store exist in parent application, 
+ * instead of creating a new store it will access the parent main store.
+ */
+export const useMainStore = defineStore('main', {
+  state: () => ({
+    userProfile: {
+      token: ''
+    },
+  }),
+  getters: {
+    userToken(state) {
+      return state.userProfile.token
+    },
+  },
+  actions: {
+    setUserToken(value) {
+      this.userProfile.token = value
+    },
+  }
+})

package/vite.config.js

@@ -34,6 +34,11 @@ export default defineConfig(({ command, mode }) => {
         // https://github.com/antfu/unocss
         // see unocss.config.ts for config
     ],
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, './src'),
+      }
+    },
     build: {
       lib: {
         entry: path.resolve(__dirname, "./src/components/index.js"),

package/vuese-generator.js

@@ -0,0 +1,65 @@
+/**
+ * Vuese Generator
+ *
+ * To generate markdown files from Vue components
+ * To watch components changes for Vitepress on Dev Mode
+ */
+
+import fs from 'fs'
+import path from 'path'
+import chokidar from 'chokidar'
+import { parser } from '@vuese/parser'
+import { Render } from '@vuese/markdown-render'
+
+const watchMode = process.argv.find((argv) => argv === 'watch')
+
+const componentsDir = 'src/components'
+const components = ['ScaffoldVuer.vue']
+const outputDir = 'docs/components'
+
+function generateMarkdown(file) {
+  const fileWithPath = `${componentsDir}/${file}`
+  const fileContent = fs.readFileSync(fileWithPath, 'utf-8')
+
+  try {
+    const parserResult = parser(fileContent)
+    const r = new Render(parserResult)
+    const renderResult = r.render()
+    const markdownResult = r.renderMarkdown()
+    const markdownContent = markdownResult.content
+    const componentName = path.basename(fileWithPath, '.vue')
+
+    if (!fs.existsSync(outputDir)) {
+      fs.mkdirSync(outputDir)
+    }
+
+    fs.writeFile(`${outputDir}/${componentName}.md`, markdownContent, (err) => {
+      if (err) {
+        console.error(`Error writing markdown file for ${componentName}`, err)
+      } else {
+        console.log(`Markdown file for ${componentName} is generated!`)
+      }
+    })
+  } catch(e) {
+    console.error(e)
+  }
+}
+
+// To generate markdown files - one time
+components.forEach((component) => {
+  console.log(`Write markdown file for ${component} on first load.`)
+  generateMarkdown(component)
+})
+
+// To watch component changes and generate markdown files
+if (watchMode) {
+  const watcher = chokidar.watch(components, {
+    cwd: componentsDir,
+    ignoreInitial: true,
+  })
+
+  watcher.on('change', (file) => {
+    console.log(`The component ${file} has changed!`)
+    generateMarkdown(file)
+  })
+}