@shijiu/jsview-vue 0.9.254 → 0.9.267

package/samples/ThrowMoveDemo/AccelerateDemo.vue

@@ -1,118 +1,118 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2021-10-20 18:27:25
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2021-10-21 14:51:53
- * @Description: file content
--->
-<script>
-import JsvActorMove, {
-  JsvActorMoveControl,
-} from "jsview/utils/JsViewVueWidget/JsvActorMove";
-export default {
-  components: {
-    JsvActorMove,
-  },
-  props: {
-    name: String,
-  },
-  data() {
-    return {
-      direction: 1,
-    };
-  },
-  computed: {
-    directionDetail() {
-      return this.direction > 0 ? "上" : "下";
-    },
-  },
-  setup() {
-    let throwControl = new JsvActorMoveControl(); // 抛物运动体控制器
-    let moveControl = new JsvActorMoveControl(); // 平移运动体控制器
-
-    return {
-      throwControl,
-      moveControl,
-    };
-  },
-  methods: {
-    onKeyDown(ev) {
-      if (ev.keyCode === 13) {
-        let preDirection = this.direction;
-        this.direction = -this.direction;
-        this.throwControl.throwAlongY(
-          0,
-          750 * preDirection,
-          {
-            type: "catch",
-            position: 200 * preDirection,
-            direction: preDirection,
-          },
-          (x, y) => {
-            console.log(`Throw end with x=${x} y=${y}`);
-          }
-        );
-        return true;
-      }
-      return false;
-    },
-  },
-};
-</script>
-
-<template>
-  <jsv-focus-block
-    ref="focusNode"
-    :name="name"
-    autoFocus
-    :onAction="{
-      onKeyDown: onKeyDown,
-    }"
-  >
-    <div
-      key="sample1"
-      class="detail-font"
-      :style="{ top: 150, left: 425, width: 430, height: 40 }"
-    >
-      {{ `向${directionDetail}加速` }}
-    </div>
-    <div
-      key="DirectText"
-      class="font"
-      :style="{ top: 250, left: 425, width: 430, height: 40 }"
-    >
-      {{ `当前方向:${directionDetail}` }}
-    </div>
-    <div :style="{ top: 590, left: 625 }">
-      <jsv-actor-move key="move" :control="moveControl">
-        <jsv-actor-move key="throw" :control="throwControl">
-          <div
-            :style="{ backgroundColor: '#FF0000', width: 30, height: 30 }"
-          ></div>
-        </jsv-actor-move>
-      </jsv-actor-move>
-    </div>
-  </jsv-focus-block>
-</template>
-
-<style scoped>
-.font {
-  font-size: 32px;
-  color: #73665c;
-  line-height: 40px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  text-align: center;
-}
-
-.detail-font {
-  font-size: 32px;
-  color: #f7f7eb;
-  line-height: 30px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  text-align: center;
-}
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2021-10-20 18:27:25
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2021-10-21 14:51:53
+ * @Description: file content
+-->
+<script>
+import JsvActorMove, {
+  JsvActorMoveControl,
+} from "jsview/utils/JsViewVueWidget/JsvActorMove";
+export default {
+  components: {
+    JsvActorMove,
+  },
+  props: {
+    name: String,
+  },
+  data() {
+    return {
+      direction: 1,
+    };
+  },
+  computed: {
+    directionDetail() {
+      return this.direction > 0 ? "上" : "下";
+    },
+  },
+  setup() {
+    let throwControl = new JsvActorMoveControl(); // 抛物运动体控制器
+    let moveControl = new JsvActorMoveControl(); // 平移运动体控制器
+
+    return {
+      throwControl,
+      moveControl,
+    };
+  },
+  methods: {
+    onKeyDown(ev) {
+      if (ev.keyCode === 13) {
+        let preDirection = this.direction;
+        this.direction = -this.direction;
+        this.throwControl.throwAlongY(
+          0,
+          750 * preDirection,
+          {
+            type: "catch",
+            position: 200 * preDirection,
+            direction: preDirection,
+          },
+          (x, y) => {
+            console.log(`Throw end with x=${x} y=${y}`);
+          }
+        );
+        return true;
+      }
+      return false;
+    },
+  },
+};
+</script>
+
+<template>
+  <jsv-focus-block
+    ref="focusNode"
+    :name="name"
+    autoFocus
+    :onAction="{
+      onKeyDown: onKeyDown,
+    }"
+  >
+    <div
+      key="sample1"
+      class="detail-font"
+      :style="{ top: 150, left: 425, width: 430, height: 40 }"
+    >
+      {{ `向${directionDetail}加速` }}
+    </div>
+    <div
+      key="DirectText"
+      class="font"
+      :style="{ top: 250, left: 425, width: 430, height: 40 }"
+    >
+      {{ `当前方向:${directionDetail}` }}
+    </div>
+    <div :style="{ top: 590, left: 625 }">
+      <jsv-actor-move key="move" :control="moveControl">
+        <jsv-actor-move key="throw" :control="throwControl">
+          <div
+            :style="{ backgroundColor: '#FF0000', width: 30, height: 30 }"
+          ></div>
+        </jsv-actor-move>
+      </jsv-actor-move>
+    </div>
+  </jsv-focus-block>
+</template>
+
+<style scoped>
+.font {
+  font-size: 32px;
+  color: #73665c;
+  line-height: 40px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-align: center;
+}
+
+.detail-font {
+  font-size: 32px;
+  color: #f7f7eb;
+  line-height: 30px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-align: center;
+}
 </style>

package/samples/ThrowMoveDemo/App.vue

@@ -1,114 +1,114 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2021-10-20 18:27:08
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2021-10-25 09:38:21
- * @Description: file content
--->
-<script>
-import LRParabolicDemo from "./LRParabolicDemo.vue";
-import UDParabolicDemo from "./UDParabolicDemo.vue";
-import TargetDemo from "./TargetDemo.vue";
-import AccelerateDemo from "./AccelerateDemo.vue";
-
-export default {
-  components: {
-    LRParabolicDemo,
-    UDParabolicDemo,
-    TargetDemo,
-    AccelerateDemo,
-  },
-  data() {
-    return {
-      demoIndex: 0,
-    };
-  },
-  methods: {
-    onKeyDown(ev) {
-      if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-        this.$router?.go(-1); // 有router时，是从DemoHomepage进入，回退
-        return true;
-      }
-      if (ev.keyCode === 37) {
-        this.demoIndex = this.demoIndex - 1 < 0 ? 3 : this.demoIndex - 1;
-      } else if (ev.keyCode === 39) {
-        this.demoIndex = this.demoIndex - +1 > 3 ? 0 : this.demoIndex + 1;
-      }
-      return true;
-    },
-  },
-};
-</script>
-
-<template>
-  <div
-    :style="{
-      width: 1920,
-      height: 1080,
-      backgroundColor: '#000000',
-    }"
-  >
-    <div
-      key="leftWall"
-      :style="{
-        top: 0,
-        left: 425,
-        width: 5,
-        height: 620,
-        backgroundColor: '#F0F000',
-      }"
-    />
-    <div
-      key="rightWall"
-      :style="{
-        top: 0,
-        left: 850,
-        width: 5,
-        height: 620,
-        backgroundColor: '#F0F000',
-      }"
-    />
-    <div
-      key="bottomWall"
-      :style="{
-        top: 620,
-        left: 425,
-        width: 430,
-        height: 5,
-        backgroundColor: '#F0F000',
-      }"
-    />
-    <div
-      key="GuidText1"
-      className="{CssStyles.FontStyle.getName()}"
-      :style="{ top: 625, left: (1280 - 430) / 2, width: 430, height: 40 }"
-    >
-      {`按OK键进行跳跃和转向`}
-    </div>
-    <div
-      key="GuidText2"
-      className="{CssStyles.FontStyle.getName()}"
-      :style="{ top: 625 + 40, left: (1280 - 430) / 2, width: 430, height: 40 }"
-    >
-      {`左右键切换不同模式的Demo`}
-    </div>
-    <jsv-focus-block
-      autoFocus
-      ref="focusNode"
-      :onAction="{
-        onKeyDown: onKeyDown,
-      }"
-    >
-      <LRParabolicDemo
-        v-if="demoIndex === 0"
-        name="/actorMove"
-      ></LRParabolicDemo>
-      <UDParabolicDemo v-if="demoIndex === 1" name="/udDemo"></UDParabolicDemo>
-      <TargetDemo v-if="demoIndex === 2" name="/targetDemo"></TargetDemo>
-      <AccelerateDemo
-        v-if="demoIndex === 3"
-        name="/accelerateDemo"
-      ></AccelerateDemo>
-    </jsv-focus-block>
-  </div>
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2021-10-20 18:27:08
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2021-10-25 09:38:21
+ * @Description: file content
+-->
+<script>
+import LRParabolicDemo from "./LRParabolicDemo.vue";
+import UDParabolicDemo from "./UDParabolicDemo.vue";
+import TargetDemo from "./TargetDemo.vue";
+import AccelerateDemo from "./AccelerateDemo.vue";
+
+export default {
+  components: {
+    LRParabolicDemo,
+    UDParabolicDemo,
+    TargetDemo,
+    AccelerateDemo,
+  },
+  data() {
+    return {
+      demoIndex: 0,
+    };
+  },
+  methods: {
+    onKeyDown(ev) {
+      if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+        this.$router?.go(-1); // 有router时，是从DemoHomepage进入，回退
+        return true;
+      }
+      if (ev.keyCode === 37) {
+        this.demoIndex = this.demoIndex - 1 < 0 ? 3 : this.demoIndex - 1;
+      } else if (ev.keyCode === 39) {
+        this.demoIndex = this.demoIndex - +1 > 3 ? 0 : this.demoIndex + 1;
+      }
+      return true;
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    :style="{
+      width: 1920,
+      height: 1080,
+      backgroundColor: '#000000',
+    }"
+  >
+    <div
+      key="leftWall"
+      :style="{
+        top: 0,
+        left: 425,
+        width: 5,
+        height: 620,
+        backgroundColor: '#F0F000',
+      }"
+    />
+    <div
+      key="rightWall"
+      :style="{
+        top: 0,
+        left: 850,
+        width: 5,
+        height: 620,
+        backgroundColor: '#F0F000',
+      }"
+    />
+    <div
+      key="bottomWall"
+      :style="{
+        top: 620,
+        left: 425,
+        width: 430,
+        height: 5,
+        backgroundColor: '#F0F000',
+      }"
+    />
+    <div
+      key="GuidText1"
+      className="{CssStyles.FontStyle.getName()}"
+      :style="{ top: 625, left: (1280 - 430) / 2, width: 430, height: 40 }"
+    >
+      {`按OK键进行跳跃和转向`}
+    </div>
+    <div
+      key="GuidText2"
+      className="{CssStyles.FontStyle.getName()}"
+      :style="{ top: 625 + 40, left: (1280 - 430) / 2, width: 430, height: 40 }"
+    >
+      {`左右键切换不同模式的Demo`}
+    </div>
+    <jsv-focus-block
+      autoFocus
+      ref="focusNode"
+      :onAction="{
+        onKeyDown: onKeyDown,
+      }"
+    >
+      <LRParabolicDemo
+        v-if="demoIndex === 0"
+        name="/actorMove"
+      ></LRParabolicDemo>
+      <UDParabolicDemo v-if="demoIndex === 1" name="/udDemo"></UDParabolicDemo>
+      <TargetDemo v-if="demoIndex === 2" name="/targetDemo"></TargetDemo>
+      <AccelerateDemo
+        v-if="demoIndex === 3"
+        name="/accelerateDemo"
+      ></AccelerateDemo>
+    </jsv-focus-block>
+  </div>
 </template>