@shijiu/jsview-vue 1.9.731 → 1.9.759

package/samples/FilterDemo/App.vue

@@ -1,159 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2022-04-20 21:05:26
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-08 11:16:52
- * @Description: file content
--->
-<script setup>
-import { ref, shallowRef, reactive, onMounted } from "vue";
-import { useRouter } from "vue-router";
-import { jJsvRuntimeBridge, JsvFilterView } from "jsview";
-import sample from "../assets/jpegDemo.jpeg";
-import webpSample from "../assets/webpDemo.webp";
-import AnimatePic from "./AnimatePic.vue";
-import VideoLayer from "./VideoLayer.vue";
-
-let viewId = -1;
-let enableFilter = ref(true);
-let filterType = reactive({
-  type: "gray-down",
-});
-
-const router = useRouter();
-
-const _onKeyDown = (ev) => {
-  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-    router.go(-1); // 有router时，是从DemoHomepage进入，回退
-  } else {
-    if (ev.keyCode == 13) {
-      if (filterType.type == null) {
-        filterType.type = "gray-down";
-      } else {
-        filterType.type = null;
-      }
-    }
-  }
-  return true;
-};
-onMounted(() => {
-  jJsvRuntimeBridge.notifyPageLoaded();
-});
-</script>
-
-<template>
-  <jsv-focus-block
-    autoFocus
-    :onAction="{
-      onKeyDown: _onKeyDown,
-    }"
-    :style="{
-      width: 1920,
-      height: 1080,
-      backgroundColor: '#007788',
-    }"
-  >
-    <div
-      id="main-test"
-      :style="{
-        left: 400,
-      }"
-    >
-      <jsv-filter-view
-        :width="501"
-        :height="401"
-        ref="filter1"
-        :filterType="this.filterType.type"
-      >
-        <div
-          :style="{
-            left: 0,
-            top: 0,
-            width: 400,
-            height: 350,
-            backgroundImage: `url(${sample})`,
-          }"
-        ></div>
-        <!-- 测试双层FBO (FilterView + opacity变化) 的透过处理(video播放) -->
-        <video-layer :top="20" :left="45" :width="310" :height="310" />
-      </jsv-filter-view>
-      <div
-        :style="{
-          left: 450,
-          top: 0,
-          width: 400,
-          height: 350,
-          backgroundImage: `url(${sample})`,
-        }"
-      ></div>
-
-      <jsv-filter-view
-        :top="400"
-        :width="402"
-        :height="402"
-        ref="filter2"
-        :filterType="this.filterType.type"
-      >
-        <div
-          :style="{
-            width: 300,
-            height: 300,
-            backgroundImage: `url(${webpSample})`,
-          }"
-        ></div>
-        <!-- 测试FBO + 形变效果 -->
-        <animate-pic />
-      </jsv-filter-view>
-      <div
-        :style="{
-          left: 450,
-          top: 400,
-          width: 300,
-          height: 300,
-          backgroundImage: `url(${webpSample})`,
-        }"
-      ></div>
-    </div>
-  </jsv-focus-block>
-  <div
-    className="guideText"
-    :style="{
-      left: 10,
-      top: 30,
-      width: 400,
-      height: 200,
-    }"
-  >
-    {{
-      `1. 布局说明: \n\
-  第1行第1列为黑白图(含透明动画+video)，第2列为原图\n\
-  第2行第1列为黑白图(透明+变形动画)，第2列为原图\n\
-\n\
-2. 操作说明
-  按OK键关闭/开启第1列的黑白滤镜\n\
-\n\
-3. 观测内容\n\
-  A. 第1列是否正常切换黑白/彩色效果\n\
-  B. 第1列的上下两个区域是否都含有淡出的动画
-  C. 第1行第1列是否看到视频(彩色)\n\
-`
-    }}
-  </div>
-</template>
-
-<style scoped>
-.guideText {
-  color: #ffffff;
-  font-size: 16;
-  line-height: 18;
-}
-
-@keyframes rotate {
-  from {
-    transform: rotate3d(0, 0, 1, 0);
-  }
-  to {
-    transform: rotate3d(0, 0, 1, 360deg);
-  }
-}
-</style>

package/samples/FilterDemo/VideoLayer.vue

@@ -1,62 +0,0 @@
-<script setup>
-import { JsvVideo } from "jsview";
-
-const props = defineProps({
-  top: {
-    type: Number,
-    default: 0,
-  },
-  left: {
-    type: Number,
-    default: 0,
-  },
-  width: {
-    type: Number,
-    require: true,
-  },
-  height: {
-    type: Number,
-    require: true,
-  },
-});
-
-// const video_url = "http://qcast-image.oss-cn-qingdao.aliyuncs.com/homepage/20210207/52fae4231350c85fec605b47bbe479c5.mp4";
-const video_url =
-  "http://qcast-image.oss-cn-qingdao.aliyuncs.com/homepage/20190726/4cc4e6a8fd7d9d9c707ed4c4da27ca9d.mp4";
-</script>
-
-<style scoped>
-@keyframes opacityVideoDemo_CompositeOpacity {
-  from {
-    opacity: 0.1;
-  }
-  to {
-  }
-}
-</style>
-
-<template>
-  <div
-    className="blockStyle"
-    :style="{
-      top: props.top,
-      left: props.left,
-      width: props.width,
-      height: props.height,
-      backgroundColor: '#0000FF',
-      animation: 'opacityVideoDemo_CompositeOpacity 3s infinite',
-    }"
-  >
-    <jsv-video
-      :src="video_url"
-      autoplay="autoplay"
-      loop="loop"
-      :style="{
-        top: 5,
-        left: 5,
-        width: props.width - 10,
-        height: props.height - 10,
-      }"
-    />
-  </div>
-</template>

package/samples/FlipCard/App.vue

@@ -1,71 +0,0 @@
-<script setup>
-import { useRouter } from "vue-router";
-import { ref, shallowRef } from "vue";
-import { HORIZONTAL, MetroWidget } from "jsview";
-import FlipCard from "./FlipCard.vue";
-import { data } from "./data.js";
-import redEgg from "./assets/red_egg.png";
-import blueEgg from "./assets/blue_egg.png";
-
-const name = "/flipCard";
-const focusNode = shallowRef(null);
-const router = useRouter();
-
-const onKeyDown = (ev) => {
-  // 8:Backspace, 27:Escape, 10000:盒子返回键
-  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-    router.go(-1); // 有router时，是从DemoHomepage进入，回退
-    return true;
-  }
-
-  return false;
-};
-const measures = (item) => {
-  return {
-    width: item.blocks.w,
-    height: item.blocks.h,
-    focusable: item.focusable,
-    hasSub: item.hasSub,
-  };
-};
-const onFocus = () => {
-  focusNode.value.findBlockByName(name).requestFocus();
-};
-</script>
-
-<template>
-  <jsv-focus-block
-    ref="focusNode"
-    autoFocus
-    :onAction="{
-      onKeyDown: onKeyDown,
-      onFocus: onFocus,
-    }"
-  >
-    <metro-widget
-      :name="name"
-      :width="1280"
-      :height="720"
-      :padding="{ left: 50, top: 100, right: 20, bottom: 20 }"
-      :data="data"
-      :direction="HORIZONTAL"
-      :measures="measures"
-    >
-      <template #renderItem="{ data, query, onEdge, onAction }">
-        <FlipCard
-          :data="data"
-          :query="query"
-          :onEdge="onEdge"
-          :onAction="onAction"
-          :width="191"
-          :height="252"
-          :backImg="redEgg"
-          :foreImg="blueEgg"
-          :perspective="300"
-          :initFlipped="false"
-          :name="name + '/' + data.id"
-        />
-      </template>
-    </metro-widget>
-  </jsv-focus-block>
-</template>

package/samples/FlipCard/FlipCard.vue

@@ -1,118 +0,0 @@
-<script setup>
-import { ref, shallowRef } from "vue";
-const props = defineProps({
-  initFlipped: Boolean,
-  width: Number,
-  height: Number,
-  backImg: String,
-  foreImg: String,
-  perspective: Number,
-  data: Object,
-  query: Object,
-  onEdge: Function,
-  onAction: Object,
-  name: String,
-});
-
-let flipAnim = ref("");
-let flipped = ref(props.initFlipped);
-let focused = ref(false);
-let keyLocked = false;
-let focusNode = shallowRef(null);
-
-const onFocus = () => {
-  focused.value = true;
-  focusNode.value.findBlockByName(props.name).requestFocus();
-};
-const onBlur = () => {
-  focused.value = false;
-};
-const onClick = () => {};
-const onFlipped = () => {
-  flipped.value = !flipped.value;
-  keyLocked = false;
-};
-const onKeyDown = (ev) => {
-  if (keyLocked) {
-    return true;
-  } else {
-    if (ev.keyCode === 13) {
-      flipAnim.value = flipped.value ? "flip 1s" : "flipBack 1s";
-      return true;
-    }
-  }
-  return false;
-};
-props.onAction.register("onFocus", onFocus);
-props.onAction.register("onBlur", onBlur);
-props.onAction.register("onClick", onClick);
-</script>
-
-<template>
-  <jsv-focus-block
-    ref="focusNode"
-    :name="name"
-    :onAction="{
-      onKeyDown: onKeyDown,
-    }"
-  >
-    <div :style="{ width, height, perspective }">
-      <div
-        :style="{
-          width,
-          height,
-          animation: flipAnim,
-          transformStyle: 'preserve-3d',
-          backgroundColor: '#FFFF00',
-        }"
-        :onAnimationEnd="onFlipped"
-      >
-        <div
-          :style="{
-            width,
-            height,
-            backgroundImage: backImg,
-            backfaceVisibility: 'hidden',
-            transform: flipped ? '' : 'rotate3d(0,1,0,180deg)',
-          }"
-        ></div>
-        <div
-          :style="{
-            width,
-            height,
-            backgroundImage: foreImg,
-            backfaceVisibility: 'hidden',
-            transform: flipped ? 'rotate3d(0,1,0,-180deg)' : '',
-          }"
-        ></div>
-      </div>
-    </div>
-    <div
-      v-if="focused"
-      :style="{ width: 20, height: 20, backgroundColor: '#FF0000' }"
-    ></div>
-  </jsv-focus-block>
-</template>
-<style>
-@keyframes flip {
-  from {
-    transform: rotate3d(0, 1, 0, 0deg);
-    transform-origin: center center;
-  }
-  to {
-    transform: rotate3d(0, 1, 0, 180deg);
-    transform-origin: center center;
-  }
-}
-
-@keyframes flipBack {
-  from {
-    transform: rotate3d(0, 1, 0, 0deg);
-    transform-origin: center center;
-  }
-  to {
-    transform: rotate3d(0, 1, 0, -180deg);
-    transform-origin: center center;
-  }
-}
-</style>

package/samples/FlipCard/data.js

@@ -1,13 +0,0 @@
-let data = [];
-for (let i = 0; i < 12; i++) {
-    data.push({
-        blocks: {
-            w: 200,
-            h: 300
-        },
-        focusable: true,
-        id: i
-    });
-}
-
-export { data }

package/samples/GridDemo/App.vue

@@ -1,215 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2022-05-06 19:32:53
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-08 11:39:09
- * @Description: file content
--->
-<script setup>
-import { jJsvRuntimeBridge, JsvGrid, LineType, EdgeDirection } from "jsview";
-import { reactive, ref, shallowRef, onMounted } from "vue";
-import { useRouter } from "vue-router";
-import ItemVue from "./Item.vue";
-import FocusItem from "./FocusItem.vue";
-const lineType = new LineType(1, 3);
-const name1 = "updatePage1";
-const name2 = "updatePage2";
-const widget1 = shallowRef(null);
-const widget2 = shallowRef(null);
-const router = useRouter();
-const _provideData1 = () => {
-  let data = [];
-  for (let i = 0; i < 113; i++) {
-    data.push({
-      content: i + "_CCCCCCCCCCCCCCCCCCCCCCC",
-    });
-  }
-  return data;
-};
-const _provideData2 = () => {
-  let data2 = [];
-  for (let i = 0; i < 113; i++) {
-    data2.push({
-      name: i + "_D",
-      baseColor: i,
-    });
-  }
-  return data2;
-};
-const _provideData3 = () => {
-  return [];
-};
-
-const _onEdge1 = (info) => {
-  if (info.direction == EdgeDirection.right) {
-    widget2.value.getFocusBlockRef().findBlockByName(name2).requestFocus();
-  }
-};
-const _onEdge2 = (info) => {
-  if (info.direction == EdgeDirection.left) {
-    widget1.value.getFocusBlockRef().findBlockByName(name1).requestFocus();
-  }
-};
-const _onKeyDown = (ev) => {
-  console.log("app onkeydown");
-  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-    router.go(-1); // 有router时，是从DemoHomepage进入，回退
-  }
-  return true;
-};
-
-onMounted(() => {
-  jJsvRuntimeBridge.notifyPageLoaded();
-  widget2.value.getFocusBlockRef()?.findBlockByName(name2).requestFocus();
-});
-</script>
-
-<template>
-  <jsv-focus-block
-    autoFocus
-    :onAction="{
-      onKeyDown: _onKeyDown,
-    }"
-    :style="{
-      width: 1920,
-      height: 1080,
-      backgroundColor: '#FFFFFF',
-    }"
-    ><jsv-grid
-      ref="widget1"
-      :name="name1"
-      :left="50"
-      :top="50"
-      :provideData="_provideData1"
-      :row="4"
-      :column="5"
-      :itemSize="{
-        width: 100,
-        height: 50,
-      }"
-      :gapInfo="{
-        row: 10,
-        column: 10,
-      }"
-      :verticalUpdate="true"
-      :columnFirst="true"
-      :onEdge="_onEdge1"
-      :initFocusId="21"
-      :loopUpdate="true"
-    >
-      <template #renderItem="{ userData, widgetData, onAction }">
-        <item-vue
-          :userData="userData"
-          :widgetData="widgetData"
-          :onAction="onAction"
-        />
-      </template>
-    </jsv-grid>
-    <div
-      :style="{
-        left: 100,
-        top: 300,
-        width: 300,
-        height: 50,
-        fontSize: 30,
-      }"
-    >
-      纵向排布, 翻页模式
-    </div>
-    <div
-      :style="{
-        left: 700,
-      }"
-    >
-      <jsv-grid
-        ref="widget2"
-        :name="name2"
-        :left="50"
-        :top="50"
-        :provideData="_provideData2"
-        :row="4"
-        :column="5"
-        :itemSize="{
-          width: 100,
-          height: 50,
-        }"
-        :gapInfo="{
-          row: 10,
-          column: 10,
-        }"
-        :verticalUpdate="false"
-        :columnFirst="true"
-        :onEdge="_onEdge2"
-        :updateType="lineType"
-        :initFocusId="0"
-      >
-        <template #renderItem="{ userData, widgetData, onAction }">
-          <focus-item
-            :userData="userData"
-            :widgetData="widgetData"
-            :onAction="onAction"
-          />
-        </template>
-      </jsv-grid>
-      <div
-        :style="{
-          left: 100,
-          top: 300,
-          width: 300,
-          height: 50,
-          fontSize: 30,
-        }"
-      >
-        横向排布, 逐行刷新
-      </div>
-    </div>
-
-    <div
-      :style="{
-        top: 500,
-      }"
-    >
-      <jsv-grid
-        ref="widget3"
-        name="empty"
-        :left="50"
-        :top="50"
-        :provideData="_provideData3"
-        :row="4"
-        :column="5"
-        :itemSize="{
-          width: 100,
-          height: 50,
-        }"
-        :gapInfo="{
-          row: 10,
-          column: 10,
-        }"
-        :verticalUpdate="false"
-        :columnFirst="true"
-        :onEdge="_onEdge2"
-        :updateType="lineType"
-        :initFocusId="0"
-      >
-        <template #renderItem="{ userData, widgetData, onAction }">
-          <item-vue
-            :userData="userData"
-            :widgetData="widgetData"
-            :onAction="onAction"
-          />
-        </template>
-      </jsv-grid>
-      <div
-        :style="{
-          left: 100,
-          top: 300,
-          width: 300,
-          height: 50,
-          fontSize: 30,
-        }"
-      >
-        空数据
-      </div>
-    </div>
-  </jsv-focus-block>
-</template>