terra-draw-mapbox-gl-adapter/dist/terra-draw-mapbox-gl-adapter.modern.js

Terra Draw Adapter for Mapbox GL JS

import{TerraDrawExtend as e}from"terra-draw";function t(){return t=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];for(var r in i)({}).hasOwnProperty.call(i,r)&&(e[r]=i[r])}return e},t.apply(null,arguments)}class i extends e.TerraDrawBaseAdapter{constructor(e){super(e),this._renderBeforeLayerId=void 0,this._prefixId=void 0,this._initialDragPan=void 0,this._initialDragRotate=void 0,this._nextRender=void 0,this._map=void 0,this._container=void 0,this.markerCounter=0,this.markerMap=new Map,this.changedIds={deletion:!1,points:!1,linestrings:!1,polygons:!1,styling:!1},this._map=e.map,this._container=this._map.getContainer(),this._initialDragRotate=this._map.dragRotate.isEnabled(),this._initialDragPan=this._map.dragPan.isEnabled(),this._renderBeforeLayerId=e.renderBelowLayerId,this._prefixId=e.prefixId||"td"}toGlDashArrayFromPixels(e,t){if(!e)return null;const[i,r]=e;if(!Number.isFinite(i)||!Number.isFinite(r)||i<0||r<0)return null;const a=Math.max(1e-4,t);return[i/a,r/a]}resizeImage(e,t,i,r){const a=new Image;a.crossOrigin="anonymous",a.onload=()=>{const e=document.createElement("canvas");e.width=t,e.height=i;const n=e.getContext("2d");if(!n)throw new Error("Could not get canvas context");n.drawImage(a,0,0,t,i);const o=e.toDataURL();r(o)},a.src=e}_addGeoJSONSource(e,t){this._map.addSource(e,{type:"geojson",data:{type:"FeatureCollection",features:t},tolerance:0})}_addFillLayer(e){return this._map.addLayer({id:e,source:e,type:"fill",layout:{"fill-sort-key":["get","zIndex"]},paint:{"fill-color":["get","polygonFillColor"],"fill-opacity":["get","polygonFillOpacity"]}})}_addFillOutlineLayer(e){return this._map.addLayer({id:e+"-outline",source:e,type:"line",layout:{"line-sort-key":["get","zIndex"]},paint:{"line-width":["get","polygonOutlineWidth"],"line-color":["get","polygonOutlineColor"],"line-opacity":["get","polygonOutlineOpacity"]}})}_addLineLayer(e){return this._map.addLayer({id:e,source:e,type:"line",layout:{"line-sort-key":["get","zIndex"]},paint:t({},{"line-dasharray":["coalesce",["get","lineStringDash"],["literal",[]]]},{"line-width":["get","lineStringWidth"],"line-color":["get","lineStringColor"],"line-opacity":["get","lineStringOpacity"]})})}_addPointLayer(e){return this._map.addLayer({id:e,source:e,type:"circle",layout:{"circle-sort-key":["get","zIndex"]},paint:{"circle-stroke-color":["get","pointOutlineColor"],"circle-stroke-width":["get","pointOutlineWidth"],"circle-stroke-opacity":["get","pointOutlineOpacity"],"circle-radius":["get","pointWidth"],"circle-color":["get","pointColor"],"circle-opacity":["get","pointOpacity"]}})}_addMarkerLayer(e){return this._map.addLayer({id:e+"-marker",source:e,type:"symbol",filter:["has","markerId"],layout:{"icon-image":["get","markerId"],"icon-anchor":"bottom","icon-allow-overlap":!0}})}_addLayer(e,t){"Point"===t&&(this._addPointLayer(e),this._addMarkerLayer(e)),"LineString"===t&&this._addLineLayer(e),"Polygon"===t&&(this._addFillLayer(e),this._addFillOutlineLayer(e))}_addGeoJSONLayer(e,t){const i=`${this._prefixId}-${e.toLowerCase()}`;return this._addGeoJSONSource(i,t),this._addLayer(i,e),i}_setGeoJSONLayerData(e,t){const i=`${this._prefixId}-${e.toLowerCase()}`;return this._map.getSource(i).setData({type:"FeatureCollection",features:t}),i}updateChangedIds(e){[...e.updated,...e.created].forEach(e=>{"Point"===e.geometry.type?this.changedIds.points=!0:"LineString"===e.geometry.type?this.changedIds.linestrings=!0:"Polygon"===e.geometry.type&&(this.changedIds.polygons=!0)}),e.deletedIds.length>0&&(this.changedIds.deletion=!0),0===e.created.length&&0===e.updated.length&&0===e.deletedIds.length&&(this.changedIds.styling=!0)}getLngLatFromEvent(e){const{left:t,top:i}=this._container.getBoundingClientRect();return this.unproject(e.clientX-t,e.clientY-i)}getMapEventElement(){return this._map.getCanvas()}setDraggability(e){e?(this._initialDragRotate&&this._map.dragRotate.enable(),this._initialDragPan&&this._map.dragPan.enable()):(this._initialDragRotate&&this._map.dragRotate.disable(),this._initialDragPan&&this._map.dragPan.disable())}project(e,t){const{x:i,y:r}=this._map.project({lng:e,lat:t});return{x:i,y:r}}unproject(e,t){const{lng:i,lat:r}=this._map.unproject({x:e,y:t});return{lng:i,lat:r}}setCursor(e){const t=this._map.getCanvas();"unset"===e?t.style.removeProperty("cursor"):t.style.cursor=e}setDoubleClickToZoom(e){e?this._map.doubleClickZoom.enable():this._map.doubleClickZoom.disable()}render(e,t){this.updateChangedIds(e),this._nextRender&&cancelAnimationFrame(this._nextRender),this._nextRender=requestAnimationFrame(()=>{const i=[...e.created,...e.updated,...e.unchanged],r=[],a=[],n=[];for(let e=0;e<i.length;e++){const o=i[e],{properties:s}=o,l=t[s.mode](o);if(s.zIndex=l.zIndex,"Point"===o.geometry.type){const e=l.pointOpacity,t=l.pointOutlineOpacity;if(s.pointColor=l.pointColor,s.pointOutlineColor=l.pointOutlineColor,s.pointOutlineWidth=l.pointOutlineWidth,s.pointOutlineOpacity=void 0===t?1:t,s.pointWidth=l.pointWidth,s.pointOpacity=void 0===e?1:e,l.markerUrl&&l.markerWidth&&l.markerHeight&&!this.markerMap.has(l.markerUrl)){const e="marker-"+this.markerCounter++;this.resizeImage(l.markerUrl,l.markerWidth,l.markerHeight,t=>{this._map.loadImage(t,(t,i)=>{i&&!t?(this._map.addImage(e,i),this._map.setLayoutProperty(`${this._prefixId}-point-marker`,"icon-image",e)):console.error(`Error loading marker image: ${l.markerUrl}`,t)})}),this.markerMap.set(l.markerUrl,e),s.markerId=e,s.pointWidth=0}else l.markerUrl&&this.markerMap.has(l.markerUrl)&&(s.markerId=this.markerMap.get(l.markerUrl),s.pointWidth=0);r.push(o)}else if("LineString"===o.geometry.type){s.lineStringDash=this.toGlDashArrayFromPixels(l.lineStringDash,l.lineStringWidth),s.lineStringColor=l.lineStringColor,s.lineStringWidth=l.lineStringWidth;const e=l.lineStringOpacity;s.lineStringOpacity=void 0===e?1:e,a.push(o)}else if("Polygon"===o.geometry.type){const e=l.polygonOutlineOpacity;s.polygonFillColor=l.polygonFillColor,s.polygonFillOpacity=l.polygonFillOpacity,s.polygonOutlineOpacity=void 0===e?1:e,s.polygonOutlineColor=l.polygonOutlineColor,s.polygonOutlineWidth=l.polygonOutlineWidth,n.push(o)}}const o=this.changedIds.deletion||this.changedIds.styling,s=o||this.changedIds.linestrings,l=o||this.changedIds.polygons;(o||this.changedIds.points)&&this._setGeoJSONLayerData("Point",r),s&&this._setGeoJSONLayerData("LineString",a),l&&this._setGeoJSONLayerData("Polygon",n),this.changedIds={points:!1,linestrings:!1,polygons:!1,deletion:!1,styling:!1}})}clear(){this._currentModeCallbacks&&(this._currentModeCallbacks.onClear(),this._nextRender&&(cancelAnimationFrame(this._nextRender),this._nextRender=void 0),this._setGeoJSONLayerData("Point",[]),this._setGeoJSONLayerData("LineString",[]),this._setGeoJSONLayerData("Polygon",[]))}getCoordinatePrecision(){return super.getCoordinatePrecision()}unregister(){super.unregister(),this._map.removeLayer(`${this._prefixId}-point`),this._map.removeLayer(`${this._prefixId}-point-marker`),this._map.removeSource(`${this._prefixId}-point`),this._map.removeLayer(`${this._prefixId}-linestring`),this._map.removeSource(`${this._prefixId}-linestring`),this._map.removeLayer(`${this._prefixId}-polygon`),this._map.removeLayer(`${this._prefixId}-polygon-outline`),this._map.removeSource(`${this._prefixId}-polygon`)}register(e){var t;super.register(e);const i=this._addGeoJSONLayer("Polygon",[]),r=this._addGeoJSONLayer("LineString",[]),a=this._addGeoJSONLayer("Point",[]);this._renderBeforeLayerId&&(this._map.moveLayer(a,this._renderBeforeLayerId),this._map.moveLayer(r,a),this._map.moveLayer(i+"-outline",r),this._map.moveLayer(i,r)),null!=(t=this._currentModeCallbacks)&&t.onReady&&this._currentModeCallbacks.onReady()}}export{i as TerraDrawMapboxGLAdapter};
//# sourceMappingURL=terra-draw-mapbox-gl-adapter.modern.js.map