pixuireactcomponents 1.3.28 → 1.3.30

package/package.json

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

package/src/components/react/app/frameAnimation/FrameAnimation.d.ts

@@ -0,0 +1,11 @@
+import { h } from 'preact';
+export declare let FrameAnimation: (props: {
+    totalTime: number;
+    width: number;
+    height: number;
+    srcArr: string[];
+    onShow?: Function | undefined;
+    preloadCount?: number | undefined;
+    loop?: boolean | undefined;
+    showLastFrame?: boolean | undefined;
+}) => h.JSX.Element;

package/src/components/react/app/frameAnimation/FrameAnimation.js

@@ -0,0 +1,63 @@
+import { useEffect, useRef } from 'preact/hooks';
+import { createRef, h } from 'preact';
+export var FrameAnimation = function (props) {
+    props.preloadCount = Math.max(props.preloadCount || 5, 5);
+    props.loop = props.loop || false;
+    props.showLastFrame = props.showLastFrame || true;
+    var totalTime = props.totalTime, width = props.width, height = props.height, srcArr = props.srcArr, onShow = props.onShow, preloadCount = props.preloadCount, loop = props.loop;
+    var cRefArr = useRef(Array.from({ length: preloadCount }, function () { return createRef(); })).current;
+    var imgEleArr = useRef(Array.from({ length: preloadCount }, function (v, i) {
+        return (h("img", { ref: cRefArr[i], src: srcArr[i], style: { position: 'absolute', visibility: 'hidden', width: width + 'px', height: height + 'px' } }));
+    })).current;
+    useEffect(function () {
+        var startTime = Date.now();
+        var onrFrameTime = totalTime / srcArr.length;
+        //设置第一帧
+        cRefArr[0].current.src = srcArr[0];
+        cRefArr[0].current.style.visibility = 'visible';
+        nextFrame(startTime, onrFrameTime, 0);
+    }, []);
+    //循环修改imgEleArr的src和visibility实现帧动画,，记录上一帧的序号防止跳帧
+    var nextFrame = function (startTime, v, showedFrame) {
+        var nowTime = Date.now();
+        // console.log('nextFrame', 'nowTime', nowTime, 'startTime', startTime, 'nowArrIndex', nowArrIndex, 'nowFrame', nowFrame);
+        //该显示第几帧
+        var nowFrame = Math.floor((nowTime - startTime) / v);
+        //使用第几个img元素
+        var nowArrIndex = nowFrame % preloadCount;
+        var showedArrIndex = showedFrame % preloadCount;
+        if (nowFrame >= srcArr.length) {
+            if (!loop) {
+                if (!props.showLastFrame) {
+                    cRefArr.forEach(function (ref, i) {
+                        ref.current.style.visibility = 'hidden';
+                    });
+                }
+                return;
+            }
+            //重置img标签的 src 和 visibility
+            cRefArr.forEach(function (ref, i) {
+                ref.current.style.visibility = 'hidden';
+                ref.current.src = srcArr[i];
+            });
+            startTime = Date.now();
+            requestAnimationFrame(function () {
+                nextFrame(startTime, v, 0);
+            });
+            return;
+        }
+        if (nowFrame !== showedFrame) {
+            cRefArr[nowArrIndex].current.style.visibility = 'visible';
+            //隐藏上一帧
+            cRefArr[showedArrIndex].current.style.visibility = 'hidden';
+            //预加载
+            cRefArr[showedArrIndex].current.src = srcArr[(nowFrame + preloadCount - 1) % srcArr.length];
+            showedFrame = nowFrame;
+            onShow && onShow(nowFrame);
+        }
+        requestAnimationFrame(function () {
+            nextFrame(startTime, v, showedFrame);
+        });
+    };
+    return h("div", { style: { width: width + 'px', height: height + 'px' } }, imgEleArr);
+};

package/src/components/react/app/slider/Slider.js

@@ -366,9 +366,9 @@ export var Slider = /** @class */ (function (_super) {
         return (h("div", { style: this.props.hasIncDecButton ? this.state.withButtonStyle : {}, id: this.props.id, className: this.props.className },
             this.props.hasIncDecButton && h("img", { src: this.props.decButtonBg, style: this.state.decButtonStyle, onClick: this.onDecClick }),
             h("div", { ref: this.refWrapper, style: this.state.wrapperStyle },
-                h("div", { style: this.state.outerStyle },
+                h("div", { style: this.state.outerStyle, draggable: true, onDragStart: this.onDragStart, onDrag: this.onDrag, onDragEnd: this.onDragEnd },
                     h("div", { style: __assign(__assign({}, this.state.innerStyle), { width: innerWidth }) },
-                        h("div", { style: __assign(__assign({}, this.state.dotWrapperStyle), { marginLeft: dotWrapperMarginLeft }), draggable: true, onDragStart: this.onDragStart, onDrag: this.onDrag, onDragEnd: this.onDragEnd }, hasDot && h("img", { src: this.props.dotBg, style: this.state.dotStyle }))))),
+                        h("div", { style: __assign(__assign({}, this.state.dotWrapperStyle), { marginLeft: dotWrapperMarginLeft }) }, hasDot && h("img", { src: this.props.dotBg, style: this.state.dotStyle }))))),
             this.props.hasIncDecButton && h("img", { src: this.props.incButtonBg, style: this.state.incButtonStyle, onClick: this.onIncClick })));
     };
     Slider.defaultProps = {

package/src/components/tools/makeImage.d.ts

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+export function preProcessPath(texturePath: any): any;
+export function createAutoGen(): void;

package/src/components/tools/makeImage.js

@@ -0,0 +1,129 @@
+#!/usr/bin/env node
+'use strict';
+// 自动生成图集, 生成一个Images.ts文件，引用目标目录下的所有图片, 方便直接使用
+/*
+    commands:
+        create imgDirectoryPath
+        update imgDirectoryPath
+*/
+var fs = require('fs');
+var path = require('path');
+var texturePath = 'src/tempAssets/asset/textures';
+var targetPath = 'src/tempAssets/autoGen/';
+module.exports.preProcessPath = function (texturePath) {
+    var _path = texturePath;
+    if (isStartWithLetter(_path)) {
+        _path = './' + _path;
+    }
+    else if (_path.startsWith('../')) {
+        _path = './' + _path;
+    }
+    if (_path.endsWith('/'))
+        _path = _path.substring(0, _path.length - 1);
+    return _path;
+};
+function isStartWithLetter(path) {
+    if (path.length == 0)
+        return false;
+    var firstChar = path.charAt(0);
+    if ((firstChar >= 'a' && firstChar <= 'z') || (firstChar >= 'A' && firstChar <= 'Z'))
+        return true;
+    return false;
+}
+module.exports.createAutoGen = function () {
+    var imgUrls = [];
+    var includesUrls = [];
+    collectImageUrls(texturePath, imgUrls, true);
+    collectIncludes(FCsPath, includesUrls, true);
+    imgUrls.sort();
+    includesUrls.sort();
+    generateImage(texturePath, imgUrls);
+    generateInclude(includesUrls);
+};
+function isDirectoryExist(directory) {
+    var stat;
+    try {
+        stat = fs.lstatSync(directory);
+    }
+    catch (e) {
+        return false;
+    }
+    return stat.isDirectory();
+}
+function collectImageUrls(texturePath, imgUrls, isFirst) {
+    var files = fs.readdirSync(texturePath);
+    for (var i = 0; i < files.length; i++) {
+        var current = path.join(texturePath, files[i]).replaceAll('\\', '/');
+        if (isDirectoryExist(current)) {
+            // if it's a directory ,recursive
+            collectImageUrls(current, imgUrls, false);
+        }
+        else {
+            if (!isAnImg(current))
+                continue;
+            imgUrls.push(current);
+        }
+    }
+}
+function collectIncludes(FCsPath, includesUrls, isFirst) {
+    var files = fs.readdirSync(FCsPath);
+    for (var i = 0; i < files.length; i++) {
+        var current = path.join(FCsPath, files[i]).replaceAll('\\', '/');
+        if (isDirectoryExist(current)) {
+            // if it's a directory ,recursive
+            collectIncludes(current, includesUrls, false);
+        }
+        else {
+            if (!current.endsWith('.tsx'))
+                continue;
+            includesUrls.push(current);
+        }
+    }
+}
+function isAnImg(imgUrl) {
+    if (imgUrl.endsWith('.png') || imgUrl.endsWith('.jpg') || imgUrl.endsWith('.jpeg') || imgUrl.endsWith('.gif'))
+        return true;
+    return false;
+}
+function generateImage(texturePath, imgUrls, keyMap) {
+    var out = targetPath + 'Images.ts';
+    fs.writeFileSync(out, '');
+    // write import
+    for (var i = 0; i < imgUrls.length; i++) {
+        var current = imgUrls[i];
+        var imgKey = generateImgKey(texturePath, current);
+        if (current.startsWith('../'))
+            current = './' + current;
+        // console.warn(texturePath, current, imgKey)
+        fs.writeFileSync(out, 'import '.concat(imgKey, ' from "').concat(current, '";\n'), { flag: 'a+' });
+    }
+    fs.writeFileSync(out, '\n\n', { flag: 'a+' });
+    //write export
+    fs.writeFileSync(out, '\nexport const Images = {\n', { flag: 'a+' });
+    for (var i = 0; i < imgUrls.length; i++) {
+        var current = imgUrls[i];
+        var imgKey = generateImgKey(texturePath, current);
+        var imgNewname = keyMap == null || keyMap.get(imgKey) == undefined ? imgKey : keyMap.get(imgKey);
+        fs.writeFileSync(out, '  '.concat(imgNewname, ': ').concat(imgKey, ',\n'), { flag: 'a+' });
+    }
+    fs.writeFileSync(out, '}\n\n', { flag: 'a+' });
+    console.log(keyMap == null ? 'generate' : 'update', ' Images.ts successfully!');
+}
+function generateImgKey(texturePath, imgUrl) {
+    var key = imgUrl.substring(texturePath.length);
+    key = key.replace(/\//g, '_');
+    if (key.startsWith('_'))
+        key = key.substring(1);
+    var extname = path.extname(key);
+    key = key.substring(0, key.length - extname.length);
+    return key;
+}
+function generateInclude(fileUrls) {
+    var out = targetPath + 'templatesImport.ts';
+    fs.writeFileSync(out, '');
+    for (var i = 0; i < fileUrls.length; i++) {
+        var current = fileUrls[i];
+        var writestr = 'import '.concat("'" + current.substring(0, current.length - 4), "';\n");
+        fs.writeFileSync(out, writestr, { flag: 'a+' });
+    }
+}

package/src/components/tools/MakeImage.d.ts

@@ -1,2 +0,0 @@
-#!/usr/bin/env node
-export {};

package/src/components/tools/MakeImage.js

@@ -1,184 +0,0 @@
-#!/usr/bin/env node
-"use strict";
-// 自动生成图集, 生成一个Images.ts文件，引用目标目录下的所有图片, 方便直接使用
-/*
-    commands:
-        create imgDirectoryPath
-        update imgDirectoryPath
-*/
-var fs = require('fs');
-var path = require('path');
-// 支持的命令
-var Commands = {
-    create: 'create',
-    update: 'update', //更新图集
-};
-var args = process.argv;
-console.log('makeImage args:', args);
-if (args.length != 4) {
-    console.error('the num of params is wrong!');
-    process.exit();
-}
-var command = args[2];
-var imgsDirectoryPath = args[3];
-var _unifiedPath = preProcessPath(imgsDirectoryPath);
-switch (command) {
-    case Commands.create:
-        createImages(_unifiedPath);
-        break;
-    case Commands.update:
-        updateImages(_unifiedPath);
-        break;
-    default:
-        console.log('unsupport this command!!!');
-}
-function preProcessPath(directoryPath) {
-    var _path = directoryPath;
-    if (isStartWithLetter(_path)) {
-        _path = './' + _path;
-    }
-    else if (_path.startsWith('../')) {
-        _path = './' + _path;
-    }
-    if (_path.endsWith('/'))
-        _path = _path.substring(0, _path.length - 1);
-    return _path;
-}
-function isStartWithLetter(path) {
-    if (path.length == 0)
-        return false;
-    var firstChar = path.charAt(0);
-    if ((firstChar >= 'a' && firstChar <= 'z') || (firstChar >= 'A' && firstChar <= 'Z'))
-        return true;
-    return false;
-}
-function createImages(directoryPath) {
-    if (!isDirectoryExist(directoryPath)) {
-        console.error('images directory is wrong!');
-        return;
-    }
-    var imgUrls = [];
-    collectImageUrls(directoryPath, imgUrls);
-    console.log(imgUrls);
-    generateImage(directoryPath, imgUrls);
-}
-function isDirectoryExist(directory) {
-    var stat;
-    try {
-        stat = fs.lstatSync(directory);
-    }
-    catch (e) {
-        return false;
-    }
-    return stat.isDirectory();
-}
-function collectImageUrls(directoryPath, imgUrls) {
-    var files = fs.readdirSync(directoryPath);
-    for (var i = 0; i < files.length; i++) {
-        var current = path.join(directoryPath, files[i]).replaceAll('\\', '/');
-        if (isDirectoryExist(current)) { // if it's a directory ,recursive
-            collectImageUrls(current, imgUrls);
-        }
-        else {
-            if (!isAnImg(current))
-                continue;
-            if (isStartWithLetter(current) || current.startsWith('../'))
-                current = './' + current;
-            imgUrls.push(current);
-        }
-    }
-}
-function isAnImg(imgUrl) {
-    if (imgUrl.endsWith('.png') || imgUrl.endsWith('.jpg') || imgUrl.endsWith('.jpeg') || imgUrl.endsWith('.gif'))
-        return true;
-    return false;
-}
-function generateImage(directoryPath, imgUrls, keyMap) {
-    var out = 'Images.ts';
-    fs.writeFileSync(out, '');
-    // write import
-    for (var i = 0; i < imgUrls.length; i++) {
-        var current = imgUrls[i];
-        var imgKey = generateImgKey(directoryPath, current);
-        if (current.startsWith('../'))
-            current = './' + current;
-        // console.warn(directoryPath, current, imgKey)
-        fs.writeFileSync(out, "import ".concat(imgKey, " from \"").concat(current, "\";\n"), { flag: 'a+' });
-    }
-    fs.writeFileSync(out, '\n\n', { flag: 'a+' });
-    //write export
-    fs.writeFileSync(out, '\nexport const Images = {\n', { flag: 'a+' });
-    for (var i = 0; i < imgUrls.length; i++) {
-        var current = imgUrls[i];
-        var imgKey = generateImgKey(directoryPath, current);
-        var imgNewname = keyMap == null || keyMap.get(imgKey) == undefined ? imgKey : keyMap.get(imgKey);
-        fs.writeFileSync(out, "  ".concat(imgNewname, ": ").concat(imgKey, ",\n"), { flag: 'a+' });
-    }
-    fs.writeFileSync(out, '}\n\n', { flag: 'a+' });
-    console.log(keyMap == null ? 'generate' : 'update', ' Images.ts successfully!');
-}
-function generateImgKey(directoryPath, imgUrl) {
-    var key = imgUrl.substring(directoryPath.length);
-    key = key.replace(/\//g, '_');
-    if (key.startsWith('_'))
-        key = key.substring(1);
-    var extname = path.extname(key);
-    key = key.substring(0, key.length - extname.length);
-    return key;
-}
-function updateImages(directoryPath) {
-    if (!isDirectoryExist(directoryPath)) {
-        console.error('images directory is wrong!');
-        return;
-    }
-    var imagePath = 'Images.ts';
-    if (!isFileExist(imagePath)) {
-        console.error("there is no Images.ts in current path, can't match update commmand!");
-        return;
-    }
-    var keyMaps = readOldImagesInfo(imagePath);
-    var imgUrls = [];
-    collectImageUrls(directoryPath, imgUrls);
-    console.log(imgUrls);
-    generateImage(directoryPath, imgUrls, keyMaps);
-}
-function isFileExist(path) {
-    var stat;
-    try {
-        stat = fs.lstatSync(path);
-    }
-    catch (e) {
-        return false;
-    }
-    return stat.isFile();
-}
-function readOldImagesInfo(imagePath) {
-    var imageContent = fs.readFileSync(imagePath, { encoding: 'utf8' });
-    var lines = imageContent.split('\n');
-    var importNames = [];
-    for (var i = 0; i < lines.length; i++) {
-        var currentLine = lines[i];
-        if (currentLine.startsWith('import')) {
-            var result = currentLine.match(/import (\w+) from/);
-            var importName = result[1];
-            importNames.push(importName);
-        }
-    }
-    console.log(importNames);
-    var importName2UseName = new Map();
-    for (var i = 0; i < lines.length; i++) {
-        var currentLine = lines[i];
-        var result = currentLine.match(/(\w+): (\w+)/);
-        if (result == null)
-            continue;
-        var useName = result[1];
-        var importName = result[2];
-        importName2UseName.set(importName, useName);
-    }
-    if (importName2UseName.size != importNames.length) {
-        console.log('the Images.ts’s format is not correct!');
-        console.log('importNames len:', importNames.length, ' useNames len:', importName2UseName.size);
-        return;
-    }
-    return importName2UseName;
-}