@shijiu/jsview-vue 0.9.502 → 0.9.631

package/samples/BasicFocusControl/components/MainAreaRightBlock.vue

@@ -1,30 +1,27 @@
-<script lang="ts">
-import { JsvFocusEvent } from "jsview/utils/JsViewEngineWidget";
-import { Options, Vue } from "vue-class-component";
-import BaseBlock from "./BaseBlock.vue"
-
-@Options({
-  props: {
-    name: String,
-    style: { type:Object, default: {}},
+<script setup>
+import BaseBlock from "./BaseBlock.vue";
+import { useFocusHub } from "jsview";
+defineProps({
+  name: String,
+  style: {
+    type: Object,
+    default() {
+      return {};
+    },
   },
-  components: {
-    BaseBlock
-  }
-})
-export default
-class MainAreaRightBlock extends Vue {
-  onKeyDown(ev: JsvFocusEvent) {
-    if (ev.keyCode === 39) { // Right key
-      (this.$root as any).changeFocusInDemoSpace('sideBarR0C0');
-      return true;
-    }
-    return false;
+});
+
+const focusHub = useFocusHub();
+const onKeyDown = (ev) => {
+  if (ev.keyCode === 39) {
+    // Right key
+    focusHub.setFocus("sideBarR0C0");
+    return true;
   }
-}
+  return false;
+};
 </script>
 
 <template>
-<BaseBlock :name="$props.name" :style="$props.style"
-    :onKeyDown="onKeyDown"/>
+  <BaseBlock :name="name" :style="style" :onKeyDown="onKeyDown" />
 </template>

package/samples/BasicFocusControl/components/SideBar.vue

@@ -1,56 +1,41 @@
-<script lang="ts">
-import { JsvFocusEvent } from "jsview/utils/JsViewEngineWidget";
-import { Options, Vue } from "vue-class-component";
-// import { globalStore } from "../GlobalStore"
-import SideBarBlock from "./SideBarBlock.vue"
-
-@Options({
-  components: {
-    SideBarBlock,
-  }
-})
-export default
-class SideBar extends Vue {
-  constructor(props: object) {
-    super(props);
+<script setup>
+import SideBarBlock from "./SideBarBlock.vue";
+import { useFocusHub } from "jsview";
+let focusRow = 0;
+const focusHub = useFocusHub();
+
+const onKeyDown = (ev) => {
+  // 子节点未处理的按键事件会流向此节点
+  let keyUsed = true;
+  switch (ev.keyCode) {
+    case 38: // Up
+      focusRow = 0;
+      break;
+    case 40: // Down
+      focusRow = 1;
+      break;
+    default:
+      keyUsed = false;
   }
 
-  private onKeyDown(ev: JsvFocusEvent) {
-    // console.warn("xxxx", globalStore.focusBaseName)
-    // 子节点未处理的按键事件会流向此节点
-    let keyUsed = true;
-    switch (ev.keyCode) {
-      case 38: // Up
-        this.focusRow = 0;
-        break;
-      case 40: // Down
-        this.focusRow = 1;
-        break;
-      default:
-        keyUsed = false;
-    }
-
-    if (keyUsed) {
-      // 焦点与之前相同时也可以重复调用，焦点管理系统内容有是否变更的判断处理
-      const name = `sideBarR${this.focusRow}C0`;
-      ev.ownerNode.findBlockByName(name)?.requestFocus();
-    }
-
-    return keyUsed;
+  if (keyUsed) {
+    // 焦点与之前相同时也可以重复调用，焦点管理系统内容有是否变更的判断处理
+    const name = `sideBarR${focusRow}C0`;
+    focusHub.setFocus(name);
   }
 
-  private focusRow: number = 0;
-}
+  return keyUsed;
+};
 </script>
 
 <template>
-<div>
-  <!--jsv-focus-block是非可描画节点，所以如果想接收style等属性，不要放在顶级-->
-  <jsv-focus-block :onKeyDown="onKeyDown">
-    <SideBarBlock name="sideBarR0C0" :style="{ left: 0, top: 0 }" />
-    <SideBarBlock name="sideBarR1C0" :style="{ left: 0, top: 120 }" />
-  </jsv-focus-block>
-</div>
+  <div>
+    <!--jsv-focus-block是非可描画节点，所以如果想接收style等属性，不要放在顶级-->
+    <jsv-focus-block :onKeyDown="onKeyDown">
+      <SideBarBlock name="sideBarR0C0" :style="{ left: 0, top: 0 }" />
+      <SideBarBlock name="sideBarR1C0" :style="{ left: 0, top: 120 }" />
+    </jsv-focus-block>
+  </div>
 </template>
 
 <style scoped>
@@ -63,7 +48,7 @@ class SideBar extends Vue {
   top: 50;
   width: 400;
   height: 50;
-  background-color: rgba(27,38,151,0.8);
+  background-color: rgba(27, 38, 151, 0.8);
 }
 
 .body {

package/samples/BasicFocusControl/components/SideBarBlock.vue

@@ -1,30 +1,27 @@
-<script lang="ts">
-import { JsvFocusEvent } from "jsview/utils/JsViewEngineWidget";
-import { Options, Vue } from "vue-class-component";
-import BaseBlock from "./BaseBlock.vue"
+<script setup>
+import BaseBlock from "./BaseBlock.vue";
+import { useFocusHub } from "jsview";
 
-@Options({
-  props: {
-    name: String,
-    style: { type:Object, default: {}},
+defineProps({
+  name: String,
+  style: {
+    type: Object,
+    default() {
+      return {};
+    },
   },
-  components: {
-    BaseBlock
+});
+const focusHub = useFocusHub();
+const onKeyDown = (ev) => {
+  if (ev.keyCode === 37) {
+    // Right key
+    focusHub.setFocus("main");
+    return true;
   }
-})
-export default
-class SideBarBlock extends Vue {
-  onKeyDown(ev: JsvFocusEvent) {
-    if (ev.keyCode === 37) { // Left key
-      (this.$root as any).changeFocusInDemoSpace('main');
-      return true;
-    }
-    return false;
-  }
-}
+  return false;
+};
 </script>
 
 <template>
-<BaseBlock :name="$props.name" :style="$props.style"
-    :onKeyDown="onKeyDown"/>
+  <BaseBlock :name="name" :style="style" :onKeyDown="onKeyDown" />
 </template>

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, 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);
+
+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/ColorSpace/App.vue

@@ -1,36 +1,27 @@
-<script>
-import { Vue } from "vue-class-component";
+<script setup>
 import jpegDemo from "../assets/jpegDemo.jpeg";
 import pngDemo from "../assets/pngDemo.png";
 import pngNoAlphaDemo from "../assets/pngNoAlphaDemo.png";
 import bmpDemo from "../assets/bmpDemo.bmp";
+import { useRouter } from "vue-router";
 
-class App extends Vue {
-  constructor(props) {
-    super(props);
+const router = useRouter();
 
-    this.jpegDemo = jpegDemo;
-    this.pngDemo = pngDemo;
-    this.pngNoAlphaDemo = pngNoAlphaDemo;
-    this.bmpDemo = bmpDemo;
-  }
-
-  onKeyDown(ev) {
-    // 8:Backspace, 27:Escape, 10000:盒子返回键
-    if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-      window.JsView?.setGlobalConfig({
-        texCache: -1,
-      });
-
-      this.$router?.go(-1); // 有router时，是从DemoHomepage进入，回退
-      return true;
-    }
+const onKeyDown = (ev) => {
+  // 8:Backspace, 27:Escape, 10000:盒子返回键
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    window.JsView?.setGlobalConfig({
+      texCache: -1,
+    });
 
-    return false;
+    router.go(-1); // 有router时，是从DemoHomepage进入，回退
+    return true;
   }
-}
-export default App;
+
+  return false;
+};
 </script>
+
 <template>
   <jsv-focus-block autoFocus :onKeyDown="onKeyDown">
     <div class="allBgc">