@shijiu/jsview-vue 0.9.602 → 1.9.627

package/samples/Basic/components/anim/AnimGroup.vue

@@ -1,9 +1,9 @@
 <script setup>
 import { reactive, onMounted, onBeforeUnmount } from "vue";
-import ContentBlock from "../ContentBlock";
-import AnimKeyframeBasic from "./AnimKeyframeBasic";
-import AnimKeyframeComposite from "./AnimKeyframeComposite";
-import AnimTransition from "./AnimTransition";
+import ContentBlock from "../ContentBlock.vue";
+import AnimKeyframeBasic from "./AnimKeyframeBasic.vue";
+import AnimKeyframeComposite from "./AnimKeyframeComposite.vue";
+import AnimTransition from "./AnimTransition.vue";
 
 const props = defineProps({
   contentClass: String,

package/samples/Basic/components/div/DivGroup1.vue

@@ -1,8 +1,8 @@
 <script setup>
-import ContentBlock from "../ContentBlock";
-import DivBackground from "./DivBackground";
-import DivClip from "./DivClip";
-import DivLayout from "./DivLayout";
+import ContentBlock from "../ContentBlock.vue";
+import DivBackground from "./DivBackground.vue";
+import DivClip from "./DivClip.vue";
+import DivLayout from "./DivLayout.vue";
 
 const props = defineProps({
   contentClass: String,

package/samples/Basic/components/div/DivGroup2.vue

@@ -1,9 +1,9 @@
 <script setup>
-import ContentBlock from "../ContentBlock";
-import DivCssScoped from "./DivCssScoped";
-import DivCssVar from "./DivCssVar";
-import DivRadius from "./DivRadius";
-import DivTransform from "./DivTransform";
+import ContentBlock from "../ContentBlock.vue";
+import DivCssScoped from "./DivCssScoped.vue";
+import DivCssVar from "./DivCssVar.vue";
+import DivRadius from "./DivRadius.vue";
+import DivTransform from "./DivTransform.vue";
 
 const props = defineProps({
   contentClass: String,

package/samples/Basic/components/img/ImageGroup.vue

@@ -7,8 +7,8 @@
 </template>
 
 <script>
-import ContentBlock from '../ContentBlock';
-import ImgLayout from './ImgLayout';
+import ContentBlock from '../ContentBlock.vue';
+import ImgLayout from './ImgLayout.vue';
 
 export default {
     props: {

package/samples/Basic/components/panel/Panel1.vue

@@ -1,10 +1,10 @@
 <script setup>
-import TitleBar from "./TitleBar";
-import DivGroup1 from "../div/DivGroup1";
-import DivGroup2 from "../div/DivGroup2";
-import TextGroup1 from "../text/TextGroup1";
-import TextGroup2 from "../text/TextGroup2";
-import AnimGroup from "../anim/AnimGroup";
+import TitleBar from "./TitleBar.vue";
+import DivGroup1 from "../div/DivGroup1.vue";
+import DivGroup2 from "../div/DivGroup2.vue";
+import TextGroup1 from "../text/TextGroup1.vue";
+import TextGroup2 from "../text/TextGroup2.vue";
+import AnimGroup from "../anim/AnimGroup.vue";
 
 const props = defineProps({
   panelClass: String,

package/samples/Basic/components/panel/Panel2.vue

@@ -1,6 +1,6 @@
 <script setup>
-import TitleBar from "./TitleBar";
-import ImageGroup from "../img/ImageGroup";
+import TitleBar from "./TitleBar.vue";
+import ImageGroup from "../img/ImageGroup.vue";
 
 const props = defineProps({
   panelClass: String,

package/samples/Basic/components/text/TextGroup1.vue

@@ -1,8 +1,8 @@
 <script setup>
-import ContentBlock from "../ContentBlock";
-import TextAlign from "./TextAlign";
-import TextFontStyle from "./TextFontStyle";
-import TextOverflow from "./TextOverflow";
+import ContentBlock from "../ContentBlock.vue";
+import TextAlign from "./TextAlign.vue";
+import TextFontStyle from "./TextFontStyle.vue";
+import TextOverflow from "./TextOverflow.vue";
 
 const props = defineProps({
   contentClass: String,

package/samples/Basic/components/text/TextGroup2.vue

@@ -1,6 +1,6 @@
 <script setup>
-import ContentBlock from "../ContentBlock";
-import TextEmoji from "./TextEmoji";
+import ContentBlock from "../ContentBlock.vue";
+import TextEmoji from "./TextEmoji.vue";
 
 const props = defineProps({
   contentClass: String,

package/samples/DemoHomepage/App.vue

@@ -6,7 +6,7 @@
  * @Description: file content
 -->
 <script>
-import { router } from "./router.js";
+import { router } from "./router";
 import { jJsvRuntimeBridge } from "jsview";
 
 export default {

package/samples/DemoHomepage/router.js

@@ -1,170 +1,175 @@
 import { createRouter } from "vue-router";
-import { createJsvHashHistory } from "jsview";
+import { jsvCreateHashHistory } from "jsview";
 
 const routeList = [
   // 功能实例
   {
     name: "Home",
     path: "/",
-    component: () => import("./views/Homepage"),
+    component: () => import("./views/Homepage.vue"),
   },
   {
     name: "基础示例合集",
     path: "/feature/Basic",
-    component: () => import("jsview/samples/Basic/App"),
+    component: () => import("jsview/samples/Basic/App.vue"),
   },
   {
     name: "可视化变化通知",
     path: "/feature/VisibleSensorDemo",
-    component: () => import("jsview/samples/VisibleSensorDemo/App"),
+    component: () => import("jsview/samples/VisibleSensorDemo/App.vue"),
   },
   {
     name: "快速刷新的表格布局组件",
     path: "/feature/GridDemo",
-    component: () => import("jsview/samples/GridDemo/App"),
+    component: () => import("jsview/samples/GridDemo/App.vue"),
   },
   {
     name: ".9图焦点框漂移",
     path: "/feature/NinePatchDemo",
-    component: () => import("jsview/samples/NinePatchDemo/App"),
+    component: () => import("jsview/samples/NinePatchDemo/App.vue"),
   },
   {
     name: "视频",
     path: "/feature/VideoDemo",
-    component: () => import("jsview/samples/VideoDemo/App"),
+    component: () => import("jsview/samples/VideoDemo/App.vue"),
   },
   {
     name: "焦点切换demo",
     path: "/feature/BasicFocusControl",
-    component: () => import("jsview/samples/BasicFocusControl/App"),
+    component: () => import("jsview/samples/BasicFocusControl/App.vue"),
   },
   {
     name: "Hash方式路由切换",
     path: "/feature/HashHistory",
     props: { routePath: "/feature/HashHistory" },
-    component: () => import("jsview/samples/HashHistory/App"),
+    component: () => import("jsview/samples/HashHistory/App.vue"),
   },
   {
     name: "翻牌游戏",
     path: "/feature/FlipCard",
-    component: () => import("jsview/samples/FlipCard/App"),
+    component: () => import("jsview/samples/FlipCard/App.vue"),
   },
   {
     name: "设置颜色空间",
     path: "/feature/ColorSpace",
-    component: () => import("jsview/samples/ColorSpace/App"),
+    component: () => import("jsview/samples/ColorSpace/App.vue"),
   },
   {
     name: "制定Texture尺寸",
     path: "/feature/TextureSize",
-    component: () => import("jsview/samples/TextureSize/App"),
+    component: () => import("jsview/samples/TextureSize/App.vue"),
   },
   {
     name: "动图",
     path: "/feature/AnimPicture",
-    component: () => import("jsview/samples/AnimPicture/App"),
+    component: () => import("jsview/samples/AnimPicture/App.vue"),
   },
   {
     name: "粒子效果",
     path: "/feature/SprayView",
-    component: () => import("jsview/samples/SprayView/App"),
+    component: () => import("jsview/samples/SprayView/App.vue"),
   },
   {
     name: "长文字",
     path: "/feature/LongText",
-    component: () => import("jsview/samples/LongText/App"),
+    component: () => import("jsview/samples/LongText/App.vue"),
   },
   {
     name: "长图片",
     path: "/feature/LongImage",
-    component: () => import("jsview/samples/LongImage/App"),
+    component: () => import("jsview/samples/LongImage/App.vue"),
   },
   {
     name: "二维码",
     path: "/feature/QrcodeDemo",
-    component: () => import("jsview/samples/QrcodeDemo/App"),
+    component: () => import("jsview/samples/QrcodeDemo/App.vue"),
   },
   {
     name: "文字阴影",
     path: "/feature/TextShadowDemo",
-    component: () => import("jsview/samples/TextShadowDemo/App"),
+    component: () => import("jsview/samples/TextShadowDemo/App.vue"),
   },
   {
     name: "多行文字区域内对齐",
     path: "/feature/TextBox",
-    component: () => import("jsview/samples/TextBox/App"),
+    component: () => import("jsview/samples/TextBox/App.vue"),
   },
   {
     name: "抛物运动写法样例",
     path: "/feature/ThrowMoveDemo",
-    component: () => import("jsview/samples/ThrowMoveDemo/App"),
+    component: () => import("jsview/samples/ThrowMoveDemo/App.vue"),
   },
   {
     name: "精灵图",
     path: "/feature/SpriteImage",
-    component: () => import("jsview/samples/SpriteImage/App"),
+    component: () => import("jsview/samples/SpriteImage/App.vue"),
   },
   {
     name: "文字滚动(标题跑马灯)",
     path: "/feature/Marquee",
-    component: () => import("jsview/samples/Marquee/App"),
+    component: () => import("jsview/samples/Marquee/App.vue"),
   },
   {
     name: "文字输入",
     path: "/feature/Input",
-    component: () => import("jsview/samples/Input/App"),
+    component: () => import("jsview/samples/Input/App.vue"),
   },
   {
     name: "拼图demo",
     path: "/feature/MaskClip",
-    component: () => import("jsview/samples/MaskClip/App"),
+    component: () => import("jsview/samples/MaskClip/App.vue"),
   },
   {
     name: "SoundPool",
     path: "/feature/SoundPool",
-    component: () => import("jsview/samples/SoundPool/App"),
+    component: () => import("jsview/samples/SoundPool/App.vue"),
   },
   {
     name: "TextureAnimation",
     path: "/feature/TextureAnimation",
-    component: () => import("jsview/samples/TextureAnimation/App"),
+    component: () => import("jsview/samples/TextureAnimation/App.vue"),
+  },
+  {
+    name: "TextureAnimation2",
+    path: "/feature/TextureAnimation2",
+    component: () => import("jsview/samples/TextureAnimation/App2.vue"),
   },
   {
     name: "公祭日黑白效果",
     path: "/feature/GrayDown",
-    component: () => import("jsview/samples/FilterDemo/App"),
+    component: () => import("jsview/samples/FilterDemo/App.vue"),
   },
 
   // MetroWidget示例
   {
     name: "简单示例",
     path: "/metroWidget/Simple",
-    component: () => import("jsview/samples/MetroWidgetDemos/Simple/App"),
+    component: () => import("jsview/samples/MetroWidgetDemos/Simple/App.vue"),
   },
   {
     name: "嵌套示例",
     path: "/metroWidget/Advanced",
-    component: () => import("jsview/samples/MetroWidgetDemos/Advanced/App"),
+    component: () => import("jsview/samples/MetroWidgetDemos/Advanced/App.vue"),
   },
   {
     name: "性能测试",
     path: "/metroWidget/PerformanceTest",
     component: () =>
-      import("jsview/samples/MetroWidgetDemos/PerformanceTest/App"),
+      import("jsview/samples/MetroWidgetDemos/PerformanceTest/App.vue"),
   },
   {
     name: "乒乓模式",
     path: "/metroWidget/PingPong",
     component: () =>
-      import("jsview/samples/MetroWidgetDemos/PingPong/App"),
+      import("jsview/samples/MetroWidgetDemos/PingPong/App.vue"),
   },
 ];
 
 const router = createRouter({
-  // 浏览器调试和盒子上都可以使用类WebHashHistory的createJsvHashHistory(推荐)
+  // 浏览器调试和盒子上都可以使用类WebHashHistory的jsvCreateHashHistory(推荐)
   // 或 createMemoryHistory;
   // createWebHashHistory只能用于浏览器调试，盒子不支持
-  history: createJsvHashHistory(),
+  history: jsvCreateHashHistory(),
   routes: routeList,
 });
 

package/samples/DemoHomepage/views/Homepage.vue

@@ -115,7 +115,6 @@ export default {
     },
   },
   created() {
-    console.log("cchtest homepage beforeCreated", localStorage.curTab);
     if (typeof localStorage.curTab !== "undefined") {
       this.tabId = parseInt(localStorage.curTab);
     }
@@ -123,10 +122,8 @@ export default {
     this.contentData = dataList[this.tabId];
   },
   mounted() {
-    console.log("cchtest homepage mounted", localStorage.curTab);
   },
   beforeUnmount() {
-    console.log("cchtest homePage beforeUnmount");
   },
 };
 </script>
@@ -179,8 +176,8 @@ export default {
 
 <style scoped>
 .rootSize {
-  width: 1920;
-  height: 1080;
+  width: 1280;
+  height: 720;
   background-color: #334c4c;
 }
 

package/samples/HashHistory/router.js

@@ -1,22 +1,22 @@
 import { createRouter } from "vue-router";
-import { createJsvHashHistory } from "jsview";
+import { jsvCreateHashHistory } from "jsview";
 
 const routeList = [
   // 功能实例
   {
     name: "Home",
     path: "/",
-    redirect: "/__MainJsvApp/MainPage",
+    redirect: "/__MainJsvApp/MainPage.vue",
   },
   {
     name: "MainPage",
     path: "/__MainJsvApp/MainPage",
-    component: () => import("./views/MainPage"),
+    component: () => import("./views/MainPage.vue"),
   },
   {
     name: "SubPageFirst",
     path: "/__MainJsvApp/SubPageFirst",
-    component: () => import("./views/SubPage"),
+    component: () => import("./views/SubPage.vue"),
     props: {
       name: "First",
       jumpTo: "Second",
@@ -25,7 +25,7 @@ const routeList = [
   {
     name: "SubPageSecond",
     path: "/__MainJsvApp/SubPageSecond",
-    component: () => import("./views/SubPage"),
+    component: () => import("./views/SubPage.vue"),
     props: {
       name: "Second",
       jumpTo: "First",
@@ -34,7 +34,7 @@ const routeList = [
 ];
 
 const router = createRouter({
-  history: createJsvHashHistory(),
+  history: jsvCreateHashHistory(),
   routes: routeList,
 });
 

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

@@ -0,0 +1,83 @@
+<script setup>
+import { ref, reactive } from "vue";
+import { useRouter } from "vue-router";
+import {
+  jJsvRuntimeBridge,
+  getKeyFramesGroup,
+  JsvTextureAnim,
+  TexAlignAnchor,
+  DECORATE_NINEPATCH_ALPHA_MIX,
+  DECORATE_BORDER_RADIUS,
+} from "jsview";
+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(50);
+const rotateAnimation =
+  "{from {transform: rotate3d(0,0,1,0);} to {transform: rotate3d(0,0,1,360deg);}}";
+
+const ninePatchDecorator = {
+  type: DECORATE_NINEPATCH_ALPHA_MIX,
+  url: `url(${mask})`,
+  imageWidth: 86,
+  centerWidth: 2,
+  borderOutset: 0,
+  animTime: 0.5,
+};
+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(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;
+};
+</script>
+<template>
+  <jsv-focus-block
+    autoFocus
+    :onKeyDown="onKeyDown"
+    :style="{
+      width: 1280,
+      height: 720,
+      backgroundImage: 'https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/BackgroundLongmao.jpg',
+    }"
+  >
+    <div>
+      <jsv-texture-anim
+        ref="textureAnim1"
+        :src="img"
+        :left="left"
+        :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/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);