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

package/utils/JsViewVueTools/JsvTextureStore/TextureBuilder.ts

@@ -0,0 +1,92 @@
+import { JsvTextureStoreApi } from "./JsvTextureStore";
+import ForgeHandles from "../../JsViewVueTools/ForgeHandles";
+
+/**
+ * CircleNinePatchTextureOptions
+ * 生成圆角九宫格纹理时的输入参数
+ *
+ * @property {number} targetCornerRadius 目标圆角半径
+ * @property {number} circleLineWidth 圆环描边宽度
+ * @property {string} [bgColor] 画布背景色，默认值: rgba(255,255,255,0)
+ * @property {string} [circleColor] 圆环描边颜色，默认值: #000000FF
+ * @property {number} [displayScale] 显示缩放比例，提高此值一提高清晰度, 
+ *                                   默认值: jsview.config.js的designMap.displayScale
+ */
+type CircleNinePatchTextureOptions = {
+  cornerRadius: number;
+  circleLineWidth: number;
+  bgColor?: string;
+  circleColor?: string;
+  displayScale?: number;
+};
+
+/**
+ * NinePatchTextureResult
+ * 圆角九宫格纹理构建结果
+ *
+ * @property {number} BorderOutset 九宫格外边距(像素)
+ * @property {number} ImageWidth 纹理图片宽度(像素)
+ * @property {number} CenterWidth 九宫格中心区域宽度(像素)
+ * @property {string} textureUrl 可用于背景图/图片src的纹理访问地址
+ */
+type NinePatchTextureResult = {
+  BorderOutset: number;
+  ImageWidth: number;
+  ImageDspWidth: number;
+  CenterWidth: number;
+  texAccessName: string;
+};
+
+/**
+ * buildCircleNinePatchTexture
+ * 生成用于 JsvNinePatch 的圆角九宫格纹理，
+ * 并返回可用于样式访问的texture URL与JsvNinePatch的参数
+ * 
+ * 特别注意!!: texAccessName 需要在不使用时使用 JsvTextureStoreApi.deleteTexture 释放资源
+ *
+ * @param {CircleNinePatchTextureOptions} options 生成圆角九宫格纹理的参数
+ * @return {NinePatchTextureResult}
+ */
+function buildCircleNinePatchTexture(
+  options: CircleNinePatchTextureOptions
+): NinePatchTextureResult {
+  const {
+    cornerRadius,
+    circleLineWidth,
+    bgColor = "rgba(255,255,255,0)", // 默认为透明白色底色
+    circleColor = "#000000FF", // 默认为黑色
+    displayScale = ForgeHandles.sRenderBridge.GetScreenInfo().scaleRatio,
+  } = options;
+  const innerRadius2 = Math.floor(cornerRadius * 2 * displayScale);
+  const innerLineWidth = Math.floor(circleLineWidth * displayScale);
+  const borderOutset = innerLineWidth + 4; // 外延4像素, 因为Canvas绘制外边缘有至少2px的过渡色以提升抗锯齿效果
+  const imageWidth = innerRadius2 + borderOutset * 2;
+  const centerWidth = 1;
+
+  const canvasRef = JsvTextureStoreApi.canvasTexture(imageWidth, imageWidth);
+  const circleRadius =
+    Math.floor(innerRadius2 / 2) + Math.floor(innerLineWidth / 2);
+  const circlePath = canvasRef.circlePath(
+    Math.floor(imageWidth / 2),
+    Math.floor(imageWidth / 2),
+    circleRadius
+  );
+
+  canvasRef.drawColor(bgColor);
+  circlePath?.stroke(innerLineWidth, circleColor);
+
+  const sourceId = String(canvasRef.commit());
+  return {
+    BorderOutset: borderOutset,
+    ImageWidth: imageWidth,
+    ImageDspWidth: Math.floor(imageWidth / displayScale),
+    CenterWidth: centerWidth,
+    texAccessName: sourceId,
+  };
+}
+
+const TextureBuilder = {
+  buildCircleNinePatchTexture,
+};
+
+export default TextureBuilder;

package/utils/JsViewVueTools/JsvTextureStore/index.js

@@ -0,0 +1,2 @@
+export * from "./JsvTextureStore";
+export { default as JsvTextureBuilder } from "./TextureBuilder";

package/utils/JsViewVueTools/index.js

@@ -20,7 +20,7 @@ export * from "./JsvTextTools";
 export * from "./JsvPreDownloader"
 export { default as DefaultKeyCodeMap } from "./DefaultKeyMap";
 export * from "./JsvPerformance"
-export * from "./JsvTextureStore/JsvTextureStore"
+export * from "./JsvTextureStore"
 export * from "./JsvTextureDefines"
 export * from "./JsvFederationTools"
 export * from "./ConstSymbol"
@@ -28,3 +28,5 @@ export * from "./ForgeConstDefine"
 export * from "./TextureManagerTools"
 export * from "./FeatureActive"
 export * from "./JsvTextureLoadTool"
+export * from "./JsvInteractionMode"
+export {default as BlobApi} from "./BlobApi"

package/utils/JsViewVueWidget/JsvApic/JsvApic2/JsvApic2.vue

@@ -14,6 +14,9 @@
  *      prop说明:
  *          src {string} 对应img标签的src, 传url时需要注意使用url([链接])
  *          style {object} 对应img标签的style
+ *          onStart 开始播放回调
+ *          onEnd 结束播放回调
+ *          onLoad 加载完成回调
  *      通过ref=拿到句柄后，可调用的方法:
  *          stop(): 停止播放
  *          show(): 显示某一帧
@@ -29,9 +32,10 @@
  *              播放结束后的状态: ApicEndState.HIDE 隐藏
  *                             ApicEndState.LAST_FRAME 保持最后一帧
 -->
-<script>
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from "vue";
 import ForgeHandles from "../../../JsViewVueTools/ForgeHandles";
-// import { LoopType } from "../JsvCommonLoopToolBase";
+import { ApicEndState } from "../JsvCommonLoopToolBase";
 
 //为了打包后少加载一个文件这里单独定义
 const LoopType = {
@@ -42,99 +46,120 @@ const LoopType = {
   LOOP_SINGLE: 4,
 };
 
-export default {
-  props: {
-    src: String,
-    style: Object,
-    onStart: Function,
-    onEnd: Function,
-    onLoad: Function,
+const props = defineProps({
+  src: String,
+  style: Object,
+  onStart: {
+    type: Function,
   },
-  setup() {
-    return {
-      element: {},
-    };
+  onEnd: {
+    type: Function,
   },
-  data() {
-    return {
-      onStartId: -1,
-      onEndId: -1,
-    };
-  },
-  methods: {
-    show(frameIndex = 0) {
-      if (!isNaN(frameIndex)) {
-        this.play(LoopType.LOOP_SINGLE, [[0, frameIndex, 0]]);
-      }
-    },
-    play(loopType, loopInfo, endState) {
-      let params = {
-        LT: loopType,
-        ES: endState,
-      };
-      if (loopInfo instanceof Array) {
-        //[[循环次数1,循环开始帧1,循环结束帧1], [循环次数2,循环开始帧2,循环结束帧2], ...]
-        params.LI = loopInfo;
-      } else if (!isNaN(loopInfo)) {
-        params.LI = [[loopInfo, 0, 0]];
-      } else {
-        params.LI = [[0, 0, 0]];
-      }
-      if (this.$refs.element) {
-        let mainViewTexture = this.$refs.element.jsvGetProxyTexture(
-          ForgeHandles.TextureManager
-        );
+  onLoad: Function,
+});
 
-        mainViewTexture.DispatchCommand(
-          Forge.NativeConstant.APIC_PLAY,
-          JSON.stringify(params)
-        );
-        mainViewTexture.unregisterOnStart(this.onStartId);
-        if (this.onStart) {
-          this.onStartId = mainViewTexture.registerOnStart(this.onStart);
-        }
-        mainViewTexture.unregisterOnEnd(this.onEndId);
-        if (this.onEnd) {
-          this.onEndId = mainViewTexture.registerOnEnd(this.onEnd);
-        }
-      }
-    },
-    stop(frameCount = -1) {
-      if (this.$refs.element) {
-        let mainViewTexture = this.$refs.element.jsvGetProxyTexture(
-          ForgeHandles.TextureManager
-        );
-        mainViewTexture.DispatchCommand(Forge.NativeConstant.APIC_STOP, `{"TF":${frameCount}}`);
-      }
-    },
-  },
-  mounted() {
-    if (this.onLoad) {
-      if (this.$refs.element) {
-        let mainViewTexture = this.$refs.element.jsvGetProxyTexture(
-          ForgeHandles.TextureManager
-        );
-        mainViewTexture.RegisterLoadImageCallback(null, this.onLoad, null);
-      }
+const element = ref(null);
+const onStartId = ref(-1);
+const onEndId = ref(-1);
+
+const show = (frameIndex = 0) => {
+  if (element.value) {
+    let mainViewTexture = element.value.jsvGetProxyTexture(
+      ForgeHandles.TextureManager
+    );
+
+    mainViewTexture.DispatchCommand(
+      Forge.NativeConstant.APIC_SHOW_FRAME,
+      JSON.stringify({
+        index: frameIndex,
+      })
+    );
+  }
+};
+
+const play = (loopType, loopInfo, endState, onstart = null, onend = null) => {
+  let params = {
+    LT: loopType,
+    ES: endState,
+  };
+  if (loopInfo instanceof Array) {
+    //[[循环次数1,循环开始帧1,循环结束帧1], [循环次数2,循环开始帧2,循环结束帧2], ...]
+    params.LI = loopInfo;
+  } else if (!isNaN(loopInfo)) {
+    params.LI = [[loopInfo, 0, 0]];
+  } else {
+    params.LI = [[0, 0, 0]];
+  }
+  if (element.value) {
+    let mainViewTexture = element.value.jsvGetProxyTexture(
+      ForgeHandles.TextureManager
+    );
+
+    mainViewTexture.DispatchCommand(
+      Forge.NativeConstant.APIC_PLAY,
+      JSON.stringify(params)
+    );
+    mainViewTexture.unregisterOnStart(onStartId.value);
+    onStartId.value = -1;
+    let onStart = onstart || props.onStart;
+    if (onStart) {
+      onStartId.value = mainViewTexture.registerOnStart(onStart);
     }
-  },
-  beforeUnmount() {
-    this.stop(0);
-    if (this.$refs.element) {
-      let mainViewTexture = this.$refs.element.jsvGetProxyTexture(
+    mainViewTexture.unregisterOnEnd(onEndId.value);
+    onEndId.value = -1;
+    let onEnd = onend || props.onEnd;
+    if (onEnd) {
+      onEndId.value = mainViewTexture.registerOnEnd(onEnd);
+    }
+  }
+};
+
+const stop = (frameCount = -1) => {
+  if (element.value) {
+    let mainViewTexture = element.value.jsvGetProxyTexture(
+      ForgeHandles.TextureManager
+    );
+    mainViewTexture.DispatchCommand(
+      Forge.NativeConstant.APIC_STOP,
+      `{"TF":${frameCount}}`
+    );
+  }
+};
+
+onMounted(() => {
+  if (props.onLoad) {
+    if (element.value) {
+      let mainViewTexture = element.value.jsvGetProxyTexture(
         ForgeHandles.TextureManager
       );
+      mainViewTexture.RegisterLoadImageCallback(null, props.onLoad, null);
+    }
+  }
+});
 
-      if (this.onStart) {
-        mainViewTexture.unregisterOnStart(this.onStartId);
-      }
+onBeforeUnmount(() => {
+  stop(0);
+  if (element.value) {
+    let mainViewTexture = element.value.jsvGetProxyTexture(
+      ForgeHandles.TextureManager
+    );
 
-      if (this.onEnd) {
-        mainViewTexture.unregisterOnEnd(this.onEndId);
-      }
+    if (onStartId.value >= 0) {
+      mainViewTexture.unregisterOnStart(onStartId.value);
     }
-  },
-};
+
+    if (onEndId.value >= 0) {
+      mainViewTexture.unregisterOnEnd(onEndId.value);
+    }
+  }
+});
+
+// 暴露方法给外部使用
+defineExpose({
+  show,
+  play,
+  stop,
+});
 </script>
 
 <template>

package/utils/JsViewVueWidget/JsvClipDiv/JsvClipDiv.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script setup lang="ts">
-import { shallowRef, watchEffect, defineProps, withDefaults } from "vue";
+import { shallowRef, watchEffect } from "vue";
 
 const rProps = withDefaults(
   defineProps<{

package/utils/JsViewVueWidget/JsvDragBox/JsvDragBox.vue

@@ -45,7 +45,7 @@ const props = defineProps({
   },
 });
 
-const valide = true;
+let valide = true;
 if (
   props.boxRect.width <= props.dragRect.width ||
   props.boxRect.height <= props.dragRect.height
@@ -75,6 +75,7 @@ let vOnDragStart = null;
 let vOnDragRelease = null;
 
 function initDragBox() {
+  // 定制dragBox的活动区域
   cController.run((cmds) => [
     cmds.state().removeConditionByGroup(cWallConditionGroup),
     cmds
@@ -109,6 +110,7 @@ function setSensor(callback, sensitivity) {
       cmds.state().removeConditionByGroup(cSensorConditionGroup),
     ]);
     if (callback != null) {
+      // 设置运动过程位置信息的回调
       cController.run((cmds) => [
         cmds
           .condition(cSensorConditionGroup, true)
@@ -131,6 +133,7 @@ function moveTo(left, top) {
     );
     return;
   }
+  // 接受moveTo坐标，主动移动到指定位置
   cController.run((cmds) => [cmds.action().teleportTo(left, top)]);
 }
 
@@ -144,6 +147,9 @@ onMounted(() => {
   }
   let divView = rMainDiv.value.jsvGetProxyView();
   cController.bindForgeView(divView, true);
+  // TOUCH_RECV_MOVE_BIT 激活跟随触控位置移动
+  // TOUCH_RECV_FIRST_START 激活首次触摸开始的事件, 让condistion.onDragStart生效
+  // TOUCH_RECV_LAST_END 激活最后一次触摸结束的事件, 让condistion.onTouchRelease生效
   divView.DragEnables?.(
     ForgeConst.DragFlags.TOUCH_RECV_MOVE_BIT |
       // (cEnableFling ? ForgeConst.DragFlags.TOUCH_RECV_FLING_BIT : 0) |
@@ -157,9 +163,12 @@ onMounted(() => {
     typeof props.dragRect.left == "number" ? props.dragRect.left : 0;
   let initTop = typeof props.dragRect.top == "number" ? props.dragRect.top : 0;
   if (initLeft != 0 || initTop != 0) {
+    // 将dragBox移动到初始位置
     cController.run((cmds) => [cmds.action().teleportTo(initLeft, initTop)]);
   }
 
+  // 注册 onDragStart 和 onTouchRelease 回调
+  // 制作初始的onSensor回调，敏感度默认为10
   cController.run((cmds) => [
     cmds
       .condition(undefined, true)
@@ -189,7 +198,7 @@ onMounted(() => {
       ]),
     cmds
       .condition(cSensorConditionGroup, true)
-      .onMovement(10) // 默认设置x或y移动超过10时才触发回调，以此减少回调的频次，规避js的性能影响
+      .onMovement(vSensitivity) // 默认设置x或y移动超过10时才触发回调，以此减少回调的频次，规避js的性能影响
       .then([onSensor]),
   ]);
 });

package/utils/JsViewVueWidget/JsvDriftScope/JsvDriftScope.vue

@@ -41,7 +41,7 @@
 </template>
 
 <script setup lang="ts">
-import { shallowRef, watchEffect, defineProps, withDefaults } from "vue";
+import { shallowRef, watchEffect } from "vue";
 import JsvClipDiv from "../JsvClipDiv/JsvClipDiv.vue";
 
 interface FrameStyleDefine {

package/utils/JsViewVueWidget/JsvEnableRenderBreak.vue

@@ -1,3 +1,9 @@
+<!--
+ * @file 
+ *
+ * 此组件目前并不建议应用端使用，目前没有非常合适的应用场景
+-->
+
 <script setup>
 import { RENDER_ITEM_BREAK_KEY } from "../JsViewEngineWidget/WidgetCommon";
 import { shallowRef } from "vue";

package/utils/JsViewVueWidget/JsvFlexCell/JsvFlexDiv.vue

@@ -69,12 +69,18 @@ let SizeHeight = shallowRef(undefined);
 let onSizeCallback = (x, y, width, height) => {
   SizeX.value = x;
   SizeY.value = y;
-  SizeWidth.value = width;
-  SizeHeight.value = height;
 
-  if (width != 0 && height != 0) {
-    // 忽略0尺寸这个中间过程的回调
-    props.onSized?.(width, height);
+  let origin_width = SizeWidth.value;
+  let origin_height = SizeHeight.value; 
+
+  if (origin_width != width || origin_height != height) {
+    SizeWidth.value = width;
+    SizeHeight.value = height;
+
+    if (width != 0 && height != 0) {
+      // 忽略0尺寸这个中间过程的回调
+      props.onSized?.(width, height);
+    }
   }
 };
 let containerRef = shallowRef(null);

package/utils/JsViewVueWidget/JsvFlexCell/JsvScreenFlex.vue

@@ -18,6 +18,8 @@
  *          askSize: boolean  设置会跟进flex的尺寸变化，设置后可通过getWidth/getHeight拿到尺寸，但会降低性能
  *          onSized: Function(width:number, height:number) 
                 比askSize更进一步，可以通过回调知道尺寸变化后的时机，回调参数(width, height)为flex后的尺寸*          background: {string} (选填)背景图案 可选值: 绝对路径url|url(相对路径url)|#FFFFFF|rbga(255,0,0,1.0)
+            background: {string} (选填)背景图片url或者背景颜色 可选值: #FFFFFF|rbga(255,0,0,1.0)
+                                背景图会被按照objectFit:cover的形式显示
  *
  *      expose说明:
  *          getWidth():  当askSize或者onSize生效时，获取元素的宽度
@@ -85,7 +87,7 @@ watchEffect(() => {
       const texture_manager = ForgeHandles.TextureManager;
       if (
         vTextureStringCache.trim().startsWith("#") ||
-        vTextureStringCache.trim().startsWith("rgba")
+        vTextureStringCache.trim().startsWith("rgb")
       ) {
         texture_setting = new Forge.TextureSetting(
           ForgeTextureApis.GetColorTexture(texture_manager, vTextureStringCache)

package/utils/JsViewVueWidget/JsvFragShaderView/JsvFragShaderView.vue

@@ -88,6 +88,11 @@ const rProps = defineProps({
   onStart: {
     type: Function,
   },
+  // 是否已经在外部保证其加载性了
+  loadComfirmed: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 // 激活引擎中的功能支持
@@ -138,20 +143,27 @@ if (rProps.textures) {
     }
   }
   // 对图片进行预加载，等所有图片预加载完成后才能开始动画，以确保动画的完整性
+  if (!rProps.loadComfirmed) {
+    vPreloadHandler = JsvTextureLoadTool.preload(preload_textures, () => {
+      vPreloadDone = true;
 
-  vPreloadHandler = JsvTextureLoadTool.preload(preload_textures, () => {
-    vPreloadDone = true;
-
-    // 加载完成后直接释放句柄即可
-    vPreloadHandler.recycleResource();
-    vPreloadHandler = null;
+      // 加载完成后直接释放句柄即可
+      vPreloadHandler.recycleResource();
+      vPreloadHandler = null;
 
-    if (vStartingPromise != null) {
-      vStartingPromise.resolve();
+      if (vStartingPromise != null) {
+        vStartingPromise.resolve();
+      }
+    });
+    if (vPreloadHandler == null) {
+      // 无需要preload的内容，直接视为preloadDone
+      vPreloadDone = true;
+      if (vStartingPromise != null) {
+        vStartingPromise.resolve();
+      }
     }
-  });
-  if (vPreloadHandler == null) {
-    // 无需要preload的内容，直接视为preloadDone
+  } else {
+    // 已经确认加载性, 不再做preload
     vPreloadDone = true;
     if (vStartingPromise != null) {
       vStartingPromise.resolve();