gantt printing

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

@@ -12,12 +12,24 @@
 
 			<!-- gestione del delay -->
 			<g v-if="value.showDelay">
-				<foreignObject :width="delayDuration * ganttOptions.secondSize" height="44" x="0" y="0">
+				<foreignObject
+					:width="delayDuration * ganttOptions.secondSize"
+					height="44"
+					x="0"
+					y="0"
+					v-if="!ganttOptions.printing"
+				>
 					<div class="delay-header">
 						<i class="fa fa-hourglass-half" aria-hidden="true" />
 					</div>
 				</foreignObject>
-				<foreignObject :width="delayDuration * ganttOptions.secondSize" height="26" x="0" y="44">
+				<foreignObject
+					:width="delayDuration * ganttOptions.secondSize"
+					height="26"
+					x="0"
+					y="44"
+					v-if="!ganttOptions.printing"
+				>
 					<div class="delay-footer">{{value.estimatedDelay | round(1)}}s</div>
 				</foreignObject>
 				<line
@@ -35,6 +47,7 @@
 					height="44"
 					x="0"
 					y="0"
+					v-if="!ganttOptions.printing"
 				>
 					<div class="body-header">{{value.label | localize(value.label)}}</div>
 				</foreignObject>
@@ -43,6 +56,7 @@
 					height="26"
 					x="0"
 					y="44"
+					v-if="!ganttOptions.printing"
 				>
 					<div class="body-footer">{{value.estimatedDuration | round(1)}}s</div>
 				</foreignObject>
@@ -145,6 +159,7 @@
 				<foreignObject :width="statusDuration * ganttOptions.secondSize" height="26" x="0" y="44">
 					<div
 						class="status-footer"
+						v-if="!ganttOptions.printing"
 					>{{recipeValue.setpointPLC | round(recipeValue.numDec)}} {{recipeValue.unitMeasure}}</div>
 				</foreignObject>
 			</g>
@@ -156,6 +171,7 @@
 					y="-5"
 					height="10"
 					:x="Math.max(actualDelay * ganttOptions.secondSize -30,0)"
+					v-if="!ganttOptions.printing"
 				>
 					<div class="progress-indicator">{{value.actualDelay | round(1)}}</div>
 				</foreignObject>
@@ -174,6 +190,7 @@
 					y="-5"
 					height="10"
 					:x="Math.max(actualDuration * ganttOptions.secondSize -30,0)"
+					v-if="!ganttOptions.printing"
 				>
 					<div class="progress-indicator">{{value.actualDuration | round(1)}}</div>
 				</foreignObject>

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

@@ -20,7 +20,7 @@
 				</template>
 			</g>
 		</g>
-		<g>
+		<g v-if="!ganttOptions.printing">
 			<rect x="0" y="0" width="25" :height="rowHeight " fill="#cfcfcf"></rect>
 			<foreignObject x="0" y="0" width="25" :height="rowHeight ">
 				<div class="rowHeader">

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

@@ -5,6 +5,17 @@ import ganttHeader from "./gantt-header.vue";
 import ganttRow from "./gantt-row.vue"
 import timeLine from "./timeline.vue";
 
+var ContainerElements = ["svg", "g"];
+var RelevantStyles = {
+  "rect": ["fill", "stroke", "stroke-width"],
+  "path": ["fill", "stroke", "stroke-width"],
+  "circle": ["fill", "stroke", "stroke-width"],
+  "line": ["stroke", "stroke-width"],
+  "text": ["fill", "font-size", "text-anchor"],
+  "polygon": ["stroke", "fill"],
+  "div": ["align-items", "justify-content", "flex-flow", "font-size", "height", "padding", "color", "display", "width"]
+};
+
 @Component({
   components: {
     ganttHeader, ganttRow, timeLine
@@ -18,41 +29,51 @@ export default class Gantt extends Vue {
   padX: number = 0;
   padY: number = 0;
 
-  printing: boolean = false;
+
   public print() {
-    this.printing = true;
+    this.ganttOptions.printing = true;
 
-    let canvas = document.createElement('canvas');
-    var ctx = canvas.getContext('2d');
-
-    var data = (new XMLSerializer()).serializeToString(this.$refs.mainContainer as SVGElement);
-    var DOMURL = (window.URL || window.webkitURL);
-    var img = new Image();
-    var svgBlob = new Blob([data], { type: 'image/svg+xml;charset=utf-8' });
-    var url = DOMURL.createObjectURL(svgBlob);
-    img.onload = function () {
-      ctx.drawImage(img, 0, 0);
-      DOMURL.revokeObjectURL(url);
-
-      var imgURI = canvas
-        .toDataURL('image/png')
-        .replace('image/png', 'image/octet-stream');
+    this.$nextTick(() => {
 
 
-      var evt = new MouseEvent('click', {
-        view: window,
-        bubbles: false,
-        cancelable: true
-      });
+      var oDOM = (this.$refs.mainContainer as SVGElement).cloneNode(true)
+      this.exportSVGWithStyle(oDOM, this.$refs.mainContainer)
+      var data = new XMLSerializer().serializeToString(oDOM);
 
-      var a = document.createElement('a');
-      a.setAttribute('download', 'MY_COOL_IMAGE.png');
-      a.setAttribute('href', imgURI);
-      a.setAttribute('target', '_blank');
+      var DOMURL = (window.URL || window.webkitURL);
 
-      a.dispatchEvent(evt);
-    };
+      var svgBlob = new Blob([data], { type: 'image/svg+xml;charset=utf-8' });
+      var url = DOMURL.createObjectURL(svgBlob);
 
+      this.ganttOptions.printing = false;
+      window.open(url, '_blank')
+    });
+  }
+
+
+
+
+  exportSVGWithStyle(ParentNode, OrigData) {
+    var Children = ParentNode.childNodes;
+    var OrigChildDat = OrigData.childNodes;
+
+    for (var cd = 0; cd < Children.length; cd++) {
+      var Child = Children[cd];
+
+      var TagName = Child.tagName;
+      if (ContainerElements.indexOf(TagName) != -1) {
+        this.exportSVGWithStyle(Child, OrigChildDat[cd])
+      } else if (TagName in RelevantStyles) {
+        var StyleDef = window.getComputedStyle(OrigChildDat[cd]);
+
+        var StyleString = "";
+        for (var st = 0; st < RelevantStyles[TagName].length; st++) {
+          StyleString += RelevantStyles[TagName][st] + ":" + StyleDef.getPropertyValue(RelevantStyles[TagName][st]) + "; ";
+        }
+
+        Child.setAttribute("style", StyleString);
+      }
+    }
   }
 
   get PadX() {
@@ -107,7 +128,8 @@ export default class Gantt extends Vue {
     block_body_Vacuum_minDuration: 5,
     block_body_Cooling_minDuration: 10,
     block_body_Extraction_minDuration: 5,
-    block_padding: 0.01
+    block_padding: 0.01,
+    printing: false
   };
 
   @Prop({ default: 0 })
@@ -217,4 +239,5 @@ export interface IGanttOptions {
   block_body_Cooling_minDuration: number;
   block_body_Extraction_minDuration: number;
   block_padding: number;
+  printing: boolean;
 }

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

@@ -55,7 +55,7 @@
 		</g>
 		<gantt-header :padding-horizontal="PadX " :zoom-factor="zoomFactor" />
 		<time-line
-			v-if="!!getRowHeight($refs.section1) && !!getRowHeight($refs.section2) && !printing"
+			v-if="!!getRowHeight($refs.section1) && !!getRowHeight($refs.section2) && !ganttOptions.printing"
 			:padding-horizontal="PadX"
 			:zoom-factor="zoomFactor"
 			:speed="1"

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

@@ -19,7 +19,9 @@
 						@checkChanged="softKeyChanged(b.id, b.operatorConfirmationNeeded)"
 					></soft-key>
 				</template>
-				<label><span v-if="tot">{{actual}}/{{tot}}</span></label>
+				<label>
+					<span v-if="tot">{{actual}}/{{tot}}</span>
+				</label>
 			</div>
 			<gantt
 				ref="gantt"
@@ -40,6 +42,7 @@
 					class="realign"
 					v-if="$refs.gantt"
 					@click="$refs.gantt.toggleFollow()"
+					@dblclick="$refs.gantt.print()"
 					:class="{active: $refs.gantt.follow}"
 				>
 					<img src="/assets/icons/png/recenter-time.png" />

Thermo.Active/wwwroot/src/services/hub.ts

@@ -209,6 +209,7 @@ export class Hub {
 
 
   private static gaugeData(data) {
+    console.log('gaugedata', data)
     machineStatusActions.setGauge(store, data);
   }