@shijiu/jsview-vue 2.2.128 → 2.2.373

package/utils/JsViewVueTools/JsvTextureStore/Texture.ts

@@ -13,6 +13,7 @@ export class TextureBase {
 
     protected addToStore() {
         this.storeName = this.getStoreName();
+        this.textureRef.DisableAutoRecycle(); // 被store管理的，取消自动清理
         sStore.addToStore(this.storeName, this);
     }
 

package/utils/JsViewVueTools/TextureManagerTools.ts

@@ -0,0 +1,17 @@
+
+function GetColorTexture(manager_ref: any, color_define: string) {
+    return manager_ref.GetColorTexture(color_define);
+}
+
+function GetImage(manager_ref: any, image_url: string) {
+    return manager_ref.GetImage2(image_url, false, null, "RGB_8888", null)
+}
+
+let ForgeTextureApis = {
+    GetColorTexture,
+    GetImage
+}
+
+export {
+    ForgeTextureApis,
+}

package/utils/JsViewVueTools/index.js

@@ -5,24 +5,27 @@
  */
 
 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 "./ConstSymbol.ts"
-export * from "./ForgeConstDefine.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"
+export * from "./TextureManagerTools"
+export * from "./FeatureActive"
+export * from "./JsvTextureLoadTool"

package/utils/JsViewVueWidget/JsvActorMove/JsvActorMove.vue

@@ -7,6 +7,8 @@
 -->
 
 <!--
+ * @file
+ *
  * 【模块 export 内容】
  * JsvActorMove：单轴(X 或 Y)运动控制控件，可控制完成单方向的匀速运动和变速运动（抛物运动），
  *               若想进行X和Y轴同时的运动，可以通过运动分解后的两个JsvActorMove进行组合来实现

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

@@ -81,8 +81,8 @@ const play = () => {
   viewer?.play(props.loopType, props.loopInfo);
 };
 
-const stop = () => {
-  viewer?.stop();
+const stop = (frameCount = -1) => {
+  viewer?.stop(frameCount);
 };
 
 onMounted(() => {

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

@@ -7,6 +7,8 @@
 -->
 
 <!--
+ * @file
+ *
  * 【模块 export 内容】
  * JsvApic：Vue高阶组件，控制动图播放
  *      prop说明:
@@ -21,8 +23,14 @@
 -->
 <script>
 import ForgeHandles from "../../../JsViewVueTools/ForgeHandles";
-import { LoopType } from "../JsvCommonLoopToolBase";
-
+// import { LoopType } from "../JsvCommonLoopToolBase";
+export const LoopType = {
+  LOOP_DEFAULT: 0,
+  LOOP_INFINITE: 1,
+  LOOP_FINITE: 2,
+  LOOP_PART: 3,
+  LOOP_SINGLE: 4,
+};
 export default {
   props: {
     src: String,
@@ -79,12 +87,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 +110,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

@@ -104,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

@@ -7,6 +7,8 @@
 -->
 
 <!--
+ * @file
+ *
  * 【模块 export 内容】
  * JsvApic：Vue高阶组件，控制动图播放
  *      prop说明:
@@ -29,7 +31,16 @@
 -->
 <script>
 import ForgeHandles from "../../../JsViewVueTools/ForgeHandles";
-import { LoopType } from "../JsvCommonLoopToolBase";
+// import { LoopType } from "../JsvCommonLoopToolBase";
+
+//为了打包后少加载一个文件这里单独定义
+const LoopType = {
+  LOOP_DEFAULT: 0,
+  LOOP_INFINITE: 1,
+  LOOP_FINITE: 2,
+  LOOP_PART: 3,
+  LOOP_SINGLE: 4,
+};
 
 export default {
   props: {
@@ -88,12 +99,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 +119,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/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,44 @@
+<!--
+ * @file
+ *
+ * 【模块 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

@@ -1,4 +1,6 @@
 <!--
+ * @file
+ *
  * 【模块 export 内容】
  * JsvConnectLine：Vue高阶组件，由JsvLine组件变化而来，用于连接两个区域的线条。
  *      props说明(注意:全部属性非响应式, 需要变更时用 key 来触发重绘):
@@ -75,7 +77,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 +351,10 @@ if (props.radius) {
     ? InflectionPoint.y + startPos3Extra
     : props.endPos.y;
 }
+
+onBeforeUnmount(() => {
+  myLineTexture.UnRef()
+})
 </script>
 
 <style scoped></style>

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

@@ -0,0 +1,84 @@
+<!--
+ * @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则主要负责尺寸变化
+ *
+ *  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/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说明: