gantt animations

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

@@ -3,19 +3,22 @@
 		<g>
 			<rect x="0" y="0" width="100%" :height="rowHeight" class="background"></rect>
 		</g>
-		<g
-			:transform="`translate(${ganttOptions.stepDuration * ganttOptions.secondSize + paddingHorizontal} 0) scale(${zoomFactor} ${zoomFactor})`"
-		>
-			<template v-for="b in blocksInSection.filter( i=> i.visible)">
-				<block
-					:key="b.id"
-					:value="b"
-					:x="startPosition(b)"
-					:y="verticalPosition(b) + ganttOptions.elementPadding"
-					stroke="#999"
-					stroke-width="2"
-				/>
-			</template>
+		<g :transform="`scale(${zoomFactor} ${zoomFactor})`">
+			<g
+				class="pad"
+				:transform="`translate(${ganttOptions.stepDuration * ganttOptions.secondSize + paddingHorizontal} 0)`"
+			>
+				<template v-for="b in blocksInSection.filter( i=> i.visible)">
+					<block
+						:key="b.id"
+						:value="b"
+						:x="startPosition(b)"
+						:y="verticalPosition(b) + ganttOptions.elementPadding"
+						stroke="#999"
+						stroke-width="2"
+					/>
+				</template>
+			</g>
 		</g>
 		<g>
 			<rect x="0" y="0" width="25" :height="rowHeight " fill="#cfcfcf"></rect>

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

@@ -19,29 +19,27 @@ export default class Gantt extends Vue {
   padY: number = 0;
 
   get PadX() {
-    let w = ((this.$refs.mainContainer as any)?.clientWidth ?? 0) / 2;
+    let w = ((this.$refs.mainContainer as any)?.clientWidth ?? 0) / 3;
     if (this.follow && w && this.currentTime * this.ganttOptions.secondSize > w)
       return -(this.currentTime * this.ganttOptions.secondSize - w);
     return this.padX;
   }
   set PadX(value: number) {
-    this.follow = false;
-    this.padX = value;
+    if (!this.follow)
+      this.padX = value;
   }
 
   get PadY() {
-    // if (this.follow) return -this.activeBlockYPosition;
     return this.padY;
   }
   set PadY(value: number) {
-    this.follow = false;
     this.padY = value;
   }
 
   follow: boolean = false;
 
   get canFollow() {
-    if (this.follow && this.currentTime > 5)
+    if (this.follow && this.currentTime > 1)
       return true;
     return false;
   }
@@ -83,7 +81,6 @@ export default class Gantt extends Vue {
 
   startPan(event: MouseEvent | TouchEvent) {
     this.lastPosition = this.getSvgCoords(event);
-    this.follow = false;
   }
 
   stopPan() {
@@ -144,8 +141,11 @@ export default class Gantt extends Vue {
     this.$forceUpdate()
   }
 
-  setFollow() {
-    this.follow = true;
+  toggleFollow() {
+    this.follow = !this.follow;
+
+    if (this.follow)
+      this.padX = 0;
   }
 
 

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

@@ -78,8 +78,9 @@ svg.gantt {
 	fill: #f6f6f6;
 }
 
-svg.gantt.follow g:not([style]) {
-	transition: 2s transform linear;
+svg.gantt.follow g.gantt-header,
+svg.gantt.follow g.pad {
+	transition: 1s transform linear;
 }
 </style>
 

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

@@ -1,12 +1,16 @@
 <template>
 	<svg class="timeline">
-		<g :transform="`translate(${ paddingHorizontal} 0)`">
-			<g
-				:transform="`translate(${(position + Math.min(20*position/60, 20)*speed) * zoomFactor} 0)`"
-				:style="position>20?`transition: transform ${speed}s linear`:''"
-			>
-				<path class="arrow" d="M 0 0 L 30 0 L 15 24 Z" />
-				<line x1="15" y1="24" x2="15" :y2="lineHeight" />
+		<g :transform="`translate(${ paddingHorizontal} 0)`" class="pad">
+			<g :transform="`scale(${zoomFactor} 1)`">
+				<g
+					:transform="`translate(${position} 0)`"
+					:style="position>20?`transition: transform ${speed}s linear`:''"
+				>
+					<g :transform="`scale(${2-zoomFactor} 1)`">
+						<path class="arrow" d="M 0 0 L 30 0 L 15 24 Z" />
+						<line x1="15" y1="24" x2="15" :y2="lineHeight" />
+					</g>
+				</g>
 			</g>
 		</g>
 	</svg>

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

@@ -35,7 +35,12 @@
 				<button class="btn">
 					<i class="fa fa-search-plus" @click="zoomFactor *= zoomStep"></i>
 				</button>
-				<button class="realign" v-if="$refs.gantt" @click="$refs.gantt.setFollow()">
+				<button
+					class="realign"
+					v-if="$refs.gantt"
+					@click="$refs.gantt.toggleFollow()"
+					:class="{active: $refs.gantt.follow}"
+				>
 					<img src="/assets/icons/png/recenter-time.png" />
 				</button>
 			</div>
@@ -84,6 +89,10 @@
 	border-radius: 50px;
 	right: 0;
 }
+
+.zoom-buttons button.realign.active {
+	border-color: #1791ff;
+}
 </style>
 
 <script lang="ts" src="./processo.ts"></script>