create-jsview 2.1.367-test.0 → 2.1.428

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

@@ -0,0 +1,173 @@
+import "./jsview-forge-define.bfab260e.js";
+import { X as _sfc_main$a, Y as JsvRippleShape } from "./jsview-vue-entry.415721d8.js";
+import { a as _export_sfc } from "./export-sfc.2749ebea.js";
+import { s as shallowRef, a as ref, b as resolveComponent, o as openBlock, e as createElementBlock, k as createVNode, l as withCtx, f as createBaseVNode, g as normalizeStyle, u as unref, F as Fragment } from "./vue.889a9b8b.js";
+import "./jsview-dom-entry.280f04b1.js";
+const App_vue_vue_type_style_index_0_scoped_c5fe575f_lang = "";
+const _sfc_main = {
+  __name: "App",
+  setup(__props) {
+    const rippleViewRef = shallowRef(null);
+    const imgUrl = "https://qcast-image.oss-cn-qingdao.aliyuncs.com/demo_images/colorful-blocks.jpg";
+    const genSource = () => {
+      return [
+        Math.round(Math.random() * 800),
+        Math.round(Math.random() * 300),
+        Math.round(Math.random() * 60 + 20)
+      ];
+    };
+    const foucsIndex = ref(0);
+    const button1 = {
+      left: 300,
+      top: 300,
+      width: 200,
+      height: 100
+    };
+    const button2 = {
+      left: 600,
+      top: 300,
+      width: 200,
+      height: 100
+    };
+    const clamp = (min, max, num) => Math.min(Math.max(num, min), max);
+    const onKeyDown = (ev) => {
+      switch (ev.keyCode) {
+        case 13:
+          const b = foucsIndex.value == 0 ? button1 : button2;
+          rippleViewRef.value.addSource(
+            Math.round(b.left + b.width / 2),
+            //波中心的x
+            Math.round(b.top + b.height / 2),
+            // 波中心的y
+            40,
+            // 波的振幅
+            {
+              type: JsvRippleShape.RECTANGLE,
+              // 波的类型, 圆角矩形波
+              width: 200,
+              // 矩形宽
+              height: 100,
+              //矩形高
+              radius: 45
+              // 圆角半径
+            },
+            {
+              timeDecay: 10,
+              //时间衰减因子
+              distanceDecay: 50,
+              // 距离衰减因子
+              speed: 100,
+              // 波速 px/s
+              frequency: 8,
+              // 频率 次/s
+              waveNum: 2
+              // 波的个数
+            }
+          );
+          break;
+        case 38:
+          const p = genSource();
+          rippleViewRef.value.addSource(
+            ...p,
+            {
+              type: JsvRippleShape.CIRCLE
+            },
+            {
+              timeDecay: 3,
+              distanceDecay: 8,
+              speed: 100,
+              frequency: 8,
+              waveNum: 2
+            }
+          );
+          break;
+        case 37:
+          foucsIndex.value = clamp(0, 1, foucsIndex.value - 1);
+          break;
+        case 39:
+          foucsIndex.value = clamp(0, 1, foucsIndex.value + 1);
+          break;
+      }
+    };
+    return (_ctx, _cache) => {
+      const _component_jsv_focus_block = resolveComponent("jsv-focus-block");
+      return openBlock(), createElementBlock(Fragment, null, [
+        createVNode(_component_jsv_focus_block, {
+          autoFocus: "",
+          onAction: {
+            onKeyDown
+          }
+        }, null, 8, ["onAction"]),
+        createVNode(unref(_sfc_main$a), {
+          ref_key: "rippleViewRef",
+          ref: rippleViewRef,
+          width: 1280,
+          height: 720
+        }, {
+          default: withCtx(() => [
+            createBaseVNode("div", {
+              style: normalizeStyle({
+                width: 1280,
+                height: 720,
+                backgroundImage: `url(${imgUrl})`
+              })
+            }, null, 4),
+            createBaseVNode("div", {
+              style: normalizeStyle({
+                left: 50,
+                top: 250,
+                width: 200,
+                height: 200,
+                backgroundImage: `url(${imgUrl})`,
+                animation: "test-anim 1s infinite"
+              })
+            }, null, 4),
+            createBaseVNode("div", { style: {
+              left: 50,
+              top: 50,
+              width: 800,
+              height: 50,
+              backgroundColor: "#007788",
+              fontSize: 27,
+              lineHeight: 50,
+              color: "#FFFFFF",
+              textAlign: "center"
+            } }, " 按上键添加随机波纹, 最多同时存在5个 "),
+            createBaseVNode("div", {
+              style: normalizeStyle({
+                ...button1,
+                backgroundColor: "#007788",
+                borderRadius: 45,
+                fontSize: 23,
+                lineHeight: 50,
+                textAlign: "center",
+                color: foucsIndex.value == 0 ? "#FF0000" : "#FFFFFF"
+              })
+            }, " 按键1 ", 4),
+            createBaseVNode("div", {
+              style: normalizeStyle({
+                ...button2,
+                backgroundColor: "#007788",
+                borderRadius: 45,
+                fontSize: 23,
+                lineHeight: 50,
+                textAlign: "center",
+                color: foucsIndex.value == 1 ? "#FF0000" : "#FFFFFF"
+              })
+            }, " 按键2 ", 4)
+          ]),
+          _: 1
+        }, 512)
+      ], 64);
+    };
+  }
+};
+const styleSheetsContent = { "0": { "test-anim-c5fe575f": "@keyframes test-anim-c5fe575f {from{transform:rotate3d(0, 0, 1, 0deg);}to{transform:rotate3d(0, 0, 1, 360deg);}}" } };
+window.JsvCode.Dom.DeclareStyleSheets(styleSheetsContent);
+const App = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c5fe575f"]]);
+export {
+  App as default
+};
+//# sourceMappingURL=http://localhost:57245/map/App.9625268d.js.map
+
+/*jsvmd5:ea0ca34742316259ec766a2143a182c0*/

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

@@ -0,0 +1,119 @@
+import { a as useRouter, c as bridge, M as JsvMaskClipDiv } from "./jsview-vue-entry.415721d8.js";
+import { t as onMounted, b as resolveComponent, o as openBlock, A as createBlock, l as withCtx, f as createBaseVNode, g as normalizeStyle, G as toDisplayString, u as unref, 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 mask1_pic = "" + new URL("../assets/1.54c7645a.png", import.meta.url).href;
+const mask2_pic = "" + new URL("../assets/2.c46fde4a.png", import.meta.url).href;
+const mask3_pic = "" + new URL("../assets/3.920d6934.png", import.meta.url).href;
+const mask4_pic = "" + new URL("../assets/4.f58de085.png", import.meta.url).href;
+const bg_pic = "" + new URL("../assets/php.9533a06f.jpg", import.meta.url).href;
+const _sfc_main = {
+  __name: "App",
+  setup(__props) {
+    const router = useRouter();
+    const _onKeyDown = (ev) => {
+      if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 1e4) {
+        router.go(-1);
+      }
+      return true;
+    };
+    onMounted(() => {
+      bridge.notifyPageLoaded();
+    });
+    return (_ctx, _cache) => {
+      const _component_jsv_focus_block = resolveComponent("jsv-focus-block");
+      return openBlock(), createBlock(_component_jsv_focus_block, {
+        autoFocus: "",
+        onAction: {
+          onKeyDown: _onKeyDown
+        }
+      }, {
+        default: withCtx(() => [
+          createBaseVNode("div", { style: { width: 1280, height: 720, backgroundColor: "#334C4C" } }, [
+            createBaseVNode("div", { style: {
+              left: 20,
+              top: 20,
+              width: 1200,
+              height: 100,
+              color: "#FFFFFF",
+              fontSize: 30
+            } }, " 原始图片通过四个拼图形状的遮罩切成四种形状以形成拼图效果 "),
+            createBaseVNode("div", {
+              style: normalizeStyle({
+                textAlign: "center",
+                fontSize: 30,
+                lineHeight: 50,
+                color: "#ffffff",
+                left: 10,
+                top: 100,
+                width: 654 / 2,
+                height: 50,
+                backgroundColor: "rgba(27,38,151,0.8)"
+              })
+            }, toDisplayString(`原始图片`), 4),
+            createBaseVNode("div", {
+              style: normalizeStyle({
+                left: 10,
+                top: (720 - 654 / 2) / 2,
+                width: 654 / 2,
+                height: 654 / 2,
+                backgroundImage: `url(${unref(bg_pic)})`
+              })
+            }, null, 4),
+            createBaseVNode("div", { style: { left: 654 / 2 + 150 } }, [
+              createVNode(unref(JsvMaskClipDiv), {
+                style: { top: 120, left: 10, width: 196, height: 256 },
+                viewSrc: unref(bg_pic),
+                maskSrc: unref(mask1_pic),
+                maskLeft: 0 / 654,
+                maskTop: 0 / 654,
+                maskWidth: 327 / 654,
+                maskHeight: 427 / 654
+              }, null, 8, ["viewSrc", "maskSrc"]),
+              createVNode(unref(JsvMaskClipDiv), {
+                style: { top: 120, left: 10 + 196, width: 256, height: 196 },
+                viewSrc: unref(bg_pic),
+                maskSrc: unref(mask2_pic),
+                maskLeft: 227 / 654,
+                maskTop: 0 / 654,
+                maskWidth: 427 / 654,
+                maskHeight: 327 / 654
+              }, null, 8, ["viewSrc", "maskSrc"]),
+              createVNode(unref(JsvMaskClipDiv), {
+                style: { top: 120 + 256 + 10, left: 10, width: 256, height: 196 },
+                viewSrc: unref(bg_pic),
+                maskSrc: unref(mask3_pic),
+                maskLeft: 0 / 654,
+                maskTop: 327 / 654,
+                maskWidth: 427 / 654,
+                maskHeight: 327 / 654
+              }, null, 8, ["viewSrc", "maskSrc"]),
+              createVNode(unref(JsvMaskClipDiv), {
+                style: {
+                  top: 120 + 196 + 10,
+                  left: 10 + 256,
+                  width: 196,
+                  height: 256
+                },
+                viewSrc: unref(bg_pic),
+                maskSrc: unref(mask4_pic),
+                maskLeft: 327 / 654,
+                maskTop: 227 / 654,
+                maskWidth: 327 / 654,
+                maskHeight: 427 / 654
+              }, null, 8, ["viewSrc", "maskSrc"])
+            ])
+          ])
+        ]),
+        _: 1
+      }, 8, ["onAction"]);
+    };
+  }
+};
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=http://localhost:57245/map/App.96596f9f.js.map
+
+/*jsvmd5:00e8e4657cdb1ff5c2476a03f8696b0d*/

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

@@ -0,0 +1,237 @@
+import { u as useFocusHub, H as HORIZONTAL, g as _sfc_main$F, ah as METRO_WIDGET, V as VERTICAL, r as _sfc_main$g } from "./jsview-vue-entry.415721d8.js";
+import { a as ref, i as inject, s as shallowRef, o as openBlock, e as createElementBlock, f as createBaseVNode, G as toDisplayString, g as normalizeStyle, k as createVNode, l as withCtx, u as unref, F as Fragment, r as reactive, p as provide, t as onMounted } 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: "Item",
+  props: {
+    data: Object,
+    onAction: Object
+  },
+  setup(__props) {
+    const props = __props;
+    const focused = ref(false);
+    const focusSize = inject("focusSize");
+    const divRef = shallowRef(null);
+    const onFocus = () => {
+      focused.value = true;
+      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 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"
+        })
+      }, [
+        createBaseVNode("div", {
+          ref_key: "divRef",
+          ref: divRef,
+          style: normalizeStyle({
+            width: __props.data.width,
+            height: __props.data.height,
+            fontSize: 30,
+            color: "#FFFFFF",
+            backgroundColor: __props.data.color,
+            borderRadius: 10
+          })
+        }, toDisplayString(__props.data.content), 5)
+      ], 4);
+    };
+  }
+};
+const _sfc_main$1 = {
+  __name: "PageRow",
+  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) => {
+      mwRef.value?.setEnterFocusRect(rect);
+      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$2, {
+              data,
+              onAction
+            }, null, 8, ["data", "onAction"])
+          ]),
+          _: 1
+        }, 8, ["name", "width", "height", "direction", "onEdge"])
+      ], 64);
+    };
+  }
+};
+const focusImg = "" + new URL("../assets/focus1.ff67f2e6.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 = () => {
+      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("div", { style: { width: 1280, height: 720, backgroundColor: "#007788" } }, [
+        createBaseVNode("div", { style: {
+          left: 100,
+          top: 20,
+          width: 800,
+          height: 400,
+          fontSize: 30,
+          color: "#FFFFFF"
+        } }, toDisplayString("一个带焦点移动的简单页面示例")),
+        createVNode(unref(_sfc_main$F), {
+          name: "mwWidget",
+          top: 80,
+          left: 50,
+          width: 660,
+          height: 600,
+          provideData,
+          padding: { left: 30, right: 30 },
+          direction: unref(VERTICAL),
+          measures
+        }, {
+          renderItem: withCtx(({ data, onAction, onItemEdge }) => [
+            createVNode(_sfc_main$1, {
+              data,
+              onAction,
+              onItemEdge
+            }, null, 8, ["data", "onAction", "onItemEdge"])
+          ]),
+          _: 1
+        }, 8, ["direction"]),
+        createVNode(unref(_sfc_main$g), {
+          style: normalizeStyle({
+            width: focusSize.width,
+            height: focusSize.height,
+            top: focusSize.top,
+            left: focusSize.left
+          }),
+          imageUrl: unref(focusImg),
+          imageWidth: 55,
+          centerWidth: 1,
+          borderOutset: 13,
+          imageDspWidth: 55,
+          animTime: 0.2,
+          waitForInit: true
+        }, null, 8, ["style", "imageUrl", "animTime"])
+      ]);
+    };
+  }
+};
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=http://localhost:57245/map/App.977c745b.js.map
+
+/*jsvmd5:e9a0ecc1c4f921337476897a8f15526a*/

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

@@ -0,0 +1,122 @@
+import { aj as JsvLine } from "./jsview-vue-entry.415721d8.js";
+import { a as _export_sfc } from "./export-sfc.2749ebea.js";
+import { o as openBlock, e as createElementBlock, k as createVNode, u as unref, f as createBaseVNode } from "./vue.889a9b8b.js";
+import "./jsview-forge-define.bfab260e.js";
+import "./jsview-dom-entry.280f04b1.js";
+const bg = "" + new URL("../assets/bgimage.9ebd66c5.jpg", import.meta.url).href;
+const App_vue_vue_type_style_index_0_scoped_b97a3388_lang = "";
+const _sfc_main = {
+  __name: "App",
+  setup(__props) {
+    const startPos1 = {
+      x: 340,
+      y: 40
+    };
+    const endPos1 = {
+      x: 340,
+      y: 160
+    };
+    const startPos2 = {
+      x: 840,
+      y: 150
+    };
+    const endPos2 = {
+      x: 1040,
+      y: 50
+    };
+    const startPos3 = {
+      x: 340,
+      y: 300
+    };
+    const endPos3 = {
+      x: 560,
+      y: 400
+    };
+    const startPos4 = {
+      x: 760,
+      y: 400
+    };
+    const endPos4 = {
+      x: 980,
+      y: 300
+    };
+    const startPos5 = {
+      x: 240,
+      y: 550
+    };
+    const endPos5 = {
+      x: 500,
+      y: 520
+    };
+    const startPos6 = {
+      x: 840,
+      y: 520
+    };
+    const endPos6 = {
+      x: 1100,
+      y: 550
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", { class: "bgStyle" }, [
+        createVNode(unref(JsvLine), {
+          startPos: startPos1,
+          endPos: endPos1,
+          lineWidth: 2,
+          backgroundColor: "#FF1213"
+        }),
+        createBaseVNode("div", { class: "text text1" }, "竖线不带圆角"),
+        createVNode(unref(JsvLine), {
+          startPos: startPos2,
+          endPos: endPos2,
+          lineWidth: 3,
+          backgroundColor: "#FF1213",
+          borderRadius: 10
+        }),
+        createBaseVNode("div", { class: "text text2" }, "斜线带圆角"),
+        createVNode(unref(JsvLine), {
+          startPos: startPos3,
+          endPos: endPos3,
+          lineWidth: 5,
+          backgroundColor: "#22F142",
+          borderRadius: 10,
+          appear: "fadeIn"
+        }),
+        createBaseVNode("div", { class: "text text3" }, "斜线带圆角淡入"),
+        createVNode(unref(JsvLine), {
+          startPos: startPos4,
+          endPos: endPos4,
+          lineWidth: 6,
+          backgroundColor: "#22F142",
+          borderRadius: 10,
+          appear: "fadeOut"
+        }),
+        createBaseVNode("div", { class: "text text4" }, "斜线带圆角淡出"),
+        createVNode(unref(JsvLine), {
+          startPos: startPos5,
+          endPos: endPos5,
+          lineWidth: 40,
+          backgroundImage: unref(bg),
+          borderRadius: 20
+        }, null, 8, ["backgroundImage"]),
+        createBaseVNode("div", { class: "text text5" }, "带圆角背景图"),
+        createVNode(unref(JsvLine), {
+          startPos: startPos6,
+          endPos: endPos6,
+          lineWidth: 30,
+          backgroundImage: "linear-gradient(to left bottom, rgba(255, 0, 0, 1), rgba(0, 255, 0, 1), rgba(0, 0, 255, 1))",
+          borderRadius: 20
+        }, null, 8, ["backgroundImage"]),
+        createBaseVNode("div", { class: "text text6" }, "带圆角渐变色")
+      ]);
+    };
+  }
+};
+const styleSheetsContent = { "b97a3388": { ".bgStyle": '{"width":1280,"height":720,"backgroundColor":"#007788"}', ".text": '{"width":180,"height":30,"backgroundColor":"#000000","lineHeight":30,"fontSize":24,"fontWeight":"bold","color":"#FFFFFF","textAlign":"center"}', ".text1": '{"top":200,"left":240}', ".text2": '{"top":200,"left":840}', ".text3": '{"top":430,"left":340}', ".text4": '{"top":430,"left":780}', ".text5": '{"top":620,"left":280}', ".text6": '{"top":620,"left":860}' } };
+window.JsvCode.Dom.DeclareStyleSheets(styleSheetsContent);
+const App = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b97a3388"]]);
+export {
+  App as default
+};
+//# sourceMappingURL=http://localhost:57245/map/App.9e7fbf3c.js.map
+
+/*jsvmd5:7cad9472b09230738fb7d8ca8b1aa949*/