@whitesev/utils 2.11.7 → 2.11.8

package/dist/types/src/Utils.d.ts

@@ -351,17 +351,26 @@ declare class Utils {
     /**
      * 获取页面的坐标中最大的z-index的元素信息
      *
-     * 其中坐标为
-     *
-     * + 左上角（宽: 1/8，高: 1/8）
-     * + 右上角（宽: 7/8，高: 1/8）
-     * + 左下角（宽: 1/8，高: 7/8）
-     * + 右下角（宽: 7/8，高: 7/8）
-     * + 中间（宽: 1/2，高: 1/2）
+     * 矩阵坐标计算
      * @param $el 仅检测目标元素最大的z-index（自动往上层找）
      * @param deviation 将对所有获取到的z-index处理偏移量（增加或减少），默认为10
+     * @example
+     * Utils.getMaxZIndexNodeInfoFromPoint(document.querySelector("a"));
+     * @example
+     * Utils.getMaxZIndexNodeInfoFromPoint(document.querySelector("a"), 20);
+     * @example
+     * Utils.getMaxZIndexNodeInfoFromPoint([document.querySelector("a"), document.querySelector("div")]);
+     * @example
+     * Utils.getMaxZIndexNodeInfoFromPoint({x: 500, y: 500});
+     * @example
+     * Utils.getMaxZIndexNodeInfoFromPoint({x: 500, y: 500}, 20);
+     * @example
+     * Utils.getMaxZIndexNodeInfoFromPoint(() => {x: 500, y: 500}, 20);
      */
-    getMaxZIndexNodeInfoFromPoint($el?: IFunction<HTMLElement | HTMLElement[]>, deviation?: number): {
+    getMaxZIndexNodeInfoFromPoint($el?: IFunction<IArray<HTMLElement> | IArray<{
+        x: number;
+        y: number;
+    }>>, deviation?: number): {
         /** 处理了偏移量后的z-index值 */
         zIndex: number;
         /** 原始z-index值 */
@@ -378,14 +387,10 @@ declare class Utils {
     /**
      * 获取页面的坐标中最大的z-index的元素信息
      *
-     * 其中坐标为
-     *
-     * + 左上角（宽: 1/8，高: 1/8）
-     * + 右上角（宽: 7/8，高: 1/8）
-     * + 左下角（宽: 1/8，高: 7/8）
-     * + 右下角（宽: 7/8，高: 7/8）
-     * + 中间（宽: 1/2，高: 1/2）
+     * 矩阵坐标计算
      * @param deviation 将对所有获取到的z-index处理偏移量（增加或减少）
+     * @example
+     * Utils.getMaxZIndexNodeInfoFromPoint(20);
      */
     getMaxZIndexNodeInfoFromPoint(deviation: IFunction<number>): {
         /** 处理了偏移量后的z-index值 */

package/dist/types/src/types/env.d.ts

@@ -9,3 +9,5 @@ declare var msIndexedDB: IDBFactory | null;
 declare type IPromise<T> = T | Promise<T>;
 
 declare type IFunction<T> = T | (() => T);
+
+declare type IArray<T> = T | Array<T>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@whitesev/utils",
-  "version": "2.11.7",
+  "version": "2.11.8",
   "description": "一个常用的工具库",
   "keywords": [
     "ScriptCat",

package/src/Utils.ts

@@ -817,30 +817,33 @@ class Utils {
      * 元素是否可见
      * @param $el
      * @param $css
+     * @returns
+     * + true 可见
+     * + false 不可见
      */
-    function isVisibleNode($el: Element, $css: CSSStyleDeclaration): boolean {
+    const isVisibleNode = function ($css: CSSStyleDeclaration, $el: Element): boolean {
       let flag = true;
-      if (typeof $el.checkVisibility === "function") {
-        flag = $el.checkVisibility();
+      if (!($el instanceof HTMLElement)) {
+        flag = false;
       } else {
-        flag =
-          $css.position !== "static" && $css.display !== "none" && $css.visibility !== "hidden" && $css.opacity !== "0";
-      }
-      if (flag) {
-        // css样式上可见
-        // 再判断宽高
-        const rect = $el.getBoundingClientRect();
-        // 确保该元素的中心点在屏幕内
-        flag = rect.width > 0 && rect.height > 0 && rect.x > 0 && rect.y > 0;
+        if (typeof $el.checkVisibility === "function") {
+          flag = $el.checkVisibility();
+        } else {
+          flag =
+            $css.position !== "static" &&
+            $css.display !== "none" &&
+            $css.visibility !== "hidden" &&
+            $css.opacity !== "0";
+        }
       }
       return flag;
-    }
+    };
     /**
      * 查询元素的z-index
      * 并比较值是否是已获取的最大值
      * @param $el
      */
-    function queryMaxZIndex($el: Element) {
+    const queryMaxZIndex = function ($el: Element) {
       if (typeof ignoreCallBack === "function") {
         const ignoreResult = ignoreCallBack($el);
         if (typeof ignoreResult === "boolean" && !ignoreResult) {
@@ -848,9 +851,9 @@ class Utils {
         }
       }
       /** 元素的样式 */
-      const nodeStyle = that.windowApi.window.getComputedStyle($el);
+      const nodeStyle = that.windowApi.globalThis.getComputedStyle($el);
       /* 不对position为static和display为none的元素进行获取它们的z-index */
-      if (isVisibleNode($el, nodeStyle)) {
+      if (isVisibleNode(nodeStyle, $el)) {
         const nodeZIndex = parseInt(nodeStyle.zIndex);
         if (!isNaN(nodeZIndex)) {
           if (nodeZIndex > zIndex) {
@@ -866,7 +869,7 @@ class Utils {
           });
         }
       }
-    }
+    };
     target.querySelectorAll("*").forEach(($elItem) => {
       queryMaxZIndex($elItem);
     });
@@ -883,18 +886,24 @@ class Utils {
   /**
    * 获取页面的坐标中最大的z-index的元素信息
    *
-   * 其中坐标为
-   *
-   * + 左上角（宽: 1/8，高: 1/8）
-   * + 右上角（宽: 7/8，高: 1/8）
-   * + 左下角（宽: 1/8，高: 7/8）
-   * + 右下角（宽: 7/8，高: 7/8）
-   * + 中间（宽: 1/2，高: 1/2）
+   * 矩阵坐标计算
    * @param $el 仅检测目标元素最大的z-index（自动往上层找）
    * @param deviation 将对所有获取到的z-index处理偏移量（增加或减少），默认为10
+   * @example
+   * Utils.getMaxZIndexNodeInfoFromPoint(document.querySelector("a"));
+   * @example
+   * Utils.getMaxZIndexNodeInfoFromPoint(document.querySelector("a"), 20);
+   * @example
+   * Utils.getMaxZIndexNodeInfoFromPoint([document.querySelector("a"), document.querySelector("div")]);
+   * @example
+   * Utils.getMaxZIndexNodeInfoFromPoint({x: 500, y: 500});
+   * @example
+   * Utils.getMaxZIndexNodeInfoFromPoint({x: 500, y: 500}, 20);
+   * @example
+   * Utils.getMaxZIndexNodeInfoFromPoint(() => {x: 500, y: 500}, 20);
    */
   getMaxZIndexNodeInfoFromPoint(
-    $el?: IFunction<HTMLElement | HTMLElement[]>,
+    $el?: IFunction<IArray<HTMLElement> | IArray<{ x: number; y: number }>>,
     deviation?: number
   ): {
     /** 处理了偏移量后的z-index值 */
@@ -913,14 +922,10 @@ class Utils {
   /**
    * 获取页面的坐标中最大的z-index的元素信息
    *
-   * 其中坐标为
-   *
-   * + 左上角（宽: 1/8，高: 1/8）
-   * + 右上角（宽: 7/8，高: 1/8）
-   * + 左下角（宽: 1/8，高: 7/8）
-   * + 右下角（宽: 7/8，高: 7/8）
-   * + 中间（宽: 1/2，高: 1/2）
+   * 矩阵坐标计算
    * @param deviation 将对所有获取到的z-index处理偏移量（增加或减少）
+   * @example
+   * Utils.getMaxZIndexNodeInfoFromPoint(20);
    */
   getMaxZIndexNodeInfoFromPoint(deviation: IFunction<number>): {
     /** 处理了偏移量后的z-index值 */
@@ -937,7 +942,7 @@ class Utils {
     positionY: number;
   }[];
   getMaxZIndexNodeInfoFromPoint(
-    $el?: IFunction<HTMLElement | HTMLElement[] | number>,
+    $el?: IFunction<IArray<HTMLElement> | number | IArray<{ x: number; y: number }>>,
     deviation?: number
   ): {
     /** 处理了偏移量后的z-index值 */
@@ -963,33 +968,34 @@ class Utils {
     if (typeof deviation !== "number" || Number.isNaN(deviation)) {
       deviation = 10;
     }
-    const leftTop = {
-      x: globalThis.innerWidth * (1 / 8),
-      y: globalThis.innerHeight * (1 / 8),
-    };
-    const leftBottom = {
-      x: globalThis.innerWidth * (1 / 8),
-      y: globalThis.innerHeight * (7 / 8),
-    };
-    const rightTop = {
-      x: globalThis.innerWidth * (7 / 8),
-      y: globalThis.innerHeight * (1 / 8),
-    };
-    const rightBottom = {
-      x: globalThis.innerWidth * (7 / 8),
-      y: globalThis.innerHeight * (7 / 8),
-    };
-    const center = {
-      x: globalThis.innerWidth / 2,
-      y: globalThis.innerHeight / 2,
-    };
-    const delayHandlerElementPostionList: ({ x: number; y: number } | HTMLElement)[] = [
-      leftTop,
-      leftBottom,
-      rightTop,
-      rightBottom,
-      center,
-    ];
+    /** 坐标偏移 */
+    const positionDistance = 10;
+    const defaultCalcPostion: {
+      x: number;
+      y: number;
+    }[] = [];
+    const maxPostionX = globalThis.innerWidth;
+    const maxPostionY = globalThis.innerHeight;
+    const gridXCount = 8;
+    const gridYCount = 8;
+    for (let i = 0; i < gridXCount; i++) {
+      for (let j = 0; j < gridYCount; j++) {
+        const positionX = globalThis.innerWidth * (i / gridXCount) + positionDistance;
+        const positionY = globalThis.innerHeight * (j / gridYCount) + positionDistance;
+        const position: (typeof defaultCalcPostion)[0] = {
+          x: positionX,
+          y: positionY,
+        };
+        if (position.x > maxPostionX) {
+          position.x = maxPostionX;
+        }
+        if (position.y > maxPostionY) {
+          position.y = maxPostionY;
+        }
+        defaultCalcPostion.push(position);
+      }
+    }
+    const delayHandlerElementPostionList: ({ x: number; y: number } | HTMLElement)[] = defaultCalcPostion;
     if ($el) {
       delayHandlerElementPostionList.length = 0;
       if (Array.isArray($el)) {
@@ -1000,55 +1006,77 @@ class Utils {
     }
     const positionInfoList = delayHandlerElementPostionList
       .map((position) => {
-        let positionNode: Element | null;
+        let $position: Element | null;
         let positionX: number;
         let positionY: number;
         if (position instanceof HTMLElement) {
-          positionNode = position;
+          $position = position;
           const nodeRect = position.getBoundingClientRect();
           positionX = nodeRect.x + nodeRect.width / 2;
           positionY = nodeRect.y + nodeRect.height / 2;
         } else {
-          positionNode = document.elementFromPoint(position.x, position.y);
+          $position = document.elementFromPoint(position.x, position.y);
           positionX = position.x;
           positionY = position.y;
         }
-        const shadowRoot = positionNode?.shadowRoot;
+        const shadowRoot = $position?.shadowRoot;
         if (shadowRoot) {
-          positionNode = shadowRoot.elementFromPoint(positionX, positionY);
+          // 处理ShadowRoot
+          $position = shadowRoot.elementFromPoint(positionX, positionY);
         }
-        if (positionNode instanceof HTMLStyleElement) return;
-        if (positionNode instanceof HTMLScriptElement) return;
-        if (positionNode instanceof HTMLMetaElement) return;
-        if (positionNode instanceof HTMLHeadElement) return;
-        if (!(positionNode instanceof HTMLElement)) return;
-        let parent: HTMLElement | null = positionNode;
+        if (!($position instanceof HTMLElement)) return;
+        let $parent: HTMLElement | null = $position;
         let zIndex = 0;
-        let maxZIndexNode: HTMLElement | null = null;
-        while (parent) {
-          const nodeStyle = globalThis.getComputedStyle(parent);
+        let $maxZIndexNode: HTMLElement | null = null;
+        let rect = {
+          x: 0,
+          y: 0,
+          width: 0,
+          height: 0,
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0,
+        } as Omit<DOMRect, "toJSON">;
+        while ($parent) {
+          const nodeStyle = globalThis.getComputedStyle($parent);
           const nodeZIndex = parseInt(nodeStyle.zIndex);
           if (nodeStyle.position !== "static" && !isNaN(nodeZIndex)) {
             if (nodeZIndex > zIndex) {
               zIndex = nodeZIndex;
-              maxZIndexNode = parent;
+              $maxZIndexNode = $parent;
             }
           }
-          parent = parent.parentElement;
+          $parent = $parent.parentElement;
+        }
+        if ($maxZIndexNode) {
+          const maxRect = $maxZIndexNode.getBoundingClientRect();
+          rect = {
+            x: maxRect.x,
+            y: maxRect.y,
+            width: maxRect.width,
+            height: maxRect.height,
+            top: maxRect.top,
+            right: maxRect.right,
+            bottom: maxRect.bottom,
+            left: maxRect.left,
+          };
         }
         return {
-          /** 处理了偏移量后的z-index值 */
+          /** 计算偏移量后的z-index值 */
           zIndex: zIndex + deviation,
-          /** 原始z-index值 */
+          /** 获取到的最大的z-index值 */
           originZIndex: zIndex,
           /** 拥有最大z-index的元素 */
-          node: maxZIndexNode,
+          node: $maxZIndexNode,
           /** 目标坐标元素 */
-          positionNode: positionNode,
-          /** x坐标 */
+          positionNode: $position,
+          /** 目标x坐标 */
           positionX: positionX,
-          /** y坐标 */
+          /** 目标y坐标 */
           positionY: positionY,
+          /** node位置信息 */
+          rect,
         };
       })
       .filter((it) => it != null);

package/src/types/env.d.ts

@@ -9,3 +9,5 @@ declare var msIndexedDB: IDBFactory | null;
 declare type IPromise<T> = T | Promise<T>;
 
 declare type IFunction<T> = T | (() => T);
+
+declare type IArray<T> = T | Array<T>;