gantt pan & zoom

Thermo.Active/wwwroot/config.development.json

@@ -2,7 +2,7 @@
   "env": "development",
   "api": {
     "enabled": true,
-    "apiServerUrl": "http://localhost:9000/"
+    "apiServerUrl": "http://seriate.steamware.net:9000/"
   },
   "allUIVisible": true
 }

Thermo.Active/wwwroot/index.html

@@ -13,7 +13,7 @@
   <script src="Scripts/jquery.mousewheel.js"></script>
   <script src="Scripts/jquery.signalR-2.2.2.min.js"></script>
   <script src="Scripts/raphael-2.1.4.min.js"></script>
-  <script src="http://localhost:9000/signalr/hubs" async></script>
+  <script src="http://seriate.steamware.net:9000/signalr/hubs" async></script>
 
   <link href="assets/styles/style.css" rel="stylesheet" />
 </head>

Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/gantt/gantt-row.ts

@@ -10,6 +10,9 @@ export default class GanttRow extends Vue {
   @InjectReactive()
   ganttOptions: IGanttOptions;
 
+  @Prop({ default: 0 })
+  paddingHorizontal: number;
+
   @Prop({ default: "" })
   header: string;
 

Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/gantt/gantt-row.vue

@@ -1,5 +1,5 @@
 <template>
-	<g class="gantt-row">
+	<g class="gantt-row" :transform="`translateX(${paddingHorizontal})`">
 		<g>
 			<rect x="0" y="0" width="25" :height="rowHeight" fill="#cfcfcf"></rect>
 			<foreignObject x="0" y="0" width="25" :height="rowHeight">

Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/gantt/gantt.ts

@@ -46,8 +46,60 @@ export default class Gantt extends Vue {
   mounted() {
 
   }
+
+  startPan(event: MouseEvent | TouchEvent) {
+    this.lastPosition = this.getSvgCoords(event);
+  }
+
+  stopPan() {
+    this.lastPosition = null;
+  }
+
+  lastPosition: movePoint = null;
+  doPan(event: MouseEvent | TouchEvent) {
+    if (this.lastPosition)
+      if (event.type == "touchmove" || (event.type == "mousemove" && (event as MouseEvent).buttons)) {
+        let p = this.getSvgCoords(event)
+
+        this.padX += p.x - this.lastPosition.x;
+        this.padY += this.lastPosition.y - p.y;
+      }
+  }
+
+
+  getSvgCoords(evt: MouseEvent | TouchEvent): movePoint {
+    var e = this.$el;
+    var dim = e.getBoundingClientRect();
+
+    var x = null;
+    var y = null;
+
+    if ((evt as TouchEvent).touches)
+      for (const touch of Array.from((evt as TouchEvent).touches).slice(0, 1)) {
+        x = touch.clientX - dim.left;
+        y = touch.clientY - dim.top;
+      }
+    else {
+      x = (evt as MouseEvent).clientX - dim.left;
+      y = (evt as MouseEvent).clientY - dim.top;
+    }
+    // let sizes = this.zoomController?.getSizes();
+    // let pan = this.zoomController?.getPan();
+    // x -= pan.x;
+    // y -= pan.y;
+    // return {
+    //   x: x / sizes.realZoom, y: y / sizes.realZoom
+    // };
+    return { x, y };
+  }
+
+
 }
 
+interface movePoint {
+  x: number;
+  y: number;
+}
 export interface IGanttElement {
   from: Date,
   to?: Date,

Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/gantt/gantt.vue

@@ -1,5 +1,16 @@
 <template>
-	<svg ref="mainContainer" preserveAspectRation="xMinYMax" width="100%" height="100%">
+	<svg
+		ref="mainContainer"
+		preserveAspectRation="xMinYMax"
+		width="100%"
+		height="100%"
+		@mousemove.capture="doPan"
+		v-on:touchmove="doPan"
+		@mousedown="startPan"
+		@mouseup="stopPan"
+		v-on:touchstart="startPan"
+		v-on:touchend="stopPan"
+	>
 		<gantt-header :padding-horizontal="padX" />
 		<g :transform="`translate(0 ${ganttOptions.stepDuration * ganttOptions.secondSize})`">
 			<gantt-row :section="1" :blocks="blocks" ref="section1" :padding-horizontal="padX">