@shijiu/jsview-vue 2.2.201 → 2.2.373

package/utils/JsViewVueWidget/JsvDragBox/JsvDragBox.vue

@@ -0,0 +1,219 @@
+<!--
+ * @file
+ *
+ * 【模块 export 内容】
+ * JsvDragBox：在一定限制区域内拖动的容器
+ *  props说明:
+ *      boxRect   {Object}  (必填) 限制区域 { left?: number, top?: number, width: number, height: number }
+ *      dragRect  {Object}  (必填) 拖拽区域 { left?: number, top?: number, width: number, height: number }
+ *  expose函数说明:
+ *      定义: type CBK = ({left: number, top: number}) => void;
+ *      setSensor {(callback: CBK, sensitivity: number) => void} 
+ *          设置运动后触发的回调, sensitivity为回调敏感度, 每移动多少像素进行回调，适当放大(推荐10以上)可以极大减小对js回调过多引起的性能降低 
+ *      setTouchCallback { (onDragStart: CBK, onDragRelease: CBK) => void }
+ *          设置触控开始和结束回调
+ *      moveTo { (left: number, top: number) => void },
+ *          将拖拽块移动到指定位置
+ *      getPosition { () => {left: number, top: number} }
+ *          获取当前拖拽块的位置
+ *
+-->
+
+<script setup>
+import ActControl from "../../JsViewVueWidget/JsvFreeMoveActor/ActorControl";
+import { ForgeConst } from "../../JsViewVueTools/ForgeConstDefine";
+import { shallowRef, onMounted, computed } from "vue";
+
+const props = defineProps({
+  boxRect: {
+    type: Object,
+    require: true,
+    validator(value) {
+      return (
+        typeof value?.width == "number" && typeof value?.height == "number"
+      );
+    },
+  },
+  dragRect: {
+    type: Object,
+    require: true,
+    validator(value) {
+      return (
+        typeof value?.width == "number" && typeof value?.height == "number"
+      );
+    },
+  },
+});
+
+const valide = true;
+if (
+  props.boxRect.width <= props.dragRect.width ||
+  props.boxRect.height <= props.dragRect.height
+) {
+  console.error("JsvDragBox: box size must be large than drag size.");
+  valide = false;
+}
+
+let rMainDiv = shallowRef(null);
+let cController = new ActControl();
+const cWallConditionGroup = 1;
+const cSensorConditionGroup = 2;
+const rBoxStyle = computed(() => {
+  return {
+    left: props.boxRect.left ?? 0,
+    top: props.boxRect.top ?? 0,
+    width: props.boxRect.width,
+    height: props.boxRect.height,
+  };
+});
+
+let vLeft = 0;
+let vTop = 0;
+let vSensitivity = 10;
+let vSensorCallback = null;
+let vOnDragStart = null;
+let vOnDragRelease = null;
+
+function initDragBox() {
+  cController.run((cmds) => [
+    cmds.state().removeConditionByGroup(cWallConditionGroup),
+    cmds
+      .condition(cWallConditionGroup, true)
+      .boxPosition(
+        0,
+        0,
+        props.boxRect.width - props.dragRect.width,
+        props.boxRect.height - props.dragRect.height
+      )
+      .then([cmds.action().stopMoving(true)]),
+  ]);
+}
+
+function onSensor(pos) {
+  vLeft = pos.xPos;
+  vTop = pos.yPos;
+  vSensorCallback?.({ left: pos.xPos, top: pos.yPos });
+}
+
+function setSensor(callback, sensitivity) {
+  if (!callback) {
+    cController.run((cmds) => [
+      cmds.state().removeConditionByGroup(cSensorConditionGroup),
+    ]);
+    return;
+  }
+
+  vSensorCallback = callback;
+  if (sensitivity != vSensitivity) {
+    cController.run((cmds) => [
+      cmds.state().removeConditionByGroup(cSensorConditionGroup),
+    ]);
+    if (callback != null) {
+      cController.run((cmds) => [
+        cmds
+          .condition(cSensorConditionGroup, true)
+          .onMovement(sensitivity) // 设置x或y移动超过12时才触发回调，以此减少回调的频次，规避js的性能影响
+          .then([onSensor]),
+      ]);
+    }
+  }
+}
+
+function setTouchCallback(onDragStart, onDragEnd) {
+  vOnDragStart = onDragStart;
+  vOnDragRelease = onDragEnd;
+}
+
+function moveTo(left, top) {
+  if (typeof left !== "number" || typeof top !== "number") {
+    console.error(
+      `JsvDragBox: moveTo params type must be number, current params:{${left}, ${top}}`
+    );
+    return;
+  }
+  cController.run((cmds) => [cmds.action().teleportTo(left, top)]);
+}
+
+function getPosition() {
+  return { left: vLeft, top: vTop };
+}
+
+onMounted(() => {
+  if (!valide) {
+    return;
+  }
+  let divView = rMainDiv.value.jsvGetProxyView();
+  cController.bindForgeView(divView, true);
+  divView.DragEnables?.(
+    ForgeConst.DragFlags.TOUCH_RECV_MOVE_BIT |
+      // (cEnableFling ? ForgeConst.DragFlags.TOUCH_RECV_FLING_BIT : 0) |
+      ForgeConst.DragFlags.TOUCH_RECV_FIRST_START |
+      ForgeConst.DragFlags.TOUCH_RECV_LAST_END
+  ); // 激活 Move | TouchDown | TouchEnd
+
+  initDragBox();
+
+  let initLeft =
+    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) {
+    cController.run((cmds) => [cmds.action().teleportTo(initLeft, initTop)]);
+  }
+
+  cController.run((cmds) => [
+    cmds
+      .condition(undefined, true)
+      .onDragStart()
+      .then([
+        (data) => {
+          vLeft = data.xPos;
+          vTop = data.yPos;
+          vOnDragStart?.({
+            left: data.xPos,
+            top: data.yPos,
+          });
+        },
+      ]),
+    cmds
+      .condition(undefined, true)
+      .onTouchRelease()
+      .then([
+        (data) => {
+          vLeft = data.xPos;
+          vTop = data.yPos;
+          vOnDragRelease?.({
+            left: data.xPos,
+            top: data.yPos,
+          });
+        },
+      ]),
+    cmds
+      .condition(cSensorConditionGroup, true)
+      .onMovement(10) // 默认设置x或y移动超过10时才触发回调，以此减少回调的频次，规避js的性能影响
+      .then([onSensor]),
+  ]);
+});
+
+defineExpose({
+  setSensor,
+  setTouchCallback,
+  moveTo,
+  getPosition,
+});
+</script>
+
+<template>
+  <div :style="rBoxStyle">
+    <div
+      ref="rMainDiv"
+      :style="{
+        left: 0,
+        top: 0,
+        width: props.dragRect.width,
+        height: props.dragRect.height,
+      }"
+    >
+      <slot></slot>
+    </div>
+  </div>
+</template>

package/utils/JsViewVueWidget/JsvDriftScope/JsvDriftScope.vue

@@ -1,18 +1,20 @@
 <!--
+ * @file
+ *
  * 【模块 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则主要负责尺寸变化
+ *      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   被透视的内容
+ *      Frame   透视窗(裁剪层)的外框的装饰层
+ *      Scene   被透视的内容
  *  expose函数说明:
  *
 -->

package/utils/JsViewVueWidget/JsvFilterView.vue

@@ -1,4 +1,6 @@
 <!--
+ * @file
+ *
  * 【模块 export 内容】
  * JsvFilterView：黑白滤镜组件
  *      props说明:

package/utils/JsViewVueWidget/JsvFlexCell/JsvFlexDiv.vue

@@ -6,6 +6,8 @@
 -->
 
 <!--
+ * @file
+ *
  * 【模块 export 内容】
  *  JsvFlexDiv: 包装成一个支持flex属性的div
  *      props说明:
@@ -19,11 +21,12 @@
  *                  alignItems: flex-start|flex-end|center|stretch  默认center
  *                                  副轴方向单行内的对齐方式，例如主轴为行时，项目在每行中竖直方向的对齐
  *                  alignContent: flex-start|flex-end|center  默认flex-start
- *                                  副轴方向多行内容总体的对齐方式，例如主轴为行时，项目在每行中竖直方向的对齐
+ *                                副轴方向多行内容总体的对齐方式，例如主轴为行时，项目在每行中竖直方向的对齐
+ *                                若未设置，当遇到多行场景，行为为flex-start + 剩余空间每行平均瓜分(特别适合单行填充整个副轴空间的需求) 
  *              作为item(二级container):
  *                  alignSelf: auto|flex-start|flex-end|center|stretch  默认auto, 覆盖container的alignItems设置
  *              特别注意: 这些属性会引起位置对齐问题, 所以会自动去掉: "overflow:hidden"
- *          askSize: boolean  设置会跟进flex的尺寸变化，但会降低性能
+ *          askSize: boolean  设置会跟进flex的尺寸变化，设置后可通过getWidth/getHeight拿到尺寸，但会降低性能
  *          onSized: Function 比askSize更进一步，可以通过回调知道尺寸变化后的时机，回调参数(width, height)为flex后的尺寸
  *
  *      expose说明:

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

@@ -1,4 +1,6 @@
 <script setup>
+import { onMounted, onUnmounted } from "vue";
+
 const props = defineProps({
   style: {
     type: Object,
@@ -24,25 +26,50 @@ const props = defineProps({
   textures: {
     type: Array,
   },
+  onEnd: {
+    type: Function,
+  },
+  onStart: {
+    type: Function,
+  },
+});
+
+let vMounted = false;
+
+onMounted(() => {
+  vMounted = true;
+});
+
+onUnmounted(() => {
+  vMounted = false;
 });
 
 defineExpose({
-  startAnim: () => {},
+  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,
-  }">
+  <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>