Mercurial > gemma

comparison client/src/lib/mixins.js @ 4807:7cd40008124b

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: image-export: render diagram offscreen and use mixins in fairway-diagram
author Fadi Abbud <fadi.abbud@intevation.de>
date Mon, 28 Oct 2019 16:38:23 +0100
parents 7de099c4824c
children db450fcc8ed7
comparison
equal deleted inserted replaced
4806:a905438a7935 4807:7cd40008124b
167 ...mapState("application", ["logoForPDF"]), 167 ...mapState("application", ["logoForPDF"]),
168 ...mapState("user", ["user"]) 168 ...mapState("user", ["user"])
169 }, 169 },
170 methods: { 170 methods: {
171 downloadImage(elementName) { 171 downloadImage(elementName) {
172 const diagramContainer = document.getElementById(this.containerId); 172 const offScreen = document.querySelector("#offScreen");
173 const DPI = 96;
174 const svgWidth = this.millimeter2pixels(428, DPI);
175 const svgHeight = this.millimeter2pixels(119, DPI);
176 offScreen.style.width = `${svgWidth}px`;
177 offScreen.style.height = `${svgHeight}px`;
178 let zoomLevel = this.zoomStore;
179 const layout = this.getPrintLayout(svgHeight, svgWidth);
180 this.renderTo({
181 element: offScreen,
182 dimensions: this.getDimensions({
183 svgWidth: svgWidth,
184 svgHeight: svgHeight,
185 ...layout
186 }),
187 zoomLevel // passing the zoom level to draw the diagram on pdf at this point
188 });
189 const diagramContainer = document.getElementById("offScreen");
173 const { clientHeight, clientWidth } = diagramContainer; 190 const { clientHeight, clientWidth } = diagramContainer;
174 diagramContainer.firstElementChild.setAttribute("width", clientWidth); 191 diagramContainer.querySelector("svg").setAttribute("width", clientWidth);
175 diagramContainer.firstElementChild.setAttribute("height", clientHeight); 192 diagramContainer
176 const svg = diagramContainer.firstElementChild.outerHTML; 193 .querySelector("svg")
194 .setAttribute("height", clientHeight);
195 const svg = diagramContainer.querySelector("svg").outerHTML;
177 const canvas = document.createElement("canvas"); 196 const canvas = document.createElement("canvas");
178 canvg(canvas, svg); 197 canvg(canvas, svg);
179 const imgData = canvas.toDataURL("image/png"); 198 const imgData = canvas.toDataURL("image/png");
180 document.getElementById(elementName).setAttribute("href", imgData); 199 document.getElementById(elementName).setAttribute("href", imgData);
200 offScreen.removeChild(offScreen.firstChild);
181 }, 201 },
182 addDiagram(position, offset, width, height) { 202 addDiagram(position, offset, width, height) {
183 let x = offset.x, 203 let x = offset.x,
184 y = offset.y; 204 y = offset.y;
185 const DPI = 80; 205 const DPI = 80;