@shijiu/jsview-vue 0.9.631 → 1.9.627

package/samples/MetroWidgetDemos/PingPong/AppPage.vue

@@ -2,13 +2,13 @@
  * @Author: ChenChanghua
  * @Date: 2022-07-12 10:45:38
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-09-01 17:04:31
+ * @LastEditTime: 2022-07-12 14:43:49
  * @Description: file content
 -->
 <script setup>
 import { VERTICAL, MetroWidget } from "jsview";
 import WidgetItem from "../WidgetItem.vue";
-import { ref, watch, onBeforeUnmount } from "vue";
+import { reactive } from "vue";
 
 const props = defineProps({
   data: {
@@ -24,8 +24,6 @@ const props = defineProps({
   },
 });
 
-const widgetRef = ref(null);
-
 const provideData = () => {
   return props.data.data;
 };
@@ -36,23 +34,10 @@ const measures = (item) => {
     doSlide: false,
   };
 };
-
-const watcher = watch(
-  () => props.data,
-  (newValue, oldValue) => {
-    widgetRef.value?.refreshData();
-  }
-);
-
-onBeforeUnmount(() => {
-  watcher();
-})
-
 </script>
 
 <template>
   <metro-widget
-    ref="widgetRef"
     :name="name"
     :width="data.width"
     :height="data.height"

package/samples/MetroWidgetDemos/PingPong/AppTab.vue

@@ -2,12 +2,19 @@
  * @Author: ChenChanghua
  * @Date: 2022-07-12 10:45:19
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-09-01 16:19:51
+ * @LastEditTime: 2022-07-12 15:39:29
  * @Description: file content
 -->
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2021-12-21 17:18:58
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2021-12-28 10:58:25
+ * @Description: 标题 tab
+-->
 <script setup>
 import { HORIZONTAL, MetroWidget } from "jsview";
-import TabItem from "./TabItem.vue";
+import Item from "./Item.vue";
 
 const props = defineProps({
   data: {
@@ -55,7 +62,7 @@ const provideData = () => {
       }"
     >
       <template #renderItem="{ data, query, onAction }">
-        <tab-item :data="data" :query="query" :onAction="onAction"></tab-item>
+        <item :data="data" :query="query" :onAction="onAction"></item>
       </template>
     </metro-widget>
   </jsv-focus-block>

package/samples/MetroWidgetDemos/PingPong/{TabItem.vue → Item.vue}

@@ -2,7 +2,14 @@
  * @Author: ChenChanghua
  * @Date: 2022-07-12 14:52:53
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-09-01 17:10:14
+ * @LastEditTime: 2022-07-12 16:08:56
+ * @Description: file content
+-->
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-05-10 15:21:24
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-07-11 17:00:58
  * @Description: file content
 -->
 <script setup>
@@ -26,12 +33,13 @@ const onFocus = () => {
   active.value = false;
 };
 const onBlur = () => {
+  console.log("cchtest item onblur");
   focused.value = false;
   active.value =
     props.query.getCurrentFocusId().id === props.query.id ? true : false;
 };
 const onClick = () => {
-  console.log("tab item onclick ", props.data);
+  console.log("item onclick ", props.data);
 };
 
 // 一般在create的时候进行回调的注册, 使用 option api的可以在created时进行注册

package/samples/MetroWidgetDemos/PingPong/ViewSwiper.vue

@@ -2,13 +2,13 @@
  * @Author: ChenChanghua
  * @Date: 2022-07-12 10:30:33
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-09-01 17:05:07
+ * @LastEditTime: 2022-07-13 10:50:43
  * @Description: file content
 -->
 <script>
 import AppPage from "./AppPage.vue";
 import { getKeyFramesGroup } from "jsview";
-import { reactive, ref } from "vue";
+import { reactive } from "vue";
 
 export default {
   components: {

package/samples/Preload/App.vue

@@ -5,7 +5,6 @@ import {
   JsvPreload,
   buildPreloadInfo,
   buildDownloadInfo,
-  useFocusHub,
 } from "jsview";
 import awesome from "./images/awesomeface.png";
 import cat from "./images/cat.jpg";
@@ -15,11 +14,11 @@ import { ref } from "vue";
 import { useRouter } from "vue-router";
 
 const name = "/preload";
-const focusHub = useFocusHub();
 const text = ref("");
-let preloadInfo = [];
-let downloadInfo = [];
+let = preloadInfo = [];
+let = downloadInfo = [];
 const router = useRouter();
+let focusNode = ref(null);
 
 const _onPreloading = (percent) => {
   console.log("preloading ", percent);
@@ -29,9 +28,9 @@ const _onPreloadDone = (imageInfo) => {
   console.log("PRELOAD DONE!", imageInfo);
 };
 
-const _onDownloadDone = (urls, extra) => {
-  console.log("DOWNLOAD DONE!", urls, extra);
-  text.value = `图片下载完成\n${awesome}\n${cat}`;
+const _onDownloadDone = () => {
+  console.log("DOWNLOAD DONE!");
+  this.text = `图片下载完成\n${awesome}\n${cat}`;
 };
 
 const _measures = () => {
@@ -44,13 +43,13 @@ const _measures = () => {
 
 const _onKeyDown = (ev) => {
   if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-    router?.go(-1); // 有router时，是从DemoHomepage进入，回退
+    router.go(-1); // 有router时，是从DemoHomepage进入，回退
   }
   return true;
 };
 
 const _onFocus = () => {
-  focusHub.setFocus(name);
+  focusNode.value.findBlockByName(name).requestFocus();
 };
 
 for (const item of data) {
@@ -59,20 +58,16 @@ for (const item of data) {
 }
 preloadInfo.push(null); // 测试item为null的加载
 downloadInfo = [
-  buildDownloadInfo(awesome, null, true),
-  buildDownloadInfo(cat, null, true),
+  buildDownloadInfo(awesome),
+  buildDownloadInfo(cat),
   buildDownloadInfo(null), // 测试URL为null的加载
 ];
 </script>
 
 <template>
   <jsv-focus-block
+    ref="focusNode"
     autoFocus
-    :style="{
-      width: 1920,
-      height: 1080,
-      backgroundColor: '#FFFFFF',
-    }"
     :onAction="{
       onKeyDown: _onKeyDown,
       onFocus: _onFocus,

package/samples/SprayView/App.vue

@@ -234,8 +234,8 @@ export default {
   }
 }
 .root {
-  width: 1920px;
-  height: 1080px;
+  width: 1280px;
+  height: 720;
   background-color: #334c4c;
 }
 

package/samples/TextureAnimation/App2.vue

@@ -9,19 +9,18 @@ import {
   DECORATE_NINEPATCH_ALPHA_MIX,
   DECORATE_BORDER_RADIUS,
 } from "jsview";
-import img from "./assets/light.png";
-import img2 from "./assets/light2.png";
+import img from "./assets/swipLight.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(80);
+const top = ref(50);
 const rotateAnimation =
   "{from {transform: rotate3d(0,0,1,0);} to {transform: rotate3d(0,0,1,360deg);}}";
 
@@ -33,20 +32,23 @@ const ninePatchDecorator = {
   borderOutset: 0,
   animTime: 0.5,
 };
-//注意texture的尺寸需要兼顾最大的view
-const texCoord = {
-  width: 600,
-  height: 600,
-};
+const texCoord = ref({
+  width: 400,
+  height: 400,
+});
 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(80, 200);
+    top.value = getRandom(50, 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;
 };
@@ -58,27 +60,12 @@ 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"
@@ -92,20 +79,5 @@ 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/VideoDemo/App.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { provide, reactive, ref, watch } from "vue";
-import Controllor from "./components/Controllor";
-import VideoFrame from "./components/VideoFrame";
+import Controllor from "./components/Controllor.vue";
+import VideoFrame from "./components/VideoFrame.vue";
 
 const Caption = {
   offscreenVideo:

package/samples/VisibleSensorDemo/App.vue

@@ -1,15 +1,22 @@
 <script setup>
-import { watch, reactive, onMounted, ref } from "vue";
+import { reactive, onMounted, ref } from "vue";
 import { useRouter } from "vue-router";
 import { jJsvRuntimeBridge, JsvVisibleSensor } from "jsview";
 
 const BOX_WIDTH = 150;
 const BOX_HEIGHT = 150;
-const BOX_COLOR = "rgba(0,255,255,0.6)";
-const VISIBLE_RANGE = 0.25;
+const BOX_COLOR = "#00FFFF";
 
 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);
 let status_text = reactive({
@@ -19,24 +26,12 @@ let status_text = reactive({
   newV: "false",
 });
 
-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);
-});
+case_config.value = getTestCase(0);
 
 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";
@@ -51,9 +46,6 @@ 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;
 };
 
@@ -68,17 +60,17 @@ function getTestCase(test_index) {
   switch (test_index) {
     case 0: {
       // 上到下
-      test_config.animation = "visibleSensor_upDown 8s infinite linear";
+      test_config.animation = "visibleSensor_upDown 5s infinite linear";
       test_config.text = "从上到下";
       test_config.horizon = 1.0;
-      test_config.vertical = VISIBLE_RANGE;
+      test_config.vertical = 0.25;
       break;
     }
     case 1: {
       // 左到右
-      test_config.animation = "visibleSensor_leftRight 8s infinite linear";
+      test_config.animation = "visibleSensor_leftRight 5s infinite linear";
       test_config.text = "从左到右";
-      test_config.horizon = VISIBLE_RANGE;
+      test_config.horizon = 0.25;
       test_config.vertical = 1.0;
       break;
     }
@@ -95,7 +87,7 @@ function getTestCase(test_index) {
         :style="{
           left: 10,
           top: 10,
-          height: 120,
+          height: 100,
           width: 900,
           fontColor: '#000000',
           fontSize: 15,
@@ -103,8 +95,7 @@ function getTestCase(test_index) {
         }"
       >
         {{
-          `按OK键切换方向
-new horizon: ${status_text.newH}
+          `new horizon: ${status_text.newH}
 new vertical: ${status_text.newV}
 -------
 old horizon: ${status_text.oldH}
@@ -115,34 +106,12 @@ old vertical: ${status_text.oldV}`
         ref="containerRef"
         :style="{
           left: 240,
-          top: 180,
-          width: 300,
-          height: 300,
+          top: 110,
+          width: 800,
+          height: 500,
           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,
@@ -159,40 +128,6 @@ 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,
@@ -202,9 +137,7 @@ old vertical: ${status_text.oldV}`
                 lineHeight: 30,
               }"
             >
-              {{
-                `${case_config.text}\nH:${status_text.newH}\nV:${status_text.newV}`
-              }}
+              {{ case_config.text }}
             </div>
           </JsvVisibleSensor>
         </div>
@@ -216,19 +149,19 @@ old vertical: ${status_text.oldV}`
 <style scoped>
 @keyframes visibleSensor_upDown {
   from {
-    transform: translate3d(75px, -180px, 0);
+    transform: translate3d(300px, -200px, 0);
   }
   to {
-    transform: translate3d(75px, 330px, 0);
+    transform: translate3d(300px, 600px, 0);
   }
 }
 
 @keyframes visibleSensor_leftRight {
   from {
-    transform: translate3d(-180px, 75px, 0);
+    transform: translate3d(-160px, 200px, 0);
   }
   to {
-    transform: translate3d(330px, 75px, 0);
+    transform: translate3d(1400px, 200px, 0);
   }
 }
 </style>

package/scripts/jsview-post-install.js

@@ -47,9 +47,9 @@ function installPatches(options) {
 }
 
 async function printRevision(options) {
-  const jsveiwVersionFile = options.jsviewDir + '/dom/target_core_revision.js';
+  const jsveiwVersionFile = options.jsviewDir + '/dom/target_core_revision.mjs';
 
-  const jsviewTargetVersion = require(jsveiwVersionFile);
+  const { default: jsviewTargetVersion } = await import(jsveiwVersionFile);
 
   console.log('**************************************************');
   console.log('* Update revision to:');
@@ -84,14 +84,14 @@ function main() {
   const options = {};
   options.projectDir = process.cwd();
   options.modulesDir = path.resolve(options.projectDir, 'node_modules');
-  options.jsviewDir = path.resolve(options.modulesDir, '@shijiu/jsview-vue');
+  options.jsviewDir = path.resolve(options.modulesDir, '@shijiu', 'jsview-vue');
   options.patchesDir = path.resolve(options.jsviewDir, 'patches');
   options.distDir = path.resolve(options.projectDir, 'dist');
 
   checkNpmCommand();
 
-  checkPackageVersion(options, 'vue', '3.2.8');
-  checkPackageVersion(options, '@vue/compiler-sfc', '3.2.8');
+  checkPackageVersion(options, 'vue', '3.2.37');
+  checkPackageVersion(options, '@vue/compiler-sfc', '3.2.37');
 
   installPatches(options);
 

package/scripts/jsview-run-android.js

@@ -3,7 +3,7 @@
 const childProcess = require('child_process');
 const path = require('path');
 
-function getOptions() {
+async function getOptions() {
     const options = {
         androidPackage: "com.qcode.jsview.sample_demo/com.qcode.jsview.sample.SingleActivity",
         coreRevision: null,
@@ -15,17 +15,18 @@ function getOptions() {
         options.androidPackage = process.argv[2];
     }
 
-    const rootDir = process.cwd();
-    const jsviewDir = path.resolve(rootDir, 'jsview');
-    const jsveiwVersionFile = path.resolve(jsviewDir, 'dom/target_core_revision.js');
-    const jsviewTargetVersion = require(jsveiwVersionFile);
+    const projectDir = process.cwd();
+    const modulesDir = path.resolve(projectDir, 'node_modules');
+    const jsviewDir = path.resolve(modulesDir, '@shijiu', 'jsview-vue');
+    const jsveiwVersionFile = path.resolve(jsviewDir, 'dom', 'target_core_revision.mjs');
+    const { default: jsviewTargetVersion } = await import(jsveiwVersionFile);
     options.coreRevision = jsviewTargetVersion.CoreRevision;
     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";
+    const homepageUrlFile = path.resolve(modulesDir, '.vite', 'jsview', 'network.mjs');
+    let { default: homepageDomain } = await import(homepageUrlFile);
+    homepageDomain = homepageDomain.replace(/\u001b\[.*?m/g, '')
+    options.homepageUrl = homepageDomain + "js/main.jsv.js";
 
     return options;
 }
@@ -54,8 +55,8 @@ function androidStartActivity(options) {
 }
 
 
-function main() {
-    const options = getOptions();
+async function main() {
+    const options = await getOptions();
 
     printRevision(options);