jtBaseApp/node_modules/@arcgis/core/symbols/cim/CIMSymbolRasterizer.js

/*
All material copyright ESRI, All Rights Reserved, unless otherwise specified.
See https://js.arcgis.com/4.24/esri/copyright.txt for details.
*/
import e from"../../Color.js";import t from"../../request.js";import{throwIfAborted as r}from"../../core/promiseUtils.js";import{pt2px as a}from"../../core/screenUtils.js";import{numericHash as i}from"../../core/string.js";import{getJsonType as s,isPolygon as o,isPolyline as n}from"../../geometry/support/jsonUtils.js";import{analyzeCIMSymbol as c,analyzeCIMResource as l}from"./cimAnalyzer.js";import m from"./CIMResourceManager.js";import h from"./Rasterizer.js";import f from"./TextRasterizer.js";import{createLabelOverrideFunction as g,evaluateValueOrFunction as u,colorToArray as y}from"./utils.js";import{scaleCIMMarker as p}from"../support/cimSymbolUtils.js";import{Symbol3DAnchorPosition2D as d}from"../support/Symbol3DAnchorPosition2D.js";var M;!function(e){e.Legend="legend",e.Preview="preview"}(M||(M={}));const C=(e,t,r)=>{if(e&&e.targetSize){let i;if(r){const t=Math.max(r.frame.xmax-r.frame.xmin,r.frame.ymax-r.frame.ymin);i=e.targetSize/a(t)}else i=e.targetSize/t.referenceSize;return i}return e&&e.scaleFactor?e.scaleFactor:1},I={fill:{legend:{frame:{xmax:15,xmin:0,ymax:15,ymin:0},geometry:{rings:[[[0,15],[15,7.5],[15,0],[0,0],[0,15]]]},canvasPaths:{rings:[[[0,15],[0,0],[15,7.5],[15,15],[0,15]]]}},preview:{frame:{xmax:100,xmin:0,ymax:100,ymin:0},geometry:{rings:[[[0,100],[100,100],[100,0],[0,0],[0,100]]]},canvasPaths:{rings:[[[0,100],[0,0],[100,0],[100,100],[0,100]]]}}},stroke:{legend:{frame:{xmax:24,xmin:0,ymax:2,ymin:-2},geometry:{paths:[[[0,0],[12,0],[24,0]]]},canvasPaths:{paths:[[[0,2],[12,2],[24,2]]]}},preview:{frame:{xmax:100,xmin:0,ymax:2,ymin:-2},geometry:{paths:[[[0,0],[50,0],[100,0]]]},canvasPaths:{paths:[[[0,2],[50,2],[100,2]]]}}}};class z{constructor(e,t){this._spatialReference=e,this._avoidSDF=t,this._resourceCache=new Map,this._pictureMarkerCache=new Map,this._textRasterizer=new f,this._cimResourceManager=new m,this._rasterizer=new h(this._cimResourceManager)}async rasterizeCIMSymbolAsync(e,t,r,a,i,o,n,c){a=a||(t?null!=t.centroid?"esriGeometryPolygon":s(t.geometry):null)||x(e);const l=await this.analyzeCIMSymbol(e,t?P(t.attributes):null,r,a,c);return this.rasterizeCIMSymbol(l,t,a,i,o,n)}async analyzeCIMSymbol(e,t,a,i,s){const o=[],n=t?{geometryType:i,spatialReference:this._spatialReference,fields:t}:null;let l;await c(e.data,n,this._cimResourceManager,o,this._avoidSDF),r(s);for(const r of o)"CIMPictureMarker"!==r.cim.type&&"CIMPictureFill"!==r.cim.type&&"CIMPictureStroke"!==r.cim.type||(l||(l=[]),l.push(this._fetchPictureMarkerResource(r,s))),a&&"text"===r.type&&"string"==typeof r.text&&r.text.includes("[")&&(r.text=g(a,r.text,r.cim.textCase));return l&&await Promise.all(l),o}async _fetchPictureMarkerResource(e,r){const a=e.materialHash;if(!this._pictureMarkerCache.get(a)){const i=(await t(e.cim.url,{responseType:"image",signal:r&&r.signal})).data;this._pictureMarkerCache.set(a,i)}}rasterizeCIMSymbol(e,t,r,a,i,s){const o=[];for(const n of e){a&&"function"==typeof a.scaleFactor&&(a.scaleFactor=a.scaleFactor(t,i,s));const e=this._getRasterizedResource(n,t,r,a,i,s);if(!e)continue;let c=0,l=e.anchorX||0,m=e.anchorY||0,h=!1,f=0,g=0;if("esriGeometryPoint"===r){const e=C(a,n,null);if(f=u(n.offsetX,t,i,s)*e||0,g=u(n.offsetY,t,i,s)*e||0,"marker"===n.type)c=u(n.rotation,t,i,s)||0,h=!!n.rotateClockwise&&n.rotateClockwise;else if("text"===n.type){if(c=u(n.angle,t,i,s)||0,void 0!==n.horizontalAlignment)switch(n.horizontalAlignment){case"left":l=-.5;break;case"right":l=.5;break;default:l=0}if(void 0!==n.verticalAlignment)switch(n.verticalAlignment){case"top":m=.5;break;case"bottom":m=-.5;break;case"baseline":m=-.25;break;default:m=0}}}null!=e&&o.push({angle:c,rotateClockWise:h,anchorX:l,anchorY:m,offsetX:f,offsetY:g,rasterizedResource:e})}return this.getSymbolImage(o)}getSymbolImage(e){const t=document.createElement("canvas"),r=t.getContext("2d");let i=0,s=0,o=0,n=0;const c=[];for(let f=0;f<e.length;f++){const t=e[f],l=t.rasterizedResource;if(!l)continue;const m=l.size,h=t.offsetX,g=t.offsetY,u=t.anchorX,y=t.anchorY,p=t.rotateClockWise||!1;let d=t.angle,M=a(h)-m[0]*(.5+u),C=a(g)-m[1]*(.5+y),I=M+m[0],z=C+m[1];if(d){p&&(d=-d);const e=Math.sin(d*Math.PI/180),t=Math.cos(d*Math.PI/180),r=M*t-C*e,a=M*e+C*t,i=M*t-z*e,s=M*e+z*t,o=I*t-z*e,n=I*e+z*t,c=I*t-C*e,l=I*e+C*t;M=Math.min(r,i,o,c),C=Math.min(a,s,n,l),I=Math.max(r,i,o,c),z=Math.max(a,s,n,l)}i=M<i?M:i,s=C<s?C:s,o=I>o?I:o,n=z>n?z:n;const P=r.createImageData(l.size[0],l.size[1]);P.data.set(new Uint8ClampedArray(l.image.buffer));const x={offsetX:h,offsetY:g,rotateClockwise:p,angle:d,rasterizedImage:P,anchorX:u,anchorY:y};c.push(x)}t.width=o-i,t.height=n-s;const l=-i,m=n;for(let f=0;f<c.length;f++){const e=c[f],t=this._imageDataToCanvas(e.rasterizedImage),i=e.rasterizedImage.width,s=e.rasterizedImage.height,o=l-i*(.5+e.anchorX),n=m-s*(.5-e.anchorY);if(e.angle){const i=(360-e.angle)*Math.PI/180;r.save(),r.translate(a(e.offsetX),-a(e.offsetY)),r.translate(l,m),r.rotate(i),r.translate(-l,-m),r.drawImage(t,o,n),r.restore()}else r.drawImage(t,o+a(e.offsetX),n-a(e.offsetY))}const h=new d({x:l/t.width-.5,y:m/t.height-.5});return{imageData:0!==t.width&&0!==t.height?r.getImageData(0,0,t.width,t.height):r.createImageData(1,1),anchorPosition:h}}_imageDataToCanvas(e){this._imageDataCanvas||(this._imageDataCanvas=document.createElement("canvas"));const t=this._imageDataCanvas,r=t.getContext("2d");return t.width=e.width,t.height=e.height,r.putImageData(e,0,0),t}_imageTo32Array(t,r,a,i){this._imageDataCanvas||(this._imageDataCanvas=document.createElement("canvas"));const s=this._imageDataCanvas,o=s.getContext("2d");if(s.width=r,s.height=a,o.drawImage(t,0,0,r,a),i){o.save();const s=new e(i);o.fillStyle=s.toHex(),o.globalCompositeOperation="multiply",o.fillRect(0,0,r,a),o.globalCompositeOperation="destination-atop",o.drawImage(t,0,0,r,a),o.restore()}return new Uint32Array(o.getImageData(0,0,r,a).data.buffer)}_getRasterizedResource(e,t,r,a,s,o){let n,c,l,m,h=null,f=null;if("esriGeometryPolyline"===r||"esriGeometryPolygon"===r){const m=a&&a.style?a.style:M.Legend,g="esriGeometryPolyline"===r?I.stroke[m]:I.fill[m];if("line"===e.type){if("CIMSolidStroke"!==e.cim.type){if("CIMPictureStroke"===e.cim.type){const r=u(e.width,t,s,o),a=u(e.color,t,s,o),{image:i,width:n,height:c}=this._getPictureResource(e,r,a);return this._rasterizePictureResource(e,i,n,c,g,r)}return null}({analyzedCIM:n,hash:l}=w(e,t,s,o)),c=this._embedCIMLayerInVectorMarker(n,g)}else if("marker"===e.type){if("CIMPictureMarker"===e.cim.type){const r=u(e.size,t,s,o),a=u(e.color,t,s,o),{image:i,width:n,height:c}=this._getPictureResource(e,r,a);return this._rasterizePictureResource(e,i,n,c,g,r)}if("CIMVectorMarker"!==e.cim.type)return null;e.cim.offsetX=u(e.offsetX,t,s,o),e.cim.offsetY=u(e.offsetY,t,s,o),e.cim.rotation=u(e.rotation,t,s,o),e.cim.markerPlacement=e.markerPlacement,({analyzedCIM:n}=w(e,t,s,o)),l=i(JSON.stringify(n)).toString(),c=this._embedCIMLayerInVectorMarker(n,g),h=u(e.size,t,s,o),f=e.path}else{if("text"===e.type)return null;if("fill"===e.type){if("CIMHatchFill"===e.cim.type||"CIMVectorMarker"===e.cim.type||"CIMPictureMarker"===e.cim.type||"CIMPictureFill"===e.cim.type){const r=e.cim.size||e.cim.height;let a,i,c;if("CIMPictureMarker"===e.cim.type||"CIMPictureFill"===e.cim.type)({image:a,width:i,height:c}=this._getPictureResource(e,r,u(e.color,t,s,o)));else{({analyzedCIM:n,hash:l}=w(e,t,s,o));const m=this._rasterizer.rasterizeJSONResource({cim:n,type:e.type,url:e.url,mosaicHash:l,size:r,path:f},1,this._avoidSDF);a=m.image,i=m.size[0],c=m.size[1]}return this._rasterizePictureResource(e,a,i,c,g,null)}if("CIMSolidFill"!==e.cim.type)return null;({analyzedCIM:n,hash:l}=w(e,t,s,o)),c=this._embedCIMLayerInVectorMarker(n,g)}}}else{if("text"===e.type)return m=this._rasterizeTextResource(e,t,a,s,o),m;({analyzedCIM:n,hash:l}=w(e,t,s,o));const r=C(a,e,null);if("CIMPictureMarker"===e.cim.type){const a=u(e.size,t,s,o)*r,{image:i,width:n,height:c}=this._getPictureResource(e,a,u(e.color,t,s,o));return m={image:i,size:[n,c],sdf:!1,simplePattern:!1,anchorX:e.anchorPoint?e.anchorPoint.x:0,anchorY:e.anchorPoint?e.anchorPoint.y:0},m}p(n,r,{preserveOutlineWidth:!1}),c=n}l+=r,a&&(l+=JSON.stringify(a));const g=this._resourceCache;return g.has(l)?g.get(l):(m=this._rasterizer.rasterizeJSONResource({cim:c,type:e.type,url:e.url,mosaicHash:l,size:h,path:f},window.devicePixelRatio||1,this._avoidSDF),g.set(l,m),m)}_rasterizeTextResource(e,t,r,a,i){const s=C(r,e,null),o=u(e.text,t,a,i);if(!o||0===o.length)return null;const n=u(e.fontName,t,a,i),c=u(e.style,t,a,i),l=u(e.weight,t,a,i),m=u(e.decoration,t,a,i),h=u(e.size,t,a,i)*s,f=u(e.horizontalAlignment,t,a,i),g=u(e.verticalAlignment,t,a,i),p=y(u(e.color,t,a,i)),d=y(u(e.outlineColor,t,a,i)),M={color:p,size:h,horizontalAlignment:f,verticalAlignment:g,font:{family:n,style:c,weight:l,decoration:m},halo:{size:u(e.outlineSize,t,a,i)||0,color:d,style:c},pixelRatio:1,premultiplyColors:!this._avoidSDF};return this._textRasterizer.rasterizeText(o,M)}_rasterizePictureResource(e,t,r,i,s,c){const l=document.createElement("canvas"),m=l.getContext("2d");l.height=a(Math.max(s.frame.ymax-s.frame.ymin,c)),l.width=a(s.frame.xmax-s.frame.xmin);const h=m.createImageData(r,i);h.data.set(new Uint8ClampedArray(t.buffer));const f=this._imageDataToCanvas(h),g=m.createPattern(f,"repeat"),u=Math.cos((-e.cim.rotation||0)*Math.PI/180),y=Math.sin((-e.cim.rotation||0)*Math.PI/180);g.setTransform({m11:u,m12:y,m21:-y,m22:u,m41:a(e.cim.offsetX)||0,m42:a(e.cim.offsetY)||0});const p=s.canvasPaths;let d,M,C;o(p)?(d=p.rings,m.fillStyle=g,M=m.fill,C=["evenodd"]):n(p)&&(d=p.paths,m.strokeStyle=g,m.lineWidth=c,M=m.stroke,d[0][0][1]=l.height/2,d[0][1][1]=l.height/2),m.beginPath();for(const o of d){const e=o?o.length:0;if(e>1){let t=o[0];m.moveTo(a(t[0]),a(t[1]));for(let r=1;r<e;++r)t=o[r],m.lineTo(a(t[0]),a(t[1]));m.closePath()}}M.apply(m,C);const I=m.getImageData(0,0,l.width,l.height),z=new Uint8Array(I.data);return{size:[l.width,l.height],image:new Uint32Array(z.buffer),sdf:!1,simplePattern:!1,anchorX:0,anchorY:0}}_getPictureResource(e,t,r){const i=this._pictureMarkerCache.get(e.materialHash);if(!i)return null;const s=i.height/i.width,o=t?s>1?a(t):a(t)/s:i.width,n=t?s>1?a(t)*s:a(t):i.height;return{image:this._imageTo32Array(i,o,n,r),width:o,height:n}}_embedCIMLayerInVectorMarker(e,t){const r=o(t.geometry)?"CIMPolygonSymbol":"CIMLineSymbol",a=t.frame;return{type:"CIMVectorMarker",frame:a,size:a.ymax-a.ymin,markerGraphics:[{type:"CIMMarkerGraphic",geometry:t.geometry,symbol:{type:r,symbolLayers:[e]}}]}}}function P(e){return(e?Object.keys(e):[]).map((t=>({name:t,alias:t,type:"string"==typeof e[t]?"esriFieldTypeString":"esriFieldTypeDouble"})))}function x(e){if(!(e&&e.data&&e.data.symbol))return null;switch(e.data.symbol.type){case"CIMPointSymbol":case"CIMTextSymbol":return"esriGeometryPoint";case"CIMLineSymbol":return"esriGeometryPolyline";case"CIMPolygonSymbol":return"esriGeometryPolygon";default:return null}}function w(e,t,r,a){let i,s;if("function"==typeof e.materialHash){i=(0,e.materialHash)(t,r,a),s=l(e.cim,e.materialOverrides)}else i=e.materialHash,s=e.cim;return{analyzedCIM:s,hash:i}}export{z as CIMSymbolRasterizer,M as GeometryStyle};