@shijiu/jsview-vue 0.9.500 → 0.9.602

package/samples/FilterDemo/App.vue

@@ -2,46 +2,43 @@
  * @Author: ChenChanghua
  * @Date: 2022-04-20 21:05:26
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-04-29 15:23:14
+ * @LastEditTime: 2022-07-08 11:16:52
  * @Description: file content
 -->
-<script>
-import { ref } from "vue";
-import { jJsvRuntimeBridge } from "jsview/utils/JsViewVueTools/JsvRuntimeBridge";
-import JsvFilterView from "jsview/utils/JsViewVueWidget/JsvFilterView";
+<script setup>
+import { ref, 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";
 
-export default {
-  components: {
-    JsvFilterView,
-  },
-  setup() {
-    return {
-      viewId: -1,
-      sample,
-      webpSample,
-      enableFilter: ref(true),
-    };
-  },
-  methods: {
-    _onKeyDown(ev) {
-      if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-        this.$router?.go(-1); // 有router时，是从DemoHomepage进入，回退
+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 {
-        if (ev.keyCode == 13) {
-          this.enableFilter = !this.enableFilter;
-          this.$refs.filter1?.enableFilter(this.enableFilter);
-          this.$refs.filter2?.enableFilter(this.enableFilter);
-        }
+        filterType.type = null;
       }
-      return true;
-    },
-  },
-  mounted() {
-    jJsvRuntimeBridge.notifyPageLoaded();
-  },
+    }
+  }
+  return true;
 };
+onMounted(() => {
+  jJsvRuntimeBridge.notifyPageLoaded();
+});
 </script>
 
 <template>
@@ -56,60 +53,101 @@ export default {
       backgroundColor: '#007788',
     }"
   >
-    <jsv-filter-view :width="400" :height="400" ref="filter1">
+    <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: 0,
+          left: 450,
           top: 0,
-          width: 300,
-          height: 300,
+          width: 400,
+          height: 350,
           backgroundImage: `url(${sample})`,
         }"
       ></div>
-    </jsv-filter-view>
-    <div
-      :style="{
-        left: 400,
-        top: 0,
-        width: 300,
-        height: 300,
-        backgroundImage: `url(${sample})`,
-      }"
-    ></div>
 
-    <jsv-filter-view :top="350" :width="400" :height="400" ref="filter2">
+      <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>
-    </jsv-filter-view>
-    <div
-      :style="{
-        left: 400,
-        top: 350,
-        width: 300,
-        height: 300,
-        backgroundImage: `url(${webpSample})`,
-      }"
-    ></div>
+    </div>
   </jsv-focus-block>
   <div
+    className="guideText"
     :style="{
-      left: 800,
+      left: 10,
+      top: 30,
       width: 400,
       height: 200,
-      color: '#FFFFFF',
-      fontSize: '30px',
     }"
   >
-    按OK键关闭/开启滤镜
+    {{
+      `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);

package/samples/FilterDemo/VideoLayer.vue

@@ -0,0 +1,62 @@
+<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,47 +1,38 @@
-<script>
-import {
-  HORIZONTAL,
-  SimpleWidget,
-} from "jsview/utils/JsViewEngineWidget";
+<script setup>
+import { useRouter } from "vue-router";
+import { ref } 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";
-export default {
-  components: { SimpleWidget, FlipCard },
-  setup() {
-    return {
-      name: "/flipCard",
-      flipCardData: data,
-      direction: HORIZONTAL,
-      redEgg,
-      blueEgg,
-    };
-  },
-  methods: {
-    onKeyDown(ev) {
-      // 8:Backspace, 27:Escape, 10000:盒子返回键
-      if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-        this.$router?.go(-1); // 有router时，是从DemoHomepage进入，回退
-        return true;
-      }
 
-      return false;
-    },
-    measures(item) {
-      return {
-        width: item.blocks.w,
-        height: item.blocks.h,
-        focusable: item.focusable,
-        hasSub: item.hasSub,
-      };
-    },
-    onFocus() {
-      this.$refs.focusNode.findBlockByName(this.name).requestFocus();
-    },
-  },
+const name = "/flipCard";
+const focusNode = ref(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"
@@ -51,13 +42,13 @@ export default {
       onFocus: onFocus,
     }"
   >
-    <simple-widget
+    <metro-widget
       :name="name"
       :width="1280"
       :height="720"
       :padding="{ left: 50, top: 100, right: 20, bottom: 20 }"
-      :data="flipCardData"
-      :direction="direction"
+      :data="data"
+      :direction="HORIZONTAL"
       :measures="measures"
     >
       <template #renderItem="{ data, query, onEdge, onAction }">
@@ -75,6 +66,6 @@ export default {
           :name="name + '/' + data.id"
         />
       </template>
-    </simple-widget>
+    </metro-widget>
   </jsv-focus-block>
 </template>

package/samples/FlipCard/FlipCard.vue

@@ -1,59 +1,53 @@
-<script>
-export default {
-  props: {
-    initFlipped: Boolean,
-    width: Number,
-    height: Number,
-    backImg: String,
-    foreImg: String,
-    perspective: Number,
-    data: Object,
-    query: Object,
-    onEdge: Function,
-    onAction: Object,
-    name: String,
-  },
-  data() {
-    return {
-      flipAnim: "",
-      flipped: this.initFlipped,
-      focused: false,
-      keyLocked: false,
-    };
-  },
-  methods: {
-    onFocus() {
-      this.focused = true;
-      this.$refs.focusNode.findBlockByName(this.name).requestFocus();
-    },
-    onBlur() {
-      this.focused = false;
-    },
-    onClick() {},
-    onFlipped() {
-      this.flipped = !this.flipped;
-      this.keyLocked = false;
-    },
-    onKeyDown(ev) {
-      if (this.keyLocked) {
-        return true;
-      } else {
-        if (ev.keyCode === 13) {
-          // this.keyLocked = true;
-          this.flipAnim = this.flipped ? "flip 1s" : "flipBack 1s";
-          return true;
-        }
-      }
-      return false;
-    },
-  },
-  created() {
-    this.onAction.register("onFocus", this.onFocus);
-    this.onAction.register("onBlur", this.onBlur);
-    this.onAction.register("onClick", this.onClick);
-  },
+<script setup>
+import { ref } 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 = ref(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"

package/samples/GridDemo/App.vue

@@ -2,82 +2,66 @@
  * @Author: ChenChanghua
  * @Date: 2022-05-06 19:32:53
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-05-17 11:15:43
+ * @LastEditTime: 2022-07-08 11:39:09
  * @Description: file content
 -->
-<script>
-import { jJsvRuntimeBridge } from "jsview/utils/JsViewVueTools/JsvRuntimeBridge";
-import { reactive, ref } from "vue";
-import JsvGrid, { LineType } from "jsview/utils/JsViewVueWidget/JsvGrid.vue";
-import Item from "./Item.vue";
+<script setup>
+import { jJsvRuntimeBridge, JsvGrid, LineType, EdgeDirection } from "jsview";
+import { reactive, ref, onMounted } from "vue";
+import { useRouter } from "vue-router";
+import ItemVue from "./Item.vue";
 import FocusItem from "./FocusItem.vue";
-import { EdgeDirection } from "jsview/utils/JsViewEngineWidget";
-export default {
-  components: {
-    JsvGrid,
-    Item,
-    FocusItem,
-  },
-  setup() {
-    return {
-      lineType: new LineType(1, 3),
-      name1: "updatePage1",
-      name2: "updatePage2",
-    };
-  },
-  methods: {
-    _provideData1() {
-      let data = [];
-      for (let i = 0; i < 113; i++) {
-        data.push({
-          content: i + "_CCCCCCCCCCCCCCCCCCCCCCC",
-        });
-      }
-      return data;
-    },
-    _provideData2() {
-      let data2 = [];
-      for (let i = 0; i < 113; i++) {
-        data2.push({
-          name: i + "_D",
-          baseColor: i,
-        });
-      }
-      return data2;
-    },
+const lineType = new LineType(1, 3);
+const name1 = "updatePage1";
+const name2 = "updatePage2";
+const widget1 = ref(null);
+const widget2 = ref(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 [];
+};
 
-    _onEdge1(info) {
-      if (info.direction == EdgeDirection.right) {
-        this.$refs.widget2
-          .getFocusBlockRef()
-          .findBlockByName(this.name2)
-          .requestFocus();
-      }
-    },
-    _onEdge2(info) {
-      if (info.direction == EdgeDirection.left) {
-        this.$refs.widget1
-          .getFocusBlockRef()
-          .findBlockByName(this.name1)
-          .requestFocus();
-      }
-    },
-    _onKeyDown(ev) {
-      console.log("app onkeydown");
-      if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-        this.$router?.go(-1); // 有router时，是从DemoHomepage进入，回退
-      }
-      return true;
-    },
-  },
-  mounted() {
-    jJsvRuntimeBridge.notifyPageLoaded();
-    this.$refs.widget1
-      .getFocusBlockRef()
-      ?.findBlockByName(this.name1)
-      .requestFocus();
-  },
+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>
@@ -111,13 +95,13 @@ export default {
       :columnFirst="true"
       :onEdge="_onEdge1"
       :initFocusId="21"
+      :loopUpdate="true"
     >
-      <template #renderItem="{ userData, widgetData, onAction, query }">
-        <item
+      <template #renderItem="{ userData, widgetData, onAction }">
+        <item-vue
           :userData="userData"
           :widgetData="widgetData"
           :onAction="onAction"
-          :query="query"
         />
       </template>
     </jsv-grid>
@@ -157,7 +141,7 @@ export default {
         :columnFirst="true"
         :onEdge="_onEdge2"
         :updateType="lineType"
-        :initFocusId="43"
+        :initFocusId="0"
       >
         <template #renderItem="{ userData, widgetData, onAction }">
           <focus-item
@@ -178,6 +162,54 @@ export default {
       >
         横向排布, 逐行刷新
       </div>
-    </div></jsv-focus-block
-  >
+    </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>