nhanh-pure-function 1.0.0 → 1.1.0

package/lib/Index.d.ts

@@ -0,0 +1,3 @@
+export * from "./Utility";
+export * from "./User";
+ 

package/lib/Index.js

@@ -1,5 +1,3 @@
-import * as Utility from "./Utility.js";
-import * as User from "./User.js";
-
-const _PureFunction = { Utility, User };
-export default _PureFunction;
+export * from "./Utility";
+export * from "./User";
+ 

package/lib/User.d.ts

@@ -3,7 +3,10 @@
  * @param {滚动标签} element
  * @param {触底事件} callback
  */
-export function _AddScrollBottomListener(element: HTMLElement, callback: Function): void;
+export function _AddScrollBottomListener(
+  element: HTMLElement,
+  callback: Function
+): void;
 
 /**
  * 自动处理 currentPage * pageSize > total
@@ -183,3 +186,71 @@ export class _LoadingController {
   // stopLoading方法的类型定义
   stopLoading(invoker: any, key?: string): void;
 }
+
+type UiLibrary = "naiveUI" | "ElementPlus" | "Element";
+/**
+ * 点击非指定dom(包含子级dom)时执行 callback
+ * @param  clickableSelector 允许点击的 dom 选择器
+ * @param  callback 满足条件时执行的回调
+ * @param  uiLibrary 项目使用的 ui库 , 用于排除  ui库 创建的元素 , 避免点击 ui库 创建的元素时意外的执行 callback
+ */
+export function _CloseOnOutsideClick(
+  clickableSelector: string[],
+  callback: Function,
+  uiLibrary?: UiLibrary[]
+): void;
+
+/** 拖拽配置 */
+type DragOption = {
+  /** 拖拽范围限制 */
+  limit?: {
+    max: {
+      top: number;
+      left: number;
+    };
+    min: {
+      top: number;
+      left: number;
+    };
+  };
+  /** 指定的拖拽元素 */
+  dragDom?: HTMLElement;
+};
+/** 拖拽 */
+export class Drag {
+  /**
+   * 初始化拖拽
+   * @param  dom 被拖拽的元素
+   * @param  option 拖拽配置
+   */
+  init(dom: HTMLElement, option?: DragOption): void;
+  /** 结束拖拽 */
+  finish(): void;
+}
+
+/** 更新后的位置信息 */
+type UpdateValue = {
+  top: number;
+  left: number;
+  percentage?: {
+    top: number;
+    left: number;
+  };
+};
+/** 局部拖拽配置 */
+type LocalDragOptions = {
+  limit?: DragOption["limit"];
+  update_move?: (value: UpdateValue) => void | undefined;
+  update_up?: (value: UpdateValue) => void | undefined;
+};
+/** 局部拖拽 计算位置距离/百分比 */
+export class LocalDrag {
+  /**
+   * 初始化拖拽
+   * @param  parentDom 被拖拽元素的祖先元素
+   * @param  option 局部拖拽配置
+   */
+  init(parentDom: HTMLElement, options: LocalDragOptions = {}): void;
+  /** 结束拖拽 */
+  finish(): void;
+}

package/lib/User.js

@@ -1,4 +1,4 @@
-import { _IsObject, _IsWithinErrorMargin, _NotNull } from './Utility';
+import { _IsObject, _IsWithinErrorMargin, _NotNull } from "./Utility";
 
 /**
  * 添加滚动触底事件
@@ -6,8 +6,14 @@ import { _IsObject, _IsWithinErrorMargin, _NotNull } from './Utility';
  * @param {触底事件} callback
  */
 export function _AddScrollBottomListener(element, callback) {
-  element.addEventListener('scroll', function () {
-    if (_IsWithinErrorMargin(element.scrollTop + element.clientHeight, element.scrollHeight, 2)) {
+  element.addEventListener("scroll", function () {
+    if (
+      _IsWithinErrorMargin(
+        element.scrollTop + element.clientHeight,
+        element.scrollHeight,
+        2
+      )
+    ) {
       callback();
     }
   });
@@ -53,25 +59,25 @@ export function _FormatNumberWithUnit(number, config = {}) {
   const { join, suffix, integer } = Object.assign(
     {
       join: true,
-      suffix: '',
-      integer: false
+      suffix: "",
+      integer: false,
     },
     config
   );
 
   function _join(value, suffix, plus = true) {
-    value = (plus ? '' : '-') + value;
+    value = (plus ? "" : "-") + value;
     if (join) return value + suffix;
     else return [value, suffix];
   }
 
-  if (typeof number == 'string') {
+  if (typeof number == "string") {
     if (!/^\d+$/.test(number.trim())) {
-      console.error('错误输入：', number);
+      console.error("错误输入：", number);
       return _join(0, suffix);
     }
-  } else if (typeof number != 'number') {
-    console.error('错误输入：', number);
+  } else if (typeof number != "number") {
+    console.error("错误输入：", number);
     return _join(0, suffix);
   }
 
@@ -83,7 +89,21 @@ export function _FormatNumberWithUnit(number, config = {}) {
   const plus = number >= 0;
   number = Math.abs(number);
 
-  const units = ['', '万', '亿', '兆', '京', '垓', '秭', '穰', '沟', '涧', '正', '载', '极'];
+  const units = [
+    "",
+    "万",
+    "亿",
+    "兆",
+    "京",
+    "垓",
+    "秭",
+    "穰",
+    "沟",
+    "涧",
+    "正",
+    "载",
+    "极",
+  ];
   const digits = Math.floor(Math.log10(number) / 4); // 计算位数
 
   // 不超过万位的数字直接返回
@@ -109,16 +129,17 @@ export function _FormatNumberWithUnit(number, config = {}) {
  */
 export function _SetQuantifierAttribute(data, options = []) {
   if (!_IsObject(data)) {
-    console.error('异常输入：', data);
+    console.error("异常输入：", data);
     return data;
   }
 
   options.forEach((item) => {
-    if (typeof item === 'string') {
+    if (typeof item === "string") {
       data[item] = _FormatNumberWithUnit(data[item]);
     } else if (Array.isArray(item)) {
       const [label, config] = data[item];
-      if (_NotNull(label) && _IsObject(config)) data[label] = _FormatNumberWithUnit(label, config);
+      if (_NotNull(label) && _IsObject(config))
+        data[label] = _FormatNumberWithUnit(label, config);
     }
   });
   return data;
@@ -132,11 +153,11 @@ export function _SetQuantifierAttribute(data, options = []) {
  */
 export function _SetDefaultValue(data, options = {}) {
   if (!_IsObject(data)) {
-    console.error('异常输入：', data);
+    console.error("异常输入：", data);
     return data;
   }
 
-  const { defaultValue = '--', fieldsNotRequiringAction } = options;
+  const { defaultValue = "--", fieldsNotRequiringAction } = options;
 
   for (const key in data) {
     if (Object.prototype.hasOwnProperty.call(data, key)) {
@@ -162,7 +183,7 @@ export function _SetDefaultValue(data, options = {}) {
  */
 export function _SetDictionary(data, options = {}) {
   if (!_IsObject(data)) {
-    console.error('异常输入：', data);
+    console.error("异常输入：", data);
     return data;
   }
 
@@ -170,7 +191,7 @@ export function _SetDictionary(data, options = {}) {
     dictionaryLabel = [],
     dictionaryLabelJoin = [],
     dictionaryOptions,
-    defaultValue = '--'
+    defaultValue = "--",
   } = options;
 
   if (dictionaryOptions) {
@@ -188,11 +209,11 @@ export function _SetDictionary(data, options = {}) {
       }
     });
     dictionaryLabelJoin.forEach((label) => {
-      if (_NotNull(data[label]) && data[label] != '') {
+      if (_NotNull(data[label]) && data[label] != "") {
         const options = dictionaryOptions[label];
         if (options) {
-          const oldvalue = data[label].split(',');
-          data[label] = '';
+          const oldvalue = data[label].split(",");
+          data[label] = "";
           oldvalue.forEach((_label) => {
             data[label] += options[_label];
           });
@@ -216,7 +237,7 @@ export function _SetDictionary(data, options = {}) {
  */
 export function _SetPhoto(data, options = {}) {
   if (!_IsObject(data)) {
-    console.error('异常输入：', data);
+    console.error("异常输入：", data);
     return data;
   }
 
@@ -226,8 +247,8 @@ export function _SetPhoto(data, options = {}) {
     label.forEach((label) => {
       const defaultValue = (defaultUrl && defaultUrl[label]) || [];
       const value = data[label];
-      if (typeof value === 'string') {
-        data[label] = value.split(',').filter(Boolean);
+      if (typeof value === "string") {
+        data[label] = value.split(",").filter(Boolean);
       } else {
         data[label] = defaultValue;
       }
@@ -245,7 +266,7 @@ export function _SetPhoto(data, options = {}) {
  */
 export function _Exhibit_details(data, options = {}) {
   if (!_IsObject(data)) {
-    console.error('异常输入：', data);
+    console.error("异常输入：", data);
     return {};
   }
 
@@ -263,19 +284,19 @@ export function _Exhibit_details(data, options = {}) {
 
     filterLabel = [],
 
-    defaultValue = '--'
+    defaultValue = "--",
   } = options;
 
   _SetDictionary(data, {
     dictionaryLabel,
     dictionaryLabelJoin,
     dictionaryOptions,
-    defaultValue
+    defaultValue,
   });
 
   _SetPhoto(data, {
     label: photoLabel,
-    defaultUrl: photoDefaultUrl
+    defaultUrl: photoDefaultUrl,
   });
 
   _SetQuantifierAttribute(data, quantifierLabel);
@@ -288,12 +309,12 @@ export function _Exhibit_details(data, options = {}) {
       .concat(
         quantifierLabel
           .map((item) => {
-            if (typeof item == 'string') return item;
+            if (typeof item == "string") return item;
             if (Array.isArray(item)) return item[0];
           })
           .filter(Boolean)
       )
-      .concat(filterLabel)
+      .concat(filterLabel),
   });
 
   return data;
@@ -304,14 +325,14 @@ export class _LoadingController {
   #controllersCollection = new Map();
   constructor() {}
 
-  addController(key = 'default', config) {
+  addController(key = "default", config) {
     if (this.#controllersCollection.has(key))
-      throw new Error('key为: ' + key + ' 的loading控制器已存在, 请重命名。');
+      throw new Error("key为: " + key + " 的loading控制器已存在, 请重命名。");
 
     const {
       loadingState /** 更新/获取 loading 状态的方法 */,
       delayTime = 200 /** 延迟时间 */,
-      minDisplayTime = 400 /** 最少显示时间 */
+      minDisplayTime = 400 /** 最少显示时间 */,
     } = config;
     this.#controllersCollection.set(key, {
       invokers: new Set(),
@@ -319,7 +340,7 @@ export class _LoadingController {
       startTime: 0,
       loadingState,
       delayTime,
-      minDisplayTime
+      minDisplayTime,
     });
   }
 
@@ -327,9 +348,10 @@ export class _LoadingController {
     this.#controllersCollection.delete(key);
   }
 
-  getController(key = 'default') {
+  getController(key = "default") {
     const controller = this.#controllersCollection.get(key);
-    if (!controller) throw new Error('还未添加key为: ' + key + ' 的loading控制器');
+    if (!controller)
+      throw new Error("还未添加key为: " + key + " 的loading控制器");
     return controller;
   }
 
@@ -378,10 +400,235 @@ export class _LoadingController {
       if (displayTime >= minDisplayTime) {
         this.resetController(key);
       } else {
-        setTimeout(() => this.stopLoading(invoker, key), displayTime - minDisplayTime);
+        setTimeout(
+          () => this.stopLoading(invoker, key),
+          displayTime - minDisplayTime
+        );
       }
     } else {
       invokers.delete(invoker);
     }
   }
 }
+
+/**
+ * 点击非指定dom(包含子级dom)时执行 callback
+ * @param  clickableSelector 允许点击的 dom 选择器
+ * @param  callback 满足条件时执行的回调
+ * @param  uiLibrary 项目使用的 ui库 , 用于排除  ui库 创建的元素 , 避免点击 ui库 创建的元素时意外的执行 callback
+ */
+export function _CloseOnOutsideClick(
+  clickableSelector,
+  callback,
+  uiLibrary = ["naiveUI", "ElementPlus", "Element"]
+) {
+  function mousedown(event) {
+    const target = event.target;
+    const UI = (function (obj) {
+      const arr = [];
+      for (const key in obj) {
+        if (Object.hasOwnProperty.call(obj, key)) {
+          if (uiLibrary.includes(key)) arr.concat(obj[key]);
+        }
+      }
+      return arr;
+    })({
+      naiveUI: [".v-binder-follower-container"],
+      ElementPlus: ["el-popper"],
+      Element: ["el-popper"],
+    });
+    const isClickable = clickableSelector
+      .concat(UI)
+      .some((className) => Boolean(target?.closest(className)));
+
+    if (!isClickable) {
+      callback();
+      document.removeEventListener("mousedown", mousedown);
+    }
+  }
+  requestAnimationFrame(() =>
+    document.addEventListener("mousedown", mousedown)
+  );
+}
+
+/** 拖拽dom */
+export class Drag {
+  #dom = null;
+  #isAllowed = false;
+  #eventFunction = {};
+  #pageX = 0;
+  #pageY = 0;
+  #top = 0;
+  #left = 0;
+  #limit;
+  #dragDom;
+
+  init(dom, option) {
+    this.#dom = dom;
+    this.#limit = option?.limit;
+    this.#dragDom = option?.dragDom;
+    this.#eventFunction = {
+      mousedown: this.mousedown.bind(this),
+      mousemove: this.mousemove.bind(this),
+      mouseup: this.mouseup.bind(this),
+    };
+
+    this.bindOrUnbindEvent("bind");
+  }
+  finish() {
+    this.bindOrUnbindEvent("unbind");
+  }
+  bindOrUnbindEvent(type) {
+    const EventType =
+      type === "bind" ? "addEventListener" : "removeEventListener";
+    if (!this.#dom) return console.error("No DOM");
+
+    this.#dom[EventType]("mousedown", this.#eventFunction.mousedown);
+    document[EventType]("mousemove", this.#eventFunction.mousemove);
+    document[EventType]("mouseup", this.#eventFunction.mouseup);
+  }
+  alterLocation() {
+    if (!this.#dom) return console.error("No DOM");
+    if (this.#limit) {
+      this.#top = Math.min(this.#top, this.#limit.max.top);
+      this.#top = Math.max(this.#top, this.#limit.min.top);
+      this.#left = Math.min(this.#left, this.#limit.max.left);
+      this.#left = Math.max(this.#left, this.#limit.min.left);
+    }
+    this.#dom.style.setProperty("--top", this.#top + "px");
+    this.#dom.style.setProperty("--left", this.#left + "px");
+  }
+  mousedown(event) {
+    if (!this.#dom) return console.error("No DOM");
+    if (this.#dragDom && event.target != this.#dragDom) return;
+    document.body.classList.add("no-select");
+
+    this.#isAllowed = true;
+    const clientRect = this.#dom.getBoundingClientRect();
+
+    const { pageX, pageY } = event;
+    this.#pageX = pageX;
+    this.#pageY = pageY;
+    this.#top = clientRect.y;
+    this.#left = clientRect.x;
+  }
+  mousemove(event) {
+    const { pageX, pageY } = event;
+    if (this.#isAllowed) {
+      this.#top += pageY - this.#pageY;
+      this.#left += pageX - this.#pageX;
+      this.#pageX = pageX;
+      this.#pageY = pageY;
+
+      this.alterLocation();
+    }
+  }
+  mouseup() {
+    if (this.#isAllowed) {
+      this.#isAllowed = false;
+      document.body.classList.remove("no-select");
+    }
+  }
+}
+
+/** 局部拖拽 计算位置距离/百分比 */
+export class LocalDrag {
+  #parentDom = null;
+  #isAllowed = false;
+  #eventFunction = {};
+  #clientRectX = 0;
+  #clientRectY = 0;
+  #top = 0;
+  #left = 0;
+  #limit;
+  #update_move;
+  #update_up;
+
+  init(parentDom, options = {}) {
+    this.#parentDom = parentDom;
+    this.#limit = options.limit;
+    this.#update_move = options.update_move;
+    this.#update_up = options.update_up;
+    this.#eventFunction = {
+      mousedown: this.mousedown.bind(this),
+      mousemove: this.mousemove.bind(this),
+      mouseup: this.mouseup.bind(this),
+    };
+
+    this.bindOrUnbindEvent("bind");
+  }
+  finish() {
+    this.bindOrUnbindEvent("unbind");
+  }
+  bindOrUnbindEvent(type) {
+    const EventType =
+      type === "bind" ? "addEventListener" : "removeEventListener";
+    if (!this.#parentDom) return window.customize_error("No DOM");
+
+    this.#parentDom[EventType]("mousedown", this.#eventFunction.mousedown);
+    document[EventType]("mousemove", this.#eventFunction.mousemove);
+    document[EventType]("mouseup", this.#eventFunction.mouseup);
+  }
+  updateValue() {
+    const value = {
+      top: this.#top,
+      left: this.#left,
+    };
+    if (this.#limit) {
+      const v = (type) =>
+        this.#limit
+          ? (value[type] - this.#limit.min[type]) /
+            (this.#limit.max[type] - this.#limit.min[type])
+          : 0;
+
+      value.percentage = {
+        top: v("top") || 0,
+        left: v("left") || 0,
+      };
+    }
+    return value;
+  }
+  alterLocation() {
+    if (!this.#parentDom) return window.customize_error("No DOM");
+    if (this.#limit) {
+      this.#top = Math.min(this.#top, this.#limit.max.top);
+      this.#top = Math.max(this.#top, this.#limit.min.top);
+      this.#left = Math.min(this.#left, this.#limit.max.left);
+      this.#left = Math.max(this.#left, this.#limit.min.left);
+    }
+    if (this.#update_move) this.#update_move(this.updateValue());
+
+    this.#parentDom.style.setProperty("--top", this.#top + "px");
+    this.#parentDom.style.setProperty("--left", this.#left + "px");
+  }
+  mousedown(event) {
+    if (!this.#parentDom) return window.customize_error("No DOM");
+    document.body.classList.add("no-select");
+
+    this.#isAllowed = true;
+    const clientRect = this.#parentDom.getBoundingClientRect();
+    this.#clientRectY = clientRect.y;
+    this.#clientRectX = clientRect.x;
+
+    const { pageX, pageY } = event;
+    this.#top = pageY - this.#clientRectY;
+    this.#left = pageX - this.#clientRectX;
+
+    this.alterLocation();
+  }
+  mousemove(event) {
+    const { pageX, pageY } = event;
+    if (this.#isAllowed) {
+      this.#top = pageY - this.#clientRectY;
+      this.#left = pageX - this.#clientRectX;
+      this.alterLocation();
+    }
+  }
+  mouseup() {
+    if (this.#isAllowed) {
+      this.#isAllowed = false;
+      document.body.classList.remove("no-select");
+      if (this.#update_up) this.#update_up(this.updateValue());
+    }
+  }
+}

package/lib/Utility.d.ts

@@ -104,27 +104,30 @@ export function _ReadFile(src: string): Promise<string>;
 
 /**
  * 下载文件
- * @param {文件路径} href
- * @param {导出文件名} fileName
+ * @param {string} href 文件路径
+ * @param {string} fileName 导出文件名
  */
 export function _DownloadFile(href: string, fileName?: string): void;
 
 /**
  * 获取帧率
- * @param {Function} callback callback( 帧率 , 每帧时间 )
+ * @param {(fps , frameTime)=>void} callback callback( 帧率 , 每帧时间 )
  * @param {Number} referenceNode 参考节点数量
  */
 export function _GetFrameRate(
-  callback: Function,
+  callback: (fps: number, frameTime: number) => void,
   referenceNode: number = 10
 ): void;
 
 /**
  * 进度
- * @param {Function} callback callback( 进度百分比 )
+ * @param {(schedule)=>void} callback callback( 进度百分比 )
  * @param {Number} TIME 总时长
  */
-export function _Schedule(callback: Function, TIME: number = 500): void;
+export function _Schedule(
+  callback: (schedule: number) => void,
+  TIME: number = 500
+): void;
 
 /**
  * 格式化数字，给数字加上千位分隔符。
@@ -150,3 +153,15 @@ export function _ConvertToCamelCase(
   str: string,
   isRemoveDelimiter?: boolean
 ): string;
+
+/**
+ * 创建文件并下载
+ * @param {BlobPart[]} content 文件内容
+ * @param {string} fileName 文件名称
+ * @param {BlobPropertyBag} options Blob 配置
+ */
+export function _CreateAndDownloadFile(
+  content: BlobPart[],
+  fileName: string,
+  options?: BlobPropertyBag
+): void;

package/lib/Utility.js

@@ -228,32 +228,32 @@ export function _DownloadFile(href, fileName) {
 
 /**
  * 获取帧率
- * @param {Function} callback callback( 帧率 , 每帧时间 )
+ * @param {(fps , frameTime)=>void} callback callback( 帧率 , 每帧时间 )
  * @param {Number} referenceNode 参考节点数量
  */
 export function _GetFrameRate(callback, referenceNode = 10) {
   let t,
-    arr = [];
-  function loop(time) {
-    if (t) {
-      arr.push(time - t);
-      let l = arr.length;
-      if (l >= referenceNode) {
-        let num = arr.reduce((a, b) => a + b, 0);
-        num /= l;
-        callback(1000 / num, num);
-        return;
-      }
+    l = referenceNode;
+  function loop() {
+    if (l > 0) {
+      l--;
+      requestAnimationFrame(loop);
+    } else {
+      const time = new Date() - t;
+      const frameTime = time / referenceNode;
+      const fps = 1000 / frameTime;
+      callback(Number(fps.toFixed(2)), Number(frameTime.toFixed(2)));
     }
-    t = time;
-    requestAnimationFrame(loop);
   }
-  requestAnimationFrame(loop);
+  requestAnimationFrame(() => {
+    t = new Date() - 0;
+    loop();
+  });
 }
 
 /**
  * 进度
- * @param {Function} callback callback( 进度百分比 )
+ * @param {(schedule)=>void} callback callback( 进度百分比 )
  * @param {Number} TIME 总时长
  */
 export function _Schedule(callback, TIME = 500) {
@@ -302,3 +302,29 @@ export function _ConvertToCamelCase(str, isRemoveDelimiter) {
   if (isRemoveDelimiter) return str.replace(/[^a-zA-Z]+/g, "");
   return str;
 }
+
+/**
+ * 创建文件并下载
+ * @param {BlobPart[]} content 文件内容
+ * @param {string} fileName 文件名称
+ * @param {BlobPropertyBag} options Blob 配置
+ */
+export function _CreateAndDownloadFile(content, fileName, options) {
+  if (!options) {
+    let type = fileName.replace(/^[^.]+./, "");
+    type = type == fileName ? "text/plain" : "application/" + type;
+    options = { type };
+  }
+  const bolb = new Blob(content, options);
+  // 创建一个 URL，该 URL 可以用于在浏览器中引用 Blob 对象（例如，在 <a> 标签的 href 属性中）
+  const url = URL.createObjectURL(bolb);
+  // 你可以创建一个链接来下载这个 Blob 对象
+  const downloadLink = document.createElement("a");
+  downloadLink.href = url;
+  downloadLink.download = fileName; // 设置下载文件的名称
+  document.body.appendChild(downloadLink); // 添加到文档中
+  downloadLink.click(); // 模拟点击以开始下载
+  document.body.removeChild(downloadLink); // 然后从文档中移除
+  // 最后，别忘了撤销 Blob 对象的 URL，以释放资源
+  URL.revokeObjectURL(url);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nhanh-pure-function",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "纯函数工具",
   "main": "lib/Index.js",
   "scripts": {