react-dagre-map-v2
Version:
okr align map, many-to-many relationship
618 lines (487 loc) • 26.9 kB
JavaScript
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
import React, { useState, useEffect, useRef } from 'react';
import NodeCard from "./components/card";
import { ARROW_DIR, DEFAULT_STYLE } from "./enum";
/**
* 思路
* 需求：多对多（g6完美契合），事件交互（g6不符合），ui细节（g6不符合）=》手撸
* 页面布局：
* 每个初始O的层级为0，向上对齐的--1，被对齐的++1.数据解构
* [
* { 第一个大层级图块，整体高度决定下一图块的起始定位，
* 因为每次动态的请求向上或者向下会更新最高高度，
* 同时收缩也会更新高度
* [-2.-2.-2.-2.-2.-2], -2
* [-1,-1,-1,-1,-1,-1], -1
* 0, 0
* [1,1,1,1,1,1,1,1,1], 1
* [2,2,2,2,2,2,2,2,2] 2
* }
*
* { 第2个大层级图块，整体高度决定下一图块的起始定位，动态的
* [-2.-2.-2.-2.-2.-2], -2
* [-1,-1,-1,-1,-1,-1], -1
* 0, 0
* [1,1,1,1,1,1,1,1,1], 1
* [2,2,2,2,2,2,2,2,2] 2
* }
* ]
*
* 每个高度124 ，宽度340，上下间距16，用padding 8,左右
* 高度用定位来做 起始高度+
*
* 画曲线要主要 向上对齐的只有左边有收缩右边没有
* 向下的被对齐只有右边有收缩，左边没有
*
* 收缩 展开 ，原始 ，操作后，怎么记录
*
*
*
*/
// let OFFSET_L = 40; // 整体距离页面左边的初始间距。
// let OFFSET_R = 40; // 整体距离页面右边的初始间距。
// let OFFSET_TOP = 20; // 图层组元素的初始纵向间距
// let NODE_OFFSET_Y = 30; // 每个图层组元素的纵向间距
// let NODE_OFFSET_X = 100; // 元素左右之间间距 100，
// let CR = 8; // 收缩展开按钮圆形半径，是元素之外的位置 ，同时距离元素margin也是一个半径.
// let NODE_WIDTH = 340; // 元素本身宽度，不包括 340
// let NODE_HEIGHT = 124; // 元素本身宽度，不包括 340
// const OVERALL_WIDTH = NODE_WIDTH + NODE_OFFSET_X;
// const OVERALL_HEIGHT = NODE_HEIGHT + 2 * CR;
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var OkrMap = function OkrMap(props) {
var _props$data = props.data,
data = _props$data === void 0 ? [] : _props$data,
renderChild = props.renderChild,
_props$offset = props.offset,
offset = _props$offset === void 0 ? {} : _props$offset,
_props$nodeStyle = props.nodeStyle,
nodeStyle = _props$nodeStyle === void 0 ? {} : _props$nodeStyle,
_props$fieldNames = props.fieldNames,
fieldNames = _props$fieldNames === void 0 ? {} : _props$fieldNames,
fetchMoreData = props.fetchMoreData;
var _offset$left = offset.left,
OFFSET_L = _offset$left === void 0 ? DEFAULT_STYLE.OFFSET_L : _offset$left,
_offset$top = offset.top,
OFFSET_TOP = _offset$top === void 0 ? DEFAULT_STYLE.OFFSET_TOP : _offset$top,
_offset$right = offset.right,
OFFSET_R = _offset$right === void 0 ? DEFAULT_STYLE.OFFSET_R : _offset$right;
var _nodeStyle$offsetY = nodeStyle.offsetY,
NODE_OFFSET_Y = _nodeStyle$offsetY === void 0 ? DEFAULT_STYLE.NODE_OFFSET_Y : _nodeStyle$offsetY,
_nodeStyle$offsetX = nodeStyle.offsetX,
NODE_OFFSET_X = _nodeStyle$offsetX === void 0 ? DEFAULT_STYLE.NODE_OFFSET_X : _nodeStyle$offsetX,
_nodeStyle$width = nodeStyle.width,
NODE_WIDTH = _nodeStyle$width === void 0 ? DEFAULT_STYLE.NODE_WIDTH : _nodeStyle$width,
_nodeStyle$height = nodeStyle.height,
NODE_HEIGHT = _nodeStyle$height === void 0 ? DEFAULT_STYLE.NODE_HEIGHT : _nodeStyle$height,
_nodeStyle$circleWidt = nodeStyle.circleWidth,
CR = _nodeStyle$circleWidt === void 0 ? DEFAULT_STYLE.CR : _nodeStyle$circleWidt;
var OVERALL_WIDTH = NODE_WIDTH + NODE_OFFSET_X;
var OVERALL_HEIGHT = NODE_HEIGHT + 2 * CR;
var FIELDNAMES = _objectSpread({
id: 'id',
up: 'up',
down: 'down',
upLength: 'upLength',
downLength: 'downLength'
}, fieldNames); //唯一uuid
var uuidRef = useRef(1); // 增加过节点信息的数据（这个数据也能用来初始化）
var _useState = useState([]),
_useState2 = _slicedToArray(_useState, 2),
treeData = _useState2[0],
setTreeData = _useState2[1]; // 扁平化的数据
var _useState3 = useState([]),
_useState4 = _slicedToArray(_useState3, 2),
nodeData = _useState4[0],
setNodeData = _useState4[1];
var xRef = useRef(1); // 整体页面的最大排列columns，可以用来计算页面最小宽度,默认最小值有一层根节点（其实也有可能没有，问题不大）
var yRef = useRef(OFFSET_TOP); // 整体页面的最大深度（高度）
var _useState5 = useState(0),
_useState6 = _slicedToArray(_useState5, 2),
maxWid = _useState6[0],
setMaxWid = _useState6[1];
var _useState7 = useState(0),
_useState8 = _slicedToArray(_useState7, 2),
maxHei = _useState8[0],
setMaxHei = _useState8[1];
var _useState9 = useState({}),
_useState10 = _slicedToArray(_useState9, 2),
rankInfo = _useState10[0],
setRankInfo = _useState10[1];
var _useState11 = useState([]),
_useState12 = _slicedToArray(_useState11, 2),
edges = _useState12[0],
setEdges = _useState12[1]; // 计算div左右2个坐标,元素本身的（曲线起始结束点）
var getLinePoint = function getLinePoint(obj) {
if (obj.rank === 0) {
// 根节点左右2边都有收缩展开的
obj.leftX = obj.left - 3 * CR; // 左边线x应该是 定位位置 - 展开球位置
obj.leftY = obj.top + NODE_HEIGHT / 2; // 左边线x应该是 定位位置 - 展开球位置
obj.rightX = obj.left + NODE_WIDTH + 3 * CR; // 右边线x应该是 定位位置 + 节点宽度+ 展开球位置
obj.rightY = obj.top + NODE_HEIGHT / 2;
} else if (obj.rank > 0) {
// 被对齐 只有右边的收缩展开球节点
obj.leftX = obj.left; // 左边线x应该是 定位位置
obj.leftY = obj.top + NODE_HEIGHT / 2; // 左边线x应该是 定位位置 - 展开球位置
obj.rightX = obj.left + NODE_WIDTH + 3 * CR; // 右边线x应该是 定位位置 + 节点宽度+ 展开球位置
obj.rightY = obj.top + NODE_HEIGHT / 2;
} else if (obj.rank < 0) {
// 对齐节点，只有左边收缩展开节点
obj.leftX = obj.left - 3 * CR; // 左边线x应该是 定位位置 - 展开球位置
obj.leftY = obj.top + NODE_HEIGHT / 2; // 左边线x应该是 定位位置 - 展开球位置
obj.rightX = obj.left + NODE_WIDTH; // 右边线x应该是 定位位置 + 节点宽度+ 展开球位置
obj.rightY = obj.top + NODE_HEIGHT / 2;
}
}; // 配置变现path，收集edges,不需要收集根节点
var configEdges = function configEdges(props) {
var source = props.source,
target = props.target,
direction = props.direction,
initEdges = props.initEdges;
if (direction === ARROW_DIR.ROOT) {
// 根节点不需要绘制
return;
}
var startX, startY, endX, endY, c1X, c1Y, c2X, c2Y;
if (direction === ARROW_DIR.UP) {
// target处于左边位置,
startX = source.leftX;
startY = source.leftY;
endX = target.rightX;
endY = target.rightY;
} else {
// target处于右边位置,
startX = source.rightX;
startY = source.rightY;
endX = target.leftX;
endY = target.leftY;
}
c1X = (startX + endX) / 2;
c1Y = startY;
c2X = c1X;
c2Y = endY;
var obj = {
d: "M".concat(startX, ",").concat(startY, "C").concat(c1X, ",").concat(c1Y, ",").concat(c2X, ",").concat(c2Y, ",").concat(endX, ",").concat(endY),
source: source,
target: target,
direction: direction,
visible: target.visible
};
initEdges.push(obj);
}; // 初始化
var createPosition = function createPosition(orginData) {
// 所有的边信息暂存数据
var initEdges = [];
var tmpRankInfo = {};
var originArr = JSON.parse(JSON.stringify(orginData));
var endArr = [];
uuidRef.current = 1; //设置初始值
initPositionn(originArr, null, ARROW_DIR.ROOT, tmpRankInfo, null, null);
drawNode(originArr, null, ARROW_DIR.ROOT, initEdges, tmpRankInfo, endArr, null, -1);
setTreeData(JSON.parse(JSON.stringify(originArr)));
setEdges(initEdges);
setNodeData(endArr);
setRankInfo(tmpRankInfo); // 可存可不存，先存着吧，留着以后拓展用
setMaxWid(xRef.current * OVERALL_WIDTH + OFFSET_L + OFFSET_R);
setMaxHei(yRef.current);
}; // 初始化节点基本信息
var initPositionn = function initPositionn(originArr, parent, direction, tmpRankInfo, originId, originUuid) {
// 设置初始值
yRef.current = OFFSET_TOP; // 遍历当前层级
for (var i = 0; i < originArr.length; i++) {
var _curr$FIELDNAMES$up, _curr$FIELDNAMES$down, _tmpRankInfo$curr$ran;
var curr = originArr[i]; // 递归遍历进入第一层
// 唯一标识id
curr.uuid = uuidRef.current;
uuidRef.current++; // 操作id
curr.id = curr[FIELDNAMES['id']]; //赋值id
if (direction === ARROW_DIR.ROOT) {
originId = curr.id;
originUuid = curr.uuid;
curr.rank = 0; // 当前o是第几层，最初是0层
Reflect.set(tmpRankInfo, curr.uuid, {
x: 1,
y: 1,
minRank: 0
});
} else if (direction === ARROW_DIR.UP) {
curr.rank = (parent === null || parent === void 0 ? void 0 : parent.rank) - 1;
} else if (direction === ARROW_DIR.DOWN) {
curr.rank = (parent === null || parent === void 0 ? void 0 : parent.rank) + 1;
} // 记录父级和根节点id(留着备用)
curr.rootID = originId;
curr.parentID = parent ? parent.id : null; // 根节点没有父级id
curr.rootUUID = originUuid;
curr.parentUUID = parent ? parent.uuid : null; // 权限部分
curr.visible = curr.visible || true; //是否可见（默认可见，备用）
curr.hideUp = curr.hideUp || false; //默认都不隐藏，即为展开，控制左下级的
curr.hideDown = curr.hideDown || false; //默认都不隐藏，即为展开，控制右下级的
var upLen = ((_curr$FIELDNAMES$up = curr[FIELDNAMES['up']]) === null || _curr$FIELDNAMES$up === void 0 ? void 0 : _curr$FIELDNAMES$up.length) || 0; // 下节点的个数
var downLen = ((_curr$FIELDNAMES$down = curr[FIELDNAMES['down']]) === null || _curr$FIELDNAMES$down === void 0 ? void 0 : _curr$FIELDNAMES$down.length) || 0; // 上节点的个数
// 如果这一层级，没有数据，初始化数据，有的话用原来的
tmpRankInfo[originUuid][curr.rank] = (_tmpRankInfo$curr$ran = tmpRankInfo[originUuid][curr.rank]) !== null && _tmpRankInfo$curr$ran !== void 0 ? _tmpRankInfo$curr$ran : {
status: false,
// 没有被记录过
num: 0,
startNum: 0,
reNum: 0
}; // 既然进入这个节点，那么之前的num加1，更新num。
tmpRankInfo[originUuid][curr.rank].num = ++tmpRankInfo[originUuid][curr.rank].num; // 更新当前图层最大y，方便绘制图线
tmpRankInfo[originUuid]['y'] = Math.max( // upLen,
// downLen,
tmpRankInfo[originUuid]['y'], tmpRankInfo[originUuid][curr.rank].num); // 当前这个0的最大高度层级，每一个都记录下吧,用上一层和下一层做对比
xRef.current = Math.max(tmpRankInfo[originUuid]['x'], xRef.current); // 一个图层组，当前在一列排行第几
// curr.rankIndex = tmpRankInfo[originUuid as number][curr.rank].num - 1;
if (upLen && curr.rank < 1 && !curr.hideUp) {
var _tmpRankInfo;
// 如果当前列，没有被记录
tmpRankInfo[originUuid][curr.rank - 1] = (_tmpRankInfo = tmpRankInfo[originUuid][curr.rank - 1]) !== null && _tmpRankInfo !== void 0 ? _tmpRankInfo : {
status: false,
// 当前列如果被记录过，那就是true，初始化时false,没被记录过
num: 0,
startNum: 0,
reNum: 0
};
if (!tmpRankInfo[originUuid][curr.rank - 1].status) {
tmpRankInfo[originUuid]['x'] = tmpRankInfo[originUuid]['x'] + 1; // 当前这个0的最大宽度层级，每一个都记录下吧,用上一层和下一层做对比
tmpRankInfo[originUuid]['minRank'] = curr.rank - 1;
tmpRankInfo[originUuid][curr.rank - 1].status = true;
}
initPositionn(curr[FIELDNAMES['up']], curr, ARROW_DIR.UP, tmpRankInfo, originUuid, originUuid);
} else if (direction === ARROW_DIR.UP) {
curr.hideUp = true;
}
if (downLen && curr.rank > -1 && !curr.hideDown) {
var _tmpRankInfo2;
tmpRankInfo[originUuid][curr.rank + 1] = (_tmpRankInfo2 = tmpRankInfo[originUuid][curr.rank + 1]) !== null && _tmpRankInfo2 !== void 0 ? _tmpRankInfo2 : {
status: false,
num: 0,
startNum: 0,
reNum: 0
}; // 如果当前列，没有被记录
if (!tmpRankInfo[originUuid][curr.rank + 1].status) {
tmpRankInfo[originUuid]['x'] = tmpRankInfo[originUuid]['x'] + 1; // 当前这个0的最大宽度层级，每一个都记录下吧,用上一层和下一层做对比
tmpRankInfo[originUuid][curr.rank + 1].status = true;
}
initPositionn(curr[FIELDNAMES['down']], curr, ARROW_DIR.DOWN, tmpRankInfo, originId, originUuid);
} else if (direction === ARROW_DIR.DOWN) {
curr.hideDown = true;
}
}
}; // 绘画div,更新div定位信息
var drawNode = function drawNode(originArr, parent, direction, initEdges, tmpRankInfo, endArr, originUuid, currentGroup) {
var arrNum = originArr.length; // 遍历当前层级
for (var i = 0; i < arrNum; i++) {
var _curr$FIELDNAMES$up2, _curr$FIELDNAMES$down2;
var curr = originArr[i];
if (direction === ARROW_DIR.ROOT) {
currentGroup++;
originUuid = curr.uuid;
yRef.current = tmpRankInfo[originUuid]['y'] * OVERALL_HEIGHT + yRef.current + NODE_OFFSET_Y;
for (var key in tmpRankInfo[curr.uuid]) {
if (tmpRankInfo[curr.uuid].hasOwnProperty(key) && !isNaN(Number(key))) {
tmpRankInfo[curr.uuid][key].startNum = 0; // tmpRankInfo[curr.uuid][key].reNum = tmpRankInfo[curr.uuid][key].num;
}
}
} // else if(direction === ARROW_DIR.UP && curr.hideUp){
// tmpRankInfo[originUuid as number][curr.rank].reNum = tmpRankInfo[originUuid as number][curr.rank].reNum - (curr?.align ? curr.align.length : 0);
// }else if(direction === ARROW_DIR.DOWN && curr.hideDown){
// tmpRankInfo[originUuid as number][curr.rank].reNum = tmpRankInfo[originUuid as number][curr.rank].reNum - (curr?.be_align ? curr.be_align.length : 0);
// }
var upLen = ((_curr$FIELDNAMES$up2 = curr[FIELDNAMES['up']]) === null || _curr$FIELDNAMES$up2 === void 0 ? void 0 : _curr$FIELDNAMES$up2.length) || 0; // 下节点的个数
var downLen = ((_curr$FIELDNAMES$down2 = curr[FIELDNAMES['down']]) === null || _curr$FIELDNAMES$down2 === void 0 ? void 0 : _curr$FIELDNAMES$down2.length) || 0; // 上节点的个数
curr.rankIndex = tmpRankInfo[originUuid][curr.rank].startNum || 0, tmpRankInfo[originUuid][curr.rank].startNum++; // 当前节点left top
curr.left = (curr.rank - tmpRankInfo[originUuid]['minRank']) * OVERALL_WIDTH + OFFSET_L;
curr.top = (tmpRankInfo[originUuid]['y'] - tmpRankInfo[originUuid][curr.rank].num) / 2 * OVERALL_HEIGHT + curr.rankIndex * OVERALL_HEIGHT + yRef.current - tmpRankInfo[originUuid]['y'] * OVERALL_HEIGHT - NODE_OFFSET_Y; // 设置元素point x y
getLinePoint(curr); // 绘制边
configEdges({
source: parent,
target: curr,
direction: direction,
initEdges: initEdges
}); // 输出扁平化数组
endArr.push(curr);
if (upLen && curr.rank < 1 && !curr.hideUp) {
drawNode(curr[FIELDNAMES['up']], curr, ARROW_DIR.UP, initEdges, tmpRankInfo, endArr, originUuid, currentGroup);
}
if (downLen && curr.rank > -1 && !curr.hideDown) {
drawNode(curr[FIELDNAMES['down']], curr, ARROW_DIR.DOWN, initEdges, tmpRankInfo, endArr, originUuid, currentGroup);
}
}
}; // 新增节点,处理各种信息
var addNode = function addNode(nodes, parent, direction, tmpRankInfo) {
for (var i = 0; i < nodes.length; i++) {
var _tmpRankInfo$curr$roo;
var curr = nodes[i]; // 唯一标识id
curr.uuid = uuidRef.current;
uuidRef.current++; // 处理自身id,兼容性
curr.id = curr[FIELDNAMES['id']]; // 记录父级和根节点id(留着备用)
curr.rootID = parent.rootID;
curr.parentID = parent.id;
curr.rootUUID = parent.rootUUID;
curr.parentUUID = parent.uuid; // 权限部分
curr.visible = true; //是否可见（默认可见,备用）
curr.hideUp = true; //默认隐藏下级，控制左下级的
curr.hideDown = true; //默认隐藏下级，控制右下级的
if (direction === ARROW_DIR.UP) {
curr.rank = parent.rank - 1;
} else if (direction === ARROW_DIR.DOWN) {
curr.rank = parent.rank + 1;
} // 如果这一层级，没有数据，初始化数据，有的话用原来的
tmpRankInfo[curr.rootUUID][curr.rank] = (_tmpRankInfo$curr$roo = tmpRankInfo[curr.rootUUID][curr.rank]) !== null && _tmpRankInfo$curr$roo !== void 0 ? _tmpRankInfo$curr$roo : {
status: false,
// 没有被记录过
num: 0,
// 0 代表没有数据
reNum: 0
}; // 既然进入这个节点，那么之前的num加1，更新num。
tmpRankInfo[curr.rootUUID][curr.rank].num = ++tmpRankInfo[curr.rootUUID][curr.rank].num; // 更新当前图层最大y，方便绘制图线
tmpRankInfo[curr.rootUUID]['y'] = Math.max(tmpRankInfo[curr.rootUUID]['y'], tmpRankInfo[curr.rootUUID][curr.rank].num); // 更新当前rank信息
if (!tmpRankInfo[curr.rootUUID][curr.rank].status) {
tmpRankInfo[curr.rootUUID]['x'] = tmpRankInfo[curr.rootUUID]['x'] + 1; // 当前这个0的最大宽度层级，每一个都记录下吧,用上一层和下一层做对比
tmpRankInfo[curr.rootUUID][curr.rank].status = true;
if (direction === ARROW_DIR.UP) {
tmpRankInfo[curr.rootUUID]['minRank'] = curr.rank;
}
} // 当前这个0的最大高度层级，每一个都记录下吧,用上一层和下一层做对比
xRef.current = Math.max(tmpRankInfo[curr.rootUUID]['x'], xRef.current); // 一个图层组，当前在一列排行第几（这个从0开始，所以要-1）（这点要注意，要对比父级的rankIndex,不然可能会出现交叉）
// curr.rankIndex = tmpRankInfo[curr.rootUUID][curr.rank].num - 1;
}
}; // 收缩-更新节点（命中父节点）
var updatePosition = function updatePosition(originArr, info, direction, initEdges, tmpRankInfo, endArr, initArr) {
var curr;
for (var i = 0; i < originArr.length; i++) {
curr = originArr[i]; // 命中
if (curr.uuid === info.uuid) {
if (direction === ARROW_DIR.DOWN) {
if (info.hideDown) {
var _info$FIELDNAMES$down;
// 当前是隐藏的，现在需要展开
if (!info[FIELDNAMES['down']] || !((_info$FIELDNAMES$down = info[FIELDNAMES['down']]) !== null && _info$FIELDNAMES$down !== void 0 && _info$FIELDNAMES$down.length)) {
// 如果树没有要展开的数据，那么去更新，请求数据
// 请求数据
fetchMoreData(info, direction).then(function (res) {
if (res.data === []) {
return;
}
addNode(res.data, info, direction, tmpRankInfo);
curr[FIELDNAMES['down']] = res.data;
curr.hideDown = false;
batchSetData(initArr, initEdges, tmpRankInfo, endArr);
});
} else {
curr.hideDown = false; // batchSetData(initArr, initEdges, tmpRankInfo, endArr);
createPosition(initArr);
}
} else {
curr.hideDown = true; // batchSetData(initArr, initEdges, tmpRankInfo, endArr);
createPosition(initArr);
}
} else {
if (info.hideUp) {
var _info$FIELDNAMES$up;
// 当前是隐藏的，现在需要展开
if (!info[FIELDNAMES['up']] || !((_info$FIELDNAMES$up = info[FIELDNAMES['up']]) !== null && _info$FIELDNAMES$up !== void 0 && _info$FIELDNAMES$up.length)) {
// 如果树没有要展开的数据，那么去更新，请求数据
// 请求数据
fetchMoreData(info, direction).then(function (res) {
if (res.data === []) {
return;
}
addNode(res.data, info, direction, tmpRankInfo);
curr[FIELDNAMES['up']] = res.data;
curr.hideUp = false;
batchSetData(initArr, initEdges, tmpRankInfo, endArr);
});
} else {
curr.hideUp = false; // batchSetData(initArr, initEdges, tmpRankInfo, endArr);
createPosition(initArr);
}
} else {
curr.hideUp = true; // batchSetData(initArr, initEdges, tmpRankInfo, endArr);
createPosition(initArr);
}
}
break;
} else {
if (direction === ARROW_DIR.DOWN) {
curr[FIELDNAMES['down']] && updatePosition(curr[FIELDNAMES['down']], info, direction, initEdges, tmpRankInfo, endArr, initArr);
} else {
curr[FIELDNAMES['up']] && updatePosition(curr[FIELDNAMES['up']], info, direction, initEdges, tmpRankInfo, endArr, initArr);
}
}
}
}; // 张开伸缩
var hideOrOpen = function hideOrOpen(info, direction) {
var originArr = JSON.parse(JSON.stringify(treeData));
var tmpRankInfo = JSON.parse(JSON.stringify(rankInfo)); // 所有的边信息暂存数据
var initEdges = [];
var endArr = [];
updatePosition(originArr, info, direction, initEdges, tmpRankInfo, endArr, originArr);
}; // 设置数据
var batchSetData = function batchSetData(originArr, initEdges, tmpRankInfo, endArr) {
yRef.current = OFFSET_TOP;
drawNode(originArr, null, ARROW_DIR.ROOT, initEdges, tmpRankInfo, endArr, null, -1);
setTreeData(JSON.parse(JSON.stringify(originArr)));
setEdges(initEdges);
setNodeData(endArr);
setRankInfo(tmpRankInfo);
setMaxWid(xRef.current * OVERALL_WIDTH + OFFSET_L + OFFSET_R);
setMaxHei(yRef.current);
}; // 初始化
useEffect(function () {
createPosition(data);
}, [data]);
return /*#__PURE__*/_jsx("div", {
children: /*#__PURE__*/_jsxs("div", {
style: {
position: 'relative',
minHeight: maxHei,
minWidth: maxWid
},
children: [nodeData.map(function (item) {
if (!item.visible) {
return null;
}
return /*#__PURE__*/_jsx(NodeCard, {
hideOrOpen: hideOrOpen,
info: item,
style: {
left: item.left,
top: item.top,
width: NODE_WIDTH,
height: NODE_HEIGHT,
position: 'absolute',
boxSizing: 'border-box'
},
renderChild: renderChild,
width: NODE_WIDTH,
height: NODE_HEIGHT,
circleWidth: CR,
fieldNames: FIELDNAMES
}, item.uuid);
}), /*#__PURE__*/_jsx("svg", {
width: maxWid,
height: maxHei,
children: edges.map(function (item, index) {
return /*#__PURE__*/_jsx("path", {
fill: "none",
stroke: "#C7C7D7",
strokeWidth: "1",
d: item.d
}, index);
})
})]
})
});
};
export default OkrMap;