@shijiu/jsview-vue 1.9.650 → 1.9.720

package/package.json

@@ -1,35 +1,24 @@
 {
   "name": "@shijiu/jsview-vue",
   "sideEffects": [
-    "*.css",
-    "./index.js",
-    "./dom/bin/*.js",
-    "./dom/*.js",
-    "./loader/*.js"
+    "./index.js"
   ],
-  "version": "1.9.650",
-  "bin": {
-    "jsview-post-build": "./scripts/jsview-post-build.js",
-    "jsview-post-install": "./scripts/jsview-post-install.js",
-    "jsview-install-local-packages": "./scripts/jsview-install-local-packages.js"
-  },
-  "repository": "system/jsview-vue",
-  "bugs": "http://gitlab.qcast.cn/system/jsview-vue/issues",
+  "version": "1.9.720",
+  "repository": "system/jsview-framework",
+  "bugs": "http://gitlab.qcast.cn/system/jsview-framework/issues",
   "keywords": [
     "jsview",
     "vue3",
-    "jsview-vue",
-    "jsview-dom",
-    "jsview-utils",
-    "jsview-docs"
+    "jsview-vue"
   ],
   "author": "mengxk",
-  "homepage": "http://gitlab.qcast.cn/system/jsview-vue",
+  "homepage": "http://gitlab.qcast.cn/system/jsview-framework",
   "license": "MIT",
   "engines": {
     "node": ">=14.0.0"
   },
   "dependencies": {
+    "jsview": "0.0.0",
     "vue": "3.2.37",
     "vue-router": "4.1.4"
   },

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/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第二行：一二三四五六七八九十,一二三四五六七八九十,一二三四五六七八九十" +
@@ -77,11 +82,11 @@ const multiLine =
         top: (blockSize.height + gap) * 4,
         height: 65,
         whiteSpace: 'pre-wrap',
-        textOverflow: 'ellipsis',
+        textOverflow: 'clip',
         overflow: 'hidden',
       }"
     >
-      5.{{ multiLine }}
+      5.{{ multiLineCut }}
     </div>
 
     <div
@@ -91,11 +96,11 @@ const multiLine =
         top: (blockSize.height + gap) * 4 + 67,
         height: 65,
         whiteSpace: 'pre-wrap',
-        textOverflow: 'clip',
+        textOverflow: 'ellipsis',
         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

@@ -0,0 +1,452 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-08-30 10:58:38
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-08-30 14:20:46
+ * @Description: file content
+-->
+<script setup>
+import { createImpactTracer, createImpactCallback } from "jsview";
+import { ref, shallowRef, onMounted, onBeforeUnmount } from "vue";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+
+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 = [];
+
+const tLeftColor = ref("#FF0000"),
+  tRightColor = ref("#00FF00"),
+  rLeftColor = ref("#FF0000"),
+  rRightColor = ref("#00FF00"),
+  r2LeftColor = ref("#FF0000"),
+  r2RightColor = ref("#00FF00"),
+  sLeftColor = ref("#FF0000"),
+  sRightColor = ref("#00FF00"),
+  skLeftColor = ref("#FF0000"),
+  skRightColor = ref("#00FF00");
+
+const lastItemVisibility = ref("hidden"); // 验证View先声明碰撞检测再显示的场景，是否碰撞能正常生效
+const lastItemGone = ref(false); // 验证碰撞对象关联的View从ViewTree拿掉后是否触发Native端的自清理处理
+
+setTimeout(() => {
+  lastItemVisibility.value = "visible";
+}, 1000);
+setTimeout(() => {
+  lastItemGone.value = true;
+}, 5000);
+
+const onKeyDown = (ev) => {
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router?.go(-1); // 有router时，是从DemoHomepage进入，回退
+  }
+  return true;
+};
+
+onMounted(() => {
+  const translate_sensor = createImpactTracer(
+    transEle1.value,
+    transEle2.value,
+    createImpactCallback(
+      () => {
+        tLeftColor.value = "#00FFFF";
+        tRightColor.value = "#FFFF00";
+      },
+      () => {
+        tLeftColor.value = "#FF0000";
+        tRightColor.value = "#00FF00";
+      }
+    )
+  );
+  sensors.push(translate_sensor);
+
+  const rotate_count = { count: 0 };
+  const rotate_sensor = createImpactTracer(
+    rotateEle1.value,
+    rotateEle2.value,
+    createImpactCallback(
+      () => {
+        rLeftColor.value = "#00FFFF";
+        rRightColor.value = "#FFFF00";
+      },
+      () => {
+        rotate_count.count++;
+        if (rotate_count.count >= 2) {
+          // 旋转有头尾连续两次碰撞
+          console.log("Finish collision of rotate element");
+        }
+        rLeftColor.value = "#FF0000";
+        rRightColor.value = "#00FF00";
+      }
+    )
+  );
+  sensors.push(rotate_sensor);
+
+  const rotate2_sensor = createImpactTracer(
+    rotateEle3.value,
+    rotateEle4.value,
+    createImpactCallback(
+      () => {
+        r2LeftColor.value = "#00FFFF";
+        r2RightColor.value = "#FFFF00";
+      },
+      () => {
+        r2LeftColor.value = "#FF0000";
+        r2RightColor.value = "#00FF00";
+      }
+    )
+  );
+  sensors.push(rotate2_sensor);
+
+  const scale_sensor = createImpactTracer(
+    scaleEle1.value,
+    scaleEle2.value,
+    createImpactCallback(
+      () => {
+        sLeftColor.value = "#00FFFF";
+        sRightColor.value = "#FFFF00";
+      },
+      () => {
+        sLeftColor.value = "#FF0000";
+        sRightColor.value = "#00FF00";
+      }
+    )
+  );
+  sensors.push(scale_sensor);
+
+  const skew_sensor = createImpactTracer(
+    skewEle1.value,
+    skewEle2.value,
+    createImpactCallback(
+      () => {
+        skLeftColor.value = "#00FFFF";
+        skRightColor.value = "#FFFF00";
+      },
+      () => {
+        skLeftColor.value = "#FF0000";
+        skRightColor.value = "#00FF00";
+      }
+    )
+  );
+  sensors.push(skew_sensor);
+});
+
+onBeforeUnmount(() => {
+  for (let i = 0; i < sensors.length; i++) {
+    sensors[i].Recycle();
+  }
+  sensors = [];
+});
+</script>
+
+<template>
+  <jsv-focus-block
+    autoFocus
+    :style="{
+      width: 1920,
+      height: 1080,
+      backgroundColor: '#007788',
+    }"
+    :onAction="{
+      onKeyDown: onKeyDown,
+    }"
+  >
+    <div
+      :style="{
+        textAlign: 'center',
+        fontSize: '30px',
+        lineHeight: '50px',
+        color: '#ffffff',
+        left: 100,
+        top: 20,
+        width: 1280 - 200,
+        height: 50,
+        backgroundColor: 'rgba(27,38,151,0.8)',
+      }"
+    >
+      原生端辅助的高效率碰撞检测处理
+    </div>
+    <div :style="{ top: 200, left: 100 }">
+      <div
+        ref="transEle1"
+        :style="{
+          left: 0,
+          width: 100,
+          height: 100,
+          backgroundColor: tLeftColor,
+          animation: 'toRight 5s',
+        }"
+      >
+        view1
+      </div>
+      <div :style="{ left: 300 }">
+        <div
+          ref="transEle2"
+          :style="{
+            width: 100,
+            height: 100,
+            backgroundColor: tRightColor,
+            animation: 'toLeft 5s',
+          }"
+        >
+          view2
+        </div>
+      </div>
+    </div>
+
+    <div :style="{ top: 500, left: 100 }">
+      <div
+        ref="rotateEle1"
+        :style="{
+          left: 0,
+          width: 20,
+          height: 150,
+          backgroundColor: rLeftColor,
+          animation: 'rotate1 5s',
+        }"
+      >
+        view1
+      </div>
+      <div
+        ref="rotateEle2"
+        :style="{
+          left: 100,
+          width: 20,
+          height: 150,
+          backgroundColor: rRightColor,
+          animation: 'rotate2 5s',
+        }"
+      >
+        view2
+      </div>
+    </div>
+
+    <div :style="{ top: 500, left: 500 }">
+      <div
+        :style="{
+          top: 50,
+          left: 0,
+          width: 150,
+          height: 150,
+          backgroundColor: 'rgba(255,255,255,0.5)',
+          animation: 'rotate3 5s',
+        }"
+      >
+        <div
+          ref="rotateEle3"
+          :style="{
+            left: (150 - 20) / 2,
+            width: 20,
+            height: 150,
+            backgroundColor: r2LeftColor,
+          }"
+        >
+          view1
+        </div>
+      </div>
+      <div
+        :style="{
+          top: 0,
+          left: 100,
+          width: 150,
+          height: 150,
+          backgroundColor: 'rgba(255,255,255,0.5)',
+          animation: 'rotate4 5s',
+        }"
+      >
+        <div
+          ref="rotateEle4"
+          :style="{
+            left: 0,
+            top: (150 - 20) / 2,
+            width: 150,
+            height: 20,
+            backgroundColor: r2RightColor,
+          }"
+        >
+          view2
+        </div>
+      </div>
+    </div>
+
+    <div :style="{ top: 200, left: 500 }">
+      <div
+        ref="scaleEle1"
+        :style="{
+          left: 100,
+          width: 100,
+          height: 100,
+          backgroundColor: sLeftColor,
+          animation: 'scale1 5s',
+        }"
+      >
+        view1
+      </div>
+      <div
+        ref="scaleEle2"
+        :style="{
+          left: 250,
+          width: 100,
+          height: 100,
+          backgroundColor: sRightColor,
+          animation: 'scale2 5s',
+        }"
+      >
+        view2
+      </div>
+    </div>
+
+    <div
+      v-if="!lastItemGone"
+      :style="{
+        top: 500,
+        left: 800,
+        visibility: lastItemVisibility,
+      }"
+    >
+      <div
+        ref="skewEle1"
+        :style="{
+          left: 100,
+          width: 100,
+          height: 100,
+          backgroundColor: skLeftColor,
+          animation: 'skew1 5s',
+        }"
+      >
+        viewA
+      </div>
+      <div
+        ref="skewEle2"
+        :style="{
+          left: 300,
+          width: 100,
+          height: 100,
+          backgroundColor: skRightColor,
+          animation: 'skew2 5s',
+        }"
+      >
+        viewB
+      </div>
+    </div>
+  </jsv-focus-block>
+</template>
+
+<style scoped>
+@keyframes toLeft {
+  from {
+    transform: translate3d(0, 0, 0) scale3d(0.5, 0.5, 1);
+  }
+  to {
+    transform: translate3d(-300px, 0, 0) scale3d(1.5, 1.5, 1);
+  }
+}
+
+@keyframes toRight {
+  from {
+    transform: translate3d(0, 0, 0) scale3d(0.5, 0.5, 1);
+  }
+  to {
+    transform: translate3d(300px, 0, 0) scale3d(1.5, 1.5, 1);
+  }
+}
+
+@keyframes rotate1 {
+  from {
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+  to {
+    transform: rotate3d(0, 0, 1, 360deg);
+  }
+}
+
+/* webview中 旋转轴为(0,0,-1)会导致getComputeStyle中的transform为单位矩阵*/
+@keyframes rotate2 {
+  from {
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+  to {
+    transform: rotate3d(0, 0, 1, -360deg);
+  }
+}
+
+@keyframes scale1 {
+  0% {
+    transform: scale3d(1, 1, 1);
+  }
+  50% {
+    transform: scale3d(2, 2, 1);
+  }
+  100% {
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+@keyframes scale2 {
+  0% {
+    transform: scale3d(1, 1, 1);
+  }
+  50% {
+    transform: scale3d(2, 2, 1);
+  }
+  100% {
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+@keyframes skew1 {
+  0% {
+    transform: skew(0, 0);
+  }
+  50% {
+    transform: skew(-60deg, 0);
+  }
+  100% {
+    transform: skew(0, 0);
+  }
+}
+
+@keyframes skew2 {
+  0% {
+    transform: skew(0, 0);
+  }
+  50% {
+    transform: skew(60deg, 0);
+  }
+  100% {
+    transform: skew(0, 0);
+  }
+}
+
+@keyframes rotate3 {
+  from {
+    transform: rotate3d(0, 0, 1, 0deg);
+    transform-origin: center top;
+  }
+  to {
+    transform: rotate3d(0, 0, 1, -360deg);
+    transform-origin: center top;
+  }
+}
+
+@keyframes rotate4 {
+  from {
+    transform: rotate3d(0, 0, 1, 0deg);
+    transform-origin: center center;
+  }
+  to {
+    transform: rotate3d(0, 0, 1, -360deg);
+    transform-origin: center center;
+  }
+}
+</style>

package/samples/DemoHomepage/components/BodyFrame.vue

@@ -12,6 +12,7 @@ export default {
     data: Array,
     name: String,
     onEdge: Function,
+    tabId: Number,
   },
   setup() {
     return {
@@ -36,6 +37,7 @@ export default {
       }
       this.$router.push(data.path);
       localStorage.curFocusId = index;
+      localStorage.curTab = this.tabId;
     },
     _provideData() {
       return this.data;

package/samples/DemoHomepage/router.js

@@ -130,7 +130,7 @@ const routeList = [
     component: () => import("jsview/samples/TextureAnimation/App.vue"),
   },
   {
-    name: "TextureAnimation2",
+    name: "焦点框旋转光效果",
     path: "/feature/TextureAnimation2",
     component: () => import("jsview/samples/TextureAnimation/App2.vue"),
   },
@@ -139,6 +139,26 @@ const routeList = [
     path: "/feature/FilterDemo",
     component: () => import("jsview/samples/FilterDemo/App.vue"),
   },
+  {
+    name: "预加载",
+    path: "/feature/Preload",
+    component: () => import("jsview/samples/Preload/App.vue"),
+  },
+  {
+    name: "图片缩小算法",
+    path: "/feature/ScaleDownNeon",
+    component: () => import("jsview/samples/ScaleDownNeon/App.vue"),
+  },
+  // {
+  //   name: "碰撞检测",
+  //   path: "/feature/Collision",
+  //   component: () => import("jsview/samples/Collision/App"),
+  // },
+  // {
+  //   name: "碰撞即停",
+  //   path: "/feature/ImpactStop",
+  //   component: () => import("jsview/samples/ImpactStop/App"),
+  // },
 
   // MetroWidget示例
   {

package/samples/DemoHomepage/views/Homepage.vue

@@ -89,15 +89,12 @@ export default {
       }
     },
     tabItemFocus(data) {
-      console.log("cchtest tabItemFocus");
       if (data.id != this.tabId) {
         this.tabId = data.id;
         this.contentData = dataList[this.tabId];
-        localStorage.curTab = this.tabId;
       }
     },
     onDialogAction(msg) {
-      console.log("cchtes dialog onaction", msg);
       this.showExitDialog = false;
       this.changeFocus(this.preFocusName);
       switch (msg) {
@@ -121,10 +118,8 @@ export default {
     localStorage.curTab = 0;
     this.contentData = dataList[this.tabId];
   },
-  mounted() {
-  },
-  beforeUnmount() {
-  },
+  mounted() {},
+  beforeUnmount() {},
 };
 </script>
 
@@ -162,6 +157,7 @@ export default {
           :data="contentData"
           :name="name + '/bodyFrame'"
           :onEdge="onContentEdge"
+          :tabId="tabId"
         />
       </div>
 

package/samples/FilterDemo/App.vue

@@ -6,7 +6,7 @@
  * @Description: file content
 -->
 <script setup>
-import { ref, reactive, onMounted } from "vue";
+import { ref, shallowRef, reactive, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import { jJsvRuntimeBridge, JsvFilterView } from "jsview";
 import sample from "../assets/jpegDemo.jpeg";

package/samples/FlipCard/App.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { useRouter } from "vue-router";
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 import { HORIZONTAL, MetroWidget } from "jsview";
 import FlipCard from "./FlipCard.vue";
 import { data } from "./data.js";
@@ -8,7 +8,7 @@ import redEgg from "./assets/red_egg.png";
 import blueEgg from "./assets/blue_egg.png";
 
 const name = "/flipCard";
-const focusNode = ref(null);
+const focusNode = shallowRef(null);
 const router = useRouter();
 
 const onKeyDown = (ev) => {