@shijiu/jsview-vue 2.2.426-test.0 → 2.3.0

package/utils/JsViewVueWidget/JsvTextureAnim/JsvTextureAnim.vue

@@ -84,6 +84,11 @@ const TexAlignAnchor = {
 };
 export { TexAlignAnchor };
 
+const STATE_IDLE = 0;
+const STATE_RUNNING = 1;
+const STATE_PAUSED = 2;
+const STATE_END = 3;
+
 export default {
   props: {
     src: String,
@@ -128,7 +133,7 @@ export default {
   },
   setup() {
     return {
-      forgeAnimation: null,
+      runningState: STATE_IDLE, // 0:未开始, 1:运行中, 2:暂停, 3:正常结束
       innerViewId: -1,
     };
   },
@@ -244,7 +249,10 @@ export default {
       return new Forge.LayoutView(texture_set);
     },
 
-    _onAnimationEnd() {
+    _onAnimationEnd(normal_end) {
+      if (normal_end) {
+        this.runningState = STATE_END;
+      }
       this.onAnimationEnd?.();
     },
 
@@ -273,9 +281,34 @@ export default {
       }
     },
 
+    _buildAnimation() {
+      if (this.animation) {
+        let anim = new Forge.CssKeyframeAnimation(
+          "@keyframes texAnimDef" + this.animation,
+          this.duration,
+          null,
+          1,
+          1
+        );
+        anim.EnableDelay(this.delay).SetRepeat(this.repeat);
+        anim.Enable(Forge.AnimationEnable.ReleaseAfterEndCallback);
+        anim.SetAnimationListener(
+          new Forge.AnimationListener(null, this._onAnimationEnd, null)
+        );
+
+        return anim;
+      } else {
+        return null;
+      }
+    },
+
     start() {
-      if (this.forgeAnimation && this.innerView) {
-        this.innerView.StartTextureAnimation(this.forgeAnimation);
+      if (this.innerView) {
+        let anim = this._buildAnimation();
+        if (anim) {
+          this.runningState = STATE_RUNNING;
+          this.innerView.StartTextureAnimation(anim);
+        }
       }
     },
 
@@ -311,9 +344,9 @@ export default {
     );
     // 1.1 兼容border转为decorate
     let decorate = this.$props.decorate;
-    // if (this.$props.borderRadius) {
-    //   decorate = this._readRadius(this.$props.borderRadius);
-    // }
+    if (this.$props.borderRadius) {
+      decorate = this._readRadius(this.$props.borderRadius);
+    }
 
     // 2.创建view
     this.innerView = this._createForgeView(view_texture, decorate);
@@ -326,26 +359,7 @@ export default {
     }
     this._updateTexCoord();
 
-    // 4.设置texture的动画形变
-    if (this.animation) {
-      this.forgeAnimation = new Forge.CssKeyframeAnimation(
-        "@keyframes texAnimDef" + this.animation,
-        this.duration,
-        null,
-        1,
-        1
-      );
-      this.forgeAnimation.EnableDelay(this.delay).SetRepeat(this.repeat);
-      this.forgeAnimation.Enable(Forge.AnimationEnable.ReleaseAfterEndCallback);
-      this.forgeAnimation.SetAnimationListener(
-        new Forge.AnimationListener(null, this._onAnimationEnd, null)
-      );
-    } else {
-      this.forgeAnimation = null;
-    }
-
-    // 5. inner view标准处理
-
+    // 4. inner view标准处理
     this.innerViewId = Forge.sViewStore.add(new Forge.ViewInfo(this.innerView));
   },
   beforeUnmount() {
@@ -360,33 +374,19 @@ export default {
     }
   },
   activated() {
-    if (this.innerView) {
-      if (this.animation && this.forgeAnimation == null) {
-        this.forgeAnimation = new Forge.CssKeyframeAnimation(
-          "@keyframes texAnimDef" + this.animation,
-          this.duration,
-          null,
-          1,
-          1
-        );
-        this.forgeAnimation.EnableDelay(this.delay).SetRepeat(this.repeat);
-        this.forgeAnimation.Enable(
-          Forge.AnimationEnable.ReleaseAfterEndCallback
-        );
-        this.forgeAnimation.SetAnimationListener(
-          new Forge.AnimationListener(null, this._onAnimationEnd, null)
-        );
-        this.innerView.StartTextureAnimation(this.forgeAnimation);
-      } else {
-        this.forgeAnimation = null;
-      }
+    if (this.innerView && this.runningState == STATE_PAUSED) {
+      // 动画未正常结束，重新开始动画
+      let anim = this._buildAnimation();
+      this.innerView.StartTextureAnimation(anim); // pause状态，一定有值
     }
   },
   deactivated() {
     if (this.innerView) {
       this.innerView.StopTextureAnimation();
+      if (this.runningState == STATE_RUNNING) {
+        this.runningState = STATE_PAUSED;
+      }
     }
-    this.forgeAnimation = null;
   },
 };
 </script>

package/utils/JsViewVueWidget/index.js

@@ -63,3 +63,5 @@ export * from "./JsvClipDiv"
 export * from "./JsvDriftScope"
 export { default as JsvTouchModeSwitcher } from "./JsvTouchModeSwitcher.vue"
 export { default as JsvDragBox } from "./JsvDragBox/JsvDragBox.vue"
+export { default as Jsv3dDiv } from "./Jsv3dDiv.vue";
+export { default as Jsv3dStage } from "./Jsv3dStage.vue";

package/bin/browser/BrowserApic.vue.mjs

@@ -1,114 +0,0 @@
-import { shallowRef, onMounted, openBlock, createElementBlock, normalizeStyle } from 'vue';
-import { W as WebpData, G as GifData, V as Viewer } from './BrowserApicLib.mjs';
-import { L as LoopType } from '../jsview-vue-common.mjs';
-
-/* 
- + @file {@link file://./../../../../../utils/JsViewVueWidget/JsvApic/JsvApic/BrowserApic.vue}
- */
-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 renderDocument = window.JsvCode.Dom.RenderDocument ? window.JsvCode.Dom.RenderDocument : window.JsvCode.Dom.BrowserDocument;
-    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 = (frameCount = -1) => {
-      viewer?.stop(frameCount);
-    };
-    onMounted(() => {
-      let domLayoutView = canvasProxyRef.value.jsvGetProxyView();
-      domLayoutView.RegisterOnProxyReady(() => {
-        let canvas = renderDocument.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

@@ -1,108 +0,0 @@
-import { shallowRef, onMounted, openBlock, createElementBlock, normalizeStyle } from 'vue';
-import { W as WebpData, G as GifData, V as Viewer } from './BrowserApicLib.mjs';
-import { L as LoopType } from '../jsview-vue-common.mjs';
-
-/* 
- + @file {@link file://./../../../../../utils/JsViewVueWidget/JsvApic/JsvApic2/BrowserApic2.vue}
- */
-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 renderDocument = window.JsvCode.Dom.RenderDocument ? window.JsvCode.Dom.RenderDocument : window.JsvCode.Dom.BrowserDocument;
-    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 = renderDocument.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: (frameCount = -1) => {
-        viewer?.stop(frameCount);
-      }
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        ref_key: "canvasProxyRef",
-        ref: canvasProxyRef,
-        style: normalizeStyle(props.style)
-      }, null, 4);
-    };
-  }
-};
-
-export { _sfc_main as default };