@shijiu/jsview-vue 2.1.25 → 2.1.200

package/utils/JsViewVueWidget/JsvPreload/JsvPreload.vue

@@ -34,17 +34,14 @@
  *        net_setting {object}:  (未实现)网络加载参数，cookie, refer等，默认值 null
  -->
 <script>
-import { Forge } from "@shijiu/jsview/dom/jsv-forge-define";
-import ForgeHandles from "../../JsViewVueTools/ForgeHandles";
-import { watch, ref } from "vue";
-
 const CONST_FORMAT_TOKEN = "_JsvP_";
 const buildPreloadInfo = (
   url,
   width = 0,
   height = 0,
   color_type = "RGBA_8888",
-  net_setting = null
+  net_setting = null,
+  is_poster_img
 ) => {
   return {
     url,
@@ -53,6 +50,7 @@ const buildPreloadInfo = (
     colorType: color_type,
     netSetting: net_setting,
     magicToken: CONST_FORMAT_TOKEN, // 用于格式校验
+    isPosterImage: is_poster_img ?? false,
   };
 };
 
@@ -66,297 +64,302 @@ const buildDownloadInfo = (url, net_setting = null, get_image_size) => {
 };
 
 export { buildPreloadInfo, buildDownloadInfo };
+</script>
+<script setup>
+import { Forge } from "@shijiu/jsview/dom/jsv-forge-define";
+import ForgeHandles from "../../JsViewVueTools/ForgeHandles";
+import { reactive, onBeforeUnmount, watchEffect } from "vue";
 
-export default {
-  props: {
-    preloadList: Object,
-    downloadList: Object,
-    onPreloading: Function,
-    onPreloadDone: Function,
-    onDownloadDone: Function,
-  },
-  setup() {
-    return {
-      preloadViewList: [],
-      downloadViewList: [],
-      preloadStateList: [],
-      downloadStateList: [],
-      downloadResultMap: {},
-      preloadResultMap: {},
-      CONST_FORMAT_TOKEN: "_JsvP_",
-      preloadIsNullNum: 0, // 纪录传入的preload为null的数量，由于vue不支持在子组件修改props值，所有在删除值为null时，需要++，这样才能保证与传入数据的length相等从而触发回调
-    };
-  },
-  data() {
-    return {
-      preloadToken: 1,
-      downloadToken: 1,
-    };
-  },
-  methods: {
-    _releasePreloadView() {
-      if (window.JsView) {
-        if (this.preloadViewList.length > 0) {
-          for (const view_info of this.preloadViewList) {
-            if (view_info) {
-              // 当预加载url为null时view_info为null
-              const id = view_info.viewId;
-              view_info.textureRef?.DisableBackgroundLoad();
-              view_info.textureRef?.UnregisterLoadImageCallback(
-                view_info.callToken
-              );
-              Forge.sViewStore.remove(id);
-            }
-          }
-        }
-        this.preloadViewList = [];
-        this.preloadStateList = [];
-      }
-    },
-    _releaseDownloadView() {
-      if (window.JsView) {
-        if (this.downloadViewList.length > 0) {
-          for (const view_info of this.downloadViewList) {
-            if (view_info) {
-              // 当预加载url为null时view_info为null
-              const id = view_info.viewId;
-              view_info.textureRef?.DisableBackgroundLoad();
-              view_info.textureRef?.UnregisterLoadImageCallback(
-                view_info.callToken
-              );
-              Forge.sViewStore.remove(id);
-            }
-          }
-        }
-      }
-      this.downloadViewList = [];
-      this.downloadStateList = [];
-    },
-    _releaseForgeView() {
-      this._releasePreloadView();
-      this._releaseDownloadView();
-    },
+const CONST_FORMAT_TOKEN = "_JsvP_";
 
-    _checkPreload() {
-      let loadedNum = 0;
-      this.preloadStateList.forEach((state) => {
-        loadedNum = state ? ++loadedNum : loadedNum;
-      });
-      if (this.onPreloading) {
-        this.onPreloading(loadedNum / this.preloadStateList.length);
-      }
-      if (
-        this.onPreloadDone &&
-        loadedNum === this.preloadStateList.length - this.preloadIsNullNum
-      ) {
-        this.onPreloadDone(this.preloadResultMap);
-      }
-    },
+const props = defineProps({
+  preloadList: Object,
+  downloadList: Object,
+  onPreloading: Function,
+  onPreloadDone: Function,
+  onDownloadDone: Function,
+})
+const loadViewList = reactive({
+  preloadViewList: [],
+  downloadViewList: []
+})
+let preloadStateList = [];
+let downloadStateList = [];
+let downloadResultMap = {};
+let preloadResultMap = {};
 
-    _getPreloadViewIdList() {
-      if (!this.preloadList) {
-        return;
-      }
-      this.preloadStateList = new Array(this.preloadList.length).fill(false);
-      // 直接在map前将为null的值删除掉
-      let preloadListData = this.preloadList;
-      for (let i = 0; i < preloadListData.length; i++) {
-        if (!preloadListData[i]) {
-          preloadListData.splice(i, 1);
-          this.preloadIsNullNum++;
-        }
-      }
-      this.preloadViewList = preloadListData.map((item, index) => {
-        if (item.magicToken !== this.CONST_FORMAT_TOKEN) {
-          console.error(
-            "Error:format mismatch, data should comes from function buildPreloadInfo()"
-          );
-        }
-        const base_url = item.url;
-        let image_url = base_url;
-        if (base_url && base_url.indexOf("http") < 0) {
-          // 包含http和https两种请求
-          if (window.JsView.Dom.UrlRef) {
-            image_url = new window.JsView.Dom.UrlRef(base_url).href;
-          }
-        }
-        let target_size = null;
-        if (item.width !== 0 && item.height !== 0) {
-          target_size = { width: item.width, height: item.height };
-        }
-        let texture = null;
-        if (
-          image_url &&
-          (image_url.toLowerCase().indexOf(".webp") >= 0 ||
-            image_url.toLowerCase().indexOf(".gif") >= 0)
-        ) {
-          texture = ForgeHandles.TextureManager.GetGifImage(image_url, false);
-        } else {
-          texture = ForgeHandles.TextureManager.GetImage2(
-            image_url,
-            false,
-            target_size,
-            item.colorType
+// 记录传入的preload为null的数量，由于vue不支持在子组件修改props值，所有在删除值为null时，需要++，这样才能保证与传入数据的length相等从而触发回调
+let preloadIsNullNum = 0;
+let downloadIsNullNum = 0;
+
+let preloadToken = 1;
+let downloadToken = 1;
+
+const _releasePreloadView = () => {
+  if (window.JsView) {
+    if (loadViewList.preloadViewList.length > 0) {
+      for (const view_info of loadViewList.preloadViewList) {
+        if (view_info) {
+          // 当预加载url为null时view_info为null
+          const id = view_info.viewId;
+          view_info.textureRef?.DisableBackgroundLoad();
+          view_info.textureRef?.UnregisterLoadImageCallback(
+            view_info.callToken
           );
+          Forge.sViewStore.remove(id);
         }
-        if (!texture) {
-          console.error(
-            "Error: Preload view build texture failed for " + image_url
+      }
+    }
+    loadViewList.preloadViewList = [];
+    preloadStateList = [];
+  }
+}
+const _releaseDownloadView = () => {
+  if (window.JsView) {
+    if (loadViewList.downloadViewList.length > 0) {
+      for (const view_info of loadViewList.downloadViewList) {
+        if (view_info) {
+          // 当预加载url为null时view_info为null
+          const id = view_info.viewId;
+          view_info.textureRef?.DisableBackgroundLoad();
+          view_info.textureRef?.UnregisterLoadImageCallback(
+            view_info.callToken
           );
-          this.preloadStateList[index] = true; // 无法创建texture的图片先认为加载完成
-          return;
+          Forge.sViewStore.remove(id);
         }
-        const callback_token = texture.RegisterLoadImageCallback(
-          null,
-          (params) => {
-            console.log(`preload succeed ${image_url}`, params);
-            this.preloadStateList[index] = true;
-            this.preloadResultMap[item.url] = {
-              width: params.width,
-              height: params.height,
-            };
-            console.log(`preload succeed ${item.url}, params:${params}`);
-            this._checkPreload();
-          }
-        );
-        texture.EnableBackgroundLoad();
-        const texture_setting = new Forge.ExternalTextureSetting(texture);
-        const preload_view = new Forge.PreloadView(texture_setting);
-        return {
-          viewId: Forge.sViewStore.add(new Forge.ViewInfo(preload_view)),
-          textureRef: texture,
-          callToken: callback_token,
-        };
-      });
-    },
-
-    _checkDownload() {
-      for (const state of this.downloadStateList) {
-        if (!state) return;
-      }
-      if (this.$props.onDownloadDone) {
-        this.$props.onDownloadDone(
-          this.downloadStateList,
-          this.downloadResultMap
-        );
       }
-    },
+    }
+  }
+  loadViewList.downloadViewList = [];
+  downloadStateList = [];
+}
+const _releaseForgeView = () => {
+  _releasePreloadView();
+  _releaseDownloadView();
+}
 
-    _getDownloadViewIdList() {
-      if (!this.downloadList) {
-        return;
+const _checkPreload = () => {
+  let loadedNum = 0;
+  preloadStateList.forEach((state) => {
+    loadedNum = state ? ++loadedNum : loadedNum;
+  });
+  if (props.onPreloading) {
+    props.onPreloading(loadedNum / preloadStateList.length);
+  }
+  if (
+    props.onPreloadDone &&
+    loadedNum === preloadStateList.length - preloadIsNullNum
+  ) {
+    props.onPreloadDone(preloadResultMap);
+  }
+}
+
+const _getPreloadViewIdList = () => {
+  if (!props.preloadList) {
+    return;
+  }
+  preloadStateList = new Array(props.preloadList.length).fill(false);
+  // 直接在map前将为null的值删除掉
+  let preloadListData = props.preloadList;
+  for (let i = 0; i < preloadListData.length; i++) {
+    if (!preloadListData[i] || !preloadListData[i].url) {
+      preloadListData.splice(i, 1);
+      preloadIsNullNum++;
+      i--;
+    }
+  }
+  loadViewList.preloadViewList = preloadListData.map((item, index) => {
+    if (item.magicToken !== CONST_FORMAT_TOKEN) {
+      console.error(
+        "Error:format mismatch, data should comes from function buildPreloadInfo()"
+      );
+    }
+    const base_url = item.url;
+    let image_url = base_url;
+    if (base_url && base_url.indexOf("http") < 0) {
+      // 包含http和https两种请求
+      if (window.JsView.Dom.UrlRef) {
+        image_url = new window.JsView.Dom.UrlRef(base_url).href;
       }
-      // 直接在map前将url为null的值清除掉
-      let downloadListData = this.downloadList;
-      for (let i = 0; i < downloadListData.length; i++) {
-        if (!downloadListData[i].url) {
-          downloadListData.splice(i, 1);
-        }
+    }
+    let target_size = null;
+    if (item.width !== 0 && item.height !== 0) {
+      target_size = { width: item.width, height: item.height };
+    }
+    let texture = null;
+    if (
+      image_url &&
+      (image_url.toLowerCase().indexOf(".webp") >= 0 ||
+        image_url.toLowerCase().indexOf(".gif") >= 0)
+    ) {
+      texture = ForgeHandles.TextureManager.GetGifImage(image_url, false);
+    } else {
+      texture = ForgeHandles.TextureManager.GetImage2(
+        image_url,
+        false,
+        target_size,
+        item.colorType,
+        item.netSetting ?? "",
+        item.isPosterImage
+      );
+    }
+    if (!texture) {
+      console.error(
+        "Error: Preload view build texture failed for " + image_url
+      );
+      preloadStateList[index] = true; // 无法创建texture的图片先认为加载完成
+      return;
+    }
+    const callback_token = texture.RegisterLoadImageCallback(
+      null,
+      (params) => {
+        console.log(`preload succeed ${image_url}`, params);
+        preloadStateList[index] = true;
+        preloadResultMap[item.url] = {
+          width: params.width,
+          height: params.height,
+        };
+        console.log(`preload succeed ${item.url}, params:${params}`);
+        _checkPreload();
       }
-      this.downloadStateList = new Array(downloadListData.length).fill(null);
-      this.downloadViewList = downloadListData.map((item, index) => {
-        if (item.magicToken !== this.CONST_FORMAT_TOKEN) {
-          console.error(
-            "Error:format mismatch, data should comes from function buildDownloadInfo()"
-          );
-        }
-        console.log(`OnDownload get${index} url=${item.url}`);
-        const base_url = item.url;
-        let image_url = base_url;
-        if (base_url && base_url.indexOf("http") < 0) {
-          // 包含http和https两种请求
-          if (window.JsView.Dom.UrlRef) {
-            image_url = new window.JsView.Dom.UrlRef(base_url).href;
-          }
-        }
-        const texture = ForgeHandles.TextureManager.GetDownloadTexture(
-          image_url,
-          null,
-          item.getImageSize
-        );
-        if (!texture) {
-          console.error(
-            "Error: Down view build texture failed for " + image_url
-          );
-          // 无法创建texture的图片先认为加载完成
-          this.downloadStateList[index] = "invalid";
-          return;
-        }
-        const callback_token = texture.RegisterLoadImageCallback(
-          null,
-          (texture_info) => {
-            console.log(`OnDownload done index${index}`);
-            this.downloadStateList[index] = texture_info.extra.absolutePath;
-            if (
-              item.getImageSize &&
-              texture_info.extra.width &&
-              texture_info.extra.height
-            ) {
-              this.downloadResultMap[texture_info.extra.absolutePath] = {
-                width: texture_info.extra.width,
-                height: texture_info.extra.height,
-              };
-            }
-            this._checkDownload();
-          }
-        );
-        texture.EnableBackgroundLoad();
-        const texture_setting = new Forge.TextureSetting(texture); // Download类型的释放跟随view一同释放
-        const preload_view = new Forge.PreloadView(texture_setting);
+    );
+    texture.EnableBackgroundLoad();
+    const texture_setting = new Forge.ExternalTextureSetting(texture);
+    const preload_view = new Forge.PreloadView(texture_setting);
+    return {
+      viewId: Forge.sViewStore.add(new Forge.ViewInfo(preload_view)),
+      textureRef: texture,
+      callToken: callback_token,
+    };
+  });
+}
 
-        return {
-          viewId: Forge.sViewStore.add(new Forge.ViewInfo(preload_view)),
-          textureRef: texture,
-          callToken: callback_token,
-        };
-      });
-    },
-  },
-  created() {
-    this._releaseForgeView();
-    this._getPreloadViewIdList();
-    this._getDownloadViewIdList();
+const _checkDownload = () => {
+  let loadedNum = 0
+  downloadStateList.forEach((state) => {
+    loadedNum = state ? ++loadedNum : loadedNum;
+  });
+  if (props.onDownloadDone && loadedNum === downloadStateList.length - downloadIsNullNum) {
+    props.onDownloadDone(
+      downloadStateList,
+      downloadResultMap
+    );
+  }
+}
 
-    watch(
-      () => this.preloadList,
-      (newValue, oldValue) => {
-        console.log("JsvPreload: update preloadList");
-        this.preloadIsNullNum = 0;
-        this._releasePreloadView();
-        this._getPreloadViewIdList();
-        this.preloadToken++;
+const _getDownloadViewIdList = () => {
+  if (!props.downloadList) {
+    return;
+  }
+  // 直接在map前将url为null的值清除掉
+  downloadStateList = new Array(props.downloadList.length).fill(null);
+  let downloadListData = props.downloadList;
+  for (let i = 0; i < downloadListData.length; i++) {
+    if (!downloadListData[i] || !downloadListData[i].url) {
+      downloadListData.splice(i, 1);
+      downloadIsNullNum++;
+      i--;
+    }
+  }
+  loadViewList.downloadViewList = downloadListData.map((item, index) => {
+    if (item.magicToken !== CONST_FORMAT_TOKEN) {
+      console.error(
+        "Error:format mismatch, data should comes from function buildDownloadInfo()"
+      );
+    }
+    console.log(`OnDownload get${index} url=${item.url}`);
+    const base_url = item.url;
+    let image_url = base_url;
+    if (base_url && base_url.indexOf("http") < 0) {
+      // 包含http和https两种请求
+      if (window.JsView.Dom.UrlRef) {
+        image_url = new window.JsView.Dom.UrlRef(base_url).href;
       }
+    }
+    const texture = ForgeHandles.TextureManager.GetDownloadTexture(
+      image_url,
+      null,
+      item.getImageSize
     );
-    watch(
-      () => this.downloadList,
-      (newValue, oldValue) => {
-        console.log("JsvPreload: update downloadList");
-        this._releaseDownloadView();
-        this._getDownloadViewIdList();
-        this.downloadToken++;
+    if (!texture) {
+      console.error(
+        "Error: Down view build texture failed for " + image_url
+      );
+      // 无法创建texture的图片先认为加载完成
+      downloadStateList[index] = "invalid";
+      return;
+    }
+    const callback_token = texture.RegisterLoadImageCallback(
+      null,
+      (texture_info) => {
+        console.log(`OnDownload done index${index}`);
+        downloadStateList[index] = texture_info.extra.absolutePath;
+        if (
+          item.getImageSize &&
+          texture_info.extra.width &&
+          texture_info.extra.height
+        ) {
+          downloadResultMap[texture_info.extra.absolutePath] = {
+            width: texture_info.extra.width,
+            height: texture_info.extra.height,
+          };
+        }
+        _checkDownload();
       }
     );
-  },
-  beforeUnmount() {
-    this._releaseForgeView();
-  },
-};
-</script>
+    texture.EnableBackgroundLoad();
+    const texture_setting = new Forge.TextureSetting(texture); // Download类型的释放跟随view一同释放
+    const preload_view = new Forge.PreloadView(texture_setting);
+
+    return {
+      viewId: Forge.sViewStore.add(new Forge.ViewInfo(preload_view)),
+      textureRef: texture,
+      callToken: callback_token,
+    };
+  });
+}
+
+
+_releaseForgeView();
+_getPreloadViewIdList();
+_getDownloadViewIdList();
+
+watchEffect(() => {
+  if (props.preloadList) {
+    console.log("JsvPreload: update preloadList");
+    preloadIsNullNum = 0;
+    _releasePreloadView();
+    _getPreloadViewIdList();
+    preloadToken++;
+  }
+})
+watchEffect(() => {
+  if (props.downloadList) {
+    console.log("JsvPreload: update downloadList");
+    downloadIsNullNum = 0
+    _releaseDownloadView();
+    _getDownloadViewIdList();
+    downloadToken++;
+  }
+})
 
+onBeforeUnmount(() => {
+  _releaseForgeView();
+})
+
+
+</script>
+  
 <template>
   <div>
     <div :key="'preload_' + preloadToken">
-      <div v-for="item in preloadViewList" :key="item.viewId" :id="item.viewId">
+      <div v-for="item in loadViewList.preloadViewList" :key="item.viewId" :id="item.viewId">
         <div v-if="item.viewId" :data-jsv-vw-innerview="item.viewId"></div>
       </div>
     </div>
 
     <div :key="'download_' + downloadToken">
-      <div
-        v-for="item in downloadViewList"
-        :key="item.viewId"
-        :id="item.viewId"
-      >
+      <div v-for="item in loadViewList.downloadViewList" :key="item.viewId" :id="item.viewId">
         <div v-if="item.viewId" :data-jsv-vw-innerview="item.viewId"></div>
       </div>
     </div>