pixuireactcomponents 1.3.34 → 1.3.36

package/index.d.ts

@@ -7,7 +7,5 @@ export { ToggleGroup } from "./src/components/react/app/togglegroup/ToggleGroup"
 export { GradientText } from "./src/components/react/base/gradient/GradientText";
 export { PVideo } from "./src/components/react/base/pixVideo/PixVideo";
 export { OutlineText } from "./src/components/react/base/outlinetext/OutlineText";
-export { Logger } from "./src/components/tools/Logger";
-export { makeImages } from "./src/components/tools/makeImage";
 export { Slider, SliderProps } from "./src/components/react/app/slider/Slider";
 export { ImgPreLoader, PreLoadPic } from "./src/components/tools/ImgPreLoader";

package/index.js

@@ -10,5 +10,3 @@ export { GradientText } from './src/components/react/base/gradient/GradientText'
 export { PVideo } from './src/components/react/base/pixVideo/PixVideo';
 export { OutlineText } from './src/components/react/base/outlinetext/OutlineText';
 export { ImgPreLoader, PreLoadPic } from './src/components/tools/ImgPreLoader';
-export { Logger } from './src/components/tools/Logger';
-export { makeImages } from './src/components/tools/makeImage';

package/package.json

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

package/src/components/react/app/bulletscreen/BulletScreenAnimation.js

@@ -16,7 +16,6 @@ var __extends = (this && this.__extends) || (function () {
 /* eslint-disable linebreak-style */
 import { Component, h } from 'preact';
 import { BulletInfo, BulletConfig, BulletItemAnimation } from './BulletItemAnimation';
-import { Logger } from '../../../tools/Logger';
 // item数据类型
 // {
 //     key : number,
@@ -195,7 +194,7 @@ var BulletScreenAnimation = /** @class */ (function (_super) {
         if (this.isScreenSizeSame(this.props, nextProps))
             return;
         console.log('ScreenSizeChanged, generate new Animation!!!============');
-        Logger.ObjectPrinter(nextProps, '# nextProps #');
+        // Logger.ObjectPrinter(nextProps, '# nextProps #');
         this.generateTargetAnimation(nextProps);
         this.initChannels(nextProps);
         this.setScreenSizeChanged();

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

@@ -3,8 +3,8 @@ export declare let FrameAnimation: (props: {
     rootId?: string | undefined;
     rootClassName?: string | undefined;
     totalTime: number;
-    width?: string | undefined;
-    height?: string | undefined;
+    width: string;
+    height: string;
     srcArr: string[];
     onShow?: Function | undefined;
     onFinish?: Function | undefined;

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

@@ -1,5 +1,8 @@
 import { useEffect, useRef } from 'preact/hooks';
 import { createRef, h } from 'preact';
+// let requestAnimationFrame = (f) => {
+//     return setTimeout(f, 300);
+// };
 export var FrameAnimation = function (props) {
     var _a, _b;
     props.preloadCount = Math.max(props.preloadCount || 5, 5);
@@ -12,26 +15,28 @@ export var FrameAnimation = function (props) {
         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;
+        // console.log('nextFrame', nowFrame, 'nowArrIndex', nowArrIndex, 'nowFrame', nowFrame);
         if (nowFrame >= srcArr.length) {
             onFinish && onFinish();
             if (!loop) {
-                if (!showLastFrame) {
-                    cRefArr.forEach(function (ref, i) {
-                        ref.current.style.visibility = 'hidden';
-                    });
+                cRefArr.forEach(function (ref, i) {
+                    ref.current.style.visibility = 'hidden';
+                });
+                if (showLastFrame) {
+                    //跳帧的话，最后一帧可能不是最后一张图片，设为最后一张图片
+                    cRefArr[0].current.src = srcArr[srcArr.length - 1];
+                    cRefArr[0].current.style.visibility = 'visible';
                 }
                 return;
             }
@@ -41,6 +46,7 @@ export var FrameAnimation = function (props) {
                 ref.current.src = srcArr[i];
             });
             startTime = Date.now();
+            cRefArr[0].current.style.visibility = 'visible';
             requestAnimationFrame(function () {
                 nextFrame(startTime, v, 0);
             });
@@ -50,8 +56,15 @@ export var FrameAnimation = function (props) {
             cRefArr[nowArrIndex].current.style.visibility = 'visible';
             //隐藏上一帧
             cRefArr[showedArrIndex].current.style.visibility = 'hidden';
-            //预加载
-            cRefArr[showedArrIndex].current.src = srcArr[(nowFrame + preloadCount - 1) % srcArr.length];
+            //可能跳帧，在所有其他的元素上预加载
+            cRefArr.forEach(function (ref, i) {
+                if (i !== nowArrIndex) {
+                    var offset = (i + cRefArr.length - nowArrIndex) % cRefArr.length;
+                    if (ref.current.src !== srcArr[(nowFrame + offset) % srcArr.length]) {
+                        ref.current.src = srcArr[(nowFrame + offset) % srcArr.length];
+                    }
+                }
+            });
             showedFrame = nowFrame;
             onShow && onShow(nowFrame);
         }

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

@@ -1,6 +0,0 @@
-export declare function Logger(): void;
-export declare namespace Logger {
-    var ObjectPrinter: (object: any, name: any) => void;
-    var ObjectPrinter2: (object: any, name: any) => void;
-    var HierarchyPrinter: (object: any, name: any) => void;
-}

package/src/components/tools/Logger.js

@@ -1,138 +0,0 @@
-export function Logger() {
-}
-// 移除最后一个(key, value)后面的 ','
-var regex = new RegExp("(,)(\n$)");
-/**
- * printer1: 完整打印，用4个空格缩进
- * @param object Object
- * @param name string
- */
-Logger.ObjectPrinter = function (object, name) {
-    var strResult = "";
-    strResult += name + " = ";
-    strResult += getTreeStyleStr(object, 1);
-    strResult = strResult.replace(regex, "$2");
-    console.warn(strResult);
-};
-function getTreeStyleStr(object, level) {
-    var isArray = object instanceof Array;
-    var str = isArray ? "[\n" : "{\n";
-    for (var key in object) {
-        var value = object[key];
-        var curSeparation = getSeparation1(level);
-        if (typeof (value) != 'object') {
-            str += curSeparation + key + " : " + value + ",\n";
-        }
-        else {
-            str += curSeparation + key + " : " + getTreeStyleStr(value, level + 1);
-        }
-    }
-    str = str.replace(regex, "$2");
-    str += getSeparation1(level - 1) + (isArray ? "],\n" : "},\n");
-    return str;
-}
-var SEPARARION1 = "    ";
-function getSeparation1(level) {
-    var totalSeparation = "";
-    while (level > 0) {
-        totalSeparation += SEPARARION1;
-        level--;
-    }
-    return totalSeparation;
-}
-var regexForLine = new RegExp(",$");
-/**
- * printer2: 完整打印，用\t
- * @param object Object
- * @param name sring
- */
-Logger.ObjectPrinter2 = function (object, name) {
-    var lines = [];
-    lines.push("".concat(name, " = "));
-    getTreeStyleLines(object, 1, lines);
-    console.warn(lines.join("\n"));
-};
-function getTreeStyleLines(object, level, lines) {
-    var isArray = object instanceof Array;
-    var linePostFix = isArray ? "[" : "{";
-    var lastLine = lines.pop();
-    lines.push(lastLine + linePostFix);
-    for (var key in object) {
-        var value = object[key];
-        var curSeparation = getSeparation2(level);
-        if (typeof (value) != 'object') {
-            var curLine = curSeparation + key + " : " + value + ",";
-            lines.push(curLine);
-        }
-        else {
-            var curLinePreFix = curSeparation + key + " : ";
-            lines.push(curLinePreFix);
-            getTreeStyleLines(value, level + 1, lines);
-        }
-    }
-    lastLine = lines.pop();
-    if (lastLine)
-        lines.push(lastLine.replace(regexForLine, "")); // 一定执行
-    lines.push(getSeparation2(level - 1) + (isArray ? "]" : "}"));
-}
-var SEPARARION2 = "\t";
-function getSeparation2(level) {
-    var totalSeparation = "";
-    while (level > 0) {
-        totalSeparation += SEPARARION2;
-        level--;
-    }
-    return totalSeparation;
-}
-/**
- *
-    printer3: 打印关键层级信息，如果是数组，只打印第一个，后续用 ...len 代替（PS: 假定数组中每个元素都是一样的格式）
- * @param object Object
- * @param name string
- */
-Logger.HierarchyPrinter = function (object, name) {
-    var lines = [];
-    lines.push("".concat(name, " = "));
-    getTreeStyleHierarchyLines(object, 1, lines);
-    console.warn(lines.join("\n"));
-};
-function getTreeStyleHierarchyLines(object, level, lines) {
-    var isArray = object instanceof Array;
-    var linePostFix = isArray ? "[" : "{";
-    var lastLine = lines.pop();
-    lines.push(lastLine + linePostFix);
-    if (isArray) {
-        var key = 0;
-        var value = object[key];
-        var curSeparation = getSeparation2(level);
-        if (typeof (value) != 'object') {
-            var curLine = curSeparation + key + " : " + value + ",";
-            lines.push(curLine);
-        }
-        else {
-            var curLinePreFix = curSeparation + key + " : ";
-            lines.push(curLinePreFix);
-            getTreeStyleHierarchyLines(value, level + 1, lines);
-        }
-        lines.push(curSeparation + "...len=" + object.length);
-    }
-    else {
-        for (var key in object) {
-            var value = object[key];
-            var curSeparation = getSeparation2(level);
-            if (typeof (value) != 'object') {
-                var curLine = curSeparation + key + " : " + value + ",";
-                lines.push(curLine);
-            }
-            else {
-                var curLinePreFix = curSeparation + key + " : ";
-                lines.push(curLinePreFix);
-                getTreeStyleHierarchyLines(value, level + 1, lines);
-            }
-        }
-        lastLine = lines.pop();
-        if (lastLine)
-            lines.push(lastLine.replace(regexForLine, "")); // 一定执行
-    }
-    lines.push(getSeparation2(level - 1) + (isArray ? "]" : "}"));
-}

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

@@ -1 +0,0 @@
-export function makeImages(_inputPath: any, _outputPath: any): void;

package/src/components/tools/makeImage.js

@@ -1,90 +0,0 @@
-'use strict';
-// 自动生成图集, 生成一个Images.ts文件，引用目标目录下的所有图片, 方便直接使用
-/*
-    commands:
-        create imgDirectoryPath
-        update imgDirectoryPath
-*/
-var path = require('path');
-var inputPath = '';
-var outputPath = '';
-var getfs = function () {
-    return require('fs');
-};
-export var makeImages = function (_inputPath, _outputPath) {
-    if (!getfs()) {
-        return; //不在node环境中
-    }
-    if (!isDirectoryExist(_inputPath)) {
-        console.warn('inputPath is not a directory!');
-        return;
-    }
-    if (!isDirectoryExist(_outputPath)) {
-        console.warn('outputPath is not a directory!');
-        return;
-    }
-    var imgUrls = [];
-    inputPath = _inputPath;
-    outputPath = _outputPath;
-    collectImageUrls(inputPath, imgUrls, true);
-    imgUrls.sort();
-    generateImage(inputPath, imgUrls);
-};
-function isDirectoryExist(directory) {
-    var stat;
-    try {
-        stat = getfs.lstatSync(directory);
-    }
-    catch (e) {
-        return false;
-    }
-    return stat.isDirectory();
-}
-function collectImageUrls(inputPath, imgUrls, isFirst) {
-    var files = getfs.readdirSync(inputPath);
-    for (var i = 0; i < files.length; i++) {
-        var current = path.join(inputPath, files[i]).replaceAll('\\', '/');
-        if (isDirectoryExist(current)) {
-            // if it's a directory ,recursive
-            collectImageUrls(current, imgUrls, false);
-        }
-        else {
-            if (current.endsWith('.png') || current.endsWith('.jpg') || current.endsWith('.jpeg') || current.endsWith('.gif')) {
-                imgUrls.push(current);
-            }
-        }
-    }
-}
-function generateImage(inputPath, imgUrls, keyMap) {
-    var out = path.resolve(outputPath, 'Images.ts');
-    getfs.writeFileSync(out, '');
-    // write import
-    for (var i = 0; i < imgUrls.length; i++) {
-        var current = imgUrls[i];
-        var imgKey = generateImgKey(inputPath, current);
-        if (current.startsWith('../'))
-            current = './' + current;
-        // console.warn(inputPath, current, imgKey)
-        getfs.writeFileSync(out, 'import '.concat(imgKey, ' from "').concat(current, '";\n'), { flag: 'a+' });
-    }
-    getfs.writeFileSync(out, '\n\n', { flag: 'a+' });
-    //write export
-    getfs.writeFileSync(out, '\nexport const Images = {\n', { flag: 'a+' });
-    for (var i = 0; i < imgUrls.length; i++) {
-        var current = imgUrls[i];
-        var imgKey = generateImgKey(inputPath, current);
-        var imgNewname = keyMap == null || keyMap.get(imgKey) == undefined ? imgKey : keyMap.get(imgKey);
-        getfs.writeFileSync(out, '  '.concat(imgNewname, ': ').concat(imgKey, ',\n'), { flag: 'a+' });
-    }
-    getfs.writeFileSync(out, '}\n\n', { flag: 'a+' });
-    console.log(keyMap == null ? 'generate' : 'update', ' Images.ts successfully!');
-}
-function generateImgKey(inputPath, imgUrl) {
-    var key = imgUrl.substring(inputPath.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;
-}