@shijiu/jsview-vue 2.2.201 → 2.2.426-test.0

package/utils/JsViewVueWidget/JsvMindMap/JsvMindMap.vue

@@ -5,88 +5,96 @@
  -->
 
 <!-- 
-[界面概述]
-  思维导图控件
- 
-[控件介绍]
-  JsvMindMap:
-    props:
-      name:             {string}      焦点name
-      provideData:      {function}    提供数据的函数
-      width:            {number}      组件宽
-      height:           {number}      组件高
-      formatNode:       {function}    接受数据, 返回标准格式节点信息的函数
-                                        {
-                                          left: number, left(必需)
-                                          top: number, top(必需)
-                                          width: number, width(必需)
-                                          height: number, height(必需)
-                                          id: string, 节点的唯一id(必需)
-                                          childrenList: Array<any>, 子数据列表
-                                          moveType: "star" | "layer" | "inherit", 节点布局类型(可选)
-                                          lineStyle: object 此节点线的style
-                                            { 
-                                              lineWidth: number, 线宽
-                                              backgroundColor: string, 线的颜色(与backgroundImage互斥)
-                                              backgroundImage: string, 线的图片(与backgroundColor互斥)
-                                              borderRadius: string | number, 线的圆角设置
-                                            }
-                                        }
-      left:             {number}      组件left
-      top:              {number}      组件top
-      slideAnim:        {object}      滚动动画设置, { duration: number, easing?: string }, duration为毫秒
-      onEdge:           {function}    到达边缘回调
-      focusRectPadding: {number}      焦点区域内边距
-      renderRectMargin: {number}      描画区域外边距
-    methods:
-      getCurFocusNode
-        @description 获取当前焦点的数据
-        @return {object} 当前焦点节点的数据
-      getCurFocusId
-        @description 获取当前焦点的id
-        @return {string} 当前节点的id
-      getCurVisibleRect
-        @description 获取当前的可视区域
-        @return {object} 可视区域{x: number, y: number, width: number, height: number}
-      slideTo
-        @description 滚动到指定位置
-        @params {int} x x坐标
-        @params {int} y y坐标
-        @params {object} animInfo 动画设置, 为null时不做动画. {duration: number, easing: string, onEnd: function}
-      setFocusTo
-        @description 设置焦点
-        @params {string} id 目标节点的id
-        @params {boolean} needSlide  是否需要滚动
-        @params {object} animInfo 滚动动画设置
-      moveInItem
-        @description 把指定节点移入焦点区域
-        @params {string} id 目标节点的id
-        @params {object} animInfo 动画信息
-      moveFocus
-        @description 往指定方向移动焦点
-        @params {string} direction 移动方向 "left" | "top" | "right" | "bottom"
-      getEntireTreeBoundingSize
-        @description 获取整个树的包围框宽高
-        @return {object} 宽高 {width: number, height: number}
-      refreshData
-        @description 刷新数据
-                                        
-[额外说明]
-1. 焦点移动逻辑
-  每个节点首先有个父方向, 若父节点是star模式, 则父方向由父节点相对位置决定, 若父节点是layer模式, 则父方向为父节点子方向的反向
-  layer模式的节点, 有一个子方向, 其子方向是所有子所在的一侧方向(只有上下左右四侧), 若无子, 则父方向的反向为子方向. 确定了父方向和子方向后, 剩余两个方向则寻找该方向最近的兄弟节点, 若无则寻找最近分支上最近的同级或者叶节点
-  star模式的节点, 除了父方向, 剩余三个方向均寻找相应方向的最近子节点, 若未找到则按layer寻找兄弟节点相同的逻辑寻找同级节点
+ * @file
+ *
+ * [界面概述]
+ *   思维导图控件
+ *  
+ * [控件介绍]
+ *   JsvMindMap:
+ *     props:
+ *       name:             {string}      焦点name
+ *       provideData:      {function}    提供数据的函数
+ *       width:            {number}      组件宽
+ *       height:           {number}      组件高
+ *       formatNode:       {function}    接受数据, 返回标准格式节点信息的函数
+ *                                         {
+ *                                           left: number, left(必需)
+ *                                           top: number, top(必需)
+ *                                           width: number, width(必需)
+ *                                           height: number, height(必需)
+ *                                           id: string, 节点的唯一id(必需)
+ *                                           childrenList: Array<any>, 子数据列表
+ *                                           moveType: "star" | "layer" | "inherit", 节点布局类型(可选)
+ *                                           lineStyle: object 此节点线的style
+ *                                             { 
+ *                                               lineWidth: number, 线宽
+ *                                               backgroundColor: string, 线的颜色(与backgroundImage互斥)
+ *                                               backgroundImage: string, 线的图片(与backgroundColor互斥)
+ *                                               borderRadius: string | number, 线的圆角设置
+ *                                             }
+ *                                            enableTap: boolean, 是否支持点击
+ *                                         }
+ *       left:             {number}      组件left
+ *       top:              {number}      组件top
+ *       slideAnim:        {object}      滚动动画设置, { duration: number, easing?: string }, duration为毫秒
+ *       onEdge:           {function}    到达边缘回调
+ *       focusRectPadding: {number}      焦点区域内边距
+ *       renderRectMargin: {number}      描画区域外边距
+ *     methods:
+ *       getCurFocusNode
+ *         @description 获取当前焦点的数据
+ *         @return {object} 当前焦点节点的数据
+ *       getCurFocusId
+ *         @description 获取当前焦点的id
+ *         @return {string} 当前节点的id
+ *       getCurVisibleRect
+ *         @description 获取当前的可视区域
+ *         @return {object} 可视区域{x: number, y: number, width: number, height: number}
+ *       slideTo
+ *         @description 滚动到指定位置
+ *         @params {int} x x坐标
+ *         @params {int} y y坐标
+ *         @params {object} animInfo 动画设置, 为null时不做动画. {duration: number, easing: string, onEnd: function}
+ *       setFocusTo
+ *         @description 设置焦点
+ *         @params {string} id 目标节点的id
+ *         @params {boolean} needSlide  是否需要滚动
+ *         @params {object} animInfo 滚动动画设置
+ *       moveInItem
+ *         @description 把指定节点移入焦点区域
+ *         @params {string} id 目标节点的id
+ *         @params {object} animInfo 动画信息
+ *       moveFocus
+ *         @description 往指定方向移动焦点
+ *         @params {string} direction 移动方向 "left" | "top" | "right" | "bottom"
+ *       getEntireTreeBoundingSize
+ *         @description 获取整个树的包围框宽高
+ *         @return {object} 宽高 {width: number, height: number}
+ *       refreshData
+ *         @description 刷新数据
+ *      setSensor {(callback: ({left: number, top: number}) => void, sensitivity: number) => void} 
+ *          设置运动后触发的回调, sensitivity为回调敏感度, 每移动多少像素进行回调，适当放大(推荐10以上)可以极大减小对js回调过多引起的性能降低 
+ *                                         
+ * [额外说明]
+ * 1. 焦点移动逻辑
+ *   每个节点首先有个父方向, 若父节点是star模式, 则父方向由父节点相对位置决定, 若父节点是layer模式, 则父方向为父节点子方向的反向
+ *   layer模式的节点, 有一个子方向, 其子方向是所有子所在的一侧方向(只有上下左右四侧), 若无子, 则父方向的反向为子方向. 确定了父方向和子方向后, 剩余两个方向则寻找该方向最近的兄弟节点, 若无则寻找最近分支上最近的同级或者叶节点
+ *   star模式的节点, 除了父方向, 剩余三个方向均寻找相应方向的最近子节点, 若未找到则按layer寻找兄弟节点相同的逻辑寻找同级节点
  -->
 <script setup>
-import { ref, shallowRef, reactive } from "vue";
+import { ref, shallowRef, reactive, computed, onMounted } from "vue";
 import { DataNode } from "./DataTree";
 import { Rect, opposite } from "./Geometry";
 import RBush from "./rtree.js";
 import { EdgeDirection } from "../../JsViewEngineWidget/WidgetCommon";
 import JsvLine from "../JsvLine";
+import JsvDragBox from "../JsvDragBox/JsvDragBox.vue";
+import ActorControl from "../JsvFreeMoveActor/ActorControl.ts";
+import { ForgeConst } from "../../JsViewVueTools/ForgeConstDefine.ts";
 
 const TAG = "JsvMindMap";
-const dirMap = {  
+const dirMap = {
   37: "left",
   38: "top",
   39: "right",
@@ -180,8 +188,25 @@ const props = defineProps({
     type: Number,
     default: 100,
   },
+  touchFlag: {
+    /*
+     * 触控模式
+     * 0: 关闭
+     * 1: 支持拖拽
+     */
+    type: Number,
+    default: 0,
+  },
 });
 
+const enableTouch = computed(() => {
+  return props.touchFlag == 1;
+});
+
+const KEY_MODE = 1;
+const TOUCH_MODE = 2;
+let mode = KEY_MODE;
+
 let rootNode = null;
 const currentFocusId = ref(0);
 let preFocusNode = null;
@@ -200,6 +225,8 @@ const slideAnimInfo = {
 };
 const viewPortRect = new Rect(0, 0, widgetWidth, widgetHeight); // 组件的可视范围
 
+let actorController = null;
+
 // 描画范围
 const getRenderRect = () => {
   return new Rect(
@@ -236,7 +263,8 @@ const buildNode = (root, data) => {
     depth,
     formatedData.id,
     data,
-    formatedData.moveType ?? "layer"
+    formatedData.moveType ?? "layer",
+    formatedData.enableTap ?? false
   );
   dataNode.setLineStyle(formatedData.lineStyle ?? defaultLineStyle);
   if (root == null) {
@@ -252,7 +280,20 @@ const buildNode = (root, data) => {
   }
 };
 
+const locateDivWidth = ref(0);
+const locateDivHeight = ref(0);
+
 //构建树
+let boundingBox = new Rect(0, 0, 0, 0);
+function updateBoundingBox(rTreeRect) {
+  boundingBox.x = rTreeRect.minX;
+  boundingBox.y = rTreeRect.minY;
+  boundingBox.width = rTreeRect.maxX - rTreeRect.minX + 1;
+  boundingBox.height = rTreeRect.maxY - rTreeRect.minY + 1;
+  locateDivWidth.value = boundingBox.right + 100;
+  locateDivHeight.value = boundingBox.bottom + 100;
+}
+
 const buildTree = () => {
   //clean old tree
   rootNode = null;
@@ -264,6 +305,7 @@ const buildTree = () => {
   allNodeList.forEach((i) => i.calculateMoveInfo());
   rTree = new RBush();
   allNodeList.forEach((node) => rTree.insert(node));
+  updateBoundingBox(rTree.data);
 
   //线的处理必须在moveInfo计算完成后处理
   for (let i = 1; i < allNodeList.length; ++i) {
@@ -356,46 +398,48 @@ const focusToNext = (keyCode) => {
   }
 };
 
+let preLeft = viewPortRect.x;
+let preTop = viewPortRect.y;
 const locateDivPos = reactive({
   left: viewPortRect.x,
   top: viewPortRect.y,
 });
 
+function updateVisibielPosition(info) {
+  viewPortRect.x = info.x;
+  viewPortRect.y = info.y;
+  preLeft = locateDivPos.left;
+  preTop = locateDivPos.top;
+  locateDivPos.left = -viewPortRect.x;
+  locateDivPos.top = -viewPortRect.y;
+  visibleListStore.setCurList(rTree.search(getRenderRect()));
+}
+
 const moveTo = (info, animInfo) => {
   if (!info) return;
   //info: {left: number, top: number} 新的focusRect的x, y
   if (info.x != viewPortRect.x || info.y != viewPortRect.y) {
-    viewPortRect.x = info.x;
-    viewPortRect.y = info.y;
-    const preLeft = locateDivPos.left,
-      preTop = locateDivPos.top;
-    locateDivPos.left = -viewPortRect.x;
-    locateDivPos.top = -viewPortRect.y;
-
-    visibleListStore.setCurList(rTree.search(getRenderRect()));
+    updateVisibielPosition(info);
 
     if (animInfo && !isNaN(animInfo.duration)) {
-      const forgeAnim = new Forge.TranslateAnimation(
-        preLeft - locateDivPos.left,
-        0,
-        preTop - locateDivPos.top,
-        0,
-        animInfo.duration,
-        animInfo.easing
-      );
-      forgeAnim.SetAnimationListener(
-        new Forge.AnimationListener(
-          null,
-          () => {
-            updateVisible(visibleListStore.getCur());
-            animInfo.onEnd?.();
-          },
-          null
-        )
-      );
-      locateDiv.value?.jsvGetProxyView(true).StartAnimation(forgeAnim);
+      let deltaX = locateDivPos.left - preLeft;
+      let deltaY = locateDivPos.top - preTop;
+      let frameNum = (60 * animInfo.duration) / 1000;
+      let edgeX = Math.abs(deltaX) > 1e-2 ? locateDivPos.left : undefined;
+      let edgeY = Math.abs(deltaY) > 1e-2 ? locateDivPos.top : undefined;
+      let speedX = Math.abs(deltaX) > 1e-2 ? Math.abs(deltaX) / frameNum : undefined;
+      let speedY = Math.abs(deltaY) > 1e-2 ? Math.abs(deltaY) / frameNum : undefined;
+      actorController.run((cmds) => [
+        cmds.action().moveTo(edgeX, edgeY, speedX, speedY, () => {
+          updateVisible(visibleListStore.getCur());
+          animInfo.onEnd?.();
+        }),
+      ]);
       updateVisible(visibleListStore.getTmp());
     } else {
+      actorController.run((cmds) => [
+        cmds.action().teleportTo(locateDivPos.left, locateDivPos.top),
+      ]);
       updateVisible(visibleListStore.getCur());
     }
   }
@@ -446,7 +490,23 @@ const focusBlockOnBlur = () => {
   curFocusNode?.onBlur();
 };
 
+function findVisibleFocusNode() {
+  if (
+    curFocusNode !== null &&
+    renderNodeList.value.find((item) => item.idToken == curFocusNode.idToken)
+  ) {
+    return curFocusNode;
+  } else {
+    return renderNodeList.value[0];
+  }
+}
+
 const onKeyDown = (ev) => {
+  if (mode == TOUCH_MODE) {
+    curFocusNode = findVisibleFocusNode();
+    mode = KEY_MODE;
+    return true;
+  }
   switch (ev.keyCode) {
     case 37:
     case 38:
@@ -464,18 +524,6 @@ const onKeyDown = (ev) => {
   }
 };
 
-//init
-{
-  buildTree();
-  //初始焦点放置在屏幕中间
-  const center = curFocusNode.rect.center;
-  const viewPortPos = {
-    x: Math.round(center.x - viewPortRect.width / 2),
-    y: Math.round(center.y - viewPortRect.height / 2),
-  };
-  moveTo(viewPortPos);
-}
-
 // expose methos
 /**
  * 获取当前获焦的节点
@@ -577,6 +625,111 @@ const refreshData = () => {
   moveTo(viewPortPos);
 };
 
+/* touch */
+function getDragBoxRect() {
+  return new Rect(
+    Math.min(viewPortRect.width - locateDivWidth.value, 0),
+    Math.min(viewPortRect.height - locateDivHeight.value, 0),
+    Math.max(
+      viewPortRect.width - locateDivWidth.value,
+      locateDivWidth.value - viewPortRect.width
+    ),
+    Math.max(
+      viewPortRect.height - locateDivHeight.value,
+      locateDivHeight.value - viewPortRect.height
+    )
+  );
+}
+function onTouchDown() {
+  mode = TOUCH_MODE;
+  // console.log("mindmap onTouchDown");
+}
+function onTouchRelease() {
+  // console.log("mindmap onTouchRelease");
+}
+function onDragStart() {
+  // console.log("mindmap onDragStart");
+}
+function onDragEnd(pos) {
+  // console.log("mindmap onDragEnd");
+  onSensor(pos);
+}
+const WALL_GROUP_ID = 1;
+function setDragWall(wallInfo) {
+  actorController.run((cmds) => [
+    cmds
+      .condition(WALL_GROUP_ID, true)
+      .boxPosition(wallInfo.left, wallInfo.top, wallInfo.right, wallInfo.bottom)
+      .then([cmds.state().setHitWallOverflow()]),
+  ]);
+}
+const SENSOR_GROUP_ID = 2;
+let customOnSensor = null;
+function onSensor(pos) {
+  updateVisibielPosition({
+    x: -pos.xPos,
+    y: -pos.yPos,
+  });
+  updateVisible(visibleListStore.getCur());
+  customOnSensor?.({
+    left: pos.xPos,
+    top: pos.yPos,
+  });
+}
+let sensitivityCache = 0;
+function innerSetSensor(s = 10) {
+  sensitivityCache = s;
+  actorController.run((cmds) => [
+    cmds.state().removeConditionByGroup(SENSOR_GROUP_ID),
+    cmds
+      .condition(SENSOR_GROUP_ID, true)
+      .onMovement(s) // 默认设置x或y移动超过10时才触发回调，以此减少回调的频次，规避js的性能影响
+      .then([onSensor]),
+  ]);
+}
+function initTouch() {
+  console.log("initTouch");
+  const divView = locateDiv.value.jsvGetProxyView();
+  divView.DragEnables?.(
+    ForgeConst.DragFlags.TOUCH_RECV_MOVE_BIT |
+      ForgeConst.DragFlags.TOUCH_RECV_FIRST_START |
+      ForgeConst.DragFlags.TOUCH_RECV_LAST_END
+  ); // 激活 Move | TouchDown | TouchEnd
+  // touch callback
+  actorController.run((cmds) => [
+    cmds.condition(undefined, true).onTouchDown().then([onTouchDown]),
+    cmds.condition(undefined, true).onDragStart().then([onDragStart]),
+    cmds.condition(undefined, true).onDragEnd().then([onDragEnd]),
+    cmds.condition(undefined, true).onTouchRelease().then([onTouchRelease]),
+  ]);
+  // wall condition
+  const wallBox = getDragBoxRect();
+  setDragWall(wallBox);
+  innerSetSensor();
+}
+
+//init
+function init() {
+  buildTree();
+  //初始焦点放置在屏幕中间
+  const center = curFocusNode.rect.center;
+  const viewPortPos = {
+    x: Math.round(center.x - viewPortRect.width / 2),
+    y: Math.round(center.y - viewPortRect.height / 2),
+  };
+  moveTo(viewPortPos);
+  if (enableTouch.value) {
+    initTouch();
+  }
+}
+
+function setSensor(callback, sensitivity = 10) {
+  if (sensitivity !== sensitivityCache) {
+    innerSetSensor(sensitivity);
+  }
+  customOnSensor = callback;
+}
+
 const exposeObj = {
   getCurFocusNode,
   getCurFocusId,
@@ -587,9 +740,17 @@ const exposeObj = {
   moveFocus,
   getEntireTreeBoundingSize,
   refreshData,
+  setSensor,
 };
 defineExpose(exposeObj);
 
+onMounted(() => {
+  actorController = new ActorControl();
+  const divView = locateDiv.value.jsvGetProxyView();
+  actorController.bindForgeView(divView, true);
+  init();
+});
+
 //debug code
 // window.rTree = rTree;
 // window.dataTree = rootNode;
@@ -609,10 +770,8 @@ defineExpose(exposeObj);
     <div
       ref="locateDiv"
       :style="{
-        left: locateDivPos.left,
-        top: locateDivPos.top,
-        width: viewPortRect.width,
-        height: viewPortRect.height,
+        width: locateDivWidth,
+        height: locateDivHeight,
       }"
     >
       <slot name="background"></slot>
@@ -640,6 +799,7 @@ defineExpose(exposeObj);
             width: item.rect.width,
             height: item.rect.height,
           }"
+          @click="item.onTap.value"
         >
           <slot
             :data="item.customerData"