@shijiu/jsview-vue-samples 2.2.35 → 2.2.128

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>
-
-

package/LongText/LongTextScroll.vue

@@ -1,7 +1,13 @@
 <script setup>
 import Scroll from "./Scroll.vue";
-import { ref, onMounted } from "vue";
-import { useFocusHub, JsvFlexDiv } from "jsview";
+import { ref, onMounted, shallowRef } from "vue";
+import {
+  useFocusHub,
+  JsvFlexDiv,
+  VERTICAL,
+  JsvScrollBox,
+  ScrollStyle,
+} from "jsview";
 
 const props = defineProps({
   step: Number,
@@ -16,11 +22,14 @@ const focusHub = useFocusHub();
 const rootRef = ref(null);
 const element = ref(null);
 const scrollY = ref(0);
-const textY = ref(0);
 
+let textY = 0;
+let rScrollHeight = shallowRef(0);
+let rJsvScrollBox = shallowRef(null);
 let textTotalHeight = 0;
 const onTextSizeReady = (width, height) => {
   textTotalHeight = height;
+  rScrollHeight.value = height;
   console.log(`textSize ready width=${width} height=${height}`);
 };
 
@@ -30,32 +39,25 @@ const onAction = {
     // let keyUsed = true;
     if (valid) {
       // 测试用比对代码，正式场景不需要
-      if (textTotalHeight != element.value.clientHeight) {
-        console.error("Error: height miss match");
-      }
+      // if (textTotalHeight != element.value.clientHeight) {
+      //   console.error("Error: height miss match");
+      // }
 
       let text_y;
       switch (ev.keyCode) {
         case 38:
-          if (textY.value !== 0) {
-            text_y =
-              textY.value + props.step >= 0 ? 0 : textY.value + props.step;
-            (textY.value = text_y),
-              (scrollY.value =
-                (-text_y / (textTotalHeight - props.style.height)) *
-                (props.scrollStyle.height - props.scrollBlockStyle.height));
+          if (textY !== 0) {
+            text_y = textY + props.step >= 0 ? 0 : textY + props.step;
+            SlideToYByKey(text_y);
           }
           break;
         case 40:
-          if (textY.value !== props.style.height - textTotalHeight) {
+          if (textY !== props.style.height - textTotalHeight) {
             text_y =
-              textY.value - props.step <= props.style.height - textTotalHeight
+              textY - props.step <= props.style.height - textTotalHeight
                 ? props.style.height - textTotalHeight
-                : textY.value - props.step;
-            (textY.value = text_y),
-              (scrollY.value =
-                (-text_y / (textTotalHeight - props.style.height)) *
-                (props.scrollStyle.height - props.scrollBlockStyle.height));
+                : textY - props.step;
+            SlideToYByKey(text_y);
           } else {
             focusHub.setFocus("button");
           }
@@ -71,25 +73,66 @@ const onAction = {
   },
 };
 
+function SlideToYByKey(newY) {
+  // 使用新的Y来调整ScrollBox的显示位置
+  rJsvScrollBox.value.updatePercent(
+    -newY / (textTotalHeight - props.style.height)
+  );
+
+  // 记录新的Y, 并更新右边的进度条
+  UpdateRightBar(newY);
+}
+
+function UpdateRightBar(newY) {
+  textY = newY;
+
+  scrollY.value =
+    (-newY / (textTotalHeight - props.style.height)) *
+    (props.scrollStyle.height - props.scrollBlockStyle.height);
+}
+
 onMounted(() => {
   rootRef.value.requestFocus();
+  rJsvScrollBox.value.setSensor((percent, x, y) => {
+    let newY = Math.floor(y);
+    console.log(
+      `onProgress dragged percent=${percent} \
+x=${Math.floor(x)} \
+y=${newY}`
+    );
+    UpdateRightBar(newY);
+  }, 15);
 });
 </script>
 
 <template>
   <jsv-focus-block ref="rootRef" name="longTextScroll" :onAction="onAction">
     <div :style="{ overflow: 'hidden', ...style }">
-      <jsv-flex-div
-        :style="{ top: textY, width: style.width }"
-        :onSized="onTextSizeReady"
+      <jsv-scroll-box
+        ref="rJsvScrollBox"
+        :style="{
+          width: style.width,
+          height: style.height,
+        }"
+        :direction="VERTICAL"
+        :mode="ScrollStyle.DrawerMode"
+        :enableFling="true"
+        :sliderSize="{
+          height: rScrollHeight == 0 ? style.height : rScrollHeight,
+        }"
       >
-        <div
-          ref="element"
-          data-jsv-perf-loadtex="auto"
-          :style="{ width: style.width, ...textStyle }"
-        >
-          {{
-            "疾风引擎JsView用户服务协议及隐私权保护政策\n\
+        <template #SliderBox>
+          <jsv-flex-div
+            :style="{ width: style.width }"
+            :onSized="onTextSizeReady"
+          >
+            <div
+              ref="element"
+              data-jsv-perf-loadtex="auto"
+              :style="{ width: style.width, ...textStyle }"
+            >
+              {{
+                "疾风引擎JsView用户服务协议及隐私权保护政策\n\
 \n\
 \n\
 特别提示：\n\
@@ -186,9 +229,11 @@ onMounted(() => {
 本协议条款的效力和解释均适用中华人民共和国的法律，如有条款与中华人民共和国法律相抵触，则该部分条款应按法律规定重新解释，部分条款的无效或重新解释不影响其他条款的法律效力。\n\
 本协议以及疾风引擎JsView制度将统一构成您与运营方之间的完整协议，两者约定不一致的，以文本制定时间较晚者为准。\n\
 本协议签订地为中华人民共和国上海市，若您在使用疾风引擎JsView过程中产生任何纠纷或争议，您同意将该纠纷或者争议提交本协议签订地人民法院管辖。本协议条款无论何种原因部分无效或不可执行，其他条款仍应继续有效，对双方具有约束力。"
-          }}
-        </div>
-      </jsv-flex-div>
+              }}
+            </div>
+          </jsv-flex-div>
+        </template>
+      </jsv-scroll-box>
     </div>
     <Scroll
       :top="scrollY"