@shijiu/jsview-vue-samples 2.2.201 → 2.2.373

package/TouchWidget/App.vue

@@ -4,11 +4,14 @@
  * @Description: file content
 -->
 <script setup>
-import { MetroWidget, VERTICAL, useFocusHub, METRO_WIDGET_CONST } from "jsview";
+import { MetroWidget, VERTICAL, useFocusHub, METRO_WIDGET_CONST, JsvTouchModeSwitcher } from "jsview";
 import WidgetItem from "./WidgetItem.vue";
-import { onMounted } from "vue";
+import { onMounted, ref, onBeforeUnmount, provide } from "vue";
 
 const focusHub = useFocusHub();
+focusHub.enableFocusTrace()
+const modeSwitchRef = ref();
+const modeString = ref("key")
 
 const provideData = () => {
   const data = [];
@@ -35,52 +38,88 @@ const measures = (item) => {
   };
 };
 
+const onModeChange = (mode) => {
+  modeString.value = mode == 1 ? "key" : "touch";
+}
+
+provide("modeSwitch", modeSwitchRef)
+
+const widgetRef = ref();
+function onScroll(visibleStart, range, totalSize) {
+  console.log("onScroll", visibleStart, range, totalSize);
+}
 onMounted(() => {
+  modeSwitchRef.value.registerCallback(onModeChange);
   focusHub.setFocus("mwWidget");
+  widgetRef.value.setSensorSensitivity(12);
 });
+
+onBeforeUnmount(() => {
+  modeSwitchRef.value.unregisterCallback(onModeChange);
+})
 </script>
 
 <template>
-  <div :style="{ width: 1280, height: 720, backgroundColor: '#007788' }" />
-  <div
-    :style="{
-      left: 100,
-      top: 20,
-      width: 800,
-      height: 400,
-      fontSize: 30,
-      color: '#FFFFFF',
-    }"
-  >
-    {{ `MetroWidget的item是包含MetroWidget的组件` }}
-  </div>
-  <!-- 为了保证边缘的item缩放后依旧完整显示, 需要设置padding, 注意width/height是包含padding的 -->
-  <metro-widget
-    name="mwWidget"
-    :top="50"
-    :left="50"
-    :width="660"
-    :height="600"
-    :provideData="provideData"
-    :padding="{ left: 30, right: 30 }"
-    :direction="VERTICAL"
-    :measures="measures"
-    :touchFlag="1"
+  <jsv-touch-mode-switcher
+    ref="modeSwitchRef"
+    :width="1280"
+    :height="720"
   >
-    <!-- 重要代码: 为了实现焦点就近移动, 需要传递onItemEdge回调 -->
-    <template #renderItem="{ data, onAction, onItemEdge }">
-      <widget-item :data="data" :onAction="onAction" :onItemEdge="onItemEdge" />
-    </template>
-  </metro-widget>
+    <div :style="{ width: 1280, height: 720, backgroundColor: '#007788' }" />
+    <div
+      :style="{
+        left: 100,
+        top: 20,
+        width: 800,
+        height: 400,
+        fontSize: 30,
+        color: '#FFFFFF',
+      }"
+    >
+      {{ `MetroWidget的item是包含MetroWidget的组件` }}
+    </div>
+    <!-- 为了保证边缘的item缩放后依旧完整显示, 需要设置padding, 注意width/height是包含padding的 -->
+    <metro-widget
+      name="mwWidget"
+      ref="widgetRef"
+      :top="50"
+      :left="50"
+      :width="660"
+      :height="600"
+      :provideData="provideData"
+      :padding="{ left: 30, right: 30 }"
+      :direction="VERTICAL"
+      :measures="measures"
+      :touchFlag="1"
+      :onScroll="onScroll"
+    >
+      <!-- 重要代码: 为了实现焦点就近移动, 需要传递onItemEdge回调 -->
+      <template #renderItem="{ data, onAction, onItemEdge }">
+        <widget-item
+          :data="data"
+          :onAction="onAction"
+          :onItemEdge="onItemEdge"
+        />
+      </template>
+    </metro-widget>
 
-  <div
-    :style="{
-      width: 50,
-      height: 50,
-      backgroundColor: '#ff000055',
-      animation: 'testRotate 2s infinite',
-    }"
-  ></div>
+    <div
+      :style="{
+        width: 50,
+        height: 50,
+        backgroundColor: '#ff000055',
+        animation: 'testRotate 2s infinite',
+      }"
+    ></div>
+  </jsv-touch-mode-switcher>
+  <div :style="{
+    width: 300,
+    height: 50,
+    fontSize: 30,
+    color: '#ffffff'
+  }">
+    {{ modeString }}
+  </div>
 </template>
 
 <style scoped>

package/TouchWidget/Item.vue

@@ -4,20 +4,32 @@
  * @Description: file content
 -->
 <script setup>
-import { ref } from "vue";
+import { ref, inject } from "vue";
 
 const props = defineProps({
   data: Object,
   onAction: Object,
 });
-
+const modeSwitch = inject("modeSwitch");
 const focused = ref(false);
 
+const modeChangeCallback = (mode) => {
+  if (mode == 2) {
+    focused.value = false;
+  } else {
+    focused.value = true;
+  }
+};
+
 // 自身的焦点状态自己记录, 通过回调来改变
 const onFocus = () => {
-  focused.value = true;
+  modeSwitch.value?.registerCallback(modeChangeCallback);
+  if (modeSwitch.value?.getInteractiveMode() == 1) {
+    focused.value = true;
+  }
 };
 const onBlur = () => {
+  modeSwitch.value?.unregisterCallback(modeChangeCallback);
   focused.value = false;
 };
 const onClick = () => {

package/index.d.ts

@@ -1,4 +1,4 @@
-import App, { router } from './DemoHomepage/App.vue'
+import App, { router } from './DemoHomepage'
 
 export default App
 export { router }

package/package.json

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

package/TouchSample/App.vue

@@ -1,136 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2022-04-10 21:20:39
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-08 14:12:05
- * @Description: file content
--->
-<script>
-import MetroWidgetHorizontal from "./MetroWidgetHorizontal.vue";
-import MetroWidgetVertical from "./MetroWidgetVertical.vue";
-import TouchContainerHorizontal from "./TouchContainerHorizontal.vue";
-import TouchContainerVertical from "./TouchContainerVertical.vue";
-import { jJsvRuntimeBridge, JsvTouchContainer } from "jsview";
-
-export default {
-  components: {
-    MetroWidgetHorizontal,
-    MetroWidgetVertical,
-    TouchContainerHorizontal,
-    JsvTouchContainer,
-    TouchContainerVertical,
-  },
-  data() {
-    return {
-      metroVerticalVisible: false,
-      metroHorizontalVisible: true,
-      touchContainerHorizontalVisible: false,
-      touchContainerVerticalVisible: false,
-      head: "SimpleWidget 横向",
-    };
-  },
-  setup() {
-    const tabList = [
-      "SimpleWidget 横向",
-      "SimpleWidget 纵向",
-      "TouchContainer 横向",
-      "TouchContainer 纵向",
-    ];
-    return {
-      tabList,
-    };
-  },
-  methods: {
-    _onClick(id) {
-      switch (id) {
-        case 0:
-          this.head = "SimpleWidget 横向";
-          this.metroVerticalVisible = false;
-          this.metroHorizontalVisible = true;
-          this.touchContainerHorizontalVisible = false;
-          this.touchContainerVerticalVisible = false;
-          break;
-        case 1:
-          this.head = "SimpleWidget 纵向";
-          this.metroVerticalVisible = true;
-          this.metroHorizontalVisible = false;
-          this.touchContainerHorizontalVisible = false;
-          this.touchContainerVerticalVisible = false;
-          break;
-        case 2:
-          this.head = "TouchContainer 横向";
-          this.metroVerticalVisible = false;
-          this.metroHorizontalVisible = false;
-          this.touchContainerHorizontalVisible = true;
-          this.touchContainerVerticalVisible = false;
-          break;
-        case 3:
-          this.head = "TouchContainer 纵向";
-          this.metroVerticalVisible = false;
-          this.metroHorizontalVisible = false;
-          this.touchContainerHorizontalVisible = false;
-          this.touchContainerVerticalVisible = true;
-          break;
-        default:
-          break;
-      }
-      return true;
-    },
-  },
-  mounted() {
-    jJsvRuntimeBridge.notifyPageLoaded();
-  },
-};
-</script>
-
-<template>
-  <div
-    :style="{
-      width: 1280,
-      height: 720 * 2,
-      backgroundColor: '#1b2697',
-    }"
-  >
-    <jsv-touch-container
-      v-for="(title, index) of tabList"
-      :key="'tab' + index"
-      :style="{
-        left: 50 + 300 * index,
-        top: 10,
-        width: 280,
-        height: 50,
-        backgroundColor: '#ff0000',
-        fontSize: 18,
-        lineHeight: 50,
-      }"
-      :onClick="
-        () => {
-          return this._onClick(index);
-        }
-      "
-      :direction="DIRECTION_DISABLE"
-    >
-      {{ title }}
-    </jsv-touch-container>
-
-    <div
-      :style="{
-        left: 30,
-        top: 60,
-        width: 400,
-        height: 50,
-        fontSize: 30,
-        lineHeight: 50,
-        color: '#f0ef29',
-      }"
-    >
-      {{ head }}
-    </div>
-    <div :style="{ left: 30, top: 120 }">
-      <metro-widget-horizontal v-if="metroHorizontalVisible" />
-      <metro-widget-vertical v-if="metroVerticalVisible" />
-      <touch-container-horizontal v-if="touchContainerHorizontalVisible" />
-      <touch-container-vertical v-if="touchContainerVerticalVisible" />
-    </div>
-  </div>
-</template>

package/TouchSample/Item.vue

@@ -1,102 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2022-04-10 21:21:43
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-04-10 21:21:44
- * @Description: file content
--->
-<script>
-function randomColor() {
-  let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
-  return (
-    "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
-  );
-}
-export default {
-  props: {
-    data: Object,
-    query: Object,
-    onEdge: Function,
-    onAction: Object,
-    test: Object,
-  },
-  data() {
-    return {
-      focused: false,
-    };
-  },
-  setup() {
-    return {
-      randomColor,
-    };
-  },
-  computed: {
-    style() {
-      return {
-        width: this.data.width,
-        height: this.data.height,
-        color: "#FFFFFF",
-        backgroundColor: this.focused ? "#FF0000" : this.data.color,
-      };
-    },
-  },
-  methods: {
-    onFocus() {
-      this.focused = true;
-      console.log("cchtest item onfocus", this.data);
-    },
-
-    onBlur() {
-      this.focused = false;
-    },
-
-    onClick() {
-      console.log(`item ${this.query.id} clicked`);
-    },
-  },
-  created() {
-    // console.log("cchtest item created", this.data.content)
-    this.onAction.register("onFocus", this.onFocus);
-    this.onAction.register("onBlur", this.onBlur);
-    this.onAction.register("onClick", this.onClick);
-  },
-  mounted() {
-    // console.log("cchtest item mounted", this.data.content)
-  },
-  beforeUnmount() {
-    // console.log("cchtest item unmount", this.data.content)
-  },
-  updated() {
-    // console.log("cchtest item update", this.data.content)
-  },
-};
-</script>
-
-<template>
-  <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',
-    }"
-  />
-</template>
-
-<style scoped>
-.focus {
-  transform: scale3d(1, 1, 1);
-  transition: transform 0.25s linear;
-  font-size: 30;
-}
-
-.blur {
-  transform: scale3d(1, 1, 1);
-  transition: transform 0.25s linear;
-  font-size: 30;
-}
-</style>

package/TouchSample/MetroWidgetHorizontal.vue

@@ -1,144 +0,0 @@
-<script>
-import {
-  HORIZONTAL,
-  MetroWidget,
-  WholePageSlide,
-  SeamlessSlide,
-  FixPositionSlide,
-} from "jsview";
-
-import Item from "./Item.vue";
-
-import { metroWidgetH, measures } from "./data.js";
-import { ref } from "vue";
-
-export default {
-  components: {
-    MetroWidget,
-    Item,
-  },
-  setup() {
-    return {
-      measures,
-      name: "/metroWidgetH",
-      direction: HORIZONTAL,
-      wholePageSlide: new WholePageSlide({
-        speed: 1.5,
-      }),
-      seamlessSlide: new SeamlessSlide({
-        startPercent: 0.4,
-        endPercent: 0.6,
-        speed: 0.5,
-      }),
-      fixPositionSlide: new FixPositionSlide({
-        fixPercent: 0.5,
-        speed: 0.5,
-      }),
-      token: ref(0),
-      CONST_ITEM_WIDTH: 100,
-      CONST_ITEM_HEIGHT: 200,
-    };
-  },
-  methods: {
-    _provideData() {
-      return metroWidgetH;
-    },
-  },
-
-  mounted() {},
-};
-</script>
-
-<template>
-  <div class="rootSize">
-    <div :style="{ width: 1280, height: 720, left: 50 }">
-      <div
-        :style="{
-          top: 0,
-          width: 200,
-          height: 40,
-          fontSize: 25,
-          lineHeight: 40,
-          color: '#fff753',
-        }"
-      >
-        整页滑动
-      </div>
-      <div
-        :style="{
-          top: 50,
-          width: CONST_ITEM_WIDTH * 10 + 20,
-          height: CONST_ITEM_HEIGHT + 20,
-          backgroundColor: '#ff0000',
-        }"
-      >
-        <metro-widget
-          name="simpleWidgetHorizontal1"
-          :width="CONST_ITEM_WIDTH * 10 + 20"
-          :height="CONST_ITEM_HEIGHT + 20"
-          :direction="direction"
-          :measures="measures"
-          :provideData="_provideData"
-          :padding="{ top: 10, left: 10, right: 10, bottom: 10 }"
-          :enableTouch="true"
-          :flingPageWidth="CONST_ITEM_WIDTH * 10"
-        >
-          <template #renderItem="{ data, query, onEdge, onAction }">
-            <item
-              :data="data"
-              :query="query"
-              :onEdge="onEdge"
-              :onAction="onAction"
-            /> </template
-        ></metro-widget>
-      </div>
-      <div
-        :style="{
-          top: CONST_ITEM_HEIGHT + 100,
-          width: 200,
-          height: 40,
-          fontSize: 25,
-          lineHeight: 40,
-          color: '#fff753',
-        }"
-      >
-        普通滑动
-      </div>
-      <div
-        :style="{
-          top: CONST_ITEM_HEIGHT + 100 + 50,
-          width: CONST_ITEM_WIDTH * 10 + 20,
-          height: CONST_ITEM_HEIGHT + 20,
-          backgroundColor: '#ff0000',
-        }"
-      >
-        <metro-widget
-          name="simpleWidgetHorizontal2"
-          :width="CONST_ITEM_WIDTH * 10 + 20"
-          :height="CONST_ITEM_HEIGHT + 20"
-          :direction="direction"
-          :measures="measures"
-          :provideData="_provideData"
-          :padding="{ top: 10, left: 10, right: 10, bottom: 10 }"
-          :enableTouch="true"
-        >
-          <template #renderItem="{ data, query, onEdge, onAction }">
-            <item
-              :data="data"
-              :query="query"
-              :onEdge="onEdge"
-              :onAction="onAction"
-            /> </template
-        ></metro-widget>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.rootSize {
-  width: 1920;
-  height: 1080;
-  background-color: #334c4c;
-}
-</style>