@kgdata/forcegraph/dist/index.esm.js

forcegraph

import React, { useState, useEffect, forwardRef, useRef, useCallback, useMemo, useImperativeHandle } from 'react';
import G6 from '@antv/g6';

function ownKeys(object, enumerableOnly) {
  var keys = Object.keys(object);

  if (Object.getOwnPropertySymbols) {
    var symbols = Object.getOwnPropertySymbols(object);

    if (enumerableOnly) {
      symbols = symbols.filter(function (sym) {
        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
      });
    }

    keys.push.apply(keys, symbols);
  }

  return keys;
}

function _objectSpread2(target) {
  for (var i = 1; i < arguments.length; i++) {
    var source = arguments[i] != null ? arguments[i] : {};

    if (i % 2) {
      ownKeys(Object(source), true).forEach(function (key) {
        _defineProperty(target, key, source[key]);
      });
    } else if (Object.getOwnPropertyDescriptors) {
      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
    } else {
      ownKeys(Object(source)).forEach(function (key) {
        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
      });
    }
  }

  return target;
}

function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
  try {
    var info = gen[key](arg);
    var value = info.value;
  } catch (error) {
    reject(error);
    return;
  }

  if (info.done) {
    resolve(value);
  } else {
    Promise.resolve(value).then(_next, _throw);
  }
}

function _asyncToGenerator(fn) {
  return function () {
    var self = this,
        args = arguments;
    return new Promise(function (resolve, reject) {
      var gen = fn.apply(self, args);

      function _next(value) {
        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
      }

      function _throw(err) {
        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
      }

      _next(undefined);
    });
  };
}

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 _arrayWithHoles(arr) {
  if (Array.isArray(arr)) return arr;
}

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 _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 _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.");
}

var mergeConfig = function mergeConfig(nextConfig, defaultConfig) {
  var _defaultConfig$defaul, _nextConfig$defaultNo, _defaultConfig$defaul2, _nextConfig$defaultNo2, _defaultConfig$defaul3, _nextConfig$defaultEd, _defaultConfig$defaul4, _nextConfig$defaultEd2;

  if (!nextConfig) {
    return defaultConfig;
  }

  var layout = _objectSpread2(_objectSpread2({}, (defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.layout) || {}), (nextConfig === null || nextConfig === void 0 ? void 0 : nextConfig.layout) || {});

  var nodeLabelCfg = _objectSpread2(_objectSpread2({}, (defaultConfig === null || defaultConfig === void 0 ? void 0 : (_defaultConfig$defaul = defaultConfig.defaultNode) === null || _defaultConfig$defaul === void 0 ? void 0 : _defaultConfig$defaul.labelCfg) || {}), (nextConfig === null || nextConfig === void 0 ? void 0 : (_nextConfig$defaultNo = nextConfig.defaultNode) === null || _nextConfig$defaultNo === void 0 ? void 0 : _nextConfig$defaultNo.labelCfg) || {});

  var nodeStyle = _objectSpread2(_objectSpread2({}, (defaultConfig === null || defaultConfig === void 0 ? void 0 : (_defaultConfig$defaul2 = defaultConfig.defaultNode) === null || _defaultConfig$defaul2 === void 0 ? void 0 : _defaultConfig$defaul2.style) || {}), (nextConfig === null || nextConfig === void 0 ? void 0 : (_nextConfig$defaultNo2 = nextConfig.defaultNode) === null || _nextConfig$defaultNo2 === void 0 ? void 0 : _nextConfig$defaultNo2.style) || {});

  var defaultNode = _objectSpread2(_objectSpread2(_objectSpread2({}, (defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.defaultNode) || {}), (nextConfig === null || nextConfig === void 0 ? void 0 : nextConfig.defaultNode) || {}), {
    labelCfg: nodeLabelCfg,
    style: nodeStyle
  });

  var edgeLabelCfg = _objectSpread2(_objectSpread2({}, (defaultConfig === null || defaultConfig === void 0 ? void 0 : (_defaultConfig$defaul3 = defaultConfig.defaultEdge) === null || _defaultConfig$defaul3 === void 0 ? void 0 : _defaultConfig$defaul3.labelCfg) || {}), (nextConfig === null || nextConfig === void 0 ? void 0 : (_nextConfig$defaultEd = nextConfig.defaultEdge) === null || _nextConfig$defaultEd === void 0 ? void 0 : _nextConfig$defaultEd.labelCfg) || {});

  var edgeStyle = _objectSpread2(_objectSpread2({}, (defaultConfig === null || defaultConfig === void 0 ? void 0 : (_defaultConfig$defaul4 = defaultConfig.defaultEdge) === null || _defaultConfig$defaul4 === void 0 ? void 0 : _defaultConfig$defaul4.style) || {}), (nextConfig === null || nextConfig === void 0 ? void 0 : (_nextConfig$defaultEd2 = nextConfig.defaultEdge) === null || _nextConfig$defaultEd2 === void 0 ? void 0 : _nextConfig$defaultEd2.style) || {});

  var defaultEdge = _objectSpread2(_objectSpread2(_objectSpread2({}, (defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.defaultEdge) || {}), (nextConfig === null || nextConfig === void 0 ? void 0 : nextConfig.defaultEdge) || {}), {
    labelCfg: edgeLabelCfg,
    style: edgeStyle
  });

  return _objectSpread2(_objectSpread2(_objectSpread2({}, defaultConfig), nextConfig), {}, {
    layout: layout,
    defaultNode: defaultNode,
    defaultEdge: defaultEdge
  });
};

function getTargetElement(target, defaultElement) {
  if (!target) {
    return defaultElement;
  }

  var targetElement;

  if (typeof target === 'function') {
    targetElement = target();
  } else if ('current' in target) {
    targetElement = target.current;
  } else {
    targetElement = target;
  }

  return targetElement;
}
var computeHeight = function computeHeight(node) {
  var totalHeight = parseInt(getComputedStyle(node).height, 10);
  var padding = parseInt(getComputedStyle(node).paddingTop, 10) + parseInt(getComputedStyle(node).paddingBottom, 10);
  return totalHeight - padding;
};
var getAutoHeight = function getAutoHeight(n) {
  if (!n) {
    return 0;
  }

  var node = n;
  var height = computeHeight(node);

  while (!height) {
    node = node.parentNode;

    if (node) {
      height = computeHeight(node);
    } else {
      break;
    }
  }

  return height;
};

var filterGraphData = function filterGraphData(data, requiredOoIds) {
  var ret = data.filter(function (item) {
    var ooId = item.ooId;
    return requiredOoIds.includes(ooId);
  });
  return {
    ret: ret,
    $data: data
  };
};

var useAutoHeight = function useAutoHeight(target) {
  var _useState = useState(0),
      _useState2 = _slicedToArray(_useState, 2),
      height = _useState2[0],
      setHeight = _useState2[1];

  useEffect(function () {
    var el = getTargetElement(target);
    if (el) setHeight(getAutoHeight(el));
  }, [target]);
  return [height];
};

var useGraphCfg = function useGraphCfg(graphCfg) {
  var newGraphCfg = useMemo(function () {
    var defaultConfig = {
      container: '',
      modes: {
        default: ['drag-canvas', 'zoom-canvas']
      },
      layout: {
        type: 'force',
        linkDistance: function linkDistance(item) {
          if (item.linkHeight) {
            return item.linkHeight;
          }

          return 100;
        } // nodeStrength: 0,
        // workerEnabled: true,
        // gpuEnabled:true

      },
      defaultNode: {
        shape: 'node',
        labelCfg: {
          position: 'top',
          style: {
            fill: '#fff',
            fontSize: 10,
            cursor: 'pointer'
          }
        },
        style: {
          stroke: '#72CC4A',
          width: 150,
          cursor: 'pointer'
        }
      },
      nodeStateStyles: {
        selected: {
          fill: 'steelblue',
          stroke: '#000',
          lineWidth: 1
        },
        hover: {
          fill: 'red',
          stroke: '#000',
          lineWidth: 1
        }
      },
      defaultEdge: {
        labelCfg: {
          style: {
            fill: '#000',
            fontSize: 10
          },
          autoRotate: true
        },
        style: {
          stroke: '#000',
          lineWidth: 1,
          endArrow: {
            path: G6.Arrow.triangle(3, 6, 3),
            d: 3
          }
        }
      }
    };
    return mergeConfig(graphCfg, defaultConfig);
  }, [graphCfg]);
  return [newGraphCfg];
};

var FGD = /*#__PURE__*/forwardRef(function (props, fgRef) {
  var graphData = props.graphData,
      onNodeClick = props.onNodeClick,
      onNodeDblClick = props.onNodeDblClick,
      graphCfg = props.graphCfg,
      style = props.style,
      request = props.request,
      params = props.params,
      postData = props.postData;
  var ref = useRef(null);
  var graph = useRef();

  var _useGraphCfg = useGraphCfg(graphCfg),
      _useGraphCfg2 = _slicedToArray(_useGraphCfg, 1),
      newGraphCfg = _useGraphCfg2[0];

  var _useAutoHeight = useAutoHeight(ref),
      _useAutoHeight2 = _slicedToArray(_useAutoHeight, 1),
      height = _useAutoHeight2[0]; // 添加事件


  var addEvent = useCallback(function (example, data) {
    if (data && (data === null || data === void 0 ? void 0 : data.nodes.length) <= 200) {
      console.log('绑定了=====》');

      var refreshDragedNodePosition = function refreshDragedNodePosition(e) {
        var model = e.item.get('model');
        model.fx = e.x;
        model.fy = e.y;
      };

      example.on('node:dragstart', function (e) {
        example.layout();
        refreshDragedNodePosition(e);
      });
      example.on('node:drag', function (e) {
        refreshDragedNodePosition(e);
      });
      example.on('node:dragend', function (e) {
        e.item.get('model').fx = null;
        e.item.get('model').fy = null;
      });
    }

    var timeId;

    if (onNodeClick) {
      example.on('node:click', function (e) {
        clearTimeout(timeId);
        timeId = window.setTimeout(function () {
          console.log('click', e);
          onNodeClick(e, example);
        }, 300);
      });
    }

    if (onNodeDblClick) {
      example.on('node:dblclick', function (e) {
        clearTimeout(timeId);
        console.log('dblclick');
        onNodeDblClick(e, example);
      });
    }
  }, [onNodeClick, onNodeDblClick]);
  var GraphData = useMemo( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
    var _yield$request, data;

    return regeneratorRuntime.wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            if (request) {
              _context.next = 2;
              break;
            }

            return _context.abrupt("return", graphData);

          case 2:
            _context.next = 4;
            return request(params, graph.current);

          case 4:
            _yield$request = _context.sent;
            data = _yield$request.data;

            if (!postData) {
              _context.next = 8;
              break;
            }

            return _context.abrupt("return", postData(data));

          case 8:
            return _context.abrupt("return", data);

          case 9:
          case "end":
            return _context.stop();
        }
      }
    }, _callee);
  })), [graphData, params, postData, request]);
  useEffect(function () {
    if (!graph.current) {
      GraphData.then(function (res) {
        var modes = JSON.parse(JSON.stringify(newGraphCfg.modes));
        if (res && (res === null || res === void 0 ? void 0 : res.nodes.length) > 200) modes.default.push('drag-node');
        graph.current = new G6.Graph(_objectSpread2(_objectSpread2({}, newGraphCfg), {}, {
          container: ref.current,
          modes: modes
        }));
        graph.current.data(res);
        graph.current.get('canvas').set('localRefresh', false);
        graph.current.render();
        addEvent(graph.current, res);
      });
      if (typeof window !== 'undefined') window.onresize = function () {
        var _ref$current, _ref$current2, _ref$current3, _ref$current4;

        if (!graph.current || graph.current.get('destroyed')) return;
        if (!ref || !(ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.scrollWidth) || !(ref === null || ref === void 0 ? void 0 : (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.scrollHeight)) return;
        graph.current.changeSize(ref === null || ref === void 0 ? void 0 : (_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.scrollWidth, ref === null || ref === void 0 ? void 0 : (_ref$current4 = ref.current) === null || _ref$current4 === void 0 ? void 0 : _ref$current4.scrollHeight);
      };
    } else {
      GraphData.then(function (res) {
        var _graph$current;

        graph === null || graph === void 0 ? void 0 : (_graph$current = graph.current) === null || _graph$current === void 0 ? void 0 : _graph$current.changeData(res);
      });
    }
  }, [newGraphCfg, GraphData, addEvent]);
  useImperativeHandle(fgRef, function () {
    return {
      getInstance: function getInstance() {
        return graph === null || graph === void 0 ? void 0 : graph.current;
      }
    };
  }, []);
  return /*#__PURE__*/React.createElement("div", {
    style: _objectSpread2({
      height: height
    }, style),
    className: "graph-box",
    ref: ref
  });
});

export default FGD;
export { computeHeight, filterGraphData, getAutoHeight, getTargetElement, mergeConfig, useAutoHeight };