create-jsview 2.1.367-test.0 → 2.1.428

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

@@ -0,0 +1,92 @@
+import { a as useRouter } from "./jsview-vue-entry.415721d8.js";
+import { a as _export_sfc } from "./export-sfc.2749ebea.js";
+import { s as shallowRef, t as onMounted, x as onUnmounted, b as resolveComponent, o as openBlock, A as createBlock, l as withCtx, f as createBaseVNode, g as normalizeStyle, u as unref } 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_a3cba3d3_lang = "";
+const _sfc_main = {
+  __name: "App",
+  setup(__props) {
+    const router = useRouter();
+    const test1 = "url(https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/ScaleDownTest/test_1.jpeg)";
+    const test2 = "url(https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/ScaleDownTest/test_2.jpeg)";
+    const onKeyDown = (ev) => {
+      if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 1e4) {
+        if (window.JsView) {
+          window.JsView.setGlobalConfig({
+            texCache: -1
+          });
+        }
+        router.go(-1);
+        return true;
+      }
+      return false;
+    };
+    const style1 = {
+      left: 0,
+      top: 0,
+      width: 300,
+      height: 300,
+      borderRadius: 15
+    };
+    let altOpacity = shallowRef(0.1);
+    let timerHandle = -1;
+    onMounted(() => {
+      timerHandle = setInterval(() => {
+        altOpacity.value += 0.3;
+        if (altOpacity.value > 1) {
+          altOpacity.value = 0.1;
+        }
+        console.log("Opacity set to" + altOpacity.value);
+      }, 1200);
+    });
+    onUnmounted(() => {
+      if (timerHandle != -1) {
+        clearInterval(timerHandle);
+        timerHandle = -1;
+      }
+    });
+    return (_ctx, _cache) => {
+      const _component_jsv_focus_block = resolveComponent("jsv-focus-block");
+      return openBlock(), createBlock(_component_jsv_focus_block, {
+        autoFocus: "",
+        onKeyDown
+      }, {
+        default: withCtx(() => [
+          createBaseVNode("div", { class: "allBgc" }, [
+            createBaseVNode("div", { class: "block" }, [
+              createBaseVNode("div", { style: { left: 120, top: 0 } }, [
+                createBaseVNode("img", {
+                  style: normalizeStyle({
+                    ...style1,
+                    opacity: unref(altOpacity)
+                  }),
+                  src: test1
+                }, null, 4)
+              ]),
+              createBaseVNode("div", { style: { left: 500, top: 0 } }, [
+                createBaseVNode("img", {
+                  style: normalizeStyle({
+                    ...style1,
+                    opacity: unref(altOpacity)
+                  }),
+                  src: test2
+                }, null, 4)
+              ])
+            ])
+          ])
+        ]),
+        _: 1
+      });
+    };
+  }
+};
+const styleSheetsContent = { "a3cba3d3": { ".allBgc": '{"width":1920,"height":1080,"backgroundColor":"#334c4c"}', ".block": '{"left":20,"top":50}' } };
+window.JsvCode.Dom.DeclareStyleSheets(styleSheetsContent);
+const App = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a3cba3d3"]]);
+export {
+  App as default
+};
+//# sourceMappingURL=http://localhost:57245/map/App.3e808b09.js.map
+
+/*jsvmd5:f29ede1b26c702da523801d5d01e0fb4*/

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

@@ -0,0 +1,97 @@
+import { ao as _sfc_main$5 } from "./jsview-vue-entry.415721d8.js";
+import { a as _export_sfc } from "./export-sfc.2749ebea.js";
+import { s as shallowRef, b as resolveComponent, o as openBlock, A as createBlock, l as withCtx, f as createBaseVNode, G as toDisplayString, k as createVNode, u as unref } 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_a6dc7476_lang = "";
+const _sfc_main = {
+  __name: "App",
+  setup(__props) {
+    let myProgress = shallowRef(20);
+    const procKeyDown = (ev) => {
+      switch (ev.keyCode) {
+        case 37:
+          myProgress.value -= 5;
+          if (myProgress.value <= 0) {
+            myProgress.value = 0;
+          }
+          break;
+        case 39:
+          myProgress.value += 5;
+          if (myProgress.value >= 100) {
+            myProgress.value = 100;
+          }
+          break;
+        case 13:
+          myProgress.value = 0;
+          break;
+      }
+    };
+    return (_ctx, _cache) => {
+      const _component_jsv_focus_block = resolveComponent("jsv-focus-block");
+      return openBlock(), createBlock(_component_jsv_focus_block, {
+        autoFocus: "",
+        onKeyDown: procKeyDown
+      }, {
+        default: withCtx(() => [
+          createBaseVNode("div", { class: "bgSty" }, [
+            createBaseVNode("div", {
+              class: "text",
+              style: { left: 210, top: 20 }
+            }, toDisplayString("操作提示：\n按 左 键减小，\n按 右 键增加，\n按【OK】键恢复初始状态，\n按 返回 键退出")),
+            createBaseVNode("div", {
+              class: "logo-bg",
+              style: {
+                left: 210,
+                top: 200
+              }
+            }, [
+              createBaseVNode("div", { class: "bg1" }),
+              createBaseVNode("div", { class: "bg2" }),
+              createBaseVNode("div", { class: "bg3" }),
+              createBaseVNode("div", { style: { top: 80, left: 0 } }, [
+                createVNode(unref(_sfc_main$5), {
+                  width: 800,
+                  height: 84,
+                  progress: unref(myProgress),
+                  aniTime: 0.5,
+                  bgcBefore: "rgba(108, 196,187,0.8)",
+                  bgcBehind: "rgba(255,255,255,0.3)"
+                }, null, 8, ["progress", "aniTime", "bgcBefore", "bgcBehind"])
+              ]),
+              createBaseVNode("div", {
+                style: { left: 0, top: 26 },
+                class: "text"
+              }, toDisplayString("CanvasTexture配合点九完成")),
+              createBaseVNode("div", { style: { top: 260 } }, [
+                createVNode(unref(_sfc_main$5), {
+                  width: 800,
+                  height: 84,
+                  aniTime: 0.5,
+                  progress: unref(myProgress),
+                  bgcBefore: "rgba(108, 196,187,0.8)",
+                  bgcBehind: "rgba(255,255,255,0.3)",
+                  isCanvas: false
+                }, null, 8, ["aniTime", "progress", "bgcBefore", "bgcBehind"])
+              ]),
+              createBaseVNode("div", {
+                style: { left: 0, top: 210 },
+                class: "text"
+              }, toDisplayString("ClipView的方式完成"))
+            ])
+          ])
+        ]),
+        _: 1
+      });
+    };
+  }
+};
+const styleSheetsContent = { "a6dc7476": { ".bgSty": '{"backgroundColor":"#5490d1","width":1280,"height":720}', ".logo-bg": '{"width":800,"height":400}', ".text": '{"width":800,"height":200,"fontSize":24,"fontWeight":"bold","lineHeight":32,"color":"#ffffff","textAlign":"center"}', ".bg1": '{"left":0,"top":0,"height":400,"width":267,"backgroundColor":"#007f00"}', ".bg2": '{"left":267,"top":0,"height":400,"width":267,"backgroundColor":"#3049b8"}', ".bg3": '{"left":534,"top":0,"height":400,"width":266,"backgroundColor":"#d12b8c"}' } };
+window.JsvCode.Dom.DeclareStyleSheets(styleSheetsContent);
+const App = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a6dc7476"]]);
+export {
+  App as default
+};
+//# sourceMappingURL=http://localhost:57245/map/App.40f6e609.js.map
+
+/*jsvmd5:4141a0664852e4a087c7f91d9aae209f*/

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

@@ -0,0 +1,331 @@
+import { u as useFocusHub, v as _JsvApic2$1, L as LoopType, w as _JsvApic$1, V as VERTICAL, g as _sfc_main$F, A as ApicEndState } from "./jsview-vue-entry.415721d8.js";
+import { a as ref, o as openBlock, e as createElementBlock, G as toDisplayString, g as normalizeStyle, t as onMounted, f as createBaseVNode, k as createVNode, u as unref, l as withCtx, F as Fragment } 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$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 = () => {
+      props.data.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: 150,
+          height: 70,
+          fontSize: 20,
+          color: focused.value ? "#FF0000" : "#FFFFFF",
+          backgroundColor: "#007788"
+        })
+      }, toDisplayString(__props.data.content), 5);
+    };
+  }
+};
+const catRun = "" + new URL("../assets/animated_webp.df116064.webp", import.meta.url).href;
+const girlRun = "" + new URL("../assets/girl_run.1c322b33.gif", import.meta.url).href;
+const quan = "" + new URL("../assets/quan.54556d84.webp", import.meta.url).href;
+const ball = "" + new URL("../assets/ball_3.6443240f.webp", import.meta.url).href;
+const App_vue_vue_type_style_index_0_scoped_d59bf171_lang = "";
+const _sfc_main = {
+  __name: "App",
+  setup(__props) {
+    const focusHub = useFocusHub();
+    let catRunPlay = ref(false);
+    let girlRunPlay = ref(false);
+    let quanPlay = ref(false);
+    let ballPlay = ref(false);
+    const catRunCallback = {
+      onStart: () => {
+        catRunPlay.value = true;
+      },
+      onEnd: () => {
+        catRunPlay.value = false;
+      }
+    };
+    const girlRunCallback = {
+      onStart: () => {
+        girlRunPlay.value = true;
+      },
+      onEnd: () => {
+        girlRunPlay.value = false;
+      }
+    };
+    const quanCallback = {
+      onStart: () => {
+        quanPlay.value = true;
+      },
+      onEnd: () => {
+        quanPlay.value = false;
+      }
+    };
+    const ballCallback = {
+      onStart: () => {
+        ballPlay.value = true;
+      },
+      onEnd: () => {
+        ballPlay.value = false;
+      }
+    };
+    let catRunRef = ref(null);
+    let girlRunRef = ref(null);
+    let quanRef = ref(null);
+    let ballRef = ref(null);
+    let preClickIndex = -1;
+    const data = [
+      {
+        index: 0,
+        content: "彩虹猫",
+        onClick() {
+          if (catRunRef.value) {
+            if (catRunPlay.value) {
+              catRunRef.value.stop();
+              catRunPlay.value = false;
+            } else {
+              catRunRef.value.play();
+              catRunPlay.value = true;
+            }
+          }
+        }
+      },
+      {
+        index: 1,
+        content: "小女孩",
+        onClick() {
+          if (girlRunRef.value) {
+            if (girlRunPlay.value) {
+              girlRunRef.value.stop();
+              girlRunPlay.value = false;
+            } else {
+              girlRunRef.value.play();
+              girlRunPlay.value = true;
+            }
+          }
+        }
+      },
+      {
+        index: 2,
+        content: "优惠券",
+        onClick() {
+          if (quanRef.value) {
+            if (quanPlay.value) {
+              quanRef.value.stop();
+              quanPlay.value = false;
+            } else {
+              quanRef.value.play();
+              quanPlay.value = true;
+            }
+          }
+        }
+      },
+      {
+        index: 3,
+        content: "球:跳至第5帧",
+        onClick() {
+          if (preClickIndex != this.index) {
+            ballRef.value.show(5);
+            ballPlay.value = true;
+          } else {
+            if (ballRef.value) {
+              if (ballPlay.value) {
+                ballRef.value.stop();
+                ballPlay.value = false;
+              } else {
+                ballRef.value.show(5);
+                ballPlay.value = true;
+              }
+            }
+          }
+          preClickIndex = this.index;
+        }
+      },
+      {
+        index: 4,
+        content: "球:部分循环",
+        onClick() {
+          const play = () => {
+            ballRef.value.play(LoopType.LOOP_PART, [
+              [2, 3, 6],
+              [2, 10, 15]
+            ]);
+            ballPlay.value = true;
+          };
+          if (preClickIndex != this.index) {
+            play();
+          } else {
+            if (ballRef.value) {
+              if (ballPlay.value) {
+                ballRef.value.stop();
+                ballPlay.value = false;
+              } else {
+                play();
+              }
+            }
+          }
+          preClickIndex = this.index;
+        }
+      },
+      {
+        index: 5,
+        content: "球:完成后消失",
+        onClick() {
+          const play = () => {
+            ballRef.value.play(
+              LoopType.LOOP_PART,
+              [
+                [2, 3, 6],
+                [2, 10, 15]
+              ],
+              ApicEndState.HIDE
+            );
+            ballPlay.value = true;
+          };
+          if (preClickIndex != this.index) {
+            play();
+          } else {
+            if (ballRef.value) {
+              if (ballPlay.value) {
+                ballRef.value.stop();
+                ballPlay.value = false;
+              } else {
+                play();
+              }
+            }
+          }
+          preClickIndex = this.index;
+        }
+      }
+    ];
+    const provideData = () => {
+      return data;
+    };
+    const measures = (item) => {
+      return {
+        width: 150,
+        height: 70,
+        marginRight: 10,
+        marginBottom: 10
+      };
+    };
+    onMounted(() => {
+      catRunRef.value.play();
+      focusHub.setFocus("myWidget");
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createBaseVNode("div", { style: { width: 1920, height: 1080, backgroundColor: "#334C4C" } }, [
+          createBaseVNode("div", { style: { left: 20, top: 20 } }, [
+            createVNode(unref(_JsvApic2$1), {
+              ref_key: "catRunRef",
+              ref: catRunRef,
+              src: `url(${unref(catRun)})`,
+              style: { width: 250, height: 250 },
+              onStart: catRunCallback.onStart,
+              onEnd: catRunCallback.onEnd
+            }, null, 8, ["src", "onStart", "onEnd"]),
+            createBaseVNode("div", {
+              className: "text",
+              style: { top: 270, width: 250 }
+            }, toDisplayString(`WEBP(${unref(catRunPlay) ? "运行" : "停止"})`), 1)
+          ]),
+          createBaseVNode("div", { style: { left: 280, top: 20 } }, [
+            createVNode(unref(_JsvApic$1), {
+              ref_key: "girlRunRef",
+              ref: girlRunRef,
+              src: `url(${unref(girlRun)})`,
+              style: { width: 250, height: 214 },
+              autoPlay: true,
+              loopType: unref(LoopType).LOOP_DEFAULT,
+              onStart: girlRunCallback.onStart,
+              onEnd: girlRunCallback.onEnd
+            }, null, 8, ["src", "loopType", "onStart", "onEnd"]),
+            createBaseVNode("div", {
+              className: "text",
+              style: { top: 219, width: 250 }
+            }, toDisplayString(`GIF(${unref(girlRunPlay) ? "运行" : "停止"})`), 1)
+          ]),
+          createBaseVNode("div", { style: { left: 540, top: 20 } }, [
+            createVNode(unref(_JsvApic$1), {
+              ref_key: "quanRef",
+              ref: quanRef,
+              src: `url(${unref(quan)})`,
+              style: { width: 250, height: 296 },
+              autoPlay: true,
+              loopType: unref(LoopType).LOOP_DEFAULT,
+              onStart: quanCallback.onStart,
+              onEnd: quanCallback.onEnd
+            }, null, 8, ["src", "loopType", "onStart", "onEnd"]),
+            createBaseVNode("div", {
+              className: "text",
+              style: { top: 301, width: 250 }
+            }, toDisplayString(`单次播放WEBP(${unref(quanPlay) ? "运行" : "停止"})`), 1)
+          ]),
+          createBaseVNode("div", { style: { left: 800, top: 20 } }, [
+            createVNode(unref(_JsvApic2$1), {
+              ref_key: "ballRef",
+              ref: ballRef,
+              src: `url(${unref(ball)})`,
+              style: { width: 300, height: 200 },
+              onStart: ballCallback.onStart,
+              onEnd: ballCallback.onEnd
+            }, null, 8, ["src", "onStart", "onEnd"]),
+            createBaseVNode("div", {
+              class: "text",
+              style: { top: 205, width: 300, height: 200 }
+            }, toDisplayString(`局部循环WEBP(${unref(ballPlay) ? "运行" : "停止"})`), 1)
+          ]),
+          createBaseVNode("div", { style: {
+            left: 50,
+            top: 590,
+            width: 1180,
+            textAlign: "center",
+            color: "#000000",
+            fontSize: 30
+          } }, toDisplayString(`按钮可以控制对应图播放/停止`))
+        ]),
+        createVNode(unref(_sfc_main$F), {
+          name: "myWidget",
+          left: 20,
+          top: 400,
+          width: 1280,
+          height: 300,
+          provideData,
+          direction: unref(VERTICAL),
+          measures
+        }, {
+          renderItem: withCtx(({ data: data2, onAction }) => [
+            createVNode(_sfc_main$1, {
+              data: data2,
+              onAction
+            }, null, 8, ["data", "onAction"])
+          ]),
+          _: 1
+        }, 8, ["direction"])
+      ], 64);
+    };
+  }
+};
+const styleSheetsContent = { "d59bf171": { ".text": '{"fontSize":25,"height":68,"lineHeight":34,"color":"#000000","textAlign":"center"}' } };
+window.JsvCode.Dom.DeclareStyleSheets(styleSheetsContent);
+const App = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d59bf171"]]);
+export {
+  App as default
+};
+//# sourceMappingURL=http://localhost:57245/map/App.539ee14e.js.map
+
+/*jsvmd5:9051eed41cd359f278679e56113898d5*/

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

@@ -0,0 +1,189 @@
+import { u as useFocusHub, H as HORIZONTAL, g as _sfc_main$F } from "./jsview-vue-entry.415721d8.js";
+import { 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 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 TAG = "MetroWidgetDemo";
+    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 data = [
+        {
+          width: 90,
+          height: 90,
+          marginRight: 10,
+          marginBottom: 10,
+          color: randomColor(),
+          content: 0
+        },
+        {
+          width: 90,
+          height: 90,
+          marginRight: 10,
+          marginBottom: 10,
+          color: randomColor(),
+          content: 1
+        },
+        {
+          width: 90,
+          height: 90,
+          marginRight: 10,
+          marginBottom: 10,
+          color: randomColor(),
+          content: 2
+        },
+        {
+          width: 190,
+          height: 190,
+          marginRight: 10,
+          marginBottom: 10,
+          color: randomColor(),
+          content: 3
+        },
+        {
+          width: 90,
+          height: 90,
+          marginRight: 10,
+          marginBottom: 10,
+          color: randomColor(),
+          content: 4
+        },
+        {
+          width: 90,
+          height: 90,
+          marginRight: 10,
+          marginBottom: 10,
+          color: randomColor(),
+          content: 5
+        }
+      ];
+      for (let i = 0; i < 5; i++) {
+        data.push(
+          {
+            width: 90,
+            height: 190,
+            marginRight: 10,
+            marginBottom: 10,
+            color: randomColor(),
+            content: 6 + i * 2
+          },
+          {
+            width: 90,
+            height: 90,
+            marginRight: 10,
+            marginBottom: 10,
+            color: randomColor(),
+            content: 6 + i * 2 + 1
+          }
+        );
+      }
+      return data;
+    };
+    const measures = (data) => {
+      return {
+        width: data.width,
+        height: data.height,
+        marginRight: data.marginRight,
+        marginBottom: data.marginBottom
+      };
+    };
+    const onEdge = (edgeInfo) => {
+      console.log(TAG, "onEdge", edgeInfo);
+    };
+    const onFocus = () => {
+      console.log(TAG, "onFocus");
+    };
+    const onBlur = () => {
+      console.log(TAG, "onBlur");
+    };
+    const onScroll = (start, range, totalSize) => {
+      console.log(TAG, "onScroll", start, range, totalSize);
+    };
+    const widgetLayout = {
+      left: 50,
+      top: 50,
+      width: 500,
+      height: 300
+    };
+    onMounted(() => {
+      focusHub.setFocus("mainMw");
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createBaseVNode("div", { style: {
+          width: 1920,
+          height: 1080,
+          backgroundColor: "#007788"
+        } }),
+        createVNode(unref(_sfc_main$F), {
+          name: "mainMw",
+          left: widgetLayout.left,
+          top: widgetLayout.top,
+          width: widgetLayout.width,
+          height: widgetLayout.height,
+          provideData,
+          direction: unref(HORIZONTAL),
+          measures,
+          onEdge,
+          onFocus,
+          onBlur,
+          onScroll
+        }, {
+          renderItem: withCtx(({ data, onAction }) => [
+            createVNode(_sfc_main$1, {
+              data,
+              onAction
+            }, null, 8, ["data", "onAction"])
+          ]),
+          _: 1
+        }, 8, ["left", "top", "width", "height", "direction"])
+      ], 64);
+    };
+  }
+};
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=http://localhost:57245/map/App.55166fae.js.map
+
+/*jsvmd5:1acdf70e44f38de24450ac679eff4916*/