sculp-js 1.0.1 → 1.2.0

package/lib/umd/index.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v1.0.0
+ * sculp-js v1.1.0
  * (c) 2023-2023 chandq
  * Released under the MIT License.
  */
@@ -361,95 +361,6 @@
         indexes.forEach((val, idx) => array.splice(val - idx, 1));
         return array;
     }
-    /**
-     * 自定义深度优先遍历函数(支持continue和break操作)
-     * @param {ArrayLike<V>} tree  树形数据
-     * @param {Function} iterator  迭代函数, 返回值为true时continue, 返回值为false时break
-     * @param {string} children 定制子元素的key
-     * @param {boolean} isReverse  是否反向遍历
-     * @returns {*}
-     */
-    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 === false) {
-                        isBreak = true;
-                        break;
-                    }
-                    else if (re === true) {
-                        continue;
-                    }
-                    // @ts-ignore
-                    if (Array.isArray(arr[i][children])) {
-                        ++level;
-                        // @ts-ignore
-                        walk(arr[i][children], arr[i]);
-                    }
-                }
-            }
-            else {
-                for (let i = 0; i < arr.length; i++) {
-                    if (isBreak) {
-                        break;
-                    }
-                    const re = iterator(arr[i], i, tree, parent, level);
-                    if (re === false) {
-                        isBreak = true;
-                        break;
-                    }
-                    else if (re === true) {
-                        continue;
-                    }
-                    // @ts-ignore
-                    if (Array.isArray(arr[i][children])) {
-                        ++level;
-                        // @ts-ignore
-                        walk(arr[i][children], arr[i]);
-                    }
-                }
-            }
-        };
-        walk(tree, null);
-    }
-    /**
-     * 在树中找到 id 为某个值的节点，并返回上游的所有父级节点
-     *
-     * @param {ArrayLike<T>} tree - 树形数据
-     * @param {IdLike} nodeId - 元素ID
-     * @param {ITreeConf} config - 迭代配置项
-     * @returns {[IdLike[], ITreeItem<V>[]]} - 由parentId...childId, parentObject-childObject组成的二维数组
-     */
-    function searchTreeById(tree, nodeId, config) {
-        const { children = 'children', id = 'id' } = config || {};
-        const toFlatArray = (tree, parentId, parent) => {
-            return tree.reduce((t, _) => {
-                const child = _[children];
-                return [
-                    ...t,
-                    parentId ? { ..._, parentId, parent } : _,
-                    ...(child && child.length ? toFlatArray(child, _[id], _) : [])
-                ];
-            }, []);
-        };
-        const getIds = (flatArray) => {
-            let child = flatArray.find(_ => _[id] === nodeId);
-            const { parent, parentId, ...other } = child;
-            let ids = [nodeId], nodes = [other];
-            while (child && child.parentId) {
-                ids = [child.parentId, ...ids];
-                nodes = [child.parent, ...nodes];
-                child = flatArray.find(_ => _[id] === child.parentId); // eslint-disable-line
-            }
-            return [ids, nodes];
-        };
-        return getIds(toFlatArray(tree));
-    }
 
     // @ref https://cubic-bezier.com/
     const easingDefines = {
@@ -1912,6 +1823,206 @@
     }
     const tooltipEvent = { handleMouseEnter, handleMouseLeave };
 
+    const defaultFieldOptions = { keyField: 'key', childField: 'children', pidField: 'pid' };
+    /**
+     * 自定义深度优先遍历函数(支持continue和break操作), 可用于insert tree item 和 remove tree item
+     * @param {ArrayLike<V>} tree  树形数据
+     * @param {Function} iterator  迭代函数, 返回值为true时continue, 返回值为false时break
+     * @param {string} children 定制子元素的key
+     * @param {boolean} isReverse  是否反向遍历
+     * @returns {*}
+     */
+    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, arr, tree, parent, level);
+                    if (re === false) {
+                        isBreak = true;
+                        break;
+                    }
+                    else if (re === true) {
+                        continue;
+                    }
+                    // @ts-ignore
+                    if (arr[i] && Array.isArray(arr[i][children])) {
+                        ++level;
+                        // @ts-ignore
+                        walk(arr[i][children], arr[i]);
+                    }
+                }
+            }
+            else {
+                for (let i = 0; i < arr.length; i++) {
+                    if (isBreak) {
+                        break;
+                    }
+                    const re = iterator(arr[i], i, arr, tree, parent, level);
+                    if (re === false) {
+                        isBreak = true;
+                        break;
+                    }
+                    else if (re === true) {
+                        continue;
+                    }
+                    // @ts-ignore
+                    if (arr[i] && Array.isArray(arr[i][children])) {
+                        ++level;
+                        // @ts-ignore
+                        walk(arr[i][children], arr[i]);
+                    }
+                }
+            }
+        };
+        walk(tree, null);
+    }
+    /**
+     * 在树中找到 id 为某个值的节点，并返回上游的所有父级节点
+     *
+     * @param {ArrayLike<T>} tree - 树形数据
+     * @param {IdLike} nodeId - 元素ID
+     * @param {ITreeConf} config - 迭代配置项
+     * @returns {[IdLike[], ITreeItem<V>[]]} - 由parentId...childId, parentObject-childObject组成的二维数组
+     */
+    function searchTreeById(tree, nodeId, config) {
+        const { children = 'children', id = 'id' } = config || {};
+        const toFlatArray = (tree, parentId, parent) => {
+            return tree.reduce((t, _) => {
+                const child = _[children];
+                return [
+                    ...t,
+                    parentId ? { ..._, parentId, parent } : _,
+                    ...(child && child.length ? toFlatArray(child, _[id], _) : [])
+                ];
+            }, []);
+        };
+        const getIds = (flatArray) => {
+            let child = flatArray.find(_ => _[id] === nodeId);
+            const { parent, parentId, ...other } = child;
+            let ids = [nodeId], nodes = [other];
+            while (child && child.parentId) {
+                ids = [child.parentId, ...ids];
+                nodes = [child.parent, ...nodes];
+                child = flatArray.find(_ => _[id] === child.parentId); // eslint-disable-line
+            }
+            return [ids, nodes];
+        };
+        return getIds(toFlatArray(tree));
+    }
+    /**
+     * 使用迭代函数转换数组
+     * @param {T} array
+     * @param {Function} callback 迭代函数
+     * @returns {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;
+        }
+    }
+    /**
+     * 扁平化数组转换成树(效率高于buildTree)
+     * @param {any[]} list
+     * @param {IFieldOptions} options
+     * @returns {any[]}
+     */
+    function formatTree(list, options = defaultFieldOptions) {
+        const { keyField, childField, pidField } = options;
+        const treeArr = [];
+        const sourceMap = {};
+        list.forEach(item => {
+            sourceMap[item[keyField]] = item;
+        });
+        list.forEach(item => {
+            const parent = sourceMap[item[pidField]];
+            if (parent) {
+                (parent[childField] || (parent[childField] = [])).push(item);
+            }
+            else {
+                treeArr.push(item);
+            }
+        });
+        return treeArr;
+    }
+
     exports.HEX_POOL = HEX_POOL;
     exports.STRING_ARABIC_NUMERALS = STRING_ARABIC_NUMERALS;
     exports.STRING_LOWERCASE_ALPHA = STRING_LOWERCASE_ALPHA;
@@ -1925,6 +2036,7 @@
     exports.arrayLike = arrayLike;
     exports.arrayRemove = arrayRemove;
     exports.asyncMap = asyncMap;
+    exports.buildTree = buildTree;
     exports.calculateDate = calculateDate;
     exports.calculateDateTime = calculateDateTime;
     exports.chooseLocalFile = chooseLocalFile;
@@ -1944,6 +2056,7 @@
     exports.forEachDeep = forEachDeep;
     exports.formatDate = formatDate;
     exports.formatNumber = formatNumber;
+    exports.formatTree = formatTree;
     exports.genCanvasWM = genCanvasWM;
     exports.getComputedCssVal = getComputedCssVal;
     exports.getGlobal = getGlobal;

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "sculp-js",
-  "version": "1.0.1",
-  "private": false,
+  "version": "1.2.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}\"",
@@ -21,6 +22,7 @@
   "main": "lib/cjs/index.js",
   "module": "lib/es/index.js",
   "browser": "lib/umd/index.js",
+  "unpkg": "lib/umd/index.js",
   "types": "lib/index.d.ts",
   "typings": "lib/index.d.ts",
   "exports": {
@@ -35,13 +37,15 @@
     "lib"
   ],
   "keywords": [
-    "js-utils",
-    "utils"
+    "typescript",
+    "js-utils"
   ],
   "engines": {
-    "node": ">=12.0.0"
+    "node": ">=16"
   },
   "repository": "git@github.com:chandq/sculp-js.git",
+  "license": "MIT",
+  "homepage": "https://github.com/chandq/sculp-js#readme",
   "dependencies": {
     "bezier-easing": "^2.1.0",
     "core-js": "^3.33.0"