@shijiu/jsview-vue-samples 2.0.1073 → 2.0.1106

package/GiftRain/App.vue

@@ -178,6 +178,10 @@ const _onImpactTracer = (rain) => {
     }
   }
 }
+//定义边缘变量，到边缘时不允许触发相应方向的按键事件。
+let leftEdge = shallowRef(false)
+let rightEgde = shallowRef(false)
+
 //键盘松开时应该暂停动作
 const onKeyUp = (ev) => {
   console.log("onKeyUp in : ", ev);
@@ -196,17 +200,19 @@ const router = useRouter();
 const onKeyDown = (ev) => {
   if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
     router.go(-1)
-  } else if (ev.keyCode === 37) {
+  } else if (ev.keyCode === 37 && !leftEdge.value) {
     console.log(" ev.keyCode === 37 ");
     if (!_IsRunning) {
-      _TranslateControl.moveToX(0, 400 * 1.5, null);
+      _TranslateControl.moveToX(0, 400 * 1.5, () => leftEdge.value = true);
       _IsRunning = true;
+      rightEgde.value = false
     }
-  } else if (ev.keyCode === 39) {
+  } else if (ev.keyCode === 39 && !rightEgde.value) {
     console.log(" ev.keyCode === 39");
     if (!_IsRunning) {
-      _TranslateControl.moveToX((1280 - 220 - 194) * 1.5, 400 * 1.5, null);
+      _TranslateControl.moveToX((1280 - 220 - 194) * 1.5, 400 * 1.5, () => rightEgde.value = true);
       _IsRunning = true;
+      leftEdge.value = false
     }
   }
   return true;

package/GridDemo/App.vue

@@ -1,13 +1,13 @@
 <!--
  * @Author: ChenChanghua
  * @Date: 2022-05-06 19:32:53
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-08 11:39:09
+ * @LastEditors: ZhengYi
+ * @LastEditTime: 2023-05-04 
  * @Description: file content
 -->
 <script setup>
 import { jJsvRuntimeBridge, JsvGrid, LineType, EdgeDirection } from "jsview";
-import { reactive, ref, shallowRef, onMounted } from "vue";
+import { shallowRef, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import ItemVue from "./Item.vue";
 import FocusItem from "./FocusItem.vue";
@@ -203,13 +203,13 @@ onMounted(() => {
       <div
         :style="{
           left: 100,
-          top: 300,
+          top: 0,
           width: 300,
           height: 50,
           fontSize: 30,
         }"
       >
-        空数据
+        空数据展示
       </div>
     </div>
   </jsv-focus-block>

package/GridDemo/FocusItem.vue

@@ -1,21 +1,19 @@
 <!--
  * @Author: ChenChanghua
  * @Date: 2022-05-10 15:21:24
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-08 11:50:58
+ * @LastEditors: ZhengYi
+ * @LastEditTime: 2022-05-04
  * @Description: file content
 -->
 <script setup>
 import ButtonBlock from "./ButtonBlock.vue";
-import { ref, shallowRef } from "vue";
+import { shallowRef } from "vue";
 
 const props = defineProps({
   userData: Object,
   widgetData: Object,
   onAction: Object,
 });
-const focused = ref(false);
-const divNumber = new Array(50);
 const button = shallowRef(null);
 const onFocus = () => {
   button.value

package/GridDemo/Item.vue

@@ -1,39 +1,25 @@
 <!--
  * @Author: ChenChanghua
  * @Date: 2022-05-10 15:21:24
- * @LastEditors: Please set LastEditors
- * @LastEditTime: 2023-02-16 16:25:06
+ * @LastEditors: ZhengYi
+ * @LastEditTime: 2023-05-04
  * @Description: file content
 -->
 <script setup>
-import { ref, onUpdated, onMounted } from "vue";
+import { ref } from "vue";
 
 const props = defineProps({
   userData: Object,
   widgetData: Object,
   onAction: Object,
 });
-const randomColor = () => {
-  let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
-  return (
-    "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
-  );
-};
+
 const focused = ref(false);
 const divNumber = new Array(50);
-const blurAction = false;
-
 const onFocus = () => {
-  // console.log("item onfocus", props.userData);
   focused.value = true;
 };
 const onBlur = () => {
-  // console.log(
-  //   "item onblur",
-  //   props.userData,
-  //   props.widgetData.getCurrentFocusId(),
-  //   props.widgetData.dataIndex
-  // );
   focused.value = false;
 };
 const onClick = () => {
@@ -44,12 +30,6 @@ props.onAction.register("onFocus", onFocus);
 props.onAction.register("onBlur", onBlur);
 props.onAction.register("onClick", onClick);
 
-onUpdated(() => {
-  // console.log("item updated", props.userData, props.widgetData);
-});
-onMounted(() => {
-  // console.log("item mounted", props.userData, props.widgetData);
-});
 </script>
 
 <template>

package/HashHistory/App.vue

@@ -46,16 +46,6 @@ const onRequestFocus = (branchName) => {
   topRef.value.findBlockByname(branchName)?.requestFocus();
 };
 
-const watchRouterChanged = (route) => {
-  route.afterEach(() => {
-    displayUrl.value = window.location.href;
-  });
-};
-
-const onKeyDown = (event) => {
-  return routePage.value.onKeyDown(event);
-};
-
 onMounted(() => {
   jJsvRuntimeBridge.notifyPageLoaded();
 });

package/HashHistory/views/MainPage.vue

@@ -2,7 +2,6 @@
 import { useRouter } from "vue-router";
 import HorizontalButtonList from "../components/HorizontalButtonList.vue";
 
-const branchName = "./MainPage.ButtonList";
 const router = useRouter();
 
 const buttonListConfig = [

package/ImpactStop/App.vue

@@ -45,7 +45,6 @@ const actorState = {
 const showPrecisionGuild = shallowRef(true);
 const direction = shallowRef(1);
 const bodyState = shallowRef(0);
-const isJsView = Boolean(window.JsView);
 
 const actorColor = computed(() => {
   switch (bodyState.value) {

package/Input/App.vue

@@ -1,164 +1,120 @@
 <!--
  * @Author: ChenChanghua
  * @Date: 2022-01-20 16:09:31
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-09-01 17:34:30
+ * @LastEditors: ZhengYi
+ * @LastEditTime: 2023-04-28
  * @Description: file content
 -->
-<script>
+<script setup>
 import { InputType, EdgeDirection, useFocusHub } from "jsview";
 import InputPanel from "./InputPanel.vue";
+import { useRouter } from "vue-router";
+import { shallowRef } from "vue"
+const router = useRouter();
+let focusNode = shallowRef(null)
+const name = "/input"
+const focusHub = useFocusHub()
+
+const _onKeyDown = (ev) => {
+    if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+        router?.go(-1); // 有router时，是从DemoHomepage进入，回退
+    }
+    return true;
+}
+const _onFocus = () => {
+    focusHub.setFocus(name + "/normal");
+}
+const _panel1OnEdge = (edgeInfo) => {
+    if (edgeInfo.direction == EdgeDirection.right) {
+        focusHub.setFocus(name + "/password");
+    }
+}
+const _panel2OnEdge = (edgeInfo) => {
+    if (edgeInfo.direction == EdgeDirection.left) {
+        focusHub.setFocus(name + "/normal");
+    } else if (edgeInfo.direction == EdgeDirection.right) {
+        focusHub.setFocus(name + "/number");
+    }
+}
+const _panel3OnEdge = (edgeInfo) => {
+    if (edgeInfo.direction == EdgeDirection.left) {
+        focusHub.setFocus(name + "/password");
+    }
+}
+
 
-export default {
-  components: {
-    InputPanel,
-  },
-  setup() {
-    return {
-      name: "/input",
-      InputType,
-      focusHub: useFocusHub(),
-    };
-  },
-  methods: {
-    _onKeyDown(ev) {
-      if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-        this.$router?.go(-1); // 有router时，是从DemoHomepage进入，回退
-      }
-      return true;
-    },
-    _onFocus() {
-      this.focusHub.setFocus(this.name + "/normal");
-    },
-    _panel1OnEdge(edgeInfo) {
-      if (edgeInfo.direction == EdgeDirection.right) {
-        this.focusHub.setFocus(this.name + "/password");
-      }
-    },
-    _panel2OnEdge(edgeInfo) {
-      if (edgeInfo.direction == EdgeDirection.left) {
-        this.focusHub.setFocus(this.name + "/normal");
-      } else if (edgeInfo.direction == EdgeDirection.right) {
-        this.focusHub.setFocus(this.name + "/number");
-      }
-    },
-    _panel3OnEdge(edgeInfo) {
-      if (edgeInfo.direction == EdgeDirection.left) {
-        this.focusHub.setFocus(this.name + "/password");
-      }
-    },
-  },
-};
 </script>
 
 <template>
-  <jsv-focus-block
-    ref="focusNode"
-    autoFocus
-    :onAction="{
-      onKeyDown: _onKeyDown,
-      onFocus: _onFocus,
-    }"
-    :style="{
-      width: 1920,
-      height: 1080,
-      backgroundColor: '#007788',
-    }"
-  >
-    <div
-      :style="{
-        top: 100,
-        left: 100,
-      }"
-    >
-      <div
-        :style="{
-          width: 300,
-          height: 50,
-          lineHeight: 50,
-          textAlign: 'center',
-          fontSize: 30,
-        }"
-      >
-        文字输入-左对齐
-      </div>
-      <div
-        :style="{
-          top: 100,
-        }"
-      >
-        <input-panel
-          :name="name + '/normal'"
-          :type="InputType.TEXT"
-          textAlign="left"
-          placeholder="请输入"
-          :onEdge="_panel1OnEdge"
-        />
-      </div>
-    </div>
+    <jsv-focus-block ref="focusNode" autoFocus :onAction="{
+        onKeyDown: _onKeyDown,
+        onFocus: _onFocus,
+    }" :style="{
+        width: 1920,
+        height: 1080,
+        backgroundColor: '#007788',
+    }">
+        <div :style="{
+                top: 100,
+                left: 100,
+            }">
+            <div :style="{
+                    width: 300,
+                    height: 50,
+                    lineHeight: 50,
+                    textAlign: 'center',
+                    fontSize: 30,
+                }">
+                文字输入-左对齐
+            </div>
+            <div :style="{
+                    top: 100,
+                }">
+                <input-panel :name="name + '/normal'" :type="InputType.TEXT" textAlign="left" placeholder="请输入"
+                    :onEdge="_panel1OnEdge" />
+            </div>
+        </div>
 
-    <div
-      :style="{
-        top: 100,
-        left: 500,
-      }"
-    >
-      <div
-        :style="{
-          width: 300,
-          height: 50,
-          lineHeight: 50,
-          textAlign: 'center',
-          fontSize: 30,
-        }"
-      >
-        密码输入-右对齐
-      </div>
-      <div
-        :style="{
-          top: 100,
-        }"
-      >
-        <input-panel
-          :name="name + '/password'"
-          :type="InputType.PASSWORD"
-          textAlign="right"
-          placeholder="请输入"
-          :onEdge="_panel2OnEdge"
-        />
-      </div>
-    </div>
+        <div :style="{
+                top: 100,
+                left: 500,
+            }">
+            <div :style="{
+                    width: 300,
+                    height: 50,
+                    lineHeight: 50,
+                    textAlign: 'center',
+                    fontSize: 30,
+                }">
+                密码输入-右对齐
+            </div>
+            <div :style="{
+                    top: 100,
+                }">
+                <input-panel :name="name + '/password'" :type="InputType.PASSWORD" textAlign="right" placeholder="请输入"
+                    :onEdge="_panel2OnEdge" />
+            </div>
+        </div>
 
-    <div
-      :style="{
-        top: 100,
-        left: 900,
-      }"
-    >
-      <div
-        :style="{
-          width: 300,
-          height: 50,
-          lineHeight: 50,
-          textAlign: 'center',
-          fontSize: 30,
-        }"
-      >
-        数字输入-右对齐
-      </div>
-      <div
-        :style="{
-          top: 100,
-        }"
-      >
-        <input-panel
-          :name="name + '/number'"
-          :type="InputType.NUMBER"
-          textAlign="right"
-          placeholder="请输入"
-          :onEdge="_panel3OnEdge"
-        />
-      </div>
-    </div>
-  </jsv-focus-block>
+        <div :style="{
+                top: 100,
+                left: 900,
+            }">
+            <div :style="{
+                    width: 300,
+                    height: 50,
+                    lineHeight: 50,
+                    textAlign: 'center',
+                    fontSize: 30,
+                }">
+                数字输入-右对齐
+            </div>
+            <div :style="{
+                    top: 100,
+                }">
+                <input-panel :name="name + '/number'" :type="InputType.NUMBER" textAlign="right" placeholder="请输入"
+                    :onEdge="_panel3OnEdge" />
+            </div>
+        </div>
+    </jsv-focus-block>
 </template>

package/Input/FullKeyboard.vue

@@ -1,15 +1,20 @@
 <!--
  * @Author: ChenChanghua
  * @Date: 2022-01-25 10:27:17
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-08 13:37:59
+ * @LastEditors: ZhengYi
+ * @LastEditTime: 2023-04-28
  * @Description: file content
 -->
-<script>
+<script setup>
 import { VERTICAL, SimpleWidget } from "jsview";
 import KeyboardItem from "./KeyboardItem.vue";
 
-function _initData() {
+const props=defineProps({
+    name: String,
+    onClick: Function,
+    onEdge: Function,
+})
+const _initData=()=>{
   const result = [];
   result.push({
     width: 120,
@@ -35,44 +40,29 @@ function _initData() {
   return result;
 }
 
-export default {
-  components: {
-    SimpleWidget,
-    KeyboardItem,
-  },
-  props: {
-    name: String,
-    onClick: Function,
-    onEdge: Function,
-  },
-  setup() {
-    return {
-      direction: VERTICAL,
-      data: _initData(),
-    };
-  },
-  methods: {
-    _measures(item) {
+
+const direction=VERTICAL
+const data=_initData()
+
+   const  _measures=(item)=> {
       return {
         width: item.width,
         height: item.height,
       };
-    },
-  },
-};
+    }
 </script>
 
 <template>
   <simple-widget
     ref="sw"
-    :name="name"
+    :name="props.name"
     :data="data"
     :width="260"
     :height="300"
     :padding="{ left: 10, right: 10, top: 10, bottom: 10 }"
     :direction="direction"
     :measures="_measures"
-    :onEdge="onEdge"
+    :onEdge="props.onEdge"
   >
     <template #renderItem="{ data, query, onEdge, onAction }">
       <keyboard-item
@@ -80,7 +70,7 @@ export default {
         :query="query"
         :onEdge="onEdge"
         :onAction="onAction"
-        :onClick="onClick"
+        :onClick="props.onClick"
       />
     </template>
   </simple-widget>