@shijiu/jsview-vue 0.9.246 → 0.9.254

package/samples/ThrowMoveDemo/UDParabolicDemo.vue

@@ -1,122 +1,122 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2021-10-20 18:27:25
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2021-10-21 14:07:16
- * @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 ? "上" : "下";
-    },
-    detail() {
-      return this.direction < 0 ? "向上抛物" : "向下掷物并弹起";
-    },
-  },
-  setup() {
-    let throwControl = new JsvActorMoveControl(); // 抛物运动体控制器
-    let moveControl = new JsvActorMoveControl(); // 平移运动体控制器
-
-    return {
-      throwControl,
-      moveControl,
-    };
-  },
-  methods: {
-    onKeyDown(ev) {
-      let preDirection = this.direction;
-      switch (ev.keyCode) {
-        case 13:
-          this.direction = -this.direction;
-          this.throwControl.throwAlongY(
-            -400 * preDirection,
-            550 * preDirection,
-            {
-              type: "catch",
-              position: 100 * 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 }"
-    >
-      {{ detail }}
-    </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: '#ffb915', 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:07:16
+ * @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 ? "上" : "下";
+    },
+    detail() {
+      return this.direction < 0 ? "向上抛物" : "向下掷物并弹起";
+    },
+  },
+  setup() {
+    let throwControl = new JsvActorMoveControl(); // 抛物运动体控制器
+    let moveControl = new JsvActorMoveControl(); // 平移运动体控制器
+
+    return {
+      throwControl,
+      moveControl,
+    };
+  },
+  methods: {
+    onKeyDown(ev) {
+      let preDirection = this.direction;
+      switch (ev.keyCode) {
+        case 13:
+          this.direction = -this.direction;
+          this.throwControl.throwAlongY(
+            -400 * preDirection,
+            550 * preDirection,
+            {
+              type: "catch",
+              position: 100 * 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 }"
+    >
+      {{ detail }}
+    </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: '#ffb915', 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/TransitPage/App.vue

@@ -1,41 +1,41 @@
-<script>
-import { Options, Vue } from "vue-class-component";
-import DemoApp from "../DemoHomepage/App.vue"
-import ActivityApp from "../SimpleWidgetDemo/App.vue" // TODO
-import { jJsvRuntimeBridge } from "jsview/utils/JsViewVueTools/JsvRuntimeBridge";
-
-@Options({
-  components: {
-     DemoApp, ActivityApp,
-  }
-})
-class TransitPage extends Vue {
-  constructor(props) {
-    super(props);
-    this.showMode = TransitPage.getShowMode()
-  }
-  mounted() {
-    jJsvRuntimeBridge.notifyPageLoaded();
-  }
-
-  static getShowMode() {
-    let showMode = 0
-    // showMode信息可被URL中的?后缀信息替换
-    if (window.location.search.indexOf("showMode=0") >= 0) {
-      showMode = 0;
-    } else if (window.location.search.indexOf("showMode=1") >= 0) {
-      showMode = 1;
-    }
-
-    return showMode;
-  }
-}
-TransitPage.Router = TransitPage.getShowMode() == 0 ? DemoApp.Router : ActivityApp.Router;
-
-export default TransitPage;
-</script>
-
-<template>
-<DemoApp v-if="showMode === 0" />
-<ActivityApp v-else-if="showMode === 1"/>
+<script>
+import { Options, Vue } from "vue-class-component";
+import DemoApp from "../DemoHomepage/App.vue"
+import ActivityApp from "../SimpleWidgetDemo/App.vue" // TODO
+import { jJsvRuntimeBridge } from "jsview/utils/JsViewVueTools/JsvRuntimeBridge";
+
+@Options({
+  components: {
+     DemoApp, ActivityApp,
+  }
+})
+class TransitPage extends Vue {
+  constructor(props) {
+    super(props);
+    this.showMode = TransitPage.getShowMode()
+  }
+  mounted() {
+    jJsvRuntimeBridge.notifyPageLoaded();
+  }
+
+  static getShowMode() {
+    let showMode = 0
+    // showMode信息可被URL中的?后缀信息替换
+    if (window.location.search.indexOf("showMode=0") >= 0) {
+      showMode = 0;
+    } else if (window.location.search.indexOf("showMode=1") >= 0) {
+      showMode = 1;
+    }
+
+    return showMode;
+  }
+}
+TransitPage.Router = TransitPage.getShowMode() == 0 ? DemoApp.Router : ActivityApp.Router;
+
+export default TransitPage;
+</script>
+
+<template>
+<DemoApp v-if="showMode === 0" />
+<ActivityApp v-else-if="showMode === 1"/>
 </template>

package/samples/VideoDemo/App.vue

@@ -1,137 +1,137 @@
-<script>
-import { provide, reactive, ref, watch } from 'vue'
-import { Options, Vue } from "vue-class-component";
-import Controllor from "./components/Controllor";
-import VideoFrame from "./components/VideoFrame";
-
-@Options({
-  components: {
-    Controllor,
-    VideoFrame,
-  },
-})
-
-class App extends Vue {
-  constructor(props) {
-    super(props);
-    this.caption = null;
-    this.useTexture = ref(null);
-    this.videoTime = reactive({
-      currentTime: 0,
-      duration: 0,
-    })
-    this.objectFitTitle = ref(null);
-    this.playStatus = ref('');
-    provide('useTexture', this.useTexture)
-    provide('objectFit', ref(null))
-    provide('videoRect', ref({}))
-    provide('playVideo', ref(null))
-    provide('seekVideo', ref(null))
-    provide('enableAnimation', ref(null))
-    provide('videoTime', this.videoTime)
-    provide('objectFitTitle', this.objectFitTitle)
-    provide('playStatus', this.playStatus)
-    watch(this.useTexture, () => {
-      this.caption = (this.useTexture ? App.Caption.offscreenVideo : App.Caption.normalVideo);
-    });
-  }
-}
-App.Caption = {
-  offscreenVideo: "名称:OffscreenVideo(自动播放）\n"
-                + "功能描述:\n"
-                + "1.离屏视频播放、支持前进/后退控制\n"
-                + "2.支持圆角设置\n"
-                + "3.支持平移、缩放、旋转等动画\n"
-                + "4.支持ObjectFit调整\n",
-  normalVideo: "名称:Video\n"
-             + "功能描述:\n"
-             + "1.视频播放、支持前进/后退控制\n"
-             + "2.支持ObjectFit调整\n",
-}
-
-export default App;
-</script>
-
-<template>
-<div
-    :style="{
-      top: 0, left: 0,
-      width: 1280, height: 720,
-      backgroundColor: 'rgb(222,211,140)'
-    }"
->
-  <!-- :key="useTexture" => 当useTexture属性变化时，重建VideoFrame -->
-  <VideoFrame
-      :key="useTexture"
-  />
-
-  <!-- :key="useTexture" => JsView bug，当useTexture属性变化时，为了保证显示在VideoFrame前面 -->
-  <div
-      class="caption"
-      :key="useTexture"
-  >
-    {{ caption }}
-  </div>
-  <div>
-    <div class="text status">
-      {{ '播放状态: ' + playStatus }}
-    </div>
-    <div class="text objectFit">
-      {{ objectFitTitle }}
-    </div>
-    <div class="text current">
-      {{ Math.ceil(videoTime.currentTime) }}
-    </div>
-    <div class="text duration">
-      {{ '/' + Math.ceil(videoTime.duration) }}
-    </div>
-  </div>
-  <Controllor class="controllor"/>
-</div>
-</template>
-
-<style scoped>
-.caption {
-  text-align: left;
-  font-size: 24px;
-  line-height: 30px;
-  color: #FFFFFF;
-  left: 10;
-  top: 10;
-  width: 400;
-  height: 180;
-  background-color: rgba(27,38,151,0.8);
-}
-
-.text {
-  color: #FF0000;
-  font-size: 24px;
-  top: 550;
-  width: 60;
-  height: 40;
-}
-.status {
-  left: 50;
-  width: 300;
-}
-.objectFit {
-  left: 800;
-  width: 200;
-  text-align: center;
-}
-
-.current {
-  left: 1060;
-  text-align: right;
-}
-.duration {
-  left: 1120;
-  text-align: left;
-}
-
-.controllor {
-  left: 40;
-  top: 600;
-}
-
-</style>
+<script>
+import { provide, reactive, ref, watch } from 'vue'
+import { Options, Vue } from "vue-class-component";
+import Controllor from "./components/Controllor";
+import VideoFrame from "./components/VideoFrame";
+
+@Options({
+  components: {
+    Controllor,
+    VideoFrame,
+  },
+})
+
+class App extends Vue {
+  constructor(props) {
+    super(props);
+    this.caption = null;
+    this.useTexture = ref(null);
+    this.videoTime = reactive({
+      currentTime: 0,
+      duration: 0,
+    })
+    this.objectFitTitle = ref(null);
+    this.playStatus = ref('');
+    provide('useTexture', this.useTexture)
+    provide('objectFit', ref(null))
+    provide('videoRect', ref({}))
+    provide('playVideo', ref(null))
+    provide('seekVideo', ref(null))
+    provide('enableAnimation', ref(null))
+    provide('videoTime', this.videoTime)
+    provide('objectFitTitle', this.objectFitTitle)
+    provide('playStatus', this.playStatus)
+    watch(this.useTexture, () => {
+      this.caption = (this.useTexture ? App.Caption.offscreenVideo : App.Caption.normalVideo);
+    });
+  }
+}
+App.Caption = {
+  offscreenVideo: "名称:OffscreenVideo(自动播放）\n"
+                + "功能描述:\n"
+                + "1.离屏视频播放、支持前进/后退控制\n"
+                + "2.支持圆角设置\n"
+                + "3.支持平移、缩放、旋转等动画\n"
+                + "4.支持ObjectFit调整\n",
+  normalVideo: "名称:Video\n"
+             + "功能描述:\n"
+             + "1.视频播放、支持前进/后退控制\n"
+             + "2.支持ObjectFit调整\n",
+}
+
+export default App;
+</script>
+
+<template>
+<div
+    :style="{
+      top: 0, left: 0,
+      width: 1280, height: 720,
+      backgroundColor: 'rgb(222,211,140)'
+    }"
+>
+  <!-- :key="useTexture" => 当useTexture属性变化时，重建VideoFrame -->
+  <VideoFrame
+      :key="useTexture"
+  />
+
+  <!-- :key="useTexture" => JsView bug，当useTexture属性变化时，为了保证显示在VideoFrame前面 -->
+  <div
+      class="caption"
+      :key="useTexture"
+  >
+    {{ caption }}
+  </div>
+  <div>
+    <div class="text status">
+      {{ '播放状态: ' + playStatus }}
+    </div>
+    <div class="text objectFit">
+      {{ objectFitTitle }}
+    </div>
+    <div class="text current">
+      {{ Math.ceil(videoTime.currentTime) }}
+    </div>
+    <div class="text duration">
+      {{ '/' + Math.ceil(videoTime.duration) }}
+    </div>
+  </div>
+  <Controllor class="controllor"/>
+</div>
+</template>
+
+<style scoped>
+.caption {
+  text-align: left;
+  font-size: 24px;
+  line-height: 30px;
+  color: #FFFFFF;
+  left: 10;
+  top: 10;
+  width: 400;
+  height: 180;
+  background-color: rgba(27,38,151,0.8);
+}
+
+.text {
+  color: #FF0000;
+  font-size: 24px;
+  top: 550;
+  width: 60;
+  height: 40;
+}
+.status {
+  left: 50;
+  width: 300;
+}
+.objectFit {
+  left: 800;
+  width: 200;
+  text-align: center;
+}
+
+.current {
+  left: 1060;
+  text-align: right;
+}
+.duration {
+  left: 1120;
+  text-align: left;
+}
+
+.controllor {
+  left: 40;
+  top: 600;
+}
+
+</style>