thematic-earth/joe/panels/snapshot-panel.class.js

HTML-based, whole-Earth thematic maps using locally hosted data layers

/* Copyright (c) 2023 Read Write Tools. Legal use subject to the Thematic Earth Software License Agreement. */
import BasePanel from'../panels/base-panel.class.js';import expect from'../dev/expect.js';export default class SnapshotPanel extends BasePanel{constructor(e){super(e),Object.seal(this)}registerBroadcasters(){}registerReceivers(){var e=this.getElementById('snapshot-filename'),t=this.getElementById('snapshot-width'),a=this.getElementById('snapshot-height'),n=this.getElementById('snapshot-png'),h=this.getElementById('snapshot-jpg'),s=this.getElementById('snapshot-webp'),i=this.getElementById('snapshot-download');let r=window.location.pathname.split('/').pop(),l=r.lastIndexOf('.');-1!=l&&(r=r.substr(0,l)),e.value=r+'.png',this.signal.listen('canvas/resized',(e=>{t.value=e.width,a.value=e.height})),a.addEventListener('change',(()=>{var e=this.thematicEarthElement.canvas.width,n=this.thematicEarthElement.canvas.height,h=Number(a.value);(isNaN(h)||h>n)&&(h=n),h<16&&(h=16);var s=Math.round(e*(h/n));a.value=h,t.value=s})),t.addEventListener('change',(()=>{var e=this.thematicEarthElement.canvas.width,n=this.thematicEarthElement.canvas.height,h=Number(t.value);(isNaN(h)||h>e)&&(h=e),h<16&&(h=16);var s=Math.round(n*(h/e));a.value=s,t.value=h})),n.addEventListener('change',(()=>{let t=e.value;''==t&&(t='orthographic-earth.png'),t=t.replace('.jpg','.png'),t=t.replace('.webp','.png'),-1==t.indexOf('.png')&&(t+='.png'),e.value=t})),h.addEventListener('change',(()=>{let t=e.value;''==t&&(t='orthographic-earth.jpg'),t=t.replace('.png','.jpg'),t=t.replace('.webp','.jpg'),-1==t.indexOf('.jpg')&&(t+='.jpg'),e.value=t})),s.addEventListener('change',(()=>{let t=e.value;''==t&&(t='orthographic-earth.webp'),t=t.replace('.png','.webp'),t=t.replace('.jpg','.webp'),-1==t.indexOf('.webp')&&(t+='.webp'),e.value=t})),i.addEventListener('click',(()=>{i.disabled=!0;var r=e.value;if(''==r&&(r='orthographic-earth.png',e.value=r,n.checked=!0),n.checked)var l='image/png';else if(h.checked)l='image/jpeg';else if(s.checked)l='image/webp';this.thematicEarthElement.canvas.toBlob((async e=>{var n=Number(t.value),h=Number(a.value),s=this.thematicEarthElement.canvas.width,c=this.thematicEarthElement.canvas.height,p={resizeWidth:n,resizeHeight:h},d=await createImageBitmap(e,0,0,s,c,p);expect(d,'ImageBitmap');var g=document.createElement('canvas');g.width=n,g.height=h,g.getContext('2d').drawImage(d,0,0),g.toBlob((e=>{var t=document.createElement('a');t.download=r,t.href=URL.createObjectURL(e),t.click(),URL.revokeObjectURL(t.href),setTimeout((()=>{i.disabled=!1}),1e3)}),l)}),l)}))}}