@shijiu/jsview-vue-samples 2.2.35 → 2.2.201

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/ImpactStop/App.vue

@@ -196,16 +196,16 @@ const procKeyDown = (ev) => {
 
       let interactNexus = FreeMoveFunc.newNexus();
 
-      actorControl.run([
-        actorControl.state().clearAllConditions(),
-        actorControl
+      actorControl.run((cmds) => [
+        cmds.state().clearAllConditions(),
+        cmds
           .condition()
           .onNextTick(1)
           .then([
             () => {
               bodyState.value = 1;
             },
-            actorControl
+            cmds
               .condition()
               .onHitBlock(1)
               .then([
@@ -213,8 +213,8 @@ const procKeyDown = (ev) => {
                   console.log("LudlDebug on hit 1");
                   bodyState.value = 0;
                 },
-                actorControl.state().revertWithHitBlock(),
-                actorControl.action().stopMoving(),
+                cmds.state().revertWithHitBlock(),
+                cmds.action().stopMoving(),
                 (a) => {
                   jumping = false;
 
@@ -239,11 +239,11 @@ const procKeyDown = (ev) => {
       ]);
 
       if (direction.value) {
-        actorControl.run([
-          actorControl
+        actorControl.run((cmds) => [
+          cmds
             .action(0, 0, interactNexus)
             .setSpdAndAccel(7.9, -24, undefined, 1, null, () => {}),
-          actorControl
+          cmds
             .condition()
             .onNexusEvent(interactNexus, actEvents.SpeedRevertY)
             .then([
@@ -253,11 +253,11 @@ const procKeyDown = (ev) => {
             ]),
         ]);
       } else {
-        actorControl.run([
-          actorControl
+        actorControl.run((cmds) => [
+          cmds
             .action(0, 0, interactNexus)
             .setSpdAndAccel(-7.9, -24, undefined, 1, null, () => {}),
-          actorControl
+          cmds
             .condition()
             .onNexusEvent(interactNexus, actEvents.SpeedRevertY)
             .then([
@@ -271,61 +271,61 @@ const procKeyDown = (ev) => {
       break;
     case 37:
       if (board == "left") {
-        actorControl.run([actorControl.action().setSpeed(-5, 0)]);
-        actorControl.run([
-          actorControl.state().clearAllConditions(),
-          actorControl
+        actorControl.run((cmds) => [cmds.action().setSpeed(-5, 0)]);
+        actorControl.run((cmds) => [
+          cmds.state().clearAllConditions(),
+          cmds
             .condition()
             .reachPosition(0, undefined)
-            .then([actorControl.action().stopMoving()]),
+            .then([cmds.action().stopMoving()]),
         ]);
       } else if (board == "right") {
-        actorControl.run([actorControl.action().setSpeed(-5, 0)]);
-        actorControl.run([
-          actorControl.state().clearAllConditions(),
-          actorControl
+        actorControl.run((cmds) => [cmds.action().setSpeed(-5, 0)]);
+        actorControl.run((cmds) => [
+          cmds.state().clearAllConditions(),
+          cmds
             .condition()
             .reachPosition(840 - 40, undefined)
-            .then([actorControl.action().stopMoving()]),
+            .then([cmds.action().stopMoving()]),
         ]);
       } else if (board == "middle") {
-        actorControl.run([actorControl.action().setSpeed(-5, 0)]);
-        actorControl.run([
-          actorControl.state().clearAllConditions(),
-          actorControl
+        actorControl.run((cmds) => [cmds.action().setSpeed(-5, 0)]);
+        actorControl.run((cmds) => [
+          cmds.state().clearAllConditions(),
+          cmds
             .condition()
             .reachPosition(540 - 40, undefined)
-            .then([actorControl.action().stopMoving()]),
+            .then([cmds.action().stopMoving()]),
         ]);
       }
       break;
     case 39:
       if (board == "left") {
-        actorControl.run([actorControl.action().setSpeed(5, 0)]);
-        actorControl.run([
-          actorControl.state().clearAllConditions(),
-          actorControl
+        actorControl.run((cmds) => [cmds.action().setSpeed(5, 0)]);
+        actorControl.run((cmds) => [
+          cmds.state().clearAllConditions(),
+          cmds
             .condition()
             .reachPosition(410 - 40, undefined)
-            .then([actorControl.action().stopMoving()]),
+            .then([cmds.action().stopMoving()]),
         ]);
       } else if (board == "right") {
-        actorControl.run([actorControl.action().setSpeed(5, 0)]);
-        actorControl.run([
-          actorControl.state().clearAllConditions(),
-          actorControl
+        actorControl.run((cmds) => [cmds.action().setSpeed(5, 0)]);
+        actorControl.run((cmds) => [
+          cmds.state().clearAllConditions(),
+          cmds
             .condition()
             .reachPosition(1240 - 30 - 40, undefined)
-            .then([actorControl.action().stopMoving()]),
+            .then([cmds.action().stopMoving()]),
         ]);
       } else if (board == "middle") {
-        actorControl.run([actorControl.action().setSpeed(5, 0)]);
-        actorControl.run([
-          actorControl.state().clearAllConditions(),
-          actorControl
+        actorControl.run((cmds) => [cmds.action().setSpeed(5, 0)]);
+        actorControl.run((cmds) => [
+          cmds.state().clearAllConditions(),
+          cmds
             .condition()
             .reachPosition(740 - 40 - 30, undefined)
-            .then([actorControl.action().stopMoving()]),
+            .then([cmds.action().stopMoving()]),
         ]);
       }
       break;
@@ -338,10 +338,10 @@ const procKeyUp = (ev) => {
   }
   switch (ev.keyCode) {
     case 37:
-      actorControl.run([actorControl.action().stopMoving()]);
+      actorControl.run((cmds) => [cmds.action().stopMoving()]);
       break;
     case 39:
-      actorControl.run([actorControl.action().stopMoving()]);
+      actorControl.run((cmds) => [cmds.action().stopMoving()]);
       break;
 
     default:
@@ -357,7 +357,7 @@ const onActionObj = {
 const reset = () => {
   board = "left";
   direction.value = 1;
-  actorControl.run([actorControl.action().teleportTo(0, 0)]);
+  actorControl.run((cmds) => [cmds.action().teleportTo(0, 0)]);
 };
 onMounted(() => {
   actorControl = actorRef.value.control;

package/LongImage/App.vue

@@ -32,7 +32,6 @@ const onKeyDown = (ev) => {
 };
 </script>
 
-
 <template>
   <jsv-focus-block
     autoFocus
@@ -53,7 +52,7 @@ const onKeyDown = (ev) => {
         backgroundColor: 'rgba(27,38,151,0.8)',
       }"
     >
-      可加载长或宽超过2048px的图片
+      可加载长或宽超过maxBuffer(1080p:4096px)的图片
     </div>
     <div :style="{ left: 100, top: 100 }">
       <LongImageScroll

package/LongText/App.vue

@@ -62,20 +62,20 @@ onMounted(() => {
           backgroundColor: 'rgba(27,38,151,0.8)',
         }"
       >
-        可展示篇幅超过一屏的文字
+        可展示篇幅超过一屏的文字(支持触控拖拽)
       </div>
       <div :style="{ left: 140, top: 100 }">
         <LongTextScroll
           :style="{ width: 1000, height: 500, backgroundColor: '#EEEEEE' }"
           :textStyle="{ color: '#000000', fontSize: 20 }"
           :scrollBlockStyle="{
-            width: 10,
+            width: 15,
             height: 30,
             backgroundColor: '#555555',
           }"
           :scrollStyle="{
             left: 1005,
-            width: 10,
+            width: 15,
             height: 500,
             backgroundColor: '#DDDDDD',
           }"
@@ -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,
+  ScrollBoxStyle,
+} 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,70 @@ const onAction = {
   },
 };
 
+function slideToYByKey(newY) {
+  // 使用新的Y来调整ScrollBox的显示位置
+  rJsvScrollBox.value.updatePercent(
+    -newY / (textTotalHeight - props.style.height)
+  );
+
+  recordTextY(newY);
+
+  // 不再直接更新右边进度条的进度
+  // 将由 JsvScrollBox 的syncWith机制来同步
+  // 注意: 目前这个机制在PC上没有模拟，
+  // 如果PC上也需要看到同步效果，则可通过 window.JsView 是否存在来识别非盒子情况，此时主动改变bar的top
+}
+
+function recordTextY(newY) {
+  // 记录text Y，为为下次按键的基准坐标
+  textY = newY;
+}
+
 onMounted(() => {
   rootRef.value.requestFocus();
+
+  // 检测滚动触控触发的移动，
+  // 当 updatePercent 调用后如果移动距离大于阈值也会回调
+  rJsvScrollBox.value.setSensor((percent, x, y) => {
+    let newY = Math.floor(y);
+    console.log(
+      `onProgress dragged percent=${percent} x=${Math.floor(x)} y=${newY}`
+    );
+    recordTextY(newY);
+  }, 15 /* 每动15px才接收一次通知，减少js被调用的频率，从而减小对性能的影响 */);
 });
 </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"
+        linkName="ScrollBoxTextArea"
+        syncWith="ScrollBarTextArea"
+        :style="{
+          width: style.width,
+          height: style.height,
+        }"
+        :direction="VERTICAL"
+        :mode="ScrollBoxStyle.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,14 +233,12 @@ onMounted(() => {
 本协议条款的效力和解释均适用中华人民共和国的法律，如有条款与中华人民共和国法律相抵触，则该部分条款应按法律规定重新解释，部分条款的无效或重新解释不影响其他条款的法律效力。\n\
 本协议以及疾风引擎JsView制度将统一构成您与运营方之间的完整协议，两者约定不一致的，以文本制定时间较晚者为准。\n\
 本协议签订地为中华人民共和国上海市，若您在使用疾风引擎JsView过程中产生任何纠纷或争议，您同意将该纠纷或者争议提交本协议签订地人民法院管辖。本协议条款无论何种原因部分无效或不可执行，其他条款仍应继续有效，对双方具有约束力。"
-          }}
-        </div>
-      </jsv-flex-div>
+              }}
+            </div>
+          </jsv-flex-div>
+        </template>
+      </jsv-scroll-box>
     </div>
-    <Scroll
-      :top="scrollY"
-      :scrollStyle="scrollStyle"
-      :scrollBlockStyle="scrollBlockStyle"
-    />
+    <Scroll :scrollStyle="scrollStyle" :scrollBlockStyle="scrollBlockStyle" />
   </jsv-focus-block>
 </template>

package/LongText/Scroll.vue

@@ -1,14 +1,33 @@
-<script setup>
-defineProps({
+<script setup lang="ts">
+import { VERTICAL, JsvScrollBox, SeamlessSlide, ScrollBoxStyle } from "jsview";
+
+let rProps = defineProps({
   scrollStyle: Object,
-  top: Number,
   scrollBlockStyle: Object,
 });
+
+let { left: cScrollLeft, ...cScrollSubStyle } = rProps.scrollStyle as any;
 </script>
 <template>
-  <div :style="{ ...scrollStyle }">
-    <div :style="{ top: top }">
-      <div :style="{ ...scrollBlockStyle }"></div>
-    </div>
-  </div>
-</template>
+  <jsv-scroll-box
+    linkName="ScrollBarTextArea"
+    syncWith="ScrollBoxTextArea"
+    :style="{
+      left: cScrollLeft,
+      width: cScrollSubStyle.width,
+      height: cScrollSubStyle.height,
+    }"
+    :direction="VERTICAL"
+    :mode="ScrollBoxStyle.PinMode"
+    :sliderSize="{
+      height: (rProps.scrollBlockStyle as any).height,
+    }"
+  >
+    <template #FixedBox>
+      <div :style="{ ...cScrollSubStyle }" />
+    </template>
+    <template #SliderBox>
+      <div :style="{ ...rProps.scrollBlockStyle }" />
+    </template>
+  </jsv-scroll-box>
+</template>

package/LongTextLatex/App.vue

@@ -0,0 +1,93 @@
+<!--
+ * 【界面概述】
+ * 协议书的示例
+ *
+ * 【技巧说明】
+ * Q: 如何长文字div的高度自适应？
+ * A: 描画长文字的div的高度不设置即可
+ *    并通过element.clientHeight获取渲染后的自动高度，以决定滚动轴的总高度
+ *
+ * Q: 长段文字如何换行？
+ * A: 若文字内容中需要折行，则需要把要显示内容放入字符串中，并加入'\n'来达到换行效果，例如：
+ *          <div>{"第一行
+ *          第二行"}</div>
+ *          =======需要改成=======
+ *          <div>{"第一行\n\
+ *          第二行"}</div>
+ *
+ * Q: 文字首行缩进如何做？
+ * A: 目前系统只支持通过空格进行首行缩进，行首加入期望的空格数量即可达到缩进，因为盒子字体库和PC不尽相同，
+ *    所以务必在盒子上实际测试缩进效果。
+ -->
+
+<script setup>
+import LongTextScroll from "./LongTextScroll.vue";
+import Button from "./Button.vue";
+import { jJsvRuntimeBridge } from "jsview";
+import { onMounted, ref } from "vue";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+
+const onKeyDown = (ev) => {
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router.go(-1); // 有router时，是从DemoHomepage进入，回退
+  }
+  return true;
+};
+
+onMounted(() => {
+  jJsvRuntimeBridge.notifyPageLoaded();
+});
+</script>
+
+<template>
+  <jsv-focus-block
+    autoFocus
+    :onAction="{
+      onKeyDown: onKeyDown,
+    }"
+  >
+    <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)',
+        }"
+      >
+        可展示篇幅超过一屏的文字
+      </div>
+      <div :style="{ left: 140, top: 100 }">
+        <LongTextScroll
+          :style="{ width: 1000, height: 500, backgroundColor: '#EEEEEE' }"
+          :textStyle="{ color: '#000000', fontSize: 20 }"
+          :scrollBlockStyle="{
+            width: 10,
+            height: 30,
+            backgroundColor: '#555555',
+          }"
+          :scrollStyle="{
+            left: 1005,
+            width: 10,
+            height: 500,
+            backgroundColor: '#DDDDDD',
+          }"
+          :step="20"
+        >
+        </LongTextScroll>
+        <div :style="{ left: 400, top: 550 }">
+          <Button />
+        </div>
+      </div>
+    </div>
+  </jsv-focus-block>
+</template>
+
+

package/LongTextLatex/Button.vue

@@ -0,0 +1,50 @@
+<script setup>
+import { HORIZONTAL, MetroWidget, EdgeDirection, useFocusHub } from "jsview";
+import ButtonItem from "./ButtonItem.vue";
+
+const focusHub = useFocusHub();
+const data = [
+  {
+    width: 100,
+    height: 50,
+    marginRight: 100,
+    content: "同意",
+  },
+  {
+    width: 100,
+    height: 50,
+    content: "取消",
+  },
+];
+
+const measures = (item) => {
+  return item;
+};
+
+const onEdge = (edgeInfo) => {
+  if (edgeInfo.direction == EdgeDirection.top) {
+    focusHub.setFocus("longTextScroll");
+  }
+};
+</script>
+
+<template>
+  <metro-widget
+    name="button"
+    :width="500"
+    :height="50"
+    :data="data"
+    :direction="HORIZONTAL"
+    :measures="measures"
+    :onEdge="onEdge"
+  >
+    <template #renderItem="{ data, query, onEdge, onAction }">
+      <button-item
+        :data="data"
+        :query="query"
+        :onEdge="onEdge"
+        :onAction="onAction"
+      />
+    </template>
+  </metro-widget>
+</template>