leafer-x-tooltip/dist/index.min.cjs

leafer tooltip plugin

"use strict";var t=require("@leafer-ui/core");const e="leafer-x-tooltip",i="data-lxt-id";function o(t,i){if(t)throw new Error(`[${e}]: ${i}`)}function s(t){return document.querySelector(`[${i}=${t}]`)}function n(t,i,o){let s=o;s&&o instanceof HTMLStyleElement||(s=document.createElement("style"),s.setAttribute(e,""),document.head.appendChild(s));let n="string"==typeof i?i:"";return"object"==typeof i&&Object.keys(i).forEach((t=>{var e;n+=`${e=t,e.replace(/([A-Z])/g,"-$1").toLowerCase()}: ${i[t]};`})),s.sheet?s.sheet.insertRule(`${t} { ${n} }`,0):s.appendChild(document.createTextNode(n)),s}exports.TooltipPlugin=class{constructor(t,e){this.app=t,this.config=e,this.config.triggerType||(this.config.triggerType="hover"),this.domId=`lxt--${function(t=8){return Math.random().toString(36).slice(2,t+2)}(8)}`,this.bindEventIds=[],this.initEvent(),this.initCssClass(),this.initCreateTooltip(),this._moveTooltip=t=>this.moveTooltip(t),this._hideTooltip=()=>this.hideTooltip()}initEvent(){const e=[];let i=t.PointerEvent.MOVE,o=this.leaferPointMove;"click"===this.config.triggerType&&(i=t.PointerEvent.CLICK,o=this.leaferPointClick);const s=this.app.on_(i,o,this);e.push(s);const n=this.app.on_(t.LeaferEvent.VIEW_READY,this.viewReadyEvent,this);e.push(n),this.bindEventIds.push(...e)}shouldShowTooltip(t,e){if(!t||t.isLeafer||t.isApp)return this.hideTooltip(),!1;const i=(o=this.config.includeTypes,s=t.tag,!Array.isArray(o)||0===o.length||o.includes(s));var o,s;const n=function(t,e){return!!Array.isArray(t)&&0!==t.length&&t.includes(e)}(this.config.excludeTypes,t.tag),r=!this.config.shouldBegin||this.config.shouldBegin(e);return!(!i||n||!r)||(this.hideTooltip(),!1)}leaferPointMove(t){const e=t.target;this.activeNode!==e&&this.shouldShowTooltip(e,t)&&(this.activeNode=e)}leaferPointClick(t){const e=t.target;this.shouldShowTooltip(e,t)&&(this.activeNode!==e?(this.activeNode=e,this.app.view instanceof HTMLElement&&this.moveTooltip(t)):this.hideTooltip())}viewReadyEvent(){var t;this.app.view instanceof HTMLElement&&(o(void 0===(null===(t=this.app.view)||void 0===t?void 0:t.addEventListener),"leafer.view 加载失败！"),"hover"===this.config.triggerType&&(this.app.view.addEventListener("mousemove",this._moveTooltip),this.app.view.addEventListener("mouseleave",this._hideTooltip)))}initCssClass(){if(this.styleSheetElement)return;const t=document.querySelector(`.${e}`);this.styleSheetElement=t||n(`.${e}`,{border:"none",borderRadius:"6px",padding:"10px 14px",backgroundColor:"rgba(255, 255, 255, 0.95)",color:"#333",fontSize:"13px",fontWeight:"400",boxShadow:"0 3px 14px rgba(0, 0, 0, 0.15)",backdropFilter:"blur(8px)",transition:"opacity,top, left 0.2s ease-in-out"})}initCreateTooltip(){let t=s(this.domId);const o=null!==t;return o||(t=document.createElement("div")),t.setAttribute(i,this.domId),t.style.display="none",this.config.className?t.className=this.config.className:o||(t.className=e),o||document.body.appendChild(t),t}hideTooltip(){this.activeNode=null;const t=s(this.domId);t&&(t.style.display="none")}calculateTooltipPosition(e,i){const o=window.innerWidth,s=window.innerHeight,n=window.scrollX,r=window.scrollY;let l=0,h=0;e instanceof t.PointerEvent?(l=e.origin.x+n,h=e.origin.y+r):e instanceof MouseEvent?(l=e.clientX+n,h=e.clientY+r):(l=e.x+n,h=e.y+r);const a=i.offsetWidth,d=i.offsetHeight,c=this.getOffset();let p=l+c.x,v=h+c.y;return p+a>o+n&&(p=l-a-c.x),v+d>s+r&&(v=h-d-c.y),{x:p,y:v}}getTooltipContent(){const t=typeof this.config.getContent;o("function"!==t,`getContent 为必传参数，且必须是一个函数，当前为：${t} 类型`);const e=this.config.getContent(this.activeNode);return o(null==e||""===e,"getContent 返回值不能为空"),e}moveTooltip(t){if(null===this.activeNode)return;let e=s(this.domId);e||(e=this.initCreateTooltip()),e.innerHTML=this.getTooltipContent();const{x:i,y:o}=this.calculateTooltipPosition(t,e);var n,r;n=e,r={display:"block",position:"absolute",left:`${i}px`,top:`${o}px`},requestAnimationFrame((()=>{Object.entries(r).forEach((([t,e])=>{n.style[t]=e}))}))}getDomId(){return this.domId}getOffset(){const t=this.config.offset;if("number"==typeof t)return{x:t,y:t};if(Array.isArray(t)){const[e,i]=t;return{x:e,y:i}}return"object"==typeof t?t:{x:6,y:6}}createStyleRule(t,e){n(`${t}[${i}=${this.domId}]`,e,this.styleSheetElement)}removeStyleRule(t){const e=this.styleSheetElement.sheet;if(!e)return;const i=this.findStyleRuleIndex(t);-1!==i&&e.deleteRule(i)}findStyleRuleIndex(t){const e=this.styleSheetElement.sheet;if(!e)return-1;const o=e.cssRules,s=`${t}[${i}=${this.domId}]`;for(let t=0;t<o.length;t++){if(o[t].selectorText===s)return t}return-1}addClass(t){const e=s(this.domId);e&&(Array.isArray(t)?t.forEach((t=>e.classList.add(t))):e.classList.add(t))}removeClass(t){const e=s(this.domId);e&&(Array.isArray(t)?t.forEach((t=>e.classList.remove(t))):e.classList.remove(t))}destroy(){this.app.off_(this.bindEventIds),this.bindEventIds.length=0,this.app.view instanceof HTMLElement&&(this.app.view.removeEventListener("mousemove",this._moveTooltip),this.app.view.removeEventListener("mouseleave",this._hideTooltip)),this.activeNode=null;const t=s(this.domId);t&&t.parentNode&&t.parentNode.removeChild(t)}setTriggerType(t){if(this.config.triggerType===t)return;const e=this.config.triggerType;this.app.off_(this.bindEventIds),this.bindEventIds.length=0,this.config.triggerType=t,this.initEvent(),this.app.view instanceof HTMLElement&&("click"===t&&"hover"===e?(this.app.view.removeEventListener("mousemove",this._moveTooltip),this.app.view.removeEventListener("mouseleave",this._hideTooltip)):"hover"===t&&"click"===e&&(this.app.view.addEventListener("mousemove",this._moveTooltip),this.app.view.addEventListener("mouseleave",this._hideTooltip))),this.hideTooltip()}};