@shijiu/jsview-vue 0.9.684 → 0.9.783

package/samples/MetroWidgetDemos/PerformanceTest/components/MyTab.vue

@@ -2,15 +2,15 @@
  * @Author: ChenChanghua
  * @Date: 2021-09-29 16:13:35
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2021-09-29 17:07:19
+ * @LastEditTime: 2022-12-02 16:14:11
  * @Description: file content
 -->
 <script>
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 
 export default {
   props: {
-    name: Object,
+    name: String,
     onEdgeDown: Function,
     onItemFocus: Function,
   },

package/samples/MetroWidgetDemos/PingPong/App.vue

@@ -1,8 +1,8 @@
 <!--
  * @Author: ChenChanghua
  * @Date: 2021-12-21 15:36:29
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-09-01 17:08:21
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2023-03-09 16:28:50
  * @Description: file content
 -->
 <script>
@@ -10,12 +10,18 @@ import ViewSwiper from "./ViewSwiper.vue";
 import AppTab from "./AppTab.vue";
 import { reactive } from "vue";
 import { EdgeDirection } from "jsview";
-import { advanceMetroWidget, randomColor } from "../data.js";
 
 const pageList = [];
 const tabData = [];
 
-for (let i = 0; i < 5; i++) {
+const randomColor = () => {
+  let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
+  return (
+    "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
+  );
+};
+
+for (let i = 0; i < 10; ++i) {
   tabData.push({
     width: 100,
     height: 50,
@@ -23,15 +29,20 @@ for (let i = 0; i < 5; i++) {
     content: "Tab_" + i,
     color: randomColor(),
   });
-
-  let data = JSON.parse(JSON.stringify(advanceMetroWidget));
-  data.forEach((item) => {
-    item.name = "testPage_" + i + "-" + item.name;
-  });
+  const pageData = [];
+  for (let j = 0; j < 10; ++j) {
+    pageData.push({
+      width: 500,
+      height: 170,
+      name: "testPage_" + i + "-" + "widget_" + j,
+      marginBottom: 10,
+      index: j,
+    });
+  }
   pageList.push({
     width: 600,
     height: 600,
-    data: data,
+    data: pageData,
     name: "testPage-" + i,
   });
 }
@@ -112,7 +123,7 @@ export default {
       <app-tab
         :data="tabData"
         :name="appTabName"
-        :layout="{ width: 1920, height: 100 }"
+        :layout="{ width: 600, height: 100 }"
         :onEdge="$_app_tabOnEdge"
         :style="{
           top: 15,

package/samples/MetroWidgetDemos/PingPong/AppPage.vue

@@ -1,14 +1,14 @@
 <!--
  * @Author: ChenChanghua
  * @Date: 2022-07-12 10:45:38
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-09-01 17:04:31
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2023-03-09 16:27:44
  * @Description: file content
 -->
 <script setup>
 import { VERTICAL, MetroWidget } from "jsview";
-import WidgetItem from "../WidgetItem.vue";
-import { ref, watch, onBeforeUnmount } from "vue";
+import WidgetItem from "./WidgetItem.vue";
+import { ref, shallowRef, watch, onBeforeUnmount } from "vue";
 
 const props = defineProps({
   data: {
@@ -24,7 +24,7 @@ const props = defineProps({
   },
 });
 
-const widgetRef = ref(null);
+const widgetRef = shallowRef(null);
 
 const provideData = () => {
   return props.data.data;

package/samples/MetroWidgetDemos/{Item.vue → PingPong/Item.vue}

@@ -1,12 +1,10 @@
 <!--
  * @Author: ChenChanghua
- * @Date: 2022-05-10 15:21:24
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-11-01 15:24:26
+ * @Date: 2023-03-09 16:28:25
  * @Description: file content
 -->
 <script setup>
-import { ref, inject } from "vue";
+import { ref, shallowRef, inject } from "vue";
 
 const props = defineProps({
   data: Object,
@@ -14,28 +12,12 @@ const props = defineProps({
   onAction: Object,
 });
 
-const divRef = ref(null);
+const divRef = shallowRef(null);
 const focused = ref(false);
 
-const focusSize = inject("focusSize");
-
 // 自身的焦点状态自己记录, 通过回调来改变
 const onFocus = () => {
   focused.value = true;
-  if (focusSize) {
-    divRef.value?.getBoundingClientRect().then(
-      (data) => {
-        console.log("testtest focus size", data)
-        focusSize.width = data.width;
-        focusSize.height = data.height;
-        focusSize.left = data.left;
-        focusSize.top = data.top;
-      },
-      (error) => {
-        console.log("testtest abs failed", error);
-      }
-    );
-  }
 };
 const onBlur = () => {
   focused.value = false;

package/samples/MetroWidgetDemos/PingPong/TabItem.vue

@@ -6,7 +6,7 @@
  * @Description: file content
 -->
 <script setup>
-import { ref, inject } from "vue";
+import { ref, shallowRef, inject } from "vue";
 
 const props = defineProps({
   data: Object,

package/samples/MetroWidgetDemos/PingPong/ViewSwiper.vue

@@ -1,14 +1,14 @@
 <!--
  * @Author: ChenChanghua
  * @Date: 2022-07-12 10:30:33
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-09-01 17:05:07
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2023-03-09 16:00:38
  * @Description: file content
 -->
 <script>
 import AppPage from "./AppPage.vue";
 import { getKeyFramesGroup } from "jsview";
-import { reactive, ref } from "vue";
+import { reactive } from "vue";
 
 export default {
   components: {
@@ -187,7 +187,7 @@ export default {
         animation: page0Anim.anim,
         animationFillMode: 'forwards',
       }"
-      :onAnimationEnd="page0Anim.onend"
+      @animationend="page0Anim.onend"
     >
       <app-page
         v-if="page0Show"
@@ -201,7 +201,7 @@ export default {
         animation: page1Anim.anim,
         animationFillMode: 'forwards',
       }"
-      :onAnimationEnd="page1Anim.onend"
+      @animationend="page1Anim.onend"
     >
       <app-page
         v-if="page1Show"

package/samples/MetroWidgetDemos/{WidgetItem.vue → PingPong/WidgetItem.vue}

@@ -1,7 +1,12 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-09 16:27:38
+ * @Description: file content
+-->
 
 <script setup>
 import { HORIZONTAL, MetroWidget, useFocusHub } from "jsview";
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 import Item from "./Item.vue";
 
 const props = defineProps({
@@ -11,7 +16,7 @@ const props = defineProps({
   onAction: Object,
 });
 const focusHub = useFocusHub();
-const mwRef = ref(null);
+const mwRef = shallowRef(null);
 
 const measures = (item) => {
   return item;
@@ -43,7 +48,7 @@ const onFocus = (rect) => {
 };
 const onBlur = () => {
   //onBlur时需要返还焦点给父MetroWidget
-  mwRef.value?.getFocusBlockRef().returnFocusToParent();
+  focusHub.returnFocusToParent();
 };
 
 props.onAction.register("onFocus", onFocus);
@@ -78,7 +83,6 @@ props.onAction.register("onBlur", onBlur);
       bottom: 10,
     }"
     :measures="measures"
-    :slideSetting="seamlessSlide"
     :onEdge="onItemEdge"
     :sendFocusRectEvent="true"
   >

package/samples/MetroWidgetDemos/basic/App.vue

@@ -0,0 +1,162 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 14:52:08
+ * @Description: file content
+-->
+<script setup>
+import { MetroWidget, HORIZONTAL, useFocusHub } from "jsview";
+import Item from "./Item.vue";
+import { onMounted } from "vue";
+
+const TAG = "MetroWidgetDemo";
+
+const focusHub = useFocusHub();
+
+const randomColor = () => {
+  let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
+  return (
+    "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
+  );
+};
+
+const provideData = () => {
+  const data = [
+    {
+      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,
+    },
+  ];
+
+  for (let i = 0; i < 5; i++) {
+    data.push(
+      {
+        width: 90,
+        height: 190,
+        marginRight: 10,
+        marginBottom: 10,
+        color: randomColor(),
+        content: 6 + i * 2,
+      },
+      {
+        width: 90,
+        height: 90,
+        marginRight: 10,
+        marginBottom: 10,
+        color: randomColor(),
+        content: 6 + i * 2 + 1,
+      }
+    );
+  }
+  return data;
+};
+
+const measures = (data) => {
+  return {
+    width: data.width,
+    height: data.height,
+    marginRight: data.marginRight,
+    marginBottom: data.marginBottom,
+  };
+};
+
+// callbacks
+const onEdge = (edgeInfo) => {
+  console.log(TAG, "onEdge", edgeInfo);
+};
+
+const onFocus = () => {
+  console.log(TAG, "onFocus");
+};
+
+const onBlur = () => {
+  console.log(TAG, "onBlur");
+};
+
+const onScroll = (start, range, totalSize) => {
+  console.log(TAG, "onScroll", start, range, totalSize);
+};
+
+const widgetLayout = {
+  left: 50,
+  top: 50,
+  width: 500,
+  height: 300,
+};
+
+onMounted(() => {
+  //组件mount后设置焦点
+  focusHub.setFocus("mainMw");
+});
+</script>
+
+<template>
+  <div
+    :style="{
+      width: 1920,
+      height: 1080,
+      backgroundColor: '#007788',
+    }"
+  />
+  <metro-widget
+    name="mainMw"
+    :left="widgetLayout.left"
+    :top="widgetLayout.top"
+    :width="widgetLayout.width"
+    :height="widgetLayout.height"
+    :provideData="provideData"
+    :direction="HORIZONTAL"
+    :measures="measures"
+    :onEdge="onEdge"
+    :onFocus="onFocus"
+    :onBlur="onBlur"
+    :onScroll="onScroll"
+  >
+    <template #renderItem="{ data, onAction }">
+      <item :data="data" :onAction="onAction" />
+    </template>
+  </metro-widget>
+</template>

package/samples/MetroWidgetDemos/basic/Item.vue

@@ -0,0 +1,43 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 14:52:17
+ * @Description: file content
+-->
+<script setup>
+import { ref, shallowRef, inject } from "vue";
+
+const props = defineProps({
+  data: Object,
+  onAction: Object,
+});
+
+const focused = ref(false);
+
+// 注册回调
+const onFocus = () => {
+  focused.value = true;
+};
+const onBlur = () => {
+  focused.value = false;
+};
+const onClick = () => {
+  console.log("item onclick ", props.data);
+};
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", onClick);
+</script>
+
+<template>
+  <div
+    :style="{
+      width: data.width,
+      height: data.height,
+      fontSize: 30,
+      color: focused ? '#FF0000' : '#FFFFFF',
+      backgroundColor: data.color,
+    }"
+  >
+    {{ data.content }}
+  </div>
+</template>

package/samples/MetroWidgetDemos/direction/App.vue

@@ -0,0 +1,158 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 15:17:44
+ * @Description: file content
+-->
+<script setup>
+import {
+  MetroWidget,
+  HORIZONTAL,
+  VERTICAL,
+  useFocusHub,
+  EdgeDirection,
+} from "jsview";
+import Item from "./Item.vue";
+import { onMounted } from "vue";
+
+const TAG = "MetroWidgetDemo";
+
+const focusHub = useFocusHub();
+
+const randomColor = () => {
+  let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
+  return (
+    "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
+  );
+};
+
+const data = [];
+for (let i = 0; i < 30; i++) {
+  data.push({
+    width: 90,
+    height: 90,
+    marginRight: 10,
+    marginBottom: 10,
+    color: randomColor(),
+    content: i,
+  });
+}
+
+const horizontalWidget = {
+  provideData: () => {
+    return data;
+  },
+  measures: (data) => {
+    return {
+      width: data.width,
+      height: data.height,
+      marginRight: data.marginRight,
+      marginBottom: data.marginBottom,
+    };
+  },
+  onEdge: (edgeInfo) => {
+    if (edgeInfo.direction == EdgeDirection.bottom) {
+      focusHub.setFocus("widget2");
+    }
+  },
+  widgetLayout: {
+    left: 50,
+    top: 50,
+    width: 300,
+    height: 200,
+  },
+};
+
+const verticalWidget = {
+  provideData: () => {
+    return data;
+  },
+  measures: (data) => {
+    return {
+      width: data.width,
+      height: data.height,
+      marginRight: data.marginRight,
+      marginBottom: data.marginBottom,
+    };
+  },
+  onEdge: (edgeInfo) => {
+    if (edgeInfo.direction == EdgeDirection.top) {
+      focusHub.setFocus("widget1");
+    }
+  },
+  widgetLayout: {
+    left: 50,
+    top: 300,
+    width: 200,
+    height: 300,
+  },
+};
+
+onMounted(() => {
+  //组件mount后设置焦点
+  focusHub.setFocus("widget1");
+});
+</script>
+
+<template>
+  <div
+    :style="{
+      width: 1920,
+      height: 1080,
+      backgroundColor: '#007788',
+    }"
+  />
+  <div
+    :style="{
+      left: 50,
+      width: 1280,
+      height: 50,
+      fontSize: 25,
+      color: '#FFFFFF',
+    }"
+  >
+    {{ "HORIZONTAL: 向右延伸. 排列顺序从上往下, 从左往右" }}
+  </div>
+  <metro-widget
+    name="widget1"
+    :left="horizontalWidget.widgetLayout.left"
+    :top="horizontalWidget.widgetLayout.top"
+    :width="horizontalWidget.widgetLayout.width"
+    :height="horizontalWidget.widgetLayout.height"
+    :provideData="horizontalWidget.provideData"
+    :measures="horizontalWidget.measures"
+    :onEdge="horizontalWidget.onEdge"
+    :direction="HORIZONTAL"
+  >
+    <template #renderItem="{ data, onAction }">
+      <item :data="data" :onAction="onAction" />
+    </template>
+  </metro-widget>
+
+  <div
+    :style="{
+      left: 50,
+      top: 250,
+      width: 1280,
+      height: 50,
+      fontSize: 25,
+      color: '#FFFFFF',
+    }"
+  >
+    {{ "VERTICAL: 向下延伸. 排列顺序从左往右, 从上往下" }}
+  </div>
+  <metro-widget
+    name="widget2"
+    :left="verticalWidget.widgetLayout.left"
+    :top="verticalWidget.widgetLayout.top"
+    :width="verticalWidget.widgetLayout.width"
+    :height="verticalWidget.widgetLayout.height"
+    :provideData="verticalWidget.provideData"
+    :measures="verticalWidget.measures"
+    :onEdge="verticalWidget.onEdge"
+    :direction="VERTICAL"
+  >
+    <template #renderItem="{ data, onAction }">
+      <item :data="data" :onAction="onAction" />
+    </template>
+  </metro-widget>
+</template>

package/samples/MetroWidgetDemos/direction/Item.vue

@@ -0,0 +1,45 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 14:52:17
+ * @Description: file content
+-->
+<script setup>
+import { ref, shallowRef, inject } from "vue";
+
+const props = defineProps({
+  data: Object,
+  onAction: Object,
+});
+
+const divRef = shallowRef(null);
+const focused = ref(false);
+
+// 注册回调
+const onFocus = () => {
+  focused.value = true;
+};
+const onBlur = () => {
+  focused.value = false;
+};
+const onClick = () => {
+  console.log("item onclick ", props.data);
+};
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", onClick);
+</script>
+
+<template>
+  <div
+    ref="divRef"
+    :style="{
+      width: data.width,
+      height: data.height,
+      fontSize: 30,
+      color: focused ? '#FF0000' : '#FFFFFF',
+      backgroundColor: data.color,
+    }"
+  >
+    {{ data.content }}
+  </div>
+</template>