@shijiu/jsview-vue-samples 2.2.128 → 2.2.373

package/FreeMove/App.vue

@@ -53,46 +53,46 @@ const procKeyDown = (ev) => {
 };
 // ******* 直接跳转位置 *******
 window.DebugResetPos = (x, y) => {
-  actorControl.run([
-    actorControl.state().clearAllConditions(),
-    actorControl.action().teleportTo(x, y),
+  actorControl.run((cmds) => [
+    cmds.state().clearAllConditions(),
+    cmds.action().teleportTo(x, y),
   ]);
 
-  actorControl2.run([
-    actorControl2.state().clearAllConditions(),
-    actorControl2.action().teleportTo(x, y + 50),
+  actorControl2.run((cmds) => [
+    cmds.state().clearAllConditions(),
+    cmds.action().teleportTo(x, y + 50),
   ]);
 };
 
 window.DebugResetOffsetPos = (x, y) => {
-  actorControl.run([
-    actorControl.state().clearAllConditions(),
-    actorControl.action().teleportOffset(x, y),
+  actorControl.run((cmds) => [
+    cmds.state().clearAllConditions(),
+    cmds.action().teleportOffset(x, y),
   ]);
 
-  actorControl2.run([
-    actorControl2.state().clearAllConditions(),
-    actorControl2.action().teleportOffset(x, y),
+  actorControl2.run((cmds) => [
+    cmds.state().clearAllConditions(),
+    cmds.action().teleportOffset(x, y),
   ]);
 };
 
 // ******* 有参照物的刹车测试，仅X轴移动 *******
 window.DebugBrakeToPosX = () => {
   // 参照物
-  actorControl.run([
-    actorControl.state().clearAllConditions(),
-    actorControl.action().teleportTo(400, 50),
+  actorControl.run((cmds) => [
+    cmds.state().clearAllConditions(),
+    cmds.action().teleportTo(400, 50),
   ]);
   // 运动体
-  actorControl2.run([
-    actorControl2.state().clearAllConditions(),
-    actorControl2.state().setStartPos(0, 200),
-    actorControl2.action().moveTo(300, undefined, 10, undefined),
-    actorControl2
+  actorControl2.run((cmds) => [
+    cmds.state().clearAllConditions(),
+    cmds.state().setStartPos(0, 200),
+    cmds.action().moveTo(300, undefined, 10, undefined),
+    cmds
       .condition()
       .reachPosition(200, undefined)
       .then([
-        actorControl2.action(1).brakeToPosition(
+        cmds.action(1).brakeToPosition(
           400,
           undefined,
           (a, b, c, d) => {
@@ -111,20 +111,20 @@ window.DebugBrakeToPosX = () => {
 // ******* 有参照物的刹车测试，XY都移动 *******
 window.DebugBrakeToPosXY = () => {
   // 参照物
-  actorControl.run([
-    actorControl.state().clearAllConditions(),
-    actorControl.action().teleportTo(400, 50),
+  actorControl.run((cmds) => [
+    cmds.state().clearAllConditions(),
+    cmds.action().teleportTo(400, 50),
   ]);
   // 运动体
-  actorControl2.run([
-    actorControl2.state().clearAllConditions(),
-    actorControl2.state().setStartPos(800, 400),
-    actorControl2.action().moveTo(100, 50, 10, undefined),
-    actorControl2
+  actorControl2.run((cmds) => [
+    cmds.state().clearAllConditions(),
+    cmds.state().setStartPos(800, 400),
+    cmds.action().moveTo(100, 50, 10, undefined),
+    cmds
       .condition()
       .reachPosition(400, undefined)
       .then([
-        actorControl2.action(3).brakeToPosition(
+        cmds.action(3).brakeToPosition(
           100,
           50,
           (a, b, c, d) => {
@@ -142,20 +142,20 @@ window.DebugBrakeToPosXY = () => {
 
 // ******* 定向移动 *******
 window.DebugMoveTarget = () => {
-  actorControl2.run([
-    actorControl2.state().clearAllConditions(),
-    actorControl2.state().setStartPos(0, 400),
-    actorControl2.action().moveTo(300, undefined, 10, undefined),
+  actorControl2.run((cmds) => [
+    cmds.state().clearAllConditions(),
+    cmds.state().setStartPos(0, 400),
+    cmds.action().moveTo(300, undefined, 10, undefined),
   ]);
 };
 
 // ******* 定向移动 + 回调监听 和 共享结束监听(OnNexusEvent) *******
 window.DebugTestMove = (x, y) => {
   let actRef = {};
-  actorControl.run([
-    actorControl.state().clearAllConditions(),
-    actorControl.state().setStartPos(160, 150),
-    actorControl.action(0, 0, actRef).moveTo(x, y, 2, 2, (a, b, c, d) => {
+  actorControl.run((cmds) => [
+    cmds.state().clearAllConditions(),
+    cmds.state().setStartPos(160, 150),
+    cmds.action(0, 0, actRef).moveTo(x, y, 2, 2, (a, b, c, d) => {
       console.log(
         "LudlDebugCB DebugTestMove enter " +
           " a=" +
@@ -168,7 +168,7 @@ window.DebugTestMove = (x, y) => {
           d
       );
     }),
-    actorControl
+    cmds
       .condition()
       .onNexusEvent(actRef, actEvents.ActFinish)
       .then([
@@ -180,39 +180,37 @@ window.DebugTestMove = (x, y) => {
 };
 
 window.DebugTestOffset = (control, startPos) => {
-  control.run([
-    actorControl.state().clearAllConditions(),
-    control.state().setStartPos(startPos, 150),
-    control.action().altSpeed(3, undefined, 0),
-    control
+  control.run((cmds) => [
+    cmds.state().clearAllConditions(),
+    cmds.state().setStartPos(startPos, 150),
+    cmds.action().altSpeed(3, undefined, 0),
+    cmds
       .condition(undefined, true)
       .reachPosition(460, undefined)
-      .then([actorControl.action(1, 0).teleportOffset(-300, undefined)]),
+      .then([cmds.action(1, 0).teleportOffset(-300, undefined)]),
   ]);
 };
 window.DebugTestThrowStart = () => {
   // 参照物
-  actorControl2.run([
-    actorControl2.state().clearAllConditions(),
-    actorControl2.action().teleportTo(400, 300),
+  actorControl2.run((cmds) => [
+    cmds.state().clearAllConditions(),
+    cmds.action().teleportTo(400, 300),
   ]);
 
-  actorControl.run([
-    actorControl.state().clearAllConditions(),
-    actorControl.state().setStartPos(100, 300),
-    actorControl.action().setSpeed(2, undefined),
-    actorControl
-      .action(1)
-      .setSpdAndAccel(undefined, -20, undefined, 0.3, null, () => {
-        console.log("on pole");
-        // 在接触地板时停止
-        actorControl.run([
-          actorControl
-            .condition(undefined, true)
-            .reachPosition(undefined, 300)
-            .then([actorControl.action(3, 3).stopMoving()]),
-        ]);
-      }),
+  actorControl.run((cmds) => [
+    cmds.state().clearAllConditions(),
+    cmds.state().setStartPos(100, 300),
+    cmds.action().setSpeed(2, undefined),
+    cmds.action(1).setSpdAndAccel(undefined, -20, undefined, 0.3, null, () => {
+      console.log("on pole");
+      // 在接触地板时停止
+      actorControl.run((cmds) => [
+        cmds
+          .condition(undefined, true)
+          .reachPosition(undefined, 300)
+          .then([cmds.action(3, 3).stopMoving()]),
+      ]);
+    }),
   ]);
 };
 

package/FreeMoveLink/App.vue

@@ -16,7 +16,7 @@ onMounted(() => {
   div1View.DragEnables?.(ForgeConst.DragFlags.TOUCH_RECV_MOVE_BIT); // 只激活drag
 
   control1.run([
-    control1.state().startMovementSync(linkNexusId, -200, -200, 200, 200, 0b11),
+    control1.state().startMovementSync(linkNexusId, -200, 200, -200, 200, 0b11),
   ]);
 
   let div2View = div2.value.jsvGetProxyView();
@@ -26,7 +26,7 @@ onMounted(() => {
     control2
       .condition()
       .movementSync(linkNexusId)
-      .then([control2.action().ackMovementSync(-100, -100, 100, 100, 0b11, 1)]),
+      .then([control2.action().ackMovementSync(-100, 100, -100, 100, 0b11, 1)]),
   ]);
 });
 </script>

package/FullScreenFlex/App.vue

@@ -0,0 +1,42 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-04-20 21:05:26
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-07-08 11:16:52
+ * @Description: file content
+-->
+<script setup>
+import { ref, reactive, onMounted } from "vue";
+import { useRouter } from "vue-router";
+import { jJsvRuntimeBridge } from "jsview";
+import TestFrame2 from "./TestFrame2.vue";
+
+const UseTestFrame = TestFrame2;
+
+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,
+    }"
+  >
+    <UseTestFrame />
+  </jsv-focus-block>
+</template>
+
+<style scoped></style>

package/FullScreenFlex/TestFrame2.vue

@@ -0,0 +1,107 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-04-20 21:05:26
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-07-08 11:16:52
+ * @Description: file content
+-->
+<script setup>
+import image1 from "./images/1.png";
+import { JsvScreenFlex } from "jsview";
+</script>
+
+<template>
+  <!-- 测试aligneContent未设置, 内容进行stretch的场景 -->
+  <JsvScreenFlex
+    :style="{
+      flexDirection: 'row',
+      justifyContent: 'flex-start',
+      alignItems: 'flex-start',
+    }"
+    background="https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/BackgroundLongmao.jpg"
+  >
+    <div
+      id="DivAnchor1"
+      :style="{
+        width: 50,
+        height: 50,
+        backgroundColor: '#00F000',
+      }"
+    />
+    <div
+      :style="{
+        width: 50,
+        height: 50,
+        backgroundColor: '#0000F0',
+      }"
+    />
+  </JsvScreenFlex>
+
+  <JsvScreenFlex
+    :style="{
+      flexDirection: 'row',
+      justifyContent: 'center',
+      alignItems: 'center',
+    }"
+  >
+    <div
+      id="DivAnchor2"
+      :style="{
+        width: 200,
+        height: 200,
+        backgroundColor: '#00F000',
+      }"
+    />
+    <div
+      :style="{
+        width: 200,
+        height: 200,
+        backgroundColor: '#0000F0',
+      }"
+    />
+  </JsvScreenFlex>
+
+  <JsvScreenFlex
+    :style="{
+      flexDirection: 'row',
+      justifyContent: 'flex-end',
+      alignItems: 'flex-end',
+    }"
+  >
+    <div
+      id="DivAnchor3"
+      :style="{
+        width: 300,
+        height: 300,
+      }"
+    >
+      <div
+        :style="{
+          top: 10,
+          left: 10,
+          width: 280,
+          height: 280,
+          backgroundColor: '#00F000',
+        }"
+      />
+    </div>
+    <div
+      :style="{
+        width: 300,
+        height: 300,
+      }"
+    >
+      <div
+        :style="{
+          top: 10,
+          left: 10,
+          width: 280,
+          height: 280,
+          backgroundColor: '#0000F0',
+        }"
+      />
+    </div>
+  </JsvScreenFlex>
+</template>
+
+<style scoped></style>

package/HashHistory/App.vue

@@ -21,6 +21,7 @@ let topRef = shallowRef(null);
 let routePage = shallowRef(null);
 let currentRouter;
 if (props.routePath) {
+  // 向主Router插入新路径定义
   const currentRoute = useRoute();
   currentRouter = useRouter();
 
@@ -38,6 +39,7 @@ if (props.routePath) {
 
   currentRouter.replace(props.routePath + redirectPath); // 自动跳转到redirectPath
 } else {
+  // 主Router就是自己
   currentRouter = router;
 }
 currentRouter.afterEach(() => {
@@ -63,7 +65,11 @@ onMounted(() => {
         <component
           :is="Component"
           ref="routePage"
-          class="router"
+          class="childComponentStyle"
+          :style="{
+            top:150,
+            overflow:'hidden'
+          }"
           @requestFocus="onRequestFocus"
         />
       </router-view>
@@ -96,11 +102,9 @@ onMounted(() => {
   background-color: #00f000;
 }
 
-.router {
+.childComponentStyle {
   left: 0;
-  top: 150;
   width: 1920;
   height: 930;
-  overflow: hidden;
 }
 </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;