@shijiu/jsview-vue 2.2.35 → 2.2.201

package/utils/JsViewVueWidget/JsvFreeMoveActor/SyncLinkManager.ts

@@ -0,0 +1,120 @@
+
+import { NexusNode } from "./NexusNode";
+
+interface PendingPromise {
+    promiseRef: Promise<void> | null;
+    promiseResolve: Function | null;
+    linkName: String;
+}
+
+class SyncLinkSource {
+    nexusNode: NexusNode;
+    linkName: String;
+
+    constructor(name: string, node: NexusNode) {
+        this.nexusNode = node;
+        this.linkName = name;
+    }
+}
+
+class SyncLinkManager {
+    // 等待中的未回复的link
+    private pendingPromiseList: Array<PendingPromise> = [];
+    private syncSourceMap: Map<String, SyncLinkSource> = new Map();
+
+    constructor() {
+
+    }
+
+    // 将LinkSource加入map
+    SourceOnMounted(syncSource: SyncLinkSource | null) {
+        if (syncSource != null) {
+            let linkName = syncSource.linkName;
+            if (this.syncSourceMap.has(linkName)) {
+                // 重名内容不要添加，规避引起引用混乱
+                console.error(`Error: sync link name duplicate:${linkName}`);
+                return;
+            }
+
+
+            this.syncSourceMap.set(linkName, syncSource);
+
+            if (this.pendingPromiseList.length != 0) {
+                // 找出pending内容，进行回调
+                for (let index = this.pendingPromiseList.length - 1; index >= 0; index--) {
+                    let promiseItem = this.pendingPromiseList[index];
+                    if (promiseItem.linkName == linkName) {
+                        promiseItem.promiseResolve?.();
+                        this.pendingPromiseList.splice(index, 1);
+                    }
+                }
+            }
+        }
+    }
+
+    // 将LinkSource移出map
+    SourceOnUnmounted(linkName: String) {
+        if (this.syncSourceMap.has(linkName)) {
+            this.syncSourceMap.delete(linkName);
+        } else {
+            console.error(`ERROR: unmount linkname(${linkName}) not found`)
+        }
+    }
+
+    // 加入wait处理在.then中再进行 GetSyncSource, 以保证节点完成了mounted
+    WaitSourceMounted(name: String): Promise<void> {
+        let newPromiseItem: PendingPromise = {
+            promiseRef: null,
+            promiseResolve: null,
+            linkName: name
+        }
+        newPromiseItem.promiseRef = new Promise((resolve) => {
+            newPromiseItem.promiseResolve = resolve;
+            if (this.syncSourceMap.has(name)) {
+                // 若已经有了则直接resolve
+                resolve();
+            } else {
+                // 加入到pending队列中
+                this.pendingPromiseList.push(newPromiseItem);
+            }
+        });
+
+        return newPromiseItem.promiseRef;
+    }
+
+    // 取消 WaitSourceMounted 发起的Promise, 用在unmounted中, 规避内存泄漏
+    UnListen(waitPromise: Promise<void>) {
+        if (this.pendingPromiseList.length != 0) {
+            for (let index = this.pendingPromiseList.length; index >= 0; index--) {
+                let promiseItem = this.pendingPromiseList[index];
+                if (promiseItem.promiseRef == waitPromise) {
+                    this.pendingPromiseList.splice(index, 1);
+                    break;
+                }
+            }
+        }
+    }
+
+    GetSourceNexusNode(linkName: String): NexusNode | null {
+        let sourceItem = this.syncSourceMap.get(linkName);
+        if (sourceItem) {
+            return sourceItem.nexusNode;
+        } else {
+            return null;
+        }
+    }
+}
+
+let sSyncLinkManager: SyncLinkManager | null = null;
+
+function GetSyncLinkManager(): SyncLinkManager {
+    if (sSyncLinkManager == null) {
+        sSyncLinkManager = new SyncLinkManager();
+    }
+    return sSyncLinkManager;
+}
+
+export {
+    GetSyncLinkManager,
+    SyncLinkSource
+}

package/utils/JsViewVueWidget/JsvFreeMoveActor/index.js

@@ -3,6 +3,9 @@ import { ActEventDefine } from "./ForgeTypeDefine.ts"
 import { default as KeepFlags } from "./KeepFlags.ts"
 import JsvEnvBlocker from "./JsvEnvBlocker.vue"
 import { newNexus } from "./NexusNode"
+import { default as ActControlDebug } from "./ActorControl.ts"
+import { GetSyncLinkManager, SyncLinkSource } from "./SyncLinkManager.ts"
+
 
 let FreeMoveDef = {
     ActEventDefine,
@@ -11,10 +14,14 @@ let FreeMoveDef = {
 
 let FreeMoveFunc = {
     newNexus,
+    ActControlDebug,
+    GetSyncLinkManager,
+    SyncLinkSource
 }
 
 export {
     JsvFreeMoveActor,
+    JsvFreeMoveActor as JsvFreeMoveDiv,
     JsvEnvBlocker,
     FreeMoveDef,
     FreeMoveFunc

package/utils/JsViewVueWidget/JsvMaskClipDiv.vue

@@ -14,6 +14,11 @@
 <script>
 import { Forge, ForgeExtension } from "@shijiu/jsview/dom/jsv-forge-define";
 import ForgeHandles from "../JsViewVueTools/ForgeHandles";
+
+const renderDocument = window.JsvCode.Dom.RenderDocument
+  ? window.JsvCode.Dom.RenderDocument
+  : window.JsvCode.Dom.BrowserDocument;
+
 export default {
   props: {
     class: {
@@ -112,7 +117,7 @@ export default {
       this.$refs.innerViewDiv
         ?.jsvGetProxyView(true)
         .RegisterOnProxyReady(() => {
-          const canvas = window.originDocument.createElement("canvas");
+          const canvas = renderDocument.createElement("canvas");
           canvas.style.width = _this.style.width + "px";
           canvas.style.height = _this.style.height + "px";
           _this.$refs.innerViewDiv

package/utils/JsViewVueWidget/JsvNativeSharedDiv.vue

@@ -5,84 +5,109 @@
  *                  getId {function} 回调函数，用于接收ID信息，ID信息用于Native端对该view进行跟踪的标识
  *                  setId {String} 给定命名ID，避免同进程不同context重名要和Context相关，
  *                                 例如`${window.JsView?.getJsContextId()}_${you_name}`
+ *                  corner {Number} 圆角的尺寸，默认为0 
+ *                  
  -->
 
-<script>
+<script setup>
 import { Forge } from "@shijiu/jsview/dom/jsv-forge-define";
 import ForgeHandles from "../JsViewVueTools/ForgeHandles";
+import { JsvTextureStoreApi } from "../JsViewVueTools/JsvTextureStore/JsvTextureStore";
+import { onUnmounted, shallowRef } from "vue";
+import JsvNinePatch from "./JsvNinePatch.vue";
 
-export default {
-  props: {
-    style: {
-      type: Object,
-      default: () => {
-        return {};
-      },
-    },
-    getId: Function,
-    setId: String,
-    seeThrough: {
-      type: Boolean,
-      default: true,
+const props = defineProps({
+  style: {
+    type: Object,
+    default: () => {
+      return {};
     },
   },
-  setup() {
-    return {
-      isBrowserDebug: window.jsvIsBrowserDebug,
-      jsvMainView: undefined,
-      innerViewId: undefined,
-    };
+  getId: Function,
+  setId: String,
+  corner: {
+    type: Number,
+    default: 0,
   },
-  beforeMount() {
-    if (this.isBrowserDebug) {
-      return;
-    }
+});
 
-    // 初始化View
-
-    // 创建JsView图层穿透的texture，抠洞处理
-    // 默认为扣洞，有的场景不需要扣洞
-    let textureSetting = null;
-    if (this.seeThrough) {
-      const seeThroughTexture =
-      ForgeHandles.TextureManager.GetColorTexture("rgba(0,0,0,0)");
-      textureSetting = new Forge.TextureSetting(
-        seeThroughTexture,
-        null,
-        null,
-        false
-      );
-    }
+let isBrowserDebug = window.jsvIsBrowserDebug;
+let jsvMainView = undefined;
+let innerViewId = -1;
+let ninePatchSet = null;
+
+if (!isBrowserDebug) {
+  // 创建JsView图层穿透的texture，抠洞处理
 
-    // 通过内置函数构造定制的NativeSharedView
-    this.jsvMainView = new Forge.NativeSharedView(textureSetting);
-    this.innerViewId = Forge.sViewStore.add(
-      new Forge.ViewInfo(this.jsvMainView)
+  // 有圆角
+  if (props.corner > 0) {
+    let presetGap = 1; // 外延距离，以保证圆角光滑
+    ninePatchSet = {
+      imageSize: (props.corner + presetGap) * 2, // 半径 + 中心点1像素
+      textureName: null,
+    };
+
+    // 用 JsvTextureStoreApi 绘制半径对等的圆形
+    let sampleImageWidth = ninePatchSet.imageSize;
+    let innerRadius2 = sampleImageWidth; // 内直径
+    let circleLineWidth = 1.5 * props.corner + presetGap - props.corner; // 线粗要把四角盖上
+    let canvasRef;
+
+    // 创建画布
+    canvasRef = JsvTextureStoreApi.canvasTexture(
+      sampleImageWidth,
+      sampleImageWidth
     );
 
-    // 更新宽高
-    if (typeof this.jsvMainView != "undefined" && this.jsvMainView) {
-      if (this.setId) {
-        // 使用设置进来的track id，而非自动生成
-        this.jsvMainView.SetTrackId(this.setId);
-      }
+    let circleRadius =
+      Math.floor(innerRadius2 / 2) +
+      Math.floor(circleLineWidth / 2) -
+      presetGap; // 圆环绘制路径是粗线的中心线，所以要减去一半的线宽
+    let customPath = canvasRef.circlePath(
+      Math.floor(sampleImageWidth / 2),
+      Math.floor(sampleImageWidth / 2),
+      circleRadius
+    ); // 创建圆环绘制路径，圆形在画布的中心点位置
+    canvasRef.drawColor("rgba(0,0,0,0)"); // 画布绘制透明底色
+    customPath.stroke(circleLineWidth, "#FF0000FF"); // 绘制alpha=1的边缘留色
 
-      this.getId?.(this.jsvMainView.GetTrackId());
-    }
-  },
-  beforeUnmount() {
-    if (this.isBrowserDebug) {
-      return;
-    }
+    // 获取填入url的内容
+    // 进行.9拉伸以适配目标尺寸
+    // 通过 alphaOverride 进行alpah叠加
+    ninePatchSet.textureName = canvasRef.commit();
+  }
+
+  // 通过内置函数构造定制的NativeSharedView
+  jsvMainView = new Forge.NativeSharedView();
+  innerViewId = Forge.sViewStore.add(new Forge.ViewInfo(jsvMainView));
 
-    // 清理View管理缓存
-    if (this.innerViewId !== -1) {
-      Forge.sViewStore.remove(this.innerViewId);
-      this.innerViewId = -1;
-      this.jsvMainView = null;
+  // 更新宽高
+  if (typeof jsvMainView != "undefined" && jsvMainView) {
+    if (props.setId) {
+      // 使用设置进来的track id，而非自动生成
+      jsvMainView.SetTrackId(props.setId);
     }
-  },
-};
+
+    props.getId?.(jsvMainView.GetTrackId());
+  }
+}
+
+onUnmounted(() => {
+  if (isBrowserDebug) {
+    return;
+  }
+
+  // 清理View管理缓存
+  if (innerViewId !== -1) {
+    Forge.sViewStore.remove(innerViewId);
+    innerViewId = -1;
+    jsvMainView = null;
+  }
+
+  if (ninePatchSet != null) {
+    JsvTextureStoreApi.deleteTexture(ninePatchSet.textureName); // 释放texture资源
+  }
+});
 </script>
 
 <template>
@@ -91,14 +116,42 @@ export default {
     :style="{
       left: style.left,
       top: style.top,
-      width: style.width,
-      height: style.height,
     }"
-    :data-jsv-vw-innerview="innerViewId"
   >
-    <slot />
+    <jsv-nine-patch
+      v-if="ninePatchSet != null"
+      :style="{
+        width: style.width,
+        height: style.height,
+      }"
+      :imageUrl="`jsvtexturestore://${ninePatchSet.textureName}`"
+      :imageWidth="ninePatchSet.imageSize"
+      :centerWidth="1"
+      :borderOutset="0"
+      :waitForInit="false"
+      imageBlendType="alphaOverride"
+    />
+    <div
+      v-else
+      :style="{
+        width: style.width,
+        height: style.height,
+        backgroundColor: 'rgba(0,0,0,0)',
+        JsvImageBlendType: 'alphaOverride',
+      }"
+    />
+    <div
+      :style="{
+        width: style.width,
+        height: style.height,
+      }"
+      :data-jsv-vw-innerview="innerViewId"
+    >
+      <slot />
+    </div>
   </div>
+
   <div v-else :style="{ ...style }">
     <slot />
   </div>
-</template>
+</template>

package/utils/JsViewVueWidget/JsvNinePatch.vue

@@ -1,6 +1,8 @@
 <!--
  * 【模块 export 内容】
  * JsvNinePatch：Vue高阶组件，.9图展示控件，该控件的原图要求为正方形，延展后可为长方形
+ *              centerWidth和borderOutset传值比较抽象，若 imageDspWidth 和图片素材的原图尺寸一直，
+ *              则可以参考 samples/NinePatchTester 的样例图示
  *      props说明:
  *          style       {Object}    同div的Style，通过width/height来控制.9图片延展后的显示尺寸，另外通过top/left控制坐标
  *          imageUrl    {String}    (必填)显示图片的加载地址
@@ -15,10 +17,11 @@
  *          animTime    {int}       (必填)缩放动画的时长(单位秒)
  *          waitForInit {boolean}  (选填)尺寸为0时是否进行描画(例如: 首次显示不展示动画的场合，设置为true),默认值为true
  *          onTransitionEnd { Function } (选填)transition动画结束的回调
+ *          imageBlendType {String}  (选填) alpha合并模式，默认为普通合成，可设置"alphaOverride", 用于Video挖洞操作
 -->
 
 <script setup>
-import { ref, watchEffect, computed } from "vue";
+import { ref, watchEffect, computed, shallowRef, onMounted } from "vue";
 
 const props = defineProps({
   style: {
@@ -39,7 +42,11 @@ const props = defineProps({
   borderOutset: { type: Number, required: true },
   animTime: { type: Number, default: 0 },
   onTransitionEnd: { type: Function },
-  animation: { type: String }
+  animation: { type: String },
+  imageBlendType: { type: String, default: null },
+
+  // 获取实际div的句柄
+  onDivRef: { type: Function, default: null },
 });
 
 const isReady = () => {
@@ -90,10 +97,17 @@ watchEffect(() => {
     );
   }
 });
+
+// 向外提出div的引用，因为v-if缘故，不能在mounted时输出
+// 特别注意: 析构时， onDivRef会输出 null
+function innerOnDivRef(ref) {
+  props.onDivRef?.(ref);
+}
 </script>
 
 <template>
   <div
+    :ref="innerOnDivRef"
     v-if="isReady()"
     :style="{
       ...style,
@@ -102,6 +116,7 @@ watchEffect(() => {
       borderImage: `url(${imageUrl}) ${sliceWidth} fill`,
       borderImageWidth: `${borderDspWidth}px`,
       borderImageOutset: `${convertedBorderOutset}px`,
+      JsvImageBlendType: props.imageBlendType,
     }"
     @transitionend="props.onTransitionEnd"
   />

package/utils/JsViewVueWidget/JsvPosterImage.vue

@@ -2,9 +2,12 @@
  * 【模块 export 内容】
  * JsvPosterImage：Vue高阶组件，海报描画，可设置color space 和 texture size
  *  props说明:
- *      colorSpace          {String}   颜色空间，默认RGBA_8888
  *      style    {Object}   包含left/top/width/height/border-radius的style设置
+ *      colorSpace {String} 颜色空间，调整其他颜色空间可以节省内存，默认RGBA_8888
  *      imageCompress {boolean} 是否压缩图片, 默认打开
+ *      src {string}        图片的加载地址
+ *      fadeIn: {boolean}   图片加载完成是否有淡入效果，默认为打开
+ *      isPosterImage:      标识是否用于海报位，对于海报位的内容，可以有下载线程控制等策略来优化整体体验
 -->
 
 <script setup>
@@ -14,25 +17,25 @@ import { JsvPerformance } from "../JsViewVueTools/JsvPerformance.ts";
 const props = defineProps({
   colorSpace: {
     type: String,
-    default: "RGBA_8888"
+    default: "RGBA_8888",
   },
   imageCompress: {
     type: Boolean,
-    default: true
+    default: true,
   },
   isPosterImage: {
     type: Boolean,
-    default: true
+    default: true,
   },
   fadeIn: {
     type: Boolean,
-    default: true
+    default: true,
   },
   src: {
     type: String,
-    default: null
+    default: null,
   },
-  style: Object
+  style: Object,
 });
 
 const scaleddown = computed(() => {
@@ -40,7 +43,9 @@ const scaleddown = computed(() => {
 });
 
 const isPosterImage = computed(() => {
-  return JsvPerformance.getPosterSingleThreadDecode() || props.isPosterImage ? "true" : "false";
+  return JsvPerformance.getPosterSingleThreadDecode() || props.isPosterImage
+    ? "true"
+    : "false";
 });
 
 let common_style = reactive({});
@@ -50,7 +55,15 @@ let show_background_holder = !!window.JsView; // PC浏览器模拟时, 不显示
 watchEffect(() => {
   if (props.style) {
     // 提取left, top, width, height, 并去掉干扰项 backgroundImage backgroundColor(会引起同位置重复图片绘制)
-    let { left, top, width, height, backgroundImage, backgroundColor, ...others } = props.style;
+    let {
+      left,
+      top,
+      width,
+      height,
+      backgroundImage,
+      backgroundColor,
+      ...others
+    } = props.style;
 
     // 承接x,y偏移和动画设置, 规避默认淡出动画被影响
     common_style.left = left;

package/utils/JsViewVueWidget/JsvQrcode/BrowserQrcode.vue

@@ -2,6 +2,10 @@
 import { onMounted, ref } from "vue";
 import QRCode from "qr.js";
 
+const renderDocument = window.JsvCode.Dom.RenderDocument
+  ? window.JsvCode.Dom.RenderDocument
+  : window.JsvCode.Dom.BrowserDocument;
+
 const props = defineProps({
   value: String,
   size: Number,
@@ -147,7 +151,7 @@ const qrcodeRes = renderQrcode();
 onMounted(() => {
   svgRoot.value.jsvGetProxyView().RegisterOnProxyReady(() => {
     const root = svgRoot.value.jsvGetProxyView().HtmlGetElement();
-    const doc = window.originDocument;
+    const doc = renderDocument;
     const svg = doc.createElementNS("http://www.w3.org/2000/svg", "svg");
     svg.setAttribute("type", "qrcode");
     svg.setAttribute("shapeRendering", "crispEdges");
@@ -182,4 +186,4 @@ onMounted(() => {
     <div ref="svgRoot" :style="{ width: 100, height: 100 }"></div>
     <div :style="imageStyle"></div>
   </div>
-</template>
+</template>