@shijiu/jsview-vue 2.0.1073 → 2.0.1106

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shijiu/jsview-vue",
-  "version": "2.0.1073",
+  "version": "2.0.1106",
   "license": "MIT",
   "repository": "system/jsview-framework",
   "author": "mengxk",

package/utils/JsViewEngineWidget/MetroWidget/MetroWidget.vue

@@ -386,6 +386,7 @@ const {
 );
 
 defineExpose(exportObject);
+
 </script>
 
 <template>
@@ -414,6 +415,7 @@ defineExpose(exportObject);
           width: touchContainerW,
           height: touchContainerH,
         }"
+
       >
         <div>
           <slot name="background"></slot>
@@ -439,7 +441,7 @@ defineExpose(exportObject);
               }"
             >
               <div
-                v-for="item in renderData"
+                v-for="(item, index) in renderData"
                 :key="pageUpdateToken + '_' + item.index"
                 :ref="item.divRef"
                 :style="{
@@ -450,6 +452,7 @@ defineExpose(exportObject);
                   v-if="!enableItemRenderBreak || item.mounted || itemRender"
                   :key="renderBreakKey"
                   :ref="item.slotRef"
+                  :id="`${name}_${index}`"
                 >
                   <slot
                     name="renderItem"

package/utils/JsViewEngineWidget/MetroWidget/MetroWidgetSetup.js

@@ -1233,7 +1233,7 @@ export const setup = (
     );
     if (next_focus_item !== null) {
       preFocusId = focusId;
-      const preFocusItem = getItemByIndex(preFocusId);
+      const preFocusItem = getItemById(preFocusId);
       focusId = next_focus_item.id;
 
       templateItemAdder.tryAddItem(next_focus_item.templateInfo, 1);
@@ -1361,14 +1361,25 @@ export const setup = (
         edge = EdgeDirection.top;
       }
       const curTemplateInfo = getItemById(focusId)?.templateInfo;
-      let rect = {
-        x: curTemplateInfo.left - x_off_set,
-        y: curTemplateInfo.top - y_off_set,
-        width: curTemplateInfo.width,
-        height: curTemplateInfo.height,
-      };
+      let rect
+      if (curTemplateInfo) {
+        rect = {
+          x: curTemplateInfo.left - x_off_set,
+          y: curTemplateInfo.top - y_off_set,
+          width: curTemplateInfo.width,
+          height: curTemplateInfo.height,
+        };
+      } else {
+        rect = {
+          x: 0,
+          y: 0,
+          width: 0,
+          height: 0,
+        };
+      }
+
       props.onEdge?.({ direction: edge, rect: rect });
-      innerData[id2Index(focusId)].onWidgetEdge({
+      innerData[id2Index(focusId)]?.onWidgetEdge({
         direction: edge,
       });
     }
@@ -1692,12 +1703,14 @@ export const setup = (
     if (props.onScroll) {
       const lastTemplateInfo = getItemByIndex(
         metroTemplate.size - 1
-      ).templateInfo;
-      let totalWidth;
-      if (vertical) {
-        totalWidth = lastTemplateInfo.top + lastTemplateInfo.height - 1;
-      } else {
-        totalWidth = lastTemplateInfo.left + lastTemplateInfo.width - 1;
+      )?.templateInfo;
+      let totalWidth = 0;
+      if (lastTemplateInfo) {
+        if (vertical) {
+          totalWidth = lastTemplateInfo.top + lastTemplateInfo.height - 1;
+        } else {
+          totalWidth = lastTemplateInfo.left + lastTemplateInfo.width - 1;
+        }
       }
       props.onScroll(visibleInfo.start, visibleInfo.range, totalWidth);
     }

package/utils/JsViewEngineWidget/MetroWidget/PageUpdater.ts

@@ -32,8 +32,7 @@ export class PageUpdater {
     mergeTmp: boolean,
     permanentList: Array<PermanentItemInfo> | null,
     extensionRange: number = 0
-  ) {
-    if (!template || template.size === 0) return;
+  ): {apply: Function, applyTmp: Function} {
     this.count++;
     const [visibleStart, visibleEnd] = template.getVisibleItemList(
       start - extensionRange,

package/utils/JsViewEngineWidget/TemplateParser/CommonMetroTemplate.ts

@@ -388,6 +388,10 @@ class CommonMetroTemplate extends MetroTemplate {
     }
 
     const itemIndex = this.id2Index(baseId);
+    if (itemIndex < 0) {
+      console.log("getNextItem: no focusable item.");
+      return null;
+    }
     const offset = vOffset !== 0 ? vOffset : hOffset;
     let nextTemplateItem = this.getNextItemInner(
       itemIndex,
@@ -724,7 +728,7 @@ class CommonMetroTemplate extends MetroTemplate {
     visibleStart: number,
     visibleEnd: number,
     baseId: number): [number, number] {
-    if (visibleStart > visibleEnd) {
+    if (visibleStart > visibleEnd || this.templateList.length == 0) {
       // No visible item
       return [-1, -1];
     }
@@ -732,7 +736,7 @@ class CommonMetroTemplate extends MetroTemplate {
     visibleStart = Math.round(visibleStart);
     visibleEnd = Math.round(visibleEnd);
     let searchBaseItemIdx = this.id2Index(baseId);
-    if (typeof searchBaseItemIdx === "undefined") searchBaseItemIdx = 0;
+    if (searchBaseItemIdx < 0) searchBaseItemIdx = 0;
     const commonData: VisibleSearchConfigCommon = {
       resultStartIdx: -1,
       resultEndIdx: -1,

package/utils/JsViewEngineWidget/TemplateParser/MetroTemplate.ts

@@ -270,12 +270,12 @@ abstract class MetroTemplate {
 
       width: itemObj.width,
       height: itemObj.height,
-      left: itemObj.left ? itemObj.left : 0,
-      top: itemObj.top ? itemObj.top : 0,
-      marginRight: itemObj.marginRight ? itemObj.marginRight : 0,
-      marginBottom: itemObj.marginBottom ? itemObj.marginBottom : 0,
-      focusable: itemObj.focusable ? itemObj.focusable : true,
-      findNextAnchor: itemObj.findNextAnchor ? itemObj.findNextAnchor : null,
+      left: itemObj.left ?? 0,
+      top: itemObj.top ?? 0,
+      marginRight: itemObj.marginRight ?? 0,
+      marginBottom: itemObj.marginBottom ?? 0,
+      focusable: itemObj.focusable ?? true,
+      findNextAnchor: itemObj.findNextAnchor ?? null,
 
       neighborIndexList: {
         left: [],

package/utils/JsViewPlugin/JsvAudio/version.js

@@ -7,9 +7,9 @@ let PluginInfo = {
     // downloadUrl:"http://192.168.0.63:8080/plugin/JsvAudio-164.zip", //插件下载地址
     packageName: "com.qcode.jsvaudio",
     name: "音频插件",
-    version: "1.0.21",  //插件需要的版本号
-    versionCodeMin: 21,
-    versionCodeMax: 21,
+    version: "1.0.24",  //插件需要的版本号
+    versionCodeMin: 24,
+    versionCodeMax: 24,
     bridgeName: "jsvAudioBridge", //插件bridge注册到jsview的名称
     className: "com.qcode.jsvaudio.JsvAudio",  //插件初始化类名称
     initMethod: "createInstance",   //插件初始化方法

package/utils/JsViewPlugin/JsvAudio/version.mjs

@@ -7,9 +7,9 @@ let PluginInfo = {
   // downloadUrl:"http://192.168.0.63:8080/plugin/JsvAudio-164.zip", //插件下载地址
   packageName: "com.qcode.jsvaudio",
   name: "音频插件",
-  version: "1.0.21",  //插件需要的版本号
-  versionCodeMin: 21,
-  versionCodeMax: 21,
+  version: "1.0.24",  //插件需要的版本号
+  versionCodeMin: 24,
+  versionCodeMax: 24,
   bridgeName: "jsvAudioBridge", //插件bridge注册到jsview的名称
   className: "com.qcode.jsvaudio.JsvAudio",  //插件初始化类名称
   initMethod: "createInstance",   //插件初始化方法

package/utils/JsViewVueTools/JsvDemoTester.js

@@ -37,12 +37,13 @@ const ensureInterface = ()=>{
     });
 }
 
-const enableNativeViewListener = (nativeViewId)=>{
+const enableNativeViewListener = (nativeViewId,info)=>{
     let listenerId = idGeneratoer;
     idGeneratoer++;
     idObjectMap[listenerId] = {
         eventCallback: (ret)=>{
-            console.log("JsvDemoTester nativeView info=" + ret.info);
+            info.value=ret.info
+            console.log(`JsvDemoTester nativeView info=${info.value}`);
         }
     };
 
@@ -76,5 +77,5 @@ const disableNativeViewListener = (listenerId)=>{
 
 export {
     enableNativeViewListener,
-    disableNativeViewListener
+    disableNativeViewListener,
 }

package/utils/JsViewVueWidget/JsvActorMove/ActorControlBase.js

@@ -67,6 +67,10 @@ class ActorControlBase {
     Forge.sRenderBridge.SetStepFpsSwitch(false);
   }
 
+  altStraightSpeedInner(newSpeedPerSecond, time) {
+    Forge.AnimFireCommand.AltSpeed(this._SpriteView, newSpeedPerSecond, time);
+  }
+
   _WrapBuildAnimation(
     repeat_start_array,
     current_array,
@@ -126,7 +130,6 @@ class ActorControlBase {
 
     const froms = [...this._Current];
     const tos = this._Target;
-    const repeat_starts = this._Repeat ? [...this._RepeatStart] : null;
 
     // const token = this._Token++;
 
@@ -142,7 +145,7 @@ class ActorControlBase {
     const listener = new Forge.AnimationListener().OnFinalProgress(
       (progress) => {
         that._OnPaused(
-          repeat_starts !== null ? repeat_starts : froms,
+          froms,
           memo_tos,
           progress,
           start_params
@@ -154,9 +157,6 @@ class ActorControlBase {
 
     anim.AddAnimationListener(listener);
     anim.Enable(Forge.AnimationEnable.KeepTransform);
-    if (this._Repeat) {
-      anim.EnableInfinite();
-    }
     this._SpriteView.StartAnimation(anim);
 
     return true; // success

package/utils/JsViewVueWidget/JsvActorMove/JsvActorMove.vue

@@ -19,9 +19,9 @@
  *              功能：延X轴进行匀速运动
  *          moveToY(target_y, speed, end_callback)
  *              功能：延Y轴进行匀速运动
- *          repeatMoveAlongX(target_x, speed, repeat_start, repeat_callback)
+ *          scrollMoveAlongX(target_x, speed, repeat_start, repeat_callback)
  *              功能：延X轴进行重复匀速运动
- *          repeatMoveAlongY(target_y, speed, repeat_start, repeat_callback)
+ *          scrollMoveAlongY(target_y, speed, repeat_start, repeat_callback)
  *              功能：延Y轴进行重复匀速运动
  *          throwAlongX(init_v, acc, end_condition, end_callback, pole_callback)
  *              功能：延X轴进行回旋运动
@@ -31,6 +31,10 @@
  *              功能：直接将JsvActorMove移动到目标位置，无中间运动动画
  *          pause(pause_callback)
  *              功能：暂停动画，并将JsvActorMove保持在暂停的位置上
+ *          pause(pause_callback)
+ *              功能：暂停动画，并将JsvActorMove保持在暂停的位置上
+ *          altStraightSpeed(newSpeedPerSecond, time)
+ *              功能: 将由moveToX, moveToY, scrollMoveAlongX, scrollMoveAlongY 发起的直线运动进行均匀变速
 
 -->
 <script setup>

package/utils/JsViewVueWidget/JsvActorMove/JsvActorMoveControl.js

@@ -50,14 +50,25 @@ class JsvActorMoveControl extends ActorControlBase {
   }
 
   /*
-     * repeatMoveAlongX 参数说明：
+     * altStraightSpeed 
+     * 将由moveToX, moveToY, scrollMoveAlongX, scrollMoveAlongY 发起的直线运动进行均匀变速
+     * 参数说明:
+     *      spnewSpeedPerSecond  (int) 带符号整数，符号表示方向，标识运动的运行速度，单位(pixel/s)
+     *      end_callback (Function(x,y)) 运动到目标位置后的回调函数，回报当前JsvActorMove的相对x,y
+     */
+  altStraightSpeed(newSpeedPerSecond, time) {
+    this.altStraightSpeedInner(newSpeedPerSecond, time);
+  }
+
+  /*
+     * scrollMoveAlongX 用于背景无限滚轴动画效果的接口，参数说明：
      *      target_x     (int) 带符号整数，标识运动的目标位置，相对于JsvActorMove当前位置
      *      speed        (int) 带符号整数，符号表示方向，标识运动的运行速度，单位(pixel/s)
      *      repeat_start (int) 带符号整数，标识往复运动的起始点，使用时注意，JsvActorMove的当前位置必须在
      *                         repeat_start和target_x之间
      *      repeat_callback (Function(times)) 完整一个运动周期后的回调，返回当前运动的周期数times
      */
-  repeatMoveAlongX(target_x, speed, repeat_start, repeat_callback) {
+  scrollMoveAlongX(target_x, speed, repeat_start, repeat_callback) {
     this._UniformMove(0,
       target_x, NaN, speed,
       {
@@ -68,14 +79,14 @@ class JsvActorMoveControl extends ActorControlBase {
   }
 
   /*
-     * repeatMoveAlongY 参数说明：
+     * scrollMoveAlongY 用于背景无限滚轴动画效果的接口，参数说明：
      *      target_y     (int) 带符号整数，标识运动的目标位置，相对于JsvActorMove当前位置
      *      speed        (int) 带符号整数，符号表示方向，标识运动的运行速度，单位(pixel/s)
      *      repeat_start (int) 带符号整数，标识往复运动的起始点，使用时注意，JsvActorMove的当前位置必须在
      *                         repeat_start和target_y之间
      *      repeat_callback (Function(times)) 完整一个运动周期后的回调，返回当前运动的周期数times
      */
-  repeatMoveAlongY(target_y, speed, repeat_start, repeat_callback) {
+  scrollMoveAlongY(target_y, speed, repeat_start, repeat_callback) {
     this._UniformMove(1,
       NaN, target_y, speed,
       {
@@ -354,11 +365,14 @@ class JsvActorMoveControl extends ActorControlBase {
 
 
   _ReCalculateUMoveCurrent(froms, tos, progress, start_params) {
+    let repeat_start = start_params?.repeatSet?.start;
     if (start_params.xOrY === 0) {
+      froms[0] = repeat_start ? repeat_start : froms[0];
       const value = (tos[0] - froms[0]) * progress + froms[0];
       const direction = value >= 0 ? 1 : -1;
       this._Current[0] = direction * Math.floor(Math.abs(value));
     } else {
+      froms[1] = repeat_start ? repeat_start : froms[1];
       const value = (tos[1] - froms[1]) * progress + froms[1];
       const direction = value >= 0 ? 1 : -1;
       this._Current[1] = direction * Math.floor(Math.abs(value));

package/utils/JsViewVueWidget/JsvInput/JsvInput.vue

@@ -596,6 +596,11 @@ export default {
           );
           key_used = true;
           break;
+        case 27:
+        case 10000:
+          //返回键吐出
+          key_used = false;
+          break;
         default:
           // 浏览器中，点击浏览器时input焦点丢失，JsvInput收到任意按键获取焦点
           if (!window.JsView) {

package/utils/JsViewVueWidget/JsvSpriteAnim/JsvSpriteAnim.vue

@@ -21,7 +21,7 @@
  *                 自动启动模式：start:精灵图自动启动，结束后显示第一帧内容、
  *                             end:精灵图自动启动，结束后显示最后一帧内容，
  *                             none：不自动启动
- *      loop {string} 动图的循环次数 infinite/数字，默认为infinite
+ *      loop {string或number} 动图的循环次数 infinite/数字，默认为infinite
  *      spriteName {string} 动图的名称，默认为null
  *      controller {SpriteController} 控制动图start,stop的对象
  *
@@ -32,414 +32,396 @@
  *          stop(end_frame)
  *              功能: 停止精灵图动画，可选择静止在第一帧或最后一帧
  -->
-<script>
-import { getKeyFramesGroup } from '../../JsViewVueTools/JsvDynamicKeyFrames.js'
-
-
-
-function _getTransformInfo(source_obj, target_obj, canvas_width, canvas_height) {
-  const result = { csw: 1, csh: 1, cx: 0, cy: 0, sw: 1, sh: 1, x: 0, y: 0 };
-
-  // Clip在Canvas div之内，以Canvas为基准进行缩放和平移
-  // 图形左上角远离原点后再缩放，所以需要进行缩放补偿
-  const clip_scale_w = target_obj.w / canvas_width;
-  const clip_scale_h = target_obj.h / canvas_height;
-  result.csw = clip_scale_w;
-  result.csh = clip_scale_h;
-  result.cx = target_obj.x / clip_scale_w;
-  result.cy = target_obj.y / clip_scale_h;
-
-  // Image在Clip div之内，所以以Clip为基准进行缩放和平移, 对clip的缩放进行反处理以还原尺寸
-  // 将子图左上角对齐原点后再缩放，所以x,y不需要进行举例缩放补偿
-  result.sw = source_obj.w / target_obj.w / clip_scale_w;
-  result.sh = source_obj.h / target_obj.h / clip_scale_h;
-  result.x = -source_obj.x;
-  result.y = -source_obj.y;
-
-  return result;
-}
-
-function _createTransformStyle(w_scale, h_scale, x, y) {
-  let output = "";
-  output = `${output}scale3d(${
-      parseFloat(w_scale).toPrecision(5)},${
-      parseFloat(h_scale).toPrecision(5)},1) `
-    + `translate3d(${
-      parseFloat(x).toPrecision(5)}px,${
-      parseFloat(y).toPrecision(5)}px,0)`;
-  return output;
-}
-
-export default {
-  props: {
-    spriteInfo: Object,
-    viewSize: Object,
-    imageUrl: String,
-    duration: Number,
-    onAnimEnd: Function,
-    autostart: [Boolean, String],
-    loop: Number,
-    spriteName: String,
-    controller: Object,
-  },
-
-  created() {
-        let stopFrame = "start";
-        if (typeof this.$props.autostart === "string" && this.$props.autostart !== "none") {
-            stopFrame = this.$props.autostart;
-        }
-        this.TRANSFORM_ORIGIN_LEFT_TOP = "left top";
-        this.keyFrameNames = {
-            clip: null,
-            image: null,
-            valid: false
-        };
-        this.frozeFrameCache = {
-            clipStyle: {},
-            transStyle: {},
-            imageStyle: {
-                backgroundImage: null,
-            }
-        };
-        this.animateFrameCache = {
-            clipStyle: {},
-            transStyle: {},
-            imageStyle: {
-                backgroundImage: null,
-            },
-            clipAnimName: null,
-            imageAnimName: null,
-        };
-        this.keyFrameStyleSheet = getKeyFramesGroup(null);
-        this.innerId = 0;
-        this.stopped = false;
-        this.spriteDuration = this.$props.duration;
-        this.stopFrame = stopFrame;
-        this.blinkAnim = null;
-        this.blinkAnimCache = null;
-        this.sAnimationToken = 0;
-        this.transform_style = this._AnalyzeProp();
-    },
-
-    unmounted() {
-        this._clearExpiredKeyFrames();
-    },
-
-    methods: {
-        stop(end_frame) {
-            if (this.$props.spriteInfo.frames && this.$props.spriteInfo.frames.length === 1) {
-                return;
-            }
-            this.stopped = true;
-            this.stopFrame = end_frame || this.stopFrame;
-        },
-
-        start(end_frame, duration) {
-            if (this.$props.spriteInfo.frames && this.$props.spriteInfo.frames.length === 1) {
-                return;
-            }
-            this.innerId += 1;
-            this.stopped = false;
-            this.spriteDuration = duration || this.$props.duration;
-            this.stopFrame = end_frame || this.stopFrame;
-        },
-
-        blink(alphas, duration, ease, delay, repeat) {
-            // 注意：比较数组是否相同仅在此场景下使用toString，其他场景
-            if (!this.blinkAnimCache
-            || (this.blinkAnimCache.alphas.toString() !== alphas.toString()
-            || this.blinkAnimCache.duration !== duration
-            || this.blinkAnimCache.ease !== ease
-            || this.blinkAnimCache.delay !== delay
-            || this.blinkAnimCache.repeat !== repeat)) {
-            const anim_name_base = this._getAnimNameBase();
-            const anim_name_blink = `${anim_name_base}-blink`;
-            let image_keyframs = `@keyframes ${anim_name_blink} {`;
-            const frame_percent = 1 / (alphas.length);
-            for (let i = 0; i < alphas.length; i++) {
-                const alpha = alphas[i];
-                let header;
-                if (i !== alphas.length - 1) {
-                    header = `${parseFloat(frame_percent * i * 100).toFixed(2)}% {`;
-                } else {
-                    header = '100% {';
-                }
-                image_keyframs += header;
-
-                if (alpha) {
-                    const tr_str = ` opacity:${alpha};`;
-                    image_keyframs += tr_str;
-                }
-
-                image_keyframs += '}';
-                image_keyframs += "\n";
-            }
-            image_keyframs += '}';
-            if (this.keyFrameStyleSheet) {
-                this.keyFrameStyleSheet.insertRule(image_keyframs);
-            }
-            this.blinkAnimCache = {
-                alphas,
-                duration,
-                ease,
-                delay,
-                repeat,
-                blinkAnimName: anim_name_blink
-            };
-            }
-
-            // 参数格式化
-            ease = ease || "";
-            delay = delay || 0;
-            repeat = (repeat === -1) ? "infinite" : (repeat || 1);
-
-            const animName = `${this.blinkAnimCache.blinkAnimName} ${duration}s ${ease} ${delay}s ${repeat}`;
-            this.blinkAnim = animName;
-            this.stopped = true;
-        },
-
-        _getAnimNameBase() {
-            return this.$props.spriteName ? this.$props.spriteName : `sprite-anim-name-${this.sAnimationToken++}`;
-        },
-
-        _updateFrozeFrameCache(image_url, frame_info_list,
-                                canvas_width, canvas_height,
-                                source_width, source_height) {
-            const cache = this.frozeFrameCache;
-
-            const index = this.stopFrame === "start" ? 0 : frame_info_list.length - 1;
-            const tr = _getTransformInfo(
-                frame_info_list[index].source,
-                frame_info_list[index].target,
-                canvas_width,
-                canvas_height
-            );
-
-            cache.clipStyle = {
-                transform: _createTransformStyle(tr.csw, tr.csh, tr.cx, tr.cy),
-                transformOrigin: this.TRANSFORM_ORIGIN_LEFT_TOP,
-                overflow: "hidden",
-                left: 0,
-                top: 0,
-                width: canvas_width,
-                height: canvas_height,
-            };
-
-            cache.transStyle = {
-                transformOrigin: this.TRANSFORM_ORIGIN_LEFT_TOP,
-                transform: _createTransformStyle(tr.sw, tr.sh, tr.x, tr.y),
-                width: source_width,
-                height: source_height,
-            };
-
-            cache.imageStyle = {
-                backgroundImage: image_url,
-                width: source_width,
-                height: source_height,
-            };
-        },
-
-        _updateAnimateFrameCache(image_url, frame_info_list,
-                                canvas_width, canvas_height,
-                                source_width, source_height) {
-            this._clearExpiredKeyFrames();
-
-            if (!frame_info_list) { return; }
-            const anim_name_base = this._getAnimNameBase();
-            const frame_percent = 1 / (frame_info_list.length);
-            const anim_name_clip = `${anim_name_base}-clip`;
-            const anim_name_image = `${anim_name_base}-image`;
-            let image_keyframs = `@keyframes ${anim_name_image} {`;
-            let clip_keyframs = `@keyframes ${anim_name_clip} {`;
-
-            for (let i = 0; i < frame_info_list.length + 1; i++) {
-                let item;
-                if (i !== frame_info_list.length) {
-                    item = frame_info_list[i];
-                } else {
-                    // 追加一个最后一帧以保证最后一帧可见
-                    item = frame_info_list[frame_info_list.length - 1];
-                }
-
-                // Header
-                let header;
-                if (i !== frame_info_list.length) {
-                    header = `${parseFloat(frame_percent * i * 100).toFixed(2)}% {`;
-                } else {
-                    header = '100% {';
-                }
-                image_keyframs += header;
-                clip_keyframs += header;
-
-                if (item.source) {
-                    const tr = _getTransformInfo(item.source, item.target, canvas_width, canvas_height);
-                    const clip_trans = _createTransformStyle(tr.csw, tr.csh, tr.cx, tr.cy);
-                    const image_trans = _createTransformStyle(tr.sw, tr.sh, tr.x, tr.y);
-
-                    let tr_str = "";
-                    tr_str = `${tr_str}transform:${clip_trans};transform-origin:left top;`;
-                    clip_keyframs += tr_str;
-
-                    tr_str = "";
-                    tr_str = `${tr_str}transform:${image_trans};transform-origin:left top;`;
-                    image_keyframs += tr_str;
-                }
-
-                image_keyframs += '}';
-                clip_keyframs += '}';
-            }
-
-            image_keyframs += '}';
-            clip_keyframs += '}';
-
-            if (this.keyFrameStyleSheet) {
-                this.keyFrameStyleSheet.insertRule(image_keyframs);
-                this.keyFrameStyleSheet.insertRule(clip_keyframs);
-
-                // 记录Keyframe设置，以便于界面关闭时进行清理
-                this.keyFrameNames.clip = anim_name_clip;
-                this.keyFrameNames.image = anim_name_image;
-                this.keyFrameNames.valid = true;
-            }
-            const cache = this.animateFrameCache;
-
-            cache.clipAnimName = `${anim_name_base}-clip`;
-            cache.imageAnimName = `${anim_name_base}-image`;
-
-            cache.clipStyle = {
-                overflow: "hidden",
-                width: canvas_width,
-                height: canvas_height,
-                transform: null, // 重置 transform，以免影响keyframe动画
-                transformOrigin: this.TRANSFORM_ORIGIN_LEFT_TOP,
-                animation: null, // 外部设置，需要时间和loop信息
-            };
-
-            cache.transStyle = {
-                transform: null, // 重置 transform，以免影响keyframe动画
-                transformOrigin: this.TRANSFORM_ORIGIN_LEFT_TOP,
-                animation: null, // 外部设置，需要时间和loop信息
-                width: source_width,
-                height: source_height,
-            };
-
-            cache.imageStyle = {
-                backgroundImage: image_url,
-                width: source_width,
-                height: source_height,
-            };
-        },
-
-        _clearExpiredKeyFrames() {
-            if (this.keyFrameNames.valid) {
-                this._removeKeyFrame([this.keyFrameNames.clip, this.keyFrameNames.image]);
-                this.keyFrameNames.valid = false;
-            }
-        },
-
-        _removeKeyFrame(names_array) {
-            if (this.keyFrameStyleSheet) {
-                this.keyFrameStyleSheet.removeMultiRules(names_array);
-            }
-        },
-
-        _IsAutoStart() {
-            let autoStart = false;
-            if (typeof this.$props.autostart === "boolean") {
-                autoStart = this.$props.autostart;
-            } if (typeof this.$props.autostart === "string" && this.$props.autostart !== "none") {
-                autoStart = true;
-            }
-            return autoStart;
-        },
-
-        _AnalyzeProp() {
-            const used = this.$props.controller && this.$props.controller.Used;
-            if (this.$props.spriteInfo.frames.length === 1 || (!used && !this._IsAutoStart()) || this.stopped) {
-                // 单图模式
-                // 解析图片信息
-                this._updateFrozeFrameCache(
-                    this.$props.imageUrl,
-                    this.$props.spriteInfo.frames,
-                    this.$props.viewSize.w,
-                    this.$props.viewSize.h,
-                    this.$props.spriteInfo.meta.size.w,
-                    this.$props.spriteInfo.meta.size.h
-                );
-
-                return {
-                    clipStyle: this.frozeFrameCache.clipStyle,
-                    transStyle: this.frozeFrameCache.transStyle,
-                    imageStyle: this.frozeFrameCache.imageStyle,
-                };
-            }
-
-
-            // 动画模式
-            if (this.animateFrameCache.imageStyle.backgroundImage !== this.$props.imageUrl) {
-                // 解析图片信息
-                this._updateAnimateFrameCache(
-                    this.$props.imageUrl,
-                    this.$props.spriteInfo.frames,
-                    this.$props.viewSize.w,
-                    this.$props.viewSize.h,
-                    this.$props.spriteInfo.meta.size.w,
-                    this.$props.spriteInfo.meta.size.h
-                );
-            }
-
-            // 使用duration和loop信息更新动画设定
-            this.animateFrameCache.clipStyle.animation =
-            `${this.animateFrameCache.clipAnimName} ${this.spriteDuration}s steps(1,end) ${this.$props.loop}`;
-            this.animateFrameCache.transStyle.animation =
-            `${this.animateFrameCache.imageAnimName} ${this.spriteDuration}s steps(1,end) ${this.$props.loop}`;
-
-            return {
-                clipStyle: this.animateFrameCache.clipStyle,
-                transStyle: this.animateFrameCache.transStyle,
-                imageStyle: this.animateFrameCache.imageStyle,
-            };
-        },
-
-        // shouldComponentUpdate(next_props, next_state) {
-        //     return (
-        //         (this.$props.imageUrl !== next_props.imageUrl)
-        //         || (this.$props.onAnimEnd !== next_props.onAnimEnd)
-        //         || (this.$props.loop !== next_props.loop)
-        //         || (this.spriteDuration !== next_state.duration)
-        //         || (this.$props.autostart !== next_props.autostart)
-        //         || this.innerId !== next_state.innerId
-        //         || this.stopped !== next_state.stopped
-        //         || this.blinkAnim !== next_state.blinkAnim
-        //     );
-        // }
-
-        onAnimEndDelegate() {
-            // 在onAnimEnd之前进行Stop，以防onAnimEnd内部继续发生别的操作
-            this.stopped = true;
-            if (this.$props.onAnimEnd) {
-                this.$props.onAnimEnd();
-            }
-        },
-
-        onBlinkAnimEnd() {
-            // 在onAnimEnd之前进行Stop，以防onAnimEnd内部继续发生别的操作
-            this.blinkAnim = null;
-        }
-    }
-}
-</script>
-
-<template>
-    <div id="canvas">
-        <div id="clip" :style="{...transform_style.clipStyle}">
-            <div id="trans" :style="{...transform_style.transStyle}" @animationend="onAnimEndDelegate">
-            <div id="image" :style="{...transform_style.imageStyle, animation: blinkAnim}" @animationend="onBlinkAnimEnd"></div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<style scoped>
-@keyframes sprite-tag{}
-</style>
+ <script setup>
+ import { getKeyFramesGroup } from '../../JsViewVueTools/JsvDynamicKeyFrames.js'
+ import { reactive, shallowRef, onUnmounted, watch } from 'vue';
+ 
+ 
+ const _getTransformInfo = (source_obj, target_obj, canvas_width, canvas_height) => {
+     const result = { csw: 1, csh: 1, cx: 0, cy: 0, sw: 1, sh: 1, x: 0, y: 0 };
+ 
+     // Clip在Canvas div之内，以Canvas为基准进行缩放和平移
+     // 图形左上角远离原点后再缩放，所以需要进行缩放补偿
+     const clip_scale_w = target_obj.w / canvas_width;
+     const clip_scale_h = target_obj.h / canvas_height;
+     result.csw = clip_scale_w;
+     result.csh = clip_scale_h;
+     result.cx = target_obj.x / clip_scale_w;
+     result.cy = target_obj.y / clip_scale_h;
+ 
+     // Image在Clip div之内，所以以Clip为基准进行缩放和平移, 对clip的缩放进行反处理以还原尺寸
+     // 将子图左上角对齐原点后再缩放，所以x,y不需要进行举例缩放补偿
+     result.sw = source_obj.w / target_obj.w / clip_scale_w;
+     result.sh = source_obj.h / target_obj.h / clip_scale_h;
+     result.x = -source_obj.x;
+     result.y = -source_obj.y;
+ 
+     return result;
+ }
+ 
+ const _createTransformStyle = (w_scale, h_scale, x, y) => {
+     let output = "";
+     output = `${output}scale3d(${parseFloat(w_scale).toPrecision(5)},${parseFloat(h_scale).toPrecision(5)},1) `
+         + `translate3d(${parseFloat(x).toPrecision(5)}px,${parseFloat(y).toPrecision(5)}px,0)`;
+     return output;
+ }
+ 
+ const props = defineProps({
+     spriteInfo: Object,
+     viewSize: Object,
+     imageUrl: String,
+     duration: Number,
+     onAnimEnd: Function,
+     autostart: [Boolean, String],
+     loop: [String,Number],
+     spriteName: String,
+     controller: Object,
+ })
+ 
+ 
+ let stopFrame = shallowRef("start");
+ let TRANSFORM_ORIGIN_LEFT_TOP = shallowRef("left top")
+ let keyFrameNames = reactive({
+     clip: null,
+     image: null,
+     valid: false
+ });
+ let frozeFrameCache = reactive({
+     clipStyle: {},
+     transStyle: {},
+     imageStyle: {
+         backgroundImage: null,
+     }
+ });
+ let animateFrameCache = reactive({
+     clipStyle: {},
+     transStyle: {},
+     imageStyle: {
+         backgroundImage: null,
+     },
+     clipAnimName: null,
+     imageAnimName: null,
+ });
+ let keyFrameStyleSheet = getKeyFramesGroup(null);
+ let innerId = shallowRef(0);
+ let stopped = shallowRef(false);
+ let spriteDuration = shallowRef(props.duration);
+ let blinkAnim = shallowRef(null);
+ let blinkAnimCache = reactive({});
+ let sAnimationToken = shallowRef(0);
+ 
+ const _removeKeyFrame = (names_array) => {
+     if (keyFrameStyleSheet) {
+         keyFrameStyleSheet.removeMultiRules(names_array);
+     }
+ }
+ 
+ const _clearExpiredKeyFrames = () => {
+     if (keyFrameNames.valid) {
+         _removeKeyFrame([keyFrameNames.clip, keyFrameNames.image]);
+         keyFrameNames.valid = false;
+     }
+ }
+ 
+ onUnmounted(() => {
+     _clearExpiredKeyFrames()
+ })
+ 
+ const _getAnimNameBase = () => {
+     return props.spriteName ? props.spriteName : `sprite-anim-name-${sAnimationToken.value++}`;
+ }
+ 
+ const _updateFrozeFrameCache = (image_url, frame_info_list,
+     canvas_width, canvas_height,
+     source_width, source_height) => {
+     const cache = frozeFrameCache;
+ 
+     const index = stopFrame.value === "start" ? 0 : frame_info_list.length - 1;
+     const tr = _getTransformInfo(
+         frame_info_list[index].source,
+         frame_info_list[index].target,
+         canvas_width,
+         canvas_height
+     );
+ 
+     cache.clipStyle = {
+         transform: _createTransformStyle(tr.csw, tr.csh, tr.cx, tr.cy),
+         transformOrigin: TRANSFORM_ORIGIN_LEFT_TOP.value,
+         overflow: "hidden",
+         left: 0,
+         top: 0,
+         width: canvas_width,
+         height: canvas_height,
+     };
+ 
+     cache.transStyle = {
+         transformOrigin: TRANSFORM_ORIGIN_LEFT_TOP.value,
+         transform: _createTransformStyle(tr.sw, tr.sh, tr.x, tr.y),
+         width: source_width,
+         height: source_height,
+     };
+ 
+     cache.imageStyle = {
+         backgroundImage: image_url,
+         width: source_width,
+         height: source_height,
+     };
+ }
+ 
+ const _updateAnimateFrameCache = (image_url, frame_info_list,
+     canvas_width, canvas_height,
+     source_width, source_height) => {
+     _clearExpiredKeyFrames();
+ 
+     if (!frame_info_list) { return; }
+     const anim_name_base = _getAnimNameBase();
+     const frame_percent = 1 / (frame_info_list.length);
+     const anim_name_clip = `${anim_name_base}-clip`;
+     const anim_name_image = `${anim_name_base}-image`;
+     let image_keyframs = `@keyframes ${anim_name_image} {`;
+     let clip_keyframs = `@keyframes ${anim_name_clip} {`;
+ 
+     for (let i = 0; i < frame_info_list.length + 1; i++) {
+         let item;
+         if (i !== frame_info_list.length) {
+             item = frame_info_list[i];
+         } else {
+             // 追加一个最后一帧以保证最后一帧可见
+             item = frame_info_list[frame_info_list.length - 1];
+         }
+ 
+         // Header
+         let header;
+         if (i !== frame_info_list.length) {
+             header = `${parseFloat(frame_percent * i * 100).toFixed(2)}% {`;
+         } else {
+             header = '100% {';
+         }
+         image_keyframs += header;
+         clip_keyframs += header;
+ 
+         if (item.source) {
+             const tr = _getTransformInfo(item.source, item.target, canvas_width, canvas_height);
+             const clip_trans = _createTransformStyle(tr.csw, tr.csh, tr.cx, tr.cy);
+             const image_trans = _createTransformStyle(tr.sw, tr.sh, tr.x, tr.y);
+ 
+             let tr_str = "";
+             tr_str = `${tr_str}transform:${clip_trans};transform-origin:left top;`;
+             clip_keyframs += tr_str;
+ 
+             tr_str = "";
+             tr_str = `${tr_str}transform:${image_trans};transform-origin:left top;`;
+             image_keyframs += tr_str;
+         }
+ 
+         image_keyframs += '}';
+         clip_keyframs += '}';
+     }
+ 
+     image_keyframs += '}';
+     clip_keyframs += '}';
+ 
+     if (keyFrameStyleSheet) {
+         keyFrameStyleSheet.insertRule(image_keyframs);
+         keyFrameStyleSheet.insertRule(clip_keyframs);
+ 
+         // 记录Keyframe设置，以便于界面关闭时进行清理
+         keyFrameNames.clip = anim_name_clip;
+         keyFrameNames.image = anim_name_image;
+         keyFrameNames.valid = true;
+     }
+     const cache = animateFrameCache;
+ 
+     cache.clipAnimName = `${anim_name_base}-clip`;
+     cache.imageAnimName = `${anim_name_base}-image`;
+ 
+     cache.clipStyle = {
+         overflow: "hidden",
+         width: canvas_width,
+         height: canvas_height,
+         transform: null, // 重置 transform，以免影响keyframe动画
+         transformOrigin: TRANSFORM_ORIGIN_LEFT_TOP.value,
+         animation: null, // 外部设置，需要时间和loop信息
+     };
+ 
+     cache.transStyle = {
+         transform: null, // 重置 transform，以免影响keyframe动画
+         transformOrigin: TRANSFORM_ORIGIN_LEFT_TOP.value,
+         animation: null, // 外部设置，需要时间和loop信息
+         width: source_width,
+         height: source_height,
+     };
+ 
+     cache.imageStyle = {
+         backgroundImage: image_url,
+         width: source_width,
+         height: source_height,
+     };
+ }
+ 
+ const _IsAutoStart = () => {
+     let autoStart = false;
+     if (typeof props.autostart === "boolean") {
+         autoStart = props.autostart;
+     } if (typeof props.autostart === "string" && props.autostart !== "none") {
+         autoStart = true;
+     }
+     return autoStart;
+ }
+ 
+ 
+ const _AnalyzeProp = () => {
+     const used = props.controller && props.controller.Used;
+     if (props.spriteInfo.frames.length === 1 || (!used && !_IsAutoStart()) || stopped.value) {
+         // 单图模式
+         // 解析图片信息
+         _updateFrozeFrameCache(
+             props.imageUrl,
+             props.spriteInfo.frames,
+             props.viewSize.w,
+             props.viewSize.h,
+             props.spriteInfo.meta.size.w,
+             props.spriteInfo.meta.size.h
+         );
+ 
+         return {
+             clipStyle: frozeFrameCache.clipStyle,
+             transStyle: frozeFrameCache.transStyle,
+             imageStyle: frozeFrameCache.imageStyle,
+         };
+     }
+ 
+ 
+     // 动画模式
+     if (animateFrameCache.imageStyle.backgroundImage !== props.imageUrl) {
+         // 解析图片信息
+         _updateAnimateFrameCache(
+             props.imageUrl,
+             props.spriteInfo.frames,
+             props.viewSize.w,
+             props.viewSize.h,
+             props.spriteInfo.meta.size.w,
+             props.spriteInfo.meta.size.h
+         );
+     }
+ 
+     // 使用duration和loop信息更新动画设定
+     animateFrameCache.clipStyle.animation =
+         `${animateFrameCache.clipAnimName} ${spriteDuration.value}s steps(1,end) ${props.loop}`;
+     animateFrameCache.transStyle.animation =
+         `${animateFrameCache.imageAnimName} ${spriteDuration.value}s steps(1,end) ${props.loop}`;
+ 
+     return {
+         clipStyle: animateFrameCache.clipStyle,
+         transStyle: animateFrameCache.transStyle,
+         imageStyle: animateFrameCache.imageStyle,
+     };
+ }
+ let transform_style = reactive(_AnalyzeProp());
+ 
+ watch(props, (n, o) => {
+     transform_style = _AnalyzeProp();
+ })
+ const onAnimEndDelegate = () => {
+     // 在onAnimEnd之前进行Stop，以防onAnimEnd内部继续发生别的操作
+     stopped.value = true;
+     if (props.onAnimEnd) {
+         props.onAnimEnd();
+     }
+ }
+ 
+ const onBlinkAnimEnd = () => {
+     // 在onAnimEnd之前进行Stop，以防onAnimEnd内部继续发生别的操作
+     blinkAnim.value = null;
+ }
+ 
+ const op = {
+     start: (end_frame, duration) => {
+         if (props.spriteInfo.frames && props.spriteInfo.frames.length === 1) {
+             return;
+         }
+         innerId.value += 1;
+         stopped.value = false;
+         spriteDuration.value = duration || props.duration;
+         stopFrame.value = end_frame || stopFrame.value;
+     },
+     stop: (end_frame) => {
+         if (props.spriteInfo.frames && props.spriteInfo.frames.length === 1) {
+             return;
+         }
+         stopped.value = true;
+         stopFrame.value = end_frame || stopFrame.value;
+     },
+     blink: (alphas, duration, ease, delay, repeat) => {
+         // 注意：比较数组是否相同仅在此场景下使用toString，其他场景
+         if (!blinkAnimCache
+             || (blinkAnimCache.alphas.toString() !== alphas.toString()
+                 || blinkAnimCache.duration !== duration
+                 || blinkAnimCache.ease !== ease
+                 || blinkAnimCache.delay !== delay
+                 || blinkAnimCache.repeat !== repeat)) {
+             const anim_name_base = _getAnimNameBase();
+             const anim_name_blink = `${anim_name_base}-blink`;
+             let image_keyframs = `@keyframes ${anim_name_blink} {`;
+             const frame_percent = 1 / (alphas.length);
+             for (let i = 0; i < alphas.length; i++) {
+                 const alpha = alphas[i];
+                 let header;
+                 if (i !== alphas.length - 1) {
+                     header = `${parseFloat(frame_percent * i * 100).toFixed(2)}% {`;
+                 } else {
+                     header = '100% {';
+                 }
+                 image_keyframs += header;
+ 
+                 if (alpha) {
+                     const tr_str = ` opacity:${alpha};`;
+                     image_keyframs += tr_str;
+                 }
+ 
+                 image_keyframs += '}';
+                 image_keyframs += "\n";
+             }
+             image_keyframs += '}';
+             if (keyFrameStyleSheet) {
+                 keyFrameStyleSheet.insertRule(image_keyframs);
+             }
+             blinkAnimCache = {
+                 alphas,
+                 duration,
+                 ease,
+                 delay,
+                 repeat,
+                 blinkAnimName: anim_name_blink
+             };
+         }
+ 
+         // 参数格式化
+         ease = ease || "";
+         delay = delay || 0;
+         repeat = (repeat === -1) ? "infinite" : (repeat || 1);
+ 
+         const animName = `${blinkAnimCache.blinkAnimName} ${duration}s ${ease} ${delay}s ${repeat}`;
+         blinkAnim.value = animName;
+         stopped.value = true;
+     }
+ 
+ };
+ //TODO:
+ props.controller?._setSpriteImg(op);
+ </script>
+  
+ <template>
+     <div id="canvas">
+         <div id="clip" :style="{ ...transform_style.clipStyle }">
+             <div id="trans" :style="{ ...transform_style.transStyle }" @animationend="onAnimEndDelegate">
+                 <div id="image" :style="{ ...transform_style.imageStyle, animation: blinkAnim }"
+                     @animationend="onBlinkAnimEnd"></div>
+             </div>
+         </div>
+     </div>
+ </template>
+  
+ <style scoped>
+ @keyframes sprite-tag {}
+ </style>

package/utils/JsViewVueWidget/JsvTextBox.vue

@@ -11,7 +11,7 @@
 -->
 
 <script setup>
-import { ref, computed } from "vue";
+import { computed } from "vue";
 
 const props = defineProps({
   style: Object,