@shijiu/jsview-vue 0.0.1-beta.0

package/utils/JsViewVueWidget/BrowserDebugWidget/BrowserPreload.vue

@@ -0,0 +1,80 @@
+<script>
+export default {
+  props: {
+    preloadList: Array,
+    downloadList: Array,
+    onPreloadDone: Function, // 预加载完成回调
+    onDownloadDone: Function, // 预下载完成回调
+  },
+  data() {
+    return {
+      preloadStateList: null,
+      downloadStateList: null,
+    };
+  },
+  created() {
+    if (this.preloadList) {
+      this.getPreloadList();
+    }
+    if (this.downloadList) {
+      this.getDownloadList();
+    }
+  },
+  methods: {
+    getPreloadList() {
+      this.preloadStateList = new Array(this.preloadList.length).fill(false);
+      let preloadListData = this.preloadList;
+      for (let i = 0; i < preloadListData.length; i++) {
+        if (!preloadListData[i]) {
+          preloadListData.splice(i, 1);
+          this.preloadIsNullNum++;
+        }
+      }
+      this._PreloadViewList = preloadListData.map((item, index) => {
+        if (!item || !item.url) {
+          this.preloadStateList[index] = true;
+          return null;
+        }
+        const image = new Image();
+        image.onload = () => {
+          if (this.onPreloadDone) {
+            this.onPreloadDone();
+          }
+          this.preloadStateList[index] = true;
+        };
+        image.src = item.url;
+      });
+    },
+    getDownloadList() {
+      this.downloadStateList = new Array(this.downloadList.length).fill(false);
+      let downloadListData = this.downloadList;
+      for (let i = 0; i < downloadListData.length; i++) {
+        if (!downloadListData[i].url) {
+          downloadListData.splice(i, 1);
+        }
+      }
+      this._DownloadViewList = downloadListData.map((item, index) => {
+        if (!item.url) {
+          this.downloadStateList[index] = true;
+          return null;
+        }
+        const image = new Image();
+        image.onload = () => {
+          if (this.onDownloadDone) {
+            this.onDownloadDone();
+          }
+          this.downloadStateList[index] = true;
+          console.log(`pre download succeed ${item.url}`);
+        };
+        image.src = item.url;
+      });
+    }
+  },
+};
+</script>
+
+<template>
+  <!-- 保证该组件不描画任何东西，只是为了触发onload，让网页自行下载图片 -->
+  <div v-if="!preloadList"></div>
+</template>
+

package/utils/JsViewVueWidget/BrowserDebugWidget/BrowserQrcode.vue

@@ -0,0 +1,148 @@
+<script>
+import QRCodeImpl from "qr.js/lib/QRCode";
+export default {
+    props: {
+        value: String,
+        size: Number,
+        fgColor: String,
+        bgColor: String,
+        level: String, // ，容错级别，分别是L(7%)、M(15%)、Q(25%)、H(30%),
+        imageSettings: Object
+    },
+    data() {
+        return {
+            imageStyle: null,
+        }
+    },
+    methods: {
+        convertStr(str) {
+            let out = "";
+            for (let i = 0; i < str.length; i++) {
+                let charcode = str.charCodeAt(i);
+                if (charcode < 0x0080) {
+                out += String.fromCharCode(charcode);
+                } else if (charcode < 0x0800) {
+                out += String.fromCharCode(0xc0 | (charcode >> 6));
+                out += String.fromCharCode(0x80 | (charcode & 0x3f));
+                } else if (charcode < 0xd800 || charcode >= 0xe000) {
+                out += String.fromCharCode(0xe0 | (charcode >> 12));
+                out += String.fromCharCode(0x80 | ((charcode >> 6) & 0x3f));
+                out += String.fromCharCode(0x80 | (charcode & 0x3f));
+                } else {
+                // This is a surrogate pair, so we'll reconsitute the pieces and work
+                // from that
+                i++;
+                charcode =
+                    0x10000 + (((charcode & 0x3ff) << 10) | (str.charCodeAt(i) & 0x3ff));
+                out += String.fromCharCode(0xf0 | (charcode >> 18));
+                out += String.fromCharCode(0x80 | ((charcode >> 12) & 0x3f));
+                out += String.fromCharCode(0x80 | ((charcode >> 6) & 0x3f));
+                out += String.fromCharCode(0x80 | (charcode & 0x3f));
+                }
+            }
+            return out;
+        },
+        generatePath(modules, margin = 0) {
+            const ops = [];
+            modules.forEach((row, y) => {
+                let start = null;
+                row.forEach((cell, x) => {
+                if (!cell && start !== null) {
+                    // M0 0h7v1H0z injects the space with the move and drops the comma,
+                    // saving a char per operation
+                    ops.push(
+                    `M${start + margin} ${y + margin}h${x - start}v1H${start + margin}z`
+                    );
+                    start = null;
+                    return;
+                }
+
+                // end of row, clean up or skip
+                if (x === row.length - 1) {
+                    if (!cell) {
+                    // We would have closed the op above already so this can only mean
+                    // 2+ light modules in a row.
+                    return;
+                    }
+                    if (start === null) {
+                    // Just a single dark module.
+                    ops.push(`M${x + margin},${y + margin} h1v1H${x + margin}z`);
+                    } else {
+                    // Otherwise finish the current line.
+                    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("");
+        },
+        getImageSettings(props) {
+            // const { imageSettings, size } = props;
+            const imageSettings = props.imageSettings;
+            const size = props.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 };
+        },
+        renderQrcode() {
+            // const { value, size, level, bgColor, fgColor, imageSettings,} = this.props;
+            const ErrorCorrectLevel = require("qr.js/lib/ErrorCorrectLevel");
+            const qrcode = new QRCodeImpl(-1, ErrorCorrectLevel[this.level]);
+            qrcode.addData(this.convertStr(this.value));
+            qrcode.make();
+
+            const cells = qrcode.modules;
+            if (cells === null) {
+                return null;
+            }
+
+            const margin = 2;
+            const numCells = cells.length + margin * 2;
+            const propsData = {value: this.value, size: this.size, level: this.level, bgColor: this.bgColor, fgColor: this.fgColor, imageSettings: this.imageSettings,}
+            const calculatedImageSettings = this.getImageSettings(propsData);
+            if (this.imageSettings) {
+                this.imageStyle = {
+                    backgroundImage: `url(${this.imageSettings.src})`,
+                    height: calculatedImageSettings.h,
+                    width: calculatedImageSettings.w,
+                    left: calculatedImageSettings.x + margin,
+                    top: calculatedImageSettings.y + margin
+                }
+            }
+            const fgPath = this.generatePath(cells, margin);
+            return {numCells, fgPath};
+        }
+    },
+}
+</script>
+
+<template>
+    <div>
+        <jsvsvg
+            :type="'qrcode'"
+            :shapeRendering="'crispEdges'"
+            :height="size"
+            :width="size"
+            :viewBox="'0 0 ' + renderQrcode().numCells + ' ' + renderQrcode().numCells"
+        >
+            <jsvpath :fill="bgColor" :d="'M0,0 h' + renderQrcode().numCells + 'v' + renderQrcode().numCells + 'H0z'" />
+            <jsvpath :fill="fgColor" :d="renderQrcode().fgPath" />
+        </jsvsvg>
+        <div :style="imageStyle"></div>
+    </div>
+</template>

package/utils/JsViewVueWidget/BrowserDebugWidget/BrowserSpray.vue

@@ -0,0 +1,55 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2021-10-13 11:02:42
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2021-10-13 15:10:01
+ * @Description: file content
+-->
+<script>
+import { Forge } from "../../../dom/jsv-forge-define";
+
+export default {
+  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
+    );
+  },
+  beforeUnmount() {
+    Forge.sParticleManager.recycleView(this.viewId);
+  }
+};
+</script>
+
+<template>
+  <div ref="element" :style="{ width: viewWidth, height: viewHeight }" />
+</template>

package/utils/JsViewVueWidget/BrowserDebugWidget/JsvApic/ApicDataBase.js

@@ -0,0 +1,29 @@
+/*
+ * @Author: ChenChanghua
+ * @Date: 2021-10-13 14:00:38
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2021-10-13 14:11:14
+ * @Description: file content
+ */
+
+class ApicDataBase {
+  constructor(arrayBuffer) {
+    this.LoopCount = 0;
+    this.FrameCount = 0;
+    this.Width = 0;
+    this.Height = 0;
+    this._Canvas = window.originDocument.createElement("canvas");
+    this._Context = this._Canvas.getContext("2d");
+    this._DecodedData = null;
+    this.decode(arrayBuffer);
+  }
+
+  decode(arrayBuffer) {
+    console.log("decode need override ", arrayBuffer);
+  }
+
+  toImage(frameIndex, canvas, canvasCtx) {
+    console.log("toImage need override ", frameIndex, canvas, canvasCtx);
+  }
+}
+export default ApicDataBase;

package/utils/JsViewVueWidget/BrowserDebugWidget/JsvApic/BrowserApic.vue

@@ -0,0 +1,124 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2021-10-13 13:14:49
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2021-10-13 17:13:24
+ * @Description: file content
+-->
+<script>
+import Viewer from "./Viewer";
+import WebpData from "./WebpData";
+import GifData from "./GifData";
+import { LoopType } from "./LoopToolBase";
+
+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 TOKEN = 0;
+
+export default {
+  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() {
+    return {
+      viewId: -1,
+      viewer: null,
+      canvasId: "JsvApic" + TOKEN++,
+    };
+  },
+  methods: {
+    play() {
+      this.viewer?.play();
+    },
+    stop() {
+      this.viewer?.stop();
+    },
+  },
+  mounted() {
+    let canvas = window.originDocument.getElementById(this.canvasId);
+    if (canvas) {
+      loadImage(getUrl(this.src))
+        .then((data) => {
+          let listener = {
+            onstart: this.onStart,
+            onend: this.onEnd,
+          };
+          this.viewer = new Viewer(
+            data,
+            canvas,
+            listener,
+            this.autoPlay,
+            this.loopType,
+            this.loopInfo
+          );
+          if (this.onLoad) {
+            this.onLoad();
+          }
+        })
+        .catch((err) => console.error(err));
+    } else {
+      console.error("apic get canvas failed.");
+    }
+  },
+};
+
+export { LoopType };
+</script>
+
+<template>
+  <jsvcanvas :id="canvasId" :style="style" />
+</template>

package/utils/JsViewVueWidget/BrowserDebugWidget/JsvApic/GifData.js

@@ -0,0 +1,83 @@
+/*
+ * @Author: ChenChanghua
+ * @Date: 2021-10-13 14:00:52
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2021-10-13 14:10:42
+ * @Description: file content
+ */
+import ApicDataBase from "./ApicDataBase";
+
+class GifData extends ApicDataBase {
+  decode(array_buffer) {
+    const gif = window.ApicTools.parseGIF(array_buffer);
+    this._DecodedData = window.ApicTools.decompressFrames(gif, true);
+    this.LoopCount = 0;
+    this.FrameCount = this._DecodedData.length;
+    this.Width = this._DecodedData[0].dims.width;
+    this.Height = this._DecodedData[0].dims.height;
+
+    // 打patch
+    for (let i = 0; i < this._DecodedData.length; i++) {
+      let frame = this._DecodedData[i];
+      if (
+        frame["dims"]["width"] !== this.Width ||
+        frame["dims"]["height"] !== this.Height
+      ) {
+        // 打patch
+        let pre_frame_data = this._DecodedData[i - 1]["frameData"];
+        let left = frame["dims"]["left"];
+        let top = frame["dims"]["top"];
+        let width = frame["dims"]["width"];
+        let height = frame["dims"]["height"];
+        let patch_data = frame["patch"];
+        let image_data = new Uint8ClampedArray(this.Width * this.Height * 4);
+        for (let x = 0; x < this.Width; x++) {
+          for (let y = 0; y < this.Height; y++) {
+            let patch_x = x - left;
+            let patch_y = y - top;
+            let pixel_index = y * this.Width + x;
+            let patch_pixel_index = patch_y * width + patch_x;
+            if (
+              x >= left &&
+              x < left + width &&
+              y >= top &&
+              y < top + height &&
+              patch_data[patch_pixel_index * 4 + 3] > 0
+            ) {
+              image_data[pixel_index * 4] = patch_data[patch_pixel_index * 4];
+              image_data[pixel_index * 4 + 1] =
+                patch_data[patch_pixel_index * 4 + 1];
+              image_data[pixel_index * 4 + 2] =
+                patch_data[patch_pixel_index * 4 + 2];
+              image_data[pixel_index * 4 + 3] =
+                patch_data[patch_pixel_index * 4 + 3];
+            } else {
+              image_data[pixel_index * 4] = pre_frame_data[pixel_index * 4];
+              image_data[pixel_index * 4 + 1] =
+                pre_frame_data[pixel_index * 4 + 1];
+              image_data[pixel_index * 4 + 2] =
+                pre_frame_data[pixel_index * 4 + 2];
+              image_data[pixel_index * 4 + 3] =
+                pre_frame_data[pixel_index * 4 + 3];
+            }
+          }
+        }
+        frame["frameData"] = image_data;
+      } else {
+        frame["frameData"] = frame["patch"];
+      }
+    }
+  }
+
+  toImage(frame_index, canvas, canvas_ctx) {
+    canvas.width = this.Width;
+    canvas.height = this.Height;
+    let frame = this._DecodedData[frame_index];
+    let image_data = canvas_ctx.createImageData(this.Width, this.Height);
+    image_data.data.set(frame["frameData"]);
+    canvas_ctx.putImageData(image_data, 0, 0);
+    return frame["delay"];
+  }
+}
+
+export default GifData;

package/utils/JsViewVueWidget/BrowserDebugWidget/JsvApic/LoopToolBase.js

@@ -0,0 +1,25 @@
+/*
+ * @Author: ChenChanghua
+ * @Date: 2021-10-13 14:01:14
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2021-10-13 15:20:48
+ * @Description: file content
+ */
+
+class LoopToolBase {
+  getNextIndex() {
+    return -1;
+  }
+  reset() {}
+}
+
+const LoopType = {
+  LOOP_DEFAULT: 0,
+  LOOP_INFINITE: 1,
+  LOOP_FINITE: 2,
+  LOOP_PART: 3,
+};
+
+export default LoopToolBase;
+
+export { LoopType };

package/utils/JsViewVueWidget/BrowserDebugWidget/JsvApic/NormalLoopTool.js

@@ -0,0 +1,61 @@
+/*
+ * @Author: ChenChanghua
+ * @Date: 2021-10-13 14:01:28
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2021-10-13 14:13:17
+ * @Description: file content
+ */
+import LoopToolBase, { LoopType } from "./LoopToolBase";
+
+class NormalLoopTool extends LoopToolBase {
+  constructor(loop_type, loop_num, frame_num) {
+    super();
+    this.mLoopType = loop_type;
+    this.mLoopNum = loop_num;
+    this.mFrameNum = frame_num;
+    this.mLoopCount = 0;
+    this.mFrameIndex = 0;
+  }
+
+  getNextIndex() {
+    let next_index = -1;
+    switch (this.mLoopType) {
+      case LoopType.LOOP_DEFAULT:
+        if (this.mLoopNum <= 0) {
+          //默认无限循环
+          next_index = (this.mFrameIndex + 1) % this.mFrameNum;
+        } else {
+          if (this.mFrameIndex == this.mFrameNum - 1) {
+            this.mLoopCount++;
+          }
+          next_index =
+            this.mLoopCount >= this.mLoopNum
+              ? -1
+              : (this.mFrameIndex + 1) % this.mFrameNum;
+        }
+        break;
+      case LoopType.LOOP_INFINITE:
+        next_index = (this.mFrameIndex + 1) % this.mFrameNum;
+        break;
+      case LoopType.LOOP_FINITE:
+        if (this.mFrameIndex == this.mFrameNum - 1) {
+          this.mLoopCount++;
+        }
+        next_index =
+          this.mLoopCount >= this.mLoopNum
+            ? -1
+            : (this.mFrameIndex + 1) % this.mFrameNum;
+        break;
+      default:
+    }
+    this.mFrameIndex = next_index;
+    return next_index;
+  }
+
+  reset() {
+    this.mFrameIndex = 0;
+    this.mLoopCount = 0;
+  }
+}
+
+export default NormalLoopTool;