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

package/utils/JsViewVueWidget/JsvSwiper/JsvSwiper2.vue

@@ -0,0 +1,644 @@
+<!--
+ * @file
+ *
+ * 【模块 export 内容】
+ * JsvSwiper：Vue高阶组件，图片轮播组件
+ *      props说明:
+ *          showIndicator          {boolean}   是否显示指示点，默认显示
+ *          dotSize          {int}   指示点大小，默认为10px
+ *          dotGap          {int}   指示点之间间隔，默认为10px
+ *          indicatorPos          {int}   指示点位置, 横向时为距顶端的位置，默认为高的80%；
+                                          纵向时为距左端的位置，默认为宽的80%
+ *          indicatorAlign          {String}   指示面板的 align, 值为 start / middle / end，默认为middle
+ *          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
+ *          animation          {Object}   滚动动画设置 {duration: 0, easing: "linear"}
+ *          vertical          {boolean}   组件是否为纵向的，默认为 false
+ *          name          {String}   组件获得焦点的 name
+ *          onFocus          {Function}   获得焦点的回调 
+ *          onBlur          {Function}   失去焦点的回调
+ *          swipeType          {String}   切换方式，目前只支持 translate，之后可能会添加 opacity 等方式
+ *          smoothTranslate          {boolean}   平滑模式动画开关
+ *          reverseSwipe      {boolean} 反转滚动方向,默认值为false. 默认滚动方向是正向, 既向index增大的方向, 反转后为反向, 既向index减小的方向
+ *          disableLoopWhenFocus {boolean} 获焦时按键是否循环滚动
+ *     public methods:
+ *          slideTo
+ *          @description 滚动到指定id
+            @params {int} id 目标id
+            @params {int} 方向, 1为正向, -1为负向
+-->
+
+<script setup>
+import { Forge } from "@shijiu/jsview/dom/jsv-forge-define";
+import { EdgeDirection } from "../../JsViewEngineWidget";
+import { ref, computed, watch, onMounted, onBeforeUnmount } from "vue";
+import JsvActorMove, { JsvActorMoveControl } from "../JsvActorMove";
+import JsvVisibleSensor from "../JsvVisibleSensor";
+
+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 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;
+  }
+};
+
+// 定义props
+const props = defineProps({
+  showIndicator: {
+    type: Boolean,
+    default: true,
+  },
+  dotSize: {
+    type: Number,
+    default: 10,
+  },
+  dotGap: {
+    type: Number,
+    default: 10,
+  },
+  indicatorPos: {
+    type: Number,
+    default: -1,
+  },
+  indicatorAlign: {
+    type: String,
+    validator(value) {
+      // The value must match one of these strings
+      return ["start", "middle", "end"].includes(value);
+    },
+    default: "middle",
+  },
+  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,
+  },
+  animation: {
+    type: Object,
+    default() {
+      return {
+        duration: 200,
+        easing: "linear",
+      };
+    },
+  },
+  vertical: {
+    type: Boolean,
+    default: false,
+  },
+  name: {
+    type: String,
+  },
+  onFocus: {
+    type: Function,
+  },
+  onBlur: {
+    type: Function,
+  },
+  swipeType: {
+    type: String,
+    default: "translate",
+  },
+  smoothTranslate: {
+    type: Boolean,
+    default: false,
+  },
+  reverseSwipe: {
+    type: Boolean,
+    default: false,
+  },
+  disableLoopWhenFocus: {
+    type: Boolean,
+    default: false,
+  },
+  itemSize: {
+    type: Object,
+  },
+  itemGap: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const innerItemSize = computed(() => {
+  return (
+    props.itemSize || {
+      width: props.layoutInfo.width,
+      height: props.layoutInfo.height,
+    }
+  );
+});
+
+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;
+});
+
+// 状态变量
+let controllerList = new Array(viewNum.value);
+if (props.smoothTranslate) {
+  for (let i = 0; i < controllerList.length; i++) {
+    controllerList[i] = new JsvActorMoveControl();
+  }
+}
+const focusBlock = ref();
+let preOffset = ref(-1);
+const offset = ref(0);
+const focused = ref(false);
+let timeoutHandler = -1;
+let autoplay = ref(false);
+const element = ref([]);
+
+// 计算属性
+const indexList = computed(() => {
+  return new Array(props.totalFrame).fill(0).map((_, index) => {
+    return index;
+  });
+});
+
+const indicatorLayout = computed(() => {
+  let indicatorSize =
+    props.totalFrame * (props.dotSize + props.dotGap) - props.dotGap;
+  if (props.vertical) {
+    let top;
+    if (props.indicatorAlign === "start") {
+      top = props.dotGap;
+    } else if (props.indicatorAlign === "end") {
+      top = props.layoutInfo.height - indicatorSize - props.dotGap;
+    } else {
+      top = (props.layoutInfo.height - indicatorSize) / 2;
+    }
+    return {
+      left:
+        props.indicatorPos < 0
+          ? props.layoutInfo.width * 0.8
+          : props.indicatorPos,
+      top,
+      zIndex: 1,
+    };
+  } else {
+    let left;
+    if (props.indicatorAlign === "start") {
+      left = props.dotGap;
+    } else if (props.indicatorAlign === "end") {
+      left = props.layoutInfo.width - indicatorSize - props.dotGap;
+    } else {
+      left = (props.layoutInfo.width - indicatorSize) / 2;
+    }
+    return {
+      left,
+      top:
+        props.indicatorPos < 0
+          ? props.layoutInfo.height * 0.8
+          : props.indicatorPos,
+      zIndex: 1,
+    };
+  }
+});
+
+const indicatorDotSize = computed(() => {
+  return props.dotSize + props.dotGap;
+});
+
+const currentDataIndex = computed(() => {
+  return modToRange(props.firstFrame + offset.value, props.totalFrame);
+});
+
+const currentViewIndex = computed(() => {
+  return modToRange(
+    offset.value + Math.floor(viewNum.value / 2),
+    viewNum.value
+  );
+});
+
+const viewInfoList = computed(() => {
+  let viewList = [];
+  //计算最左侧view的位置
+  let widgetSize = props.vertical
+    ? props.layoutInfo.height
+    : props.layoutInfo.width;
+  let itemSize = props.vertical
+    ? innerItemSize.value.height
+    : innerItemSize.value.width;
+  let totalSize =
+    itemSize * viewNum.value + props.itemGap * (viewNum.value - 1);
+  let min = (widgetSize - totalSize) / 2;
+
+  let centerIndex = Math.floor(viewNum.value / 2);
+  for (let i = 0; i < viewNum.value; i++) {
+    let pos = modToRange(i - offset.value, viewNum.value);
+    const style = {
+      top: props.vertical ? min + pos * itemSize + pos * props.itemGap : 0,
+      left: props.vertical ? 0 : min + pos * itemSize + pos * props.itemGap,
+      width: props.layoutInfo.width,
+      height: props.layoutInfo.height,
+    };
+    //currentDataIndex是中间的那个
+    viewList.push({
+      dataIndex: modToRange(
+        currentDataIndex.value + (pos - centerIndex),
+        props.totalFrame
+      ),
+      style: style,
+      distanceToCenter: pos - centerIndex,
+    });
+  }
+  return viewList;
+});
+
+// 监听器
+watch(offset, (newValue) => {
+  props.onChange?.(modToRange(props.firstFrame + newValue, props.totalFrame));
+});
+
+// 监听currentDataIndex的变化
+watch(() => currentDataIndex.value, (newVal, oldVal) => {
+  console.log('currentDataIndex变化:', oldVal, '->', newVal);
+  // 这里可以添加您需要的逻辑
+  // 例如：通知子组件当前索引已更改
+});
+
+// 方法
+const getFocusBlockRef = () => {
+  return focusBlock;
+};
+
+const stopAutoplay = () => {
+  autoplay.value = false;
+  clearInterval(timeoutHandler);
+  timeoutHandler = -1;
+};
+
+const startAutoplay = () => {
+  if (props.autoplayInterval > 0 && props.totalFrame > 1) {
+    autoplay.value = true;
+    if (timeoutHandler > 0) {
+      clearInterval(timeoutHandler);
+    }
+    timeoutHandler = setInterval(() => {
+      _trigger(props.reverseSwipe ? -1 : 1);
+    }, props.autoplayInterval);
+  }
+};
+
+const slideTo = (id, direction = 0) => {
+  const curId = modToRange(props.firstFrame + offset.value, props.totalFrame);
+  if (curId != id) {
+    let d;
+    if (direction != 0) {
+      d = direction;
+    } else {
+      d = id - curId;
+    }
+    _trigger(
+      modToRange(
+        id - curId,
+        props.totalFrame,
+        d > 0 ? 0 : -props.totalFrame + 1
+      )
+    );
+  }
+};
+
+const _onKeyDown = (ev) => {
+  let direction = 0;
+  switch (ev.keyCode) {
+    case 37:
+      if (!props.vertical) {
+        direction = -1;
+      }
+      break;
+    case 38:
+      if (props.vertical) {
+        direction = -1;
+      }
+      break;
+    case 39:
+      if (!props.vertical) {
+        direction = 1;
+      }
+      break;
+    case 40:
+      if (props.vertical) {
+        direction = 1;
+      }
+      break;
+    case 13:
+      props.onClick?.(currentDataIndex.value);
+      return true;
+    default:
+      return false;
+  }
+
+  //处理方向键
+  if (direction !== 0) {
+    if (!props.disableLoopWhenFocus) {
+      _trigger(direction);
+      return true;
+    } else {
+      if (
+        currentDataIndex.value + direction >= 0 &&
+        currentDataIndex.value + direction < props.totalFrame
+      ) {
+        _trigger(direction);
+        return true;
+      }
+    }
+  }
+
+  //未处理方向键
+  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;
+};
+
+const _onAnimationEnd = () => {};
+
+const _onFocus = () => {
+  focused.value = true;
+  stopAutoplay();
+  props.onFocus?.();
+};
+
+const _onBlur = () => {
+  focused.value = false;
+  startAutoplay();
+  props.onBlur?.();
+};
+
+const _getAnimation = (direction, smooth, addListener) => {
+  let easing = props.animation.easing ? props.animation.easing : "linear";
+  let anim;
+  if (smooth) {
+    const speed =
+      ((props.vertical ? props.layoutInfo.height : props.layoutInfo.width) /
+        props.animation.duration) *
+      1000;
+    anim = new Forge.TranslateFrameAnimation(
+      props.vertical
+        ? direction * (props.itemSize.height + props.itemGap)
+        : direction * (props.itemSize.width + props.itemGap),
+      0,
+      speed,
+      !props.vertical,
+      props.vertical ? 0 : direction * (props.itemSize.width + props.itemGap),
+      props.vertical ? direction * (props.itemSize.height + props.itemGap) : 0
+    );
+  } else {
+    anim = new Forge.TranslateAnimation(
+      props.vertical ? 0 : direction * (props.itemSize.width + props.itemGap),
+      0,
+      props.vertical ? direction * (props.itemSize.height + props.itemGap) : 0,
+      0,
+      props.animation.duration,
+      Forge.Easing.str2Easing(easing)
+    );
+  }
+  if (addListener) {
+    anim.SetAnimationListener(
+      new Forge.AnimationListener(null, _onAnimationEnd, null)
+    );
+  }
+  return anim;
+};
+
+const _startAnimation = (direction, smooth = false) => {
+  switch (props.swipeType) {
+    case "translate":
+      let startIndex =
+        currentViewIndex.value -
+        (visibleCount.value - 1) / 2 +
+        (direction > 0 ? -1 : 0);
+      let endIndex =
+        currentViewIndex.value +
+        (visibleCount.value - 1) / 2 +
+        (direction > 0 ? 0 : 1);
+      for (let i = startIndex; i <= endIndex; ++i) {
+        element.value?.[
+          i == currentViewIndex.value
+            ? currentViewIndex.value
+            : modToRange(i, viewNum.value)
+        ]
+          ?.jsvGetProxyView(true)
+          .StartAnimation(
+            _getAnimation(direction, smooth, i == currentViewIndex.value)
+          );
+      }
+      break;
+    case "opacity":
+      break;
+    default:
+      break;
+  }
+};
+
+const _trigger = (direction) => {
+  if (props.totalFrame <= 1) return;
+  preOffset.value = offset.value;
+  offset.value += direction;
+  _startAnimation(direction > 0 ? 1 : -1, props.smoothTranslate);
+};
+
+const onBeVisible = (old_h, new_h, old_v, new_v) => {
+  if ((old_h && !new_h) || (old_v && !new_h)) {
+    stopAutoplay();
+  } else if ((!old_h && new_h) || (!old_v && new_h)) {
+    if (!focused.value) {
+      startAutoplay();
+    }
+  }
+};
+
+// 生命周期钩子
+onMounted(() => {
+  if (!focused.value) {
+    startAutoplay();
+  }
+});
+
+onBeforeUnmount(() => {
+  stopAutoplay();
+});
+
+// 暴露方法给父组件
+defineExpose({
+  getFocusBlockRef,
+  slideTo,
+});
+</script>
+
+<template>
+  <jsv-visible-sensor
+    :horizonShown="0.2"
+    :verticalShown="0.2"
+    :width="layoutInfo.width"
+    :height="layoutInfo.height"
+    :enable="true"
+    :callback="onBeVisible"
+  ></jsv-visible-sensor>
+  <jsv-focus-block
+    ref="focusBlock"
+    :name="name"
+    :style="{
+      left: layoutInfo.left,
+      top: layoutInfo.top,
+      width: layoutInfo.width,
+      height: layoutInfo.height,
+    }"
+    :onAction="{
+      onFocus: _onFocus,
+      onBlur: _onBlur,
+      onKeyDown: _onKeyDown,
+    }"
+  >
+    <div
+      :style="{
+        width: layoutInfo.width,
+        height: layoutInfo.height,
+        overflow: 'hidden',
+      }"
+    >
+      <div
+        :style="{
+          zIndex: 0,
+        }"
+      >
+        <div>
+          <div
+            v-for="(item, index) in viewInfoList"
+            :key="index"
+            :style="item.style"
+            ref="element"
+          >
+            <!-- 为了保证slot中的页面刷新。不加这个div slot中的img标签不会更新，vue或者是dom的bug？ -->
+            <div :key="item.dataIndex">
+              <slot
+                name="itemView"
+                :currentIndex="currentDataIndex"
+                :dataIndex="item.dataIndex"
+                :focused="focused"
+                :distanceToCenter="item.distanceToCenter"
+              ></slot>
+            </div>
+            <!-- <div
+              :style="{
+                top: 100,
+                width: 50,
+                height: 50,
+                color: '#0000ff',
+                fontSize: 40,
+              }"
+            >
+              {{ index }}
+            </div> -->
+          </div>
+        </div>
+      </div>
+
+      <div v-if="showIndicator" :style="indicatorLayout">
+        <div
+          v-for="index in indexList"
+          :key="index"
+          :style="
+            vertical
+              ? { top: indicatorDotSize * index }
+              : { left: indicatorDotSize * index }
+          "
+        >
+          <slot
+            name="indicatorDot"
+            :dataIndex="index"
+            :currentIndex="currentDataIndex"
+            :focused="focused"
+          >
+            <div
+              :style="{
+                width: dotSize,
+                height: dotSize,
+                backgroundColor:
+                  index == currentDataIndex
+                    ? 'rgba(50, 50, 50, 1.0)'
+                    : 'rgba(100, 100, 100, 0.7)',
+                borderRadius: Math.round(dotSize / 2) + 'px',
+              }"
+            ></div>
+          </slot>
+        </div>
+      </div>
+    </div>
+  </jsv-focus-block>
+</template>

package/utils/JsViewVueWidget/JsvSwiper/index.js

@@ -6,5 +6,7 @@
  * @Description: file content
  */
 import JsvSwiper from "./JsvSwiper.vue";
+import JsvSwiper2 from "./JsvSwiper2.vue";
+import JsvSmoothSwiper from "./JsvSmoothSwiper.vue";
 
-export default JsvSwiper;
+export { JsvSwiper, JsvSwiper2, JsvSmoothSwiper };