@shijiu/jsview-vue 0.9.602 → 0.9.631

package/samples/ImpactStop/App.vue

@@ -0,0 +1,435 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-08-31 10:17:26
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-08-31 11:17:20
+ * @Description: file content
+-->
+<script setup>
+import {
+  JsvActorMoveControl,
+  JsvActorMove,
+  createImpactTracer,
+  createImpactCallback,
+  createImpactAutoFroze,
+} from "jsview";
+import { ref, computed, onMounted, onBeforeUnmount } from "vue";
+import { useRouter } from "vue-router";
+const router = useRouter();
+const CONST_BOARD_LEFT = 0;
+const CONST_BOARD_RIGHT = 1;
+const CONST_BOARD_MID = 2;
+
+const CONST_BOX_WIDTH = 30;
+const CONST_BOX_HEIGHT = 30;
+
+const horizontalControl = new JsvActorMoveControl();
+const verticalControl = new JsvActorMoveControl();
+const boxLeft = ref(null);
+const boxMid = ref(null);
+const boxRight = ref(null);
+const actorVertical = { current: null };
+const actorHorizontal = { current: null };
+const actor = ref(null);
+
+let viewsAutoFroze = null;
+let sensorList = [];
+let onBoard = CONST_BOARD_LEFT;
+let keyPressed = false;
+const actorState = {
+  jumping: false,
+  hMoving: false,
+};
+const showPrecisionGuild = ref(true);
+const direction = ref(1);
+const bodyState = ref(0);
+const isJsView = Boolean(window.JsView);
+
+const actorColor = computed(() => {
+  switch (bodyState.value) {
+    case 0: // 静止
+      return "#FF00FF";
+    case 1: // 跳起
+      return "#FFFF00";
+    case 2: // 落下
+      return "#00FFFF";
+    default:
+      return "#FFFFFF";
+  }
+});
+
+const onImpact = (impact_type) => {
+  // 根据碰撞层来调整滑块的状态(接触板信息)
+  console.log(`On impacted type=${impact_type}`);
+  bodyState.value = 0;
+  onBoard = impact_type;
+  switch (impact_type) {
+    case CONST_BOARD_MID:
+      verticalControl.jumpTo(0, -200); // jumpTo处理微小穿模的复位，-200为中间层和起始位置的高度差
+      horizontalControl.pause();
+      break;
+    case CONST_BOARD_LEFT:
+      verticalControl.jumpTo(0, 0);
+      horizontalControl.pause();
+      direction.value = 1;
+      break;
+    case CONST_BOARD_RIGHT:
+      verticalControl.jumpTo(0, 0);
+      horizontalControl.pause();
+      direction.value = -1; // 反向
+      break;
+    default:
+      break;
+  }
+  actorState.jumping = false;
+};
+
+const onLanding = () => {
+  // 滑块未与左中右任何一个板发生碰撞，落在了地板的时候
+  console.log("On landing");
+  bodyState.value = 0;
+  actorState.jumping = false;
+  reset();
+};
+
+const reset = () => {
+  console.log("On reset");
+  // 将两个运动都停止后再进行jumpTo，以保证两个jumpTo动作在同一帧完成
+  verticalControl.pause(() => {
+    horizontalControl.pause(() => {
+      verticalControl.jumpTo(0, 0);
+      horizontalControl.jumpTo(0, 0);
+      onBoard = CONST_BOARD_LEFT;
+      showPrecisionGuild.value = true;
+      direction.value = 1;
+    });
+  });
+};
+
+const onKeyDown = (ev) => {
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router?.go(-1); // 有router时，是从DemoHomepage进入，回退
+  }
+  if (actorState.jumping) {
+    // 跳跃中，键盘锁定
+    return true;
+  }
+
+  if (keyPressed) {
+    // KeyPress控制按键连点
+    return true;
+  }
+
+  // 控制按键按下时，键盘锁定
+  keyPressed = true;
+
+  // 滑块位置可能发生变更，所以消除动画精度测试的描素文字
+  if (showPrecisionGuild.value) {
+    showPrecisionGuild.value = false;
+  }
+
+  if (ev.keyCode === 13) {
+    // 滑块跳跃(纵向和横向的配置值都是计算过的，为了进行第一跳的精度测试)
+    actorState.jumping = true;
+    // 垂直方向抛物运动
+    bodyState.value = 1;
+    verticalControl.throwAlongY(
+      -1000,
+      2450,
+      { type: "catch", position: 100, direction: 1 },
+      () => {
+        onLanding();
+      }, // 未碰撞落地时，对滑块位置进行重置
+      () => {
+        bodyState.value = 2;
+      } // 调整成落下状态
+    );
+    // 水平方向，按照direction的值，移动到屏幕两端
+    if (direction.value > 0) {
+      horizontalControl.moveToX(1200 - CONST_BOX_WIDTH, 400, null);
+    } else {
+      horizontalControl.moveToX(0, 400, null);
+    }
+  } else if (ev.keyCode === 37) {
+    // 滑块向左移动
+    actorState.hMoving = true;
+    // 分三个区域设定移动范围
+    let target_x = 0;
+    if (onBoard === CONST_BOARD_LEFT) {
+      target_x = 0;
+    } else if (onBoard === CONST_BOARD_MID) {
+      target_x = 500;
+    } else if (onBoard === CONST_BOARD_RIGHT) {
+      target_x = 800;
+    }
+    horizontalControl.moveToX(target_x, 300, null);
+  } else if (ev.keyCode === 39) {
+    // 滑块向右移动
+    actorState.hMoving = true;
+    // 分三个区域设定移动范围
+    let target_x = 0;
+    if (onBoard === CONST_BOARD_LEFT) {
+      target_x = 396 - CONST_BOX_WIDTH;
+    } else if (onBoard === CONST_BOARD_MID) {
+      target_x = 699 - CONST_BOX_WIDTH;
+    } else if (onBoard === CONST_BOARD_RIGHT) {
+      target_x = 1199 - CONST_BOX_WIDTH;
+    }
+    horizontalControl.moveToX(target_x, 350, null);
+  }
+  return true;
+};
+
+const onKeyUp = () => {
+  keyPressed = false;
+
+  if (actorState.hMoving) {
+    // 停止用户通过左右键发起的水平移动
+    horizontalControl.pause(null);
+    actorState.hMoving = false;
+  }
+};
+
+onMounted(() => {
+  /* 关联碰撞体处理要在didMount中进行 */
+
+  /* 将碰撞发生后要停止动画的元素打包 */
+  viewsAutoFroze = createImpactAutoFroze(
+    [actorVertical.current, actorHorizontal.current],
+    null
+  ); // 此句柄最好保留，未来可以通过此句柄统一进行views list更新
+
+  /* 构建左边碰撞区 */
+  sensorList.push(
+    createImpactTracer(
+      actor.value,
+      boxLeft.value,
+      createImpactCallback(() => {
+        onImpact(CONST_BOARD_LEFT);
+      }, null),
+      viewsAutoFroze
+    )
+  );
+
+  /* 构建中间碰撞区 */
+  sensorList.push(
+    createImpactTracer(
+      actor.value,
+      boxMid.value,
+      createImpactCallback(() => {
+        onImpact(CONST_BOARD_MID);
+      }, null),
+      viewsAutoFroze
+    )
+  );
+
+  /* 构建右边碰撞区 */
+  sensorList.push(
+    createImpactTracer(
+      actor.value,
+      boxRight.value,
+      createImpactCallback(() => {
+        onImpact(CONST_BOARD_RIGHT);
+      }, null),
+      viewsAutoFroze
+    )
+  );
+
+  reset();
+});
+
+onBeforeUnmount(() => {
+  /* 重要! 退出后应该释放所有碰撞监听者 */
+  for (const sensor of sensorList) {
+    sensor.Recycle();
+  }
+});
+</script>
+
+<template>
+  <jsv-focus-block
+    autoFocus
+    :onAction="{
+      onKeyDown,
+      onKeyUp,
+    }"
+    :style="{ width: 1280, height: 720, backgroundColor: '#000000' }"
+  >
+    <div
+      v-if="isJsView"
+      :style="{
+        textAlign: 'center',
+        fontSize: '30px',
+        lineHeight: '50px',
+        color: '#ffffff',
+        left: 100,
+        top: 20,
+        width: 1280 - 200,
+        height: 50,
+        backgroundColor: 'rgba(27,38,151,0.8)',
+      }"
+    >
+      JsView环境下不会穿透模型
+    </div>
+
+    <div
+      key="bottomWall"
+      :style="{
+        top: 620,
+        left: 40,
+        width: 1200,
+        height: 5,
+        backgroundColor: '#F0FFF0',
+      }"
+    />
+
+    <div
+      key="leftFloor"
+      :style="{
+        top: 520,
+        left: 40,
+        width: 397,
+        height: 5,
+        backgroundColor: '#F0F000',
+      }"
+    />
+
+    <!-- 碰撞体的高度要比每帧移动距离大，因为碰撞判断是每帧内进行判断，并不连续，距离太小可能穿模 -->
+
+    <div
+      key="leftFloorImp"
+      ref="boxLeft"
+      :style="{
+        top: 520,
+        left: 40,
+        width: 397,
+        height: 15,
+        backgroundColor: 'rgba(255,255,255,0.2)',
+      }"
+    />
+
+    <div
+      key="midFloor"
+      :style="{
+        top: 320,
+        left: 540,
+        width: 200,
+        height: 5,
+        backgroundColor: '#F0F000',
+      }"
+    />
+    <div
+      key="midFloorImp"
+      ref="boxMid"
+      :style="{
+        top: 320,
+        left: 540,
+        width: 200,
+        height: 15,
+        backgroundColor: 'rgba(0,0,0,0)',
+      }"
+    />
+
+    <div
+      key="rightFloor"
+      :style="{
+        top: 520,
+        left: 840,
+        width: 400,
+        height: 5,
+        backgroundColor: '#F0F000',
+      }"
+    />
+    <div
+      key="rightFloorImp"
+      ref="boxRight"
+      :style="{
+        top: 520,
+        left: 820,
+        width: 400,
+        height: 15,
+        backgroundColor: 'rgba(0,0,0,0)',
+      }"
+    />
+
+    <div
+      v-if="showPrecisionGuild"
+      key="PrecisionGuideText"
+      class="text"
+      :style="{ top: 528, left: 40, width: 405, height: 40 }"
+    >
+      JSV下,立刻起跳会精确到边缘
+    </div>
+
+    <div
+      key="GuideText1"
+      class="text"
+      :style="{ top: 625, left: 370, width: 540, height: 40 }"
+    >
+      左右键调整跳跃起点，按OK键进行跳跃
+    </div>
+    <div
+      key="DirectText"
+      class="text"
+      :style="{ top: 150, left: 425, width: 430, height: 40 }"
+    >
+      {{ `当前方向:${direction > 0 ? "->" : "<-"}` }}
+    </div>
+
+    <div key="actor" :style="{ top: 520 - CONST_BOX_HEIGHT - 2, left: 40 }">
+      <jsv-actor-move
+        key="horizontal"
+        :refDefine="actorHorizontal"
+        :control="horizontalControl"
+      >
+        <jsv-actor-move
+          key="vertical"
+          :refDefine="actorVertical"
+          :control="verticalControl"
+        >
+          <div
+            ref="actor"
+            :style="{
+              backgroundColor: actorColor,
+              width: CONST_BOX_WIDTH,
+              height: CONST_BOX_HEIGHT,
+            }"
+          ></div>
+        </jsv-actor-move>
+      </jsv-actor-move>
+    </div>
+
+    <!-- 一个无限动画元素，来测试卡顿 -->
+    <div
+      :style="{
+        top: 100,
+        left: 50,
+        height: 150,
+        width: 150,
+        backgroundColor: '#334455',
+        animation: 'impact-stop-anim-rotate 1s infinite linear',
+      }"
+    />
+  </jsv-focus-block>
+</template>
+
+<style scoped>
+@keyframes impact-stop-anim-rotate {
+  from {
+    transform: rotate3d(0, 0, 1, 270deg);
+  }
+  to {
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+}
+
+.text {
+  font-size: 30px;
+  color: #73665c;
+  line-height: 40px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-align: center;
+}
+</style>

package/samples/Input/App.vue

@@ -2,11 +2,11 @@
  * @Author: ChenChanghua
  * @Date: 2022-01-20 16:09:31
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-08 13:37:44
+ * @LastEditTime: 2022-09-01 17:34:30
  * @Description: file content
 -->
 <script>
-import { InputType, EdgeDirection } from "jsview";
+import { InputType, EdgeDirection, useFocusHub } from "jsview";
 import InputPanel from "./InputPanel.vue";
 
 export default {
@@ -17,6 +17,7 @@ export default {
     return {
       name: "/input",
       InputType,
+      focusHub: useFocusHub(),
     };
   },
   methods: {
@@ -27,33 +28,23 @@ export default {
       return true;
     },
     _onFocus() {
-      this.$refs.focusNode
-        .findBlockByName(this.name + "/normal")
-        .requestFocus();
+      this.focusHub.setFocus(this.name + "/normal");
     },
     _panel1OnEdge(edgeInfo) {
       if (edgeInfo.direction == EdgeDirection.right) {
-        this.$refs.focusNode
-          .findBlockByName(this.name + "/password")
-          .requestFocus();
+        this.focusHub.setFocus(this.name + "/password");
       }
     },
     _panel2OnEdge(edgeInfo) {
       if (edgeInfo.direction == EdgeDirection.left) {
-        this.$refs.focusNode
-          .findBlockByName(this.name + "/normal")
-          .requestFocus();
+        this.focusHub.setFocus(this.name + "/normal");
       } else if (edgeInfo.direction == EdgeDirection.right) {
-        this.$refs.focusNode
-          .findBlockByName(this.name + "/number")
-          .requestFocus();
+        this.focusHub.setFocus(this.name + "/number");
       }
     },
     _panel3OnEdge(edgeInfo) {
       if (edgeInfo.direction == EdgeDirection.left) {
-        this.$refs.focusNode
-          .findBlockByName(this.name + "/password")
-          .requestFocus();
+        this.focusHub.setFocus(this.name + "/password");
       }
     },
   },

package/samples/Input/InputPanel.vue

@@ -2,13 +2,17 @@
  * @Author: ChenChanghua
  * @Date: 2022-01-25 10:33:07
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-08 13:38:14
+ * @LastEditTime: 2022-09-02 13:44:41
  * @Description: file content
 -->
 <script>
 import FullKeyboard from "./FullKeyboard.vue";
-import { EdgeDirection, JsvInput } from "jsview";
+import { EdgeDirection, JsvInput, useFocusHub } from "jsview";
 import { ref } from "vue";
+
+const blurColor = "#AAAAAA";
+const focusColor = "#FFFF00";
+
 export default {
   components: {
     FullKeyboard,
@@ -24,17 +28,20 @@ export default {
   setup() {
     return {
       showCursor: ref(false),
+      focusHub: useFocusHub(),
+      cursorColor: ref(blurColor),
     };
   },
   methods: {
     _onFocus() {
       this.showCursor = true;
-      this.$refs.focusNode
-        .findBlockByName(`${this.name}/keyboard`)
-        .requestFocus();
+      this.cursorColor = blurColor;
+      this.focusHub.setFocus(`${this.name}/keyboard`);
     },
     _onBlur() {
+      console.log("testtest onblur");
       this.showCursor = false;
+      this.cursorColor = blurColor;
     },
     _keyboardOnClick(item) {
       const char = item.content;
@@ -48,9 +55,8 @@ export default {
     },
     _keyboardOnEdge(edgeInfo) {
       if (edgeInfo.direction === EdgeDirection.top) {
-        this.$refs.focusNode
-          .findBlockByName(`${this.name}/etext`)
-          .requestFocus();
+        this.focusHub.setFocus(`${this.name}/etext`);
+        this.cursorColor = focusColor;
       } else {
         this.onEdge?.(edgeInfo);
       }
@@ -63,9 +69,8 @@ export default {
     },
     _inputOnEdge(edgeInfo) {
       if (edgeInfo.direction === EdgeDirection.bottom) {
-        this.$refs.focusNode
-          .findBlockByName(`${this.name}/keyboard`)
-          .requestFocus();
+        this.focusHub.setFocus(`${this.name}/keyboard`);
+        this.cursorColor = blurColor;
       } else {
         this.onEdge?.(edgeInfo);
       }
@@ -81,6 +86,7 @@ export default {
     ref="focusNode"
     :onAction="{
       onFocus: _onFocus,
+      onBlur: _onBlur,
     }"
   >
     <div
@@ -111,6 +117,7 @@ export default {
       :cursorWidth="2"
       :onTextChange="_onTextChange"
       :onTextOverflow="_onTextOverflow"
+      :cursorColor="cursorColor"
     />
 
     <div :style="{ top: 100 }">

package/samples/MetroWidgetDemos/PingPong/App.vue

@@ -2,7 +2,7 @@
  * @Author: ChenChanghua
  * @Date: 2021-12-21 15:36:29
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-12 16:11:32
+ * @LastEditTime: 2022-09-01 17:08:21
  * @Description: file content
 -->
 <script>
@@ -20,13 +20,13 @@ for (let i = 0; i < 5; i++) {
     width: 100,
     height: 50,
     marginRight: 10,
-    content: "Tab-" + i,
+    content: "Tab_" + i,
     color: randomColor(),
   });
 
   let data = JSON.parse(JSON.stringify(advanceMetroWidget));
   data.forEach((item) => {
-    item.name = "testPage-" + i + "-" + item.name;
+    item.name = "testPage_" + i + "-" + item.name;
   });
   pageList.push({
     width: 600,

package/samples/MetroWidgetDemos/PingPong/AppPage.vue

@@ -2,13 +2,13 @@
  * @Author: ChenChanghua
  * @Date: 2022-07-12 10:45:38
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-12 14:43:49
+ * @LastEditTime: 2022-09-01 17:04:31
  * @Description: file content
 -->
 <script setup>
 import { VERTICAL, MetroWidget } from "jsview";
 import WidgetItem from "../WidgetItem.vue";
-import { reactive } from "vue";
+import { ref, watch, onBeforeUnmount } from "vue";
 
 const props = defineProps({
   data: {
@@ -24,6 +24,8 @@ const props = defineProps({
   },
 });
 
+const widgetRef = ref(null);
+
 const provideData = () => {
   return props.data.data;
 };
@@ -34,10 +36,23 @@ const measures = (item) => {
     doSlide: false,
   };
 };
+
+const watcher = watch(
+  () => props.data,
+  (newValue, oldValue) => {
+    widgetRef.value?.refreshData();
+  }
+);
+
+onBeforeUnmount(() => {
+  watcher();
+})
+
 </script>
 
 <template>
   <metro-widget
+    ref="widgetRef"
     :name="name"
     :width="data.width"
     :height="data.height"

package/samples/MetroWidgetDemos/PingPong/AppTab.vue

@@ -2,19 +2,12 @@
  * @Author: ChenChanghua
  * @Date: 2022-07-12 10:45:19
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-12 15:39:29
+ * @LastEditTime: 2022-09-01 16:19:51
  * @Description: file content
 -->
-<!--
- * @Author: ChenChanghua
- * @Date: 2021-12-21 17:18:58
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2021-12-28 10:58:25
- * @Description: 标题 tab
--->
 <script setup>
 import { HORIZONTAL, MetroWidget } from "jsview";
-import Item from "./Item.vue";
+import TabItem from "./TabItem.vue";
 
 const props = defineProps({
   data: {
@@ -62,7 +55,7 @@ const provideData = () => {
       }"
     >
       <template #renderItem="{ data, query, onAction }">
-        <item :data="data" :query="query" :onAction="onAction"></item>
+        <tab-item :data="data" :query="query" :onAction="onAction"></tab-item>
       </template>
     </metro-widget>
   </jsv-focus-block>

package/samples/MetroWidgetDemos/PingPong/{Item.vue → TabItem.vue}

@@ -2,14 +2,7 @@
  * @Author: ChenChanghua
  * @Date: 2022-07-12 14:52:53
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-12 16:08:56
- * @Description: file content
--->
-<!--
- * @Author: ChenChanghua
- * @Date: 2022-05-10 15:21:24
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-11 17:00:58
+ * @LastEditTime: 2022-09-01 17:10:14
  * @Description: file content
 -->
 <script setup>
@@ -33,13 +26,12 @@ const onFocus = () => {
   active.value = false;
 };
 const onBlur = () => {
-  console.log("cchtest item onblur");
   focused.value = false;
   active.value =
     props.query.getCurrentFocusId().id === props.query.id ? true : false;
 };
 const onClick = () => {
-  console.log("item onclick ", props.data);
+  console.log("tab item onclick ", props.data);
 };
 
 // 一般在create的时候进行回调的注册, 使用 option api的可以在created时进行注册