horizontal scroll from remote is working

assets/css/app.scss

@@ -50,21 +50,20 @@ section[role='main-content']{
   height:100%;
   // outline: 1px solid red;
 }
-/* alternating column backgrounds */
+.vis-panel.vis-bottom{
+  color:#fff!important;
+  background-color: #1A1A1A;
+}
 .vis-time-axis{
-  .vis-grid.vis-odd {
-    // background: #f5f5f5;
-  }
   .vis-text{
-    // background-color: #000;
-    // color: #fff;
+    color: #fff;
     &.vis-minor{
       font-size: 0.693em;
     }
     &.vis-major{
       font-size: 0.693em;
       margin-top: -1.8em;
-      background-color: #fff;
+      background-color: #1A1A1A;
     }
   }
 }
@@ -72,7 +71,15 @@ section[role='main-content']{
 .vis-item{
   font-size: 0.630em;
   &.vis-point{
-    .vis-item-content { margin:0!important; padding:0.1em; }
+    border-radius: 3px;
+    padding:0.2em;
+    .vis-item-content {
+      background-color: #ddd!important;
+      margin:0!important;
+      padding:0.5em;
+      max-width: 10em;
+      white-space: normal;
+    }
     .vis-dot{ display:none;}
   }
 }

package-lock.json

@@ -8306,6 +8306,11 @@
         }
       }
     },
+    "moment": {
+      "version": "2.24.0",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
+      "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",

package.json

@@ -19,6 +19,7 @@
   "license": "MIT",
   "dependencies": {
     "axios": "^0.18.1",
+    "moment": "^2.24.0",
     "vis-timeline": "^7.1.3",
     "vue": "^2.6.10",
     "vue-meta": "^1.6.0",

src/App.vue

@@ -13,6 +13,7 @@
 
 import { mapActions, mapState } from 'vuex'
 import { Timeline } from 'vis-timeline'
+import moment from 'moment'
 
 export default {
   metaInfo: {
@@ -28,6 +29,7 @@ export default {
   computed: {
     ...mapState({
       titles: state => state.Corpus.titles,
+      titlesById: state => state.Corpus.titlesById,
       editors: state => state.Corpus.editors
     })
   },
@@ -87,6 +89,7 @@ export default {
         // stack: false
       }
       this.timeline = new Timeline(this.timelineContainer, this.titles, options)
+      // this.timeline.on('rangechanged', this.onRangeChanged.bind(this))
     })
   },
   sockets: {
@@ -108,12 +111,101 @@ export default {
           this.timeline.zoomIn(0.5)
           break
       }
+    },
+    scroll: function (data) {
+      console.log('received socket scroll', data)
+      // constant for day in milliseconds
+      let d = 1000 * 60 * 60 * 24
+      // get the current start and end dates of visible timeline
+      let startend = this.timeline.getWindow()
+      let start = moment.utc(new Date(startend.start))
+      let end = moment.utc(new Date(startend.end))
+      // compute the middle date of visible timeline
+      let diff = end - start
+      console.log('diff', diff / d)
+      let delta, unit
+      let newDate
+      // if zoom big enougth move by time range
+      let middleDate = moment.utc(new Date(startend.start)).add(diff / 2, 'ms')
+      // console.log('middleDate', middleDate)
+      let visibleItems = this.timeline.getVisibleItems()
+      console.log('visibleItems', visibleItems)
+      if (diff / d > 180) {
+        if (diff / d > 365) {
+          delta = 1
+          unit = 'y'
+        } else {
+          delta = 2
+          unit = 'M'
+        }
+        switch (data.mode) {
+          case 'forward':
+            newDate = moment(new Date(middleDate)).add(delta, unit)
+            break
+          case 'backward':
+            newDate = moment(new Date(middleDate)).subtract(delta, unit)
+            break
+        }
+      } else if (visibleItems.length > 1) {
+        // else if visible items move by next or prev item
+        let item, itemStart, middleItemStart
+        let prevDate = moment.utc(start)
+        let nextDate = moment.utc(end)
+        // get the current middle item
+        for (let id of visibleItems) {
+          // console.log('id', id)
+          item = this.titlesById[id]
+          itemStart = moment.utc(item.start)
+          console.log('item', item.content, item.start)
+          if (!middleItemStart) {
+            middleItemStart = itemStart.clone()
+          } else if (Math.abs(middleItemStart.diff(middleDate)) > Math.abs(itemStart.diff(middleDate))) {
+            middleItemStart = itemStart.clone()
+          }
+        }
+        for (let id of visibleItems) {
+          // console.log('id', id)
+          item = this.titlesById[id]
+          itemStart = moment.utc(item.start)
+          console.log('item', item.content, item.start)
+          if (itemStart.isAfter(prevDate) && itemStart.isBefore(middleItemStart)) {
+            prevDate = itemStart.clone()
+          } else if (itemStart.isAfter(middleItemStart) && itemStart.isBefore(nextDate)) {
+            nextDate = itemStart
+          }
+        }
+        console.log('middleDate', middleDate, 'nextDate', nextDate)
+        switch (data.mode) {
+          case 'forward':
+            newDate = moment(new Date(nextDate))
+            break
+          case 'backward':
+            newDate = moment(new Date(prevDate))
+            break
+        }
+      } else {
+        // if no visible items jump to next year
+        let currentYear = middleDate.year()
+        switch (data.mode) {
+          case 'forward':
+            newDate = new Date(currentYear + 1, 0, 1)
+            break
+          case 'backward':
+            newDate = new Date(currentYear - 1, 0, 1)
+            break
+        }
+      }
+      // eventually move the timeline
+      this.timeline.moveTo(newDate)
     }
   },
   methods: {
     ...mapActions({
       getAllTitles: 'Corpus/getAllTitles'
-    })
+    }),
+    onRangeChanged (args) {
+      console.log('onRangeChanged arg', args)
+    }
   }
 }
 </script>

src/index.js

@@ -7,12 +7,11 @@ import App from './App'
 
 import VueSocketIO from 'vue-socket.io'
 
+import 'vis-timeline/dist/vis-timeline-graph2d.min.css'
 import 'assets/css/mdi/css/materialdesignicons.css'
 // import 'mdi/font'
 import 'assets/css/app.scss'
 
-import 'vis-timeline/dist/vis-timeline-graph2d.min.css'
-
 Vue.use(Meta)
 
 let host = window.location.hostname

src/store/modules/corpus.js

@@ -9,7 +9,8 @@ export default {
     titlesByDate: {},
     titlesById: {},
     titles: [],
-    editors: []
+    editors: [],
+    editors_id: []
   },
 
   // getters
@@ -19,6 +20,7 @@ export default {
   mutations: {
     resetTitles (state) {
       state.titlesByDate = {}
+      state.titlesById = {}
       state.titles = []
       state.editors = []
       state.editors_id = []
@@ -110,15 +112,13 @@ export default {
         })
     },
     parseTitleByDate ({ dispatch, commit, state }) {
-      let titles, delta, startDate, newDate
-      // let oneDayTime = 1000 * 60 * 60 * 24
+      let titles, startDate, newDate
       for (var year in state.titlesByDate) {
         if (state.titlesByDate.hasOwnProperty(year)) {
           startDate = new Date(year, 0, 1)
           // TODO: sort alphabeticaly
           titles = state.titlesByDate[year]
-          delta = Math.floor(366 / titles.length)
-          console.log('year', year, titles.length, delta)
+          // console.log('year', year, titles.length)
           for (var i = 0; i < titles.length; i++) {
             newDate = new Date(startDate)
             newDate.setDate(newDate.getDate() + (10 * i))
@@ -126,7 +126,6 @@ export default {
             // record the title
             commit('addTitle', {
               content: titles[i].fields.name,
-              // content: newDate.getDate() + '-' + (newDate.getMonth() + 1),
               start: newDate,
               id: titles[i].id,
               group: titles[i].fields.editors,