TextOverlayItem.js 4.3 KB

12345
  1. /*
  2. All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  3. See https://js.arcgis.com/4.25/esri/copyright.txt for details.
  4. */
  5. import{_ as t}from"../../chunks/tslib.es6.js";import e from"../../Color.js";import o from"../../core/Accessor.js";import{property as i}from"../../core/accessorSupport/decorators/property.js";import"../../core/arrayUtils.js";import"../../core/accessorSupport/ensureType.js";import{subclass as r}from"../../core/accessorSupport/decorators/subclass.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{constructor(t){super(t),this.x=0,this.y=0,this.text="-",this.fontSize=14,this.anchor="center",this.visible=!0,this.backgroundColor=new e([0,0,0,.6]),this.textColor=new e([255,255,255]),this._textShadowSize=1}get position(){return[this.x,this.y]}set position(t){this._set("x",t[0]),this._set("y",t[1])}get _textShadowColor(){return this.backgroundColor}get _textShadow(){const t=this._textShadowColor.toCss(!1);return`0 0 ${this._textShadowSize}px ${t}`}get _padding(){return.5*this.fontSize}get _borderRadius(){return this._padding}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 o=this._padding,i=this._borderRadius,r=t.measureText(this.text).width,s=this.fontSize,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,p=this.y+l.y*a;this._roundedRect(t,x,p,n,a,i),t.fillStyle=this.backgroundColor.toCss(!0),t.fill();const d=this.x+(l.x+.5)*n,c=this.y+(l.y+.5)*a;this._renderTextShadow(t,this.text,d,c),t.fillStyle=this.textColor.toCss(!0),t.fillText(this.text,d,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){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};for(const 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,"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)])}const x=n;export{x as default};