@shijiu/jsview-vue 2.1.25 → 2.1.200

package/utils/JsViewVueWidget/JsvMindMap/DataTree.ts

@@ -0,0 +1,394 @@
+import { Rect, Line } from "./Geometry";
+import * as CONST from "./Constant"
+import { Direction } from "./CommonType";
+import { opposite } from "./Geometry";
+
+type MoveType = "star" | "layer" | "inherit"
+const NO_NEIGHBOR = Symbol("noNeighbor");
+
+interface MoveInfoCache {
+  moveType: MoveType | null;
+  parentDir: Direction | null;
+  childDir: Direction | null;
+  left: DataNode | null | symbol,
+  top: DataNode | null | symbol,
+  right: DataNode | null | symbol,
+  bottom: DataNode | null | symbol,
+}
+
+let token = 0;
+export class DataNode {
+  public idToken = token++;
+  private static readonly DEFAULT_MOVE_TYPE = "star"
+  public parent: DataNode | null = null;
+  public children: Array<DataNode> = [];
+  public rect: Rect;
+  public depth: number;
+  public customerData: any;
+  public customerId: string;
+  public moveType: MoveType = "inherit";
+  private lineList: Array<any> = [];
+
+  //焦点移动相关
+  private moveInfoCache: MoveInfoCache = {
+    moveType: null,
+    parentDir: null,
+    childDir: null,
+    left: null,
+    top: null,
+    right: null,
+    bottom: null,
+  }
+
+  constructor(rect: Rect, depth: number, id: string, data: any, moveType: MoveType = "inherit") {
+    this.rect = rect;
+    this.depth = depth;
+    this.customerData = data;
+    this.moveType = moveType;
+    this.customerId = id;
+  }
+
+  //>>>>为了对接rtree库>>>>
+  get minX() { return this.rect.minX; }
+
+  get maxX() { return this.rect.maxX; }
+
+  get minY() { return this.rect.minY; }
+
+  get maxY() { return this.rect.maxY; }
+  //<<<<<<<<
+
+  public addLine(lineObj: any) {
+    this.lineList.push(lineObj);
+  }
+
+  public getLineList() {
+    return this.lineList;
+  }
+
+  public getParentDir() {
+    return this.moveInfoCache.parentDir;
+  }
+
+  public insert(r: DataNode) {
+    this.children.push(r);
+    r.parent = this;
+  }
+
+  public find(equalFunc: Function): DataNode | null {
+    if (equalFunc(this)) {
+      return this;
+    } else if (this.children.length > 0) {
+      for (let i of this.children) {
+        const result = i.find(equalFunc);
+        if (result) {
+          return result;
+        }
+      }
+    }
+    return null;
+  }
+
+  /**
+   * 获取子tree的所有节点的列表(包含此节点)
+   */
+  public all() {
+    const nodeList: Array<DataNode> = [];
+    const queue: Array<DataNode> = [];
+    queue.push(this);
+    while (queue.length > 0) {
+      const n = queue.pop();
+      if (n) {
+        nodeList.push(n);
+        if (n.children.length > 0) {
+          queue.push(...n.children);
+        }
+      }
+    }
+    return nodeList
+  }
+
+  /**
+   * 寻找指定方向的node
+   * 移动逻辑说明:
+   *  moveType代表本节点和其子节点之间的移动方式
+   *    star: 
+   */
+  public findNode(direction: Direction) {
+    if (this.moveInfoCache[direction] == null) {
+      this.calculateMoveInfo();
+    }
+    return this.moveInfoCache[direction] == NO_NEIGHBOR ? null : this.moveInfoCache[direction];
+  }
+
+  private calculateMoveInfo() {
+    const directions: Set<Direction> = new Set([CONST.LEFT, CONST.TOP, CONST.RIGHT, CONST.BOTTOM])
+    //确认parent方向
+    if (this.moveInfoCache.parentDir == null) {
+      if (this.parent) {
+        const pMoveType = this.parent.getMoveType();
+        if (pMoveType == "layer") {
+          const dir = opposite(this.parent.getLayoutChildDir());
+          this.parent.children.forEach((i: DataNode) => {
+            i.moveInfoCache.parentDir = dir;
+            i.moveInfoCache[dir] = this.parent;
+          });
+        } else {
+          //星图模式, 只支持四个方向
+          const dir = this.parent.rect.relativeTo(this.rect);
+          this.moveInfoCache.parentDir = dir;
+          this.moveInfoCache[dir] = this.parent;
+        }
+      }
+    }
+    if (this.moveInfoCache.parentDir) {
+      directions.delete(this.moveInfoCache.parentDir as Direction);
+    }
+
+    //确认child方向
+    const moveType = this.getMoveType();
+    if (this.children.length == 0) {
+      //无子时, 以parentDir反向为childDir
+      if (this.moveInfoCache.parentDir) {
+        const dir = opposite(this.moveInfoCache.parentDir as Direction) //parentDir必然存在
+        this.moveInfoCache[dir] = NO_NEIGHBOR;
+        directions.delete(dir);
+      } else {
+        //无父无子
+      }
+    } else {
+      if (moveType == "layer") {
+        //layer模式只有一个子方向, 
+        const dir = this.getLayoutChildDir();
+        const nearest = this.findNearest(this.children) as DataNode; // 必然不为null, 强转类型
+        this.moveInfoCache[dir] = nearest;
+        const oppositeDir = opposite(dir);
+        this.children.forEach(i => {
+          i.moveInfoCache.parentDir = oppositeDir;
+          i.moveInfoCache[oppositeDir] = this;
+        })
+        directions.delete(dir);
+      } else {
+        //start模式, 规定只有四个方向
+        const minDistance: any = {};
+        for (let item of this.children) {
+          const dir = item.rect.relativeTo(this.rect);
+          const distance = item.rect.distance(this.rect, true);
+          if (typeof minDistance[dir] == "undefined" || minDistance[dir] > distance) {
+            minDistance[dir] = distance;
+            this.moveInfoCache[dir] = item;
+          }
+          directions.delete(dir);
+        }
+      }
+    }
+
+    //剩下的方向在同级节点中寻找
+    for (let d of directions) {
+      if (this.moveInfoCache[d] == null) {
+        const node = this.findNearestBrother(d);
+        this.moveInfoCache[d] = node == null ? NO_NEIGHBOR : node;
+      }
+    }
+  }
+
+  private getLayoutChildDir() {
+    //layer模式, 所有子的共同方向
+    const commonDir = this.findListCommonDir(this.children);
+    let dir: Direction;
+    if (commonDir != null) {
+      dir = commonDir;
+    } else {
+      //layer模式, 子却没有一个统一的方向, 改为寻找最近
+      console.warn("layer mode while children node are not at same side of parent.");
+      const nearest = this.findNearest(this.children) as DataNode; // 必然不为null, 强转类型
+      //矩形的位置判断逻辑没有交换等价性, 因此需要子相对父的位置再取反
+      dir = nearest.rect.relativeTo(this.rect);
+    }
+    return dir;
+  }
+
+  private findListCommonDir(list: Array<DataNode>): Direction | null {
+    let result = 0b1111;
+    let detail = { value: 0 }
+    list.forEach(node => {
+      detail.value = 0;
+      node.rect.relativeTo(this.rect, detail);
+      result &= detail.value
+    });
+    if (result & CONST.LEFT_BIT) {
+      return CONST.LEFT;
+    } else if (result & CONST.TOP_BIT) {
+      return CONST.TOP;
+    } else if (result & CONST.RIGHT_BIT) {
+      return CONST.RIGHT;
+    } else if (result & CONST.BOTTOM_BIT) {
+      return CONST.BOTTOM;
+    } else {
+      return null;
+    }
+  }
+
+  /**
+   * 寻找指定方向的同级节点, 寻找逻辑:
+   *  1. 寻找该方向的最近兄弟节点, 否则就寻找父的最近兄弟节点, 直到找到节点或者到达根节点
+   *  2. 若找到的是其他子树的节点, 则往叶方向寻找与本分支同级节点最近的节点, 直到无子或者找到与本节点同级的节点为止
+   * @param direction
+   */
+  private findNearestBrother(direction: Direction) {
+    let result: DataNode | null = null;
+    let stack: Array<DataNode> = [this];
+    while (stack.length > 0) {
+      const target = stack[stack.length - 1];
+      if (target.parent) {
+        if (target.parent.children.length > 0) {
+          //寻找target的最近的兄弟节点
+          const nearestNode = target.findDirNearest(target.parent.children, direction);
+          if (nearestNode != null) {
+            //向上找到相邻分支的根节点, 开始延该分支往下找
+            result = nearestNode;
+            stack.pop();
+            while (stack.length > 0 && result.children.length > 0) {
+              const t = stack.pop() as DataNode;
+              const n = t.findDirNearest(result.children, direction);
+              if (n) {
+                result = n;
+              }
+            }
+            break;
+          } else {
+            //指定方向无兄弟节点, 继续往上
+            stack.push(target.parent);
+          }
+        } else {
+          //父节点无child, 继续往上找
+          stack.push(target.parent);
+        }
+      } else {
+        //未找到
+        break;
+      }
+    }
+    return result;
+  }
+
+  private cleanMoveInfoCache() {
+    this.moveInfoCache.left = null;
+    this.moveInfoCache.top = null;
+    this.moveInfoCache.right = null;
+    this.moveInfoCache.bottom = null;
+    this.moveInfoCache.moveType = null;
+    this.moveInfoCache.parentDir = null;
+
+    if (this.children) {
+      this.children.forEach(i => i.cleanMoveInfoCache())
+    }
+  }
+
+  private getMoveType() {
+    if (this.moveInfoCache.moveType) return this.moveInfoCache.moveType;
+    let type = this.moveType;
+    if (type == "inherit") {
+      type = DataNode.DEFAULT_MOVE_TYPE;
+      let node = this.parent;
+      while (node) {
+        if (node.moveType != "inherit") {
+          type = node.moveType;
+          break;
+        }
+      }
+    }
+    this.moveInfoCache.moveType = type;
+    return type;
+  }
+
+  /**
+   * 寻找最近的node
+   */
+  private findNearest(list: Array<DataNode>, minDistance: number = Infinity) {
+    if (this.children.length == 0) return null;
+    let targetChild: DataNode | null = null;
+    for (let i of list) {
+      if (i != this) {
+        const d = this.rect.distance(i.rect);
+        if (d < minDistance) {
+          minDistance = d;
+          targetChild = i;
+        }
+      }
+    }
+    return targetChild;
+  }
+
+  //寻找指定方向最近item
+  private findDirNearest(list: Array<DataNode>, direction: Direction) {
+    if (!list || list.length == 0) return null;
+    let targetChild: DataNode | null = null;
+    let dirDetail = { value: 0 }
+    let minDistance = Infinity;
+    const dirBit = CONST.dirStrToBit(direction);
+    for (let i of list) {
+      if (i != this) {
+        dirDetail.value = 0
+        i.rect.relativeTo(this.rect, dirDetail);
+        if (dirDetail.value & dirBit) {
+          const d = i.rect.distance(this.rect, true);
+          if (d < minDistance) {
+            minDistance = d;
+            targetChild = i;
+          }
+        }
+      }
+    }
+    return targetChild;
+  }
+
+  //描画相关代码
+  private customerListener: any = {};
+  private mounted: boolean = false;
+  private focused: boolean = false;
+  private divRef: any = null;
+  private lineStyle: any = null;
+
+  public setLineStyle(style: any) {
+    this.lineStyle = style;
+  }
+
+  public getLineStyle() { return this.lineStyle; }
+
+  public onFocus() {
+    this.focused = true;
+    this.customerListener.onFocus?.()
+  }
+
+  public onBlur() {
+    this.focused = false;
+    this.customerListener.onBlur?.()
+  }
+
+  public onClick() { this.customerListener.onClick?.() }
+
+  public getRegister() {
+    return {
+      register: (name: string, func: Function) => {
+        this.customerListener[name] = func;
+      }
+    }
+  }
+
+  public onRef = (divRef: any) => {
+    if (this.divRef == null && !!divRef) {
+      // mounted
+      this.mounted = true;
+      this.divRef = divRef;
+      if (this.focused) {
+        this.customerListener.onFocus?.();
+      }
+    } else if (this.divRef != null && !divRef) {
+      // unmounted
+      this.divRef = null;
+      this.mounted = false;
+      this.customerListener = {};
+    }
+  }
+}

package/utils/JsViewVueWidget/JsvMindMap/Geometry.ts

@@ -0,0 +1,277 @@
+import * as CONST from "./Constant";
+import { Direction } from "./CommonType";
+
+export function opposite(dir: Direction): Direction {
+  switch (dir) {
+    case "left": return "right"
+    case "top": return "bottom"
+    case "right": return "left"
+    case "bottom": return "top"
+  }
+}
+
+export class Point {
+  public x: number = 0;
+  public y: number = 0;
+  constructor(x: number, y: number) {
+    this.x = x;
+    this.y = y;
+  }
+
+  public distance(p: Point, quad: boolean = false) {
+    const qd = (p.x - this.x) ** 2 + (p.y - this.y) ** 2;
+    if (quad) {
+      return qd;
+    } else {
+      return Math.sqrt(qd);
+    }
+  }
+
+  /**
+   * 获取两点指点的相对位置(四向划分, 以45度线为界)
+   * @param p 
+   * @returns 
+   */
+  public relativeTo(p: Point) {
+    const dx = this.x - p.x;
+    const dy = this.y - p.y;
+    const absDx = Math.abs(dx);
+    const absDy = Math.abs(dy)
+    if (absDx < absDy) {
+      return dy > 0 ? CONST.BOTTOM : CONST.TOP;
+    } else {
+      return dx > 0 ? CONST.RIGHT : CONST.LEFT;
+    }
+  }
+
+  public clone() {
+    return new Point(this.x, this.y);
+  }
+}
+
+export class Line {
+  public p0: Point;
+  public p1: Point;
+
+  constructor(p0: Point, p1: Point) {
+    this.p0 = p0;
+    this.p1 = p1;
+  }
+
+  get center() {
+    return new Point(Math.round((this.p0.x + this.p1.x) / 2), Math.round((this.p0.y + this.p1.y) / 2))
+  }
+}
+
+export class Rect {
+  public x: number;
+  public y: number;
+  public width: number;
+  public height: number;
+
+  constructor(x: number, y: number, width: number, height: number) {
+    this.x = x;
+    this.y = y;
+    this.width = width;
+    this.height = height;
+  }
+
+  /**
+   * 计算两个矩形之间的最小距离
+   * @param rect 
+   * @param quad 
+   * @returns 
+   */
+  public distance(rect: Rect, quad: boolean = false) {
+    // 计算两个矩形的中心点坐标
+    const center1 = this.center;
+    const center2 = rect.center
+
+    // 计算中心点之间的水平和垂直距离
+    const deltaX = Math.abs(center1.x - center2.x);
+    const deltaY = Math.abs(center1.y - center2.y);
+
+    // 计算最近距离
+    const halfWidth1 = this.width / 2;
+    const halfHeight1 = this.height / 2;
+    const halfWidth2 = rect.width / 2;
+    const halfHeight2 = rect.height / 2;
+
+    const closestX = Math.max(0, deltaX - halfWidth1 - halfWidth2);
+    const closestY = Math.max(0, deltaY - halfHeight1 - halfHeight2);
+
+    if (quad) {
+      return closestX * closestX + closestY * closestY;
+    } else {
+      return Math.sqrt(closestX * closestX + closestY * closestY);
+    }
+  }
+
+  /**
+   * 获取两个矩形的相对位置
+   * @param rect 自身相对于rect的位置
+   * @returns 
+   */
+  public relativeTo(rect: Rect, eightDirInfo: { value: number } | null = null) {
+    if (this.distance(rect, true) == 0) {
+      //相交的判断中心点的相对位置
+      const c1 = this.center;
+      const c2 = rect.center;
+      if (eightDirInfo) {
+        eightDirInfo.value = 0;
+        if (c1.x < c2.x) {
+          eightDirInfo.value |= CONST.LEFT_BIT
+        } else {
+          eightDirInfo.value |= CONST.RIGHT_BIT
+        }
+        if (c1.y < c2.y) {
+          eightDirInfo.value |= CONST.TOP_BIT
+        } else {
+          eightDirInfo.value |= CONST.BOTTOM_BIT
+        }
+      }
+      return c1.relativeTo(c2);
+    } else {
+      //处在正向区域中
+      if (this.y < rect.y + rect.height - 1 && rect.y < this.y + this.height - 1) {
+        if (eightDirInfo) {
+          eightDirInfo.value = this.x < rect.x ? CONST.LEFT_BIT : CONST.RIGHT_BIT;
+        }
+        return this.x < rect.x ? CONST.LEFT : CONST.RIGHT
+      } else if (this.x < rect.x + rect.width - 1 && rect.x < this.x + this.width - 1) {
+        if (eightDirInfo) {
+          eightDirInfo.value = this.y < rect.y ? CONST.TOP_BIT : CONST.BOTTOM_BIT;
+        }
+        return this.y < rect.y ? CONST.TOP : CONST.BOTTOM
+      } else {
+        //处在角区域中, 以对应角点的45度区分方位
+        if (this.x < rect.x) {
+          if (this.y > rect.y) {
+            //左下
+            if (eightDirInfo) {
+              eightDirInfo.value = CONST.LEFT_BIT | CONST.BOTTOM_BIT;
+            }
+            return this.center.relativeTo(rect.bottomLeft);
+          } else {
+            //左上
+            if (eightDirInfo) {
+              eightDirInfo.value = CONST.TOP_BIT | CONST.LEFT_BIT;
+            }
+            return this.center.relativeTo(rect.topLeft);
+          }
+        } else {
+          if (this.y > rect.y) {
+            //右下
+            if (eightDirInfo) {
+              eightDirInfo.value = CONST.BOTTOM_BIT | CONST.RIGHT_BIT;
+            }
+            return this.center.relativeTo(rect.bottomRight);
+          } else {
+            //右上
+            if (eightDirInfo) {
+              eightDirInfo.value = CONST.TOP_BIT | CONST.RIGHT_BIT;
+            }
+            return this.center.relativeTo(rect.topRight);
+          }
+        }
+      }
+    }
+  }
+
+  public getEdge(dir: Direction): Line {
+    switch (dir) {
+      case "left": return this.leftEdge;
+      case "top": return this.topEdge;
+      case "right": return this.rightEdge;
+      case "bottom": return this.bottomEdge;
+    }
+  }
+
+  public containPoint(point: Point): boolean {
+    return this.x <= point.x
+      && this.x + this.width - 1 >= point.x
+      && this.y <= point.y
+      && this.y + this.height - 1 >= point.y
+  }
+
+  public containRect(rect: Rect): boolean {
+    return this.x <= rect.x
+      && this.y <= rect.y
+      && this.x + this.width - 1 >= rect.x + rect.width - 1
+      && this.y + this.height - 1 >= rect.y + rect.height - 1
+  }
+
+  /**
+   * 获取矩形中离点最近的点
+   * @param point 
+   */
+  public getClosestPoint(point: Point): Point {
+    if (this.containPoint(point)) {
+      return point.clone();
+    } else if (this.x <= point.x && this.x + this.width - 1 >= point.x) {
+      return new Point(point.x, point.y < this.y ? this.y : this.y + this.width - 1);
+    } else if (this.y <= point.y && this.y + this.height - 1 >= point.y) {
+      return new Point(point.x < this.x ? this.x : this.x + this.width - 1, point.y);
+    } else {
+      //角部
+      if (point.x < this.x) {
+        return point.y < this.y ? this.topLeft : this.bottomLeft;
+      } else {
+        return point.y < this.y ? this.topRight : this.bottomRight;
+      }
+    }
+  }
+
+  get topLeft() {
+    return new Point(this.x, this.y);
+  }
+
+  get topRight() {
+    return new Point(this.x + this.width - 1, this.y);
+  }
+
+  get bottomLeft() {
+    return new Point(this.x, this.y + this.height - 1);
+  }
+
+  get bottomRight() {
+    return new Point(this.x + this.width - 1, this.y + this.height - 1);
+  }
+
+  get center() {
+    return new Point(Math.round(this.x + this.width / 2), Math.round(this.y + this.height / 2))
+  }
+
+  get leftEdge() {
+    return new Line(this.topLeft, this.bottomLeft);
+  }
+
+  get topEdge() {
+    return new Line(this.topLeft, this.topRight);
+  }
+
+  get rightEdge() {
+    return new Line(this.topRight, this.bottomRight);
+  }
+
+  get bottomEdge() {
+    return new Line(this.bottomLeft, this.bottomRight);
+  }
+
+  get left() { return this.x; }
+
+  get top() { return this.y; }
+
+  get right() { return this.x + this.width - 1; }
+
+  get bottom() { return this.y + this.height - 1; }
+
+
+  get minX() { return this.x; }
+
+  get maxX() { return this.x + this.width - 1; }
+
+  get minY() { return this.y; }
+
+  get maxY() { return this.y + this.height - 1; }
+}