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

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

@@ -13,8 +13,8 @@ const OrgansSceneData = function() {
   this.currentSpecies  = "";
   this.metaURL = "";
   this.viewURL = "";
-  this.currentTime = 0.0;
   this.timeVarying = false;
+	this.currentTime = 0.0;
 }
 
 /**
@@ -43,8 +43,7 @@ const OrgansSceneData = function() {
 	const modelsLoader = ModelsLoaderIn;
   this.NDCCameraControl = undefined;
 	_this.typeName = "Organ Viewer";
-	this.currentTime = 0.0
-	
+
 	this.getSceneData = function() {
 	  return _this.sceneData;
 	}
@@ -64,7 +63,6 @@ const OrgansSceneData = function() {
 				_this.scene.setMorphsTime(actualTime);
 		}
 		_this.sceneData.currentTime = value;
-		_this.currentTime = value;
 	}
 	
 	/**
@@ -84,7 +82,6 @@ const OrgansSceneData = function() {
       _this.sceneData.nerveMap.additionalReader.setTime(currentTime / 
         duration);
 		_this.sceneData.currentTime = currentTime / duration * 100.0;
-		_this.currentTime = currentTime / duration * 100.0;
   }
 
 	this.getCurrentTime = function() {
@@ -204,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;
       }
@@ -463,7 +460,6 @@ const OrgansSceneData = function() {
 			_this.sceneData.currentPart = partName;
 			_this.sceneData.currentTime = 0.0;
 			_this.sceneData.timeVarying = false;
-			_this.currentTime = 0.0;
       // This is used as title
       let name = "";
       if (speciesName)

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

@@ -4,6 +4,7 @@ import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import Components from 'unplugin-vue-components/vite'
 import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+import { nodePolyfills } from 'vite-plugin-node-polyfills'
 
 // https://vitejs.dev/config/
 export default defineConfig(({ command, mode }) => {
@@ -33,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"),
@@ -62,6 +68,12 @@ export default defineConfig(({ command, mode }) => {
       // If you want to exposes all env variables, which is not recommended
       // 'process.env': env
     };
+    config.plugins.push(
+      nodePolyfills({
+        // To add only specific polyfills, add them here. If no option is passed, adds all polyfills
+        include: ['path']
+      })
+    );
   };
   return config;
 })

package/vite.static-build.js

@@ -1,5 +1,6 @@
 import { defineConfig } from 'vite'
 import rootConfig from './vite.config.js'
+import { nodePolyfills } from 'vite-plugin-node-polyfills'
 
 // defineWorkspace provides a nice type hinting DX
 export default defineConfig((configEnv) => {
@@ -7,6 +8,11 @@ export default defineConfig((configEnv) => {
   config.build = {
     outDir: "test-html"
   };
-
+  config.plugins.push(
+    nodePolyfills({
+      // To add only specific polyfills, add them here. If no option is passed, adds all polyfills
+      include: ['path']
+    })
+  );
   return config;
 })

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)
+  })
+}

package/styleguide.config.js

@@ -1,22 +0,0 @@
-module.exports = {
-	// set your styleguidist configuration here
-	title: 'Scaffoldvuer API reference',
-	components: 'src/components/ScaffoldVuer.vue',
-	// defaultExample: true,
-	// sections: [
-	//   {
-	//     name: 'First Section',
-	//     components: 'src/components/**/[A-Z]*.vue'
-	//   }
-	// ],
-	// webpackConfig: {
-	//   // custom config goes here
-	// },
-  exampleMode: 'expand',
-  copyCodeButton: true,
-  ribbon: {
-    url: 'https://github.com/ABI-Software/scaffoldvuer',
-    text: 'Github Page'
-  },
-  styleguideDir: 'docs'
-}