react-dagre-map-v2 - npm Package Compare versions

Comparing version 1.3.2 to 1.3.3

dist/esm/DagreMap/api.d.ts

+export declare const addOkrMaoData: () => Promise<{
+    id: number;
+}>;

dist/esm/DagreMap/api.js

+export var addOkrMaoData = function addOkrMaoData() {
+  return Promise.resolve({
+    id: 1
+  });
+};

dist/esm/DagreMap/components/card/index.css

+@keyframes turnX {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  0% {
+    transform: rotate(180deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}

dist/esm/DagreMap/components/card/index.d.ts

+import React from 'react';
+import './index.css';
+import { INode } from '../../interface';
+declare const Card: React.FC<Partial<INode>>;
+export default Card;

dist/esm/DagreMap/components/card/index.js

+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; }
+
+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; }
+
+import React, { useState, useEffect } from 'react';
+import "./index.css";
+import { ARROW_DIR } from "../../enum";
+import loadingPng from "../../images/loading.png";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var lineStyle = {
+  position: 'absolute',
+  height: '1px',
+  backgroundColor: '#c7c7d7'
+};
+var circleStyle = {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  position: 'absolute',
+  boxSizing: 'border-box',
+  background: '#ffffff',
+  border: '1px solid #7f7f8e',
+  borderRadius: '50%',
+  textAlign: 'center',
+  fontSize: '12px',
+  cursor: 'pointer'
+};
+var loadingStyle = {
+  display: 'block',
+  width: '100%',
+  height: '100%',
+  transformOrigin: 'center',
+  animation: 'turnX 1s linear infinite'
+};
+var dreStyle = {
+  display: 'inline-block',
+  height: '1px',
+  background: '#7f7f8e'
+};
+var numStyle = {
+  fontSize: '12px',
+  display: 'inline-block',
+  transform: 'scale(0.8)',
+  transformOrigin: '50%',
+  letterSpacing: '-1px'
+};
+
+var Card = function Card(props) {
+  var info = props.info,
+      _props$style = props.style,
+      style = _props$style === void 0 ? {} : _props$style,
+      hideOrOpen = props.hideOrOpen,
+      renderChild = props.renderChild,
+      fieldNames = props.fieldNames,
+      circleWidth = props.circleWidth,
+      width = props.width,
+      height = props.height;
+  var uuid = info.uuid,
+      rank = info.rank,
+      hideUp = info.hideUp,
+      hideDown = info.hideDown;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      loadingLeft = _useState2[0],
+      setLoadingLeft = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      loadingRight = _useState4[0],
+      setLoadingRight = _useState4[1];
+
+  var upLength = info[fieldNames['upLength']];
+  var downLength = info[fieldNames['downLength']];
+  useEffect(function () {
+    setLoadingLeft(false);
+    setLoadingRight(false);
+  }, [JSON.stringify(info)]);
+  return /*#__PURE__*/_jsxs("div", {
+    style: style,
+    children: [renderChild(info), rank > -1 && downLength !== 0 ? /*#__PURE__*/_jsxs("div", {
+      children: [/*#__PURE__*/_jsx("div", {
+        style: _objectSpread({
+          left: width,
+          top: height / 2,
+          width: circleWidth
+        }, lineStyle)
+      }), /*#__PURE__*/_jsx("div", {
+        onClick: function onClick() {
+          setLoadingLeft(true);
+          hideOrOpen(info, ARROW_DIR.DOWN);
+        },
+        style: _objectSpread({
+          width: 2 * circleWidth,
+          height: 2 * circleWidth,
+          left: width + circleWidth,
+          top: height / 2 - circleWidth
+        }, circleStyle),
+        children: hideDown ? loadingLeft ? /*#__PURE__*/_jsx("img", {
+          style: loadingStyle,
+          src: loadingPng
+        }) : /*#__PURE__*/_jsx("span", {
+          style: numStyle,
+          children: downLength
+        }) : /*#__PURE__*/_jsx("span", {
+          style: _objectSpread({
+            width: circleWidth
+          }, dreStyle)
+        })
+      })]
+    }) : null, rank < 1 && upLength !== 0 ? /*#__PURE__*/_jsxs("div", {
+      children: [/*#__PURE__*/_jsx("div", {
+        style: _objectSpread({
+          left: -circleWidth,
+          top: height / 2,
+          width: circleWidth
+        }, lineStyle)
+      }), /*#__PURE__*/_jsx("div", {
+        onClick: function onClick() {
+          setLoadingRight(true);
+          hideOrOpen(info, ARROW_DIR.UP);
+        },
+        style: _objectSpread({
+          width: 2 * circleWidth,
+          height: 2 * circleWidth,
+          left: -3 * circleWidth,
+          top: height / 2 - circleWidth
+        }, circleStyle),
+        children: hideUp ? loadingRight ? /*#__PURE__*/_jsx("img", {
+          style: loadingStyle,
+          src: loadingPng
+        }) : /*#__PURE__*/_jsx("span", {
+          style: numStyle,
+          children: upLength
+        }) : /*#__PURE__*/_jsx("span", {
+          style: _objectSpread({
+            width: circleWidth
+          }, dreStyle)
+        })
+      })]
+    }) : null]
+  }, uuid);
+};
+
+export default Card;

dist/esm/DagreMap/enum.d.ts

+export declare enum ARROW_DIR {
+    UP = -1,
+    DOWN = 1,
+    ROOT = 0
+}
+export declare enum NODE_ACTION {
+    HIDE = 0,
+    OPEN = 1
+}
+export declare enum DEFAULT_STYLE {
+    OFFSET_L = 40,
+    OFFSET_R = 40,
+    OFFSET_TOP = 20,
+    NODE_OFFSET_Y = 30,
+    NODE_OFFSET_X = 100,
+    CR = 8,
+    NODE_WIDTH = 340,
+    NODE_HEIGHT = 124
+}

dist/esm/DagreMap/enum.js

+// 节点朝向， root 根节点 up上节点 down下节点
+export var ARROW_DIR; // 操作 隐藏or展开
+
+(function (ARROW_DIR) {
+  ARROW_DIR[ARROW_DIR["UP"] = -1] = "UP";
+  ARROW_DIR[ARROW_DIR["DOWN"] = 1] = "DOWN";
+  ARROW_DIR[ARROW_DIR["ROOT"] = 0] = "ROOT";
+})(ARROW_DIR || (ARROW_DIR = {}));
+
+export var NODE_ACTION; // 样式参数设置
+
+(function (NODE_ACTION) {
+  NODE_ACTION[NODE_ACTION["HIDE"] = 0] = "HIDE";
+  NODE_ACTION[NODE_ACTION["OPEN"] = 1] = "OPEN";
+})(NODE_ACTION || (NODE_ACTION = {}));
+
+export var DEFAULT_STYLE;
+
+(function (DEFAULT_STYLE) {
+  DEFAULT_STYLE[DEFAULT_STYLE["OFFSET_L"] = 40] = "OFFSET_L";
+  DEFAULT_STYLE[DEFAULT_STYLE["OFFSET_R"] = 40] = "OFFSET_R";
+  DEFAULT_STYLE[DEFAULT_STYLE["OFFSET_TOP"] = 20] = "OFFSET_TOP";
+  DEFAULT_STYLE[DEFAULT_STYLE["NODE_OFFSET_Y"] = 30] = "NODE_OFFSET_Y";
+  DEFAULT_STYLE[DEFAULT_STYLE["NODE_OFFSET_X"] = 100] = "NODE_OFFSET_X";
+  DEFAULT_STYLE[DEFAULT_STYLE["CR"] = 8] = "CR";
+  DEFAULT_STYLE[DEFAULT_STYLE["NODE_WIDTH"] = 340] = "NODE_WIDTH";
+  DEFAULT_STYLE[DEFAULT_STYLE["NODE_HEIGHT"] = 124] = "NODE_HEIGHT";
+})(DEFAULT_STYLE || (DEFAULT_STYLE = {}));

dist/esm/DagreMap/index.d.ts

+import React from 'react';
+import { IMapProps } from './interface';
+declare const OkrMap: React.FC<IMapProps>;
+export default OkrMap;

dist/esm/DagreMap/index.js

+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;

dist/esm/DagreMap/index.less

+.autoScroll {
+    .home {
+      position: relative;
+    }
+  }
+  

dist/esm/DagreMap/interface.d.ts

+import React from 'react';
+import { ARROW_DIR } from './enum';
+declare type TArrow = ARROW_DIR.UP | ARROW_DIR.DOWN | ARROW_DIR.ROOT;
+export interface ICard {
+    id: number | string;
+    up?: ICard[];
+    down?: ICard[];
+    upLength: number;
+    downLength: number;
+    [propName: string]: any;
+}
+export interface INode extends ICard {
+    uuid: number;
+    rank: number;
+    rootUUID: number;
+    parentID: number | null;
+    visible?: boolean;
+    hideUp?: boolean;
+    hideDown?: boolean;
+    [propName: string]: any;
+}
+export interface IEdge {
+    d: string;
+    source: ICard;
+    target: ICard;
+    direction: TArrow;
+    [propName: string]: any;
+}
+export interface IFieldNames {
+    id: string;
+    up: string;
+    down: string;
+    upLength: string;
+    downLength: string;
+}
+export interface IMapProps {
+    data?: ICard[];
+    offset?: {
+        left?: number;
+        top?: number;
+        right?: number;
+    };
+    nodeStyle?: {
+        offsetY?: number;
+        offsetX?: number;
+        width?: number;
+        height?: number;
+        circleWidth?: number;
+    };
+    fieldNames?: Partial<IFieldNames>;
+    renderChild?: (info: INode) => React.ReactNode;
+    fetchMoreData: (info: INode, direction: TArrow) => Promise<{
+        data: ICard[];
+    }>;
+    [propName: string]: any;
+}
+export {};

dist/esm/DagreMap/interface.js

+export {};

dist/esm/index.d.ts

+export { default as DagreMap } from './DagreMap';

dist/esm/index.js

@@ -1,1 +0,1 @@
-import t,{useState as e,useEffect as n,useRef as r}from"react";var i,a,o;!function(t,e){void 0===e&&(e={});var n=e.insertAt;if(t&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===n&&r.firstChild?r.insertBefore(i,r.firstChild):r.appendChild(i),i.styleSheet?i.styleSheet.cssText=t:i.appendChild(document.createTextNode(t))}}("@keyframes turnX {\n  0% {\n    transform: rotate(0deg);\n  }\n\n  0% {\n    transform: rotate(180deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n}"),function(t){t[t.UP=-1]="UP",t[t.DOWN=1]="DOWN",t[t.ROOT=0]="ROOT"}(i||(i={})),function(t){t[t.HIDE=0]="HIDE",t[t.OPEN=1]="OPEN"}(a||(a={})),function(t){t[t.OFFSET_L=40]="OFFSET_L",t[t.OFFSET_R=40]="OFFSET_R",t[t.OFFSET_TOP=20]="OFFSET_TOP",t[t.NODE_OFFSET_Y=30]="NODE_OFFSET_Y",t[t.NODE_OFFSET_X=100]="NODE_OFFSET_X",t[t.CR=8]="CR",t[t.NODE_WIDTH=340]="NODE_WIDTH",t[t.NODE_HEIGHT=124]="NODE_HEIGHT"}(o||(o={}));const l=require("../../images/loading.png"),d={position:"absolute",height:"1px",backgroundColor:"#c7c7d7"},u={display:"flex",justifyContent:"center",alignItems:"center",position:"absolute",boxSizing:"border-box",background:"#ffffff",border:"1px solid #7f7f8e",borderRadius:"50%",textAlign:"center",fontSize:"12px",cursor:"pointer"},s={display:"block",width:"100%",height:"100%",transformOrigin:"center",animation:"turnX 1s linear infinite"},h={display:"inline-block",height:"1px",background:"#7f7f8e"},c={fontSize:"12px",display:"inline-block",transform:"scale(0.8)",transformOrigin:"50%",letterSpacing:"-1px"},p=r=>{const{info:a,style:o={},hideOrOpen:p,renderChild:f,fieldNames:m,circleWidth:O,width:g,height:k}=r,{uuid:D,rank:U,hideUp:E,hideDown:N}=a,[y,w]=e(!1),[T,I]=e(!1);let S=a[m.upLength],x=a[m.downLength];return n((()=>{w(!1),I(!1)}),[JSON.stringify(a)]),t.createElement("div",{key:D,style:o},f(a),U>-1&&0!==x?t.createElement("div",null,t.createElement("div",{style:{left:g,top:k/2,width:O,...d}}),t.createElement("div",{onClick:()=>{w(!0),p(a,i.DOWN)},style:{width:2*O,height:2*O,left:g+O,top:k/2-O,...u}},N?y?t.createElement("img",{style:s,src:l}):t.createElement("span",{style:c},x):t.createElement("span",{style:{width:O,...h}}))):null,U<1&&0!==S?t.createElement("div",null,t.createElement("div",{style:{left:-O,top:k/2,width:O,...d}}),t.createElement("div",{onClick:()=>{I(!0),p(a,i.UP)},style:{width:2*O,height:2*O,left:-3*O,top:k/2-O,...u}},E?T?t.createElement("img",{style:s,src:l}):t.createElement("span",{style:c},S):t.createElement("span",{style:{width:O,...h}}))):null)},f=a=>{const{data:l=[],renderChild:d,offset:u={},nodeStyle:s={},fieldNames:h={},fetchMoreData:c}=a,{left:f=o.OFFSET_L,top:m=o.OFFSET_TOP,right:O=o.OFFSET_R}=u,{offsetY:g=o.NODE_OFFSET_Y,offsetX:k=o.NODE_OFFSET_X,width:D=o.NODE_WIDTH,height:U=o.NODE_HEIGHT,circleWidth:E=o.CR}=s,N=D+k,y=U+2*E,w={id:"id",up:"up",down:"down",upLength:"upLength",downLength:"downLength",...h},T=r(1),[I,S]=e([]),[x,F]=e([]),_=r(1),b=r(m),[v,R]=e(0),[W,C]=e(0),[P,X]=e({}),[Y,H]=e([]),J=t=>{const{source:e,target:n,direction:r,initEdges:a}=t;if(r===i.ROOT)return;let o,l,d,u,s,h,c,p;r===i.UP?(o=e.leftX,l=e.leftY,d=n.rightX,u=n.rightY):(o=e.rightX,l=e.rightY,d=n.leftX,u=n.leftY),s=(o+d)/2,h=l,c=s,p=u;let f={d:`M${o},${l}C${s},${h},${c},${p},${d},${u}`,source:e,target:n,direction:r,visible:n.visible};a.push(f)},L=t=>{let e=[],n={},r=JSON.parse(JSON.stringify(t)),a=[];T.current=1,$(r,null,i.ROOT,n,null,null),M(r,null,i.ROOT,e,n,a,null),S(JSON.parse(JSON.stringify(r))),H(e),F(a),X(n),R(_.current*N+f+O),C(b.current)},$=(t,e,n,r,a,o)=>{b.current=m;for(let l=0;l<t.length;l++){let d=t[l];d.uuid=T.current,T.current++,d.id=d[w.id],n===i.ROOT?(a=d.id,o=d.uuid,d.rank=0,Reflect.set(r,d.uuid,{x:1,y:1,minRank:0})):n===i.UP?d.rank=e?.rank-1:n===i.DOWN&&(d.rank=e?.rank+1),d.rootID=a,d.parentID=e?e.id:null,d.rootUUID=o,d.parentUUID=e?e.uuid:null,d.visible=d.visible||!0,d.hideUp=d.hideUp||!1,d.hideDown=d.hideDown||!1;let u=d[w.up]?.length||0,s=d[w.down]?.length||0;r[o][d.rank]=r[o][d.rank]??{status:!1,num:0,startNum:0,reNum:0},r[o][d.rank].num=++r[o][d.rank].num,r[o].y=Math.max(r[o].y,r[o][d.rank].num),_.current=Math.max(r[o].x,_.current),u&&d.rank<1&&!d.hideUp?(r[o][d.rank-1]=r[o][d.rank-1]??{status:!1,num:0,startNum:0,reNum:0},r[o][d.rank-1].status||(r[o].x=r[o].x+1,r[o].minRank=d.rank-1,r[o][d.rank-1].status=!0),$(d[w.up],d,i.UP,r,o,o)):n===i.UP&&(d.hideUp=!0),s&&d.rank>-1&&!d.hideDown?(r[o][d.rank+1]=r[o][d.rank+1]??{status:!1,num:0,startNum:0,reNum:0},r[o][d.rank+1].status||(r[o].x=r[o].x+1,r[o][d.rank+1].status=!0),$(d[w.down],d,i.DOWN,r,a,o)):n===i.DOWN&&(d.hideDown=!0)}},M=(t,e,n,r,a,o,l,d)=>{let u=t.length;for(let d=0;d<u;d++){let u=t[d];if(n===i.ROOT){l=u.uuid,b.current=a[l].y*y+b.current+g;for(let t in a[u.uuid])a[u.uuid].hasOwnProperty(t)&&!isNaN(Number(t))&&(a[u.uuid][t].startNum=0)}let h=u[w.up]?.length||0,c=u[w.down]?.length||0;u.rankIndex=a[l][u.rank].startNum||0,a[l][u.rank].startNum++,u.left=(u.rank-a[l].minRank)*N+f,u.top=(a[l].y-a[l][u.rank].num)/2*y+u.rankIndex*y+b.current-a[l].y*y-g,0===(s=u).rank?(s.leftX=s.left-3*E,s.leftY=s.top+U/2,s.rightX=s.left+D+3*E,s.rightY=s.top+U/2):s.rank>0?(s.leftX=s.left,s.leftY=s.top+U/2,s.rightX=s.left+D+3*E,s.rightY=s.top+U/2):s.rank<0&&(s.leftX=s.left-3*E,s.leftY=s.top+U/2,s.rightX=s.left+D,s.rightY=s.top+U/2),J({source:e,target:u,direction:n,initEdges:r}),o.push(u),h&&u.rank<1&&!u.hideUp&&M(u[w.up],u,i.UP,r,a,o,l),c&&u.rank>-1&&!u.hideDown&&M(u[w.down],u,i.DOWN,r,a,o,l)}var s},z=(t,e,n,r)=>{for(let a=0;a<t.length;a++){let o=t[a];o.uuid=T.current,T.current++,o.id=o[w.id],o.rootID=e.rootID,o.parentID=e.id,o.rootUUID=e.rootUUID,o.parentUUID=e.uuid,o.visible=!0,o.hideUp=!0,o.hideDown=!0,n===i.UP?o.rank=e.rank-1:n===i.DOWN&&(o.rank=e.rank+1),r[o.rootUUID][o.rank]=r[o.rootUUID][o.rank]??{status:!1,num:0,reNum:0},r[o.rootUUID][o.rank].num=++r[o.rootUUID][o.rank].num,r[o.rootUUID].y=Math.max(r[o.rootUUID].y,r[o.rootUUID][o.rank].num),r[o.rootUUID][o.rank].status||(r[o.rootUUID].x=r[o.rootUUID].x+1,r[o.rootUUID][o.rank].status=!0,n===i.UP&&(r[o.rootUUID].minRank=o.rank)),_.current=Math.max(r[o.rootUUID].x,_.current)}},G=(t,e,n,r,a,o,l)=>{let d;for(let u=0;u<t.length;u++){if(d=t[u],d.uuid===e.uuid){n===i.DOWN?e.hideDown?e[w.down]&&e[w.down]?.length?(d.hideDown=!1,L(l)):c(e,n).then((t=>{t.data!==[]&&(z(t.data,e,n,a),d[w.down]=t.data,d.hideDown=!1,B(l,r,a,o))})):(d.hideDown=!0,L(l)):e.hideUp?e[w.up]&&e[w.up]?.length?(d.hideUp=!1,L(l)):c(e,n).then((t=>{t.data!==[]&&(z(t.data,e,n,a),d[w.up]=t.data,d.hideUp=!1,B(l,r,a,o))})):(d.hideUp=!0,L(l));break}n===i.DOWN?d[w.down]&&G(d[w.down],e,n,r,a,o,l):d[w.up]&&G(d[w.up],e,n,r,a,o,l)}},A=(t,e)=>{let n=JSON.parse(JSON.stringify(I)),r=JSON.parse(JSON.stringify(P));G(n,t,e,[],r,[],n)},B=(t,e,n,r)=>{b.current=m,M(t,null,i.ROOT,e,n,r,null),S(JSON.parse(JSON.stringify(t))),H(e),F(r),X(n),R(_.current*N+f+O),C(b.current)};return n((()=>{L(l)}),[l]),t.createElement("div",null,t.createElement("div",{style:{position:"relative",minHeight:W,minWidth:v}},x.map((e=>e.visible?t.createElement(p,{hideOrOpen:A,info:e,key:e.uuid,style:{left:e.left,top:e.top,width:D,height:U,position:"absolute",boxSizing:"border-box"},renderChild:d,width:D,height:U,circleWidth:E,fieldNames:w}):null)),t.createElement("svg",{width:v,height:W},Y.map(((e,n)=>t.createElement("path",{key:n,fill:"none",stroke:"#C7C7D7",strokeWidth:"1",d:e.d}))))))};export{f as DagreMap};
+export { default as DagreMap } from "./DagreMap";

package.json

 {
   "name": "react-dagre-map-v2",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "author": "[e-mail]",
   "scripts": {
-    "build": "rollup -c",
-    "dev": "rollup -wc"
+    "start": "dumi dev",
+    "docs:build": "dumi build",
+    "docs:deploy": "gh-pages -d docs-dist",
+    "build": "father build",
+    "deploy": "npm run docs:build && npm run docs:deploy",
+    "prettier": "prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"",
+    "test": "umi-test",
+    "test:coverage": "umi-test --coverage",
+    "prepublishOnly": "npm run build"
   },
@@ -40,19 +47,14 @@ "files": [
   "devDependencies": {
-    "@babel/core": "^7.18.9",
-    "@babel/plugin-transform-runtime": "^7.18.9",
-    "@babel/preset-env": "^7.18.9",
-    "@rollup/plugin-node-resolve": "^13.3.0",
-    "@types/node": "^18.6.1",
-    "@types/react": "^18.0.15",
-    "core-js": "^3.24.0",
-    "postcss": "^8.4.14",
-    "react": "^18.2.0",
-    "rollup": "^2.77.1",
-    "rollup-plugin-babel": "^4.4.0",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript2": "^0.32.1",
-    "typescript": "^4.7.4"
+    "@testing-library/jest-dom": "^5.15.1",
+    "@testing-library/react": "^13.0.0",
+    "@types/jest": "^27.0.3",
+    "@umijs/fabric": "^2.8.1",
+    "@umijs/test": "^3.0.5",
+    "dumi": "^1.1.0",
+    "father": "^4.0.0-rc.2",
+    "gh-pages": "^3.0.0",
+    "lint-staged": "^10.0.7",
+    "prettier": "^2.2.1",
+    "yorkie": "^2.0.0"
   }
 }

dist/esm/index.js.map

-{"version":3,"file":"index.js","sources":["../../node_modules/style-inject/dist/style-inject.es.js"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n"],"names":[],"mappings":";;AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Improved metrics

Total package byte prevSize

43182

190.67%

Dev dependency count

11

-31.25%

Number of package files

17

325%

Lines of code

764

2534.48%

Number of low quality alerts

1

-50%

No dependency changes