create-jsview 2.1.367-test.0 → 2.1.428

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

@@ -0,0 +1,431 @@
+import { a as useRouter, D as JsvSpriteAnim, F as _sfc_main$q } from "./jsview-vue-entry.415721d8.js";
+import { s as shallowRef, b as resolveComponent, o as openBlock, A as createBlock, l as withCtx, f as createBaseVNode, g as normalizeStyle, u as unref, e as createElementBlock, k as createVNode, q as createCommentVNode } from "./vue.889a9b8b.js";
+import "./jsview-forge-define.bfab260e.js";
+import "./jsview-dom-entry.280f04b1.js";
+import "./export-sfc.2749ebea.js";
+const localSpriteImage = "" + new URL("../assets/egg_break.e01a800c.png", import.meta.url).href;
+const frames = [
+  {
+    filename: "image_00.png",
+    frame: {
+      x: 104,
+      y: 2,
+      w: 50,
+      h: 64
+    },
+    rotated: false,
+    trimmed: false,
+    spriteSourceSize: {
+      x: 53,
+      y: 43,
+      w: 50,
+      h: 64
+    },
+    sourceSize: {
+      w: 50,
+      h: 64
+    }
+  },
+  {
+    filename: "image_01.png",
+    frame: {
+      x: 2,
+      y: 2,
+      w: 48,
+      h: 64
+    },
+    rotated: false,
+    trimmed: false,
+    spriteSourceSize: {
+      x: 55,
+      y: 43,
+      w: 48,
+      h: 64
+    },
+    sourceSize: {
+      w: 48,
+      h: 64
+    }
+  },
+  {
+    filename: "image_02.png",
+    frame: {
+      x: 52,
+      y: 2,
+      w: 50,
+      h: 64
+    },
+    rotated: false,
+    trimmed: false,
+    spriteSourceSize: {
+      x: 55,
+      y: 43,
+      w: 50,
+      h: 64
+    },
+    sourceSize: {
+      w: 50,
+      h: 64
+    }
+  },
+  {
+    filename: "image_03.png",
+    frame: {
+      x: 274,
+      y: 2,
+      w: 64,
+      h: 74
+    },
+    rotated: false,
+    trimmed: false,
+    spriteSourceSize: {
+      x: 54,
+      y: 33,
+      w: 64,
+      h: 74
+    },
+    sourceSize: {
+      w: 64,
+      h: 74
+    }
+  },
+  {
+    filename: "image_04.png",
+    frame: {
+      x: 156,
+      y: 2,
+      w: 56,
+      h: 72
+    },
+    rotated: false,
+    trimmed: false,
+    spriteSourceSize: {
+      x: 47,
+      y: 44,
+      w: 56,
+      h: 72
+    },
+    sourceSize: {
+      w: 56,
+      h: 72
+    }
+  },
+  {
+    filename: "image_05.png",
+    frame: {
+      x: 214,
+      y: 2,
+      w: 58,
+      h: 84
+    },
+    rotated: false,
+    trimmed: false,
+    spriteSourceSize: {
+      x: 46,
+      y: 44,
+      w: 58,
+      h: 84
+    },
+    sourceSize: {
+      w: 58,
+      h: 84
+    }
+  },
+  {
+    filename: "image_06.png",
+    frame: {
+      x: 2,
+      y: 88,
+      w: 92,
+      h: 106
+    },
+    rotated: false,
+    trimmed: false,
+    spriteSourceSize: {
+      x: 32,
+      y: 32,
+      w: 92,
+      h: 106
+    },
+    sourceSize: {
+      w: 92,
+      h: 106
+    }
+  },
+  {
+    filename: "image_07.png",
+    frame: {
+      x: 2,
+      y: 228,
+      w: 142,
+      h: 140
+    },
+    rotated: false,
+    trimmed: false,
+    spriteSourceSize: {
+      x: 8,
+      y: 20,
+      w: 142,
+      h: 140
+    },
+    sourceSize: {
+      w: 142,
+      h: 140
+    }
+  },
+  {
+    filename: "image_08.png",
+    frame: {
+      x: 146,
+      y: 228,
+      w: 142,
+      h: 140
+    },
+    rotated: false,
+    trimmed: false,
+    spriteSourceSize: {
+      x: 8,
+      y: 20,
+      w: 142,
+      h: 140
+    },
+    sourceSize: {
+      w: 142,
+      h: 140
+    }
+  },
+  {
+    filename: "image_09.png",
+    frame: {
+      x: 290,
+      y: 228,
+      w: 142,
+      h: 140
+    },
+    rotated: false,
+    trimmed: false,
+    spriteSourceSize: {
+      x: 8,
+      y: 20,
+      w: 142,
+      h: 140
+    },
+    sourceSize: {
+      w: 142,
+      h: 140
+    }
+  },
+  {
+    filename: "image_10.png",
+    frame: {
+      x: 190,
+      y: 88,
+      w: 136,
+      h: 138
+    },
+    rotated: false,
+    trimmed: false,
+    spriteSourceSize: {
+      x: 11,
+      y: 21,
+      w: 136,
+      h: 138
+    },
+    sourceSize: {
+      w: 136,
+      h: 138
+    }
+  },
+  {
+    filename: "image_11.png",
+    frame: {
+      x: 96,
+      y: 88,
+      w: 92,
+      h: 88
+    },
+    rotated: false,
+    trimmed: false,
+    spriteSourceSize: {
+      x: 33,
+      y: 26,
+      w: 92,
+      h: 88
+    },
+    sourceSize: {
+      w: 92,
+      h: 88
+    }
+  },
+  {
+    filename: "image_12.png",
+    frame: {
+      x: 340,
+      y: 2,
+      w: 88,
+      h: 84
+    },
+    rotated: false,
+    trimmed: false,
+    spriteSourceSize: {
+      x: 35,
+      y: 26,
+      w: 88,
+      h: 84
+    },
+    sourceSize: {
+      w: 88,
+      h: 84
+    }
+  }
+];
+const meta = {
+  app: "http://www.texturepacker.com",
+  version: "1.0",
+  image: "egg_1.png",
+  format: "RGBA8888",
+  size: {
+    w: 434,
+    h: 372
+  },
+  scale: "1",
+  smartupdate: "$TexturePacker:SmartUpdate:3ca02d63806cac6ee77822c5f378c4f3$"
+};
+const localConfigJson = {
+  frames,
+  meta
+};
+const _sfc_main = {
+  __name: "App",
+  setup(__props) {
+    console.log(
+      "test localSpriteImage =",
+      localSpriteImage,
+      "/n localConfigJson=",
+      localConfigJson
+    );
+    const router = useRouter();
+    let useLocalData = shallowRef(true);
+    let animateImage = shallowRef(null);
+    let preloadJsonUrl = shallowRef(null);
+    let preloadCallback = shallowRef(null);
+    let spriteJsonIfno = shallowRef(null);
+    const _UseLocalData = () => {
+      console.log("using local data");
+      useLocalData.value = true;
+      animateImage.value = `url(${localSpriteImage})`;
+      preloadJsonUrl.value = null;
+      preloadCallback.value = null;
+      spriteJsonIfno.value = _formatInfo(localConfigJson).info;
+    };
+    const _formatInfo = (config_json) => {
+      const info = {
+        frames: [],
+        meta: {
+          size: config_json.meta.size
+        }
+      };
+      let frames_ref = info.frames;
+      for (let i = 0; i < config_json.frames.length; i++) {
+        const target = config_json.frames[i].spriteSourceSize;
+        frames_ref.push({
+          target,
+          source: config_json.frames[i].frame
+        });
+      }
+      return { info };
+    };
+    const spriteController = shallowRef(null);
+    let show = shallowRef(true);
+    const spriteAnimEnd = () => {
+      show.value = false;
+    };
+    const onKeyDown = (ev) => {
+      if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 1e4) {
+        router?.go(-1);
+        return true;
+      }
+      return true;
+    };
+    _UseLocalData();
+    return (_ctx, _cache) => {
+      const _component_jsv_focus_block = resolveComponent("jsv-focus-block");
+      return openBlock(), createBlock(_component_jsv_focus_block, {
+        autoFocus: "",
+        onAction: {
+          onKeyDown
+        }
+      }, {
+        default: withCtx(() => [
+          createBaseVNode("div", {
+            style: normalizeStyle({
+              textAlign: "center",
+              fontSize: 30,
+              lineHeight: 50,
+              color: "#ffffff",
+              left: 200,
+              top: 100,
+              width: 434,
+              height: 50,
+              backgroundColor: "rgba(27,38,151,0.8)"
+            })
+          }, " 精灵图效果 ", 4),
+          unref(show) ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            style: normalizeStyle({ left: 200, top: 150, transform: "scale3d(2.5, 2.5, 1)" })
+          }, [
+            createVNode(unref(_sfc_main$q), {
+              imageUrl: unref(animateImage),
+              configUrl: unref(preloadJsonUrl),
+              onConfigReady: unref(preloadCallback),
+              noNeedResource: unref(useLocalData)
+            }, {
+              default: withCtx(() => [
+                createVNode(unref(JsvSpriteAnim), {
+                  ref_key: "spriteController",
+                  ref: spriteController,
+                  spriteInfo: unref(spriteJsonIfno),
+                  loop: 3,
+                  duration: 0.8,
+                  autostart: true,
+                  onAnimEnd: spriteAnimEnd,
+                  imageUrl: unref(animateImage)
+                }, null, 8, ["spriteInfo", "duration", "imageUrl"])
+              ]),
+              _: 1
+            }, 8, ["imageUrl", "configUrl", "onConfigReady", "noNeedResource"])
+          ], 4)) : createCommentVNode("", true),
+          createBaseVNode("div", {
+            style: normalizeStyle({
+              textAlign: "center",
+              fontSize: 30,
+              lineHeight: 50,
+              color: "#ffffff",
+              left: 700,
+              top: 100,
+              width: 434,
+              height: 50,
+              backgroundColor: "rgba(27,38,151,0.8)"
+            })
+          }, " 原始图片 ", 4),
+          createBaseVNode("div", {
+            style: normalizeStyle({
+              left: 700,
+              top: 150,
+              width: 434,
+              height: 372,
+              backgroundImage: unref(animateImage)
+            })
+          }, null, 4)
+        ]),
+        _: 1
+      }, 8, ["onAction"]);
+    };
+  }
+};
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=http://localhost:57245/map/App.368006e4.js.map
+
+/*jsvmd5:85b1acb4be2d484472bf6efc752c19af*/

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

@@ -0,0 +1,192 @@
+import { u as useFocusHub, H as HORIZONTAL, g as _sfc_main$F } from "./jsview-vue-entry.415721d8.js";
+import { a as ref, b as resolveComponent, o as openBlock, A as createBlock, l as withCtx, f as createBaseVNode, g as normalizeStyle, u as unref, e as createElementBlock, G as toDisplayString, t as onMounted, k as createVNode } from "./vue.889a9b8b.js";
+import "./jsview-forge-define.bfab260e.js";
+import "./jsview-dom-entry.280f04b1.js";
+import "./export-sfc.2749ebea.js";
+const _sfc_main$2 = {
+  __name: "ButtonItem",
+  props: {
+    data: Object,
+    onAction: Object
+  },
+  setup(__props) {
+    const props = __props;
+    const focusHub = useFocusHub();
+    let focused = ref(false);
+    let focusIndex = ref(0);
+    const onFocus = () => {
+      focusHub.setFocus(props.data.name);
+      focused.value = true;
+    };
+    const onBlur = () => {
+      focused.value = false;
+      focusIndex.value = 0;
+      focusHub.returnFocusToParent();
+    };
+    const onKeyDown = (ev) => {
+      if (ev.keyCode == 37 && focusIndex.value == 1) {
+        focusIndex.value = 0;
+        return true;
+      } else if (ev.keyCode == 39 && focusIndex.value == 0) {
+        focusIndex.value = 1;
+        return true;
+      } else if (ev.keyCode == 13) {
+        console.log("button click", props.data);
+        return true;
+      }
+      return false;
+    };
+    props.onAction.register("onFocus", onFocus);
+    props.onAction.register("onBlur", onBlur);
+    return (_ctx, _cache) => {
+      const _component_jsv_focus_block = resolveComponent("jsv-focus-block");
+      return openBlock(), createBlock(_component_jsv_focus_block, {
+        name: __props.data.name,
+        onAction: {
+          onKeyDown
+        }
+      }, {
+        default: withCtx(() => [
+          createBaseVNode("div", { style: {
+            width: 100,
+            height: 100,
+            fontSize: 20,
+            color: "#FFFFFF",
+            backgroundColor: "#00AA00"
+          } }),
+          createBaseVNode("div", { style: {
+            left: 100,
+            width: 100,
+            height: 100,
+            backgroundColor: "#0000AA"
+          } }),
+          createBaseVNode("div", {
+            style: normalizeStyle({
+              visibility: unref(focused) ? "visible" : "hidden",
+              left: 100 * unref(focusIndex),
+              width: 10,
+              height: 10,
+              backgroundColor: "#FF0000"
+            })
+          }, null, 4)
+        ]),
+        _: 1
+      }, 8, ["name", "onAction"]);
+    };
+  }
+};
+const _sfc_main$1 = {
+  __name: "Item",
+  props: {
+    data: Object,
+    onAction: Object
+  },
+  setup(__props) {
+    const props = __props;
+    const focused = ref(false);
+    const onFocus = () => {
+      focused.value = true;
+    };
+    const onBlur = () => {
+      focused.value = false;
+    };
+    const onClick = () => {
+      console.log("item onclick ", props.data);
+    };
+    props.onAction.register("onFocus", onFocus);
+    props.onAction.register("onBlur", onBlur);
+    props.onAction.register("onClick", onClick);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        style: normalizeStyle({
+          width: __props.data.width,
+          height: __props.data.height,
+          fontSize: 30,
+          color: focused.value ? "#FF0000" : "#FFFFFF",
+          backgroundColor: __props.data.color
+        })
+      }, toDisplayString(__props.data.content), 5);
+    };
+  }
+};
+const _sfc_main = {
+  __name: "App",
+  setup(__props) {
+    const focusHub = useFocusHub();
+    const randomColor = () => {
+      let randomColor2 = Math.round(Math.random() * 2 ** 24).toString(16);
+      return "#" + new Array(6 - randomColor2.length).fill("0").join("") + randomColor2;
+    };
+    const provideData = () => {
+      const advanceMix = [];
+      for (let i = 0; i < 20; i++) {
+        advanceMix.push({
+          width: 200,
+          height: 100,
+          name: "mix_button_" + i,
+          marginRight: 10,
+          marginBottom: 10,
+          type: i % 2 == 0 ? "button" : "item",
+          color: randomColor(),
+          content: i
+        });
+      }
+      return advanceMix;
+    };
+    const measures = (item) => {
+      return {
+        width: item.width,
+        height: item.height,
+        marginRight: item.marginRight,
+        marginBottom: item.marginBottom
+      };
+    };
+    const onEdge = (edgeInfo) => {
+    };
+    onMounted(() => {
+      focusHub.setFocus("mwMix");
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", null, [
+        createBaseVNode("div", { style: {
+          left: 50,
+          top: 10,
+          width: 600,
+          height: 400,
+          fontSize: 30,
+          color: "#FFFFFF"
+        } }, toDisplayString("包含JsvFocusBlock的组件和纯描画组件混排")),
+        createVNode(unref(_sfc_main$F), {
+          name: "mwMix",
+          top: 100,
+          left: 50,
+          provideData,
+          width: 600,
+          height: 400,
+          direction: unref(HORIZONTAL),
+          measures,
+          onEdge
+        }, {
+          renderItem: withCtx(({ data, onAction }) => [
+            data.type == "button" ? (openBlock(), createBlock(_sfc_main$2, {
+              key: 0,
+              data,
+              onAction
+            }, null, 8, ["data", "onAction"])) : (openBlock(), createBlock(_sfc_main$1, {
+              key: 1,
+              data,
+              onAction
+            }, null, 8, ["data", "onAction"]))
+          ]),
+          _: 1
+        }, 8, ["direction"])
+      ]);
+    };
+  }
+};
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=http://localhost:57245/map/App.36fc32c5.js.map
+
+/*jsvmd5:94e6b1b301c8d89f79713f6855db59c9*/