@abi-software/scaffoldvuer 0.1.1 → 0.1.5-1.beta.0

package/src/components/TraditionalControls.vue

@@ -0,0 +1,556 @@
+<template>
+  <div
+    class="traditional-location"
+    :class="{ open: drawerOpen, close: !drawerOpen }"
+  >
+    <div class="traditional-container">
+      <el-row>
+        <el-col :span="12">
+          <div class="regions-display-text">
+            Regions
+          </div>
+        </el-col>
+        <el-col :span="12">
+          <el-checkbox
+            v-model="checkAll"
+            class="all-checkbox"
+            :indeterminate="isIndeterminate"
+            @change="handleCheckAllChange"
+          >
+            Display all
+          </el-checkbox>
+        </el-col>
+      </el-row>
+      <el-checkbox-group
+        v-model="checkedItems"
+        size="small"
+        class="checkbox-group"
+        @change="handleCheckedItemsChange"
+      >
+        <div class="checkbox-group-inner">
+          <el-row
+            v-for="item in sortedPrimitiveGroups"
+            :key="item"
+            :label="item"
+          >
+            <div class="checkbox-container">
+              <el-checkbox
+                class="my-checkbox"
+                :label="item"
+                :checked="true"
+                :class="{ activeItem: activeRegion === item, 
+                          hoverItem: hoverRegion === item }"
+                @click.native="itemClicked(item, $event)"
+                @change="visibilityToggle(item, $event)"
+                @mouseover.native="checkboxHover(item)"
+              >
+                <el-color-picker
+                  :class="{ 'show-picker' : showColourPicker }"
+                  :value="getColour(item)"
+                  size="small"
+                  :popper-class="myPopperClass"
+                  @change="setColour(item, $event)"
+                />
+                {{ item }}
+              </el-checkbox>
+            </div>
+          </el-row>
+        </div>
+      </el-checkbox-group>
+    </div>
+    <div
+      class="drawer-button"
+      :class="{ open: drawerOpen, close: !drawerOpen }"
+      @click="toggleDrawer"
+    >
+      <i class="el-icon-arrow-left" />
+    </div>
+  </div>
+</template>
+
+<script>
+/* eslint-disable no-alert, no-console */
+import Vue from "vue";
+import { Checkbox, CheckboxGroup, ColorPicker, Row } from "element-ui";
+import lang from "element-ui/lib/locale/lang/en";
+import locale from "element-ui/lib/locale";
+
+const orderBy = require("lodash/orderBy");
+const uniq = require("lodash/uniq");
+locale.use(lang);
+Vue.use(Checkbox);
+Vue.use(CheckboxGroup);
+Vue.use(ColorPicker);
+Vue.use(Row);
+
+/**
+ * A vue component for toggling visibility of various regions.
+ */
+export default {
+  name: "TraditionalControls",
+  props: {
+    /**
+     * @ignore
+     */
+    module: {
+      type: Object,
+      default: undefined
+    },
+    /**
+     * Enable/disable colour picker
+     */
+    showColourPicker: Boolean
+  },
+  data: function() {
+    return {
+      checkAll: true,
+      isIndeterminate: false,
+      checkedItems: [],
+      sortedPrimitiveGroups: [],
+      activeRegion: "",
+      hoverRegion: "",
+      myPopperClass: "hide-scaffold-colour-popup",
+      drawerOpen: true
+    };
+  },
+  watch: {
+    showColourPicker: {
+      immediate: true,
+      handler: function() {
+        if (this.showColourPicker) this.myPopperClass = "showPicker";
+        else this.myPopperClass = "hide-scaffold-colour-popup";
+      }
+    }
+  },
+  created: function() {
+    let tmpArray = this.module.sceneData.geometries.concat(
+      this.module.sceneData.lines
+    );
+    tmpArray = tmpArray.concat(this.module.sceneData.glyphsets);
+    tmpArray = uniq(tmpArray.concat(this.module.sceneData.pointset));
+    this.sortedPrimitiveGroups = orderBy(tmpArray);
+    this.module.addOrganPartAddedCallback(this.organsAdded);
+    this.module.graphicsHighlight.selectColour = 0x444444;
+  },
+  destroyed: function() {
+    this.sortedPrimitiveGroups = undefined;
+  },
+  methods: {
+    /**
+     * This is called when a new organ is read into the scene.
+     */
+    organsAdded: function(name) {
+      if (name && name != "") {
+        let tmpArray = uniq(this.sortedPrimitiveGroups.concat([name]));
+        tmpArray = orderBy(tmpArray);
+        const index = tmpArray.indexOf(undefined);
+        if (index > -1) {
+          tmpArray.splice(index, 1);
+        }
+        this.sortedPrimitiveGroups = tmpArray;
+      }
+    },
+    /**
+     * Select a region by its name.
+     */
+    changeActiveByName: function(name) {
+      let targetObject = this.getFirstZincObjectWithGroupName(name);
+      if (targetObject && targetObject.getVisibility()) {
+        this.activeRegion = name;
+        /**
+         * Triggers when an item has been selected.
+         *
+         * @property {object} target selected object.
+         */
+        this.$emit("object-selected", targetObject);
+      } else {
+        this.removeActive();
+      }
+      this.removeHover();
+    },
+    /**
+     * Hover a region by its name.
+     */
+    changeHoverByName: function(name) {
+      let targetObject = this.getFirstZincObjectWithGroupName(name);
+      if (targetObject) {
+        this.hoverRegion = name;
+        /**
+         * Triggers when an item has been hovered over.
+         *
+         * @property {object} target hovered object.
+         */
+        this.$emit("object-hovered", targetObject);
+      } else {
+        this.removeHover();
+      }
+    },
+    /**
+     * Unselect the current selected region.
+     */
+    removeActive: function() {
+      this.activeRegion = "";
+      this.$emit("object-selected", undefined);
+    },
+    /**
+     * Unselect the current hover region.
+     */
+    removeHover: function() {
+      this.hoverRegion = "";
+      this.$emit("object-hovered", undefined);
+    },
+    /**
+     * Reset the controls.
+     */
+    clear: function() {
+      this.sortedPrimitiveGroups = [];
+      this.checkedItems = [];
+      this.checkAll = true;
+      this.isIndeterminate = false;
+      this.activeRegion = "";
+      this.hoverRegion = "";
+      this.$emit("object-selected", undefined);
+    },
+    getFirstZincObjectWithGroupName: function(name) {
+      if (this.module && this.module.scene) {
+        let array = this.module.scene.findGeometriesWithGroupName(name);
+        if (array.length > 0) return array[0];
+        array = this.module.scene.findGlyphsetsWithGroupName(name);
+        if (array.length > 0) return array[0];
+        array = this.module.scene.findLinesWithGroupName(name);
+        if (array.length > 0) return array[0];
+        array = this.module.scene.findPointsetsWithGroupName(name);
+        if (array.length > 0) return array[0];
+      }
+      return undefined;
+    },
+    getColour: function(name) {
+      let graphic = this.getFirstZincObjectWithGroupName(name);
+      if (graphic) {
+        let hex = graphic.getColourHex();
+        if (hex) return "#" + hex;
+      }
+      return "#FFFFFF";
+    },
+    setColour: function(name, value) {
+      let graphic = this.getFirstZincObjectWithGroupName(name);
+      if (graphic) {
+        let hexString = value.replace("#", "0x");
+        graphic.setColourHex(hexString);
+      }
+    },
+    checkboxHover: function(name) {
+      this.changeHoverByName(name);
+    },
+    itemClicked: function(name, event) {
+      if (
+        !(
+          event.target.classList.contains("el-checkbox__inner") ||
+          event.target.classList.contains("el-checkbox__original")
+        )
+      ) {
+        this.changeActiveByName(name);
+        event.preventDefault();
+      }
+    },
+    handleCheckedItemsChange: function() {
+      let unnamed = this.checkedItems.includes(undefined) ? true: false;
+      let checkedCount = this.checkedItems.length;
+      if (unnamed)
+        checkedCount--;
+      this.checkAll = checkedCount === this.sortedPrimitiveGroups.length;
+      this.isIndeterminate =
+        checkedCount > 0 && checkedCount < this.sortedPrimitiveGroups.length;
+    },
+    handleCheckAllChange(val) {
+      this.checkedItems = val ? [...this.sortedPrimitiveGroups] : [];
+      this.isIndeterminate = false;
+      for (let i = 0; i < this.sortedPrimitiveGroups.length; i++) {
+        this.visibilityToggle(this.sortedPrimitiveGroups[i], this.checkAll);
+      }
+    },
+    viewAll: function() {
+      this.module.viewAll();
+    },
+    visibilityToggle: function(item, event) {
+      this.module.changeOrganPartsVisibility(item, event);
+      if (event == false) {
+        if (this.activeRegion === item) {
+          this.removeActive();
+        }
+        if (this.hoverRegion === item) {
+          this.removeHover();
+        }
+      }
+    },
+    toggleDrawer: function() {
+      this.drawerOpen = !this.drawerOpen;
+      this.$emit("drawer-toggled", this.drawerOpen);
+    },
+    getState: function() {
+      if (this.checkAll) {
+        return { checkAll: true };
+      }
+      let checkedItems = [...this.checkedItems];
+      const index = checkedItems.indexOf(undefined);
+      if (index > -1) {
+        checkedItems.splice(index, 1);
+      }
+      return { checkedItems: checkedItems };
+    },
+    setState: function(state) {
+      if (state) {
+        if (state.checkAll) {
+          this.checkedItems = [...this.sortedPrimitiveGroups];
+          for (let i = 0; i < this.sortedPrimitiveGroups.length; i++) {
+            this.module.changeOrganPartsVisibility(
+              this.sortedPrimitiveGroups[i],
+              true
+            );
+          }
+        } else if (state.checkedItems) { 
+          this.checkedItems = [...state.checkedItems];
+          for (let i = 0; i < this.sortedPrimitiveGroups.length; i++) {
+
+            let visible = this.checkedItems.includes(
+              this.sortedPrimitiveGroups[i]);
+            this.module.changeOrganPartsVisibility(
+              this.sortedPrimitiveGroups[i],
+              visible
+            );
+          }
+        }
+      }
+      this.handleCheckedItemsChange();
+    }
+  }
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+@import "~element-ui/packages/theme-chalk/src/checkbox";
+@import "~element-ui/packages/theme-chalk/src/checkbox-group";
+@import "~element-ui/packages/theme-chalk/src/color-picker";
+@import "~element-ui/packages/theme-chalk/src/row";
+
+.checkbox-container {
+  display: flex;
+  cursor: pointer;
+}
+
+.traditional-location {
+  position: absolute;
+  bottom: 0px;
+  transition: all 1s ease;
+
+  &:focus{
+    outline: none;
+  }
+  &.open {
+    left: 0px;
+    .traditional-container {
+      opacity: 1;
+    }
+  }
+  &.close {
+    left: -298px;
+    .traditional-container {
+      pointer-events:none;
+      opacity: 0;
+    }
+  }
+}
+
+.traditional-container {
+  transition: all 1s ease;
+  float: left;
+  padding-left: 16px;
+  padding-right: 18px;
+  max-height: calc(100% - 154px);
+  text-align: left;
+  overflow: none;
+  border: 1px solid rgb(220, 223, 230);
+  padding-top: 7px;
+  padding-bottom: 16px;
+  background: #ffffff;
+}
+
+.regions-display-text {
+  width: 59px;
+  height: 20px;
+  color: rgb(48, 49, 51);
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 20px;
+  margin-left: 8px;
+}
+
+.all-checkbox {
+  float: right;
+}
+
+.checkbox-group {
+  width: 260px;
+  border: 1px solid rgb(144, 147, 153);
+  border-radius: 4px;
+  background: #ffffff;
+  margin-top: 6px;
+}
+
+.checkbox-group-inner {
+  padding: 18px;
+  max-height: 240px;
+  min-height: 130px;
+  overflow: auto;
+  scrollbar-color: #c0c4cc rgba(1, 1, 1, 0);
+  scrollbar-width: thin;
+
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    box-shadow: inset 0 0 6px #c0c4cc;
+  }
+}
+
+::v-deep .el-checkbox__input {
+  &.is-indeterminate, &.is-checked {
+    .el-checkbox__inner {
+      background-color: $app-primary-color;
+      border-color: $app-primary-color;
+    }
+  }
+}
+
+::v-deep .el-color-picker__color {
+  border: 1px solid $app-primary-color;
+}
+
+::v-deep .el-checkbox__label {
+  padding-left: 5px;
+  color: $app-primary-color !important;
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0px;
+  line-height: 14px;
+}
+
+.activeItem {
+  background-color: #bbb !important;
+}
+
+.my-checkbox {
+  background-color: #fff;
+  width: 100%;
+
+  ::v-deep .el-color-picker {
+    height: 16px !important;
+    top: 3px;
+  }
+
+  ::v-deep .el-color-picker__trigger {
+    margin-left: 8px;
+    margin-right: 8px;
+    padding: 0px;
+    height: 16px;
+    width: 16px;
+    border: 0px;
+  }
+
+}
+
+.hoverItem {
+  background-color: #eee !important;
+}
+
+::v-deep .el-color-picker__icon {
+  &.el-icon-arrow-down {
+    display: none;
+  }
+}
+
+::v-deep .show-picker {
+  .el-color-picker__icon {
+    &.el-icon-arrow-down {
+      display: block;
+    }
+  }
+}
+
+::v-deep .my-drawer {
+  background: rgba(0, 0, 0, 0);
+  box-shadow: none;
+}
+
+.drawer {
+  ::v-deep .el-drawer:focus {
+    outline: none;
+  }
+}
+
+.open-drawer {
+  width: 20px;
+  height: 40px;
+  z-index: 8;
+  position: absolute;
+  left: 0px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
+  border: solid 1px #e4e7ed;
+  background-color: #f7faff;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  pointer-events: auto;
+}
+
+.drawer-button {
+  float: left;
+  width: 20px;
+  height: 40px;
+  z-index: 8;
+  margin-top: calc(50% - 52px);
+  border: solid 1px #e4e7ed;
+  border-left: 0;
+  background-color: #ffffff;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  pointer-events: auto;
+}
+
+.drawer-button {
+  i {
+    margin-top: 12px;
+    color: $app-primary-color;
+    transition-delay: 0.9s;
+  }
+  &.open {
+    i {
+      transform: rotate(0deg) scaleY(2.5);
+    }
+  }
+  &.close {
+    i {
+      transform: rotate(180deg) scaleY(2.5);   
+    }
+  }
+}
+
+.drawer-button.open i {
+  transform: rotate(0deg) scaleY(2.5);
+}
+
+.drawer-button.close i {
+  transform: rotate(180deg) scaleY(2.5);
+}
+</style>
+
+<style>
+.hide-scaffold-colour-popup {
+  display: none;
+}
+</style>
+

package/src/components/index.js

@@ -1,15 +1,7 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
-import Vue from "vue";
 import ScaffoldVuer from "./ScaffoldVuer.vue";
 
-const Components = {
-    ScaffoldVuer
-  };
-  
-  Object.keys(Components).forEach(name => {
-    Vue.component(name, Components[name]);
-  });
-  
-  export default Components;
-  
+export {
+  ScaffoldVuer
+};

package/src/credential.json

@@ -0,0 +1,12 @@
+{
+  "type": "service_account",
+  "project_id": "scaffold-models-1598402284168",
+  "private_key_id": "d97f27e0d164aa69fb8995342447407b1a8af037",
+  "private_key": "-----BEGIN PRIVATE KEY-----\nMIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQCSU0/CnYgiP254\ntvAZzosYTwFZ69KqZYNfWOjWRRB5wKr+itLGpi25WcO2wR4YtXiTXk9htaYd9hSM\n90LEH5+aqhvMovmDltpLRRfL0qg4jf/AlmL11lmbj715Rsko6ADD1fQfnl5leYLb\nikbkCBCdedAOZmC0Px9RuMV+5N440dE7PejBc6UGGCouTHzXeuT/8KigBTKLNk3x\nLu1v0Aw07iJLKAXQKGNKKxRuBVoc/WcVRqTfs7HWQcxFYpIg4MmRoa8MKJujZPwR\nCLRHktCo4Sip32By7LFapjkhjV0ImUq+B/gOctBIt/MC445lxaW8Z6iC0jPOhSRi\nRRjhY2+3AgMBAAECggEAQQxEMtHxCLiGFafNiMtmzkGg6iaJmjJSenp913MQZe+e\nlFWGacTKItGizYWAKZ/SoECWrWshE8SnUhtBVQpx20Gv5gK1RSg0lq16bKOTIMEP\nZr/z8jF92EfIBTfQiRzJ6kUcp0mx0Q55e7s21Hw5VqgmM6CTcM120M+BDG4V08/W\nSqsmtYRcitUeiolQCVPxx0AAeqS8ysZWPBen1tNY9HfZ+2TBkmDf+G7anZO72UTy\n3GRIpCUr4EaopftCwsk6hwbxmsJCFLBMmWobhdeb3k6Srwg5FIQ84xR2cyW0fPHm\nE/kjFKoUomXTiaBhNndLHnG6eh3G2Ml96FIRQlzgAQKBgQDDpJhANedrwzAq/J7r\ngUFrjaEfQn65khCsdgbeBV5AsfNq3BVCDcsaK9ieqX7HgDFwx5bGBQerH8GjQjFD\nHNcz/ZCpsk2CzDjhLLgxzd48NVlq606kMg9/YqaJ96U7H5dUS40f0JbrcWZ+dG4q\n/ZS4jMM61u0zUfmiN5a1r//YAQKBgQC/d71Ig9vHz5a9he3LqMCFR+gZPNy2hYSX\ndcwhosI3IuC4frUoQToZdsPADI7s5hK7Ob+AlWokJ3YeCmqTYMr96ayHA6yfw99r\nIxmeMKP1G94OShO/kX/Y9mw+JiCDUSXJef2n8zrMrDSHdAusa14YYp3vfeI3fPI4\n4opP0pgHtwKBgQCWt95y2RQHeL9K3oKve0wix2Ew69EktNoTgnmX4RrTTEPyNspJ\nsMaeyth+oqUAnEl6UMhelNFri3NpijzZLwa7DsS7dpkwApRvJDxiYe6rA453R/+1\njrtRr3YNI7Mu8Q9r6Sg3MkKR7zK+iIO2qtQ/uHFOivUBbE2cIqcAIS5AAQKBgCPS\nHgqECMlAEB6TAOMaRjJpOoYGOfC32A+SDUe5sIYqM0qxAelvEpSTAJpcfxzZCmYW\nrro6uenbrCCAqGG8OR356rozuMcHGTRtE6zhwrrnpMqdl0Y+zWFk8OlLrseClgQ0\nm30hZz3Fdepljo2KZMdBI/UbYwgoixSTZXb7mk/PAoGASN0HgtU9EhYsfBZYGqL7\nh3rUVOQBOfnhx3+3g03pgnDZtb2YRH1izuTH6Ak0UnMNtZLJqCopHfmZAZmYmVeD\nnpDz9B9nJF0MM0JRYdKEOXzp+HsL8zovt+sKxYeRXq2l4oxJiqIpeLvhvNeHURnB\n10Rl+BuUU2qmilM3kuWIA48=\n-----END PRIVATE KEY-----\n",
+  "client_email": "scaffoldvuer@scaffold-models-1598402284168.iam.gserviceaccount.com",
+  "client_id": "112229511591019595252",
+  "auth_uri": "https://accounts.google.com/o/oauth2/auth",
+  "token_uri": "https://oauth2.googleapis.com/token",
+  "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
+  "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/scaffoldvuer%40scaffold-models-1598402284168.iam.gserviceaccount.com"
+}

package/src/main.js

@@ -1,8 +1,14 @@
 import Vue from 'vue'
+import VueRouter from 'vue-router'
 import App from './App.vue'
 
 Vue.config.productionTip = false
+Vue.use(VueRouter)
+
+const router = new VueRouter({
+})
 
 new Vue({
+  router,
   render: h => h(App),
 }).$mount('#app')

package/styleguide.config.js

@@ -0,0 +1,22 @@
+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'
+}

package/vue.config.js

@@ -1,11 +1,38 @@
+const nodeExternals = require('webpack-node-externals');
+
 module.exports = {
-    chainWebpack: config => {
-      // GraphQL Loader
-      config.module
-        .rule('sahder')
-        .test(/\.(vs|fs)$/i)
-        .use('raw-loader')
-          .loader('raw-loader')
-          .end()
+  configureWebpack: config => {
+    if(process.env.NODE_ENV === 'production') {
+      config.externals =  [ nodeExternals({allowlist: [/^physiomeportal/,]}) ];
     }
-}
+  },
+  chainWebpack: config => {
+    // GraphQL Loader
+    config.module
+      .rule('shader')
+      .test(/\.(vs|fs)$/i)
+      .use('raw-loader')
+        .loader('raw-loader')
+        .end()
+    const fontsRule = config.module.rule('fonts')
+    fontsRule.uses.clear()
+    config.module
+      .rule('fonts')
+      .test(/\.(ttf|otf|eot|woff|woff2)$/)
+      .use('base64-inline-loader')
+      .loader('base64-inline-loader')
+      .tap(options => {
+        // modify the options...    
+        return options
+      })
+      .end()
+  },
+  css: {
+    //Import variables into all stylesheets.
+    loaderOptions: {
+      sass: {
+        prependData: `@import '@/assets/styles';`
+      }
+    }
+  }
+}

package/dist/css/app.90572cd2.css

@@ -1 +0,0 @@
-#app,.scaffold-container[data-v-151ed939]{height:100%}#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;width:100%;position:absolute}