@arcgis/core/views/overlay/TextOverlayItem.js

ArcGIS Maps SDK for JavaScript: A complete 2D and 3D mapping and data visualization API

/* COPYRIGHT Esri - https://js.arcgis.com/5.0.8/LICENSE.txt */
import{__decorate as t}from"tslib";import e from"../../Color.js";import o from"../../core/Accessor.js";import{property as i,subclass as r}from"../../core/accessorSupport/decorators.js";import"../../libs/maquette/projection.js";import{h as s}from"../../libs/maquette/h.js";import"../../libs/maquette/projector.js";const l={bottom:"esri-text-overlay-item-anchor-bottom","bottom-right":"esri-text-overlay-item-anchor-bottom-right","bottom-left":"esri-text-overlay-item-anchor-bottom-left",top:"esri-text-overlay-item-anchor-top","top-right":"esri-text-overlay-item-anchor-top-right","top-left":"esri-text-overlay-item-anchor-top-left",center:"esri-text-overlay-item-anchor-center",right:"esri-text-overlay-item-anchor-right",left:"esri-text-overlay-item-anchor-left"};let n=class extends o{get position(){return[this.x,this.y]}set position(t){this._set("x",t[0]),this._set("y",t[1])}get _textShadowColor(){const{textColor:t,backgroundColor:e}=this,o=e.clone();return o.a*=t.a,o}get _textShadow(){const t=this._textShadowColor.toCss(!0);return`0 0 ${this._textShadowSize}px ${t}`}get padding(){return.5*this.fontSize}get borderRadius(){return this.padding}set borderRadius(t){this._overrideIfSome("borderRadius",t)}constructor(t){super(t),this.x=0,this.y=0,this.text="-",this.fontSize=14,this.anchor="center",this.visible=!0,this.isDecoration=!0,this.backgroundColor=new e([0,0,0,.6]),this.textColor=new e([255,255,255]),this._textShadowSize=1}render(){return s("div",{classes:this._cssClasses(),styles:{left:Math.floor(this.x)+"px",top:Math.floor(this.y)+"px",visibility:this.visible?"visible":"hidden",fontSize:this.fontSize+"px",lineHeight:this.fontSize+"px",backgroundColor:this.backgroundColor.toCss(!0),color:this.textColor.toCss(!0),padding:this.padding+"px",borderRadius:this.borderRadius+"px",textShadow:this._textShadow}},[this.text])}renderCanvas(t){if(!this.visible)return;const e=t.font.replace(/^(.*?)px/,"");t.font=`${this.fontSize}px ${e}`;const{padding:o,borderRadius:i}=this,r=t.measureText(this.text).width,s=""!==this.text?this.fontSize:0,l=h[this.anchor];t.textAlign="center",t.textBaseline="middle";const n=r+2*o,a=s+2*o,x=this.x+l.x*n,d=this.y+l.y*a;this._roundedRect(t,x,d,n,a,i),t.fillStyle=this.backgroundColor.toCss(!0),t.fill();const p=this.x+(l.x+.5)*n,c=this.y+(l.y+.5)*a;this._renderTextShadow(t,this.text,p,c),t.fillStyle=this.textColor.toCss(!0),t.fillText(this.text,p,c)}_renderTextShadow(t,e,o,i){t.lineJoin="miter",t.fillStyle=`rgba(${this._textShadowColor.r}, ${this._textShadowColor.g}, ${this._textShadowColor.b}, ${1/a.length})`;const r=this._textShadowSize;for(const[s,l]of a)t.fillText(e,o+r*s,i+r*l)}_roundedRect(t,e,o,i,r,s){s=Math.min(s,r/2,i/2),t.beginPath(),t.moveTo(e,o+s),t.arcTo(e,o,e+s,o,s),t.lineTo(e+i-s,o),t.arcTo(e+i,o,e+i,o+s,s),t.lineTo(e+i,o+r-s),t.arcTo(e+i,o+r,e+i-s,o+r,s),t.lineTo(e+s,o+r),t.arcTo(e,o+r,e,o+r-s,s),t.closePath()}_cssClasses(){const t={"esri-text-overlay-item":!0};let e;for(e in l)t[l[e]]=this.anchor===e;return t}};t([i()],n.prototype,"x",void 0),t([i()],n.prototype,"y",void 0),t([i()],n.prototype,"position",null),t([i()],n.prototype,"text",void 0),t([i()],n.prototype,"fontSize",void 0),t([i()],n.prototype,"anchor",void 0),t([i()],n.prototype,"visible",void 0),t([i()],n.prototype,"isDecoration",void 0),t([i()],n.prototype,"backgroundColor",void 0),t([i()],n.prototype,"textColor",void 0),t([i()],n.prototype,"_textShadowSize",void 0),t([i()],n.prototype,"_textShadowColor",null),t([i()],n.prototype,"_textShadow",null),t([i()],n.prototype,"padding",null),t([i()],n.prototype,"borderRadius",null),n=t([r("esri.views.overlay.TextOverlayItem")],n);const h={bottom:{x:-.5,y:-1,textAlign:"center",textBaseline:"bottom"},"bottom-left":{x:0,y:-1,textAlign:"left",textBaseline:"bottom"},"bottom-right":{x:-1,y:-1,textAlign:"right",textBaseline:"bottom"},center:{x:-.5,y:-.5,textAlign:"center",textBaseline:"middle"},left:{x:0,y:-.5,textAlign:"left",textBaseline:"middle"},right:{x:-1,y:-.5,textAlign:"right",textBaseline:"middle"},top:{x:-.5,y:0,textAlign:"center",textBaseline:"top"},"top-left":{x:0,y:0,textAlign:"left",textBaseline:"top"},"top-right":{x:-1,y:0,textAlign:"right",textBaseline:"top"}},a=[];{const t=16;for(let e=0;e<360;e+=360/t)a.push([Math.cos(Math.PI*e/180),Math.sin(Math.PI*e/180)])}export{n as default};