@whitesev/utils 2.11.7 → 2.11.9

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);
@@ -3788,8 +3816,22 @@ class Utils {
    * 深度获取对象的某个属性
    * @param target 待获取的对象
    * @param handler 获取属性的回调
+   * @example
+   * Utils.queryProperty(window,(target)=>{
+   *   if(target.xxx){
+   *     return {
+   *       isFind: true,
+   *       data: target.xxx,
+   *     }
+   *   }else{
+   *     return {
+   *       isFind: false,
+   *       data: target.aabbcc,
+   *     }
+   *   }
+   * })
    */
-  queryProperty<T = any>(
+  queryProperty<T = any, R = any>(
     target: any,
     handler: (
       /**
@@ -3805,16 +3847,20 @@ class Utils {
       isFind: boolean;
       /**
        * 对象/目标值
+       *
+       * 若`isFind`为true，那该值为返回的结果
+       *
+       * 若`isFind`为false，那该值为下次迭代传入的`target`
        */
-      data: any;
+      data: T | R | null | void;
     }
-  ): any {
+  ): R | void | null {
     if (target == null) {
       return;
     }
     const handleResult = handler(target);
     if (handleResult && typeof handleResult.isFind === "boolean" && handleResult.isFind) {
-      return handleResult.data;
+      return handleResult.data as R | void | null;
     }
     return this.queryProperty(handleResult.data, handler);
   }
@@ -3822,54 +3868,63 @@ class Utils {
    * 异步-深度获取对象属性
    * @param target 待获取的对象
    * @param handler 获取属性的回调
+   * @example
+   * Utils.asyncQueryProperty(window, async (target)=>{
+   *   if(target.xxx){
+   *     return {
+   *       isFind: true,
+   *       data: target.xxx,
+   *     }
+   *   }else{
+   *     return {
+   *       isFind: false,
+   *       data: target.aabbcc,
+   *     }
+   *   }
+   * })
    */
-  async asyncQueryProperty<T = any>(
+  async asyncQueryProperty<T = any, R = any>(
     target: any,
-    handler: (target: T) =>
-      | {
-          /**
-           * 是否是需要的属性
-           * + true 将目标值赋值给data
-           * + false 不是需要的，data为下一个处理的对象
-           */
-          isFind: boolean;
-          /**
-           * 对象/目标值
-           */
-          data: any;
-        }
-      | Promise<{
-          /**
-           * 是否是需要的属性
-           * + true 将目标值赋值给data
-           * + false 不是需要的，data为下一个处理的对象
-           */
-          isFind: boolean;
-          /**
-           * 对象/目标值
-           */
-          data: any;
-        }>
-  ): Promise<Awaited<T>> {
+    handler: (
+      /**
+       * 该值为返回的data值
+       */
+      target: T
+    ) => IPromise<{
+      /**
+       * 是否是需要的属性
+       * + true 将目标值赋值给data
+       * + false 不是需要的，data为下一个处理的对象
+       */
+      isFind: boolean;
+      /**
+       * 对象/目标值
+       *
+       * 若`isFind`为true，那该值为返回的结果
+       *
+       * 若`isFind`为false，那该值为下次迭代传入的`target`
+       */
+      data: T | R | null | void;
+    }>
+  ): Promise<R | void | null> {
     if (target == null) {
-      // @ts-expect-error 空返回
       return;
     }
     const handleResult = await handler(target);
     if (handleResult && typeof handleResult.isFind === "boolean" && handleResult.isFind) {
-      return handleResult.data;
+      return handleResult.data as R | void | null;
     }
     return await this.asyncQueryProperty(handleResult.data, handler);
   }
   /**
    * 创建一个新的Utils实例
    * @param option
-   * @returns
+   * @example
+   * Utils.createUtils();
    */
   createUtils(option?: WindowApiOption) {
     return new Utils(option);
   }
-
   /**
    * 将对象转换为FormData
    * @param data 待转换的对象
@@ -3935,7 +3990,9 @@ class Utils {
   /**
    * 覆盖对象中的函数this指向
    * @param target 需要覆盖的对象
-   * @param [objectThis] 覆盖的this指向，如果为传入，则默认为对象本身
+   * @param objectThis 覆盖的this指向，如果为传入，则默认为对象本身
+   * @example
+   * Utils.coverObjectFunctionThis({})
    */
   coverObjectFunctionThis = CommonUtil.coverObjectFunctionThis.bind(CommonUtil);
   /**
@@ -3986,7 +4043,7 @@ class Utils {
   /**
    * 自动使用 Worker 执行 setTimeout
    * @param callback 回调函数
-   * @param [timeout=0] 延迟时间，默认为0
+   * @param timeout 延迟时间，默认为0
    */
   workerSetTimeout(callback: (...args: any[]) => any, timeout: number = 0) {
     try {
@@ -4087,6 +4144,10 @@ class Utils {
   /**
    * 判断页面中是否存在`worker-src`的CSP规则
    * @param timeout 超时时间，默认为`1500ms`
+   * @example
+   * Utils.hasWorkerCSP().then((hasCSP) => {
+   *   console.log(hasCSP);
+   * })
    */
   hasWorkerCSP(timeout: number = 1500) {
     return new Promise<boolean>((resolve) => {
@@ -4169,6 +4230,9 @@ class Utils {
    * @param positionY 坐标y信息
    * @param otherPositionX 坐标x信息
    * @param otherPositionY 坐标y信息
+   * @example
+   * Utils.calcPositionDistance(1, 2, 3, 4);
+   * > 2.8284271247461903
    */
   calcPositionDistance(
     positionX: number | string,
@@ -4180,6 +4244,9 @@ class Utils {
    * 计算两个坐标的直线距离
    * @param position 坐标信息
    * @param otherPosition 坐标信息
+   * @example
+   * Utils.calcPositionDistance({x: 1, y: 2}, {x: 3, y: 4});
+   * > 2.8284271247461903
    */
   calcPositionDistance(
     position: { x: number | string; y: number | string },

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>;