@abi-software/scaffoldvuer 0.1.53-beta.2 → 0.1.53-wc

package/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "0.1.53-beta.2",
+  "version": "0.1.53-wc",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -12784,9 +12784,9 @@
           }
         },
         "terser": {
-          "version": "5.14.1",
-          "resolved": "https://registry.npmjs.org/terser/-/terser-5.14.1.tgz",
-          "integrity": "sha512-+ahUAE+iheqBTDxXhTisdA8hgvbEG1hHOQ9xmNjeUJSoi6DU/gMrKNcfZjHkyY6Alnuyc+ikYJaxxfHkT3+WuQ==",
+          "version": "5.15.0",
+          "resolved": "https://registry.npmjs.org/terser/-/terser-5.15.0.tgz",
+          "integrity": "sha512-L1BJiXVmheAQQy+as0oF3Pwtlo4s3Wi1X2zNZ2NxOB4wx9bdS9Vk67XQENLFdLYGCK/Z2di53mTj/hBafR+dTA==",
           "dev": true,
           "requires": {
             "@jridgewell/source-map": "^0.3.2",
@@ -12796,9 +12796,9 @@
           },
           "dependencies": {
             "acorn": {
-              "version": "8.7.1",
-              "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.1.tgz",
-              "integrity": "sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==",
+              "version": "8.8.0",
+              "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.0.tgz",
+              "integrity": "sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==",
               "dev": true
             }
           }
@@ -14728,9 +14728,9 @@
       }
     },
     "terser": {
-      "version": "4.8.0",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-4.8.0.tgz",
-      "integrity": "sha512-EAPipTNeWsb/3wLPeup1tVPaXfIaU68xMnVdPafIL1TV05OhASArYyIfFvnvJCNrR2NIOvDVNNTFRa+Re2MWyw==",
+      "version": "4.8.1",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-4.8.1.tgz",
+      "integrity": "sha512-4GnLC0x667eJG0ewJTa6z/yXrbLGv80D9Ru6HIpCQmO+Q4PfEtBFi0ObSckqwL6VyQv/7ENJieXHo2ANmdQwgw==",
       "dev": true,
       "requires": {
         "commander": "^2.20.0",
@@ -15645,6 +15645,11 @@
         "webpack-merge": "^4.2.2"
       }
     },
+    "vue-custom-element": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/vue-custom-element/-/vue-custom-element-3.3.0.tgz",
+      "integrity": "sha512-ePuy1EDDJd9/piwXLwsCyMQ964HsdhXPzypM9OX0r4JBa20EVN28U7RXeTWwXkoFKim/b3sP7xT2NEM0Di6tUQ=="
+    },
     "vue-docgen-api": {
       "version": "4.47.0",
       "resolved": "https://registry.npmjs.org/vue-docgen-api/-/vue-docgen-api-4.47.0.tgz",
@@ -17192,9 +17197,9 @@
       }
     },
     "zincjs": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/zincjs/-/zincjs-1.0.4.tgz",
-      "integrity": "sha512-dJKwUbJSSH3UbBUkG3/5+w+JcPfhp8/tWzZGgPRTkYaFHoO8h2I9oPVqxKMO4h4AL8blbR6ux4zyMtZAMLznUw==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/zincjs/-/zincjs-1.0.3.tgz",
+      "integrity": "sha512-S4ajnPitOO8VD6i9MpLXW4s9p1SBj1hQSxTnIbT6GwHUSDhGXCjkNPSqXhX4Ki/q6/48mbz2hLdDBBJY7qkkxA==",
       "requires": {
         "css-element-queries": "^1.2.2",
         "lodash": "^4.17.19",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "0.1.53-beta.2",
+  "version": "0.1.53-wc",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -10,10 +10,11 @@
     "serve": "vue-cli-service serve --port 8081",
     "lint": "vue-cli-service lint --ext .js,.vue src",
     "build-bundle": "vue-cli-service build --target lib --name scaffoldvuer ./src/components/index.js",
+    "build-wc": "vue-cli-service build --target lib --name scaffoldvuer-wc ./src/ScaffoldVuer-wc.js --mode production --env bundle",
     "styleguide": "vue-cli-service styleguidist",
     "styleguide:build": "vue-cli-service styleguidist:build"
   },
-  "main": "./dist/scaffoldvuer.common.js",
+  "main": "./dist/scaffoldvuer-wc.umd.min.js",
   "files": [
     "dist/*",
     "src/*",
@@ -31,9 +32,10 @@
     "lodash": "^4.17.21",
     "query-string": "^6.11.1",
     "vue": "^2.6.10",
+    "vue-custom-element": "^3.3.0",
     "vue-drag-resize": "^1.3.2",
     "vue-router": "^3.5.1",
-    "zincjs": "^1.0.4"
+    "zincjs": "^1.0.3"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.0.0",

package/src/App.vue

@@ -21,7 +21,6 @@
         :render="render"
         :region="region"
         :view-u-r-l="viewURL"
-        :format="format"
         @on-ready="onReady"
         @scaffold-selected="onSelected"
         @scaffold-navigated="onNavigated"
@@ -289,8 +288,6 @@ export default {
       rendererInfo: undefined,
       zoom: 1,
       pos: [0, 0],
-      format: "metadata",
-      sceneSettings: [],
     };
   },
   watch: {
@@ -310,6 +307,7 @@ export default {
     }
   },
   mounted: function() {
+    this._sceneSettings = [];
     this.selectedCoordinates = this.$refs.scaffold.getDynamicSelectedCoordinates();
     this.rendererInfo = this.$refs.scaffold.getRendererInfo();
   },
@@ -341,11 +339,11 @@ export default {
     },
     saveSettings: function() {
       const state = this.$refs.scaffold.getState();
-      this.sceneSettings.push(this.$refs.scaffold.getState());
+      this._sceneSettings.push(this.$refs.scaffold.getState());
     },
     restoreSettings: function() {
-      if (this.sceneSettings.length > 0)
-        this.$refs.scaffold.setState(this.sceneSettings.pop());
+      if (this._sceneSettings.length > 0)
+        this.$refs.scaffold.setState(this._sceneSettings.pop());
     },
     viewModelClicked: function(location) {
       this.input = location;
@@ -367,10 +365,11 @@ export default {
     onReady: function() {
       console.log("ready")
       this.$refs.dropzone.revokeURLs();
-      const names = ["left ventricle.mesh2d", "right ventricle.mesh2d"];
-      this.$refs.scaffold.changeActiveByName(names, "", false);
+      //const names = ["left ventricle.mesh2d", "right ventricle.mesh2d"];
+      //this.$refs.scaffold.changeActiveByName(names, "", true);
     },
     onSelected: function(data) {
+      console.log(data)
       if (data && (data.length > 0) && data[0].data.group) {
         delete this.$route.query["viewURL"];
         this.$router.replace({
@@ -383,10 +382,8 @@ export default {
       this.pos[0] = data.target[0];
       this.pos[1] = data.target[1];
     },
-    onFilesDrop: function(payload) {
-      if (payload.format == "gltf") this.format = "gltf";
-      else this.format = "metadata";
-      this.input = payload.url;
+    onFilesDrop: function(metaURL) {
+      this.input = metaURL;
     },
     parseInput: function() {
       if (this.$route.query.url !== this.input) {
@@ -408,11 +405,6 @@ export default {
         this.url =
           "https://mapcore-bucket1.s3-us-west-2.amazonaws.com/others/29_Jan_2020/heartICN_metadata.json";
       }
-      if (this.url.includes(".gltf") || this.url.includes(".glb")) {
-        this.format = "gltf";
-      } else if (this.url.includes(".json")) {
-        this.format = "metadata";
-      }
       this.input = this.url;
       if (query.region) {
         this.region = query.region;

package/src/ScaffoldVuer-wc.js

@@ -0,0 +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);
+*/

package/src/components/DropZone.vue

@@ -33,7 +33,7 @@ export default {
     });
   },
   methods: {
-    createMetadataObjectURLs: function (text, list) {
+    createObjectURLs: function (text, list) {
       let content = text;
       for (const [key, file] of Object.entries(list)) {
         if (content.includes(key)) {
@@ -45,14 +45,7 @@ export default {
       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" });
+      this.$emit("files-drop", metaURL);
     },
     revokeURLs: function () {
       this.objectURLs.forEach(objectURL => URL.revokeObjectURL(objectURL));
@@ -62,8 +55,6 @@ export default {
       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++) {
@@ -72,16 +63,6 @@ export default {
           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]) => {
@@ -93,12 +74,9 @@ export default {
         const metaFileURL = URL.createObjectURL(metadata.file);
         fetch(metaFileURL)
           .then((response) => response.text())
-          .then((text) => this.createMetadataObjectURLs(text, list));
+          .then((text) => this.createObjectURLs(text, list));
         URL.revokeObjectURL(metaFileURL);
       }
-      if (gltf) {
-        this.createGLTFURL(gltf.file, binary);
-      }
     },
   },
 };

package/src/components/ScaffoldVuer.vue

@@ -363,13 +363,6 @@ export default {
       type: Boolean,
       default: false
     },
-    /**
-     * Format of the input URL
-     */
-    format: {
-      type: String,
-      default: "metadata"
-    },
     /**
      * Settings for minimap position, size and alignment.
      */
@@ -480,17 +473,10 @@ export default {
         visible: false,
         x: 200,
         y: 200
-      },
-      fileFormat: "metadata",
+      }
     };
   },
   watch: {
-    format: {
-      handler: function(value) {
-        this.fileFormat = value;
-      },
-      immediate: true
-    },
     url: {
       handler: function(newValue) {
         if (this.state === undefined || this.state.url === undefined)
@@ -1003,10 +989,9 @@ export default {
      */
     getState: function() {
       let state = {
-        format: this.fileFormat,
         url: this._currentURL,
         viewport: undefined,
-        visibility: undefined,
+        visibility: undefined
       };
       if (this.$refs.treeControl)
         state.visibility = this.$refs.treeControl.getState();
@@ -1026,7 +1011,6 @@ export default {
       if (state) {
         if (state.url && state.url !== this._currentURL) {
           this.setURLAndState(state.url, {
-            fileFormat: state.fileFormat,
             viewport: state.viewport,
             visibility: state.visibility
           });
@@ -1063,7 +1047,6 @@ export default {
      */
     setURLAndState: function(newValue, state) {
       if (newValue != this._currentURL) {
-        if (state && state.format) this.fileFormat = state.format;
         let viewport = state && state.viewport ? state.viewport : undefined;
         let visibility =
           state && state.visibility ? state.visibility : undefined;
@@ -1080,18 +1063,13 @@ export default {
             visibility: visibility
           })
         );
-        if (this.fileFormat === "gltf") {
-          this.$module.loadGLTFFromURL(newValue, "scene", true);
-        } else {
-          this.$module.loadOrgansFromURL(
-            newValue,
-            undefined,
-            undefined,
-            "scene",
-            undefined,
-            true
-          );
-        }
+        this.$module.loadOrgansFromURL(
+          newValue,
+          undefined,
+          undefined,
+          "scene",
+          undefined
+        );
         this.$module.scene.displayMarkers = this.displayMarkers;
         this.$module.scene.displayMinimap = this.displayMinimap;
         this.updateMinimapScissor();
@@ -1108,8 +1086,9 @@ export default {
     },
     /**
      * Callback when drawer is toggled.
+     *
      */
-    drawerToggled: function(flag) {pppp
+    drawerToggled: function(flag) {
       this.drawerOpen = flag;
       this.adjustLayout();
     },

package/src/scripts/organsRenderer.js

@@ -474,15 +474,14 @@ const OrgansSceneData = function() {
       _this.sceneData.currentName = name;
 	  }
 
-	  this.loadOrgansFromURL = function(url, speciesName, systemName, partName, viewURL, clearFirst) {
+	  this.loadOrgansFromURL = function(url, speciesName, systemName, partName, viewURL) {
 		  if (_this.zincRenderer) {
 			  if (partName && (_this.sceneData.metaURL !== url)) {
 			      setSceneData(speciesName, systemName, partName, undefined);
 			      const name = _this.sceneData.currentName;
 			      let organScene = _this.zincRenderer.getSceneByName(name);
 			      if (organScene) {
-              if (clearFirst)
-			    	    organScene.clearAll();
+			    	  organScene.clearAll();
 			      } else {
 			    	  organScene = _this.zincRenderer.createScene(name);
 			      }
@@ -508,36 +507,6 @@ const OrgansSceneData = function() {
 			  }
 		  }
 	  }
-
-    this.loadGLTFFromURL = function(url, partName, clearFirst) {
-		  if (_this.zincRenderer) {
-			  if (partName && (_this.sceneData.metaURL !== url)) {
-			      setSceneData(undefined, undefined, partName, undefined);
-			      const name = _this.sceneData.currentName;
-			      let organScene = _this.zincRenderer.getSceneByName(name);
-			      if (organScene) {
-              if (clearFirst)
-			    	    organScene.clearAll();
-			      } else {
-			    	  organScene = _this.zincRenderer.createScene(name);
-			      }
-			      for (let i = 0; i < sceneChangedCallbacks.length;i++) {
-			    	  sceneChangedCallbacks[i](_this.sceneData);
-			      }
-  	    	  _this.sceneData.viewURL = undefined;
-			      _this.sceneData.metaURL = url;
-			      organScene.loadGLTF(url, _addOrganPartCallback(undefined, partName, false),
-              downloadCompletedCallback());
-			      _this.scene = organScene;
-			      _this.zincRenderer.setCurrentScene(organScene);
-			      _this.graphicsHighlight.reset();
-			      const zincCameraControl = organScene.getZincCameraControls();
-			      zincCameraControl.enableRaycaster(organScene, _pickingCallback(), _hoverCallback());
-			      zincCameraControl.setMouseButtonAction("AUXILIARY", "ZOOM");
-			      zincCameraControl.setMouseButtonAction("SECONDARY", "PAN");
-			  }
-		  }
-	  }
 	  	  
 	  this.alignCameraWithSelectedObject = function(transitionTime) {
 	    const objects = _this.graphicsHighlight.getSelected();
@@ -567,7 +536,7 @@ const OrgansSceneData = function() {
 			  _this.setName(settings.name);
 			  if (settings.metaURL !== undefined && settings.metaURL != "") {
 				  _this.loadOrgansFromURL(settings.metaURL, settings.species,
-					  settings.system, settings.part, settings.viewURL, true);
+					settings.system, settings.part, settings.viewURL);
 			  } else {
 				  _this.loadOrgans(settings.species, settings.system, settings.part);
 			  }

package/vue.config.js

@@ -1,11 +1,6 @@
-const nodeExternals = require('webpack-node-externals');
+//const nodeExternals = require('webpack-node-externals');
 
 module.exports = {
-  configureWebpack: config => {
-    if(process.env.NODE_ENV === 'production') {
-      config.externals =  [ nodeExternals({allowlist: [/^element-ui/]}) ];
-    }
-  },
   chainWebpack: config => {
     // GraphQL Loader
     config.module
@@ -28,6 +23,8 @@ module.exports = {
       .end()
   },
   css: {
+    sourceMap: true,
+    extract: false,
     //Import variables into all stylesheets.
     loaderOptions: {
       sass: {