create-jsview 2.1.428 → 2.1.448-test.0

package/template-vue-vite/dist-test-jsview-chunk/js/App.a6e90b5c.js

@@ -1,614 +0,0 @@
-import { Q as getKeyFramesGroup, r as _sfc_main$g, u as useFocusHub, a7 as _sfc_main$E, H as HORIZONTAL, a8 as FixPositionSlide, a9 as getTextWidth } from "./jsview-vue-entry.415721d8.js";
-import { a as ref, i as inject, s as shallowRef, c as computed, t as onMounted, o as openBlock, e as createElementBlock, G as toDisplayString, g as normalizeStyle, u as unref, r as reactive, E as onBeforeUnmount, A as createBlock, p as provide, b as resolveComponent, k as createVNode, l as withCtx, q as createCommentVNode, f as createBaseVNode, F as Fragment } from "./vue.889a9b8b.js";
-import "./jsview-forge-define.bfab260e.js";
-import "./jsview-dom-entry.280f04b1.js";
-import "./export-sfc.2749ebea.js";
-const _sfc_main$3 = {
-  __name: "Item",
-  props: {
-    data: Object,
-    query: Object,
-    onEdge: Function,
-    onAction: Object,
-    frameChanged: Function,
-    focusRectController: {
-      type: Object
-    }
-  },
-  setup(__props) {
-    const props = __props;
-    const focused = ref(false);
-    const parentWidget = inject("parentWidget");
-    const itemKeepScale = inject("itemKeepScale");
-    const divRef = shallowRef();
-    const onFocus = () => {
-      parentWidget.value.slideToDiv(divRef.value, true);
-      const rect = props.query.templatePosition(props.query.index);
-      props.focusRectController?.onFocusChange(rect);
-      focused.value = true;
-    };
-    const onBlur = () => {
-      focused.value = false;
-    };
-    const onClicked = () => {
-      console.log("item clicked", props.data);
-    };
-    props.onAction.register("onFocus", onFocus);
-    props.onAction.register("onBlur", onBlur);
-    props.onAction.register("onClick", onClicked);
-    const scaleTransform = computed(() => {
-      return itemKeepScale.value || focused.value ? "scale3d(1.1,1.1,1)" : "scale3d(1,1,1)";
-    });
-    onMounted(() => {
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        ref_key: "divRef",
-        ref: divRef,
-        style: normalizeStyle({
-          fontSize: 40,
-          width: __props.data.width,
-          height: __props.data.height,
-          color: "#FFFFFF",
-          textAlign: "center",
-          lineHeight: __props.data.height,
-          transform: unref(scaleTransform)
-        })
-      }, toDisplayString(__props.data.content), 5);
-    };
-  }
-};
-const _sfc_main$2 = {
-  __name: "CreepFocus",
-  props: {
-    imgUrl: {
-      type: String
-    },
-    initWidth: {
-      type: Number,
-      default: 0
-    },
-    initHeight: {
-      type: Number,
-      default: 0
-    },
-    initLeft: {
-      type: Number,
-      default: 0
-    },
-    initTop: {
-      type: Number,
-      default: 0
-    }
-  },
-  setup(__props, { expose }) {
-    const props = __props;
-    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;
-    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;
-        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);
-      }
-    });
-    expose({
-      changeRect
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$g), {
-        style: normalizeStyle({
-          width: focusSize.width,
-          height: focusSize.height,
-          top: focusSize.top,
-          left: focusSize.left
-        }),
-        animation: focusSize.animation,
-        imageUrl: __props.imgUrl,
-        imageWidth: 35,
-        centerWidth: 0,
-        borderOutset: 0,
-        animTime: 0.2,
-        waitForInit: true
-      }, null, 8, ["style", "animation", "imageUrl", "animTime"]);
-    };
-  }
-};
-const redCircle = "" + new URL("../assets/redCircle.091d191f.png", import.meta.url).href;
-const _sfc_main$1 = {
-  __name: "FoldableItem",
-  props: {
-    data: Object,
-    query: Object,
-    onAction: Object,
-    onItemEdge: Function
-  },
-  setup(__props) {
-    const props = __props;
-    const DURATION = 200;
-    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) {
-          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 clipAnimStr2 = `@keyframes ${name} { from { width: ${from}; } to { width: ${to}; } }`;
-      animationCache[name] = clipAnimStr2;
-      styleShell.insertRule(clipAnimStr2);
-      const anchorPosition = Math.round((to - from) * anchor);
-      const slideName = "foldableItemSlideAnim" + animToken;
-      if (animationCache.hasOwnProperty(slideName)) {
-        styleShell.removeRule(slideName);
-        delete animationCache[slideName];
-      }
-      const slideAnimStr2 = `@keyframes ${slideName} { from { transform: translate3d(${-anchorPosition},0,0); } to { transform: translate3d(0,0,0); } }`;
-      animationCache[slideName] = slideAnimStr2;
-      styleShell.insertRule(slideAnimStr2);
-      return {
-        clip: `${name} ${DURATION / 1e3}s`,
-        slide: `${slideName} ${DURATION / 1e3}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 = (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 === 1e4 || ev.keyCode === 8 || ev.keyCode === 27) {
-        itemKeepScale.value = true;
-        foldSubTab();
-        return true;
-      }
-      return false;
-    };
-    return (_ctx, _cache) => {
-      const _component_jsv_focus_block = resolveComponent("jsv-focus-block");
-      return folded.value ? (openBlock(), createElementBlock("div", {
-        key: 0,
-        style: normalizeStyle({
-          fontSize: 40,
-          width: __props.data.width,
-          height: __props.data.height,
-          color: "#FFFFFF",
-          textAlign: "center",
-          lineHeight: __props.data.height,
-          transform: focused.value ? "scale3d(1.1,1.1,1)" : "scale3d(1,1,1)"
-        })
-      }, toDisplayString(__props.data.content), 5)) : (openBlock(), createElementBlock("div", {
-        key: 1,
-        style: normalizeStyle({
-          width: width.value,
-          height: __props.data.height,
-          overflow: "hidden",
-          animation: clipAnimStr.value
-        })
-      }, [
-        createVNode(_component_jsv_focus_block, {
-          onAction: {
-            onKeyDown
-          },
-          style: normalizeStyle({
-            left: widgetLeft.value,
-            width: __props.data.childTab.width,
-            height: __props.data.height,
-            backgroundColor: "#00990099",
-            borderRadius: 10,
-            animation: slideAnimStr.value
-          })
-        }, {
-          default: withCtx(() => [
-            createVNode(unref(_sfc_main$E), {
-              ref_key: "widgetRef",
-              ref: widgetRef,
-              name: __props.data.name,
-              width: __props.data.childTab.width,
-              height: __props.data.height,
-              provideData,
-              direction: unref(HORIZONTAL),
-              measures,
-              onEdge: __props.onItemEdge,
-              initFocusId: __props.data.initFocus
-            }, {
-              renderItem: withCtx(({ data, onAction, query }) => [
-                createVNode(_sfc_main$3, {
-                  focusRectController,
-                  data,
-                  onAction,
-                  query
-                }, null, 8, ["data", "onAction", "query"])
-              ]),
-              background: withCtx(() => [
-                showFocus.value ? (openBlock(), createBlock(_sfc_main$2, {
-                  key: 0,
-                  ref_key: "creepFocus",
-                  ref: creepFocus,
-                  imgUrl: unref(redCircle)
-                }, null, 8, ["imgUrl"])) : createCommentVNode("", true)
-              ]),
-              _: 1
-            }, 8, ["name", "width", "height", "direction", "onEdge", "initFocusId"])
-          ]),
-          _: 1
-        }, 8, ["onAction", "style"])
-      ], 4));
-    };
-  }
-};
-const _sfc_main = {
-  __name: "App",
-  setup(__props) {
-    const randomColor = () => {
-      let randomColor2 = Math.round(Math.random() * 2 ** 24).toString(16);
-      return "#" + new Array(6 - randomColor2.length).fill("0").join("") + randomColor2;
-    };
-    const slideType = new FixPositionSlide();
-    const focusHub = useFocusHub();
-    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 contentData = [
-      "推荐",
-      "电视剧",
-      "电影",
-      "云影院",
-      "综艺",
-      "儿童",
-      "动漫",
-      "游戏",
-      "纪录片",
-      "体育",
-      "知识",
-      "导航"
-    ];
-    const SizeObj = {
-      fontSize: 40
-    };
-    const data = [];
-    const getChildTabList = (textSize, childTextSize, contentText) => {
-      const list = [];
-      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: 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}
-`;
-      }
-      return str;
-    };
-    const measures = (item) => {
-      return {
-        width: item.width,
-        height: item.height,
-        marginRight: item.marginRight
-      };
-    };
-    const widgetRef = ref();
-    onMounted(() => {
-      provide("parentWidget", widgetRef);
-      focusHub.setFocus("myWidget");
-    });
-    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");
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(Fragment, null, [
-        createBaseVNode("div", { style: { width: 1280, height: 720, backgroundColor: "#007788" } }, [
-          createBaseVNode("div", {
-            style: normalizeStyle({
-              textAlign: "center",
-              fontSize: 30,
-              lineHeight: 50,
-              color: "#ffffff",
-              left: 140,
-              top: 20,
-              width: 1e3,
-              height: 50,
-              backgroundColor: "rgba(27,38,151,0.8)"
-            })
-          }, " 爬行样式的焦点示例 ", 4),
-          createVNode(unref(_sfc_main$E), {
-            ref_key: "widgetRef",
-            ref: widgetRef,
-            name: "myWidget",
-            onFocusRectChange,
-            onAllItemResizeDone: onAllResizeDone,
-            top: 100,
-            left: 40,
-            width: 1200,
-            height: 110,
-            slideSetting: unref(slideType),
-            direction: unref(HORIZONTAL),
-            provideData,
-            measures,
-            padding: { left: 20, right: 20, top: 20, height: 20 }
-          }, {
-            renderItem: withCtx(({ data: data2, onAction, query, onItemEdge }) => [
-              createVNode(_sfc_main$1, {
-                data: data2,
-                onAction,
-                query,
-                onItemEdge
-              }, null, 8, ["data", "onAction", "query", "onItemEdge"])
-            ]),
-            background: withCtx(() => [
-              showFocus.value ? (openBlock(), createBlock(_sfc_main$2, {
-                key: 0,
-                ref_key: "creepFocus",
-                ref: creepFocus,
-                imgUrl: unref(redCircle),
-                initLeft: unref(currentFocusRect)?.left,
-                initTop: unref(currentFocusRect)?.top,
-                initWidth: unref(currentFocusRect)?.width,
-                initHeight: unref(currentFocusRect)?.height
-              }, null, 8, ["imgUrl", "initLeft", "initTop", "initWidth", "initHeight"])) : createCommentVNode("", true)
-            ]),
-            _: 1
-          }, 8, ["slideSetting", "direction"])
-        ]),
-        createBaseVNode("div", { style: {
-          left: 100,
-          top: 250,
-          width: 1280,
-          height: 400,
-          fontSize: 25,
-          color: "#FFFFFF"
-        } }, " OK键展开, 返回键折叠. 展开后的默认焦点的位置和展开前相同(第一个和最后一个除外) "),
-        createBaseVNode("div", { style: {
-          left: 100,
-          top: 300,
-          width: 1280,
-          height: 400,
-          fontSize: 20,
-          color: "#FFFFFF"
-        } }, toDisplayString(getDetaileInfo()), 1)
-      ], 64);
-    };
-  }
-};
-export {
-  _sfc_main as default
-};
-//# sourceMappingURL=http://localhost:57245/map/App.a6e90b5c.js.map
-
-/*jsvmd5:6035f3aae8522adcc28a7d8b1866fd34*/