pixuireactcomponents 1.5.10 → 1.5.12

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "pixuireactcomponents",
-    "version": "1.5.10",
+    "version": "1.5.12",
     "description": "pixui react components",
     "main": "index.js",
     "scripts": {

package/src/components/react/app/carousel/Carousel.js

@@ -68,29 +68,25 @@ export function Carousel(props) {
         : 0.3 : _p;
     // console.log('children', children.length);
     var safeNext = function () {
-        // console.log('safeNext1', canClickSwitch.current, isMoving.current);
-        if (!canClickSwitch.current || isMoving.current)
+        if (!canClickSwitch.current)
             return;
-        // console.log('safeNext2');
         canClickSwitch.current = false;
         if (safeNextHandle.current)
             clearTimeout(safeNextHandle.current);
         safeNextHandle.current = setTimeout(function () {
             canClickSwitch.current = true;
-        }, 1000);
+        }, 1100);
         handleNext();
     };
     var safePrev = function () {
-        // console.log('safePrev1', canClickSwitch.current, isMoving.current);
-        if (!canClickSwitch.current || isMoving.current)
+        if (!canClickSwitch.current)
             return;
-        // console.log('safePrev2');
         canClickSwitch.current = false;
         if (safePrevHandle.current)
             clearTimeout(safePrevHandle.current);
         safePrevHandle.current = setTimeout(function () {
             canClickSwitch.current = true;
-        }, 1000);
+        }, 1100);
         handlePrev();
     };
     useImperativeHandle(props.cRef, function () { return ({
@@ -98,7 +94,7 @@ export function Carousel(props) {
         handlePrev: safePrev,
         setShowIndex: setShowIndex,
     }); });
-    var duration = switchDuration < 1000 ? 1000 : switchDuration;
+    var duration = switchDuration < 1100 ? 1100 : switchDuration;
     var _q = useState(defaultIndex), showIndex = _q[0], setShowIndex = _q[1];
     //轮播元素正在滚动
     var isMoving = useRef(false);
@@ -106,8 +102,6 @@ export function Carousel(props) {
     var isMouseDown = useRef(false);
     var mouseDownX = useRef(0);
     var mouseDownY = useRef(0);
-    var lastAniFinishTime = useRef(0);
-    var isSideAniPlaying = useRef(false);
     //pixui在 onTransitionEnd 之后马上触发 transform 会丢onTransitionEnd
     var canClickSwitch = useRef(true);
     var handleNextRef = useRef(function () { });
@@ -173,7 +167,7 @@ export function Carousel(props) {
         };
     }, []);
     var handlePrev = function () {
-        if (isMoving.current || isMouseDown.current)
+        if (isMoving.current)
             return;
         isMoving.current = true;
         if (showIndex === 0) {
@@ -186,40 +180,20 @@ export function Carousel(props) {
     var handleNext = function () {
         if (!loop && showIndex == carouselItems.length - 2)
             return;
-        if (isMoving.current || isMouseDown.current)
+        if (isMoving.current)
             return;
         isMoving.current = true;
         setShowIndex(showIndex + 1);
     };
     var handleTransitionEnd = function () {
-        var now = Date.now();
-        // console.log(
-        //     'handleTransitionEnd ? isSideAniPlaying',
-        //     isSideAniPlaying.current,
-        //     'time',
-        //     now - lastAniFinishTime.current,
-        //     'showTransition',
-        //     showTransition
-        // );
-        if (!isSideAniPlaying.current && Math.abs(now - lastAniFinishTime.current) < 800) {
-            //pixui bug 重复触发handleTransitionEnd
-            return;
-        }
-        lastAniFinishTime.current = now;
         //判断前后补位元素准备跳转
         //在动画结束以后关掉，否则用鼠标拖动的时候不能补充剩下的offset
         if (isLastCarouseItem() || isFirstCarouseLastItem()) {
             setShowTransition(false);
-            isSideAniPlaying.current = true;
-            // console.log('handleTransitionEnd 1');
-        }
-        else {
-            // console.log('handleTransitionEnd 3');
-            isMoving.current = false;
-            isSideAniPlaying.current = false;
         }
+        isMoving.current = false;
         //触发onSlideChange
-        if (!isLastCarouseItem() && !isFirstCarouseLastItem() && onSlideChange && !isSideAniPlaying.current)
+        if (!isLastCarouseItem() && !isFirstCarouseLastItem() && onSlideChange && showTransition)
             onSlideChange(showIndex - 1);
         // 处理首尾特殊case
         if (isLastCarouseItem()) {
@@ -318,7 +292,7 @@ export function Carousel(props) {
                         display: 'flex',
                         width: isVertical ? compWidth : compWidth * carouselItems.length + 'px',
                         height: isVertical ? compHeight * carouselItems.length : compHeight + 'px',
-                        transition: "transform ".concat(showTransition ? '0.5s' : '0s', " ease 0s"),
+                        transition: "transform ".concat(showTransition ? '0.4s' : '0s', " ease 0s"),
                         transform: isVertical
                             ? "translate(0px, ".concat(offset + gestureoffset[1], "px)")
                             : "translate(".concat(offset + gestureoffset[0], "px, 0px)"),

package/src/components/react/app/listDrag/listDrag.d.ts

@@ -0,0 +1,27 @@
+import { h, Component } from 'preact';
+interface DragListProps {
+    items: string[];
+}
+interface DragListState {
+    items: string[];
+    draggingIndex: number | null;
+    dragOverIndex: number | null;
+    dragStartX: number;
+    dragStartY: number;
+    dragOffsetX: number;
+    dragOffsetY: number;
+    width: number;
+    height: number;
+    hoverIndex: number | null;
+}
+declare class DragList extends Component<DragListProps, DragListState> {
+    constructor(props: DragListProps);
+    handleMouseDown: (index: number, e: MouseEvent) => void;
+    handleMouseMove: (e: MouseEvent) => void;
+    handleMouseUp: () => void;
+    handleMouseEnter: (index: number) => void;
+    handleMouseLeave: () => void;
+    getDragOverIndex: (clientX: number, clientY: number) => number | null;
+    render(): h.JSX.Element;
+}
+export default DragList;

package/src/components/react/app/listDrag/listDrag.js

@@ -0,0 +1,150 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { h, Component } from 'preact';
+var DragList = /** @class */ (function (_super) {
+    __extends(DragList, _super);
+    function DragList(props) {
+        var _this = _super.call(this, props) || this;
+        _this.handleMouseDown = function (index, e) {
+            var rect = e.target.getBoundingClientRect();
+            _this.setState({
+                draggingIndex: index,
+                dragStartX: e.clientX,
+                dragStartY: e.clientY,
+                dragOffsetX: e.clientX - rect.left,
+                dragOffsetY: e.clientY - rect.top,
+                width: rect.width,
+                height: rect.height,
+            });
+        };
+        _this.handleMouseMove = function (e) {
+            var draggingIndex = _this.state.draggingIndex;
+            if (draggingIndex !== null) {
+                var dragOverIndex = _this.getDragOverIndex(e.clientX, e.clientY);
+                _this.setState({
+                    dragOverIndex: dragOverIndex,
+                    dragStartX: e.clientX,
+                    dragStartY: e.clientY,
+                });
+            }
+        };
+        _this.handleMouseUp = function () {
+            var _a = _this.state, draggingIndex = _a.draggingIndex, dragOverIndex = _a.dragOverIndex, items = _a.items;
+            if (draggingIndex !== null && dragOverIndex !== null) {
+                var newItems = __spreadArray([], items, true);
+                var draggedItem = newItems.splice(draggingIndex, 1)[0];
+                newItems.splice(dragOverIndex, 0, draggedItem);
+                _this.setState({
+                    items: newItems,
+                    draggingIndex: null,
+                    dragOverIndex: null,
+                });
+            }
+            else {
+                _this.setState({
+                    draggingIndex: null,
+                    dragOverIndex: null,
+                });
+            }
+        };
+        _this.handleMouseEnter = function (index) {
+            _this.setState({ hoverIndex: index });
+        };
+        _this.handleMouseLeave = function () {
+            _this.setState({ hoverIndex: null });
+        };
+        _this.getDragOverIndex = function (clientX, clientY) {
+            var _a = _this.state, draggingIndex = _a.draggingIndex, width = _a.width, height = _a.height, hoverIndex = _a.hoverIndex;
+            if (draggingIndex === null)
+                return null;
+            var element = document.elementFromPoint ? document.elementFromPoint(clientX, clientY) : null;
+            if (element == null) {
+                return hoverIndex;
+            }
+            if (element && element.className.includes('drag-item')) {
+                var targetIndex = Array.from(element.parentNode.children).indexOf(element);
+                if (targetIndex === draggingIndex)
+                    return null;
+                var targetRect = element.getBoundingClientRect();
+                var draggingRect = {
+                    left: clientX - _this.state.dragOffsetX,
+                    top: clientY - _this.state.dragOffsetY,
+                    right: clientX - _this.state.dragOffsetX + width,
+                    bottom: clientY - _this.state.dragOffsetY + height,
+                };
+                var overlapX = Math.min(draggingRect.right, targetRect.right) - Math.max(draggingRect.left, targetRect.left);
+                var overlapY = Math.min(draggingRect.bottom, targetRect.bottom) - Math.max(draggingRect.top, targetRect.top);
+                var overlapRatioX = overlapX / width;
+                var overlapRatioY = overlapY / height;
+                if (overlapRatioX >= 0.5 && overlapRatioY >= 0.5) {
+                    return targetIndex;
+                }
+            }
+            return null;
+        };
+        _this.state = {
+            items: props.items,
+            draggingIndex: null,
+            dragOverIndex: null,
+            dragStartX: 0,
+            dragStartY: 0,
+            dragOffsetX: 0,
+            dragOffsetY: 0,
+            width: 0,
+            height: 0,
+            hoverIndex: null,
+        };
+        return _this;
+    }
+    DragList.prototype.render = function () {
+        var _this = this;
+        var _a = this.state, items = _a.items, width = _a.width, height = _a.height, draggingIndex = _a.draggingIndex, dragOverIndex = _a.dragOverIndex, dragStartX = _a.dragStartX, dragStartY = _a.dragStartY, dragOffsetX = _a.dragOffsetX, dragOffsetY = _a.dragOffsetY, hoverIndex = _a.hoverIndex;
+        return (h("div", { style: { display: 'flex', flexWrap: 'wrap', flexDirection: 'row', alignItems: 'center', justifyContent: 'center' } },
+            items.map(function (item, index) { return (h("div", { key: index, draggable: true, style: {
+                    padding: '8px',
+                    border: '1px solid #ccc',
+                    cursor: 'grab',
+                    transition: 'transform 0.2s ease',
+                    margin: '0.1rem',
+                    position: 'relative',
+                    opacity: index === draggingIndex ? 0.5 : 1,
+                    zIndex: index === draggingIndex ? 1 : 'auto',
+                    backgroundColor: index === dragOverIndex ? '#f0f0f0' : '#fff',
+                }, onDragStart: function (e) { return _this.handleMouseDown(index, e); }, onDrag: _this.handleMouseMove, onDragEnd: _this.handleMouseUp, onMouseEnter: function () { return _this.handleMouseEnter(index); }, onMouseLeave: _this.handleMouseLeave }, item)); }),
+            draggingIndex !== null && (h("div", { style: {
+                    position: 'fixed',
+                    width: width,
+                    height: height,
+                    left: dragStartX - dragOffsetX,
+                    top: dragStartY - dragOffsetY,
+                    pointerEvents: 'none',
+                    backgroundColor: '#f0f0f0',
+                    padding: '8px',
+                    border: '1px solid #ccc',
+                } }, items[draggingIndex]))));
+    };
+    return DragList;
+}(Component));
+export default DragList;

package/src/components/react/app/scrollBar/ScrollBar.js

@@ -127,30 +127,25 @@ export var ScrollBar = function (props) {
     };
     // 拖动滑块时，页面跟着移动
     var sBlockScrolling = function (event) {
+        var y = 0;
         if (event.clientY - clientYtoBlockTop < sFrame.getBoundingClientRect().top) {
-            // 超出上边界,滑动到顶
-            setSBlockY(0);
+            y = 0;
         }
         else if (event.clientY - clientYtoBlockTop + sBlock.getBoundingClientRect().height > sFrame.getBoundingClientRect().bottom) {
-            // 超出下边界，滑动到底
-            setSBlockY(sFrame.getBoundingClientRect().height - sBlock.getBoundingClientRect().height);
+            y = sFrame.getBoundingClientRect().height - sBlock.getBoundingClientRect().height;
         }
         else {
-            setSBlockY(
-            // 滑块顶部距离sframe上边的差值 = 鼠标Y位置 - 鼠标Y距离元素顶部位置 - 滚动框绝对top
-            event.clientY - clientYtoBlockTop - sFrame.getBoundingClientRect().top);
-        }
-        {
-            //移动 content
-            var sblock_height = sBlock.getBoundingClientRect().height;
-            var sframe_height = sFrame.getBoundingClientRect().height;
-            var swindow_height = sWindow.getBoundingClientRect().height;
-            var content_height = sWindow.scrollHeight;
-            var slideMarginTop = sBlock.getBoundingClientRect().top - sFrame.getBoundingClientRect().top;
-            var rate = slideMarginTop / (sframe_height - sblock_height);
-            var content_scrollTop = (content_height - swindow_height) * rate;
-            sWindow.scrollTop = content_scrollTop;
-        }
+            y = event.clientY - clientYtoBlockTop - sFrame.getBoundingClientRect().top;
+        }
+        setSBlockY(y);
+        // //移动 content
+        var sblock_height = sBlock.getBoundingClientRect().height;
+        var sframe_height = sFrame.getBoundingClientRect().height;
+        var swindow_height = sWindow.getBoundingClientRect().height;
+        var content_height = sWindow.scrollHeight;
+        var rate = y / (sframe_height - sblock_height);
+        var content_scrollTop = (content_height - swindow_height) * rate;
+        sWindow.scrollTop = content_scrollTop;
     };
     useImperativeHandle(cRef, function () { return ({
         scrollTo: scrollTo,

package/src/js_components/index.d.ts

@@ -0,0 +1 @@
+export { frameAnimationJs, SpritePlugin, HMSETHelper, ktxConverter };

package/src/js_components/index.js

@@ -0,0 +1,11 @@
+"use strict";
+var frameAnimationJs = require('./dist/frameAnimationJs').frameAnimationJs;
+var SpritePlugin = require('./dist/sprite').SpritePlugin;
+var HMSETHelper = require('./dist/HMSETHelper').HMSETHelper;
+var ktxConverter = require('./dist/ktxConverter').ktxConverter;
+module.exports = {
+    frameAnimationJs: frameAnimationJs,
+    SpritePlugin: SpritePlugin,
+    HMSETHelper: HMSETHelper,
+    ktxConverter: ktxConverter,
+};

package/src/js_components/src/HMSETHelper.d.ts

@@ -0,0 +1,27 @@
+type HMSETData = {
+    [key: string]: HMSETData;
+} | Array<HMSETData> | string | number | boolean | null | undefined;
+/**
+ * 将obj转换为可以存储在MHSET中的数组,接受的数据结构为object和array之间的组合,key中不能包含 > [ ] 字符
+ */
+declare const HMSETHelper: {
+    /**展开obj   */
+    ObjToHM: (obj: HMSETData) => string[];
+    /**将展开的obj数组恢复为obj */
+    HMToObj: typeof unflattenObject;
+    /**增量更新用,比较两个obj的差异,返回一个数组,HMSET oldData, HMSET diff => newData */
+    DiffObjToHM: (oldData: HMSETData, newData: HMSETData) => string[];
+};
+declare function hasCycle(obj: HMSETData): boolean;
+declare function flattenObject(obj: HMSETData, prefix?: string, res?: string[]): string[];
+declare function parseValue(value: string): null | boolean | number | [] | {};
+type nestObj = HMSETData[] | {
+    [key: string]: HMSETData;
+};
+declare function keys2obj(keys: string[], value: string): nestObj;
+declare function isNull(obj: HMSETData): boolean;
+declare function getType(obj: HMSETData): string;
+declare const mergeObj: (obj1: HMSETData, obj2: HMSETData) => HMSETData;
+declare function unflattenObject(arr: string[]): {} | null;
+declare const runTest: () => void;
+declare function generateRandomObject(depth: number): HMSETData;

package/src/js_components/src/HMSETHelper.js

@@ -0,0 +1,297 @@
+"use strict";
+/**
+ * 将obj转换为可以存储在MHSET中的数组,接受的数据结构为object和array之间的组合,key中不能包含 > [ ] 字符
+ */
+var HMSETHelper = {
+    /**展开obj   */
+    ObjToHM: function (obj) {
+        if (hasCycle(obj)) {
+            console.error("obj has cycle");
+            return [];
+        }
+        return flattenObject(obj);
+    },
+    /**将展开的obj数组恢复为obj */
+    HMToObj: unflattenObject,
+    /**增量更新用,比较两个obj的差异,返回一个数组,HMSET oldData, HMSET diff => newData */
+    DiffObjToHM: function (oldData, newData) {
+        var oldTile = flattenObject(oldData);
+        var newTile = flattenObject(newData);
+        var res = [];
+        for (var i = 0; i < newTile.length; i += 2) {
+            var key = newTile[i];
+            var value = newTile[i + 1];
+            var index = oldTile.indexOf(key);
+            if (index === -1) {
+                res.push(key, value);
+            }
+            else {
+                //old有这个，检查是否有更新以后去掉
+                if (oldTile[index + 1] !== value) {
+                    res.push(key, value);
+                }
+                oldTile.splice(index, 2);
+            }
+        }
+        return res;
+    },
+};
+//检测obj是否有循环引用
+function hasCycle(obj) {
+    var visited = new Set();
+    function bfs(obj) {
+        var queue = [obj];
+        while (queue.length > 0) {
+            var cur = queue.shift();
+            if (getType(cur) === "string" || getType(cur) === "number" || getType(cur) === "boolean" || getType(cur) === "null") {
+                continue;
+            }
+            if (visited.has(cur)) {
+                console.error("has cycle", cur);
+                return true;
+            }
+            if (Array.isArray(cur)) {
+                queue.push.apply(queue, cur);
+            }
+            else if (getType(cur) === "object") {
+                cur = cur;
+                for (var key in cur) {
+                    queue.push(cur[key]);
+                }
+                visited.add(cur);
+            }
+        }
+        return false;
+    }
+    return bfs(obj);
+}
+function flattenObject(obj, prefix, res) {
+    if (prefix === void 0) { prefix = ""; }
+    if (res === void 0) { res = []; }
+    if (getType(obj) === "string") {
+        res.push(prefix, "\"".concat(obj, "\""));
+    }
+    else if (getType(obj) === "number" || getType(obj) === "boolean") {
+        obj = obj;
+        res.push(prefix, obj.toString());
+    }
+    else if (isNull(obj)) {
+        res.push(prefix, "null");
+    }
+    else if (getType(obj) === "array") {
+        obj = obj;
+        if (obj.length === 0) {
+            res.push(prefix, "[]");
+        }
+        else {
+            obj.forEach(function (item, index) {
+                flattenObject(item, prefix ? "".concat(prefix, ">[").concat(index, "]") : "[".concat(index, "]"), res);
+            });
+        }
+    }
+    else if (getType(obj) === "object") {
+        obj = obj;
+        if (Object.keys(obj).length === 0) {
+            res.push(prefix, "{}");
+        }
+        else {
+            Object.keys(obj).forEach(function (key) {
+                obj = obj;
+                flattenObject(obj[key], prefix ? "".concat(prefix, ">").concat(key) : key, res);
+            });
+        }
+    }
+    return res;
+}
+function parseValue(value) {
+    if (value.startsWith('"') && value.endsWith('"')) {
+        return value.slice(1, -1);
+    }
+    switch (value) {
+        case "null":
+            return null;
+        case "true":
+            return true;
+        case "false":
+            return false;
+        case "[]":
+            return [];
+        case "{}":
+            return {};
+        default:
+            return parseFloat(value);
+    }
+}
+function keys2obj(keys, value) {
+    var res = keys[0].substring(0, 1) === "[" ? [] : {};
+    if (keys[0].substring(0, 1) === "[") {
+        var idx = parseInt(keys[0].slice(1, -1));
+        res[idx] = keys.length === 1 ? parseValue(value) : keys2obj(keys.slice(1), value);
+    }
+    else {
+        res[keys[0]] = keys.length === 1 ? parseValue(value) : keys2obj(keys.slice(1), value);
+    }
+    return res;
+}
+function isNull(obj) {
+    return obj == null || obj == undefined;
+}
+function getType(obj) {
+    if (isNull(obj)) {
+        return "null";
+    }
+    if (Array.isArray(obj)) {
+        return "array";
+    }
+    return typeof obj;
+}
+var mergeObj = function (obj1, obj2) {
+    //merge two obj to obj1
+    if (getType(obj1) !== getType(obj2)) {
+        console.error("obj1 and obj2 type is different");
+        return obj1;
+    }
+    if (getType(obj1) === "array") {
+        obj1 = obj1;
+        obj2 = obj2;
+        for (var i = 0; i < Math.max(obj1.length, obj2.length); i++) {
+            if ((isNull(obj1[i]) && !isNull(obj2[i])) || (isNull(obj1[i]) && isNull(obj2[i]))) {
+                obj1[i] = obj2[i];
+            }
+            else if (!isNull(obj1[i]) && isNull(obj2[i])) {
+            }
+            else {
+                mergeObj(obj1[i], obj2[i]);
+            }
+        }
+    }
+    else if (getType(obj1) === "object") {
+        obj1 = obj1;
+        obj2 = obj2;
+        for (var key in obj1) {
+            if (obj2.hasOwnProperty(key)) {
+                mergeObj(obj1[key], obj2[key]);
+            }
+        }
+        for (var key in obj2) {
+            if (!obj1.hasOwnProperty(key)) {
+                obj1[key] = obj2[key];
+            }
+        }
+    }
+    return obj1;
+};
+function unflattenObject(arr) {
+    if (arr.length === 0)
+        return {};
+    if (arr.length % 2 !== 0) {
+        console.error("arr length is odd");
+        return {};
+    }
+    if (arr[0] == "") {
+        //无嵌套
+        return parseValue(arr[1]);
+    }
+    //有嵌套
+    var ans = arr[0].substring(0, 1) === "[" ? [] : {};
+    for (var i = 0; i < arr.length; i += 2) {
+        var keys = arr[i].split(">");
+        var value = arr[i + 1];
+        var tem = keys2obj(keys, value);
+        // console.log('tem', tem);
+        mergeObj(ans, tem);
+        //合并两个obj
+    }
+    return ans;
+}
+// let t2 = [];
+// let t2: HMSETData = [
+//     [['a', 'b', [[[]]]]],
+//     [{}, { a: [] }],
+//     { a: 'b', b: 123, c: [1, 2, 3, true, false, null, { a: 'b' }], d: null, e: { f: { g: { s: [] } } } },
+// ];
+// let t3: HMSETData = JSON.parse(JSON.stringify(t2));
+// t3![2].c[6].a = '123';
+// console.log(JSON.stringify(HMSETHelper.DiffObjToHM(t2, t3)));
+// let t2 = 'asd';
+// let t2 = [];
+// let t2 = [[[[[2]]]]];
+// let t2 = [[[[[]]]]];
+// let t2 = [false, null];
+// console.log(JSON.stringify(HMSETHelper.HMToObg(HMSETHelper.ObgToHM(t2))) == JSON.stringify(t2));
+// let t3 = JSON.parse(JSON.stringify(t));
+// t3.b.d[2].f[2].g = '10';
+// t3.b.d[2].f.push({ h: '11' });
+// console.log(JSON.stringify(HMSETHelper.diff(t, t3)));
+var runTest = function () {
+    var ok = true;
+    try {
+        for (var i = 0; i < 500; i++) {
+            if (!ok) {
+                break;
+            }
+            var deep = Math.floor(Math.random() * 6);
+            var obj = generateRandomObject(deep);
+            var flat_1 = HMSETHelper.ObjToHM(obj);
+            var obj2 = HMSETHelper.HMToObj(flat_1);
+            if (JSON.stringify(obj) !== JSON.stringify(obj2)) {
+                console.error("error!! ", JSON.stringify(obj, null, 4), "----------------", JSON.stringify(obj2, null, 4));
+                ok = false;
+                break;
+            }
+            else {
+                console.log("pass " + i);
+            }
+        }
+        //循环引用测试
+        var objA = {};
+        var objB = { parent: objA };
+        objA.child = objB;
+        var flat = HMSETHelper.ObjToHM(objA);
+        var objC = HMSETHelper.HMToObj(flat);
+        console.log(JSON.stringify(flat, null, 4));
+    }
+    catch (e) {
+        console.error(e);
+    }
+};
+// runTest();
+function generateRandomObject(depth) {
+    function getRDString() {
+        var characters = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!@#$%^&*()_+";
+        var l = Math.max(1, Math.floor(Math.random() * 10));
+        return Array.from({ length: l }, function () { return characters[Math.floor(Math.random() * characters.length)]; }).join("");
+    }
+    if (depth === 0) {
+        var resType = ["string", "number", "boolean", "null"][Math.floor(Math.random() * 4)];
+        var val = void 0;
+        if (resType === "string") {
+            val = getRDString();
+        }
+        else if (resType === "number") {
+            val = Math.floor(Math.random() * 100);
+        }
+        else if (resType === "boolean") {
+            val = Math.random() < 0.5;
+        }
+        else {
+            val = null;
+        }
+        return val;
+    }
+    var nestType = ["array", "object"][Math.floor(Math.random() * 2)];
+    var nestNum = Math.floor(Math.random() * 5);
+    var res = nestType === "array" ? [] : {};
+    if (nestType === "array") {
+        for (var i = 0; i < nestNum; i++) {
+            res[i] = generateRandomObject(depth - 1);
+        }
+    }
+    else {
+        for (var i = 0; i < nestNum; i++) {
+            res[getRDString()] = generateRandomObject(depth - 1);
+        }
+    }
+    return res;
+}
+module.exports = { HMSETHelper: HMSETHelper };

package/src/js_components/src/frameAnimationJs.d.ts

@@ -0,0 +1,32 @@
+export class frameAnimationJs {
+    constructor({ rootId, rootClassName, totalTime, width, height, srcArr, onShow, onFinish, preloadCount, loop, showLastFrame, }: {
+        rootId?: string | undefined;
+        rootClassName?: string | undefined;
+        totalTime: any;
+        width: any;
+        height: any;
+        srcArr: any;
+        onShow: any;
+        onFinish: any;
+        preloadCount?: number | undefined;
+        loop?: boolean | undefined;
+        showLastFrame?: boolean | undefined;
+    });
+    rootId: string;
+    rootClassName: string;
+    totalTime: any;
+    width: any;
+    height: any;
+    srcArr: any;
+    onShow: any;
+    onFinish: any;
+    preloadCount: number;
+    loop: boolean;
+    showLastFrame: boolean;
+    cRefArr: HTMLImageElement[];
+    imgEleArr: HTMLImageElement[];
+    nextFrame(startTime: any, oneFrameTime: any, showedFrame: any): void;
+    rootEle: HTMLDivElement;
+    init(): void;
+    getRootEle(): HTMLDivElement;
+}

package/src/js_components/src/frameAnimationJs.js

@@ -0,0 +1,125 @@
+"use strict";
+/**
+ * FrameAnimation的js版本
+ * @param rootId 根节点id
+ * @param rootClassName 根节点className
+ * @param totalTime 动画总时长
+ * @param width 组件宽度
+ * @param height 组件高度
+ * @param srcArr 图片url数组
+ * @param onShow 每一帧显示时的回调
+ * @param onFinish 动画结束时的回调
+ * @param preloadCount 预加载节点的数量
+ * @param loop 是否循环播放
+ * @param showLastFrame 播放结束后是否显示最后一帧
+ */
+module.exports.frameAnimationJs = /** @class */ (function () {
+    function frameAnimationJs(_a) {
+        var _b = _a.rootId, rootId = _b === void 0 ? '' : _b, _c = _a.rootClassName, rootClassName = _c === void 0 ? '' : _c, totalTime = _a.totalTime, width = _a.width, height = _a.height, srcArr = _a.srcArr, onShow = _a.onShow, onFinish = _a.onFinish, _d = _a.preloadCount, preloadCount = _d === void 0 ? 5 : _d, _e = _a.loop, loop = _e === void 0 ? false : _e, _f = _a.showLastFrame, showLastFrame = _f === void 0 ? true : _f;
+        var _this = this;
+        this.rootId = rootId;
+        this.rootClassName = rootClassName;
+        this.totalTime = totalTime;
+        this.width = width;
+        this.height = height;
+        this.srcArr = srcArr;
+        this.onShow = onShow;
+        this.onFinish = onFinish;
+        this.preloadCount = preloadCount;
+        this.loop = loop;
+        this.showLastFrame = showLastFrame;
+        this.cRefArr = Array.from({ length: preloadCount }, function () { return document.createElement('img'); });
+        this.imgEleArr = Array.from({ length: preloadCount }, function (v, i) {
+            _this.cRefArr[i].src = _this.srcArr[i];
+            _this.cRefArr[i].style.position = 'absolute';
+            _this.cRefArr[i].style.visibility = 'hidden';
+            _this.cRefArr[i].style.width = _this.width;
+            _this.cRefArr[i].style.height = _this.height;
+            return _this.cRefArr[i];
+        });
+        this.nextFrame = this.nextFrame.bind(this);
+        this.rootEle = document.createElement('div');
+        console.log('ccc');
+        this.init();
+    }
+    frameAnimationJs.prototype.init = function () {
+        var _this = this;
+        this.rootEle.style.width = this.width;
+        this.rootEle.style.height = this.height;
+        this.rootEle.id = this.rootId;
+        this.rootEle.className = this.rootClassName;
+        this.imgEleArr.forEach(function (ele) {
+            _this.rootEle.appendChild(ele);
+        });
+        var startTime = Date.now();
+        var oneFrameTime = this.totalTime / this.srcArr.length;
+        //设置第一帧
+        this.cRefArr[0].style.visibility = 'visible';
+        this.nextFrame(startTime, oneFrameTime, 0);
+    };
+    //循环修改imgEleArr的src和visibility实现帧动画,，记录上一帧的序号防止跳帧
+    frameAnimationJs.prototype.nextFrame = function (startTime, oneFrameTime, showedFrame) {
+        var _this = this;
+        var nowTime = Date.now();
+        //该显示第几帧
+        var nowFrame = Math.floor((nowTime - startTime) / oneFrameTime);
+        //使用第几个img元素
+        var nowArrIndex = nowFrame % this.preloadCount;
+        var showedArrIndex = showedFrame % this.preloadCount;
+        // console.log('nextFrame', nowFrame, 'nowArrIndex', nowArrIndex, 'nowFrame', nowFrame);
+        if (!this.cRefArr[0]) {
+            //组件已经被卸载
+            this.onFinish && this.onFinish();
+            return;
+        }
+        if (nowFrame >= this.srcArr.length) {
+            this.onFinish && this.onFinish();
+            if (!this.loop) {
+                this.cRefArr.forEach(function (ref, i) {
+                    ref.style.visibility = 'hidden';
+                });
+                if (this.showLastFrame) {
+                    //跳帧的话，最后一帧可能不是最后一张图片，设为最后一张图片
+                    this.cRefArr[0].src = this.srcArr[this.srcArr.length - 1];
+                    this.cRefArr[0].style.visibility = 'visible';
+                }
+                return;
+            }
+            //重置img标签的 src 和 visibility
+            this.cRefArr.forEach(function (ref, i) {
+                ref.style.visibility = 'hidden';
+                ref.src = _this.srcArr[i];
+            });
+            startTime = Date.now();
+            this.cRefArr[0].style.visibility = 'visible';
+            requestAnimationFrame(function () {
+                _this.nextFrame(startTime, oneFrameTime, 0);
+            });
+            return;
+        }
+        if (nowFrame !== showedFrame) {
+            this.cRefArr[nowArrIndex].style.visibility = 'visible';
+            //隐藏上一帧
+            this.cRefArr[showedArrIndex].style.visibility = 'hidden';
+            //可能跳帧，在所有其他的元素上预加载
+            this.cRefArr.forEach(function (ref, i) {
+                if (i !== nowArrIndex) {
+                    var offset = (i + _this.cRefArr.length - nowArrIndex) % _this.cRefArr.length;
+                    var offsetFrame = (nowFrame + offset) % _this.srcArr.length;
+                    if (ref.src !== _this.srcArr[offsetFrame]) {
+                        ref.src = _this.srcArr[offsetFrame];
+                    }
+                }
+            });
+            showedFrame = nowFrame;
+            this.onShow && this.onShow(nowFrame);
+        }
+        requestAnimationFrame(function () {
+            _this.nextFrame(startTime, oneFrameTime, showedFrame);
+        });
+    };
+    frameAnimationJs.prototype.getRootEle = function () {
+        return this.rootEle;
+    };
+    return frameAnimationJs;
+}());