@shijiu/jsview-vue 2.3.0 → 2.3.728-alpha.0

package/utils/JsViewVueWidget/JsvSwiper/JsvSmoothSwiper.vue

@@ -0,0 +1,543 @@
+<!--
+ * @file
+ *
+ * 【模块 export 内容】
+ * JsvSmoothSwiper：Vue高阶组件，平滑滚动轮播组件
+ *      props说明:
+ *          totalFrame          {int}   (必需)item 的个数
+ *          firstFrame          {int}   初始 item 的 index，默认为0
+ *          layoutInfo          {Object}   (必需)组件的大小及位置 {top: 0, left: 0, width: 0, height: 0}
+ *          onClick           {Function}   点击事件 function () {}
+ *          onChange          {Function}   滚动事件 function (index) {}
+ *          onEdge            {Function}   到达边缘事件 ({direction: EdgeDirection}) => Void
+ *          autoplayInterval          {int}   自动滚动的时间（毫秒），等于0时不自动滚动， 默认为5000
+ *          enableAutoplay          {boolean}   是否启用自动滚动，默认为false
+ *          animation          {Object}   滚动动画设置 {duration: 0, easing: "linear"}
+ *          vertical          {boolean}   组件是否为纵向的，默认为 false
+ *          name          {String}   组件获得焦点的 name
+ *          onFocus          {Function}   获得焦点的回调 
+ *          onBlur          {Function}   失去焦点的回调
+ *          reverseSwipe      {boolean} 反转滚动方向,默认值为false. 默认滚动方向是正向, 既向index增大的方向, 反转后为反向, 既向index减小的方向
+ *          itemSize          {Object}   item的大小 {width: 0, height: 0}
+ *          itemGap          {int}   item之间的间隔，默认为0
+ *          padding          {Object}   内边距 {left: 0, top: 0, right: 0, bottom: 0}
+-->
+
+<template>
+  <jsv-focus-block
+    :name="name"
+    :onAction="{ onFocus, onBlur, onKeyDown, onKeyUp }"
+  >
+    <div
+      :style="{
+        width: props.layoutInfo.width,
+        height: props.layoutInfo.height,
+        overflow: 'hidden',
+      }"
+    >
+      <div
+        :style="{
+          left: innerPadding.left,
+          top: innerPadding.top,
+        }"
+      >
+        <JsvSmoothSlideContainer
+          ref="root"
+          :initPosition="[xInitPosition, yInitPosition]"
+        >
+          <div
+            v-for="item in childDivList"
+            :key="item.id"
+            :style="{
+              left: item.left,
+              top: item.top,
+              width: item.width,
+              height: item.height,
+            }"
+          >
+            <slot
+              name="itemView"
+              :currentIndex="currentDataIndex"
+              :dataIndex="item.dataIndex"
+              :focused="focused"
+            ></slot>
+          </div>
+        </JsvSmoothSlideContainer>
+      </div>
+    </div>
+  </jsv-focus-block>
+</template>
+
+<script setup>
+import { shallowRef, onMounted, computed, ref } from "vue";
+import ActorControl from "../JsvFreeMoveActor/ActorControl.ts";
+import { EdgeDirection } from "../../JsViewEngineWidget";
+import JsvSmoothSlideContainer from "../JsvSmoothSlideContainer.vue";
+
+// 定义props
+const props = defineProps({
+  totalFrame: {
+    type: Number,
+    required: true,
+  },
+  firstFrame: {
+    type: Number,
+    default: 0,
+  },
+  layoutInfo: {
+    type: Object,
+    required: true,
+  },
+  onClick: {
+    type: Function,
+  },
+  onChange: {
+    type: Function,
+  },
+  onEdge: {
+    type: Function,
+  },
+  autoplayInterval: {
+    type: Number,
+    default: 5000,
+  },
+  enableAutoplay: {
+    type: Boolean,
+    default: false,
+  },
+  animation: {
+    type: Object,
+    default() {
+      return {
+        duration: 200,
+        easing: "linear",
+      };
+    },
+  },
+  vertical: {
+    type: Boolean,
+    default: false,
+  },
+  name: {
+    type: String,
+  },
+  onFocus: {
+    type: Function,
+  },
+  onBlur: {
+    type: Function,
+  },
+  reverseSwipe: {
+    type: Boolean,
+    default: false,
+  },
+  itemSize: {
+    type: Object,
+  },
+  itemGap: {
+    type: Number,
+    default: 0,
+  },
+  padding: {
+    type: Object,
+  },
+});
+const root = shallowRef();
+// const actorControl = new ActorControl();
+const childDivList = ref([]);
+window.test = childDivList;
+const focused = shallowRef(false);
+const currentIndex = shallowRef(props.firstFrame);
+const targetIndex = shallowRef(props.firstFrame);
+const currentDataIndex = computed(() => {
+  return modToRange(currentIndex.value, props.totalFrame);
+});
+
+const keyCode2EdgeDirection = (keyCode) => {
+  switch (keyCode) {
+    case 37:
+      return EdgeDirection.left;
+    case 38:
+      return EdgeDirection.top;
+    case 39:
+      return EdgeDirection.right;
+    case 40:
+      return EdgeDirection.bottom;
+    default:
+      console.error("not direction key", keyCode);
+      return null;
+  }
+};
+
+function modToRange(value, mod, start = 0) {
+  let m = value % mod;
+  if (m < start) {
+    m += mod;
+  } else if (m >= start + mod) {
+    m -= mod;
+  }
+  return m;
+}
+
+const innerPadding = computed(() => {
+  return Object.assign(
+    {
+      left: 0,
+      top: 0,
+      right: 0,
+      bottom: 0,
+    },
+    props.padding
+  );
+});
+
+const innerItemSize = computed(() => {
+  return (
+    props.itemSize || {
+      width: props.layoutInfo.width,
+      height: props.layoutInfo.height,
+    }
+  );
+});
+
+const centerOffset = computed(() => {
+  return props.vertical
+    ? (props.layoutInfo.height -
+        (innerPadding.value.top + innerPadding.value.bottom) -
+        innerItemSize.value.height) /
+        2
+    : (props.layoutInfo.width -
+        (innerPadding.value.left + innerPadding.value.right) -
+        innerItemSize.value.width) /
+        2;
+});
+
+const itemStart = (index) => {
+  return props.vertical
+    ? index * props.itemSize.height + index * props.itemGap
+    : index * props.itemSize.width + index * props.itemGap;
+};
+
+const visibleCount = computed(() => {
+  if (props.vertical) {
+    return (
+      Math.ceil(
+        (props.layoutInfo.height - innerItemSize.value.height) /
+          2 /
+          (innerItemSize.value.height + props.itemGap)
+      ) *
+        2 +
+      1
+    );
+  } else {
+    return (
+      Math.ceil(
+        (props.layoutInfo.width - innerItemSize.value.width) /
+          2 /
+          (innerItemSize.value.width + props.itemGap)
+      ) *
+        2 +
+      1
+    );
+  }
+});
+
+const viewNum = computed(() => {
+  return visibleCount.value + 2;
+});
+
+const viewNumOneSide = computed(() => {
+  return Math.floor(viewNum.value / 2);
+});
+
+let xInitPosition = 0;
+let yInitPosition = 0;
+if (props.vertical) {
+  yInitPosition = -itemStart(currentIndex.value) + centerOffset.value;
+} else {
+  xInitPosition = -itemStart(currentIndex.value) + centerOffset.value;
+}
+
+const initDivList = () => {
+  prepareDiv(currentIndex.value, -1);
+  prepareDiv(currentIndex.value, 1);
+};
+
+const addDiv = (divInfo) => {
+  for (let i of childDivList.value) {
+    if (i.id === divInfo.id) {
+      return;
+    }
+  }
+  childDivList.value.push(divInfo);
+};
+
+const cleanInvisibleDiv = () => {
+  childDivList.value = childDivList.value.filter(
+    (item) =>
+      item.id >= currentIndex.value - viewNumOneSide.value &&
+      item.id <= currentIndex.value + viewNumOneSide.value
+  );
+};
+
+const prepareDiv = (index, toward = 1) => {
+  const start = Math.min(index, index + toward * viewNumOneSide.value);
+  const end = Math.max(index, index + toward * viewNumOneSide.value);
+  for (let i = start; i <= end; ++i) {
+    const divInfo = {
+      id: i,
+      left: itemStart(i),
+      top: 0,
+      width: props.itemSize.width,
+      height: props.itemSize.height,
+      dataIndex: modToRange(i, props.totalFrame),
+    };
+    addDiv(divInfo);
+  }
+};
+
+let intervalId = null;
+const startAutoplay = () => {
+  // 设置定时器
+  intervalId = setInterval(() => {
+    const toward = props.reverseSwipe ? -1 : 1;
+    moveTo(curTargetIndex + toward, lowSpeed.value);
+  }, props.autoplayInterval);
+};
+
+const stopAutoplay = () => {
+  clearInterval(intervalId);
+};
+
+const onFocus = () => {
+  focused.value = true;
+  stopAutoplay();
+};
+
+const onBlur = () => {
+  focused.value = false;
+  if (props.enableAutoplay && props.autoplayInterval > 0) {
+    startAutoplay();
+  }
+};
+
+const getSlidePosByIndex = (index) => {
+  return -itemStart(index) + centerOffset.value;
+};
+
+let preTargetIndex = props.firstFrame;
+let curTargetIndex = props.firstFrame;
+let curMoveDirection = 0;
+let moveSpeed = 0;
+let moveDirection = 0;
+const moveTo = (index, speed) => {
+  if (index == curTargetIndex && speed == moveSpeed) {
+    return;
+  }
+  moveSpeed = speed;
+  if (index != curTargetIndex) {
+    preTargetIndex = curTargetIndex;
+    curTargetIndex = index;
+  }
+
+  moveDirection = Math.sign(curTargetIndex - preTargetIndex);
+
+  let targetX = 0;
+  let targetY = 0;
+  let halfTargetX = 0;
+  let halfTargetY = 0;
+  if (props.vertical) {
+    targetY = getSlidePosByIndex(curTargetIndex);
+    let preTargetY = getSlidePosByIndex(preTargetIndex);
+    halfTargetY = (targetY + preTargetY) / 2;
+  } else {
+    targetX = getSlidePosByIndex(curTargetIndex);
+    let preTargetX = getSlidePosByIndex(preTargetIndex);
+    halfTargetX = (targetX + preTargetX) / 2;
+  }
+  prepareDiv(index, moveDirection);
+
+  root.value.moveTo(
+    speed,
+    targetX,
+    targetY,
+    onReach(index, curMoveDirection),
+    halfTargetX,
+    halfTargetY,
+    onBeforeReach(index, curMoveDirection)
+  );
+  moveInfo.moving = true;
+};
+
+const brakeTo = (index) => {
+  let targetX = undefined;
+  let targetY = undefined;
+  if (props.vertical) {
+    targetY = getSlidePosByIndex(index);
+  } else {
+    targetX = getSlidePosByIndex(index);
+  }
+  root.value.brakeTo(targetX, targetY);
+};
+
+const onReach = (index, toward) => {
+  return () => {
+    moveInfo.reachedIndex = index;
+    if (keyInfo.keyRepeat) {
+      //继续移动
+      moveTo(
+        curTargetIndex + Math.sign(curTargetIndex - preTargetIndex),
+        moveSpeed
+      );
+    } else {
+      //移动结束
+      moveInfo.moving = false;
+      moveSpeed = 0;
+      cleanInvisibleDiv();
+      if (curTargetIndex === index) {
+        //刹车
+        root.value?.stop();
+      }
+    }
+  };
+};
+
+const onBeforeReach = (index, toward) => {
+  return () => {
+    currentIndex.value = index;
+    props.onChange?.(currentDataIndex.value);
+    if (!keyInfo.keyRepeat) {
+      //不再继续移动
+      if (curTargetIndex === index) {
+        //刹车
+        brakeTo(index);
+      }
+    }
+  };
+};
+
+let moveInfo = {
+  reachedIndex: props.firstFrame,
+  preReached: false,
+  toward: 0,
+  moving: false,
+  moveSpeed: 0,
+  targetIndex: 0,
+};
+
+const lowSpeed = computed(() => {
+  return (
+    (props.verticals ? props.itemSize.height : props.itemSize.width) /
+    ((60 * props.animation.duration) / 1000)
+  );
+});
+const highSpeed = computed(() => {
+  return 2 * lowSpeed.value;
+});
+
+const keyInfo = {
+  keyCode: 0,
+  keyRepeat: false,
+};
+const onKeyDown = (ev) => {
+  if (ev.keyCode ==13) {
+    if (!moveInfo.moving) {
+      props.onClick?.(currentDataIndex.value);
+    }
+    return true;
+  }
+  if (
+    ev.keyCode != 37 &&
+    ev.keyCode != 38 &&
+    ev.keyCode != 39 &&
+    ev.keyCode != 40
+  ) {
+    return false;
+  }
+
+  let toward = 0;
+  if (props.vertical) {
+    toward = ev.keyCode == 38 ? -1 : ev.keyCode == 40 ? 1 : 0;
+  } else {
+    toward = ev.keyCode == 37 ? -1 : ev.keyCode == 39 ? 1 : 0;
+  }
+
+  if (toward == 0) {
+    props.onEdge?.({
+      direction: keyCode2EdgeDirection(ev.keyCode),
+      rect: {
+        x: props.layoutInfo.left,
+        y: props.layoutInfo.top,
+        width: props.layoutInfo.width,
+        height: props.layoutInfo.height,
+      },
+    });
+    return true;
+  }
+
+  //会有同时摁住两个键的情况, 所以要记录keyCode, 以便在keyUp的时候比对
+  keyInfo.keyCode = ev.keyCode;
+  keyInfo.keyRepeat = ev.repeat;
+
+  if (moveInfo.moving) {
+    if (ev.repeat) {
+      if (moveSpeed != highSpeed.value) {
+        moveSpeed = highSpeed.value;
+        root.value?.setSpeed(
+          props.vertical ? undefined : -toward * highSpeed.value,
+          props.vertical ? -toward * highSpeed.value : undefined
+        );
+      }
+      return true;
+    }
+    // 如果正在移动到目标, 则继续移动
+    if (toward == moveDirection) {
+      // 同向加速
+      if (currentIndex.value == curTargetIndex) {
+        moveTo(curTargetIndex + toward, highSpeed.value);
+      }
+    } else {
+      // 反向
+      moveTo(curTargetIndex + toward, lowSpeed.value);
+    }
+  } else {
+    moveTo(curTargetIndex + toward, lowSpeed.value);
+  }
+  return true;
+};
+
+const onKeyUp = (ev) => {
+  let targetKey = false;
+  switch (ev.keyCode) {
+    case 37:
+      targetKey = true;
+      break;
+    case 39:
+      targetKey = true;
+      break;
+    case 38:
+      targetKey = true;
+      break;
+    case 40:
+      targetKey = true;
+      break;
+    default:
+      break;
+  }
+  if (targetKey) {
+    if (keyInfo.keyCode != ev.keyCode) {
+      return true;
+    }
+    keyInfo.keyRepeat = false;
+    if (moveInfo.moving) {
+      brakeTo(curTargetIndex);
+    }
+    return true;
+  }
+  return false;
+};
+
+onMounted(() => {
+  initDivList();
+});
+</script>

package/utils/JsViewVueWidget/JsvSwiper/JsvSwiper.vue

@@ -397,7 +397,7 @@ export default {
     },
     _startAnimation(direction, smooth = false) {
       let duration = this.animation.duration;
-      // let easing = this.animation.easing ? this.animation.easing : "linear";
+      let easing = this.animation.easing ? this.animation.easing : "linear";
 
       let curViewAnimation;
       let preViewAnimation;
@@ -438,7 +438,7 @@ export default {
               this.vertical ? direction * this.layoutInfo.height : 0,
               0,
               duration,
-              null
+              Forge.Easing.str2Easing(easing)
             );
             preViewAnimation = new Forge.TranslateAnimation(
               this.vertical ? 0 : direction * this.layoutInfo.width,
@@ -446,7 +446,7 @@ export default {
               this.vertical ? direction * this.layoutInfo.height : 0,
               0,
               duration,
-              null
+              Forge.Easing.str2Easing(easing)
             );
           }
           break;