@shijiu/jsview-vue 2.1.200 → 2.1.340-test.0

package/utils/JsViewVueWidget/JsvConnectLine/JsvConnectLine.vue

@@ -0,0 +1,354 @@
+<!--
+ * 【模块 export 内容】
+ * JsvConnectLine：Vue高阶组件，由JsvLine组件变化而来，用于连接两个区域的线条。
+ *      props说明(注意:全部属性非响应式, 需要变更时用 key 来触发重绘):
+ *          startPos         {Object}   (必填) 起始位置，属性:x,y
+ *          endPos           {Object}   (必填) 结束位置, 属性:x,y
+ *          lineWidth        {Number}   (必填) 线条的粗细程度
+ *          backgroundColor  {String}   背景颜色，默认值:白色#FFFFFF
+ *          radius           {Number}   圆角半径，若半径超过起点终点距离的一半，则没有曲线为直线。
+ *          isVertical       {Boolean}  (必填) true为y轴拐点,false为x轴拐点
+ *          percent          {Number}   (必填) 承接isVertical，百分比拐点。
+ *          RoundSet         {Object}   圆角配置对象，可选开始拐点和结束拐点，false代表不配置，true代表配置。属性值：start，end
+ * 
+-->
+<template>
+  <div v-if="isOneDirection">
+    <JsvLine
+      :startPos="props.startPos"
+      :endPos="props.endPos"
+      :lineWidth="lineWidth"
+      :backgroundColor="props.backgroundColor"
+    ></JsvLine>
+  </div>
+  <div v-else>
+    <!-- 第一根线 -->
+    <JsvLine
+      :startPos="props.startPos"
+      :endPos="endPos1"
+      :lineWidth="lineWidth"
+      :backgroundColor="props.backgroundColor"
+    ></JsvLine>
+    <!-- 第二根线 -->
+    <JsvLine
+      :startPos="startPos2"
+      :endPos="endPos2"
+      :lineWidth="lineWidth"
+      :backgroundColor="props.backgroundColor"
+    ></JsvLine>
+    <!-- 第三根线 -->
+    <JsvLine
+      :startPos="startPos3"
+      :endPos="props.endPos"
+      :lineWidth="lineWidth"
+      :backgroundColor="props.backgroundColor"
+    ></JsvLine>
+    <!-- 起始圆弧 -->
+    <div
+      v-if="start"
+      :style="{
+        width: props.radius + lineWidth / 2 + 2,
+        height: props.radius + lineWidth / 2 + 2,
+        left: startCircleLeft,
+        top: startCircleTop,
+        backgroundImage: `jsvtexturestore://${sourceId}`,
+        transform: `rotate3d(0,0,1, ${angleStart}deg)`,
+        transformOrigin: 'left top',
+      }"
+    ></div>
+    <!-- 结束圆弧 -->
+    <div
+      v-if="end"
+      :style="{
+        width: props.radius + lineWidth / 2 + 2,
+        height: props.radius + lineWidth / 2 + 2,
+        left: endCircleLeft,
+        top: endCircleTop,
+        backgroundImage: `jsvtexturestore://${sourceId}`,
+        transform: `rotate3d(0,0,1, ${angleEnd}deg)`,
+        transformOrigin: 'left top',
+      }"
+    ></div>
+  </div>
+</template>
+
+<script setup>
+import  JsvLine  from "../JsvLine/index";
+import { createTexture } from "./ArcLineManager";
+import { shallowRef } from "vue";
+const props = defineProps({
+  startPos: {
+    type: Object,
+    require: true,
+  },
+  endPos: {
+    type: Object,
+    require: true,
+  },
+  lineWidth: {
+    type: Number,
+    require: true,
+  },
+  isVertical: {
+    type: Boolean,
+    require: true,
+  },
+  percent: {
+    type: Number,
+    require: true,
+  },
+  backgroundColor: {
+    type: String,
+  },
+  radius: {
+    type: Number,
+  },
+  RoundSet: {
+    type: Object,
+    default: {
+      start: false,
+      end: false,
+    },
+  },
+});
+//检查传值是否合法
+if (props.percent < 0 || props.percent > 100) {
+  throw new Error("请传入正确的百分比值：0-100！");
+}
+let isNormal = shallowRef(false);
+let isOneDirection = shallowRef(false);
+let angleStart = 0;
+let angleEnd = 0;
+let start = shallowRef(false);
+let end = shallowRef(false);
+let endPos1 = {};
+let startPos2 = {};
+let endPos2 = {};
+let startPos3 = {};
+let endCircleLeft = 0;
+let endCircleTop = 0;
+let startCircleLeft = 0;
+let startCircleTop = 0;
+//单数线宽强制变为双数线宽
+let lineWidth;
+if (props.lineWidth % 2 == 0) {
+  lineWidth = props.lineWidth;
+} else {
+  lineWidth = props.lineWidth + 1;
+}
+//首先判断起始点终点是否在同一个位置
+if (props.startPos.x == props.endPos.x || props.startPos.y == props.endPos.y) {
+  isOneDirection.value = true;
+} else {
+  isOneDirection.value = false;
+}
+//抗锯齿处理
+let myLineTexture = null;
+let sourceId = null;
+myLineTexture = createTexture(lineWidth, props.backgroundColor, props.radius);
+sourceId = myLineTexture.getSourceId();
+
+//转折点坐标
+let InflectionPoint = {
+  x: props.isVertical
+    ? props.startPos.x
+    : props.startPos.x +
+      ((props.endPos.x - props.startPos.x) * props.percent) / 100,
+  y: props.isVertical
+    ? props.startPos.y +
+      ((props.endPos.y - props.startPos.y) * props.percent) / 100
+    : props.startPos.y,
+};
+//分离距离用以比较是否可以画圆弧
+let startDistanceX;
+let startDistanceY;
+let endDistanceX;
+let endDistanceY;
+if (props.isVertical) {
+  //isNormal的值
+  if (props.startPos.y < props.endPos.y) {
+    isNormal.value = true;
+    angleStart = 90;
+    angleEnd = -90;
+  } else {
+    isNormal.value = false;
+    angleStart = 180;
+    angleEnd = 0;
+  }
+  endDistanceX = startDistanceX =
+    Math.abs(props.startPos.x - props.endPos.x) / 2;
+  startDistanceY = Math.abs(props.startPos.y - InflectionPoint.y);
+  endDistanceY = Math.abs(props.endPos.y - InflectionPoint.y);
+} else {
+  if (props.startPos.y < props.endPos.y) {
+    isNormal.value = true;
+    angleStart = -90;
+    angleEnd = 90;
+  } else {
+    isNormal.value = false;
+    angleStart = 0;
+    angleEnd = 180;
+  }
+  startDistanceX = Math.abs(props.startPos.x - InflectionPoint.x);
+  endDistanceX = Math.abs(props.endPos.x - InflectionPoint.x);
+  endDistanceY = startDistanceY =
+    Math.abs(props.startPos.y - props.endPos.y) / 2;
+}
+//比较半径与距离的关系
+if (props.radius) {
+  //判断起始拐点和结束拐点是否能画圆
+  if (props.RoundSet.start) {
+    //起始拐点
+    if (
+      props.radius + lineWidth / 2 + 2 <= startDistanceX &&
+      props.radius + lineWidth / 2 + 2 <= startDistanceY
+    ) {
+      start.value = true;
+
+      endPos1.x = props.isVertical
+        ? props.startPos.x
+        : InflectionPoint.x - props.radius;
+      if (props.isVertical) {
+        endPos1.y = isNormal.value
+          ? InflectionPoint.y - props.radius + 2
+          : InflectionPoint.y + props.radius - 2;
+      } else {
+        endPos1.y = props.startPos.y;
+      }
+      let startPos2Extra = isNormal.value ? props.radius : -props.radius;
+      startPos2.x = props.isVertical
+        ? props.startPos.x + props.radius
+        : InflectionPoint.x;
+      startPos2.y = props.isVertical
+        ? InflectionPoint.y
+        : props.startPos.y + startPos2Extra;
+      startCircleLeft = props.isVertical
+        ? props.startPos.x + props.radius
+        : InflectionPoint.x - props.radius;
+      if (props.isVertical) {
+        startCircleTop = isNormal.value
+          ? InflectionPoint.y - props.radius + 2
+          : InflectionPoint.y + props.radius + 2;
+      } else {
+        startCircleTop = isNormal.value
+          ? props.startPos.y + props.radius + 2
+          : props.startPos.y - props.radius + 2;
+      }
+    } else {
+      let startPos2Extra = isNormal.value
+        ? -lineWidth / 2 - 1
+        : lineWidth / 2 + 1;
+      let endPos1Extra = isNormal.value
+        ? lineWidth / 2 + 1
+        : -lineWidth / 2 - 1;
+      endPos1.x = props.isVertical ? props.startPos.x : InflectionPoint.x;
+      endPos1.y = props.isVertical
+        ? InflectionPoint.y + endPos1Extra
+        : props.startPos.y;
+      startPos2.x = props.isVertical ? props.startPos.x : InflectionPoint.x;
+      startPos2.y = props.isVertical
+        ? InflectionPoint.y
+        : props.startPos.y + startPos2Extra;
+    }
+  } else {
+    let startPos2Extra = isNormal.value
+      ? -lineWidth / 2 - 1
+      : lineWidth / 2 + 1;
+    let endPos1Extra = isNormal.value ? lineWidth / 2 + 1 : -lineWidth / 2 - 1;
+    endPos1.x = props.isVertical ? props.startPos.x : InflectionPoint.x;
+    endPos1.y = props.isVertical
+      ? InflectionPoint.y + endPos1Extra
+      : props.startPos.y;
+    startPos2.x = props.isVertical ? props.startPos.x : InflectionPoint.x;
+    startPos2.y = props.isVertical
+      ? InflectionPoint.y
+      : props.startPos.y + startPos2Extra;
+  }
+  //结束拐点
+  if (props.RoundSet.end) {
+    if (
+      props.radius + lineWidth / 2 + 2 <= endDistanceX &&
+      props.radius + lineWidth / 2 + 2 <= endDistanceY
+    ) {
+      let startPos3Extra = isNormal.value ? props.radius : -props.radius;
+      end.value = true;
+      endPos2.x = props.isVertical
+        ? props.endPos.x - props.radius
+        : InflectionPoint.x;
+      let endPos2Extra = isNormal.value ? -props.radius + 2 : props.radius - 2;
+      endPos2.y = props.isVertical
+        ? InflectionPoint.y
+        : props.endPos.y + endPos2Extra;
+      startPos3.x = props.isVertical
+        ? props.endPos.x
+        : InflectionPoint.x + props.radius;
+      startPos3.y = props.isVertical
+        ? InflectionPoint.y + startPos3Extra
+        : props.endPos.y;
+      endCircleLeft = props.isVertical
+        ? props.endPos.x - props.radius
+        : InflectionPoint.x + props.radius;
+      if (props.isVertical) {
+        endCircleTop = isNormal.value
+          ? InflectionPoint.y + props.radius + 2
+          : InflectionPoint.y - props.radius + 2;
+      } else {
+        endCircleTop = isNormal.value
+          ? props.endPos.y - props.radius + 2
+          : props.endPos.y + props.radius + 2;
+      }
+    } else {
+      let endPos2Extra = isNormal.value
+        ? lineWidth / 2 + 1
+        : -lineWidth / 2 - 1;
+      let startPos3Extra = isNormal.value
+        ? -lineWidth / 2 - 1
+        : lineWidth / 2 + 1;
+      endPos2.x = props.isVertical ? props.endPos.x : InflectionPoint.x;
+      endPos2.y = props.isVertical
+        ? InflectionPoint.y
+        : props.endPos.y + endPos2Extra;
+      startPos3.x = props.isVertical ? props.endPos.x : InflectionPoint.x;
+      startPos3.y = props.isVertical
+        ? InflectionPoint.y + startPos3Extra
+        : props.endPos.y;
+    }
+  } else {
+    let endPos2Extra = isNormal.value ? lineWidth / 2 + 1 : -lineWidth / 2 - 1;
+    let startPos3Extra = isNormal.value
+      ? -lineWidth / 2 - 1
+      : lineWidth / 2 + 1;
+    endPos2.x = props.isVertical ? props.endPos.x : InflectionPoint.x;
+    endPos2.y = props.isVertical
+      ? InflectionPoint.y
+      : props.endPos.y + endPos2Extra;
+    startPos3.x = props.isVertical ? props.endPos.x : InflectionPoint.x;
+    startPos3.y = props.isVertical
+      ? InflectionPoint.y + startPos3Extra
+      : props.endPos.y;
+  }
+} else {
+  let startPos2Extra = isNormal.value ? -lineWidth / 2 - 1 : lineWidth / 2 + 1;
+  let endPos1Extra = isNormal.value ? lineWidth / 2 + 1 : -lineWidth / 2 - 1;
+  endPos1.x = props.isVertical ? props.startPos.x : InflectionPoint.x;
+  endPos1.y = props.isVertical
+    ? InflectionPoint.y + endPos1Extra
+    : props.startPos.y;
+  startPos2.x = props.isVertical ? props.startPos.x : InflectionPoint.x;
+  startPos2.y = props.isVertical
+    ? InflectionPoint.y
+    : props.startPos.y + startPos2Extra;
+  let endPos2Extra = isNormal.value ? lineWidth / 2 + 1 : -lineWidth / 2 - 1;
+  let startPos3Extra = isNormal.value ? -lineWidth / 2 - 1 : lineWidth / 2 + 1;
+  endPos2.x = props.isVertical ? props.endPos.x : InflectionPoint.x;
+  endPos2.y = props.isVertical
+    ? InflectionPoint.y
+    : props.endPos.y + endPos2Extra;
+  startPos3.x = props.isVertical ? props.endPos.x : InflectionPoint.x;
+  startPos3.y = props.isVertical
+    ? InflectionPoint.y + startPos3Extra
+    : props.endPos.y;
+}
+</script>
+
+<style scoped></style>

package/utils/JsViewVueWidget/JsvConnectLine/index.js

@@ -0,0 +1,2 @@
+import JsvConnectLine from "./JsvConnectLine.vue"
+export default JsvConnectLine

package/utils/JsViewVueWidget/JsvFreeMoveActor/ActorControl.ts

@@ -9,24 +9,27 @@ import ActionPackBuilder from "./SetAction"
 import StatePackBuilder from "./SetState";
 import CallbackManager from "./CallbackManager";
 import ActionRefObject from "./ActionRefObject";
-import { RunFreeMoveCmdPacks, FreeMoveAnimClass } from "./ForgeTypeDefine"
+import { RunFreeMoveCmdPacks, FreeMoveAnimClass, FinishRenderBreak } from "./ForgeTypeDefine"
+import { NexusNode, newNexus } from "./NexusNode";
 
 
 class ActorControl {
   private _BindView: any;
   private _BindAnim: any;
   private _Callbacks: CallbackManager;
+  private _SelfNexusRecv: NexusNode;
 
-  private _ConditionPackBuilder: ConditionPackBuilder;
-  private _ActionPackBuilder: ActionPackBuilder;
+  private _SharedQuickConditionPackBuilder: ConditionPackBuilder;
+  private _SharedQuickActionPackBuilder: ActionPackBuilder;
   private _StatePackBuilder: StatePackBuilder;
 
   constructor() {
     this._BindView = null;
     this._BindAnim = null;
     this._Callbacks = new CallbackManager();
-    this._ConditionPackBuilder = new ConditionPackBuilder(this._Callbacks);
-    this._ActionPackBuilder = new ActionPackBuilder(this._Callbacks);
+    this._SelfNexusRecv = newNexus();
+    this._SharedQuickConditionPackBuilder = new ConditionPackBuilder(this._Callbacks, this._SelfNexusRecv);
+    this._SharedQuickActionPackBuilder = new ActionPackBuilder(this._Callbacks, this._SelfNexusRecv);
     this._StatePackBuilder = new StatePackBuilder();
   }
 
@@ -74,16 +77,23 @@ class ActorControl {
    * @param {int} group 可选参数，默认为0, 有效值为0~3, 对应默认组, 1组, 2组, 3组, 便于remove时，按组进行清理
    * @param {boolean} multiTimes 可选参数，默认为false, 是否要多次执行, 若为单次，则执行后condition作废
    * @param {string} specName 可选参数，默认null, 命名condition, 用于指定名字进行active/deactive动作的场景
+   * @param {boolean} shoudRenderBreak 可选参数，默认false, 关联的回调是否会发起RenderBreak
    * @return {ConditionPackBuilder} ConditionPack 的工厂对象
    */
   condition(
     group: number = 0,
     multiTimes: boolean = false,
-    specName: string | null = null
+    specName: string | null = null,
+    shoudRenderBreak: boolean = false
   ): ConditionPackBuilder {
     // 注意: 不支持获取condition后，多次复制
-    this._ConditionPackBuilder.updateCommandInfo(group, multiTimes, specName);
-    return this._ConditionPackBuilder;
+    let builder: ConditionPackBuilder = this._SharedQuickConditionPackBuilder;
+    if (builder.isInUsing()) {
+      // 用于加速的builder被占用了，为了防止状态问题，使用新建builder
+      builder = new ConditionPackBuilder(this._Callbacks, this._SelfNexusRecv);
+    }
+    builder.updateCommandInfo(group, multiTimes, specName, shoudRenderBreak);
+    return builder;
   }
 
   /**
@@ -98,16 +108,21 @@ class ActorControl {
    *                           x轴保持为1, y轴保持为2，可"与或"让两个轴都保持
    * @param {int} xyAccKeeps xy轴上的加速度是否保持(与新Action不冲突的才会被保留)，
    *                         x轴保持为1, y轴保持为2，可"与或"让两个轴都保持
-   * @param {Object} actRef 一个Object, 传入后会填入对此action的ref，用于后续制作
+   * @param {NexusNode} nexusRecv 此动作发出的 nexusEvent 的接受者
    * @return {ActionPackBuilder} ActionPack 的工厂对象
    */
   action(
     xySpeedKeeps: number = 0,
     xyAccKeeps: number = 0,
-    actRef: ActionRefObject | null = null
+    nexusRecv: NexusNode | null = null
   ): ActionPackBuilder {
-    this._ActionPackBuilder.updateCommonInfo(xySpeedKeeps, xyAccKeeps, actRef);
-    return this._ActionPackBuilder;
+    let builder: ActionPackBuilder = this._SharedQuickActionPackBuilder;
+    if (builder.isInUsing()) {
+      // 用于加速的builder被占用了，为了防止状态问题，使用新建builder
+      builder = new ActionPackBuilder(this._Callbacks, this._SelfNexusRecv);
+    }
+    builder.updateCommonInfo(xySpeedKeeps, xyAccKeeps, nexusRecv);
+    return builder;
   }
 
   /**
@@ -124,18 +139,22 @@ class ActorControl {
   _OnEchoEvent(retJson: string) {
     // 遇到layout后仍然会因为新broadcast有动作时，一帧中可能会有多次回调
     let retJsonObject: Object = JSON.parse(retJson);
-    let actorState = retJsonObject;
-    let echoTokens = retJsonObject["eTkns"];
-    if (echoTokens) {
-      for (let etoken of echoTokens) {
-        this._Callbacks.invokeCallback(etoken, actorState);
+    let echoRetList = retJsonObject["retList"];
+    if (echoRetList) {
+      for (let echoRet of echoRetList) {
+        let renderBreakId = echoRet["rbTkn"];
+        if (renderBreakId != 0) {
+          // 标识此RenderBreak完成
+          FinishRenderBreak(renderBreakId);
+        }
+        this._Callbacks.invokeCallback(echoRet["eTkn"], retJsonObject);
       }
     }
   }
 
   _EnsureAnim() {
     if (!this._BindAnim) {
-      this._BindAnim = new FreeMoveAnimClass(this._OnEchoEvent.bind(this));
+      this._BindAnim = new FreeMoveAnimClass(this._OnEchoEvent.bind(this), this._SelfNexusRecv.token);
       this._BindView.StartAnimation(this._BindAnim);
     }
   }

package/utils/JsViewVueWidget/JsvFreeMoveActor/ForgeTypeDefine.ts

@@ -5,7 +5,7 @@
  * @Description: file content
  */
 
-import { Forge } from "@shijiu/jsview/dom/jsv-forge-define.mjs";
+import { Forge } from "@shijiu/jsview/dom/jsv-forge-define";
 
 // 此文件声明来自engine-js的api和类型声明
 
@@ -20,6 +20,7 @@ const ActEventDefine = {
 
 // GroupType
 const GroupType_ActionAssoc: number = Forge.FreeMoveExternType?.GroupType_ActionAssoc;
+const GroupType_Invalid: number = Forge.FreeMoveExternType?.GroupType_Invalid;
 
 // Builders
 const ConditionSetBuilder: any = Forge.FreeMoveConditionSet;
@@ -33,6 +34,8 @@ const FreeMoveAnimClass: any = Forge.FreeMoveAnimation;
 // Run function
 const RunFreeMoveCmdPacks: Function = Forge.AnimFireCommand.RunFreeMoveCmdPacks;
 
+const FinishRenderBreak: Function = Forge.sRenderBridge.FinishRenderBreak.bind(Forge.sRenderBridge);
+
 export {
     GroupType_ActionAssoc,
     ActEventDefine,
@@ -41,5 +44,6 @@ export {
     StateCmdBuilder,
     CmdPackBuilder,
     FreeMoveAnimClass,
-    RunFreeMoveCmdPacks
-}
+    RunFreeMoveCmdPacks,
+    FinishRenderBreak
+}

package/utils/JsViewVueWidget/JsvFreeMoveActor/FreeMoveActor.vue

@@ -17,6 +17,17 @@ import ActControl from "./ActorControl.ts";
 import { shallowRef, onMounted } from "vue";
 
 const props = defineProps({
+  // 设置给父节点，动画节点必须top/left为0, 以保证PC端模拟通过style直接获取当前位置信息的逻辑能通过
+  top: {
+    default: 0,
+    type: Number,
+  },
+  left: {
+    default: 0,
+    type: Number,
+  },
+
+  // 设置给实际的动画节点
   width: {
     default: 0,
     type: Number,
@@ -40,7 +51,22 @@ defineExpose({
 </script>
 
 <template>
-  <div ref="mainDivRef" :style="{ width: props.width, height: props.height }">
-    <slot></slot>
+  <div
+    :style="{
+      top: props.top,
+      left: props.left,
+    }"
+  >
+    <div
+      ref="mainDivRef"
+      :style="{
+        top: 0,
+        left: 0,
+        width: props.width,
+        height: props.height,
+      }"
+    >
+      <slot></slot>
+    </div>
   </div>
 </template>

package/utils/JsViewVueWidget/JsvFreeMoveActor/JsvEnvBlocker.vue

@@ -30,6 +30,8 @@ import {
   toRaw,
   watchEffect,
   onMounted,
+  onUnmounted,
+  reactive,
   onActivated,
   onDeactivated,
 } from "vue";
@@ -83,16 +85,16 @@ let sensorRef = null;
 // 变更四边检测开关和关联id
 watchEffect(() => {
   if (viewMounted.status) {
-    if (!isNan(props.TopGID)) {
-      sensorRef.ResetTopGID(props.TopGID);
+    if (!isNaN(props.topGID)) {
+      sensorRef.ResetTopGID(props.topGID);
     }
-    if (!isNan(props.bottomGID)) {
+    if (!isNaN(props.bottomGID)) {
       sensorRef.ResetBottomGID(props.bottomGID);
     }
-    if (!isNan(props.leftGID)) {
+    if (!isNaN(props.leftGID)) {
       sensorRef.ResetLeftGID(props.leftGID);
     }
-    if (!isNan(props.rightGID)) {
+    if (!isNaN(props.rightGID)) {
       sensorRef.ResetRightGID(props.rightGID);
     }
   }
@@ -114,6 +116,11 @@ onMounted(() => {
   viewMounted.status = true;
 });
 
+onUnmounted(() => {
+  viewMounted.status = false;
+  sensorRef.Enable(false);
+});
+
 onActivated(() => {
   sensorRef.Enable(props.enable);
 });

package/utils/JsViewVueWidget/JsvFreeMoveActor/NexusNode.ts

@@ -0,0 +1,21 @@
+
+let sNexusIdGen = 0x4000_0000; // 预留0为无效值
+
+//js端预留的id范围为 0x40000000-0x7FFFFFFF
+class NexusNode {
+    public token: number;
+
+    constructor() {
+        sNexusIdGen = (sNexusIdGen + 1 - 0x4000_0000) % 0x4000_0000 + 0x4000_0000
+        this.token = sNexusIdGen;
+    }
+}
+
+function newNexus(): NexusNode {
+    return new NexusNode();
+}
+
+export {
+    NexusNode,
+    newNexus
+}