@shijiu/jsview-vue 1.9.648 → 1.9.719

package/samples/TextureAnimation/App2.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, reactive } from "vue";
+import { ref, shallowRef, reactive } from "vue";
 import { useRouter } from "vue-router";
 import {
   jJsvRuntimeBridge,
@@ -9,18 +9,19 @@ import {
   DECORATE_NINEPATCH_ALPHA_MIX,
   DECORATE_BORDER_RADIUS,
 } from "jsview";
-import img from "./assets/swipLight.png";
+import img from "./assets/light.png";
+import img2 from "./assets/light2.png";
 import mask from "./assets/mask.png";
 
 const getRandom = (start, end) => {
   return Math.round(Math.random() * (end - start) + start);
-}
+};
 
 const router = useRouter();
 const width = ref(300);
 const height = ref(200);
 const left = ref(50);
-const top = ref(50);
+const top = ref(80);
 const rotateAnimation =
   "{from {transform: rotate3d(0,0,1,0);} to {transform: rotate3d(0,0,1,360deg);}}";
 
@@ -32,23 +33,20 @@ const ninePatchDecorator = {
   borderOutset: 0,
   animTime: 0.5,
 };
-const texCoord = ref({
-  width: 400,
-  height: 400,
-});
+//注意texture的尺寸需要兼顾最大的view
+const texCoord = {
+  width: 600,
+  height: 600,
+};
 const onKeyDown = (ev) => {
   // 8:Backspace, 27:Escape, 10000:盒子返回键
   if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
     router?.go(-1); // 有router时，是从DemoHomepage进入，回退
   } else if (ev.keyCode == 13) {
     left.value = getRandom(50, 400);
-    top.value = getRandom(50, 200);
+    top.value = getRandom(80, 200);
     width.value = getRandom(100, 300);
     height.value = getRandom(100, 300);
-    texCoord.value = {
-      width: Math.max(width.value, height.value) * 1.414,
-      height: Math.max(width.value, height.value) * 1.414,
-    }
   }
   return true;
 };
@@ -60,12 +58,27 @@ const onKeyDown = (ev) => {
     :style="{
       width: 1280,
       height: 720,
-      backgroundImage: 'https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/BackgroundLongmao.jpg',
+      backgroundImage:
+        'https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/BackgroundLongmao.jpg',
     }"
   >
+    <div
+      :style="{
+        textAlign: 'center',
+        fontSize: '30px',
+        lineHeight: '50px',
+        color: '#ffffff',
+        left: 140,
+        top: 20,
+        width: 1000,
+        height: 50,
+        backgroundColor: 'rgba(27,38,151,0.8)',
+      }"
+    >
+      .9型的旋转焦点框,OK键进行随机位置+尺寸变换
+    </div>
     <div>
       <jsv-texture-anim
-        ref="textureAnim1"
         :src="img"
         :left="left"
         :top="top"
@@ -79,5 +92,20 @@ const onKeyDown = (ev) => {
         :decorate="ninePatchDecorator"
       ></jsv-texture-anim>
     </div>
+    <div>
+      <jsv-texture-anim
+        :src="img2"
+        :left="left + 500"
+        :top="top"
+        :width="width"
+        :height="height"
+        :texCoord="texCoord"
+        :animation="rotateAnimation"
+        :duration="2000"
+        :repeat="-1"
+        :autoStart="true"
+        :decorate="ninePatchDecorator"
+      ></jsv-texture-anim>
+    </div>
   </jsv-focus-block>
 </template>

package/samples/TextureSize/App.vue

@@ -32,7 +32,7 @@ const onKeyDown = (ev) => {
           </div>
           <div class="leftFont top250">
             {{
-              `指定尺寸加载\n内存占用由给定尺寸决定，图片质量下降，但更省内存`
+              `指定尺寸加载\n内存占用由给定尺寸决定，图片质量基本没变，但更省内存`
             }}
           </div>
         </div>
@@ -67,9 +67,9 @@ const onKeyDown = (ev) => {
           <img alt="" class="graphSize top0" :src="pngDemo" />
           <img
             alt=""
+            :src="pngDemo"
             class="graphSize top250"
             jsvImgScaledownTex
-            :src="pngDemo"
           />
           <div class="underFont">
             {{ `png有透明图片\n指定尺寸有明显锯齿` }}
@@ -80,9 +80,9 @@ const onKeyDown = (ev) => {
           <img alt="" class="graphSize top0" :src="pngNoAlphaDemo" />
           <img
             alt=""
+            :src="pngNoAlphaDemo"
             class="graphSize top250"
             jsvImgScaledownTex
-            :src="pngNoAlphaDemo"
           />
           <div class="underFont">
             {{ `png无透明图片` }}

package/samples/TouchSample/MetroWidgetHorizontal.vue

@@ -10,7 +10,7 @@ import {
 import Item from "./Item.vue";
 
 import { metroWidgetH, measures } from "./data.js";
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 
 export default {
   components: {

package/samples/TouchSample/MetroWidgetVertical.vue

@@ -10,7 +10,7 @@ import {
 import Item from "./Item.vue";
 
 import { metroWidgetV, measures } from "./data.js";
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 
 export default {
   components: {

package/samples/TransitPage/App.vue

@@ -2,7 +2,7 @@
 import DemoApp from "../DemoHomepage/App.vue";
 import ActivityApp from "../MetroWidgetDemos/PerformanceTest/App.vue"; // TODO
 import { jJsvRuntimeBridge } from "jsview";
-import { ref, onMounted } from "vue";
+import { ref, shallowRef, onMounted } from "vue";
 
 const getShowMode = () => {
   let showMode = 0;

package/samples/VideoDemo/App.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { provide, reactive, ref, watch } from "vue";
+import { provide, reactive, ref, shallowRef, watch } from "vue";
 import Controllor from "./components/Controllor.vue";
 import VideoFrame from "./components/VideoFrame.vue";
 
@@ -18,20 +18,20 @@ const Caption = {
     "2.支持ObjectFit调整\n",
 };
 
-let caption = ref(null);
-let useTexture = ref(null);
+let caption = shallowRef(null);
+let useTexture = shallowRef(null);
 let videoTime = reactive({
   currentTime: 0,
   duration: 0,
 });
-let objectFitTitle = ref(null);
+let objectFitTitle = shallowRef(null);
 let playStatus = ref("");
 provide("useTexture", useTexture);
-provide("objectFit", ref(null));
+provide("objectFit", shallowRef(null));
 provide("videoRect", ref({}));
-provide("playVideo", ref(null));
-provide("seekVideo", ref(null));
-provide("enableAnimation", ref(null));
+provide("playVideo", shallowRef(null));
+provide("seekVideo", shallowRef(null));
+provide("enableAnimation", shallowRef(null));
 provide("videoTime", videoTime);
 provide("objectFitTitle", objectFitTitle);
 provide("playStatus", playStatus);

package/samples/VideoDemo/components/Button.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 const props = defineProps({
   style: Object,
   autoFocus: Boolean,

package/samples/VisibleSensorDemo/App.vue

@@ -1,24 +1,17 @@
 <script setup>
-import { reactive, onMounted, ref } from "vue";
+import { watch, reactive, onMounted, ref, shallowRef } from "vue";
 import { useRouter } from "vue-router";
 import { jJsvRuntimeBridge, JsvVisibleSensor } from "jsview";
 
 const BOX_WIDTH = 150;
 const BOX_HEIGHT = 150;
-const BOX_COLOR = "#00FFFF";
+const BOX_COLOR = "rgba(0,255,255,0.6)";
+const VISIBLE_RANGE = 0.25;
 
 const router = useRouter();
 
-let shown = reactive({
-  vertical: 0.25,
-  horizon: 1.0,
-});
-
-let left_change = reactive({ left: 0 });
-let top_change = reactive({ top: 0 });
-
-const containerRef = ref(null);
-let case_config = ref(null);
+const containerRef = shallowRef(null);
+let case_config = shallowRef(null);
 let status_text = reactive({
   oldH: "false",
   newH: "false",
@@ -26,12 +19,24 @@ let status_text = reactive({
   newV: "false",
 });
 
-case_config.value = getTestCase(0);
+let test_case_type = ref(0);
+
+window.LudlTestCase = test_case_type;
+
+case_config.value = getTestCase(test_case_type.value);
+
+watch(test_case_type, () => {
+  case_config.value = getTestCase(test_case_type.value);
+});
 
 onMounted(() => {
   jJsvRuntimeBridge.notifyPageLoaded();
 });
 
+// const onAnimDone = () => {
+//   test_case_type.value = (test_case_type.value + 1) % 2;
+// };
+
 // 内部接口
 const onBeVisible = (old_h, new_h, old_v, new_v) => {
   status_text.oldH = old_h ? "true" : "false";
@@ -46,6 +51,9 @@ const onKeyDown = (ev) => {
     router?.go(-1); // 有router时，回退
     return true;
   }
+  if (ev.keyCode == 13) {
+    test_case_type.value = (test_case_type.value + 1) % 2;
+  }
   return false;
 };
 
@@ -60,17 +68,17 @@ function getTestCase(test_index) {
   switch (test_index) {
     case 0: {
       // 上到下
-      test_config.animation = "visibleSensor_upDown 5s infinite linear";
+      test_config.animation = "visibleSensor_upDown 8s infinite linear";
       test_config.text = "从上到下";
       test_config.horizon = 1.0;
-      test_config.vertical = 0.25;
+      test_config.vertical = VISIBLE_RANGE;
       break;
     }
     case 1: {
       // 左到右
-      test_config.animation = "visibleSensor_leftRight 5s infinite linear";
+      test_config.animation = "visibleSensor_leftRight 8s infinite linear";
       test_config.text = "从左到右";
-      test_config.horizon = 0.25;
+      test_config.horizon = VISIBLE_RANGE;
       test_config.vertical = 1.0;
       break;
     }
@@ -87,7 +95,7 @@ function getTestCase(test_index) {
         :style="{
           left: 10,
           top: 10,
-          height: 100,
+          height: 120,
           width: 900,
           fontColor: '#000000',
           fontSize: 15,
@@ -95,7 +103,8 @@ function getTestCase(test_index) {
         }"
       >
         {{
-          `new horizon: ${status_text.newH}
+          `按OK键切换方向
+new horizon: ${status_text.newH}
 new vertical: ${status_text.newV}
 -------
 old horizon: ${status_text.oldH}
@@ -106,12 +115,34 @@ old vertical: ${status_text.oldV}`
         ref="containerRef"
         :style="{
           left: 240,
-          top: 110,
-          width: 800,
-          height: 500,
+          top: 180,
+          width: 300,
+          height: 300,
           backgroundColor: '#00F0F0',
         }"
       >
+        <div
+          :style="{
+            left: 50,
+            top: 50,
+            width: 200,
+            height: 200,
+            backgroundColor: '#00AAAA',
+            zIndex: test_case_type == 0 ? -22 : 0,
+          }"
+        />
+
+        <div
+          :style="{
+            left: 80,
+            top: 30,
+            width: 140,
+            height: 240,
+            backgroundColor: '#0000AA',
+            zIndex: test_case_type == 0 ? -33 : 0,
+          }"
+        />
+
         <div
           :style="{
             left: 0,
@@ -128,6 +159,40 @@ old vertical: ${status_text.oldV}`
             :container="containerRef"
             :callback="onBeVisible"
           >
+            <div v-if="test_case_type == 0">
+              <div
+                :style="{
+                  width: BOX_WIDTH,
+                  height: BOX_HEIGHT * VISIBLE_RANGE,
+                  backgroundColor: '#FF0000',
+                }"
+              />
+              <div
+                :style="{
+                  top: BOX_HEIGHT * (1 - VISIBLE_RANGE),
+                  width: BOX_WIDTH,
+                  height: BOX_HEIGHT * VISIBLE_RANGE,
+                  backgroundColor: '#FF0000',
+                }"
+              />
+            </div>
+            <div v-else>
+              <div
+                :style="{
+                  width: BOX_WIDTH * VISIBLE_RANGE,
+                  height: BOX_HEIGHT,
+                  backgroundColor: '#FF0000',
+                }"
+              />
+              <div
+                :style="{
+                  left: BOX_WIDTH * (1 - VISIBLE_RANGE),
+                  width: BOX_WIDTH * VISIBLE_RANGE,
+                  height: BOX_HEIGHT,
+                  backgroundColor: '#FF0000',
+                }"
+              />
+            </div>
             <div
               :style="{
                 width: BOX_WIDTH,
@@ -137,7 +202,9 @@ old vertical: ${status_text.oldV}`
                 lineHeight: 30,
               }"
             >
-              {{ case_config.text }}
+              {{
+                `${case_config.text}\nH:${status_text.newH}\nV:${status_text.newV}`
+              }}
             </div>
           </JsvVisibleSensor>
         </div>
@@ -149,19 +216,19 @@ old vertical: ${status_text.oldV}`
 <style scoped>
 @keyframes visibleSensor_upDown {
   from {
-    transform: translate3d(300px, -200px, 0);
+    transform: translate3d(75px, -180px, 0);
   }
   to {
-    transform: translate3d(300px, 600px, 0);
+    transform: translate3d(75px, 330px, 0);
   }
 }
 
 @keyframes visibleSensor_leftRight {
   from {
-    transform: translate3d(-160px, 200px, 0);
+    transform: translate3d(-180px, 75px, 0);
   }
   to {
-    transform: translate3d(1400px, 200px, 0);
+    transform: translate3d(330px, 75px, 0);
   }
 }
 </style>

package/tsconfig.json

@@ -13,18 +13,18 @@
     "allowSyntheticDefaultImports": true,
     "sourceMap": true,
     "baseUrl": ".",
-    "types": [
-      "webpack-env"
-    ],
     "paths": {
-      "@/*": [
-        "src/*"
-      ],
       "jsview/*": [
         "./*"
       ],
       "jsview": [
         "./index.js"
+      ],
+      "jsview-vue/*": [
+        "./*"
+      ],
+      "jsview-vue": [
+        "./index.js"
       ]
     },
     "lib": [

package/utils/JsViewEngineWidget/JsvFocusBlock.vue

@@ -30,7 +30,7 @@
 
 <script setup>
 /* eslint-disable */
-import { onMounted, onBeforeUnmount, ref, toRaw } from "vue";
+import { onMounted, onBeforeUnmount, ref, shallowRef, toRaw } from "vue";
 const props = defineProps({
   name: String,
   namespace: String,
@@ -64,45 +64,47 @@ if (props.name && props.name.indexOf(".") >= 0) {
       '". name must not contains "."'
   );
 }
+let actionCallback = {};
+let fDivRef = shallowRef(null);
 
 //methods
-function getName() {
-  return toRaw(_fDivRef.value)?.FocusNodeRef.getName();
+const getName = () => {
+  return toRaw(fDivRef.value)?.FocusNodeRef.getName();
 };
 
-function getNamespace() {
-  let focusNode = toRaw(_fDivRef.value)?.FocusNodeRef;
+const getNamespace = () => {
+  let focusNode = toRaw(fDivRef.value)?.FocusNodeRef;
   if (focusNode?.AsHub) {
     // hub的getHub返回的是自己
-    focusNode = toRaw(_fDivRef.value)?.FocusNodeRef.GetParentPage();
+    focusNode = toRaw(fDivRef.value)?.FocusNodeRef.GetParentPage();
   }
   const namespace = focusNode.getName();
   return namespace !== ".__AppRoot__" ? namespace : "";
 };
 
-function findBlockByName(name) {
-  const focusNode = toRaw(_fDivRef.value)?.FocusNodeRef.getNodeByName(name);
+const findBlockByName = (name) => {
+  const focusNode = toRaw(fDivRef.value)?.FocusNodeRef.getNodeByName(name);
   return focusNode?.jsvVueComponent;
 };
 
-function requestFocus(passToChild) {
-  toRaw(_fDivRef.value)?.FocusNodeRef.requestFocus(passToChild);
+const requestFocus = (passToChild) => {
+  toRaw(fDivRef.value)?.FocusNodeRef.requestFocus(passToChild);
 };
 
-function returnFocusToParent() {
-  toRaw(_fDivRef.value)?.FocusNodeRef.ReturnFocusToParent();
+const returnFocusToParent = () => {
+  toRaw(fDivRef.value)?.FocusNodeRef.ReturnFocusToParent();
 };
 
-function bubbleCustomerEvent(ev) {
-  toRaw(_fDivRef.value)?.FocusNodeRef.bubbleCustomerEvent(ev);
+const bubbleCustomerEvent = (ev) => {
+  toRaw(fDivRef.value)?.FocusNodeRef.bubbleCustomerEvent(ev);
 };
 
-function debugPrintFocusChain() {
-  toRaw(_fDivRef.value)?.FocusNodeRef.printFocusNodeList();
+const debugPrintFocusChain = () => {
+  toRaw(fDivRef.value)?.FocusNodeRef.printFocusNodeList();
 };
 
-function debugPrintLastFocus() {
-  toRaw(_fDivRef.value)?.FocusNodeRef.printGlobalLastFocus();
+const debugPrintLastFocus = () => {
+  toRaw(fDivRef.value)?.FocusNodeRef.printGlobalLastFocus();
 };
 
 const exportObject = {
@@ -115,56 +117,55 @@ const exportObject = {
   debugPrintFocusChain,
   debugPrintLastFocus,
 };
-
-function _mountToFocusSystem() {
-  const focusNode = toRaw(_fDivRef.value)?.FocusNodeRef;
+const _mountToFocusSystem = () => {
+  const focusNode = toRaw(fDivRef.value)?.FocusNodeRef;
 
   // 保存self，find用, 通过exportObject代表自己的instance
   focusNode.jsvVueComponent = exportObject;
 
   // 注册回调函数
-  _actionCallback.onDispatchKeyDown =
+  actionCallback.onDispatchKeyDown =
     props.onDispatchKeyDown || props.onAction?.onDispatchKeyDown;
-  if (_actionCallback.onDispatchKeyDown) {
+  if (actionCallback.onDispatchKeyDown) {
     focusNode.setDispatchKeyDown(_onDispatchKeyDown);
   }
-  _actionCallback.onDispatchKeyUp =
+  actionCallback.onDispatchKeyUp =
     props.onDispatchKeyUp || props.onAction?.onDispatchKeyUp;
-  if (_actionCallback.onDispatchKeyUp) {
+  if (actionCallback.onDispatchKeyUp) {
     focusNode.setDispatchKeyUp(_onDispatchKeyUp);
   }
-  _actionCallback.onKeyDown = props.onKeyDown || props.onAction?.onKeyDown;
-  if (_actionCallback.onKeyDown) {
+  actionCallback.onKeyDown = props.onKeyDown || props.onAction?.onKeyDown;
+  if (actionCallback.onKeyDown) {
     focusNode.setOnKeyDown(_onKeyDown);
   }
-  _actionCallback.onKeyUp = props.onKeyUp || props.onAction?.onKeyUp;
-  if (_actionCallback.onKeyUp) {
+  actionCallback.onKeyUp = props.onKeyUp || props.onAction?.onKeyUp;
+  if (actionCallback.onKeyUp) {
     focusNode.setOnKeyUp(_onKeyUp);
   }
-  _actionCallback.onFocus = props.onFocus || props.onAction?.onFocus;
-  if (_actionCallback.onFocus) {
+  actionCallback.onFocus = props.onFocus || props.onAction?.onFocus;
+  if (actionCallback.onFocus) {
     focusNode.setOnFocus(_onFocus);
   }
-  _actionCallback.onBlur = props.onBlur || props.onAction?.onBlur;
-  if (_actionCallback.onBlur) {
+  actionCallback.onBlur = props.onBlur || props.onAction?.onBlur;
+  if (actionCallback.onBlur) {
     focusNode.setOnBlur(_onBlur);
   }
 
-  _actionCallback.onCustomerEvent =
+  actionCallback.onCustomerEvent =
     props.onCustomerEvent || props.onAction?.onCustomerEvent;
-  if (_actionCallback.onCustomerEvent) {
+  if (actionCallback.onCustomerEvent) {
     focusNode.setOnCustomerEvent(_onCustomerEvent);
   }
   // 建立父子关系链
-  let self = toRaw(_fDivRef.value);
-  let parent = self.parentElement;
+  let self = toRaw(fDivRef.value);
+  let parent = self.parentNode;
   while (parent) {
     if (self.FocusNodeRef.GetParentPage()) {
       break;
     }
 
     if (parent.tagName !== "FDIV") {
-      parent = parent.parentElement;
+      parent = parent.parentNode;
       continue;
     }
 
@@ -173,35 +174,32 @@ function _mountToFocusSystem() {
   }
 };
 
-function _onDispatchKeyDown(ev) {
+const _onDispatchKeyDown = (ev) => {
   ev.ownerNode = exportObject;
-  return _actionCallback?.onDispatchKeyDown(ev) || false;
+  return actionCallback?.onDispatchKeyDown(ev) || false;
 };
-function _onDispatchKeyUp(ev) {
+const _onDispatchKeyUp = (ev) => {
   ev.ownerNode = exportObject;
-  return _actionCallback?.onDispatchKeyUp(ev) || false;
+  return actionCallback?.onDispatchKeyUp(ev) || false;
 };
-function _onKeyDown(ev) {
+const _onKeyDown = (ev) => {
   ev.ownerNode = exportObject;
-  return _actionCallback?.onKeyDown(ev) || false;
+  return actionCallback?.onKeyDown(ev) || false;
 };
-function _onKeyUp(ev) {
+const _onKeyUp = (ev) => {
   ev.ownerNode = exportObject;
-  return _actionCallback?.onKeyUp(ev) || false;
+  return actionCallback?.onKeyUp(ev) || false;
 };
-function _onFocus() {
-  _actionCallback?.onFocus(exportObject);
+const _onFocus = () => {
+  actionCallback?.onFocus(exportObject);
 };
-function _onBlur() {
-  _actionCallback?.onBlur(exportObject);
+const _onBlur = () => {
+  actionCallback?.onBlur(exportObject);
 };
-function _onCustomerEvent(ev) {
-  return _actionCallback?.onCustomerEvent(ev) || false;
+const _onCustomerEvent = (ev) => {
+  return actionCallback?.onCustomerEvent(ev) || false;
 };
 
-let _actionCallback = {};
-let _fDivRef = ref(null);
-
 onMounted(() => {
   _mountToFocusSystem();
 
@@ -211,7 +209,7 @@ onMounted(() => {
 });
 
 onBeforeUnmount(() => {
-  const focusNode = toRaw(_fDivRef.value)?.FocusNodeRef;
+  const focusNode = toRaw(fDivRef.value)?.FocusNodeRef;
   focusNode?.onUnMount();
   if (focusNode?.jsvVueComponent) {
     focusNode.jsvVueComponent = undefined;
@@ -222,9 +220,7 @@ defineExpose(exportObject);
 </script>
 
 <template>
-<div>
-  <fdiv ref="_fDivRef" :fname="name" :new-namespace="namespace">
+  <fdiv ref="fDivRef" :fname="name" :new-namespace="namespace">
     <slot></slot>
   </fdiv>
-</div>
 </template>