@shijiu/jsview-vue 0.9.502 → 0.9.631

package/samples/MetroWidgetDemos/data.js

@@ -0,0 +1,204 @@
+/*
+ * @Author: ChenChanghua
+ * @Date: 2022-07-11 14:00:33
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-07-12 14:35:01
+ * @Description: file content
+ */
+
+const randomColor = () => {
+  let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
+  return (
+    "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
+  );
+};
+
+const simpleData = [
+  {
+    width: 90,
+    height: 90,
+    marginRight: 10,
+    marginBottom: 10,
+    color: randomColor(),
+    content: "0",
+  },
+  {
+    width: 90,
+    height: 90,
+    marginRight: 10,
+    marginBottom: 10,
+    color: randomColor(),
+    content: "1",
+  },
+  {
+    width: 90,
+    height: 90,
+    marginRight: 10,
+    marginBottom: 10,
+    color: randomColor(),
+    content: "2",
+  },
+  {
+    width: 190,
+    height: 190,
+    marginRight: 10,
+    marginBottom: 10,
+    color: randomColor(),
+    content: "3",
+  },
+  {
+    width: 90,
+    height: 90,
+    marginRight: 10,
+    marginBottom: 10,
+    color: randomColor(),
+    content: "4",
+  },
+  {
+    width: 90,
+    height: 90,
+    marginRight: 10,
+    marginBottom: 10,
+    color: randomColor(),
+    content: "5",
+  },
+  {
+    width: 90,
+    height: 190,
+    marginRight: 10,
+    marginBottom: 10,
+    color: randomColor(),
+    content: "6",
+  },
+  {
+    width: 90,
+    height: 90,
+    marginRight: 10,
+    marginBottom: 10,
+    color: randomColor(),
+    content: "7",
+  },
+  {
+    width: 90,
+    height: 190,
+    marginRight: 10,
+    marginBottom: 10,
+    color: randomColor(),
+    content: "8",
+  },
+  {
+    width: 90,
+    height: 90,
+    marginRight: 10,
+    marginBottom: 10,
+    color: randomColor(),
+    content: "9",
+  },
+];
+
+const simpleDataAbs = [
+  {
+    left: 0,
+    top: 0,
+    width: 90,
+    height: 90,
+    marginRight: 10,
+    marginBottom: 10,
+    color: randomColor(),
+    content: "0",
+  },
+  {
+    left: 0,
+    top: 200,
+    width: 90,
+    height: 90,
+    marginRight: 10,
+    marginBottom: 10,
+    color: randomColor(),
+    content: "1",
+  },
+  {
+    left: 200,
+    top: 0,
+    width: 90,
+    height: 90,
+    marginRight: 10,
+    marginBottom: 10,
+    color: randomColor(),
+    content: "2",
+  },
+  {
+    left: 200,
+    top: 200,
+    width: 90,
+    height: 90,
+    marginRight: 10,
+    marginBottom: 10,
+    color: randomColor(),
+    content: "3",
+  },
+  {
+    left: 400,
+    top: 0,
+    width: 90,
+    height: 90,
+    marginRight: 10,
+    marginBottom: 10,
+    color: randomColor(),
+    content: "4",
+  },
+  {
+    left: 400,
+    top: 200,
+    width: 90,
+    height: 90,
+    marginRight: 10,
+    marginBottom: 10,
+    color: randomColor(),
+    content: "5",
+  },
+];
+
+const advanceButton = [];
+for (let i = 0; i < 6; i++) {
+  advanceButton.push({
+    width: 100,
+    height: 50,
+    name: "button_" + i,
+    marginRight: 10,
+    marginBottom: 10,
+  });
+}
+
+const advanceMetroWidget = [];
+for (let i = 0; i < 10; i++) {
+  advanceMetroWidget.push({
+    width: 500,
+    height: 170,
+    name: "widget_" + i,
+    marginBottom: 10,
+  });
+}
+
+const advanceMix = [];
+for (let i = 0; i < 6; i++) {
+  advanceMix.push({
+    width: 100,
+    height: 50,
+    name: "mix_button_" + i,
+    marginRight: 10,
+    marginBottom: 10,
+    type: i % 3 == 0 ? "button" : "item",
+    color: randomColor(),
+    content: i,
+  });
+}
+
+export {
+  randomColor,
+  simpleData,
+  simpleDataAbs,
+  advanceButton,
+  advanceMetroWidget,
+  advanceMix,
+};

package/samples/NinePatchDemo/App.vue

@@ -1,27 +1,119 @@
+<script setup>
+import {
+  jJsvRuntimeBridge,
+  MetroWidget,
+  HORIZONTAL,
+  JsvNinePatch,
+} from "jsview";
+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 _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>
+
 <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>
+      <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 }">
+        ref="myFocusWidget"
+        :top="100"
+        :left="250"
+        :width="1000"
+        :height="400"
+        :direction="HORIZONTAL"
+        :data="data"
+        :measures="_measures"
+        :padding="{ left: 50, right: 50, top: 50, height: 50 }"
+      >
         <template #renderItem="{ data, query, onEdge, onAction }">
           <item
             :data="data"
@@ -32,7 +124,7 @@
           />
         </template>
       </metro-widget>
-      <div :style="{top:150, left:300}">
+      <div :style="{ top: 150, left: 300 }">
         <jsv-nine-patch
           :style="{
             width: framePosition.width,
@@ -40,7 +132,7 @@
             top: framePosition.y,
             left: framePosition.x,
           }"
-          :imageUrl="imageUrl"
+          :imageUrl="borderImageUrl"
           :imageWidth="81"
           :centerWidth="25"
           :borderOutset="14"
@@ -51,96 +143,3 @@
     </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

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue'
+import { ref, computed } from "vue";
 
 const props = defineProps({
   data: Object,
@@ -11,7 +11,7 @@ const props = defineProps({
 
 let focused = ref(false);
 
-let styleValue = computed(()=>{
+let styleValue = computed(() => {
   return {
     width: props.data.blocks.w,
     height: props.data.blocks.h,
@@ -20,7 +20,7 @@ let styleValue = computed(()=>{
   };
 });
 
-const onFocus = ()=>{
+const onFocus = () => {
   focused.value = true;
   if (props.frameChanged) {
     let pos = props.query.position(props.query.id);
@@ -33,25 +33,24 @@ const onFocus = ()=>{
 
     props.frameChanged(new_x, new_y, new_width, new_height);
   }
-}
+};
 
-const onBlur = ()=>{
+const onBlur = () => {
   focused.value = false;
 };
 
-const onClicked = ()=>{
+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 : "") }}
+    {{ "" + props.data.content + (testData != null ? testData.MyName : "") }}
   </div>
 </template>
 

package/samples/Preload/App.vue

@@ -1,75 +1,78 @@
-<script>
-import { HORIZONTAL, SimpleWidget } from "jsview/utils/JsViewEngineWidget";
+<script setup>
+import {
+  HORIZONTAL,
+  MetroWidget,
+  JsvPreload,
+  buildPreloadInfo,
+  buildDownloadInfo,
+  useFocusHub,
+} from "jsview";
 import awesome from "./images/awesomeface.png";
 import cat from "./images/cat.jpg";
 import { data } from "./data.js";
 import Item from "./Item.vue";
-import JsvPreload, {
-  buildPreloadInfo,
-  buildDownloadInfo,
-} from "jsview/utils/JsViewVueWidget/JsvPreload";
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+
+const name = "/preload";
+const focusHub = useFocusHub();
+const text = ref("");
+let preloadInfo = [];
+let downloadInfo = [];
+const router = useRouter();
+
+const _onPreloading = (percent) => {
+  console.log("preloading ", percent);
+};
+
+const _onPreloadDone = (imageInfo) => {
+  console.log("PRELOAD DONE!", imageInfo);
+};
 
-export default {
-  components: { SimpleWidget, Item, JsvPreload },
-  data() {
-    return {
-      data,
-      name: "/preload",
-      text: "",
-      direction: HORIZONTAL,
-      awesome,
-      cat,
-      preloadInfo: [],
-      downloadInfo: [],
-    };
-  },
-  methods: {
-    _onPreloading(percent) {
-        console.log("preloading ", percent)
-    },
-    _onPreloadDone(imageInfo) {
-      console.log("PRELOAD DONE!", imageInfo);
-    },
-    _onDownloadDone() {
-      console.log("DOWNLOAD DONE!");
-      this.text = `图片下载完成\n${this.awesome}\n${this.cat}`;
-    },
-    _measures() {
-      return {
-        width: 180,
-        height: 90,
-        focusable: true,
-      };
-    },
-    _onKeyDown(ev) {
-      if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-        this.$router?.go(-1); // 有router时，是从DemoHomepage进入，回退
-      }
-      return true;
-    },
-    _onFocus() {
-      this.$refs.focusNode.findBlockByName(this.name).requestFocus();
-    },
-  },
-  created() {
-    for (const item of this.data) {
-      this.preloadInfo.push(buildPreloadInfo(item.url));
-      this.preloadInfo.push(buildPreloadInfo(item.focusUrl));
-    }
-    this.preloadInfo.push(null); // 测试item为null的加载
-    this.downloadInfo = [
-      buildDownloadInfo(this.awesome),
-      buildDownloadInfo(this.cat),
-      buildDownloadInfo(null), // 测试URL为null的加载
-    ];
-  },
+const _onDownloadDone = (urls, extra) => {
+  console.log("DOWNLOAD DONE!", urls, extra);
+  text.value = `图片下载完成\n${awesome}\n${cat}`;
 };
+
+const _measures = () => {
+  return {
+    width: 180,
+    height: 90,
+    focusable: true,
+  };
+};
+
+const _onKeyDown = (ev) => {
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router?.go(-1); // 有router时，是从DemoHomepage进入，回退
+  }
+  return true;
+};
+
+const _onFocus = () => {
+  focusHub.setFocus(name);
+};
+
+for (const item of data) {
+  preloadInfo.push(buildPreloadInfo(item.url));
+  preloadInfo.push(buildPreloadInfo(item.focusUrl));
+}
+preloadInfo.push(null); // 测试item为null的加载
+downloadInfo = [
+  buildDownloadInfo(awesome, null, true),
+  buildDownloadInfo(cat, null, true),
+  buildDownloadInfo(null), // 测试URL为null的加载
+];
 </script>
 
 <template>
   <jsv-focus-block
-    ref="focusNode"
     autoFocus
+    :style="{
+      width: 1920,
+      height: 1080,
+      backgroundColor: '#FFFFFF',
+    }"
     :onAction="{
       onKeyDown: _onKeyDown,
       onFocus: _onFocus,
@@ -91,11 +94,11 @@ export default {
       预加载后，图片(按钮焦点切换)切换不闪屏
     </div>
     <div :style="{ top: 200, left: 300 }">
-      <simple-widget
+      <metro-widget
         :name="name"
         :width="540"
         :height="90"
-        :direction="direction"
+        :direction="HORIZONTAL"
         :data="data"
         :measures="_measures"
       >
@@ -107,7 +110,7 @@ export default {
             :onAction="onAction"
           />
         </template>
-      </simple-widget>
+      </metro-widget>
     </div>
     <div
       :style="{