@shijiu/jsview-vue-samples 2.2.426-test.0 → 2.3.151-test.0

package/DemoForOperator/TabContent/TabContent/TabContent.vue

@@ -0,0 +1,184 @@
+<template>
+  <jsv-focus-block
+    :name="name"
+    :onAction="{
+      onFocus,
+      onDispatchKeyUp,
+    }"
+  >
+    <tab-widget
+      :data="data"
+      :name="tabName"
+      :onEdge="tabOnEdge"
+      :layout="tabLayout"
+      :padding="tabPadding"
+      :itemGap="tagItemGap"
+      :initFocusId="initFocusId"
+      :tabTextFontSize="tabTextFontSize"
+      :creepFocusColor="creepFocusColor"
+    >
+      <template #tabItem="{ data, onAction, query }">
+        <slot
+          name="tabItem"
+          :data="data"
+          :query="query"
+          :onAction="onAction"
+        ></slot>
+      </template>
+    </tab-widget>
+    <view-swiper
+      :name="contentName"
+      :dataLoader="contentDataLoader"
+      :onEdge="contentOnEdge"
+      :layout="contentLayout"
+      :onFocus="contentOnFocus"
+      :onBlur="contentOnBlur"
+    >
+      <template #default="{ data, onEdge }">
+        <slot name="content" :data="data" :onEdge="onEdge"></slot>
+      </template>
+    </view-swiper>
+  </jsv-focus-block>
+</template>
+
+<script setup>
+/**
+ * @slot tabItem - 自定义标签项内容
+ * @property {Object} data - 当前标签项数据
+ * @property {Object} query - 查询参数对象
+ * @property {Function} onAction - 动作处理函数
+ * 
+ * @slot content - 自定义内容区域
+ * @property {Object} data - 内容区域数据
+ * @property {Function} onEdge - 边缘事件处理函数
+ */
+
+import TabWidget from "./TabWidget.vue";
+import ViewSwiper from "./ViewSwiper.vue";
+import { ref, reactive, provide } from "vue";
+import { useFocusHub, EdgeDirection } from "jsview";
+
+const props = defineProps({
+  /** @type {String} 组件唯一标识名称 */
+  name: {
+    type: String,
+    required: true,
+  },
+  /** @type {Array} 标签数据源 */
+  data: {
+    type: Array,
+    required: true,
+  },
+  /** @type {Object} 标签栏布局配置 */
+  tabLayout: {
+    type: Object,
+    required: true,
+  },
+  /** @type {Object} 标签栏内边距配置 */
+  tabPadding: {
+    type: Object,
+    required: true,
+  },
+  /** @type {Number} 标签项之间的间隔 */
+  tagItemGap: {
+    type: Number,
+    required: true,
+  },
+  /** @type {Object} 内容区域布局配置 */
+  contentLayout: {
+    type: Object,
+    required: true,
+  },
+  /** @type {Function} 内容区域数据加载器 */
+  contentDataLoader: {
+    type: Function,
+    required: true,
+  },
+  /** @type {Number} 初始聚焦项的ID，默认0 */
+  initFocusId: {
+    type: Number,
+    default: 0,
+  },
+  /** @type {Number} 标签文字字体大小，默认30px */
+  tabTextFontSize: {
+    type: Number,
+    default: 30,
+  },
+  /** @type {Function} 内容区域获取焦点时的回调 */
+  contentOnFocus: {
+    type: Function,
+    default: () => {},
+  },
+  /** @type {Function} 内容区域失去焦点时的回调 */
+  contentOnBlur: {
+    type: Function,
+    default: () => {},
+  },
+  /** @type {String} 聚焦时的颜色，默认#e26c44 */
+  creepFocusColor: {
+    type: String,
+    default: "#e26c44",
+  },
+});
+const focusHub = useFocusHub();
+const tabName = `${props.name}-tab`;
+const contentName = `${props.name}-content`;
+let focusName = tabName;
+
+const animState = ref(0);
+const globalInfo = reactive({
+  tabId: -1,
+  updateTabId: -1,
+});
+const getTouchFlag = () => {
+  return 0;
+};
+const tabFocus = ref(false);
+const modeIsKey = () => {
+  return true;
+};
+
+/**
+ * 处理组件获取焦点事件
+ */
+function onFocus() {
+  console.log("ccht onFocus", focusName);
+  focusHub.setFocus(focusName);
+}
+
+/**
+ * 处理标签栏边缘事件
+ * @param {Object} edgeInfo - 边缘事件信息
+ */
+function tabOnEdge(edgeInfo) {
+  console.log("testtest tab on edge");
+  if (edgeInfo.direction == EdgeDirection.bottom) {
+    focusHub.setFocus(contentName);
+    focusName = contentName;
+  }
+}
+
+/**
+ * 处理内容区域边缘事件
+ * @param {Object} edgeInfo - 边缘事件信息
+ */
+function contentOnEdge(edgeInfo) {
+  if (edgeInfo.direction == EdgeDirection.top) {
+    focusHub.setFocus(tabName);
+    focusName = tabName;
+  }
+}
+
+/**
+ * 处理按键抬起事件，更新当前标签ID
+ */
+const onDispatchKeyUp = () => {
+  globalInfo.updateTabId = globalInfo.tabId;
+};
+
+provide("animState", animState);
+provide("globalInfo", globalInfo);
+provide("tabFocus", tabFocus);
+provide("modeIsKey", modeIsKey);
+provide("getTouchFlag", getTouchFlag);
+</script>

package/DemoForOperator/TabContent/TabContent/TabItem.vue

@@ -0,0 +1,368 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 14:52:17
+ * @Description: file content
+-->
+<script setup>
+import { ref, inject, shallowRef, provide, computed } from "vue";
+import {
+  ListWidget,
+  HORIZONTAL,
+  useFocusHub,
+  getKeyFramesGroup,
+  EdgeDirection,
+} from "jsview";
+import Item from "./Item.vue";
+import CreepFocus from "./CreepFocus.vue";
+import { getTouchFlag } from "./Util.js";
+
+const tabFocus = inject("tabFocus");
+
+const touchFlag = getTouchFlag();
+const globalInfo = inject("globalInfo");
+const modeIsKey = inject("modeIsKey");
+const DURATION = 200;
+const props = defineProps({
+  data: Object,
+  query: Object,
+  onAction: Object,
+  onItemEdge: Function,
+  onItemFocus: Function,
+  onItemClick: Function,
+  creepFocusColor: String,
+});
+const focusHub = useFocusHub();
+const folded = ref(true);
+const creepFocus = ref(null);
+const showFocus = ref(true);
+const styleShell = getKeyFramesGroup();
+const itemKeepScale = ref(false);
+provide("itemKeepScale", itemKeepScale);
+
+const keepOpen = ref(false);
+const focused = ref(false);
+const width = ref(props.data.width);
+const widgetRef = shallowRef(null);
+const widgetLeft = ref(0);
+const customCallbacks = {};
+const selfOnAction = {
+  register: (name, func) => {
+    customCallbacks[name] = func;
+  },
+  unregister: (name) => {
+    delete customCallbacks[name];
+  },
+};
+
+const focusRectController = {
+  onFocusChange: (rect) => {
+    creepFocus.value?.changeRect(rect);
+  },
+};
+const focusFrameController = inject("focusFrameController");
+
+const provideData = () => {
+  return props.data.childTab.list;
+};
+
+const measures = (data) => {
+  return {
+    width: data.width,
+    height: data.height,
+    marginRight: data.marginRight,
+    enableTap: touchFlag == 1,
+  };
+};
+const openTab = () => {
+  itemKeepScale.value = false;
+  showFocus.value = true;
+  widgetLeft.value = 0;
+  folded.value = false;
+  width.value = props.data.childTab.width;
+  //为了居中而计算锚点
+  const anchor = getAnchor(0);
+  //创建动画
+  const anim = getClipAnimation(props.data.width, width.value, anchor);
+  clipAnimStr.value = anim.clip;
+  slideAnimStr.value = anim.slide;
+
+  props.query.updateItemSize(
+    props.query.index,
+    {
+      width: width.value,
+      height: props.data.height,
+    },
+    {
+      anchor,
+      duration: DURATION,
+      onEnd: () => {
+        console.log("unfold anim end.");
+      },
+    }
+  );
+  focusHub.setFocus(props.data.name);
+  focusFrameController.focusVisible(false);
+  if (!modeIsKey()) {
+    props.onItemClick(null, onBlur);
+  }
+};
+
+// 注册回调
+const onFocus = () => {
+  console.log("onFocus", focused.value);
+  if (!keepOpen.value) {
+    focusFrameController.focusVisible(true);
+    folded.value = true;
+    props.onItemFocus(props.data, onBlur);
+  } else {
+    focusHub.setFocus(props.data.name);
+    // folded.value = false;
+  }
+  focused.value = true;
+  if (folded.value && props.data.childTab) {
+    openTab();
+  } else {
+    keepOpen.value = false;
+  }
+  customCallbacks.onFocus?.();
+};
+
+const onItemFocus = (data) => {
+  focusFrameController.focusVisible(false);
+  showFocus.value = true;
+  props.onItemFocus(data);
+};
+
+const foldSubTab = () => {
+  if (!folded.value) {
+    if (width.value == props.data.childTab.width) {
+      width.value = props.data.width;
+      let index = widgetRef.value?.getCurrentFocusIndex() ?? 0;
+
+      const anchor = getAnchor(index);
+      widgetLeft.value = -Math.round(
+        (props.data.childTab.width - props.data.width) * anchor
+      );
+
+      //创建动画
+      const anim = getClipAnimation(
+        props.data.childTab.width,
+        width.value,
+        anchor
+      );
+      clipAnimStr.value = anim.clip;
+      slideAnimStr.value = anim.slide;
+
+      props.query.updateItemSize(
+        props.query.index,
+        {
+          width: width.value,
+          height: props.data.height,
+        },
+        {
+          duration: DURATION,
+          onEnd: () => {
+            focusFrameController.focusVisible(true);
+            folded.value = true;
+          },
+        }
+      );
+    }
+    focusHub.returnFocusToParent();
+  }
+};
+
+const onBlur = () => {
+  customCallbacks.onBlur?.();
+  if (!itemKeepScale.value) {
+    showFocus.value = false;
+  }
+  if (keepOpen.value) {
+    return;
+  }
+  focused.value = false;
+};
+
+let animToken = 1;
+const clipAnimStr = ref("");
+const slideAnimStr = ref("");
+const animationCache = {};
+const getClipAnimation = (from, to, anchor) => {
+  animToken++;
+  const name = "foldableItemClipAnim" + animToken;
+  if (animationCache.hasOwnProperty(name)) {
+    styleShell.removeRule(name);
+    delete animationCache[name];
+  }
+  const clipAnimStr = `@keyframes ${name} { from { width: ${from}; } to { width: ${to}; } }`;
+  animationCache[name] = clipAnimStr;
+  styleShell.insertRule(clipAnimStr);
+
+  //平移动画
+  const anchorPosition = Math.round((to - from) * anchor);
+  const slideName = "foldableItemSlideAnim" + animToken;
+  if (animationCache.hasOwnProperty(slideName)) {
+    styleShell.removeRule(slideName);
+    delete animationCache[slideName];
+  }
+  const slideAnimStr = `@keyframes ${slideName} { from { transform: translate3d(${-anchorPosition},0,0); } to { transform: translate3d(0,0,0); } }`;
+
+  animationCache[slideName] = slideAnimStr;
+  styleShell.insertRule(slideAnimStr);
+
+  return {
+    clip: `${name} ${DURATION / 1000}s`,
+    slide: `${slideName} ${DURATION / 1000}s`,
+  };
+};
+
+const getAnchor = (index) => {
+  let anchor = 0;
+  const l = props.data.childTab.list;
+  if (index <= 0) {
+    anchor = 0;
+  } else if (index > l.length - 1) {
+    anchor = 1;
+  } else {
+    let focusMiddle = 0;
+    for (let i = 0; i <= index - 1; ++i) {
+      focusMiddle += l[i].width + l[i].marginRight;
+    }
+    focusMiddle += l[index].width / 2;
+    const scaleRate = props.data.childTab.width / props.data.width;
+    const targetPercent = focusMiddle / props.data.childTab.width; // 居中目标位置的百分比
+    /**
+     * anchor计算说明
+     * 考虑[0,1]的线段, 以a(0 <= a <= 1)为锚点, 放大n倍(n > 1)
+     * 坐标的映射关系为 x -> n(x - a) + a
+     * 此处我们想要的是目标焦点的中线对齐0.5, 即targetPercent放大后的位置是0.5
+     * 所以方程为 scaleRate * (targetPercent - anchor) + anchor = 0.5
+     */
+    anchor = (scaleRate * targetPercent - 0.5) / (scaleRate - 1);
+  }
+  return anchor;
+};
+
+const onClick = () => {
+  if (folded.value && props.data.childTab) {
+    openTab();
+  } else {
+    if (!modeIsKey()) {
+      props.onItemClick(props.data, onBlur, onFocus);
+    }
+  }
+  customCallbacks.onClick?.();
+};
+
+console.log("tabitem", props.data, props.onAction);
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", onClick);
+
+const onKeyDown = (ev) => {
+  if (ev.keyCode === 10000 || ev.keyCode === 8 || ev.keyCode === 27) {
+    keepOpen.value = true;
+    // itemKeepScale.value = false;
+    // foldSubTab();
+  }
+  return false;
+};
+const onItemEdge = (edgeInfo) => {
+  if (
+    edgeInfo.direction == EdgeDirection.top ||
+    edgeInfo.direction == EdgeDirection.bottom
+  ) {
+    keepOpen.value = true;
+  } else {
+    foldSubTab();
+  }
+  props.onItemEdge(edgeInfo);
+};
+const onItemClick2 = (data) => {
+  // widgetRef.value.setFocusId(data.tabIndex);
+};
+const isSlect = computed(() => {
+  if (modeIsKey()) {
+    return (
+      !tabFocus.value &&
+      !focused.value &&
+      globalInfo.updateTabId == props.data.indexId
+    );
+  } else {
+    return globalInfo.updateTabId == props.data.indexId;
+  }
+});
+</script>
+
+<template>
+  <slot
+    v-if="folded"
+    name="tabItem"
+    :data="data"
+    :onAction="selfOnAction"
+    :query="query"
+  ></slot>
+  <div
+    v-else
+    :style="{
+      width: width,
+      height: data.height,
+      overflow: 'hidden',
+      animation: clipAnimStr,
+    }"
+  >
+    <jsv-focus-block
+      v-if="data.childTab"
+      :onAction="{
+        onKeyDown,
+      }"
+      :style="{
+        left: widgetLeft,
+        width: data.childTab.width - 10,
+        height: data.height,
+        animation: slideAnimStr,
+      }"
+    >
+      <list-widget
+        ref="widgetRef"
+        :name="data.name"
+        :width="data.childTab.width"
+        :height="data.height"
+        :provideData="provideData"
+        :direction="HORIZONTAL"
+        :measures="measures"
+        :onEdge="onItemEdge"
+        :initFocusId="0"
+        :touchFlag="touchFlag"
+      >
+        <template #renderItem="{ data, onAction, query }">
+          <item
+            :focusRectController="focusRectController"
+            :data="data"
+            :onAction="onAction"
+            :query="query"
+            :onItemFocus="onItemFocus"
+            :onItemClick="onItemClick2"
+          >
+            <template #tabItem="{ data, onAction, query }">
+              <slot
+                name="tabItem"
+                :data="data"
+                :query="query"
+                :onAction="onAction"
+              ></slot>
+            </template>
+          </item>
+        </template>
+        <template #background>
+          <creep-focus
+            v-show="showFocus && modeIsKey()"
+            ref="creepFocus"
+            :color="creepFocusColor"
+          >
+          </creep-focus>
+        </template>
+      </list-widget>
+    </jsv-focus-block>
+  </div>
+</template>