@abi-software/scaffoldvuer 0.1.54-beta.3 → 0.1.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "0.1.54-beta.3",
+  "version": "0.1.55",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -9,7 +9,9 @@
   "scripts": {
     "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-bundle": "npm run build:bundle && npm run build:wc",
+    "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 wc --env bundle --no-clean",
     "styleguide": "vue-cli-service styleguidist",
     "styleguide:build": "vue-cli-service styleguidist:build"
   },
@@ -31,14 +33,15 @@
     "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.7"
+    "zincjs": "^1.0.9"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.0.0",
     "@vue/cli-plugin-eslint": "^4.5.15",
-    "@vue/cli-service": "^4.5.13",
+    "@vue/cli-service": "^4.5.18",
     "babel-eslint": "^10.0.3",
     "babel-plugin-component": "^1.1.1",
     "base64-inline-loader": "^1.1.1",

package/src/App.vue

@@ -49,8 +49,17 @@
         </el-row>
         <el-row :gutter="20">
           <el-col
-            :span="6"
-            :offset="2"
+            :span="4"
+            :offset="1"
+          >
+            <el-switch
+              v-model="displayUI"
+              active-text="UI"
+            />
+          </el-col>
+          <el-col
+            :span="4"
+            :offset="1"
           >
             <el-switch
               v-model="displayMarkers"
@@ -60,8 +69,8 @@
             />
           </el-col>
           <el-col
-            :span="6"
-            :offset="2"
+            :span="4"
+            :offset="1"
           >
             <el-switch
               v-model="displayMinimap"
@@ -72,7 +81,7 @@
           </el-col>
           <el-col
             :span="6"
-            :offset="2"
+            :offset="1"
           >
             <el-switch
               v-model="tumbleOn"
@@ -340,7 +349,6 @@ export default {
         })
     },
     saveSettings: function() {
-      const state = this.$refs.scaffold.getState();
       this.sceneSettings.push(this.$refs.scaffold.getState());
     },
     restoreSettings: function() {

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

@@ -38,7 +38,8 @@ export default {
       for (const [key, file] of Object.entries(list)) {
         if (content.includes(key)) {
           const objectURL = URL.createObjectURL(file);
-          content = content.replace(key, objectURL);
+          const re = new RegExp(key, "g");
+          content = content.replace(re, objectURL);
           this.objectURLs.push(objectURL);
         }
       }

package/src/components/ScaffoldTooltip.vue

@@ -8,7 +8,8 @@
       trigger="manual"
       popper-class="tooltip-popper non-selectable"
     >
-      <div>{{ label }}</div>
+      <div class="tooltip-text">{{ label }}</div>
+      <div class="tooltip-text" v-if="region">Region: {{ region }}</div>
       <i v-popover:tooltip />
     </el-popover>
   </div>
@@ -34,6 +35,10 @@ export default {
       type: String,
       default: "",
     },
+    region: {
+      type: String,
+      default: "",
+    },
     visible: {
       type: Boolean,
       default: false,
@@ -118,6 +123,10 @@ export default {
     }
   }
 
+  .tooltip-text {
+    text-align: center;
+  }
+
   ::v-deep .non-selectable {
     user-select: none;
     pointer-events: none;

package/src/components/ScaffoldVuer.vue

@@ -10,6 +10,7 @@
     <map-svg-sprite-color />
     <scaffold-tooltip
       :label="tData.label"
+      :region="tData.region"
       :visible="tData.visible"
       :x="tData.x"
       :y="tData.y"
@@ -354,7 +355,7 @@ export default {
      */
     displayMarkers: {
       type: Boolean,
-      default: true
+      default: false
     },
     /**
      * Show/hide minimap.
@@ -477,6 +478,7 @@ export default {
       defaultCheckedKeys: [],
       tData: {
         label: "",
+        region: "",
         visible: false,
         x: 200,
         y: 200
@@ -701,15 +703,16 @@ export default {
     viewRegion: function(names) {
       const rootRegion = this.$module.scene.getRootRegion();
       const groups = Array.isArray(names) ? names : [names];
-      const dist = this.$module.scene.camera.far - this.$module.scene.camera.near;
       const objects = findObjectsWithNames(rootRegion, groups, "");
       let box = this.$module.scene.getBoundingBoxOfZincObjects(objects);
       if (box) {
         if (this.$module.isSyncControl()) {
           this.$module.setSyncControlZoomToBox(box);
         } else {
+          const dist = this.$module.scene.camera.far - this.$module.scene.camera.near;
           this.$module.scene.viewAllWithBoundingBox(box);
           this.$module.scene.camera.far = this.$module.scene.camera.near + dist;
+          this.$module.scene.camera.updateProjectionMatrix();
         }
         return true;
       }
@@ -807,6 +810,10 @@ export default {
           if (event.identifiers[0].coords) {
             this.tData.visible = true;
             this.tData.label = id;
+            if (event.identifiers[0].data.region)
+              this.tData.region = event.identifiers[0].data.region;
+            else
+              this.tData.region = "Root";
             this.tData.x = event.identifiers[0].coords.x;
             this.tData.y  = event.identifiers[0].coords.y;
           }

package/src/components/TreeControls.vue

@@ -21,6 +21,7 @@
           :data="treeData"
           :default-checked-keys="['__r/']"
           :expand-on-click-node="false"
+          :renderAfterExpand="false"
           @check="checkChanged"
         >
           <span
@@ -142,6 +143,7 @@ export default {
   },
   methods: {
     addTreeItem: function (parentContainer, item) {
+      //The following block prevent duplicate graphics with the same name
       for (let i = 0; i < parentContainer.length; i++) {
         if (parentContainer[i].id === item.id) {
           if (item.primitives && parentContainer[i].primitives) {
@@ -231,7 +233,7 @@ export default {
               label: zincObject.groupName,
               id: id,
               primitives: [zincObject],
-              regionPath: zincObject.region.getFullPath()
+              regionPath: zincObject.region.getFullPath(),
             };
             this.addTreeItem(regionData.children, child);
           }
@@ -250,9 +252,8 @@ export default {
         });
     },
     updateActiveUI: function (primitives) {
-      this.active = [];
-      const list = createListFromPrimitives(primitives);
-      this.active.push(...list);
+      this.active.length = 0;
+      createListFromPrimitives(primitives, this.active);
     },
     changeActiveByPrimitives: function (primitives, propagate) {
       if (primitives && primitives.length > 0) {
@@ -264,9 +265,8 @@ export default {
       this.removeHover(propagate);
     },
     updateHoverUI: function (primitives) {
-      this.hover = [];
-      const list = createListFromPrimitives(primitives);
-      this.hover.push(...list);
+      this.hover.length = 0;
+      createListFromPrimitives(primitives, this.hover);
     },
     changeHoverByPrimitives: function (primitives, propagate) {
       if (primitives && primitives.length > 0) {
@@ -593,9 +593,8 @@ export default {
   height: 40px;
   z-index: 8;
   margin-top: calc(50% - 52px);
-  border: solid 1px #e4e7ed;
-  border-left: 0;
-  background-color: #ffffff;
+  border: solid 1px $app-primary-color;
+  background-color: #F9F2FC;
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
@@ -604,18 +603,19 @@ export default {
 
 .drawer-button {
   i {
+    font-weight:600;
     margin-top: 12px;
     color: $app-primary-color;
     transition-delay: 0.9s;
   }
   &.open {
     i {
-      transform: rotate(0deg) scaleY(2.5);
+      transform: rotate(0deg) scaleY(2);
     }
   }
   &.close {
     i {
-      transform: rotate(180deg) scaleY(2.5);
+      transform: rotate(180deg) scaleY(2);
     }
   }
 }

package/src/scripts/RendererModule.js

@@ -48,7 +48,7 @@ RendererModule.prototype.getIntersectedObject = function(intersects) {
             intersects[i].object.userData && 
             intersects[i].object.userData.isZincObject && 
             ((intersects[i].object.name && 
-              intersects[i].object.name !== "_Unnamed") ||
+              intersects[i].object.name !== "") ||
             intersects[i].object.userData.isMarker))
 					return intersects[i];
 			}

package/src/scripts/graphicsHighlight.js

@@ -12,6 +12,8 @@ exports.GraphicsHighlight = function() {
   this.highlightColour = [1, 0, 0];
   this.selectColour = [0, 1, 0];
   this.originalColour = [0, 0, 0];
+  const _temp1 = [];
+  const _temp2 = [];
   const _this = this;
 
   const isDifferent = function(array1, array2) {
@@ -41,7 +43,7 @@ exports.GraphicsHighlight = function() {
   }
   
   const getUnmatchingObjects = function(objectsArray1, objectsArray2) {
-    const unmatchingObjects = [];
+    _temp1.length = 0;
     if (objectsArray2.length == 0)
       return objectsArray1;
     for (let i = 0; i < objectsArray1.length; i++) {
@@ -52,9 +54,9 @@ exports.GraphicsHighlight = function() {
         }
       }
       if (!matched)
-        unmatchingObjects.push(objectsArray1[i]);
+      _temp1.push(objectsArray1[i]);
     }
-    return unmatchingObjects;
+    return _temp1;
   }
   
   this.setHighlighted = function(objects) {
@@ -87,12 +89,12 @@ exports.GraphicsHighlight = function() {
   }
 
   const getFullListOfObjects = function(objects) {
-    let fullList = [];
+    _temp2.length = 0;
     for (let i = 0; i < objects.length; i++) {
       if (objects[i].material)
-        fullList.push(objects[i]);
+        _temp2.push(objects[i]);
     }
-    return fullList;
+    return _temp2;
   }
   
   this.resetHighlighted = function() {

package/src/scripts/utilities.js

@@ -1,5 +1,4 @@
-export const createListFromPrimitives = primitives => {
-  const list = [];
+export const createListFromPrimitives = (primitives, list) => {
   if (primitives) {
     primitives.forEach(primitive => {
       if (primitive && primitive.getVisibility()) {

package/vue.config.js

@@ -1,3 +1,4 @@
+
 const nodeExternals = require('webpack-node-externals');
 
 module.exports = {
@@ -28,6 +29,8 @@ module.exports = {
       .end()
   },
   css: {
+    sourceMap: process.env.NODE_ENV === 'wc',
+    extract: process.env.NODE_ENV !== 'wc',
     //Import variables into all stylesheets.
     loaderOptions: {
       sass: {