@shijiu/jsview-vue-samples 1.9.783 → 1.9.825

package/Basic/components/text/TextDirection.vue

@@ -0,0 +1,104 @@
+<script setup>
+const gap = 5;
+const blockSize = {
+  width: 180,
+  height: 30,
+};
+const unitHeight = 20 + 35;
+
+const ltrText = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+const rtlText = "شلؤيثبلاهتنمةىخحضقسفعررصءغئا";
+</script>
+
+<template>
+  <div id="layout-root">
+    <div
+      :style="{
+        top: unitHeight * 0,
+      }"
+    >
+      <div class="explain">ltr文字省略尾部</div>
+      <div
+        class="content-font base"
+        :style="{
+          direction: 'ltr',
+        }"
+      >
+        {{ ltrText }}
+      </div>
+    </div>
+
+    <div
+      :style="{
+        top: unitHeight * 1,
+      }"
+    >
+      <div class="explain">ltr文字省略头部</div>
+      <div
+        class="content-font base"
+        :style="{
+          direction: 'rtl',
+        }"
+      >
+        {{ ltrText }}
+      </div>
+    </div>
+
+    <div
+      :style="{
+        top: unitHeight * 2,
+      }"
+    >
+      <div class="explain">rtl文字省略尾部</div>
+      <div
+        class="content-font base"
+        :style="{
+          direction: 'rtl',
+        }"
+      >
+        {{ rtlText }}
+      </div>
+    </div>
+
+    <div
+      :style="{
+        top: unitHeight * 3,
+      }"
+    >
+      <div class="explain">rtl文字省略头部</div>
+      <div
+        class="content-font base"
+        :style="{
+          direction: 'ltr',
+        }"
+      >
+        {{ rtlText }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+@import "../FontStyle.css";
+
+.base {
+  top: 25px;
+  width: 180px;
+  height: 30px;
+  line-height: 30px;
+  background-color: rgba(255, 255, 0, 0.5);
+  color: #ff0000;
+  font-size: 25px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.explain {
+  width: 180px;
+  height: 20px;
+  line-height: 20px;
+  font-size: 15px;
+  color: #000000;
+}
+</style>

package/Basic/components/text/TextEmoji.vue

@@ -18,7 +18,7 @@
 
 <style>
 .emoji {
-  top: 100;
+  top: 80;
   width: 300;
   height: 100;
   font-size: 20;

package/Basic/components/text/TextGroup1.vue

@@ -38,7 +38,7 @@ const contentBlockProps = {
     <ContentBlock
       :class="contentClass"
       :style="{ top: itemSides.height * 2 }"
-      :="{ ...contentBlockProps, itemSides: { ...itemSides, height: 290 } }"
+      :="{ ...contentBlockProps, itemSides: { ...itemSides, height: 320 } }"
       :index="2"
       title="文字折行"
     >

package/Basic/components/text/TextGroup2.vue

@@ -1,6 +1,7 @@
 <script setup>
 import ContentBlock from "../ContentBlock.vue";
 import TextEmoji from "./TextEmoji.vue";
+import TextDirection from "./TextDirection.vue";
 
 const props = defineProps({
   contentClass: String,
@@ -19,10 +20,19 @@ const contentBlockProps = {
       :style="{ top: itemSides.height * 0 }"
       :="contentBlockProps"
       :index="0"
-      title="文字对齐"
+      title="emoji"
     >
       <TextEmoji />
     </ContentBlock>
+    <ContentBlock
+      :class="contentClass"
+      :style="{ top: itemSides.height * 1 }"
+      :="{ ...contentBlockProps, itemSides: { ...itemSides, height: 250 } }"
+      :index="0"
+      title="不同方向文字省略"
+    >
+      <text-direction />
+    </ContentBlock>
   </div>
 </template>
 

package/DemoHomepage/views/Homepage.vue

@@ -40,6 +40,7 @@ export default {
       tabId: 0,
       preFocusName: "",
       curFocusName: "",
+      isDevelopment: process.env.NODE_ENV !== 'production',
     };
   },
   setup() {
@@ -128,7 +129,7 @@ export default {
     <div class="address">
       {{ address }}
     </div>
-    <div class="logo">JsView-Vue3 (Vite3)</div>
+    <div class="logo">{{ 'JsView-Vue3 (Vite3) [' + (isDevelopment ? 'Debug' : 'Release') + ']' }}</div>
 
     <jsv-focus-block
       autoFocus

package/FilterDemo/App.vue

@@ -63,7 +63,7 @@ onMounted(() => {
         :width="501"
         :height="401"
         ref="filter1"
-        :filterType="this.filterType.type"
+        :filterType="filterType.type"
       >
         <div
           :style="{
@@ -92,7 +92,7 @@ onMounted(() => {
         :width="402"
         :height="402"
         ref="filter2"
-        :filterType="this.filterType.type"
+        :filterType="filterType.type"
       >
         <div
           :style="{

package/ImpactStop/App.vue

@@ -6,6 +6,7 @@
  * @Description: file content
 -->
 <script setup>
+import { jJsvRuntimeBridge } from "@shijiu/jsview-vue/utils/JsViewVueTools/JsvRuntimeBridge";
 import {
   JsvActorMoveControl,
   JsvActorMove,
@@ -28,10 +29,11 @@ const verticalControl = new JsvActorMoveControl();
 const boxLeft = shallowRef(null);
 const boxMid = shallowRef(null);
 const boxRight = shallowRef(null);
-const actorVertical = { current: null };
-const actorHorizontal = { current: null };
 const actor = shallowRef(null);
 
+let actorVertical = shallowRef(null);
+let actorHorizontal = shallowRef(null);
+
 let viewsAutoFroze = null;
 let sensorList = [];
 let onBoard = CONST_BOARD_LEFT;
@@ -195,7 +197,7 @@ onMounted(() => {
 
   /* 将碰撞发生后要停止动画的元素打包 */
   viewsAutoFroze = createImpactAutoFroze(
-    [actorVertical.current, actorHorizontal.current],
+    [actorVertical.value.mainDiv, actorHorizontal.value.mainDiv],
     null
   ); // 此句柄最好保留，未来可以通过此句柄统一进行views list更新
 
@@ -236,6 +238,8 @@ onMounted(() => {
   );
 
   reset();
+
+  jJsvRuntimeBridge.notifyPageLoaded();
 });
 
 onBeforeUnmount(() => {
@@ -379,12 +383,12 @@ onBeforeUnmount(() => {
     <div key="actor" :style="{ top: 520 - CONST_BOX_HEIGHT - 2, left: 40 }">
       <jsv-actor-move
         key="horizontal"
-        :refDefine="actorHorizontal"
+        ref="actorHorizontal"
         :control="horizontalControl"
       >
         <jsv-actor-move
           key="vertical"
-          :refDefine="actorVertical"
+          ref="actorVertical"
           :control="verticalControl"
         >
           <div
@@ -432,4 +436,4 @@ onBeforeUnmount(() => {
   text-overflow: ellipsis;
   text-align: center;
 }
-</style>
+</style>

package/MetroWidgetDemos/Advanced/ButtonItem.vue

@@ -2,7 +2,7 @@
  * @Author: ChenChanghua
  * @Date: 2022-07-11 13:26:24
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-11-02 15:37:33
+ * @LastEditTime: 2022-12-02 16:10:16
  * @Description: file content
 -->
 <script setup>
@@ -11,7 +11,7 @@ import { useFocusHub } from "jsview";
 
 const props = defineProps({
   data: Object,
-  query: String,
+  query: Object,
   onAction: Object,
   onItemEdge: Function,
 });

package/MetroWidgetDemos/Advanced/widgets/Item.vue

@@ -2,7 +2,7 @@
  * @Author: ChenChanghua
  * @Date: 2022-11-01 15:30:14
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-11-02 15:39:17
+ * @LastEditTime: 2022-12-02 16:11:54
  * @Description: file content
 -->
 <!--
@@ -74,7 +74,6 @@ props.onAction.register("onClick", onClick);
         color: '#FFFFFF',
         backgroundColor: data.color,
         borderRadius: '10px',
-        animation: animation,
       }"
     >
       {{ data.content }}

package/MetroWidgetDemos/Advanced/widgets/WidgetItem.vue

@@ -78,7 +78,6 @@ props.onAction.register("onBlur", onBlur);
       bottom: 10,
     }"
     :measures="measures"
-    :slideSetting="seamlessSlide"
     :onEdge="onItemEdge"
     :sendFocusRectEvent="true"
   >

package/MetroWidgetDemos/Item.vue

@@ -2,7 +2,7 @@
  * @Author: ChenChanghua
  * @Date: 2022-05-10 15:21:24
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-11-01 15:24:26
+ * @LastEditTime: 2022-12-02 16:12:43
  * @Description: file content
 -->
 <script setup>
@@ -17,25 +17,9 @@ const props = defineProps({
 const divRef = shallowRef(null);
 const focused = ref(false);
 
-const focusSize = inject("focusSize");
-
 // 自身的焦点状态自己记录, 通过回调来改变
 const onFocus = () => {
   focused.value = true;
-  if (focusSize) {
-    divRef.value?.getBoundingClientRect().then(
-      (data) => {
-        console.log("testtest focus size", data)
-        focusSize.width = data.width;
-        focusSize.height = data.height;
-        focusSize.left = data.left;
-        focusSize.top = data.top;
-      },
-      (error) => {
-        console.log("testtest abs failed", error);
-      }
-    );
-  }
 };
 const onBlur = () => {
   focused.value = false;

package/MetroWidgetDemos/PerformanceTest/components/MyTab.vue

@@ -2,7 +2,7 @@
  * @Author: ChenChanghua
  * @Date: 2021-09-29 16:13:35
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2021-09-29 17:07:19
+ * @LastEditTime: 2022-12-02 16:14:11
  * @Description: file content
 -->
 <script>
@@ -10,7 +10,7 @@ import { ref, shallowRef } from "vue";
 
 export default {
   props: {
-    name: Object,
+    name: String,
     onEdgeDown: Function,
     onItemFocus: Function,
   },

package/MetroWidgetDemos/WidgetItem.vue

@@ -78,7 +78,6 @@ props.onAction.register("onBlur", onBlur);
       bottom: 10,
     }"
     :measures="measures"
-    :slideSetting="seamlessSlide"
     :onEdge="onItemEdge"
     :sendFocusRectEvent="true"
   >

package/NinePatchDemo/Item.vue

@@ -50,7 +50,7 @@ props.onAction.register("onClick", onClicked);
 
 <template>
   <div :class="focused ? 'focus' : 'blur'" :style="styleValue">
-    {{ "" + props.data.content }}
+    {{ data.content }}
   </div>
 </template>
 
@@ -66,4 +66,4 @@ props.onAction.register("onClick", onClicked);
   transition: transform 0.25s linear;
   font-size: 30px;
 }
-</style>
+</style>

package/SoundPool/App.vue

@@ -128,7 +128,7 @@ onBeforeUnmount(() => {
           `[确定]: 播放背景音乐\n[左]: 播放失败音乐1\n[右]: 播放失败音乐2\n[上]: 播放硬币音乐1\n[下]: 播放硬币音乐2`
         }}
       </div>
-      <audiotrack ref="bgm" :src="bgmusic" loop="loop" />
+      <jsv-audiotrack ref="bgm" :src="bgmusic" loop="loop" />
     </div>
   </jsv-focus-block>
 </template>

package/ThrowMoveDemo/LRParabolicDemo.vue

@@ -5,56 +5,42 @@
  * @LastEditTime: 2021-10-21 14:01:59
  * @Description: file content
 -->
-<script>
+<script setup>
 import { JsvActorMoveControl, JsvActorMove } from "jsview";
+import { shallowRef } from "vue";
 
-export default {
-  components: {
-    JsvActorMove,
-  },
-  props: {
-    name: String,
-  },
-  data() {
-    return {
-      direction: 1,
-    };
-  },
-  setup() {
-    let throwControl = new JsvActorMoveControl(); // 抛物运动体控制器
-    let moveControl = new JsvActorMoveControl(); // 平移运动体控制器
+const props = defineProps({
+  name: String,
+});
 
-    return {
-      throwControl,
-      moveControl,
-    };
-  },
-  methods: {
-    onKeyDown(ev) {
-      switch (ev.keyCode) {
-        case 13:
-          this.direction = -this.direction;
+let throwControl = new JsvActorMoveControl(); // 抛物运动体控制器
+let moveControl = new JsvActorMoveControl(); // 平移运动体控制器
 
-          this.moveControl.moveToX(195 * this.direction, 250, (x, y) => {
-            console.log(`Move end with x=${x} y=${y}`);
-          });
-          this.throwControl.throwAlongY(
-            -500,
-            750,
-            { type: "catch", position: 0, direction: 1 },
-            (x, y) => {
-              console.log(`Throw end with x=${x} y=${y}`);
-            },
-            () => {
-              console.log("Get to the pole...");
-            }
-          );
-          return true;
-      }
-      return false;
-    },
-  },
-};
+let direction = shallowRef(1);
+
+function onKeyDown(ev) {
+  switch (ev.keyCode) {
+    case 13:
+      direction.value = -direction.value;
+
+      moveControl.moveToX(195 * direction.value, 250, (x, y) => {
+        console.log(`Move end with x=${x} y=${y}`);
+      });
+      throwControl.throwAlongY(
+        -500,
+        750,
+        { type: "catch", position: 0, direction: 1 },
+        (x, y) => {
+          console.log(`Throw end with x=${x} y=${y}`);
+        },
+        () => {
+          console.log("Get to the pole...");
+        }
+      );
+      return true;
+  }
+  return false;
+}
 </script>
 
 <template>
@@ -112,4 +98,4 @@ export default {
   text-overflow: ellipsis;
   text-align: center;
 }
-</style>
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shijiu/jsview-vue-samples",
-  "version": "1.9.783",
+  "version": "1.9.825",
   "license": "MIT",
   "repository": "system/jsview-framework",
   "author": "mengxk",