@shijiu/jsview-vue 1.9.731 → 1.9.747

package/samples/TouchSample/MetroWidgetVertical.vue

@@ -1,144 +0,0 @@
-<script>
-import {
-  VERTICAL,
-  MetroWidget,
-  WholePageSlide,
-  SeamlessSlide,
-  FixPositionSlide,
-} from "jsview";
-
-import Item from "./Item.vue";
-
-import { metroWidgetV, measures } from "./data.js";
-import { ref, shallowRef } from "vue";
-
-export default {
-  components: {
-    MetroWidget,
-    Item,
-  },
-  setup() {
-    return {
-      measures,
-      name: "/metroWidgetH",
-      direction: VERTICAL,
-      wholePageSlide: new WholePageSlide({
-        speed: 1.5,
-      }),
-      seamlessSlide: new SeamlessSlide({
-        startPercent: 0.4,
-        endPercent: 0.6,
-        speed: 0.5,
-      }),
-      fixPositionSlide: new FixPositionSlide({
-        fixPercent: 0.5,
-        speed: 0.5,
-      }),
-      token: ref(0),
-      CONST_ITEM_WIDTH: 300,
-      CONST_ITEM_HEIGHT: 100,
-    };
-  },
-  methods: {
-    _provideData() {
-      return metroWidgetV;
-    },
-  },
-
-  mounted() {},
-};
-</script>
-
-<template>
-  <div class="rootSize">
-    <div :style="{ width: 1280, height: 720, left: 50, overflow: 'hidden' }">
-      <div
-        :style="{
-          left: 0,
-          width: 200,
-          height: 40,
-          fontSize: 25,
-          lineHeight: '40px',
-          color: '#fff753',
-        }"
-      >
-        整页滑动
-      </div>
-      <div
-        :style="{
-          left: 200,
-          width: CONST_ITEM_WIDTH + 20,
-          height: CONST_ITEM_HEIGHT * 5 + 20,
-          backgroundColor: '#ff0000',
-        }"
-      >
-        <metro-widget
-          name="simpleWidgetVertical1"
-          :width="CONST_ITEM_WIDTH + 20"
-          :height="CONST_ITEM_HEIGHT * 5 + 20"
-          :direction="direction"
-          :measures="measures"
-          :provideData="_provideData"
-          :padding="{ top: 10, left: 10, right: 10, bottom: 10 }"
-          :enableTouch="true"
-          :flingPageWidth="CONST_ITEM_HEIGHT * 5"
-        >
-          <template #renderItem="{ data, query, onEdge, onAction }">
-            <item
-              :data="data"
-              :query="query"
-              :onEdge="onEdge"
-              :onAction="onAction"
-            /> </template
-        ></metro-widget>
-      </div>
-      <div
-        :style="{
-          left: 600,
-          width: 200,
-          height: 40,
-          fontSize: 25,
-          lineHeight: '40px',
-          color: '#fff753',
-        }"
-      >
-        普通滑动
-      </div>
-      <div
-        :style="{
-          left: 800,
-          width: CONST_ITEM_WIDTH + 20,
-          height: CONST_ITEM_HEIGHT * 5 + 20,
-          backgroundColor: '#ff0000',
-        }"
-      >
-        <metro-widget
-          name="simpleWidgetVertical2"
-          :width="CONST_ITEM_WIDTH + 20"
-          :height="CONST_ITEM_HEIGHT * 5 + 20"
-          :direction="direction"
-          :measures="measures"
-          :provideData="_provideData"
-          :padding="{ top: 10, left: 10, right: 10, bottom: 10 }"
-          :enableTouch="true"
-        >
-          <template #renderItem="{ data, query, onEdge, onAction }">
-            <item
-              :data="data"
-              :query="query"
-              :onEdge="onEdge"
-              :onAction="onAction"
-            /> </template
-        ></metro-widget>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.rootSize {
-  width: 1920;
-  height: 1080;
-  background-color: #334c4c;
-}
-</style>

package/samples/TouchSample/TouchContainerHorizontal.vue

@@ -1,160 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2022-04-10 21:21:02
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-08 14:40:19
- * @Description: file content
--->
-<script>
-import {
-  JsvTouchContainer,
-  DIRECTION_VERTICAL,
-  DIRECTION_HORIZONTAL,
-  DIRECTION_DISABLE,
-} from "jsview";
-import { touchContainerH, measures } from "./data.js";
-function randomColor() {
-  let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
-  return (
-    "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
-  );
-}
-export default {
-  components: {
-    JsvTouchContainer,
-  },
-  setup() {
-    return {
-      DIRECTION_VERTICAL,
-      DIRECTION_HORIZONTAL,
-      DIRECTION_DISABLE,
-      touchContainerH,
-      measures,
-      randomColor,
-    };
-  },
-  methods: {
-    _onClick(msg) {
-      console.log(`_onClick:${JSON.stringify(msg)}`);
-      return true;
-    },
-  },
-};
-</script>
-
-<template>
-  <div :style="{ width: 1280, height: 720, overflow: 'hidden' }">
-    <jsv-touch-container
-      :style="{ width: 1280, height: 720 * 2, backgroundColor: '#7b7a1c' }"
-      :direction="DIRECTION_VERTICAL"
-      :dragLimitArea="{ x: 0, y: 0, width: 1280, height: 720 }"
-    >
-      <div
-        :style="{
-          left: 30,
-          top: 0,
-          width: 400,
-          height: 30,
-          fontSize: 18,
-          lineHeight: '30px',
-          color: '#f0ef29',
-        }"
-      >
-        整屏幕滑动
-      </div>
-      <jsv-touch-container
-        :style="{
-          left: 0,
-          top: 40,
-          width: (1280 - 60) * 5,
-          height: 220,
-          backgroundColor: 'rgba(255,0,0,0.5)',
-        }"
-        :direction="DIRECTION_HORIZONTAL"
-        :flingPageWidth="1280 - 60"
-        :dragLimitArea="{ x: 0, y: 0, width: 1280 - 60, height: 220 }"
-      >
-        <div
-          v-for="(tabList, tabIndex) in touchContainerH"
-          :key="'tab' + tabIndex"
-          :style="{
-            left: (1280 - 60) * tabIndex,
-            top: 0,
-            width: 1280 - 60,
-            height: 220,
-            backgroundColor: randomColor(),
-          }"
-        >
-          <jsv-touch-container
-            v-for="(item, itemIndex) in tabList"
-            :key="'tab' + tabIndex + '-' + itemIndex"
-            :style="{
-              left: item.left,
-              top: item.top,
-              width: item.width,
-              height: item.height,
-              backgroundColor: item.backgroundColor,
-              fontSize: 18,
-            }"
-            :onClick="_onClick"
-            :direction="DIRECTION_DISABLE"
-            >{{ item.content }}</jsv-touch-container
-          >
-        </div>
-      </jsv-touch-container>
-
-      <div
-        :style="{
-          left: 30,
-          top: 280,
-          width: 400,
-          height: 40,
-          fontSize: 18,
-          lineHeight: '40px',
-          color: '#f0ef29',
-        }"
-      >
-        左右滑动
-      </div>
-      <jsv-touch-container
-        :style="{
-          left: 0,
-          top: 320,
-          width: (1280 - 60) * 5,
-          height: 220,
-          backgroundColor: '#1d9797',
-        }"
-        :direction="DIRECTION_HORIZONTAL"
-        :dragLimitArea="{ x: 0, y: 0, width: 1280 - 60, height: 220 }"
-      >
-        <div
-          v-for="(tabList, tabIndex) in touchContainerH"
-          :key="'tab' + tabIndex"
-          :style="{
-            left: (1280 - 60) * tabIndex,
-            top: 0,
-            width: 1280 - 60,
-            height: 220,
-            backgroundColor: randomColor(),
-          }"
-        >
-          <jsv-touch-container
-            v-for="(item, itemIndex) in tabList"
-            :key="'tab' + tabIndex + '-' + itemIndex"
-            :style="{
-              left: item.left,
-              top: item.top,
-              width: item.width,
-              height: item.height,
-              backgroundColor: item.backgroundColor,
-              fontSize: 18,
-            }"
-            :onClick="_onClick"
-            :direction="DIRECTION_DISABLE"
-            >{{ item.content }}</jsv-touch-container
-          >
-        </div>
-      </jsv-touch-container>
-    </jsv-touch-container>
-  </div>
-</template>

package/samples/TouchSample/TouchContainerVertical.vue

@@ -1,160 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2022-04-10 21:21:02
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-04-11 09:04:26
- * @Description: file content
--->
-<script>
-import {
-  JsvTouchContainer,
-  DIRECTION_VERTICAL,
-  DIRECTION_HORIZONTAL,
-  DIRECTION_DISABLE,
-} from "jsview";
-import { touchContainerV, measures } from "./data.js";
-function randomColor() {
-  let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
-  return (
-    "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
-  );
-}
-export default {
-  components: {
-    JsvTouchContainer,
-  },
-  setup() {
-    return {
-      DIRECTION_VERTICAL,
-      DIRECTION_HORIZONTAL,
-      DIRECTION_DISABLE,
-      touchContainerV,
-      measures,
-      randomColor,
-    };
-  },
-  methods: {
-    _onClick(msg) {
-      console.log(`_onClick:${JSON.stringify(msg)}`);
-      return true;
-    },
-  },
-};
-</script>
-
-<template>
-  <div :style="{ width: 1280, height: 720, overflow: 'hidden' }">
-    <jsv-touch-container
-      :style="{ width: 1280, height: 720 * 2, backgroundColor: '#7b7a1c' }"
-      :direction="DIRECTION_HORIZONTAL"
-      :dragLimitArea="{ x: 0, y: 0, width: 1280, height: 720 }"
-    >
-      <div
-        :style="{
-          left: 30,
-          top: 0,
-          width: 400,
-          height: 40,
-          fontSize: 25,
-          lineHeight: '40px',
-          color: '#f0ef29',
-        }"
-      >
-        整屏幕滑动
-      </div>
-      <jsv-touch-container
-        :style="{
-          left: 30,
-          top: 50,
-          width: 400,
-          height: 500 * 5,
-          backgroundColor: '#810000',
-        }"
-        :direction="DIRECTION_VERTICAL"
-        :flingPageWidth="500"
-        :dragLimitArea="{ x: 0, y: 0, width: 400, height: 500 }"
-      >
-        <div
-          v-for="(tabList, tabIndex) in touchContainerV"
-          :key="'tab' + tabIndex"
-          :style="{
-            left: 0,
-            top: 500 * tabIndex,
-            width: 400,
-            height: 500,
-            backgroundColor: randomColor(),
-          }"
-        >
-          <jsv-touch-container
-            v-for="(item, itemIndex) in tabList"
-            :key="'tab' + tabIndex + '-' + itemIndex"
-            :style="{
-              left: item.left,
-              top: item.top,
-              width: item.width,
-              height: item.height,
-              backgroundColor: item.backgroundColor,
-              fontSize: 18,
-            }"
-            :onClick="_onClick"
-            :direction="DIRECTION_DISABLE"
-            >{{ item.content }}</jsv-touch-container
-          >
-        </div>
-      </jsv-touch-container>
-
-      <div
-        :style="{
-          left: 530,
-          top: 0,
-          width: 400,
-          height: 40,
-          fontSize: 25,
-          lineHeight: '40px',
-          color: '#f0ef29',
-        }"
-      >
-        上下滑动
-      </div>
-      <jsv-touch-container
-        :style="{
-          left: 530,
-          top: 50,
-          width: 400,
-          height: 500 * 5,
-          backgroundColor: '#810000',
-        }"
-        :direction="DIRECTION_VERTICAL"
-        :dragLimitArea="{ x: 0, y: 0, width: 400, height: 500 }"
-      >
-        <div
-          v-for="(tabList, tabIndex) in touchContainerV"
-          :key="'tab' + tabIndex"
-          :style="{
-            left: 0,
-            top: 500 * tabIndex,
-            width: 400,
-            height: 500,
-            backgroundColor: randomColor(),
-          }"
-        >
-          <jsv-touch-container
-            v-for="(item, itemIndex) in tabList"
-            :key="'tab' + tabIndex + '-' + itemIndex"
-            :style="{
-              left: item.left,
-              top: item.top,
-              width: item.width,
-              height: item.height,
-              backgroundColor: item.backgroundColor,
-              fontSize: 18,
-            }"
-            :onClick="_onClick"
-            :direction="DIRECTION_DISABLE"
-            >{{ item.content }}</jsv-touch-container
-          >
-        </div>
-      </jsv-touch-container>
-    </jsv-touch-container>
-  </div>
-</template>

package/samples/TouchSample/data.js

@@ -1,81 +0,0 @@
-/*
- * @Author: ChenChanghua
- * @Date: 2022-04-10 21:23:15
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-04-11 10:03:21
- * @Description: file content
- */
-function randomColor() {
-  let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
-  return (
-    "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
-  );
-}
-
-const metroWidgetH = [];
-for (let i = 0; i < 500; i++) {
-  metroWidgetH.push({
-    content: i,
-    id: i,
-    width: 100,
-    height: 200,
-    color: randomColor(),
-  });
-}
-
-const metroWidgetV = [];
-for (let i = 0; i < 500; i++) {
-  metroWidgetV.push({
-    content: i,
-    id: i,
-    width: 200,
-    height: 100,
-    color: randomColor(),
-  });
-}
-
-const touchContainerH = [];
-for (let i = 0; i < 5; i++) {
-  const tabData = [];
-  for (let i = 0; i < 20; i++) {
-    tabData.push({
-      content: i,
-      id: i,
-      left: (122 / 2) * i,
-      top: 10,
-      width: 122 / 2 - 10,
-      height: 200,
-      backgroundColor: randomColor(),
-    });
-  }
-  touchContainerH.push(tabData);
-}
-
-const touchContainerV = [];
-for (let i = 0; i < 5; i++) {
-  const tabData = [];
-  for (let i = 0; i < 20; i++) {
-    tabData.push({
-      content: i,
-      id: i,
-      left: 10,
-      top: 50 * i,
-      width: 300,
-      height: 40,
-      backgroundColor: randomColor(),
-    });
-  }
-  touchContainerV.push(tabData);
-}
-
-function measures(item) {
-  return item;
-}
-
-export {
-  metroWidgetH,
-  metroWidgetV,
-  touchContainerH,
-  touchContainerV,
-  measures,
-};

package/samples/TransitPage/App.vue

@@ -1,29 +0,0 @@
-<script setup>
-import DemoApp from "../DemoHomepage/App.vue";
-import ActivityApp from "../MetroWidgetDemos/PerformanceTest/App.vue"; // TODO
-import { jJsvRuntimeBridge } from "jsview";
-import { ref, shallowRef, onMounted } from "vue";
-
-const getShowMode = () => {
-  let showMode = 0;
-  // showMode信息可被URL中的?后缀信息替换
-  if (window.location.search.indexOf("showMode=0") >= 0) {
-    showMode = 0;
-  } else if (window.location.search.indexOf("showMode=1") >= 0) {
-    showMode = 1;
-  }
-
-  return showMode;
-};
-
-const showMode = ref(getShowMode());
-
-onMounted(() => {
-  jJsvRuntimeBridge.notifyPageLoaded();
-});
-</script>
-
-<template>
-  <DemoApp v-if="showMode === 0" />
-  <ActivityApp v-else-if="showMode === 1" />
-</template>

package/samples/VideoDemo/App.vue

@@ -1,121 +0,0 @@
-<script setup>
-import { provide, reactive, ref, shallowRef, watch } from "vue";
-import Controllor from "./components/Controllor.vue";
-import VideoFrame from "./components/VideoFrame.vue";
-
-const Caption = {
-  offscreenVideo:
-    "名称:OffscreenVideo(自动播放）\n" +
-    "功能描述:\n" +
-    "1.离屏视频播放、支持前进/后退控制\n" +
-    "2.支持圆角设置\n" +
-    "3.支持平移、缩放、旋转等动画\n" +
-    "4.支持ObjectFit调整\n",
-  normalVideo:
-    "名称:Video\n" +
-    "功能描述:\n" +
-    "1.视频播放、支持前进/后退控制\n" +
-    "2.支持ObjectFit调整\n",
-};
-
-let caption = shallowRef(null);
-let useTexture = shallowRef(null);
-let videoTime = reactive({
-  currentTime: 0,
-  duration: 0,
-});
-let objectFitTitle = shallowRef(null);
-let playStatus = ref("");
-provide("useTexture", useTexture);
-provide("objectFit", shallowRef(null));
-provide("videoRect", ref({}));
-provide("playVideo", shallowRef(null));
-provide("seekVideo", shallowRef(null));
-provide("enableAnimation", shallowRef(null));
-provide("videoTime", videoTime);
-provide("objectFitTitle", objectFitTitle);
-provide("playStatus", playStatus);
-watch(useTexture, () => {
-  caption.value = useTexture.value ? Caption.offscreenVideo : Caption.normalVideo;
-});
-</script>
-
-<template>
-  <div
-    :style="{
-      top: 0,
-      left: 0,
-      width: 1280,
-      height: 720,
-      backgroundColor: 'rgb(222,211,140)',
-    }"
-  >
-    <!-- :key="useTexture" => 当useTexture属性变化时，重建VideoFrame -->
-    <VideoFrame :key="useTexture" />
-
-    <!-- :key="useTexture" => JsView bug，当useTexture属性变化时，为了保证显示在VideoFrame前面 -->
-    <div class="caption" :key="useTexture">
-      {{ caption }}
-    </div>
-    <div>
-      <div class="text status">
-        {{ "播放状态: " + playStatus }}
-      </div>
-      <div class="text objectFit">
-        {{ objectFitTitle }}
-      </div>
-      <div class="text current">
-        {{ Math.ceil(videoTime.currentTime) }}
-      </div>
-      <div class="text duration">
-        {{ "/" + Math.ceil(videoTime.duration) }}
-      </div>
-    </div>
-    <Controllor class="controllor" />
-  </div>
-</template>
-
-<style scoped>
-.caption {
-  text-align: left;
-  font-size: 24px;
-  line-height: 30px;
-  color: #ffffff;
-  left: 10;
-  top: 10;
-  width: 400;
-  height: 180;
-  background-color: rgba(27, 38, 151, 0.8);
-}
-
-.text {
-  color: #ff0000;
-  font-size: 24px;
-  top: 550;
-  width: 60;
-  height: 40;
-}
-.status {
-  left: 50;
-  width: 300;
-}
-.objectFit {
-  left: 800;
-  width: 200;
-  text-align: center;
-}
-
-.current {
-  left: 1060;
-  text-align: right;
-}
-.duration {
-  left: 1120;
-  text-align: left;
-}
-
-.controllor {
-  left: 40;
-  top: 600;
-}
-</style>