@ifreeovo/highlight-dom/dist/umd/index.umd.js

实现类似dom-inspector的高亮效果

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).__HD__={})}(this,(function(t){function e(t,e,n,o){if("a"===n&&!o)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof e?t!==e||!o:!e.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===n?o:"a"===n?o.call(t):o?o.value:e.get(t)}"function"==typeof SuppressedError&&SuppressedError;const n=t=>null==t||"object"!=typeof t&&"function"!=typeof t,o=t=>!!(t&&t.constructor&&t.call&&t.apply),r=(t,...e)=>(...n)=>t(...e,...n);function i(t){return s(t)||a(t)}function s(t){return t instanceof HTMLElement}function a(t){return t instanceof SVGElement}function h(t){return i(t)&&"none"!==window.getComputedStyle(t).display&&p(t)}function l(t){const{scaleY:e}=f(t),{height:n}=t.getBoundingClientRect();return a(t)?n:t.offsetHeight*e}function c(t){const{scaleX:e}=f(t),{width:n}=t.getBoundingClientRect();return a(t)?n:t.offsetWidth*e}function p(t){const{left:e,right:n,top:o,bottom:r}=t.getBoundingClientRect(),i=c(t),s=l(t);return o>=-s&&e>=-i&&r<=window.innerHeight+s&&n<=window.innerWidth+i}function d(t,e){return e&&i(e)?e.querySelector(t):document.querySelector(t)}function u(t){t&&t.remove()}function g(){return Array.from(document.querySelectorAll("*")).reduce(((t,e)=>{let n=Number(window.getComputedStyle(e).zIndex);return n=Number.isNaN(n)?0:n,Math.max(t,n)}),0)}function f(t){var e;const{transform:n}=window.getComputedStyle(t);if(!n.startsWith("matrix"))return{scaleX:1,scaleY:1};const[o,,,r]=Array.from(null!==(e=n.replace(/matrix(3d)?/,"").match(/([0-9.]+)/g))&&void 0!==e?e:[]);return{scaleX:Number(o),scaleY:Number(r)}}function m(t,e){let n=0;const o=window.getComputedStyle(e),r=e.getBoundingClientRect(),i=window.innerHeight,s=window.innerWidth,{scaleX:h,scaleY:l}=f(e),c=r[t];if(a(e))switch(n=c,t){case"left":case"top":n=c;break;case"bottom":case"right":n=i-c}else switch(t){case"left":n=c-parseFloat(o.getPropertyValue(`margin-${t}`)||"0")*h;break;case"top":n=c-parseFloat(o.getPropertyValue(`margin-${t}`)||"0")*l;break;case"bottom":n=i-c-parseFloat(o.getPropertyValue(`margin-${t}`)||"0")*l;break;case"right":n=s-c-parseFloat(o.getPropertyValue(`margin-${t}`)||"0")*h}return n}const $=r(m,"left"),w=r(m,"top"),b=r(m,"bottom");function v(t){const e={},{scaleX:n,scaleY:o}=f(t),r=window.getComputedStyle(t);["borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","marginTop","marginRight","marginBottom","marginLeft","paddingTop","paddingRight","paddingBottom","paddingLeft"].forEach((t=>{const i=r[t].replace("px","");e[t]=t.includes("Top")||t.includes("Bottom")?(parseFloat(i)||0)*o:t.includes("Left")||t.includes("Right")?(parseFloat(i)||0)*n:parseFloat(i)||0}));const{width:i,height:s}=t.getBoundingClientRect(),h=a(t)?i:c(t)-e.borderLeftWidth-e.borderRightWidth-e.paddingLeft-e.paddingRight,p=a(t)?s:l(t)-e.borderTopWidth-e.borderBottomWidth-e.paddingTop-e.paddingBottom;return Object.assign(e,{contentWidth:h,contentHeight:p,top:w(t),left:$(t),bottom:b(t),id:t.id,tagName:t.tagName,classList:t.classList,isSVG:a(t)}),e}const y=["marginLeft","borderLeftWidth","paddingLeft","contentWidth","paddingRight","borderRightWidth","marginRight"],x=["marginTop","borderTopWidth","paddingTop","contentHeight","paddingBottom","borderBottomWidth","marginBottom"];function _(t,e){const n=x.findIndex((t=>t===e)),o=x.slice(0,n);if(0===o.length)return"0px";return`${o.reduce(((e,n)=>e+t[n]),0)}px`}function I(t,e){const n=y.findIndex((t=>t===e)),o=y.slice(0,n);if(0===o.length)return"0px";return`${o.reduce(((e,n)=>e+t[n]),0)}px`}function k(t,e){if(t.isSVG)return t.contentHeight;const n=x.findIndex((t=>t.startsWith(e))),o=x.findLastIndex((t=>t.startsWith(e)));return x.slice(n,o+1).reduce(((e,n)=>e+t[n]),0)}function T(t,e){if(t.isSVG)return t.contentWidth;const n=y.findIndex((t=>t.startsWith(e))),o=y.findLastIndex((t=>t.startsWith(e)));return y.slice(n,o+1).reduce(((e,n)=>e+t[n]),0)}var C="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},E={};E.deprecate=(t,e)=>function(){return t.apply(this,arguments)};const R=E.deprecate((()=>{}),"Hook.context is deprecated and will be removed"),M=function(...t){return this.call=this._createCall("sync"),this.call(...t)},B=function(...t){return this.callAsync=this._createCall("async"),this.callAsync(...t)},P=function(...t){return this.promise=this._createCall("promise"),this.promise(...t)};let D=class{constructor(t=[],e=void 0){this._args=t,this.name=e,this.taps=[],this.interceptors=[],this._call=M,this.call=M,this._callAsync=B,this.callAsync=B,this._promise=P,this.promise=P,this._x=void 0,this.compile=this.compile,this.tap=this.tap,this.tapAsync=this.tapAsync,this.tapPromise=this.tapPromise}compile(t){throw new Error("Abstract: should be overridden")}_createCall(t){return this.compile({taps:this.taps,interceptors:this.interceptors,args:this._args,type:t})}_tap(t,e,n){if("string"==typeof e)e={name:e.trim()};else if("object"!=typeof e||null===e)throw new Error("Invalid tap options");if("string"!=typeof e.name||""===e.name)throw new Error("Missing name for tap");void 0!==e.context&&R(),e=Object.assign({type:t,fn:n},e),e=this._runRegisterInterceptors(e),this._insert(e)}tap(t,e){this._tap("sync",t,e)}tapAsync(t,e){this._tap("async",t,e)}tapPromise(t,e){this._tap("promise",t,e)}_runRegisterInterceptors(t){for(const e of this.interceptors)if(e.register){const n=e.register(t);void 0!==n&&(t=n)}return t}withOptions(t){const e=e=>Object.assign({},t,"string"==typeof e?{name:e}:e);return{name:this.name,tap:(t,n)=>this.tap(e(t),n),tapAsync:(t,n)=>this.tapAsync(e(t),n),tapPromise:(t,n)=>this.tapPromise(e(t),n),intercept:t=>this.intercept(t),isUsed:()=>this.isUsed(),withOptions:t=>this.withOptions(e(t))}}isUsed(){return this.taps.length>0||this.interceptors.length>0}intercept(t){if(this._resetCompilation(),this.interceptors.push(Object.assign({},t)),t.register)for(let e=0;e<this.taps.length;e++)this.taps[e]=t.register(this.taps[e])}_resetCompilation(){this.call=this._call,this.callAsync=this._callAsync,this.promise=this._promise}_insert(t){let e;this._resetCompilation(),"string"==typeof t.before?e=new Set([t.before]):Array.isArray(t.before)&&(e=new Set(t.before));let n=0;"number"==typeof t.stage&&(n=t.stage);let o=this.taps.length;for(;o>0;){o--;const t=this.taps[o];this.taps[o+1]=t;const r=t.stage||0;if(e){if(e.has(t.name)){e.delete(t.name);continue}if(e.size>0)continue}if(!(r>n)){o++;break}}this.taps[o]=t}};Object.setPrototypeOf(D.prototype,null);var L=D;var W=class{constructor(t){this.config=t,this.options=void 0,this._args=void 0}create(t){let e;switch(this.init(t),this.options.type){case"sync":e=new Function(this.args(),'"use strict";\n'+this.header()+this.contentWithInterceptors({onError:t=>`throw ${t};\n`,onResult:t=>`return ${t};\n`,resultReturns:!0,onDone:()=>"",rethrowIfPossible:!0}));break;case"async":e=new Function(this.args({after:"_callback"}),'"use strict";\n'+this.header()+this.contentWithInterceptors({onError:t=>`_callback(${t});\n`,onResult:t=>`_callback(null, ${t});\n`,onDone:()=>"_callback();\n"}));break;case"promise":let t=!1;const n=this.contentWithInterceptors({onError:e=>(t=!0,`_error(${e});\n`),onResult:t=>`_resolve(${t});\n`,onDone:()=>"_resolve();\n"});let o="";o+='"use strict";\n',o+=this.header(),o+="return new Promise((function(_resolve, _reject) {\n",t&&(o+="var _sync = true;\n",o+="function _error(_err) {\n",o+="if(_sync)\n",o+="_resolve(Promise.resolve().then((function() { throw _err; })));\n",o+="else\n",o+="_reject(_err);\n",o+="};\n"),o+=n,t&&(o+="_sync = false;\n"),o+="}));\n",e=new Function(this.args(),o)}return this.deinit(),e}setup(t,e){t._x=e.taps.map((t=>t.fn))}init(t){this.options=t,this._args=t.args.slice()}deinit(){this.options=void 0,this._args=void 0}contentWithInterceptors(t){if(this.options.interceptors.length>0){const e=t.onError,n=t.onResult,o=t.onDone;let r="";for(let t=0;t<this.options.interceptors.length;t++){const e=this.options.interceptors[t];e.call&&(r+=`${this.getInterceptor(t)}.call(${this.args({before:e.context?"_context":void 0})});\n`)}return r+=this.content(Object.assign(t,{onError:e&&(t=>{let n="";for(let e=0;e<this.options.interceptors.length;e++){this.options.interceptors[e].error&&(n+=`${this.getInterceptor(e)}.error(${t});\n`)}return n+=e(t),n}),onResult:n&&(t=>{let e="";for(let n=0;n<this.options.interceptors.length;n++){this.options.interceptors[n].result&&(e+=`${this.getInterceptor(n)}.result(${t});\n`)}return e+=n(t),e}),onDone:o&&(()=>{let t="";for(let e=0;e<this.options.interceptors.length;e++){this.options.interceptors[e].done&&(t+=`${this.getInterceptor(e)}.done();\n`)}return t+=o(),t})})),r}return this.content(t)}header(){let t="";return this.needContext()?t+="var _context = {};\n":t+="var _context;\n",t+="var _x = this._x;\n",this.options.interceptors.length>0&&(t+="var _taps = this.taps;\n",t+="var _interceptors = this.interceptors;\n"),t}needContext(){for(const t of this.options.taps)if(t.context)return!0;return!1}callTap(t,{onError:e,onResult:n,onDone:o,rethrowIfPossible:r}){let i="",s=!1;for(let e=0;e<this.options.interceptors.length;e++){const n=this.options.interceptors[e];n.tap&&(s||(i+=`var _tap${t} = ${this.getTap(t)};\n`,s=!0),i+=`${this.getInterceptor(e)}.tap(${n.context?"_context, ":""}_tap${t});\n`)}i+=`var _fn${t} = ${this.getTapFn(t)};\n`;const a=this.options.taps[t];switch(a.type){case"sync":r||(i+=`var _hasError${t} = false;\n`,i+="try {\n"),i+=n?`var _result${t} = _fn${t}(${this.args({before:a.context?"_context":void 0})});\n`:`_fn${t}(${this.args({before:a.context?"_context":void 0})});\n`,r||(i+="} catch(_err) {\n",i+=`_hasError${t} = true;\n`,i+=e("_err"),i+="}\n",i+=`if(!_hasError${t}) {\n`),n&&(i+=n(`_result${t}`)),o&&(i+=o()),r||(i+="}\n");break;case"async":let s="";s+=n?`(function(_err${t}, _result${t}) {\n`:`(function(_err${t}) {\n`,s+=`if(_err${t}) {\n`,s+=e(`_err${t}`),s+="} else {\n",n&&(s+=n(`_result${t}`)),o&&(s+=o()),s+="}\n",s+="})",i+=`_fn${t}(${this.args({before:a.context?"_context":void 0,after:s})});\n`;break;case"promise":i+=`var _hasResult${t} = false;\n`,i+=`var _promise${t} = _fn${t}(${this.args({before:a.context?"_context":void 0})});\n`,i+=`if (!_promise${t} || !_promise${t}.then)\n`,i+=`  throw new Error('Tap function (tapPromise) did not return promise (returned ' + _promise${t} + ')');\n`,i+=`_promise${t}.then((function(_result${t}) {\n`,i+=`_hasResult${t} = true;\n`,n&&(i+=n(`_result${t}`)),o&&(i+=o()),i+=`}), function(_err${t}) {\n`,i+=`if(_hasResult${t}) throw _err${t};\n`,i+=e(`_err${t}`),i+="});\n"}return i}callTapsSeries({onError:t,onResult:e,resultReturns:n,onDone:o,doneReturns:r,rethrowIfPossible:i}){if(0===this.options.taps.length)return o();const s=this.options.taps.findIndex((t=>"sync"!==t.type)),a=n||r;let h="",l=o,c=0;for(let n=this.options.taps.length-1;n>=0;n--){const r=n;l!==o&&("sync"!==this.options.taps[r].type||c++>20)&&(c=0,h+=`function _next${r}() {\n`,h+=l(),h+="}\n",l=()=>`${a?"return ":""}_next${r}();\n`);const p=l,d=t=>t?"":o(),u=this.callTap(r,{onError:e=>t(r,e,p,d),onResult:e&&(t=>e(r,t,p,d)),onDone:!e&&p,rethrowIfPossible:i&&(s<0||r<s)});l=()=>u}return h+=l(),h}callTapsLooping({onError:t,onDone:e,rethrowIfPossible:n}){if(0===this.options.taps.length)return e();const o=this.options.taps.every((t=>"sync"===t.type));let r="";o||(r+="var _looper = (function() {\n",r+="var _loopAsync = false;\n"),r+="var _loop;\n",r+="do {\n",r+="_loop = false;\n";for(let t=0;t<this.options.interceptors.length;t++){const e=this.options.interceptors[t];e.loop&&(r+=`${this.getInterceptor(t)}.loop(${this.args({before:e.context?"_context":void 0})});\n`)}return r+=this.callTapsSeries({onError:t,onResult:(t,e,n,r)=>{let i="";return i+=`if(${e} !== undefined) {\n`,i+="_loop = true;\n",o||(i+="if(_loopAsync) _looper();\n"),i+=r(!0),i+="} else {\n",i+=n(),i+="}\n",i},onDone:e&&(()=>{let t="";return t+="if(!_loop) {\n",t+=e(),t+="}\n",t}),rethrowIfPossible:n&&o}),r+="} while(_loop);\n",o||(r+="_loopAsync = true;\n",r+="});\n",r+="_looper();\n"),r}callTapsParallel({onError:t,onResult:e,onDone:n,rethrowIfPossible:o,onTap:r=(t,e)=>e()}){if(this.options.taps.length<=1)return this.callTapsSeries({onError:t,onResult:e,onDone:n,rethrowIfPossible:o});let i="";i+="do {\n",i+=`var _counter = ${this.options.taps.length};\n`,n&&(i+="var _done = (function() {\n",i+=n(),i+="});\n");for(let s=0;s<this.options.taps.length;s++){const a=()=>n?"if(--_counter === 0) _done();\n":"--_counter;",h=t=>t||!n?"_counter = 0;\n":"_counter = 0;\n_done();\n";i+="if(_counter <= 0) break;\n",i+=r(s,(()=>this.callTap(s,{onError:e=>{let n="";return n+="if(_counter > 0) {\n",n+=t(s,e,a,h),n+="}\n",n},onResult:e&&(t=>{let n="";return n+="if(_counter > 0) {\n",n+=e(s,t,a,h),n+="}\n",n}),onDone:!e&&(()=>a()),rethrowIfPossible:o})),a,h)}return i+="} while(false);\n",i}args({before:t,after:e}={}){let n=this._args;return t&&(n=[t].concat(n)),e&&(n=n.concat(e)),0===n.length?"":n.join(", ")}getTapFn(t){return`_x[${t}]`}getTap(t){return`_taps[${t}]`}getInterceptor(t){return`_interceptors[${t}]`}};const S=L,O=W;const A=new class extends O{content({onError:t,onDone:e,rethrowIfPossible:n}){return this.callTapsSeries({onError:(e,n)=>t(n),onDone:e,rethrowIfPossible:n})}},H=()=>{throw new Error("tapAsync is not supported on a SyncHook")},z=()=>{throw new Error("tapPromise is not supported on a SyncHook")},j=function(t){return A.setup(this,t),A.create(t)};function N(t=[],e=void 0){const n=new S(t,e);return n.constructor=N,n.tapAsync=H,n.tapPromise=z,n.compile=j,n}N.prototype=null;var F=N;const q=W;new class extends q{content({onError:t,onResult:e,resultReturns:n,onDone:o,rethrowIfPossible:r}){return this.callTapsSeries({onError:(e,n)=>t(n),onResult:(t,n,o)=>`if(${n} !== undefined) {\n${e(n)};\n} else {\n${o()}}\n`,resultReturns:n,onDone:o,rethrowIfPossible:r})}};const V=W;new class extends V{content({onError:t,onResult:e,resultReturns:n,rethrowIfPossible:o}){return this.callTapsSeries({onError:(e,n)=>t(n),onResult:(t,e,n)=>{let o="";return o+=`if(${e} !== undefined) {\n`,o+=`${this._args[0]} = ${e};\n`,o+="}\n",o+=n(),o},onDone:()=>e(this._args[0]),doneReturns:n,rethrowIfPossible:o})}};const G=W;new class extends G{content({onError:t,onDone:e,rethrowIfPossible:n}){return this.callTapsLooping({onError:(e,n)=>t(n),onDone:e,rethrowIfPossible:n})}};const U=W;new class extends U{content({onError:t,onDone:e}){return this.callTapsParallel({onError:(e,n,o,r)=>t(n)+r(!0),onDone:e})}};const Z=W;new class extends Z{content({onError:t,onResult:e,onDone:n}){let o="";return o+=`var _results = new Array(${this.options.taps.length});\n`,o+="var _checkDone = function() {\n",o+="for(var i = 0; i < _results.length; i++) {\n",o+="var item = _results[i];\n",o+="if(item === undefined) return false;\n",o+="if(item.result !== undefined) {\n",o+=e("item.result"),o+="return true;\n",o+="}\n",o+="if(item.error) {\n",o+=t("item.error"),o+="return true;\n",o+="}\n",o+="}\n",o+="return false;\n",o+="}\n",o+=this.callTapsParallel({onError:(t,e,n,o)=>{let r="";return r+=`if(${t} < _results.length && ((_results.length = ${t+1}), (_results[${t}] = { error: ${e} }), _checkDone())) {\n`,r+=o(!0),r+="} else {\n",r+=n(),r+="}\n",r},onResult:(t,e,n,o)=>{let r="";return r+=`if(${t} < _results.length && (${e} !== undefined && (_results.length = ${t+1}), (_results[${t}] = { result: ${e} }), _checkDone())) {\n`,r+=o(!0),r+="} else {\n",r+=n(),r+="}\n",r},onTap:(t,e,n,o)=>{let r="";return t>0&&(r+=`if(${t} >= _results.length) {\n`,r+=n(),r+="} else {\n"),r+=e(),t>0&&(r+="}\n"),r},onDone:n}),o}};const Q=W;new class extends Q{content({onError:t,onDone:e}){return this.callTapsSeries({onError:(e,n,o,r)=>t(n)+r(!0),onDone:e})}};const X=W;new class extends X{content({onError:t,onResult:e,resultReturns:n,onDone:o}){return this.callTapsSeries({onError:(e,n,o,r)=>t(n)+r(!0),onResult:(t,n,o)=>`if(${n} !== undefined) {\n${e(n)}\n} else {\n${o()}}\n`,resultReturns:n,onDone:o})}};const Y=W;new class extends Y{content({onError:t,onDone:e}){return this.callTapsLooping({onError:(e,n,o,r)=>t(n)+r(!0),onDone:e})}};const J=W;new class extends J{content({onError:t,onResult:e}){return this.callTapsSeries({onError:(e,n,o,r)=>t(n)+r(!0),onResult:(t,e,n)=>{let o="";return o+=`if(${e} !== undefined) {\n`,o+=`${this._args[0]} = ${e};\n`,o+="}\n",o+=n(),o},onDone:()=>e(this._args[0])})}};const K=E,tt=(t,e)=>e;class et{constructor(t,e=void 0){this._map=new Map,this.name=e,this._factory=t,this._interceptors=[]}get(t){return this._map.get(t)}for(t){const e=this.get(t);if(void 0!==e)return e;let n=this._factory(t);const o=this._interceptors;for(let e=0;e<o.length;e++)n=o[e].factory(t,n);return this._map.set(t,n),n}intercept(t){this._interceptors.push(Object.assign({factory:tt},t))}}et.prototype.tap=K.deprecate((function(t,e,n){return this.for(t).tap(e,n)}),"HookMap#tap(key,…) is deprecated. Use HookMap#for(key).tap(…) instead."),et.prototype.tapAsync=K.deprecate((function(t,e,n){return this.for(t).tapAsync(e,n)}),"HookMap#tapAsync(key,…) is deprecated. Use HookMap#for(key).tapAsync(…) instead."),et.prototype.tapPromise=K.deprecate((function(t,e,n){return this.for(t).tapPromise(e,n)}),"HookMap#tapPromise(key,…) is deprecated. Use HookMap#for(key).tapPromise(…) instead.");var nt,ot=F;class rt{constructor(){this.hooks={beforeHighlight:new ot(["ctx","target"]),afterHighlight:new ot(["ctx"]),beforeInitOverlay:new ot(["ctx"]),afterInitOverlay:new ot(["ctx"]),beforeCreateOverlay:new ot(["ctx","options"]),afterCreateOverlay:new ot(["ctx"]),beforeMountOverlay:new ot(["ctx"]),afterMountOverlay:new ot(["ctx"]),generateCss:new ot(["ctx"])},this.plugins=new Map}install(t){t.forEach((t=>{t.hooks&&this.use(t)}))}use(t){const e=Object.keys(this.hooks);Object.keys(t.hooks).forEach((n=>{const r=t.hooks[n];e.includes(n)&&o(r)&&(this.hooks[n].tap(t.name,r),this.plugins.set(t.name,t.hooks))}))}}function it(t,...e){let r=t[0];for(let i=0,s=e.length;i<s;i++){const s=e[i];if(o(s))r+=s();else{if(!n(s))throw new Error(`不支持处理类型${Object.prototype.toString.call(s)}`);r+=s}r+=t[i+1]}return r}function st(t,e=""){return t.replace(/\.[\w-]+(?=[^{}]*\{)/g,(t=>`${t}-${e}`))}class at{constructor({zIndex:t=g()+1,portal:e=document.documentElement,cache:n=!0,hash:o,pluginManager:r=new rt}={}){this.fragments="",nt.set(this,new WeakMap),this.style="",this.tipFontSize="12px",this.tipBackgroundColor="#333740",this.tipTagColor="#e776e0",this.tipIdColor="#eba062",this.tipClassColor="#8dd2fb",this.tipLineColor="#fff",this.tipSizeColor="#fff",this.marginBackgroundColor="rgb(246 178 107 / 66%)",this.borderBackgroundColor="rgb(255 229 153 / 66%)",this.paddingBackgroundColor="rgb(147 196 125 / 55%)",this.contentBackgroundColor="rgb(111 169 220 / 66%)",this.pluginManager=r,this.pluginManager.hooks.beforeInitOverlay.call(this),this.zIndex=t,this.portal=e,this.cache=n,this.hash=o,this.createContainer(),this.createOverlayStyle(this.hash),this.pluginManager.hooks.afterInitOverlay.call(this)}static getInstance(t){return at.instance||(at.instance=new at(t)),at.instance}defineDefaultTheme(t){return st(it`
                .dom-inspector {
                    position: fixed;
                    pointer-events: none;
                    transform-origin: 0 0;
                }
    
                .dom-inspector > div {
                    position: absolute;
                    pointer-events: none;
                }
    
                .dom-inspector-wrapper .tips {
                    position: fixed;
                    right: auto;
                    max-width: 100%;
                    padding: 3px 10px;
                    font-size: 0;
                    line-height: 18px;
                    pointer-events: none;
                    background-color: ${this.tipBackgroundColor};
                    border-radius: 4px;
                }
    
                .dom-inspector-wrapper .tips .tips-triangle {
                    position: absolute;
                    bottom: -16px;
                    left: 10px;
                    width: 0;
                    height: 0;
                    border-top: 8px solid ${this.tipBackgroundColor};
                    border-right: 8px solid transparent;
                    border-bottom: 8px solid transparent;
                    border-left: 8px solid transparent;
                }
    
                .dom-inspector-wrapper .reverse .tips-triangle {
                    top: -16px;
                    left: 10px;
                    border-top: 8px solid transparent;
                    border-right: 8px solid transparent;
                    border-bottom: 8px solid ${this.tipBackgroundColor};
                    border-left: 8px solid transparent;
                }
    
                .dom-inspector-wrapper .tips > div {
                    display: inline-block;
                    overflow: auto;
                    font-family: Consolas, Menlo, Monaco, Courier, monospace;
                    font-size: ${this.tipFontSize};
                    vertical-align: middle;
                }
    
                .dom-inspector-wrapper .tips .tips-tag {
                    color: ${this.tipTagColor};
                }
    
                .dom-inspector-wrapper .tips .tips-id {
                    color: ${this.tipIdColor};
                }
    
                .dom-inspector-wrapper .tips .tips-class {
                    color: ${this.tipClassColor};
                }
    
                .dom-inspector-wrapper .tips .tips-line {
                    color: ${this.tipLineColor};
                }
    
                .dom-inspector-wrapper .tips .tips-size {
                    color: ${this.tipSizeColor};
                }
    
                .dom-inspector .dom-inspector-margin {
                    background-color: ${this.marginBackgroundColor};
                }
    
                .dom-inspector .dom-inspector-border {
                    background-color: ${this.borderBackgroundColor};
                }
    
                .dom-inspector .dom-inspector-padding {
                    background-color: ${this.paddingBackgroundColor};
                }
    
                .dom-inspector .dom-inspector-content {
                    background-color: ${this.contentBackgroundColor};
                }
            `,t)}createOverlayStyle(t){var e;const n=`tag-v-${t}`;if(d(`[${n}]`))return;const o=document.createElement("style");this.style=this.defineDefaultTheme(t),this.pluginManager.hooks.generateCss.call(this),o.setAttribute(n,""),o.textContent=this.style,null===(e=d("head"))||void 0===e||e.append(o)}clearCache(){!function(t,e,n,o,r){if("m"===o)throw new TypeError("Private method is not writable");if("a"===o&&!r)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof e?t!==e||!r:!e.has(t))throw new TypeError("Cannot write private member to an object whose class did not declare it");"a"===o?r.call(t,n):r?r.value=n:e.set(t,n)}(this,nt,new WeakMap,"f")}removeContainer(){u(this.container),this.container=void 0,at.instance=void 0}createContainer(){if(this.container)return;const t=`dom-inspector-container-${this.hash}`,e=document.createElement("div");e.id=t,e.style.zIndex=this.zIndex.toString(),this.container=e,this.portal.appendChild(this.container)}createInspector(t){const{domInspector:e,domInspectorContent:n,domInspectorPaddingTop:o,domInspectorPaddingBottom:r,domInspectorPaddingRight:i,domInspectorPaddingLeft:s,domInspectorBorderTop:a,domInspectorBorderRight:h,domInspectorBorderBottom:l,domInspectorBorderLeft:c,domInspectorMarginTop:p,domInspectorMarginRight:d,domInspectorMarginBottom:u,domInspectorMarginLeft:g}=t;return`<div  class="dom-inspector-${this.hash}" style="z-index: ${this.zIndex}; width: ${e.width}; height: ${e.height}; top: ${e.top}; left: ${e.left};">\n            <div class="dom-inspector-content-${this.hash}" style="width: ${n.width}; height: ${n.height}; top: ${n.top}; left: ${n.left};"></div>\n            <div class="dom-inspector-padding-${this.hash} dom-inspector-padding-top-${this.hash}" style="width: ${o.width}; height: ${o.height}; top: ${o.top}; left: ${o.left};"></div>\n            <div class="dom-inspector-padding-${this.hash} dom-inspector-padding-right-${this.hash}" style="width: ${i.width}; height: ${i.height}; top: ${i.top}; left: ${i.left};"></div>\n            <div class="dom-inspector-padding-${this.hash} dom-inspector-padding-bottom-${this.hash}" style="width: ${r.width}; height: ${r.height}; top: ${r.top}; left: ${r.left};"></div>\n            <div class="dom-inspector-padding-${this.hash} dom-inspector-padding-left-${this.hash}" style="width: ${s.width}; height: ${s.height}; top: ${s.top}; left: ${s.left};"></div>\n            <div class="dom-inspector-border-${this.hash} dom-inspector-border-top-${this.hash}" style="width: ${a.width}; height: ${a.height}; top: ${a.top}; left: ${a.left};"></div>\n            <div class="dom-inspector-border-${this.hash} dom-inspector-border-right-${this.hash}" style="width: ${h.width}; height: ${h.height}; top: ${h.top}; left: ${h.left};"></div>\n            <div class="dom-inspector-border-${this.hash} dom-inspector-border-bottom-${this.hash}" style="width: ${l.width}; height: ${l.height}; top: ${l.top}; left: ${l.left};"></div>\n            <div class="dom-inspector-border-${this.hash} dom-inspector-border-left-${this.hash}" style="width: ${c.width}; height: ${c.height}; top: ${c.top}; left: ${c.left};"></div>\n            <div class="dom-inspector-margin-${this.hash} dom-inspector-margin-top-${this.hash}" style="width: ${p.width}; height: ${p.height}; top: ${p.top}; left: ${p.left};"></div>\n            <div class="dom-inspector-margin-${this.hash} dom-inspector-margin-right-${this.hash}" style="width: ${d.width}; height: ${d.height}; top: ${d.top}; left: ${d.left};"></div>\n            <div class="dom-inspector-margin-${this.hash} dom-inspector-margin-bottom-${this.hash}" style="width:${u.width}; height: ${u.height}; top: ${u.top}; left: ${u.left}"></div>\n            <div class="dom-inspector-margin-${this.hash} dom-inspector-margin-left-${this.hash}" style="width: ${g.width}; height: ${g.height}; top: ${g.top}; left: ${g.left};"></div>\n        </div>`}createTips(t){const{id:e,tagName:n,classNames:o,size:r,style:i,left:s,tipsClass:a}=t;return`<div class="tips-${this.hash} ${a}" style="${i} ;left: ${s};   z-index: ${this.zIndex+1};">\n            <div class="tips-tag-${this.hash}">${n}</div>\n            <div class="tips-id-${this.hash}">${e}</div>\n            <div class="tips-class-${this.hash}">${o}</div>\n            <div class="tips-line-${this.hash}"> | </div>\n            <div class="tips-size-${this.hash}">${r}</div>\n            <div class="tips-triangle-${this.hash}"></div>\n        </div>`}createWrap(t){return`<div style="z-index: ${this.zIndex}" class="dom-inspector-wrapper-${this.hash}">${t}</div>`}defineTemplate(){return t=>this.createWrap(this.createInspector(t)+this.createTips(t))}render(t,e){return t(e)}getInspectorData(t){const e=r(k,t),n=r(T,t),o=n("content"),i=e("content"),s=n("padding"),a=e("padding"),h=n("border"),l=e("border"),c=n("margin"),p=e("margin"),d=r(_,t),u=r(I,t);let g;if(t.isSVG){g={domInspector:{width:`${o}px`,height:`${i}px`,top:`${t.top}px`,left:`${t.left}px`},domInspectorContent:{width:`${o}px`,height:`${i}px`,top:"0px",left:"0px"}};["domInspectorPaddingTop","domInspectorPaddingBottom","domInspectorPaddingLeft","domInspectorPaddingRight","domInspectorBorderTop","domInspectorBorderBottom","domInspectorBorderLeft","domInspectorBorderRight","domInspectorMarginTop","domInspectorMarginBottom","domInspectorMarginLeft","domInspectorMarginRight"].forEach((t=>{g[t]={width:"0px",height:"0px",top:"0px",left:"0px"}}))}else g={domInspector:{width:`${c}px`,height:`${p}px`,top:`${t.top}px`,left:`${t.left}px`},domInspectorContent:{width:`${o}px`,height:`${i}px`,top:d("contentHeight"),left:u("contentWidth")},domInspectorPaddingTop:{width:`${s}px`,height:`${t.paddingTop}px`,top:d("paddingTop"),left:u("paddingLeft")},domInspectorPaddingBottom:{width:s-t.paddingRight+"px",height:`${t.paddingBottom}px`,top:d("paddingBottom"),left:u("paddingLeft")},domInspectorPaddingLeft:{width:`${t.paddingLeft}px`,height:a-t.paddingTop-t.paddingBottom+"px",top:d("contentHeight"),left:u("paddingLeft")},domInspectorPaddingRight:{width:`${t.paddingRight}px`,height:a-t.paddingTop+"px",top:d("contentHeight"),left:u("paddingRight")},domInspectorBorderTop:{width:`${h}px`,height:`${t.borderTopWidth}px`,top:d("borderTopWidth"),left:u("borderLeftWidth")},domInspectorBorderBottom:{width:h-t.borderRightWidth+"px",height:`${t.borderBottomWidth}px`,top:d("borderBottomWidth"),left:u("borderLeftWidth")},domInspectorBorderLeft:{width:`${t.borderLeftWidth}px`,height:l-t.borderTopWidth-t.borderBottomWidth+"px",top:d("paddingTop"),left:u("borderLeftWidth")},domInspectorBorderRight:{width:`${t.borderRightWidth}px`,height:l-t.borderTopWidth+"px",top:d("paddingTop"),left:u("borderRightWidth")},domInspectorMarginTop:{width:`${c}px`,height:`${t.marginTop}px`,top:d("marginTop"),left:u("marginLeft")},domInspectorMarginBottom:{width:c-t.marginRight+"px",height:`${t.marginBottom}px`,top:d("marginBottom"),left:u("marginLeft")},domInspectorMarginLeft:{width:`${t.marginLeft}px`,height:p-t.marginTop-t.marginBottom+"px",top:d("borderTopWidth"),left:u("marginLeft")},domInspectorMarginRight:{width:`${t.marginRight}px`,height:p-t.marginTop+"px",top:d("borderTopWidth"),left:u("marginRight")}};return g}getTipsData(t){const e=r(k,t),n=r(T,t),o={id:t.id?`#${t.id}`:"",tagName:t.tagName.toLowerCase(),classNames:[...t.classList].map((t=>`.${t}`)).join(""),size:`${n("border")}x${e("border")}`,tipsClass:"",style:"",left:"0px"};let i=0;return t.top>=32?(i=t.top-24-8,o.style=`bottom:${t.bottom+e("margin")+8}px;`):(i=k(t,"margin")+t.top+8,o.tipsClass=`reverse-${this.hash}`,o.style=`top:${i}px;`),o.left=`${t.left}px`,o}getData(t){return Object.assign(Object.assign({},this.getInspectorData(t)),this.getTipsData(t))}create(t){const n=v(t),o=this.getData(n);let r;const i=e(this,nt,"f").get(t);i?r=i:(r=this.render(this.defineTemplate(),o),this.cache&&e(this,nt,"f").set(t,r));const s={target:t,elementInfo:n,data:o,fragment:r};this.pluginManager.hooks.beforeCreateOverlay.call(this,s),this.fragments+=s.fragment,this.pluginManager.hooks.afterCreateOverlay.call(this)}mount(){var t;this.pluginManager.hooks.beforeMountOverlay.call(this);const e=document.createRange().createContextualFragment(this.fragments);this.fragments="",null===(t=this.container)||void 0===t||t.appendChild(e),this.pluginManager.hooks.afterMountOverlay.call(this)}}nt=new WeakMap;let ht=t=>crypto.getRandomValues(new Uint8Array(t)),lt=(t,e=21)=>((t,e,n)=>{let o=(2<<Math.log(t.length-1)/Math.LN2)-1,r=-~(1.6*o*e/t.length);return(i=e)=>{let s="";for(;;){let e=n(r),a=r;for(;a--;)if(s+=t[e[a]&o]||"",s.length===i)return s}}})(t,e,ht);var ct;function pt(t=6){return lt("0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ")(t)}function dt(t,e,n){let o=!1;const r=pt();return requestIdleCallback((function(r){let i;for(;!o&&(i=e())&&r.timeRemaining()>0;)t();i?dt(t,e,n):o||n&&n()})),{isInterrupt:o,id:r,interruptSchedule(){o=!0,this.isInterrupt=!0}}}!function(t){!function(e){t.exports?t.exports=e():window.idleCallbackShim=e()}((function(){var t,e,n,o,r,i,s,a,h="undefined"!=typeof window?window:null!=typeof C?C:this||{},l=h.cancelRequestAnimationFrame&&h.requestAnimationFrame||setTimeout,c=h.cancelRequestAnimationFrame||clearTimeout,p=[],d=0,u=!1,g=7,f=35,m=125,$=0,w=0,b=0,v={get didTimeout(){return!1},timeRemaining:function(){var t=g-(Date.now()-w);return t<0?0:t}},y=(r=function(){g=22,m=66,f=0},a=function(){var t=Date.now()-s;t<99?i=setTimeout(a,99-t):(i=null,r())},function(){s=Date.now(),i||(i=setTimeout(a,99))});function x(){125!=m&&(g=7,m=125,f=35,u&&(u&&(o&&c(o),n&&clearTimeout(n),u=!1),k())),y()}function _(){o=null,n=setTimeout(T,0)}function I(){n=null,l(_)}function k(){u||(e=m-(Date.now()-w),t=Date.now(),u=!0,f&&e<f&&(e=f),e>9?n=setTimeout(I,e):(e=0,I()))}function T(){var o,r,i,s=g>9?9:1;if(w=Date.now(),u=!1,n=null,d>2||w-e-50<t)for(r=0,i=p.length;r<i&&v.timeRemaining()>s;r++)o=p.shift(),b++,o&&o(v);p.length?k():d=0}function E(t){return $++,p.push(t),k(),$}function R(t){var e=t-1-b;p[e]&&(p[e]=null)}if(h.requestIdleCallback&&h.cancelIdleCallback)try{h.requestIdleCallback((function(){}),{timeout:0})}catch(t){!function(t){var e,n;if(h.requestIdleCallback=function(e,n){return n&&"number"==typeof n.timeout?t(e,n.timeout):t(e)},h.IdleCallbackDeadline&&(e=IdleCallbackDeadline.prototype)){if(!(n=Object.getOwnPropertyDescriptor(e,"timeRemaining"))||!n.configurable||!n.get)return;Object.defineProperty(e,"timeRemaining",{value:function(){return n.get.call(this)},enumerable:!0,configurable:!0})}}(h.requestIdleCallback)}else h.requestIdleCallback=E,h.cancelIdleCallback=R,h.document&&document.addEventListener&&(h.addEventListener("scroll",x,!0),h.addEventListener("resize",x),document.addEventListener("focus",x,!0),document.addEventListener("mouseover",x,!0),["click","keypress","touchstart","mousedown"].forEach((function(t){document.addEventListener(t,x,{capture:!0,passive:!0})})),h.MutationObserver&&new MutationObserver(x).observe(document.documentElement,{childList:!0,subtree:!0,attributes:!0}));return{request:E,cancel:R}}))}({exports:{}}),t.ModeEnum=void 0,(ct=t.ModeEnum||(t.ModeEnum={})).Single="single",ct.Siblings="siblings";t.$=d,t.HighlightDom=class{constructor({mode:e=t.ModeEnum.Single,maxZIndex:n,portal:o,hash:r=pt(),batchMountNum:i=10,plugins:s=[],cache:a=!0}={}){this.taskQueue=[],this.pluginManager=new rt,this.mode=e,this.maxZIndex=n,this.portal=o,this.hash=r,this.cache=a,this.batchMountNum=i,this.pluginManager.install(s)}registerPlugin(t){this.pluginManager.use(t)}getHash(){return this.hash}getZIndex(){var t;return(null===(t=this.overlay)||void 0===t?void 0:t.zIndex)||0}interruptTask(){this.taskQueue.forEach((t=>{t.interruptSchedule()})),this.taskQueue=[]}clearOverlay(){this.overlay&&(this.overlay.removeContainer(),this.overlay=void 0)}highlightNode(e){if(!this.overlay)return;const n=this.overlay;if(n.create(e),this.mode===t.ModeEnum.Single)return n.mount(),void this.pluginManager.hooks.afterHighlight.call(this);let o=e.previousElementSibling,r=e.nextElementSibling,i="pre",s=!1,a=!1;const l=()=>{let t=0;const e=dt((()=>{"pre"===i?(s=!!o&&h(o),s&&n.create(o),o=o&&o.previousElementSibling,i=r?"next":"pre"):"next"===i&&(a=!!r&&h(r),a&&n.create(r),r=r&&r.nextElementSibling,i=o?"pre":"next"),t++}),(()=>(null!=o||null!=r)&&t<this.batchMountNum),(()=>{requestAnimationFrame((()=>{if(!e.isInterrupt)return n.mount(),o||r?(this.taskQueue=[],void l()):void 0;this.pluginManager.hooks.afterHighlight.call(this)}))}));this.taskQueue.push(e)};l()}clearOverlayCache(){this.overlay&&this.overlay.clearCache()}reset(){this.interruptTask(),this.clearOverlay()}shouldHighlight(t){return i(t)?!!h(t)||(console.warn("element is not visible"),!1):(console.warn('the parameter "target" must be HTMLElement or SVGElement'),!1)}highlight(t,e={}){if(this.pluginManager.hooks.beforeHighlight.call(this,t),this.reset(),Object.keys(e).forEach((t=>{["mode","maxZIndex","hash"].includes(t)&&(this[t]=e[t])})),!t)throw new Error('the parameter "target" is required');this.shouldHighlight(t)&&(this.overlay||(this.overlay=at.getInstance({zIndex:this.maxZIndex,portal:this.portal,cache:this.cache,hash:this.hash,pluginManager:this.pluginManager})),this.highlightNode(t))}},t.Overlay=at,t.calcLeft=I,t.calcTop=_,t.defineConfig=function(t){return t},t.extractClassNames=function(t){return t.replace("class=","").replace(/["']/g,"").trim().replace(/\s+/g," ").split(" ")},t.getBoxModelHeight=k,t.getBoxModelWidth=T,t.getElementInfo=v,t.getMaxZIndex=g,t.getOffsetHeight=l,t.getOffsetWidth=c,t.getScale=f,t.isElementInViewport=p,t.isElementNode=i,t.isHTMLElement=s,t.isSVG=a,t.isVisibleElementNode=h,t.makeHash=pt,t.matchClassAttribute=function(t){return t.match(/class=["'](\s?[\w-]+\s*)+["']/g)},t.removeDom=u,t.schedule=dt,t.styled=it,t.transformCss=st}));
//# sourceMappingURL=index.umd.js.map