@shijiu/jsview-vue-samples 2.3.0 → 2.3.728-alpha.0

package/MetroWidgetDemos/ListExpand/ExpandItem1.vue

@@ -0,0 +1,403 @@
+<!-- 通用item -->
+<script setup>
+import {
+  JsvMarquee,
+  getKeyFramesGroup,
+  useFocusHub,
+  EdgeDirection,
+} from "jsview";
+import { shallowRef, ref, onMounted, nextTick, inject, computed, onBeforeUnmount } from "vue";
+import WidgetListHandler from "./components/WidgetListHandler.vue";
+import ChildItem from "./ChildItem.vue";
+const props = defineProps({
+  data: Object,
+  name: String,
+  onAction: Object,
+  query: Object,
+  onClick: Function,
+  onFocus: Function,
+  onBlur: Function,
+  onItemEdge: Function,
+  foldEvent: Function,
+  onExpandHeight: Function,
+});
+
+const focused = shallowRef(false);
+const gazed = shallowRef(false);
+const parentWidget = inject("parentWidget", {});
+const divRef = shallowRef(null);
+
+// item样式
+const itemStyle = {
+  ...props.data.itemStyle,
+};
+
+// 图片样式
+const imgStyle = {
+  ...props.data.imgStyle,
+};
+
+// 图标样式
+const iconStyle = {
+  ...props.data.iconStyle,
+};
+
+// 文本样式
+const textStyle = {
+  ...props.data.textStyle,
+  width: props.data.textStyle.padding
+    ? props.data.textStyle.width -
+      (props.data.textStyle.padding.left || 0) -
+      (props.data.textStyle.padding.right || 0)
+    : props.data.textStyle.width,
+  height: props.data.textStyle.padding
+    ? props.data.textStyle.height -
+      (props.data.textStyle.padding.top || 0) -
+      (props.data.textStyle.padding.bottom || 0)
+    : props.data.textStyle.height,
+  left:
+    (props.data.textStyle.left || 0) +
+    (props.data.textStyle.padding?.left || 0),
+  top:
+    (props.data.textStyle.top || 0) + (props.data.textStyle.padding?.top || 0),
+  whiteSpace: "nowrap",
+  textOverflow: "ellipsis",
+  overflow: "hidden",
+};
+
+// 焦点样式
+const focusStyle = {
+  ...itemStyle,
+  ...props.data.focusStyle,
+};
+
+// 焦点图片样式
+const focusImgStyle = {
+  ...imgStyle,
+  ...props.data.focusImgStyle,
+};
+
+// 焦点图标样式
+const focusIconStyle = {
+  ...iconStyle,
+  ...props.data.focusIconStyle,
+};
+
+// 焦点文本样式
+const focusTextStyle = {
+  ...textStyle,
+  ...props.data.focusTextStyle,
+};
+
+// 失焦样式
+const blurStyle = {
+  ...itemStyle,
+  ...props.data.blurStyle,
+};
+
+// 失焦图片样式
+const blurImgStyle = {
+  ...imgStyle,
+  ...props.data.blurImgStyle,
+};
+
+// 失焦图标样式
+const blurIconStyle = {
+  ...iconStyle,
+  ...props.data.blurIconStyle,
+};
+
+// 失焦文本样式
+const blurTextStyle = {
+  ...textStyle,
+  ...props.data.blurTextStyle,
+};
+
+/**
+ * 关键代码
+ * 焦点快速往复移动时, 复用一个子widget会导致slideToDiv焦点位置的偏移, 因此每次缩放时都创建新的widget
+ */
+const duration = 200;
+const focusHub = useFocusHub();
+let folded = ref(true);
+const styleShell = getKeyFramesGroup();
+const itemBoxHeight = props.data.itemStyle.height;
+const expandChildrenHeight = computed(() => {
+  const totalHeight = props.data.expandChildren.length * itemBoxHeight;
+  return totalHeight;
+});
+const widgetRef = shallowRef(null);
+const widgetTop = ref(0);
+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 { height: ${from}; } to { height: ${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(0,${-anchorPosition},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.expandChildren;
+  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].height;
+    }
+    focusMiddle += l[index].height / 2;
+    const maxHeight = expandChildrenHeight.value + itemBoxHeight;
+    const scaleRate = maxHeight / itemBoxHeight;
+    const targetPercent = focusMiddle / maxHeight; // 居中目标位置的百分比
+    /**
+     * 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 foldSubTab = () => {
+  if (!folded.value) {
+    updateWidgetHeight(itemBoxHeight, function () {
+      folded.value = true;
+    });
+    focusHub.returnFocusToParent();
+  }
+  props.foldEvent();
+  props.onExpandHeight?.(0);
+};
+
+const expand = (type) => {
+  if (folded.value && props.data.expandChildren.length > 0) {
+    widgetTop.value = itemBoxHeight;
+    /**
+     * 动画未结束时, widgetTop不为0, 此时又获焦那一帧同时设置的widgetTop值未同步到div, slideToDiv获取的就不是展开后item的正确位置
+     */
+    folded.value = false;
+    if (!type) {
+      nextTick(() => {
+        widgetRef.value.setFocusId(0);
+        focusHub.setFocus(props.name + "_" + props.query.index);
+      });
+    }
+    props.onExpandHeight?.(expandChildrenHeight.value);
+
+    nextTick(() => {
+      updateWidgetHeight(expandChildrenHeight.value + itemBoxHeight);
+    });
+  }
+  props.foldEvent();
+};
+
+//在回调中更改自身状态
+const onFocus = () => {
+  focused.value = true;
+  if (parentWidget.value && divRef.value) {
+    parentWidget.value.slideToDiv(divRef.value, true);
+  }
+  if (!folded.value) {
+    focusHub.setFocus(props.name + "_" + props.query.index);
+  } else {
+    if (props.onFocus) {
+      props.onFocus(props.data, props.query);
+    }
+  }
+};
+
+const onBlur = () => {
+  focused.value = false;
+  if (props.onBlur) {
+    props.onBlur(props.data, props.query);
+  }
+};
+
+const onClick = () => {
+  if (folded.value) {
+    expand();
+  } else {
+    // foldSubTab()
+  }
+  if (props.onClick) {
+    props.onClick(props.data, props.query);
+  }
+};
+
+// 无论widget是否获焦 item获焦
+const onGaze = () => {
+  gazed.value = true;
+};
+
+// 无论widget是否获焦 item失焦
+const onIgnore = () => {
+  gazed.value = false;
+};
+
+// 子列表获焦
+const onChildFocus = (data, query) => {
+  if (props.onFocus) {
+    props.onFocus(data, query);
+  }
+};
+
+// 子列表按键
+const childKeyDown = (e) => {
+  if (e.keyCode === 10000 || e.keyCode === 8 || e.keyCode === 27) {
+    foldSubTab();
+    return true;
+  }
+};
+
+const onChildEdge = (edgeInfo) => {
+  if (edgeInfo.direction === EdgeDirection.top) {
+    foldSubTab();
+  } else if (edgeInfo.direction === EdgeDirection.bottom) {
+    foldSubTab();
+    props.onItemEdge(edgeInfo);
+  } else {
+    props.onItemEdge(edgeInfo);
+  }
+};
+
+let preHeight = itemBoxHeight;
+const updateWidgetHeight = (h, callback) => {
+  const anchor = getAnchor(0);
+  //创建动画
+  const anim = getClipAnimation(preHeight, h, anchor);
+  preHeight = h;
+  clipAnimStr.value = anim.clip;
+  slideAnimStr.value = anim.slide;
+  props.query.updateItemSize(
+    props.query.index,
+    {
+      width: props.data.itemStyle.width,
+      height: h,
+    },
+    {
+      anchor,
+      duration: duration,
+      onEnd: () => {
+        callback && callback();
+        console.log("unfold anim end.");
+      },
+    }
+  );
+};
+
+// 注册回调
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", onClick);
+props.onAction.register("onGaze", onGaze);
+props.onAction.register("onIgnore", onIgnore);
+
+</script>
+
+<template>
+  <div
+    ref="divRef"
+    v-if="folded"
+    :style="focused ? focusStyle : gazed ? blurStyle : itemStyle"
+  >
+    <div
+      v-if="imgStyle"
+      :style="focused ? focusImgStyle : gazed ? blurImgStyle : imgStyle"
+    ></div>
+    <div v-if="iconStyle" :style="iconStyle"></div>
+    <!-- 正常显示文字 -->
+    <div v-if="data.data.textVisible">
+      <jsv-marquee
+        v-if="focused"
+        :style="focusTextStyle"
+        :text="data.data.name"
+      ></jsv-marquee>
+      <div v-else :style="gazed ? blurTextStyle : textStyle">
+        {{ data.data?.name }}
+      </div>
+    </div>
+  </div>
+  <div
+    v-else
+    :style="{
+      width: data.itemStyle.width,
+      height: expandChildrenHeight + itemBoxHeight,
+      overflow: 'hidden',
+      animation: clipAnimStr,
+    }"
+  >
+    <div :style="blurStyle">
+      <div v-if="imgStyle" :style="blurImgStyle"></div>
+      <div v-if="iconStyle" :style="blurIconStyle"></div>
+      <div v-if="data.data.textVisible">
+        <div :style="blurTextStyle">{{ data.data?.name }}</div>
+      </div>
+    </div>
+    <jsv-focus-block
+      :style="{
+        top: itemBoxHeight,
+        width: data.itemStyle.width,
+        height: expandChildrenHeight,
+        backgroundColor: 'rgba(0, 0, 0, .2)',
+        borderRadius: 20,
+      }"
+      :onKeyDown="childKeyDown"
+    >
+      <WidgetListHandler
+        ref="widgetRef"
+        :layout="{
+          left: 0,
+          top: 0,
+          width: data.itemStyle.width,
+          height: expandChildrenHeight,
+        }"
+        :name="props.name + '_' + props.query.index"
+        :data="data.expandChildren"
+        :onWidgetFocus="onChildFocus"
+        :onEdge="onChildEdge"
+        :fullDisplayMode="true"
+      >
+        <template #item="slotProps">
+          <ChildItem
+            v-bind="slotProps"
+            :name="props.name + '_' + props.query.index"
+            :foldEvent="props.foldEvent"
+          />
+        </template>
+      </WidgetListHandler>
+    </jsv-focus-block>
+  </div>
+</template>
+
+<style scoped></style>

package/MetroWidgetDemos/ListExpand/components/WidgetListHandler.vue

@@ -0,0 +1,150 @@
+<!-- 通用Widget处理器 -->
+<template>
+    <list-widget
+        ref="metroWidgetRef"
+        :name="name"
+        :left="layout.left"
+        :top="layout.top"
+        :width="layout.width"
+        :height="layout.height"
+        :padding="layout.padding"
+        :provideData="provideData"
+        :direction="direction === 'V' ? VERTICAL : HORIZONTAL"
+        :measures="measures"
+        :fullDisplayMode="fullDisplayMode"
+        :onSizeChange="onSizeChange"
+    >
+        <template #renderItem="{ data, onAction, query, onItemEdge }">
+            <slot
+                name="item"
+                :data="data"
+                :onAction="onAction"
+                :query="query"
+                :onClick="onClick"
+                :onFocus="onFocus"
+                :onBlur="onBlur"
+                :onItemEdge="onItemEdge"
+            ></slot>
+        </template>
+    </list-widget>
+</template>
+
+<script setup>
+import {
+    ListWidget,
+    VERTICAL, // 定义MetroWidget方向的Symbol
+    HORIZONTAL,
+} from 'jsview'
+
+import { ref, onMounted, watch } from 'vue'
+const props = defineProps({
+    name: String,
+    data: Array,
+    direction: {
+        type: String,
+        default: 'V',
+    },
+    layout: {
+        type: Object,
+        default: () => {
+            return {
+                left: 0,
+                top: 0,
+                width: 0,
+                height: 0,
+            }
+        },
+    },
+    onWidgetFocus: Function,
+    onWidgetClick: Function,
+    onWidgetBlur: Function,
+    fullDisplayMode: {
+        type: Boolean,
+        default: false,
+    },
+})
+
+const onSizeChange = (size) => {
+    console.log('myt onSizeChange', props.name, size)
+}
+
+const metroWidgetRef = ref(null)
+
+//提供数据的回调
+const provideData = () => {
+    return props.data
+}
+
+// 提供item布局信息的回调
+const measures = (data) => {
+    return {
+        left: data.left,
+        top: data.top,
+        width: data.width,
+        height: data.height,
+        marginRight: data.marginRight,
+        marginBottom: data.marginBottom,
+        focusable: !data.focusdisable
+    }
+}
+
+const onFocus = (data, query) => {
+    if (props.onWidgetFocus) {
+        props.onWidgetFocus(data, query)
+    }
+}
+
+const onClick = (data, query) => {
+    // 记录离开页面时的焦点
+    if (props.onWidgetClick) {
+        props.onWidgetClick(data, query)
+    }
+}
+
+const onBlur = (data, query) => {
+    if (props.onWidgetBlur) {
+        props.onWidgetBlur(data, query)
+    }
+}
+
+
+onMounted(() => {
+    watch(
+        () => props.data,
+        (arr) => {
+            metroWidgetRef.value?.refreshData()
+        },
+        { deep: true, immediate: true }
+    )
+})
+
+const setFocusId = (id) => {
+    metroWidgetRef.value.setFocusId(id, true, true)
+}
+
+const setEnterFocusId = (id) => {
+    metroWidgetRef.value.setEnterFocusId(id)
+}
+
+const slideToDiv = (div, anim) => {
+    metroWidgetRef.value.slideToDiv(div, anim)
+}
+
+const getItemLayoutInfo = (index) => {
+    return metroWidgetRef.value?.getItemLayoutInfo(index)
+}
+
+const getCurrentFocusIndex = () => {
+    return metroWidgetRef.value?.getCurrentFocusIndex()
+}
+
+defineExpose({
+    setFocusId,
+    setEnterFocusId,
+    slideToDiv,
+    getItemLayoutInfo,
+    getCurrentFocusIndex,
+})
+</script>
+
+<style scoped></style>

package/MetroWidgetDemos/ListExpand/index.vue

@@ -0,0 +1,88 @@
+<template>
+  <div
+    ref="knowledgeGraphRef"
+    :style="{
+      width: 1280,
+      height: 720,
+      backgroundColor: '#007788',
+    }"
+  >
+    <WidgetListHandler
+      name="chapterList"
+      ref="chapterListRef"
+      :layout="{
+        left: 20,
+        top: 20,
+        width: 300,
+        height: 566,
+      }"
+      :data="chapterListData"
+      :onScroll="chapterListScroll"
+      :onWidgetFocus="chapterListFocus"
+      :onEdge="chapterListEdge"
+      :fullDisplayMode="false"
+    >
+      <template #item="slotProps">
+        <ExpandItem
+          v-if="isLargeScreen"
+          v-bind="slotProps"
+          :foldEvent="updateScroll"
+        />
+        <ExpandItem2 v-else v-bind="slotProps" :foldEvent="updateScroll" />
+      </template>
+    </WidgetListHandler>
+    <!-- 滚动条 -->
+    <div
+      :style="{
+        width: 6,
+        height: scrollHeight,
+        left: 332,
+        top: scrollTop + 18,
+        borderRadius: 4,
+        backgroundColor: '#6B7DF5',
+      }"
+    ></div>
+  </div>
+</template>
+
+<script setup>
+import { useFocusHub } from "jsview";
+import { ref, onMounted, nextTick, provide } from "vue";
+import WidgetListHandler from "./components/WidgetListHandler.vue";
+import ExpandItem from "./ExpandItem.vue";
+import ExpandItem2 from "./ExpandItem1.vue";
+import { data } from "./list";
+const chapterListData = ref(data);
+const scrollHeight = ref(0);
+const scrollTop = ref(0);
+const chapterListRef = ref(null);
+const isLargeScreen = true;
+const focusHub = useFocusHub();
+
+// 章节列表滚动
+const chapterListScroll = (top, range, size) => {
+  console.log("range的值", range, size);
+  if (size > range) {
+    scrollHeight.value = (range * range) / size;
+  } else {
+    scrollHeight.value = 0;
+  }
+  scrollTop.value = (range * top) / size;
+};
+const chapterListFocus = (data, query) => {
+  console.log(1);
+};
+const chapterListEdge = (direction) => {
+  console.log("chapterListEdge", direction);
+};
+const updateScroll = (top, range, size) => {
+  // chapterListScroll(top, range, size)
+};
+onMounted(() => {
+  console.log("chapterListRef", chapterListRef.value);
+  nextTick(() => {
+    focusHub.setFocus("chapterList");
+  });
+});
+provide("parentWidget", chapterListRef);
+</script>