@shijiu/jsview-vue 0.0.1-beta.0

package/samples/ColorSpace/App.vue

@@ -0,0 +1,135 @@
+<script>
+import { Vue } from "vue-class-component";
+import jpegDemo from "./jpegDemo.jpeg";
+import pngDemo from "./pngDemo.png";
+import pngNoAlphaDemo from "./pngNoAlphaDemo.png";
+import bmpDemo from "./bmpDemo.bmp";
+
+class App extends Vue {
+  constructor(props) {
+    super(props);
+
+    this.jpegDemo = jpegDemo;
+    this.pngDemo = pngDemo;
+    this.pngNoAlphaDemo = pngNoAlphaDemo;
+    this.bmpDemo = bmpDemo;
+  }
+
+  onKeyDown(ev) {
+    // 8:Backspace, 27:Escape, 10000:盒子返回键
+    if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+      window.JsView?.setGlobalConfig({
+        texCache: -1,
+      });
+
+      this.$router?.go(-1); // 有router时，是从DemoHomepage进入，回退
+      return true;
+    }
+
+    return false;
+  }
+}
+export default App;
+</script>
+<template>
+  <jsv-focus-block autoFocus :onKeyDown="onKeyDown">
+    <div class="allBgc">
+      <div class="block">
+        <div :style="{ left: 0, top: 0 }">
+          <div class="leftFont top0">
+            {{ `RBG_8888\n透明区域透明\n色彩不失真` }}
+          </div>
+          <div class="leftFont top250">
+            {{ `RBG_565\n透明区域为黑色\n色彩略失真` }}
+          </div>
+        </div>
+
+        <div :style="{ left: 220, top: 0 }">
+          <img class="graphSize top0" :src="bmpDemo" />
+          <img
+            class="graphSize top250"
+            jsvImgColorSpace="RGB_565"
+            :src="bmpDemo"
+          />
+          <div class="underFont">
+            {{ `bmp图片` }}
+          </div>
+        </div>
+
+        <div :style="{ left: 440, top: 0 }">
+          <img class="graphSize top0" :src="jpegDemo" />
+          <img
+            class="graphSize top250"
+            jsvImgColorSpace="RGB_565"
+            :src="jpegDemo"
+          />
+          <div class="underFont">
+            {{ "jpg/jpeg图片" }}
+          </div>
+        </div>
+
+        <div :style="{ left: 660, top: 0 }">
+          <img class="graphSize top0" :src="pngDemo" />
+          <img
+            class="graphSize top250"
+            jsvImgColorSpace="RGB_565"
+            :src="pngDemo"
+          />
+          <div class="underFont">
+            {{ `png有透明图片\nRGB_565下透明部分为黑色` }}
+          </div>
+        </div>
+
+        <div :style="{ left: 880, top: 0 }">
+          <img class="graphSize top0" :src="pngNoAlphaDemo" />
+          <img
+            class="graphSize top250"
+            jsvImgColorSpace="RGB_565"
+            :src="pngNoAlphaDemo"
+          />
+          <div class="underFont">
+            {{ `png无透明图片` }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </jsv-focus-block>
+</template>
+<style scoped>
+.allBgc {
+  width: 1920;
+  height: 1080;
+  background-color: #334c4c;
+}
+.block {
+  left: 20;
+  top: 50;
+}
+.leftFont {
+  left: 0;
+  width: 200;
+  height: 200;
+  color: #ffffff;
+  font-size: 30px;
+}
+.top0 {
+  top: 0;
+}
+.top250 {
+  top: 250;
+}
+.graphSize {
+  left: 0;
+  width: 200;
+  height: 200;
+  border-radius: 15px 15px 15px 15px;
+}
+.underFont {
+  left: 0;
+  top: 500;
+  width: 200;
+  height: 200;
+  color: #ffffff;
+  font-size: 20px;
+}
+</style>

package/samples/DemoHomepage/App.vue

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

package/samples/DemoHomepage/components/BodyFrame.vue

@@ -0,0 +1,82 @@
+<script>
+import {
+  SimpleWidget,
+  VERTICAL,
+} from "jsview/utils/JsViewEngineWidget";
+import Item from "./Item.vue";
+
+export default {
+  components: {
+    Item,
+    SimpleWidget,
+  },
+  props: {
+    data: Array,
+    name: String,
+    onEdge: Function,
+  },
+  setup() {
+    return {
+      direction: VERTICAL,
+      width: 1280,
+      height: 600,
+      initFoucsId: 0,
+    };
+  },
+  methods: {
+    measures(item) {
+      return {
+        width: item.width,
+        height: item.height,
+        focusable: item.focusable,
+      };
+    },
+    itemClick(index, data) {
+      if (!data.path) {
+        console.error("Route path is not defined.");
+        return;
+      }
+      this.$router.push(data.path);
+      localStorage.curFocusId = index;
+    },
+  },
+  beforeCreate() {
+    if (typeof localStorage.curFocusId !== "undefined") {
+      this.initFocusId = parseInt(localStorage.curFocusId);
+    }
+    localStorage.curFocusId = 0;
+  },
+};
+</script>
+
+<template>
+  <simple-widget
+    :name="name"
+    :width="width"
+    :height="height"
+    :direction="direction"
+    :data="data"
+    :measures="measures"
+    :padding="{ left: 10, top: 10, right: 10, bottom: 10 }"
+    :onEdge="onEdge"
+    :initFocusId="initFocusId"
+  >
+    <template #renderItem="{ data, query, onEdge, onAction }">
+      <Item
+        :style="{
+          width: data.width,
+          height: data.height,
+          backgroundColor: data.backgroundColor,
+          color: '#000000',
+        }"
+        :data="data"
+        :query="query"
+        :onEdge="onEdge"
+        :onAction="onAction"
+        :itemClick="itemClick"
+      >
+        {{ data.name }}
+      </Item>
+    </template>
+  </simple-widget>
+</template>

package/samples/DemoHomepage/components/Dialog.vue

@@ -0,0 +1,94 @@
+<script>
+export default {
+  props: {
+    name: String,
+    onAction: Function,
+  },
+  data() {
+    return {
+      focusId: 0,
+    };
+  },
+  methods: {
+    onKeyDown(ev) {
+      switch (ev.keyCode) {
+        case 37:
+          if (this.focusId == 1) {
+            this.focusId = 0;
+          }
+          break;
+        case 39:
+          if (this.focusId == 0) {
+            this.focusId = 1;
+          }
+          break;
+        case 10000:
+        case 27:
+          this.onAction("back");
+          break;
+        case 13:
+          this.onAction(this.focusId == 0 ? "ok" : "cancel");
+          break;
+        default:
+      }
+      return true;
+    },
+  },
+};
+</script>
+
+<template>
+  <jsv-focus-block
+    autoFocus
+    :name="name"
+    :onAction="{
+      onKeyDown: onKeyDown,
+    }"
+  >
+    <div :style="{ top: 200, left: 465 }">
+      <div class="background"></div>
+      <div class="message">是否退出</div>
+      <div :style="{ top: 120, left: 30 }">
+        <div v-if="focusId == 0" class="focus"></div>
+        <div class="normal">确定</div>
+      </div>
+      <div :style="{ top: 120, left: 220 }">
+        <div v-if="focusId == 1" class="focus"></div>
+        <div class="normal">取消</div>
+      </div>
+    </div>
+  </jsv-focus-block>
+</template>
+
+<style scoped>
+.focus {
+  top: -5px;
+  left: -5px;
+  width: 100px;
+  height: 50px;
+  background-color: #0000ff;
+}
+
+.normal {
+  width: 90px;
+  height: 40px;
+  color: #ffffff;
+  text-align: center;
+  font-size: 30px;
+}
+.background {
+  left: 0px;
+  top: 0px;
+  width: 350px;
+  height: 200px;
+  background-color: rgba(0, 0, 0, 0.7);
+}
+.message {
+  top: 20px;
+  width: 350px;
+  height: 50px;
+  color: #ffffff;
+  font-size: 40px;
+  text-align: center;
+}
+</style>

package/samples/DemoHomepage/components/Item.vue

@@ -0,0 +1,77 @@
+<script>
+export default {
+  props: {
+    style: Object,
+    itemClick: Function,
+    itemFocus: Function,
+    data: Object,
+    query: Object,
+    onEdge: Function,
+    onAction: Object,
+  },
+  data() {
+    return {
+      focused: false,
+      anim: "flip 1s",
+    };
+  },
+  computed: {
+    foucsStyle() {
+      return {
+        width: this.style.width,
+        height: this.style.height,
+      };
+    },
+    itemStyle() {
+      return {
+        width: this.style.width - 10,
+        height: this.style.height - 10,
+        backgroundColor: this.style.backgroundColor,
+        color: this.style.color,
+      };
+    },
+  },
+  methods: {
+    onFocus() {
+      this.focused = true;
+      if (this.itemFocus) {
+        this.itemFocus(this.data);
+      }
+    },
+    onBlur() {
+      this.focused = false;
+    },
+    onClick() {
+      if (this.itemClick) {
+        this?.itemClick(this.query.id, this.data);
+      }
+    },
+  },
+  created() {
+    this.onAction.register("onFocus", this.onFocus);
+    this.onAction.register("onBlur", this.onBlur);
+    this.onAction.register("onClick", this.onClick);
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div class="focus" :style="foucsStyle" v-if="focused" />
+    <div class="item" :style="itemStyle">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.focus {
+  top: -5;
+  left: -5;
+  background-color: #0000ff;
+}
+.item {
+  text-align: center;
+  font-size: 30;
+}
+</style>

package/samples/DemoHomepage/components/TabFrame.vue

@@ -0,0 +1,86 @@
+<script>
+import {
+  SimpleWidget,
+  VERTICAL,
+} from "jsview/utils/JsViewEngineWidget";
+import Item from "./Item.vue";
+
+const measures = (item) => {
+  return {
+    width: item.width,
+    height: item.height,
+    focusable: item.focusable,
+  };
+};
+
+export default {
+  components: {
+    SimpleWidget,
+    Item,
+  },
+  props: {
+    name: String,
+    itemFocus: Function,
+    onEdge: Function,
+  },
+  setup() {
+    const width = 1280;
+    const height = 100;
+    const data = [
+      {
+        width: 200,
+        height: 50,
+        name: "功能实例",
+        focusable: true,
+        id: 0,
+      },
+      {
+        width: 200,
+        height: 50,
+        name: "场景实例",
+        focusable: true,
+        id: 1,
+      },
+    ];
+    const direction = VERTICAL;
+    return {
+      width,
+      height,
+      data,
+      direction,
+      measures,
+    };
+  },
+};
+</script>
+
+<template>
+  <simple-widget
+    :name="name"
+    :width="width"
+    :height="height"
+    :direction="direction"
+    :data="data"
+    :measures="measures"
+    :padding="{ left: 10, top: 10, right: 10, bottom: 10 }"
+    :onEdge="onEdge"
+  >
+    <template #renderItem="{ data, query, onEdge, onAction }">
+      <Item
+        :style="{
+          width: data.width,
+          height: data.height,
+          backgroundColor: '#00AA00',
+          color: '#FFFFFF',
+        }"
+        :data="data"
+        :query="query"
+        :onEdge="onEdge"
+        :onAction="onAction"
+        :itemFocus="itemFocus"
+      >
+        {{ data.name }}
+      </Item>
+    </template>
+  </simple-widget>
+</template>

package/samples/DemoHomepage/router.js

@@ -0,0 +1,132 @@
+import { createRouter } from "vue-router";
+import { createJsvHashHistory } from "jsview/utils/JsViewVueTools/JsvHashHistory";
+
+const routeList = [
+  // 功能实例
+  {
+    name: "Home",
+    path: "/",
+    component: () => import("./views/Homepage"),
+  },
+  {
+    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",
+    component: () => import("jsview/samples/VideoDemo/App"),
+  },
+  {
+    name: "焦点切换demo",
+    path: "/feature/BasicFocusControl",
+    component: () => import("jsview/samples/BasicFocusControl/App"),
+  },
+  {
+    name: "Hash方式路由切换",
+    path: "/feature/HashHistory",
+    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",
+    component: () => import("jsview/samples/FlipCard/App"),
+  },
+  {
+    name: "设置颜色空间",
+    path: "/feature/ColorSpace",
+    component: () => import("jsview/samples/ColorSpace/App"),
+  },
+  {
+    name: "制定Texture尺寸",
+    path: "/feature/TextureSize",
+    component: () => import("jsview/samples/TextureSize/App"),
+  },
+  {
+    name: "橱窗",
+    path: "/feature/FlowMultiWidget",
+    component: () => import("jsview/samples/FlowMultiWidget/App"),
+  },
+  {
+    name: "动图",
+    path: "/feature/AnimPicture",
+    component: () => import("jsview/samples/AnimPicture/App"),
+  },
+  {
+    name: "粒子效果",
+    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",
+    component: () => import("jsview/samples/LongImage/App"),
+  },
+  {
+    name: "二维码",
+    path: "/feature/QrcodeDemo",
+    component: () => import("jsview/samples/QrcodeDemo/App"),
+  },
+  {
+    name: "文字阴影",
+    path: "/feature/TextShadowDemo",
+    component: () => import("jsview/samples/TextShadowDemo/App"),
+  },
+  {
+    name: "多行文字区域内对齐",
+    path: "/feature/TextBox",
+    component: () => import("jsview/samples/TextBox/App"),
+  },
+  {
+    name: "抛物运动写法样例",
+    path: "/feature/ThrowMoveDemo",
+    component: () => import("jsview/samples/ThrowMoveDemo/App"),
+  },
+  {
+    name: "精灵图",
+    path: "/feature/SpriteImage",
+    component: () => import("jsview/samples/SpriteImage/App"),
+  },
+
+  // 场景实例
+  {
+    name: "直播间(TBD)",
+    path: "/scene/LiveRoom",
+    // component: () => import("jsview/samples/Basic/App"),
+  },
+];
+
+const router = createRouter({
+  // 浏览器调试和盒子上都可以使用类WebHashHistory的createJsvHashHistory(推荐)
+  // 或 createMemoryHistory;
+  // createWebHashHistory只能用于浏览器调试，盒子不支持
+  history: createJsvHashHistory(),
+  routes: routeList,
+});
+
+export { router, routeList };