@shijiu/jsview-vue 2.2.373 → 2.3.0

package/utils/JsViewVueWidget/JsvSpray/JsvSpray.vue

@@ -13,6 +13,7 @@
  *          pointRes {string} (必需)粒子图案 可选值: 绝对路径url|url(相对路径url)|#FFFFFF|rbga(255,0,0,1.0)
  *          sprayStyle {object}  (必需)粒子效果配置
  *          ignoreClip {boolean} 无视clipView描画
+ *          onStop      {() => void} 停止喷射回调
  *
  * prop中的sprayStyle说明:
  *      type {int} (必需)喷射类型 0: 一次喷射 1: 持续喷射
@@ -38,12 +39,56 @@
  *      alphaMax {float} 透明度最大值, 默认为1
  *      angleMin {float} 角度最小值(角度)
  *      angleMax {float} 角度最大值(角度)
+ * 方法
+ *    start { () => void }
+ *      @descripe 开始喷射
+ *    stop { (immediate: boolean) => void }
+ *      @descripe 停止喷射
+ *      @param immediate { boolean } 是否立即消除粒子, false时会停止喷射,等待已有粒子消失
 -->
-<script>
+<script setup>
 import { Forge } from "@shijiu/jsview/dom/jsv-forge-define";
 import ForgeHandles from "../../JsViewVueTools/ForgeHandles";
+import { urlCheckSet } from "../../JsViewVueTools";
+import { ref, onBeforeUnmount, onUpdated, onMounted } from "vue";
 
-let buildForgeView = (pointRes, sprayStyle, sizeRef, ignoreClip) => {
+const props = defineProps({
+  pointRes: {
+    type: String,
+    required: true,
+  },
+  sprayStyle: {
+    type: Object,
+    required: true,
+  },
+  ignoreClip: {
+    type: Boolean,
+    default: false,
+  },
+  onStop: {
+    type: Function,
+    default: null,
+  },
+});
+
+const widthSize = ref(0);
+const heightSize = ref(0);
+let sprayView = null;
+
+function unloadView() {
+  if (viewId.value != -1) {
+    Forge.sViewStore.remove(viewId.value);
+    viewId.value = -1;
+  }
+}
+
+let buildForgeView = (
+  pointRes,
+  sprayStyle,
+  ignoreClip,
+  widthRef,
+  heightRef
+) => {
   if (!pointRes) {
     return -1;
   }
@@ -54,19 +99,13 @@ let buildForgeView = (pointRes, sprayStyle, sizeRef, ignoreClip) => {
       texture_manager.GetColorTexture(pointRes)
     );
   } else {
-    const base_url = pointRes;
-    let image_url = base_url;
-    if (base_url && base_url.indexOf("http") === 0) {
-      image_url = base_url;
-    } else if (window.JsView.Dom.UrlRef) {
-      image_url = new window.JsView.Dom.UrlRef(pointRes).href;
-    }
+    let image_url = urlCheckSet(pointRes);
     texture_setting = new Forge.ExternalTextureSetting(
       texture_manager.GetImage2(image_url, false, null, "RGB_8888", null)
     );
   }
-  const spray_view = new Forge.SprayView(texture_setting);
-  let add_speed  = .1;
+  sprayView = new Forge.SprayView(texture_setting);
+  let add_speed = 0.1;
   if (typeof sprayStyle.particleAddSpeed == "number") {
     add_speed = sprayStyle.particleAddSpeed;
   }
@@ -94,23 +133,31 @@ let buildForgeView = (pointRes, sprayStyle, sizeRef, ignoreClip) => {
     alphaMin = sprayStyle.alphaMin;
     alphaMax = sprayStyle.alphaMax;
   }
-  let lifeMin = sprayStyle.lifeMin, lifeMax = sprayStyle.lifeMax;
+  let lifeMin = sprayStyle.lifeMin,
+    lifeMax = sprayStyle.lifeMax;
   if (sprayStyle.lifeMax > 50 * 1000) {
-    console.warn("JsvSpray: particle maximum lifetime is 50000ms, current value is", sprayStyle.lifeMax);
+    console.warn(
+      "JsvSpray: particle maximum lifetime is 50000ms, current value is",
+      sprayStyle.lifeMax
+    );
     /**某些设备上float值过大会导致精度问题, 因此粒子生命需要限制范围*/
     lifeMin = sprayStyle.lifeMin > 50000 ? 50000 : sprayStyle.lifeMin;
     lifeMax = sprayStyle.lifeMax > 50000 ? 50000 : sprayStyle.lifeMax;
   }
 
-  let angleMin = 0, angleMax = 0;
-  if (typeof sprayStyle.angleMin == "number" && typeof sprayStyle.angleMax == "number") {
+  let angleMin = 0,
+    angleMax = 0;
+  if (
+    typeof sprayStyle.angleMin == "number" &&
+    typeof sprayStyle.angleMax == "number"
+  ) {
     if (sprayStyle.angleMin <= sprayStyle.angleMax) {
       angleMin = (sprayStyle.angleMin / 180) * 3.1415;
       angleMax = (sprayStyle.angleMax / 180) * 3.1415;
     }
   }
 
-  spray_view.SetSprayInfo(
+  sprayView.SetSprayInfo(
     sprayStyle.type,
     sprayStyle.particleNum,
     add_speed,
@@ -133,75 +180,69 @@ let buildForgeView = (pointRes, sprayStyle, sizeRef, ignoreClip) => {
     alphaMin,
     alphaMax,
     angleMin,
-    angleMax,
+    angleMax
   );
   const view_width =
     sprayStyle.deltaWidth === 0 ? 1 : 2 * sprayStyle.deltaWidth;
   const view_height =
     sprayStyle.deltaHeight === 0 ? 1 : 2 * sprayStyle.deltaHeight;
-  sizeRef.width = view_width;
-  sizeRef.height = view_height;
-  return Forge.sViewStore.add(new Forge.ViewInfo(spray_view, null));
+  widthRef.value = view_width;
+  heightRef.value = view_height;
+  return Forge.sViewStore.add(new Forge.ViewInfo(sprayView, null));
 };
+const viewId = ref(
+  buildForgeView(
+    props.pointRes,
+    props.sprayStyle,
+    props.ignoreClip,
+    widthSize,
+    heightSize
+  )
+);
 
-export default {
-  props: {
-    pointRes: {
-      type: String,
-      required: true,
-    },
-    sprayStyle: {
-      type: Object,
-      required: true,
-    },
-    ignoreClip: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      size: {
-        width: 0,
-        height: 0,
-      },
-      viewId: -1,
-    };
-  },
-  methods: {
-    unloadView() {
-      if (this.viewId != -1) {
-        Forge.sViewStore.remove(this.viewId);
-        this.viewId = -1;
-      }
-    },
-  },
-  created() {
-    this.viewId = buildForgeView(
-      this.pointRes,
-      this.sprayStyle,
-      this.size,
-      this.ignoreClip
-    );
-  },
-  updated() {
-    this.unloadView();
-    this.viewId = buildForgeView(
-      this.pointRes,
-      this.sprayStyle,
-      this.size,
-      this.ignoreClip
-    );
-  },
-  beforeUnmount() {
-    this.unloadView();
-  },
-};
+function onStop() {
+  props.onStop?.();
+}
+
+sprayView.RegisterOnStop(onStop);
+sprayView.RegisterEventListener();
+
+function start() {
+  sprayView.Start();
+}
+
+function stop(immediate) {
+  sprayView.Stop(immediate);
+}
+
+onMounted(() => {
+  start();
+});
+
+onUpdated(() => {
+  unloadView();
+  viewId.value = buildForgeView(
+    props.pointRes,
+    props.sprayStyle,
+    props.ignoreClip,
+    widthSize,
+    heightSize
+  );
+});
+
+onBeforeUnmount(() => {
+  unloadView();
+});
+
+defineExpose({
+  start,
+  stop,
+});
 </script>
 
 <template>
   <div
-    :style="{ width: size.width, height: size.height }"
+    :style="{ width: widthSize, height: heightSize }"
     :data-jsv-vw-innerview="viewId"
   ></div>
-</template>
+</template>

package/utils/JsViewVueWidget/JsvSpriteAnim/JsvSpriteAnim.vue

@@ -353,11 +353,6 @@ onUnmounted(() => {
 const onAnimEndDelegate = () => {
   // 在onAnimEnd之前进行Stop，以防onAnimEnd内部继续发生别的操作
   if (props.onAnimEnd) {
-    if (!window.JsView) {
-      console.log(
-        "JsvSpriteAnim 结束回调时进行隐藏在PC环境会有一帧残留，盒子环境是正常,可忽略这个问题"
-      );
-    }
     props.onAnimEnd();
   }
 

package/utils/JsViewVueWidget/JsvTextureAnim/JsvTextureAnim.vue

@@ -11,7 +11,7 @@ import ForgeHandles from "../../JsViewVueTools/ForgeHandles";
 import {
   numberCheckSet,
   urlCheckSet,
-} from "../../JsViewVueTools/TypeCheckAndSet";
+} from "../../JsViewVueTools/TypeCheckAndSet.ts";
 import { toNinePatchForgeViewSet } from "../../JsViewVueTools/NinePatchHelper";
 import {
   DECORATE_BORDER_RADIUS,
@@ -331,41 +331,36 @@ export default {
   },
 
   created() {
-    if (window.JsView) {
-      const textureManager = ForgeHandles.TextureManager;
+    const textureManager = ForgeHandles.TextureManager;
 
-      // 1.获得主view的展示内容图片 texture
-      let image_url = urlCheckSet(this.src);
-      let view_texture = textureManager.GetImage2(
-        image_url,
-        false,
-        null,
-        "RGB_8888",
-        null
-      );
-      // 1.1 兼容border转为decorate
-      let decorate = this.$props.decorate;
-      if (this.$props.borderRadius) {
-        decorate = this._readRadius(this.$props.borderRadius);
-      }
-
-      // 2.创建view
-      this.innerView = this._createForgeView(view_texture, decorate);
-      // 3.设置texture基本形变
-      if (this.transform) {
-        this.innerView.ResetTextureCssTransform(
-          this.transform,
-          this.transformOrigin
-        );
-      }
-      this._updateTexCoord();
-
-      // 5. inner view标准处理
+    // 1.获得主view的展示内容图片 texture
+    let image_url = urlCheckSet(this.src);
+    let view_texture = textureManager.GetImage2(
+      image_url,
+      false,
+      null,
+      "RGB_8888",
+      null
+    );
+    // 1.1 兼容border转为decorate
+    let decorate = this.$props.decorate;
+    if (this.$props.borderRadius) {
+      decorate = this._readRadius(this.$props.borderRadius);
+    }
 
-      this.innerViewId = Forge.sViewStore.add(
-        new Forge.ViewInfo(this.innerView)
+    // 2.创建view
+    this.innerView = this._createForgeView(view_texture, decorate);
+    // 3.设置texture基本形变
+    if (this.transform) {
+      this.innerView.ResetTextureCssTransform(
+        this.transform,
+        this.transformOrigin
       );
     }
+    this._updateTexCoord();
+
+    // 4. inner view标准处理
+    this.innerViewId = Forge.sViewStore.add(new Forge.ViewInfo(this.innerView));
   },
   beforeUnmount() {
     if (this.innerViewId !== -1) {

package/utils/JsViewVueWidget/JsvTextureAnim/index.js

@@ -3,17 +3,10 @@
  * @Date: 2021-10-13 15:14:29
  * @Description: file content
  */
-import * as JsvTextureAnim from "./JsvTextureAnim.vue";
 
-let _JsvTextureAnim;
-if (window.JsView) {
-  _JsvTextureAnim = JsvTextureAnim.default;
-} else {
-  const BrowserTextureAnim = await import("./BrowserTextureAnim.vue");
-  _JsvTextureAnim = BrowserTextureAnim.default;
-}
+import JsvTextureAnim from "./JsvTextureAnim.vue"
 
 export * from "./CommonType";
-export default _JsvTextureAnim;
+export default JsvTextureAnim;
 const TexAlignAnchor = JsvTextureAnim.TexAlignAnchor;
 export { TexAlignAnchor };

package/utils/JsViewVueWidget/index.js

@@ -17,8 +17,8 @@ export {
   buildPreloadInfo,
   buildDownloadInfo,
 } from "./JsvPreload";
-export { default as JsvQrcode } from "./JsvQrcode";
-export { default as JsvSpray } from "./JsvSpray";
+export { default as JsvQrcode } from "./JsvQrcode/JsvQrcode.vue";
+export { default as JsvSpray } from "./JsvSpray/JsvSpray.vue"
 export * from "./JsvSpriteAnim";
 export { default as JsvSwiper } from "./JsvSwiper";
 export { default as JsvSwiper3D } from "./JsvSwiper3D";
@@ -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 };