@arcgis/core/views/interactive/tooltip/content/TooltipContent.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{prefersReducedMotion as e}from"../../../../core/a11yUtils.js";import{on as o}from"../../../../core/events.js";import"../../../../core/has.js";import{memoize as s}from"../../../../core/memoize.js";import{throwIfNotAbortError as i,throwIfAborted as n,after as r}from"../../../../core/promiseUtils.js";import{waitAnimationFrame as a,waitTick as l}from"../../../../core/scheduling.js";import{unitName as c}from"../../../../core/unitFormatUtils.js";import{defaultAreaUnit as p,defaultVerticalLengthUnit as d,defaultLengthUnit as u}from"../../../../core/unitUtils.js";import{property as h}from"../../../../core/accessorSupport/decorators/property.js";import"../../../../core/Logger.js";import"../../../../core/RandomLCG.js";import{subclass as m}from"../../../../core/accessorSupport/decorators/subclass.js";import{getDefaultUnitForView as f}from"../../../../support/getDefaultUnitForView.js";import{tooltipKeys as g}from"../../keybindings.js";import{table as _,contentHeader as y,contentHeaderSpacer as b,contentHeaderActions as v,contentInputMode as w,content as I,helpMessageText as j,helpMessageIcon as k,helpMessage as A,drawContentHeaderActions as C}from"../css.js";import{getFormatters as U}from"../fields/parsingAndFormattingUtils.js";import M from"../../../../widgets/Widget.js";import{loadCalciteComponents as D}from"../../../../widgets/support/componentsUtils.js";import{classes as F}from"../../../../widgets/support/widgetUtils.js";import{messageBundle as x}from"../../../../widgets/support/decorators/messageBundle.js";import{tsx as T,tsxFragment as H}from"../../../../widgets/support/jsxFactory.js";const E=Symbol("dragHandles");let S=class extends M{constructor(){super(...arguments),this._focusAbortController=new AbortController,this._transitionInfo=null,this._mode="feedback",this._getFormatters=s(U),this._onHeaderPointerDown=t=>{const e=t.target;e instanceof HTMLElement&&"calcite-button"!==e?.tagName?.toLowerCase()&&(this.removeHandles(E),t.preventDefault(),t.stopPropagation(),e.setPointerCapture(t.pointerId),this.tooltip.onDragStart(t.clientX,t.clientY),this.addHandles([o(e,"pointermove",(({clientX:t,clientY:e})=>{this.tooltip.onDrag(t,e)})),o(e,["pointerup","pointercancel"],(o=>{this.removeHandles(E),e.releasePointerCapture(t.pointerId),this.tooltip.onDragEnd()})),o(e,"touchstart",(t=>t.preventDefault()))],E))},this._onDiscard=()=>{this.destroyed||(this.tooltip.emit("discard"),this.info.clearInputValues(),this.exitInputMode())},this._onCommit=(t,e)=>{if(this.destroyed)return;if(this.tooltip.emit("commit",{type:e}),"commit-and-exit"===e)return void this.exitInputMode();if("commit-on-blur"===e)return;const o=this._getFocusableElements(),s=o.length,i=o.indexOf(t);if(-1===i)return void this.exitInputMode();const n=((i+("commit-and-next"===e?1:-1))%s+s)%s;L(o.at(n))},this._onKeyDown=t=>{switch(t.code){case g.next:return this._onNextKey(t);case g.discard:return t.stopPropagation(),this._onDiscard()}}}get mode(){return this._mode}get _displayUnits(){const{displayUnits:t}=this.info.sketchOptions.values,e=f(this.tooltip.view);return{length:t.length??e,verticalLength:t.verticalLength??e,area:t.area??e}}get _inputUnitInfos(){const t=this._messagesUnits,e=e=>({unit:e,abbreviation:c(t,e,"abbr")}),{inputUnits:o}=this.info.sketchOptions.values,s=f(this.tooltip.view),i=o.length??s,n=o.verticalLength??s,r=o.area??s;return{length:e(u(i)),verticalLength:e(d(n)),area:e(p(r)),angle:e("degrees")}}get _formatters(){return this._getFormatters(this._messagesUnits,this._displayUnits)}get fieldContext(){return{formatters:this._formatters,inputUnitInfos:this._inputUnitInfos,messages:this._messagesTooltip,sketchOptions:this.info.sketchOptions,onCommit:this._onCommit,onDiscard:this._onDiscard}}render(){const{visibleElements:t}=this.info.sketchOptions.tooltips,e=this._renderedContent,o=this._renderedActions,s=this._renderedHelpMessage,i=e.length>0,n=i||!!s,r="input"===this.mode;return T("div",{class:F(I,r&&w),onkeydown:this._onKeyDown,tabIndex:-1},r&&n&&t.header?T("div",{class:y,"data-testid":"tooltip-header",key:"header",onpointerdown:this._onHeaderPointerDown},T("calcite-button",{appearance:"transparent","data-testid":"tooltip-back-button",iconFlipRtl:"both",iconStart:"chevron-left",key:"discard-button",kind:"neutral",onclick:this._onDiscard,scale:"s",tabIndex:-1}),o.length>0?T(H,null,T("div",{class:b,key:"spacer"}),T("div",{class:v,key:"actions"},o)):null):null,i?T("div",{class:_,key:"content"},...e):null,s)}destroy(){this._focusAbortController.abort(),this._transitionInfo?.transition.skipTransition()}_renderActions(){return null}loadDependencies(){return D({button:()=>import("@esri/calcite-components/dist/components/calcite-button"),icon:()=>import("@esri/calcite-components/dist/components/calcite-icon"),input:()=>import("@esri/calcite-components/dist/components/calcite-input")})}async enterInputMode(t,e){try{await this._transitionTo("input",e),await this._focusField(t)}catch(o){i(o)}}async exitInputMode({focusOnView:t=!0}={}){try{const{container:e,info:o}=this;o.clearInputValues();const s=t?e?.closest(".esri-view")?.querySelector(".esri-view-surface"):null;await this._transitionTo("feedback"),s instanceof HTMLElement&&s.focus()}catch(e){i(e)}}_onNextKey(t){const e=this._getFocusableElements(),o=e.at(0),s=e.at(-1);o&&s&&(t.shiftKey?document.activeElement===o&&(t.preventDefault(),t.stopPropagation(),L(s)):document.activeElement===s&&(t.preventDefault(),t.stopPropagation(),L(o)))}get _renderedContent(){return N(this._renderContent())}get _renderedActions(){return N(this._renderActions())}get _renderedHelpMessage(){const{sketchOptions:t,visibleElements:e}=this.info;if(!e.helpMessage)return null;const o=t.tooltips.helpMessage??this._defaultHelpMessage;if(!o)return null;const s=t.tooltips.helpMessageIcon??"information";return T("div",{class:A,key:"help-message"},s?T("calcite-icon",{class:k,icon:s,scale:"s"}):null,T("div",{class:j},o))}get _defaultHelpMessage(){const{helpMessage:t,viewType:e}=this.info;if(null==t)return null;const o="3d"===e?"helpMessages3d":"helpMessages2d";return this._messagesTooltip?.sketch?.[o]?.[t]}async _focusField(t){this._focusAbortController?.abort(),this._focusAbortController=new AbortController;const{signal:e}=this._focusAbortController;await this._waitForInputs(),n(e);const o=this._getFocusableInputs(),s=t?o.find((e=>e.getAttribute("data-field-name")===t)):o.at(0);await L(s)}async _transitionTo(t,o){if(this._mode===t&&!this._transitionInfo)return;if(this._transitionInfo?.mode===t)return this._transitionInfo.transition.finished;this._transitionInfo?.transition.skipTransition();const s=async()=>{this.destroyed||(this._mode=t,await l(),this.destroyed||(this.renderNow(),await l(),this.destroyed||o?.()))};if(!this.domNode?.firstChild||!document.startViewTransition||e())return void await s();this.autoRenderingEnabled=!1;const i=this._transitionInfo={transition:document.startViewTransition((async()=>{this.destroyed||i!==this._transitionInfo||(this.autoRenderingEnabled=!0,await s())})),mode:t};try{await i.transition.finished}finally{i===this._transitionInfo&&(this._transitionInfo=null)}}async _waitForInputs(){const t=()=>Array.from(this.domNode?.querySelectorAll("calcite-input")??[]);for(;0===t().length;)await r(O);await a()}_getFocusableInputs(){return Array.from(this.domNode?.querySelectorAll("calcite-input:not([read-only]):not([disabled])")??[])}_getFocusableElements(){const t=this.domNode?.querySelector(`.${C}`);return[...Array.from(t?.querySelectorAll(`.${v} calcite-button:not([disabled])`)??[]),...this._getFocusableInputs()]}};async function L(t){await(t?.setFocus())}function N(t){return(Array.isArray(t)?t:[t]).flat(10).filter((t=>!!t))}t([x("esri/core/t9n/Units"),h()],S.prototype,"_messagesUnits",void 0),t([x("esri/views/interactive/tooltip/t9n/Tooltip"),h()],S.prototype,"_messagesTooltip",void 0),t([h()],S.prototype,"info",void 0),t([h()],S.prototype,"tooltip",void 0),t([h()],S.prototype,"_mode",void 0),t([h()],S.prototype,"mode",null),t([h()],S.prototype,"_displayUnits",null),t([h()],S.prototype,"_inputUnitInfos",null),t([h()],S.prototype,"_formatters",null),t([h()],S.prototype,"fieldContext",null),t([h()],S.prototype,"_renderedContent",null),t([h()],S.prototype,"_renderedActions",null),t([h()],S.prototype,"_renderedHelpMessage",null),t([h()],S.prototype,"_defaultHelpMessage",null),S=t([m("esri.views.interactive.tooltip.content.TooltipContent")],S);const O=20;export{S as TooltipContent};