@shijiu/jsview-vue 1.9.727 → 1.9.747

package/samples/MetroWidgetDemos/PerformanceTest/App.vue

@@ -1,210 +0,0 @@
-<!--
- * 【界面概述】
- * 展示MetroWidget控件的用法
- *
- * 【控件介绍】
- * MetroWidget:
- *      top {int} 控件的y，默认为0
- *      left {int} 控件的x， 默认为0
- *      width {int} (必选)控件的宽
- *      height {int} (必选)控件的高
- *
- *      name {string} (必选)用于设置焦点的名称
- *      padding {object} 控件内边距， 默认为{left: 0, right: 0, top: 0, bottom: 0}
- *      direction {enum} (必选)控件方向 HROIZONTAL/VERTICAL
- *      loopFocus {boolean} 焦点到边界后自动转到下一行，默认false
- *      initFocusId {int} 初始焦点，默认为0
- *      slideStyle {SlideStyle} 页面滑动类型 seamless/wholepage
- *      slideSpeed {float} 页面滑动速度，默认为1.5
- *      slideEasing {string} 页面滑动动画easing
-
- *      data {array} (必选)数据列表
- *      dispatcher {SWidgetDispatcher} 用于设置MetroWidget控件内部的状态，默认为null
- *      measures {function} (必选)返回item的模板信息的回调,
- *                              @params item {object} data中的数据
- *                              @return 模板信息，
-                                        {
-                                          width: item的宽,
-                                          height: item的高,
-                                          focusable: item是否可以获得焦点,
-                                        }
- *
- *      onClick {function} item点击回调
- *                @params item data中的数据
- *      onFocus {function} 控件获取焦点的回调
- *      onBlur {function} 控件失去焦点的回调
- *      onEdge {function} 焦点移动到边缘时的回调
- *              @params {"direction": {EdgeDirection}边缘方向, "rect": 到达边缘时的区域{x: 0, y: 0, width: 0,height: 0}}
- *
- *      enableTouch {boolean} 支持触控
- *      loadAll {boolean} 加载不显示的view，触控场景使用
- *
- * 【技巧说明】
- * Q: 插槽props如何使用？
- * A: data: 当前item的数据
- *    query: 获取一些额外信息的对象
-                { 
-                  id: {int} item的id,
-                  position: {Function} 获取item坐标的函数
-                                            @params id {int} item的id
-                                            @return {object} item的位置 {xPos, yPos, width, height}
-                }
- *    onEdge: 若单元格内另有可接管按键的控件（如MetroWidget），该控件到达边缘需要通知MetroWidget时的回调
- *    onAction: 单元格内控件需要通过onAction.register方法向MetroWidget注册onFocus， onBlur， onClick
- * 
- * Q: 如何进行布局，定制每个格的尺寸？
- * A: 首先选定一个布局的方式，一列列地横向布局(HROIZONTAL)还是一行行地纵向(VERTICAL)布局，设置给属性direction
- *    然后将单元格尺寸反馈器(函数)设置到measures中，进行布局时，组件会回调measures函数获得每个单元格的尺寸，
- *    当一列放满单元格后(如果是纵向布局，则是一行放满后)，自动换列去布局下一列。
- *
- * Q: 单元格的普通状态，焦点状态，失焦状态如何渲染？
- * A: 在单元的控件中通过往onAction注册的onFocus，onBlur控制显示
- *
- * Q: 控件中的导航处理(上下左右，OK键)需要什么响应的开发？
- * A: 上下左右键已经由控件接管，不需要开发者额外处理，上下左右键会触发翻页时间，翻页的形式由属性slideStyle来定制。
- *    另外，通过OnClick属性可以注册按键回调函数，来处理用户的OK键动作。
- *
- * Q: 边缘格获取焦点放大后显示不全？
- * A: 设置padding，注意item的排布范围是控件的宽高减去对应的padding
- *
- * Q: 焦点怎么移出控件？
- * A: 当焦点移动到控件边缘时，会调用onEdge回调。在回调中通过参数传递的值来决定焦点转移的行为
--->
-
-<script setup>
-import { data1, data2, data3 } from "./data";
-import borderImgPath from "./border.png";
-import Item from "./components/ContentItem.vue";
-import MyTab from "./components/MyTab.vue";
-import { ref, shallowRef, onMounted, onBeforeUnmount } from "vue";
-import { useRouter } from "vue-router";
-import {
-  VERTICAL,
-  MetroWidget,
-  EdgeDirection,
-  jJsvRuntimeBridge,
-  useFocusHub,
-} from "jsview";
-
-const router = useRouter();
-const focusHub = useFocusHub();
-let contentData = data1;
-let requestDataTime = 0;
-const mwRef = shallowRef(null);
-
-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 provideData = () => {
-  return contentData;
-};
-const measures = () => {
-  return {
-    width: 227,
-    height: 351,
-    focusable: true,
-  };
-};
-const onFocus = () => {
-  focusHub.setFocus("mw");
-};
-const onWidgetEdge = (edge) => {
-  if (edge.direction === EdgeDirection.top) {
-    focusHub.setFocus("tab");
-  }
-};
-const onTabEdge = () => {
-  focusHub.setFocus("mw");
-};
-const onItemFocus = (id) => {
-  if (requestDataTime != 0) {
-    clearTimeout(requestDataTime);
-    requestDataTime = 0;
-  }
-  // requestDataTime = setTimeout(() => {
-    switch (id) {
-      case 0:
-        contentData = data1;
-        break;
-      case 1:
-        contentData = data2;
-        break;
-      case 2:
-        contentData = data3;
-        break;
-    }
-    mwRef.value?.refreshData(true);
-  // }, 0);
-};
-
-onBeforeUnmount(() => {
-  if (requestDataTime != 0) {
-    clearTimeout(requestDataTime);
-    requestDataTime = 0;
-  }
-});
-
-onMounted(() => {
-  jJsvRuntimeBridge.notifyPageLoaded();
-});
-</script>
-
-<template>
-  <jsv-focus-block
-    ref="rootNode"
-    autoFocus
-    :onKeyDown="onKeyDown"
-    :onFocus="onFocus"
-  >
-    <div class="rootSize">
-      <div :style="{ left: 50, top: 50 }">
-        <my-tab name="tab" :onEdgeDown="onTabEdge" :onItemFocus="onItemFocus" />
-      </div>
-
-      <div class="widgetPos">
-        <metro-widget
-          name="mw"
-          ref="mwRef"
-          :provideData="provideData"
-          :width="1253"
-          :height="600"
-          :padding="{ left: 26, top: 36, right: 26, bottom: 36 }"
-          :direction="VERTICAL"
-          :measures="measures"
-          :onEdge="onWidgetEdge"
-        >
-          <template #renderItem="{ data, query, onEdge, onAction }">
-            <Item
-              :data="data"
-              :query="query"
-              :onEdge="onEdge"
-              :onAction="onAction"
-            />
-          </template>
-        </metro-widget>
-      </div>
-    </div>
-  </jsv-focus-block>
-</template>
-
-<style scoped>
-.rootSize {
-  top: 0px;
-}
-
-.widgetPos {
-  top: 120;
-  left: 50;
-}
-
-.focusPos {
-  top: 10;
-  left: 10;
-}
-</style>

package/samples/MetroWidgetDemos/PerformanceTest/Item.vue

@@ -1,90 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2022-07-11 18:03:22
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-11 18:03:23
- * @Description: file content
--->
-<script>
-export default {
-  props: {
-    data: Object,
-    query: Object,
-    onEdge: Function,
-    onAction: Object,
-  },
-  methods: {
-    onFocus() {
-      this.focus = true;
-      this.anim = "focusScale 0.3s";
-    },
-    onBlur() {
-      this.focus = false;
-      this.anim = "blurScale 0.3s";
-    },
-    onClick() {
-      console.log("item click");
-    },
-    getStyle() {
-      const width = this.focus
-        ? (this.data.blocks.w - 10) * (1 / 0.8)
-        : this.data.blocks.w - 10;
-      const height = this.focus
-        ? (this.data.blocks.h - 10) * (1 / 0.8)
-        : this.data.blocks.h - 10;
-      const posx = this.focus ? (this.data.blocks.w - 10 - width) / 2 : 0;
-      const posy = this.focus ? (this.data.blocks.h - 10 - height) / 2 : 0;
-      return {
-        left: posx,
-        top: posy,
-        width: width,
-        height: height,
-        color: "#FFFFFF",
-        backgroundColor: this.focus ? "#FF0000" : this.data.color,
-        animation: this.anim,
-      };
-    },
-  },
-  data() {
-    return {
-      focus: false,
-      anim: null,
-    };
-  },
-  created() {
-    this.onAction.register("onFocus", this.onFocus);
-    this.onAction.register("onBlur", this.onBlur);
-    this.onAction.register("onClick", this.onClick);
-  },
-};
-</script>
-
-<template>
-  <div :style="{ ...getStyle() }">
-    {{ data.content }}
-  </div>
-</template>
-
-<style scoped>
-@keyframes focusScale {
-  from {
-    transform: scale3d(0.8, 0.8, 1);
-    transform-origin: center center;
-  }
-  to {
-    transform: scale3d(1, 1, 1);
-    transform-origin: center center;
-  }
-}
-
-@keyframes blurScale {
-  from {
-    transform: scale3d(1.25, 1.25, 1);
-    transform-origin: center center;
-  }
-  to {
-    transform: scale3d(1, 1, 1);
-    transform-origin: center center;
-  }
-}
-</style>