@shijiu/jsview-vue-samples 2.1.25 → 2.1.200

package/MetroWidgetDemos/PingPong/App.vue

@@ -34,21 +34,12 @@ for (let i = 0; i < 10; ++i) {
   });
   const pageData = [];
   for (let j = 0; j < 10; ++j) {
-    let floorType = 0; // 0: 默认; 1: 不滚动; 2: 首屏最后一个楼层
-    if (i == 0) {
-      if (j == 0 || j == 1) {
-        floorType = 1;
-      } else if (j == 2) {
-        floorType = 2;
-      }
-    }
     pageData.push({
       width: 500,
       height: 170,
       name: "testPage_" + i + "-" + "widget_" + j,
       marginBottom: 10,
       index: j,
-      floorType,
     });
   }
   pageList.push({

package/MetroWidgetDemos/PingPong/AppPage.vue

@@ -29,6 +29,7 @@ const widgetRef = shallowRef(null);
 const slideSetting = props.data.tabIndex == 0 ? new SeamlessSlide({
   startPercent: 0.5,
   endPercent: 0.5,
+  fixFirstPage: true,
 }) : new SeamlessSlide();
 
 const provideData = () => {
@@ -38,7 +39,7 @@ const measures = (item) => {
   return {
     width: item.width,
     height: item.height,
-    itemSlide: item.floorType == 0 ? METRO_WIDGET_CONST.ITEM_SLIDE.ACT_FOCUS_RECT_EVENT : METRO_WIDGET_CONST.ITEM_SLIDE.DISABLE,
+    itemSlide: METRO_WIDGET_CONST.ITEM_SLIDE.ACT_FOCUS_RECT_EVENT,
   };
 };
 

package/MetroWidgetDemos/PingPong/WidgetItem.vue

@@ -45,11 +45,6 @@ const onFocus = (rect) => {
   //获得焦点时需要做就近移动的处理, 因此需要通过setEnterFocusRect设置寻找最近焦点的区域
   mwRef.value?.setEnterFocusRect(rect);
   focusHub.setFocus(props.data.name);
-
-  //首屏不动时, 末尾楼层获得焦点时滚动到0
-  if (props.data.floorType == 2) {
-    props.query.widgetHandler.slideTo(0, true);
-  }
 };
 const onBlur = () => {
   //onBlur时需要返还焦点给父MetroWidget

package/MetroWidgetDemos/SkeletonDiagram/App.vue

@@ -17,7 +17,7 @@ const measures = (item) => {
     width: item.width,
     height: item.height,
     marginRight: 10,
-    marginTop: 10,
+    marginBottom: 10,
   };
 };
 
@@ -60,6 +60,8 @@ onMounted(() => {
       :enableItemRenderBreak="true"
       :placeHolderSetting="{
         backgroundColor: 'rgba(78,105,127, 0.8)',
+        focusBackgroundColor: '#770088aa',
+        borderRadius: 10,
         gap: 10,
       }"
     >

package/MetroWidgetDemos/SkeletonDiagram/Item.vue

@@ -50,6 +50,7 @@ props.onAction.register("onClick", onClicked);
         width: props.data.width + 20,
         height: props.data.height + 20,
         backgroundColor: '#770088',
+        borderRadius: 10,
       }"
     >
     </div>
@@ -58,6 +59,7 @@ props.onAction.register("onClick", onClicked);
         :style="{
           width: data.width,
           height: data.height,
+          borderRadius: 10,
         }"
         :src="data.url"
       >
@@ -66,6 +68,7 @@ props.onAction.register("onClick", onClicked);
             width: data.width,
             height: data.height,
             backgroundColor: '#ff0000',
+            borderRadius: 10,
           }"
         />
       </jsv-poster-image>
@@ -86,6 +89,7 @@ props.onAction.register("onClick", onClicked);
           width: data.width,
           height: data.height,
           backgroundImage: `url(${data.url})`,
+          borderRadius: 10,
         }"
       >
         <div
@@ -93,6 +97,7 @@ props.onAction.register("onClick", onClicked);
             width: data.width,
             height: data.height,
             backgroundColor: '#ff0000',
+            borderRadius: 10,
           }"
         />
       </jsv-poster-div>

package/MetroWidgetDemos/itemSizeUpdate/App.vue

@@ -7,6 +7,7 @@
 import { useFocusHub } from "jsview";
 import Center from "./center/Center.vue";
 import Backward from "./backward/Backward.vue";
+import Stretch from "./stretch/App.vue";
 
 import { onMounted } from "vue";
 
@@ -26,23 +27,29 @@ onMounted(() => {
     }"
   >
     <div :style="{ left: 150, top: 10 }" class="text">
-      获焦一秒后放大, 放大动画以中心为锚点
+      获焦后放大, 按ok键可以控制放大/缩小, 放大动画以中心为锚点
     </div>
     <div :style="{ left: 150, top: 50 }">
       <center />
     </div>
-    <div :style="{ left: 150, top: 260 }" class="text">
+    <div :style="{ left: 150, top: 220 }" class="text">
       获焦一秒后放大, 放大动画以左侧为锚点
     </div>
-    <div :style="{ left: 150, top: 300 }">
+    <div :style="{ left: 150, top: 260 }">
       <backward />
     </div>
+    <div :style="{ left: 150, top: 430 }" class="text">
+      推拉组件
+    </div>
+    <div :style="{ left: 150, top: 470 }">
+      <stretch />
+    </div>
   </div>
 </template>
 
 <style scoped>
 .text {
-  width: 600;
+  width: 1280;
   height: 30;
   line-height: 30;
   font-size: 25;

package/MetroWidgetDemos/itemSizeUpdate/backward/Backward.vue

@@ -30,7 +30,7 @@ const provideData = () => {
   for (let i = 0; i < dataLength; ++i) {
     data.push({
       width: 100,
-      height: 150,
+      height: 100,
       marginRight: 10,
       color: randomColor(),
       content: i,
@@ -51,6 +51,8 @@ const measures = (data) => {
 const onEdge = (edgeInfo) => {
   if (edgeInfo.direction == EdgeDirection.top) {
     focusHub.setFocus("itemResizeCenter");
+  } else if (edgeInfo.direction == EdgeDirection.bottom) {
+    focusHub.setFocus("stretch");
   }
 };
 
@@ -58,14 +60,14 @@ const widgetLayout = {
   left: 0,
   top: 0,
   width: 600,
-  height: 200,
+  height: 120,
 };
 
 const padding = {
   left: 25,
-  top: 25,
+  top: 10,
   right: 25,
-  bottom: 25,
+  bottom: 10,
 };
 
 const name = "itemResizeBackward";

package/MetroWidgetDemos/itemSizeUpdate/backward/Item.vue

@@ -28,16 +28,15 @@ const focusHub = useFocusHub();
 const focused = ref(false);
 
 const width = ref(props.data.width);
-let innerWidth = props.data.width;
 const duration = 200;
 
 let timeoutHandler = -1;
 
-let originPadding;
 const animInfo = {
+  anchor: 0,
   duration: duration,
   onEnd: () => {
-    console.log("resize end");
+    console.log("resize end", props.query.index);
   },
 };
 
@@ -52,22 +51,6 @@ const onFocus = () => {
           width: width.value,
           height: props.data.height,
         },
-        {
-          type: METRO_WIDGET_CONST.ITEM_RESIZE.CUSTOMER_SET,
-          func: (oldRect, newRect, oldItemPadding) => {
-            originPadding = oldItemPadding;
-            if (oldItemPadding + newRect.width > props.widgetLayout.width) {
-              //新的item超出了widget的宽度
-              return (
-                props.widgetLayout.width -
-                newRect.width -
-                props.widgetPadding.right
-              );
-            } else {
-              return oldItemPadding;
-            }
-          },
-        },
         animInfo
       );
     }, 1000); /* 延迟1秒变化 */
@@ -84,12 +67,6 @@ const onBlur = () => {
         width: width.value,
         height: props.data.height,
       },
-      {
-        type: METRO_WIDGET_CONST.ITEM_RESIZE.CUSTOMER_SET,
-        func: (oldRect, newRect, oldItemPadding) => {
-          return originPadding;
-        },
-      },
       animInfo
     );
   }

package/MetroWidgetDemos/itemSizeUpdate/center/Center.vue

@@ -18,7 +18,7 @@ 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
+    "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor + "77"
   );
 };
 
@@ -29,8 +29,8 @@ const provideData = () => {
   const data = [];
   for (let i = 0; i < dataLength; ++i) {
     data.push({
-      width: 100,
-      height: 150,
+      width: 90,
+      height: 100,
       marginRight: 10,
       color: randomColor(),
       content: i,
@@ -58,14 +58,14 @@ const widgetLayout = {
   left: 0,
   top: 0,
   width: 600,
-  height: 200,
+  height: 120,
 };
 
 const padding = {
   left: 25,
-  top: 25,
+  top: 10,
   right: 25,
-  bottom: 25,
+  bottom: 10,
 };
 
 const name = "itemResizeCenter";

package/MetroWidgetDemos/itemSizeUpdate/center/Item.vue

@@ -4,15 +4,7 @@
  * @Description: file content
 -->
 <script setup>
-import {
-  ref,
-  shallowRef,
-  inject,
-  onUpdated,
-  onMounted,
-  onBeforeUnmount,
-} from "vue";
-import { METRO_WIDGET_CONST } from "jsview";
+import { ref } from "vue";
 
 const props = defineProps({
   data: Object,
@@ -25,45 +17,31 @@ const focused = ref(false);
 
 const width = ref(props.data.width);
 const duration = 200;
-
-let timeoutHandler = -1;
-
-const getResizeAnchor = () => {
-  if (props.query.index == 0) {
-    return 0;
-  } else if (props.query.index == props.dataLength - 1) {
-    return 1;
-  } else {
-    return 0.5;
-  }
-};
-
-const locateSetting = {
-  type: METRO_WIDGET_CONST.ITEM_RESIZE.WIDGET_SET,
-};
+const transitionStr = `left ${duration / 1000}s, top ${
+  duration / 1000
+}s, width ${duration / 1000}s, height ${duration / 1000}s`;
+const transition = ref(transitionStr);
 
 const animInfo = {
+  anchor: 0.5,
   duration: duration,
   onEnd: () => {
-    console.log("resize end");
+    console.log("resize end", props.query.index);
   },
 };
 
 const onFocus = () => {
   focused.value = true;
   if (width.value == props.data.width) {
-    timeoutHandler = setTimeout(() => {
-      width.value = props.data.width + 400;
-      props.query.updateItemSize(
-        props.query.index,
-        {
-          width: width.value,
-          height: props.data.height,
-        },
-        locateSetting,
-        animInfo
-      );
-    }, 1000); /* 延迟1秒变化 */
+    width.value = props.data.width + 200;
+    props.query.updateItemSize(
+      props.query.index,
+      {
+        width: width.value,
+        height: props.data.height,
+      },
+      animInfo
+    );
   }
 };
 
@@ -77,26 +55,39 @@ const onBlur = () => {
         width: width.value,
         height: props.data.height,
       },
-      locateSetting,
       animInfo
     );
   }
-  clearTimeout(timeoutHandler);
-  timeoutHandler = -1;
 };
 
 const onClick = () => {
   console.log("onClick");
+  if (width.value == props.data.width) {
+    width.value = props.data.width + 200;
+    props.query.updateItemSize(
+      props.query.index,
+      {
+        width: width.value,
+        height: props.data.height,
+      },
+      animInfo
+    );
+  } else {
+    width.value = props.data.width;
+    props.query.updateItemSize(
+      props.query.index,
+      {
+        width: width.value,
+        height: props.data.height,
+      },
+      animInfo
+    );
+  }
 };
 
 props.onAction.register("onFocus", onFocus);
 props.onAction.register("onBlur", onBlur);
 props.onAction.register("onClick", onClick);
-
-onBeforeUnmount(() => {
-  clearTimeout(timeoutHandler);
-  timeoutHandler = -1;
-});
 </script>
 
 <template>
@@ -107,9 +98,7 @@ onBeforeUnmount(() => {
       fontSize: 30,
       color: focused ? '#FF0000' : '#FFFFFF',
       backgroundColor: data.color,
-      transition: `left ${duration / 1000}s, top ${duration / 1000}s, width ${
-        duration / 1000
-      }s, height ${duration / 1000}s`,
+      transition: transition,
       borderRadius: 10,
     }"
   >

package/MetroWidgetDemos/itemSizeUpdate/stretch/App.vue

@@ -0,0 +1,122 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 14:52:08
+ * @Description: file content
+-->
+<script setup>
+import {
+  ListWidget,
+  HORIZONTAL,
+  useFocusHub,
+  FixPositionSlide,
+  EdgeDirection,
+} from "jsview";
+import Item from "./Item.vue";
+import { ref, provide } from "vue";
+
+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 +
+    "77"
+  );
+};
+
+const fixPositionSlide = new FixPositionSlide();
+const largeItemIndex = ref(0);
+provide("largeItemIndex", largeItemIndex);
+const data = [
+  {
+    width: 310,
+    height: 100,
+    marginRight: 10,
+    color: randomColor(),
+    content: 0,
+  },
+  {
+    width: 110,
+    height: 100,
+    marginRight: 10,
+    color: randomColor(),
+    content: 1,
+  },
+  {
+    width: 110,
+    height: 100,
+    marginRight: 10,
+    color: randomColor(),
+    content: 2,
+  },
+];
+const provideData = () => {
+  return data;
+};
+
+const measures = (data) => {
+  return {
+    width: data.width,
+    height: data.height,
+    marginRight: data.marginRight,
+    marginBottom: data.marginBottom,
+  };
+};
+
+const onEdge = (edgeInfo) => {
+  if (edgeInfo.direction == EdgeDirection.top) {
+    focusHub.setFocus("itemResizeBackward");
+  }
+};
+
+const widgetLayout = {
+  left: 0,
+  top: 0,
+  width: 600,
+  height: 120,
+};
+
+const padding = {
+  left: 25,
+  top: 10,
+  right: 25,
+  bottom: 10,
+};
+
+const name = "stretch";
+</script>
+
+<template>
+  <div>
+    <div
+      :style="{
+        ...widgetLayout,
+        backgroundColor: 'rgba(255,0,0,0.5)',
+      }"
+    ></div>
+    <list-widget
+      ref="widgetRef"
+      :name="name"
+      :left="widgetLayout.left"
+      :top="widgetLayout.top"
+      :width="widgetLayout.width"
+      :height="widgetLayout.height"
+      :provideData="provideData"
+      :direction="HORIZONTAL"
+      :slideSetting="fixPositionSlide"
+      :measures="measures"
+      :padding="padding"
+      :onEdge="onEdge"
+    >
+      <template #renderItem="{ data, onAction, query }">
+        <item
+          :data="data"
+          :onAction="onAction"
+          :query="query"
+        />
+      </template>
+    </list-widget>
+  </div>
+</template>

package/MetroWidgetDemos/itemSizeUpdate/stretch/Item.vue

@@ -0,0 +1,105 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 14:52:17
+ * @Description: file content
+-->
+<script setup>
+import { ref, watch, inject, watchSyncEffect } from "vue";
+
+const props = defineProps({
+  data: Object,
+  onAction: Object,
+  query: Object,
+  currentLargeItem: Object,
+});
+
+const focused = ref(false);
+const largeItemIndex = inject("largeItemIndex");
+
+const width = ref(props.data.width);
+const duration = 200;
+const transitionStr = `left ${duration / 1000}s, top ${
+  duration / 1000
+}s, width ${duration / 1000}s, height ${duration / 1000}s`;
+const transition = ref(transitionStr);
+const animInfo = {
+  anchor: 0.5,
+  duration: duration,
+  onEnd: () => {
+    console.log("resize end", props.query.index);
+  },
+};
+
+let isLarge = props.query.index == 0;
+watch(
+  () => largeItemIndex.value,
+  (newV) => {
+    console.log("testtest watch", newV)
+    if (newV == props.query.index) {
+      if (!isLarge) {
+        isLarge = true;
+        width.value = 310;
+        props.query.updateItemSize(
+          props.query.index,
+          {
+            width: width.value,
+            height: props.data.height,
+          },
+          animInfo
+        );
+      }
+    } else {
+      if (isLarge) {
+        isLarge = false;
+        width.value = 110;
+        props.query.updateItemSize(
+          props.query.index,
+          {
+            width: width.value,
+            height: props.data.height,
+          },
+          animInfo
+        );
+      }
+    }
+  }
+);
+
+let timeoutHandler = -1;
+const onFocus = () => {
+  focused.value = true;
+  timeoutHandler = setTimeout(() => {
+    largeItemIndex.value = props.query.index;
+  }, 1000);
+};
+
+const onBlur = () => {
+  focused.value = false;
+  clearTimeout(timeoutHandler);
+  timeoutHandler = -1;
+};
+
+const onClick = () => {
+  console.log("onClick");
+};
+
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", onClick);
+</script>
+
+<template>
+  <div
+    :style="{
+      width: width,
+      height: data.height,
+      fontSize: 30,
+      color: focused ? '#FF0000' : '#FFFFFF',
+      backgroundColor: data.color,
+      transition: transition,
+      borderRadius: 10,
+    }"
+  >
+    {{ data.content }}
+  </div>
+</template>

package/MindMap/App.vue

@@ -0,0 +1,61 @@
+<script setup>
+import { JsvMindMap } from "jsview";
+import Item from "./Item.vue";
+import { data } from "./data"
+
+const provideData = () => {
+  return data;
+};
+
+const lineColor = {
+  0: "#ff0000",
+  1: "#00ff00",
+  2: "#0000ff",
+  3: "#007788",
+  4: "#007788",
+  5: "#007788",
+};
+const formatNode = (item, depth) => {
+  return {
+    left: item.left,
+    top: item.top,
+    width: 50,
+    height: 50,
+    childrenList: item.children,
+    moveType: item.moveType ?? "layer",
+    id: item.id,
+    lineStyle: {
+      backgroundColor: lineColor[depth],
+      lineWidth: 3,
+    },
+  };
+};
+const onEdge = (info) => {
+  console.log("onEdge ", info);
+};
+</script>
+
+<template>
+  <jsv-mind-map
+    :left="200"
+    :top="100"
+    :width="500"
+    :height="500"
+    :formatNode="formatNode"
+    :provideData="provideData"
+    :onEdge="onEdge"
+  >
+    <template v-slot="{ data, onAction, handler }">
+      <item :data="data" :onAction="onAction" :handler="handler"></item>
+    </template>
+    <template #background>
+      <div
+        :style="{
+          width: 1920,
+          height: 1920,
+          backgroundColor: '#aa0000aa',
+        }"
+      ></div>
+    </template>
+  </jsv-mind-map>
+</template>