create-jsview 2.1.367-test.0 → 2.1.428

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

@@ -0,0 +1,614 @@
+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*/