@shijiu/jsview-vue 2.1.200 → 2.1.340-test.0

package/utils/JsViewVueWidget/JsvSpriteAnim/JsvSpriteLoader.vue

@@ -0,0 +1,120 @@
+<!--
+ * 【模块 export 内容】
+ *  JsvSpriteLoader: 雪碧图资源加载器
+ *      prop说明:
+ *          imageUrl: http打头的远程图片加载器
+ *          configUrl: http打头的远程configUrl文件
+ *          onConfigReady:  config文件下载完成后的回调(data, PromiseResolve)
+ *          noNeedResource: 是否需要等待imageUrl和json记载完毕后再激活子内容, 默认为false, 可设置为true
+ -->
+<script setup>
+import { shallowRef, watch } from "vue";
+import JsvPreload from "../JsvPreload";
+import { buildPreloadInfo } from "../JsvPreload";
+
+const props = defineProps({
+  imageUrl: String,
+  configUrl: String,
+  onConfigReady: Function,
+  noNeedResource: { type: Boolean, default: false },
+});
+
+// ******** 内部状态 ********
+let resetId = shallowRef(0);
+let dataReady = shallowRef(false);
+let igonreLoad = shallowRef(false);
+let preloadInfo;
+let imageResolve = null;
+let configResolve = null;
+let imagePromise = new Promise((resolve) => {
+  imageResolve = resolve;
+});
+let configPromise = new Promise((resolve) => {
+  configResolve = resolve;
+});
+let cachedProps = {
+  imageUrl: props.imageUrl,
+  noNeedResource: props.noNeedResource,
+};
+
+// ******** private function ********
+let _onPreloadDone = () => {
+  imageResolve();
+};
+
+function fetchConfig(configUrl) {
+  // TODO: 后续需要jsview支持去使用缓存
+  // 动态导入 JSON 文件
+  var xhr = new XMLHttpRequest();
+  // 配置请求，第三个参数指定请求是否异步
+  xhr.open("GET", configUrl, true);
+  xhr.onload = function () {
+    if (xhr.status >= 200 && xhr.status < 300) {
+      // 请求成功
+      var jsonData = JSON.parse(xhr.responseText);
+      props.onConfigReady(jsonData, configResolve);
+    } else {
+      // 请求失败
+      console.error("Failed to load JSON file. Status:", xhr.status);
+    }
+  };
+  xhr.onerror = function () {
+    console.error("Network error occurred");
+  };
+
+  // 发送请求
+  xhr.send();
+}
+
+let _OnReset = () => {
+  // 重置可视设置
+  dataReady.value = false;
+  igonreLoad.value = props.noNeedResource;
+
+  // preload
+  if (!props.noNeedResource && props.imageUrl) {
+    // 加载图片
+    preloadInfo = [buildPreloadInfo(props.imageUrl)];
+
+    // 获取远程数据
+    if (props.configUrl && props.onConfigReady) {
+      fetchConfig(props.configUrl);
+    } else {
+      console.log(
+        `no config: configUrlSet=${props.configUrl} func=${props.onConfigReady}`
+      );
+    }
+
+    Promise.all([imagePromise, configPromise]).then(() => {
+      dataReady.value = true;
+    });
+  }
+  cachedProps.imageUrl = props.imageUrl;
+  cachedProps.noNeedResource = props.noNeedResource;
+  resetId.value++;
+};
+
+// ******** 初始化处理 ********
+_OnReset();
+
+// 监听props变化
+watch(props, (newProps) => {
+  // 属性变化重置缓存
+  if (
+    newProps.imageUrl != cachedProps.imageUrl ||
+    cachedProps.noNeedResource != newProps.noNeedResource
+  ) {
+    console.log("SpriteLoader reset for url or needFlag changed");
+    _OnReset();
+  }
+});
+</script>
+
+<template>
+  <div id="sprite-loader" :key="resetId">
+    <jsv-preload :preloadList="preloadInfo" :onPreloadDone="_onPreloadDone" />
+    <slot v-if="dataReady || igonreLoad" />
+  </div>
+</template>
+
+<style scoped></style>

package/utils/JsViewVueWidget/JsvSpriteAnim/index.js

@@ -1,5 +1,5 @@
 import JsvSpriteAnim from "./JsvSpriteAnim.vue";
+import JsvSpriteLoader from "./JsvSpriteLoader.vue";
 import { SpriteController } from "./SpriteController.js";
 
-export default JsvSpriteAnim;
-export { SpriteController };
+export { JsvSpriteAnim, JsvSpriteLoader, SpriteController };

package/utils/JsViewVueWidget/JsvSwiper/JsvSwiper.vue

@@ -33,12 +33,12 @@
 
 <script>
 import { Forge } from "@shijiu/jsview/dom/jsv-forge-define";
-import JsvActorMove, {
-  JsvActorMoveControl,
-} from "jsview/utils/JsViewVueWidget/JsvActorMove";
-import JsvVisibleSensor from "jsview/utils/JsViewVueWidget/JsvVisibleSensor";
-import { EdgeDirection } from "../../JsViewEngineWidget/WidgetCommon";
+import { EdgeDirection } from "../../JsViewEngineWidget";
 import { ref } from "vue";
+import JsvActorMove, {
+  JsvActorMoveControl
+} from "../JsvActorMove";
+import JsvVisibleSensor from "../JsvVisibleSensor";
 
 const VIEW_NUM = 3;