@shijiu/jsview-vue 2.2.128 → 2.2.373

package/utils/JsViewVueWidget/JsvScrollBox/JsvScrollBox.vue

@@ -1,4 +1,6 @@
 <!--
+ * @file
+ *
  * 【模块 export 内容】
  * JsvScrollBox：Vue高阶组件，支持触控拖动的滚动型组件。
  *  props说明:
@@ -8,16 +10,23 @@
  *                      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函数说明:
@@ -26,16 +35,6 @@
  *      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)对齐
- *
  *
 -->
 
@@ -80,13 +79,24 @@ import {
   shallowRef,
   watchEffect,
   onMounted,
+  onUnmounted,
   defineExpose,
   defineProps,
 } from "vue";
 import ActControl from "../../JsViewVueWidget/JsvFreeMoveActor/ActorControl";
 import { VERTICAL, HORIZONTAL } from "../../JsViewVueTools/ConstSymbol";
-import { ScrollStyle } from "./ScrollSymbol";
+import { ScrollBoxStyle } from "./ScrollSymbol";
+import { ScrollInnerStyle } from "./ScrollInnerSymbol";
 import { ForgeConst } from "../../JsViewVueTools/ForgeConstDefine";
+import {
+  GetSyncLinkManager,
+  SyncLinkSource,
+} from "../../JsViewVueWidget/JsvFreeMoveActor/SyncLinkManager";
+import { newNexus, NexusNode } from "../JsvFreeMoveActor/NexusNode";
+import {
+  FeatureNames,
+  JsvUseFeature,
+} from "../../JsViewVueTools/FeatureActive";
 
 let rProps = defineProps({
   // 底座的尺寸
@@ -108,11 +118,11 @@ let rProps = defineProps({
   },
 
   // 滑块模式
-  // ScrollStyle.PinMode: 滑块小于底座
-  // ScrollStyle.DrawerMode: 滑块大于底座
+  // ScrollBoxStyle.PinMode: 滑块小于底座
+  // ScrollBoxStyle.DrawerMode: 滑块大于底座
   mode: {
     type: Symbol,
-    default: ScrollStyle.PinMode,
+    default: ScrollBoxStyle.PinMode,
   },
 
   // 初始进度条的进度
@@ -125,25 +135,53 @@ let rProps = defineProps({
     type: Boolean,
     default: false,
   },
+
+  linkName: {
+    type: String,
+    default: null,
+  },
+
+  syncWith: {
+    type: String,
+    default: null,
+  },
+
+  syncType: {
+    type: Symbol,
+    default: ScrollBoxStyle.SyncForward,
+  },
 });
 
+// 激活引擎中的功能支持
+JsvUseFeature("JsvScrollBox", FeatureNames.TouchReceiver);
+
 /** 本地常量 **/
 const cDirection = rProps.direction;
 const cMode = rProps.mode;
 const cInitPercent = rProps.initPercent;
 const cEnableFling = rProps.enableFling;
 const cSliderActor = new ActControl();
-const cFixedBoxActor = cMode == ScrollStyle.PinMode ? new ActControl() : null;
+const cFixedBoxActor =
+  cMode == ScrollBoxStyle.PinMode ? new ActControl() : null;
+const cLinkName = rProps.linkName;
+const cSyncLinkManager = GetSyncLinkManager();
 
 // Actor condition group id(1~9可任意用)
 const cWallConditionGroup = 1;
 const cSensorConditionGroup = 2;
+const cLinkConditionGroup = 3;
+const cLinkMasterGroup = 4;
 
 /** 本地非响应式变量 **/
-let vMounted = false;
-let vHorizontalGap = 0;
-let vVerticalGap = 0;
-let vSubSyncList = [];
+let vMounted: boolean = false;
+let vHorizontalGap: number = 0;
+let vVerticalGap: number = 0;
+let vLinkProvide: SyncLinkSource | null = null; // 是否对外提供同步进度影响
+let vWaitMasterLinkSourceReady: Promise<void> | null = null;
+let vSyncWithNameCache: String | null = null; // 当前关联的SyncLinkSource的名称
+let vSyncTypeCache: Symbol = ScrollBoxStyle.SyncForward;
+let vSyncLinkNexusNode: NexusNode | null = null;
+let vCurrentPercent: number = 0;
 
 /** 本地响应式变量 **/
 let rFixedBoxWidth = shallowRef(NaN);
@@ -153,6 +191,14 @@ let rSliderWidth = shallowRef(NaN);
 let rSliderHeight = shallowRef(NaN);
 let rSliderViewRef = shallowRef(null);
 
+// 记录slider的活动范围
+let rSliderEdgeBox = {
+  top: 0,
+  bottom: 0,
+  left: 0,
+  right: 0,
+};
+
 watchEffect(() => {
   let fixedBoxSize = {
     width: rProps.style!.width,
@@ -173,7 +219,7 @@ watchEffect(() => {
 
   // 合理性校验
   if (
-    cMode == ScrollStyle.PinMode &&
+    cMode == ScrollBoxStyle.PinMode &&
     (sliderSize.height > fixedBoxSize.height ||
       sliderSize.width > fixedBoxSize.width)
   ) {
@@ -183,7 +229,7 @@ watchEffect(() => {
     );
     return;
   } else if (
-    cMode == ScrollStyle.DrawerMode &&
+    cMode == ScrollBoxStyle.DrawerMode &&
     (sliderSize.height < fixedBoxSize.height ||
       sliderSize.width < fixedBoxSize.width)
   ) {
@@ -205,49 +251,181 @@ watchEffect(() => {
     rSliderHeight.value = sliderSize.height;
     rFixedBoxWidth.value = fixedBoxSize.width;
     rFixedBoxHeight.value = fixedBoxSize.height;
-
     rebuildSliderSet();
   }
+
+  // 在 rebuildSliderSet 之后，确认syncWith是否变化，变化则重建参照的SyncLinkSource
+  if (
+    vSyncWithNameCache != rProps.syncWith ||
+    vSyncTypeCache != rProps.syncType
+  ) {
+    vSyncWithNameCache = rProps.syncWith;
+    vSyncTypeCache = rProps.syncType;
+    changeSyncLink(vSyncWithNameCache);
+  }
 });
 
+function changeSyncLink(newSyncSourceName: String) {
+  // 清理原Link nexusNode
+  vSyncLinkNexusNode = null;
+  rebuildAckSync();
+
+  if (newSyncSourceName != null) {
+    // 创建新Source的Ready promise, 在确认目标节点存在后再获取NexusNode来创建condition
+    // 注意此Promise要在unMounted时通过UnListen进行反注册，才能规避内存泄漏
+    vWaitMasterLinkSourceReady = cSyncLinkManager
+      .WaitSourceMounted(newSyncSourceName)
+      .then(() => {
+        // 获取Link nexusNode。此引用不用专门释放，没有内存泄漏问题
+        vSyncLinkNexusNode =
+          cSyncLinkManager.GetSourceNexusNode(newSyncSourceName);
+        rebuildAckSync();
+      });
+  }
+}
+
+function rebuildAckSync() {
+  if (!vMounted) return;
+
+  // 清理老设定
+  cSliderActor.run((cmds) => {
+    return [cmds.state().removeConditionByGroup(cLinkConditionGroup)];
+  });
+
+  if (vSyncLinkNexusNode != null) {
+    // 创建运动跟随的condition
+    cSliderActor.run((cmds) => {
+      return [
+        cmds
+          .condition(cLinkConditionGroup, true)
+          .movementSync(vSyncLinkNexusNode!)
+          .then([
+            cmds
+              .action()
+              .ackMovementSync(
+                0,
+                vHorizontalGap,
+                0,
+                vVerticalGap,
+                0b11,
+                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,
+            0b11
+          ),
+        // 触发跟随节点记录进度
+        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() {
+  // 计算slider的活动区域
+  // 运动区域无论正负都通用的算法
+  vHorizontalGap = rFixedBoxWidth.value - rSliderWidth.value;
+  vVerticalGap = rFixedBoxHeight.value - rSliderHeight.value;
+
+  // 更新slider的活动范围
+  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) {
-    // 计算slider的活动区域
-    // 运动区域无论正负都通用的算法
-    vHorizontalGap = rFixedBoxWidth.value - rSliderWidth.value;
-    vVerticalGap = rFixedBoxHeight.value - rSliderHeight.value;
-
-    cSliderActor.run([
-      cSliderActor.state().removeConditionByGroup(cWallConditionGroup),
-      cSliderActor
+    // 设置Actor的活动边界
+    cSliderActor.run((cmds) => [
+      cmds.state().removeConditionByGroup(cWallConditionGroup),
+      cmds
         .condition(cWallConditionGroup, true)
         .boxPosition(
-          vHorizontalGap > 0 ? 0 : vHorizontalGap, // left
-          vVerticalGap > 0 ? 0 : vVerticalGap, // top
-          vHorizontalGap < 0 ? 0 : vHorizontalGap, // right
-          vVerticalGap < 0 ? 0 : vVerticalGap // bottom
+          rSliderEdgeBox.left,
+          rSliderEdgeBox.top,
+          rSliderEdgeBox.right,
+          rSliderEdgeBox.bottom
         )!
-        .then([cSliderActor.action().stopMoving(true)]),
+        .then([cmds.action().stopMoving(true)]),
+      // 跟进抬起时进度信息
+      cmds
+        .condition(cWallConditionGroup, true)
+        .onFlingEnd()
+        .then([
+          (pointInfo: any) => {
+            vCurrentPercent = positionToPercent(pointInfo);
+          },
+        ]),
+      // 跟进fling结束时的进度信息
+      cmds
+        .condition(cWallConditionGroup, true)
+        .onDragEnd()
+        .then([
+          (pointInfo: any) => {
+            vCurrentPercent = positionToPercent(pointInfo);
+          },
+        ]),
     ]);
+
+    // 尺寸变化时，重建Sync同步的信息
+    rebuildSyncMaster();
+    rebuildAckSync();
   }
 }
 
 // setSensor 函数声明
 function setSensor(callback: Function, sensitivity: number) {
-  cSliderActor.run([
-    cSliderActor.state().removeConditionByGroup(cSensorConditionGroup),
+  cSliderActor.run((cmds) => [
+    cmds.state().removeConditionByGroup(cSensorConditionGroup),
   ]);
   if (callback != null) {
-    cSliderActor.run([
-      cSliderActor
+    cSliderActor.run((cmds) => [
+      cmds
         .condition(cSensorConditionGroup, true)
         .onMovement(sensitivity) // 设置x或y移动超过12时才触发回调，以此减少回调的频次，规避js的性能影响
         .then([
           (pointInfo: any) => {
-            let percent =
-              cDirection == HORIZONTAL
-                ? pointInfo.xPos / vHorizontalGap
-                : pointInfo.yPos / vVerticalGap;
+            let percent: number = positionToPercent(pointInfo);
+            vCurrentPercent = percent;
             callback(percent, pointInfo.xPos, pointInfo.yPos);
           },
         ]),
@@ -255,6 +433,17 @@ function setSensor(callback: Function, sensitivity: number) {
   }
 }
 
+// 内部函数，位置信息转成百分比信息
+function positionToPercent(pointInfo: any): number {
+  let percent: number = 0;
+  if (cDirection == HORIZONTAL) {
+    percent = vHorizontalGap != 0 ? pointInfo.xPos / vHorizontalGap : 0;
+  } else {
+    percent = vVerticalGap != 0 ? pointInfo.yPos / vVerticalGap : 0;
+  }
+  return percent;
+}
+
 // updatePercent 函数声明
 function updatePercent(percent: number) {
   let xPos: number = 0;
@@ -264,7 +453,12 @@ function updatePercent(percent: number) {
   } 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(): number {
+  return vCurrentPercent;
 }
 
 onMounted(() => {
@@ -291,18 +485,42 @@ onMounted(() => {
     let fixedBoxView = (rFixedViewRef.value as any).jsvGetProxyView();
     cFixedBoxActor.bindForgeView(fixedBoxView, true);
     fixedBoxView.DragEnables?.(ForgeConst.DragFlags.TOUCH_RECV_FIRST_START); // 仅激活touchDown即可捕获并触发 TouchAttractChild
-    cFixedBoxActor.run([
-      cFixedBoxActor.state().setTouchAttractChild(cSliderActor),
+    cFixedBoxActor.run((cmds) => [
+      cmds.state().setTouchAttractChild(cSliderActor),
     ]);
   }
 
+  // 创建提供同步信息来源的 SyncLinkSource，并登录到SyncLinkManager中(SourceOnMounted)
+  // 注意:此处理一定要在 onUnmounted 时进行 SourceOnUnmounted，才能规避内存泄漏
+  if (cLinkName != null) {
+    vLinkProvide = new SyncLinkSource(cLinkName, newNexus());
+    rebuildSyncMaster();
+    cSyncLinkManager.SourceOnMounted(vLinkProvide);
+  }
+
   // 设置滑动区域和关联区域
   rebuildSliderSet();
 });
 
+onUnmounted(() => {
+  /** 关于LinkSource的释放 **/
+  // 释放作为linkSource master时的句柄
+  if (vLinkProvide != null) {
+    cSyncLinkManager.SourceOnUnmounted(cLinkName);
+    vLinkProvide = null;
+  }
+
+  // 释放作为linkSource slave时的句柄
+  if (vWaitMasterLinkSourceReady != null) {
+    cSyncLinkManager.UnListen(vWaitMasterLinkSourceReady);
+    vWaitMasterLinkSourceReady = null;
+  }
+});
+
 defineExpose({
   setSensor,
   updatePercent,
+  currentPercent,
 });
 </script>