@shijiu/jsview-vue 2.3.151-test.0 → 3.0.0-test.0

package/utils/JsViewVueWidget/TypesDiv/JsvSmartImage.vue

@@ -0,0 +1,267 @@
+<!--
+ * @file
+ *
+ * 【模块 export 内容】
+ * JsvSmartImage：Vue高阶组件，可配置默认背景图(通过slot), 支持AB图片切换, 并设置color space 和 texture size
+ *  props说明:
+ *      style    {Object}   包含left/top/width/height/border-radius的style设置
+ *      colorSpace {String} 颜色空间，调整其他颜色空间可以节省内存，默认RGBA_8888
+ *      imageCompress {boolean} 是否压缩图片, 默认关闭
+ *      src {string}        图片的加载地址
+ *      fadeIn: {boolean}   图片加载完成是否有淡入效果，默认为关闭
+ *      enableAA: {boolean} 启用非全局的抗锯齿处理，不过这个处理会使绘制的矩形比原尺寸每边少2~3像素点, 默认为关闭
+ *      syncDraw: {boolean} 是否同步绘制，默认false，表示异步绘制，如果设置为true，则表示将尝试同步绘制
+ *                          (与JsvDownloader完成预下载的图片会进行同步绘制，以确保图片的完整性)
+ *      altImages: {Array<string>}       AB图片地址组, 当非null时, style中的backgroundImage/backgroundColor将被忽略, 
+ *      altIndex: {number}             AB图片索引, 当altImages不为null时, 有效, 默认为0
+ *      altSync: {boolean}             AB图片是否同步绘制，默认false
+                                      false:异步模式: b图加载完成后再进行自动切换, 建议大尺寸海报使用此模式
+                                      true:同步模式: 同时加载a图和b图(但b图不可见), 同时加载更耗内存, 建议小尺寸的button使用
+-->
+
+<script setup>
+import {
+  reactive,
+  watch,
+  watchEffect,
+  computed,
+  shallowRef,
+  toRaw,
+  useAttrs,
+} from "vue";
+import { JsvPerformance } from "../../JsViewVueTools/JsvPerformance.ts";
+
+const props = defineProps({
+  colorSpace: {
+    type: String,
+    default: "RGBA_8888",
+  },
+  imageCompress: {
+    type: Boolean,
+    default: false,
+  },
+  // isPosterImage废弃...
+  isPosterImage: {
+    type: Boolean,
+    default: false,
+  },
+  fadeIn: {
+    type: Boolean,
+    default: false,
+  },
+  src: {
+    type: String,
+    default: null,
+  },
+  enableAA: {
+    type: Boolean,
+    default: false,
+  },
+  style: Object,
+  syncDraw: {
+    type: Boolean,
+    default: false,
+  },
+  altImages: {
+    type: Array,
+    default: null,
+  },
+  altIndex: {
+    type: Number,
+    default: 0,
+  },
+  altSync: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const getScaleddown = () => {
+  return props.imageCompress ? "true" : "false";
+};
+
+const getIsPosterImage = () => {
+  return JsvPerformance.getPosterSingleThreadDecode() || props.isPosterImage
+    ? "true"
+    : "false";
+};
+
+let rCommonStyle = reactive({});
+let rEnableAA = shallowRef("0");
+
+let rImageStyle = reactive({});
+
+const cMyAttars = useAttrs();
+
+const rFrontEndImageAttr = computed(() => {
+  let frontEndImageAttr = {
+    "data-jsv-vw-enable-fade": props.fadeIn,
+    "data-jsv-img-scaledown-tex": getScaleddown(),
+    "data-jsv-img-color-space": props.colorSpace,
+    "data-jsv-img-poster-image": getIsPosterImage(),
+    "data-jsv-img-enable-aa": rEnableAA,
+    "data-jsv-perf-loadtex": props.syncDraw ? "sync" : "auto",
+    ...cMyAttars, // 接管 onload 等额外定义attr
+  };
+  return frontEndImageAttr;
+});
+
+const rBackendImageAttr = computed(() => {
+  // backEnd不能被 $attrs中onload覆盖, 在此先不引入 $attrs
+  return {
+    "data-jsv-img-scaledown-tex": getScaleddown(),
+    "data-jsv-img-color-space": props.colorSpace,
+    "data-jsv-img-poster-image": getIsPosterImage(),
+    "data-jsv-perf-loadtex": "async",
+    "data-jsv-vw-hide-keep": "true",
+  };
+});
+
+
+let rImageSetList = shallowRef([]);
+const rebuildSrcArray = () => {
+  if (props.altImages && props.altImages.length > 0) {
+    if (props.altImages.length != rImageSetList.value.length) {
+      rImageSetList.value = Array.from({ length: props.altImages.length }, 
+        () => (shallowRef(null))
+      );
+    }
+
+    // 遍历 props.altImages，如果变化则进行填充
+    for (let i = 0; i < props.altImages.length; i++) {
+      if (rImageSetList.value[i].value != props.altImages[i]) {
+        rImageSetList.value[i].value = toRaw(props.altImages[i]);
+      }
+    }
+  } else {
+    if (rImageSetList.value.length != 1) {
+      rImageSetList.value = [shallowRef(toRaw(props.src))];
+    } else if (rImageSetList.value[0].value != props.src) {
+      rImageSetList.value[0].value = toRaw(props.src);
+    }
+  }
+};
+watch(
+  () => ({
+    srcArray: props.altImages,
+    src: props.src,
+  }),
+  () => {
+    rebuildSrcArray();
+    resetAsyncFrontEndImageUrl();
+  }
+);
+rebuildSrcArray();
+
+const rebuildStyle = () => {
+  if (props.style) {
+    // 提取left, top, width, height, 并去掉干扰项 backgroundImage backgroundColor(会引起同位置重复图片绘制)
+    let {
+      left,
+      top,
+      width,
+      height,
+      transformStyle,
+      backgroundImage,
+      backgroundColor,
+      ...others
+    } = props.style;
+
+    // 承接x,y偏移和动画设置, 规避默认淡出动画被影响
+    rCommonStyle.left = left;
+    rCommonStyle.top = top;
+    rCommonStyle.transformStyle = transformStyle;
+
+    // 设置style
+    rImageStyle.width = width;
+    rImageStyle.height = height;
+    Object.assign(rImageStyle, others);
+  }
+};
+// 第一次进行style创建
+rebuildStyle();
+watch(
+  () => props.style,
+  () => {
+    rebuildStyle();
+  }
+);
+
+// 监听enableAA变化
+watchEffect(() => {
+  rEnableAA.value = props.enableAA ? "1" : "0";
+});
+
+const rActiveIndex = computed(() => {
+  let index = 0;
+  if (props.altIndex >= rImageSetList.value.length) {
+    index = rImageSetList.value.length - 1;
+  } else if (props.altIndex >= 0) {
+    index = props.altIndex;
+  }
+  return index;
+});
+
+// 小模块, 处理asyncLoad图片加载
+let rBackendImageUrl = shallowRef(null);
+let rFrontEndImageUrl = shallowRef(null);
+
+const onBackendImageLoad = () => {
+  rFrontEndImageUrl.value = rBackendImageUrl.value;
+  rBackendImageUrl.value = null;
+};
+
+watch(
+  () => rActiveIndex.value,
+  (newVal, oldVal) => {
+    if (newVal !== oldVal) {
+      // 设置backend image url, 等待加载完成后, 替换前端图片
+      rBackendImageUrl.value = rImageSetList.value[newVal].value;
+    }
+  }
+);
+
+// 初始化首帧的FrontEndImageUrl
+const resetAsyncFrontEndImageUrl = () => {
+  if (rImageSetList.value.length > 0) {
+    rFrontEndImageUrl.value = rImageSetList.value[rActiveIndex.value].value;
+  } else {
+    rFrontEndImageUrl.value = null;
+  }
+};
+resetAsyncFrontEndImageUrl();
+</script>
+
+<template>
+  <div :style="rCommonStyle">
+    <slot />
+    <div
+      v-if="rImageSetList.length > 1 || rImageSetList[0].value"
+      :data-jsv-vw-mask-poster-on-top="true"
+    >
+      <div v-if="altSync">
+        <img
+          v-for="(image_set, idx) in rImageSetList"
+          :key="image_set.value"
+          :data-jsv-vw-hide-keep="rActiveIndex !== idx ? 'true' : 'false'"
+          :style="rImageStyle"
+          :src="image_set.value"
+          v-bind="rFrontEndImageAttr"
+        />
+      </div>
+      <div v-else>
+        <img
+          :style="rImageStyle"
+          :src="rBackendImageUrl"
+          @load="onBackendImageLoad"
+          v-bind="rBackendImageAttr"
+        />
+        <img
+          :style="rImageStyle"
+          :src="rFrontEndImageUrl"
+          v-bind="rFrontEndImageAttr"
+        />
+      </div>
+    </div>
+  </div>
+</template>

package/utils/JsViewVueWidget/index.js

@@ -14,7 +14,9 @@ export { LoopType, ApicEndState } from "./JsvApic/JsvCommonLoopToolBase.js";
 export { default as JsvInput, InputType } from "./JsvInput";
 export {
   default as JsvPreload,
+  default as JsvPicKeepAlive,
   buildPreloadInfo,
+  buildLoadInfo,
   buildDownloadInfo,
 } from "./JsvPreload";
 export { default as JsvQrcode } from "./JsvQrcode/JsvQrcode.vue";
@@ -35,8 +37,10 @@ export { default as JsvHole } from "./JsvHole.js";
 export { default as JsvMarquee } from "./JsvMarquee.vue";
 export { default as JsvMaskClipDiv } from "./JsvMaskClipDiv.vue";
 export { default as JsvNinePatch } from "./JsvNinePatch.vue";
-export { default as JsvPosterDiv } from "./JsvPosterDiv.vue";
-export { default as JsvPosterImage } from "./JsvPosterImage.vue";
+export { default as JsvPosterDiv } from "./TypesDiv/JsvPosterDiv.vue";
+export { default as JsvPosterImage } from "./TypesDiv/JsvPosterImage.vue";
+export { default as JsvSmartDiv } from "./TypesDiv/JsvSmartDiv.vue";
+export { default as JsvSmartImage } from "./TypesDiv/JsvSmartImage.vue";
 export { default as JsvScaleTextBox } from "./JsvScaleTextBox.vue";
 export { JsvSoundPool } from "./JsvSoundPool.js";
 export { default as JsvTextBox } from "./JsvTextBox.vue";

package/bin/browser/BrowserAudio.vue.mjs

@@ -1,258 +0,0 @@
-import { openBlock, createElementBlock, resolveComponent, createBlock, mergeProps } from 'vue';
-import { _ as _export_sfc } from '../export-sfc.mjs';
-
-/* 
- + @file {@link file://./../../../../../utils/JsViewPlugin/JsvAudio/BrowserAudio/JsvSystemAudio.vue}
- */
-const _sfc_main$1 = {
-  props: {
-    /**
-     * 回调函数，播放器对象通知接口
-     * @param {Object} video对象，可以通过此video对象调用video相关属性和方法，具体属性和方法定义见JsvMedia.js文件里相关说明。
-     */
-    onRef: { type: Function, default: () => {
-    } },
-    /**
-     * 属性，Boolean类型，true表示自动播放，默认false。
-     */
-    autoplay: { type: Boolean, default: false },
-    /**
-     * 属性，Boolean类型，true表示静音，默认false。
-     */
-    muted: { type: Boolean, default: false },
-    /**
-     * 属性，Boolean类型，true表示循环播放，默认false。
-     */
-    loop: { type: Boolean, default: false },
-    /**
-     * 属性，String类型，播放地址。
-     */
-    src: { type: String, default: "" },
-    /**
-     * 回调函数，播放结束时通过此回调接口通知。
-     */
-    onEnded: {
-      type: Function,
-      default: () => {
-        return {};
-      }
-    },
-    /**
-     * 回调函数，播放错误时通过此接口通知。
-     * @param {int} 错误类型，当前定义了四种错误。1是异常中断；2是网络错误；3是解码错误；4是格式不支持。
-     */
-    onError: {
-      type: Function,
-      default: () => {
-        return {};
-      }
-    },
-    /**
-     * 回调函数，开始加载，设置完播放地址后，上报此事件。
-     */
-    onLoadStart: {
-      type: Function,
-      default: () => {
-        return {};
-      }
-    },
-    /**
-     * 回调函数，视频准备好后触发。
-     */
-    onLoadedMetaData: {
-      type: Function,
-      default: () => {
-        return {};
-      }
-    },
-    /**
-     * 回调函数，视频准备好后触发，这个时候可以正常seek。
-     */
-    onLoad: {
-      type: Function,
-      default: () => {
-        return {};
-      }
-    },
-    /**
-     * 回调函数，音频失去焦点后触发此事件，可能会导致pause（点播）或者离开频道（直播）。
-     */
-    onAudioFocusLoss: {
-      type: Function,
-      default: () => {
-        return {};
-      }
-    },
-    /**
-     * 回调函数，音频获取焦点后触发此事件，可能会触发resume（点播）或者加入频道（直播）。
-     */
-    onAudioFocusGain: {
-      type: Function,
-      default: () => {
-        return {};
-      }
-    },
-    /*
-     *预下载音频
-     */
-    preDownload: {
-      type: Boolean,
-      default: false
-    }
-  },
-  setup() {
-    return {
-      audio: null
-    };
-  },
-  mounted() {
-    this.Jsvinit();
-  },
-  beforeUnmount() {
-    if (this.audio != null) {
-      this.audio.unload?.();
-      this.audio.releaseResource?.();
-      this.audio.onPlatformDestroy?.();
-      this.onRef?.(null);
-      this.unregisterOnVisibilityChange();
-    }
-  },
-  methods: {
-    registerEvent() {
-      if (this.audio) {
-        this.audio.addEventListener("ended", this.onEnded);
-        this.audio.addEventListener("error", this.onError);
-        this.audio.addEventListener("loadstart", this.onLoadStart);
-        this.audio.addEventListener("loadedmetadata", this.onLoadedMetaData);
-        this.audio.addEventListener("loadeddata", this.onLoad);
-        this.audio.addEventListener("audiofocusloss", this.onAudioFocusLoss);
-        this.audio.addEventListener("audiofocusgain", this.onAudioFocusGain);
-      }
-    },
-    onVisibilityChange(status) {
-      if (status.status === "show") {
-        this.onJsViewShow();
-      } else if (status.status === "hide") {
-        this.onJsViewHide();
-      }
-    },
-    registerOnVisibilityChange() {
-      if (window.JsView) {
-        window.JsView.onVisibilityChange(this.onVisibilityChange);
-      }
-    },
-    unregisterOnVisibilityChange() {
-      if (window.JsView) {
-        window.JsView.removeEventCallback(this.onVisibilityChange);
-      }
-    },
-    onJsViewHide() {
-      if (this.audio) {
-        if (!this.audio.paused) {
-          this.stopByOnHide = true;
-        }
-        this.audio.unload();
-      }
-    },
-    onJsViewShow() {
-      if (!this.audio) {
-        this.Jsvinit();
-      }
-      if (this.stopByOnHide) {
-        this.stopByOnHide = false;
-        this.Jsvinit();
-      }
-    },
-    Jsvinit() {
-      this.audio = new Audio();
-      this.registerEvent();
-      if (this.src && this.src !== "") {
-        let realUrl;
-        if (window.JsView) {
-          realUrl = new window.JsView.Dom.UrlRef(this.src).href;
-        } else {
-          realUrl = this.src;
-        }
-        this.audio.src = realUrl;
-      }
-      if (this.autoplay) {
-        this.audio.autoplay = this.autoplay;
-      }
-      if (this.muted) {
-        this.audio.muted = this.muted;
-      }
-      if (this.loop) {
-        this.audio.loop = this.loop;
-      }
-      if (this.preDownload) {
-        this.audio.predownload = this.preDownload;
-      }
-      this.onRef?.(this.audio);
-      Promise.resolve().then(() => {
-        if (this.audio) {
-          this.audio.confirmInitSetup?.();
-        }
-      });
-      this.registerOnVisibilityChange();
-    }
-  }
-};
-function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", {
-    style: { width: 1, height: 1 },
-    backgroundColor: "rgba(0,0,0,1)"
-  });
-}
-const JsvSystemAudio = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
-
-/* 
- + @file {@link file://./../../../../../utils/JsViewPlugin/JsvAudio/BrowserAudio/BrowserAudio.vue}
- */
-const _sfc_main = {
-  components: {
-    JsvSystemAudio
-  },
-  props: {
-    onRef: { type: Function, default: () => {
-    } }
-  },
-  setup() {
-    return {
-      audioRef: null
-    };
-  },
-  methods: {
-    onRefProxy(audio_ref) {
-      if (audio_ref != null) {
-        audio_ref.closeScreenSaver = () => {
-        };
-        audio_ref.openScreenSaver = () => {
-        };
-        audio_ref.unload = () => {
-          audio_ref.src = "";
-        };
-      }
-      this.audioRef = audio_ref;
-    }
-  },
-  mounted() {
-    if (this.audioRef && this.onRef) {
-      let audio_ref = this.audioRef;
-      this.audioRef = null;
-      this.onRef(audio_ref);
-    }
-  },
-  beforeUnmount() {
-    this.audioRef?.closeScreenSaver();
-    if (this.onRef) {
-      this.onRef(null);
-    }
-  }
-};
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_jsv_system_audio = resolveComponent("jsv-system-audio");
-  return openBlock(), createBlock(_component_jsv_system_audio, mergeProps({ onRef: $options.onRefProxy }, _ctx.$attrs), null, 16, ["onRef"]);
-}
-const BrowserAudio = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
-
-export { BrowserAudio as default };

package/bin/browser/BrowserJsvLatex.vue.mjs

@@ -1,145 +0,0 @@
-import { shallowRef, ref, onBeforeUnmount, openBlock, createElementBlock, normalizeStyle, createElementVNode, unref } from 'vue';
-import { Forge } from '@shijiu/jsview/dom/jsv-forge-define';
-
-/* 
- + @file {@link file://./../../../../utils/JsViewPlugin/JsvLatex/BrowserDomBuilder.js}
- */
-const getHtmlStr = (libPath, latexStr, fontSize, width, height, color) => {
-  return `<html>
-      <head>
-        <style>
-          mjx-container[display="true"] {
-            margin: 0 0 !important;
-          }
-          body {
-            margin: 0 !important;
-          }
-        </style>
-        <script type="text/javascript">
-          MathJax = {
-            tex: {
-              inlineMath: [['$', '$'], ['\\\\(', '\\\\)']]
-            },
-            svg: {
-              fontCache: 'global'
-            }
-          };
-          function bodyOnLoad() {
-            let divElement = document.createElement("div");
-            divElement.style.display = "inline-block";
-            divElement.style.fontSize = "${fontSize}px";
-            divElement.style.color = "${color}";
-            divElement.innerHTML = String.raw\`${latexStr}\`;
-            //divElement.style.width = ${width} + "px";
-            document.body.appendChild(divElement);
-            
-            MathJax.typesetPromise().then(() => {
-              // modify the DOM here
-              let formulaMetrics = MathJax.getMetricsFor(divElement, true);
-              let w = Math.min(${width}, divElement.clientWidth);
-              let scale = w / divElement.clientWidth;
-              divElement.style.fontSize = Math.floor(scale * ${fontSize}) + "px";
-              MathJax.typeset();
-            }).catch((err) => console.error(err.message));
-          }
-        <\/script>
-        <script type="text/javascript" src="${libPath}"><\/script>
-      </head>
-      <body onload="bodyOnLoad()">
-      </body>
-    </html>`;
-};
-
-/* 
- + @file {@link file://./../../../../utils/JsViewPlugin/JsvLatex/BrowserJsvLatex.vue}
- */
-const _sfc_main = {
-  __name: "BrowserJsvLatex",
-  props: {
-    latexStr: {
-      type: String,
-      required: true
-    },
-    width: {
-      type: Number,
-      required: true
-    },
-    height: {
-      type: Number,
-      default: 0
-    },
-    fontSize: {
-      type: Number,
-      default: 25
-    },
-    lineSpace: {
-      type: Number,
-      default: 10
-    },
-    color: {
-      type: String,
-      default: "#FFFFFF"
-    },
-    left: {
-      type: Number,
-      default: 0
-    },
-    top: {
-      type: Number,
-      default: 0
-    }
-  },
-  setup(__props) {
-    const props = __props;
-    function precessString(original) {
-      return "\\[\\begin{array}{l}" + original.replaceAll(/\\[\(\)\[\]]/g, "") + "\\end{array}\\]";
-    }
-    let innerViewId = shallowRef(-1);
-    const clientWidth = ref(props.width);
-    const clientHeight = ref(props.height);
-    let layoutView = new Forge.IFrameView();
-    layoutView.SetIframeSize(props.width, props.height);
-    layoutView.SetInnerHtml(
-      getHtmlStr(
-        "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewTestResource/DocResource/mathjax-tex-svg.txt",
-        precessString(props.latexStr),
-        props.fontSize,
-        props.width,
-        props.height,
-        props.color
-      )
-    );
-    const resizeObserver = new ResizeObserver((entries) => {
-      if (entries.length > 0) {
-        const e = entries[0];
-        if (clientHeight.value == 0) {
-          clientHeight.value = e.contentRect.height;
-        }
-      }
-    });
-    resizeObserver.observe(layoutView.GetIFrame());
-    innerViewId.value = Forge.sViewStore.add(new Forge.ViewInfo(layoutView));
-    onBeforeUnmount(() => {
-      if (innerViewId.value != -1) {
-        Forge.sViewStore.remove(innerViewId.value);
-        innerViewId.value = -1;
-        console.log("success remove innerview");
-      }
-      resizeObserver.unobserve(layoutView.GetIFrame());
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        style: normalizeStyle({
-          left: __props.left,
-          top: __props.top,
-          width: clientWidth.value,
-          height: clientHeight.value
-        })
-      }, [
-        createElementVNode("div", { "data-jsv-vw-innerview": unref(innerViewId) }, null, 8, ["data-jsv-vw-innerview"])
-      ], 4);
-    };
-  }
-};
-
-export { _sfc_main as default };

package/bin/types/utils/JsViewPlugin/JsvLatex/version.d.ts

@@ -1,10 +0,0 @@
-export const packageName: string;
-export const name: string;
-export const version: string;
-export const versionCodeMin: number;
-export const versionCodeMax: number;
-export const bridgeName: string;
-export const className: string;
-export const initMethod: string;
-export const listener: string;
-export const listener2: string;

package/bin/types/utils/JsViewVueTools/JsvTextureStore/DominantColor/GetDominantColor.d.ts

@@ -1,7 +0,0 @@
-/**
- * 使用ForgeTexture获取图片的dominant color, 注意, 此方法会hold住texture资源, 需要保证组件unmount时调用释放处理
- * @param src 图片的src
- * @param cbk 回调函数, 参数: info
- * @returns 用于cancel的句柄，当cancel时，会清理对div和Callback的引用
- */
-export declare function getDominantColorByForgeTexture(src: string, cbk: (i: any) => void): () => void;