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

package/utils/JsViewVueWidget/JsvApic/JsvApic2/BrowserApic2.vue

@@ -0,0 +1,116 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2021-10-13 13:14:49
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2021-10-13 17:13:24
+ * @Description: file content
+-->
+<script setup>
+import {
+  Viewer,
+  WebpData,
+  GifData
+} from "../JsvBrowserApicLib/BrowserApicLib";
+import { LoopType } from "../JsvCommonLoopToolBase.js";
+import { onMounted, shallowRef } from "vue";
+
+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;
+  }
+};
+
+const props = defineProps({
+  src: String,
+  style: Object,
+  onStart: Function,
+  onEnd: Function,
+  onLoad: Function,
+});
+
+let viewer = null;
+let canvasProxyRef = shallowRef(null);
+
+onMounted(() => {
+  let domLayoutView = canvasProxyRef.value.jsvGetProxyView();
+  domLayoutView.RegisterOnProxyReady(() => {
+    // 制作canvas
+    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));
+  });
+});
+
+defineExpose({
+  show: (frameIndex = 0) => {
+    if (!isNaN(frameIndex)) {
+      viewer?.play(LoopType.LOOP_SINGLE, [[0, frameIndex, 0]]);
+    }
+  },
+  play: (...args) => {
+    waitForPlayInfo = args;
+    viewer?.play(...args);
+  },
+  stop: () => {
+    viewer?.stop();
+  },
+});
+</script>
+
+<template>
+  <div ref="canvasProxyRef" :style="props.style" />
+</template>

package/utils/JsViewVueWidget/JsvApic/JsvApic2/JsvApic2.vue

@@ -0,0 +1,137 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2021-10-13 13:14:42
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-08-02 13:35:10
+ * @Description: file content
+-->
+
+<!--
+ * 【模块 export 内容】
+ * JsvApic：Vue高阶组件，控制动图播放
+ *      prop说明:
+ *          src {string} 对应img标签的src, 传url时需要注意使用url([链接])
+ *          style {object} 对应img标签的style
+ *      通过ref=拿到句柄后，可调用的方法:
+ *          stop(): 停止播放
+ *          show(): 显示某一帧
+ *          play(loopType, loopInfo, endState): 开始播放
+ *            loopType:
+ *              循环类型: LoopType.LOOP_DEFAULT 按图片配置循环
+ *                       LoopType.LOOP_INFINITE 无限循环
+ *                       LoopType.LOOP_FINITE 有限次循环
+ *                       LoopType.LOOP_PART 循环播放部分
+ *            loopInfo:
+ *              循环参数, 为数字时表示循环次数, 为数组时[[循环次数1,循环开始帧1,循环结束帧1], [循环次数2,循环开始帧2,循环结束帧2], ...]
+ *            endState:
+ *              播放结束后的状态: ApicEndState.HIDE 隐藏
+ *                             ApicEndState.LAST_FRAME 保持最后一帧
+-->
+<script>
+import ForgeHandles from "../../../JsViewVueTools/ForgeHandles";
+import { LoopType } from "../JsvCommonLoopToolBase";
+
+export default {
+  props: {
+    src: String,
+    style: Object,
+    onStart: Function,
+    onEnd: Function,
+    onLoad: Function,
+  },
+  setup() {
+    return {
+      element: {},
+    };
+  },
+  data() {
+    return {
+      onStartId: -1,
+      onEndId: -1,
+    };
+  },
+  methods: {
+    show(frameIndex = 0) {
+      if (!isNaN(frameIndex)) {
+        this.play(LoopType.LOOP_SINGLE, [[0, frameIndex, 0]]);
+      }
+    },
+    play(loopType, loopInfo, endState) {
+      let params = {
+        LT: loopType,
+        ES: endState,
+      };
+      if (loopInfo instanceof Array) {
+        //[[循环次数1,循环开始帧1,循环结束帧1], [循环次数2,循环开始帧2,循环结束帧2], ...]
+        params.LI = loopInfo;
+      } else if (!isNaN(loopInfo)) {
+        params.LI = [[loopInfo, 0, 0]];
+      } else {
+        params.LI = [[0, 0, 0]];
+      }
+      if (this.$refs.element) {
+        let mainViewTexture = this.$refs.element.jsvGetProxyTexture(
+          ForgeHandles.TextureManager
+        );
+
+        mainViewTexture.DispatchCommand(
+          Forge.NativeConstant.APIC_PLAY,
+          JSON.stringify(params)
+        );
+        mainViewTexture.unregisterOnStart(this.onStartId);
+        if (this.onStart) {
+          this.onStartId = mainViewTexture.registerOnStart(this.onStart);
+        }
+        mainViewTexture.unregisterOnEnd(this.onEndId);
+        if (this.onEnd) {
+          this.onEndId = mainViewTexture.registerOnEnd(this.onEnd);
+        }
+      }
+    },
+    stop() {
+      if (this.$refs.element) {
+        let mainViewTexture = this.$refs.element.jsvGetProxyTexture(
+          ForgeHandles.TextureManager
+        );
+        mainViewTexture.DispatchCommand(Forge.NativeConstant.APIC_STOP, "");
+      }
+    },
+  },
+  mounted() {
+    if (this.onLoad) {
+      if (this.$refs.element) {
+        let mainViewTexture = this.$refs.element.jsvGetProxyTexture(
+          ForgeHandles.TextureManager
+        );
+        mainViewTexture.RegisterLoadImageCallback(null, this.onLoad, null);
+      }
+    }
+  },
+  beforeUnmount() {
+    this.stop();
+    if (this.$refs.element) {
+      let mainViewTexture = this.$refs.element.jsvGetProxyTexture(
+        ForgeHandles.TextureManager
+      );
+
+      if (this.onStart) {
+        mainViewTexture.unregisterOnStart(this.onStartId);
+      }
+
+      if (this.onEnd) {
+        mainViewTexture.unregisterOnEnd(this.onEndId);
+      }
+    }
+  },
+};
+</script>
+
+<template>
+  <img
+    data-jsv-disable-apic-autoplay
+    alt=""
+    ref="element"
+    :src="src"
+    :style="style"
+  />
+</template>

package/utils/JsViewVueWidget/JsvApic/JsvApic2/index.js

@@ -0,0 +1,17 @@
+/*
+ * @Author: ChenChanghua
+ * @Date: 2021-10-13 15:12:45
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2021-10-13 17:41:08
+ * @Description: file content
+ */
+//! 考虑到.vue文件除了export default的component外，还有可能export其他对象,因此使用import * as
+import * as JsvApic2 from "./JsvApic2.vue";
+let _JsvApic2;
+if (window.JsView) {
+  _JsvApic2 = JsvApic2.default;
+} else {
+  const BrowserApic2 = await import("./BrowserApic2.vue");
+  _JsvApic2 = BrowserApic2.default;
+}
+export default _JsvApic2;

package/utils/JsViewVueWidget/JsvApic/JsvBrowserApicLib/BrowserApicLib.js

@@ -0,0 +1,4 @@
+
+export {default as Viewer} from "./Viewer";
+export {default as WebpData} from "./WebpData";
+export {default as GifData} from "./GifData";

package/utils/JsViewVueWidget/JsvApic/{BrowserApic → JsvBrowserApicLib}/NormalLoopTool.js

@@ -5,57 +5,55 @@
  * @LastEditTime: 2021-10-13 14:13:17
  * @Description: file content
  */
-import LoopToolBase, { LoopType } from "./LoopToolBase";
+import { LoopToolBase, LoopType } from "../JsvCommonLoopToolBase";
 
-class NormalLoopTool extends LoopToolBase {
-  constructor(loop_type, loop_num, frame_num) {
+export class NormalLoopTool extends LoopToolBase {
+  constructor(loop_type, loop_num) {
     super();
     this.mLoopType = loop_type;
     this.mLoopNum = loop_num;
-    this.mFrameNum = frame_num;
     this.mLoopCount = 0;
-    this.mFrameIndex = 0;
   }
 
-  getNextIndex() {
+  getNextIndex(curFrame) {
+    if (!this.mValid) { return -1; }
     let next_index = -1;
     switch (this.mLoopType) {
       case LoopType.LOOP_DEFAULT:
         if (this.mLoopNum <= 0) {
           //默认无限循环
-          next_index = (this.mFrameIndex + 1) % this.mFrameNum;
+          next_index = (curFrame + 1) % this.mTotalFrameNum;
         } else {
-          if (this.mFrameIndex == this.mFrameNum - 1) {
+          if (curFrame == this.mTotalFrameNum - 1) {
             this.mLoopCount++;
           }
           next_index =
             this.mLoopCount >= this.mLoopNum
               ? -1
-              : (this.mFrameIndex + 1) % this.mFrameNum;
+              : (curFrame + 1) % this.mTotalFrameNum;
         }
         break;
       case LoopType.LOOP_INFINITE:
-        next_index = (this.mFrameIndex + 1) % this.mFrameNum;
+        next_index = (curFrame + 1) % this.mTotalFrameNum;
         break;
       case LoopType.LOOP_FINITE:
-        if (this.mFrameIndex == this.mFrameNum - 1) {
+        if (curFrame == this.mTotalFrameNum - 1) {
           this.mLoopCount++;
         }
         next_index =
           this.mLoopCount >= this.mLoopNum
             ? -1
-            : (this.mFrameIndex + 1) % this.mFrameNum;
+            : (curFrame + 1) % this.mTotalFrameNum;
         break;
       default:
     }
-    this.mFrameIndex = next_index;
     return next_index;
   }
 
-  reset() {
-    this.mFrameIndex = 0;
-    this.mLoopCount = 0;
+  setApicInfo(frameNum, loopNum) {
+    this.mTotalFrameNum = frameNum;
+    this.mLoopNum = this.mLoopType == LoopType.LOOP_DEFAULT ? loopNum : this.mLoopNum;
+    this.mNextFrameIndex = 0;
+    this.mValid = true;
   }
 }
-
-export default NormalLoopTool;

package/utils/JsViewVueWidget/JsvApic/JsvBrowserApicLib/PartLoopTool.js

@@ -0,0 +1,90 @@
+/*
+ * @Author: ChenChanghua
+ * @Date: 2021-10-13 14:01:36
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2021-10-13 16:17:46
+ * @Description: file content
+ */
+import { LoopToolBase } from "../JsvCommonLoopToolBase";
+
+export 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;
+    }
+  }
+}

package/utils/JsViewVueWidget/JsvApic/JsvBrowserApicLib/SingleLoopTool.js

@@ -0,0 +1,17 @@
+import { LoopToolBase } from "../JsvCommonLoopToolBase"
+
+export 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;
+  }
+}

package/utils/JsViewVueWidget/JsvApic/JsvBrowserApicLib/Viewer.js

@@ -0,0 +1,111 @@
+/*
+ * @Author: ChenChanghua
+ * @Date: 2021-10-13 14:01:45
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2021-10-13 17:09:17
+ * @Description: file content
+ */
+
+import { LoopType, ApicEndState } from "../JsvCommonLoopToolBase";
+import { PartLoopTool } from "./PartLoopTool";
+import { NormalLoopTool } from "./NormalLoopTool";
+import { SingleLoopTool } from "./SingleLoopTool";
+
+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;
+    // this.renderFrame(0);
+  }
+
+  _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) {
+      //[[循环次数1,循环开始帧1,循环结束帧1], [循环次数2,循环开始帧2,循环结束帧2], ...]
+      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);
+  }
+}
+
+export default Viewer;

package/utils/JsViewVueWidget/JsvApic/JsvCommonLoopToolBase.js

@@ -0,0 +1,48 @@
+/*
+ * @Author: ChenChanghua
+ * @Date: 2021-10-13 14:01:14
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2021-10-13 15:20:48
+ * @Description: file content
+ */
+
+export class LoopToolBase {
+  constructor() {
+    this.mFrameIndex = -1;
+    this.mTotalFrameNum = -1;
+    this.mNextFrameIndex = -1;
+    this.mValide = false;
+  }
+
+  getNextIndex(curIndex) {
+    return -1;
+  }
+
+  hasNext() {
+    return this.mNextFrameIndex != -1;
+  }
+
+  next() {
+    this.mFrameIndex = this.mNextFrameIndex;
+    this.mNextFrameIndex = this.getNextIndex(this.mFrameIndex);
+    return this.mFrameIndex;
+  }
+
+  setApicInfo(frameNum, loopNum) {
+    this.mTotalFrameNum = frameNum;
+    this.mLoopNum = loopNum;
+  }
+}
+
+export const LoopType = {
+  LOOP_DEFAULT: 0,
+  LOOP_INFINITE: 1,
+  LOOP_FINITE: 2,
+  LOOP_PART: 3,
+  LOOP_SINGLE: 4,
+};
+
+export const ApicEndState = {
+  HIDE: 1,
+  LAST_FRAME: 2,
+}

package/utils/JsViewVueWidget/JsvConnectLine/ArcLineManager.js

@@ -0,0 +1,71 @@
+import { JsvTextureStoreApi } from "../../JsViewVueTools/JsvTextureStore/JsvTextureStore";
+
+let sMap = new Map();
+
+const createTexture = (lineWidth, color, radius) => {
+    let myKey = `${lineWidth}${color}${radius}`;
+    if (sMap.size == 0) {
+        let t = new ConnectLineTexture(lineWidth, color, radius)
+        t.DoRef();
+        sMap.set(myKey, t)
+        return t
+    } else {
+        let hasMatch = false;
+        for (let key of sMap.keys()) {
+            if (key == myKey) {
+                hasMatch = true
+                sMap.get(key).DoRef()
+                return sMap.get(myKey)
+            }
+        }
+        if (!hasMatch) {
+            let t = new ConnectLineTexture(lineWidth, color, radius)
+            t.DoRef();
+            sMap.set(myKey, t)
+            return t
+        }
+    }
+
+}
+
+class ConnectLineTexture {
+    constructor(lineWidth, color, radius) {
+        this.key = `${lineWidth}${color}${radius}`
+        this.bitmap = {
+            width: radius + lineWidth / 2 + 2,
+            height: radius + lineWidth / 2 + 2
+        }
+        this.centerX = 0;
+        this.centerY = 0;
+        this.count = 0;
+        //画布
+        this.canvasTexture = JsvTextureStoreApi.canvasTexture(this.bitmap.width, this.bitmap.height)
+        //绘画四分之一圆
+        this.customPath = this.canvasTexture.customPath()
+        this.customPath.arcTo(
+            this.centerX - radius,
+            this.centerY - radius,
+            this.centerX + radius,
+            this.centerY + radius,
+            0,
+            90
+        )
+        this.customPath.stroke(lineWidth + 2, color)
+        //sourceId赋值
+        this.sourceId = this.canvasTexture.commit();
+    }
+    getSourceId() {
+        return this.sourceId
+    }
+    DoRef() {
+        this.count++;
+    }
+    UnRef() {
+        this.count--;
+        if (this.count === 0) {
+            JsvTextureStoreApi.deleteTexture(this.sourceId);
+            sMap.delete(this.key)
+        }
+    }
+}
+export { createTexture };