@shijiu/jsview-vue 2.2.128 → 2.2.201

package/bin/jsview-vue.mjs

@@ -1,5 +1,5 @@
 import { Forge as Forge$1 } from '@shijiu/jsview/dom/jsv-forge-define.mjs';
-import { ref, computed, toRaw, reactive, nextTick, onMounted, onUpdated, onBeforeUnmount, onBeforeUpdate, openBlock, createElementBlock, renderSlot, shallowRef, resolveComponent, normalizeStyle, createElementVNode, unref, mergeProps, toHandlers, createVNode, withCtx, Fragment, renderList, createCommentVNode, inject, provide, onUnmounted, onActivated, onDeactivated, createBlock, defineAsyncComponent, normalizeProps, guardReactiveProps, watchEffect, toDisplayString, watch, shallowReactive, withDirectives, vShow, defineComponent } from 'vue';
+import { ref, computed, toRaw, reactive, nextTick, onMounted, onUpdated, onBeforeUnmount, onBeforeUpdate, openBlock, createElementBlock, renderSlot, shallowRef, resolveComponent, normalizeStyle, createElementVNode, unref, createVNode, withCtx, Fragment, renderList, createCommentVNode, inject, provide, onUnmounted, onActivated, onDeactivated, createBlock, defineAsyncComponent, normalizeProps, guardReactiveProps, watchEffect, mergeProps, toDisplayString, watch, shallowReactive, withDirectives, vShow, defineComponent } from 'vue';
 import { Forge as Forge$2, ForgeExtension } from '@shijiu/jsview/dom/jsv-forge-define';
 import { createWebHashHistory, createMemoryHistory } from 'vue-router';
 import { L as LoopType } from './jsview-vue-common.mjs';
@@ -196,17 +196,17 @@ const FocusMoveType = {
 const RENDER_ITEM_BREAK_KEY = "__QcodeJsviewMetroWidgetSlot";
 
 //
-// utils/JsViewEngineWidget/MetroWidget/Dispatcher.js;
+// utils/JsViewEngineWidget/MetroWidget/Dispatcher.ts;
 //
 class Dispatcher extends BaseDispatcher {
+  static Type = {
+    setFocusId: Symbol("setFocusId"),
+    updateItem: Symbol("updateItem"),
+    slideToItem: Symbol("slideTo"),
+    setEnterFocusId: Symbol("setEnterFocusId"),
+    setEnterFocusRect: Symbol("setEnterFocusRect")
+  };
 }
-Dispatcher.Type = {
-  setFocusId: Symbol("setFocusId"),
-  updateItem: Symbol("updateItem"),
-  slideToItem: Symbol("slideTo"),
-  setEnterFocusId: Symbol("setEnterFocusId"),
-  setEnterFocusRect: Symbol("setEnterFocusRect")
-};
 
 //
 // utils/JsViewEngineWidget/TemplateParser/Fence.ts;
@@ -1596,18 +1596,28 @@ class CommonMetroTemplate extends MetroTemplate {
         endIndex = baseItem.index;
       }
       if (Math.abs(startIndex - endIndex) <= 1) {
-        const tailItem = this.templateList[this.getTailItemIndex()];
-        let tailInfo = null;
-        if (tailItem) {
-          tailInfo = {
-            left: tailItem.left,
-            top: tailItem.top,
-            width: tailItem.width,
-            height: tailItem.height
-          };
+        const startItem = this.templateList[startIndex];
+        const endItem = this.templateList[endIndex];
+        if (visible(startItem[posKey], startItem[posKey] + startItem[sizeKey])) {
+          baseItem = startItem;
+          break;
+        } else if (visible(endItem[posKey], endItem[posKey] + endItem[sizeKey])) {
+          baseItem = endItem;
+          break;
+        } else {
+          const tailItem = this.templateList[this.getTailItemIndex()];
+          let tailInfo = null;
+          if (tailItem) {
+            tailInfo = {
+              left: tailItem.left,
+              top: tailItem.top,
+              width: tailItem.width,
+              height: tailItem.height
+            };
+          }
+          console.log("MetroWidget: can not find visible item", visibleStart, visibleEnd, tailInfo);
+          return [-1, -1];
         }
-        console.log("MetroWidget: can not find visible item", visibleStart, visibleEnd, tailInfo);
-        return [-1, -1];
       } else {
         baseItem = this.templateList[Math.round((startIndex + endIndex) / 2)];
       }
@@ -1983,6 +1993,9 @@ class TemplateItemAdder {
     return { templateObj: templateItem, measureObj };
   }
   tryAddItem(cur_item = null, page_num = 1) {
+    if (!this._Data || this._Data.length <= 0) {
+      return;
+    }
     let added = false;
     if (this._CurIndex < this._Data.length && (!cur_item || cur_item[this._Key] >= (this._CurPage - 1) * this._PageRange)) {
       while (this._CurIndex < this._Data.length) {
@@ -2008,6 +2021,9 @@ class TemplateItemAdder {
     return added;
   }
   tryAddItemByPosition(position) {
+    if (!this._Data || this._Data.length <= 0) {
+      return;
+    }
     const page_num = Math.ceil(position / this._PageRange + 1);
     if (page_num > this._CurPage) {
       this.tryAddItem(null, page_num - this._CurPage);
@@ -2015,6 +2031,9 @@ class TemplateItemAdder {
     this._OnAddDone?.();
   }
   tryAddItemByIndex(index) {
+    if (!this._Data || this._Data.length <= 0) {
+      return;
+    }
     let _index = Math.min(index, this._Data.length - 1);
     let added = false;
     while (this._CurIndex <= _index) {
@@ -2040,6 +2059,9 @@ class TemplateItemAdder {
     this._OnAddDone?.();
   }
   tryAddItemById(id) {
+    if (!this._Data || this._Data.length <= 0) {
+      return;
+    }
     let _id = Math.min(id, this._Data.length - 1);
     const last_id = this._MetroTemplate.focusableSize - 1;
     if (last_id < _id) {
@@ -2070,6 +2092,9 @@ class TemplateItemAdder {
     this._OnAddDone?.();
   }
   tryAddItemByUid(uid) {
+    if (!this._Data || this._Data.length <= 0) {
+      return;
+    }
     if (this._MetroTemplate.getItemByUid(uid)) {
       return;
     }
@@ -2243,6 +2268,20 @@ class ListMetroTemplate extends MetroTemplate {
     }
     return [start, end];
   }
+  cleanResizeChangeItem(i) {
+    i.neighborIndexList.left = [];
+    i.neighborIndexList.top = [];
+    i.neighborIndexList.right = [];
+    i.neighborIndexList.bottom = [];
+    i.tmpNeighborIndexList.left = [];
+    i.tmpNeighborIndexList.top = [];
+    i.tmpNeighborIndexList.right = [];
+    i.tmpNeighborIndexList.bottom = [];
+    i.pathHistory.left = -1;
+    i.pathHistory.top = -1;
+    i.pathHistory.right = -1;
+    i.pathHistory.bottom = -1;
+  }
   updateItemSize(index, newSize) {
     const item = this.templateList[index];
     if (!item || item.width == newSize.width && item.height == newSize.height) {
@@ -2258,6 +2297,7 @@ class ListMetroTemplate extends MetroTemplate {
       }
     }
     for (let i of needChangeList) {
+      this.cleanResizeChangeItem(i);
       this._addTemplateItem(i);
       i.layoutCache.cache({
         left: i.left,
@@ -2390,6 +2430,7 @@ class RenderItem {
   touchInit = false;
   rootDiv = null;
   enableTap = false;
+  renderKey = ref(0);
   customerCallbackMap = {};
   onRef;
   registerObj;
@@ -2411,6 +2452,13 @@ class RenderItem {
   get index() {
     return this.templateInfo.index;
   }
+  updateCustomData(newCustomData, newItemConfig) {
+    this.customerData = newCustomData;
+    this.itemConfig = newItemConfig;
+    this.customerCallbackMap = {};
+    this.mounted.value = false;
+    this.renderKey.value++;
+  }
   //TODO item的div ref 会调用多次, 待调查
   divRef = (ele) => {
     this.rootDiv = ele;
@@ -2492,6 +2540,7 @@ class RenderItem {
   onDivUnmounted() {
     this.touchInit = false;
     this.divMountedCallback.clear();
+    this.customerCallbackMap = {};
   }
 }
 
@@ -2612,11 +2661,13 @@ class ConditionPackBuilder {
   _CommonInfo;
   _CommonInfoValid;
   _ContorlSlefNexus;
-  constructor(callbackManager, selfNexus) {
+  _BuildersFactory;
+  constructor(callbackManager, selfNexus, buildersFactory) {
     this._Callbacks = callbackManager;
     this._CommonInfo = ConditionSetBuilder.InitCommonInfo();
     this._CommonInfoValid = false;
     this._ContorlSlefNexus = selfNexus;
+    this._BuildersFactory = buildersFactory;
   }
   isInUsing() {
     return this._CommonInfoValid;
@@ -2733,6 +2784,7 @@ class ConditionPackBuilder {
   /**
    * onNextTick
    * 用于对一些Condition激活进行延迟，例如teleportTo处理后延迟激活 OnHitBlock 动作，规避teleportTo处理直接触发OnHitBlocker
+   * 特别场景: onNextTick(0) 可用于充当前帧命令执行完毕的回调，相当于为命令执行完毕做一个callback
    * 
    */
   onNextTick(tickGap = 1) {
@@ -2740,8 +2792,8 @@ class ConditionPackBuilder {
       return null;
     }
     this._CommonInfoValid = false;
-    if (tickGap <= 0) {
-      tickGap = 1;
+    if (tickGap < 0) {
+      tickGap = 0;
     }
     return this._BuildPack(ConditionSetBuilder.OnNextTick(tickGap, this._CommonInfo));
   }
@@ -2878,8 +2930,17 @@ class ConditionPackBuilder {
   _BuildPack(conditionSet) {
     let cmdPack = CmdPackBuilder.InitStateCmdPack(StateCmdBuilder.NewCondition(conditionSet));
     let callbackManager = this._Callbacks;
-    cmdPack["then"] = (childCmdPackList) => {
-      setChildCommnadPackList(conditionSet, callbackManager, childCmdPackList);
+    cmdPack["then"] = (creatorOrArray) => {
+      if (creatorOrArray) {
+        let childCmdPackList;
+        if (typeof creatorOrArray == "function") {
+          childCmdPackList = creatorOrArray(this._BuildersFactory);
+        } else {
+          childCmdPackList = creatorOrArray;
+        }
+        setChildCommnadPackList(conditionSet, callbackManager, childCmdPackList);
+        return cmdPack;
+      }
       return cmdPack;
     };
     return cmdPack;
@@ -3179,21 +3240,28 @@ class ActorPackBuilder {
    * 只能放在 movementSync 的then中，用于将Sync同步信息按比例转化成
    * (注意): 如果触发链条上有自己发出的信息，则将不再产生动作，规避循环触发
    * 
-   * @param {int} left  运动识别区域的left, 可以为负
-   * @param {int} top  运动识别区域的top, 可以为负
-   * @param {int} right  运动识别区域的right, 可以为负，必须大于left
-   * @param {int} bottom  运动识别区域的bottom, 可以为负，必须大于bottom
+   * @param {int} horizontalStart  横向运动识别区域的0%对应位置, 可以为负
+   * @param {int} horizontalEnd  横向运动识别区域的100%对应位置, 可以为负，可以小于start
+   * @param {int} verticalStart  纵向运动识别区域的0%对应位置, 可以为负
+   * @param {int} verticalEnd  纵向运动识别区域的100%对应位置, 可以为负，可以小于end
    * @param {int} xyEnable  x,y是否都触发, 0b01对应x, 0b10对应y, 可以或运算在一起
    * @param {int} syncType 换算公式: 
    *                        1: 正比公式:selfPercent = givenPercent  
    *                        2: 反比公式:selfPercent = (1 - givenPercent)
    */
-  ackMovementSync(left, top, right, bottom, xyEnable, syncType) {
+  ackMovementSync(horizontalStart, horizontalEnd, verticalStart, verticalEnd, xyEnable, syncType) {
     if (!this._BasicPreProcess("ackMovementSync")) {
       return;
     }
     let cmdList = [];
-    cmdList.push(ActionCmdBuilder.AckMovementSync(left, top, right, bottom, xyEnable, syncType));
+    cmdList.push(ActionCmdBuilder.AckMovementSync(
+      horizontalStart,
+      horizontalEnd,
+      verticalStart,
+      verticalEnd,
+      xyEnable,
+      syncType
+    ));
     return CmdPackBuilder.InitActCmdPack(this._SpeedKeeps, this._AccKeeps, this._NexusRecv?.token, cmdList);
   }
   _BuildAccelOnPole(builderThis, cmdList, nexusRecv, onRevertX, onRevertY) {
@@ -3351,26 +3419,26 @@ class StatePackBuilder {
    * 
    * 发出进度同步信号(可以一个FreeMove绑定多个信号发生器，但目前场景估计只需要一个发生器即可)
    * 计算当前freeMove的postion和运动识别区域的比值
-   * xPercent = (xPos - left) / (right - left)
-   * yPercent = (yPos - top) / (bottom - top)
+   * xPercent = (xPos - horizontalStart) / (horizontalEnd - horizontalStart)
+   * yPercent = (yPos - verticalStart) / (verticalEnd - verticalStart)
    * x和y可以为负数，也可能>100%
    * 
    * 当多次调用时，nexusRef相同时，则为更新运动识别区域，nexusRef不同时则为新建信号发起器
    * 
    * @param {NexusNode} nexusRef  绑定的nexus句柄，接受者用这个句柄来进行监听
-   * @param {int} left  运动识别区域的left, 可以为负
-   * @param {int} top  运动识别区域的top, 可以为负
-   * @param {int} right  运动识别区域的right, 可以为负，必须大于left
-   * @param {int} bottom  运动识别区域的bottom, 可以为负，必须大于bottom
+   * @param {int} horizontalStart  横向运动识别区域的0%对应位置, 可以为负
+   * @param {int} horizontalEnd  横向运动识别区域的100%对应位置, 可以为负，可以小于start
+   * @param {int} verticalStart  纵向运动识别区域的0%对应位置, 可以为负
+   * @param {int} verticalEnd  纵向运动识别区域的100%对应位置, 可以为负，可以小于end
    * @param {int} xyEnable  x,y是否都触发, 0b01对应x, 0b10对应y, 可以或运算在一起
    */
-  startMovementSync(nexusRef, left, top, right, bottom, xyEnable) {
+  startMovementSync(nexusRef, horizontalStart, horizontalEnd, verticalStart, verticalEnd, xyEnable) {
     return CmdPackBuilder.InitStateCmdPack(StateCmdBuilder.StartMovementSync(
       nexusRef?.token ? nexusRef.token : 0,
-      left,
-      top,
-      right,
-      bottom,
+      horizontalStart,
+      horizontalEnd,
+      verticalStart,
+      verticalEnd,
       xyEnable
     ));
   }
@@ -3468,70 +3536,29 @@ function newNexus() {
 //
 // utils/JsViewVueWidget/JsvFreeMoveActor/ActorControl.ts;
 //
-class ActorControl {
-  _BindView;
-  _BindAnim;
-  _Callbacks;
-  _SelfNexusRecv;
-  _SizeMode = false;
+class BuilderFactory {
   _SharedQuickConditionPackBuilder;
   _SharedQuickActionPackBuilder;
   _StatePackBuilder;
-  constructor() {
-    this._BindView = null;
-    this._BindAnim = null;
-    this._Callbacks = new CallbackManager();
-    this._SelfNexusRecv = newNexus();
-    this._SharedQuickConditionPackBuilder = new ConditionPackBuilder(this._Callbacks, this._SelfNexusRecv);
+  _Callbacks;
+  _SelfNexusRecv;
+  _OwnerControl;
+  constructor(owner, callbackManager, selfNexusRecv) {
+    this._OwnerControl = owner;
+    this._Callbacks = callbackManager;
+    this._SelfNexusRecv = selfNexusRecv;
+    this._SharedQuickConditionPackBuilder = new ConditionPackBuilder(this._Callbacks, this._SelfNexusRecv, this);
     this._SharedQuickActionPackBuilder = new ActorPackBuilder(this._Callbacks, this._SelfNexusRecv);
     this._StatePackBuilder = new StatePackBuilder();
   }
-  asSizeMode() {
-    if (this._BindAnim != null) {
-      console.error("error: asSizeMode should call before bindForgeView");
-    } else {
-      this._SizeMode = true;
-    }
-  }
-  // debugGetAnimId() {
-  //   return this._BindAnim?.AnimNativeId;
-  // }
-  bindForgeView(bindView, instantActive) {
-    this._BindView = bindView;
-    if (instantActive) {
-      this._EnsureAnim();
-    }
-  }
-  /** 
-   * run 执行编排好的intent集合
-   *
-   * @param {Array} cmdPackList 内容来自 Condition(), State(), Action() 这些工厂类创建的Command pack
-   */
-  run(cmdPackList) {
-    if (window.JsView) {
-      this._WrappedRun(cmdPackList);
-    } else {
-      let that = this;
-      this._BindView.RegisterOnProxyReady(() => {
-        that._WrappedRun(cmdPackList);
-      });
-    }
-  }
-  _WrappedRun(cmdPackList) {
-    this._EnsureAnim();
-    if (!(cmdPackList instanceof Array)) {
-      console.error("params error");
-      return;
-    }
-    RunFreeMoveCmdPacks(this._BindView, cmdPackList);
-  }
   /**
    * Condition
    * 获取创建 ConditionPack 的工厂对象
    * ConditionPack对应支持 .then(cmdPackList), 可传入同 Run 的处理队列
    * 可用方法见 ./SetCondition.js
    * @param {int} group 可选参数，默认为0, 有效值为0~3, 对应默认组, 1组, 2组, 3组, 便于remove时，按组进行清理
-   * @param {boolean} multiTimes 可选参数，默认为false, 是否要多次执行, 若为单次，则执行后condition作废
+   * @param {boolean} multiTimes 可选参数，默认为false, 是否要多次执行, 
+   *                      若为单次, 当group未设定时自动作废，当group设定时，不作废但改为deactive状态
    * @param {string} specName 可选参数，默认null, 命名condition, 用于指定名字进行active/deactive动作的场景
    * @param {boolean} shoudRenderBreak 可选参数，默认false, 关联的回调是否会发起RenderBreak
    * @return {ConditionPackBuilder} ConditionPack 的工厂对象
@@ -3539,7 +3566,7 @@ class ActorControl {
   condition(group = 0, multiTimes = false, specName = null, shoudRenderBreak = false) {
     let builder = this._SharedQuickConditionPackBuilder;
     if (builder.isInUsing()) {
-      builder = new ConditionPackBuilder(this._Callbacks, this._SelfNexusRecv);
+      builder = new ConditionPackBuilder(this._Callbacks, this._SelfNexusRecv, this);
     }
     builder.updateCommandInfo(group, multiTimes, specName, shoudRenderBreak);
     return builder;
@@ -3577,6 +3604,68 @@ class ActorControl {
   state() {
     return this._StatePackBuilder;
   }
+}
+class ActorControl {
+  _BindView;
+  _BindAnim;
+  _Callbacks;
+  _SelfNexusRecv;
+  _SizeMode = false;
+  _CondCycleStartList = void 0;
+  _CondCycleEndList = void 0;
+  _Builders;
+  constructor() {
+    this._BindView = null;
+    this._BindAnim = null;
+    this._Callbacks = new CallbackManager();
+    this._SelfNexusRecv = newNexus();
+    this._Builders = new BuilderFactory(this, this._Callbacks, this._SelfNexusRecv);
+  }
+  asSizeMode() {
+    if (this._BindAnim != null) {
+      console.error("error: asSizeMode should call before bindForgeView");
+    } else {
+      this._SizeMode = true;
+    }
+  }
+  // debugGetAnimId() {
+  //   return this._BindAnim?.AnimNativeId;
+  // }
+  bindForgeView(bindView, instantActive) {
+    this._BindView = bindView;
+    if (instantActive) {
+      this._EnsureAnim();
+    }
+  }
+  /**
+   * run 执行编排好的intent集合
+   *
+   * @param {CmdListCreator} commandsCreator 
+   *                         命令指令队列创建回调
+   *                         此回调返回值为一个数组，数组内容内容来自 Condition(), State(), Action() 
+   *                         这些工厂类创建的Command pack
+   */
+  run(commandsCreator) {
+    if (commandsCreator) {
+      let cmdPackList = commandsCreator(this._Builders);
+      if (window.JsView) {
+        this._WrappedRun(cmdPackList);
+      } else {
+        let that = this;
+        this._BindView.RegisterOnProxyReady(() => {
+          that._WrappedRun(cmdPackList);
+        });
+      }
+    }
+  }
+  _WrappedRun(cmdPackList) {
+    this._EnsureAnim();
+    if (!(cmdPackList instanceof Array)) {
+      console.error("params error");
+      return;
+    }
+    RunFreeMoveCmdPacks(this._BindView, cmdPackList);
+  }
   getBindedAnim() {
     this._EnsureAnim();
     return this._BindAnim;
@@ -3585,10 +3674,54 @@ class ActorControl {
     this._EnsureAnim();
     return this._BindView;
   }
+  /**
+   * addCondCycleListener
+   * 追加 cond cycle listener，可以根据start和end来进行callback时序排序
+   * 
+   * @param {Function} startCycleCallback   开始执行一帧的js回调(condition的callback)
+   * @param {Function} endCycleCallback  执行一帧的js回调完毕
+   */
+  addCondCycleListener(startCycleCallback, endCycleCallback) {
+    if (startCycleCallback) {
+      if (!this._CondCycleStartList) {
+        this._CondCycleStartList = new Array();
+      }
+      this._CondCycleStartList.push(startCycleCallback);
+    }
+    if (endCycleCallback) {
+      if (!this._CondCycleEndList) {
+        this._CondCycleEndList = new Array();
+      }
+      this._CondCycleEndList.push(endCycleCallback);
+    }
+  }
+  removeCondCycleListener(startCycleCallback, endCycleCallback) {
+    if (startCycleCallback && this._CondCycleStartList) {
+      for (let i = 0; i < this._CondCycleStartList.length; i++) {
+        if (this._CondCycleStartList[i] == startCycleCallback) {
+          this._CondCycleStartList.splice(i, 1);
+          break;
+        }
+      }
+    }
+    if (endCycleCallback && this._CondCycleEndList) {
+      for (let i = 0; i < this._CondCycleEndList.length; i++) {
+        if (this._CondCycleEndList[i] == endCycleCallback) {
+          this._CondCycleEndList.splice(i, 1);
+          break;
+        }
+      }
+    }
+  }
   _OnEchoEvent(retJson) {
     let retJsonObject = JSON.parse(retJson);
     let echoRetList = retJsonObject["retList"];
     if (echoRetList) {
+      if (this._CondCycleStartList && this._CondCycleStartList.length > 0) {
+        for (let startCb of this._CondCycleStartList) {
+          startCb();
+        }
+      }
       for (let echoRet of echoRetList) {
         let renderBreakId = echoRet["rbTkn"];
         if (renderBreakId != 0) {
@@ -3596,6 +3729,11 @@ class ActorControl {
         }
         this._Callbacks.invokeCallback(echoRet["eTkn"], retJsonObject, echoRet["cds"], echoRet["ncds"]);
       }
+      if (this._CondCycleEndList && this._CondCycleEndList.length > 0) {
+        for (let endCb of this._CondCycleEndList) {
+          endCb();
+        }
+      }
     }
   }
   _EnsureAnim() {
@@ -3771,12 +3909,20 @@ class TaskManager {
     this.cancellableRunnerList.push(cancellableRunner);
     cancellableRunner.run();
   }
+  cancelAllTask() {
+    this.cleanTaskCache();
+    this.cancellableRunnerList.forEach((t) => {
+      t.cancel();
+    });
+    this.cancellableRunnerList = [];
+  }
 }
 
 //
 // utils/JsViewEngineWidget/MetroWidget/MetroWidgetSetup.js;
 //
 const TAG$3 = "MetroWidget";
+let metroWidgetTokenGen = 1;
 const _getMetroTemplate = function(widgetRectInfo, direction, support_history_path, layout_type, mode) {
   let page_size;
   let line_max;
@@ -3844,25 +3990,37 @@ const setup = (props, itemRender, locateDiv, renderData, slideDiv, slideDivLeft,
   const mode = {
     _mode: FOCUS_MODE,
     _touchState: TouchState.IDLE,
+    _touchCount: 0,
+    // 触控流流程ID，解决fling等事件晚于新的touchDown时引起的混乱问题
     _duringTouch: false,
     _duringFling: false,
-    touchStart() {
+    touchStart(touchCount) {
       this._mode = TOUCH_MODE;
       modeForExport.value = TOUCH_MODE;
       this._touchState = TouchState.TAP;
+      this._touchCount = touchCount;
     },
-    touchEnd() {
-      this._touchState = TouchState.IDLE;
+    touchEnd(touchCount) {
+      if (touchCount == this._touchCount) {
+        this._touchState = TouchState.IDLE;
+      }
     },
-    flingStart() {
-      this._touchState = TouchState.FLING;
+    flingStart(touchCount) {
+      if (touchCount == this._touchCount) {
+        this._touchState = TouchState.FLING;
+      }
     },
-    flingEnd() {
+    flingEnd(touchCount) {
+      if (touchCount == this._touchCount) {
+        this._touchState = TouchState.IDLE;
+      }
     },
-    dragStart() {
-      this._touchState = TouchState.DRAG;
+    dragStart(touchCount) {
+      if (touchCount == this._touchCount) {
+        this._touchState = TouchState.DRAG;
+      }
     },
-    dragEnd() {
+    dragEnd(touchCount) {
     },
     keyDown() {
       this._mode = FOCUS_MODE;
@@ -3903,6 +4061,8 @@ const setup = (props, itemRender, locateDiv, renderData, slideDiv, slideDivLeft,
   let alreadyCallItemFocus = false;
   let innerSlideSetting = props.slideSetting;
   const currentFocusIndex = ref(0);
+  let freeMoveSlideGapTop = 0;
+  let freeMoveSlideGapLeft = 0;
   const DEFAULT_ANIMATION_DURATION = 200;
   const isItemVisible = (item) => {
     let pos_key = vertical ? "top" : "left";
@@ -3916,6 +4076,9 @@ const setup = (props, itemRender, locateDiv, renderData, slideDiv, slideDivLeft,
     return null;
   };
   const onAddTask = (allTask) => {
+    if (!innerData || innerData.length <= 0) {
+      return;
+    }
     let resizeTaskMap = {};
     let minIndex = Infinity;
     let mergeTmp = false;
@@ -4026,8 +4189,10 @@ const setup = (props, itemRender, locateDiv, renderData, slideDiv, slideDivLeft,
     if (!validSlideTask && resizeList.length > 0) {
       if (anchorInfo) {
         const focusItem = getItemById(focusId);
-        const start = focusItem.templateInfo[pos_key] + focusItem.templateInfo[size_key] * anchorInfo.anchor - 1 - anchorInfo.anchorPosition;
-        targetVisibleStart = normalizeVisibleStart(start, focusItem.templateInfo, focusItem.templateInfo.index);
+        let start = focusItem.templateInfo[pos_key] + focusItem.templateInfo[size_key] * anchorInfo.anchor - 1 - anchorInfo.anchorPosition;
+        let totalSize = metroTemplate.getBoundingBoxSize();
+        start = Math.min(Math.max(0, start), totalSize[size_key] - visibleInfo.range);
+        targetVisibleStart = normalizeVisibleStart(start, focusItem.templateInfo, focusItem.templateInfo.index, visibleInfo);
       } else {
         targetRect = getItemById(focusId).templateInfo;
       }
@@ -4039,8 +4204,9 @@ const setup = (props, itemRender, locateDiv, renderData, slideDiv, slideDivLeft,
       if (resizeList.length > 0) {
         preInfo = mRectCache.getPreRect();
         if (preInfo) {
-          v.start = targetRect.left - preInfo.left + v.start;
-          preInfo.left += v.start - visibleInfo.start;
+          let totalSize = metroTemplate.getBoundingBoxSize();
+          v.start = Math.min(Math.max(0, targetRect[pos_key] - preInfo[pos_key] + v.start), totalSize[size_key] - v.range);
+          preInfo[pos_key] += v.start - visibleInfo.start;
         }
       }
       targetVisibleStart = _calculateVisibleStart(targetRect, direction, targetRect, v, preInfo);
@@ -4318,7 +4484,7 @@ const setup = (props, itemRender, locateDiv, renderData, slideDiv, slideDivLeft,
     return false;
   };
   const setFocusByUid = (uid, needSlide = true, doAnim = false, extraSetting) => {
-    if (!uid) {
+    if (!uid || innerData.length <= 0) {
       return;
     }
     templateItemAdder.tryAddItemByUid(uid);
@@ -4330,7 +4496,7 @@ const setup = (props, itemRender, locateDiv, renderData, slideDiv, slideDivLeft,
     setFocusId(item.id, needSlide, doAnim, extraSetting);
   };
   const setFocusId = (id, needSlide = true, doAnim = false, extraSetting) => {
-    if (id == focusId) {
+    if (id == focusId || innerData.length <= 0) {
       return;
     }
     tryCancelDelayLoad();
@@ -4479,88 +4645,125 @@ const setup = (props, itemRender, locateDiv, renderData, slideDiv, slideDivLeft,
       );
     }
   };
-  const refreshData = (force_update) => {
+  const DATA_ID_KEY = "jsvKey";
+  const refreshData = (forceUpdate) => {
     if (!props.provideData) {
       console.error("refreshData: provideData is null.");
       return;
     }
-    let _force_update = force_update;
-    if (metroTemplate.size === 0) {
-      _force_update = true;
-    }
-    let new_list = toRaw(props.provideData());
-    if (focusId >= new_list.length) {
-      _changeFocusId(new_list.length - 1, false);
-    }
-    let new_index = 0;
-    if (!_force_update) {
-      for (new_index = 0; new_index < new_list.length; ++new_index) {
-        let already_add = false;
-        for (let j = 0; j < innerData.length; ++j) {
-          if (new_list[new_index] === innerData[j].customerData) {
-            already_add = true;
-            break;
+    try {
+      let newData = toRaw(props.provideData());
+      if (newData instanceof Array) {
+        let maxSameIndex = -1;
+        let layoutChange = false;
+        let onlyDataChangeList = [];
+        if (focusId >= newData.length) {
+          _changeFocusId(newData.length - 1, false);
+        }
+        if (!forceUpdate) {
+          for (let i = 0; i < dataList.length; ++i) {
+            let oldItem = dataList[i];
+            let newItem = newData[i];
+            if (newItem) {
+              if (newItem === oldItem || typeof newItem[DATA_ID_KEY] !== "undefined" && typeof oldItem[DATA_ID_KEY] !== "undefined" && newItem[DATA_ID_KEY] === oldItem[DATA_ID_KEY]) {
+                maxSameIndex = Math.max(maxSameIndex, i);
+              } else {
+                const newMeasureItem = props.measures(newItem);
+                const oldMeasureItem = props.measures(oldItem);
+                if (props.layoutType == "relative") {
+                  layoutChange = newMeasureItem.width !== oldMeasureItem.width || newMeasureItem.height !== oldMeasureItem.height;
+                } else {
+                  layoutChange = newMeasureItem.width !== oldMeasureItem.width || newMeasureItem.height !== oldMeasureItem.height || newMeasureItem.left !== oldMeasureItem.left || newMeasureItem.top !== oldMeasureItem.top;
+                }
+                if (layoutChange) {
+                  break;
+                } else {
+                  if (i < innerData.length) {
+                    onlyDataChangeList.push({
+                      templateInfo: innerData[i].templateInfo,
+                      measureObj: newMeasureItem,
+                      data: newItem,
+                      index: i
+                    });
+                  }
+                }
+              }
+            } else {
+              if (i >= newData.length) {
+                layoutChange = true;
+                break;
+              } else {
+                throw new Error("undefined item in data list.", i, newData);
+              }
+            }
           }
         }
-        if (!already_add) {
-          break;
+        dataList = newData.concat();
+        if (forceUpdate || layoutChange) {
+          pageUpdateToken.value++;
+          permanentItemList = [];
+          metroTemplate = _getMetroTemplate(
+            widgetRectInfo,
+            props.direction,
+            props.supportHistoryPath,
+            props.layoutType,
+            templateMode
+          );
+          innerData = [];
+          templateItemAdder = new TemplateItemAdder(
+            metroTemplate,
+            dataList,
+            props.measures,
+            pageRange,
+            _onTemplateItemAdd,
+            props.name,
+            _onTemplateAddDone
+          );
+          if (props.onScroll) {
+            templateItemAdder.tryAddItemByIndex(dataList.length - 1);
+          } else {
+            templateItemAdder.tryAddItemById(focusId);
+          }
+        } else {
+          if (maxSameIndex < newData.length) {
+            templateItemAdder.updateData(newData);
+            if (props.onScroll) {
+              templateItemAdder.tryAddItemByIndex(dataList.length - 1);
+            } else {
+              templateItemAdder.tryAddItemById(focusId);
+            }
+          }
+          if (onlyDataChangeList.length > 0) {
+            for (let i of onlyDataChangeList) {
+              if (i.index < innerData.length) {
+                innerData[i.index].updateCustomData(i.data, _getItemConfigFromMeasursObj(i.measureObj));
+              } else {
+                break;
+              }
+            }
+          }
         }
+        const updater = pageUpdater.update(
+          metroTemplate,
+          visibleInfo.startWithPadding - innerKeepTraceRange * pageRange,
+          visibleInfo.endWithPadding + innerKeepTraceRange * pageRange,
+          focusId,
+          false,
+          permanentItemList
+        );
+        updater.apply();
+        onItemFocus(getItemById(focusId), null);
+        let targetRect = mRectCache.getCurRect() ?? mRectCache.getPreRect();
+        if (targetRect) {
+          slideToRect(targetRect, false);
+        } else {
+          slideToItem(id2Index(focusId), false);
+        }
+        updateTouchBoxCondition();
       }
+    } catch (e) {
+      console.log(TAG$3, "refresh error", e);
     }
-    let need_update_content = false;
-    if (!_force_update && new_index === metroTemplate.size) {
-      if (new_index !== new_list.length) {
-        need_update_content = true;
-        templateItemAdder.updateData(new_list);
-      } else {
-      }
-    } else {
-      pageUpdateToken.value++;
-      permanentItemList = [];
-      need_update_content = true;
-      metroTemplate = _getMetroTemplate(
-        widgetRectInfo,
-        props.direction,
-        props.supportHistoryPath,
-        props.layoutType,
-        templateMode
-      );
-      innerData = [];
-      dataList = new_list;
-      templateItemAdder = new TemplateItemAdder(
-        metroTemplate,
-        dataList,
-        props.measures,
-        pageRange,
-        _onTemplateItemAdd,
-        props.name,
-        _onTemplateAddDone
-      );
-    }
-    if (need_update_content) {
-      if (props.onScroll) {
-        templateItemAdder.tryAddItemByIndex(dataList.length - 1);
-      } else {
-        templateItemAdder.tryAddItemById(focusId);
-      }
-    }
-    const updater = pageUpdater.update(
-      metroTemplate,
-      visibleInfo.startWithPadding - innerKeepTraceRange * pageRange,
-      visibleInfo.endWithPadding + innerKeepTraceRange * pageRange,
-      focusId,
-      false,
-      permanentItemList
-    );
-    updater.apply();
-    onItemFocus(getItemById(focusId), null);
-    let targetRect = mRectCache.getCurRect() ?? mRectCache.getPreRect();
-    if (targetRect) {
-      slideToRect(targetRect, false);
-    } else {
-      slideToItem(id2Index(focusId), false);
-    }
-    updateTouchBoxCondition();
   };
   const getVisibleItems = () => {
     const [visibleStart, visibleEnd] = metroTemplate.getVisibleItemList(
@@ -4575,6 +4778,9 @@ const setup = (props, itemRender, locateDiv, renderData, slideDiv, slideDivLeft,
     };
   };
   const moveFocus = (direction) => {
+    if (innerData.length <= 0) {
+      return;
+    }
     tryCancelDelayLoad();
     if (direction == "left" || direction == 37 || direction == EdgeDirection.left) {
       _moveToNext(-1, 0);
@@ -4836,7 +5042,7 @@ const setup = (props, itemRender, locateDiv, renderData, slideDiv, slideDivLeft,
       }
     }
   };
-  const _onTemplateItemAdd = (customerData, templateItem, measuresObj) => {
+  const _getItemConfigFromMeasursObj = (measuresObj) => {
     let focusZIndex = -1, normalZIndex = -1;
     if (typeof measuresObj["zIndex"] != "undefined" && measuresObj["zIndex"] != null) {
       if (typeof measuresObj["zIndex"] == "object") {
@@ -4851,12 +5057,16 @@ const setup = (props, itemRender, locateDiv, renderData, slideDiv, slideDivLeft,
         normalZIndex = measuresObj["zIndex"];
       }
     }
-    let itemConfig = {
+    return {
       focusZIndex,
       normalZIndex,
       permanent: measuresObj.permanent ?? false,
-      itemSlide: measuresObj.itemSlide ?? METRO_WIDGET.ITEM_SLIDE.ACT_ITEM_FOCUS
+      itemSlide: measuresObj.itemSlide ?? METRO_WIDGET.ITEM_SLIDE.ACT_ITEM_FOCUS,
+      showSkeleton: measuresObj.showSkeleton ?? true
     };
+  };
+  const _onTemplateItemAdd = (customerData, templateItem, measuresObj) => {
+    let itemConfig = _getItemConfigFromMeasursObj(measuresObj);
     const renderStyle = reactive({
       left: templateItem.left,
       top: templateItem.top,
@@ -5101,40 +5311,41 @@ const setup = (props, itemRender, locateDiv, renderData, slideDiv, slideDivLeft,
       });
     }
   };
-  const normalizeVisibleStart = (origin, targetRect = void 0, index = void 0) => {
+  const normalizeVisibleStart = (origin, targetRect, index, _visibleInfo) => {
     let pos_key = vertical ? "top" : "left";
     let size_key = vertical ? "height" : "width";
     let visibleStart = origin;
+    let vInfo = _visibleInfo;
     if ((innerSlideSetting.BoundaryProtect & SlideSetting.START_PROTECT) > 0) {
-      if (visibleInfo.start >= 0) {
+      if (vInfo.start >= 0) {
         let boundary = 0;
         const headTemplateInfo = getItemByIndex(0).templateInfo;
-        if (targetRect && (!headTemplateInfo.focusable || index == headTemplateInfo.index) && targetRect[pos_key] + targetRect[size_key] <= visibleInfo.range) {
+        if (targetRect && (!headTemplateInfo.focusable || index == headTemplateInfo.index) && targetRect[pos_key] + targetRect[size_key] <= vInfo.range) {
           boundary = headTemplateInfo[size_key];
         }
         visibleStart = visibleStart < boundary ? 0 : visibleStart;
       } else {
-        visibleStart = visibleStart < visibleInfo.start ? visibleInfo.start : visibleStart;
+        visibleStart = visibleStart < vInfo.start ? vInfo.start : visibleStart;
       }
     }
     if ((innerSlideSetting.BoundaryProtect & SlideSetting.END_PROTECT) > 0) {
       let lastTemplateInfo = getItemByIndex(metroTemplate.getTailItemIndex()).templateInfo;
       const lastEnd = lastTemplateInfo[pos_key] + lastTemplateInfo[size_key];
-      const lastVisibleStart = Math.max(lastEnd - visibleInfo.range, 0);
-      if (visibleInfo.end <= lastEnd) {
+      const lastVisibleStart = Math.max(lastEnd - vInfo.range, 0);
+      if (vInfo.end <= lastEnd) {
         let boundary = lastVisibleStart;
         if (targetRect && (!lastTemplateInfo.focusable || index == lastTemplateInfo.index) && targetRect[pos_key] - lastVisibleStart >= 0) {
-          boundary = lastTemplateInfo[pos_key] - visibleInfo.range;
+          boundary = lastTemplateInfo[pos_key] - vInfo.range;
         }
         visibleStart = visibleStart > boundary ? lastVisibleStart : visibleStart;
       } else {
-        visibleStart = visibleStart > visibleInfo.start ? visibleInfo.start : visibleStart;
+        visibleStart = visibleStart > vInfo.start ? vInfo.start : visibleStart;
       }
     }
     return visibleStart;
   };
   const mRectCache = new RectCache();
-  const _calculateVisibleStart = (targetRect, _direction, templateInfo, visibleInfo2, preInfo = null) => {
+  const _calculateVisibleStart = (targetRect, _direction, templateInfo, vInfo, preInfo = null) => {
     if (!targetRect) {
       console.error("MetroWidget: _calculateVisibleStart target item is null");
       return 0;
@@ -5159,19 +5370,19 @@ const setup = (props, itemRender, locateDiv, renderData, slideDiv, slideDivLeft,
     let pos_key = vertical ? "top" : "left";
     let size_key = vertical ? "height" : "width";
     let center_key = vertical ? "centerYPos" : "centerXPos";
-    let new_visible_start = visibleInfo2.start;
+    let new_visible_start = vInfo.start;
     let needCalculate = true;
     switch (innerSlideSetting.Type) {
       case SlideSetting.Type.FIX_POSITION:
         if (innerSlideSetting.FixFirstPage) {
-          if (targetRect[pos_key] + targetRect[size_key] - 1 < visibleInfo2.range) {
+          if (targetRect[pos_key] + targetRect[size_key] - 1 < vInfo.range) {
             new_visible_start = 0;
             needCalculate = false;
           }
         }
         if (needCalculate) {
           new_visible_start = Math.ceil(
-            targetRect[pos_key] + targetRect[size_key] / 2 - visibleInfo2.range * innerSlideSetting.FixPercent
+            targetRect[pos_key] + targetRect[size_key] / 2 - vInfo.range * innerSlideSetting.FixPercent
           );
         }
         break;
@@ -5186,7 +5397,7 @@ const setup = (props, itemRender, locateDiv, renderData, slideDiv, slideDivLeft,
         break;
       case SlideSetting.Type.SEAMLESS:
         if (innerSlideSetting.FixFirstPage) {
-          if (targetRect[pos_key] + targetRect[size_key] - 1 < visibleInfo2.range) {
+          if (targetRect[pos_key] + targetRect[size_key] - 1 < vInfo.range) {
             new_visible_start = 0;
             needCalculate = false;
           }
@@ -5196,11 +5407,11 @@ const setup = (props, itemRender, locateDiv, renderData, slideDiv, slideDivLeft,
           const itemEnd = targetRect[pos_key] + targetRect[size_key] - 1;
           const itemMainSize = targetRect[size_key];
           if (preRect) {
-            const rect0Start = visibleInfo2.start;
-            const rect0End = visibleInfo2.start + visibleInfo2.range * innerSlideSetting.StartPercent;
+            const rect0Start = vInfo.start;
+            const rect0End = vInfo.start + vInfo.range * innerSlideSetting.StartPercent;
             const rect0Range = rect0End - rect0Start + 1;
-            const rect1Start = visibleInfo2.start + visibleInfo2.range * innerSlideSetting.EndPercent;
-            const rect1End = visibleInfo2.start + visibleInfo2.range - 1;
+            const rect1Start = vInfo.start + vInfo.range * innerSlideSetting.EndPercent;
+            const rect1End = vInfo.start + vInfo.range - 1;
             const rect1Range = rect1End - rect1Start + 1;
             let target0 = Math.min(preRect[pos_key], rect0End);
             let target1 = Math.max(preRect[pos_key] + preRect[size_key] - 1, rect1Start);
@@ -5210,7 +5421,7 @@ const setup = (props, itemRender, locateDiv, renderData, slideDiv, slideDivLeft,
               if (target0 < rect0Start) {
               } else {
                 if (direction <= 0) {
-                  rect0Result = visibleInfo2.start + (itemStart - target0);
+                  rect0Result = vInfo.start + (itemStart - target0);
                 }
               }
             }
@@ -5218,7 +5429,7 @@ const setup = (props, itemRender, locateDiv, renderData, slideDiv, slideDivLeft,
               if (target1 > rect1End) {
               } else {
                 if (direction >= 0) {
-                  rect1Result = visibleInfo2.start + (itemEnd - target1);
+                  rect1Result = vInfo.start + (itemEnd - target1);
                 }
               }
             }
@@ -5230,15 +5441,15 @@ const setup = (props, itemRender, locateDiv, renderData, slideDiv, slideDivLeft,
               new_visible_start = rect1Result;
             }
           }
-          const headSafeArea = innerSlideSetting.HeadSafeArea * visibleInfo2.range;
-          const tailSafeArea = innerSlideSetting.TailSafeArea * visibleInfo2.range;
-          if (itemMainSize > visibleInfo2.range - headSafeArea - tailSafeArea) {
-            new_visible_start = Math.round(itemStart - (visibleInfo2.range - itemMainSize) / 2);
+          const headSafeArea = innerSlideSetting.HeadSafeArea * vInfo.range;
+          const tailSafeArea = innerSlideSetting.TailSafeArea * vInfo.range;
+          if (itemMainSize > vInfo.range - headSafeArea - tailSafeArea) {
+            new_visible_start = Math.round(itemStart - (vInfo.range - itemMainSize) / 2);
           } else {
             if (itemStart < new_visible_start + headSafeArea) {
               new_visible_start = itemStart - headSafeArea;
-            } else if (itemEnd > new_visible_start + visibleInfo2.range - 1 - tailSafeArea) {
-              new_visible_start = itemEnd - visibleInfo2.range + tailSafeArea;
+            } else if (itemEnd > new_visible_start + vInfo.range - 1 - tailSafeArea) {
+              new_visible_start = itemEnd - vInfo.range + tailSafeArea;
             }
           }
         }
@@ -5249,7 +5460,7 @@ const setup = (props, itemRender, locateDiv, renderData, slideDiv, slideDivLeft,
           innerSlideSetting.Type
         );
     }
-    new_visible_start = normalizeVisibleStart(new_visible_start, targetRect, templateInfo?.index);
+    new_visible_start = normalizeVisibleStart(new_visible_start, targetRect, templateInfo?.index, vInfo);
     return Math.round(new_visible_start);
   };
   const _onFocusableItemEdge = (edge_info) => {
@@ -5358,9 +5569,7 @@ const setup = (props, itemRender, locateDiv, renderData, slideDiv, slideDivLeft,
   let divPos = -1;
   let frameCount = -1;
   const getVisibleStart = (moveInfo) => {
-    if (frameCount != Forge$2.sFrameCount.count) {
-      divPos = vertical ? slideDivTop.value : slideDivLeft.value;
-    }
+    divPos = vertical ? slideDivTop.value + freeMoveSlideGapTop : slideDivLeft.value + freeMoveSlideGapLeft;
     if (vertical) {
       return -(divPos + Math.round(moveInfo.yPos));
     } else {
@@ -5379,23 +5588,30 @@ const setup = (props, itemRender, locateDiv, renderData, slideDiv, slideDivLeft,
     return touchCount;
   };
   const mergeTouchSlideToSlideDiv = (touchCount) => {
+    let originSlideDivTop = slideDivTop.value;
+    let originSlideDivLeft = slideDivLeft.value;
     if (vertical) {
       slideDivTop.value = -visibleInfo.start;
     } else {
       slideDivLeft.value = -visibleInfo.start;
     }
+    let newSlideGapTop = originSlideDivTop - slideDivTop.value;
+    let newSlideGapLeft = originSlideDivLeft - slideDivLeft.value;
+    freeMoveSlideGapTop += newSlideGapTop;
+    freeMoveSlideGapLeft += newSlideGapLeft;
     const walls = getTouchWall();
-    actorController.run([
-      actorController.state().removeConditionByGroup(wallConditionGroup),
-      actorController.condition(wallConditionGroup, true).boxPosition(walls.left, walls.top, walls.right, walls.bottom).then([actorController.state().setHitWallOverflow()]),
+    actorController.run((cmds) => [
+      cmds.state().removeConditionByGroup(wallConditionGroup),
+      cmds.condition(wallConditionGroup, true).boxPosition(walls.left, walls.top, walls.right, walls.bottom).then([cmds.state().setHitWallOverflow()]),
       //TODO 通过prop设置哪个方向overflow
-      actorController.condition(touchCountGroup, false).touchCount(touchCount).then([
-        actorController.action().teleportTo(0, 0)
-      ])
-    ]);
-    actorController.run([
-      actorController.condition().onNextTick().then([
-        actorController.state().removeConditionByGroup(touchCountGroup)
+      cmds.state().setStartOffsetPos(newSlideGapLeft, newSlideGapTop),
+      // 将div的位置调整回馈给FreeMove计量系统
+      cmds.condition().onNextTick(0).then([
+        SliderEditFuncReOrderWrap(() => {
+          freeMoveSlideGapTop -= newSlideGapTop;
+          freeMoveSlideGapLeft -= newSlideGapLeft;
+        }, true)
+        // Slide调整回调要放在其他事件之前，调整slide的gap值
       ])
     ]);
   };
@@ -5406,18 +5622,23 @@ const setup = (props, itemRender, locateDiv, renderData, slideDiv, slideDivLeft,
     if (mode.getMode() == FOCUS_MODE) {
       updateTouchBoxCondition();
     }
-    mode.touchStart();
-    mode.flingEnd();
-    const t = 100;
+    mode.touchStart(touchCount);
+    const lockThreshhold = 10;
+    const unlockThreshold = 100;
     const offsetThreshold = {
-      left: vertical ? void 0 : t,
-      right: vertical ? void 0 : t,
-      top: vertical ? t : void 0,
-      bottom: vertical ? t : void 0
+      left: vertical ? void 0 : lockThreshhold,
+      right: vertical ? void 0 : lockThreshhold,
+      top: vertical ? lockThreshhold : void 0,
+      bottom: vertical ? lockThreshhold : void 0
     };
-    actorController.run([
-      actorController.condition(void 0, false).offsetPosition(offsetThreshold.left, offsetThreshold.top, offsetThreshold.right, offsetThreshold.bottom).then([actorController.state().touchLockSwitch(true, vertical ? 1 : 2, t)]),
-      actorController.condition(void 0, false).startMove(true, true).then([onDragStart])
+    let passDownTouchInfo = nexusCustomData;
+    actorController.run((cmds) => [
+      cmds.condition(void 0, false).offsetPosition(offsetThreshold.left, offsetThreshold.top, offsetThreshold.right, offsetThreshold.bottom).then([
+        cmds.state().touchLockSwitch(true, vertical ? 1 : 2, unlockThreshold)
+      ]),
+      cmds.condition(void 0, false).startMove(true, true).then([SliderEditFuncReOrderWrap((d) => {
+        onDragStart(d, null, passDownTouchInfo);
+      })])
     ]);
     onItemBlur(getItemById(focusId));
     templateItemAdder.tryAddItemByPosition(visibleInfo.end + visibleInfo.range);
@@ -5439,61 +5660,70 @@ const setup = (props, itemRender, locateDiv, renderData, slideDiv, slideDivLeft,
       anchorPosList.push(-visibleInfo.start - visibleInfo.range - anchorPos + 1);
       anchorPos += anchorSpacing;
     }
-    const reachConditionList = anchorPosList.map((pos) => {
-      return actorController.condition(reachAnchorGroup).reachPosition(pos, void 0).then([(data2) => {
-        updateRenderItems(true, true);
-      }]);
+    actorController.run((cmds) => {
+      const reachConditionList = anchorPosList.map((pos) => {
+        return cmds.condition(reachAnchorGroup).reachPosition(pos, void 0).then([SliderEditFuncReOrderWrap((data2) => {
+          updateRenderItems(true, true);
+        })]);
+      });
+      reachConditionList.unshift(
+        cmds.state().removeConditionByGroup(reachAnchorGroup)
+      );
+      return reachConditionList;
     });
-    reachConditionList.unshift(
-      actorController.state().removeConditionByGroup(reachAnchorGroup)
-    );
-    actorController.run(reachConditionList);
   };
-  const onTouchRelease = () => {
+  const onTouchRelease = (touchCount) => {
     if (mode.getTouchState() == TouchState.TAP) {
       updateRenderItems(false, false);
-      mode.touchEnd();
+      mode.touchEnd(touchCount);
     } else {
       if (touchRecorder.moved && !mode.duringFling()) {
         mergeTouchSlideToSlideDiv(touchRecorder.touchCount);
         updateRenderItems(false, false);
-        mode.touchEnd();
+        mode.touchEnd(touchCount);
       }
     }
   };
   const exportOnTouchRelease = props.touchFlag > 0 ? onTouchRelease : void 0;
   const onDragStart = (data, customData, nexusCustomData) => {
+    let touchCount = getTouchCount(nexusCustomData);
     touchRecorder.move();
-    mode.dragStart();
+    mode.dragStart(touchCount);
     visibleInfo.start = getVisibleStart(data);
   };
   const onDragEnd = (data, customData, nexusCustomData) => {
+    let touchCount = getTouchCount(nexusCustomData);
+    mode.dragEnd(touchCount);
     visibleInfo.start = getVisibleStart(data);
-    actorController.run([
-      actorController.state().removeConditionByGroup(reachAnchorGroup)
+    actorController.run((cmds) => [
+      cmds.state().removeConditionByGroup(reachAnchorGroup)
     ]);
   };
   const onFlingStart = (data, customData, nexusCustomData) => {
+    let touchCount = getTouchCount(nexusCustomData);
     touchRecorder.move();
-    mode.flingStart();
+    mode.flingStart(touchCount);
     visibleInfo.start = getVisibleStart(data);
     updateRenderItems(true, true);
   };
   const onFlingProgress = (data, customData, nexusCustomData) => {
+    let touchCount = getTouchCount(nexusCustomData);
     visibleInfo.start = getVisibleStart(data);
     updateRenderItems(true, true);
   };
   const onFlingEnd = (data, customData, nexusCustomData) => {
+    let touchCount = getTouchCount(nexusCustomData);
     visibleInfo.start = getVisibleStart(data);
     if (mode.duringFling()) {
-      let touchCount = getTouchCount(nexusCustomData);
-      mergeTouchSlideToSlideDiv(touchCount);
+      let touchCount2 = getTouchCount(nexusCustomData);
+      mergeTouchSlideToSlideDiv(touchCount2);
       updateRenderItems(false, false);
-      mode.flingEnd();
-      mode.touchEnd();
+      mode.flingEnd(touchCount2);
+      mode.touchEnd(touchCount2);
     }
   };
   const onFlingDrop = (data, customData, nexusCustomData) => {
+    let touchCount = getTouchCount(nexusCustomData);
     visibleInfo.start = getVisibleStart(data);
   };
   const getTouchWall = () => {
@@ -5534,9 +5764,9 @@ const setup = (props, itemRender, locateDiv, renderData, slideDiv, slideDivLeft,
   const updateTouchBoxCondition = () => {
     if (actorController != null) {
       const walls = getTouchWall();
-      actorController.run([
-        actorController.state().removeConditionByGroup(wallConditionGroup),
-        actorController.condition(wallConditionGroup, true).boxPosition(walls.left, walls.top, walls.right, walls.bottom).then([actorController.state().setHitWallOverflow()])
+      actorController.run((cmds) => [
+        cmds.state().removeConditionByGroup(wallConditionGroup),
+        cmds.condition(wallConditionGroup, true).boxPosition(walls.left, walls.top, walls.right, walls.bottom).then([cmds.state().setHitWallOverflow()])
         //TODO 通过prop设置哪个方向overflow
       ]);
     }
@@ -5555,24 +5785,46 @@ const setup = (props, itemRender, locateDiv, renderData, slideDiv, slideDivLeft,
       this.touchCount = count;
     }
   };
+  const metroWidgetToken = metroWidgetTokenGen++;
+  let orderTouchSlideCallbacks;
+  const SliderEditFuncReOrderWrap = (callback, addHeader = false) => {
+    return (...args) => {
+      let pkg = { cb: callback, a: args };
+      if (addHeader) {
+        orderTouchSlideCallbacks.splice(0, 0, pkg);
+      } else {
+        orderTouchSlideCallbacks.push(pkg);
+      }
+    };
+  };
   const initTouch = () => {
     actorController = new ActorControl();
     const divView = touchDiv.value.jsvGetProxyView();
     actorController.bindForgeView(divView, true);
-    divView.DragEnables?.(
-      ForgeConst.DragFlags.TOUCH_RECV_MOVE_BIT | ForgeConst.DragFlags.TOUCH_RECV_FLING_BIT | ForgeConst.DragFlags.TOUCH_RECV_FIRST_START | ForgeConst.DragFlags.TOUCH_RECV_LAST_END
+    orderTouchSlideCallbacks = new Array();
+    actorController.addCondCycleListener(
+      // starter
+      () => {
+      },
+      // finish
+      () => {
+        for (let pkg of orderTouchSlideCallbacks) {
+          pkg.cb(...pkg.a);
+        }
+        orderTouchSlideCallbacks.length = 0;
+      }
     );
     const walls = getTouchWall();
-    actorController.run([
-      actorController.condition(void 0, true).onTouchDown().then([onTouchDown]),
-      actorController.condition(void 0, true).onDragStart().then([onDragStart]),
-      actorController.condition(void 0, true).onDragEnd().then([onDragEnd]),
-      actorController.condition(void 0, true).onFlingStart().then([onFlingStart]),
-      actorController.condition(void 0, true).onFlingProgress().then([onFlingProgress]),
-      actorController.condition(void 0, true).onFlingEnd().then([onFlingEnd]),
-      actorController.condition(void 0, true).onFlingDrop().then([onFlingDrop]),
-      actorController.condition(void 0, true).onTouchRelease().then([actorController.state().touchLockSwitch(false, vertical ? 1 : 2)]),
-      actorController.condition(wallConditionGroup, true).boxPosition(walls.left, walls.top, walls.right, walls.bottom).then([actorController.state().setHitWallOverflow()])
+    actorController.run((cmds) => [
+      cmds.condition(void 0, true).onTouchDown().then([SliderEditFuncReOrderWrap(onTouchDown)]),
+      cmds.condition(void 0, true).onDragStart().then([SliderEditFuncReOrderWrap(onDragStart)]),
+      cmds.condition(void 0, true).onDragEnd().then([SliderEditFuncReOrderWrap(onDragEnd)]),
+      cmds.condition(void 0, true).onFlingStart().then([SliderEditFuncReOrderWrap(onFlingStart)]),
+      cmds.condition(void 0, true).onFlingProgress().then([SliderEditFuncReOrderWrap(onFlingProgress)]),
+      cmds.condition(void 0, true).onFlingEnd().then([SliderEditFuncReOrderWrap(onFlingEnd)]),
+      cmds.condition(void 0, true).onFlingDrop().then([SliderEditFuncReOrderWrap(onFlingDrop)]),
+      cmds.condition(void 0, true).onTouchRelease().then([cmds.state().touchLockSwitch(false, vertical ? 1 : 2)]),
+      cmds.condition(wallConditionGroup, true).boxPosition(walls.left, walls.top, walls.right, walls.bottom).then([cmds.state().setHitWallOverflow()])
       //TODO 通过prop设置哪个方向overflow
     ]);
   };
@@ -5657,6 +5909,7 @@ const setup = (props, itemRender, locateDiv, renderData, slideDiv, slideDivLeft,
   onUpdated(() => {
   });
   onBeforeUnmount(() => {
+    taskManager.cancelAllTask();
     tryCancelDelayLoad();
     mounted = false;
   });
@@ -5685,7 +5938,7 @@ const setup = (props, itemRender, locateDiv, renderData, slideDiv, slideDivLeft,
 
 
  */
-const _sfc_main$I = {
+const _sfc_main$M = {
   __name: "SlotComponent",
   setup(__props) {
     onBeforeUpdate(() => {
@@ -5786,6 +6039,7 @@ const _sfc_main$I = {
                                           uid {string}: item的uid, 可以通过uid来设置焦点
                                           permanent {boolean}: 出去与是否保留
                                           enableTap {boolean}: 是否接受触控tap
+                                          showSkeleton {boolean}: 打断描画时, 是否显示骨架图
                                         }
  *
  *      onFocus {function} 控件获取焦点的回调
@@ -5860,7 +6114,21 @@ const _sfc_main$I = {
                                             lockChildSlideEvent: {boolean} 设置焦点时忽略子发过来的滚动事件
                                           }
         refreshData
-          @description 刷新数据, 只有存在provideData时才会生效. refresh时对比的array里的object, 所以可以建一个新的array, 只要保证数据成员还是之前的那个object就行
+          @description  刷新数据, 只有存在provideData时才会生效
+                        当refresh时，根据下面的数据对比规则找出变化的数据
+                        refresh时的对比逻辑:
+                          1. 对比array里的object是否是同一个对象
+                          2. 对比array里的jsvKey字段, 若一致则认为该数据未改变，即使object不相同
+                        发现array中存在数据变化时，会如下的场景进行处理
+                          场景1: array内部的数据变化了，无论末尾有没有增加: 变化的项目会重新触发measure, 
+                                若measure返回尺寸变化则调用所有项目measure重做布局  
+                                若measure返回尺寸未变化，则仅对变化项目的div进行key的调整来触发item的remount
+                          场景2: array内部未变化，仅array末尾新增内容: 对末尾内容的项目做measure，布局进行追加处理，原布局内容保持(节省性能)
+                        特别说明: jsvKey的使用方法提示
+                          1. 用lastModify设置jsvKey，并将所有的item设置成同一个jsvKey，后续局部更新项目的jsvKey代表的lastModify
+                          2. 后台运营对于素材是只新增不改动的策略时，用素材的id来命名jsvKey，array中间位置素材变化的时候，
+                             更换jsvKey，以达到局部更新的目的，防止全体更新，从而提高响应的性能
+                        
           @params {boolean} forceUpdate 是否强制刷新
         getVisibleItems
           @description 获取可视item的列表信息
@@ -5962,7 +6230,7 @@ const _sfc_main$I = {
 
 
  */
-const _sfc_main$H = {
+const _sfc_main$L = {
   __name: "MetroWidget",
   props: {
     padding: {
@@ -6149,10 +6417,16 @@ const _sfc_main$H = {
       touchDivSize,
       "common"
     );
-    let touchDivVOn = {};
-    if (onTouchRelease) {
-      touchDivVOn["jsv-touchend"] = onTouchRelease;
-    }
+    onMounted(() => {
+      if (onTouchRelease) {
+        touchDiv.value.jsvSetTapListener(
+          {
+            onTouchEnd: onTouchRelease
+          },
+          ForgeConst.DragFlags.TOUCH_RECV_MOVE_BIT | ForgeConst.DragFlags.TOUCH_RECV_FLING_BIT | ForgeConst.DragFlags.TOUCH_RECV_LAST_END
+        );
+      }
+    });
     expose(exportObject);
     return (_ctx, _cache) => {
       const _component_jsv_focus_block = resolveComponent("jsv-focus-block");
@@ -6181,14 +6455,14 @@ const _sfc_main$H = {
               top: slideDivTop.value
             })
           }, [
-            createElementVNode("div", mergeProps({
+            createElementVNode("div", {
               ref_key: "touchDiv",
               ref: touchDiv,
-              style: {
+              style: normalizeStyle({
                 width: touchDivSize.width,
                 height: touchDivSize.height
-              }
-            }, toHandlers(unref(touchDivVOn), true)), [
+              })
+            }, [
               createElementVNode("div", null, [
                 renderSlot(_ctx.$slots, "background")
               ]),
@@ -6210,7 +6484,7 @@ const _sfc_main$H = {
                   default: withCtx(() => [
                     (openBlock(true), createElementBlock(Fragment, null, renderList(unref(renderData), (item, index) => {
                       return openBlock(), createElementBlock("div", {
-                        key: pageUpdateToken.value + "_" + item.index,
+                        key: pageUpdateToken.value + "_" + item.index + "-" + item.renderKey.value,
                         ref_for: true,
                         ref: item.divRef,
                         "data-jsv-vw-test-rect": "1",
@@ -6229,7 +6503,7 @@ const _sfc_main$H = {
                           ref: item.slotRef,
                           id: `${__props.name}_${index}`
                         }, [
-                          createVNode(_sfc_main$I, { key: "__QcodeJsviewFreezeComponent" }, {
+                          createVNode(_sfc_main$M, { key: "__QcodeJsviewFreezeComponent" }, {
                             default: withCtx(() => [
                               renderSlot(_ctx.$slots, "renderItem", {
                                 data: item.customerData,
@@ -6242,7 +6516,7 @@ const _sfc_main$H = {
                             _: 2
                           }, 1024)
                         ], 8, ["id"])) : createCommentVNode("", true),
-                        __props.enableItemRenderBreak && __props.placeHolderSetting && !item.mounted.value ? (openBlock(), createElementBlock("div", {
+                        __props.enableItemRenderBreak && __props.placeHolderSetting && !item.mounted.value && item.itemConfig.showSkeleton ? (openBlock(), createElementBlock("div", {
                           key: 1,
                           style: normalizeStyle({
                             width: item.renderStyle.width - unref(normalizedPlaceHolder).gap,
@@ -6257,7 +6531,7 @@ const _sfc_main$H = {
                   _: 3
                 }, 8, ["name", "onAction"])
               ], 512)
-            ], 16),
+            ], 4),
             createElementVNode("div", null, [
               renderSlot(_ctx.$slots, "foreground")
             ])
@@ -6278,7 +6552,7 @@ const _sfc_main$H = {
 
 
  */
-const _sfc_main$G = {
+const _sfc_main$K = {
   __name: "ListWidget",
   props: {
     padding: {
@@ -6464,10 +6738,16 @@ const _sfc_main$G = {
       touchDivSize,
       "list"
     );
-    let touchDivVOn = {};
-    if (onTouchRelease) {
-      touchDivVOn["jsv-touchend"] = onTouchRelease;
-    }
+    onMounted(() => {
+      if (onTouchRelease) {
+        touchDiv.value.jsvSetTapListener(
+          {
+            onTouchEnd: onTouchRelease
+          },
+          ForgeConst.DragFlags.TOUCH_RECV_MOVE_BIT | ForgeConst.DragFlags.TOUCH_RECV_FLING_BIT | ForgeConst.DragFlags.TOUCH_RECV_LAST_END
+        );
+      }
+    });
     expose(exportObject);
     return (_ctx, _cache) => {
       const _component_jsv_focus_block = resolveComponent("jsv-focus-block");
@@ -6496,14 +6776,14 @@ const _sfc_main$G = {
               top: slideDivTop.value
             })
           }, [
-            createElementVNode("div", mergeProps({
+            createElementVNode("div", {
               ref_key: "touchDiv",
               ref: touchDiv,
-              style: {
+              style: normalizeStyle({
                 width: touchDivSize.width,
                 height: touchDivSize.height
-              }
-            }, toHandlers(unref(touchDivVOn), true)), [
+              })
+            }, [
               createElementVNode("div", null, [
                 renderSlot(_ctx.$slots, "background")
               ]),
@@ -6525,7 +6805,7 @@ const _sfc_main$G = {
                   default: withCtx(() => [
                     (openBlock(true), createElementBlock(Fragment, null, renderList(unref(renderData), (item, index) => {
                       return openBlock(), createElementBlock("div", {
-                        key: pageUpdateToken.value + "_" + item.index,
+                        key: pageUpdateToken.value + "_" + item.index + "-" + item.renderKey.value,
                         ref_for: true,
                         ref: item.divRef,
                         "data-jsv-vw-test-rect": "1",
@@ -6552,7 +6832,7 @@ const _sfc_main$G = {
                             onItemEdge: unref(_onFocusableItemEdge)
                           })
                         ], 8, ["id"])) : createCommentVNode("", true),
-                        __props.enableItemRenderBreak && __props.placeHolderSetting && !item.mounted.value ? (openBlock(), createElementBlock("div", {
+                        __props.enableItemRenderBreak && __props.placeHolderSetting && !item.mounted.value && item.itemConfig.showSkeleton ? (openBlock(), createElementBlock("div", {
                           key: 1,
                           style: normalizeStyle({
                             width: item.renderStyle.width - unref(normalizedPlaceHolder).gap,
@@ -6567,7 +6847,7 @@ const _sfc_main$G = {
                   _: 3
                 }, 8, ["name", "onAction"])
               ], 512)
-            ], 16),
+            ], 4),
             createElementVNode("div", null, [
               renderSlot(_ctx.$slots, "foreground")
             ])
@@ -6728,7 +7008,7 @@ const HUB_NS_PROVIDE_NAME = "__jsvFocusNameSpace__";
 
 
  */
-const _sfc_main$F = {
+const _sfc_main$J = {
   __name: "JsvFocusBlock",
   props: {
     name: String,
@@ -6913,7 +7193,7 @@ const _sfc_main$F = {
 };
 
 //
-// utils/JsViewEngineWidget/JsvFocus/JsvFocusManager.js;
+// utils/JsViewEngineWidget/JsvFocus/JsvFocusManager.ts;
 //
 const useFocusHub = (withNameSpace) => {
   if (withNameSpace) {
@@ -6925,6 +7205,9 @@ const useFocusHub = (withNameSpace) => {
   return inject(ROOT_HUB_PROVIDE_NAME);
 };
 class JsvFocusManager {
+  // #aliasMap = {}
+  $_appMount = void 0;
+  $_topFDiv = void 0;
   constructor() {
   }
   install(app, ...options) {
@@ -6936,7 +7219,7 @@ class JsvFocusManager {
     }
     const doAppMount = this.$_hookMount(app, options[0]);
     app.mount = doAppMount;
-    app.component("JsvFocusBlock", _sfc_main$F);
+    app.component("JsvFocusBlock", _sfc_main$J);
     app.config.globalProperties.$jsvFocusManager = this;
     app.provide(HUB_NS_PROVIDE_NAME, null);
     app.provide(ROOT_HUB_PROVIDE_NAME, new JsvFocusHubApi(this.$_topFDiv.getHub()));
@@ -6990,16 +7273,13 @@ class JsvFocusManager {
     this.$_topFDiv.onMounted();
     return rootComponent;
   }
-  // #aliasMap = {}
-  $_appMount = void 0;
-  $_topFDiv = void 0;
 }
 function jsvCreateFocusManager() {
   return new JsvFocusManager();
 }
 
 //
-// utils/JsViewEngineWidget/index.js;
+// utils/JsViewEngineWidget/index.ts;
 //
 
 //
@@ -7481,7 +7761,7 @@ class ScreenLockManager {
 // utils/JsViewPlugin/JsvAudio/AudioProxy.js;
 //
 let sPluginLoader$1 = GetPluginLoader$1();
-const TAG$2 = "JsvAudio";
+const TAG$2 = "JsvAudio:";
 let keyToken = 0;
 const getKeyToken = () => {
   return ++keyToken;
@@ -7538,6 +7818,8 @@ class AudioProxy {
     this._created = false;
     this._eventListener = {};
     this._propCache = {};
+    this._unloaded = false;
+    this._visibility = window.JsView?.getVisibility();
     this._onVisibilityChange = this.onVisibilityChange.bind(this);
     window.JsView?.onVisibilityChange(this._onVisibilityChange);
   }
@@ -7655,15 +7937,30 @@ class AudioProxy {
   }
   /** control */
   load() {
+    if (this._unloaded) {
+      console.warn(TAG$2, "Instead of calling load() after unload(), please update component's key to create a new JsvAudio.");
+      return;
+    }
     this.setProperty("enablePlayer", true);
   }
   play() {
-    this.setProperty("paused", false);
+    if (this._visibility) {
+      this.setProperty("paused", false);
+      if (typeof this._propCache["customerPause"] !== "undefined") {
+        this._propCache["customerPause"] = false;
+      }
+    } else {
+      console.warn(TAG$2, "JsvAudio can not play when it is invisible.");
+    }
   }
   pause() {
     this.setProperty("paused", true);
+    if (typeof this._propCache["customerPause"] !== "undefined") {
+      this._propCache["customerPause"] = true;
+    }
   }
   unload() {
+    this._unloaded = true;
     this.pause();
     this.setProperty("enablePlayer", false);
   }
@@ -7766,6 +8063,7 @@ class AudioProxy {
   onVisibilityChange(state) {
     console.log(TAG$2, "audio visibility change", JSON.stringify(state));
     if (state.status == "show") {
+      this._visibility = true;
       if (typeof this._propCache["customerPause"] != "undefined") {
         const customerPause = this._propCache["customerPause"];
         delete this._propCache["customerPause"];
@@ -7774,6 +8072,7 @@ class AudioProxy {
         }
       }
     } else {
+      this._visibility = false;
       this._propCache["customerPause"] = this._propCache["paused"];
       this.pause();
     }
@@ -7794,7 +8093,7 @@ class AudioProxy {
 
 
  */
-const _sfc_main$E = {
+const _sfc_main$I = {
   __name: "JsvAudio",
   props: {
     /**
@@ -7941,7 +8240,7 @@ const _sfc_main$E = {
 
 
  */
-const _sfc_main$D = {
+const _sfc_main$H = {
   __name: "JsvAudioProxy",
   setup(__props) {
     const AsyncComp = defineAsyncComponent(() => {
@@ -7951,7 +8250,7 @@ const _sfc_main$D = {
           const BrowserAudio = import('./browser/BrowserAudio.vue.mjs');
           resolve(BrowserAudio);
         } else {
-          resolve(_sfc_main$E);
+          resolve(_sfc_main$I);
         }
       });
     });
@@ -8246,7 +8545,7 @@ const cssColor2Android = (cssColor) => {
 
 
  */
-const _sfc_main$C = {
+const _sfc_main$G = {
   __name: "JsvLatex",
   props: {
     latexStr: {
@@ -8368,7 +8667,7 @@ const _sfc_main$C = {
 
 
  */
-const _sfc_main$B = {
+const _sfc_main$F = {
   __name: "JsvLatexProxy",
   setup(__props) {
     const AsyncComp = defineAsyncComponent(() => {
@@ -8378,7 +8677,7 @@ const _sfc_main$B = {
           const BrowserJsvLatex = import('./browser/BrowserJsvLatex.vue.mjs');
           resolve(BrowserJsvLatex);
         } else {
-          resolve(_sfc_main$C);
+          resolve(_sfc_main$G);
         }
       });
     });
@@ -10840,7 +11139,7 @@ class JsvActorMoveControl extends ActorControlBase {
 
 
  */
-const _sfc_main$A = {
+const _sfc_main$E = {
   __name: "JsvActorMove",
   props: {
     control: {
@@ -10904,7 +11203,7 @@ const _sfc_main$A = {
 
 
  */
-const _sfc_main$z = {
+const _sfc_main$D = {
   __name: "FreeMoveActor",
   props: {
     // div的style设置,
@@ -11014,7 +11313,7 @@ const KeepFlags = {
 
 
  */
-const _sfc_main$y = {
+const _sfc_main$C = {
   __name: "JsvEnvBlocker",
   props: {
     // (支持reactive)位置信息
@@ -11113,6 +11412,97 @@ const _sfc_main$y = {
   }
 };
 
+//
+// utils/JsViewVueWidget/JsvFreeMoveActor/SyncLinkManager.ts;
+//
+class SyncLinkSource {
+  nexusNode;
+  linkName;
+  constructor(name, node) {
+    this.nexusNode = node;
+    this.linkName = name;
+  }
+}
+class SyncLinkManager {
+  // 等待中的未回复的link
+  pendingPromiseList = [];
+  syncSourceMap = /* @__PURE__ */ new Map();
+  constructor() {
+  }
+  // 将LinkSource加入map
+  SourceOnMounted(syncSource) {
+    if (syncSource != null) {
+      let linkName = syncSource.linkName;
+      if (this.syncSourceMap.has(linkName)) {
+        console.error(`Error: sync link name duplicate:${linkName}`);
+        return;
+      }
+      this.syncSourceMap.set(linkName, syncSource);
+      if (this.pendingPromiseList.length != 0) {
+        for (let index = this.pendingPromiseList.length - 1; index >= 0; index--) {
+          let promiseItem = this.pendingPromiseList[index];
+          if (promiseItem.linkName == linkName) {
+            promiseItem.promiseResolve?.();
+            this.pendingPromiseList.splice(index, 1);
+          }
+        }
+      }
+    }
+  }
+  // 将LinkSource移出map
+  SourceOnUnmounted(linkName) {
+    if (this.syncSourceMap.has(linkName)) {
+      this.syncSourceMap.delete(linkName);
+    } else {
+      console.error(`ERROR: unmount linkname(${linkName}) not found`);
+    }
+  }
+  // 加入wait处理在.then中再进行 GetSyncSource, 以保证节点完成了mounted
+  WaitSourceMounted(name) {
+    let newPromiseItem = {
+      promiseRef: null,
+      promiseResolve: null,
+      linkName: name
+    };
+    newPromiseItem.promiseRef = new Promise((resolve) => {
+      newPromiseItem.promiseResolve = resolve;
+      if (this.syncSourceMap.has(name)) {
+        resolve();
+      } else {
+        this.pendingPromiseList.push(newPromiseItem);
+      }
+    });
+    return newPromiseItem.promiseRef;
+  }
+  // 取消 WaitSourceMounted 发起的Promise, 用在unmounted中, 规避内存泄漏
+  UnListen(waitPromise) {
+    if (this.pendingPromiseList.length != 0) {
+      for (let index = this.pendingPromiseList.length; index >= 0; index--) {
+        let promiseItem = this.pendingPromiseList[index];
+        if (promiseItem.promiseRef == waitPromise) {
+          this.pendingPromiseList.splice(index, 1);
+          break;
+        }
+      }
+    }
+  }
+  GetSourceNexusNode(linkName) {
+    let sourceItem = this.syncSourceMap.get(linkName);
+    if (sourceItem) {
+      return sourceItem.nexusNode;
+    } else {
+      return null;
+    }
+  }
+}
+let sSyncLinkManager = null;
+function GetSyncLinkManager() {
+  if (sSyncLinkManager == null) {
+    sSyncLinkManager = new SyncLinkManager();
+  }
+  return sSyncLinkManager;
+}
+
 //
 // utils/JsViewVueWidget/JsvFreeMoveActor/index.js;
 //
@@ -11122,7 +11512,9 @@ let FreeMoveDef = {
 };
 let FreeMoveFunc = {
   newNexus,
-  ActControlDebug: ActorControl
+  ActControlDebug: ActorControl,
+  GetSyncLinkManager,
+  SyncLinkSource
 };
 
 //
@@ -11165,7 +11557,7 @@ let FreeMoveFunc = {
 
 
  */
-const _sfc_main$x = {
+const _sfc_main$B = {
   __name: "JsvFlexDiv",
   props: {
     style: Object,
@@ -11272,7 +11664,7 @@ const _sfc_main$x = {
 
 
  */
-const _sfc_main$w = {
+const _sfc_main$A = {
   props: {
     src: String,
     style: Object,
@@ -11327,12 +11719,12 @@ const _sfc_main$w = {
         }
       }
     },
-    stop() {
+    stop(frameCount = -1) {
       if (this.$refs.element) {
         let mainViewTexture = this.$refs.element.jsvGetProxyTexture(
           handles.TextureManager
         );
-        mainViewTexture.DispatchCommand(Forge.NativeConstant.APIC_STOP, "");
+        mainViewTexture.DispatchCommand(Forge.NativeConstant.APIC_STOP, `{"TF":${frameCount}}`);
       }
     }
   },
@@ -11350,7 +11742,7 @@ const _sfc_main$w = {
     }
   },
   beforeUnmount() {
-    this.stop();
+    this.stop(0);
     if (this.$refs.element) {
       let mainViewTexture = this.$refs.element.jsvGetProxyTexture(
         handles.TextureManager
@@ -11373,7 +11765,7 @@ function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
     style: normalizeStyle($props.style)
   }, null, 12, ["src"]);
 }
-const JsvApic = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["render", _sfc_render$a]]);
+const JsvApic = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["render", _sfc_render$a]]);
 
 //
 // utils/JsViewVueWidget/JsvApic/JsvApic/index.js;
@@ -11424,7 +11816,7 @@ const _JsvApic$1 = _JsvApic;
 
 
  */
-const _sfc_main$v = {
+const _sfc_main$z = {
   props: {
     src: String,
     style: Object,
@@ -11479,12 +11871,12 @@ const _sfc_main$v = {
         }
       }
     },
-    stop() {
+    stop(frameCount = -1) {
       if (this.$refs.element) {
         let mainViewTexture = this.$refs.element.jsvGetProxyTexture(
           handles.TextureManager
         );
-        mainViewTexture.DispatchCommand(Forge.NativeConstant.APIC_STOP, "");
+        mainViewTexture.DispatchCommand(Forge.NativeConstant.APIC_STOP, `{"TF":${frameCount}}`);
       }
     }
   },
@@ -11499,7 +11891,7 @@ const _sfc_main$v = {
     }
   },
   beforeUnmount() {
-    this.stop();
+    this.stop(0);
     if (this.$refs.element) {
       let mainViewTexture = this.$refs.element.jsvGetProxyTexture(
         handles.TextureManager
@@ -11522,7 +11914,7 @@ function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
     style: normalizeStyle($props.style)
   }, null, 12, ["src"]);
 }
-const JsvApic2 = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["render", _sfc_render$9]]);
+const JsvApic2 = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["render", _sfc_render$9]]);
 
 //
 // utils/JsViewVueWidget/JsvApic/JsvApic2/index.js;
@@ -11549,7 +11941,7 @@ const _JsvApic2$1 = _JsvApic2;
 
 
  */
-const _sfc_main$u = {
+const _sfc_main$y = {
   props: {
     left: {
       type: Number,
@@ -11603,7 +11995,7 @@ function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
     })
   }, null, 4);
 }
-const CursorVue = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["render", _sfc_render$8]]);
+const CursorVue = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["render", _sfc_render$8]]);
 
 //
 // utils/JsViewVueWidget/JsvInput/JsvInput.vue;
@@ -11631,7 +12023,7 @@ const edgeMap = {
   40: EdgeDirection.bottom
 };
 const MAX_WIDTH = 1920;
-const _sfc_main$t = {
+const _sfc_main$x = {
   components: {
     CursorVue
   },
@@ -12234,7 +12626,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   }, 8, ["name", "onAction", "style"]);
 }
-const JsvInput = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["render", _sfc_render$7]]);
+const JsvInput = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["render", _sfc_render$7]]);
 
 //
 // utils/JsViewVueWidget/JsvInput/index.js;
@@ -12305,7 +12697,7 @@ const buildDownloadInfo$1 = (url, net_setting = null, get_image_size) => {
     // 用于格式校验
   };
 };
-const _sfc_main$s = {
+const _sfc_main$w = {
   __name: "JsvPreload",
   props: {
     preloadList: Object,
@@ -12586,7 +12978,7 @@ const _sfc_main$s = {
 // 考虑到.vue文件除了export default的component外，还有可能export其他对象,因此使用import * as
 let _JsvPreload;
 if (window.JsView) {
-  _JsvPreload = _sfc_main$s;
+  _JsvPreload = _sfc_main$w;
 } else {
   const BrowserPreload = await import('./browser/BrowserPreload.vue.mjs');
   _JsvPreload = BrowserPreload.default;
@@ -12620,7 +13012,7 @@ const JsvPreload = _JsvPreload;
 
 
  */
-const _sfc_main$r = {
+const _sfc_main$v = {
   props: {
     value: String,
     size: Number,
@@ -12756,7 +13148,7 @@ const _sfc_main$r = {
 function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", { "data-jsv-vw-innerview": $data.innerViewId }, null, 8, ["data-jsv-vw-innerview"]);
 }
-const JsvQrcode = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["render", _sfc_render$6]]);
+const JsvQrcode = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["render", _sfc_render$6]]);
 
 //
 // utils/JsViewVueWidget/JsvQrcode/index.js;
@@ -12884,7 +13276,7 @@ let buildForgeView = (pointRes, sprayStyle, sizeRef, ignoreClip) => {
   sizeRef.height = view_height;
   return Forge$2.sViewStore.add(new Forge$2.ViewInfo(spray_view, null));
 };
-const _sfc_main$q = {
+const _sfc_main$u = {
   props: {
     pointRes: {
       type: String,
@@ -12943,7 +13335,7 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
     "data-jsv-vw-innerview": $data.viewId
   }, null, 12, ["data-jsv-vw-innerview"]);
 }
-const JsvSpray = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["render", _sfc_render$5]]);
+const JsvSpray = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["render", _sfc_render$5]]);
 
 //
 // utils/JsViewVueWidget/JsvSpray/index.js;
@@ -13199,7 +13591,7 @@ const JsvSpriteAnim_vue_vue_type_style_index_0_scoped_00add5ef_lang = "";
 
 
  */
-const _sfc_main$p = {
+const _sfc_main$t = {
   __name: "JsvSpriteAnim",
   props: {
     spriteInfo: Object,
@@ -13536,7 +13928,7 @@ const _sfc_main$p = {
 };
 const styleSheetsContent$1 = { "0": { "sprite-tag-00add5ef": "@keyframes sprite-tag-00add5ef {}" } };
 window.JsvCode.Dom.DeclareStyleSheets(styleSheetsContent$1);
-const JsvSpriteAnim = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-00add5ef"]]);
+const JsvSpriteAnim = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-00add5ef"]]);
 
 //
 // utils/JsViewVueWidget/JsvSpriteAnim/JsvSpriteLoader.vue;
@@ -13556,7 +13948,7 @@ const JsvSpriteAnim = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "d
 
 
  */
-const _sfc_main$o = {
+const _sfc_main$s = {
   __name: "JsvSpriteLoader",
   props: {
     imageUrl: String,
@@ -13762,7 +14154,7 @@ let JsvSpriteTools = {
 
 
  */
-const _sfc_main$n = {
+const _sfc_main$r = {
   __name: "JsvVisibleSensor",
   props: {
     // (支持reactive)可视区域设定
@@ -13885,7 +14277,7 @@ const _sfc_main$n = {
 
 var JsvVisibleSensor$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: _sfc_main$n
+  default: _sfc_main$r
 });
 
 //
@@ -13960,8 +14352,8 @@ const keyCode2EdgeDirection = (keyCode) => {
       return null;
   }
 };
-const _sfc_main$m = {
-  components: { JsvActorMove: _sfc_main$A, JsvVisibleSensor },
+const _sfc_main$q = {
+  components: { JsvActorMove: _sfc_main$E, JsvVisibleSensor },
   props: {
     showIndicator: {
       type: Boolean,
@@ -14448,7 +14840,7 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
     }, 8, ["name", "style", "onAction"])
   ], 64);
 }
-const JsvSwiper = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["render", _sfc_render$4]]);
+const JsvSwiper = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["render", _sfc_render$4]]);
 
 //
 // utils/JsViewVueWidget/JsvSwiper/index.js;
@@ -14481,7 +14873,7 @@ const JsvSwiper = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["render", _sfc_rend
 
 
  */
-const _sfc_main$l = {
+const _sfc_main$p = {
   __name: "JsvSwiper",
   props: {
     dispNumber: { type: Number, require: true },
@@ -14927,7 +15319,7 @@ const TexAlignAnchor$1 = {
   CENTER_BOTTOM: 8,
   RIGHT_BOTTOM: 9
 };
-const _sfc_main$k = {
+const _sfc_main$o = {
   props: {
     src: String,
     top: Number,
@@ -15201,7 +15593,7 @@ function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
     "data-jsv-vw-innerview": $setup.innerViewId
   }, null, 12, ["data-jsv-vw-innerview"]);
 }
-const JsvTextureAnim = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$3]]);
+const JsvTextureAnim = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["render", _sfc_render$3]]);
 
 //
 // utils/JsViewVueWidget/JsvTextureAnim/index.js;
@@ -15234,7 +15626,7 @@ const TexAlignAnchor = TexAlignAnchor$1;
 
 
  */
-const _sfc_main$j = {
+const _sfc_main$n = {
   __name: "JsvFilterView",
   props: {
     width: {
@@ -15387,7 +15779,7 @@ class LineType extends UpdateType {
     this.end = end;
   }
 }
-const _sfc_main$i = {
+const _sfc_main$m = {
   props: {
     left: {
       type: Number
@@ -15887,7 +16279,7 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["name", "onAction", "style"]);
 }
-const JsvGrid = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$2]]);
+const JsvGrid = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["render", _sfc_render$2]]);
 
 //
 // utils/JsViewVueWidget/JsvNinePatch.vue;
@@ -15895,6 +16287,8 @@ const JsvGrid = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render
 /* <!--
  * 【模块 export 内容】
  * JsvNinePatch：Vue高阶组件，.9图展示控件，该控件的原图要求为正方形，延展后可为长方形
+ *              centerWidth和borderOutset传值比较抽象，若 imageDspWidth 和图片素材的原图尺寸一直，
+ *              则可以参考 samples/NinePatchTester 的样例图示
  *      props说明:
  *          style       {Object}    同div的Style，通过width/height来控制.9图片延展后的显示尺寸，另外通过top/left控制坐标
  *          imageUrl    {String}    (必填)显示图片的加载地址
@@ -15916,7 +16310,7 @@ const JsvGrid = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render
 
 
  */
-const _sfc_main$h = {
+const _sfc_main$l = {
   __name: "JsvNinePatch",
   props: {
     style: {
@@ -15937,7 +16331,9 @@ const _sfc_main$h = {
     animTime: { type: Number, default: 0 },
     onTransitionEnd: { type: Function },
     animation: { type: String },
-    imageBlendType: { type: String, default: null }
+    imageBlendType: { type: String, default: null },
+    // 获取实际div的句柄
+    onDivRef: { type: Function, default: null }
   },
   setup(__props) {
     const props = __props;
@@ -15980,9 +16376,13 @@ const _sfc_main$h = {
         );
       }
     });
+    function innerOnDivRef(ref2) {
+      props.onDivRef?.(ref2);
+    }
     return (_ctx, _cache) => {
       return isReady() ? (openBlock(), createElementBlock("div", {
         key: 0,
+        ref: innerOnDivRef,
         style: normalizeStyle({
           ...__props.style,
           transition: !!__props.animation ? null : getTransition(),
@@ -16016,7 +16416,7 @@ const _sfc_main$h = {
 
 
  */
-const _sfc_main$g = {
+const _sfc_main$k = {
   __name: "JsvNativeSharedDiv",
   props: {
     style: {
@@ -16094,7 +16494,7 @@ const _sfc_main$g = {
           top: __props.style.top
         })
       }, [
-        unref(ninePatchSet) != null ? (openBlock(), createBlock(_sfc_main$h, {
+        unref(ninePatchSet) != null ? (openBlock(), createBlock(_sfc_main$l, {
           key: 0,
           style: normalizeStyle({
             width: __props.style.width,
@@ -16160,7 +16560,7 @@ const _sfc_main$g = {
 
 
  */
-const _sfc_main$f = {
+const _sfc_main$j = {
   __name: "JsvMarquee",
   props: {
     text: {
@@ -16567,7 +16967,7 @@ const _sfc_main$f = {
 
  */
 const renderDocument = window.JsvCode.Dom.RenderDocument ? window.JsvCode.Dom.RenderDocument : window.JsvCode.Dom.BrowserDocument;
-const _sfc_main$e = {
+const _sfc_main$i = {
   props: {
     class: {
       type: String
@@ -16742,7 +17142,7 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
     })
   }, null, 12, ["data-jsv-vw-innerview"]));
 }
-const JsvMaskClipDiv = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$1]]);
+const JsvMaskClipDiv = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$1]]);
 
 //
 // utils/JsViewVueWidget/JsvPosterDiv.vue;
@@ -16761,7 +17161,7 @@ const JsvMaskClipDiv = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc
 
 
  */
-const _sfc_main$d = {
+const _sfc_main$h = {
   __name: "JsvPosterDiv",
   props: {
     style: Object
@@ -16814,7 +17214,7 @@ const _sfc_main$d = {
 
 
  */
-const _sfc_main$c = {
+const _sfc_main$g = {
   __name: "JsvPosterImage",
   props: {
     colorSpace: {
@@ -16905,7 +17305,7 @@ const _sfc_main$c = {
 
 
  */
-const _sfc_main$b = {
+const _sfc_main$f = {
   props: {
     definitionScale: {
       type: String
@@ -16917,7 +17317,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     renderSlot(_ctx.$slots, "default")
   ], 8, ["data-jsv-vw-text-definition"]);
 }
-const JsvScaleTextBox = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render]]);
+const JsvScaleTextBox = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render]]);
 
 //
 // utils/JsViewVueWidget/JsvSoundPool.js;
@@ -17148,7 +17548,7 @@ class JsvSoundPool {
 /* <!--
 * Created by chunfeng.luo@qcast.cn on 10/13/20.
 */
-const _sfc_main$a = {
+const _sfc_main$e = {
   __name: "JsvTextBox",
   props: {
     style: Object,
@@ -17194,7 +17594,7 @@ const _sfc_main$a = {
       return props.enableLatex ? 1 : 0;
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$x), {
+      return openBlock(), createBlock(unref(_sfc_main$B), {
         style: normalizeStyle({
           ...props.style,
           flexDirection: "row",
@@ -17242,7 +17642,7 @@ const _sfc_main$a = {
 -->
 
  */
-const _sfc_main$9 = {
+const _sfc_main$d = {
   __name: "JsvRadarChart",
   props: {
     style: {
@@ -17486,7 +17886,7 @@ const JsvRippleShape = {
 
 
  */
-const _sfc_main$8 = {
+const _sfc_main$c = {
   __name: "JsvRipple",
   props: {
     width: {
@@ -17660,7 +18060,7 @@ const JsvLine_vue_vue_type_style_index_0_scoped_10b9ebcf_lang = "";
 
 
  */
-const _sfc_main$7 = {
+const _sfc_main$b = {
   __name: "JsvLine",
   props: {
     startPos: { type: Object, require: true },
@@ -17721,7 +18121,7 @@ const _sfc_main$7 = {
 };
 const styleSheetsContent = { "0": { "fadeIn-10b9ebcf": "@keyframes fadeIn-10b9ebcf {0%{opacity:0;}100%{opacity:1;}}", "fadeOut-10b9ebcf": "@keyframes fadeOut-10b9ebcf {0%{opacity:1;}100%{opacity:0;}}" } };
 window.JsvCode.Dom.DeclareStyleSheets(styleSheetsContent);
-const JsvLine = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-10b9ebcf"]]);
+const JsvLine = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-10b9ebcf"]]);
 
 //
 // utils/JsViewVueWidget/JsvLine/index.js;
@@ -17747,7 +18147,7 @@ const JsvLine = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-
 
 
  */
-const _sfc_main$6 = {
+const _sfc_main$a = {
   __name: "JsvSector",
   props: {
     centerPosition: { type: Object, require: true },
@@ -17861,7 +18261,7 @@ const _sfc_main$6 = {
 
 
  */
-const _sfc_main$5 = {
+const _sfc_main$9 = {
   __name: "JsvPieChart",
   props: {
     centerPosition: { type: Object, required: true },
@@ -17947,7 +18347,7 @@ const _sfc_main$5 = {
       }, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(unref(finalData).slice().reverse(), (item, index) => {
           return openBlock(), createElementBlock("div", null, [
-            (openBlock(), createBlock(_sfc_main$6, {
+            (openBlock(), createBlock(_sfc_main$a, {
               radius: props.radius,
               config: {
                 startAngle: Number(item.startAngle),
@@ -18055,7 +18455,7 @@ class ConnectLineTexture {
 
 
  */
-const _sfc_main$4 = {
+const _sfc_main$8 = {
   __name: "JsvConnectLine",
   props: {
     startPos: {
@@ -18241,6 +18641,9 @@ const _sfc_main$4 = {
       startPos3.x = props.isVertical ? props.endPos.x : InflectionPoint.x;
       startPos3.y = props.isVertical ? InflectionPoint.y + startPos3Extra : props.endPos.y;
     }
+    onBeforeUnmount(() => {
+      myLineTexture.UnRef();
+    });
     return (_ctx, _cache) => {
       return unref(isOneDirection) ? (openBlock(), createElementBlock("div", { key: 0 }, [
         createVNode(unref(JsvLine), {
@@ -18323,7 +18726,7 @@ const _sfc_main$4 = {
 
 
  */
-const _sfc_main$3 = {
+const _sfc_main$7 = {
   __name: "JsvProgressBar",
   props: {
     width: { type: Number, required: true },
@@ -18400,7 +18803,7 @@ const _sfc_main$3 = {
       return openBlock(), createElementBlock(Fragment, null, [
         props.isCanvas ? (openBlock(), createElementBlock("div", { key: 0 }, [
           withDirectives(createElementVNode("div", null, [
-            createVNode(_sfc_main$h, {
+            createVNode(_sfc_main$l, {
               style: normalizeStyle({
                 left: 0,
                 top: 0,
@@ -18442,7 +18845,7 @@ const _sfc_main$3 = {
             }, null, 4)
           ], 4)
         ])),
-        createVNode(_sfc_main$h, {
+        createVNode(_sfc_main$l, {
           style: normalizeStyle({
             left: 0,
             top: 0,
@@ -18467,7 +18870,7 @@ const _sfc_main$3 = {
 /* 
 
  */
-const _sfc_main$2 = {
+const _sfc_main$6 = {
   __name: "JsvEnableRenderBreak",
   setup(__props) {
     const itemMounted = shallowRef(false);
@@ -19684,7 +20087,7 @@ function multiSelect(arr, left, right, n, compare) {
 
 
  */
-const _sfc_main$1 = {
+const _sfc_main$5 = {
   __name: "JsvMindMap",
   props: {
     name: {
@@ -20177,21 +20580,35 @@ const _sfc_main$1 = {
 //
 // utils/JsViewVueWidget/JsvScrollBox/ScrollSymbol.ts;
 //
-const ScrollStyle = {
+const ScrollBoxStyle = {
   // 运动模式
   DrawerMode: Symbol("DrawerMode"),
   PinMode: Symbol("PinMode"),
   // 同步模式
-  SyncParallel: Symbol("AckParallel"),
+  SyncForward: Symbol("SyncForward"),
   // 百分比完全对齐的同步模式
-  SyncRevert: Symbol("SyncRevert")
+  SyncReverse: Symbol("SyncReverse"),
   // (1-百分比)的同步模式
+  // Follow的同步模式
+  Position: Symbol("Position"),
+  Size: Symbol("Size"),
+  // Follow的类型定义
+  SizeDiv: Symbol("SizeDiv"),
+  SizeClip: Symbol("SizeClip"),
+  JsvNinePatch: Symbol("JsvNinePatch")
+};
+
+//
+// utils/JsViewVueWidget/JsvScrollBox/ScrollInnerSymbol.ts;
+//
+const ScrollInnerStyle = {
+  UpdatePercentNexusCode: 10001
 };
 
 //
 // utils/JsViewVueWidget/JsvScrollBox/JsvScrollBox.vue?vue&type=script&setup=true&lang.ts;
 //
-const _sfc_main = /* @__PURE__ */ defineComponent({
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "JsvScrollBox",
   props: {
     // 底座的尺寸
@@ -20211,11 +20628,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       require: true
     },
     // 滑块模式
-    // ScrollStyle.PinMode: 滑块小于底座
-    // ScrollStyle.DrawerMode: 滑块大于底座
+    // ScrollBoxStyle.PinMode: 滑块小于底座
+    // ScrollBoxStyle.DrawerMode: 滑块大于底座
     mode: {
       type: Symbol,
-      default: ScrollStyle.PinMode
+      default: ScrollBoxStyle.PinMode
     },
     // 初始进度条的进度
     initPercent: {
@@ -20225,6 +20642,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     enableFling: {
       type: Boolean,
       default: false
+    },
+    linkName: {
+      type: String,
+      default: null
+    },
+    syncWith: {
+      type: String,
+      default: null
+    },
+    syncType: {
+      type: Symbol,
+      default: ScrollBoxStyle.SyncForward
     }
   },
   setup(__props, { expose }) {
@@ -20234,19 +20663,34 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const cInitPercent = rProps.initPercent;
     const cEnableFling = rProps.enableFling;
     const cSliderActor = new ActorControl();
-    const cFixedBoxActor = cMode == ScrollStyle.PinMode ? new ActorControl() : null;
+    const cFixedBoxActor = cMode == ScrollBoxStyle.PinMode ? new ActorControl() : null;
+    const cLinkName = rProps.linkName;
+    const cSyncLinkManager = GetSyncLinkManager();
     const cWallConditionGroup = 1;
     const cSensorConditionGroup = 2;
+    const cLinkConditionGroup = 3;
+    const cLinkMasterGroup = 4;
     let vMounted = false;
     let vHorizontalGap = 0;
     let vVerticalGap = 0;
-    let vSubSyncList = [];
+    let vLinkProvide = null;
+    let vWaitMasterLinkSourceReady = null;
+    let vSyncWithNameCache = null;
+    let vSyncTypeCache = ScrollBoxStyle.SyncForward;
+    let vSyncLinkNexusNode = null;
+    let vCurrentPercent = 0;
     let rFixedBoxWidth = shallowRef(NaN);
     let rFixedBoxHeight = shallowRef(NaN);
     let rFixedViewRef = shallowRef(null);
     let rSliderWidth = shallowRef(NaN);
     let rSliderHeight = shallowRef(NaN);
     let rSliderViewRef = shallowRef(null);
+    let rSliderEdgeBox = {
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0
+    };
     watchEffect(() => {
       let fixedBoxSize = {
         width: rProps.style.width,
@@ -20261,12 +20705,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       } else {
         sliderSize.height = fixedBoxSize.height;
       }
-      if (cMode == ScrollStyle.PinMode && (sliderSize.height > fixedBoxSize.height || sliderSize.width > fixedBoxSize.width)) {
+      if (cMode == ScrollBoxStyle.PinMode && (sliderSize.height > fixedBoxSize.height || sliderSize.width > fixedBoxSize.width)) {
         console.error(
           `slider oversize in pin-mode bw=${fixedBoxSize.width} bh=${fixedBoxSize.height} sw=${sliderSize.width} sh=${sliderSize.height}`
         );
         return;
-      } else if (cMode == ScrollStyle.DrawerMode && (sliderSize.height < fixedBoxSize.height || sliderSize.width < fixedBoxSize.width)) {
+      } else if (cMode == ScrollBoxStyle.DrawerMode && (sliderSize.height < fixedBoxSize.height || sliderSize.width < fixedBoxSize.width)) {
         console.error(
           `box oversize in drawer-mode bw=${fixedBoxSize.width} bh=${fixedBoxSize.height} sw=${sliderSize.width} sh=${sliderSize.height}`
         );
@@ -20279,41 +20723,134 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         rFixedBoxHeight.value = fixedBoxSize.height;
         rebuildSliderSet();
       }
+      if (vSyncWithNameCache != rProps.syncWith || vSyncTypeCache != rProps.syncType) {
+        vSyncWithNameCache = rProps.syncWith;
+        vSyncTypeCache = rProps.syncType;
+        changeSyncLink(vSyncWithNameCache);
+      }
     });
+    function changeSyncLink(newSyncSourceName) {
+      vSyncLinkNexusNode = null;
+      rebuildAckSync();
+      if (newSyncSourceName != null) {
+        vWaitMasterLinkSourceReady = cSyncLinkManager.WaitSourceMounted(newSyncSourceName).then(() => {
+          vSyncLinkNexusNode = cSyncLinkManager.GetSourceNexusNode(newSyncSourceName);
+          rebuildAckSync();
+        });
+      }
+    }
+    function rebuildAckSync() {
+      if (!vMounted)
+        return;
+      cSliderActor.run((cmds) => {
+        return [cmds.state().removeConditionByGroup(cLinkConditionGroup)];
+      });
+      if (vSyncLinkNexusNode != null) {
+        cSliderActor.run((cmds) => {
+          return [
+            cmds.condition(cLinkConditionGroup, true).movementSync(vSyncLinkNexusNode).then([
+              cmds.action().ackMovementSync(
+                0,
+                vHorizontalGap,
+                0,
+                vVerticalGap,
+                3,
+                vSyncTypeCache == ScrollBoxStyle.SyncForward ? 1 : 2
+              )
+            ])
+          ];
+        });
+      }
+    }
+    function rebuildSyncMaster() {
+      if (vLinkProvide != null) {
+        cSliderActor.run((cmds) => {
+          return [
+            cmds.state().removeConditionByGroup(cLinkMasterGroup),
+            cmds.state().startMovementSync(
+              vLinkProvide.nexusNode,
+              0,
+              vHorizontalGap,
+              0,
+              vVerticalGap,
+              3
+            ),
+            // 触发跟随节点记录进度
+            cmds.condition(cLinkMasterGroup, true).onFlingEnd().then([
+              cmds.state().fireNexusEvent(
+                vLinkProvide.nexusNode,
+                ScrollInnerStyle.UpdatePercentNexusCode
+              )
+            ]),
+            // 触发跟随节点记录进度
+            cmds.condition(cLinkMasterGroup, true).onDragEnd().then([
+              cmds.state().fireNexusEvent(
+                vLinkProvide.nexusNode,
+                ScrollInnerStyle.UpdatePercentNexusCode
+              )
+            ])
+          ];
+        });
+      }
+    }
     function rebuildSliderSet() {
+      vHorizontalGap = rFixedBoxWidth.value - rSliderWidth.value;
+      vVerticalGap = rFixedBoxHeight.value - rSliderHeight.value;
+      rSliderEdgeBox.left = vHorizontalGap > 0 ? 0 : vHorizontalGap;
+      rSliderEdgeBox.top = vVerticalGap > 0 ? 0 : vVerticalGap;
+      rSliderEdgeBox.right = vHorizontalGap < 0 ? 0 : vHorizontalGap;
+      rSliderEdgeBox.bottom = vVerticalGap < 0 ? 0 : vVerticalGap;
       if (vMounted) {
-        vHorizontalGap = rFixedBoxWidth.value - rSliderWidth.value;
-        vVerticalGap = rFixedBoxHeight.value - rSliderHeight.value;
-        cSliderActor.run([
-          cSliderActor.state().removeConditionByGroup(cWallConditionGroup),
-          cSliderActor.condition(cWallConditionGroup, true).boxPosition(
-            vHorizontalGap > 0 ? 0 : vHorizontalGap,
-            // left
-            vVerticalGap > 0 ? 0 : vVerticalGap,
-            // top
-            vHorizontalGap < 0 ? 0 : vHorizontalGap,
-            // right
-            vVerticalGap < 0 ? 0 : vVerticalGap
-            // bottom
-          ).then([cSliderActor.action().stopMoving(true)])
+        cSliderActor.run((cmds) => [
+          cmds.state().removeConditionByGroup(cWallConditionGroup),
+          cmds.condition(cWallConditionGroup, true).boxPosition(
+            rSliderEdgeBox.left,
+            rSliderEdgeBox.top,
+            rSliderEdgeBox.right,
+            rSliderEdgeBox.bottom
+          ).then([cmds.action().stopMoving(true)]),
+          // 跟进抬起时进度信息
+          cmds.condition(cWallConditionGroup, true).onFlingEnd().then([
+            (pointInfo) => {
+              vCurrentPercent = positionToPercent(pointInfo);
+            }
+          ]),
+          // 跟进fling结束时的进度信息
+          cmds.condition(cWallConditionGroup, true).onDragEnd().then([
+            (pointInfo) => {
+              vCurrentPercent = positionToPercent(pointInfo);
+            }
+          ])
         ]);
+        rebuildSyncMaster();
+        rebuildAckSync();
       }
     }
     function setSensor(callback, sensitivity) {
-      cSliderActor.run([
-        cSliderActor.state().removeConditionByGroup(cSensorConditionGroup)
+      cSliderActor.run((cmds) => [
+        cmds.state().removeConditionByGroup(cSensorConditionGroup)
       ]);
       if (callback != null) {
-        cSliderActor.run([
-          cSliderActor.condition(cSensorConditionGroup, true).onMovement(sensitivity).then([
+        cSliderActor.run((cmds) => [
+          cmds.condition(cSensorConditionGroup, true).onMovement(sensitivity).then([
             (pointInfo) => {
-              let percent = cDirection == HORIZONTAL ? pointInfo.xPos / vHorizontalGap : pointInfo.yPos / vVerticalGap;
+              let percent = positionToPercent(pointInfo);
+              vCurrentPercent = percent;
               callback(percent, pointInfo.xPos, pointInfo.yPos);
             }
           ])
         ]);
       }
     }
+    function positionToPercent(pointInfo) {
+      let percent = 0;
+      if (cDirection == HORIZONTAL) {
+        percent = vHorizontalGap != 0 ? pointInfo.xPos / vHorizontalGap : 0;
+      } else {
+        percent = vVerticalGap != 0 ? pointInfo.yPos / vVerticalGap : 0;
+      }
+      return percent;
+    }
     function updatePercent(percent) {
       let xPos = 0;
       let yPos = 0;
@@ -20322,7 +20859,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       } else {
         yPos = Math.floor(percent * vVerticalGap);
       }
-      cSliderActor.run([cSliderActor.action().teleportTo(xPos, yPos)]);
+      cSliderActor.run((cmds) => [cmds.action().teleportTo(xPos, yPos)]);
+      vCurrentPercent = percent;
+    }
+    function currentPercent() {
+      return vCurrentPercent;
     }
     onMounted(() => {
       vMounted = true;
@@ -20338,15 +20879,31 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         let fixedBoxView = rFixedViewRef.value.jsvGetProxyView();
         cFixedBoxActor.bindForgeView(fixedBoxView, true);
         fixedBoxView.DragEnables?.(ForgeConst.DragFlags.TOUCH_RECV_FIRST_START);
-        cFixedBoxActor.run([
-          cFixedBoxActor.state().setTouchAttractChild(cSliderActor)
+        cFixedBoxActor.run((cmds) => [
+          cmds.state().setTouchAttractChild(cSliderActor)
         ]);
       }
+      if (cLinkName != null) {
+        vLinkProvide = new SyncLinkSource(cLinkName, newNexus());
+        rebuildSyncMaster();
+        cSyncLinkManager.SourceOnMounted(vLinkProvide);
+      }
       rebuildSliderSet();
     });
+    onUnmounted(() => {
+      if (vLinkProvide != null) {
+        cSyncLinkManager.SourceOnUnmounted(cLinkName);
+        vLinkProvide = null;
+      }
+      if (vWaitMasterLinkSourceReady != null) {
+        cSyncLinkManager.UnListen(vWaitMasterLinkSourceReady);
+        vWaitMasterLinkSourceReady = null;
+      }
+    });
     expose({
       setSensor,
-      updatePercent
+      updatePercent,
+      currentPercent
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
@@ -20399,16 +20956,23 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
  *                      width {number},  当VERTICAL滑动模式时为选填，HORIZONTAL为必填
  *                      height {number}, 当HORIZONTAL滑动模式时为选填，VERTICAL为必填
  *                  }
- *      mode {ScrollStyle.DrawerMode/ScrollStyle.PinMode} 
+ *      mode {ScrollBoxStyle.DrawerMode/ScrollBoxStyle.PinMode} 
  *                 选填, 非响应式, 默认为 PinMode
  *                 运动模式选择, DrawerMode: 抽屉模式,内容尺寸大于固定底座
  *                 PinMode: 滚动杆模式,内容尺寸小于固定底座
  *      direction  {import VERTICAL/HORIZONTAL} (必填,非响应式) 滑动方向
  *      enableFling {boolean}  (选填，非响应式) 是否需要支持fling，默认为false
  *      initPercent  {Number}  (选填,非响应式)  滑块起始位置，等同于mount后进行updatePercent()
+ *      linkName {String} (选填，非响应式)  本滑动模块的名字，用于全局进行syncWith处理的关联名
+ *                                        注意: 如果不需要共享进度，不要声明，可以节省一些构造性能
+ *      syncWith {String} (选填，响应式)  进度联动组件来源，内容为联动来源的linkName 
+ *      syncType {ScrollBoxStyle.SyncForward|ScrollType.SyncReverse}
+ *                        (选填，响应式)  决定syncWith的联动模式，当syncWith设置后才能生效
+ *                                      SyncForward(默认值): 同进同退, mySelf = sourcePercent
+ *                                      SyncReverse: 进退反向, mySelf = (1 - sourcePercent)
  *
  *  template说明:
- *      FfixedBox={boxWidth, boxHeight}:  以本组件底座左上角0,0对齐的一个slot
+ *      FixedBox={boxWidth, boxHeight}:  以本组件底座左上角0,0对齐的一个slot
  *      SliderBox={boxWidth, boxHeight}:  以滑块div的左上角0,0对齐的一个slot，
  * 
  *  expose函数说明:
@@ -20417,28 +20981,645 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
  *      updatePercent(percent:number)   设置滚动调位置(百分比),百分比 = (SliderTop - 底座Top) / Slider可滑动总区域
  *                                      Slider可滑动总区域 = 底座Height - SliderHeight
  *                                      当为横向运动时，Top被Left代换，Height被Width代换
- *      syncWith(otherScrollBox: JsvScrollBox, syncMode: ScrollStyle)  
- *                              本滚动条的进度跟随给定的滚动条的进度移动
- *                              otherScrollBox: 控制者
- *                              syncMode: 同步模式，有 SyncParallel, SyncRevert   
- *      addSubSync(view: div|JsvNinePatch, syncMode: ScrollStyle)
- *                              将外部的div或者JsvNinePatch加入到同步尺寸同步改动器中。
- *                              view只能是div或者JsvNinePatch, 并且不能有style.animation的控制
- *                              当SyncParallel模式时, 这个div的初始位置要和本组件的0,0对齐
- *                              当SyncRevert模式时, 这个div的初始位置要和本组件尾部位置(0, height/width)对齐
  *
+-->
+
+
+
+
+
+
+ */
+
+//
+// utils/JsViewVueWidget/JsvScrollBox/JsvScrollFollow.vue?vue&type=script&setup=true&lang.ts;
+//
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "JsvScrollFollow",
+  props: {
+    proxyType: null,
+    proxyProps: null,
+    varLeft: { default: 0 },
+    varTop: { default: 0 },
+    varWidth: { default: 0 },
+    varHeight: { default: 0 },
+    syncWith: null,
+    syncType: { default: ScrollBoxStyle.SyncForward }
+  },
+  setup(__props, { expose }) {
+    const rProps = __props;
+    const cProxyType = rProps.proxyType;
+    const cVarMode = ScrollBoxStyle.Size;
+    const cSyncLinkManager = GetSyncLinkManager();
+    const cSliderActor = new ActorControl();
+    const cSensorConditionGroup = 1;
+    const cLinkConditionGroup = 2;
+    let vSyncWithNameCache = null;
+    let vSyncTypeCache = ScrollBoxStyle.SyncForward;
+    let vWaitMasterLinkSourceReady = null;
+    let vSyncLinkNexusNode = null;
+    let vTargetViewReady = false;
+    let vCurrentPercent = 0;
+    let vMainDivTop = {
+      start: NaN,
+      end: NaN
+    };
+    let vMainDivLeft = {
+      start: NaN,
+      end: NaN
+    };
+    let vMainDivWidth = {
+      start: NaN,
+      end: NaN
+    };
+    let vMainDivHeight = {
+      start: NaN,
+      end: NaN
+    };
+    let rSliderViewRef = shallowRef(null);
+    let rSizeClipOutProps = shallowRef(null);
+    let rSizeClipInnerProps = shallowRef(null);
+    let rNinePatchMergedProps = shallowRef(null);
+    let rSizeDivProps = shallowRef(null);
+    function resetPosSizeInfo(source, varRef, allowVar) {
+      let tmpVal = { start: 0, end: 0 };
+      if (typeof source == "number") {
+        tmpVal.start = source;
+        tmpVal.end = source;
+      } else {
+        tmpVal.start = source.start ? source.start : 0;
+        tmpVal.end = source.end ? source.end : 0;
+      }
+      if (tmpVal.start != varRef.start || tmpVal.end != varRef.start) {
+        varRef.start = tmpVal.start;
+        varRef.end = tmpVal.end;
+        if (varRef.start != varRef.end && allowVar) {
+          if (!allowVar) {
+            return false;
+          }
+        }
+        return true;
+      } else {
+        return false;
+      }
+    }
+    watchEffect(() => {
+      let reactChangedMerged = false;
+      {
+        let changed = false;
+        changed = resetPosSizeInfo(
+          rProps.varTop,
+          vMainDivTop,
+          cVarMode == ScrollBoxStyle.Position
+        );
+        reactChangedMerged ||= changed;
+        changed = resetPosSizeInfo(
+          rProps.varLeft,
+          vMainDivLeft,
+          cVarMode == ScrollBoxStyle.Position
+        );
+        reactChangedMerged ||= changed;
+        changed = resetPosSizeInfo(
+          rProps.varWidth,
+          vMainDivWidth,
+          cVarMode == ScrollBoxStyle.Size
+        );
+        reactChangedMerged ||= changed;
+        changed = resetPosSizeInfo(
+          rProps.varHeight,
+          vMainDivHeight,
+          cVarMode == ScrollBoxStyle.Size
+        );
+        reactChangedMerged ||= changed;
+      }
+      if (reactChangedMerged) {
+        rebuildAckSync();
+      }
+      if (vSyncWithNameCache != rProps.syncWith || vSyncTypeCache != rProps.syncType) {
+        vSyncWithNameCache = rProps.syncWith;
+        vSyncTypeCache = rProps.syncType;
+        changeSyncLink(vSyncWithNameCache);
+      }
+      {
+        let divStyle = {
+          // 对应模式的动态变量设置为0(width/height设置为100为了进行测试)，否则使用其start作为固定值
+          top: cVarMode == ScrollBoxStyle.Position ? 0 : vMainDivTop.start,
+          left: cVarMode == ScrollBoxStyle.Position ? 0 : vMainDivLeft.start,
+          width: cVarMode == ScrollBoxStyle.Size ? 0 : vMainDivWidth.start,
+          height: cVarMode == ScrollBoxStyle.Size ? 0 : vMainDivHeight.start
+        };
+        switch (cProxyType) {
+          case ScrollBoxStyle.SizeClip:
+            {
+              if (rProps.proxyProps) {
+                console.warn("clipDiv not support proxyProps");
+              }
+              rSizeClipOutProps.value = {
+                style: {
+                  top: divStyle.top,
+                  left: divStyle.left
+                }
+              };
+              rSizeClipInnerProps.value = {
+                style: {
+                  width: divStyle.width,
+                  height: divStyle.height,
+                  overflow: "hidden"
+                },
+                "data-jsv-vw-mmask-drift": "true"
+                // 将clip视窗做成drift模式
+              };
+            }
+            break;
+          case ScrollBoxStyle.JsvNinePatch:
+            {
+              rNinePatchMergedProps.value = {
+                ...rProps.proxyProps,
+                style: {
+                  ...divStyle
+                }
+              };
+            }
+            break;
+          case ScrollBoxStyle.SizeDiv:
+            {
+              let proxyStyle = null;
+              if (rProps.proxyProps?.style) {
+                proxyStyle = rProps.proxyProps?.style;
+              }
+              rProps.proxyProps;
+              rSizeDivProps.value = {
+                style: {
+                  ...proxyStyle,
+                  ...divStyle
+                }
+              };
+            }
+            break;
+          default:
+            console.error("unknown proxy type=" + cProxyType?.toString());
+            return;
+        }
+      }
+    });
+    function changeSyncLink(newSyncSourceName) {
+      vSyncLinkNexusNode = null;
+      rebuildAckSync();
+      if (newSyncSourceName != null) {
+        vWaitMasterLinkSourceReady = cSyncLinkManager.WaitSourceMounted(newSyncSourceName).then(() => {
+          vSyncLinkNexusNode = cSyncLinkManager.GetSourceNexusNode(newSyncSourceName);
+          rebuildAckSync();
+        });
+      }
+    }
+    function rebuildAckSync() {
+      if (!vTargetViewReady)
+        return;
+      cSliderActor.run((cmds) => [
+        cmds.state().removeConditionByGroup(cLinkConditionGroup)
+      ]);
+      if (vSyncLinkNexusNode != null) {
+        let vertSet, horiSet;
+        if (cVarMode == ScrollBoxStyle.Position) {
+          vertSet = vMainDivTop;
+          horiSet = vMainDivLeft;
+        } else {
+          vertSet = vMainDivHeight;
+          horiSet = vMainDivWidth;
+        }
+        cSliderActor.run((cmds) => [
+          cmds.condition(cLinkConditionGroup, true).movementSync(vSyncLinkNexusNode).then([
+            cmds.action().ackMovementSync(
+              horiSet.start,
+              horiSet.end,
+              vertSet.start,
+              vertSet.end,
+              3,
+              vSyncTypeCache == ScrollBoxStyle.SyncForward ? 1 : 2
+            )
+          ]),
+          cmds.condition(cLinkConditionGroup, true).onNexusEvent(
+            vSyncLinkNexusNode,
+            ScrollInnerStyle.UpdatePercentNexusCode
+          ).then([
+            (pointInfo) => {
+              vCurrentPercent = positionToPercent(pointInfo);
+            }
+          ])
+        ]);
+      }
+    }
+    function setSensor(callback, sensitivity) {
+      cSliderActor.run((cmds) => [
+        cmds.state().removeConditionByGroup(cSensorConditionGroup)
+      ]);
+      if (callback != null) {
+        cSliderActor.run((cmds) => [
+          cmds.condition(cSensorConditionGroup, true).onMovement(sensitivity).then([
+            (pointInfo) => {
+              let percent = positionToPercent(pointInfo);
+              vCurrentPercent = percent;
+              callback(percent, pointInfo.xPos, pointInfo.yPos);
+            }
+          ])
+        ]);
+      }
+    }
+    function positionToPercent(pointInfo) {
+      let percent = 0;
+      if (cVarMode == ScrollBoxStyle.Position) {
+        if (vMainDivTop.start != vMainDivTop.end) {
+          percent = pointInfo.yPos / (vMainDivTop.end - vMainDivTop.start);
+        } else if (vMainDivLeft.start != vMainDivLeft.end) {
+          percent = pointInfo.xPos / (vMainDivLeft.end - vMainDivLeft.start);
+        }
+      } else {
+        if (vMainDivHeight.start != vMainDivHeight.end) {
+          percent = pointInfo.yPos / (vMainDivHeight.end - vMainDivHeight.start);
+        } else if (vMainDivWidth.start != vMainDivWidth.end) {
+          percent = pointInfo.xPos / (vMainDivWidth.end - vMainDivWidth.start);
+        }
+      }
+      return percent;
+    }
+    function onNinePatchRef(divRef) {
+      rSliderViewRef.value = divRef;
+      initViewControl();
+    }
+    function initViewControl() {
+      if (rSliderViewRef.value == null) {
+        return;
+      }
+      if (vTargetViewReady) {
+        return;
+      }
+      vTargetViewReady = true;
+      let sliderView = rSliderViewRef.value.jsvGetProxyView(
+        cProxyType != ScrollBoxStyle.SizeDiv
+      );
+      if (cVarMode == ScrollBoxStyle.Size) {
+        cSliderActor.asSizeMode();
+      }
+      cSliderActor.bindForgeView(sliderView, true);
+      rebuildAckSync();
+    }
+    function currentPercent() {
+      return vCurrentPercent;
+    }
+    onMounted(() => {
+      initViewControl();
+    });
+    onUnmounted(() => {
+      if (vWaitMasterLinkSourceReady != null) {
+        cSyncLinkManager.UnListen(vWaitMasterLinkSourceReady);
+        vWaitMasterLinkSourceReady = null;
+      }
+    });
+    expose({
+      setSensor,
+      currentPercent
+    });
+    return (_ctx, _cache) => {
+      return unref(cProxyType) == unref(ScrollBoxStyle).SizeClip ? (openBlock(), createElementBlock("div", normalizeProps(mergeProps({ key: 0 }, unref(rSizeClipOutProps))), [
+        createElementVNode("div", mergeProps({
+          ref_key: "rSliderViewRef",
+          ref: rSliderViewRef
+        }, unref(rSizeClipInnerProps)), [
+          createElementVNode("div", { "data-jsv-vw-mask-dock": "true" }, [
+            renderSlot(_ctx.$slots, "default")
+          ])
+        ], 16)
+      ], 16)) : unref(cProxyType) == unref(ScrollBoxStyle).SizeDiv ? (openBlock(), createElementBlock("div", mergeProps({
+        key: 1,
+        ref_key: "rSliderViewRef",
+        ref: rSliderViewRef
+      }, unref(rSizeDivProps)), null, 16)) : unref(cProxyType) == unref(ScrollBoxStyle).JsvNinePatch ? (openBlock(), createBlock(_sfc_main$l, mergeProps({
+        key: 2,
+        onDivRef: onNinePatchRef
+      }, unref(rNinePatchMergedProps)), null, 16)) : createCommentVNode("", true);
+    };
+  }
+});
+
+//
+// utils/JsViewVueWidget/JsvScrollBox/JsvScrollFollow.vue;
+//
+/* <!--
+ * 【模块 export 内容】
+ * JsvScrollFollow：Vue高阶组件，响应并同步JsvScrollBox的移动的div/ninePatch特殊类型的进度展示组件
+ *  props说明:
+ *      proxyType {ScorllBoxStyle.*} (必填,非响应式!!) 下面的几个类型中选一种：
+                                      SizeDiv: 一个普通的div, 进度信息影响div的width/height, proxyProps里面主要设置backgroundColor
+                                      SizeClip: 对子内容进行剪切的div, 此类型不支持proxyProps的设置, 只有varWidth和varHeight能为变量
+                                        (本组件会额外赋予overflow:hidden, 以及剪切区域自由移动的data-jsv-vw-mask-separate)
+                                      JsvNinePatch: JsvNinePatch组件类型
+ *      proxyProps {Object}  (选填,响应式) 传给代理类型的props，例如JsvNinePatch时，JsvNinePatch的props设置
+ *      varLeft/varTop/varWidth/varHeight(number|Object): 
+                                        (选填, 但至少有一个值, 响应式) 当为number时为固定值，
+                                        TODO: 响应式改动后立即同步进度处理还没完成
+                                        为Object时必须是{start:number, end:number}格式
+                                        其中start对应 JsvScrollBox 进度起始值时的位置，end对应 JsvScrollBox 进度终点值的位置
+                                        特别注意: left/Top, width/height分别是两种变换，不能这两组不能同时都为变值
+ *      syncWith {String} (必填，响应式)  进度联动组件来源，内容为联动来源的linkName 
+ *      syncType {ScrollBoxStyle.*}
+ *                        (选填，响应式)  决定syncWith的联动模式，当syncWith设置后才能生效, 默认为 SyncForward
+ *                                      SyncForward(默认值): 同进同退, mySelf = sourcePercent
+ *                                      SyncReverse: 进退反向, mySelf = (1 - sourcePercent)
+ *
+ *  template说明:
+        当proxyType为clipDiv可以放置
+
+
+
+
+ */
+
+//
+// utils/JsViewVueWidget/JsvScrollBox/index.ts;
+//
+
+//
+// utils/JsViewVueWidget/JsvFragShaderView/JsvFragShaderView.vue;
+//
+/* <!-- 
+[模块 export 内容]
+  JsvFragShaderView：自定义Fragment shader的组件
+      props说明:
+          style         {Object}    (必填)left, top, width, height
+          shaderStr     {String}    (必填)shader的函数体
+          duration      {int}       动画时长
+          autoplay      {boolean}   自动播放
+          uniforms      {Array}     uniform参数, [{ name: string, value: number }]
+          textures      {Array}     texture参数, [{ name: string, resource: string }]
+      methods:
+          startAnim
+              @description 开始动画
+              @params {int} duration: 动画时长, 默认为props.duration
+          stopAnim
+              @description 停止动画
+      shader函数体说明:
+        参考网站: https://www.shadertoy.com
+        主函数: 
+          void mainImage( out vec4 fragColor, in vec2 fragCoord )
+            @params {vec4} fragColor: 输出的片元颜色
+            @params {vec2} fragCoord: 片元坐标, 左下角为原点, 往右为x正, 往上为y正
+      注意事项:
+        * 盒子端使用OpenGL ES 2.0版本, 而网站 https://www.shadertoy.com 上使用WebGL, glsl支持的函数和操作符有区别. 
+        * 由于坐标系的差异, texture()采样函数需要替换为jsvTexture2D()
+        * 盒子端的精度有限, 可能会出现精度导致的计算错误
+
+ -->
+
+
+ */
+const _sfc_main$2 = {
+  __name: "JsvFragShaderView",
+  props: {
+    style: {
+      type: Object,
+      required: true
+    },
+    duration: {
+      type: Number,
+      default: -1
+    },
+    autoplay: {
+      type: Boolean,
+      default: false
+    },
+    shaderStr: {
+      type: String,
+      required: true
+    },
+    // [{ name: string, value: number }]
+    uniforms: {
+      type: Array
+    },
+    // [{ name: string, type: number, resource: string }]
+    textures: {
+      type: Array
+    }
+  },
+  setup(__props, { expose }) {
+    const props = __props;
+    let uniformList = [];
+    if (props.uniforms) {
+      for (let item of props.uniforms) {
+        uniformList.push({
+          name: item.name,
+          type: 1,
+          value: item.value
+        });
+      }
+    }
+    let textureList = [];
+    if (props.textures) {
+      const texture_manager = handles.TextureManager;
+      for (let item of props.textures) {
+        if (typeof item.resource == "string") {
+          let image_url = item.resource;
+          if (item.resource && item.resource.trim().indexOf("url(") === 0) {
+            image_url = new window.JsView.Dom.UrlRef(image_url).href;
+          }
+          const texture = texture_manager.GetImage2(
+            image_url,
+            false,
+            null,
+            "RGB_8888",
+            null
+          );
+          textureList.push({
+            name: item.name,
+            id: texture.TexId
+          });
+        }
+      }
+    }
+    const fragShaderView = new Forge$2.FragShaderView();
+    fragShaderView.SetShaderInfo(
+      props.shaderStr,
+      uniformList,
+      textureList,
+      (state, detail) => {
+        console.log("haha", state, detail);
+      }
+    );
+    let viewId = Forge$2.sViewStore.add(new Forge$2.ViewInfo(fragShaderView, ""));
+    const { left, top, width, height } = props.style;
+    const startAnim = (d) => {
+      let duration = typeof d == "number" ? d : props.duration;
+      if (duration > 0) {
+        let shaderAnimation = new Forge$2.ShaderAnimation(duration, null);
+        fragShaderView.StartAnimation(shaderAnimation);
+      }
+    };
+    const stopAnim = () => {
+      fragShaderView?.StopAnimation();
+    };
+    onMounted(() => {
+      if (props.autoplay) {
+        startAnim(props.duration);
+      }
+    });
+    onBeforeUnmount(() => {
+      if (viewId != -1) {
+        Forge$2.sViewStore.remove(viewId);
+        viewId = -1;
+      }
+    });
+    expose({
+      startAnim,
+      stopAnim
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        style: normalizeStyle({ left: unref(left), top: unref(top), width: unref(width), height: unref(height) }),
+        "data-jsv-vw-innerview": unref(viewId)
+      }, null, 12, ["data-jsv-vw-innerview"]);
+    };
+  }
+};
+
+//
+// utils/JsViewVueWidget/JsvFragShaderView/index.js;
+//
+// 考虑到.vue文件除了export default的component外，还有可能export其他对象,因此使用import * as
+let _JsvFragShaderView;
+if (window.JsView) {
+  _JsvFragShaderView = _sfc_main$2;
+} else {
+  const BrowserJsvFragShaderView = await import('./browser/BrowserJsvFragShaderView.vue.mjs');
+  _JsvFragShaderView = BrowserJsvFragShaderView.default;
+}
+const _JsvFragShaderView$1 = _JsvFragShaderView;
+
+//
+// utils/JsViewVueWidget/JsvClipDiv/JsvClipDiv.vue?vue&type=script&setup=true&lang.ts;
+//
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "JsvClipDiv",
+  props: {
+    style: null
+  },
+  setup(__props) {
+    const rProps = __props;
+    let rMergedDivProps = shallowRef({});
+    watchEffect(() => {
+      let divStyle = {
+        ...rProps.style,
+        overflow: "hidden"
+      };
+      rMergedDivProps.value = {
+        style: divStyle
+      };
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(unref(rMergedDivProps))), [
+        renderSlot(_ctx.$slots, "default")
+      ], 16);
+    };
+  }
+});
+
+//
+// utils/JsViewVueWidget/JsvClipDiv/JsvClipDiv.vue;
+//
+/* <!--
+ * 【模块 export 内容】
+ * JsvClipDiv: Vue高阶组件，overhidden:true的div，附带有其他clip设定能力
+ *  props说明:
+        style:  {Object}    (必选, 响应式) 同div的style, 提供top, left, width, height, transition, transform信息，
+                            但目前不支持borderRaduis
+ *
+ *  expose函数说明:
  *
 -->
 
 
 
 
+ */
+
+//
+// utils/JsViewVueWidget/JsvClipDiv/index.ts;
+//
+
+//
+// utils/JsViewVueWidget/JsvDriftScope/JsvDriftScope.vue?vue&type=script&setup=true&lang.ts;
+//
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "JsvDriftScope",
+  props: {
+    top: { default: 0 },
+    left: { default: 0 },
+    frameStyle: null,
+    scopeStyle: null
+  },
+  setup(__props) {
+    const rProps = __props;
+    const rMergedFrameStyle = shallowRef({});
+    watchEffect(() => {
+      rMergedFrameStyle.value = {
+        ...rProps.frameStyle
+      };
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        style: normalizeStyle({
+          top: rProps.top,
+          left: rProps.left
+        })
+      }, [
+        createElementVNode("div", {
+          style: normalizeStyle(unref(rMergedFrameStyle)),
+          "data-jsv-vw-mask-drift": "true"
+        }, [
+          createVNode(_sfc_main$1, {
+            style: normalizeStyle(rProps.scopeStyle)
+          }, {
+            default: withCtx(() => [
+              createElementVNode("div", { "data-jsv-vw-mask-dock": "true" }, [
+                renderSlot(_ctx.$slots, "Scene")
+              ])
+            ]),
+            _: 3
+          }, 8, ["style"]),
+          renderSlot(_ctx.$slots, "Frame")
+        ], 4)
+      ], 4);
+    };
+  }
+});
+
+//
+// utils/JsViewVueWidget/JsvDriftScope/JsvDriftScope.vue;
+//
+/* <!--
+ * 【模块 export 内容】
+ * JsvDriftScope: Vue高阶组件，放大镜或者望远镜效果, 分为 frame 区域和 scene 区域，frame是游离的ClipView, scene是被Clip部分
+ *  props说明:
+        top {Number}  (可选, 响应式)组件的top, 不填写时默认值为0
+        left {Number}  (可选, 响应式)组件的left, 不填写时默认值为0
+        frameStyle: {Object}  (可选, 响应式) 透视(裁剪)区域外框的style, 此层次无色透明，但是决定Frame层的变化, 支持以下属性
+                            {top, left, width, height, transition, animation, transform, transformOrigin}
+        scopeStyle: {Object}  (必选, 响应式) 透视(裁剪)区域的div的尺寸style, 会叠加frameStyle已经做的形变, 支持以下属性
+                            {width, height, transition, animation, transform, transformOrigin}
+                            做动画时，frameStyle负责位置变化，scope则主要负责尺寸变化
+ *
+ *  template说明:
+        Frame   透视窗(裁剪层)的外框的装饰层
+        Scene   被透视的内容
+ *  expose函数说明:
+ *
+-->
+
+
 
 
  */
 
 //
-// utils/JsViewVueWidget/JsvScrollBox/index.js;
+// utils/JsViewVueWidget/JsvDriftScope/index.ts;
 //
 
 //
@@ -20449,4 +21630,4 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 // utils/index.js;
 //
 
-export { BaseDispatcher, DECORATE_BORDER_RADIUS, DECORATE_NINEPATCH_ALPHA_MIX, DebugObjectRefer, DebugTools, DebugWrap81ErrorStack, DebugWrap81WarnStack, DefaultKeyCodeMap, EdgeDirection, FixPositionSlide, FocusMoveType, ForgeConst, FreeMoveDef, FreeMoveFunc, HORIZONTAL, InputType, instance as JSBridge, JsvAccount, _sfc_main$A as JsvActorMove, JsvActorMoveControl, _JsvApic$1 as JsvApic, _JsvApic2$1 as JsvApic2, _sfc_main$D as JsvAudio, _sfc_main$4 as JsvConnectLine, _sfc_main$2 as JsvEnableRenderBreak, _sfc_main$y as JsvEnvBlocker, JsvFederationTools, _sfc_main$j as JsvFilterView, _sfc_main$x as JsvFlexDiv, _sfc_main$F as JsvFocusBlock, _sfc_main$z as JsvFreeMoveActor, _sfc_main$z as JsvFreeMoveDiv, JsvGrid, _sfc_main$g as JsvHole, JsvInput, _sfc_main$B as JsvLatex, JsvLine, _sfc_main$f as JsvMarquee, JsvMaskClipDiv, _sfc_main$1 as JsvMindMap, _sfc_main$g as JsvNativeSharedDiv, _sfc_main$h as JsvNinePatch, JsvPerformance, _sfc_main$5 as JsvPieChart, _sfc_main$d as JsvPosterDiv, _sfc_main$c as JsvPosterImage, exportObj as JsvPreDownloader, JsvPreload, _sfc_main$3 as JsvProgressBar, _JsvQrcode$1 as JsvQrcode, _sfc_main$9 as JsvRadarChart, _sfc_main$8 as JsvRipple, JsvRippleShape, JsvScaleTextBox, _sfc_main as JsvScrollBox, _sfc_main$6 as JsvSector, JsvSoundPool, _JsvSpray$1 as JsvSpray, JsvSpriteAnim, _sfc_main$o as JsvSpriteLoader, JsvSpriteAnim as JsvSpriteStatic, JsvSpriteTools, JsvStyleClass, JsvStyleSheetsDeclarer, JsvSwiper, _sfc_main$l as JsvSwiper3D, _sfc_main$a as JsvTextBox, JsvTextStyleClass, _JsvTextureAnim$1 as JsvTextureAnim, sJsvTextureConst as JsvTextureConst, sTextureStoreApi as JsvTextureStoreApi, _sfc_main$g as JsvTransparentDiv, JsvVisibleSensor, LineType, _sfc_main$G as ListWidget, LoopType, METRO_WIDGET, METRO_WIDGET as METRO_WIDGET_CONST, _sfc_main$H as MetroWidget, PageType, RENDER_ITEM_BREAK_KEY, Dispatcher as SWidgetDispatcher, ScrollStyle, SeamlessSlide, _sfc_main$H as SimpleWidget, SlideSetting, SlideStyle, SpriteController, TexAlignAnchor, TextTools, TextureInstantType, VERTICAL, WholePageSlide, buildDownloadInfo, buildPreloadInfo, combinedStyles, createImpactAutoFroze, createImpactCallback, createImpactTracer, disableNativeViewListener, enableNativeViewListener, getCssStyleGroup, getCurFrameCount, getKeyFramesGroup, getMeasureObj, getPositionRelativeToView, getTextWidth, globalLoadJsvAudioPlugin, globalLoadJsvLatexPlugin, bridge as jJsvRuntimeBridge, jsvCreateFocusManager, jsvCreateHashHistory, numberCheckSet, toHtmlBorderSet, toNinePatchForgeViewSet, updateImpactAutoFroze, urlCheckSet, useFocusHub };
+export { BaseDispatcher, DECORATE_BORDER_RADIUS, DECORATE_NINEPATCH_ALPHA_MIX, DebugObjectRefer, DebugTools, DebugWrap81ErrorStack, DebugWrap81WarnStack, DefaultKeyCodeMap, EdgeDirection, FixPositionSlide, FocusMoveType, ForgeConst, FreeMoveDef, FreeMoveFunc, HORIZONTAL, InputType, instance as JSBridge, JsvAccount, _sfc_main$E as JsvActorMove, JsvActorMoveControl, _JsvApic$1 as JsvApic, _JsvApic2$1 as JsvApic2, _sfc_main$H as JsvAudio, _sfc_main$1 as JsvClipDiv, _sfc_main$8 as JsvConnectLine, _sfc_main as JsvDriftScope, _sfc_main$6 as JsvEnableRenderBreak, _sfc_main$C as JsvEnvBlocker, JsvFederationTools, _sfc_main$n as JsvFilterView, _sfc_main$B as JsvFlexDiv, _sfc_main$J as JsvFocusBlock, _JsvFragShaderView$1 as JsvFragShaderView, _sfc_main$D as JsvFreeMoveActor, _sfc_main$D as JsvFreeMoveDiv, JsvGrid, _sfc_main$k as JsvHole, JsvInput, _sfc_main$F as JsvLatex, JsvLine, _sfc_main$j as JsvMarquee, JsvMaskClipDiv, _sfc_main$5 as JsvMindMap, _sfc_main$k as JsvNativeSharedDiv, _sfc_main$l as JsvNinePatch, JsvPerformance, _sfc_main$9 as JsvPieChart, _sfc_main$h as JsvPosterDiv, _sfc_main$g as JsvPosterImage, exportObj as JsvPreDownloader, JsvPreload, _sfc_main$7 as JsvProgressBar, _JsvQrcode$1 as JsvQrcode, _sfc_main$d as JsvRadarChart, _sfc_main$c as JsvRipple, JsvRippleShape, JsvScaleTextBox, _sfc_main$4 as JsvScrollBox, _sfc_main$3 as JsvScrollFollow, _sfc_main$a as JsvSector, JsvSoundPool, _JsvSpray$1 as JsvSpray, JsvSpriteAnim, _sfc_main$s as JsvSpriteLoader, JsvSpriteAnim as JsvSpriteStatic, JsvSpriteTools, JsvStyleClass, JsvStyleSheetsDeclarer, JsvSwiper, _sfc_main$p as JsvSwiper3D, _sfc_main$e as JsvTextBox, JsvTextStyleClass, _JsvTextureAnim$1 as JsvTextureAnim, sJsvTextureConst as JsvTextureConst, sTextureStoreApi as JsvTextureStoreApi, _sfc_main$k as JsvTransparentDiv, JsvVisibleSensor, LineType, _sfc_main$K as ListWidget, LoopType, METRO_WIDGET, METRO_WIDGET as METRO_WIDGET_CONST, _sfc_main$L as MetroWidget, PageType, RENDER_ITEM_BREAK_KEY, Dispatcher as SWidgetDispatcher, ScrollBoxStyle, SeamlessSlide, _sfc_main$L as SimpleWidget, SlideSetting, SlideStyle, SpriteController, TexAlignAnchor, TextTools, TextureInstantType, VERTICAL, WholePageSlide, buildDownloadInfo, buildPreloadInfo, combinedStyles, createImpactAutoFroze, createImpactCallback, createImpactTracer, disableNativeViewListener, enableNativeViewListener, getCssStyleGroup, getCurFrameCount, getKeyFramesGroup, getMeasureObj, getPositionRelativeToView, getTextWidth, globalLoadJsvAudioPlugin, globalLoadJsvLatexPlugin, bridge as jJsvRuntimeBridge, jsvCreateFocusManager, jsvCreateHashHistory, numberCheckSet, toHtmlBorderSet, toNinePatchForgeViewSet, updateImpactAutoFroze, urlCheckSet, useFocusHub };