|  |  | @ -103,6 +103,8 @@ interface WorldProperties { | 
			
		
	
		
			
				
					|  |  |  | export default class StatisticsView extends Vue { | 
			
		
	
		
			
				
					|  |  |  |   world: World; | 
			
		
	
		
			
				
					|  |  |  |   worldProperties: WorldProperties = {}; | 
			
		
	
		
			
				
					|  |  |  |   alertTitle = ""; | 
			
		
	
		
			
				
					|  |  |  |   alertMessage = ""; | 
			
		
	
		
			
				
					|  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |   // 'mounted' hook runs after initial render | 
			
		
	
		
			
				
					|  |  |  |   mounted() { | 
			
		
	
	
		
			
				
					|  |  | @ -114,68 +116,12 @@ export default class StatisticsView extends Vue { | 
			
		
	
		
			
				
					|  |  |  |       this.world = newWorld; | 
			
		
	
		
			
				
					|  |  |  |     } catch (err) { | 
			
		
	
		
			
				
					|  |  |  |       console.log(err); | 
			
		
	
		
			
				
					|  |  |  |       this.alertTitle = "Mounting error"; | 
			
		
	
		
			
				
					|  |  |  |       this.alertMessage = err.message; | 
			
		
	
		
			
				
					|  |  |  |     } | 
			
		
	
		
			
				
					|  |  |  |   } | 
			
		
	
		
			
				
					|  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |   public captureGraphics() { | 
			
		
	
		
			
				
					|  |  |  |     /** | 
			
		
	
		
			
				
					|  |  |  |     // from https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#examples | 
			
		
	
		
			
				
					|  |  |  |     // Adds a blank image | 
			
		
	
		
			
				
					|  |  |  |     const dataBlob = document | 
			
		
	
		
			
				
					|  |  |  |       .querySelector("#scene-container") | 
			
		
	
		
			
				
					|  |  |  |       .firstChild.toBlob((blob) => { | 
			
		
	
		
			
				
					|  |  |  |         const newImg = document.createElement("img"); | 
			
		
	
		
			
				
					|  |  |  |         const url = URL.createObjectURL(blob); | 
			
		
	
		
			
				
					|  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |         newImg.onload = () => { | 
			
		
	
		
			
				
					|  |  |  |           // no longer need to read the blob so it's revoked | 
			
		
	
		
			
				
					|  |  |  |           URL.revokeObjectURL(url); | 
			
		
	
		
			
				
					|  |  |  |         }; | 
			
		
	
		
			
				
					|  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |         newImg.src = url; | 
			
		
	
		
			
				
					|  |  |  |         document.body.appendChild(newImg); | 
			
		
	
		
			
				
					|  |  |  |       }); | 
			
		
	
		
			
				
					|  |  |  |      **/ | 
			
		
	
		
			
				
					|  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |     /** | 
			
		
	
		
			
				
					|  |  |  |     // Yields a blank page with the iframe below | 
			
		
	
		
			
				
					|  |  |  |     const dataUrl = document | 
			
		
	
		
			
				
					|  |  |  |       .querySelector("#scene-container") | 
			
		
	
		
			
				
					|  |  |  |       .firstChild.toDataURL("image/png"); | 
			
		
	
		
			
				
					|  |  |  |      **/ | 
			
		
	
		
			
				
					|  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |     /** | 
			
		
	
		
			
				
					|  |  |  |     // Yields a blank page with the iframe below | 
			
		
	
		
			
				
					|  |  |  |     const dataUrl = this.world.renderer.domElement.toDataURL("image/png"); | 
			
		
	
		
			
				
					|  |  |  |      **/ | 
			
		
	
		
			
				
					|  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |     /** | 
			
		
	
		
			
				
					|  |  |  |     // Show the image in a new tab | 
			
		
	
		
			
				
					|  |  |  |     const iframe = ` | 
			
		
	
		
			
				
					|  |  |  |       <iframe | 
			
		
	
		
			
				
					|  |  |  |         src="${dataUrl}" | 
			
		
	
		
			
				
					|  |  |  |         frameborder="0" | 
			
		
	
		
			
				
					|  |  |  |         style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" | 
			
		
	
		
			
				
					|  |  |  |         allowfullscreen> | 
			
		
	
		
			
				
					|  |  |  |       </iframe>`; | 
			
		
	
		
			
				
					|  |  |  |     const win = window.open(); | 
			
		
	
		
			
				
					|  |  |  |     win.document.open(); | 
			
		
	
		
			
				
					|  |  |  |     win.document.write(iframe); | 
			
		
	
		
			
				
					|  |  |  |     win.document.close(); | 
			
		
	
		
			
				
					|  |  |  |      **/ | 
			
		
	
		
			
				
					|  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |     // from https://stackoverflow.com/a/17407392/845494 | 
			
		
	
		
			
				
					|  |  |  |     // This yields a file with funny formatting. | 
			
		
	
		
			
				
					|  |  |  |     //const image = const dataUrl.replace("image/png", "image/octet-stream"); | 
			
		
	
		
			
				
					|  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |     /** | 
			
		
	
		
			
				
					|  |  |  |     // Yields a blank image at the bottom of the page | 
			
		
	
		
			
				
					|  |  |  |     // from https://discourse.threejs.org/t/save-screenshot-on-server/39900/3 | 
			
		
	
		
			
				
					|  |  |  |     const img = new Image(); | 
			
		
	
		
			
				
					|  |  |  |     img.src = this.world.renderer.domElement.toDataURL(); | 
			
		
	
		
			
				
					|  |  |  |     document.body.appendChild(img); | 
			
		
	
		
			
				
					|  |  |  |      **/ | 
			
		
	
		
			
				
					|  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |     /** | 
			
		
	
		
			
				
					|  |  |  |      * This yields an SVG that only shows white and black highlights | 
			
		
	
		
			
				
					|  |  |  |      // from https://stackoverflow.com/questions/27632621/exporting-from-three-js-scene-to-svg-or-other-vector-format | 
			
		
	
	
		
			
				
					|  |  | @ -183,16 +129,12 @@ export default class StatisticsView extends Vue { | 
			
		
	
		
			
				
					|  |  |  |     const rendererSVG = new SVGRenderer(); | 
			
		
	
		
			
				
					|  |  |  |     rendererSVG.setSize(window.innerWidth, window.innerHeight); | 
			
		
	
		
			
				
					|  |  |  |     rendererSVG.render(this.world.scene, this.world.camera); | 
			
		
	
		
			
				
					|  |  |  |     //document.body.appendChild(rendererSVG.domElement); | 
			
		
	
		
			
				
					|  |  |  |     ExportToSVG(rendererSVG, "test.svg"); | 
			
		
	
		
			
				
					|  |  |  |   } | 
			
		
	
		
			
				
					|  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |   public setWorldProperty(propertyName, propertyValue) { | 
			
		
	
		
			
				
					|  |  |  |     this.worldProperties[propertyName] = propertyValue; | 
			
		
	
		
			
				
					|  |  |  |   } | 
			
		
	
		
			
				
					|  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |   alertTitle = ""; | 
			
		
	
		
			
				
					|  |  |  |   alertMessage = ""; | 
			
		
	
		
			
				
					|  |  |  | } | 
			
		
	
		
			
				
					|  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  | function ExportToSVG(rendererSVG, filename) { | 
			
		
	
	
		
			
				
					|  |  | 
 |