thematic-earth/joe/patterns/pattern-cache.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*as PointGraphics from'../graphics/point-graphics.js';import*as LineGraphics from'../graphics/line-graphics.js';import PatternPoint from'../patterns/pattern-point.class.js';import CanvasParams from'../tess/canvas-params.class.js';import expect from'../dev/expect.js';import aver from'../dev/aver.js';export default class PatternCache{constructor(){this.patternCollection=new Map}has(e){return this.patternCollection.has(e)}get(e){return this.patternCollection.get(e)}buildDOMCanvasPattern(e,t,r,a,n,i,s){expect(e,'CanvasRenderingContext2D'),expect(t,'String'),expect(r,'String'),expect(n,'CanvasParams'),expect(i,'Number'),expect(s,'Number');var o=null;if('brush'==r)o='sb-';else{if('pattern'!=r)return null;o='fp-'}var p=null;if('symbol'==a){if(0==s)return;switch(n.safeString([`${o}symbol-repeat`])){case'offset':p=this.symbolOffsetPattern(o,n,s);break;case'random':p=this.symbolRandomPattern(o,n,s);break;default:p=this.symbolGridPattern(o,n,s)}}else{if(0==i)return;'hatch'==a?p=this.hatchStrokePattern(o,'hatch-',n,i):'crosshatch'==a&&(p=this.hatchStrokePattern(o,'crosshatch-',n,i))}if(null!=p){var c=e.createPattern(p,'repeat');return this.patternCollection.set(t,c),c}return null}applyBackgroundColor(e,t,r,a){expect(e,'CanvasRenderingContext2D'),expect(t,'String'),expect(a,'CanvasParams');var n=a.safeString(`${t}${r}background-color`);'none'!=n&&(e.fillStyle=n,e.fillRect(0,0,e.canvas.width,e.canvas.height))}symbolGridPattern(e,t,r){expect(e,'String'),expect(t,'CanvasParams'),expect(r,'Number');var a=t.getSymbolOverallDiameter(e)*r,n=t.safeNumberOrAuto(`${e}symbol-spacing`);'auto'==n?n=a:n*=r;var i=Number(a)+Number(n);aver(!Number.isNaN(i));var s=document.createElement('canvas');s.width=i,s.height=i;var o=s.getContext('2d');this.applyBackgroundColor(o,e,'symbol-',t);var p=new PatternPoint(a/2,a/2);return PointGraphics.draw(o,e,t,p),s}symbolOffsetPattern(e,t,r){expect(e,'String'),expect(t,'CanvasParams'),expect(r,'Number');var a=t.getSymbolOverallDiameter(e)*r,n=t.safeNumberOrAuto(`${e}symbol-spacing`);'auto'==n?n=a:n*=r;var i=Number(a)+Number(n);aver(!Number.isNaN(i));var s=document.createElement('canvas');s.width=i,s.height=2*i;var o=s.getContext('2d');this.applyBackgroundColor(o,e,'symbol-',t);var p=new PatternPoint(c=0,a/2);PointGraphics.draw(o,e,t,p);var c=s.width;p=new PatternPoint(c,a/2);PointGraphics.draw(o,e,t,p);c=s.width/2,p=new PatternPoint(c,a+n+a/2);return PointGraphics.draw(o,e,t,p),s}symbolRandomPattern(e,t,r){expect(e,'String'),expect(t,'CanvasParams'),expect(r,'Number');var a=Object.assign(new CanvasParams,t);a[`${e}symbol-size`]=t.getSymbolSize(e)+1;var n=Object.assign(new CanvasParams,t);n[`${e}symbol-size`]=t.getSymbolSize(e)+2;var i=Object.assign(new CanvasParams,t);i[`${e}symbol-size`]=t.getSymbolSize(e)+3;var s=i.getSymbolOverallDiameter(e)*r,o=i.safeNumberOrAuto(`${e}symbol-spacing`);'auto'==o?o=s:o*=r,o=Math.round(o/2);var p=Math.round(7*s+o);aver(!Number.isNaN(p));var c=document.createElement('canvas');c.width=p,c.height=p;var h=c.getContext('2d');return this.applyBackgroundColor(h,e,'symbol-',t),PointGraphics.draw(h,e,i,this.sevenBySevenPoint(0,0,s,o)),PointGraphics.draw(h,e,a,this.sevenBySevenPoint(2,1,s,o)),PointGraphics.draw(h,e,t,this.sevenBySevenPoint(4,2,s,o)),PointGraphics.draw(h,e,t,this.sevenBySevenPoint(6,3,s,o)),PointGraphics.draw(h,e,a,this.sevenBySevenPoint(1,4,s,o)),PointGraphics.draw(h,e,a,this.sevenBySevenPoint(5,5,s,o)),PointGraphics.draw(h,e,n,this.sevenBySevenPoint(3,6,s,o)),c}sevenBySevenPoint(e,t,r,a){var n=a+r*t+Math.round(r/2),i=a+r*e+Math.round(r/2);return new PatternPoint(n,i)}hatchStrokePattern(e,t,r,a){expect(e,'String'),expect(t,'String'),expect(r,'CanvasParams'),expect(a,'Number');var n=r.getHatchStrokeAngle(e,t),i=r.safeNumber(`${e}${t}stroke-width`)*a,s=r.safeNumberOrAuto(`${e}${t}stroke-spacing`);if(s='auto'==s?i:s*a,0==i||0==s)return null;var o=r.safeString(`${e}${t}stroke-type`);45!=n&&135!=n||(o='solid');var p=Number(i)+Number(s);aver(!Number.isNaN(p)),45!=n&&135!=n||(p=Math.ceil(Math.sqrt(2*Math.pow(p,2))));var c=p,h=p;0==n&&(c=this.adjustSizeForStrokeType(o,i,p)),90==n&&(h=this.adjustSizeForStrokeType(o,i,p));var l=document.createElement('canvas');l.width=c,l.height=h;var u=l.getContext('2d');if(this.applyBackgroundColor(u,e,t,r),0==n){var P=i%2==1;this.horizontalLine(u,e,t,r,a,c,h,P)}else if(45==n)this.diagonalLine(u,e,t,r,a,p);else if(90==n){P=i%2==1;this.verticalLine(u,e,t,r,a,c,h,P)}else 135==n&&this.reverseDiagonalLine(u,e,t,r,a,p);return l}adjustSizeForStrokeType(e,t,r){return expect(e,'String'),expect(t,'Number'),expect(r,'Number'),'solid'==e?r:r*=LineGraphics.determineLineDashArray(e,t).reduce(((e,t)=>e+t))}horizontalLine(e,t,r,a,n,i,s,o){expect(t,'String'),expect(r,'String'),expect(a,'CanvasParams'),expect(n,'Number');var p=[];let c=Math.round(s/2);o&&(c+=.5),p.push(new PatternPoint(0,c)),p.push(new PatternPoint(i,c)),LineGraphics.definePath(e,p),LineGraphics.applyStroke(e,a,n,`${t}${r}stroke-width`,`${t}${r}stroke-color`,`${t}${r}stroke-type`)}verticalLine(e,t,r,a,n,i,s,o){expect(t,'String'),expect(r,'String'),expect(a,'CanvasParams'),expect(n,'Number');var p=[];let c=Math.round(i/2);o&&(c+=.5),p.push(new PatternPoint(c,0)),p.push(new PatternPoint(c,s)),LineGraphics.definePath(e,p),LineGraphics.applyStroke(e,a,n,`${t}${r}stroke-width`,`${t}${r}stroke-color`,`${t}${r}stroke-type`)}diagonalLine(e,t,r,a,n,i){expect(t,'String'),expect(r,'String'),expect(a,'CanvasParams'),expect(n,'Number'),expect(i,'Number'),a[`${t}${r}stroke-type`]='solid';var s=.7071*i,o=-.7071*i,p=o,c=o,h=i+s,l=i+s,u=[];u.push(new PatternPoint(p,c)),u.push(new PatternPoint(h,l)),LineGraphics.definePath(e,u),LineGraphics.applyStroke(e,a,n,`${t}${r}stroke-width`,`${t}${r}stroke-color`,`${t}${r}stroke-type`),h=2*i+s,l=i+s,(u=[]).push(new PatternPoint(p=i+o,c=o)),u.push(new PatternPoint(h,l)),LineGraphics.definePath(e,u),LineGraphics.applyStroke(e,a,n,`${t}${r}stroke-width`,`${t}${r}stroke-color`,`${t}${r}stroke-type`),h=i+s,l=2*i+s,(u=[]).push(new PatternPoint(p=o,c=i+o)),u.push(new PatternPoint(h,l)),LineGraphics.definePath(e,u),LineGraphics.applyStroke(e,a,n,`${t}${r}stroke-width`,`${t}${r}stroke-color`,`${t}${r}stroke-type`)}reverseDiagonalLine(e,t,r,a,n,i){expect(t,'String'),expect(r,'String'),expect(a,'CanvasParams'),expect(n,'Number'),expect(i,'Number'),a[`${t}${r}stroke-type`]='solid';var s=.7071*i,o=-.7071*i,p=o,c=i+s,h=i+s,l=o,u=[];u.push(new PatternPoint(p,c)),u.push(new PatternPoint(h,l)),LineGraphics.definePath(e,u),LineGraphics.applyStroke(e,a,n,`${t}${r}stroke-width`,`${t}${r}stroke-color`,`${t}${r}stroke-type`),h=s-i,l=o+i,(u=[]).push(new PatternPoint(p=s,c=o)),u.push(new PatternPoint(h,l)),LineGraphics.definePath(e,u),LineGraphics.applyStroke(e,a,n,`${t}${r}stroke-width`,`${t}${r}stroke-color`,`${t}${r}stroke-type`),h=s,l=2*i+o,(u=[]).push(new PatternPoint(p=i+s,c=i+o)),u.push(new PatternPoint(h,l)),LineGraphics.definePath(e,u),LineGraphics.applyStroke(e,a,n,`${t}${r}stroke-width`,`${t}${r}stroke-color`,`${t}${r}stroke-type`)}}