@shijiu/jsview-vue 0.9.684 → 0.9.766

package/samples/MetroWidgetDemos/Item.vue

@@ -2,11 +2,11 @@
  * @Author: ChenChanghua
  * @Date: 2022-05-10 15:21:24
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-11-01 15:24:26
+ * @LastEditTime: 2022-12-02 16:12:43
  * @Description: file content
 -->
 <script setup>
-import { ref, inject } from "vue";
+import { ref, shallowRef, inject } from "vue";
 
 const props = defineProps({
   data: Object,
@@ -14,28 +14,12 @@ const props = defineProps({
   onAction: Object,
 });
 
-const divRef = ref(null);
+const divRef = shallowRef(null);
 const focused = ref(false);
 
-const focusSize = inject("focusSize");
-
 // 自身的焦点状态自己记录, 通过回调来改变
 const onFocus = () => {
   focused.value = true;
-  if (focusSize) {
-    divRef.value?.getBoundingClientRect().then(
-      (data) => {
-        console.log("testtest focus size", data)
-        focusSize.width = data.width;
-        focusSize.height = data.height;
-        focusSize.left = data.left;
-        focusSize.top = data.top;
-      },
-      (error) => {
-        console.log("testtest abs failed", error);
-      }
-    );
-  }
 };
 const onBlur = () => {
   focused.value = false;

package/samples/MetroWidgetDemos/PerformanceTest/App.vue

@@ -76,7 +76,7 @@ import { data1, data2, data3 } from "./data";
 import borderImgPath from "./border.png";
 import Item from "./components/ContentItem.vue";
 import MyTab from "./components/MyTab.vue";
-import { ref, onMounted, onBeforeUnmount } from "vue";
+import { ref, shallowRef, onMounted, onBeforeUnmount } from "vue";
 import { useRouter } from "vue-router";
 import {
   VERTICAL,
@@ -90,7 +90,7 @@ const router = useRouter();
 const focusHub = useFocusHub();
 let contentData = data1;
 let requestDataTime = 0;
-const mwRef = ref(null);
+const mwRef = shallowRef(null);
 
 const onKeyDown = (ev) => {
   // 8:Backspace, 27:Escape, 10000:盒子返回键
@@ -127,7 +127,7 @@ const onItemFocus = (id) => {
     clearTimeout(requestDataTime);
     requestDataTime = 0;
   }
-  requestDataTime = setTimeout(() => {
+  // requestDataTime = setTimeout(() => {
     switch (id) {
       case 0:
         contentData = data1;
@@ -140,7 +140,7 @@ const onItemFocus = (id) => {
         break;
     }
     mwRef.value?.refreshData(true);
-  }, 0);
+  // }, 0);
 };
 
 onBeforeUnmount(() => {

package/samples/MetroWidgetDemos/PerformanceTest/components/ContentItem.vue

@@ -13,7 +13,7 @@ import couponMid from "../assets/coupon_mid.png";
 import borderLeft from "../assets/line_left.png";
 import borderMid from "../assets/line_mid.png";
 import borderRight from "../assets/line_right.png";
-import { ref, computed } from "vue";
+import { ref, shallowRef, computed } from "vue";
 
 const props = defineProps({
   data: Object,

package/samples/MetroWidgetDemos/PerformanceTest/components/MyTab.vue

@@ -2,15 +2,15 @@
  * @Author: ChenChanghua
  * @Date: 2021-09-29 16:13:35
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2021-09-29 17:07:19
+ * @LastEditTime: 2022-12-02 16:14:11
  * @Description: file content
 -->
 <script>
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 
 export default {
   props: {
-    name: Object,
+    name: String,
     onEdgeDown: Function,
     onItemFocus: Function,
   },

package/samples/MetroWidgetDemos/PingPong/AppPage.vue

@@ -8,7 +8,7 @@
 <script setup>
 import { VERTICAL, MetroWidget } from "jsview";
 import WidgetItem from "../WidgetItem.vue";
-import { ref, watch, onBeforeUnmount } from "vue";
+import { ref, shallowRef, watch, onBeforeUnmount } from "vue";
 
 const props = defineProps({
   data: {
@@ -24,7 +24,7 @@ const props = defineProps({
   },
 });
 
-const widgetRef = ref(null);
+const widgetRef = shallowRef(null);
 
 const provideData = () => {
   return props.data.data;

package/samples/MetroWidgetDemos/PingPong/TabItem.vue

@@ -6,7 +6,7 @@
  * @Description: file content
 -->
 <script setup>
-import { ref, inject } from "vue";
+import { ref, shallowRef, inject } from "vue";
 
 const props = defineProps({
   data: Object,

package/samples/MetroWidgetDemos/PingPong/ViewSwiper.vue

@@ -8,7 +8,7 @@
 <script>
 import AppPage from "./AppPage.vue";
 import { getKeyFramesGroup } from "jsview";
-import { reactive, ref } from "vue";
+import { reactive, ref, shallowRef } from "vue";
 
 export default {
   components: {
@@ -187,7 +187,7 @@ export default {
         animation: page0Anim.anim,
         animationFillMode: 'forwards',
       }"
-      :onAnimationEnd="page0Anim.onend"
+      @animationend="page0Anim.onend"
     >
       <app-page
         v-if="page0Show"
@@ -201,7 +201,7 @@ export default {
         animation: page1Anim.anim,
         animationFillMode: 'forwards',
       }"
-      :onAnimationEnd="page1Anim.onend"
+      @animationend="page1Anim.onend"
     >
       <app-page
         v-if="page1Show"

package/samples/MetroWidgetDemos/Simple/RelativeTemplate.vue

@@ -7,13 +7,13 @@
 -->
 <script setup>
 import { MetroWidget, WholePageSlide, HORIZONTAL, EdgeDirection } from "jsview";
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 import { useFocusHub } from "jsview";
 import { simpleData } from "../data";
 import Item from "../Item.vue";
 
 const focusHub = useFocusHub();
-const mwRef = ref(null);
+const mwRef = shallowRef(null);
 
 const wholePageSlide = new WholePageSlide();
 let innerData = simpleData.concat();

package/samples/MetroWidgetDemos/WidgetItem.vue

@@ -1,7 +1,7 @@
 
 <script setup>
 import { HORIZONTAL, MetroWidget, useFocusHub } from "jsview";
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 import Item from "./Item.vue";
 
 const props = defineProps({
@@ -11,7 +11,7 @@ const props = defineProps({
   onAction: Object,
 });
 const focusHub = useFocusHub();
-const mwRef = ref(null);
+const mwRef = shallowRef(null);
 
 const measures = (item) => {
   return item;
@@ -78,7 +78,6 @@ props.onAction.register("onBlur", onBlur);
       bottom: 10,
     }"
     :measures="measures"
-    :slideSetting="seamlessSlide"
     :onEdge="onItemEdge"
     :sendFocusRectEvent="true"
   >

package/samples/NinePatchDemo/App.vue

@@ -7,7 +7,7 @@ import {
 } from "jsview";
 import Item from "./Item.vue";
 import borderImageUrl from "./assets/border.png";
-import { ref, onMounted } from "vue";
+import { ref, shallowRef, onMounted } from "vue";
 import { useRouter, useRoute } from "vue-router";
 
 const router = useRouter();
@@ -77,7 +77,7 @@ const _onKeyDown = (ev) => {
   return false;
 };
 
-const myFocusWidget = ref(null);
+const myFocusWidget = shallowRef(null);
 
 onMounted(() => {
   myFocusWidget.value.getFocusBlockRef().requestFocus();

package/samples/NinePatchDemo/Item.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from "vue";
+import { ref, shallowRef, computed } from "vue";
 
 const props = defineProps({
   data: Object,
@@ -50,7 +50,7 @@ props.onAction.register("onClick", onClicked);
 
 <template>
   <div :class="focused ? 'focus' : 'blur'" :style="styleValue">
-    {{ "" + props.data.content + (testData != null ? testData.MyName : "") }}
+    {{ data.content }}
   </div>
 </template>
 

package/samples/Preload/App.vue

@@ -11,7 +11,7 @@ import awesome from "./images/awesomeface.png";
 import cat from "./images/cat.jpg";
 import { data } from "./data.js";
 import Item from "./Item.vue";
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 import { useRouter } from "vue-router";
 
 const name = "/preload";

package/samples/Preload/Item.vue

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

package/samples/QrcodeDemo/App.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { JsvQrcode } from "jsview";
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 import { useRouter } from "vue-router";
 
 const router = useRouter();

package/samples/SoundPool/App.vue

@@ -10,7 +10,7 @@ import coin from "./coin.mp3";
 import lose from "./lose.mp3";
 import bgmusic from "./bgmusic.mp3";
 import { JsvSoundPool, jJsvRuntimeBridge } from "jsview";
-import { onMounted, onBeforeUnmount, ref } from "vue";
+import { onMounted, onBeforeUnmount, shallowRef } from "vue";
 import { useRouter } from "vue-router";
 
 const router = useRouter();
@@ -19,7 +19,7 @@ let coinController1 = null;
 let coinController2 = null;
 let loseController1 = null;
 let loseController2 = null;
-let bgm = ref(null);
+let bgm = shallowRef(null);
 const _onKeyDown = (ev) => {
   if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
     router.go(-1); // 有router时，是从DemoHomepage进入，回退
@@ -128,7 +128,7 @@ onBeforeUnmount(() => {
           `[确定]: 播放背景音乐\n[左]: 播放失败音乐1\n[右]: 播放失败音乐2\n[上]: 播放硬币音乐1\n[下]: 播放硬币音乐2`
         }}
       </div>
-      <audiotrack ref="bgm" :src="bgmusic" loop="loop" />
+      <jsv-audiotrack ref="bgm" :src="bgmusic" loop="loop" />
     </div>
   </jsv-focus-block>
 </template>

package/samples/SpriteImage/App.vue

@@ -110,6 +110,11 @@ export default {
     :onAction="{
       onKeyDown: onKeyDown,
     }"
+    :style="{
+      width:1280,
+      height:720,
+      backgroundColor:'#000000'
+    }"
   >
     <div
       :style="{

package/samples/TextBox/App.vue

@@ -22,7 +22,7 @@ import RenderLeft from "./RenderLeft.vue";
 import RenderRight from "./RenderRight.vue";
 import RenderCenter from "./RenderCenter.vue";
 import RenderOneLine from "./RenderOneLine.vue";
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 import { useRouter } from "vue-router";
 
 const router = useRouter();
@@ -80,6 +80,7 @@ const onBlur = () => {
       onBlur: onBlur,
     }"
   >
+    <div :style="{width:1280, height:720, backgroundColor:'#000000'}"/>
     <div :style="{ top: offsetY, left: offsetX }">
       <RenderLeft :text="text" :moveCount="moveCount" />
       <RenderRight :text="text" />

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,

package/samples/ThrowMoveDemo/LRParabolicDemo.vue

@@ -5,56 +5,42 @@
  * @LastEditTime: 2021-10-21 14:01:59
  * @Description: file content
 -->
-<script>
+<script setup>
 import { JsvActorMoveControl, JsvActorMove } from "jsview";
+import { shallowRef } from "vue";
 
-export default {
-  components: {
-    JsvActorMove,
-  },
-  props: {
-    name: String,
-  },
-  data() {
-    return {
-      direction: 1,
-    };
-  },
-  setup() {
-    let throwControl = new JsvActorMoveControl(); // 抛物运动体控制器
-    let moveControl = new JsvActorMoveControl(); // 平移运动体控制器
+const props = defineProps({
+  name: String,
+});
 
-    return {
-      throwControl,
-      moveControl,
-    };
-  },
-  methods: {
-    onKeyDown(ev) {
-      switch (ev.keyCode) {
-        case 13:
-          this.direction = -this.direction;
+let throwControl = new JsvActorMoveControl(); // 抛物运动体控制器
+let moveControl = new JsvActorMoveControl(); // 平移运动体控制器
 
-          this.moveControl.moveToX(195 * this.direction, 250, (x, y) => {
-            console.log(`Move end with x=${x} y=${y}`);
-          });
-          this.throwControl.throwAlongY(
-            -500,
-            750,
-            { type: "catch", position: 0, direction: 1 },
-            (x, y) => {
-              console.log(`Throw end with x=${x} y=${y}`);
-            },
-            () => {
-              console.log("Get to the pole...");
-            }
-          );
-          return true;
-      }
-      return false;
-    },
-  },
-};
+let direction = shallowRef(1);
+
+function onKeyDown(ev) {
+  switch (ev.keyCode) {
+    case 13:
+      direction.value = -direction.value;
+
+      moveControl.moveToX(195 * direction.value, 250, (x, y) => {
+        console.log(`Move end with x=${x} y=${y}`);
+      });
+      throwControl.throwAlongY(
+        -500,
+        750,
+        { type: "catch", position: 0, direction: 1 },
+        (x, y) => {
+          console.log(`Throw end with x=${x} y=${y}`);
+        },
+        () => {
+          console.log("Get to the pole...");
+        }
+      );
+      return true;
+  }
+  return false;
+}
 </script>
 
 <template>
@@ -112,4 +98,4 @@ export default {
   text-overflow: ellipsis;
   text-align: center;
 }
-</style>
+</style>

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";
 import VideoFrame from "./components/VideoFrame";
 
@@ -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/VideoDemo/components/Controllor.vue

@@ -173,7 +173,7 @@ enableAnimation.value = false;
 
 <template>
   <div :style="style" :key="useTexture" :set="(leftOffset = 0)">
-    <jsv-focus-block :namespace="controllor" :onKeyDown="onKeyDown">
+    <jsv-focus-block :onKeyDown="onKeyDown">
       <Button
         v-for="(item, index) in getButtonData()"
         :key="index"

package/samples/VisibleSensorDemo/App.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { watch, reactive, onMounted, ref } from "vue";
+import { watch, reactive, onMounted, ref, shallowRef } from "vue";
 import { useRouter } from "vue-router";
 import { jJsvRuntimeBridge, JsvVisibleSensor } from "jsview";
 
@@ -10,8 +10,8 @@ const VISIBLE_RANGE = 0.25;
 
 const router = useRouter();
 
-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",

package/scripts/jsview-run-android.js

@@ -5,7 +5,7 @@ const path = require('path');
 
 function getOptions() {
     const options = {
-        androidPackage: "com.qcode.jsview.sample_demo/com.qcode.jsview.sample.SingleActivity",
+        androidPackage: "com.tvcode.sjcenter/com.tvcode.chmarket.MainActivity",
         coreRevision: null,
         jseUrl: null,
         homepageUrl: null,
@@ -16,16 +16,16 @@ function getOptions() {
     }
 
     const rootDir = process.cwd();
-    const jsviewDir = path.resolve(rootDir, 'jsview');
+    const jsviewDir = path.resolve(rootDir, 'node_modules/@shijiu/jsview-vue');
     const jsveiwVersionFile = path.resolve(jsviewDir, 'dom/target_core_revision.js');
     const jsviewTargetVersion = require(jsveiwVersionFile);
-    options.coreRevision = jsviewTargetVersion.CoreRevision;
+    options.coreRevision = jsviewTargetVersion.CoreRevisionAndBranch;
     options.jseUrl = jsviewTargetVersion.JseUrl;
 
     const homepageUrlFile = path.resolve(rootDir, 'node_modules/.cache/jsview/network');
     let homepageUrl = require(homepageUrlFile);
     homepageUrl = homepageUrl.replace(/\u001b\[.*?m/g, '')
-    options.homepageUrl = homepageUrl + "js/main.jsv.js";
+    options.homepageUrl = homepageUrl + "/js/main.jsv.js";
 
     return options;
 }
@@ -45,6 +45,7 @@ function androidStartActivity(options) {
     cmdline += ` --es COREVERSIONRANGE "${options.coreRevision}"`;
     cmdline += ` --es ENGINE "${options.jseUrl}"`;
     cmdline += ` --es URL "${options.homepageUrl}"`;
+    cmdline += ` --es DEBUG "1"`;
     console.log(`Run command: ${cmdline}\n`);
     try {
         childProcess.execSync(cmdline, {stdio: [0, 1, 2]});

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,
@@ -65,7 +65,7 @@ if (props.name && props.name.indexOf(".") >= 0) {
   );
 }
 let actionCallback = {};
-let fDivRef = ref(null);
+let fDivRef = shallowRef(null);
 
 //methods
 const getName = () => {
@@ -158,14 +158,14 @@ const _mountToFocusSystem = () => {
   }
   // 建立父子关系链
   let self = toRaw(fDivRef.value);
-  let parent = self.parentElement;
+  let parent = self.parentNode;
   while (parent) {
     if (self.FocusNodeRef.GetParentPage()) {
       break;
     }
 
     if (parent.tagName !== "FDIV") {
-      parent = parent.parentElement;
+      parent = parent.parentNode;
       continue;
     }