@shijiu/jsview-vue 2.2.128 → 2.2.373

package/utils/JsViewVueWidget/JsvFlexCell/JsvScreenFlex.vue

@@ -0,0 +1,145 @@
+<!--
+ * @file
+ *
+ * 【模块 export 内容】
+ *  JsvScreenFlex: 包装成一个支持flex属性的div, 背景图片等同于objectFit:cover的模式
+ *      props说明:
+ *          style: 不能设置top/left/height/width, 这些信息自动来自屏幕的宽高
+ *                 主要用于设置flex的属性，目前支持属性如下：
+ *                 flexDirection: row|row-reverse|column|column-reverse  默认row, 决定主轴为行还是列，正向还是反向
+ *                 flexWrap: nowrap|wrap  默认nowrap, 主轴方向是否换行
+ *                 justifyContent: flex-start|flex-end|center  默认flex-start
+ *                                 主轴对齐方式(与direction相关决定start为左还是右)
+ *                 alignItems: flex-start|flex-end|center|stretch  默认center
+ *                                 副轴方向单行内的对齐方式，例如主轴为行时，项目在每行中竖直方向的对齐
+ *                 alignContent: flex-start|flex-end|center  默认flex-start
+ *                                 副轴方向多行内容总体的对齐方式，例如主轴为行时，项目在每行中竖直方向的对齐
+ *              特别注意: 这些属性会引起位置对齐问题, 所以会自动去掉: "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)
+ *
+ *      expose说明:
+ *          getWidth():  当askSize或者onSize生效时，获取元素的宽度
+ *          getHeight():  当askSize或者onSize生效时，获取元素的高度
+ *                   
+-->
+<script setup>
+import { Forge } from "@shijiu/jsview/dom/jsv-forge-define";
+import { shallowRef, watchEffect, onUnmounted } from "vue";
+import JsvFlexDiv from "./JsvFlexDiv.vue";
+import { ForgeTextureApis } from "../../JsViewVueTools/TextureManagerTools.ts";
+import ForgeHandles from "../../JsViewVueTools/ForgeHandles";
+
+const rProps = defineProps({
+  style: Object,
+  askSize: {
+    type: Boolean,
+    default: false,
+  },
+  onSized: {
+    type: Function,
+    default: null,
+  },
+  background: {
+    type: String,
+    default: null,
+  },
+});
+
+// 此div的宽度是固定的全屏尺寸，在jsview体系下，全屏的宽度就是designMapWidth
+const cDivWidth = Forge.sRenderBridge.GetScreenInfo().designedWidth;
+
+let rConfig = shallowRef({});
+
+let vTextreStringCache = null; // 用于判断是否需要texture更换的flag
+let vStretchViewRef = null;
+
+// 创建AutoStretchView来自动识别JsView的视窗大小
+const fncBuildForgeView = () => {
+  vStretchViewRef = new Forge.AutoStretchView();
+  return Forge.sViewStore.add(new Forge.ViewInfo(vStretchViewRef, null));
+};
+let vViewId = fncBuildForgeView();
+
+// 规范化style和入参的内容
+watchEffect(() => {
+  if (rProps.style) {
+    const { top, left, width, height, ...others } = rProps.style;
+    rConfig.value.style = {
+      width: cDivWidth, // 全屏的宽度就是designMapWidth, 并且高度作为自动不进行设置
+      ...others,
+    };
+  }
+  rConfig.value.askSize = rProps.askSize;
+  rConfig.value.onSized = rProps.onSized;
+
+  if (rProps.background != vTextreStringCache) {
+    // 构建背景Texture
+    vTextreStringCache = rProps.background;
+
+    let texture_setting = null;
+
+    if (vTextreStringCache != null) {
+      const texture_manager = ForgeHandles.TextureManager;
+      if (
+        vTextreStringCache.trim().startsWith("#") ||
+        vTextreStringCache.trim().startsWith("rgba")
+      ) {
+        texture_setting = new Forge.TextureSetting(
+          ForgeTextureApis.GetColorTexture(texture_manager, vTextreStringCache)
+        );
+      } else {
+        const base_url = vTextreStringCache;
+        let image_url = base_url;
+        if (base_url && base_url.indexOf("http") === 0) {
+          image_url = base_url;
+        } else if (window.JsView?.Dom.UrlRef) {
+          image_url = new window.JsView.Dom.UrlRef(base_url).href;
+        }
+        texture_setting = new Forge.ExternalTextureSetting(
+          ForgeTextureApis.GetImage(texture_manager, image_url)
+        );
+      }
+    }
+    vStretchViewRef.ResetTexture(texture_setting);
+  }
+});
+
+onUnmounted(() => {
+  if (vViewId != -1) {
+    // 清理viewStore, 防止泄漏问题
+    Forge.sViewStore.remove(vViewId);
+    vViewId = -1;
+  }
+});
+
+// 使用内置的flex节点来进行尺寸变化的回调和完成其子内容的flex处理
+let rStretchedFlex = shallowRef(null);
+
+defineExpose({
+  // TODO: PC模拟环境中目前没有浏览器的类似ResizeObserver接口
+  //       可以监听到left/ top变化，所以先关闭Left / Top的获取
+  // getLeft: () => {
+  //   return SizeX.value;
+  // },
+  // getTop: () => {
+  //   return SizeY.value;
+  // },
+
+  getWidth: () => {
+    return rStretchedFlex.value?.getWidth();
+  },
+  getHeight: () => {
+    return rStretchedFlex.value?.getHeight();
+  },
+});
+</script>
+
+<template>
+  <div :data-jsv-vw-innerview="vViewId">
+    <jsv-flex-div ref="rStretchedFlex" v-bind="{ ...rConfig }">
+      <slot />
+    </jsv-flex-div>
+  </div>
+</template>

package/utils/JsViewVueWidget/JsvFlexCell/index.js

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

package/utils/JsViewVueWidget/JsvFragShaderView/BrowserJsvFragShaderView.vue

@@ -0,0 +1,75 @@
+<script setup>
+import { onMounted, onUnmounted } from "vue";
+
+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,
+  },
+  onEnd: {
+    type: Function,
+  },
+  onStart: {
+    type: Function,
+  },
+});
+
+let vMounted = false;
+
+onMounted(() => {
+  vMounted = true;
+});
+
+onUnmounted(() => {
+  vMounted = false;
+});
+
+defineExpose({
+  startAnim: () => {
+    props.onStart?.();
+    setTimeout(() => {
+      if (vMounted) {
+        props.onEnd?.();
+      }
+    }, 0);
+  },
+  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,293 @@
+<script>
+/**
+ * @file
+ *
+ * [模块 export 内容]
+ *   JsvFragShaderView：自定义Fragment shader的组件
+ *       props说明:
+ *           @prop {Object} style  (必填)left, top, width, height
+ *           @prop {String}     shaderStr      (必填)shader的函数体
+ *           @prop {int}        duration       动画时长
+ *           @prop {boolean}    autoplay       自动播放
+ *           @prop {Array}      uniforms       uniform参数, [{ name: string, value: number }]
+ *           @prop {Array}      textures       texture参数, [{ name: string, resource: string }]
+ *           @prop {() => void} onStart        动画开始回调
+ *           @prop {(int,boolean) => void} onEnd
+ *                                动画结束回调,
+ *                                返回值1号 int: 回到参数为动画的序列号，和startAnim的返回值匹配
+ *                                返回值2号 boolean: true: 动画正常结束，false:动画因为cancel而结束
+ *       methods:
+ *           @method startAnim
+ *               @description 开始动画
+ *               @param {int} duration: 动画时长, 默认为props.duration
+ *               @param {()=>void} onTimeout: 如果到达duration的时长，动画因为资源问题还没开始动画的时会回调此函数
+ *               @return {int} 所开动画的序列号，用于和onEnd收到的值匹配
+ *           @method stopAnim
+ *               @description 停止动画
+ *       shader函数体说明:
+ *         参考网站: https://www.shadertoy.com
+ *         主函数:
+ *           void mainImage( out vec4 fragColor, in vec2 fragCoord )
+ *             @params {vec4} fragColor: 输出的片元颜色
+ *             @params {vec2} fragCoord: 片元坐标, 左下角为原点, 往右为x正, 往上为y正
+ *         可用的uniform:
+ *           iResolution:  {vec3}  view的大小, vec3(width, height, 0)
+ *           iTime:        {float} 动画时间
+ *           iDuration:    {float} 动画总时间
+ *       注意事项:
+ *         * 盒子端使用OpenGL ES 2.0版本, 而网站 https://www.shadertoy.com 上使用WebGL, glsl支持的函数和操作符有区别.
+ *         * 由于坐标系的差异, texture()采样函数需要替换为jsvTexture2D()
+ *         * 盒子端的精度有限, 可能会出现精度导致的计算错误
+ */
+</script>
+
+<script setup>
+import { onMounted, onUnmounted, shallowRef } from "vue";
+import { Forge } from "@shijiu/jsview/dom/jsv-forge-define";
+import ForgeHandles from "../../JsViewVueTools/ForgeHandles";
+import {
+  FeatureNames,
+  JsvUseFeature,
+} from "../../JsViewVueTools/FeatureActive.ts";
+import { JsvTextureLoadTool } from "../../JsViewVueTools/JsvTextureLoadTool";
+
+const rProps = 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,
+  },
+  onEnd: {
+    type: Function,
+  },
+  onStart: {
+    type: Function,
+  },
+});
+
+// 激活引擎中的功能支持
+JsvUseFeature("JsvFragShaderView", FeatureNames.CustomFragShader);
+
+let rAnimRunning = shallowRef(false); // 动画是否在执行，画面只在动画进行时进行显示
+let vPreloadHandler = null;
+let vPreloadDone = false;
+let vStartingPromise = null; // 用于后加载启动处理
+let vStartToken = 0; // 计数，规避onEnd和start的不匹配
+let vStartAnimTimeoutId = -1; // 动画启动的timeout句柄
+
+//uniforms
+let cUniformList = [];
+if (rProps.uniforms) {
+  for (let item of rProps.uniforms) {
+    cUniformList.push({
+      name: item.name,
+      type: 1,
+      value: item.value,
+    });
+  }
+}
+
+//prepare texture
+let cTextureList = [];
+if (rProps.textures) {
+  const texture_manager = ForgeHandles.TextureManager;
+  let preload_textures = [];
+  for (let item of rProps.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
+      );
+      cTextureList.push({
+        name: item.name,
+        id: texture.TexId,
+      });
+      preload_textures.push(new JsvTextureLoadTool.ItemSet(image_url));
+    }
+
+    // 对图片进行预加载，等所有图片预加载完成后才能开始动画，以确保动画的完整性
+
+    vPreloadHandler = JsvTextureLoadTool.preload(preload_textures, () => {
+      vPreloadDone = true;
+
+      // 加载完成后直接释放句柄即可
+      vPreloadHandler.recycleResource();
+      vPreloadHandler = null;
+
+      if (vStartingPromise != null) {
+        vStartingPromise.resolve();
+      }
+    });
+    if (vPreloadHandler == null) {
+      // 无需要preload的内容，直接视为preloadDone
+      vPreloadDone = true;
+      if (vStartingPromise != null) {
+        vStartingPromise.resolve();
+      }
+    }
+  }
+}
+
+const cFragShaderView = new Forge.FragShaderView();
+cFragShaderView.SetShaderInfo(
+  rProps.shaderStr,
+  cUniformList,
+  cTextureList,
+  null
+  // (state, detail) => {
+  //   console.log("set shader reuslt: ", state, detail);
+  // }
+);
+let vViewId = Forge.sViewStore.add(new Forge.ViewInfo(cFragShaderView, ""));
+
+const { left: cLeft, top: cTop, width: cWidth, height: cHeight } = rProps.style;
+
+function clearStartAnimTimeout() {
+  if (vStartAnimTimeoutId != -1) {
+    clearTimeout(vStartAnimTimeoutId);
+    vStartAnimTimeoutId = -1;
+  }
+}
+
+const startAnim = (alt_duration, on_timeout_func) => {
+  vStartingPromise = null; // 重置promise回执处理
+  rAnimRunning.value = false;
+  vStartToken++;
+
+  let track_token = vStartToken;
+
+  // 确认duration的具体值
+  let duration =
+    typeof alt_duration == "number" ? alt_duration : rProps.duration;
+
+  // 制作timeout回调
+  clearStartAnimTimeout();
+  if (typeof on_timeout_func == "function" && !vPreloadDone) {
+    // 启动动画时，加载未结束
+    vStartAnimTimeoutId = setTimeout(() => {
+      vStartAnimTimeoutId = -1;
+      if (!rAnimRunning.value) {
+        // 超时后动画仍未开始则执行timeout回调
+        on_timeout_func();
+      }
+    }, Math.max(500, duration)); // 最低延迟500毫秒,避免0ms的时序问题
+  }
+
+  // 等待图片加载完成后进行
+  new Promise((resolve, reject) => {
+    if (!vPreloadDone) {
+      vStartingPromise = {
+        resolve,
+        reject,
+      };
+    } else {
+      resolve();
+    }
+  })
+    .then(() => {
+      if (vStartToken != track_token) {
+        // 序列不匹配
+        return;
+      }
+
+      vStartingPromise = null; // 重置promise回执处理
+
+      if (duration > 0) {
+        let shaderAnimation = new Forge.ShaderAnimation(duration, null);
+        shaderAnimation.Enable(0x1); // ReleaseAfterEndCallback
+        shaderAnimation.SetAnimationListener(
+          new Forge.AnimationListener(
+            null /* animation的onStart目前不调用 */,
+            (status) => {
+              if (vStartToken == track_token) {
+                // 序列匹配时才调整全局状态
+                rAnimRunning.value = false; // 动画结束，停止展示
+              }
+              rProps.onEnd?.(track_token, status);
+            },
+            null
+          )
+        );
+        rProps.onStart?.();
+        cFragShaderView.StartAnimation(shaderAnimation);
+      }
+
+      clearStartAnimTimeout();
+      rAnimRunning.value = true; // 动画启动后，展示界面，无论是否动画是否有时长
+    })
+    .catch(() => {
+      vStartingPromise = null;
+    });
+
+  return vStartToken;
+};
+
+const stopAnim = () => {
+  if (rAnimRunning.value) {
+    cFragShaderView?.StopAnimation();
+  } else {
+    if (vStartingPromise != null) {
+      vStartingPromise.reject();
+    }
+  }
+};
+
+onMounted(() => {
+  if (rProps.autoplay) {
+    startAnim(rProps.duration);
+  }
+});
+
+onUnmounted(() => {
+  clearStartAnimTimeout();
+
+  if (vViewId != -1) {
+    Forge.sViewStore.remove(vViewId);
+    vViewId = -1;
+  }
+
+  if (vPreloadHandler != null) {
+    // 当preload句柄仍然未加载完并释放掉的场景
+    vPreloadHandler.recycleResource();
+    vPreloadHandler = null;
+  }
+});
+
+defineExpose({
+  startAnim,
+  stopAnim,
+});
+</script>
+<template>
+  <div
+    v-show="rAnimRunning"
+    :style="{ left: cLeft, top: cTop, width: cWidth, height: cHeight }"
+    :data-jsv-vw-innerview="vViewId"
+  ></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;