@shijiu/jsview-vue-samples 2.1.482-test.0 → 2.2.128

package/DemoHomepage/views/Homepage.vue

@@ -6,15 +6,16 @@ import TabFrame from "../components/TabFrame.vue";
 import BodyFrame from "../components/BodyFrame.vue";
 import Dialog from "../components/Dialog.vue";
 
-const isDevelopment = process.env.NODE_ENV !== 'production';
+const isDevelopment = process.env.NODE_ENV !== "production";
 
 const colorTemplete = ["#89BEB2", "#C9BA83", "#DED38C", "#DE9C53"];
 
 //功能实例 MetroWidgetData 首页/运营 游戏实例
 const featureData = [];
 const metroWidgetData = [];
-const operationsData=[];
-const gameData=[]
+const operationsData = [];
+const gameData = [];
+const touchTestData = [];
 
 const routeList = useRouter().getRoutes();
 for (let item of routeList) {
@@ -25,23 +26,35 @@ for (let item of routeList) {
     height: 100,
     focusable: true,
   };
-  if (item.path.indexOf("feature") >= 0) {
+  if (item.path.indexOf("/feature/") >= 0) {
     obj.backgroundColor = colorTemplete[featureData.length % 4];
     featureData.push(obj);
-  } else if (item.path.indexOf("metroWidget") >= 0) {
+  } else if (item.path.indexOf("/metroWidget/") >= 0) {
     obj.backgroundColor = colorTemplete[metroWidgetData.length % 4];
     metroWidgetData.push(obj);
-  }else if (item.path.indexOf("Operations") >= 0) {
+  } else if (item.path.indexOf("/Operations/") >= 0) {
     obj.backgroundColor = colorTemplete[operationsData.length % 4];
     operationsData.push(obj);
-  }else if (item.path.indexOf("Game") >= 0) {
+  } else if (item.path.indexOf("/Game/") >= 0) {
     obj.backgroundColor = colorTemplete[gameData.length % 4];
     gameData.push(obj);
+  } else if (item.path.indexOf("/touch/") >= 0) {
+    obj.backgroundColor = colorTemplete[touchTestData.length % 4];
+    touchTestData.push(obj);
   }
 }
-const dataList = [featureData, metroWidgetData,operationsData,gameData];
-
+const dataList = [
+  featureData,
+  metroWidgetData,
+  operationsData,
+  touchTestData,
+  gameData,
+];
+
+// 控制v-show
+// 不用v-if是为了测试已存在的view从hide到show，并挡住其他view，是否touch判断层级正常
 let showExitDialog = shallowRef(false);
+
 let contentData = shallowRef(dataList[0]);
 let tabId = shallowRef(0);
 
@@ -108,7 +121,7 @@ let tabItemClick = (id, data) => {
     tabId.value = data.id;
     contentData.value = dataList[data.id];
   }
-}
+};
 
 let onDialogAction = (msg) => {
   showExitDialog.value = false;
@@ -141,7 +154,6 @@ onActivated(() => {
 onDeactivated(() => {
   focusNameOfDeactive = focusHub.getDeactivedPageFocus();
 });
-
 </script>
 
 <template>
@@ -149,7 +161,11 @@ onDeactivated(() => {
     <div class="address">
       {{ address }}
     </div>
-    <div class="logo">{{ 'JsView-Vue3 (Vite3) [' + (isDevelopment ? 'Debug' : 'Release') + ']' }}</div>
+    <div class="logo">
+      {{
+        "JsView-Vue3 (Vite3) [" + (isDevelopment ? "Debug" : "Release") + "]"
+      }}
+    </div>
 
     <jsv-focus-block
       autoFocus
@@ -183,9 +199,10 @@ onDeactivated(() => {
       </div>
 
       <Dialog
-        v-if="showExitDialog"
+        v-show="showExitDialog"
         :name="name + '/exitDialog'"
         :onAction="onDialogAction"
+        :focused="showExitDialog"
       ></Dialog>
     </jsv-focus-block>
   </div>

package/FocusMoveStyle/App.vue

@@ -5,6 +5,8 @@ import {
   getTextWidth,
   FixPositionSlide,
   ListWidget,
+  SeamlessSlide,
+  METRO_WIDGET_CONST
 } from "jsview";
 import FoldableItem from "./FoldableItem.vue";
 import redCircle from "./assets/redCircle.png";
@@ -17,20 +19,33 @@ const randomColor = () => {
     "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
   );
 };
-const slideType = new FixPositionSlide();
+// const slideType = new FixPositionSlide();
+const slideType = new SeamlessSlide({ startPercent: .5, endPercent: .5});
+
 const focusHub = useFocusHub();
 
 const creepFocus = ref(null);
 const showFocus = ref(true);
 let currentFocusRect = {};
+let expandItemCount = 0;
 const focusFrameController = {
-  focusVisible: (visible) => {
-    showFocus.value = visible ? true : false;
-  },
   onFocusChange: (rect, focusIndex, doAnim) => {
     creepFocus.value?.changeRect(rect, doAnim);
     currentFocusRect = rect;
   },
+  onItemSizeChange: (ifExpand) => {
+    if (ifExpand) {
+      expandItemCount++;
+    } else {
+      expandItemCount--;
+    }
+    if (expandItemCount <= 0) {
+      showFocus.value = true;
+      expandItemCount = 0;
+    }  else {
+      showFocus.value = false;
+    }
+  }
 };
 provide("focusFrameController", focusFrameController);
 
@@ -85,6 +100,7 @@ for (let i = 0; i < 12; ++i) {
     content: contentData[i],
     marginRight: 10,
     name: "item_" + i, // focus name
+    expandWhenFocus: contentData[i] == "云影院" || contentData[i] == "综艺",
     childTab: {
       width: totalWidth, //4个item + 3个gap
       list: childList,
@@ -110,6 +126,7 @@ const measures = (item) => {
     width: item.width,
     height: item.height,
     marginRight: item.marginRight,
+    itemSlide: item.expandWhenFocus ? METRO_WIDGET_CONST.ITEM_SLIDE.DISABLE : METRO_WIDGET_CONST.ITEM_SLIDE.ACT_ITEM_FOCUS
   };
 };
 

package/FocusMoveStyle/FoldableItem.vue

@@ -30,6 +30,12 @@ const width = ref(props.data.width);
 const widgetRef = shallowRef(null);
 const widgetLeft = ref(0);
 
+/**
+ * 关键代码
+ * 焦点快速往复移动时, 复用一个子widget会导致slideToDiv焦点位置的偏移, 因此每次缩放时都创建新的widget
+ */
+const changeToken = ref(0);
+
 const focusRectController = {
   onFocusChange: (rect) => {
     creepFocus.value?.changeRect(rect);
@@ -51,15 +57,17 @@ const measures = (data) => {
 
 // 注册回调
 const onFocus = () => {
-  focusFrameController.focusVisible(true);
   focused.value = true;
   folded.value = true;
+  if (props.data.expandWhenFocus) {
+    expand();
+  }
 };
 
 const foldSubTab = () => {
   if (!folded.value) {
     if (width.value == props.data.childTab.width) {
-      // showFocus.value = false;
+      changeToken.value++;
       width.value = props.data.width;
       let index =
         widgetRef.value?.getCurrentFocusIndex() ?? props.data.initFocus;
@@ -86,13 +94,16 @@ const foldSubTab = () => {
         },
         {
           duration: DURATION,
-          onEnd: () => {
-            focusFrameController.focusVisible(true);
-            folded.value = true;
-            console.log("fold anim end.");
+          anchor: getAnchor(widgetRef.value.getCurrentFocusIndex()),
+          onEnd: (cancel) => {
+            if (!(focused.value && props.data.expandWhenFocus)) {
+              folded.value = true;
+            }
+            console.log("fold anim end.", cancel);
           },
         }
       );
+      focusFrameController.onItemSizeChange(false);
     }
     focusHub.returnFocusToParent();
   }
@@ -166,11 +177,16 @@ const getAnchor = (index) => {
   return anchor;
 };
 
-const onClick = () => {
+const expand = () => {
   if (folded.value) {
+    changeToken.value++;
+
     itemKeepScale.value = false;
     showFocus.value = true;
     widgetLeft.value = 0;
+    /**
+     * 动画未结束时, widgetLeft不为0, 此时又获焦那一帧同时设置的widgetLeft值未同步到div, slideToDiv获取的就不是展开后item的正确位置
+     */
     folded.value = false;
     width.value = props.data.childTab.width;
     //为了居中而计算锚点
@@ -195,8 +211,16 @@ const onClick = () => {
       }
     );
 
-    focusHub.setFocus(props.data.name);
-    focusFrameController.focusVisible(false);
+    focusHub.setFocus(props.data.name + changeToken.value);
+    focusFrameController.onItemSizeChange(true);
+
+    // focusFrameController.focusVisible(false);
+  }
+};
+
+const onClick = () => {
+  if (!props.data.expandWhenFocus) {
+    expand();
   }
 };
 props.onAction.register("onFocus", onFocus);
@@ -205,8 +229,10 @@ props.onAction.register("onClick", onClick);
 
 const onKeyDown = (ev) => {
   if (ev.keyCode === 10000 || ev.keyCode === 8 || ev.keyCode === 27) {
-    itemKeepScale.value = true;
-    foldSubTab();
+    if (!props.data.expandWhenFocus) {
+      itemKeepScale.value = true;
+      foldSubTab();
+    }
     return true;
   }
   return false;
@@ -251,8 +277,9 @@ const onKeyDown = (ev) => {
       }"
     >
       <list-widget
+        :key="changeToken"
         ref="widgetRef"
-        :name="data.name"
+        :name="data.name + changeToken"
         :width="data.childTab.width"
         :height="data.height"
         :provideData="provideData"

package/FreeMoveChildAttract/App.vue

@@ -0,0 +1,105 @@
+<template>
+  <jsv-focus-block autoFocus :onKeyDown="procKeyDown">
+    <div class="bgStyle">
+      <jsv-free-move-div
+        ref="mActRef1"
+        :style="{
+          top: 200,
+          left: 400,
+          width: 500,
+          height: 350,
+          backgroundColor: '#00F00F',
+        }"
+      >
+        <jsv-free-move-div
+          ref="mActRef2"
+          :style="{
+            width: 50,
+            height: 50,
+            backgroundColor: '#FF0000',
+          }"
+        />
+      </jsv-free-move-div>
+    </div>
+  </jsv-focus-block>
+</template>
+
+<script setup>
+import { JsvFreeMoveDiv, ForgeConst } from "jsview";
+import { shallowRef, onMounted, watch } from "vue";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+const procKeyDown = (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 mActRef1 = shallowRef(null);
+const mActRef2 = shallowRef(null);
+let mActControl1 = null;
+let mActControl2 = null;
+
+onMounted(() => {
+  mActControl1 = mActRef1.value.control;
+  mActControl2 = mActRef2.value.control;
+
+  mActControl1
+    .getBindedView()
+    .DragEnables?.(ForgeConst.DragFlags.TOUCH_RECV_FIRST_START);
+  mActControl2
+    .getBindedView()
+    .DragEnables?.(
+      ForgeConst.DragFlags.TOUCH_RECV_MOVE_BIT |
+        ForgeConst.DragFlags.TOUCH_RECV_FIRST_START |
+        ForgeConst.DragFlags.TOUCH_RECV_LAST_END
+    );
+
+  mActControl1.run([mActControl1.state().setTouchAttractChild(mActControl2)]);
+
+  console.log(`OnMoved starting onMovement`);
+  mActControl2.run([
+    mActControl2
+      .condition(0, true) // 通过第二个参数设置回调为多次触发
+      .onMovement(12) // 设置x或y移动超过12时才触发回调，以此减少回调的频次，规避js的性能影响
+      .then([
+        (pointInfo) => {
+          console.log(`OnMoved x=${pointInfo.xPos} y=${pointInfo.yPos}`);
+        },
+      ]),
+  ]);
+  window.DebugControl = mActControl1;
+});
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.bgStyle {
+  width: 1280;
+  height: 720;
+  background-color: #007788;
+}
+.box {
+  width: 150;
+  height: 150;
+  font-size: 30;
+  color: #000000;
+  background-color: #3fb524;
+}
+.tip {
+  width: 300;
+  height: 30;
+  line-height: 28;
+  font-size: 28;
+  left: 980;
+  top: 680;
+  text-align: center;
+  font-weight: bold;
+  color: #ffffff;
+}
+</style>

package/FreeMoveLink/App.vue

@@ -0,0 +1,55 @@
+<script setup>
+import { ref, onMounted } from "vue";
+import { FreeMoveFunc, ForgeConst } from "jsview";
+
+const div1 = ref();
+const div2 = ref();
+
+const control1 = new FreeMoveFunc.ActControlDebug();
+const control2 = new FreeMoveFunc.ActControlDebug();
+
+onMounted(() => {
+  const linkNexusId = FreeMoveFunc.newNexus();
+
+  let div1View = div1.value.jsvGetProxyView();
+  control1.bindForgeView(div1View, true);
+  div1View.DragEnables?.(ForgeConst.DragFlags.TOUCH_RECV_MOVE_BIT); // 只激活drag
+
+  control1.run([
+    control1.state().startMovementSync(linkNexusId, -200, -200, 200, 200, 0b11),
+  ]);
+
+  let div2View = div2.value.jsvGetProxyView();
+  control2.bindForgeView(div2View, true);
+  div2View.DragEnables?.(ForgeConst.DragFlags.TOUCH_RECV_MOVE_BIT); // 只激活drag
+  control2.run([
+    control2
+      .condition()
+      .movementSync(linkNexusId)
+      .then([control2.action().ackMovementSync(-100, -100, 100, 100, 0b11, 1)]),
+  ]);
+});
+</script>
+
+<template>
+  <div
+    ref="div1"
+    :style="{
+      left: 50,
+      top: 50,
+      width: 300,
+      height: 300,
+      backgroundColor: '#FF0000',
+    }"
+  ></div>
+  <div
+    ref="div2"
+    :style="{
+      left: 550,
+      top: 50,
+      width: 100,
+      height: 100,
+      backgroundColor: '#00FF00',
+    }"
+  ></div>
+</template>

package/FreeMoveResize/App.vue

@@ -0,0 +1,102 @@
+<template>
+  <jsv-focus-block autoFocus :onKeyDown="procKeyDown">
+    <div class="bgStyle">
+      <jsv-free-move-div
+        ref="mActRef1"
+        :style="{
+          top: 100,
+          left: 200,
+          width: 500,
+          height: 350,
+          backgroundColor: '#00F00F',
+          overflow: 'hidden',
+        }"
+        :sizeMode="true"
+      >
+        <div
+          :style="{
+            width: 400,
+            height: 400,
+            fontSize: 50,
+            backgroundColor: '#FF0000',
+          }"
+        >
+          {{ "测试文字" }}
+        </div>
+      </jsv-free-move-div>
+    </div>
+  </jsv-focus-block>
+</template>
+
+<script setup>
+import { JsvFreeMoveDiv, FreeMoveDef } from "jsview";
+import { shallowRef, onMounted, watch } from "vue";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+const procKeyDown = (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 mActRef1 = shallowRef(null);
+let mActControl1 = null;
+
+onMounted(() => {
+  mActControl1 = mActRef1.value.control;
+  window.DebugControl = mActControl1;
+});
+
+// 预设动画控制
+function MoveToRightBottom() {
+  mActControl1.run([
+    mActControl1.state().clearAllConditions(),
+    mActControl1.action().moveTo(600, 500, undefined, 3),
+  ]);
+}
+
+function MoveToLeftTop() {
+  mActControl1.run([
+    mActControl1.state().clearAllConditions(),
+    mActControl1.action().moveTo(100, 200, 3, undefined),
+  ]);
+}
+
+// 暴露给devtool去使用
+window.DebugFreeMove = {
+  MoveToRightBottom,
+  MoveToLeftTop,
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.bgStyle {
+  width: 1280;
+  height: 720;
+  background-color: #007788;
+}
+.box {
+  width: 150;
+  height: 150;
+  font-size: 30;
+  color: #000000;
+  background-color: #3fb524;
+}
+.tip {
+  width: 300;
+  height: 30;
+  line-height: 28;
+  font-size: 28;
+  left: 980;
+  top: 680;
+  text-align: center;
+  font-weight: bold;
+  color: #ffffff;
+}
+</style>

package/LongText/App.vue

@@ -62,7 +62,7 @@ onMounted(() => {
           backgroundColor: 'rgba(27,38,151,0.8)',
         }"
       >
-        可展示篇幅超过一屏的文字
+        可展示篇幅超过一屏的文字(支持触控拖拽)
       </div>
       <div :style="{ left: 140, top: 100 }">
         <LongTextScroll
@@ -89,5 +89,3 @@ onMounted(() => {
     </div>
   </jsv-focus-block>
 </template>
-
-