create-jsview 2.1.367-test.0 → 2.1.428

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

@@ -0,0 +1,251 @@
+import { u as useFocusHub, E as EdgeDirection, ag as SeamlessSlide, ap as WholePageSlide, a8 as FixPositionSlide, 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 data = [];
+    for (let i = 0; i < 30; i++) {
+      data.push({
+        width: 60,
+        height: 60,
+        marginRight: 10,
+        marginBottom: 10,
+        color: randomColor(),
+        content: i
+      });
+    }
+    const widget1 = {
+      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: 350,
+        height: 140
+      },
+      slideSetting: new SeamlessSlide({
+        startPercent: 0.2,
+        endPercent: 0.8
+      })
+    };
+    const widget2 = {
+      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");
+        } else if (edgeInfo.direction == EdgeDirection.bottom) {
+          focusHub.setFocus("widget3");
+        }
+      },
+      widgetLayout: {
+        left: 50,
+        top: 300,
+        width: 350,
+        height: 160
+      },
+      slideSetting: new WholePageSlide()
+    };
+    const widget3 = {
+      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("widget2");
+        }
+      },
+      widgetLayout: {
+        left: 50,
+        top: 550,
+        width: 350,
+        height: 140
+      },
+      slideSetting: new FixPositionSlide({ fixPercent: 0.5 })
+    };
+    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),
+          slideSetting: widget1.slideSetting
+        }, {
+          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", "slideSetting"]),
+        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),
+          slideSetting: widget2.slideSetting
+        }, {
+          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", "slideSetting"]),
+        createBaseVNode("div", {
+          style: normalizeStyle({
+            left: widget3.widgetLayout.left,
+            top: widget3.widgetLayout.top - 50,
+            width: 1280,
+            height: 50,
+            fontSize: 20,
+            color: "#FFFFFF"
+          })
+        }, toDisplayString("焦点固定位置"), 4),
+        createVNode(unref(_sfc_main$F), {
+          name: "widget3",
+          left: widget3.widgetLayout.left,
+          top: widget3.widgetLayout.top,
+          width: widget3.widgetLayout.width,
+          height: widget3.widgetLayout.height,
+          provideData: widget3.provideData,
+          measures: widget3.measures,
+          onEdge: widget3.onEdge,
+          direction: unref(HORIZONTAL),
+          slideSetting: widget3.slideSetting
+        }, {
+          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", "slideSetting"])
+      ], 64);
+    };
+  }
+};
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=http://localhost:57245/map/App.f6a2ac1e.js.map
+
+/*jsvmd5:922c90cf7f1a1927c1a9c659be9d0a9c*/

package/template-vue-vite/dist-test-jsview-chunk/js/App2.f586c86d.js

@@ -0,0 +1,112 @@
+import { a as useRouter, R as _JsvTextureAnim$1, S as DECORATE_NINEPATCH_ALPHA_MIX } from "./jsview-vue-entry.415721d8.js";
+import { g as getDataUrl } from "./main.bd759d7c.js";
+import { a as ref, b as resolveComponent, o as openBlock, A as createBlock, l as withCtx, f as createBaseVNode, g as normalizeStyle, k as createVNode, u as unref } from "./vue.889a9b8b.js";
+import "./jsview-forge-define.bfab260e.js";
+import "./jsview-dom-entry.280f04b1.js";
+import "./export-sfc.2749ebea.js";
+const img = "" + new URL("../assets/light.fd536e0c.png", import.meta.url).href;
+const img2 = "" + new URL("../assets/light2.eac76425.png", import.meta.url).href;
+const mask = "" + new URL("../assets/mask.c1211360.png", import.meta.url).href;
+const _sfc_main = {
+  __name: "App2",
+  setup(__props) {
+    const DemoResourceBase = getDataUrl();
+    const getRandom = (start, end) => {
+      return Math.round(Math.random() * (end - start) + start);
+    };
+    const router = useRouter();
+    const width = ref(300);
+    const height = ref(200);
+    const left = ref(50);
+    const top = ref(80);
+    const rotateAnimation = "{from {transform: rotate3d(0,0,1,0);} to {transform: rotate3d(0,0,1,360deg);}}";
+    const ninePatchDecorator = {
+      type: DECORATE_NINEPATCH_ALPHA_MIX,
+      url: `url(${mask})`,
+      imageWidth: 86,
+      centerWidth: 2,
+      borderOutset: 0,
+      animTime: 0.5
+    };
+    const texCoord = {
+      width: 600,
+      height: 600
+    };
+    const onKeyDown = (ev) => {
+      if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 1e4) {
+        router?.go(-1);
+      } else if (ev.keyCode == 13) {
+        left.value = getRandom(50, 400);
+        top.value = getRandom(80, 200);
+        width.value = getRandom(100, 300);
+        height.value = getRandom(100, 300);
+      }
+      return true;
+    };
+    return (_ctx, _cache) => {
+      const _component_jsv_focus_block = resolveComponent("jsv-focus-block");
+      return openBlock(), createBlock(_component_jsv_focus_block, {
+        autoFocus: "",
+        onKeyDown,
+        style: normalizeStyle({
+          width: 1280,
+          height: 720,
+          backgroundImage: unref(DemoResourceBase) ? `${unref(DemoResourceBase)}/BackgroundLongmao.jpg` : "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/BackgroundLongmao.jpg"
+        })
+      }, {
+        default: withCtx(() => [
+          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)"
+            })
+          }, " .9型的旋转焦点框,OK键进行随机位置+尺寸变换 ", 4),
+          createBaseVNode("div", null, [
+            createVNode(unref(_JsvTextureAnim$1), {
+              src: unref(img),
+              left: left.value,
+              top: top.value,
+              width: width.value,
+              height: height.value,
+              texCoord,
+              animation: rotateAnimation,
+              duration: 2e3,
+              repeat: -1,
+              autoStart: true,
+              decorate: ninePatchDecorator
+            }, null, 8, ["src", "left", "top", "width", "height"])
+          ]),
+          createBaseVNode("div", null, [
+            createVNode(unref(_JsvTextureAnim$1), {
+              src: unref(img2),
+              left: left.value + 500,
+              top: top.value,
+              width: width.value,
+              height: height.value,
+              texCoord,
+              animation: rotateAnimation,
+              duration: 2e3,
+              repeat: -1,
+              autoStart: true,
+              decorate: ninePatchDecorator
+            }, null, 8, ["src", "left", "top", "width", "height"])
+          ])
+        ]),
+        _: 1
+      }, 8, ["style"]);
+    };
+  }
+};
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=http://localhost:57245/map/App2.f586c86d.js.map
+
+/*jsvmd5:0089678fd6f9f44e1920c000930688df*/

package/template-vue-vite/dist-test-jsview-chunk/js/BrowserApic.64639b51.js

@@ -0,0 +1,112 @@
+import { L as LoopType, V as Viewer, W as WebpData, G as GifData } from "./GifData.e5dd9fac.js";
+import { s as shallowRef, t as onMounted, o as openBlock, e as createElementBlock, g as normalizeStyle } from "./vue.889a9b8b.js";
+const _sfc_main = {
+  __name: "BrowserApic",
+  props: {
+    src: String,
+    style: Object,
+    autoPlay: {
+      type: Boolean,
+      default: true
+    },
+    loopType: {
+      type: Number,
+      default: LoopType.LOOP_DEFAULT
+    },
+    loopInfo: {
+      type: Array,
+      default: () => [[-1, -1, -1]]
+    },
+    onStart: Function,
+    onEnd: Function,
+    onLoad: Function
+  },
+  setup(__props, { expose }) {
+    const props = __props;
+    const loadImage = (url) => {
+      return new Promise((resolve, reject) => {
+        let xhr = new XMLHttpRequest();
+        xhr.open("GET", url);
+        xhr.responseType = "arraybuffer";
+        xhr.onreadystatechange = () => {
+          if (xhr.readyState === 4 && xhr.status === 200) {
+            if (xhr.status == 200) {
+              let apic_data;
+              if (url.indexOf(".webp") > 0) {
+                apic_data = new WebpData(xhr.response);
+                resolve(apic_data);
+              } else if (url.indexOf(".gif") > 0) {
+                apic_data = new GifData(xhr.response);
+                resolve(apic_data);
+              } else {
+                reject("unsupport file " + url);
+              }
+            } else {
+              reject("get image data failed. " + url + " " + xhr.status);
+            }
+          }
+        };
+        xhr.send();
+      });
+    };
+    const getUrl = (base_url) => {
+      let url_trim = base_url.trim();
+      if (url_trim.indexOf("http") === 0) {
+        return url_trim;
+      } else if (url_trim.indexOf("url") === 0) {
+        let index_1 = url_trim.indexOf("(");
+        let index_2 = url_trim.indexOf(")");
+        return url_trim.substring(index_1 + 1, index_2);
+      } else {
+        return url_trim;
+      }
+    };
+    let viewer = null;
+    let canvasProxyRef = shallowRef(null);
+    const play = () => {
+      viewer?.play(props.loopType, props.loopInfo);
+    };
+    const stop = () => {
+      viewer?.stop();
+    };
+    onMounted(() => {
+      let domLayoutView = canvasProxyRef.value.jsvGetProxyView();
+      domLayoutView.RegisterOnProxyReady(() => {
+        let canvas = window.originDocument.createElement("canvas");
+        canvas.style.width = props.style.width + "px";
+        canvas.style.height = props.style.height + "px";
+        domLayoutView.HtmlGetElement().appendChild(canvas);
+        loadImage(getUrl(props.src)).then((data) => {
+          let listener = {
+            onstart: props.onStart,
+            onend: props.onEnd
+          };
+          viewer = new Viewer(data, canvas, listener);
+          if (props.onLoad) {
+            props.onLoad();
+          }
+          if (props.autoPlay) {
+            play();
+          }
+        }).catch((err) => console.error(err));
+      });
+    });
+    expose({
+      play,
+      stop
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "canvasProxyRef",
+        ref: canvasProxyRef,
+        style: normalizeStyle(props.style)
+      }, null, 4);
+    };
+  }
+};
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=http://localhost:57245/map/BrowserApic.64639b51.js.map
+
+/*jsvmd5:6591c0eec674838d3df299d836d0c57f*/

package/template-vue-vite/dist-test-jsview-chunk/js/BrowserApic.vue.5e093f8c.js

@@ -0,0 +1,130 @@
+import { V as Viewer, W as WebpData, G as GifData } from "./BrowserApicLib.14ef44a9.js";
+import { L as LoopType } from "./jsview-vue-entry.415721d8.js";
+import { s as shallowRef, t as onMounted, o as openBlock, e as createElementBlock, g as normalizeStyle } from "./vue.889a9b8b.js";
+import "./jsview-forge-define.bfab260e.js";
+import "./jsview-dom-entry.280f04b1.js";
+import "./export-sfc.2749ebea.js";
+//!
+//! utils/JsViewVueWidget/JsvApic/JsvApic/BrowserApic.vue;
+//!
+/*! <!--
+ * @Author: ChenChanghua
+ * @Date: 2021-10-13 13:14:49
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2021-10-13 17:13:24
+ * @Description: file content
+-->
+
+
+
+ */
+const _sfc_main = {
+  __name: "BrowserApic",
+  props: {
+    src: String,
+    style: Object,
+    autoPlay: {
+      type: Boolean,
+      default: true
+    },
+    loopType: {
+      type: Number,
+      default: LoopType.LOOP_DEFAULT
+    },
+    loopInfo: {
+      type: Array,
+      default: () => [[-1, -1, -1]]
+    },
+    onStart: Function,
+    onEnd: Function,
+    onLoad: Function
+  },
+  setup(__props, { expose }) {
+    const props = __props;
+    const loadImage = (url) => {
+      return new Promise((resolve, reject) => {
+        let xhr = new XMLHttpRequest();
+        xhr.open("GET", url);
+        xhr.responseType = "arraybuffer";
+        xhr.onreadystatechange = () => {
+          if (xhr.readyState === 4 && xhr.status === 200) {
+            if (xhr.status == 200) {
+              let apic_data;
+              if (url.indexOf(".webp") > 0) {
+                apic_data = new WebpData(xhr.response);
+                resolve(apic_data);
+              } else if (url.indexOf(".gif") > 0) {
+                apic_data = new GifData(xhr.response);
+                resolve(apic_data);
+              } else {
+                reject("unsupport file " + url);
+              }
+            } else {
+              reject("get image data failed. " + url + " " + xhr.status);
+            }
+          }
+        };
+        xhr.send();
+      });
+    };
+    const getUrl = (base_url) => {
+      let url_trim = base_url.trim();
+      if (url_trim.indexOf("http") === 0) {
+        return url_trim;
+      } else if (url_trim.indexOf("url") === 0) {
+        let index_1 = url_trim.indexOf("(");
+        let index_2 = url_trim.indexOf(")");
+        return url_trim.substring(index_1 + 1, index_2);
+      } else {
+        return url_trim;
+      }
+    };
+    let viewer = null;
+    let canvasProxyRef = shallowRef(null);
+    const play = () => {
+      viewer?.play(props.loopType, props.loopInfo);
+    };
+    const stop = () => {
+      viewer?.stop();
+    };
+    onMounted(() => {
+      let domLayoutView = canvasProxyRef.value.jsvGetProxyView();
+      domLayoutView.RegisterOnProxyReady(() => {
+        let canvas = window.originDocument.createElement("canvas");
+        canvas.style.width = props.style.width + "px";
+        canvas.style.height = props.style.height + "px";
+        domLayoutView.HtmlGetElement().appendChild(canvas);
+        loadImage(getUrl(props.src)).then((data) => {
+          let listener = {
+            onstart: props.onStart,
+            onend: props.onEnd
+          };
+          viewer = new Viewer(data, canvas, listener);
+          if (props.onLoad) {
+            props.onLoad();
+          }
+          if (props.autoPlay) {
+            play();
+          }
+        }).catch((err) => console.error(err));
+      });
+    });
+    expose({
+      play,
+      stop
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "canvasProxyRef",
+        ref: canvasProxyRef,
+        style: normalizeStyle(props.style)
+      }, null, 4);
+    };
+  }
+};
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=http://localhost:57245/map/BrowserApic.vue.5e093f8c.js.map
+
+/*jsvmd5:de521f5f74fe38fdd05bd0ba59c4411c*/