@shijiu/jsview-vue 0.9.766 → 0.9.804

package/utils/JsViewVueWidget/JsvSpray/JsvSpray.vue

@@ -57,7 +57,7 @@ let buildForgeView = (pointRes, sprayStyle, sizeRef, ignoreClip) => {
       texture_manager.GetImage2(image_url, false, null, "RGB_8888", null)
     );
   }
-  const spray_view = new Forge.SprayView(texture_setting, ignoreClip);
+  const spray_view = new Forge.SprayView(texture_setting);
   const add_num_per_frame = sprayStyle.addNumSpeed
     ? sprayStyle.addNumSpeed
     : 0.001;
@@ -67,6 +67,24 @@ let buildForgeView = (pointRes, sprayStyle, sizeRef, ignoreClip) => {
     typeof sprayStyle.accelerateY !== "undefined"
       ? sprayStyle.accelerateY
       : -100;
+  let angularVelocityMin = 0,
+    angularVelocityMax = 0;
+  if (
+    typeof sprayStyle.angularVelocityMin === "number" &&
+    typeof sprayStyle.angularVelocityMax === "number"
+  ) {
+    angularVelocityMin = sprayStyle.angularVelocityMin;
+    angularVelocityMax = sprayStyle.angularVelocityMax;
+  }
+  let alphaMin = 1,
+    alphaMax = 1;
+  if (
+    typeof sprayStyle.alphaMin === "number" &&
+    typeof sprayStyle.alphaMax === "number"
+  ) {
+    alphaMin = sprayStyle.alphaMin;
+    alphaMax = sprayStyle.alphaMax;
+  }
   spray_view.SetSprayInfo(
     sprayStyle.type,
     sprayStyle.particleNum,
@@ -83,7 +101,12 @@ let buildForgeView = (pointRes, sprayStyle, sizeRef, ignoreClip) => {
     accelerate_x,
     accelerate_y,
     sprayStyle.enableFade,
-    sprayStyle.enableShrink
+    sprayStyle.enableShrink,
+    ignoreClip,
+    angularVelocityMin,
+    angularVelocityMax,
+    alphaMin,
+    alphaMax
   );
   const view_width =
     sprayStyle.deltaWidth === 0 ? 1 : 2 * sprayStyle.deltaWidth;
@@ -109,13 +132,13 @@ export default {
     ignoreClip: {
       type: Boolean,
       default: false,
-    }
+    },
   },
   data() {
     return {
       size: {
         width: 0,
-        height: 0
+        height: 0,
       },
       viewId: -1,
     };
@@ -129,11 +152,21 @@ export default {
     },
   },
   created() {
-    this.viewId = buildForgeView(this.pointRes, this.sprayStyle, this.size, this.ignoreClip);
+    this.viewId = buildForgeView(
+      this.pointRes,
+      this.sprayStyle,
+      this.size,
+      this.ignoreClip
+    );
   },
   updated() {
     this.unloadView();
-    this.viewId = buildForgeView(this.pointRes, this.sprayStyle, this.size, this.ignoreClip);
+    this.viewId = buildForgeView(
+      this.pointRes,
+      this.sprayStyle,
+      this.size,
+      this.ignoreClip
+    );
   },
   beforeUnmount() {
     this.unloadView();
@@ -142,7 +175,8 @@ export default {
 </script>
 
 <template>
-  <div 
-    :style="{width: size.width, height: size.height}"
-    :jsv_innerview="viewId"></div>
+  <div
+    :style="{ width: size.width, height: size.height }"
+    :jsv_innerview="viewId"
+  ></div>
 </template>

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/utils/JsViewVueWidget/JsvTextBox.vue

@@ -12,7 +12,7 @@
 -->
 
 <script setup>
-import { ref, shallowRef, computed } from "vue";
+import { ref, shallowRef, computed, defineProps } from "vue";
 
 const props = defineProps({
   style: Object,

package/utils/JsViewVueWidget/JsvVisibleSensor/JsvVisibleSensor.vue

@@ -29,7 +29,7 @@
 </template>
 
 <script setup>
-import { reactive, ref, shallowRef, toRaw, watchEffect, onMounted, defineExpose } from 'vue'
+import { reactive, ref, shallowRef, toRaw, watchEffect, onMounted, defineProps, defineExpose } from 'vue'
 import { Forge } from "jsview/dom/jsv-forge-define";
 
 const props = defineProps({

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>