@ifreeovo/highlight-dom/dist/es/dom.js

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

import{partial as t}from"radash";function e(t){return n(t)||r(t)}function n(t){return t instanceof HTMLElement}function r(t){return t instanceof SVGElement}function i(t){return e(t)&&"none"!==window.getComputedStyle(t).display&&a(t)}function o(t){const{scaleY:e}=f(t),{height:n}=t.getBoundingClientRect();return r(t)?n:t.offsetHeight*e}function d(t){const{scaleX:e}=f(t),{width:n}=t.getBoundingClientRect();return r(t)?n:t.offsetWidth*e}function a(t){const{left:e,right:n,top:r,bottom:i}=t.getBoundingClientRect(),a=d(t),c=o(t);return r>=-c&&e>=-a&&i<=window.innerHeight+c&&n<=window.innerWidth+a}function c(t,n){return n&&e(n)?n.querySelector(t):document.querySelector(t)}function s(t){t&&t.remove()}function u(){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 g(t){return t.match(/class=["'](\s?[\w-]+\s*)+["']/g)}function l(t){return t.replace("class=","").replace(/["']/g,"").trim().replace(/\s+/g," ").split(" ")}function f(t){var e;const{transform:n}=window.getComputedStyle(t);if(!n.startsWith("matrix"))return{scaleX:1,scaleY:1};const[r,,,i]=Array.from(null!==(e=n.replace(/matrix(3d)?/,"").match(/([0-9.]+)/g))&&void 0!==e?e:[]);return{scaleX:Number(r),scaleY:Number(i)}}function h(t,e){let n=0;const i=window.getComputedStyle(e),o=e.getBoundingClientRect(),d=window.innerHeight,a=window.innerWidth,{scaleX:c,scaleY:s}=f(e),u=o[t];if(r(e))switch(n=u,t){case"left":case"top":n=u;break;case"bottom":case"right":n=d-u}else switch(t){case"left":n=u-parseFloat(i.getPropertyValue(`margin-${t}`)||"0")*c;break;case"top":n=u-parseFloat(i.getPropertyValue(`margin-${t}`)||"0")*s;break;case"bottom":n=d-u-parseFloat(i.getPropertyValue(`margin-${t}`)||"0")*s;break;case"right":n=a-u-parseFloat(i.getPropertyValue(`margin-${t}`)||"0")*c}return n}const p=t(h,"left"),m=t(h,"top"),b=t(h,"bottom");function w(t){const e={},{scaleX:n,scaleY:i}=f(t),a=window.getComputedStyle(t);["borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","marginTop","marginRight","marginBottom","marginLeft","paddingTop","paddingRight","paddingBottom","paddingLeft"].forEach((t=>{const r=a[t].replace("px","");e[t]=t.includes("Top")||t.includes("Bottom")?(parseFloat(r)||0)*i:t.includes("Left")||t.includes("Right")?(parseFloat(r)||0)*n:parseFloat(r)||0}));const{width:c,height:s}=t.getBoundingClientRect(),u=r(t)?c:d(t)-e.borderLeftWidth-e.borderRightWidth-e.paddingLeft-e.paddingRight,g=r(t)?s:o(t)-e.borderTopWidth-e.borderBottomWidth-e.paddingTop-e.paddingBottom;return Object.assign(e,{contentWidth:u,contentHeight:g,top:m(t),left:p(t),bottom:b(t),id:t.id,tagName:t.tagName,classList:t.classList,isSVG:r(t)}),e}const W=["marginLeft","borderLeftWidth","paddingLeft","contentWidth","paddingRight","borderRightWidth","marginRight"],x=["marginTop","borderTopWidth","paddingTop","contentHeight","paddingBottom","borderBottomWidth","marginBottom"];function y(t,e){const n=x.findIndex((t=>t===e)),r=x.slice(0,n);if(0===r.length)return"0px";return`${r.reduce(((e,n)=>e+t[n]),0)}px`}function B(t,e){const n=W.findIndex((t=>t===e)),r=W.slice(0,n);if(0===r.length)return"0px";return`${r.reduce(((e,n)=>e+t[n]),0)}px`}function L(t,e){if(t.isSVG)return t.contentHeight;const n=x.findIndex((t=>t.startsWith(e))),r=x.findLastIndex((t=>t.startsWith(e)));return x.slice(n,r+1).reduce(((e,n)=>e+t[n]),0)}function R(t,e){if(t.isSVG)return t.contentWidth;const n=W.findIndex((t=>t.startsWith(e))),r=W.findLastIndex((t=>t.startsWith(e)));return W.slice(n,r+1).reduce(((e,n)=>e+t[n]),0)}export{c as $,B as calcLeft,y as calcTop,l as extractClassNames,L as getBoxModelHeight,R as getBoxModelWidth,w as getElementInfo,u as getMaxZIndex,o as getOffsetHeight,d as getOffsetWidth,f as getScale,a as isElementInViewport,e as isElementNode,n as isHTMLElement,r as isSVG,i as isVisibleElementNode,g as matchClassAttribute,s as removeDom};
//# sourceMappingURL=dom.js.map