@shijiu/jsview-vue 0.9.766 → 0.9.783

package/utils/JsViewVueWidget/JsvMarquee.vue

@@ -5,19 +5,16 @@
  *          text          {String}   文字内容
  *          style         {Object}   样式
  *          slideSpeed    {int}      滚动速度 px/s, 默认60
+ *          slideDirection{String}   滚动方向 ste(start to end)/ets(end to start)/ltr/rtl
  *          forceSlide    {boolean}  短文字是否滚动，默认false
+ * 说明
+ * JsvMarquee会识别阿拉伯字符自动设置direction
 -->
 
 <script setup>
 import { Forge } from "../../dom/jsv-forge-define";
-import { getTextWidth } from "../JsViewVueTools/JsvTextTools";
-import {
-  shallowRef,
-  computed,
-  toRaw,
-  onMounted,
-  onBeforeUnmount,
-} from "vue";
+import { TextTools } from "../JsViewVueTools/JsvTextTools";
+import { shallowRef, computed, toRaw, onMounted, onBeforeUnmount } from "vue";
 
 const defaultFontStyle = () => {
   return {
@@ -55,6 +52,14 @@ const props = defineProps({
     type: Number,
     default: 60,
   },
+  slideDirection: {
+    type: String,
+    validator(value) {
+      // The value must match one of these strings
+      return ["ste", "ets", "ltr", "rtl"].includes(value);
+    },
+    default: "ste",
+  },
   forceSlide: {
     type: Boolean,
     default: false,
@@ -65,6 +70,15 @@ const textDiv = shallowRef(null);
 let animState = 0;
 let animIdleHandler = -1;
 let asyncStartHandler = -1;
+
+const _direction = computed(() => {
+  if (props.style?.direction == "rtl" || props.style.direction == "ltr") {
+    return props.style.direction;
+  } else {
+    return TextTools.isRtl(props.text) ? "rtl" : "ltr";
+  }
+});
+
 const fontStyle = computed(() => {
   let { left, top, width, height, ...rest } = props.style;
   let r = defaultFontStyle();
@@ -73,12 +87,14 @@ const fontStyle = computed(() => {
     //滚送时必需start对齐
     r.textAlign = "start";
   }
+  r.direction = _direction.value;
   return r;
 });
+
 //rtl文字需要先获得文字宽度
 let textWidth =
   fontStyle.value.direction == "rtl"
-    ? getTextWidth(props.text, fontStyle.value)
+    ? TextTools.getTextWidth(props.text, fontStyle.value)
     : 0;
 const slideDivLeft = computed(() =>
   fontStyle.value.direction == "rtl" && props.style.width < textWidth
@@ -86,16 +102,61 @@ const slideDivLeft = computed(() =>
     : 0
 );
 
+const getAnimInfo = (state) => {
+  const info = {
+    start: 0,
+    end: 0,
+  };
+  const isRtl = _direction.value == "rtl";
+  if (state == 0) {
+    //滚出
+    if (isRtl) {
+      if (props.slideDirection == "rtl" || props.slideDirection == "ste") {
+        info.end = textWidth;
+      } else {
+        //反向滚动
+        info.end = -props.style.width;
+      }
+    } else {
+      if (props.slideDirection == "ltr" || props.slideDirection == "ste") {
+        info.end = -textWidth;
+      } else {
+        //反向滚动
+        info.end = props.style.width;
+      }
+    }
+  } else {
+    //滚入
+    if (isRtl) {
+      if (props.slideDirection == "rtl" || props.slideDirection == "ste") {
+        info.start = -props.style.width;
+      } else {
+        //反向滚动
+        info.start = textWidth;
+      }
+    } else {
+      if (props.slideDirection == "ltr" || props.slideDirection == "ste") {
+        info.start = props.style.width;
+      } else {
+        //反向滚动
+        info.start = -textWidth;
+      }
+    }
+  }
+  return info;
+};
+
 const slideStep = () => {
+  let animInfo = getAnimInfo(animState);
   if (animState == 0) {
     // 文字从原始位置，移动出屏幕(每次完整移动，停顿1秒)
-    let start = 0,
-      end = fontStyle.value.direction == "rtl" ? textWidth : -textWidth;
+    // let start = 0,
+    //   end = fontStyle.value.direction == "rtl" ? textWidth : -textWidth;
     animIdleHandler = setTimeout(() => {
       animIdleHandler = -1;
       const anim = new Forge.TranslateFrameAnimation(
-        start,
-        end,
+        animInfo.start,
+        animInfo.end,
         props.slideSpeed,
         true,
         0,
@@ -119,14 +180,14 @@ const slideStep = () => {
     }, 1000);
   } else {
     // 文字从屏幕外部，移动回屏幕中的文字原始位置
-    let start =
-        fontStyle.value.direction == "rtl"
-          ? -props.style.width
-          : props.style.width,
-      end = 0;
+    // let start =
+    //     fontStyle.value.direction == "rtl"
+    //       ? -props.style.width
+    //       : props.style.width,
+    //   end = 0;
     const anim = new Forge.TranslateFrameAnimation(
-      start,
-      end,
+      animInfo.start,
+      animInfo.end,
       props.slideSpeed,
       true,
       props.style.width,

package/utils/JsViewVueWidget/JsvSwiper/JsvSwiper.vue

@@ -10,9 +10,10 @@
  *          indicatorAlign          {String}   指示面板的 align, 值为 start / middle / end，默认为middle
  *          totalFrame          {int}   (必需)item 的个数
  *          firstFrame          {int}   初始 item 的 index，默认为0
- *          layoutInfo          {Object}   (必需)组件的大小 {width: 0, height: 0}
- *          onClick          {Function}   点击事件 function () {}
+ *          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
@@ -22,6 +23,7 @@
  *          swipeType          {String}   切换方式，目前只支持 translate，之后可能会添加 opacity 等方式
  *          smoothTranslate          {boolean}   平滑模式动画开关
  *          reverseSwipe      {boolean} 反转滚动方向,默认值为false. 默认滚动方向是正向, 既向index增大的方向, 反转后为反向, 既向index减小的方向
+ *          disableLoopWhenFocus {boolean} 获焦时按键是否循环滚动
  *     public methods:
  *          slideTo
  *          @description 滚动到指定id
@@ -35,7 +37,7 @@ import JsvActorMove, {
   JsvActorMoveControl,
 } from "jsview/utils/JsViewVueWidget/JsvActorMove";
 import JsvVisibleSensor from "jsview/utils/JsViewVueWidget/JsvVisibleSensor";
-import Indicator from "./Indicator.vue";
+import { EdgeDirection } from "../../JsViewEngineWidget/WidgetCommon";
 import { ref, shallowRef } from "vue";
 
 const VIEW_NUM = 3;
@@ -50,8 +52,24 @@ function modToRange(value, mod, start = 0) {
   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;
+  }
+};
+
 export default {
-  components: { Indicator, JsvActorMove, JsvVisibleSensor },
+  components: { JsvActorMove, JsvVisibleSensor },
   props: {
     showIndicator: {
       type: Boolean,
@@ -71,6 +89,10 @@ export default {
     },
     indicatorAlign: {
       type: String,
+      validator(value) {
+        // The value must match one of these strings
+        return ["start", "middle", "end"].includes(value);
+      },
       default: "middle",
     },
     totalFrame: {
@@ -91,6 +113,9 @@ export default {
     onChange: {
       type: Function,
     },
+    onEdge: {
+      type: Function,
+    },
     autoplayInterval: {
       type: Number,
       default: 5000,
@@ -129,8 +154,17 @@ export default {
       type: Boolean,
       default: false,
     },
+    disableLoopWhenFocus: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
+    indexList() {
+      return new Array(this.totalFrame).fill(0).map((_, index) => {
+        return index;
+      });
+    },
     indicatorLayout() {
       let indicatorSize =
         this.totalFrame * (this.dotSize + this.dotGap) - this.dotGap;
@@ -286,47 +320,64 @@ export default {
       }
     },
     _onKeyDown(ev) {
+      let direction = 0;
       switch (ev.keyCode) {
         case 37:
           if (!this.vertical) {
-            this._trigger(-1);
-            return true;
+            direction = -1;
           }
           break;
         case 38:
           if (this.vertical) {
-            this._trigger(-1);
-            return true;
+            direction = -1;
           }
           break;
         case 39:
           if (!this.vertical) {
-            this._trigger(1);
-            return true;
+            direction = 1;
           }
           break;
         case 40:
           if (this.vertical) {
-            this._trigger(1);
-            return true;
+            direction = 1;
           }
           break;
         case 13:
-          this.onClick?.();
+          this.onClick?.(this.currentDataIndex);
           return true;
         default:
-          break;
+          return false;
       }
 
-      return false;
-    },
-    _onAnimationEnd() {
-      // if (this.autoplay && this.autoplayInterval > 0 && !this.focused) {
-      //   this.timeoutHandler = setTimeout(() => {
-      //     this._trigger(1);
-      //   }, this.autoplayInterval);
-      // }
+      //处理方向键
+      if (direction !== 0) {
+        if (!this.disableLoopWhenFocus) {
+          this._trigger(direction);
+          return true;
+        } else {
+          if (
+            this.currentDataIndex + direction >= 0 &&
+            this.currentDataIndex + direction < this.totalFrame
+          ) {
+            this._trigger(direction);
+            return true;
+          }
+        }
+      }
+
+      //未处理方向键
+      this.onEdge?.({
+        direction: keyCode2EdgeDirection(ev.keyCode),
+        rect: {
+          x: this.layoutInfo.left,
+          y: this.layoutInfo.top,
+          width: this.layoutInfo.width,
+          height: this.layoutInfo.height,
+        },
+      });
+      return true;
     },
+    _onAnimationEnd() {},
     _onFocus() {
       this.focused = true;
       this.stopAutoplay();
@@ -370,12 +421,14 @@ export default {
       curViewAnimation.SetAnimationListener(
         new Forge.AnimationListener(null, this._onAnimationEnd, null)
       );
-      this.$refs["element" + this.currentViewIndex]?.jsvGetProxyView(true).StartAnimation(
-        curViewAnimation
-      );
+      this.$refs["element" + this.currentViewIndex]
+        ?.jsvGetProxyView(true)
+        .StartAnimation(curViewAnimation);
       this.$refs[
         "element" + modToRange(this.currentViewIndex - direction, VIEW_NUM)
-      ]?.jsvGetProxyView(true).StartAnimation(preViewAnimation);
+      ]
+        ?.jsvGetProxyView(true)
+        .StartAnimation(preViewAnimation);
     },
     _startSmoothTranslateAnimation() {
       let curController = this.controllerList[this.currentViewIndex];
@@ -412,7 +465,9 @@ export default {
       if ((old_h && !new_h) || (old_v && !new_h)) {
         this.stopAutoplay();
       } else if ((!old_h && new_h) || (!old_v && new_h)) {
-        this.startAutoplay();
+        if (!this.focused) {
+          this.startAutoplay();
+        }
       }
     },
   },
@@ -438,6 +493,12 @@ export default {
   ></jsv-visible-sensor>
   <jsv-focus-block
     :name="name"
+    :style="{
+      left: layoutInfo.left,
+      top: layoutInfo.top,
+      width: layoutInfo.width,
+      height: layoutInfo.height,
+    }"
     :onAction="{
       onFocus: _onFocus,
       onBlur: _onBlur,
@@ -481,17 +542,6 @@ export default {
                 :focused="focused"
               ></slot>
             </div>
-
-            <!-- <div
-              :style="{
-                width: 50,
-                height: 50,
-                top: 200,
-                fontSize: '30px',
-              }"
-            >
-              {{ index }}
-            </div> -->
           </jsv-actor-move>
         </div>
         <div v-else>
@@ -510,53 +560,39 @@ export default {
                 :focused="focused"
               ></slot>
             </div>
-
-            <!-- <div
-            :style="{
-              width: 50,
-              height: 50,
-              top: 200,
-              fontSize: '30px',
-            }"
-          >
-            {{ index + " " + item.dataIndex }}
-          </div> -->
           </div>
         </div>
       </div>
 
       <div v-if="showIndicator" :style="indicatorLayout">
-        <indicator
-          :number="totalFrame"
-          :current="currentDataIndex"
-          :itemSize="indicatorDotSize"
-          :vertical="vertical"
+        <div
+          v-for="index in indexList"
+          :key="index"
+          :style="
+            vertical
+              ? { top: indicatorDotSize * index }
+              : { left: indicatorDotSize * index }
+          "
         >
-          <template #current>
-            <slot name="indicatorCur">
-              <div
-                :style="{
-                  width: 10,
-                  height: 10,
-                  backgroundColor: 'rgba(50, 50, 50, 1.0)',
-                  borderRadius: '5px',
-                }"
-              ></div>
-            </slot>
-          </template>
-          <template #normal>
-            <slot name="indicatorNor">
-              <div
-                :style="{
-                  width: 10,
-                  height: 10,
-                  backgroundColor: 'rgba(100, 100, 100, 0.7)',
-                  borderRadius: '5px',
-                }"
-              ></div>
-            </slot>
-          </template>
-        </indicator>
+          <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>

package/utils/JsViewVueWidget/JsvSwiper/index.js

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

package/samples/MetroWidgetDemos/Advanced/App.vue

@@ -1,46 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2022-07-11 13:31:36
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-11-02 14:51:40
- * @Description: file content
--->
-<script setup>
-import { MetroWidget, VERTICAL, EdgeDirection, useFocusHub } from "jsview";
-import { useRouter } from "vue-router";
-import Buttons from "./Buttons.vue";
-import Mixed from "./Mixed.vue";
-import Widgets from "./widgets/Widgets.vue";
-
-const router = useRouter();
-const focusHub = useFocusHub();
-
-const onFocus = () => {
-  focusHub.setFocus("mwButton");
-};
-const onKeyDown = (ev) => {
-  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-    router.go(-1);
-  }
-  return true;
-};
-</script>
-
-<template>
-  <jsv-focus-block
-    autoFocus
-    :onAction="{
-      onKeyDown,
-      onFocus,
-    }"
-    :style="{
-      width: 1920,
-      height: 1080,
-      backgroundColor: '#007788',
-    }"
-  >
-    <buttons></buttons>
-    <mixed></mixed>
-    <widgets></widgets>
-  </jsv-focus-block>
-</template>

package/samples/MetroWidgetDemos/Advanced/Buttons.vue

@@ -1,70 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2022-07-11 13:31:36
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-18 09:49:59
- * @Description: file content
--->
-<script setup>
-import { MetroWidget, VERTICAL, EdgeDirection } from "jsview";
-import { useFocusHub } from "jsview";
-import { advanceButton } from "../data";
-import ButtonItem from "./ButtonItem.vue";
-
-const focusHub = useFocusHub();
-
-//item为Buttonitem的一些回调
-const provideData = () => {
-  return advanceButton;
-};
-const measures = (item) => {
-  return {
-    width: item.width,
-    height: item.height,
-    marginRight: item.marginRight,
-    marginBottom: item.marginBottom,
-  };
-};
-const onEdge = (edgeInfo) => {
-  if (edgeInfo.direction == EdgeDirection.right) {
-    focusHub.setFocus("mwWidget");
-  } else if (edgeInfo.direction == EdgeDirection.bottom) {
-    focusHub.setFocus("mwMix");
-  }
-};
-</script>
-
-<template>
-  <div
-    :style="{
-      left: 50,
-      top: 20,
-      width: 300,
-      height: 400,
-      fontSize: 30,
-      color: '#FFFFFF',
-    }"
-  >
-    {{ `item可以是可获得焦点的控件` }}
-  </div>
-  <metro-widget
-    name="mwButton"
-    :top="120"
-    :left="50"
-    :provideData="provideData"
-    :width="220"
-    :height="400"
-    :direction="VERTICAL"
-    :measures="measures"
-    :onEdge="onEdge"
-  >
-    <template #renderItem="{ data, query, onAction, onItemEdge }">
-      <button-item
-        :data="data"
-        :query="query"
-        :onAction="onAction"
-        :onItemEdge="onItemEdge"
-      />
-    </template>
-  </metro-widget>
-</template>

package/samples/MetroWidgetDemos/Advanced/Mixed.vue

@@ -1,77 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2022-07-11 13:31:36
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-11-02 15:37:40
- * @Description: file content
--->
-<script setup>
-import { MetroWidget, VERTICAL, EdgeDirection } from "jsview";
-import { useFocusHub } from "jsview";
-import { advanceMix } from "../data";
-import ButtonItem from "./ButtonItem.vue";
-import Item from "../Item.vue";
-
-const focusHub = useFocusHub();
-
-//item混排的回调
-const provideData = () => {
-  return advanceMix;
-};
-const measures = (item) => {
-  return {
-    width: item.width,
-    height: item.height,
-    marginRight: item.marginRight,
-    marginBottom: item.marginBottom,
-  };
-};
-const onEdge = (edgeInfo) => {
-  if (edgeInfo.direction == EdgeDirection.right) {
-    focusHub.setFocus("mwWidget");
-  } else if (edgeInfo.direction == EdgeDirection.top) {
-    focusHub.setFocus("mwButton");
-  }
-};
-</script>
-
-<template>
-  <div
-    :style="{
-      left: 50,
-      top: 350,
-      width: 300,
-      height: 400,
-      fontSize: 30,
-      color: '#FFFFFF',
-    }"
-  >
-    {{ `item可以普通描画控件和可获焦控件混排` }}
-  </div>
-  <metro-widget
-    name="mwMix"
-    :top="450"
-    :left="50"
-    :provideData="provideData"
-    :width="260"
-    :height="440"
-    :padding="{
-      top: 20,
-      left: 20,
-    }"
-    :direction="VERTICAL"
-    :measures="measures"
-    :onEdge="onEdge"
-  >
-    <template #renderItem="{ data, query, onAction, onItemEdge }">
-      <button-item
-        v-if="data.type == 'button'"
-        :data="data"
-        :query="query"
-        :onAction="onAction"
-        :onItemEdge="onItemEdge"
-      />
-      <item v-else :data="data" :query="query" :onAction="onAction" />
-    </template>
-  </metro-widget>
-</template>