create-jsview 2.1.367-test.0 → 2.1.428

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

@@ -0,0 +1,587 @@
+import { u as useFocusHub, a8 as FixPositionSlide, H as HORIZONTAL, a7 as _sfc_main$E, E as EdgeDirection } from "./jsview-vue-entry.415721d8.js";
+import { a as ref, o as openBlock, e as createElementBlock, G as toDisplayString, g as normalizeStyle, f as createBaseVNode, k as createVNode, l as withCtx, u as unref, E as onBeforeUnmount, i as inject, w as watch, p as provide, t as onMounted } from "./vue.889a9b8b.js";
+import { a as _export_sfc } from "./export-sfc.2749ebea.js";
+import "./jsview-forge-define.bfab260e.js";
+import "./jsview-dom-entry.280f04b1.js";
+const _sfc_main$6 = {
+  __name: "Item",
+  props: {
+    data: Object,
+    onAction: Object,
+    query: Object,
+    dataLength: Number
+  },
+  setup(__props) {
+    const props = __props;
+    const focused = ref(false);
+    const width = ref(props.data.width);
+    const duration = 200;
+    const transitionStr = `left ${duration / 1e3}s, top ${duration / 1e3}s, width ${duration / 1e3}s, height ${duration / 1e3}s`;
+    const transition = ref(transitionStr);
+    const animInfo = {
+      anchor: 0.5,
+      duration,
+      onEnd: () => {
+        console.log("resize end", props.query.index);
+      }
+    };
+    const onFocus = () => {
+      focused.value = true;
+      if (width.value == props.data.width) {
+        width.value = props.data.width + 200;
+        props.query.updateItemSize(
+          props.query.index,
+          {
+            width: width.value,
+            height: props.data.height
+          },
+          animInfo
+        );
+      }
+    };
+    const onBlur = () => {
+      focused.value = false;
+      if (width.value !== props.data.width) {
+        width.value = props.data.width;
+        props.query.updateItemSize(
+          props.query.index,
+          {
+            width: width.value,
+            height: props.data.height
+          },
+          animInfo
+        );
+      }
+    };
+    const onClick = () => {
+      console.log("onClick");
+      if (width.value == props.data.width) {
+        width.value = props.data.width + 200;
+        props.query.updateItemSize(
+          props.query.index,
+          {
+            width: width.value,
+            height: props.data.height
+          },
+          animInfo
+        );
+      } else {
+        width.value = props.data.width;
+        props.query.updateItemSize(
+          props.query.index,
+          {
+            width: width.value,
+            height: props.data.height
+          },
+          animInfo
+        );
+      }
+    };
+    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: width.value,
+          height: __props.data.height,
+          fontSize: 30,
+          color: focused.value ? "#FF0000" : "#FFFFFF",
+          backgroundColor: __props.data.color,
+          transition: transition.value,
+          borderRadius: 10
+        })
+      }, toDisplayString(__props.data.content), 5);
+    };
+  }
+};
+const _sfc_main$5 = {
+  __name: "Center",
+  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 + "77";
+    };
+    const fixPositionSlide = new FixPositionSlide();
+    const dataLength = 30;
+    const provideData = () => {
+      const data = [];
+      for (let i = 0; i < dataLength; ++i) {
+        data.push({
+          width: 90,
+          height: 100,
+          marginRight: 10,
+          color: randomColor(),
+          content: i
+        });
+      }
+      return data;
+    };
+    const measures = (data) => {
+      return {
+        width: data.width,
+        height: data.height,
+        marginRight: data.marginRight,
+        marginBottom: data.marginBottom
+      };
+    };
+    const onEdge = (edgeInfo) => {
+      if (edgeInfo.direction == EdgeDirection.bottom) {
+        focusHub.setFocus("itemResizeBackward");
+      }
+    };
+    const widgetLayout = {
+      left: 0,
+      top: 0,
+      width: 600,
+      height: 120
+    };
+    const padding = {
+      left: 25,
+      top: 10,
+      right: 25,
+      bottom: 10
+    };
+    const name = "itemResizeCenter";
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", null, [
+        createBaseVNode("div", {
+          style: normalizeStyle({
+            ...widgetLayout,
+            backgroundColor: "rgba(255,0,0,0.5)"
+          })
+        }, null, 4),
+        createVNode(unref(_sfc_main$E), {
+          ref: "widgetRef",
+          name,
+          left: widgetLayout.left,
+          top: widgetLayout.top,
+          width: widgetLayout.width,
+          height: widgetLayout.height,
+          provideData,
+          direction: unref(HORIZONTAL),
+          slideSetting: unref(fixPositionSlide),
+          measures,
+          padding,
+          onEdge
+        }, {
+          renderItem: withCtx(({ data, onAction, query }) => [
+            createVNode(_sfc_main$6, {
+              data,
+              onAction,
+              query,
+              dataLength
+            }, null, 8, ["data", "onAction", "query"])
+          ]),
+          _: 1
+        }, 8, ["left", "top", "width", "height", "direction", "slideSetting"])
+      ]);
+    };
+  }
+};
+const _sfc_main$4 = {
+  __name: "Item",
+  props: {
+    data: Object,
+    onAction: Object,
+    query: Object,
+    dataLength: Number,
+    widgetLayout: Object,
+    widgetPadding: Object
+  },
+  setup(__props) {
+    const props = __props;
+    useFocusHub();
+    const focused = ref(false);
+    const width = ref(props.data.width);
+    const duration = 200;
+    let timeoutHandler = -1;
+    const animInfo = {
+      anchor: 0,
+      duration,
+      onEnd: () => {
+        console.log("resize end", props.query.index);
+      }
+    };
+    const onFocus = () => {
+      focused.value = true;
+      if (width.value == props.data.width) {
+        timeoutHandler = setTimeout(() => {
+          width.value = props.data.width + 200;
+          props.query.updateItemSize(
+            props.query.index,
+            {
+              width: width.value,
+              height: props.data.height
+            },
+            animInfo
+          );
+        }, 1e3);
+      }
+    };
+    const onBlur = () => {
+      focused.value = false;
+      if (width.value != props.data.width) {
+        width.value = props.data.width;
+        props.query.updateItemSize(
+          props.query.index,
+          {
+            width: width.value,
+            height: props.data.height
+          },
+          animInfo
+        );
+      }
+      clearTimeout(timeoutHandler);
+      timeoutHandler = -1;
+    };
+    const onClick = () => {
+      console.log("onClick");
+    };
+    props.onAction.register("onFocus", onFocus);
+    props.onAction.register("onBlur", onBlur);
+    props.onAction.register("onClick", onClick);
+    onBeforeUnmount(() => {
+      clearTimeout(timeoutHandler);
+      timeoutHandler = -1;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        style: normalizeStyle({
+          width: width.value,
+          height: __props.data.height,
+          fontSize: 30,
+          color: focused.value ? "#FF0000" : "#FFFFFF",
+          backgroundColor: __props.data.color,
+          transition: `left ${duration / 1e3}s, top ${duration / 1e3}s, width ${duration / 1e3}s, height ${duration / 1e3}s`,
+          borderRadius: 10
+        })
+      }, toDisplayString(__props.data.content), 5);
+    };
+  }
+};
+const _sfc_main$3 = {
+  __name: "Backward",
+  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 fixPositionSlide = new FixPositionSlide();
+    const dataLength = 30;
+    const provideData = () => {
+      const data = [];
+      for (let i = 0; i < dataLength; ++i) {
+        data.push({
+          width: 100,
+          height: 100,
+          marginRight: 10,
+          color: randomColor(),
+          content: i
+        });
+      }
+      return data;
+    };
+    const measures = (data) => {
+      return {
+        width: data.width,
+        height: data.height,
+        marginRight: data.marginRight,
+        marginBottom: data.marginBottom
+      };
+    };
+    const onEdge = (edgeInfo) => {
+      if (edgeInfo.direction == EdgeDirection.top) {
+        focusHub.setFocus("itemResizeCenter");
+      } else if (edgeInfo.direction == EdgeDirection.bottom) {
+        focusHub.setFocus("stretch");
+      }
+    };
+    const widgetLayout = {
+      left: 0,
+      top: 0,
+      width: 600,
+      height: 120
+    };
+    const padding = {
+      left: 25,
+      top: 10,
+      right: 25,
+      bottom: 10
+    };
+    const name = "itemResizeBackward";
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", null, [
+        createBaseVNode("div", {
+          style: normalizeStyle({
+            ...widgetLayout,
+            backgroundColor: "rgba(255,0,0,0.5)"
+          })
+        }, null, 4),
+        createVNode(unref(_sfc_main$E), {
+          name,
+          left: widgetLayout.left,
+          top: widgetLayout.top,
+          width: widgetLayout.width,
+          height: widgetLayout.height,
+          provideData,
+          direction: unref(HORIZONTAL),
+          slideSetting: unref(fixPositionSlide),
+          measures,
+          padding,
+          onEdge
+        }, {
+          renderItem: withCtx(({ data, onAction, query }) => [
+            createVNode(_sfc_main$4, {
+              data,
+              onAction,
+              query,
+              dataLength,
+              widgetLayout,
+              widgetPadding: padding
+            }, null, 8, ["data", "onAction", "query"])
+          ]),
+          _: 1
+        }, 8, ["left", "top", "width", "height", "direction", "slideSetting"])
+      ]);
+    };
+  }
+};
+const _sfc_main$2 = {
+  __name: "Item",
+  props: {
+    data: Object,
+    onAction: Object,
+    query: Object,
+    currentLargeItem: Object
+  },
+  setup(__props) {
+    const props = __props;
+    const focused = ref(false);
+    const largeItemIndex = inject("largeItemIndex");
+    const width = ref(props.data.width);
+    const duration = 200;
+    const transitionStr = `left ${duration / 1e3}s, top ${duration / 1e3}s, width ${duration / 1e3}s, height ${duration / 1e3}s`;
+    const transition = ref(transitionStr);
+    const animInfo = {
+      anchor: 0.5,
+      duration,
+      onEnd: () => {
+        console.log("resize end", props.query.index);
+      }
+    };
+    let isLarge = props.query.index == 0;
+    watch(
+      () => largeItemIndex.value,
+      (newV) => {
+        console.log("testtest watch", newV);
+        if (newV == props.query.index) {
+          if (!isLarge) {
+            isLarge = true;
+            width.value = 310;
+            props.query.updateItemSize(
+              props.query.index,
+              {
+                width: width.value,
+                height: props.data.height
+              },
+              animInfo
+            );
+          }
+        } else {
+          if (isLarge) {
+            isLarge = false;
+            width.value = 110;
+            props.query.updateItemSize(
+              props.query.index,
+              {
+                width: width.value,
+                height: props.data.height
+              },
+              animInfo
+            );
+          }
+        }
+      }
+    );
+    let timeoutHandler = -1;
+    const onFocus = () => {
+      focused.value = true;
+      timeoutHandler = setTimeout(() => {
+        largeItemIndex.value = props.query.index;
+      }, 1e3);
+    };
+    const onBlur = () => {
+      focused.value = false;
+      clearTimeout(timeoutHandler);
+      timeoutHandler = -1;
+    };
+    const onClick = () => {
+      console.log("onClick");
+    };
+    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: width.value,
+          height: __props.data.height,
+          fontSize: 30,
+          color: focused.value ? "#FF0000" : "#FFFFFF",
+          backgroundColor: __props.data.color,
+          transition: transition.value,
+          borderRadius: 10
+        })
+      }, toDisplayString(__props.data.content), 5);
+    };
+  }
+};
+const _sfc_main$1 = {
+  __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 + "77";
+    };
+    const fixPositionSlide = new FixPositionSlide();
+    const largeItemIndex = ref(0);
+    provide("largeItemIndex", largeItemIndex);
+    const data = [
+      {
+        width: 310,
+        height: 100,
+        marginRight: 10,
+        color: randomColor(),
+        content: 0
+      },
+      {
+        width: 110,
+        height: 100,
+        marginRight: 10,
+        color: randomColor(),
+        content: 1
+      },
+      {
+        width: 110,
+        height: 100,
+        marginRight: 10,
+        color: randomColor(),
+        content: 2
+      }
+    ];
+    const provideData = () => {
+      return data;
+    };
+    const measures = (data2) => {
+      return {
+        width: data2.width,
+        height: data2.height,
+        marginRight: data2.marginRight,
+        marginBottom: data2.marginBottom
+      };
+    };
+    const onEdge = (edgeInfo) => {
+      if (edgeInfo.direction == EdgeDirection.top) {
+        focusHub.setFocus("itemResizeBackward");
+      }
+    };
+    const widgetLayout = {
+      left: 0,
+      top: 0,
+      width: 600,
+      height: 120
+    };
+    const padding = {
+      left: 25,
+      top: 10,
+      right: 25,
+      bottom: 10
+    };
+    const name = "stretch";
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", null, [
+        createBaseVNode("div", {
+          style: normalizeStyle({
+            ...widgetLayout,
+            backgroundColor: "rgba(255,0,0,0.5)"
+          })
+        }, null, 4),
+        createVNode(unref(_sfc_main$E), {
+          ref: "widgetRef",
+          name,
+          left: widgetLayout.left,
+          top: widgetLayout.top,
+          width: widgetLayout.width,
+          height: widgetLayout.height,
+          provideData,
+          direction: unref(HORIZONTAL),
+          slideSetting: unref(fixPositionSlide),
+          measures,
+          padding,
+          onEdge
+        }, {
+          renderItem: withCtx(({ data: data2, onAction, query }) => [
+            createVNode(_sfc_main$2, {
+              data: data2,
+              onAction,
+              query
+            }, null, 8, ["data", "onAction", "query"])
+          ]),
+          _: 1
+        }, 8, ["left", "top", "width", "height", "direction", "slideSetting"])
+      ]);
+    };
+  }
+};
+const App_vue_vue_type_style_index_0_scoped_aa5b9d2e_lang = "";
+const _sfc_main = {
+  __name: "App",
+  setup(__props) {
+    const focusHub = useFocusHub();
+    onMounted(() => {
+      focusHub.setFocus("itemResizeCenter");
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", { style: {
+        width: 1280,
+        height: 720,
+        backgroundColor: "#007788"
+      } }, [
+        createBaseVNode("div", {
+          style: { left: 150, top: 10 },
+          class: "text"
+        }, " 获焦后放大, 按ok键可以控制放大/缩小, 放大动画以中心为锚点 "),
+        createBaseVNode("div", { style: { left: 150, top: 50 } }, [
+          createVNode(_sfc_main$5)
+        ]),
+        createBaseVNode("div", {
+          style: { left: 150, top: 220 },
+          class: "text"
+        }, " 获焦一秒后放大, 放大动画以左侧为锚点 "),
+        createBaseVNode("div", { style: { left: 150, top: 260 } }, [
+          createVNode(_sfc_main$3)
+        ]),
+        createBaseVNode("div", {
+          style: { left: 150, top: 430 },
+          class: "text"
+        }, " 推拉组件 "),
+        createBaseVNode("div", { style: { left: 150, top: 470 } }, [
+          createVNode(_sfc_main$1)
+        ])
+      ]);
+    };
+  }
+};
+const styleSheetsContent = { "aa5b9d2e": { ".text": '{"width":1280,"height":30,"lineHeight":30,"fontSize":25,"color":"#ffffff"}' } };
+window.JsvCode.Dom.DeclareStyleSheets(styleSheetsContent);
+const App = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-aa5b9d2e"]]);
+export {
+  App as default
+};
+//# sourceMappingURL=http://localhost:57245/map/App.e160a2dd.js.map
+
+/*jsvmd5:97736ad90aff412a8cdf27b667d9eb82*/