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

package/utils/JsViewVueTools/JsvTextureStore/Store.ts

@@ -1,32 +1,44 @@
 import { TextureBase } from "./Texture";
+import ForgeHandles from "../../JsViewVueTools/ForgeHandles";
 
 class JsvTextureStore {
-    private textureMap: Map<String, TextureBase> = new Map();
+  private textureMap: Map<String, TextureBase> = new Map();
+  private hasAutoRecycle: boolean = false;
 
-    constructor() {
+  constructor() { }
 
+  public addToStore(storeName: String, textureRef: TextureBase) {
+    if (!this.hasAutoRecycle && textureRef && textureRef.isAutoRecycle()) {
+      this.hasAutoRecycle = true;
+      ForgeHandles.sRenderBridge.AddWillSwapListener("jsv-texture-store", this.onWillSwap.bind(this));
     }
-
-    public addToStore(storeName: String, textureRef: TextureBase) {
-        this.textureMap.set(storeName, textureRef);
-    }
-
-    public getFromStore(storeName: String): TextureBase | undefined {
-        return this.textureMap.get(storeName);
-    }
-
-    public removeFromStore(storeName: String): TextureBase | undefined {
-        if (this.textureMap.has(storeName)) {
-            let textureBaseRef = this.textureMap.get(storeName);
-            this.textureMap.delete(storeName);
-            return textureBaseRef;
-        } else {
-            console.error(`Error: name=${storeName} not in map`);
-            return undefined;
-        }
+    this.textureMap.set(storeName, textureRef);
+  }
+
+  public getFromStore(storeName: String): TextureBase | undefined {
+    return this.textureMap.get(storeName);
+  }
+
+  public removeFromStore(storeName: String): TextureBase | undefined {
+    if (this.textureMap.has(storeName)) {
+      let textureBaseRef = this.textureMap.get(storeName);
+      this.textureMap.delete(storeName);
+      return textureBaseRef;
+    } else {
+      console.error(`Error: name=${storeName} not in map`);
+      return undefined;
     }
+  }
+
+  private onWillSwap() {
+    this.textureMap.forEach((texture, key) => {
+      if (texture && texture.isAutoRecycle()) {
+        texture.tryRecycle();
+      }
+    });
+  }
 }
 
 let sStore: JsvTextureStore = new JsvTextureStore();
 
-export default sStore;
+export default sStore;

package/utils/JsViewVueTools/JsvTextureStore/Texture.ts

@@ -1,53 +1,68 @@
 import sStore from "./Store";
 
+const AUTO_RECYCLE_DELAY = 3;
 export class TextureBase {
-    private baseName: String = 'T';
-    protected textureRef: any = null; // Forge.ImageTexture
-    public storeName: String = '';
-
-    constructor(baseName: String | null) {
-        if (baseName) {
-            this.baseName = baseName;
-        }
-    }
+  private baseName: String = "T";
+  protected textureRef: any = null; // Forge.ImageTexture
+  public storeName: String = "";
+  protected autoRecycle: boolean = false;
+  private autoRecycleDelay: number = AUTO_RECYCLE_DELAY;
 
-    protected addToStore() {
-        this.storeName = this.getStoreName();
-        this.textureRef.DisableAutoRecycle(); // 被store管理的，取消自动清理
-        sStore.addToStore(this.storeName, this);
+  constructor(baseName: String | null) {
+    if (baseName) {
+      this.baseName = baseName;
     }
+  }
 
-    protected getStoreName() {
-        return `${this.baseName}-${this.textureRef?.GetTextureId()}`;
+  tryRecycle() {
+    if (!this.autoRecycle) return;
+    this.autoRecycleDelay--;
+    if (this.autoRecycleDelay < 0) {
+      this.recycle();
     }
+  }
 
-    /**
-     * commit
-     * 完成绘制设置，出发制作目标texture
-     * 
-     * @return {String} BaseName-textureId 格式的名字，用于 jsvtexturestore:// 的访问链接
-     */
-    public commit(): String {
-        // Should override by extends to create Forge.ImageTexture -> textureRef
-        return this.storeName;
-    }
+  isAutoRecycle() {
+    return this.autoRecycle;
+  }
 
-    /**
-     * getTextureRef
-     * 内部接口，获取内联的Forge.ImageTexture的句柄
-     * 
-     * @return {String} BaseName-textureId 格式的名字，用于 jsvtexturestore:// 的访问链接
-     */
-    public getTextureRef(): any {
-        return this.textureRef;
-    }
+  protected addToStore() {
+    this.storeName = this.getStoreName();
+    this.textureRef.DisableAutoRecycle(); // 被store管理的，取消自动清理
+    sStore.addToStore(this.storeName, this);
+  }
+
+  protected getStoreName() {
+    return `${this.baseName}-${this.textureRef?.GetTextureId()}`;
+  }
+
+  /**
+   * commit
+   * 完成绘制设置，出发制作目标texture
+   *
+   * @return {String} BaseName-textureId 格式的名字，用于 jsvtexturestore:// 的访问链接
+   */
+  public commit(): String {
+    // Should override by extends to create Forge.ImageTexture -> textureRef
+    return this.storeName;
+  }
+
+  /**
+   * getTextureRef
+   * 内部接口，获取内联的Forge.ImageTexture的句柄
+   *
+   * @return {String} BaseName-textureId 格式的名字，用于 jsvtexturestore:// 的访问链接
+   */
+  public getTextureRef(): any {
+    return this.textureRef;
+  }
 
-    public recycle() {
-        // 释放native端的texture实体
-        let textureRef = sStore.removeFromStore(this.storeName);
-        if (textureRef) {
-            // 释放native端的texture实体
-            this.textureRef?.RequestToUnload();
-        }
+  public recycle() {
+    // 释放native端的texture实体
+    let textureRef = sStore.removeFromStore(this.storeName);
+    if (textureRef) {
+      // 释放native端的texture实体
+      this.textureRef?.RequestToUnload();
     }
+  }
 }

package/utils/JsViewVueTools/index.js

@@ -19,7 +19,6 @@ export * from "./JsvImpactTracer";
 export * from "./JsvTextTools";
 export * from "./JsvPreDownloader"
 export { default as DefaultKeyCodeMap } from "./DefaultKeyMap";
-export * from "./JsvDemoTester"
 export * from "./JsvPerformance"
 export * from "./JsvTextureStore/JsvTextureStore"
 export * from "./JsvTextureDefines"

package/utils/JsViewVueWidget/Jsv3dDiv.vue

@@ -0,0 +1,85 @@
+<script lang="ts">
+/**
+ * @file
+ *
+ * 【模块 export 内容】
+ * JsvPosterDiv：Vue高阶组件，海报描画
+ *  props说明:
+ *      @prop {{x:number, y:number, z:number}}  position 坐标信息，优先级高于style中的left, top
+ *      @prop {Object}                          style    {Object}   包含
+ *                          left/top/width/height
+ *                          border-radius
+ *                          backgroundImage/backgroundColor
+ *                          的style设置
+ *      @prop {boolean}                         enableAA 默认开启的。anti-alias(局部)算法，此算法会引起边缘2~3像素虚化
+ */
+</script>
+
+<script setup lang="ts">
+import { watchEffect, withDefaults, defineProps, shallowRef } from "vue";
+
+interface PositionType {
+  x: number;
+  y: number;
+  z: number;
+}
+
+const rProps = withDefaults(
+  defineProps<{
+    style: Object | null;
+    position: any; // PositionType
+    enableAA: boolean;
+  }>(),
+  {
+    style: null,
+    position: null,
+    enableAA: true,
+  }
+);
+
+let rPositionX = shallowRef(0);
+let rPositionY = shallowRef(0);
+let rPositionZ = shallowRef(0);
+
+let rDivStyle = shallowRef({});
+let rEnableAA = shallowRef("0");
+
+watchEffect(() => {
+  if (rProps.style) {
+    let { left, top, ...others } = rProps.style as any;
+
+    rPositionX.value = left;
+    rPositionY.value = top;
+    rPositionZ.value = 0;
+
+    rDivStyle.value = others;
+  }
+  if (rProps.position) {
+    rPositionX.value = isNaN(rProps.position.x)
+      ? rPositionX.value
+      : rProps.position.x;
+    rPositionY.value = isNaN(rProps.position.y)
+      ? rPositionY.value
+      : rProps.position.y;
+    rPositionZ.value = isNaN(rProps.position.z)
+      ? rPositionZ.value
+      : rProps.position.z;
+  }
+  rEnableAA.value = rProps.enableAA ? "1" : "0";
+});
+</script>
+
+<template>
+  <div
+    :style="{
+      left: rPositionX,
+      top: rPositionY,
+      ...rDivStyle,
+    }"
+    :data-jsv-img-enable-aa="rEnableAA"
+    v-bind="$attrs"
+    :data-jsv-vw-set-z="rPositionZ"
+  >
+    <slot></slot>
+  </div>
+</template>

package/utils/JsViewVueWidget/Jsv3dStage.vue

@@ -0,0 +1,50 @@
+<script lang="ts">
+/**
+ * @file
+ *
+ * 【模块 export 内容】
+ * JsvPosterDiv：Vue高阶组件，海报描画
+ *  props说明:
+ *      @prop {Object}      style    包含
+                                      left/top/width/height
+                                      的style设置
+ *      @prop {number}     perspective 透视精神，默认1000，要求透视效果前后差距越大，此值约小，
+                                        推荐档位
+                                        透视效果非常明显的场景: 300
+                                        透视效果适中的场景: 1000~2000
+ */
+</script>
+
+<script setup lang="ts">
+import { withDefaults, defineProps } from "vue";
+
+const rProps = withDefaults(
+  defineProps<{
+    style: { top: number; left: number; width: number; height: number };
+    perspective: number;
+  }>(),
+  {
+    style: {
+      top: 0,
+      left: 0,
+      width: 0,
+      height: 0,
+    } as any,
+    perspective: 1000,
+  }
+);
+</script>
+
+<template>
+  <div
+    :style="{
+      left: rProps.style.left,
+      top: rProps.style.top,
+      width: rProps.style.width,
+      height: rProps.style.height,
+      perspective: rProps.perspective,
+    }"
+  >
+    <slot></slot>
+  </div>
+</template>

package/utils/JsViewVueWidget/JsvApic/JsvApic/index.js

@@ -7,11 +7,4 @@
  */
 //! 考虑到.vue文件除了export default的component外，还有可能export其他对象,因此使用import * as
 import * as JsvApic from "./JsvApic.vue";
-let _JsvApic;
-if (window.JsView) {
-  _JsvApic = JsvApic.default;
-} else {
-  const BrowserApic = await import("./BrowserApic.vue");
-  _JsvApic = BrowserApic.default;
-}
-export default _JsvApic;
+export default JsvApic.default;

package/utils/JsViewVueWidget/JsvApic/JsvApic2/index.js

@@ -7,11 +7,4 @@
  */
 //! 考虑到.vue文件除了export default的component外，还有可能export其他对象,因此使用import * as
 import * as JsvApic2 from "./JsvApic2.vue";
-let _JsvApic2;
-if (window.JsView) {
-  _JsvApic2 = JsvApic2.default;
-} else {
-  const BrowserApic2 = await import("./BrowserApic2.vue");
-  _JsvApic2 = BrowserApic2.default;
-}
-export default _JsvApic2;
+export default JsvApic2.default

package/utils/JsViewVueWidget/JsvDashPath.vue

@@ -0,0 +1,150 @@
+<!--
+ * @file
+ * 
+ * 【模块 export 内容】
+ * JsvDashPath：Vue组件，用于绘制虚线路径
+ *      layout {Object}: (必填)组件位置，格式为 {left: number, top: number}
+ *      points {Array}: (必填)点数组，每个点包含 x 和 y 坐标，坐标是相对于layout中指定的left和top
+ *                     格式为 [{x: number, y: number}, ...]
+ *      dash {Array}: 虚线配置数组，例如 [10, 5] 表示10px实线，5px空白，默认值 [10, 10]
+ *      phase {Number}: 虚线起始位置偏移，默认值 0
+ *      color {String}: 线条颜色，默认值 "#FFFFFF"
+ *      lineWidth {Number}: 线条宽度，默认值 2
+ * 
+ * 注意事项:
+ *      组件会根据传入的points自动计算所需画布大小
+ *      组件会在卸载时自动清理创建的纹理资源
+ -->
+
+<template>
+  <div
+    :style="{
+      left: layout.left,
+      top: layout.top,
+    }"
+  >
+    <div
+      :style="{
+        left: canvasInfo.minX,
+        top: canvasInfo.minY,
+        width: canvasInfo.width,
+        height: canvasInfo.height,
+        backgroundImage: `url(jsvtexturestore://${sourceId})`,
+      }"
+    />
+  </div>
+</template>
+
+<script setup>
+import { JsvTextureStoreApi } from "../JsViewVueTools";
+import { onBeforeUnmount, computed } from "vue";
+
+const props = defineProps({
+  // 组件位置 {left: number, top: number}
+  layout: {
+    type: Object,
+    required: true,
+  },
+  // 点数组，每个点包含 x 和 y 坐标, 坐标是相对与layout中指定的left和top
+  points: {
+    type: Array,
+    required: true,
+    validator: (value) => {
+      return value.every((point) => "x" in point && "y" in point);
+    },
+  },
+  // 虚线配置，例如 [10, 5] 表示10px实线，5px空白
+  dash: {
+    type: Array,
+    default: () => [10, 10],
+  },
+  // 虚线起始位置偏移
+  phase: {
+    type: Number,
+    default: 0,
+  },
+  // 线条颜色
+  color: {
+    type: String,
+    default: "#FFFFFF",
+  },
+  // 线条宽度
+  lineWidth: {
+    type: Number,
+    default: 2,
+  },
+});
+
+// 计算坐标系调整值和画布尺寸
+const canvasInfo = computed(() => {
+  const xValues = props.points.map((p) => p.x);
+  const yValues = props.points.map((p) => p.y);
+
+  // 找出最小坐标值
+  const minX = Math.min(...xValues);
+  const minY = Math.min(...yValues);
+
+  // 计算偏移量（考虑线宽）
+  const lineOffset = Math.ceil(props.lineWidth / 2);
+
+  // 计算画布尺寸（考虑线宽）
+  const width = Math.max(...xValues) - minX + props.lineWidth * 2;
+  const height = Math.max(...yValues) - minY + props.lineWidth * 2;
+
+  return {
+    minX,
+    minY,
+    lineOffset,
+    width,
+    height,
+  };
+});
+
+// 创建画布纹理
+let sourceId = "";
+const canvasRef = JsvTextureStoreApi.canvasTexture(
+  canvasInfo.value.width,
+  canvasInfo.value.height
+);
+
+// 绘制透明背景
+canvasRef.drawColor("rgba(0,0,0,0)");
+
+// 创建自定义路径
+const path = canvasRef.customPath();
+
+// 移动到第一个调整后的点
+if (props.points.length > 0) {
+  const firstPoint = props.points[0];
+  path.moveTo(
+    firstPoint.x - canvasInfo.value.minX + canvasInfo.value.lineOffset,
+    firstPoint.y - canvasInfo.value.minY + canvasInfo.value.lineOffset
+  );
+
+  // 连接后续的调整后的点
+  for (let i = 1; i < props.points.length; i++) {
+    const point = props.points[i];
+    path.lineTo(
+      point.x - canvasInfo.value.minX + canvasInfo.value.lineOffset,
+      point.y - canvasInfo.value.minY + canvasInfo.value.lineOffset
+    );
+  }
+  path.close();
+}
+
+// 使用虚线样式绘制路径
+path.strokeWithSetting({
+  lineWidth: props.lineWidth,
+  color: props.color,
+  dash: props.dash,
+  phase: props.phase,
+});
+
+// 提交纹理并获取sourceId
+sourceId = canvasRef.commit();
+
+// 组件卸载时清理纹理
+onBeforeUnmount(() => {
+  JsvTextureStoreApi.deleteTexture(sourceId);
+});
+</script>

package/utils/JsViewVueWidget/JsvFlexCell/JsvFlexDiv.vue

@@ -27,7 +27,7 @@
  *                  alignSelf: auto|flex-start|flex-end|center|stretch  默认auto, 覆盖container的alignItems设置
  *              特别注意: 这些属性会引起位置对齐问题, 所以会自动去掉: "overflow:hidden"
  *          askSize: boolean  设置会跟进flex的尺寸变化，设置后可通过getWidth/getHeight拿到尺寸，但会降低性能
- *          onSized: Function 比askSize更进一步，可以通过回调知道尺寸变化后的时机，回调参数(width, height)为flex后的尺寸
+ *          onSized: Function(width:number, height:number) 比askSize更进一步，可以通过回调知道尺寸变化后的时机，回调参数(width, height)为flex后的尺寸
  *
  *      expose说明:
  *          getWidth():  当askSize或者onSize生效时，获取元素的宽度

package/utils/JsViewVueWidget/JsvFlexCell/JsvFullScrAdjust.vue

@@ -0,0 +1,153 @@
+<!--
+ * @file
+ *
+ * 【模块 export 内容】
+ *  JsvFullscreenAdjust: 将给定的宽高区域(一般为主屏幕),放到屏幕中心,保持横纵比
+ *      props说明:
+ *          childWidth: number 主屏幕的宽
+ *          childHeight: number 主屏幕的高
+ *          onSized: Function(width:number, height:number) 
+                  可以通过回调知道尺寸变化后的时机，回调参数(width, height)为flex后的尺寸
+ *          background: {string} (选填)背景图案 可选值: 绝对路径url|url(相对路径url)|#FFFFFF|rbga(255,0,0,1.0)
+ *
+ *      expose说明:
+ *          getWidth():  onSize生效时，获取元素的宽度
+ *          getHeight():  onSize生效时，获取元素的高度
+ *                   
+-->
+<script setup>
+import { shallowRef, watchEffect } from "vue";
+import { Forge } from "@shijiu/jsview/dom/jsv-forge-define";
+import JsvScreenFlex from "./JsvScreenFlex.vue";
+
+const rProps = defineProps({
+  childWidth: {
+    type: Number,
+    default: 0,
+  },
+  childHeight: {
+    type: Number,
+    default: 0,
+  },
+  askSize: {
+    type: Boolean,
+    default: false,
+  },
+  onSized: {
+    type: Function,
+    default: null,
+  },
+  background: {
+    type: String,
+    default: null,
+  },
+});
+
+// 此div的宽度是固定的全屏尺寸，在jsview体系下，全屏的宽度就是designMapWidth
+const cDivMaxWidth = Forge.sRenderBridge.GetScreenInfo().designedWidth;
+
+let rScreenFlexRef = shallowRef(null);
+let rChildWidth = shallowRef(0);
+let rChildHeight = shallowRef(0);
+let rScaleSet = shallowRef(null);
+
+let vGetScreenSize = false;
+let vScreenWidth = 0;
+let vScreenHeight = 0;
+
+watchEffect(() => {
+  if (vGetScreenSize) {
+    // 响应child的width, height的变化设置
+    _ResizeContainer(
+      vScreenWidth,
+      vScreenHeight,
+      rProps.childWidth,
+      rProps.childHeight
+    );
+  }
+});
+
+let cOnSizeFunc = (width, height) => {
+  if (rProps.onSized) {
+    rProps.onSized(width, height);
+  }
+
+  vScreenWidth = width;
+  vScreenHeight = height;
+  _ResizeContainer(
+    vScreenWidth,
+    vScreenHeight,
+    rProps.childWidth,
+    rProps.childHeight
+  );
+};
+
+function _ResizeContainer(screenWidth, screenHeight, childWidth, childHeight) {
+  if (childWidth == 0 || childHeight == 0) {
+    console.error(`Error: size is 0 set w=${childWidth} h=${childHeight}`);
+    return;
+  }
+
+  if (childWidth > cDivMaxWidth) {
+    console.error(
+      `Error: over max-width max-with=${cDivMaxWidth} set width=${childWidth}`
+    );
+    return;
+  }
+
+  rChildWidth.value = childWidth;
+  rChildHeight.value = childHeight;
+
+  let scale = 1.0;
+  let requireHeight = Math.floor((childWidth * screenHeight) / screenWidth);
+  if (requireHeight < childHeight) {
+    // height展示不下，以height为主，保留3位小数
+    scale = Math.floor((requireHeight / childHeight) * 1000) / 1000;
+  } else {
+    // height能展示下，以width为主, scale不变
+  }
+  rScaleSet.value = `scale3d(${scale}, ${scale}, 1)`;
+}
+
+defineExpose({
+  // TODO: PC模拟环境中目前没有浏览器的类似ResizeObserver接口
+  //       可以监听到left/ top变化，所以先关闭Left / Top的获取
+  // getLeft: () => {
+  //   return SizeX.value;
+  // },
+  // getTop: () => {
+  //   return SizeY.value;
+  // },
+
+  getWidth: () => {
+    return rScreenFlexRef.value?.getWidth();
+  },
+  getHeight: () => {
+    return rScreenFlexRef.value?.getHeight();
+  },
+});
+</script>
+
+<template>
+  <jsv-screen-flex
+    :style="{
+      flexDirection: 'row',
+      justifyContent: 'center',
+      alignItems: 'center',
+    }"
+    :onSized="cOnSizeFunc"
+    :background="rProps.background"
+  >
+    <div
+      :style="{
+        width: rProps.childWidth,
+        height: rProps.childHeight,
+        transform: rScaleSet,
+      }"
+    >
+      <div data-jsv-vw-as-bound-anchor="true">
+        <slot />
+      </div>
+    </div>
+  </jsv-screen-flex>
+</template>

package/utils/JsViewVueWidget/JsvFlexCell/JsvScreenFlex.vue

@@ -16,8 +16,8 @@
  *                                 副轴方向多行内容总体的对齐方式，例如主轴为行时，项目在每行中竖直方向的对齐
  *              特别注意: 这些属性会引起位置对齐问题, 所以会自动去掉: "overflow:hidden"
  *          askSize: boolean  设置会跟进flex的尺寸变化，设置后可通过getWidth/getHeight拿到尺寸，但会降低性能
- *          onSized: Function 比askSize更进一步，可以通过回调知道尺寸变化后的时机，回调参数(width, height)为flex后的尺寸
- *          background: {string} (选填)背景图案 可选值: 绝对路径url|url(相对路径url)|#FFFFFF|rbga(255,0,0,1.0)
+ *          onSized: Function(width:number, height:number) 
+                比askSize更进一步，可以通过回调知道尺寸变化后的时机，回调参数(width, height)为flex后的尺寸*          background: {string} (选填)背景图案 可选值: 绝对路径url|url(相对路径url)|#FFFFFF|rbga(255,0,0,1.0)
  *
  *      expose说明:
  *          getWidth():  当askSize或者onSize生效时，获取元素的宽度

package/utils/JsViewVueWidget/JsvFlexCell/index.js

@@ -1,3 +1,4 @@
 
 export { default as JsvFlexDiv } from "./JsvFlexDiv.vue";
 export { default as JsvScreenFlex } from "./JsvScreenFlex.vue";
+export { default as JsvFullScrAdjust } from "./JsvFullScrAdjust.vue";