@arcgis/core/views/interactive/Tooltip.js

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

/*
All material copyright ESRI, All Rights Reserved, unless otherwise specified.
See https://js.arcgis.com/4.33/esri/copyright.txt for details.
*/
import{_ as t}from"../../chunks/tslib.es6.js";import e from"../../core/Evented.js";import{on as o}from"../../core/events.js";import{destroyMaybe as n}from"../../core/maybe.js";import{watch as i,when as s,syncAndInitial as r,initial as c,sync as l}from"../../core/reactiveUtils.js";import{cloneScreenPoint as a,createScreenPoint as p}from"../../core/screenUtils.js";import{property as u}from"../../core/accessorSupport/decorators/property.js";import"../../core/has.js";import"../../core/Logger.js";import"../../core/RandomLCG.js";import{subclass as h}from"../../core/accessorSupport/decorators/subclass.js";import{setCalciteModeClass as f}from"../../support/modeUtils.js";import{base as d}from"./tooltip/css.js";import{tooltipContentFactory as m}from"./tooltip/content/tooltipContentFactory.js";import{isRTL as v}from"../../widgets/support/widgetUtils.js";const y={base:`${d}`,ltr:`${d}--ltr`,rtl:`${d}--rtl`,debug:`${d}--debug`},g=20,_=16,C="bottom-end";let b=class extends e.EventedAccessor{constructor(t){super(t),this.info=null,this.options=null,this.position=null,this.content=null,this._focused=!1,this.outerContainer=document.createElement("div"),this.debug=!1,this._lastPosition=null,this._rtl=!1,this._prevXY=[0,0]}initialize(){const{outerContainer:t}=this;this.addHandles([i((()=>this.view.overlay?.surface),(e=>{t.remove(),e?.appendChild(t),this._rtl=v(e)}),r),i((()=>this.info),((e,o)=>{if(null!=this.content&&null!=e&&null!=o&&e.type===o.type)this.content.info=e;else{n(this.content);const o=m(this,e);o?(this.content=o,o.container&&t.appendChild(o.container),this.exitInputMode()):this.content=null}}),r),i((()=>({container:this.outerContainer,style:this._outerContainerStyle})),(({container:t,style:e})=>{Object.assign(t.style,e)}),c),i((()=>({outerContainer:this.outerContainer,placement:this.effectivePlacement,effectiveOffset:this._effectiveOffset,rtl:this._rtl,debug:this.debug})),(({outerContainer:t,placement:e,effectiveOffset:o,rtl:n,debug:i})=>{const{classList:s}=t;s.add(y.base),s.toggle(y.rtl,n),s.toggle(y.ltr,!n),s.toggle(y.debug,i),this.outerContainer.style.setProperty("--offset",`${o}px`),f(t),w(t,e)}),c),s((()=>"feedback"===this.mode),(()=>{this.position=null,this._clearOverride("effectivePlacement")}),l),o(this.outerContainer,"paste",(t=>{this.emit("paste",t)})),o(this.outerContainer,["focusin","focusout"],(()=>{this._focused=this.content?.container?.contains(document.activeElement)??!1}))])}destroy(){this.info=null,this.content=n(this.content),this.outerContainer.remove()}get mode(){return this.content?.mode??"feedback"}get focused(){return this._focused}get visible(){return"none"!==this._outerContainerStyle.display}get contentContainer(){return this.content?.container}get effectivePlacement(){const t=this.options?.placement;return"auto"===t?"bottom-end":t??C}get _screenPoint(){const{inputManager:t}=this.view;return t?.multiTouchActive?null:t?.latestPointerLocation}get _effectiveOffset(){return this.options?.offset??g}get _outerContainerStyle(){const t=this.position??this._screenPoint;if(this._lastPosition=a(t),null!=t&&null!=this.content){return{display:"block",transform:`translate(${Math.round(t.x)}px, ${Math.round(t.y)}px)`}}return{display:"none",transform:"none"}}clear(){this.info=null}async enterInputMode(t){const e=this.position??this._lastPosition??this._screenPoint,o=this.position=a(e),{effectivePlacement:n}=this;this._override("effectivePlacement",n);const i=()=>{o&&(this.position=j(this.contentContainer,o,this._effectiveOffset,this.view),Object.assign(this.outerContainer.style,this._outerContainerStyle))};await(this.content?.enterInputMode(t,i))}async exitInputMode(t){await(this.content?.exitInputMode(t))}onDragStart(t,e){this._prevXY=[t,e]}onDrag(t,e){const o=t-this._prevXY[0],n=e-this._prevXY[1];this._prevXY=[t,e];const{position:i}=this;if(i){const{view:s}=this,r=t-s.position[0],c=e-s.position[1];if(r<0||r>s.width||c<0||c>s.height-_)return;this.position=p(i.x+o,i.y+n)}}onDragEnd(){this._prevXY=[0,0]}};function j(t,e,o,n){if(!t||!n.container)return e;const i=t.getBoundingClientRect(),{left:s,top:r}=n.container.getBoundingClientRect();let{x:c,y:l}=e;const a=i.left-s-o;a<0&&(c-=a);const u=i.right-s+o-n.width;u>0&&(c-=u);const h=i.top-r-o;h<0&&(l-=h);const f=i.bottom-r+o-n.height;return f>0&&(l-=f),p(c,l)}t([u({nonNullable:!0})],b.prototype,"view",void 0),t([u()],b.prototype,"info",void 0),t([u()],b.prototype,"options",void 0),t([u()],b.prototype,"position",void 0),t([u()],b.prototype,"content",void 0),t([u({readOnly:!0})],b.prototype,"mode",null),t([u()],b.prototype,"_focused",void 0),t([u({readOnly:!0})],b.prototype,"focused",null),t([u({readOnly:!0})],b.prototype,"outerContainer",void 0),t([u({readOnly:!0})],b.prototype,"contentContainer",null),t([u({readOnly:!0})],b.prototype,"effectivePlacement",null),t([u()],b.prototype,"debug",void 0),t([u()],b.prototype,"_lastPosition",void 0),t([u()],b.prototype,"_screenPoint",null),t([u()],b.prototype,"_rtl",void 0),t([u()],b.prototype,"_effectiveOffset",null),t([u()],b.prototype,"_outerContainerStyle",null),b=t([h("esri.views.interactive.Tooltip")],b);const P=["top","bottom","leading","trailing"].flatMap((t=>[O(`${t}-start`),O(t),O(`${t}-end`)]));function O(t){return`${y.base}--${t}`}function w({classList:t},e){P.forEach((e=>t.remove(e))),t.add(O(e))}const x=b;export{x as default};