@shijiu/jsview-vue 0.9.502 → 0.9.590

package/samples/TouchSample/App.vue

@@ -2,16 +2,15 @@
  * @Author: ChenChanghua
  * @Date: 2022-04-10 21:20:39
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-04-11 09:51:24
+ * @LastEditTime: 2022-07-08 14:12:05
  * @Description: file content
 -->
 <script>
-import JsvTouchContainer from "jsview/utils/JsViewVueWidget/JsvTouchContainer.vue";
 import MetroWidgetHorizontal from "./MetroWidgetHorizontal.vue";
 import MetroWidgetVertical from "./MetroWidgetVertical.vue";
 import TouchContainerHorizontal from "./TouchContainerHorizontal.vue";
 import TouchContainerVertical from "./TouchContainerVertical.vue";
-import { jJsvRuntimeBridge } from "jsview/utils/JsViewVueTools/JsvRuntimeBridge";
+import { jJsvRuntimeBridge, JsvTouchContainer } from "jsview";
 
 export default {
   components: {

package/samples/TouchSample/Item.vue

@@ -6,7 +6,7 @@
  * @Description: file content
 -->
 <script>
-import { getPositionRelativeToView } from "jsview/utils/JsViewEngineWidget";
+import { getPositionRelativeToView } from "jsview";
 function randomColor() {
   let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
   return (
@@ -29,7 +29,7 @@ export default {
   setup() {
     return {
       randomColor,
-    }
+    };
   },
   computed: {
     style() {
@@ -44,7 +44,7 @@ export default {
   methods: {
     onFocus() {
       this.focused = true;
-      console.log("cchtest item onfocus", this.data)  
+      console.log("cchtest item onfocus", this.data);
     },
 
     onBlur() {
@@ -53,7 +53,7 @@ export default {
 
     onClick() {
       console.log(`item ${this.query.id} clicked`);
-    }
+    },
   },
   created() {
     // console.log("cchtest item created", this.data.content)
@@ -69,7 +69,7 @@ export default {
   },
   updated() {
     // console.log("cchtest item update", this.data.content)
-  }
+  },
 };
 </script>
 
@@ -77,18 +77,20 @@ export default {
   <div ref="element" :class="focused ? 'focus' : 'blur'" :style="style">
     {{ data.content }}
   </div>
-  <div :style="{
-    left: data.width/2,
-    top: data.height/2,
-    width: 10,
-    height: 10,
-    backgroundColor: focused ? '#000000' : '#FF0000'
-  }"/>
+  <div
+    :style="{
+      left: data.width / 2,
+      top: data.height / 2,
+      width: 10,
+      height: 10,
+      backgroundColor: focused ? '#000000' : '#FF0000',
+    }"
+  />
 </template>
 
 <style scoped>
 .focus {
-  transform: scale3d(1.0, 1.0, 1);
+  transform: scale3d(1, 1, 1);
   transition: transform 0.25s linear;
   font-size: 30px;
 }

package/samples/TouchSample/MetroWidgetHorizontal.vue

@@ -5,7 +5,7 @@ import {
   WholePageSlide,
   SeamlessSlide,
   FixPositionSlide,
-} from "jsview/utils/JsViewEngineWidget";
+} from "jsview";
 
 import Item from "./Item.vue";
 
@@ -51,7 +51,7 @@ export default {
 
 <template>
   <div class="rootSize">
-    <div :style="{ width: 1280, height: 720, left: 50, }">
+    <div :style="{ width: 1280, height: 720, left: 50 }">
       <div
         :style="{
           top: 0,

package/samples/TouchSample/MetroWidgetVertical.vue

@@ -5,7 +5,7 @@ import {
   WholePageSlide,
   SeamlessSlide,
   FixPositionSlide,
-} from "jsview/utils/JsViewEngineWidget";
+} from "jsview";
 
 import Item from "./Item.vue";
 

package/samples/TouchSample/TouchContainerHorizontal.vue

@@ -2,15 +2,16 @@
  * @Author: ChenChanghua
  * @Date: 2022-04-10 21:21:02
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-04-11 10:05:35
+ * @LastEditTime: 2022-07-08 14:40:19
  * @Description: file content
 -->
 <script>
-import JsvTouchContainer, {
+import {
+  JsvTouchContainer,
   DIRECTION_VERTICAL,
   DIRECTION_HORIZONTAL,
   DIRECTION_DISABLE,
-} from "jsview/utils/JsViewVueWidget/JsvTouchContainer.vue";
+} from "jsview";
 import { touchContainerH, measures } from "./data.js";
 function randomColor() {
   let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);

package/samples/TouchSample/TouchContainerVertical.vue

@@ -6,11 +6,12 @@
  * @Description: file content
 -->
 <script>
-import JsvTouchContainer, {
+import {
+  JsvTouchContainer,
   DIRECTION_VERTICAL,
   DIRECTION_HORIZONTAL,
   DIRECTION_DISABLE,
-} from "jsview/utils/JsViewVueWidget/JsvTouchContainer.vue";
+} from "jsview";
 import { touchContainerV, measures } from "./data.js";
 function randomColor() {
   let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);

package/samples/TransitPage/App.vue

@@ -1,41 +1,29 @@
-<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";
+<script setup>
+import DemoApp from "../DemoHomepage/App.vue";
+import ActivityApp from "../MetroWidgetDemos/PerformanceTest/App.vue"; // TODO
+import { jJsvRuntimeBridge } from "jsview";
+import { ref, onMounted } from "vue";
 
-@Options({
-  components: {
-     DemoApp, ActivityApp,
-  }
-})
-class TransitPage extends Vue {
-  constructor(props) {
-    super(props);
-    this.showMode = TransitPage.getShowMode()
-  }
-  mounted() {
-    jJsvRuntimeBridge.notifyPageLoaded();
+const 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;
   }
 
-  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;
+};
 
-    return showMode;
-  }
-}
-TransitPage.Router = TransitPage.getShowMode() == 0 ? DemoApp.Router : ActivityApp.Router;
+const showMode = ref(getShowMode());
 
-export default TransitPage;
+onMounted(() => {
+  jJsvRuntimeBridge.notifyPageLoaded();
+});
 </script>
 
 <template>
-<DemoApp v-if="showMode === 0" />
-<ActivityApp v-else-if="showMode === 1"/>
+  <DemoApp v-if="showMode === 0" />
+  <ActivityApp v-else-if="showMode === 1" />
 </template>

package/samples/VideoDemo/App.vue

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

package/samples/VideoDemo/components/Button.vue

@@ -1,63 +1,52 @@
-<script>
-import { Options, Vue } from "vue-class-component";
-
-@Options({
-  props: {
-    style: Object,
-    autoFocus: Boolean,
-    name: String,
-    onClick: Function,
-  }
-})
-
-class Button extends Vue {
-  constructor(props) {
-    super(props);
-
-    this.hasFocused = false;
-  }
-
-  onFocus() {
-    this.hasFocused = true;
-  }
-
-  onBlur() {
-    this.hasFocused = false;
+<script setup>
+import { ref } from "vue";
+const props = defineProps({
+  style: Object,
+  autoFocus: Boolean,
+  name: String,
+  onClick: Function,
+});
+
+const hasFocused = ref(false);
+
+const onFocus = () => {
+  hasFocused.value = true;
+};
+
+const onBlur = () => {
+  hasFocused.value = false;
+};
+
+const onKeyDown = (ev) => {
+  if (ev.keyCode === 13) {
+    // Enter
+    props.onClick?.();
+    return true;
   }
-
-  onKeyDown(ev) {
-    if(ev.keyCode === 13) { // Enter
-      this.onClick?.();
-      return true;
-    }
-    return false;
-  }
-
-  getAction() {
-    return {
-      onFocus: this.onFocus,
-      onBlur: this.onBlur,
-      onKeyDown: this.onKeyDown
-    }
-  }
-}
-
-export default Button;
+  return false;
+};
 </script>
 
 <template>
-<jsv-focus-block :name="name" :autoFocus="autoFocus?'':undefined"
-  :onAction="getAction()"
->
-  <div class="item"
+  <jsv-focus-block
+    :name="name"
+    :autoFocus="autoFocus ? '' : undefined"
+    :onAction="{
+      onFocus: onFocus,
+      onBlur: onBlur,
+      onKeyDown: onKeyDown,
+    }"
+  >
+    <div
+      class="item"
       :style="{
         ...style,
         backgroundColor: hasFocused ? '#FFFF00' : '#A8A8A8',
       }"
-  >
-    <slot/>
-  </div>
-</jsv-focus-block>
+    >
+      <slot></slot>
+    </div>
+  </jsv-focus-block>
 </template>
 
 <style scoped>