@shijiu/jsview-vue 0.9.426 → 0.9.490

package/samples/GridDemo/App.vue

@@ -0,0 +1,183 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-05-06 19:32:53
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-05-17 11:15:43
+ * @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";
+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;
+    },
+
+    _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();
+  },
+};
+</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"
+    >
+      <template #renderItem="{ userData, widgetData, onAction, query }">
+        <item
+          :userData="userData"
+          :widgetData="widgetData"
+          :onAction="onAction"
+          :query="query"
+        />
+      </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="43"
+      >
+        <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></jsv-focus-block
+  >
+</template>

package/samples/GridDemo/ButtonBlock.vue

@@ -0,0 +1,111 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-05-10 15:21:24
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-05-12 21:34:15
+ * @Description: file content
+-->
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-05-07 10:22:33
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-05-09 09:19:43
+ * @Description: file content
+-->
+<script>
+import { ref } from "vue";
+export default {
+  props: ["userData", "name"],
+  setup() {
+    return {
+      focusIndex: ref(0),
+      focused: ref(false),
+      divNumber: new Array(25),
+    };
+  },
+  methods: {
+    _onFocus() {
+      console.log("button onfocus", this.userData);
+      this.focused = true;
+    },
+    _onBlur() {
+      this.focused = false;
+      this.focusIndex = 0;
+    },
+    _onKeyDown(ev) {
+      console.log("button onkeydown");
+      if (ev.keyCode == 37 && this.focusIndex == 1) {
+        this.focusIndex = 0;
+        return true;
+      } else if (ev.keyCode == 39 && this.focusIndex == 0) {
+        this.focusIndex = 1;
+        return true;
+      } else if (ev.keyCode == 13) {
+        console.log("button click", this.userData);
+        return true;
+      }
+      return false;
+    },
+    getFocusBlock() {
+      return this.$refs.focusBlock;
+    },
+    _MapColor(color_num) {
+      return ((color_num < 10 || color_num >= 100) ? '0' + color_num % 10 : '' + color_num % 100);
+    }
+  },
+};
+</script>
+
+<template>
+  <jsv-focus-block
+    ref="focusBlock"
+    :name="name"
+    :onAction="{
+      onFocus: _onFocus,
+      onBlur: _onBlur,
+      onKeyDown: _onKeyDown,
+    }"
+  >
+    <div
+      v-for="(item, index) in divNumber"
+      :key="index + '_l'"
+      :style="{
+        left: 2 * index,
+        width: 2,
+        height: 50,
+        backgroundColor: '#77' + _MapColor(index) + _MapColor(index),
+      }"
+    ></div>
+    <div
+      :style="{
+        width: 50,
+        height: 50,
+        fontSize: 20,
+        color: '#FFFFFF',
+      }"
+    >
+      {{ userData.name }}
+    </div>
+
+    <div
+      v-for="(item, index) in divNumber"
+      :key="index + '_r'"
+      :style="{
+        left: 2 * index + 50,
+        width: 2,
+        height: 50,
+        backgroundColor: '#' + _MapColor(userData.baseColor) + _MapColor(index) + _MapColor(index),
+      }"
+    ></div>
+
+    <div
+      :style="{
+        visibility: this.focused ? 'visible' : 'hidden',
+        left: 50 * focusIndex,
+        width: 10,
+        height: 10,
+        backgroundColor: '#FF0000',
+      }"
+    ></div>
+  </jsv-focus-block>
+</template>

package/samples/GridDemo/FocusItem.vue

@@ -0,0 +1,56 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-05-10 15:21:24
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-05-12 21:26:00
+ * @Description: file content
+-->
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-05-07 10:22:33
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-05-09 09:19:43
+ * @Description: file content
+-->
+<script>
+import ButtonBlock from "./ButtonBlock.vue";
+import { ref } from "vue";
+export default {
+  components: { ButtonBlock },
+  props: ["userData", "widgetData", "onAction"],
+  setup() {
+    return {
+      focused: ref(false),
+      divNumber: new Array(50),
+    };
+  },
+  methods: {
+    onFocus() {
+      this.$refs.button
+        .getFocusBlock()
+        .findBlockByName(this.widgetData.gridIndex + "_item")
+        .requestFocus();
+    },
+    onBlur() {
+      
+    },
+  },
+  created() {
+    if (this.onAction) {
+      this.onAction.register("onFocus", this.onFocus);
+      this.onAction.register("onBlur", this.onBlur);
+    }
+  },
+  mounted() {
+    // console.log("item mounted", this.userData, this.widgetData);
+  },
+};
+</script>
+
+<template>
+  <button-block
+    ref="button"
+    :name="widgetData.gridIndex + '_item'"
+    :userData="userData"
+  ></button-block>
+</template>

package/samples/GridDemo/Item.vue

@@ -0,0 +1,101 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-05-10 15:21:24
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-05-17 11:13:07
+ * @Description: file content
+-->
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-05-07 10:22:33
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-05-09 09:19:43
+ * @Description: file content
+-->
+<script>
+import { ref } from "vue";
+export default {
+  props: ["userData", "widgetData", "onAction", "query"],
+  setup() {
+    function randomColor() {
+      let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
+      return (
+        "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
+      );
+    }
+    return {
+      focused: ref(false),
+      randomColor,
+      divNumber: new Array(50),
+      blurAction: false,
+    };
+  },
+  methods: {
+    onFocus() {
+      console.log("item onfocus", this.userData);
+      this.focused = true;
+      this.blurAction = false;
+    },
+    onBlur() {
+      console.log("item onblur", this.userData, this.widgetData.getCurrentFocusId(), this.widgetData.dataIndex);
+      this.focused = false;
+      if (this.widgetData.getCurrentFocusId() == this.widgetData.dataIndex) {
+        this.blurAction = true;
+      }
+    },
+    onClick() {
+      console.log("item onclick ", this.userData);
+    },
+  },
+  created() {
+    if (this.onAction) {
+      this.onAction.register("onFocus", this.onFocus);
+      this.onAction.register("onBlur", this.onBlur);
+      this.onAction.register("onClick", this.onClick);
+    }
+  },
+  mounted() {
+    // console.log("item mounted", this.userData, this.widgetData);
+  },
+};
+</script>
+
+<template>
+  <div
+    v-for="(item, index) in divNumber"
+    :key="index"
+    :style="{
+      left: 2 * index,
+      width: 2,
+      height: 50,
+      backgroundColor: '#007788',
+    }"
+  ></div>
+  <div
+    :style="{
+      width: 100,
+      height: 50,
+      fontSize: '30px',
+      color: '#FFFFFF',
+    }"
+  >
+    {{ userData.content }}
+  </div>
+  <div
+    :style="{
+      visibility: focused ? 'visible' : 'hidden',
+      width: 20,
+      height: 20,
+      backgroundColor: '#FF0000',
+    }"
+  ></div>
+  <div
+    :style="{
+      visibility: blurAction ? 'visible' : 'hidden',
+      left: 50,
+      width: 20,
+      height: 20,
+      backgroundColor: '#00FF00',
+    }"
+  ></div>
+</template>

package/samples/NinePatchDemo/App.vue

@@ -0,0 +1,146 @@
+<template>
+  <div :style="{ width: 1280, height: 720, backgroundColor: '#FFFFFF' }">
+    <jsv-focus-block ref="focusNode" :onKeyDown="_onKeyDown">
+      <div :style="{
+            textAlign: 'center',
+            fontSize: 30,
+            lineHeight: 50,
+            color: '#ffffff',
+            left: 140,
+            top: 20,
+            width: 1000,
+            height: 50,
+            backgroundColor: 'rgba(27,38,151,0.8)'}"
+        >NinePatch展示,框的四个角的方形中心和项目的四个顶点严格对齐</div>
+      <metro-widget
+          ref="myFocusWidget"
+          :top="100"
+          :left="250"
+          :width="1000"
+          :height="400"
+          :direction="direction"
+          :data="data"
+          :measures="_measures"
+          :padding="{ left: 50, right: 50, top: 50, height: 50 }">
+        <template #renderItem="{ data, query, onEdge, onAction }">
+          <item
+            :data="data"
+            :query="query"
+            :onEdge="onEdge"
+            :onAction="onAction"
+            :frameChanged="_onFramePositionChanged"
+          />
+        </template>
+      </metro-widget>
+      <div :style="{top:150, left:300}">
+        <jsv-nine-patch
+          :style="{
+            width: framePosition.width,
+            height: framePosition.height,
+            top: framePosition.y,
+            left: framePosition.x,
+          }"
+          :imageUrl="imageUrl"
+          :imageWidth="81"
+          :centerWidth="25"
+          :borderOutset="14"
+          :imageDspWidth="81"
+          :animTime="0.2"
+        ></jsv-nine-patch>
+      </div>
+    </jsv-focus-block>
+  </div>
+</template>
+<script setup>
+import { jJsvRuntimeBridge } from "jsview/utils/JsViewVueTools/JsvRuntimeBridge";
+import {
+  HORIZONTAL,
+  MetroWidget,
+} from "jsview/utils/JsViewEngineWidget";
+import JsvNinePatch from "jsview/utils/JsViewVueWidget/JsvNinePatch.vue";
+import Item from "./Item.vue";
+import borderImageUrl from "./assets/border.png"
+import { ref, onMounted } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+
+
+const router = useRouter();
+
+const data = [
+    {
+        blocks: {
+            w: 160,
+            h: 160
+        },
+        color: "#FF9900",
+        content: 0
+    },
+    {
+        blocks: {
+            w: 300,
+            h: 300
+        },
+        color: "#0099FF",
+        content: 1
+    },
+    {
+        blocks: {
+            w: 160,
+            h: 160
+        },
+        color: "#FF9900",
+        content: 2
+    },
+];
+
+const framePosition = ref({
+        x: 0,
+        y: 0,
+        width: 50,
+        height: 50
+      });
+
+const direction = HORIZONTAL;
+
+const imageUrl = borderImageUrl;
+
+const _onFramePositionChanged = (new_x, new_y, new_width, new_height) => {
+      console.log(`new x=${new_x} y=${new_y} width=${new_width} height=${new_height}`);
+
+      framePosition.value = {
+        x: new_x,
+        y: new_y,
+        width: new_width,
+        height: new_height
+      };
+};
+
+const _measures = (item)=>{
+      return {
+        width: item.blocks.w,
+        height: item.blocks.h,
+        marginRight: 10,
+        marginTop: 10,
+      };
+    };
+
+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 myFocusWidget = ref(null);
+
+onMounted(()=>{
+  myFocusWidget.value.getFocusBlockRef().requestFocus();
+  jJsvRuntimeBridge.notifyPageLoaded();
+});
+
+</script>
+<style scoped>
+
+</style>

package/samples/NinePatchDemo/Item.vue

@@ -0,0 +1,70 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  data: Object,
+  query: Object,
+  onEdge: Function,
+  onAction: Object,
+  frameChanged: Function,
+});
+
+let focused = ref(false);
+
+let styleValue = computed(()=>{
+  return {
+    width: props.data.blocks.w,
+    height: props.data.blocks.h,
+    color: "#FFFFFF",
+    backgroundColor: props.data.color,
+  };
+});
+
+const onFocus = ()=>{
+  focused.value = true;
+  if (props.frameChanged) {
+    let pos = props.query.position(props.query.id);
+
+    // 焦点时套在放大的item外缘，所以要计算按照中心放大后的焦点框x,y,width,height
+    const new_x = pos.left + (pos.width - pos.width * 1.05) / 2;
+    const new_y = pos.top + (pos.height - pos.height * 1.05) / 2;
+    const new_width = pos.width * 1.05;
+    const new_height = pos.height * 1.05;
+
+    props.frameChanged(new_x, new_y, new_width, new_height);
+  }
+}
+
+const onBlur = ()=>{
+  focused.value = false;
+};
+
+const onClicked = ()=>{
+  onsole.log(`item ${props.query.id} clicked`);
+};
+
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", onClicked);
+
+</script>
+
+<template>
+  <div :class="focused ? 'focus' : 'blur'" :style="styleValue">
+    {{ '' + props.data.content + (testData != null ? testData.MyName : "") }}
+  </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>