create-jsview 2.1.367-test.0 → 2.1.428

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

@@ -0,0 +1,215 @@
+import { u as useFocusHub, E as EdgeDirection, H as HORIZONTAL, g as _sfc_main$F } 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 widget1 = {
+      provideData: () => {
+        const data = [];
+        for (let i = 0; i < 30; i++) {
+          data.push({
+            width: 90,
+            height: 90,
+            marginRight: 10,
+            marginBottom: 10,
+            color: randomColor(),
+            content: i
+          });
+        }
+        return data;
+      },
+      measures: (data) => {
+        return {
+          width: data.width,
+          height: data.height,
+          marginRight: data.marginRight,
+          marginBottom: data.marginBottom
+        };
+      },
+      onEdge: (edgeInfo) => {
+        if (edgeInfo.direction == EdgeDirection.bottom) {
+          focusHub.setFocus("widget2");
+        }
+      },
+      widgetLayout: {
+        left: 50,
+        top: 50,
+        width: 500,
+        height: 200
+      }
+    };
+    const widget2 = {
+      provideData: () => {
+        const data = [];
+        for (let i = 0; i < 30; i++) {
+          const p = Math.floor(i / 3);
+          let left, top;
+          if (i % 3 == 0) {
+            left = p * 200;
+            top = 50;
+          } else if (i % 3 == 1) {
+            left = p * 200 + 100;
+            top = 0;
+          } else if (i % 3 == 2) {
+            left = p * 200 + 100;
+            top = 100;
+          }
+          data.push({
+            left,
+            top,
+            width: 90,
+            height: 90,
+            marginRight: 10,
+            marginBottom: 10,
+            color: randomColor(),
+            content: i
+          });
+        }
+        return data;
+      },
+      measures: (data) => {
+        return {
+          left: data.left,
+          top: data.top,
+          width: data.width,
+          height: data.height,
+          marginRight: data.marginRight,
+          marginBottom: data.marginBottom
+        };
+      },
+      onEdge: (edgeInfo) => {
+        if (edgeInfo.direction == EdgeDirection.top) {
+          focusHub.setFocus("widget1");
+        }
+      },
+      widgetLayout: {
+        left: 50,
+        top: 300,
+        width: 500,
+        height: 220
+      }
+    };
+    onMounted(() => {
+      focusHub.setFocus("widget1");
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createBaseVNode("div", { style: {
+          width: 1920,
+          height: 1080,
+          backgroundColor: "#007788"
+        } }),
+        createBaseVNode("div", {
+          style: normalizeStyle({
+            left: widget1.widgetLayout.left,
+            top: widget1.widgetLayout.top - 50,
+            width: 1280,
+            height: 50,
+            fontSize: 20,
+            color: "#FFFFFF"
+          })
+        }, toDisplayString("根据尺寸自动布局"), 4),
+        createVNode(unref(_sfc_main$F), {
+          name: "widget1",
+          left: widget1.widgetLayout.left,
+          top: widget1.widgetLayout.top,
+          width: widget1.widgetLayout.width,
+          height: widget1.widgetLayout.height,
+          provideData: widget1.provideData,
+          measures: widget1.measures,
+          onEdge: widget1.onEdge,
+          direction: unref(HORIZONTAL)
+        }, {
+          renderItem: withCtx(({ data, onAction }) => [
+            createVNode(_sfc_main$1, {
+              data,
+              onAction
+            }, null, 8, ["data", "onAction"])
+          ]),
+          _: 1
+        }, 8, ["left", "top", "width", "height", "provideData", "measures", "onEdge", "direction"]),
+        createBaseVNode("div", {
+          style: normalizeStyle({
+            left: widget2.widgetLayout.left,
+            top: widget2.widgetLayout.top - 50,
+            width: 1280,
+            height: 50,
+            fontSize: 20,
+            color: "#FFFFFF"
+          })
+        }, toDisplayString("绝对坐标布局"), 4),
+        createVNode(unref(_sfc_main$F), {
+          name: "widget2",
+          left: widget2.widgetLayout.left,
+          top: widget2.widgetLayout.top,
+          width: widget2.widgetLayout.width,
+          height: widget2.widgetLayout.height,
+          provideData: widget2.provideData,
+          measures: widget2.measures,
+          onEdge: widget2.onEdge,
+          direction: unref(HORIZONTAL),
+          layoutType: "absolute"
+        }, {
+          renderItem: withCtx(({ data, onAction }) => [
+            createVNode(_sfc_main$1, {
+              data,
+              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.5db3be20.js.map
+
+/*jsvmd5:5e7b7639e5cb746a5fe15167ae133d05*/

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

@@ -0,0 +1,53 @@
+import { t as useRoute } from "./jsview-vue-entry.415721d8.js";
+import { a as _export_sfc } from "./export-sfc.2749ebea.js";
+import { b as resolveComponent, o as openBlock, e as createElementBlock, k as createVNode, f as createBaseVNode, G as toDisplayString, u as unref, F as Fragment } from "./vue.889a9b8b.js";
+import "./jsview-forge-define.bfab260e.js";
+import "./jsview-dom-entry.280f04b1.js";
+const App_vue_vue_type_style_index_0_scoped_3ef31735_lang = "";
+const _sfc_main = {
+  __name: "App",
+  setup(__props) {
+    const route = useRoute();
+    const href = window.location.href;
+    const search = window.location.search;
+    const query = JSON.stringify(route.query);
+    return (_ctx, _cache) => {
+      const _component_jsv_focus_block = resolveComponent("jsv-focus-block");
+      return openBlock(), createElementBlock(Fragment, null, [
+        createVNode(_component_jsv_focus_block, { autoFocus: "" }),
+        createBaseVNode("div", { class: "root" }, [
+          createBaseVNode("div", {
+            style: {
+              top: 50,
+              height: 130
+            },
+            class: "content"
+          }, toDisplayString(`url: ${unref(href)}`), 1),
+          createBaseVNode("div", {
+            style: {
+              top: 180,
+              height: 130
+            },
+            class: "content"
+          }, toDisplayString(`search param: ${unref(search)}`), 1),
+          createBaseVNode("div", {
+            style: {
+              top: 310,
+              height: 130
+            },
+            class: "content"
+          }, toDisplayString(`query: ${unref(query)}`), 1)
+        ])
+      ], 64);
+    };
+  }
+};
+const styleSheetsContent = { "3ef31735": { ".root": '{"width":1280,"height":720,"backgroundColor":"#007788"}', ".content": '{"left":50,"width":1200,"fontSize":30,"lineHeight":32,"color":"#ffffff","whiteSpace":"pre-wrap","textOverflow":"clip","overflow":"hidden"}' } };
+window.JsvCode.Dom.DeclareStyleSheets(styleSheetsContent);
+const App = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-3ef31735"]]);
+export {
+  App as default
+};
+//# sourceMappingURL=http://localhost:57245/map/App.5f895413.js.map
+
+/*jsvmd5:41f2b653ca25cee1a4e452c7e1b8bb73*/

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

@@ -0,0 +1,320 @@
+import { u as useFocusHub, H as HORIZONTAL, g as _sfc_main$F, V as VERTICAL, ah as METRO_WIDGET } from "./jsview-vue-entry.415721d8.js";
+import { a as ref, o as openBlock, e as createElementBlock, g as normalizeStyle, q as createCommentVNode, f as createBaseVNode, G as toDisplayString, s as shallowRef, k as createVNode, l as withCtx, u as unref, F as Fragment, t as onMounted, A as createBlock } 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,
+    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,
+          transform: focused.value ? "scale3d(1.2, 1.2, 1.2)" : "",
+          transition: "transform 0.2s linear"
+        })
+      }, [
+        focused.value ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          style: normalizeStyle({
+            left: -2,
+            top: -2,
+            width: __props.data.width + 4,
+            height: __props.data.height + 4,
+            backgroundColor: "#FF0000"
+          })
+        }, null, 4)) : createCommentVNode("", true),
+        createBaseVNode("div", {
+          style: normalizeStyle({
+            width: __props.data.width,
+            height: __props.data.height,
+            fontSize: 30,
+            color: "#FFFFFF",
+            backgroundColor: __props.data.color
+          })
+        }, toDisplayString(__props.data.content), 5)
+      ], 4);
+    };
+  }
+};
+const _sfc_main$2 = {
+  __name: "WidgetItem",
+  props: {
+    data: Object,
+    onItemEdge: Function,
+    onAction: Object
+  },
+  setup(__props) {
+    const props = __props;
+    const focusHub = useFocusHub();
+    const mwRef = shallowRef(null);
+    const measures = (item) => {
+      return item;
+    };
+    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 data = [];
+      for (let i = 0; i < 10; i++) {
+        data.push({
+          width: (i + props.data.index) % 2 == 0 ? 90 : 180,
+          height: 90,
+          marginRight: 10,
+          marginBottom: 10,
+          content: i,
+          color: randomColor()
+        });
+      }
+      return data;
+    };
+    const onFocus = (rect) => {
+      if (rect) {
+        let rectInfo = {
+          x: 0,
+          y: 0,
+          width: 0,
+          height: 0
+        };
+        let curRect = rect;
+        while (curRect) {
+          let { x, y, width, height } = curRect.rect;
+          rectInfo.x += x;
+          rectInfo.y += y;
+          rectInfo.width = width;
+          rectInfo.height = height;
+          curRect = curRect.childEdgeInfo;
+        }
+        mwRef.value?.setEnterFocusRect({
+          direction: rect.direction,
+          rect: rectInfo
+        });
+      }
+      focusHub.setFocus(props.data.name);
+    };
+    const onBlur = () => {
+      focusHub.returnFocusToParent();
+    };
+    props.onAction.register("onFocus", onFocus);
+    props.onAction.register("onBlur", onBlur);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createBaseVNode("div", { style: {
+          width: 900,
+          height: 50,
+          fontSize: 30,
+          color: "#FFFFFF"
+        } }, toDisplayString(__props.data.name), 1),
+        createVNode(unref(_sfc_main$F), {
+          ref_key: "mwRef",
+          ref: mwRef,
+          name: __props.data.name,
+          top: 50,
+          width: __props.data.width,
+          height: __props.data.height,
+          provideData,
+          direction: unref(HORIZONTAL),
+          padding: {
+            left: 30,
+            right: 30,
+            top: 10,
+            bottom: 10
+          },
+          measures,
+          onEdge: __props.onItemEdge,
+          sendFocusRectEvent: true
+        }, {
+          renderItem: withCtx(({ data, onAction }) => [
+            createVNode(_sfc_main$3, {
+              data,
+              onAction
+            }, null, 8, ["data", "onAction"])
+          ]),
+          _: 1
+        }, 8, ["name", "width", "height", "direction", "onEdge"])
+      ], 64);
+    };
+  }
+};
+const _sfc_main$1 = {
+  __name: "SWidgetItem",
+  props: {
+    data: Object,
+    onAction: Object,
+    onItemEdge: Function
+  },
+  setup(__props) {
+    const props = __props;
+    const focusHub = useFocusHub();
+    ref(null);
+    const provideData = () => {
+      const data = [];
+      for (let i = 0; i < 1; i++) {
+        data.push({
+          width: 500,
+          height: 170,
+          name: "3级嵌套_" + i + props.data.index,
+          marginBottom: 10,
+          index: i
+        });
+      }
+      return data;
+    };
+    const measures = (item) => {
+      return {
+        width: item.width,
+        height: item.height,
+        marginRight: item.marginRight,
+        marginBottom: item.marginBottom,
+        itemSlide: METRO_WIDGET.ITEM_SLIDE.ACT_FOCUS_RECT_EVENT
+      };
+    };
+    onMounted(() => {
+    });
+    const widgetRef = shallowRef();
+    const onFocus = (rect) => {
+      if (rect) {
+        let rectInfo = {
+          x: 0,
+          y: 0,
+          width: 0,
+          height: 0
+        };
+        let curRect = rect;
+        while (curRect) {
+          let { x, y, width, height } = curRect.rect;
+          rectInfo.x += x;
+          rectInfo.y += y;
+          rectInfo.width = width;
+          rectInfo.height = height;
+          curRect = curRect.childEdgeInfo;
+        }
+        widgetRef.value?.setEnterFocusRect({
+          direction: rect.direction,
+          rect: rectInfo
+        });
+      }
+      focusHub.setFocus("mwWidget2" + props.data.index);
+    };
+    const onWidgetEdge = (info) => {
+      props.onItemEdge(info);
+    };
+    props.onAction.register("onFocus", onFocus);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(_sfc_main$F), {
+        ref_key: "widgetRef",
+        ref: widgetRef,
+        name: "mwWidget2" + props.data.index,
+        top: 0,
+        left: 0,
+        width: 660,
+        height: 600,
+        provideData,
+        padding: { left: 30, right: 30 },
+        direction: unref(VERTICAL),
+        measures,
+        onEdge: onWidgetEdge
+      }, {
+        renderItem: withCtx(({ data, onAction, onItemEdge }) => [
+          createVNode(_sfc_main$2, {
+            data,
+            onAction,
+            onItemEdge
+          }, null, 8, ["data", "onAction", "onItemEdge"])
+        ]),
+        _: 1
+      }, 8, ["name", "direction"]);
+    };
+  }
+};
+const _sfc_main = {
+  __name: "App",
+  setup(__props) {
+    const focusHub = useFocusHub();
+    const provideData = () => {
+      const data = [];
+      for (let i = 0; i < 10; i++) {
+        data.push({
+          width: 500,
+          height: 170,
+          name: "widget_" + i,
+          marginBottom: 10,
+          index: i
+        });
+      }
+      return data;
+    };
+    const measures = (item) => {
+      return {
+        width: item.width,
+        height: item.height,
+        marginRight: item.marginRight,
+        marginBottom: item.marginBottom,
+        /**重要代码: itemSlide设置为ACT_FOCUS_RECT_EVENT, 由子MetroWidget控制滚动 */
+        itemSlide: METRO_WIDGET.ITEM_SLIDE.ACT_FOCUS_RECT_EVENT
+      };
+    };
+    onMounted(() => {
+      focusHub.setFocus("mwWidget");
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createBaseVNode("div", { style: { width: 1280, height: 720, backgroundColor: "#007788" } }),
+        createBaseVNode("div", { style: {
+          left: 100,
+          top: 20,
+          width: 800,
+          height: 400,
+          fontSize: 30,
+          color: "#FFFFFF"
+        } }, toDisplayString(`MetroWidget嵌套了三层的组件, 焦点应该就近移动`)),
+        createVNode(unref(_sfc_main$F), {
+          name: "mwWidget",
+          top: 100,
+          left: 50,
+          width: 660,
+          height: 600,
+          provideData,
+          padding: { left: 30, right: 30 },
+          direction: unref(VERTICAL),
+          measures
+        }, {
+          renderItem: withCtx(({ data, query, onAction, onItemEdge }) => [
+            createVNode(_sfc_main$1, {
+              data,
+              onAction,
+              onItemEdge
+            }, null, 8, ["data", "onAction", "onItemEdge"])
+          ]),
+          _: 1
+        }, 8, ["direction"])
+      ], 64);
+    };
+  }
+};
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=http://localhost:57245/map/App.5f95520c.js.map
+
+/*jsvmd5:71cb0f43f203f5619a96ed68da049dd7*/