@shijiu/jsview-vue 2.3.151-test.0 → 2.3.728-alpha.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";
@@ -66,3 +70,4 @@ export { default as JsvDragBox } from "./JsvDragBox/JsvDragBox.vue"
 export { default as Jsv3dDiv } from "./Jsv3dDiv.vue";
 export { default as Jsv3dStage } from "./Jsv3dStage.vue";
 export { default as JsvDashPath } from "./JsvDashPath.vue";
+export * from "./JsvDomRenderer"

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;

package/utils/JsViewPlugin/JsvLatex/version.js

@@ -1,24 +0,0 @@
-/*
- * @Author: ChenChanghua
- * @Date: 2023-02-22 18:22:26
- * @Description: file content
- */
-let PluginInfo = {
-    // downloadUrl: "http://192.168.2.1:8097/pluginpackapp.zip", //插件下载地址
-    packageName: "com.qcode.jsvlatex",
-    name: "数学公式插件",
-    version: "1.0.4",  //插件需要的版本号
-    versionCodeMin: 4,
-    versionCodeMax: 4,
-    bridgeName: "jsvLatexBridge", //插件bridge注册到jsview的名称
-    className: "com.qcode.jsvlatex.JsvLatex",  //插件初始化类名称
-    initMethod: "createInstance",   //插件初始化方法
-    listener: "top.JsvLatexPluginLoadResult",  //插件加载结果回调
-    listener2: "top.JsvLatexPluginStatus",
-    // debug:true,
-    // md5: "f8a12f63d450df862abc6dbf273e258d"
-};
-
-// 不要用export default，update-env脚本不能解析
-// 导出字段要含有 pluginVersionInfo 信息，作为npm时版本参考
-module.exports = PluginInfo;

package/utils/JsViewVueTools/JsvTextureStore/DominantColor/GetDominantColor.ts

@@ -1,36 +0,0 @@
-import ForgeHandles from "../../../JsViewVueTools/ForgeHandles";
-/**
- * 使用ForgeTexture获取图片的dominant color, 注意, 此方法会hold住texture资源, 需要保证组件unmount时调用释放处理
- * @param src 图片的src
- * @param cbk 回调函数, 参数: info
- * @returns 用于cancel的句柄，当cancel时，会清理对div和Callback的引用
- */
-export function getDominantColorByForgeTexture(
-  src: string,
-  cbk: (i: any) => void
-) {
-  if (!src) {
-    console.warn("getDominantColorByForgeTexture: src is empty");
-    return () => {};
-  }
-  const setting = { src };
-  let texture = (ForgeHandles.TextureManager as any).GetImageProcessTexture(
-    JSON.stringify(setting)
-  );
-  let canceled = false;
-  const callback = (info: any) => {
-    if (canceled) {
-      return;
-    }
-    cbk(info.extra);
-    texture?.RequestToUnload();
-    texture = null;
-  };
-  texture.DisableAutoRecycle();
-  texture.RegisterLoadImageCallback(src, callback, null);
-  return () => {
-    canceled = true;
-    texture?.RequestToUnload();
-    texture = null;
-  };
-}

package/utils/JsViewVueWidget/JsvPosterDiv.vue

@@ -1,56 +0,0 @@
-<!--
- * @file
- *
- * 【模块 export 内容】
- * JsvPosterDiv：Vue高阶组件，海报描画, 其字内容为占位图
- *  props说明:
- *      style    {Object}   包含
- *                          left/top/width/height
- *                          border-radius
- *                          backgroundImage/backgroundColor 
- *                          的style设置
- *      enableAA: {boolean} 启用非全局的抗锯齿处理，不过这个处理会使绘制的矩形比原尺寸每边少2~3像素点
--->
-<script setup>
-import { reactive, watchEffect, shallowRef } from "vue";
-
-const props = defineProps({
-  style: Object,
-  enableAA: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-let common_style = reactive({});
-let image_style = reactive({});
-let rEnableAA = shallowRef("0");
-
-watchEffect(() => {
-  if (props.style) {
-    let { left, top, width, height, transformStyle, ...others } = props.style;
-
-    common_style.left = left;
-    common_style.top = top;
-    common_style.transformStyle = transformStyle;
-
-    image_style.width = width;
-    image_style.height = height;
-    Object.assign(image_style, others);
-  }
-  rEnableAA.value = props.enableAA ? "1" : "0";
-});
-</script>
-
-<template>
-  <div :style="common_style">
-    <slot></slot>
-    <div
-      data-jsv-vw-enable-fade="true"
-      data-jsv-vw-mask-poster-on-top="true"
-      :style="image_style"
-      :data-jsv-img-enable-aa="rEnableAA"
-      v-bind="$attrs"
-    />
-  </div>
-</template>

package/utils/JsViewVueWidget/JsvPosterImage.vue

@@ -1,105 +0,0 @@
-<!--
- * @file
- *
- * 【模块 export 内容】
- * JsvPosterImage：Vue高阶组件，海报描画，可设置color space 和 texture size
- *  props说明:
- *      style    {Object}   包含left/top/width/height/border-radius的style设置
- *      colorSpace {String} 颜色空间，调整其他颜色空间可以节省内存，默认RGBA_8888
- *      imageCompress {boolean} 是否压缩图片, 默认打开
- *      src {string}        图片的加载地址
- *      fadeIn: {boolean}   图片加载完成是否有淡入效果，默认为打开
- *      isPosterImage:      标识是否用于海报位，对于海报位的内容，可以有下载线程控制等策略来优化整体体验
- *      enableAA: {boolean} 启用非全局的抗锯齿处理，不过这个处理会使绘制的矩形比原尺寸每边少2~3像素点
--->
-
-<script setup>
-import { reactive, watchEffect, computed, shallowRef } from "vue";
-import { JsvPerformance } from "../JsViewVueTools/JsvPerformance.ts";
-
-const props = defineProps({
-  colorSpace: {
-    type: String,
-    default: "RGBA_8888",
-  },
-  imageCompress: {
-    type: Boolean,
-    default: true,
-  },
-  isPosterImage: {
-    type: Boolean,
-    default: true,
-  },
-  fadeIn: {
-    type: Boolean,
-    default: true,
-  },
-  src: {
-    type: String,
-    default: null,
-  },
-  enableAA: {
-    type: Boolean,
-    default: false,
-  },
-  style: Object,
-});
-
-const scaleddown = computed(() => {
-  return props.imageCompress ? "true" : "false";
-});
-
-const isPosterImage = computed(() => {
-  return JsvPerformance.getPosterSingleThreadDecode() || props.isPosterImage
-    ? "true"
-    : "false";
-});
-
-let common_style = reactive({});
-let image_style = reactive({});
-let rEnableAA = shallowRef("0");
-
-watchEffect(() => {
-  if (props.style) {
-    // 提取left, top, width, height, 并去掉干扰项 backgroundImage backgroundColor(会引起同位置重复图片绘制)
-    let {
-      left,
-      top,
-      width,
-      height,
-      transformStyle,
-      backgroundImage,
-      backgroundColor,
-      ...others
-    } = props.style;
-
-    // 承接x,y偏移和动画设置, 规避默认淡出动画被影响
-    common_style.left = left;
-    common_style.top = top;
-    common_style.transformStyle = transformStyle;
-
-    image_style.width = width;
-    image_style.height = height;
-    Object.assign(image_style, others);
-  }
-  rEnableAA.value = props.enableAA ? "1" : "0";
-});
-</script>
-
-<template>
-  <div :style="common_style">
-    <slot />
-    <img
-      v-if="!!props.src"
-      :data-jsv-vw-enable-fade="props.fadeIn"
-      data-jsv-vw-mask-poster-on-top="true"
-      :data-jsv-img-scaledown-tex="scaleddown"
-      :data-jsv-img-color-space="colorSpace"
-      :data-jsv-img-poster-image="isPosterImage"
-      :data-jsv-img-enable-aa="rEnableAA"
-      :style="image_style"
-      :src="props.src"
-      v-bind="$attrs"
-    />
-  </div>
-</template>