@shijiu/jsview-vue 1.9.731 → 1.9.747

package/samples/Collision/App.vue

@@ -1,452 +0,0 @@
-<!--
- * @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/ColorSpace/App.vue

@@ -1,126 +0,0 @@
-<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";
-
-const router = useRouter();
-
-const onKeyDown = (ev) => {
-  // 8:Backspace, 27:Escape, 10000:盒子返回键
-  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-    window.JsView?.setGlobalConfig({
-      texCache: -1,
-    });
-
-    router.go(-1); // 有router时，是从DemoHomepage进入，回退
-    return true;
-  }
-
-  return false;
-};
-</script>
-
-<template>
-  <jsv-focus-block autoFocus :onKeyDown="onKeyDown">
-    <div class="allBgc">
-      <div class="block">
-        <div :style="{ left: 0, top: 0 }">
-          <div class="leftFont top0">
-            {{ `RBG_8888\n透明区域透明\n色彩不失真` }}
-          </div>
-          <div class="leftFont top250">
-            {{ `RBG_565\n透明区域为黑色\n色彩略失真` }}
-          </div>
-        </div>
-
-        <div :style="{ left: 220, top: 0 }">
-          <img class="graphSize top0" :src="bmpDemo" />
-          <img
-            class="graphSize top250"
-            jsvImgColorSpace="RGB_565"
-            :src="bmpDemo"
-          />
-          <div class="underFont">
-            {{ `bmp图片` }}
-          </div>
-        </div>
-
-        <div :style="{ left: 440, top: 0 }">
-          <img class="graphSize top0" :src="jpegDemo" />
-          <img
-            class="graphSize top250"
-            jsvImgColorSpace="RGB_565"
-            :src="jpegDemo"
-          />
-          <div class="underFont">
-            {{ "jpg/jpeg图片" }}
-          </div>
-        </div>
-
-        <div :style="{ left: 660, top: 0 }">
-          <img class="graphSize top0" :src="pngDemo" />
-          <img
-            class="graphSize top250"
-            jsvImgColorSpace="RGB_565"
-            :src="pngDemo"
-          />
-          <div class="underFont">
-            {{ `png有透明图片\nRGB_565下透明部分为黑色` }}
-          </div>
-        </div>
-
-        <div :style="{ left: 880, top: 0 }">
-          <img class="graphSize top0" :src="pngNoAlphaDemo" />
-          <img
-            class="graphSize top250"
-            jsvImgColorSpace="RGB_565"
-            :src="pngNoAlphaDemo"
-          />
-          <div class="underFont">
-            {{ `png无透明图片` }}
-          </div>
-        </div>
-      </div>
-    </div>
-  </jsv-focus-block>
-</template>
-<style scoped>
-.allBgc {
-  width: 1920;
-  height: 1080;
-  background-color: #334c4c;
-}
-.block {
-  left: 20;
-  top: 50;
-}
-.leftFont {
-  left: 0;
-  width: 200;
-  height: 200;
-  color: #ffffff;
-  font-size: 30px;
-}
-.top0 {
-  top: 0;
-}
-.top250 {
-  top: 250;
-}
-.graphSize {
-  left: 0;
-  width: 200;
-  height: 200;
-  border-radius: 15px 15px 15px 15px;
-}
-.underFont {
-  left: 0;
-  top: 500;
-  width: 200;
-  height: 200;
-  color: #ffffff;
-  font-size: 20px;
-}
-</style>

package/samples/DemoHomepage/App.vue

@@ -1,27 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2021-06-02 13:31:00
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-12 13:40:15
- * @Description: file content
--->
-<script>
-import { router } from "./router";
-import { jJsvRuntimeBridge } from "jsview";
-
-export default {
-  Router: router,
-  mounted() {
-    jJsvRuntimeBridge.notifyPageLoaded();
-  },
-};
-</script>
-
-<template>
-  <div>
-    <router-view />
-  </div>
-</template>
-
-<style scoped>
-</style>

package/samples/DemoHomepage/components/BodyFrame.vue

@@ -1,95 +0,0 @@
-<script>
-import { watch } from "vue";
-import { MetroWidget, VERTICAL } from "jsview";
-import Item from "./Item.vue";
-
-export default {
-  components: {
-    Item,
-    MetroWidget,
-  },
-  props: {
-    data: Array,
-    name: String,
-    onEdge: Function,
-    tabId: Number,
-  },
-  setup() {
-    return {
-      direction: VERTICAL,
-      width: 1280,
-      height: 600,
-      initFocusId: 0,
-    };
-  },
-  methods: {
-    measures(item) {
-      return {
-        width: item.width,
-        height: item.height,
-        focusable: item.focusable,
-      };
-    },
-    itemClick(index, data) {
-      if (!data.path) {
-        console.error("Route path is not defined.");
-        return;
-      }
-      this.$router.push(data.path);
-      localStorage.curFocusId = index;
-      localStorage.curTab = this.tabId;
-    },
-    _provideData() {
-      return this.data;
-    },
-  },
-  beforeCreate() {
-    if (typeof localStorage.curFocusId !== "undefined") {
-      this.initFocusId = parseInt(localStorage.curFocusId);
-    }
-    localStorage.curFocusId = 0;
-    watch(
-      () => {
-        return this.data;
-      },
-      () => {
-        this.$refs.mw?.refreshData(true);
-      }
-    );
-  },
-};
-</script>
-
-<template>
-  <metro-widget
-    ref="mw"
-    :name="name"
-    :width="width"
-    :height="height"
-    :direction="direction"
-    :provideData="_provideData"
-    :enableTouch="true"
-    :measures="measures"
-    :padding="{ left: 10, top: 10, right: 10, bottom: 10 }"
-    :onEdge="onEdge"
-    :initFocusId="initFocusId"
-  >
-    <template #renderItem="{ data, query, onEdge, onAction }">
-      <Item
-        :style="{
-          width: data.width,
-          height: data.height,
-          backgroundColor: data.backgroundColor,
-          color: '#000000',
-        }"
-        :data="data"
-        :query="query"
-        :onEdge="onEdge"
-        :onAction="onAction"
-        :itemClick="itemClick"
-      >
-        {{ data.name }}
-      </Item>
-    </template>
-  </metro-widget>
-</template>