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

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>

package/DemoForOperator/TabContent/TabContent/TabWidget.vue

@@ -0,0 +1,243 @@
+<script setup>
+import { onMounted, inject, ref, provide, shallowRef, computed } from "vue";
+import {
+  getTextWidth,
+  ListWidget,
+  useFocusHub,
+  FixPositionSlide,
+  EdgeDirection,
+  HORIZONTAL,
+} from "jsview";
+import TabItem from "./TabItem.vue";
+import CreepFocus from "./CreepFocus.vue";
+import { getTouchFlag } from "./Util.js";
+
+const touchFlag = getTouchFlag();
+const modeIsKey = inject("modeIsKey");
+
+const tabFocus = inject("tabFocus");
+const focusHub = useFocusHub();
+const props = defineProps({
+  data: Array,
+  name: String,
+  onEdge: Function,
+  layout: Object,
+  padding: Object,
+  itemGap: Number,
+  initFocusId: Number,
+  tabTextFontSize: Number,
+  creepFocusColor: String,
+});
+console.log("layout", props.layout);
+const itemWidthExpand = 60;
+const globalInfo = inject("globalInfo");
+const slideType = new FixPositionSlide();
+
+const creepFocus = ref(null);
+const showFocus = ref(true);
+let currentFocusRect = {};
+const focusFrameController = {
+  focusVisible: (visible) => {
+    showFocus.value = visible ? true : false;
+  },
+  onFocusChange: (rect, focusIndex, doAnim) => {
+    creepFocus.value?.changeRect(rect, doAnim);
+    currentFocusRect = rect;
+  },
+};
+provide("focusFrameController", focusFrameController);
+const itemHeight = computed(
+  () =>
+    props.layout.height -
+    (props.padding?.top ?? 0) -
+    (props.padding?.bottom ?? 0)
+);
+
+const SizeObj = {
+  fontSize: props.tabTextFontSize,
+};
+const data = [];
+const getChildTabList = (childTab) => {
+  if (!childTab) {
+    return null;
+  }
+  const list = [];
+  for (let i = 0; i < childTab.length; ++i) {
+    const childTextSize = getTextWidth(childTab[i].itemTitle, SizeObj);
+    let obj = {
+      width: childTextSize + itemWidthExpand,
+      height: itemHeight.value,
+      marginRight: props.itemGap,
+      content: childTab[i].itemTitle,
+      index: i,
+      ...childTab[i],
+    };
+    list.push(obj);
+  }
+  return list;
+};
+
+for (let i = 0; i < props.data.length; ++i) {
+  const textSize = getTextWidth(props.data[i].itemTitle, SizeObj);
+  const childList = getChildTabList(props.data[i].childTab);
+  let totalWidth = 0;
+  if (childList) {
+    childList.forEach((item) => {
+      totalWidth += item.width + item.marginRight;
+    });
+  }
+  let obj = {
+    width: textSize + itemWidthExpand,
+    height: itemHeight.value,
+    content: props.data[i].itemTitle,
+    marginRight: props.itemGap,
+    name: "item_" + i, // focus name
+    ...props.data[i],
+  };
+  if (childList) {
+    obj.childTab = {
+      width: totalWidth,
+      list: childList,
+    };
+  }
+  data.push(obj);
+}
+const provideData = () => {
+  return data;
+};
+
+const measures = (item) => {
+  return {
+    width: item.width,
+    height: item.height,
+    marginRight: item.marginRight,
+    enableTap: touchFlag == 1,
+  };
+};
+
+const widgetRef = shallowRef();
+onMounted(() => {
+  provide("parentWidget", widgetRef);
+});
+
+const onFocusRectChange = () => {
+  //展开时的滑动不需要更新焦点大小
+  if (showFocus.value) {
+    const curFocusIndex = widgetRef.value.getCurrentFocusIndex();
+    const rect = widgetRef.value.getTemplatePosition(curFocusIndex);
+    focusFrameController.onFocusChange(rect, curFocusIndex);
+  }
+};
+const onAllResizeDone = () => {
+  console.log("onAllResizeDone");
+};
+
+const onItemFocus = (item_data, onBlur) => {
+  console.log("testtest onItemFocus", item_data);
+  globalInfo.tabId = item_data.indexId;
+  if (globalInfo.updateTabId == -1 || !modeIsKey()) {
+    globalInfo.updateTabId = item_data.indexId;
+  }
+  if (globalInfo.tabCode != item_data.itemCode) {
+    globalInfo.tabCode = item_data.itemCode;
+    // if (props.data.icon4) {
+    //   changeBg(props.data.icon4);
+    // }
+  }
+};
+
+const onEdge = (edgeInfo) => {
+  props.onEdge(edgeInfo);
+};
+
+const onItemClick = (data, onBlur, onFocus) => {
+  // manager.onItemTap({ onBlur: onBlur, onFocus: onFocus });
+  // if (data) {
+  //   focusHub.setFocus(props.name);
+  //   widgetRef.value.setFocusId(data.index);
+  // }
+};
+
+const onBlur = () => {
+  showFocus.value = false;
+  tabFocus.value = false;
+};
+
+const onFocus = () => {
+  showFocus.value = true;
+  tabFocus.value = true;
+};
+
+// Manager 实现
+const manager = {
+  previousItem: null,
+
+  // 注册 onBlur 方法
+  registerOnBlur(item) {
+    if (this.previousItem && this.previousItem.onBlur) {
+      this.previousItem.onBlur(); // 调用上一个 item 的 onBlur
+    }
+    if (item.onFocus) {
+      item.onFocus();
+    }
+    this.previousItem = item; // 更新上一个 item
+  },
+
+  // 处理 item 被点击
+  onItemTap(item) {
+    this.registerOnBlur(item);
+  },
+};
+</script>
+
+<template>
+  <div :style="{ left: layout.left, top: layout.top }">
+    <list-widget
+      ref="widgetRef"
+      :name="name"
+      :onFocusRectChange="onFocusRectChange"
+      :onAllItemResizeDone="onAllResizeDone"
+      :width="layout.width"
+      :height="layout.height"
+      :slideSetting="slideType"
+      :direction="HORIZONTAL"
+      :provideData="provideData"
+      :measures="measures"
+      :padding="padding"
+      :initFocusId="initFocusId"
+      :onEdge="onEdge"
+      :onFocus="onFocus"
+      :onBlur="onBlur"
+      :touchFlag="touchFlag"
+    >
+      <template #renderItem="{ data, onAction, query, onItemEdge }">
+        <tab-item
+          :data="data"
+          :onAction="onAction"
+          :query="query"
+          :onItemEdge="onItemEdge"
+          :onItemFocus="onItemFocus"
+          :onItemClick="onItemClick"
+          :creepFocusColor="creepFocusColor"
+        >
+          <template #tabItem="{ data, onAction, query }">
+            <slot
+              name="tabItem"
+              :data="data"
+              :query="query"
+              :onAction="onAction"
+            ></slot>
+          </template>
+        </tab-item>
+      </template>
+      <template #background>
+        <creep-focus
+          v-show="showFocus && modeIsKey()"
+          ref="creepFocus"
+          :color="creepFocusColor"
+        >
+        </creep-focus>
+      </template>
+    </list-widget>
+  </div>
+</template>

package/DemoForOperator/TabContent/TabContent/Util.js

@@ -0,0 +1,3 @@
+export function getTouchFlag() {
+  return 0;
+}

package/DemoForOperator/TabContent/TabContent/ViewSwiper.vue

@@ -0,0 +1,110 @@
+<script setup>
+import { onMounted, inject, ref, watch } from "vue";
+
+const props = defineProps({
+  onEdge: Function,
+  name: String,
+  layout: Object,
+  dataLoader: Function, // (tabId) => Promise
+  animDuration: { type: Number, default: 200 },
+  onFocus: Function,
+  onBlur: Function,
+});
+
+const globalInfo = inject("globalInfo");
+const animState = inject("animState");
+
+const page0Show = ref(false);
+let page0Data = null;
+const page0Anim = ref({ anim: null, onend: null });
+const appSwiper_onFocus = () => {
+  console.log("testtest swiper on focus")
+  props.onFocus();
+};
+const appSwiper_onBlur = () => {
+  console.log("testtest swiper on blur")
+  props.onBlur();
+};
+
+const appSwiper_tabIdWatcher = (newValue, oldValue) => {
+  let direction = newValue > oldValue ? "left" : "right";
+  page0Show.value = false;
+  page0Data = null;
+  page0Anim.value = ref({ anim: null, onend: null });
+  props.dataLoader(newValue).then((data) => {
+    console.log("testtest swiper data", data);
+    if (oldValue > -1) {
+      animState.value = 1;
+    }
+    page0Anim.value = {
+      anim:
+        oldValue != -1
+          ? `app-swiper-${direction}-slide-in ${
+              props.animDuration / 1000
+            }s cubic-bezier(0.05, 0.55, 0.13, 0.78) 1`
+          : null,
+      onend: () => {
+        animState.value = 0;
+      },
+    };
+    page0Data = data;
+    page0Show.value = true;
+  });
+};
+
+watch(
+  () => globalInfo.updateTabId,
+  (newValue, oldValue) => {
+    console.log("ccht updateTabId changed", globalInfo.updateTabId);
+    appSwiper_tabIdWatcher(newValue, oldValue);
+  }
+);
+</script>
+
+<template>
+  <jsv-focus-block
+    :name="name"
+    ref="focusNode"
+    :onAction="{
+      onFocus: appSwiper_onFocus,
+      onBlur: appSwiper_onBlur,
+    }"
+  >
+    <div
+      id="page0"
+      :style="{
+        left: layout.left,
+        top: layout.top,
+        width: layout.width,
+        height: layout.height,
+        animation: page0Anim.anim,
+        animationFillMode: 'forwards',
+      }"
+      @animationend="page0Anim.onend"
+    >
+      <slot v-if="page0Show" :data="page0Data" :onEdge="onEdge"></slot>
+    </div>
+  </jsv-focus-block>
+</template>
+
+<style>
+@keyframes app-swiper-left-slide-in {
+  from {
+    transform: translate3d(280px, 0px, 0px);
+  }
+  to {
+    transform: translate3d(0px, 0px, 0px);
+    /* animation-timing-function: cubic-bezier(0.05, 0.55, 0.13, 0.78); */
+  }
+}
+
+@keyframes app-swiper-right-slide-in {
+  from {
+    transform: translate3d(-280px, 0px, 0px);
+  }
+  to {
+    transform: translate3d(0px, 0px, 0px);
+    /* animation-timing-function: cubic-bezier(0.05, 0.55, 0.13, 0.78); */
+  }
+}
+</style>