@shijiu/jsview-vue 2.3.151-test.0 → 3.0.0-test.0

package/utils/JsViewVueWidget/JsvFreeMoveActor/SetCondition.ts

@@ -5,7 +5,6 @@
  * @Description: file content
  */
 
-import ActionRefObject from "./ActionRefObject";
 import CallbackManager from "./CallbackManager";
 import { ConditionSetBuilder, StateCmdBuilder, CmdPackBuilder } from "./ForgeTypeDefine"
 import { NexusNode } from "./NexusNode";
@@ -74,22 +73,39 @@ class ConditionPackBuilder {
   }
 
   /**
-   * reachPosition
-   * 获取 ReachPosition 的condition
+   * wallPosition
+   * 获取 wallPosition 的condition
    * x或y已经处于，或者被越过时触发
    * 
-   * @param {double} xPosition 位置有效值，可以传入undefined来决定此值不设置
-   * @param {double} yPosition 位置有效值，可以传入undefined来决定此值不设置
+   * 和reachPosition/acrossPosition的最大区别是, 
+   * reach/across是有碰撞时才激活, 
+   * 而wall是初始位置已经超过wall时就会立刻激活
+   * 
+   * @param {string} direction 方向，可以是 "left" | "right" | "top" | "bottom", 标明初始wall位置相对运动物体的方位
+   * @param {double} position 位置有效值，direction为left/right时作用于x，direction为top/bottom时作用于y
    */
-  wallPosition(direction: WallDirection, xPosition: UNumber, yPosition: UNumber): object | null {
+  wallPosition(direction: WallDirection, position: UNumber): object | null {
     if (!this._CheckCommonInfo()) {
       return null;
     }
     this._CommonInfoValid = false;
 
+    const xPosition = direction === "left" || direction === "right" ? position : undefined;
+    const yPosition = direction === "top" || direction === "bottom" ? position : undefined;
+
     return this._BuildPack(ConditionSetBuilder.WallPosition(direction, xPosition, yPosition, this._CommonInfo));
   }
 
+  /**
+   * boxPosition
+   * 获取 boxPosition 的condition
+   * 相当于用4面wallPosition组合起来的box(本物体一般处于box内, 一旦移到box外就激活)
+   * 
+   * @param {double} left 左边界位置有效值，可以传入undefined来表面此面无wallPosition
+   * @param {double} top 上边界位置有效值，可以传入undefined来表面此面无wallPosition
+   * @param {double} right 右边界位置有效值，可以传入undefined来表面此面无wallPosition
+   * @param {double} bottom 下边界位置有效值，可以传入undefined来表面此面无wallPosition
+   */
   boxPosition(left: UNumber, top: UNumber, right: UNumber, bottom: UNumber): any {
     if (!this._CheckCommonInfo()) {
       return null;
@@ -108,6 +124,13 @@ class ConditionPackBuilder {
     return this._BuildPack(ConditionSetBuilder.OffsetPosition(left, top, right, bottom, this._CommonInfo));
   }
 
+  /**
+   * startMove
+   * 当FreeMove块开始移动时触发, 用于探测方块从静止到移动的过程
+   * 
+   * @param {boolean} xEnable x轴是否启用
+   * @param {boolean} yEnable y轴是否启用
+   */
   startMove(xEnable: boolean, yEnable: boolean) {
     if (!this._CheckCommonInfo()) {
       return null;
@@ -121,6 +144,8 @@ class ConditionPackBuilder {
   }
 
   /**
+   * 内部API
+   * 
    * AcrossPosition
    * 获取 AcrossPosition 的condition
    * x或y被越过时触发
@@ -139,6 +164,8 @@ class ConditionPackBuilder {
   }
 
   /**
+   * 内部API
+   * 
    * OnNexusEvent
    * 响应 actRef 关联的 action 所发出的内部状态信息
    * 
@@ -162,6 +189,8 @@ class ConditionPackBuilder {
   }
 
   /**
+   * 内部API
+   * 
    * OnHitBlock
    * 监听Actor关联的LayoutView与blocker碰撞的状态
    * 碰撞发生后，可以 State.revertWithHitBlock 将LayoutView返回到紧贴到碰撞点的状态
@@ -198,6 +227,11 @@ class ConditionPackBuilder {
   }
 
   /** 指定的swapcount前才能执行 */
+  /**
+   * 内部API
+   * 
+   * onSwapCount
+   */
   onSwapCount() {
     // CommonInfo 只能使用一次，规避多次使用问题
     if (!this._CheckCommonInfo()) {
@@ -207,6 +241,12 @@ class ConditionPackBuilder {
     return this._BuildPack(ConditionSetBuilder.onSwapCount(0, this._CommonInfo));
   }
 
+  /**
+   * 内部API
+   * 
+   * onDragStart
+   * 当拖拽开始时触发
+   */
   onDragStart() {
     if (!this._CheckCommonInfo()) {
       return null;
@@ -216,6 +256,12 @@ class ConditionPackBuilder {
     return this._BuildPack(ConditionSetBuilder.OnDragStart(this._CommonInfo, this._ContorlSlefNexus.token));
   }
 
+  /**
+   * 内部API
+   * 
+   * onDragEnd
+   * 当拖拽结束时触发
+   */
   onDragEnd() {
     if (!this._CheckCommonInfo()) {
       return null;
@@ -224,6 +270,12 @@ class ConditionPackBuilder {
     return this._BuildPack(ConditionSetBuilder.OnDragEnd(this._CommonInfo, this._ContorlSlefNexus.token));
   }
 
+  /**
+   * 内部API
+   * 
+   * onTouchDown
+   * 当触摸开始时触发
+   */
   onTouchDown() {
     if (!this._CheckCommonInfo()) {
       return null;
@@ -232,6 +284,12 @@ class ConditionPackBuilder {
     return this._BuildPack(ConditionSetBuilder.OnTouchDown(this._CommonInfo, this._ContorlSlefNexus.token));
   }
 
+  /**
+   * 内部API
+   * 
+   * onTouchRelease
+   * 当触摸结束时触发
+   */
   onTouchRelease() {
     if (!this._CheckCommonInfo()) {
       return null;
@@ -240,6 +298,12 @@ class ConditionPackBuilder {
     return this._BuildPack(ConditionSetBuilder.OnTouchRelease(this._CommonInfo, this._ContorlSlefNexus.token));
   }
 
+  /**
+   * 内部API
+   * 
+   * onFlingStart
+   * 当 fling 开始时触发
+   */
   onFlingStart() {
     if (!this._CheckCommonInfo()) {
       return null;
@@ -248,6 +312,12 @@ class ConditionPackBuilder {
     return this._BuildPack(ConditionSetBuilder.OnFlingStart(this._CommonInfo, this._ContorlSlefNexus.token));
   }
 
+  /**
+   * 内部API
+   * 
+   * onFlingProgress
+   * 当 fling 过程中触发
+   */
   onFlingProgress() {
     if (!this._CheckCommonInfo()) {
       return null;
@@ -256,6 +326,12 @@ class ConditionPackBuilder {
     return this._BuildPack(ConditionSetBuilder.OnFlingProgress(this._CommonInfo, this._ContorlSlefNexus.token));
   }
 
+  /**
+   * 内部API
+   * 
+   * onFlingEnd
+   * 当 fling 结束时触发
+   */
   onFlingEnd() {
     if (!this._CheckCommonInfo()) {
       return null;
@@ -264,6 +340,12 @@ class ConditionPackBuilder {
     return this._BuildPack(ConditionSetBuilder.OnFlingEnd(this._CommonInfo, this._ContorlSlefNexus.token));
   }
 
+  /**
+   * 内部API
+   * 
+   * onFlingCancel
+   * 当 fling 取消时触发
+   */
   onFlingCancel() {
     if (!this._CheckCommonInfo()) {
       return null;
@@ -272,6 +354,12 @@ class ConditionPackBuilder {
     return this._BuildPack(ConditionSetBuilder.OnFlingCancel(this._CommonInfo, this._ContorlSlefNexus.token));
   }
 
+  /**
+   * 内部API
+   * 
+   * onFlingDrop
+   * 当 fling 拖拽结束时触发
+   */
   onFlingDrop() {
     if (!this._CheckCommonInfo()) {
       return null;
@@ -281,6 +369,22 @@ class ConditionPackBuilder {
   }
 
   /**
+   * 内部API
+   * 
+   * onMouseWheelScrollProgress
+   * 当鼠标滚轮滚动时触发
+   */
+  onMouseWheelScrollProgress() {
+    if (!this._CheckCommonInfo()) {
+      return null;
+    }
+    this._CommonInfoValid = false;
+    return this._BuildPack(ConditionSetBuilder.OnMouseWheelScrollProgress(this._CommonInfo, this._ContorlSlefNexus.token));
+  }
+
+  /**
+   * 内部API
+   * 
    * touchCount
    * 当touchDown时，Count会++，用于解决多次touchDown引发的时序问题
    * 当native的count计数等于给定的参数设定的count时，触发condition
@@ -294,6 +398,8 @@ class ConditionPackBuilder {
   }
 
   /**
+   * 内部API
+   * 
    * onMovement
    * 当FreeMove块移动时，移动了给定的距离值后触发条件, 给定的距离值由sensitivity定义
    * 
@@ -327,6 +433,12 @@ class ConditionPackBuilder {
       xSensitivity, ySensitivity, xyEnables));
   }
 
+  /**
+   * 内部API
+   * 
+   * movementSync
+   * @param {NexusNode} nexusRef 用于同步运动的nexus节点
+   */
   movementSync(nexusRef: NexusNode) {
     if (!this._CheckCommonInfo()) {
       return null;

package/utils/JsViewVueWidget/JsvFreeMoveActor/SetState.ts

@@ -8,25 +8,30 @@ class StatePackBuilder {
 
   }
 
-  /*
+  /**
    * clearConditions
-   * 清理所有预制的condition
+   * 清理所有已经设置的condition, 
+   * condition如果不清理则伴随着FreeMoveActor的生命周期一直存在
    */
   clearAllConditions(): Object {
     return CmdPackBuilder.InitStateCmdPack(StateCmdBuilder.RemoveAllCondtions());
   }
 
-  /*
+  /**
    * removeConditionByGroup
-   * 清理指定组的condition
+   * 清理指定组的condition, 
+   * group 和 @file://./ActorControl.ts 中condition()函数声明的group对应
+   * condition如果不清理则伴随着FreeMoveActor的生命周期一直存在
    */
   removeConditionByGroup(group: number): Object {
     return CmdPackBuilder.InitStateCmdPack(StateCmdBuilder.RemoveByGroup(group));
   }
 
-  /*
+  /**
    * removeConditionByGroup
    * 清理指定名字的condition
+   * specName 和 @file://./ActorControl.ts 中condition()函数声明的specName对应
+   * condition如果不清理则伴随着FreeMoveActor的生命周期一直存在
    */
   removeConditionByName(specName: String) {
     return CmdPackBuilder.InitStateCmdPack(StateCmdBuilder.RemoveByName(specName));
@@ -34,10 +39,13 @@ class StatePackBuilder {
 
   /**
    * activeCondition
-   * 重新激活对应gid或者specName的condition
+   * 重新激活对应group或者specName的condition
+   * group和specName和 @file://./ActorControl.ts 中condition()函数声明的group或specName对应
+   * 
    * 一个condition处于非激活有两种可能，
    * 1. 允许触发一次的condition已经完成触发
-   * 2. 被DeactiveCondition关闭过的condition
+   *    见 @file://./ActorControl.ts 中condition()函数声明的multiTimes == 1的设置即为一次触发
+   * 2. 被 deactiveCondition()关闭过的condition
    * 
    * @param {int} groupType  (可选)对应condition的groupType, 与specName二选一
    * @param {String} specName  (可选)对应condition的specName, 与groupId二选一, 当groupId为 undefined 或 -1 时生效
@@ -48,7 +56,7 @@ class StatePackBuilder {
 
   /**
    * deactiveCondition
-   * 停止对应gid或者specName的condition
+   * 停止对应group或者specName的condition
    * 
    * @param {int} groupType  (可选)对应condition的groupType, 与specName二选一
    * @param {String} specName  (可选)对应condition的specName, 与groupId二选一, 当groupId为 undefined 或 -1 时生效
@@ -57,8 +65,9 @@ class StatePackBuilder {
     return CmdPackBuilder.InitStateCmdPack(StateCmdBuilder.DeactiveCondition(groupType, specName));
   }
 
-  /*
+  /**
    * setStartPos 立刻将actor运动起始点设置到目标位置, 作为下一个Action执行时的位置起点
+   * 若没有新的Action执行, 则这个位置改变不会有任何效果
    *   注意1: 只影响当speed/accel不为0时的下一帧的运动起始位置，
    *          当speed/accel为0状态下要移动物体请用 Action.teleportTo
    *   注意2: 此为state设置，下一帧直接以此state开始，所以不会触发任何positionCondition的cross条件
@@ -68,11 +77,13 @@ class StatePackBuilder {
    *      targetY      (int) 带符号整数，目标位置，如果设置为undefined，标识不以此轴为终点
    */
   setStartPos(targetX: number | undefined, targetY: number | undefined) {
-    return CmdPackBuilder.InitStateCmdPack(StateCmdBuilder.SetPos(targetX, targetY));
+    return CmdPackBuilder.InitStateCmdPack(StateCmdBuilder.SetAbsPos(targetX, targetY));
   }
 
-  /*
+  /**
    * setStartOffsetPos 立刻将actor移动以当前位置相对位移的位置, 作为下一个Action执行时的位置起点
+   * 用offset的方式可以解决触发condition时, drawX或drawY并不是完全和condition的坐标重合, 偏差的坐标可由offset继承
+   * 
    *   注意1: 只影响当speed/accel不为0时的下一帧的运动起始位置，
    *          当speed/accel为0状态下要移动物体请用 Action.teleportOffset
    *   注意2: 此为state设置，下一帧直接以此state开始，所以不会触发任何positionCondition的cross条件
@@ -85,22 +96,47 @@ class StatePackBuilder {
     return CmdPackBuilder.InitStateCmdPack(StateCmdBuilder.SetOffsetPos(offsetX, offsetY));
   }
 
-  /*
+  /**
+   * updateBaseOffset
+   * 更新本div的基准坐标, 同时立刻调整drawX, drawY, 使其相对于父dom节点的屏幕坐标保持不变
+   * 
+   * @param {number} offsetX 基准坐标x偏移量
+   * @param {number} offsetY 基准坐标y偏移量
+   */
+  updateBaseOffset(offsetX: number, offsetY: number) {
+    // return CmdPackBuilder.InitStateCmdPack(StateCmdBuilder.UpdateBaseOffset(offsetX, offsetY));
+  }
+
+  /**
+   * 内部API
+   * 
    * 在BlockerCondition发生时，进行位置回滚处理
    */
   revertWithHitBlock() {
     return CmdPackBuilder.InitStateCmdPack(StateCmdBuilder.RevertWithHitBlock());
   }
 
+  /**
+   * 内部API
+   * 
+   * setHitWallOverflow
+   */
   setHitWallOverflow() {
     return CmdPackBuilder.InitStateCmdPack(StateCmdBuilder.SetHitWallOverflow());
   }
 
+  /**
+   * 内部API
+   * 
+   * touchLockSwitch
+   */
   touchLockSwitch(isLock: boolean, direction: number, unlockThreshold: number = -1) {
     return CmdPackBuilder.InitStateCmdPack(StateCmdBuilder.TouchLockSwitch(isLock, direction, unlockThreshold));
   }
 
-  /*
+  /**
+   * 内部API
+   * 
    * fireNexusEvent 发出Nexus event
    * @param {NexusNode} nexusRecv 由 FreeMoveFunc.newNexus() 创建, 作为通讯句柄，类似电话号，在onNexusEvent监听
    * @param {number} detailEventType 监听的事件类型, 类比与分机号，和onNexusEvent约定, 自定义内容要求1000以上
@@ -110,6 +146,8 @@ class StatePackBuilder {
   }
 
   /**
+   * 内部API
+   * 
    * setTouchAttractChild
    * 
    * 绑定一个子view中的FreeMoveDiv
@@ -127,6 +165,8 @@ class StatePackBuilder {
   }
 
   /**
+   * 内部API
+   * 
    * startMovementSync
    * 
    * 发出进度同步信号(可以一个FreeMove绑定多个信号发生器，但目前场景估计只需要一个发生器即可)
@@ -158,7 +198,9 @@ class StatePackBuilder {
       xyEnable));
   }
 
-  /*
+  /**
+   * 内部API
+   * 
    * stopMovementSync
    * 
    * 停止由startMovementSync发起的的同步信号

package/utils/JsViewVueWidget/JsvFreeMoveActor/index.js

@@ -1,4 +1,4 @@
-import JsvFreeMoveActor from "./FreeMoveActor.vue";
+import JsvFreeMoveActor from "./JsvFreeMoveActor.vue";
 import { ActEventDefine } from "./ForgeTypeDefine.ts"
 import { default as KeepFlags } from "./KeepFlags.ts"
 import JsvEnvBlocker from "./JsvEnvBlocker.vue"
@@ -13,6 +13,7 @@ let FreeMoveDef = {
 }
 
 let FreeMoveFunc = {
+    // NexusNode是用于anim之间信息通知的, 全局唯一, 以全局id区分
     newNexus,
     ActControlDebug,
     GetSyncLinkManager,

package/utils/JsViewVueWidget/JsvInput/EditViewOperator.ts

@@ -19,6 +19,7 @@ declare interface CursorOperater {
 declare type TextChangedFunc = (final_text: string, dsp_text: string) => void;
 declare type CursorMovedFunc = (new_text_start_index: number, new_cursor_left: number) => void;
 declare type TextOverflowFunc = (origin_text: string, new_text: string) => void;
+declare type ImeActionFunc = (action: number) => void;
 
 export class EditViewOperator {
     private _EditViewHandle: any = null;
@@ -47,15 +48,18 @@ export class EditViewOperator {
     private _OnTextChangedCallback: TextChangedFunc;
     private _OnCursorMoved: CursorMovedFunc;
     private _TextOverflowFunc: TextOverflowFunc | undefined;
+    private _OnImeActionFunc: ImeActionFunc | undefined;
 
     constructor(
         text_changed_callback: TextChangedFunc,
         cursor_moved: CursorMovedFunc,
-        text_overflow: TextOverflowFunc | undefined = undefined
+        text_overflow: TextOverflowFunc | undefined = undefined,
+        on_ime_action: ImeActionFunc | undefined = undefined
     ) {
         this._OnTextChangedCallback = text_changed_callback;
         this._OnCursorMoved = cursor_moved;
         this._TextOverflowFunc = text_overflow;
+        this._OnImeActionFunc = on_ime_action;
     }
 
     // 当前是否为焦点
@@ -143,7 +147,7 @@ export class EditViewOperator {
         this._EditViewHandle.addImeEventListener({
             OnTextChanged: this._OnTextChanged.bind(this),
             OnStatusChanged: this._OnStatusChanged.bind(this),
-            OnEditAction: null
+            OnEditAction: this._OnEditAction.bind(this),
         });
 
         this._EditViewId = Forge.sViewStore.add(
@@ -202,6 +206,7 @@ export class EditViewOperator {
     }
 
     onUnmounted() {
+        this._EditViewHandle?.hideIme(); // 当home键之类对节点进行unmount时，要隐藏输入法
         this._EditViewHandle?.releaseResource();
         this._EditVisibleArea!.releaseResource();
         if (this._EditViewId != -1) {
@@ -309,6 +314,10 @@ export class EditViewOperator {
     private _OnStatusChanged(visible: boolean) {
     }
 
+    private _OnEditAction(action: number) {
+        this._OnImeActionFunc?.(action);
+    }
+
     public addText(text: string) {
         if (this._InputType === InputType.NUMBER && !ifDigital(text)) {
             // console.log(`The input data:${string} is not number`);

package/utils/JsViewVueWidget/JsvInput/JsvInput.vue

@@ -34,6 +34,17 @@
  *                                  返回true时可以规避ime显示后有时会吐出返回键导致整体退出的问题
  *              @params isUp {boolean} 是down(false)还是up(true)
  *              @return {boolean}
+ *         onImeAction {function}   软键盘触发 editor action 的回调
+ *              @params action {number} Android `BaseInputConnection#performEditorAction()` 吐回的值
+ *                  0: IME_ACTION_UNSPECIFIED
+ *                  1: IME_ACTION_NONE
+ *                  2: IME_ACTION_GO
+ *                  3: IME_ACTION_SEARCH
+ *                  4: IME_ACTION_SEND
+ *                  5: IME_ACTION_NEXT
+ *                  6: IME_ACTION_DONE
+ *                  7: IME_ACTION_PREVIOUS
+ *         enableTap {boolean}       是否启用点击事件
  *
  *  InputDispatcher dispatch支持事件:
  *          add
@@ -138,8 +149,14 @@ const rProps = defineProps({
     type: Function,
   },
   onBackKey: {
-    Type: Function,
+    type: Function,
+  },
+  onImeAction: {
+    type: Function,
   },
+  enableTap: {
+    type: Boolean,
+  }
 });
 
 let rCursorRef = shallowRef(null);
@@ -169,10 +186,20 @@ function _OnCursorPositionChanged(text_left, cursor_left) {
 let cEditViewOperator = new EditViewOperator(
   _OnTextChanged,
   _OnCursorPositionChanged,
-  rProps.onTextOverflow
+  rProps.onTextOverflow,
+  (action) => {
+    rProps.onImeAction?.(action);
+  }
 );
 let vEditViewInnerId = cEditViewOperator.generateView(); // 建立Forge.EditView
 
+let onTap = computed(() => {
+  return rProps.enableTap ? () => {
+    console.log("myt onTap");
+    cEditViewOperator.showSoftIme();
+  } : null;
+});
+
 cEditViewOperator.updateInputConfig(
   rProps.width,
   rProps.height,
@@ -324,6 +351,7 @@ defineExpose({
         height: rProps.height,
         overflow: 'hidden',
       }"
+      @click="onTap"
     >
       <div
         :style="{

package/utils/JsViewVueWidget/JsvLine/JsvLine.vue

@@ -35,7 +35,7 @@
 </template>
 
 <script setup>
-import { shallowRef, onBeforeUnmount } from "vue";
+import { shallowRef, onBeforeUnmount, watch } from "vue";
 import { createTexture } from "./LineManager";
 let isShow = shallowRef(true);
 const props = defineProps({
@@ -52,13 +52,30 @@ const getDistance = (point1, point2) => {
   const h = Math.abs(point1.y - point2.y);
   return Math.sqrt(w * w + h * h);
 };
-const width = getDistance(props.startPos, props.endPos);
 
-let angle =
-  (180 / Math.PI) * Math.asin((props.endPos.y - props.startPos.y) / width);
-if (props.endPos.x < props.startPos.x) {
-  angle = 180 - angle;
-}
+const width = shallowRef(getDistance(props.startPos, props.endPos));
+const angle = shallowRef(0);
+
+const updateWidthAndAngle = () => {
+  const w = getDistance(props.startPos, props.endPos);
+  width.value = w;
+  if (w === 0) {
+    angle.value = 0;
+  } else {
+    let tmpAngle = (180 / Math.PI) * Math.asin((props.endPos.y - props.startPos.y) / w);
+    if (props.endPos.x < props.startPos.x) {
+      tmpAngle = 180 - tmpAngle;
+    }
+    angle.value = tmpAngle;
+  }
+};
+
+// watch for startPos & endPos changes
+watch(
+  () => [props.startPos.x, props.startPos.y, props.endPos.x, props.endPos.y],
+  updateWidthAndAngle,
+  { immediate: true }
+);
 
 const AnimEnd = () => {
   if (props.appear == "fadeOut") {

package/utils/JsViewVueWidget/JsvMarquee.vue

@@ -318,7 +318,7 @@ const stopSlide = () => {
 //公共不满足条件部分
 const commonFailState = () => {
   if (props.forceSlide) {
-    console.error("请注意文字长度和间隙加起来必须大于组件宽度");
+    // console.error("请注意文字长度和间隙加起来必须大于组件宽度");
     text1.value = props.text;
   } else {
     text1.value = props.text;

package/utils/JsViewVueWidget/JsvNativeSharedDiv.vue

@@ -17,7 +17,7 @@
 <script setup>
 import { Forge } from "@shijiu/jsview/dom/jsv-forge-define";
 import { JsvTextureStoreApi } from "../JsViewVueTools/JsvTextureStore/JsvTextureStore";
-import { onUnmounted, shallowRef } from "vue";
+import { onUnmounted, watchEffect } from "vue";
 import JsvNinePatch from "./JsvNinePatch.vue";
 
 const rProps = defineProps({
@@ -96,19 +96,21 @@ if (!rProps.frontLayer) {
 // 通过内置函数构造定制的NativeSharedView
 vJsvMainView = new Forge.NativeSharedView();
 vInnerViewId = Forge.sViewStore.add(new Forge.ViewInfo(vJsvMainView));
-if (rProps.oversize != 0) {
-  vJsvMainView.SetOverSize(rProps.oversize);
-}
+let vOverSizeCache = 0;
 
-// 更新宽高
-if (typeof vJsvMainView != "undefined" && vJsvMainView) {
-  if (rProps.setId) {
-    // 使用设置进来的track id，而非自动生成
-    vJsvMainView.SetTrackId(rProps.setId);
+watchEffect(() => {
+  if (rProps.oversize != vOverSizeCache) {
+    vOverSizeCache = rProps.oversize;
+    vJsvMainView.SetOverSize(vOverSizeCache);
   }
+});
 
-  rProps.getId?.(vJsvMainView.GetTrackId());
+// TrackId
+if (rProps.setId && rProps.setId.length > 0) {
+  // 使用设置进来的track id，而非自动生成
+  vJsvMainView.SetTrackId(rProps.setId);
 }
+rProps.getId?.(vJsvMainView.GetTrackId());
 
 onUnmounted(() => {
   // 清理View管理缓存

package/utils/JsViewVueWidget/JsvNinePatch.vue

@@ -8,19 +8,24 @@
  *      props说明:
  *          style       {Object}    同div的Style，通过width/height来控制.9图片延展后的显示尺寸，另外通过top/left控制坐标
  *          imageUrl    {String}    (必填)显示图片的加载地址
- *          imageWidth  {int}       (必填)原图信息: 原图的宽度(由于正方形,宽高相同)
- *          contentWidth {int}      (废弃)此值为了兼容，会赋值给centerWidth
- *          centerWidth  {int}      (必填)原图信息: .9图的中心区域宽度(repeat区域)
- *          imageDspWidth  {int}    原图缩放后的显示宽度，计算方法: 
+ *          imageWidth  {int}       (必填)相对原图尺寸信息: 原图的宽度(由于正方形,宽高相同)
+ *          centerWidth  {int}      (必填)相对原图尺寸信息: .9图的中心区域宽度(repeat区域), 对于用圆圈做成圆角矩形场景, 用TextureBuilder的api的返回值即可
+ *          imageDspWidth  {int}    原图缩放后的显示宽度，对于用圆圈做成圆角矩形场景, 用TextureBuilder的api的返回值即可
+ *                                对于用其他圆角半径的图来临时顶替指定圆角半径的场景时，用如下计算方法求imageDspWidth: 
  *                                四角为90度圆弧时: imageDspWidth = 显示图形的圆弧半径 / 原图中圆弧的半径 * 原图宽度
  *                                                原图中圆弧半径 = (原图宽度 - borderOutset * 2) / 2
  *                                四角为其他形状时，原图.9图的四角区域，缩放到要和显示图形重合后的宽度。
- *          borderOutset {int}      (必填)原图信息: 图片边缘到中心内容区域边缘的距离, 快速计算: (原图宽度 - 原图中放内容宽度) / 2
- *          animTime    {int}       (必填)缩放动画的时长(单位秒)
- *          waitForInit {boolean}  (选填)尺寸为0时是否进行描画(例如: 首次显示不展示动画的场合，设置为true),默认值为true
+ *          borderOutset {int}      (必填)原
+ *          imageBlendType {String}  (选填) alpha合并模式，默认为普通合成，可设置"alphaOverride", 用于Video挖洞操作
+ *          (已废弃)contentWidth {int}      (已废弃)此值为了兼容，会赋值给centerWidth
+ *          
+ *          从此以下的参数为要做焦点框尺寸变化过渡动画时, 需要传入的属性, 若为静态的焦点框, 则不需要传入:
+ *          animation {string}    (选填)css动画, 格式同css的style.animation, 填写后, animTime启用的漂移动画将失效
+ *          animTime    {int}       (选填)缩放动画的时长(单位秒), 填写后, 当style的top/left/width/height发生变化时, 会自动触发过渡动画
+ *          waitForInit {boolean}  (选填)和animTime一起使用, 用于禁用首次设置top/left/width/height产生的动画
  *          onTransitionEnd { Function } (选填)transition动画结束的回调
  *          onAnimationEnd { Function } (选填)animation动画结束的回调
- *          imageBlendType {String}  (选填) alpha合并模式，默认为普通合成，可设置"alphaOverride", 用于Video挖洞操作
+ *
 -->
 
 <script setup>