create-jsview 2.1.367-test.0 → 2.1.428

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

@@ -0,0 +1,181 @@
+import { u as useFocusHub, H as HORIZONTAL, g as _sfc_main$F, r as _sfc_main$g } from "./jsview-vue-entry.415721d8.js";
+import { i as img } from "./jpegDemo.ff177df5.js";
+import { a as _export_sfc } from "./export-sfc.2749ebea.js";
+import { i as inject, s as shallowRef, o as openBlock, e as createElementBlock, G as toDisplayString, P as normalizeClass, u as unref, g as normalizeStyle, r as reactive, p as provide, t as onMounted, f as createBaseVNode, k as createVNode, l as withCtx } from "./vue.889a9b8b.js";
+import "./jsview-forge-define.bfab260e.js";
+import "./jsview-dom-entry.280f04b1.js";
+const Item_vue_vue_type_style_index_0_scoped_1657025b_lang = "";
+const _sfc_main$1 = {
+  __name: "Item",
+  props: {
+    data: Object,
+    query: Object,
+    onAction: Object
+  },
+  setup(__props) {
+    const props = __props;
+    const focusSize = inject("focusSize");
+    const focused = shallowRef(false);
+    const divRef = shallowRef(null);
+    const onFocus = () => {
+      focused.value = true;
+      if (focusSize) {
+        divRef.value?.jsvGetBoundingClientRect().then(
+          (data) => {
+            focusSize.width = data.width;
+            focusSize.height = data.height;
+            focusSize.left = data.left;
+            focusSize.top = data.top;
+          },
+          (error) => {
+            console.log("get absolute position failed", error);
+          }
+        );
+      }
+    };
+    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);
+    return (_ctx, _cache) => {
+      return __props.query.index == 1 ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        ref_key: "divRef",
+        ref: divRef,
+        class: normalizeClass(unref(focused) ? "focus" : "blur"),
+        style: normalizeStyle({
+          width: __props.data.width,
+          height: __props.data.height,
+          color: "#FFFFFF",
+          backgroundColor: __props.data.color
+        })
+      }, toDisplayString(__props.data.content), 7)) : (openBlock(), createElementBlock("img", {
+        key: 1,
+        ref_key: "divRef",
+        ref: divRef,
+        class: normalizeClass(unref(focused) ? "focus" : "blur"),
+        src: `url(${unref(img)})`,
+        style: normalizeStyle({
+          width: __props.data.width,
+          height: __props.data.height
+        })
+      }, null, 14, ["src"]));
+    };
+  }
+};
+const styleSheetsContent = { "1657025b": { ".focus": '{"transform":"scale3d(1.2, 1.2, 1)","transition":"transform 0.25s linear","fontSize":30}', ".blur": '{"transform":"scale3d(1, 1, 1)","transition":"transform 0.25s linear","fontSize":30}' } };
+window.JsvCode.Dom.DeclareStyleSheets(styleSheetsContent);
+const Item = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-1657025b"]]);
+const borderImageUrl = "" + new URL("../assets/border.32f99a05.png", import.meta.url).href;
+const _sfc_main = {
+  __name: "App",
+  setup(__props) {
+    const focusHub = useFocusHub();
+    const focusSize = reactive({
+      width: 0,
+      height: 0,
+      left: 0,
+      top: 0
+    });
+    provide("focusSize", focusSize);
+    const provideData = () => {
+      return [
+        {
+          width: 160,
+          height: 160,
+          color: "#FF9900",
+          content: 0
+        },
+        {
+          width: 300,
+          height: 300,
+          color: "#0099FF",
+          content: 1
+        },
+        {
+          width: 160,
+          height: 160,
+          color: "#FF9900",
+          content: 2
+        }
+      ];
+    };
+    const measures = (item) => {
+      return {
+        width: item.width,
+        height: item.height,
+        marginRight: 10
+      };
+    };
+    const onTransitionEnd = () => {
+      console.log("NinePatch move end.");
+    };
+    onMounted(() => {
+      focusHub.setFocus("myWidget");
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", { style: { width: 1280, height: 720, backgroundColor: "#FFFFFF" } }, [
+        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)"
+          })
+        }, " NinePatch展示,框的四个角的方形中心和项目的四个顶点严格对齐 ", 4),
+        createVNode(unref(_sfc_main$F), {
+          name: "myWidget",
+          top: 100,
+          left: 250,
+          width: 1e3,
+          height: 400,
+          direction: unref(HORIZONTAL),
+          provideData,
+          measures,
+          padding: { left: 50, right: 50, top: 50, height: 50 }
+        }, {
+          renderItem: withCtx(({ data, onAction, query }) => [
+            createVNode(Item, {
+              data,
+              onAction,
+              query
+            }, null, 8, ["data", "onAction", "query"])
+          ]),
+          _: 1
+        }, 8, ["direction"]),
+        createVNode(unref(_sfc_main$g), {
+          style: normalizeStyle({
+            width: focusSize.width,
+            height: focusSize.height,
+            top: focusSize.top,
+            left: focusSize.left
+          }),
+          imageUrl: unref(borderImageUrl),
+          imageWidth: 81,
+          centerWidth: 25,
+          borderOutset: 14,
+          imageDspWidth: 81,
+          animTime: 0.2,
+          waitForInit: true,
+          onTransitionEnd
+        }, null, 8, ["style", "imageUrl", "animTime"])
+      ]);
+    };
+  }
+};
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=http://localhost:57245/map/App.c0fa704f.js.map
+
+/*jsvmd5:2ec13a701b7d919c040133399652ca4d*/

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

@@ -0,0 +1,193 @@
+import { i as img } from "./jpegDemo.ff177df5.js";
+import { a as _export_sfc } from "./export-sfc.2749ebea.js";
+import { s as shallowRef, a as ref, t as onMounted, o as openBlock, e as createElementBlock, f as createBaseVNode, u as unref, g as normalizeStyle, F as Fragment } from "./vue.889a9b8b.js";
+const App_vue_vue_type_style_index_0_scoped_9a885356_lang = "";
+const _sfc_main = {
+  __name: "App",
+  setup(__props) {
+    const ref1 = shallowRef();
+    const ref2 = shallowRef();
+    const ref3 = shallowRef();
+    const ref4 = shallowRef();
+    const ref5 = shallowRef();
+    const targetRect1 = {
+      left: 20,
+      top: 120,
+      width: 200,
+      height: 200
+    };
+    const targetRect2 = {
+      left: 230,
+      top: 120,
+      width: 210,
+      height: 210
+    };
+    const targetRect3 = {
+      left: 440,
+      top: 120,
+      width: 200,
+      height: 200
+    };
+    const targetRect4 = {
+      left: 640,
+      top: 110,
+      width: 220,
+      height: 220
+    };
+    const targetRect5 = {
+      left: 860,
+      top: 120,
+      width: 220,
+      height: 220
+    };
+    const color1 = ref("#FFFF00");
+    const color2 = ref("#FFFF00");
+    const color3 = ref("#FFFF00");
+    const color4 = ref("#FFFF00");
+    const color5 = ref("#FFFF00");
+    const isMatch = (d1, d2) => {
+      return d1.left == d2.left && d1.top == d2.top && d1.width == d2.width && d1.height == d2.height;
+    };
+    onMounted(() => {
+      ref1.value.jsvGetBoundingClientRect().then((data) => {
+        console.log("rect1", targetRect1, data);
+        color1.value = isMatch(data, targetRect1) ? "#00FF00" : "#FF0000";
+      });
+      ref2.value.jsvGetBoundingClientRect().then((data) => {
+        console.log("rect2", targetRect2, data);
+        color2.value = isMatch(data, targetRect2) ? "#00FF00" : "#FF0000";
+      });
+      ref3.value.jsvGetBoundingClientRect().then((data) => {
+        console.log("rect3", targetRect3, data);
+        color3.value = isMatch(data, targetRect3) ? "#00FF00" : "#FF0000";
+      });
+      ref4.value.jsvGetBoundingClientRect().then((data) => {
+        console.log("rect4", targetRect4, data);
+        color4.value = isMatch(data, targetRect4) ? "#00FF00" : "#FF0000";
+      });
+      ref5.value.jsvGetBoundingClientRect().then((data) => {
+        console.log("rect5", targetRect5, data);
+        color5.value = isMatch(data, targetRect5) ? "#00FF00" : "#FF0000";
+      });
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createBaseVNode("div", { style: {
+          width: 1280,
+          height: 720,
+          backgroundColor: "#FFFFFF"
+        } }),
+        createBaseVNode("div", { style: {
+          top: 20,
+          width: 1280,
+          height: 50,
+          fontSize: 30,
+          backgroundColor: "#007788",
+          color: "#FFFFFF",
+          textAlign: "center"
+        } }, " 获取div区域检测, 绿色为正确, 红色为错误(浏览器端的控制台会影响结果, 注意关闭) "),
+        createBaseVNode("div", { style: { top: 120 } }, [
+          createBaseVNode("div", { style: { left: 20 } }, [
+            createBaseVNode("img", {
+              ref_key: "ref1",
+              ref: ref1,
+              class: "view-size",
+              src: `url(${unref(img)})`
+            }, null, 8, ["src"]),
+            createBaseVNode("div", {
+              class: "result",
+              style: normalizeStyle({
+                backgroundColor: color1.value
+              })
+            }, null, 4)
+          ]),
+          createBaseVNode("div", { style: { left: 230 } }, [
+            createBaseVNode("div", {
+              ref_key: "ref2",
+              ref: ref2,
+              style: { width: 210, height: 210 }
+            }, [
+              createBaseVNode("img", {
+                class: "view-size",
+                src: `url(${unref(img)})`
+              }, null, 8, ["src"])
+            ], 512),
+            createBaseVNode("div", {
+              class: "result",
+              style: normalizeStyle({
+                backgroundColor: color2.value
+              })
+            }, null, 4)
+          ]),
+          createBaseVNode("div", { style: { left: 440 } }, [
+            createBaseVNode("div", {
+              ref_key: "ref3",
+              ref: ref3
+            }, [
+              createBaseVNode("img", {
+                class: "view-size",
+                src: `url(${unref(img)})`
+              }, null, 8, ["src"])
+            ], 512),
+            createBaseVNode("div", {
+              class: "result",
+              style: normalizeStyle({
+                backgroundColor: color3.value
+              })
+            }, null, 4)
+          ]),
+          createBaseVNode("div", { style: { left: 650 } }, [
+            createBaseVNode("div", {
+              ref_key: "ref4",
+              ref: ref4,
+              style: normalizeStyle({
+                transform: "scale3d(1.1, 1.1, 1)",
+                width: 200,
+                height: 200,
+                backgroundColor: "#007788"
+              })
+            }, [
+              createBaseVNode("img", {
+                class: "view-size",
+                src: `url(${unref(img)})`
+              }, null, 8, ["src"])
+            ], 4),
+            createBaseVNode("div", {
+              class: "result",
+              style: normalizeStyle({
+                backgroundColor: color4.value
+              })
+            }, null, 4)
+          ]),
+          createBaseVNode("div", { style: { left: 860 } }, [
+            createBaseVNode("div", {
+              ref_key: "ref5",
+              ref: ref5,
+              style: normalizeStyle({ transform: "scale3d(1.1, 1.1, 1)" })
+            }, [
+              createBaseVNode("img", {
+                class: "view-size",
+                src: `url(${unref(img)})`
+              }, null, 8, ["src"])
+            ], 4),
+            createBaseVNode("div", {
+              class: "result",
+              style: normalizeStyle({
+                backgroundColor: color5.value
+              })
+            }, null, 4)
+          ])
+        ])
+      ], 64);
+    };
+  }
+};
+const styleSheetsContent = { "9a885356": { ".view-size": '{"width":200,"height":200}', ".result": '{"top":220,"height":50,"width":200}' } };
+window.JsvCode.Dom.DeclareStyleSheets(styleSheetsContent);
+const App = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-9a885356"]]);
+export {
+  App as default
+};
+//# sourceMappingURL=http://localhost:57245/map/App.ca457df6.js.map
+
+/*jsvmd5:0a888462f27cabbc5036d48cdf3a71d7*/

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

@@ -0,0 +1,182 @@
+import { u as useFocusHub, E as EdgeDirection, H as HORIZONTAL, g as _sfc_main$F, V as VERTICAL } from "./jsview-vue-entry.415721d8.js";
+import { s as shallowRef, a as ref, o as openBlock, e as createElementBlock, G as toDisplayString, g as normalizeStyle, t as onMounted, f as createBaseVNode, k as createVNode, l as withCtx, u as unref, 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$1 = {
+  __name: "Item",
+  props: {
+    data: Object,
+    onAction: Object
+  },
+  setup(__props) {
+    const props = __props;
+    const divRef = shallowRef(null);
+    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", {
+        ref_key: "divRef",
+        ref: divRef,
+        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 data = [];
+    for (let i = 0; i < 30; i++) {
+      data.push({
+        width: 90,
+        height: 90,
+        marginRight: 10,
+        marginBottom: 10,
+        color: randomColor(),
+        content: i
+      });
+    }
+    const horizontalWidget = {
+      provideData: () => {
+        return data;
+      },
+      measures: (data2) => {
+        return {
+          width: data2.width,
+          height: data2.height,
+          marginRight: data2.marginRight,
+          marginBottom: data2.marginBottom
+        };
+      },
+      onEdge: (edgeInfo) => {
+        if (edgeInfo.direction == EdgeDirection.bottom) {
+          focusHub.setFocus("widget2");
+        }
+      },
+      widgetLayout: {
+        left: 50,
+        top: 50,
+        width: 300,
+        height: 200
+      }
+    };
+    const verticalWidget = {
+      provideData: () => {
+        return data;
+      },
+      measures: (data2) => {
+        return {
+          width: data2.width,
+          height: data2.height,
+          marginRight: data2.marginRight,
+          marginBottom: data2.marginBottom
+        };
+      },
+      onEdge: (edgeInfo) => {
+        if (edgeInfo.direction == EdgeDirection.top) {
+          focusHub.setFocus("widget1");
+        }
+      },
+      widgetLayout: {
+        left: 50,
+        top: 300,
+        width: 200,
+        height: 300
+      }
+    };
+    onMounted(() => {
+      focusHub.setFocus("widget1");
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createBaseVNode("div", { style: {
+          width: 1920,
+          height: 1080,
+          backgroundColor: "#007788"
+        } }),
+        createBaseVNode("div", { style: {
+          left: 50,
+          width: 1280,
+          height: 50,
+          fontSize: 25,
+          color: "#FFFFFF"
+        } }, toDisplayString("HORIZONTAL: 向右延伸. 排列顺序从上往下, 从左往右"), 1),
+        createVNode(unref(_sfc_main$F), {
+          name: "widget1",
+          left: horizontalWidget.widgetLayout.left,
+          top: horizontalWidget.widgetLayout.top,
+          width: horizontalWidget.widgetLayout.width,
+          height: horizontalWidget.widgetLayout.height,
+          provideData: horizontalWidget.provideData,
+          measures: horizontalWidget.measures,
+          onEdge: horizontalWidget.onEdge,
+          direction: unref(HORIZONTAL)
+        }, {
+          renderItem: withCtx(({ data: data2, onAction }) => [
+            createVNode(_sfc_main$1, {
+              data: data2,
+              onAction
+            }, null, 8, ["data", "onAction"])
+          ]),
+          _: 1
+        }, 8, ["left", "top", "width", "height", "provideData", "measures", "onEdge", "direction"]),
+        createBaseVNode("div", { style: {
+          left: 50,
+          top: 250,
+          width: 1280,
+          height: 50,
+          fontSize: 25,
+          color: "#FFFFFF"
+        } }, toDisplayString("VERTICAL: 向下延伸. 排列顺序从左往右, 从上往下"), 1),
+        createVNode(unref(_sfc_main$F), {
+          name: "widget2",
+          left: verticalWidget.widgetLayout.left,
+          top: verticalWidget.widgetLayout.top,
+          width: verticalWidget.widgetLayout.width,
+          height: verticalWidget.widgetLayout.height,
+          provideData: verticalWidget.provideData,
+          measures: verticalWidget.measures,
+          onEdge: verticalWidget.onEdge,
+          direction: unref(VERTICAL)
+        }, {
+          renderItem: withCtx(({ data: data2, onAction }) => [
+            createVNode(_sfc_main$1, {
+              data: data2,
+              onAction
+            }, null, 8, ["data", "onAction"])
+          ]),
+          _: 1
+        }, 8, ["left", "top", "width", "height", "provideData", "measures", "onEdge", "direction"])
+      ], 64);
+    };
+  }
+};
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=http://localhost:57245/map/App.cab5b11a.js.map
+
+/*jsvmd5:fb08c98d384303d0b98be2dc4043c092*/