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

package/src/components/TraditionalControls.vue

@@ -0,0 +1,544 @@
+<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);
+  },
+  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.
+     */
+    changeActiveByNames: function(names, propagate) {
+      let targetObject = this.getFirstZincObjectWithGroupName(name);
+      if (targetObject && targetObject.getVisibility()) {
+        this.activeRegion = name;
+        this.$emit("object-selected", targetObject, propagate);
+      } else {
+        this.removeActive(propagate);
+      }
+      this.removeHover(propagate);
+    },
+    /**
+     * Hover a region by its name.
+     */
+    changeHoverByName: function(name, propagate) {
+      let targetObject = this.getFirstZincObjectWithGroupName(name);
+      if (targetObject) {
+        this.hoverRegion = name;
+        this.$emit("object-hovered", targetObject, propagate);
+      } else {
+        this.removeHover(propagate);
+      }
+    },
+    /**
+     * Unselect the current selected region.
+     */
+    removeActive: function(propagate) {
+      this.activeRegion = "";
+      this.$emit("object-selected", undefined, propagate);
+    },
+    /**
+     * Unselect the current hover region.
+     */
+    removeHover: function(propagate) {
+      this.hoverRegion = "";
+      this.$emit("object-hovered", undefined, propagate);
+    },
+    /**
+     * 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, true);
+    },
+    itemClicked: function(name, event) {
+      if (
+        !(
+          event.target.classList.contains("el-checkbox__inner") ||
+          event.target.classList.contains("el-checkbox__original")
+        )
+      ) {
+        this.changeActiveByNames([name], true);
+        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(true);
+        }
+        if (this.hoverRegion === item) {
+          this.removeHover(true);
+        }
+      }
+    },
+    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/TreeControls.vue

@@ -14,7 +14,7 @@
       <div class="tree-container">
         <el-tree
           ref="regionTree"
-          default-expand-all
+          :default-expanded-keys="['__r/']"
           node-key="id"
           show-checkbox
           :check-strictly="false"
@@ -123,18 +123,18 @@ export default {
   },
   created: function () {
     this.module.sceneData.geometries.forEach(zincObject => {
-      this.organsAdded(zincObject);
+      this.zincObjectAdded(zincObject);
     });
     this.module.sceneData.lines.forEach(zincObject => {
-      this.organsAdded(zincObject);
+      this.zincObjectAdded(zincObject);
     });
     this.module.sceneData.glyphsets.forEach(zincObject => {
-      this.organsAdded(zincObject);
+      this.zincObjectAdded(zincObject);
     });
     this.module.sceneData.pointsets.forEach(zincObject => {
-      this.organsAdded(zincObject);
+      this.zincObjectAdded(zincObject);
     });
-    this.module.addOrganPartAddedCallback(this.organsAdded);
+    this.module.addOrganPartAddedCallback(this.zincObjectAdded);
     this.__nodeNumbers = 1;
   },
   destroyed: function () {
@@ -194,7 +194,7 @@ export default {
       for (let i = 0; i < this.active.length; i++) {
         let item = this.active[i];
         if (item.group === data.label && 
-          ((item.regionPath === item.regionPath) || 
+          ((item.regionPath === data.regionPath) || 
           item.regionPath === undefined)) {
           return true;
         }
@@ -205,7 +205,7 @@ export default {
       for (let i = 0; i < this.hover.length; i++) {
         let item = this.hover[i];
         if (item.group === data.label && 
-          ((item.regionPath === item.regionPath) || 
+          ((item.regionPath === data.regionPath) || 
           item.regionPath === undefined)) {
           return true;
         }
@@ -213,9 +213,9 @@ export default {
       return false;
     },
     /**
-     * This is called when a new organ is read into the scene.
+     * This is called when a new zinc object is read into the scene.
      */
-    organsAdded: function (zincObject) {
+    zincObjectAdded: function (zincObject) {
       const region = zincObject.region;
       if (region) {
         const paths = region.getFullSeparatedPath();
@@ -239,36 +239,38 @@ export default {
       }
     },
     checkChanged: function (node, data) {
-      const rootRegion = this.module.scene.getRootRegion();
-      rootRegion.hideAllChildren();
-      data.checkedNodes.forEach(localNode => {
-        if (localNode.region) localNode.region.setVisibility(true);
-        if (localNode.primitives) {
-          localNode.primitives.forEach(primitive => {
-            primitive.setVisibility(true);
-          });
-        }
-      });
-      data.halfCheckedNodes.forEach(localNode => {
-        if (localNode.region) localNode.region.setVisibility(true);
-      });
+      const isRegion = node.region;
+      const isPrimitives = node.primitives;
+      const isChecked = data.checkedKeys.includes(node.id);
+      if (isRegion)
+        isChecked ? node.region.showAllPrimitives() : node.region.hideAllPrimitives();
+      if (isPrimitives)
+        node.primitives.forEach(primitive => {
+          primitive.setVisibility(isChecked);
+        });
+    },
+    updateActiveUI: function (primitives) {
+      this.active = [];
+      const list = createListFromPrimitives(primitives);
+      this.active.push(...list);
     },
     changeActiveByPrimitives: function (primitives, propagate) {
       if (primitives && primitives.length > 0) {
-        this.active = [];
-        const list = createListFromPrimitives(primitives);
-        this.active.push(...list);
+        this.updateActiveUI(primitives);
         this.$emit("object-selected", primitives, propagate);
       } else {
         this.removeActive(propagate);
       }
       this.removeHover(propagate);
     },
+    updateHoverUI: function (primitives) {
+      this.hover = [];
+      const list = createListFromPrimitives(primitives);
+      this.hover.push(...list);
+    },
     changeHoverByPrimitives: function (primitives, propagate) {
       if (primitives && primitives.length > 0) {
-        this.hover = [];
-        const list = createListFromPrimitives(primitives);
-        this.hover.push(...list);
+        this.updateHoverUI(primitives);
         this.$emit("object-hovered", primitives, propagate);
       } else {
         this.removeHover(propagate);

package/src/scripts/BaseModule.js

@@ -40,9 +40,9 @@ BaseModule.prototype.importSettings = function(settings) {
 	return false;
 }
 
-BaseModule.prototype.publishChanges = function(annotations, eventType) {
+BaseModule.prototype.publishChanges = function(annotations, eventType, zincObjects) {
   for (let i = 0; i < this.eventNotifiers.length; i++) {
-    this.eventNotifiers[i].publish(this, eventType, annotations);
+    this.eventNotifiers[i].publish(this, eventType, annotations, zincObjects);
   }
 }
 

package/src/scripts/RendererModule.js

@@ -90,6 +90,7 @@ RendererModule.prototype.getAnnotationsFromObjects = function(objects) {
 RendererModule.prototype.setHighlightedByObjects = function(
   objects, coords, propagateChanges) {
   const changed = this.graphicsHighlight.setHighlighted(objects);
+  const zincObjects = this.objectsToZincObjects(objects);
   if (propagateChanges) {
     eventType = require("./eventNotifier").EVENT_TYPE.MOVE;
     if (changed)
@@ -97,7 +98,7 @@ RendererModule.prototype.setHighlightedByObjects = function(
     const annotations = this.getAnnotationsFromObjects(objects);
     if (annotations.length > 0)
       annotations[0].coords = coords;
-    this.publishChanges(annotations, eventType);
+    this.publishChanges(annotations, eventType, zincObjects);
   }
   return changed;
 }
@@ -162,7 +163,7 @@ RendererModule.prototype.setSelectedByObjects = function(
       const annotations = this.getAnnotationsFromObjects(objects);
       if (annotations.length > 0)
         annotations[0].coords = coords;
-      this.publishChanges(annotations, eventType);
+      this.publishChanges(annotations, eventType, zincObjects);
     }
   }
   return changed;