@shijiu/jsview-vue 2.1.200 → 2.1.339-test.0

package/bin/browser/BrowserPreload.vue.mjs

@@ -0,0 +1,154 @@
+import { reactive, watchEffect, onBeforeUnmount, openBlock, createElementBlock, createCommentVNode } from 'vue';
+
+//!
+//! utils/JsViewVueWidget/JsvPreload/BrowserPreload.vue;
+//!
+/*! 
+
+
+
+
+ */
+const _sfc_main = {
+  __name: "BrowserPreload",
+  props: {
+    preloadList: Array,
+    downloadList: Array,
+    onPreloadDone: Function,
+    // 预加载完成回调
+    onDownloadDone: Function,
+    // 预下载完成回调
+    onPreloading: Function
+  },
+  setup(__props) {
+    const props = __props;
+    const loadViewList = reactive({
+      preloadViewList: [],
+      downloadViewList: []
+    });
+    let preloadIsNullNum = 0;
+    let downloadIsNullNum = 0;
+    let preloadResultMap = {};
+    let downloadResultMap = {};
+    let downloadUrlList = [];
+    let unmountStatus = { unmount: false };
+    let preloadStateList = null;
+    let downloadStateList = null;
+    const getPreloadList = () => {
+      preloadStateList = new Array(props.preloadList.length).fill(false);
+      let preloadListData = props.preloadList;
+      for (let i = 0; i < preloadListData.length; i++) {
+        if (!preloadListData[i] || !preloadListData[i].url) {
+          preloadListData.splice(i, 1);
+          preloadIsNullNum++;
+          i--;
+        }
+      }
+      loadViewList.preloadViewList = preloadListData.map((item, index) => {
+        if (!item || !item.url) {
+          preloadStateList[index] = true;
+          return null;
+        }
+        const image = new Image();
+        const unmount_track = unmountStatus;
+        image.onload = () => {
+          if (unmount_track.unmount) {
+            return;
+          }
+          preloadResultMap[item.url] = {
+            width: image.width,
+            height: image.height
+          };
+          preloadStateList[index] = true;
+          let loadedNum = 0;
+          preloadStateList.map((item2) => {
+            loadedNum += item2 ? 1 : 0;
+          });
+          props.onPreloading?.(loadedNum / preloadStateList.length);
+          if (props.onPreloadDone && loadedNum + preloadIsNullNum == preloadStateList.length) {
+            props.onPreloadDone?.(preloadResultMap);
+          }
+        };
+        image.src = item.url;
+      });
+    };
+    const getDownloadList = () => {
+      downloadStateList = new Array(props.downloadList.length).fill(false);
+      downloadUrlList = new Array(downloadStateList.length);
+      let downloadListData = props.downloadList;
+      for (let i = 0; i < downloadListData.length; i++) {
+        if (!downloadListData[i] || !downloadListData[i].url) {
+          downloadListData.splice(i, 1);
+          downloadUrlList[i] = "invalid";
+          downloadIsNullNum++;
+          i--;
+        }
+      }
+      loadViewList.downloadViewList = downloadListData.map((item, index) => {
+        if (!item || !item.url) {
+          downloadStateList[index] = true;
+          downloadUrlList[index] = "invalid";
+          return null;
+        }
+        const image = new Image();
+        const unmount_track = unmountStatus;
+        image.onload = () => {
+          if (unmount_track.unmount) {
+            return;
+          }
+          downloadStateList[index] = true;
+          downloadUrlList[index] = item.url;
+          downloadResultMap[item.url] = {
+            width: image.width,
+            height: image.height
+          };
+          console.log(`pre download succeed ${item.url}`);
+          if (props.onDownloadDone) {
+            let downloadNum = 0;
+            downloadStateList.map((item2) => {
+              downloadNum += item2 ? 1 : 0;
+            });
+            if (downloadNum + downloadIsNullNum == downloadStateList.length) {
+              props.onDownloadDone?.(
+                downloadUrlList,
+                downloadResultMap
+              );
+            }
+          }
+        };
+        image.src = item.url;
+      });
+    };
+    if (props.preloadList) {
+      getPreloadList();
+    }
+    if (props.downloadList) {
+      getDownloadList();
+    }
+    watchEffect(() => {
+      if (props.preloadList) {
+        console.log("JsvPreload: update preloadList");
+        preloadIsNullNum = 0;
+        preloadResultMap = {};
+        getPreloadList();
+      }
+    });
+    watchEffect(() => {
+      if (props.downloadList) {
+        console.log("JsvPreload: update downloadList");
+        downloadIsNullNum = 0;
+        downloadResultMap = {};
+        downloadUrlList = [];
+        getDownloadList();
+      }
+    });
+    onBeforeUnmount(() => {
+      unmountStatus.unmount = true;
+    });
+    return (_ctx, _cache) => {
+      return !__props.preloadList ? (openBlock(), createElementBlock("div", { key: 0 })) : createCommentVNode("", true);
+    };
+  }
+};
+
+export { _sfc_main as default };

package/bin/browser/BrowserQrcode.vue.mjs

@@ -0,0 +1,178 @@
+import { ref, onMounted, openBlock, createElementVNode, unref, normalizeStyle, createElementBlock } from 'vue';
+import QRCode from 'qr.js';
+
+//!
+//! utils/JsViewVueWidget/JsvQrcode/BrowserQrcode.vue;
+//!
+/*! 
+
+ */
+const _sfc_main = {
+  __name: "BrowserQrcode",
+  props: {
+    value: String,
+    size: Number,
+    fgColor: {
+      type: String,
+      default: "#000000"
+    },
+    bgColor: {
+      type: String,
+      default: "#ffffff"
+    },
+    level: {
+      type: String,
+      // ，容错级别，分别是L(7%)、M(15%)、Q(25%)、H(30%),
+      default: "L"
+    },
+    imageSettings: Object
+  },
+  setup(__props) {
+    const props = __props;
+    const convertStr = (str) => {
+      let out = "";
+      for (let i = 0; i < str.length; i++) {
+        let charcode = str.charCodeAt(i);
+        if (charcode < 128) {
+          out += String.fromCharCode(charcode);
+        } else if (charcode < 2048) {
+          out += String.fromCharCode(192 | charcode >> 6);
+          out += String.fromCharCode(128 | charcode & 63);
+        } else if (charcode < 55296 || charcode >= 57344) {
+          out += String.fromCharCode(224 | charcode >> 12);
+          out += String.fromCharCode(128 | charcode >> 6 & 63);
+          out += String.fromCharCode(128 | charcode & 63);
+        } else {
+          i++;
+          charcode = 65536 + ((charcode & 1023) << 10 | str.charCodeAt(i) & 1023);
+          out += String.fromCharCode(240 | charcode >> 18);
+          out += String.fromCharCode(128 | charcode >> 12 & 63);
+          out += String.fromCharCode(128 | charcode >> 6 & 63);
+          out += String.fromCharCode(128 | charcode & 63);
+        }
+      }
+      return out;
+    };
+    const generatePath = (modules, margin = 0) => {
+      const ops = [];
+      modules.forEach((row, y) => {
+        let start = null;
+        row.forEach((cell, x) => {
+          if (!cell && start !== null) {
+            ops.push(
+              `M${start + margin} ${y + margin}h${x - start}v1H${start + margin}z`
+            );
+            start = null;
+            return;
+          }
+          if (x === row.length - 1) {
+            if (!cell) {
+              return;
+            }
+            if (start === null) {
+              ops.push(`M${x + margin},${y + margin} h1v1H${x + margin}z`);
+            } else {
+              ops.push(
+                `M${start + margin},${y + margin} h${x + 1 - start}v1H${start + margin}z`
+              );
+            }
+            return;
+          }
+          if (cell && start === null) {
+            start = x;
+          }
+        });
+      });
+      return ops.join("");
+    };
+    const getImageSettings = (props2) => {
+      const imageSettings = props2.imageSettings;
+      const size = props2.size;
+      if (!imageSettings) {
+        return null;
+      }
+      const w = imageSettings.width;
+      const h = imageSettings.height;
+      const x = !imageSettings.x ? size / 2 - w / 2 : imageSettings.x;
+      const y = !imageSettings.y ? size / 2 - h / 2 : imageSettings.y;
+      return { x, y, h, w };
+    };
+    const renderQrcode = () => {
+      const qrcode = QRCode(convertStr(props.value), {
+        errorCorrectLevel: QRCode.ErrorCorrectLevel[props.level]
+      });
+      const cells = qrcode.modules;
+      if (cells === null) {
+        return null;
+      }
+      const margin = 2;
+      const numCells = cells.length + margin * 2;
+      const propsData = {
+        value: props.value,
+        size: props.size,
+        level: props.level,
+        bgColor: props.bgColor,
+        fgColor: props.fgColor,
+        imageSettings: props.imageSettings
+      };
+      const calculatedImageSettings = getImageSettings(propsData);
+      if (props.imageSettings) {
+        imageStyle = {
+          backgroundImage: `url(${props.imageSettings.src})`,
+          height: calculatedImageSettings.h,
+          width: calculatedImageSettings.w,
+          left: calculatedImageSettings.x + margin,
+          top: calculatedImageSettings.y + margin
+        };
+      } else {
+        imageStyle = {};
+      }
+      const fgPath = generatePath(cells, margin);
+      return { numCells, fgPath };
+    };
+    const svgRoot = ref(null);
+    let imageStyle = null;
+    const qrcodeRes = renderQrcode();
+    onMounted(() => {
+      svgRoot.value.jsvGetProxyView().RegisterOnProxyReady(() => {
+        const root = svgRoot.value.jsvGetProxyView().HtmlGetElement();
+        const doc = window.originDocument;
+        const svg = doc.createElementNS("http://www.w3.org/2000/svg", "svg");
+        svg.setAttribute("type", "qrcode");
+        svg.setAttribute("shapeRendering", "crispEdges");
+        svg.setAttribute("height", props.size);
+        svg.setAttribute("width", props.size);
+        svg.setAttribute(
+          "viewBox",
+          "0 0 " + qrcodeRes.numCells + " " + qrcodeRes.numCells
+        );
+        const path1 = doc.createElementNS("http://www.w3.org/2000/svg", "path");
+        path1.setAttribute("fill", props.bgColor);
+        path1.setAttribute(
+          "d",
+          "M0,0 h" + qrcodeRes.numCells + "v" + qrcodeRes.numCells + "H0z"
+        );
+        const path2 = doc.createElementNS("http://www.w3.org/2000/svg", "path");
+        path2.setAttribute("fill", props.fgColor);
+        path2.setAttribute("d", qrcodeRes.fgPath);
+        svg.appendChild(path1);
+        svg.appendChild(path2);
+        root.appendChild(svg);
+      });
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", null, [
+        createElementVNode("div", {
+          ref_key: "svgRoot",
+          ref: svgRoot,
+          style: { width: 100, height: 100 }
+        }, null, 512),
+        createElementVNode("div", {
+          style: normalizeStyle(unref(imageStyle))
+        }, null, 4)
+      ]);
+    };
+  }
+};
+
+export { _sfc_main as default };

package/bin/browser/BrowserSpray.vue.mjs

@@ -0,0 +1,66 @@
+import { Forge } from '@shijiu/jsview/dom/jsv-forge-define';
+import { openBlock, normalizeStyle, createElementBlock } from 'vue';
+import { _ as _export_sfc } from '../export-sfc.mjs';
+
+//!
+//! utils/JsViewVueWidget/JsvSpray/BrowserSpray.vue;
+//!
+/*! <!--
+ * @Author: ChenChanghua
+ * @Date: 2021-10-13 11:02:42
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2021-10-13 15:10:01
+ * @Description: file content
+-->
+
+
+ */
+const _sfc_main = {
+  props: {
+    pointRes: {
+      type: String,
+      required: true
+    },
+    sprayStyle: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      viewId: -1
+    };
+  },
+  computed: {
+    viewWidth() {
+      return this.sprayStyle.deltaWidth === 0 ? 1 : this.sprayStyle.deltaWidth * 2;
+    },
+    viewHeight() {
+      return this.sprayStyle.deltaHeight === 0 ? 1 : this.sprayStyle.deltaHeight * 2;
+    }
+  },
+  mounted() {
+    const viewSize = {
+      width: this.viewWidth,
+      height: this.viewHeight
+    };
+    this.viewId = Forge.sParticleManager.addParticle(
+      this.sprayStyle,
+      this.pointRes,
+      viewSize,
+      this.$refs.element.jsvGetProxyView()
+    );
+  },
+  beforeUnmount() {
+    Forge.sParticleManager.recycleView(this.viewId);
+  }
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    ref: "element",
+    style: normalizeStyle({ width: $options.viewWidth, height: $options.viewHeight })
+  }, null, 4);
+}
+const BrowserSpray = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+
+export { BrowserSpray as default };