@shijiu/jsview-vue 0.0.1-beta.0

package/samples/AdvanceMetroWidget/App.vue

@@ -0,0 +1,123 @@
+<!--
+ * 【界面概述】
+ * 展示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

@@ -0,0 +1,101 @@
+<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"
+      :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

@@ -0,0 +1,58 @@
+<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;
+    },
+  },
+  created() {
+    this.onAction.register("onFocus", this.onFocus);
+    this.onAction.register("onBlur", this.onBlur);
+  },
+};
+</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

@@ -0,0 +1,137 @@
+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/AnimPicture/App.vue

@@ -0,0 +1,224 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2021-10-13 14:44:03
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2021-10-18 14:13:06
+ * @Description: file content
+-->
+<script>
+import { ref } from "vue";
+import JsvApic, { LoopType } from "jsview/utils/JsViewVueWidget/JsvApic";
+import catRun from "./assets/animated_webp.webp";
+import girlRun from "./assets/girl_run.gif";
+import quan from "./assets/quan.webp";
+import ball from "./assets/ball_3.webp";
+
+export default {
+  components: {
+    JsvApic,
+  },
+  setup() {
+    let catRunPlay = ref(false);
+    let girlRunPlay = ref(false);
+    let quanPlay = ref(false);
+    let ballPlay = ref(false);
+
+    const catRunCallback = {
+      onStart: () => {
+        catRunPlay.value = true;
+      },
+      onEnd: () => {
+        catRunPlay.value = false;
+      },
+    };
+    const girlRunCallback = {
+      onStart: () => {
+        girlRunPlay.value = true;
+      },
+      onEnd: () => {
+        girlRunPlay.value = false;
+      },
+    };
+    const quanCallback = {
+      onStart: () => {
+        quanPlay.value = true;
+      },
+      onEnd: () => {
+        quanPlay.value = false;
+      },
+    };
+    const ballCallback = {
+      onStart: () => {
+        ballPlay.value = true;
+      },
+      onEnd: () => {
+        ballPlay.value = false;
+      },
+    };
+
+    return {
+      catRun,
+      girlRun,
+      quan,
+      ball,
+      catRunPlay,
+      girlRunPlay,
+      quanPlay,
+      ballPlay,
+      catRunCallback,
+      girlRunCallback,
+      quanCallback,
+      ballCallback,
+      LoopType,
+    };
+  },
+  methods: {
+    onKeyDown(ev) {
+      if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+        this.$router?.go(-1); // 有router时，是从DemoHomepage进入，回退
+        return true;
+      }
+
+      if (ev.keyCode === 37) {
+        if (this.$refs.catRunRef) {
+          if (this.catRunPlay) {
+            this.$refs.catRunRef.stop();
+            this.catRunPlay = false;
+          } else {
+            this.$refs.catRunRef.play();
+            this.catRunPlay = true;
+          }
+        }
+      } else if (ev.keyCode === 13) {
+        if (this.$refs.girlRunRef) {
+          if (this.girlRunPlay) {
+            this.$refs.girlRunRef.stop();
+            this.girlRunPlay = false;
+          } else {
+            this.$refs.girlRunRef.play();
+            this.girlRunPlay = true;
+          }
+        }
+      } else if (ev.keyCode === 39) {
+        if (this.$refs.quanRef) {
+          if (this.quanPlay) {
+            this.$refs.quanRef.stop();
+            this.quanPlay = false;
+          } else {
+            this.$refs.quanRef.play();
+            this.quanPlay = true;
+          }
+        }
+      } else if (ev.keyCode === 38) {
+        if (this.$refs.ballRef) {
+          if (this.ballPlay) {
+            this.$refs.ballRef.stop();
+            this.ballPlay = false;
+          } else {
+            this.$refs.ballRef.play();
+            this.ballPlay = true;
+          }
+        }
+      }
+      return true;
+    },
+  },
+};
+</script>
+
+<template>
+  <jsv-focus-block ref="rootNode" autoFocus :onKeyDown="onKeyDown">
+    <div :style="{ width: 1920, height: 1080, backgroundColor: '#334C4C' }">
+      <div :style="{ left: 20, top: 20 }">
+        <jsv-apic
+          ref="catRunRef"
+          :src="`url(${catRun})`"
+          :style="{ width: 250, height: 250 }"
+          :autoPlay="true"
+          :loopType="LoopType.LOOP_DEFAULT"
+          :onStart="catRunCallback.onStart"
+          :onEnd="catRunCallback.onEnd"
+        />
+        <div className="text" :style="{ top: 270, width: 250 }">
+          {{ `WEBP(${catRunPlay ? "运行" : "停止"})\n左键控制` }}
+        </div>
+      </div>
+
+      <div :style="{ left: 280, top: 20 }">
+        <JsvApic
+          ref="girlRunRef"
+          :src="`url(${girlRun})`"
+          :style="{ width: 250, height: 214 }"
+          :autoPlay="true"
+          :loopType="LoopType.LOOP_DEFAULT"
+          :onStart="girlRunCallback.onStart"
+          :onEnd="girlRunCallback.onEnd"
+        />
+        <div className="text" :style="{ top: 219, width: 250 }">
+          {{ `GIF(${girlRunPlay ? "运行" : "停止"})\nOK键控制` }}
+        </div>
+      </div>
+
+      <div :style="{ left: 540, top: 20 }">
+        <JsvApic
+          ref="quanRef"
+          :src="`url(${quan})`"
+          :style="{ width: 250, height: 296 }"
+          :autoPlay="true"
+          :loopType="LoopType.LOOP_DEFAULT"
+          :onStart="quanCallback.onStart"
+          :onEnd="quanCallback.onEnd"
+        />
+        <div className="text" :style="{ top: 301, width: 250 }">
+          {{ `单次播放WEBP(${quanPlay ? "运行" : "停止"})\n右键控制` }}
+        </div>
+      </div>
+
+      <div :style="{ left: 800, top: 20 }">
+        <JsvApic
+          ref="ballRef"
+          :src="`url(${ball})`"
+          :style="{ width: 300, height: 200 }"
+          :autoPlay="true"
+          :loopType="LoopType.LOOP_PART"
+          :loopInfo="[
+            [3, 2, 4],
+            [5, 7, 10],
+          ]"
+          :onStart="ballCallback.onStart"
+          :onEnd="ballCallback.onEnd"
+        />
+        <div class="text" :style="{ top: 205, width: 300, height: 200 }">
+          {{
+            `局部循环WEBP(${
+              ballPlay ? "运行" : "停止"
+            })\n先循环2次后循环4次\n上键控制`
+          }}
+        </div>
+      </div>
+
+      <div
+        :style="{
+          left: 50,
+          top: 590,
+          width: 1180,
+          textAlign: 'center',
+          color: '#000000',
+          fontSize: '30px',
+        }"
+      >
+        {{ `(按键可进行停止/重播操作)` }}
+      </div>
+    </div>
+  </jsv-focus-block>
+</template>
+
+<style scoped>
+.text {
+  font-size: 25px;
+  height: 68px;
+  line-height: 34px;
+  color: #000000;
+  text-align: center;
+}
+</style>