@shijiu/jsview-vue 2.2.35 → 2.2.201

package/utils/JsViewVueWidget/JsvScrollBox/JsvScrollBox.vue

@@ -0,0 +1,518 @@
+<!--
+ * 【模块 export 内容】
+ * JsvScrollBox：Vue高阶组件，支持触控拖动的滚动型组件。
+ *  props说明:
+ *      style {Object}  (必填,响应式)  其中的width/height为必填项目, 决定scroll固定的底座的尺寸
+ *      sliderSize {Object} (必填,响应式) 滑动区域的尺寸，滑块的尺寸在非滑动方向不能大于组件尺寸
+ *                  { 
+ *                      width {number},  当VERTICAL滑动模式时为选填，HORIZONTAL为必填
+ *                      height {number}, 当HORIZONTAL滑动模式时为选填，VERTICAL为必填
+ *                  }
+ *      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说明:
+ *      FixedBox={boxWidth, boxHeight}:  以本组件底座左上角0,0对齐的一个slot
+ *      SliderBox={boxWidth, boxHeight}:  以滑块div的左上角0,0对齐的一个slot，
+ * 
+ *  expose函数说明:
+ *      setSensor(sensitivity:number, callback:Function<percent:number, x:number, y:number>) 设置运动后触发的回调
+ *                             sensitivity为回调敏感度, 每移动多少像素进行回调，适当放大(推荐10以上)可以极大减小对js回调过多引起的性能降低  
+ *      updatePercent(percent:number)   设置滚动调位置(百分比),百分比 = (SliderTop - 底座Top) / Slider可滑动总区域
+ *                                      Slider可滑动总区域 = 底座Height - SliderHeight
+ *                                      当为横向运动时，Top被Left代换，Height被Width代换
+ *
+-->
+
+<template>
+  <div
+    :style="{
+      top: rProps.style?.top,
+      left: rProps.style?.left,
+    }"
+  >
+    <div
+      ref="rFixedViewRef"
+      :style="{
+        width: rFixedBoxWidth,
+        height: rFixedBoxHeight,
+      }"
+    >
+      <slot
+        name="FixedBox"
+        :boxWidth="rFixedBoxWidth"
+        :boxHeight="rFixedBoxHeight"
+      />
+      <div
+        ref="rSliderViewRef"
+        :style="{
+          width: rSliderWidth,
+          height: rSliderHeight,
+        }"
+      >
+        <slot
+          name="SliderBox"
+          :boxWidth="rSliderWidth"
+          :boxHeight="rSliderHeight"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  shallowRef,
+  watchEffect,
+  onMounted,
+  onUnmounted,
+  defineExpose,
+  defineProps,
+} from "vue";
+import ActControl from "../../JsViewVueWidget/JsvFreeMoveActor/ActorControl";
+import { VERTICAL, HORIZONTAL } from "../../JsViewVueTools/ConstSymbol";
+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";
+
+let rProps = defineProps({
+  // 底座的尺寸
+  style: {
+    type: Object,
+    require: true,
+  },
+
+  // 滑动允许方向(VERTICAL / HORIZONTAL)
+  direction: {
+    type: Symbol,
+    require: true,
+  },
+
+  // 滑块的尺寸，垂直于direction的轴不用设置
+  sliderSize: {
+    type: Object, // {width, height}
+    require: true,
+  },
+
+  // 滑块模式
+  // ScrollBoxStyle.PinMode: 滑块小于底座
+  // ScrollBoxStyle.DrawerMode: 滑块大于底座
+  mode: {
+    type: Symbol,
+    default: ScrollBoxStyle.PinMode,
+  },
+
+  // 初始进度条的进度
+  initPercent: {
+    type: Number,
+    default: 0,
+  },
+
+  enableFling: {
+    type: Boolean,
+    default: false,
+  },
+
+  linkName: {
+    type: String,
+    default: null,
+  },
+
+  syncWith: {
+    type: String,
+    default: null,
+  },
+
+  syncType: {
+    type: Symbol,
+    default: ScrollBoxStyle.SyncForward,
+  },
+});
+
+/** 本地常量 **/
+const cDirection = rProps.direction;
+const cMode = rProps.mode;
+const cInitPercent = rProps.initPercent;
+const cEnableFling = rProps.enableFling;
+const cSliderActor = new ActControl();
+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: 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);
+let rFixedBoxHeight = shallowRef(NaN);
+let rFixedViewRef = shallowRef(null);
+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,
+    height: rProps.style!.height,
+  }; // 从响应式props中复制值
+
+  let sliderSize = {
+    width: rProps.sliderSize!.width,
+    height: rProps.sliderSize!.height,
+  }; // 从响应式props中复制值
+
+  // 补正slider另一个不需要设置的边
+  if (cDirection == VERTICAL) {
+    sliderSize.width = fixedBoxSize.width;
+  } else {
+    sliderSize.height = fixedBoxSize.height;
+  }
+
+  // 合理性校验
+  if (
+    cMode == ScrollBoxStyle.PinMode &&
+    (sliderSize.height > fixedBoxSize.height ||
+      sliderSize.width > fixedBoxSize.width)
+  ) {
+    // PinMode检测错误，滑块大于了底座
+    console.error(
+      `slider oversize in pin-mode bw=${fixedBoxSize.width} bh=${fixedBoxSize.height} sw=${sliderSize.width} sh=${sliderSize.height}`
+    );
+    return;
+  } 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}`
+    );
+    return;
+  }
+
+  // 变更检查，尽量减少触发template的响应式
+  if (
+    sliderSize.width != rSliderWidth.value ||
+    sliderSize.height != rSliderHeight.value ||
+    fixedBoxSize.width != rFixedBoxWidth.value ||
+    fixedBoxSize.height != rFixedBoxHeight.value
+  ) {
+    // 更新template
+    rSliderWidth.value = sliderSize.width;
+    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) {
+    // 设置Actor的活动边界
+    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: 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((cmds) => [
+    cmds.state().removeConditionByGroup(cSensorConditionGroup),
+  ]);
+  if (callback != null) {
+    cSliderActor.run((cmds) => [
+      cmds
+        .condition(cSensorConditionGroup, true)
+        .onMovement(sensitivity) // 设置x或y移动超过12时才触发回调，以此减少回调的频次，规避js的性能影响
+        .then([
+          (pointInfo: any) => {
+            let percent: number = positionToPercent(pointInfo);
+            vCurrentPercent = percent;
+            callback(percent, pointInfo.xPos, pointInfo.yPos);
+          },
+        ]),
+    ]);
+  }
+}
+
+// 内部函数，位置信息转成百分比信息
+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;
+  let yPos: number = 0;
+  if (cDirection == HORIZONTAL) {
+    xPos = Math.floor(percent * vHorizontalGap);
+  } else {
+    yPos = Math.floor(percent * vVerticalGap);
+  }
+  cSliderActor.run((cmds) => [cmds.action().teleportTo(xPos, yPos)]);
+  vCurrentPercent = percent;
+}
+
+function currentPercent(): number {
+  return vCurrentPercent;
+}
+
+onMounted(() => {
+  vMounted = true;
+
+  // 构建slider的FreeMove控制对象
+  let sliderView = (rSliderViewRef.value as any).jsvGetProxyView();
+  cSliderActor.bindForgeView(sliderView, true);
+  sliderView.DragEnables?.(
+    ForgeConst.DragFlags.TOUCH_RECV_MOVE_BIT |
+      (cEnableFling ? ForgeConst.DragFlags.TOUCH_RECV_FLING_BIT : 0) |
+      ForgeConst.DragFlags.TOUCH_RECV_FIRST_START |
+      ForgeConst.DragFlags.TOUCH_RECV_LAST_END
+  ); // 激活 Move | TouchDown | TouchEnd
+
+  // 设置初始进度
+  if (cInitPercent != 0) {
+    updatePercent(cInitPercent);
+  }
+
+  if (cFixedBoxActor != null) {
+    // 父节点激活 touchDown 和 touchAttractChild
+    // 用于点击滑动区域时，将子节点拖过来
+    let fixedBoxView = (rFixedViewRef.value as any).jsvGetProxyView();
+    cFixedBoxActor.bindForgeView(fixedBoxView, true);
+    fixedBoxView.DragEnables?.(ForgeConst.DragFlags.TOUCH_RECV_FIRST_START); // 仅激活touchDown即可捕获并触发 TouchAttractChild
+    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>
+
+<style lang="scss" scoped></style>