Mercurial > gemma

comparison client/src/lib/mixins.js @ 4809:b6d8570b8480

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: image-export: add diagram legend
author Fadi Abbud <fadi.abbud@intevation.de>
date Tue, 29 Oct 2019 16:29:29 +0100
parents db450fcc8ed7
children 660147046ddd
comparison
equal deleted inserted replaced
4808:db450fcc8ed7 4809:b6d8570b8480
189 const diagramContainer = document.getElementById("offScreen"); 189 const diagramContainer = document.getElementById("offScreen");
190 const { clientHeight, clientWidth } = diagramContainer; 190 const { clientHeight, clientWidth } = diagramContainer;
191 diagramContainer.querySelector("svg").setAttribute("width", clientWidth); 191 diagramContainer.querySelector("svg").setAttribute("width", clientWidth);
192 diagramContainer 192 diagramContainer
193 .querySelector("svg") 193 .querySelector("svg")
194 .setAttribute("height", clientHeight + 70); 194 .setAttribute("height", clientHeight + 180);
195 const svg = diagramContainer.querySelector("svg").outerHTML; 195 const svg = diagramContainer.querySelector("svg").outerHTML;
196 const canvas = document.createElement("canvas"); 196 const canvas = document.createElement("canvas");
197 canvg(canvas, svg, { offsetY: 70 }); 197 canvg(canvas, svg, { offsetY: 70 });
198 const ctx = canvas.getContext("2d"); 198 const ctx = canvas.getContext("2d");
199 // Draw white rectangular and place the title on it 199 // Draw white rectangular and place the title on it
204 ctx.fillStyle = "steelblue"; 204 ctx.fillStyle = "steelblue";
205 ctx.font = "500 30px sans-serif"; 205 ctx.font = "500 30px sans-serif";
206 ctx.textAlign = "center"; 206 ctx.textAlign = "center";
207 ctx.fillText(title, clientWidth / 2, 35); 207 ctx.fillText(title, clientWidth / 2, 35);
208 ctx.closePath(); 208 ctx.closePath();
209 // Add diagramlegend
210 this.addLegendToCanvas(ctx, {
211 height: clientHeight + 100,
212 width: clientWidth
213 });
209 214
210 const imgData = canvas.toDataURL("image/png"); 215 const imgData = canvas.toDataURL("image/png");
211 document.getElementById(elementName).setAttribute("href", imgData); 216 document.getElementById(elementName).setAttribute("href", imgData);
212 offScreen.removeChild(offScreen.firstChild); 217 offScreen.removeChild(offScreen.firstChild);
213 }, 218 },