sculp-js 1.0.0 → 1.1.0

package/lib/umd/index.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v1.0.0
+ * sculp-js v1.0.1
  * (c) 2023-2023 chandq
  * Released under the MIT License.
  */
@@ -277,26 +277,32 @@
         return objectHas(any, 'length');
     }
     /**
-     * 遍历数组，返回 false 中断遍历
+     * 遍历数组，返回 false 中断遍历(支持continue和break操作)
      *
      * @param {ArrayLike<V>} array
-     * @param {(val: V, idx: number) => any} iterator
-     * @param reverse {boolean} 是否倒序
+     * @param {(val: V, idx: number) => any} iterator 迭代函数, 返回值为true时continue, 返回值为false时break
+     * @param {boolean} reverse  是否倒序
      * @returns {*}
      */
     function arrayEach(array, iterator, reverse = false) {
         if (reverse) {
             for (let idx = array.length - 1; idx >= 0; idx--) {
                 const val = array[idx];
-                if (iterator(val, idx, array) === false)
+                const re = iterator(val, idx, array);
+                if (re === false)
                     break;
+                else if (re === true)
+                    continue;
             }
         }
         else {
             for (let idx = 0; idx < array.length; idx++) {
                 const val = array[idx];
-                if (iterator(val, idx, array) === false)
+                const re = iterator(val, idx, array);
+                if (re === false)
                     break;
+                else if (re === true)
+                    continue;
             }
         }
     }
@@ -358,21 +364,25 @@
     /**
      * 自定义深度优先遍历函数(支持continue和break操作)
      * @param {ArrayLike<V>} tree  树形数据
-     * @param {Function} iterator  迭代函数
+     * @param {Function} iterator  迭代函数, 返回值为true时continue, 返回值为false时break
      * @param {string} children 定制子元素的key
      * @param {boolean} isReverse  是否反向遍历
      * @returns {*}
      */
-    function deepTraversal(tree, iterator, children = 'children', isReverse = false) {
-        let level = 0;
+    function forEachDeep(tree, iterator, children = 'children', isReverse = false) {
+        let level = 0, isBreak = false;
         const walk = (arr, parent) => {
             if (isReverse) {
                 for (let i = arr.length - 1; i >= 0; i--) {
+                    if (isBreak) {
+                        break;
+                    }
                     const re = iterator(arr[i], i, tree, parent, level);
-                    if (re === 'break') {
+                    if (re === false) {
+                        isBreak = true;
                         break;
                     }
-                    else if (re === 'continue') {
+                    else if (re === true) {
                         continue;
                     }
                     // @ts-ignore
@@ -385,11 +395,15 @@
             }
             else {
                 for (let i = 0; i < arr.length; i++) {
+                    if (isBreak) {
+                        break;
+                    }
                     const re = iterator(arr[i], i, tree, parent, level);
-                    if (re === 'break') {
+                    if (re === false) {
+                        isBreak = true;
                         break;
                     }
-                    else if (re === 'continue') {
+                    else if (re === true) {
                         continue;
                     }
                     // @ts-ignore
@@ -411,7 +425,7 @@
      * @param {ITreeConf} config - 迭代配置项
      * @returns {[IdLike[], ITreeItem<V>[]]} - 由parentId...childId, parentObject-childObject组成的二维数组
      */
-    function getTreeIds(tree, nodeId, config) {
+    function searchTreeById(tree, nodeId, config) {
         const { children = 'children', id = 'id' } = config || {};
         const toFlatArray = (tree, parentId, parent) => {
             return tree.reduce((t, _) => {
@@ -436,6 +450,91 @@
         };
         return getIds(toFlatArray(tree));
     }
+    /**
+     * 使用迭代函数转换数组
+     * @param {T} array
+     * @param {Function} callback 迭代函数
+     * @return {Array}
+     */
+    function flatMap(array, callback) {
+        const result = [];
+        array.forEach((value, index) => {
+            result.push(...callback(value, index, array));
+        });
+        return result;
+    }
+    /**
+     * 根据 idProp 与 parentIdProp 从对象数组中构建对应的树
+     * 当 A[parentIdProp] === B[idProp] 时，对象A会被移动到对象B的children。
+     * 当一个对象的 parentIdProp 不与其他对象的 idProp 字段相等时，该对象被作为树的顶层节点
+     * @param {string} idProp 元素ID
+     * @param {string} parentIdProp 父元素ID
+     * @param {object[]} items 一维数组
+     * @returns {WithChildren<T>[]} 树
+     * @example
+     * const array = [
+     *   { id: 'node-1', parent: 'root' },
+     *   { id: 'node-2', parent: 'root' },
+     *   { id: 'node-3', parent: 'node-2' },
+     *   { id: 'node-4', parent: 'node-2' },
+     *   { id: 'node-5', parent: 'node-4' },
+     * ]
+     * const tree = buildTree('id', 'parent', array)
+     * expect(tree).toEqual([
+     *   { id: 'node-1', parent: 'root' },
+     *   {
+     *     id: 'node-2',
+     *     parent: 'root',
+     *     children: [
+     *       { id: 'node-3', parent: 'node-2' },
+     *       {
+     *         id: 'node-4',
+     *         parent: 'node-2',
+     *         children: [{ id: 'node-5', parent: 'node-4' }],
+     *       },
+     *     ],
+     *   },
+     * ])
+     */
+    function buildTree(idProp, parentIdProp, items) {
+        const wrapperMap = new Map();
+        const ensure = (id) => {
+            if (wrapperMap.has(id)) {
+                return wrapperMap.get(id);
+            }
+            //@ts-ignore
+            const wrapper = { id, parent: null, item: null, children: [] };
+            wrapperMap.set(id, wrapper);
+            return wrapper;
+        };
+        for (const item of items) {
+            const parentWrapper = ensure(item[parentIdProp]);
+            const itemWrapper = ensure(item[idProp]);
+            //@ts-ignore
+            itemWrapper.parent = parentWrapper;
+            //@ts-ignore
+            parentWrapper.children.push(itemWrapper);
+            //@ts-ignore
+            itemWrapper.item = item;
+        }
+        const topLevelWrappers = flatMap(Array.from(wrapperMap.values()).filter(wrapper => wrapper.parent === null), wrapper => wrapper.children);
+        return unwrapRecursively(topLevelWrappers);
+        function unwrapRecursively(wrapperArray) {
+            const result = [];
+            for (const wrapper of wrapperArray) {
+                if (wrapper.children.length === 0) {
+                    result.push(wrapper.item);
+                }
+                else {
+                    result.push({
+                        ...wrapper.item,
+                        children: unwrapRecursively(wrapper.children)
+                    });
+                }
+            }
+            return result;
+        }
+    }
 
     // @ref https://cubic-bezier.com/
     const easingDefines = {
@@ -1791,6 +1890,113 @@
         return uniqueString;
     };
 
+    /**
+     * @title tooltip
+     * @Desc 自定义的tooltip方法, 支持拖动悬浮提示
+     * Created by chendeqiao on 2017/5/8.
+     * @example
+     *  <span onmouseleave="handleMouseLeave('#root')" onmousemove="handleMouseEnter({rootElId: '#root', title: 'title content', event: event})"
+     * 		onmouseenter="handleMouseEnter({'#root', title: 'title content', event: event})">title content </span>
+     */
+    /**
+     * 自定义title提示功能的mouseenter事件句柄
+     * @param {ITooltipParams} param1
+     * @returns {*}
+     */
+    function handleMouseEnter({ rootElId = '#root', title, event }) {
+        try {
+            const $rootEl = document.querySelector(rootElId);
+            console.assert($rootEl !== null, `未找到id为 ${rootElId} 的dom元素`);
+            let $customTitle = null;
+            // 动态创建class样式，并加入到head中
+            if (!document.querySelector('.tooltip-inner1494304949567')) {
+                const tooltipWrapperClass = document.createElement('style');
+                tooltipWrapperClass.type = 'text/css';
+                tooltipWrapperClass.innerHTML = `
+        .tooltip-inner1494304949567 {
+          max-width: 250px;
+          padding: 3px 8px;
+          color: #fff;
+          text-decoration: none;
+          border-radius: 4px;
+          text-align: left;
+        }
+      `;
+                document.querySelector('head').appendChild(tooltipWrapperClass);
+            }
+            if (document.querySelector('#customTitle1494304949567')) {
+                $customTitle = document.querySelector('#customTitle1494304949567');
+                mouseenter($customTitle, title, event);
+            }
+            else {
+                const $contentContainer = document.createElement('div');
+                $contentContainer.className = 'customTitle';
+                $contentContainer.id = 'customTitle1494304949567';
+                $contentContainer.className = 'tooltip';
+                $contentContainer.style.cssText = 'z-index: 99999999; visibility: hidden;';
+                $contentContainer.innerHTML =
+                    '<div class="tooltip-inner1494304949567" style="word-wrap: break-word; max-width: 44px;">皮肤</div>';
+                $rootEl.appendChild($contentContainer);
+                $customTitle = document.querySelector('#customTitle1494304949567');
+                if (title) {
+                    //判断div显示的内容是否为空
+                    mouseenter($customTitle, title, event);
+                    $customTitle.style.visibility = 'visible';
+                }
+            }
+        }
+        catch (e) {
+            console.error(e.message);
+        }
+    }
+    /**
+     * 提示文案dom渲染的处理函数
+     * @param {HTMLDivElement} customTitle
+     * @param {string} title 提示的字符串
+     * @param {PointerEvent} e 事件对象
+     * @returns {*}
+     */
+    function mouseenter($customTitle, title, e) {
+        let diffValueX = 200 + 50; //默认设置弹出div的宽度为250px
+        let x = 13;
+        const y = 23;
+        const $contentEle = $customTitle.children[0];
+        if (getStrWidthPx(title, 12) < 180 + 50) {
+            //【弹出div自适应字符串宽度】若显示的字符串占用宽度小于180，则设置弹出div的宽度为“符串占用宽度”+20
+            $contentEle.style.maxWidth = getStrWidthPx(title, 12) + 20 + 50 + 'px';
+            diffValueX = e.clientX + (getStrWidthPx(title, 12) + 50) - document.body.offsetWidth;
+        }
+        else {
+            $contentEle.style.maxWidth = '250px';
+            diffValueX = e.clientX + 230 - document.body.offsetWidth; //计算div水平方向显示的内容超出屏幕多少宽度
+        }
+        $contentEle.innerHTML = title; //html方法可解析内容中换行标签，text方法不能
+        if (diffValueX > 0) {
+            //水平方向超出可见区域时
+            x -= diffValueX;
+        }
+        $customTitle.style.top = e.clientY + y + 'px';
+        $customTitle.style.left = e.clientX + x + 'px';
+        $customTitle.style.maxWidth = '250px';
+        const diffValueY = $customTitle.getBoundingClientRect().top + $contentEle.offsetHeight - document.body.offsetHeight;
+        if (diffValueY > 0) {
+            //垂直方向超出可见区域时
+            $customTitle.style.top = e.clientY - diffValueY + 'px';
+        }
+    }
+    /**
+     * 移除提示文案dom的事件句柄
+     * @param {string} rootElId
+     * @returns {*}
+     */
+    function handleMouseLeave(rootElId = '#root') {
+        const rootEl = document.querySelector(rootElId), titleEl = document.querySelector('#customTitle1494304949567');
+        if (rootEl && titleEl) {
+            rootEl.removeChild(titleEl);
+        }
+    }
+    const tooltipEvent = { handleMouseEnter, handleMouseLeave };
+
     exports.HEX_POOL = HEX_POOL;
     exports.STRING_ARABIC_NUMERALS = STRING_ARABIC_NUMERALS;
     exports.STRING_LOWERCASE_ALPHA = STRING_LOWERCASE_ALPHA;
@@ -1804,6 +2010,7 @@
     exports.arrayLike = arrayLike;
     exports.arrayRemove = arrayRemove;
     exports.asyncMap = asyncMap;
+    exports.buildTree = buildTree;
     exports.calculateDate = calculateDate;
     exports.calculateDateTime = calculateDateTime;
     exports.chooseLocalFile = chooseLocalFile;
@@ -1816,11 +2023,11 @@
     exports.dateToEnd = dateToEnd;
     exports.dateToStart = dateToStart;
     exports.debounce = debounce;
-    exports.deepTraversal = deepTraversal;
     exports.downloadBlob = downloadBlob;
     exports.downloadData = downloadData;
     exports.downloadHref = downloadHref;
     exports.downloadURL = downloadURL;
+    exports.forEachDeep = forEachDeep;
     exports.formatDate = formatDate;
     exports.formatNumber = formatNumber;
     exports.genCanvasWM = genCanvasWM;
@@ -1828,7 +2035,6 @@
     exports.getGlobal = getGlobal;
     exports.getStrWidthPx = getStrWidthPx;
     exports.getStyle = getStyle;
-    exports.getTreeIds = getTreeIds;
     exports.hasClass = hasClass;
     exports.isArray = isArray;
     exports.isBigInt = isBigInt;
@@ -1870,6 +2076,7 @@
     exports.randomString = randomString;
     exports.randomUuid = randomUuid;
     exports.removeClass = removeClass;
+    exports.searchTreeById = searchTreeById;
     exports.setGlobal = setGlobal;
     exports.setStyle = setStyle;
     exports.smoothScroll = smoothScroll;
@@ -1880,6 +2087,7 @@
     exports.stringFormat = stringFormat;
     exports.stringKebabCase = stringKebabCase;
     exports.throttle = throttle;
+    exports.tooltipEvent = tooltipEvent;
     exports.typeIs = typeIs;
     exports.uniqueNumber = uniqueNumber;
     exports.uniqueString = uniqueString;

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "sculp-js",
-  "version": "1.0.0",
-  "private": false,
+  "version": "1.1.0",
+  "packageManager": "npm@8.19.2",
   "description": "js工具库",
   "scripts": {
     "prepare": "husky install",
-    "build": "NODE_OPTIONS=--max-old-space-size=2048 rollup  --bundleConfigAsCjs --config rollup.config.js",
+    "build": "rollup  --bundleConfigAsCjs --config rollup.config.js",
     "build:terser": "node scripts/build.js",
     "test:unit": "jest",
     "test": "jest --coverage",
+    "coveralls": "jest --coverage --coverageReporters=text-lcov | coveralls",
     "lint": "eslint ./src --ext .vue,.js,jsx,.ts,tsx",
     "lint:fix": "eslint --fix ./src --ext .vue,.js,jsx,.ts,tsx",
     "prettier": "prettier -c --write \"**/*.{vue,ts,js,jsx,css,less,scss,json}\"",
@@ -35,11 +36,11 @@
     "lib"
   ],
   "keywords": [
-    "js-utils",
-    "utils"
+    "typescript",
+    "js-utils"
   ],
   "engines": {
-    "node": ">=12.0.0"
+    "node": ">=16"
   },
   "repository": "git@github.com:chandq/sculp-js.git",
   "dependencies": {