@shijiu/jsview-vue 2.3.0 → 2.3.728-alpha.0

package/utils/JsViewVueWidget/JsvTouchModeSwitcher.vue

@@ -7,6 +7,7 @@
  *          width       {number}   宽
  *          height      {number}   高
  *          initMode    {number}   初始模式, 1:按键, 2:触控, 默认为1
+ *          changeModeKeyList {array}   切换模式的按键列表, 默认为四个方向键
  *      methods:
  *          registerCallback: (callback: (mode: number) => void) => void
               注册回调
@@ -14,12 +15,22 @@
               注销回调
  *          getInteractiveMode: () => number
               获取当前的交互模式. 1:按键, 2:触控    
+            changeMode: (mode: "key" | "touch") => void
+              切换交互模式
  *      注意:
  *          在MetroWidget的item中,如需监听交互模式变动, 为了避免过多回调, 一般在onFocus中注册, 在onBlur中注销          
  * 
 -->
 <script setup>
-import { shallowRef, onMounted } from "vue";
+import { shallowRef, onMounted, watch, onBeforeUnmount } from "vue";
+import {
+  KEY_MODE,
+  TOUCH_MODE,
+  JsvInteractionMode,
+  jsvTouchModeSwitcherCreate,
+  jsvTouchModeSwitcherDestroy,
+} from "../JsViewVueTools/JsvInteractionMode";
+
 const props = defineProps({
   width: {
     type: Number,
@@ -29,13 +40,15 @@ const props = defineProps({
   },
   initMode: {
     type: Number,
-    default: 1,
+    default: KEY_MODE,
+  },
+  changeModeKeyList: {
+    type: Array,
+    default: () => [37, 38, 39, 40],
   },
 });
 
-const KEY_MODE = 1;
-const TOUCH_MODE = 2;
-let mode = props.initMode;
+jsvTouchModeSwitcherCreate();
 let callbacks = [];
 const divRef = shallowRef();
 const registerCallback = (callback) => {
@@ -46,22 +59,35 @@ const unregisterCallback = (callback) => {
   callbacks = callbacks.filter((i) => i !== callback);
 };
 const getInteractiveMode = () => {
-  return mode;
+  return JsvInteractionMode.value;
 };
 
+watch(JsvInteractionMode, (newMode) => {
+  for (let c of callbacks) {
+    c(newMode);
+  }
+});
+
 const updateMode = (m) => {
-  let preMode = mode;
-  mode = m;
-  if (preMode !== mode) {
-    for (let c of callbacks) {
-      c(mode);
-    }
+  if (JsvInteractionMode.value === m) {
+    return;
   }
+  if (m == KEY_MODE) {
+    window.JsView?.changeInteractionMode?.("touch", "key");
+  } else if (m == TOUCH_MODE) {
+    window.JsView?.changeInteractionMode?.("key", "touch");
+  }
+  JsvInteractionMode.value = m;
 };
 
 const onDispatchKeyDown = (ev) => {
-  if (ev.keyCode == 37 || ev.keyCode == 38 || ev.keyCode == 39 || ev.keyCode == 40) {
-    updateMode(KEY_MODE);
+  //只有在上下左右键切换为KEY_MODE
+  if (props.changeModeKeyList.includes(ev.keyCode)) {
+    //转变模式的第一次按键不传递
+    if (JsvInteractionMode.value === TOUCH_MODE) {
+      updateMode(KEY_MODE);
+      return true;
+    }
   }
   return false;
 };
@@ -76,10 +102,25 @@ onMounted(() => {
   });
 });
 
+onBeforeUnmount(() => {
+  jsvTouchModeSwitcherDestroy();
+});
+
+const changeMode = (mode) => {
+  if (mode == "key") {
+    updateMode(KEY_MODE);
+  } else if (mode == "touch") {
+    updateMode(TOUCH_MODE);
+  } else {
+    console.error("unknown interaction mode", mode);
+  }
+};
+
 defineExpose({
   registerCallback,
   unregisterCallback,
   getInteractiveMode,
+  changeMode,
 });
 </script>
 <template>
@@ -90,6 +131,7 @@ defineExpose({
   >
     <div
       ref="divRef"
+      :data-jsv-vw-touch-anchor="true"
       :style="{
         width: width,
         height: height,

package/utils/JsViewVueWidget/JsvVisibleSensor/JsvVisibleSensor.vue

@@ -93,14 +93,14 @@ watchEffect(() => {
     let horizon = fixAreaValue(props.horizonShown);
     let vertical = fixAreaValue(props.verticalShown);
 
-    sensorRef.ResetArea({ horizon, vertical });
+    sensorRef?.ResetArea({ horizon, vertical });
   }
 });
 
 // 变更enable状态
 watchEffect(() => {
   if (viewMounted.status) {
-    sensorRef.Enable(props.enable);
+    sensorRef?.Enable(props.enable);
   }
 });
 
@@ -112,12 +112,12 @@ watchEffect(() => {
 
       let jsv_main_view_ref = toRaw(props.container).jsvGetProxyView();
       if (jsv_main_view_ref) {
-        sensorRef.ResetContainer(jsv_main_view_ref);
+        sensorRef?.ResetContainer(jsv_main_view_ref);
       } else {
         console.error("Error: container is NOT a div");
       }
     } else {
-      sensorRef.ResetContainer(null); // 无container
+      sensorRef?.ResetContainer(null); // 无container
     }
   }
 });
@@ -144,14 +144,16 @@ onMounted(() => {
 });
 
 onActivated(() => {
-  sensorRef.Enable(props.enable);
+  // 疑问：发现有的场景在onMounted前就触发onActivated，导致sensorRef为null，导致报错
+  sensorRef?.Enable(props.enable);
 });
 
 onDeactivated(() => {
   if (newH || newV) {
     visibleChange(newH, false, newV, false);
   }
-  sensorRef.Enable(false);
+  // 疑问：发现有的场景在onMounted前就触发onActivated，导致sensorRef为null，导致报错
+  sensorRef?.Enable(false);
 });
 
 // 外部方法

package/utils/JsViewVueWidget/TypesDiv/JsvPosterDiv.vue

@@ -0,0 +1,54 @@
+<!--
+ * @file
+ *
+ * 【模块 export 内容】
+ * JsvPosterDiv：Vue高阶组件，海报描画, 其字内容为占位图
+ *  props说明:
+ *      style    {Object}   包含
+ *                          left/top/width/height
+ *                          border-radius
+ *                          backgroundImage/backgroundColor 
+ *                          的style设置
+ *      fadeIn: {boolean}   图片加载完成是否有淡入效果，默认为打开(和JsvSmartDiv不同)
+ *      enableAA: {boolean} 启用非全局的抗锯齿处理，不过这个处理会使绘制的矩形比原尺寸每边少2~3像素点
+ *      altImages: {Array<string>}       AB图片地址组, 当非null时, style中的backgroundImage/backgroundColor将被忽略, 
+ *                                       string内容必须是url(), 或者直接import, 或者rgba(x,x,x,x)格式, 或者#RRGGBBAA格式
+ *      altIndex: {number}             AB图片索引, 当altImages不为null时, 有效, 默认为0
+-->
+<script setup>
+import JsvSmartDiv from "./JsvSmartDiv.vue";
+
+const props = defineProps({
+  style: Object,
+  fadeIn: {
+    type: Boolean,
+    default: true,
+  },
+  enableAA: {
+    type: Boolean,
+    default: false,
+  },
+  altImages: {
+    type: Array,
+    default: null,
+  },
+  altIndex: {
+    type: Number,
+    default: 0,
+  },
+});
+
+</script>
+
+<template>
+  <jsv-smart-div
+    :style="style"
+    :fadeIn="fadeIn"
+    :enableAA="enableAA"
+    :altImages="altImages"
+    :altIndex="altIndex"
+    v-bind="$attrs"
+  >
+    <slot />
+  </jsv-smart-div>
+</template>

package/utils/JsViewVueWidget/TypesDiv/JsvPosterImage.vue

@@ -0,0 +1,88 @@
+<!--
+ * @file
+ *
+ * 【模块 export 内容】
+ * JsvPosterImage：Vue高阶组件，可配置默认背景图(通过slot), 支持AB图片切换, 可设置color space 和 texture size
+ *  props说明:
+ *      style    {Object}   包含left/top/width/height/border-radius的style设置
+ *      colorSpace {String} 颜色空间，调整其他颜色空间可以节省内存，默认RGBA_8888
+ *      imageCompress {boolean} 是否压缩图片, 默认打开(和JsvSmartImage不同)
+ *      src {string}        图片的加载地址
+ *      fadeIn: {boolean}   图片加载完成是否有淡入效果，默认为打开(和JsvSmartImage不同)
+ *      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 JsvSmartImage from "./JsvSmartImage.vue";
+
+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,
+  syncDraw: {
+    type: Boolean,
+    default: false,
+  },
+  altImages: {
+    type: Array,
+    default: null,
+  },
+  altIndex: {
+    type: Number,
+    default: 0,
+  },
+  altSync: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+</script>
+
+<template>
+  <jsv-smart-image
+    :colorSpace="colorSpace"
+    :imageCompress="imageCompress"
+    :isPosterImage="isPosterImage"
+    :fadeIn="fadeIn"
+    :src="src"
+    :enableAA="enableAA"
+    :style="style"
+    :syncDraw="syncDraw"
+    :altImages="altImages"
+    :altIndex="altIndex"
+    :altSync="altSync"
+    v-bind="$attrs"
+  >
+    <slot />
+  </jsv-smart-image>
+</template>

package/utils/JsViewVueWidget/TypesDiv/JsvSmartDiv.vue

@@ -0,0 +1,177 @@
+<!--
+ * @file
+ *
+ * 【模块 export 内容】
+ * JsvPosterDiv：Vue高阶组件，海报描画, 其字内容为占位图
+ *  props说明:
+ *      style    {Object}   包含
+ *                          left/top/width/height
+ *                          border-radius
+ *                          backgroundImage/backgroundColor 
+ *                          的style设置
+ *      fadeIn: {boolean}   图片加载完成是否有淡入效果，默认为关闭
+ *      enableAA: {boolean} 启用非全局的抗锯齿处理，不过这个处理会使绘制的矩形比原尺寸每边少2~3像素点, 默认为关闭
+ *      altImages: {Array<string>}       AB图片地址组, 当非null时, style中的backgroundImage/backgroundColor将被忽略, 
+ *                                       string内容必须是url(), 或者直接import, 或者rgba(x,x,x,x)格式, 或者#RRGGBBAA格式
+ *      altIndex: {number}             AB图片索引, 当altImages不为null时, 有效, 默认为0
+-->
+<script setup>
+import { reactive, watch, watchEffect, computed, shallowRef, toRaw } from "vue";
+
+const props = defineProps({
+  style: Object,
+  fadeIn: {
+    type: Boolean,
+    default: false,
+  },
+  enableAA: {
+    type: Boolean,
+    default: false,
+  },
+  altImages: {
+    type: Array,
+    default: null,
+  },
+  altIndex: {
+    type: Number,
+    default: 0,
+  },
+});
+
+let rCommonStyle = reactive({});
+let rEnableAA = shallowRef("0");
+
+let rImageSetList = shallowRef([]);
+let vImageListLengthCache = 0;
+
+const rebuildImageStyleList = (
+  width,
+  height,
+  background_image,
+  background_color,
+  others
+) => {
+  let image_list_length = 1;
+  let image_src_array = toRaw(props.altImages);
+
+  if (image_src_array && image_src_array.length > 0) {
+    image_list_length = image_src_array.length;
+  } else {
+    // 有线backgroundImage, 然后再选用background_color
+    image_src_array = [background_image ? background_image : background_color];
+  }
+
+  if (vImageListLengthCache !== image_list_length) {
+    vImageListLengthCache = image_list_length;
+    rImageSetList.value = Array.from({ length: image_list_length }, () => ({
+      key: null,
+      style: shallowRef({}),
+    }));
+  }
+
+  let image_set_list_raw = toRaw(rImageSetList.value);
+  image_set_list_raw.forEach((image_set, i) => {
+    // style设置
+    image_set.style.value.width = width;
+    image_set.style.value.height = height;
+    Object.assign(image_set.style.value, others);
+
+    // src设置
+    // 简化识别：以 # 或 rgb 开头为 color 类型，否则为 backgroundImage
+    let src_info = image_src_array[i];
+    if (typeof src_info === "string") {
+      if (src_info.startsWith("#") || src_info.startsWith("rgb")) {
+        image_set.style.value.backgroundColor = src_info;
+      } else {
+        image_set.style.value.backgroundImage = src_info;
+      }
+    } else {
+      image_set.style.value.backgroundColor = null;
+      image_set.style.value.backgroundImage = null;
+    }
+    image_set.src = src_info;
+  });
+};
+
+let vStyleWidthCache = 0;
+let vStyleHeightCache = 0;
+let vStyleOthersCache = null;
+
+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;
+
+    vStyleWidthCache = width;
+    vStyleHeightCache = height;
+    vStyleOthersCache = others;
+    rebuildImageStyleList(width, height, backgroundImage, backgroundColor, others);
+  }
+};
+
+watch(
+  () => props.style,
+  () => {
+    rebuildStyle();
+  }
+);
+
+watch(
+  () => props.altImages,
+  () => {
+    rebuildImageStyleList(vStyleWidthCache, vStyleHeightCache, vStyleOthersCache);
+  }
+);
+
+// 第一次进行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;
+});
+</script>
+
+<template>
+  <div :style="rCommonStyle">
+    <slot />
+    <div
+      v-if="rImageSetList.length > 1 || rImageSetList[0].src"
+      :data-jsv-vw-mask-poster-on-top="true"
+    >
+      <div
+        v-for="(div_set, idx) in rImageSetList"
+        :key="div_set.src"
+        :data-jsv-vw-enable-fade="props.fadeIn"
+        :style="div_set.style.value"
+        :data-jsv-img-enable-aa="rEnableAA"
+        :data-jsv-vw-hide-keep="rActiveIndex !== idx ? 'true' : 'false'"
+        v-bind="$attrs"
+      />
+    </div>
+  </div>
+</template>