@shijiu/jsview-vue 0.9.684 → 0.9.783

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,8 +37,8 @@ import JsvActorMove, {
   JsvActorMoveControl,
 } from "jsview/utils/JsViewVueWidget/JsvActorMove";
 import JsvVisibleSensor from "jsview/utils/JsViewVueWidget/JsvVisibleSensor";
-import Indicator from "./Indicator.vue";
-import { ref } from "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]?.jsvMaskView.StartAnimation(
-        curViewAnimation
-      );
+      this.$refs["element" + this.currentViewIndex]
+        ?.jsvGetProxyView(true)
+        .StartAnimation(curViewAnimation);
       this.$refs[
         "element" + modToRange(this.currentViewIndex - direction, VIEW_NUM)
-      ]?.jsvMaskView.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/utils/JsViewVueWidget/JsvSwiper3D/JsvSwiper.vue

@@ -28,7 +28,7 @@
 
 <script>
 import Indicator from "./Indicator.vue";
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 import JsvVisibleSensor from "jsview/utils/JsViewVueWidget/JsvVisibleSensor";
 
 const VIEW_NUM = 4;

package/utils/JsViewVueWidget/JsvTextBox.vue

@@ -8,10 +8,11 @@
  *          verticalAlign {string}  垂直对齐方式 (必需) top、middle、bottom
  *          style {object}          样式(必需)
  *          enableLatex {bool}     是否启用Latex文字描画模式
+ *          textDirection {string} 内容文字的方向, 默认是unset, 此时会根据第一个字符的语言确定文字是ltr还是rtl
 -->
 
 <script setup>
-import { ref, computed } from "vue";
+import { ref, shallowRef, computed } from "vue";
 
 const props = defineProps({
   style: Object,
@@ -23,49 +24,28 @@ const props = defineProps({
     type: String,
     default: "middle",
   },
-  enableLatex: Boolean,
+  enableLatex: {
+    type: Boolean,
+    default: false,
+  },
   className: String,
+  textDirection: {
+    type: String,
+    default: "unset",
+  },
 });
 
-const innerStyle = computed(() => {
-  let result = { ...props.style };
-  if (!result.verticalAlign) {
-    result.verticalAlign = props.verticalAlign;
-  }
-  if (!result.lineAlign) {
-    result.lineAlign = props.lineAlign;
-  }
-  return result;
-});
-const disable = window.JsvDisableReactWrapper;
 </script>
 
 <template>
   <div>
-    <div v-if="disable" :style="style">
-      <div :style="{ position: 'static', display: 'table' }">
-        <div
-          :className="className"
-          :style="{
-            position: 'static',
-            display: 'table-cell',
-            width: style.width,
-            height: style.height,
-            verticalAlign: verticalAlign,
-          }"
-          jsv-inherit-class="2"
-        >
-          <slot></slot>
-        </div>
-      </div>
-    </div>
     <div
-      v-else
       :className="className"
       :style="style"
       :jsv_text_latex_enable="enableLatex ? 'true' : ''"
       :jsv_text_vertical_align="verticalAlign"
       :jsv_text_line_align="lineAlign"
+      :jsv_text_inner_direction="textDirection"
       jsv-inherit-class="1"
     >
       <slot></slot>

package/utils/JsViewVueWidget/JsvTouchContainer.vue

@@ -66,8 +66,8 @@ export default {
   },
   created() {},
   mounted() {
-    if (this.$refs.touchContainer && this.$refs.touchContainer.jsvMaskView) {
-      const view = this.$refs.touchContainer.jsvMaskView;
+    const view = this.$refs.touchContainer?.jsvGetProxyView(true);
+    if (view) {
       const page_width = this.flingPageWidth;
       const page_edge = this.flingPageEdge;
       const direction = this.direction;

package/utils/JsViewVueWidget/JsvTransparentDiv.vue

@@ -25,7 +25,7 @@ export default {
   },
   methods: {
     _updateInnerView() {
-      if (this.innerView === null) {
+      if (this.innerView === null && !this.html) {
         // 初始化View
 
         // 创建JsView图层穿透的texture，抠洞处理

package/utils/JsViewVueWidget/JsvVisibleSensor/JsvVisibleSensor.vue

@@ -29,7 +29,7 @@
 </template>
 
 <script setup>
-import { reactive, ref, toRaw, watchEffect, onMounted, defineExpose } from 'vue'
+import { reactive, ref, shallowRef, toRaw, watchEffect, onMounted, defineExpose } from 'vue'
 import { Forge } from "jsview/dom/jsv-forge-define";
 
 const props = defineProps({
@@ -69,7 +69,7 @@ const props = defineProps({
 });
 
 // 内部状态变量
-const viewRef = ref(null);
+const viewRef = shallowRef(null);
 const viewMounted = reactive({status: false})
 let sensorRef = null;
 
@@ -96,9 +96,9 @@ watchEffect(()=>{
         if (props.container) {
             window.MyContainerView = toRaw(props.container);
 
-            let jsv_main_view_ref = toRaw(props.container).jsvMainView;
+            let jsv_main_view_ref = toRaw(props.container).jsvGetProxyView();
             if (jsv_main_view_ref) {
-                sensorRef.ResetContainer(toRaw(props.container).jsvMainView);
+                sensorRef.ResetContainer(jsv_main_view_ref);
             } else {
                 console.error("Error: container is NOT a div");
             }
@@ -111,7 +111,7 @@ watchEffect(()=>{
 onMounted(()=>{
     console.log("JsvVisibleSensor: on mounted");
 
-    sensorRef = new Forge.VisibleSensor(toRaw(viewRef.value).jsvMainView, (old_h, new_h, old_v, new_v)=>{
+    sensorRef = new Forge.VisibleSensor(toRaw(viewRef.value).jsvGetProxyView(), (old_h, new_h, old_v, new_v)=>{
         // 获得横向和纵向的新旧状态值
         if (props.callback) {
             props.callback(old_h, new_h, old_v, new_v);

package/utils/JsViewVueWidget/index.js

@@ -2,7 +2,7 @@
  * @Author: ChenChanghua
  * @Date: 2022-07-05 11:00:51
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-08-18 13:17:17
+ * @LastEditTime: 2022-11-23 14:06:24
  * @Description: file content
  */
 export { default as JsvActorMove, JsvActorMoveControl } from "./JsvActorMove";
@@ -18,15 +18,15 @@ export { default as JsvSpray } from "./JsvSpray";
 export { default as JsvSpriteAnim, SpriteController } from "./JsvSpriteAnim";
 export { default as JsvSwiper } from "./JsvSwiper";
 export { default as JsvSwiper3D } from "./JsvSwiper3D";
-export { default as JsvTextureAnim, TexAlignAnchor, DECORATE_NINEPATCH_ALPHA_MIX, DECORATE_BORDER_RADIUS } from "./JsvTextureAnim";
+export {
+  default as JsvTextureAnim,
+  TexAlignAnchor,
+  DECORATE_NINEPATCH_ALPHA_MIX,
+  DECORATE_BORDER_RADIUS,
+} from "./JsvTextureAnim";
 export { default as JsvVisibleSensor } from "./JsvVisibleSensor";
 export { default as JsvFilterView } from "./JsvFilterView.vue";
-export {
-  default as JsvGrid,
-  PageType,
-  LineType,
-  FocusMoveType,
-} from "./JsvGrid.vue";
+export { default as JsvGrid, PageType, LineType } from "./JsvGrid.vue";
 export { default as JsvHole } from "./JsvHole.js";
 export { default as JsvMarquee } from "./JsvMarquee.vue";
 export { default as JsvMaskClipDiv } from "./JsvMaskClipDiv.vue";

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>