@shijiu/jsview-vue 0.9.631 → 0.9.766

package/dom/target_core_revision.js

@@ -3,11 +3,11 @@
  */
 
 const TargetRevision = {
-  "CoreRevision": 811164,
-  "CoreRevisionAndBranch": "811164",
-  "JseRevision": "1.0.822",
+  "CoreRevision": 1021277,
+  "CoreRevisionAndBranch": "1021277",
+  "JseRevision": "1.0.830",
   "JseUrl":
-    "http://cdn.release.qcast.cn/forge_js/master/JsViewES6_react_r822.jsv.29b73379.js"
+    "http://cdn.release.qcast.cn/forge_js/master/JsViewES6_react_r830.jsv.9e271859.js"
 };
 
 // 不要用export default，update-env脚本不能解析

package/loader/loader.js

@@ -52,6 +52,10 @@ async function selectJsViewRuntime(js_sub_path, input_designed_map, app_name) {
     window.JsView.ForgeExt = app_define.ForgeExtension;
     window.JsView.Dom.JsSubPath = js_sub_path;
   } else {
+    // 在PC环境下没有处理加载EngineJs, 所以在此加载一下
+    await import("../dom/jsv-engine-js-browser.js");
+
+    // 加载jsv-dom的调试版本
     await import("../dom/jsv-browser-debug-dom.js");
   }
 }

package/package.json

@@ -7,7 +7,7 @@
     "./dom/*.js",
     "./loader/*.js"
   ],
-  "version": "0.9.631",
+  "version": "0.9.766",
   "bin": {
     "jsview-post-build": "./scripts/jsview-post-build.js",
     "jsview-post-install": "./scripts/jsview-post-install.js",

package/patches/node_modules/@vue/cli-service/lib/config/base.js

@@ -129,7 +129,7 @@ module.exports = (api, options) => {
             .loader(require.resolve('vue-loader'))
             .options({
               ...vueLoaderCacheConfig,
-              compilerOptions: { isCustomElement: tag => tag === 'fdiv' }, // QCode Added
+              compilerOptions: { isCustomElement: tag => (tag === 'fdiv' || tag === 'audiotrack') }, // QCode Added
               babelParserPlugins: ['jsx', 'classProperties', 'decorators-legacy']
             })
             .end()

package/samples/AnimPicture/App.vue

@@ -6,7 +6,7 @@
  * @Description: file content
 -->
 <script setup>
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import { LoopType, JsvApic } from "jsview";
 import catRun from "./assets/animated_webp.webp";
@@ -53,10 +53,10 @@ const ballCallback = {
     ballPlay.value = false;
   },
 };
-let catRunRef = ref(null);
-let girlRunRef = ref(null);
-let quanRef = ref(null);
-let ballRef = ref(null);
+let catRunRef = shallowRef(null);
+let girlRunRef = shallowRef(null);
+let quanRef = shallowRef(null);
+let ballRef = shallowRef(null);
 
 const onKeyDown = (ev) => {
   if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {

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

@@ -51,7 +51,7 @@
 </template>
 
 <script setup>
-import { ref, onUnmounted } from 'vue'
+import { ref, shallowRef, onUnmounted } from 'vue'
 
 // v-show 控制
 let vShow = ref(false);

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

@@ -1,6 +1,6 @@
 <template>
     <div id='item-root'>
-        <ContentBlock :class=contentClass :style="{top:itemSides.height*0}" :=contentBlockProps :index=0 title="图片显示">
+        <ContentBlock :class=contentClass :style="{top:itemSides.height*0}" :=contentBlockProps :index=0 title="img标签ObjectFit">
              <ImgLayout/>
         </ContentBlock>
     </div>
@@ -23,7 +23,7 @@ export default {
         contentBlockProps() {
             return {
                 colIndex: 0,
-                itemSides: this.itemSides
+                itemSides:{...this.itemSides, height: this.itemSides.height * 2}
             }
         }
     }

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

@@ -1,13 +1,54 @@
 <template>
 <div id='layout-root'>
     <div style="{top: 0}">
-        <div class="content-font" :style="{width: 50, height: titleHeight}">原图</div>
-        <div :style="{top: titleHeight,
-            width: imageSize.width+4, height: imageSize.height+4,
-            backgroundColor: 'rgba(0, 255, 0, 1)' }">
-            <img :style="{ left: 2, top: 2,
-                width: imageSize.width, height: imageSize.height}"
-                :src="testImgPath"/>
+        <div id="0列0行" :style="{left: coloumWidth * 0, top: tabLineHeight * 0}">
+            <div class="content-font titleStyle"> fill(缩放变形)</div>
+            <div class="frameStyle">
+                <img class="imageStyle" :style="{ objectFit: 'fill' }"
+                    :src="testImgPath"/>
+            </div>
+        </div>
+        <div id="1列0行" :style="{left: coloumWidth * 1, top: tabLineHeight * 0}">
+            <div class="content-font titleStyle">contain</div>
+            <div class="frameStyle">
+                <img class="imageStyle" :style="{ objectFit: 'contain' }"
+                    :src="testImgPath"/>
+            </div>
+        </div>
+        <div id="0列1行" :style="{left: coloumWidth * 0, top: tabLineHeight * 1}">
+            <div class="content-font titleStyle">none</div>
+            <div class="frameStyle">
+                <img class="imageStyle" :style="{ objectFit: 'none' }"
+                    :src="testImgPath"/>
+            </div>
+        </div>
+        <div id="1列1行" :style="{left: coloumWidth * 1, top: tabLineHeight * 1}">
+            <div class="content-font titleStyle">scale-down</div>
+            <div class="frameStyle">
+                <img class="imageStyle" :style="{ objectFit: 'scale-down' }"
+                    :src="testImgPath"/>
+            </div>
+        </div>
+        <div id="0列2行" :style="{left: coloumWidth * 0, top: tabLineHeight * 2}">
+            <div class="content-font titleStyle">cover</div>
+            <div class="frameStyle">
+                <img class="imageStyle" :style="{ objectFit: 'cover' }"
+                    :src="testImgPath"/>
+            </div>
+        </div>
+        <div id="1列2行" :style="{left: coloumWidth * 1, top: tabLineHeight * 2}">
+            <div class="content-font titleStyle">none(小图)</div>
+            <div class="frameStyle">
+                <img class="imageStyle" :style="{ objectFit: 'none' }"
+                    :src="tinyImgPath"/>
+            </div>
+        </div>
+        <div id="0列3行" :style="{left: coloumWidth * 0, top: tabLineHeight * 3}">
+            <div class="content-font titleStyle">scale-down(小图)</div>
+            <div class="frameStyle">
+                <img class="imageStyle" :style="{ objectFit: 'scale-down' }"
+                    :src="tinyImgPath"/>
+            </div>
         </div>
     </div>
 </div>
@@ -15,27 +56,50 @@
 
 <script>
 import testImgPath from '../../assets/test.jpg';
+import tinyImgPath from '../../assets/icon.png';
 
 export default {
     computed: {
         testImgPath() {
             return testImgPath;
         },
-        titleHeight() {
-            return 16;
+        tinyImgPath() {
+            return tinyImgPath;
         },
-        imageSize() {
-            return {
-                width: 80,
-                height: 64,
-            }
+        coloumWidth() {
+            return 120;
         },
+        tabLineHeight() {
+            return 76; // imageSize.height + 26
+        }
     }
 }
 
 </script>
 
 
-<style>
+<style scoped>
 @import "../FontStyle.css";
+</style>
+
+<style scoped>
+.titleStyle {
+    width: 100;
+    height: 16;
+}
+
+.imageStyle {
+    top: 2;
+    left: 2;
+    width: 100;
+    height: 50;
+}
+
+.frameStyle {
+    top: 16; /* titleHeight */
+    width: 104; /* imageSize.width+4 */
+    height: 54; /* imageSize.height+4 */
+    background-color: rgba(0, 255, 0, 1)
+}
+
 </style>

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

@@ -0,0 +1,104 @@
+<script setup>
+const gap = 5;
+const blockSize = {
+  width: 180,
+  height: 30,
+};
+const unitHeight = 20 + 35;
+
+const ltrText = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+const rtlText = "شلؤيثبلاهتنمةىخحضقسفعررصءغئا";
+</script>
+
+<template>
+  <div id="layout-root">
+    <div
+      :style="{
+        top: unitHeight * 0,
+      }"
+    >
+      <div class="explain">ltr文字省略尾部</div>
+      <div
+        class="content-font base"
+        :style="{
+          direction: 'ltr',
+        }"
+      >
+        {{ ltrText }}
+      </div>
+    </div>
+
+    <div
+      :style="{
+        top: unitHeight * 1,
+      }"
+    >
+      <div class="explain">ltr文字省略头部</div>
+      <div
+        class="content-font base"
+        :style="{
+          direction: 'rtl',
+        }"
+      >
+        {{ ltrText }}
+      </div>
+    </div>
+
+    <div
+      :style="{
+        top: unitHeight * 2,
+      }"
+    >
+      <div class="explain">rtl文字省略尾部</div>
+      <div
+        class="content-font base"
+        :style="{
+          direction: 'rtl',
+        }"
+      >
+        {{ rtlText }}
+      </div>
+    </div>
+
+    <div
+      :style="{
+        top: unitHeight * 3,
+      }"
+    >
+      <div class="explain">rtl文字省略头部</div>
+      <div
+        class="content-font base"
+        :style="{
+          direction: 'ltr',
+        }"
+      >
+        {{ rtlText }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+@import "../FontStyle.css";
+
+.base {
+  top: 25px;
+  width: 180px;
+  height: 30px;
+  line-height: 30px;
+  background-color: rgba(255, 255, 0, 0.5);
+  color: #ff0000;
+  font-size: 25px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.explain {
+  width: 180px;
+  height: 20px;
+  line-height: 20px;
+  font-size: 15px;
+  color: #000000;
+}
+</style>

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

@@ -18,7 +18,7 @@
 
 <style>
 .emoji {
-  top: 100;
+  top: 80;
   width: 300;
   height: 100;
   font-size: 20;

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

@@ -38,7 +38,7 @@ const contentBlockProps = {
     <ContentBlock
       :class="contentClass"
       :style="{ top: itemSides.height * 2 }"
-      :="{ ...contentBlockProps, itemSides: { ...itemSides, height: 290 } }"
+      :="{ ...contentBlockProps, itemSides: { ...itemSides, height: 320 } }"
       :index="2"
       title="文字折行"
     >

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

@@ -1,6 +1,7 @@
 <script setup>
 import ContentBlock from "../ContentBlock";
 import TextEmoji from "./TextEmoji";
+import TextDirection from "./TextDirection.vue";
 
 const props = defineProps({
   contentClass: String,
@@ -19,10 +20,19 @@ const contentBlockProps = {
       :style="{ top: itemSides.height * 0 }"
       :="contentBlockProps"
       :index="0"
-      title="文字对齐"
+      title="emoji"
     >
       <TextEmoji />
     </ContentBlock>
+    <ContentBlock
+      :class="contentClass"
+      :style="{ top: itemSides.height * 1 }"
+      :="{ ...contentBlockProps, itemSides: { ...itemSides, height: 250 } }"
+      :index="0"
+      title="不同方向文字省略"
+    >
+      <text-direction />
+    </ContentBlock>
   </div>
 </template>
 

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

@@ -10,7 +10,12 @@ const baseStyle = {
   backgroundColor: "rgba(255, 255, 0, 0.5)",
   color: "rgba(255, 0, 0, 1)",
 };
-const multiLine =
+const multiLineCut =
+  "多行文字（末尾截断)：" +
+  '\n第一行：我末尾有个"\\n"' +
+  "\n第二行：一二三四五六七八九十,一二三四五六七八九十,一二三四五六七八九十" +
+  "\n第三行：一二三四五六七八九十,一二三四五六七八九十,一二三四五六七八九十";
+const multiLineEllipsis =
   "多行文字（末尾省略)：" +
   '\n第一行：我末尾有个"\\n"' +
   "\n第二行：一二三四五六七八九十,一二三四五六七八九十,一二三四五六七八九十" +
@@ -81,7 +86,7 @@ const multiLine =
         overflow: 'hidden',
       }"
     >
-      5.{{ multiLine }}
+      5.{{ multiLineCut }}
     </div>
 
     <div
@@ -95,7 +100,7 @@ const multiLine =
         overflow: 'hidden',
       }"
     >
-      6.{{ multiLine }}
+      6.{{ multiLineEllipsis }}
     </div>
   </div>
 </template>

package/samples/BasicFocusControl/components/BaseBlock.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted } from "vue";
+import { ref, shallowRef, onMounted } from "vue";
 const props = defineProps({
   name: String,
   style: {
@@ -12,7 +12,7 @@ const props = defineProps({
 });
 
 const fullName = ref("");
-const blockRef = ref(null);
+const blockRef = shallowRef(null);
 const hasFocused = ref(false);
 
 onMounted(() => {

package/samples/Collision/App.vue

@@ -7,21 +7,21 @@
 -->
 <script setup>
 import { createImpactTracer, createImpactCallback } from "jsview";
-import { ref, onMounted, onBeforeUnmount } from "vue";
+import { ref, shallowRef, onMounted, onBeforeUnmount } from "vue";
 import { useRouter } from "vue-router";
 
 const router = useRouter();
 
-const transEle1 = ref(null),
-  transEle2 = ref(null),
-  rotateEle1 = ref(null),
-  rotateEle2 = ref(null),
-  rotateEle3 = ref(null),
-  rotateEle4 = ref(null),
-  scaleEle1 = ref(null),
-  scaleEle2 = ref(null),
-  skewEle1 = ref(null),
-  skewEle2 = ref(null);
+const transEle1 = shallowRef(null),
+  transEle2 = shallowRef(null),
+  rotateEle1 = shallowRef(null),
+  rotateEle2 = shallowRef(null),
+  rotateEle3 = shallowRef(null),
+  rotateEle4 = shallowRef(null),
+  scaleEle1 = shallowRef(null),
+  scaleEle2 = shallowRef(null),
+  skewEle1 = shallowRef(null),
+  skewEle2 = shallowRef(null);
 
 let sensors = [];
 

package/samples/DemoHomepage/App.vue

@@ -5,23 +5,58 @@
  * @LastEditTime: 2022-07-12 13:40:15
  * @Description: file content
 -->
+<script setup>
+import { shallowRef, onMounted, defineExpose } from "vue";
+import { JsvPreload, buildPreloadInfo, jJsvRuntimeBridge } from "jsview";
+
+let backgroundImageUrl = shallowRef(null);
+
+let preloadInfo = shallowRef([]);
+
+let _onPreloadDone = () => {
+  console.log("background load done");
+  jJsvRuntimeBridge.notifyPageLoaded();
+};
+
+onMounted(() => {
+  console.log("simulate async get background url");
+  setTimeout(() => {
+    console.log("simulate background url got");
+    backgroundImageUrl.value =
+      "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/BackgroundLongmao.jpg";
+    preloadInfo.value = [buildPreloadInfo(backgroundImageUrl.value)];
+  }, 0);
+});
+</script>
+
 <script>
 import { router } from "./router.js";
-import { jJsvRuntimeBridge } from "jsview";
-
 export default {
   Router: router,
-  mounted() {
-    jJsvRuntimeBridge.notifyPageLoaded();
-  },
 };
 </script>
 
 <template>
   <div>
-    <router-view />
+    <jsv-preload
+      :key="backgroundImageUrl"
+      :preloadList="preloadInfo"
+      :onPreloadDone="_onPreloadDone"
+    />
+    <div
+      :style="{
+        width: 1280,
+        height: 720,
+        backgroundImage: backgroundImageUrl,
+      }"
+    />
+    <router-view v-slot="{ Component, route }">
+          <keep-alive>
+            <component v-if="route.meta.keepAlive" :is="Component" />
+          </keep-alive>
+          <component v-if="!route.meta.keepAlive" :is="Component" />
+    </router-view>
   </div>
 </template>
 
-<style scoped>
-</style>
+<style scoped></style>

package/samples/DemoHomepage/router.js

@@ -7,6 +7,9 @@ const routeList = [
     name: "Home",
     path: "/",
     component: () => import("./views/Homepage"),
+    meta: {
+      keepAlive: true // 需要被缓存(测试Router keep alive机制)
+    }
   },
   {
     name: "基础示例合集",
@@ -28,11 +31,11 @@ const routeList = [
     path: "/feature/NinePatchDemo",
     component: () => import("jsview/samples/NinePatchDemo/App"),
   },
-  {
-    name: "视频",
-    path: "/feature/VideoDemo",
-    component: () => import("jsview/samples/VideoDemo/App"),
-  },
+  // {
+  //   name: "视频",
+  //   path: "/feature/VideoDemo",
+  //   component: () => import("jsview/samples/VideoDemo/App"),
+  // },
   {
     name: "焦点切换demo",
     path: "/feature/BasicFocusControl",
@@ -144,16 +147,21 @@ const routeList = [
     path: "/feature/Preload",
     component: () => import("jsview/samples/Preload/App"),
   },
+  {
+    name: "图片缩小算法",
+    path: "/feature/ScaleDownNeon",
+    component: () => import("jsview/samples/ScaleDownNeon/App"),
+  },
   // {
   //   name: "碰撞检测",
   //   path: "/feature/Collision",
   //   component: () => import("jsview/samples/Collision/App"),
   // },
-  // {
-  //   name: "碰撞即停",
-  //   path: "/feature/ImpactStop",
-  //   component: () => import("jsview/samples/ImpactStop/App"),
-  // },
+  {
+    name: "碰撞即停",
+    path: "/feature/ImpactStop",
+    component: () => import("jsview/samples/ImpactStop/App"),
+  },
 
   // MetroWidget示例
   {