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

package/bin/browser/BrowserApic.vue.mjs

@@ -0,0 +1,124 @@
+import { shallowRef, onMounted, openBlock, normalizeStyle, createElementBlock } from 'vue';
+import { W as WebpData, G as GifData, V as Viewer } from './BrowserApicLib.mjs';
+import { L as LoopType } from '../jsview-common.mjs';
+
+//!
+//! 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 };

package/bin/browser/BrowserApic2.vue.mjs

@@ -0,0 +1,118 @@
+import { shallowRef, onMounted, openBlock, normalizeStyle, createElementBlock } from 'vue';
+import { W as WebpData, G as GifData, V as Viewer } from './BrowserApicLib.mjs';
+import { L as LoopType } from '../jsview-common.mjs';
+
+//!
+//! utils/JsViewVueWidget/JsvApic/JsvApic2/BrowserApic2.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: "BrowserApic2",
+  props: {
+    src: String,
+    style: Object,
+    onStart: Function,
+    onEnd: Function,
+    onLoad: Function
+  },
+  setup(__props, { expose }) {
+    const props = __props;
+    let waitForPlayInfo = null;
+    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);
+    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 (waitForPlayInfo) {
+            viewer.play(...waitForPlayInfo);
+            waitForPlayInfo = null;
+          }
+        }).catch((err) => console.error(err));
+      });
+    });
+    expose({
+      show: (frameIndex = 0) => {
+        if (!isNaN(frameIndex)) {
+          viewer?.play(LoopType.LOOP_SINGLE, [[0, frameIndex, 0]]);
+        }
+      },
+      play: (...args) => {
+        waitForPlayInfo = args;
+        viewer?.play(...args);
+      },
+      stop: () => {
+        viewer?.stop();
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "canvasProxyRef",
+        ref: canvasProxyRef,
+        style: normalizeStyle(props.style)
+      }, null, 4);
+    };
+  }
+};
+
+export { _sfc_main as default };

package/bin/browser/BrowserApicLib.mjs

@@ -0,0 +1,424 @@
+import { a as LoopToolBase, L as LoopType, A as ApicEndState } from '../jsview-common.mjs';
+
+//!
+//! utils/JsViewVueWidget/JsvApic/JsvBrowserApicLib/PartLoopTool.js;
+//!
+class PartLoopTool extends LoopToolBase {
+  constructor(info_list) {
+    super();
+    this.mLoopPeriod = 0;
+    this.mCurLoopStartFrame = 0;
+    this.mCurLoopEndFrame = 0;
+    this.mCurLoopNum = 0;
+    this.mCurLoopCount = 0;
+    if (info_list == null) {
+      console.error("PartLoopTool info is null.");
+      return;
+    }
+    this.mLoopInfo = info_list;
+  }
+  getNextIndex(curIndex) {
+    if (!this.mValid) {
+      return -1;
+    }
+    let next_index = -1;
+    let loop_period_num = this.mLoopInfo.length;
+    if (this.mLoopPeriod < loop_period_num) {
+      if (curIndex < this.mCurLoopEndFrame) {
+        next_index = curIndex + 1;
+      } else {
+        if (this.mCurLoopNum <= 0) {
+          next_index = this.mCurLoopStartFrame;
+        } else {
+          this.mCurLoopCount++;
+          if (this.mCurLoopCount >= this.mCurLoopNum) {
+            this.mLoopPeriod++;
+            if (this.mLoopPeriod < loop_period_num) {
+              this.mValid = this.updateLoop();
+              if (this.mValid) {
+                this.mCurLoopCount = 0;
+                next_index = this.mCurLoopStartFrame;
+              }
+            } else {
+            }
+          } else {
+            next_index = this.mCurLoopStartFrame;
+          }
+        }
+      }
+    } else {
+    }
+    return next_index;
+  }
+  updateLoop() {
+    let loop = this.mLoopInfo[this.mLoopPeriod];
+    this.mCurLoopNum = loop[0];
+    this.mCurLoopStartFrame = loop[1];
+    this.mCurLoopEndFrame = loop[2];
+    if (isNaN(this.mCurLoopNum) || isNaN(this.mCurLoopStartFrame) || isNaN(this.mCurLoopEndFrame) || this.mCurLoopStartFrame >= this.mTotalFrameNum || this.mCurLoopEndFrame >= this.mTotalFrameNum || this.mCurLoopStartFrame >= this.mCurLoopEndFrame) {
+      console.error("data error, frame number out of size.", this.mLoopInfo);
+      return false;
+    } else {
+      return true;
+    }
+  }
+  setApicInfo(frameNum, loopNum) {
+    this.mTotalFrameNum = frameNum;
+    this.mValid = this.updateLoop();
+    if (!this.mValid) {
+      Log.e(TAG, "PartLoopTool init loop info error." + this.mLoopInfo.toString());
+    } else {
+      this.mNextFrameIndex = this.mCurLoopStartFrame;
+    }
+  }
+}
+
+//!
+//! utils/JsViewVueWidget/JsvApic/JsvBrowserApicLib/NormalLoopTool.js;
+//!
+class NormalLoopTool extends LoopToolBase {
+  constructor(loop_type, loop_num) {
+    super();
+    this.mLoopType = loop_type;
+    this.mLoopNum = loop_num;
+    this.mLoopCount = 0;
+  }
+  getNextIndex(curFrame) {
+    if (!this.mValid) {
+      return -1;
+    }
+    let next_index = -1;
+    switch (this.mLoopType) {
+      case LoopType.LOOP_DEFAULT:
+        if (this.mLoopNum <= 0) {
+          next_index = (curFrame + 1) % this.mTotalFrameNum;
+        } else {
+          if (curFrame == this.mTotalFrameNum - 1) {
+            this.mLoopCount++;
+          }
+          next_index = this.mLoopCount >= this.mLoopNum ? -1 : (curFrame + 1) % this.mTotalFrameNum;
+        }
+        break;
+      case LoopType.LOOP_INFINITE:
+        next_index = (curFrame + 1) % this.mTotalFrameNum;
+        break;
+      case LoopType.LOOP_FINITE:
+        if (curFrame == this.mTotalFrameNum - 1) {
+          this.mLoopCount++;
+        }
+        next_index = this.mLoopCount >= this.mLoopNum ? -1 : (curFrame + 1) % this.mTotalFrameNum;
+        break;
+      default:
+    }
+    return next_index;
+  }
+  setApicInfo(frameNum, loopNum) {
+    this.mTotalFrameNum = frameNum;
+    this.mLoopNum = this.mLoopType == LoopType.LOOP_DEFAULT ? loopNum : this.mLoopNum;
+    this.mNextFrameIndex = 0;
+    this.mValid = true;
+  }
+}
+
+//!
+//! utils/JsViewVueWidget/JsvApic/JsvBrowserApicLib/SingleLoopTool.js;
+//!
+class SingleLoopTool extends LoopToolBase {
+  constructor(index) {
+    super();
+    this.mTargetIndex = index;
+  }
+  getNextIndex(curIndex) {
+    return -1;
+  }
+  setApicInfo(frame_num, loop_num) {
+    this.mTotalFrameNum = frame_num;
+    this.mNextFrameIndex = this.mTargetIndex;
+  }
+}
+
+//!
+//! utils/JsViewVueWidget/JsvApic/JsvBrowserApicLib/Viewer.js;
+//!
+class Viewer {
+  constructor(apic_data, canvas, listener) {
+    this._ApicData = apic_data;
+    this._Canvas = canvas;
+    this._Context = this._Canvas.getContext("2d");
+    this._Listener = listener;
+    this._TimeoutId = -1;
+    this._EndState = ApicEndState.LAST_FRAME;
+  }
+  _createLoopTool(loop_type, loop_info) {
+    let loop_num = null;
+    switch (loop_type) {
+      case LoopType.LOOP_DEFAULT:
+      case LoopType.LOOP_INFINITE:
+      case LoopType.LOOP_FINITE:
+        loop_num = loop_type == LoopType.LOOP_DEFAULT ? this._ApicData.LoopCount : loop_info[0][0];
+        this._LoopTool = new NormalLoopTool(
+          loop_type,
+          loop_num
+        );
+        break;
+      case LoopType.LOOP_PART:
+        this._LoopTool = new PartLoopTool(
+          loop_info,
+          this._ApicData.FrameCount
+        );
+        break;
+      case LoopType.LOOP_SINGLE:
+        this._LoopTool = new SingleLoopTool(loop_info[0][1]);
+        break;
+      default:
+        this._LoopTool = new NormalLoopTool(
+          LoopType.LOOP_DEFAULT,
+          -1
+        );
+    }
+    this._LoopTool.setApicInfo(this._ApicData.FrameCount, this._ApicData.LoopCount);
+  }
+  stop() {
+    clearTimeout(this._TimeoutId);
+    if (this._Listener?.onend) {
+      this._Listener.onend();
+    }
+  }
+  play(loopType, loopInfo, endState = ApicEndState.LAST_FRAME) {
+    this._EndState = endState;
+    let lInfo;
+    if (loopInfo instanceof Array) {
+      lInfo = loopInfo;
+    } else if (!isNaN(loopInfo)) {
+      lInfo = [[loopInfo, 0, 0]];
+    } else {
+      lInfo = [[0, 0, 0]];
+    }
+    this._createLoopTool(loopType, lInfo);
+    clearTimeout(this._TimeoutId);
+    this.renderLoop();
+    if (this._Listener?.onstart) {
+      this._Listener.onstart();
+    }
+  }
+  renderLoop() {
+    if (this._LoopTool.hasNext()) {
+      let duration = this.renderFrame(this._LoopTool.next());
+      this._TimeoutId = setTimeout(() => {
+        this.renderLoop();
+      }, duration);
+    } else {
+      console.log("loop finished");
+      if (this._EndState == ApicEndState.HIDE) {
+        this._Context.clearRect(0, 0, this._Canvas.width, this._Canvas.height);
+      }
+      if (this._Listener?.onend) {
+        this._Listener.onend();
+      }
+    }
+  }
+  renderFrame(frame_index) {
+    return this._ApicData.toImage(frame_index, this._Canvas, this._Context);
+  }
+}
+
+//!
+//! utils/JsViewVueWidget/JsvApic/JsvBrowserApicLib/ApicDataBase.js;
+//!
+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);
+  }
+}
+
+//!
+//! utils/JsViewVueWidget/JsvApic/JsvBrowserApicLib/WebpData.js;
+//!
+class WebpData extends ApicDataBase {
+  decode(array_buffer) {
+    let webp_data = new Uint8Array(array_buffer);
+    let webp_decoder = new window.WebPDecoder();
+    let image_data = window.WebPRiffParser(webp_data, 0);
+    let blend = false;
+    let header = image_data["header"] ? image_data["header"] : null;
+    let frames = image_data["frames"] ? image_data["frames"] : null;
+    if (header) {
+      this.LoopCount = header["loop_count"];
+      header["loop_counter"] = header["loop_count"];
+      this._Canvas.height = header["canvas_height"];
+      this._Canvas.width = header["canvas_width"];
+      this.Width = header["canvas_width"];
+      this.Height = header["canvas_height"];
+      for (let f = 0; f < frames.length; f++) {
+        if (frames[f]["blend"] === 0) {
+          blend = true;
+          break;
+        }
+      }
+    }
+    this.FrameCount = frames.length;
+    for (let f = 0; f < frames.length; f++) {
+      let height = [0];
+      let width = [0];
+      let frame = frames[f];
+      let rgba = webp_decoder.WebPDecodeRGBA(
+        webp_data,
+        frame["src_off"],
+        frame["src_size"],
+        width,
+        height
+      );
+      frame["rgba"] = rgba;
+      frame["imgwidth"] = width[0];
+      frame["imgheight"] = height[0];
+      let oldimagedata = [];
+      if (!header) {
+        this._Canvas.height = height[0];
+        this._Canvas.width = width[0];
+      } else {
+        if (blend) {
+          let oldimagedata_ = this._Context.getImageData(
+            frame["offset_x"],
+            frame["offset_y"],
+            width[0],
+            height[0]
+          );
+          for (let i = 0; i < width[0] * height[0] * 4; i++) {
+            oldimagedata[i] = oldimagedata_.data[i];
+          }
+        }
+      }
+      let imagedata = this._Context.createImageData(width[0], height[0]);
+      if (frames.length === 1 && typeof frame["blend"] === "undefined" || frame["blend"] === 1) {
+        for (let i = 0; i < width[0] * height[0] * 4; i++)
+          imagedata.data[i] = rgba[i];
+      } else {
+        for (let i = 0; i < width[0] * height[0] * 4; i += 4) {
+          if (rgba[i + 3] > 0) {
+            imagedata.data[i + 3] = rgba[i + 3];
+            imagedata.data[i] = rgba[i];
+            imagedata.data[i + 1] = rgba[i + 1];
+            imagedata.data[i + 2] = rgba[i + 2];
+          } else {
+            imagedata.data[i + 3] = oldimagedata[i + 3];
+            imagedata.data[i] = oldimagedata[i];
+            imagedata.data[i + 1] = oldimagedata[i + 1];
+            imagedata.data[i + 2] = oldimagedata[i + 2];
+          }
+        }
+      }
+      if (frames.length === 1) {
+        this._Context.putImageData(imagedata, 0, 0);
+      } else {
+        this._Context.putImageData(
+          imagedata,
+          frame["offset_x"],
+          frame["offset_y"]
+        );
+      }
+      frame["frameData"] = frame["rgba"] ? header ? this._Context.getImageData(
+        0,
+        0,
+        header["canvas_width"],
+        header["canvas_height"]
+      ).data : rgba : null;
+      if (frame["dispose"] === 1) {
+        this._Context.clearRect(
+          frame["offset_x"],
+          frame["offset_y"],
+          width[0],
+          height[0]
+        );
+      }
+    }
+    this._DecodedData = image_data;
+  }
+  toImage(frame_index, canvas, canvas_ctx) {
+    let frame = this._DecodedData["frames"][frame_index];
+    let width = this._DecodedData["header"] ? this._DecodedData["header"]["canvas_width"] : frame["imgwidth"];
+    let height = this._DecodedData["header"] ? this._DecodedData["header"]["canvas_height"] : frame["imgheight"];
+    canvas.width = width;
+    canvas.height = height;
+    let image_data = canvas_ctx.createImageData(width, height);
+    let frame_data = frame["frameData"];
+    image_data.data.set(frame_data);
+    canvas_ctx.putImageData(image_data, 0, 0);
+    return frame["duration"];
+  }
+}
+
+//!
+//! utils/JsViewVueWidget/JsvApic/JsvBrowserApicLib/GifData.js;
+//!
+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;
+    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) {
+        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"];
+  }
+}
+
+//!
+//! utils/JsViewVueWidget/JsvApic/JsvBrowserApicLib/BrowserApicLib.js;
+//!
+
+export { GifData as G, Viewer as V, WebpData as W };