@shijiu/jsview-vue 2.2.35 → 2.2.201

package/utils/JsViewVueTools/JsvTextureStore/Texture.ts

@@ -12,10 +12,14 @@ export class TextureBase {
     }
 
     protected addToStore() {
-        this.storeName = `${this.baseName}-${this.textureRef?.GetTextureId()}`;
+        this.storeName = this.getStoreName();
         sStore.addToStore(this.storeName, this);
     }
 
+    protected getStoreName() {
+        return `${this.baseName}-${this.textureRef?.GetTextureId()}`;
+    }
+
     /**
      * commit
      * 完成绘制设置，出发制作目标texture
@@ -27,6 +31,16 @@ export class TextureBase {
         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);

package/utils/JsViewVueTools/index.js

@@ -5,22 +5,24 @@
  */
 
 export * from "./JsvHashHistory";
-export * from "./JsvDynamicCssStyle.js";
-export * from "./JsvDynamicKeyFrames.ts";
-export * from "./JsvRuntimeBridge.js";
+export * from "./JsvDynamicCssStyle";
+export * from "./JsvDynamicKeyFrames";
+export * from "./JsvRuntimeBridge";
 export * from "./NinePatchHelper";
 export * from "./TypeCheckAndSet";
-export * from "./JsvRefTaker.js";
-export * from "./JsvStyleClass.js";
-export * from "./JsvStyleSheetsDeclarer.js";
-export * from "./DebugContentShellJBridge.js";
-export * from "./DebugTool.js";
-export * from "./JsvImpactTracer.js";
-export * from "./JsvTextTools.js";
-export * from "./JsvPreDownloader.ts"
-export { default as DefaultKeyCodeMap } from "./DefaultKeyMap.js";
-export * from "./JsvDemoTester.js"
-export * from "./JsvPerformance.ts"
-export * from "./JsvTextureStore/JsvTextureStore.ts"
-export * from "./JsvTextureDefines.ts"
-export * from "./JsvFederationTools.ts"
+export * from "./JsvRefTaker";
+export * from "./JsvStyleClass";
+export * from "./JsvStyleSheetsDeclarer";
+export * from "./DebugContentShellJBridge";
+export * from "./DebugTool";
+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"
+export * from "./JsvFederationTools"
+export * from "./ConstSymbol"
+export * from "./ForgeConstDefine"

package/utils/JsViewVueWidget/JsvApic/JsvApic/BrowserApic.vue

@@ -6,14 +6,14 @@
  * @Description: file content
 -->
 <script setup>
-import {
-  Viewer,
-  WebpData,
-  GifData
-} from "../JsvBrowserApicLib/BrowserApicLib";
+import { Viewer, WebpData, GifData } from "../JsvBrowserApicLib/BrowserApicLib";
 import { LoopType } from "../JsvCommonLoopToolBase";
 import { onMounted, shallowRef } from "vue";
 
+const renderDocument = window.JsvCode.Dom.RenderDocument
+  ? window.JsvCode.Dom.RenderDocument
+  : window.JsvCode.Dom.BrowserDocument;
+
 const loadImage = (url) => {
   return new Promise((resolve, reject) => {
     let xhr = new XMLHttpRequest();
@@ -81,15 +81,15 @@ const play = () => {
   viewer?.play(props.loopType, props.loopInfo);
 };
 
-const stop = () => {
-  viewer?.stop();
+const stop = (frameCount = -1) => {
+  viewer?.stop(frameCount);
 };
 
 onMounted(() => {
   let domLayoutView = canvasProxyRef.value.jsvGetProxyView();
   domLayoutView.RegisterOnProxyReady(() => {
     // 制作canvas
-    let canvas = window.originDocument.createElement("canvas");
+    let canvas = renderDocument.createElement("canvas");
     canvas.style.width = props.style.width + "px";
     canvas.style.height = props.style.height + "px";
     domLayoutView.HtmlGetElement().appendChild(canvas);

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

@@ -79,12 +79,12 @@ export default {
         }
       }
     },
-    stop() {
+    stop(frameCount = -1) {
       if (this.$refs.element) {
         let mainViewTexture = this.$refs.element.jsvGetProxyTexture(
           ForgeHandles.TextureManager
         );
-        mainViewTexture.DispatchCommand(Forge.NativeConstant.APIC_STOP, "");
+        mainViewTexture.DispatchCommand(Forge.NativeConstant.APIC_STOP, `{"TF":${frameCount}}`);
       }
     },
   },
@@ -102,7 +102,7 @@ export default {
     }
   },
   beforeUnmount() {
-    this.stop();
+    this.stop(0);
     if (this.$refs.element) {
       let mainViewTexture = this.$refs.element.jsvGetProxyTexture(
         ForgeHandles.TextureManager

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

@@ -6,15 +6,14 @@
  * @Description: file content
 -->
 <script setup>
-import {
-  Viewer,
-  WebpData,
-  GifData
-} from "../JsvBrowserApicLib/BrowserApicLib";
+import { Viewer, WebpData, GifData } from "../JsvBrowserApicLib/BrowserApicLib";
 import { LoopType } from "../JsvCommonLoopToolBase.js";
 import { onMounted, shallowRef } from "vue";
 
 let waitForPlayInfo = null;
+const renderDocument = window.JsvCode.Dom.RenderDocument
+  ? window.JsvCode.Dom.RenderDocument
+  : window.JsvCode.Dom.BrowserDocument;
 
 const loadImage = (url) => {
   return new Promise((resolve, reject) => {
@@ -71,7 +70,7 @@ onMounted(() => {
   let domLayoutView = canvasProxyRef.value.jsvGetProxyView();
   domLayoutView.RegisterOnProxyReady(() => {
     // 制作canvas
-    let canvas = window.originDocument.createElement("canvas");
+    let canvas = renderDocument.createElement("canvas");
     canvas.style.width = props.style.width + "px";
     canvas.style.height = props.style.height + "px";
     domLayoutView.HtmlGetElement().appendChild(canvas);
@@ -105,8 +104,8 @@ defineExpose({
     waitForPlayInfo = args;
     viewer?.play(...args);
   },
-  stop: () => {
-    viewer?.stop();
+  stop: (frameCount = -1) => {
+    viewer?.stop(frameCount);
   },
 });
 </script>

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

@@ -88,12 +88,12 @@ export default {
         }
       }
     },
-    stop() {
+    stop(frameCount = -1) {
       if (this.$refs.element) {
         let mainViewTexture = this.$refs.element.jsvGetProxyTexture(
           ForgeHandles.TextureManager
         );
-        mainViewTexture.DispatchCommand(Forge.NativeConstant.APIC_STOP, "");
+        mainViewTexture.DispatchCommand(Forge.NativeConstant.APIC_STOP, `{"TF":${frameCount}}`);
       }
     },
   },
@@ -108,7 +108,7 @@ export default {
     }
   },
   beforeUnmount() {
-    this.stop();
+    this.stop(0);
     if (this.$refs.element) {
       let mainViewTexture = this.$refs.element.jsvGetProxyTexture(
         ForgeHandles.TextureManager

package/utils/JsViewVueWidget/JsvApic/JsvBrowserApicLib/ApicDataBase.js

@@ -6,13 +6,17 @@
  * @Description: file content
  */
 
+const renderDocument = window.JsvCode.Dom.RenderDocument
+  ? window.JsvCode.Dom.RenderDocument
+  : window.JsvCode.Dom.BrowserDocument;
+
 class ApicDataBase {
   constructor(arrayBuffer) {
     this.LoopCount = 0;
     this.FrameCount = 0;
     this.Width = 0;
     this.Height = 0;
-    this._Canvas = window.originDocument.createElement("canvas");
+    this._Canvas = renderDocument.createElement("canvas");
     this._Context = this._Canvas.getContext("2d");
     this._DecodedData = null;
     this.decode(arrayBuffer);

package/utils/JsViewVueWidget/JsvApic/JsvBrowserApicLib/Viewer.js

@@ -23,7 +23,7 @@ class Viewer {
     this._Listener = listener;
     this._TimeoutId = -1;
     this._EndState = ApicEndState.LAST_FRAME;
-    // this.renderFrame(0);
+    this._CurrentIndex = -1;
   }
 
   _createLoopTool(loop_type, loop_info) {
@@ -59,8 +59,12 @@ class Viewer {
     this._LoopTool.setApicInfo(this._ApicData.FrameCount, this._ApicData.LoopCount);
   }
 
-  stop() {
+  stop(frameCount = -1) {
     clearTimeout(this._TimeoutId);
+    if (frameCount >= 0 && this._CurrentIndex !== frameCount) {
+      this._CurrentIndex = frameCount;
+      this.renderFrame(frameCount)
+    }
     if (this._Listener?.onend) {
       this._Listener.onend();
     }
@@ -88,7 +92,8 @@ class Viewer {
 
   renderLoop() {
     if (this._LoopTool.hasNext()) {
-      let duration = this.renderFrame(this._LoopTool.next());
+      this._CurrentIndex = this._LoopTool.next()
+      let duration = this.renderFrame(this._CurrentIndex);
       this._TimeoutId = setTimeout(() => {
         this.renderLoop();
       }, duration);

package/utils/JsViewVueWidget/JsvClipDiv/JsvClipDiv.vue

@@ -0,0 +1,42 @@
+<!--
+ * 【模块 export 内容】
+ * JsvClipDiv: Vue高阶组件，overhidden:true的div，附带有其他clip设定能力
+ *  props说明:
+        style:  {Object}    (必选, 响应式) 同div的style, 提供top, left, width, height, transition, transform信息，
+                            但目前不支持borderRaduis
+ *
+ *  expose函数说明:
+ *
+-->
+
+<template>
+  <div v-bind="rMergedDivProps">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { shallowRef, watchEffect, defineProps, withDefaults } from "vue";
+
+const rProps = withDefaults(
+  defineProps<{
+    style: object;
+  }>(),
+  {}
+);
+
+// 响应式变量
+let rMergedDivProps = shallowRef({});
+
+watchEffect(() => {
+  let divStyle = {
+    ...rProps.style,
+    overflow: "hidden",
+  };
+  rMergedDivProps.value = {
+    style: divStyle,
+  };
+
+  // TODO: 未来补充补充其他 data-jsv-vw-xxxx 设置
+});
+</script>

package/utils/JsViewVueWidget/JsvClipDiv/index.ts

@@ -0,0 +1 @@
+export { default as JsvClipDiv } from "./JsvClipDiv.vue"

package/utils/JsViewVueWidget/JsvConnectLine/JsvConnectLine.vue

@@ -75,7 +75,7 @@
 <script setup>
 import  JsvLine  from "../JsvLine/index";
 import { createTexture } from "./ArcLineManager";
-import { shallowRef } from "vue";
+import { shallowRef, onBeforeUnmount } from "vue";
 const props = defineProps({
   startPos: {
     type: Object,
@@ -349,6 +349,10 @@ if (props.radius) {
     ? InflectionPoint.y + startPos3Extra
     : props.endPos.y;
 }
+
+onBeforeUnmount(() => {
+  myLineTexture.UnRef()
+})
 </script>
 
 <style scoped></style>

package/utils/JsViewVueWidget/JsvDriftScope/JsvDriftScope.vue

@@ -0,0 +1,82 @@
+<!--
+ * 【模块 export 内容】
+ * JsvDriftScope: Vue高阶组件，放大镜或者望远镜效果, 分为 frame 区域和 scene 区域，frame是游离的ClipView, scene是被Clip部分
+ *  props说明:
+        top {Number}  (可选, 响应式)组件的top, 不填写时默认值为0
+        left {Number}  (可选, 响应式)组件的left, 不填写时默认值为0
+        frameStyle: {Object}  (可选, 响应式) 透视(裁剪)区域外框的style, 此层次无色透明，但是决定Frame层的变化, 支持以下属性
+                            {top, left, width, height, transition, animation, transform, transformOrigin}
+        scopeStyle: {Object}  (必选, 响应式) 透视(裁剪)区域的div的尺寸style, 会叠加frameStyle已经做的形变, 支持以下属性
+                            {width, height, transition, animation, transform, transformOrigin}
+                            做动画时，frameStyle负责位置变化，scope则主要负责尺寸变化
+ *
+ *  template说明:
+        Frame   透视窗(裁剪层)的外框的装饰层
+        Scene   被透视的内容
+ *  expose函数说明:
+ *
+-->
+
+<template>
+  <div
+    :style="{
+      top: rProps.top,
+      left: rProps.left,
+    }"
+  >
+    <div :style="rMergedFrameStyle" data-jsv-vw-mask-drift="true">
+      <!-- clip div -->
+      <jsv-clip-div :style="rProps.scopeStyle">
+        <!-- scene层, 坐标不跟随clip div, 只从属于主div -->
+        <div data-jsv-vw-mask-dock="true">
+          <slot name="Scene" />
+        </div>
+      </jsv-clip-div>
+      <!-- frame层, 坐标跟随clip div -->
+      <slot name="Frame" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { shallowRef, watchEffect, defineProps, withDefaults } from "vue";
+import JsvClipDiv from "../JsvClipDiv/JsvClipDiv.vue";
+
+interface FrameStyleDefine {
+  top?: number;
+  left?: number;
+  width?: number;
+  height?: number;
+  transition?: string;
+  animation?: string;
+  transform?: string;
+  transformOrigin?: string;
+}
+
+interface ScopeStyleDefine {
+  width: number;
+  height: number;
+  transition?: string;
+  animation?: string;
+  transform?: string;
+  transformOrigin?: string;
+}
+
+const rProps = withDefaults(
+  defineProps<{
+    top?: number;
+    left?: number;
+    frameStyle?: Object; // FrameStyleDefine
+    scopeStyle: Object; // ScopeStyleDefine
+  }>(),
+  { top: 0, left: 0 }
+);
+
+const rMergedFrameStyle = shallowRef({});
+
+watchEffect(() => {
+  rMergedFrameStyle.value = {
+    ...rProps.frameStyle,
+  };
+});
+</script>

package/utils/JsViewVueWidget/JsvDriftScope/index.ts

@@ -0,0 +1 @@
+export { default as JsvDriftScope } from "./JsvDriftScope.vue"

package/utils/JsViewVueWidget/JsvFragShaderView/BrowserJsvFragShaderView.vue

@@ -0,0 +1,48 @@
+<script setup>
+const props = defineProps({
+  style: {
+    type: Object,
+    required: true,
+  },
+  duration: {
+    type: Number,
+    default: -1,
+  },
+  autoplay: {
+    type: Boolean,
+    default: false,
+  },
+  shaderStr: {
+    type: String,
+    required: true,
+  },
+  // [{ name: string, value: number }]
+  uniforms: {
+    type: Array,
+  },
+  // [{ name: string, type: number, resource: object/string }]
+  textures: {
+    type: Array,
+  },
+});
+
+defineExpose({
+  startAnim: () => {},
+  stopAnim: () => {},
+});
+</script>
+<template>
+  <div :style="{
+    left: style.left,
+    top: style.top,
+    width: style.width,
+    height: style.height,
+    backgroundColor: '#00000077',
+    fontSize: 50,
+    color: '#ffffff',
+    textAlign: 'center',
+    lineHeight: style.height,
+  }">
+    浏览器端未支持JsvFragShaderView
+  </div>
+</template>

package/utils/JsViewVueWidget/JsvFragShaderView/JsvFragShaderView.vue

@@ -0,0 +1,145 @@
+<!-- 
+[模块 export 内容]
+  JsvFragShaderView：自定义Fragment shader的组件
+      props说明:
+          style         {Object}    (必填)left, top, width, height
+          shaderStr     {String}    (必填)shader的函数体
+          duration      {int}       动画时长
+          autoplay      {boolean}   自动播放
+          uniforms      {Array}     uniform参数, [{ name: string, value: number }]
+          textures      {Array}     texture参数, [{ name: string, resource: string }]
+      methods:
+          startAnim
+              @description 开始动画
+              @params {int} duration: 动画时长, 默认为props.duration
+          stopAnim
+              @description 停止动画
+      shader函数体说明:
+        参考网站: https://www.shadertoy.com
+        主函数: 
+          void mainImage( out vec4 fragColor, in vec2 fragCoord )
+            @params {vec4} fragColor: 输出的片元颜色
+            @params {vec2} fragCoord: 片元坐标, 左下角为原点, 往右为x正, 往上为y正
+      注意事项:
+        * 盒子端使用OpenGL ES 2.0版本, 而网站 https://www.shadertoy.com 上使用WebGL, glsl支持的函数和操作符有区别. 
+        * 由于坐标系的差异, texture()采样函数需要替换为jsvTexture2D()
+        * 盒子端的精度有限, 可能会出现精度导致的计算错误
+
+ -->
+<script setup>
+import { onMounted, onBeforeUnmount } from "vue";
+import { Forge } from "@shijiu/jsview/dom/jsv-forge-define";
+import ForgeHandles from "../../JsViewVueTools/ForgeHandles";
+
+const props = defineProps({
+  style: {
+    type: Object,
+    required: true,
+  },
+  duration: {
+    type: Number,
+    default: -1,
+  },
+  autoplay: {
+    type: Boolean,
+    default: false,
+  },
+  shaderStr: {
+    type: String,
+    required: true,
+  },
+  // [{ name: string, value: number }]
+  uniforms: {
+    type: Array,
+  },
+  // [{ name: string, type: number, resource: string }]
+  textures: {
+    type: Array,
+  },
+});
+
+//uniforms
+let uniformList = [];
+if (props.uniforms) {
+  for (let item of props.uniforms) {
+    uniformList.push({
+      name: item.name,
+      type: 1,
+      value: item.value,
+    });
+  }
+}
+
+//prepare texture
+let textureList = [];
+if (props.textures) {
+  const texture_manager = ForgeHandles.TextureManager;
+  for (let item of props.textures) {
+    if (typeof item.resource == "string") {
+      let image_url = item.resource;
+      if (item.resource && item.resource.trim().indexOf("url(") === 0) {
+        image_url = new window.JsView.Dom.UrlRef(image_url).href;
+      }
+      const texture = texture_manager.GetImage2(
+        image_url,
+        false,
+        null,
+        "RGB_8888",
+        null
+      );
+      textureList.push({
+        name: item.name,
+        id: texture.TexId,
+      });
+    }
+  }
+}
+
+const fragShaderView = new Forge.FragShaderView();
+fragShaderView.SetShaderInfo(
+  props.shaderStr,
+  uniformList,
+  textureList,
+  (state, detail) => {
+    console.log("haha", state, detail);
+  }
+);
+let viewId = Forge.sViewStore.add(new Forge.ViewInfo(fragShaderView, ""));
+
+const { left, top, width, height } = props.style;
+
+const startAnim = (d) => {
+  let duration = typeof d == "number" ? d : props.duration;
+  if (duration > 0) {
+    let shaderAnimation = new Forge.ShaderAnimation(duration, null);
+    fragShaderView.StartAnimation(shaderAnimation);
+  }
+};
+
+const stopAnim = () => {
+  fragShaderView?.StopAnimation();
+};
+
+onMounted(() => {
+  if (props.autoplay) {
+    startAnim(props.duration);
+  }
+});
+
+onBeforeUnmount(() => {
+  if (viewId != -1) {
+    Forge.sViewStore.remove(viewId);
+    viewId = -1;
+  }
+});
+defineExpose({
+  startAnim,
+  stopAnim,
+});
+</script>
+<template>
+  <div
+    :style="{ left, top, width, height }"
+    :data-jsv-vw-innerview="viewId"
+  ></div>
+</template>

package/utils/JsViewVueWidget/JsvFragShaderView/index.js

@@ -0,0 +1,18 @@
+/*
+ * @Author: ChenChanghua
+ * @Date: 2021-10-13 15:12:45
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2021-11-22 14:24:36
+ * @Description: file content
+ */
+//! 考虑到.vue文件除了export default的component外，还有可能export其他对象,因此使用import * as
+import * as JsvFragShaderView from "./JsvFragShaderView.vue";
+
+let _JsvFragShaderView;
+if (window.JsView) {
+  _JsvFragShaderView = JsvFragShaderView.default;
+} else {
+  const BrowserJsvFragShaderView = await import("./BrowserJsvFragShaderView.vue");
+  _JsvFragShaderView = BrowserJsvFragShaderView.default;
+}
+export default _JsvFragShaderView;

package/utils/JsViewVueWidget/JsvFreeMoveActor/ActionRefObject.ts

@@ -1,6 +1,6 @@
 
 
 export default class ActionRefObject {
-    public token: number;
+    public token: number = 0;
     public used: boolean = false;
 }