@shijiu/jsview-vue-samples 2.1.200 → 2.1.339-test.0

package/FocusMoveStyle/App.vue

@@ -1,60 +1,15 @@
 <script setup>
 import {
-  MetroWidget,
   HORIZONTAL,
-  JsvNinePatch,
   useFocusHub,
   getTextWidth,
-  getKeyFramesGroup,
+  FixPositionSlide,
+  ListWidget,
 } from "jsview";
-import Item from "./Item.vue";
+import FoldableItem from "./FoldableItem.vue";
 import redCircle from "./assets/redCircle.png";
-import { reactive, provide, onMounted, onBeforeUnmount } from "vue";
-
-const focusHub = useFocusHub();
-const styleShell = getKeyFramesGroup();
-
-const animationCache = {};
-const addAnimation = (fromRect, toRect, name) => {
-  if (animationCache.hasOwnProperty(name)) {
-    styleShell.removeRule(name);
-    delete animationCache[name];
-  }
-  console.log("LudlDebug anim");
-  if (!(name in animationCache)) {
-    const animStr = `@keyframes ${name} {
-      0% {
-        left: ${fromRect.left};
-        top: ${fromRect.top};
-        width: ${fromRect.width};
-        height: ${fromRect.height};
-      }
-      50% {
-        left: ${Math.min(fromRect.left, toRect.left)};
-        top: ${Math.min(fromRect.top, toRect.top)};
-        width: ${
-          Math.max(fromRect.left + fromRect.width, toRect.left + toRect.width) -
-          Math.min(fromRect.left, toRect.left)
-        };
-        height: ${
-          Math.max(fromRect.top + fromRect.height, toRect.top + toRect.height) -
-          Math.min(fromRect.top, toRect.top)
-        };
-      }
-      100% {
-        left: ${toRect.left};
-        top: ${toRect.top};
-        width: ${toRect.width};
-        height: ${toRect.height};
-      }
-    }`;
-    animationCache[name] = animStr;
-    styleShell.insertRule(animStr);
-  }
-};
-const removeAnimation = (name) => {
-  styleShell.removeRule(name);
-};
+import { ref, provide, onMounted } from "vue";
+import CreepFocus from "./CreepFocus.vue";
 
 const randomColor = () => {
   let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
@@ -62,40 +17,24 @@ const randomColor = () => {
     "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
   );
 };
-const focusSize = reactive({
-  width: 0,
-  height: 0,
-  left: 0,
-  top: 0,
-  animation: null,
-  onTransitionEnd: null,
-});
-
-let animateChange = 0; // A B版动画切换，解决animation属性不变化引起不刷新问题
+const slideType = new FixPositionSlide();
+const focusHub = useFocusHub();
 
+const creepFocus = ref(null);
+const showFocus = ref(true);
+let currentFocusRect = {};
 const focusFrameController = {
-  preRect: null,
-  curRect: null,
-  focusIndex: -1,
-  curAnimName: null,
-  onFocusChange: function (rect, focusIndex) {
-    this.preRect = this.curRect;
-    this.curRect = rect;
-    if (this.focusIndex >= 0) {
-      const animName = "test_focusMove_" + animateChange;
-      animateChange = animateChange == 0 ? 1 : 0; // A B 版切换
-      addAnimation(this.preRect, this.curRect, animName);
-      focusSize.animation = `${animName} 0.3s linear`;
-    }
-    focusSize.left = this.curRect.left;
-    focusSize.top = this.curRect.top;
-    focusSize.width = this.curRect.width;
-    focusSize.height = this.curRect.height;
-    this.focusIndex = focusIndex;
+  focusVisible: (visible) => {
+    showFocus.value = visible ? true : false;
+  },
+  onFocusChange: (rect, focusIndex, doAnim) => {
+    creepFocus.value?.changeRect(rect, doAnim);
+    currentFocusRect = rect;
   },
 };
 provide("focusFrameController", focusFrameController);
 
+//<<<<<<< 创建数据
 const contentData = [
   "推荐",
   "电视剧",
@@ -113,37 +52,85 @@ const contentData = [
 const SizeObj = {
   fontSize: 40,
 };
-const provideData = () => {
-  const data = [];
-  for (let i = 0; i < 12; ++i) {
-    data.push({
-      width: getTextWidth(contentData[i], SizeObj) + 60,
+const data = [];
+const getChildTabList = (textSize, childTextSize, contentText) => {
+  const list = [];
+  // 3-5个
+  const number = Math.round(Math.random() * 2 + 3);
+  for (let i = 0; i < number; ++i) {
+    list.push({
+      width: (i == number - 1 ? textSize : childTextSize) + 60,
       height: 65,
+      marginRight: i == number - 1 ? 0 : 10,
       color: randomColor(),
-      content: contentData[i],
+      content: contentText + (i == number - 1 ? "" : "_" + i),
     });
   }
+  return list;
+};
+for (let i = 0; i < 12; ++i) {
+  const textSize = getTextWidth(contentData[i], SizeObj);
+  const childTextSize = getTextWidth(contentData[i] + "_0", SizeObj);
+  const childList = getChildTabList(textSize, childTextSize, contentData[i]);
+  let totalWidth = 0;
+  childList.forEach((item) => {
+    totalWidth += item.width + item.marginRight;
+  });
+  const initFocus = Math.round(Math.random() * (childList.length - 1));
+
+  data.push({
+    width: textSize + 60,
+    height: 65,
+    color: randomColor(),
+    content: contentData[i],
+    marginRight: 10,
+    name: "item_" + i, // focus name
+    childTab: {
+      width: totalWidth, //4个item + 3个gap
+      list: childList,
+    },
+    initFocus,
+  });
+}
+const provideData = () => {
   return data;
 };
+// >>>>>>
+
+const getDetaileInfo = () => {
+  let str = "";
+  for (let item of data) {
+    str += `${item.content}共有${item.childTab.list.length}个子tab, 展开后的默认焦点为${item.initFocus}\n`;
+  }
+  return str;
+};
 
 const measures = (item) => {
   return {
     width: item.width,
     height: item.height,
-    marginRight: 10,
-    marginBottom: 10,
+    marginRight: item.marginRight,
   };
 };
 
+const widgetRef = ref();
 onMounted(() => {
+  provide("parentWidget", widgetRef);
   focusHub.setFocus("myWidget");
 });
 
-onBeforeUnmount(() => {
-  for (let name in animationCache) {
-    removeAnimation(name);
+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");
+};
 </script>
 
 <template>
@@ -163,38 +150,67 @@ onBeforeUnmount(() => {
     >
       爬行样式的焦点示例
     </div>
-    <metro-widget
+    <list-widget
+      ref="widgetRef"
       name="myWidget"
+      :onFocusRectChange="onFocusRectChange"
+      :onAllItemResizeDone="onAllResizeDone"
       :top="100"
       :left="40"
       :width="1200"
       :height="110"
+      :slideSetting="slideType"
       :direction="HORIZONTAL"
       :provideData="provideData"
       :measures="measures"
       :padding="{ left: 20, right: 20, top: 20, height: 20 }"
     >
-      <template #renderItem="{ data, onAction, query }">
-        <item :data="data" :onAction="onAction" :query="query" />
+      <template #renderItem="{ data, onAction, query, onItemEdge }">
+        <foldable-item
+          :data="data"
+          :onAction="onAction"
+          :query="query"
+          :onItemEdge="onItemEdge"
+        />
       </template>
       <template #background>
-        <jsv-nine-patch
-          :style="{
-            width: focusSize.width,
-            height: focusSize.height,
-            top: focusSize.top,
-            left: focusSize.left,
-          }"
-          :animation="focusSize.animation"
-          :imageUrl="redCircle"
-          :imageWidth="35"
-          :centerWidth="0"
-          :borderOutset="0"
-          :imageDspWidth="(focusSize.height / 17) * 2"
-          :animTime="0.2"
-          :waitForInit="true"
-        ></jsv-nine-patch>
+        <creep-focus
+          v-if="showFocus"
+          ref="creepFocus"
+          :imgUrl="redCircle"
+          :initLeft="currentFocusRect?.left"
+          :initTop="currentFocusRect?.top"
+          :initWidth="currentFocusRect?.width"
+          :initHeight="currentFocusRect?.height"
+        >
+        </creep-focus>
       </template>
-    </metro-widget>
+    </list-widget>
+  </div>
+
+  <div
+    :style="{
+      left: 100,
+      top: 250,
+      width: 1280,
+      height: 400,
+      fontSize: 25,
+      color: '#FFFFFF',
+    }"
+  >
+    OK键展开, 返回键折叠.
+    展开后的默认焦点的位置和展开前相同(第一个和最后一个除外)
+  </div>
+  <div
+    :style="{
+      left: 100,
+      top: 300,
+      width: 1280,
+      height: 400,
+      fontSize: 20,
+      color: '#FFFFFF',
+    }"
+  >
+    {{ getDetaileInfo() }}
   </div>
 </template>

package/FocusMoveStyle/CreepFocus.vue

@@ -0,0 +1,128 @@
+<script setup>
+import { JsvNinePatch, getKeyFramesGroup } from "jsview";
+import { reactive, onBeforeUnmount } from "vue";
+
+const props = defineProps({
+  imgUrl: {
+    type: String,
+  },
+  initWidth: {
+    type: Number,
+    default: 0,
+  },
+  initHeight: {
+    type: Number,
+    default: 0,
+  },
+  initLeft: {
+    type: Number,
+    default: 0,
+  },
+  initTop: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const styleShell = getKeyFramesGroup();
+
+const animationCache = {};
+const addAnimation = (fromRect, toRect, name) => {
+  if (animationCache.hasOwnProperty(name)) {
+    styleShell.removeRule(name);
+    delete animationCache[name];
+  }
+  if (!(name in animationCache)) {
+    const animStr = `@keyframes ${name} {
+      0% {
+        left: ${fromRect.left};
+        top: ${fromRect.top};
+        width: ${fromRect.width};
+        height: ${fromRect.height};
+      }
+      50% {
+        left: ${Math.min(fromRect.left, toRect.left)};
+        top: ${Math.min(fromRect.top, toRect.top)};
+        width: ${
+          Math.max(fromRect.left + fromRect.width, toRect.left + toRect.width) -
+          Math.min(fromRect.left, toRect.left)
+        };
+        height: ${
+          Math.max(fromRect.top + fromRect.height, toRect.top + toRect.height) -
+          Math.min(fromRect.top, toRect.top)
+        };
+      }
+      100% {
+        left: ${toRect.left};
+        top: ${toRect.top};
+        width: ${toRect.width};
+        height: ${toRect.height};
+      }
+    }`;
+    animationCache[name] = animStr;
+    styleShell.insertRule(animStr);
+  }
+};
+const removeAnimation = (name) => {
+  styleShell.removeRule(name);
+};
+
+const focusSize = reactive({
+  width: props.initWidth,
+  height: props.initHeight,
+  left: props.initLeft,
+  top: props.initTop,
+  animation: null,
+  onTransitionEnd: null,
+});
+
+let animateChange = 0; // A B版动画切换，解决animation属性不变化引起不刷新问题
+let preRect = null;
+let curRect = null;
+let first = true;
+
+const changeRect = (rect, doAnim = true) => {
+  preRect = curRect;
+  curRect = rect;
+  if (first) {
+    first = false;
+  } else if (doAnim) {
+    const animName = "test_focusMove_" + animateChange;
+    animateChange = animateChange == 0 ? 1 : 0; // A B 版切换
+    addAnimation(preRect, curRect, animName);
+    focusSize.animation = `${animName} 0.3s linear`;
+  }
+  focusSize.left = curRect.left;
+  focusSize.top = curRect.top;
+  focusSize.width = curRect.width;
+  focusSize.height = curRect.height;
+};
+
+onBeforeUnmount(() => {
+  for (let name in animationCache) {
+    removeAnimation(name);
+  }
+});
+
+defineExpose({
+  changeRect,
+});
+</script>
+
+<template>
+  <jsv-nine-patch
+    :style="{
+      width: focusSize.width,
+      height: focusSize.height,
+      top: focusSize.top,
+      left: focusSize.left,
+    }"
+    :animation="focusSize.animation"
+    :imageUrl="imgUrl"
+    :imageWidth="35"
+    :centerWidth="0"
+    :borderOutset="0"
+    :animTime="0.2"
+    :waitForInit="true"
+  ></jsv-nine-patch>
+</template>

package/FocusMoveStyle/FoldableItem.vue

@@ -0,0 +1,279 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 14:52:17
+ * @Description: file content
+-->
+<script setup>
+import { ref, inject, shallowRef, provide } from "vue";
+import { ListWidget, HORIZONTAL, useFocusHub, getKeyFramesGroup } from "jsview";
+import Item from "./Item.vue";
+import CreepFocus from "./CreepFocus.vue";
+import redCircle from "./assets/redCircle.png";
+
+const DURATION = 200;
+const props = defineProps({
+  data: Object,
+  query: Object,
+  onAction: Object,
+  onItemEdge: Function,
+});
+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 focused = ref(false);
+const width = ref(props.data.width);
+const widgetRef = shallowRef(null);
+const widgetLeft = ref(0);
+
+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,
+  };
+};
+
+// 注册回调
+const onFocus = () => {
+  focusFrameController.focusVisible(true);
+  focused.value = true;
+  folded.value = true;
+};
+
+const foldSubTab = () => {
+  if (!folded.value) {
+    if (width.value == props.data.childTab.width) {
+      // showFocus.value = false;
+      width.value = props.data.width;
+      let index =
+        widgetRef.value?.getCurrentFocusIndex() ?? props.data.initFocus;
+
+      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;
+            console.log("fold anim end.");
+          },
+        }
+      );
+    }
+    focusHub.returnFocusToParent();
+  }
+};
+
+const onBlur = () => {
+  if (!itemKeepScale.value) {
+    showFocus.value = false;
+  }
+  focused.value = false;
+  foldSubTab();
+};
+
+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) {
+    itemKeepScale.value = false;
+    showFocus.value = true;
+    widgetLeft.value = 0;
+    folded.value = false;
+    width.value = props.data.childTab.width;
+    //为了居中而计算锚点
+    const anchor = getAnchor(props.data.initFocus);
+    //创建动画
+    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);
+  }
+};
+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) {
+    itemKeepScale.value = true;
+    foldSubTab();
+    return true;
+  }
+  return false;
+};
+</script>
+
+<template>
+  <div
+    v-if="folded"
+    :style="{
+      fontSize: 40,
+      width: data.width,
+      height: data.height,
+      color: '#FFFFFF',
+      textAlign: 'center',
+      lineHeight: data.height,
+      transform: focused ? 'scale3d(1.1,1.1,1)' : 'scale3d(1,1,1)',
+    }"
+  >
+    {{ data.content }}
+  </div>
+  <div
+    v-else
+    :style="{
+      width: width,
+      height: data.height,
+      overflow: 'hidden',
+      animation: clipAnimStr,
+    }"
+  >
+    <jsv-focus-block
+      :onAction="{
+        onKeyDown,
+      }"
+      :style="{
+        left: widgetLeft,
+        width: data.childTab.width,
+        height: data.height,
+        backgroundColor: '#00990099',
+        borderRadius: 10,
+        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="data.initFocus"
+      >
+        <template #renderItem="{ data, onAction, query }">
+          <item
+            :focusRectController="focusRectController"
+            :data="data"
+            :onAction="onAction"
+            :query="query"
+          />
+        </template>
+        <template #background>
+          <creep-focus v-if="showFocus" ref="creepFocus" :imgUrl="redCircle">
+          </creep-focus>
+        </template>
+      </list-widget>
+    </jsv-focus-block>
+  </div>
+</template>