Add some movement

package.json

@@ -14,6 +14,7 @@
     "d3": "^5.16.0",
     "lodash": "^4.17.15",
     "vue": "^2.6.11",
+    "vue-drag-drop": "^1.1.4",
     "vue-router": "^3.3.2",
     "vuex": "^3.4.0"
   },

src/App.vue

@@ -1,12 +1,19 @@
 <template>
   <b-container fluid style="height: 100%;">
+    <b-navbar toggleable="lg" type="dark" variant="info" style="position: absolute; z-index: 100; width: 100%; margin-left:-1em;">
+      <b-navbar-brand href="#">eqarun</b-navbar-brand>
+      <b-navbar-nav>
+        <b-nav-item href="#">Runs</b-nav-item>
+        <b-nav-item href="#">Visualization</b-nav-item>
+      </b-navbar-nav>
+    </b-navbar>
     <b-row align-v="stretch" style="height: 100%;">
-      <b-col id="panel" cols="3">
+      <b-col id="panel" cols="3" style="padding-top: 60px;">
         <ZoneLayerPanel :layerState="layerState" />
         <RequestsLayerPanel :layerState="requestsLayerState" />
       </b-col>
       <b-col>
-        <svg id="map">
+        <svg id="map" v-on:wheel="onScale" v-on:mousedown="onMouseDown" v-on:mouseup="onMouseUp" v-on:mouseover="onMouseMove" >
           <ZoneLayer :layerState="layerState"  />
           <RequestsLayer :layerState="requestsLayerState"  />
         </svg>
@@ -25,6 +32,7 @@ import RequestsLayerPanel from "./components/RequestsLayerPanel.vue"
 import RequestsLayer from "./components/RequestsLayer.vue"
 
 import * as axios from "axios";
+import * as _ from "lodash";
 
 export default {
   name: 'App',
@@ -38,16 +46,22 @@ export default {
       minimumValue: 0,
       maximumValue: 100,
       features: [],
-      loading: false
+      loading: false,
+      scale: 0.028, offset: [0, 0]
     });
 
     var requestsLayerState = Vue.observable({
       time: 5.0 * 3600.0,
       loading: false,
       requests: [],
+      scale: 0.028, offset: [0, 0]
     })
 
-    return { layerState: layerState, requestsLayerState: requestsLayerState };
+    return {
+      layerState: layerState, requestsLayerState: requestsLayerState,
+      scale: 0.028, offset: [0, 0],
+      mouseDownLocation: undefined
+    };
   },
   mounted() {
     this.load();
@@ -75,7 +89,31 @@ export default {
           this.requestsLayerState.requests = response.data;
           this.requestsLayerState.loading = false;
       });
-    }
+    },
+    onScale(event) {
+      this.scale -= 1e-3 * event.deltaY;
+      this.updateScale();
+    },
+    updateScale: _.debounce(function() {
+      this.layerState.scale = this.scale;
+      this.requestsLayerState.scale = this.scale;
+    }, 100),
+    onMouseDown(event) {
+      this.mouseDownLocation = [event.clientX, event.clientY];
+    },
+    onMouseUp() {
+      this.mouseDownLocation = undefined;
+    },
+    onMouseMove(event) {
+      if (this.mouseDownLocation != undefined) {
+        this.offset = [event.clientX - this.mouseDownLocation[0], event.clientY - this.mouseDownLocation[1]];
+        this.updateOffset();
+      }
+    },
+    updateOffset: _.debounce(function() {
+      this.layerState.offset = this.offset;
+      this.requestsLayerState.offset = this.offset;
+    }, 100),
   },
   watch: {
     "layerState.metric": function() { this.load() },

src/components/RequestsLayer.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import * as d3 from "d3";
+// import * as d3 from "d3";
 import * as _ from "lodash";
 
 export default {
@@ -25,30 +25,41 @@ export default {
   },
   props: ["layerState"],
   watch: {
-    "layerState.time": _.debounce(function() {
-      var scale = 0.028;
+    "layerState.time": _.debounce(function() { this.redraw(); }, 100),
+    "layerState.scale": _.debounce(function() { this.redraw(); }, 100),
+    "layerState.requests": _.debounce(function() { this.redraw(); }, 100),
+    "layerState.offset": _.debounce(function() { this.redraw(); }, 100),
+  },
+  methods: {
+    redraw() {
+      var scale = this.layerState.scale;
+      var width = this.width;
+      var height = this.height;
+      var offset = this.layerState.offset;
 
-      var projection = d3.geoIdentity()
-          .scale(scale)
-          .translate([-651791.0 * scale + this.width * 0.5, -6862293.0 * scale + this.height * 0.5])
+      var projection = function(x, y) {
+        return [
+          (x - 651791.0) * scale + width * 0.5 + offset[0],
+          (y - 6862293.0) * scale + height * 0.5 + offset[1]
+        ];
+    }
 
       this.selectedRequests = this.layerState.requests.filter((item) => {
         return item.departure_time < this.layerState.time && item.pickup_time > this.layerState.time;
       }).map((item) => {
         var request = { id: item.id };
-        var coordinates = projection([ item.origin_x, item.origin_y ]);
+        var coordinates = projection(item.origin_x, item.origin_y);
 
         request["x"] = coordinates[0];
         request["y"] = coordinates[1];
 
         return request;
       });
-    }, 100)
-  },
-  methods: {
+    },
     onResize() {
       this.width = this.$el.parentNode.clientWidth;
       this.height = this.$el.parentNode.clientHeight;
+      this.redraw();
     }
   },
   mounted() {

src/components/ZoneLayer.vue

@@ -25,11 +25,19 @@ export default {
   props: ["layerState"],
   computed: {
     zones() {
-      var scale = 0.028;
+      var scale = this.layerState.scale;
+      var width = this.width;
+      var height = this.height;
+      var offset = this.layerState.offset;
 
-      var projection = d3.geoIdentity()
-          .scale(scale)
-          .translate([-651791.0 * scale + this.width * 0.5, -6862293.0 * scale + this.height * 0.5])
+      var projection = d3.geoTransform({
+        point: function(x, y) {
+          this.stream.point(
+            (x - 651791.0) * scale + width * 0.5 + offset[0],
+            (y - 6862293.0) * scale + height * 0.5 + offset[1]
+          );
+        }
+      });
 
       var generator = d3.geoPath()
         .projection(projection);

src/main.js

@@ -9,6 +9,9 @@ Vue.config.productionTip = false
 
 Vue.use(BootstrapVue)
 
+import VueDragDrop from 'vue-drag-drop';
+Vue.use(VueDragDrop);
+
 new Vue({
   render: h => h(App)
 }).$mount('#app')

yarn.lock

@@ -2487,6 +2487,11 @@ core-js-compat@^3.6.2, core-js-compat@^3.6.5:
     browserslist "^4.8.5"
     semver "7.0.0"
 
+core-js@^2.5.3:
+  version "2.6.11"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.11.tgz#38831469f9922bded8ee21c9dc46985e0399308c"
+  integrity sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg==
+
 core-js@^3.6.5:
   version "3.6.5"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.6.5.tgz#7395dc273af37fb2e50e9bd3d9fe841285231d1a"
@@ -8220,6 +8225,13 @@ vm-browserify@^1.0.1:
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
 
+vue-drag-drop@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/vue-drag-drop/-/vue-drag-drop-1.1.4.tgz#6e94aeb10304b91d651614b7307d0b90f0227e89"
+  integrity sha512-zrpvKcD5LPVbht7cJ7ZBY0poS8GDLibRck18Zx0polkoSSpTPNMAv/m/b98xtZ3I1jdWGyiPybfPgKFFkygjhQ==
+  dependencies:
+    core-js "^2.5.3"
+
 vue-eslint-parser@^7.0.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-7.1.0.tgz#9cdbcc823e656b087507a1911732b867ac101e83"