@shijiu/jsview-vue 0.9.490 → 0.9.590

package/samples/AdvanceMetroWidget/App.vue

@@ -1,123 +0,0 @@
-<!--
- * 【界面概述】
- * 展示SimpleWidget控件的嵌套用法
- *
- * 【控件介绍】
- * SimpleWidget：见simpleMetroWidget
- * SWidgetDispatcher：向SimpleWidget分发消息的对象，用于设置SimpleWidget内部状态
- *                      成员函数：
- *                          dispatch
- *                              @params msg {obj} 消息体，{type: SWidgetDispatcher.Type, data: 数据}
- * SWidgetDispatcher.Type: 消息的类型
- *                          "setFocusId": Focus时初始的焦点id data为int
- *                          "setFocusRect": Focus时距离某区域最近的item获得焦点 data为{type:EdgeDirection, rect:{x:0, y:0, widht:0, height:0}}
- *                          "updateItem": 重新描画某个item data为int
- *                          "slideToItem": 界面移到某个item处 data为int
- *
- *
- * 【技巧说明】
- * Q: 如何实现嵌套?
- * A: 当SimpleWidget的measure回调返回值中hasSub为true时，该item的renderItem就可以返回可获得焦点的控件
- *
- * Q: 如何实现焦点的就近切换？
- * A: 通过dispatcher向将要获得焦点的控件发送setFocusRect消息。
--->
-
-<script>
-import { frameData, itemData } from "./data";
-import {
-  HORIZONTAL,
-  SimpleWidget,
-} from "jsview/utils/JsViewEngineWidget";
-import Frame from "./Frame.vue";
-
-const measures = (item) => {
-  return {
-    width: item.blocks.w,
-    height: item.blocks.h,
-    focusable: item.focusable,
-    hasSub: item.hasSub,
-  };
-};
-export default {
-  components: { SimpleWidget, Frame },
-  setup() {
-    return {
-      measures,
-      name: "/advanceMetroWidget",
-      direction: HORIZONTAL,
-      frameData,
-      itemData,
-    };
-  },
-  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;
-    },
-    onFocus() {
-      this.$refs.focusNode.findBlockByName("/advanceMetroWidget").requestFocus();
-    },
-  },
-
-  data() {
-    return {};
-  },
-  mounted() {},
-};
-</script>
-
-<template>
-  <div class="rootSize">
-    <jsv-focus-block
-      autoFocus
-      ref="focusNode"
-      :onAction="{
-        onKeyDown: onKeyDown,
-        onFocus: onFocus,
-      }"
-    >
-      <simple-widget
-        :name="name"
-        :data="frameData"
-        :width="680"
-        :height="680"
-        :direction="direction"
-        :measures="measures"
-      >
-        <template #renderItem="{ data, query, onEdge, onAction }">
-          <frame
-            :name="name + '/frame_' + query.id"
-            :data="data"
-            :itemData="itemData"
-            :query="query"
-            :onEdge="onEdge"
-            :onAction="onAction"
-          />
-        </template>
-      </simple-widget>
-    </jsv-focus-block>
-  </div>
-</template>
-
-<style scoped>
-.rootSize {
-  width: 1920;
-  height: 1080;
-  background-color: #334c4c;
-}
-
-.widgetPos {
-  top: 120;
-  left: 50;
-}
-
-.focusPos {
-  top: 10;
-  left: 10;
-}
-</style>

package/samples/AdvanceMetroWidget/Frame.vue

@@ -1,102 +0,0 @@
-<script>
-import {
-  HORIZONTAL,
-  SimpleWidget,
-  SWidgetDispatcher,
-} from "jsview/utils/JsViewEngineWidget";
-import Item from "./Item.vue";
-
-export default {
-  components: { SimpleWidget, Item },
-  props: {
-    itemData: Object,
-    data: Object,
-    query: Object,
-    onEdge: Function,
-    onAction: Object,
-    name: String,
-  },
-  data() {
-    return {};
-  },
-  setup() {
-    let dispatcher = new SWidgetDispatcher();
-    return {
-      direction: HORIZONTAL,
-      dispatcher,
-    };
-  },
-  methods: {
-    onFocus(enterRect) {
-      if (enterRect) {
-        const foucsInfo = {
-          type: SWidgetDispatcher.Type.setFocusRect,
-          data: enterRect,
-        };
-        this.dispatcher.dispatch(foucsInfo);
-      }
-      this.$refs.focusNode.findBlockByName(this.name).requestFocus();
-    },
-    onBlur() {},
-    onClick() {},
-    measures(item) {
-      return {
-        width: item.blocks.w,
-        height: item.blocks.h,
-        focusable: item.focusable,
-        hasSub: item.hasSub,
-      };
-    },
-  },
-
-  created() {
-    this.onAction.register("onFocus", this.onFocus);
-    this.onAction.register("onBlur", this.onBlur);
-    this.onAction.register("onClick", this.onClick);
-  },
-};
-</script>
-
-<template>
-  <jsv-focus-block ref="focusNode">
-    <simple-widget
-      :name="name"
-      :enableTouch="true"
-      :data="itemData"
-      :width="data.blocks.w"
-      :height="data.blocks.h"
-      :padding="{ left: 10, top: 10, right: 10, bottom: 10 }"
-      :direction="direction"
-      :measures="measures"
-      :onEdge="onEdge"
-      :dispatcher="dispatcher"
-    >
-      <template #renderItem="{ data, query, onEdge, onAction }">
-        <item
-          :data="data"
-          :query="query"
-          :onEdge="onEdge"
-          :onAction="onAction"
-        />
-      </template>
-    </simple-widget>
-  </jsv-focus-block>
-</template>
-
-<style scoped>
-.rootSize {
-  width: 1920;
-  height: 1080;
-  background-color: "#FFFF00";
-}
-
-.widgetPos {
-  top: 120;
-  left: 50;
-}
-
-.focusPos {
-  top: 10;
-  left: 10;
-}
-</style>

package/samples/AdvanceMetroWidget/Item.vue

@@ -1,63 +0,0 @@
-<script>
-export default {
-  props: {
-    data: Object,
-    query: Object,
-    onEdge: Function,
-    onAction: Object,
-  },
-  data() {
-    return {
-      focused: false,
-    };
-  },
-  computed: {
-    style() {
-      return {
-        width: this.data.blocks.w - 10,
-        height: this.data.blocks.h - 10,
-        color: "#FFFFFF",
-        backgroundColor: this.focused ? "#FF0000" : this.data.color,
-      };
-    },
-  },
-  methods: {
-    onFocus() {
-      this.focused = true;
-    },
-
-    onBlur() {
-      this.focused = false;
-    },
-
-    onClicked() {
-      console.log(`item ${this.query.id} clicked`);
-    }
-  },
-  created() {
-    this.onAction.register("onFocus", this.onFocus);
-    this.onAction.register("onBlur", this.onBlur);
-    this.onAction.register("onClick", this.onClicked);
-  },
-};
-</script>
-
-<template>
-  <div :class="focused ? 'focus' : 'blur'" :style="style">
-    {{ data.content }}
-  </div>
-</template>
-
-<style scoped>
-.focus {
-  transform: scale3d(1.05, 1.05, 1);
-  transition: transform 0.25s linear;
-  font-size: 30px;
-}
-
-.blur {
-  transform: scale3d(1, 1, 1);
-  transition: transform 0.25s linear;
-  font-size: 30px;
-}
-</style>

package/samples/AdvanceMetroWidget/data.js

@@ -1,137 +0,0 @@
-const frameData = [
-    {
-        blocks: {
-            w: 340,
-            h: 340
-        },
-        focusable: true,
-        hasSub: true,
-        id: 0,
-    },
-    {
-        blocks: {
-            w: 340,
-            h: 340
-        },
-        focusable: true,
-        hasSub: true,
-        id: 1,
-    },
-    {
-        blocks: {
-            w: 340,
-            h: 340
-        },
-        focusable: true,
-        hasSub: true,
-        id: 2,
-    },
-    {
-        blocks: {
-            w: 340,
-            h: 340
-        },
-        focusable: true,
-        hasSub: true,
-        id: 3,
-    },
-];
-
-const itemData = [
-    {
-        blocks: {
-            w: 300,
-            h: 100
-        },
-        focusable: true,
-        color: "#000022",
-        content: 0
-    },
-    {
-        blocks: {
-            w: 150,
-            h: 100
-        },
-        focusable: true,
-        color: "#003300",
-        content: 1
-    },
-    {
-        blocks: {
-            w: 150,
-            h: 100
-        },
-        focusable: true,
-        color: "#000044",
-        content: 2
-    },
-    {
-        blocks: {
-            w: 50,
-            h: 200
-        },
-        focusable: true,
-        color: "#000055",
-        content: 3
-    },
-    {
-        blocks: {
-            w: 50,
-            h: 200
-        },
-        focusable: true,
-        color: "#000066",
-        content: 4
-    },
-    {
-        blocks: {
-            w: 50,
-            h: 200
-        },
-        focusable: true,
-        color: "#0000CD",
-        content: 5
-    },
-];
-
-let content = 6;
-for (let i = 0; i < 4; i++) {
-    itemData.push({
-        blocks: {
-            w: 100,
-            h: 150
-        },
-        focusable: true,
-        color: "#000022",
-        content: content++
-    });
-    itemData.push({
-        blocks: {
-            w: 100,
-            h: 150
-        },
-        focusable: true,
-        color: "#003300",
-        content: content++
-    });
-    itemData.push({
-        blocks: {
-            w: 100,
-            h: 150
-        },
-        focusable: true,
-        color: "#003300",
-        content: content++
-    });
-    itemData.push({
-        blocks: {
-            w: 100,
-            h: 150
-        },
-        focusable: true,
-        color: "#000022",
-        content: content++
-    });
-}
-
-export { frameData, itemData };

package/samples/ClassNameDemo/App.vue

@@ -1,119 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2021-06-02 13:31:00
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2021-10-15 10:12:22
- * @Description: file content
--->
-<script>
-import { Options, Vue } from "vue-class-component";
-import { data } from "./data";
-import {
-  FDivRoot,
-  FDivRouter,
-  VERTICAL,
-  MetroPage,
-} from "jsview/utils/JsViewEngineWidget";
-import TitleView from "./components/TitleView";
-import ContentItem from "./components/ContentItem";
-import LoadingView from "./components/LoadingView";
-
-@Options({
-  components: {
-    FDivRoot,
-    FDivRouter,
-    MetroPage,
-    TitleView,
-    ContentItem,
-    LoadingView,
-  },
-})
-class App extends Vue {
-  constructor(props) {
-    super(props);
-
-    this.data = data;
-    this.direction = VERTICAL;
-    this.focusNode = null;
-  }
-
-  // Override
-  mounted() {
-    if (this.focusNode) {
-      this.focusNode.ChangeFocus("metroTest");
-    } else {
-      console.error("root foucs node is null.");
-    }
-  }
-
-  updateFocusNode(focusNode) {
-    console.log("app update focus node ", focusNode);
-    this.focusNode = focusNode;
-  }
-
-  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;
-  }
-
-  getMeasures() {
-    return {
-      width: 227,
-      height: 351,
-      focusable: true,
-      hasSub: false,
-    };
-  }
-
-  onItemFocus(dataItem, onEdge, query, viewObj) {
-    console.log("onItemFocus ", dataItem);
-    if (viewObj.view) {
-      viewObj.view.focus();
-    }
-  }
-
-  onItemBlur(dataItem, query, viewObj) {
-    if (viewObj.view) {
-      viewObj.view.blur();
-    }
-  }
-}
-
-export default App;
-</script>
-
-<template>
-  <div :style="{ width: 1920, height: 1080, backgroundColor: '#00000F' }">
-    <TitleView :style="{ top: 20, left: 100 }" />
-    <jsv-focus-block ref="focusNode" :onKeyDown="onKeyDown">
-      <div :style="{ top: 100, left: 70 }">
-        <MetroPage
-          branchName="metroTest"
-          :data="data"
-          :width="1253"
-          :height="600"
-          :padding="{ left: 26, top: 36, right: 26, bottom: 36 }"
-          :direction="direction"
-          :measures="getMeasures"
-          :onItemFocus="onItemFocus"
-          :onItemBlur="onItemBlur"
-          :loadViewSize="{ width: 500, height: 50 }"
-        >
-          <template #renderItem="{ data, refObj }">
-            <ContentItem :data="data" :ref="(ele) => (refObj.view = ele)" />
-          </template>
-          <template #loadingView>
-            <LoadingView />
-          </template>
-        </MetroPage>
-      </div>
-    </jsv-focus-block>
-  </div>
-</template>
-
-<style scoped>
-</style>