@shijiu/jsview-vue 0.9.684 → 0.9.783

package/samples/Swiper/App.vue

@@ -0,0 +1,148 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-02-10 14:45:39
+ * @Description: file content
+-->
+<script setup>
+import { JsvSwiper, useFocusHub, EdgeDirection } from "jsview";
+import { ref, onMounted } from "vue";
+
+const focusHub = useFocusHub();
+
+const mySwiper = ref(null);
+
+function randomColor() {
+  let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
+  return (
+    "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
+  );
+}
+let data = [];
+for (let i = 0; i < 10; i++) {
+  data.push({
+    width: 400,
+    height: 300,
+    index: i,
+    backgroundColor: randomColor(),
+  });
+}
+
+const swiper1 = {
+  onChange: (currentId) => {
+    console.log("swiper1: onChange", currentId);
+  },
+  onClick: (currentId) => {
+    console.log("swiper1: onClick", currentId);
+  },
+  onEdge: (info) => {
+    if (info.direction == EdgeDirection.bottom) {
+      focusHub.setFocus("mySwiper2");
+    }
+  },
+};
+
+const swiper2 = {
+  onChange: (currentId) => {
+    console.log("swiper2: onChange", currentId);
+  },
+  onClick: (currentId) => {
+    console.log("swiper2: onClick", currentId);
+  },
+  onEdge: (info) => {
+    if (info.direction == EdgeDirection.top) {
+      focusHub.setFocus("mySwiper1");
+    }
+  },
+};
+onMounted(() => {
+  focusHub.setFocus("mySwiper1");
+});
+</script>
+
+<template>
+  <div>
+    <jsv-swiper
+      name="mySwiper1"
+      ref="mySwiper1"
+      :totalFrame="data.length"
+      :layoutInfo="{
+        left: 50,
+        top: 50,
+        width: 400,
+        height: 200,
+      }"
+      :animation="{
+        duration: 300,
+        easing: 'linear',
+      }"
+      :autoplayInterval="1000"
+      :onChange="swiper1.onChange"
+      :onClick="swiper1.onClick"
+      :onEdge="swiper1.onEdge"
+    >
+      <template #itemView="{ dataIndex, focused }">
+        <div
+          :style="{
+            width: data[dataIndex].width,
+            height: data[dataIndex].height,
+            backgroundColor: data[dataIndex].backgroundColor,
+            fontSize: 40,
+            color: focused ? '#FF0000' : '#FFFFFF',
+          }"
+        >
+          {{ data[dataIndex].index }}
+        </div>
+      </template>
+    </jsv-swiper>
+
+    <jsv-swiper
+      name="mySwiper2"
+      ref="mySwiper2"
+      :totalFrame="data.length"
+      :layoutInfo="{
+        left: 50,
+        top: 300,
+        width: 400,
+        height: 200,
+      }"
+      :animation="{
+        duration: 300,
+        easing: 'linear',
+      }"
+      :autoplayInterval="1000"
+      :onChange="swiper2.onChange"
+      :onClick="swiper2.onClick"
+      :onEdge="swiper2.onEdge"
+      :reverseSwipe="true"
+      :dotSize="20"
+      :disableLoopWhenFocus="true"
+    >
+      <template #itemView="{ dataIndex, focused }">
+        <div
+          :style="{
+            width: data[dataIndex].width,
+            height: data[dataIndex].height,
+            backgroundColor: data[dataIndex].backgroundColor,
+            fontSize: 40,
+            color: focused ? '#FF0000' : '#FFFFFF',
+          }"
+        >
+          {{ data[dataIndex].index }}
+        </div>
+      </template>
+      <template #indicatorDot="{ dataIndex, currentIndex }">
+        <div
+          :style="{
+            width: 20,
+            height: 20,
+            backgroundColor:
+              dataIndex == currentIndex
+                ? 'rgba(100, 100, 100, 0.7)'
+                : '#ff0000',
+            borderRadius: '15px',
+          }"
+        ></div>
+      </template>
+    </jsv-swiper>
+  </div>
+</template>

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;
     }