@shijiu/jsview-vue 0.9.500 → 0.9.602

package/utils/JsViewVueWidget/JsvQrcode/JsvQrcode.vue

@@ -116,7 +116,7 @@ export default {
     if (this.jsvBaseView === null) {
       this.jsvBaseView = new Forge.LayoutView();
       this.innerViewId = ForgeExtension.RootActivity.ViewStore.add(
-        new Forge.ViewInfo(this.jsvBaseView, { x: 0, y: 0 })
+        new Forge.ViewInfo(this.jsvBaseView)
       );
     }
     // 构建QRCdoe view

package/utils/JsViewVueWidget/JsvSpray/JsvSpray.vue

@@ -34,7 +34,7 @@
 <script>
 import { Forge, ForgeExtension } from "../../../dom/jsv-forge-define";
 
-let buildForgeView = (pointRes, sprayStyle) => {
+let buildForgeView = (pointRes, sprayStyle, sizeRef) => {
   if (!pointRes) {
     return -1;
   }
@@ -88,13 +88,10 @@ let buildForgeView = (pointRes, sprayStyle) => {
     sprayStyle.deltaWidth === 0 ? 1 : 2 * sprayStyle.deltaWidth;
   const view_height =
     sprayStyle.deltaHeight === 0 ? 1 : 2 * sprayStyle.deltaHeight;
+  sizeRef.width = view_width;
+  sizeRef.height = view_height;
   return ForgeExtension.RootActivity.ViewStore.add(
-    new Forge.ViewInfo(spray_view, {
-      x: 0,
-      y: 0,
-      width: view_width,
-      height: view_height,
-    })
+    new Forge.ViewInfo(spray_view)
   );
 };
 
@@ -111,6 +108,10 @@ export default {
   },
   data() {
     return {
+      size: {
+        width: 0,
+        height: 0
+      },
       viewId: -1,
     };
   },
@@ -123,11 +124,11 @@ export default {
     },
   },
   created() {
-    this.viewId = buildForgeView(this.pointRes, this.sprayStyle);
+    this.viewId = buildForgeView(this.pointRes, this.sprayStyle, this.size);
   },
   updated() {
     this.unloadView();
-    this.viewId = buildForgeView(this.pointRes, this.sprayStyle);
+    this.viewId = buildForgeView(this.pointRes, this.sprayStyle, this.size);
   },
   beforeUnmount() {
     this.unloadView();
@@ -136,5 +137,7 @@ export default {
 </script>
 
 <template>
-  <div :jsv_innerview="viewId"></div>
+  <div 
+    :style="{width: size.width, height: size.height}"
+    :jsv_innerview="viewId"></div>
 </template>

package/utils/JsViewVueWidget/JsvSpriteAnim/index.js

@@ -1,6 +1,5 @@
-import JsvSpriteAnim from './JsvSpriteAnim.vue';
-import SpriteController from './SpriteController.js';
+import JsvSpriteAnim from "./JsvSpriteAnim.vue";
+import { SpriteController } from "./SpriteController.js";
 
 export default JsvSpriteAnim;
 export { SpriteController };
-

package/utils/JsViewVueWidget/JsvSwiper/JsvSwiper.vue

@@ -21,6 +21,7 @@
  *          onBlur          {Function}   失去焦点的回调
  *          swipeType          {String}   切换方式，目前只支持 translate，之后可能会添加 opacity 等方式
  *          smoothTranslate          {boolean}   平滑模式动画开关
+ *          reverseSwipe      {boolean} 反转滚动方向,默认值为false. 默认滚动方向是正向, 既向index增大的方向, 反转后为反向, 既向index减小的方向
  *     public methods:
  *          slideTo
  *          @description 滚动到指定id
@@ -123,6 +124,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    reverseSwipe: {
+      type: Boolean,
+      default: false,
+    }
   },
   computed: {
     indicatorLayout() {
@@ -263,7 +268,7 @@ export default {
           clearInterval(this.timeoutHandler);
         }
         this.timeoutHandler = setInterval(() => {
-          this._trigger(1);
+          this._trigger(this.reverseSwipe ? -1 : 1);
         }, this.autoplayInterval);
       }
     },

package/utils/JsViewVueWidget/JsvSwiper3D/JsvSwiper.vue

@@ -23,6 +23,7 @@
  *          backgroundImage          {String}   组件背景图
  *          backgroundColor          {String}   组件背景颜色
  *          scale          {float}   当前 item 的放大倍数, 默认为1
+ *          reverseSwipe      {boolean} 反转滚动方向,默认值为false. 默认滚动方向是正向, 既向index增大的方向, 反转后为反向, 既向index减小的方向
 -->
 
 <script>
@@ -120,6 +121,10 @@ export default {
     backgroundColor: {
       type: String,
     },
+    reverseSwipe: {
+      type: Boolean,
+      default: false,
+    }
   },
   computed: {
     indicatorLayout() {
@@ -311,7 +316,7 @@ export default {
       if (this.autoplayInterval > 0) {
         this.intervalHandler = setInterval(() => {
           this.preOffset = this.offset;
-          this.offset = this.offset + 1;
+          this.offset = this.offset + this.reverseSwipe ? -1 : 1;
         }, this.autoplayInterval);
       }
     },

package/utils/JsViewVueWidget/JsvTextureAnim/JsvTextureAnim.vue

@@ -204,7 +204,8 @@ export default {
 
       if (decorate && decorate.type == DECORATE_NINEPATCH_ALPHA_MIX && decorate.animTime > 0) {
         // Ninepatch模式可以设置长宽的过渡动画
-        transition = `left ${this.animTime}s, top ${this.animTime}s, width ${this.animTime}s, height ${this.animTime}s`;
+        let anim_time = decorate.animTime;
+        transition = `left ${anim_time}s, top ${anim_time}s, width ${anim_time}s, height ${anim_time}s`;
       }
 
       return transition;
@@ -237,21 +238,25 @@ export default {
       }
 
       // 4.设置texture的动画形变
-      this.forgeAnimation = new Forge.CssKeyframeAnimation(
-        "@keyframes test" + this.animation,
-        this.duration,
-        null,
-        1,
-        1
-      );
-      this.forgeAnimation.EnableDelay(this.delay).SetRepeat(this.repeat);
-      this.forgeAnimation.SetAnimationListener(
-        new Forge.AnimationListener(
+      if (this.animation) {
+        this.forgeAnimation = new Forge.CssKeyframeAnimation(
+          "@keyframes test" + this.animation,
+          this.duration,
           null,
-          this._onAnimationEnd,
-          null
-        )
-  		);
+          1,
+          1
+        );
+        this.forgeAnimation.EnableDelay(this.delay).SetRepeat(this.repeat);
+        this.forgeAnimation.SetAnimationListener(
+          new Forge.AnimationListener(
+            null,
+            this._onAnimationEnd,
+            null
+          )
+        );
+      } else {
+        this.forgeAnimation = null;
+      }
 
       // 5. inner view标准处理
       this.viewStoreRef = ForgeExtension.RootActivity
@@ -259,12 +264,7 @@ export default {
         : Forge.sViewStore;
 
       this.innerViewId = this.viewStoreRef.add(
-        new Forge.ViewInfo(this.innerView, {
-          x: 0,
-          y: 0,
-          width: this.width,
-          height: this.height,
-        })
+        new Forge.ViewInfo(this.innerView)
       );
     }
   },
@@ -285,6 +285,10 @@ export default {
 <template>
   <div 
     :style="{
+      top: top,
+      left: left, 
+      width: width,
+      height: height,
       transition: getTransition(),
     }"
     :jsv_innerview="innerViewId">

package/utils/JsViewVueWidget/JsvTransparentDiv.vue

@@ -41,15 +41,9 @@ export default {
         // 通过内置函数构造定制的LayoutView
         this.innerView = new Forge.LayoutView(textureSetting);
         this.innerViewId = ForgeExtension.RootActivity.ViewStore.add(
-          new Forge.ViewInfo(this.innerView, null)
+          new Forge.ViewInfo(this.innerView)
         );
       }
-
-      // 更新宽高
-      this.innerView.ResetLayoutParams({
-        width: this.style.width,
-        height: this.style.height,
-      });
     },
   },
   created() {
@@ -81,7 +75,12 @@ export default {
   ></div>
   <div
     :jsv_innerview="innerViewId"
-    :style="{ left: style.left, top: style.top }"
+    :style="{ 
+      left: style.left, 
+      top: style.top,
+      width: style.width, 
+      height: style.height 
+    }"
   >
     <slot></slot>
   </div>

package/utils/JsViewVueWidget/JsvVisibleSensor/JsvVisibleSensor.vue

@@ -0,0 +1,141 @@
+<!--
+ * 【模块 export 内容】
+ * JsvVisibleSensor: 可视区域监控器
+ * props说明:
+ *     horizonShown  {number}  (可选, 可响应式, 默认1.0完全露出)横轴百分比区域完全显示时(左边或右边完全露出，仅中间段判断会失效),
+ *                             横轴切换到显示状态，否则为不可视状态
+ *     verticalShown  {number} (可选, 可响应式)纵轴百分比区域完全显示时(上边或下边完全露出，仅中间段判断会失效),
+ *                             纵轴切换到显示状态，否则为不可视状态
+ *     left   {number}  (可选, 可响应式)可视检测区域的left
+ *     top   {number}  (可选, 可响应式)可视检测区域的top
+ *     width   {number}  (可选, 可响应式)可视检测区域的width
+ *     height   {number}  (可选, 可响应式)可视检测区域的height
+ *
+ *     container {div reference}  (可选, 可响应式)子区域参照，若为null，则认为检测可视区域为全屏幕
+ *
+ *     callback {function} (必须, 可响应式)可视变化时的回调处理, 参数
+ *               (old_horizantal_visible, new_horizantal_visible, old_vertical_visible, new_vertical_visible)
+ -->
+
+<template>
+    <div ref="viewRef" :style="{
+        top: props.top,
+        left: props.left,
+        width: props.width,
+        height: props.height,
+        }" >
+        <slot/>
+    </div>
+</template>
+
+<script setup>
+import { reactive, ref, toRaw, watchEffect, onMounted, defineExpose } from 'vue'
+import { Forge } from "jsview/dom/jsv-forge-define";
+
+const props = defineProps({
+    // (支持reactive)可视区域设定
+    horizonShown: Number,
+    verticalShown: Number,
+
+    // (支持reactive)Container, 父区域的div引用, 
+    container: Object,
+
+    // (不支持reactive)回调处理
+    callback: Function,
+
+    // (支持reactive)位置信息
+    left: {
+        type: Number,
+        default: 0,
+    },
+    top: {
+        type: Number,
+        default: 0,
+    },
+    width: {
+        type: Number,
+        require: true,
+    },
+    height: {
+        type: Number,
+        require: true,
+    },
+
+    // (支持reactive)是否激活，仍然在渲染树时，非必须可以通过enable关闭以节省CPU开销
+    enable: {
+        type: Boolean,
+        default: true,
+    }
+});
+
+// 内部状态变量
+const viewRef = ref(null);
+const viewMounted = reactive({status: false})
+let sensorRef = null;
+
+// 变更检测范围
+watchEffect(()=>{
+    if (viewMounted.status) {
+        let horizon = fixAreaValue(props.horizonShown);
+        let vertical = fixAreaValue(props.verticalShown);
+
+        sensorRef.ResetArea({horizon, vertical})
+    }
+})
+
+// 变更enable状态
+watchEffect(()=>{
+    if (viewMounted.status) {
+        sensorRef.Enable(props.enable)
+    }
+})
+
+// 检测container变化
+watchEffect(()=>{
+    if (viewMounted.status) {
+        if (props.container) {
+            window.MyContainerView = toRaw(props.container);
+
+            let jsv_main_view_ref = toRaw(props.container).jsvMainView;
+            if (jsv_main_view_ref) {
+                sensorRef.ResetContainer(toRaw(props.container).jsvMainView);
+            } else {
+                console.error("Error: container is NOT a div");
+            }
+        } else {
+            sensorRef.ResetContainer(null); // 无container
+        }
+    }
+})
+
+onMounted(()=>{
+    console.log("JsvVisibleSensor: on mounted");
+
+    sensorRef = new Forge.VisibleSensor(toRaw(viewRef.value).jsvMainView, (old_h, new_h, old_v, new_v)=>{
+        // 获得横向和纵向的新旧状态值
+        if (props.callback) {
+            props.callback(old_h, new_h, old_v, new_v);
+        }
+    });
+    viewMounted.status = true;
+})
+
+// 外部方法
+defineExpose({
+
+})
+
+// 内部方法
+function fixAreaValue(origin_value) {
+    if (origin_value > 1) {
+        console.warn(`will limited to 1 origin=${origin_value}`);
+        return 1;
+    } else if (origin_value < 0) {
+        console.warn(`will limited to 0 origin=${origin_value}`);
+        return 0;
+    } else {
+        return origin_value;
+    }
+}
+
+</script>

package/utils/JsViewVueWidget/JsvVisibleSensor/index.js

@@ -0,0 +1,9 @@
+//考虑到.vue文件除了export default的component外，还有可能export其他对象,因此使用import * as
+import * as JsvVisibleSensor from "./JsvVisibleSensor.vue";
+
+let _JsvVisibleSensor = JsvVisibleSensor;
+// if (window.JsvWidgetWrapperGroup && window.JsvWidgetWrapperGroup.BrowserVisibleSensor) {
+//     JsvVisibleSensor = window.JsvWidgetWrapperGroup.BrowserVisibleSensor;
+// }
+
+export default _JsvVisibleSensor.default

package/utils/JsViewVueWidget/index.js

@@ -0,0 +1,42 @@
+/*
+ * @Author: ChenChanghua
+ * @Date: 2022-07-05 11:00:51
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-07-08 17:08:08
+ * @Description: file content
+ */
+export { default as JsvActorMove, JsvActorMoveControl } from "./JsvActorMove";
+export { default as JsvApic, LoopType } from "./JsvApic";
+export { default as JsvInput, InputType } from "./JsvInput";
+export {
+  default as JsvPreload,
+  buildPreloadInfo,
+  buildDownloadInfo,
+} from "./JsvPreload";
+export { default as JsvQrcode } from "./JsvQrcode";
+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 } 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 JsvHole } from "./JsvHole.js";
+export { default as JsvMarquee } from "./JsvMarquee.vue";
+export { default as JsvMaskClipDiv } from "./JsvMaskClipDiv.vue";
+export { default as JsvNativeSharedDiv } from "./JsvNativeSharedDiv.vue";
+export { default as JsvNinePatch } from "./JsvNinePatch.vue";
+export { default as JsvPosterDiv } from "./JsvPosterDiv.vue";
+export { default as JsvPosterImage } from "./JsvPosterImage.vue";
+export { default as JsvScaleTextBox } from "./JsvScaleTextBox.vue";
+export { JsvSoundPool } from "./JsvSoundPool.js";
+export { default as JsvTextBox } from "./JsvTextBox.vue";
+export { default as JsvTouchContainer } from "./JsvTouchContainer.vue";
+export { default as JsvTransparentDiv } from "./JsvTransparentDiv.vue";
+export { default as JsvVideo } from "./JsvVideo.vue";

package/samples/AdvanceMetroWidget/App.vue

@@ -1,123 +0,0 @@
-<!--
- * 【界面概述】
- * 展示SimpleWidget控件的嵌套用法
- *
- * 【控件介绍】
- * SimpleWidget：见simpleMetroWidget
- * SWidgetDispatcher：向SimpleWidget分发消息的对象，用于设置SimpleWidget内部状态
- *                      成员函数：
- *                          dispatch
- *                              @params msg {obj} 消息体，{type: SWidgetDispatcher.Type, data: 数据}
- * SWidgetDispatcher.Type: 消息的类型
- *                          "setFocusId": Focus时初始的焦点id data为int
- *                          "setFocusRect": Focus时距离某区域最近的item获得焦点 data为{type:EdgeDirection, rect:{x:0, y:0, widht:0, height:0}}
- *                          "updateItem": 重新描画某个item data为int
- *                          "slideToItem": 界面移到某个item处 data为int
- *
- *
- * 【技巧说明】
- * Q: 如何实现嵌套?
- * A: 当SimpleWidget的measure回调返回值中hasSub为true时，该item的renderItem就可以返回可获得焦点的控件
- *
- * Q: 如何实现焦点的就近切换？
- * A: 通过dispatcher向将要获得焦点的控件发送setFocusRect消息。
--->
-
-<script>
-import { frameData, itemData } from "./data";
-import {
-  HORIZONTAL,
-  SimpleWidget,
-} from "jsview/utils/JsViewEngineWidget";
-import Frame from "./Frame.vue";
-
-const measures = (item) => {
-  return {
-    width: item.blocks.w,
-    height: item.blocks.h,
-    focusable: item.focusable,
-    hasSub: item.hasSub,
-  };
-};
-export default {
-  components: { SimpleWidget, Frame },
-  setup() {
-    return {
-      measures,
-      name: "/advanceMetroWidget",
-      direction: HORIZONTAL,
-      frameData,
-      itemData,
-    };
-  },
-  methods: {
-    onKeyDown(ev) {
-      // 8:Backspace, 27:Escape, 10000:盒子返回键
-      if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-        this.$router?.go(-1); // 有router时，是从DemoHomepage进入，回退
-        return true;
-      }
-      return false;
-    },
-    onFocus() {
-      this.$refs.focusNode.findBlockByName("/advanceMetroWidget").requestFocus();
-    },
-  },
-
-  data() {
-    return {};
-  },
-  mounted() {},
-};
-</script>
-
-<template>
-  <div class="rootSize">
-    <jsv-focus-block
-      autoFocus
-      ref="focusNode"
-      :onAction="{
-        onKeyDown: onKeyDown,
-        onFocus: onFocus,
-      }"
-    >
-      <simple-widget
-        :name="name"
-        :data="frameData"
-        :width="680"
-        :height="680"
-        :direction="direction"
-        :measures="measures"
-      >
-        <template #renderItem="{ data, query, onEdge, onAction }">
-          <frame
-            :name="name + '/frame_' + query.id"
-            :data="data"
-            :itemData="itemData"
-            :query="query"
-            :onEdge="onEdge"
-            :onAction="onAction"
-          />
-        </template>
-      </simple-widget>
-    </jsv-focus-block>
-  </div>
-</template>
-
-<style scoped>
-.rootSize {
-  width: 1920;
-  height: 1080;
-  background-color: #334c4c;
-}
-
-.widgetPos {
-  top: 120;
-  left: 50;
-}
-
-.focusPos {
-  top: 10;
-  left: 10;
-}
-</style>

package/samples/AdvanceMetroWidget/Frame.vue

@@ -1,102 +0,0 @@
-<script>
-import {
-  HORIZONTAL,
-  SimpleWidget,
-  SWidgetDispatcher,
-} from "jsview/utils/JsViewEngineWidget";
-import Item from "./Item.vue";
-
-export default {
-  components: { SimpleWidget, Item },
-  props: {
-    itemData: Object,
-    data: Object,
-    query: Object,
-    onEdge: Function,
-    onAction: Object,
-    name: String,
-  },
-  data() {
-    return {};
-  },
-  setup() {
-    let dispatcher = new SWidgetDispatcher();
-    return {
-      direction: HORIZONTAL,
-      dispatcher,
-    };
-  },
-  methods: {
-    onFocus(enterRect) {
-      if (enterRect) {
-        const foucsInfo = {
-          type: SWidgetDispatcher.Type.setFocusRect,
-          data: enterRect,
-        };
-        this.dispatcher.dispatch(foucsInfo);
-      }
-      this.$refs.focusNode.findBlockByName(this.name).requestFocus();
-    },
-    onBlur() {},
-    onClick() {},
-    measures(item) {
-      return {
-        width: item.blocks.w,
-        height: item.blocks.h,
-        focusable: item.focusable,
-        hasSub: item.hasSub,
-      };
-    },
-  },
-
-  created() {
-    this.onAction.register("onFocus", this.onFocus);
-    this.onAction.register("onBlur", this.onBlur);
-    this.onAction.register("onClick", this.onClick);
-  },
-};
-</script>
-
-<template>
-  <jsv-focus-block ref="focusNode">
-    <simple-widget
-      :name="name"
-      :enableTouch="true"
-      :data="itemData"
-      :width="data.blocks.w"
-      :height="data.blocks.h"
-      :padding="{ left: 10, top: 10, right: 10, bottom: 10 }"
-      :direction="direction"
-      :measures="measures"
-      :onEdge="onEdge"
-      :dispatcher="dispatcher"
-    >
-      <template #renderItem="{ data, query, onEdge, onAction }">
-        <item
-          :data="data"
-          :query="query"
-          :onEdge="onEdge"
-          :onAction="onAction"
-        />
-      </template>
-    </simple-widget>
-  </jsv-focus-block>
-</template>
-
-<style scoped>
-.rootSize {
-  width: 1920;
-  height: 1080;
-  background-color: "#FFFF00";
-}
-
-.widgetPos {
-  top: 120;
-  left: 50;
-}
-
-.focusPos {
-  top: 10;
-  left: 10;
-}
-</style>