@shijiu/jsview-vue 0.9.502 → 0.9.631

package/samples/DemoHomepage/App.vue

@@ -2,23 +2,19 @@
  * @Author: ChenChanghua
  * @Date: 2021-06-02 13:31:00
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2021-10-14 17:21:34
+ * @LastEditTime: 2022-07-12 13:40:15
  * @Description: file content
 -->
-<script lang="ts">
-import { Vue } from "vue-class-component";
+<script>
 import { router } from "./router.js";
-import { jJsvRuntimeBridge } from "jsview/utils/JsViewVueTools/JsvRuntimeBridge";
-
-class App extends Vue {
-  static Router = router;
+import { jJsvRuntimeBridge } from "jsview";
 
+export default {
+  Router: router,
   mounted() {
     jJsvRuntimeBridge.notifyPageLoaded();
-  }
-}
-
-export default App;
+  },
+};
 </script>
 
 <template>

package/samples/DemoHomepage/components/BodyFrame.vue

@@ -1,26 +1,25 @@
 <script>
-import {
-  SimpleWidget,
-  VERTICAL,
-} from "jsview/utils/JsViewEngineWidget";
+import { watch } from "vue";
+import { MetroWidget, VERTICAL } from "jsview";
 import Item from "./Item.vue";
 
 export default {
   components: {
     Item,
-    SimpleWidget,
+    MetroWidget,
   },
   props: {
     data: Array,
     name: String,
     onEdge: Function,
+    tabId: Number,
   },
   setup() {
     return {
       direction: VERTICAL,
       width: 1280,
       height: 600,
-      initFoucsId: 0,
+      initFocusId: 0,
     };
   },
   methods: {
@@ -38,6 +37,10 @@ export default {
       }
       this.$router.push(data.path);
       localStorage.curFocusId = index;
+      localStorage.curTab = this.tabId;
+    },
+    _provideData() {
+      return this.data;
     },
   },
   beforeCreate() {
@@ -45,17 +48,26 @@ export default {
       this.initFocusId = parseInt(localStorage.curFocusId);
     }
     localStorage.curFocusId = 0;
+    watch(
+      () => {
+        return this.data;
+      },
+      () => {
+        this.$refs.mw?.refreshData(true);
+      }
+    );
   },
 };
 </script>
 
 <template>
-  <simple-widget
+  <metro-widget
+    ref="mw"
     :name="name"
     :width="width"
     :height="height"
     :direction="direction"
-    :data="data"
+    :provideData="_provideData"
     :enableTouch="true"
     :measures="measures"
     :padding="{ left: 10, top: 10, right: 10, bottom: 10 }"
@@ -79,5 +91,5 @@ export default {
         {{ data.name }}
       </Item>
     </template>
-  </simple-widget>
+  </metro-widget>
 </template>

package/samples/DemoHomepage/components/TabFrame.vue

@@ -1,8 +1,5 @@
 <script>
-import {
-  SimpleWidget,
-  VERTICAL,
-} from "jsview/utils/JsViewEngineWidget";
+import { MetroWidget, VERTICAL } from "jsview";
 import Item from "./Item.vue";
 
 const measures = (item) => {
@@ -15,13 +12,14 @@ const measures = (item) => {
 
 export default {
   components: {
-    SimpleWidget,
+    MetroWidget,
     Item,
   },
   props: {
     name: String,
     itemFocus: Function,
     onEdge: Function,
+    initId: Number,
   },
   setup() {
     const width = 1280;
@@ -37,7 +35,7 @@ export default {
       {
         width: 200,
         height: 50,
-        name: "场景实例",
+        name: "MetroWidget",
         focusable: true,
         id: 1,
       },
@@ -55,7 +53,7 @@ export default {
 </script>
 
 <template>
-  <simple-widget
+  <metro-widget
     :name="name"
     :width="width"
     :height="height"
@@ -64,6 +62,7 @@ export default {
     :measures="measures"
     :padding="{ left: 10, top: 10, right: 10, bottom: 10 }"
     :onEdge="onEdge"
+    :initFocusId="initId"
   >
     <template #renderItem="{ data, query, onEdge, onAction }">
       <Item
@@ -82,5 +81,5 @@ export default {
         {{ data.name }}
       </Item>
     </template>
-  </simple-widget>
+  </metro-widget>
 </template>

package/samples/DemoHomepage/router.js

@@ -1,5 +1,5 @@
 import { createRouter } from "vue-router";
-import { createJsvHashHistory } from "jsview/utils/JsViewVueTools/JsvHashHistory";
+import { createJsvHashHistory } from "jsview";
 
 const routeList = [
   // 功能实例
@@ -8,6 +8,16 @@ const routeList = [
     path: "/",
     component: () => import("./views/Homepage"),
   },
+  {
+    name: "基础示例合集",
+    path: "/feature/Basic",
+    component: () => import("jsview/samples/Basic/App"),
+  },
+  {
+    name: "可视化变化通知",
+    path: "/feature/VisibleSensorDemo",
+    component: () => import("jsview/samples/VisibleSensorDemo/App"),
+  },
   {
     name: "快速刷新的表格布局组件",
     path: "/feature/GridDemo",
@@ -18,21 +28,6 @@ const routeList = [
     path: "/feature/NinePatchDemo",
     component: () => import("jsview/samples/NinePatchDemo/App"),
   },
-  {
-    name: "基础示例合集",
-    path: "/feature/Basic",
-    component: () => import("jsview/samples/Basic/App"),
-  },
-  {
-    name: "SimpleWidget",
-    path: "/feature/SimpleWidgetDemo",
-    component: () => import("jsview/samples/SimpleWidgetDemo/App"),
-  },
-  {
-    name: "SimpleWidget(进阶)",
-    path: "/feature/AdvanceMetroWidget",
-    component: () => import("jsview/samples/AdvanceMetroWidget/App"),
-  },
   {
     name: "视频",
     path: "/feature/VideoDemo",
@@ -49,12 +44,6 @@ const routeList = [
     props: { routePath: "/feature/HashHistory" },
     component: () => import("jsview/samples/HashHistory/App"),
   },
-  //TODO MetroPage未完成
-  // {
-  //   name: "ClassName写法样例",
-  //   path: "/feature/ClassNameDemo",
-  //   component: () => import("jsview/samples/ClassNameDemo/App"),
-  // },
   {
     name: "翻牌游戏",
     path: "/feature/FlipCard",
@@ -70,11 +59,6 @@ const routeList = [
     path: "/feature/TextureSize",
     component: () => import("jsview/samples/TextureSize/App"),
   },
-  {
-    name: "橱窗",
-    path: "/feature/FlowMultiWidget",
-    component: () => import("jsview/samples/FlowMultiWidget/App"),
-  },
   {
     name: "动图",
     path: "/feature/AnimPicture",
@@ -85,13 +69,11 @@ const routeList = [
     path: "/feature/SprayView",
     component: () => import("jsview/samples/SprayView/App"),
   },
-  //TODO 代码需要优化
   {
     name: "长文字",
     path: "/feature/LongText",
     component: () => import("jsview/samples/LongText/App"),
   },
-  //TODO 代码需要优化
   {
     name: "长图片",
     path: "/feature/LongImage",
@@ -147,17 +129,54 @@ const routeList = [
     path: "/feature/TextureAnimation",
     component: () => import("jsview/samples/TextureAnimation/App"),
   },
+  {
+    name: "焦点框旋转光效果",
+    path: "/feature/TextureAnimation2",
+    component: () => import("jsview/samples/TextureAnimation/App2"),
+  },
   {
     name: "公祭日黑白效果",
     path: "/feature/GrayDown",
     component: () => import("jsview/samples/FilterDemo/App"),
   },
+  {
+    name: "预加载",
+    path: "/feature/Preload",
+    component: () => import("jsview/samples/Preload/App"),
+  },
+  // {
+  //   name: "碰撞检测",
+  //   path: "/feature/Collision",
+  //   component: () => import("jsview/samples/Collision/App"),
+  // },
+  // {
+  //   name: "碰撞即停",
+  //   path: "/feature/ImpactStop",
+  //   component: () => import("jsview/samples/ImpactStop/App"),
+  // },
 
-  // 场景实例
+  // MetroWidget示例
+  {
+    name: "简单示例",
+    path: "/metroWidget/Simple",
+    component: () => import("jsview/samples/MetroWidgetDemos/Simple/App"),
+  },
+  {
+    name: "嵌套示例",
+    path: "/metroWidget/Advanced",
+    component: () => import("jsview/samples/MetroWidgetDemos/Advanced/App"),
+  },
+  {
+    name: "性能测试",
+    path: "/metroWidget/PerformanceTest",
+    component: () =>
+      import("jsview/samples/MetroWidgetDemos/PerformanceTest/App"),
+  },
   {
-    name: "直播间(TBD)",
-    path: "/scene/LiveRoom",
-    // component: () => import("jsview/samples/Basic/App"),
+    name: "乒乓模式",
+    path: "/metroWidget/PingPong",
+    component: () =>
+      import("jsview/samples/MetroWidgetDemos/PingPong/App"),
   },
 ];
 

package/samples/DemoHomepage/views/Homepage.vue

@@ -1,6 +1,5 @@
 <script>
-import { jJsvRuntimeBridge } from "jsview/utils/JsViewVueTools/JsvRuntimeBridge";
-import { EdgeDirection } from "jsview/utils/JsViewEngineWidget";
+import { jJsvRuntimeBridge, EdgeDirection } from "jsview";
 import TabFrame from "../components/TabFrame.vue";
 import BodyFrame from "../components/BodyFrame.vue";
 import Dialog from "../components/Dialog.vue";
@@ -9,7 +8,7 @@ import { routeList } from "../router.js";
 const colorTemplete = ["#89BEB2", "#C9BA83", "#DED38C", "#DE9C53"];
 
 const featureData = [];
-const sceneData = [];
+const metroWidgetData = [];
 for (let item of routeList) {
   let obj = {
     name: item.name,
@@ -21,12 +20,12 @@ for (let item of routeList) {
   if (item.path.indexOf("feature") >= 0) {
     obj.backgroundColor = colorTemplete[featureData.length % 4];
     featureData.push(obj);
-  } else if (item.path.indexOf("scene") >= 0) {
-    obj.backgroundColor = colorTemplete[sceneData.length % 4];
-    sceneData.push(obj);
+  } else if (item.path.indexOf("metroWidget") >= 0) {
+    obj.backgroundColor = colorTemplete[metroWidgetData.length % 4];
+    metroWidgetData.push(obj);
   }
 }
-const dataList = [featureData, sceneData];
+const dataList = [featureData, metroWidgetData];
 
 export default {
   components: {
@@ -96,7 +95,6 @@ export default {
       }
     },
     onDialogAction(msg) {
-      console.log("cchtes dialog onaction", msg);
       this.showExitDialog = false;
       this.changeFocus(this.preFocusName);
       switch (msg) {
@@ -113,6 +111,15 @@ export default {
       }
     },
   },
+  created() {
+    if (typeof localStorage.curTab !== "undefined") {
+      this.tabId = parseInt(localStorage.curTab);
+    }
+    localStorage.curTab = 0;
+    this.contentData = dataList[this.tabId];
+  },
+  mounted() {},
+  beforeUnmount() {},
 };
 </script>
 
@@ -136,6 +143,7 @@ export default {
           :name="name + '/tabFrame'"
           :onEdge="onTabEdge"
           :itemFocus="tabItemFocus"
+          :initId="tabId"
         />
       </div>
 
@@ -149,6 +157,7 @@ export default {
           :data="contentData"
           :name="name + '/bodyFrame'"
           :onEdge="onContentEdge"
+          :tabId="tabId"
         />
       </div>
 
@@ -156,7 +165,7 @@ export default {
         v-if="showExitDialog"
         :name="name + '/exitDialog'"
         :onAction="onDialogAction"
-      />
+      ></Dialog>
     </jsv-focus-block>
   </div>
 </template>

package/samples/FilterDemo/AnimatePic.vue

@@ -0,0 +1,58 @@
+<script setup>
+const item_url =
+  "http://oss.image.51vtv.cn/homepage/20210209/27bda620942566673ab449a3ef765321.png";
+</script>
+
+<template>
+  <div
+    className="blockStyle"
+    :style="{
+      backgroundColor: '#0000FF',
+      animation: 'opacityDemo_CompositeNoOpacity 3s infinite',
+    }"
+  />
+  <img
+    className="blockStyle"
+    :style="{
+      objectFit: 'contain',
+      animation: 'opacityDemo_CompositeOpacity 3s infinite',
+    }"
+    :src="item_url"
+  />
+</template>
+
+<style scoped>
+.blockStyle {
+  top: 50;
+  left: 50;
+  width: 150;
+  height: 150;
+}
+
+.picTitleTextClass {
+  font-size: 25;
+  height: 68;
+  line-height: 34;
+  color: "#000000";
+  text-align: "center";
+}
+
+@keyframes opacityDemo_CompositeOpacity {
+  from {
+    transform: translate3d(50%, 30px, 0) scale3d(1.5, 1.5, 1)
+      rotate3d(1.5, 1, 0, 90deg) skew(30deg, 45deg);
+    opacity: 0.1;
+  }
+  to {
+  }
+}
+
+@keyframes opacityDemo_CompositeNoOpacity {
+  from {
+    transform: translate3d(50%, 30px, 0) scale3d(1.5, 1.5, 1)
+      rotate3d(1.5, 1, 0, 90deg) skew(30deg, 45deg);
+  }
+  to {
+  }
+} ;
+</style>

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);