Merge branch 'develop'

changelog.md

@@ -6,6 +6,14 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+## [v3.2.0] - 2018-02-27
+
+### Added
+- Added tree view to calculator selection overlay with calculators sorted by category, closes #162.
+
+### Fixed
+- Fixed TravisCI build error, where error was 'npm ERR! enoent ENOENT: no such file or directory, chmod '/home/travis/build/mbedded-ninja/NinjaCalc/node_modules/topojson/node_modules/topojson-server/bin/geo2topo''. This was fixed by removing topojson as a dependency and just using topojson-client, topojson-server and topojson-simplify individually (they are still dependencies).
+
 ## [v3.1.0] - 2018-02-18
 
 ### Added

package.json

@@ -77,7 +77,6 @@
     "semver": "^5.3.0",
     "sinon": "^1.17.7",
     "sinon-chai": "^2.8.0",
-    "topojson": "^3.0.2",
     "topojson-client": "^3.0.0",
     "topojson-server": "^3.0.0",
     "topojson-simplify": "^3.0.2",

src/components/CalculatorSelectionOverlay/CalculatorSelectionOverlay.vue

@@ -5,15 +5,28 @@
         <!-- The .stop below prevents the click event from bubbling, resulting in the
         overlay only being closed when the modal-mask is clicked directly -->
         <div class="modal-container" v-on:click.stop="overlayClicked">
-          <div class="modal-body" style="display: flex; flex-direction: column; height: 100%;">
+          <div class="modal-body" style="display: flex; flex-direction: row; height: 100%;">
+            <!------------------------>
+            <!-- CATEGORY TREE VIEW -->
+            <!------------------------>
+            <div style="width: 200px; text-align: left; border-right: 1px solid #cdcdcd;">
+              <tree-view :data="treeData" v-on:clicked="categoryClicked" />
+            </div>
+            <!-- The flex: 1 below makes the grid/search take up the remaining horizontal space
+             once the category filter has been assigned space on the left hand-side -->
+          <div style="flex: 1; display: flex; flex-direction: column; height: 100%;">
+            <!---------------------->
             <!-- SEARCH CONTAINER -->
+            <!---------------------->
             <div id="search-container">
               <span style="padding-right: 5px;">Search</span>
               <input v-model="searchText" style="width: 400px; height: 25px;">
             </div>
+            <!---------------------------------->
             <!-- GENERATE CALCULATOR PREVIEWS -->
+            <!---------------------------------->
             <transition-group name="list" tag="div" class="preview-grid">
-              <CalcPreview v-for="item in $store.state.core.filteredAvailableCalcs"
+              <CalcPreview v-for="item in $store.state.core.calcsFilteredByCategoryAndSearch"
                            class="list-complete-item"
                            :title='item.displayName'
                            :description="item.description"
@@ -23,9 +36,10 @@
               </CalcPreview>
             </transition-group>
           </div>
+          </div>
+          </div>
         </div>
       </div>
-    </div>
   </transition>
 </template>
 
@@ -39,19 +53,73 @@
       CalcPreview
     },
     data: function () {
-      return {}
+      return {
+      }
     },
     computed: {
       searchText: {
         get () {
-          return this.$store.state.searchText
+          return this.$store.state.core.searchText
         },
         set (value) {
           this.$store.dispatch('setSearchText', value)
         }
+      },
+      treeData () {
+        var output = {
+          'name': 'root',
+          'selected': false,
+          'children': []
+        }
+
+        console.log(this.$store)
+        var self = this
+        this.$store.state.core.availableCalcs.map(function (calc) {
+          // console.log('calc =')
+          // console.log(calc)
+          self.addCategoriesToTree(calc.category, output)
+          // console.log('After adding category elements for 1 calculator, output =')
+          // console.log(output)
+        })
+        return output
       }
     },
     methods: {
+      addCategoriesToTree (categories, treeNode) {
+        // console.log('addCategoriesToTree() called with categories =')
+        console.log(categories)
+
+        // Copy array, we are going to modify it, and we don't want to touch
+        // the original!
+        categories = categories.slice()
+        // console.log(', treeNode =')
+        // console.log(treeNode)
+
+        var inTree = false
+        treeNode.children.map(function (childNode) {
+          if (childNode.name === categories[0]) {
+            inTree = true
+          }
+        })
+
+        // Add first category element if it doesn't already exist
+        if (!inTree) {
+          console.log('Category ' + categories[0] + ' not found in tree.')
+          var newTreeNode = {
+            'name': categories[0],
+            'selected': false,
+            'children': []
+          }
+          treeNode.children.push(newTreeNode)
+        }
+
+        // Remove first category element
+        categories.splice(0, 1)
+
+        if (categories.length > 0) {
+          this.addCategoriesToTree(categories, treeNode.children[treeNode.children.length - 1])
+        }
+      },
       borderClicked (event) {
         this.$store.commit('showCalculatorSelectionOverlay', {
           trueFalse: false
@@ -60,10 +128,21 @@
       overlayClicked (event) {
         // Do nothing, this handler exists purely to swallow event
         // (event does not bubble because of .stop modifier in HTML)
+      },
+      itemClick (node) {
+        console.log(node.model.text + ' clicked !')
+      },
+      categoryClicked (category) {
+        console.log('categoryClicked() called. category =')
+        console.log(category)
+        this.$store.dispatch('setSelCategory', category)
       }
     },
     watch: {},
     mounted () {
+      if (!this.$store.state.core.calcsFilteredByCategoryAndSearch) {
+        throw Error('this.$store.state.core.calcsFilteredByCategoryAndSearch was null.')
+      }
     }
   }
 </script>

src/components/Calculators/Geospatial/TwoCoordinateGeodesics/MainView.vue

@@ -81,7 +81,7 @@
   /* eslint-disable */
 
   import * as d3 from 'd3'
-  import * as topojson from 'topojson'
+  import feature from 'topojson-client/src/feature'
   import versor from 'versor';
 
   import { Coordinate, CoordinateUnits, Geospatial } from 'src/misc/Geospatial/Geospatial'
@@ -374,8 +374,9 @@
       this.graticule = d3.geoGraticule10()
       this.path = d3.geoPath(this.projection).context(this.context)
 
-      this.land = topojson.feature(world110m, world110m.objects.land)
-      this.countries = topojson.feature(world110m, world110m.objects.countries)
+      // feature() is from the topojson-client library (DO NOT ADD topojson AS A DEPENDENCY)
+      this.land = feature(world110m, world110m.objects.land)
+      this.countries = feature(world110m, world110m.objects.countries)
       // this.countryList = cList
       this.scale()
 

src/main.js

@@ -30,6 +30,9 @@ import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-default/index.css'
 Vue.use(ElementUI)
 
+// import VJstree from 'vue-jstree'
+// Vue.component('v-jstree', VJstree)
+
 import './style/style.css'
 
 // =========================================== //
@@ -48,6 +51,15 @@ Vue.component('calc-var-checkbox', CalcVarCheckbox)
 import VariableRowVerbose from 'src/misc/CalculatorEngineV2/view/VariableRowVerbose.vue'
 Vue.component('variable-row-verbose', VariableRowVerbose)
 
+// =========================================== //
+// ===== TREE VIEW COMPONENT REGISTRATION ==== //
+// =========================================== //
+import TreeView from 'misc/TreeView/TreeView'
+Vue.component('tree-view', TreeView)
+
+import TreeItem from 'misc/TreeView/TreeItem'
+Vue.component('tree-item', TreeItem)
+
 // =========================================== //
 // ============= IMPORT VUEX STORE =========== //
 // =========================================== //

src/misc/TreeView/TreeItem.vue

@@ -0,0 +1,76 @@
+<!-- This template is designed to work with CalculatorEngineV2 -->
+<template>
+  <li v-on:click.stop="handleOnClick" style="background-color: transparent; margin: 0;">
+    <!-- This div goes behind list element, has width that spans entire width of tree view -->
+    <div class="whole-row" :class="{ hover: isHover, selected: data.selected }" @mouseover="isHover=true" @mouseout="isHover=false"
+         style="width: 100%; display: block; position: absolute; left: 0; height: 25px; z-index: 0; transition: background-color 0.2s ease;"></div>
+      <div class="name" @mouseover="isHover=true" @mouseout="isHover=false"
+           style="z-index: 1; background-color: transparent; position: relative; height: 25px; display: flex; justify-content: center; flex-direction: column;">{{ data.name }}</div>
+    <ul style="padding-left: 10px; background-color: transparent;">
+      <tree-item v-for="(child, index) in model.children"
+                 :key="index"
+                 :data="child"
+                v-on:clicked="handleChildClicked"
+                v-on:unselectAll="handleUnselectAll"/>
+    </ul>
+
+  </li>
+</template>
+
+<script>
+
+  export default {
+    name: 'tree-item',
+    props: {
+      data: {type: Object, required: true}
+    },
+    data () {
+      return {
+        isHover: false,
+        model: this.data
+      }
+    },
+    components: {},
+    computed: {},
+    methods: {
+      handleOnClick () {
+        console.log('Item clicked. this.data.name = ')
+        console.log(this.model.name)
+
+        this.$emit('unselectAll')
+        this.model.selected = true
+        console.log('this.data =')
+        console.log(this.model)
+        var category = []
+        category.unshift(this.model.name)
+        this.$emit('clicked', category)
+      },
+      handleChildClicked (category) {
+        console.log('handleChildClicked() called. category = ')
+        console.log(category)
+
+        category.unshift(this.model.name)
+        // Bubble event upwards (should stop at TreeView component)
+        this.$emit('clicked', category)
+      },
+      handleUnselectAll () {
+        this.$emit('unselectAll')
+      }
+    },
+    mounted () {
+    }
+  }
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+  div.selected {
+    background-color: rgb(33, 150, 243);
+  }
+
+  div.hover {
+    background-color: rgba(33, 150, 243, 0.7);
+    color: white;
+  }
+
+</style>