cytoscape-react-fe-ml
Version:
1,589 lines (1,428 loc) • 46.5 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _cytoscape = _interopRequireDefault(require("cytoscape"));
var _immutable = _interopRequireDefault(require("immutable"));
var _classnames = _interopRequireDefault(require("classnames"));
var _jquery = _interopRequireDefault(require("jquery"));
var _cytoscapePanzoom = _interopRequireDefault(require("cytoscape-panzoom"));
var _cytoscapeEuler = _interopRequireDefault(require("cytoscape-euler"));
var _cytoscapePopper = _interopRequireDefault(require("cytoscape-popper"));
var _cytoscapeNodeHtmlLabel = _interopRequireDefault(require("cytoscape-node-html-label"));
var _cytoscapeNavigator = _interopRequireDefault(require("cytoscape-navigator"));
var _navigator = _interopRequireDefault(require("./navigator"));
var _defaultStyle = _interopRequireDefault(require("./configs/defaultStyle"));
var _layout = _interopRequireDefault(require("./configs/layout"));
var _panZoomConfig = _interopRequireDefault(require("./configs/panZoomConfig"));
var _navigatorConfig = _interopRequireDefault(require("./configs/navigatorConfig"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
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 _objectSpread(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 _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; }
(0, _cytoscapeNavigator.default)(_cytoscape.default, _jquery.default);
(0, _cytoscapePanzoom.default)(_cytoscape.default, _jquery.default);
(0, _cytoscapeNodeHtmlLabel.default)(_cytoscape.default);
_cytoscape.default.use(_cytoscapePopper.default);
_cytoscape.default.use(_cytoscapeEuler.default);
var noop = () => {};
class ReactCytoscape extends _react.Component {
constructor(props) {
super(props);
_defineProperty(this, "getBoundingBox", nodes => {
var xArr = [];
var yArr = [];
var graph = this.cy;
var nodesList = !nodes || nodes.size === 0 ? graph.nodes() : nodes;
nodesList.forEach(node => {
var position = node.position();
xArr.push(position && position.x);
yArr.push(position && position.y);
});
return {
x1: Math.min.apply(null, xArr),
y1: Math.min.apply(null, yArr),
x2: Math.max.apply(null, xArr),
y2: Math.max.apply(null, yArr)
};
});
_defineProperty(this, "getNodePosition", nodeId => this.cy.$("#".concat(nodeId)).renderedPosition());
_defineProperty(this, "getEventFrom", eventTarget => {
var eventFrom = 'empty';
if (eventTarget === this.cy) {
eventFrom = 'empty';
} else if (eventTarget.isNode()) {
eventFrom = 'entity';
} else if (eventTarget.isEdge()) {
eventFrom = 'relation';
}
return eventFrom;
});
_defineProperty(this, "formatGraphStyle", graphStyle => {
var finalStyle = [];
Object.keys(graphStyle).forEach(key => {
finalStyle.push({
selector: key,
style: graphStyle[key]
});
});
return finalStyle;
});
_defineProperty(this, "handleClick", event => {
var eventFrom = this.getEventFrom(event.target);
if (this.clickTimer) {
clearTimeout(this.clickTimer);
this.clickTimer = null;
}
var {
onClick,
onDblClick
} = this.props;
if (this.isDblClick) {
onDblClick(eventFrom, eventFrom !== 'empty' && event.target.data(), event.target);
this.isDblClick = false;
return;
}
this.isDblClick = true;
var self = this;
this.clickTimer = setTimeout(() => {
self.isDblClick = false;
onClick(eventFrom, eventFrom !== 'empty' && event.target.data(), event.target);
}, 300);
});
_defineProperty(this, "handleTapEnd", event => {
var self = this;
var eventFrom = this.getEventFrom(event.target);
var {
autoSelectEdges,
onTap
} = this.props;
setTimeout(() => {
if (eventFrom === 'entity' && event.target.selected() && autoSelectEdges) {
event.target.neighborhood('edge').select();
}
self.handleChangeDisplay();
onTap(eventFrom, eventFrom !== 'empty' && event.target.data());
}, 100);
});
_defineProperty(this, "handleChangeZoom", () => {
var {
zoomBig,
zoomNormal,
zoomSmall,
onChangeZoom
} = this.props;
var zoom = this.cy.zoom();
var elements = this.cy.elements();
if (elements.length === 0) {
return;
}
if (zoom > zoomBig) {
if (this.zoomMode === 'showbigger') return;
elements.addClass('showbigger').removeClass(this.zoomMode);
this.zoomMode = 'showbigger';
} else if (zoom >= zoomNormal) {
if (this.zoomMode === 'shownormal') return;
elements.addClass('shownormal').removeClass(this.zoomMode);
this.zoomMode = 'shownormal';
} else if (zoom >= zoomSmall) {
if (this.zoomMode === 'showsmall') return;
elements.addClass('showsmall').removeClass(this.zoomMode);
this.zoomMode = 'showsmall';
} else {
if (this.zoomMode === 'showtiny') return;
elements.addClass('showtiny').removeClass(this.zoomMode);
this.zoomMode = 'showtiny';
}
if (this.changeZoomDefer) {
clearTimeout(this.changeZoomDefer);
}
this.changeZoomDefer = setTimeout(() => {
this.handleChangeDisplay();
onChangeZoom(zoom);
}, 1000);
});
_defineProperty(this, "handleCxtTap", event => {
var {
target
} = event;
var eventFrom = this.getEventFrom(target);
var {
selectSingleOnCxt,
autoSelectEdges
} = this.props;
if (eventFrom === 'entity' && !target.selected()) {
if (selectSingleOnCxt) {
this.cy.elements(':selected').unselect();
}
target.select();
if (autoSelectEdges) {
target.neighborhood('edge').select();
}
this.handleChangeDisplay();
} else if (eventFrom === 'relation' && !target.selected()) {
if (selectSingleOnCxt) {
this.cy.elements(':selected').unselect();
}
target.select();
this.handleChangeDisplay();
}
var x;
var y;
if (eventFrom === 'entity') {
({
x,
y
} = target.renderedPosition());
} else {
({
x,
y
} = event.renderedPosition);
}
var param = {
eventPosition: {
left: event.originalEvent.x,
top: event.originalEvent.y
},
position: {
left: x,
top: y
},
eventFrom
};
var {
onCxtTap
} = this.props;
onCxtTap(param, event);
});
_defineProperty(this, "handleChangeDisplay", () => {
if (this.timeout) {
clearTimeout(this.timeout);
this.timeout = null;
}
this.timeout = setTimeout(this.changeDisplay, 100);
});
_defineProperty(this, "handlePosition", event => {
if (this.popperMap.size === 0) return;
var {
target
} = event;
var eventFrom = this.getEventFrom(target);
if (eventFrom !== 'entity') {
return;
}
var id = target.id();
this.popperMap.forEach(layerPopper => {
var nodePopper = layerPopper.get(id);
if (nodePopper) {
nodePopper.scheduleUpdate();
}
});
});
_defineProperty(this, "changeDisplay", () => {
this.changeCurrentJsonData();
var params = {
data: this.currentJsonData.toJS()
};
var {
onChangeDisplay
} = this.props;
onChangeDisplay(params);
});
_defineProperty(this, "changeCurrentJsonData", () => {
var chartJson = this.cy.json();
var {
elements,
zoom,
pan
} = chartJson;
this.currentJsonData = _immutable.default.fromJS({
elements,
zoom,
pan
});
});
_defineProperty(this, "handleLayoutStop", () => {
this.runningLayout = null;
var {
onLayoutStop
} = this.props;
var graph = this.cy;
if (this.layoutConfig && this.layoutConfig.fit) {
if (graph.zoom() > 1) {
graph.zoom(1);
}
}
this.cy.center();
this.handleChangeDisplay();
onLayoutStop();
console.timeEnd('布局');
});
_defineProperty(this, "generatePNG", params => {
if (this.cy) {
var newParams = Object.assign({}, {
full: true,
scale: 1
}, params);
return this.cy.png(newParams);
}
return null;
});
_defineProperty(this, "getZoom", () => this.cy.zoom());
_defineProperty(this, "changePopperList", (floatingLayer, floatingLayerConfig) => {
var newPopperMap = _immutable.default.Map();
var {
getZoom,
container: {
current: container
}
} = this;
var layerPopper = this.popperMap;
if (floatingLayer) {
_immutable.default.fromJS(floatingLayer).forEach((layerData, layerKey) => {
var layerPopperMap = layerPopper.get(layerKey);
var newLayerPopperMap = _immutable.default.Map();
var layerConfig = floatingLayerConfig[layerKey];
layerData.forEach((_content, id) => {
if (layerPopperMap && layerPopperMap.has(id)) {
var oldPopper = layerPopperMap.get(id);
var showContent = layerConfig && layerConfig.template && layerConfig.template(_content) || _content;
oldPopper.popper.innerHTML = showContent;
newLayerPopperMap = newLayerPopperMap.set(id, oldPopper);
layerPopperMap = layerPopperMap.delete(id);
} else {
var node = this.cy.$id(id);
if (node.length > 0) {
var nodePopper = node.popper({
content: () => {
var div = document.createElement('div');
div.classList.add('ml-cytoscape-popper-div');
var showContent = layerConfig && layerConfig.template && layerConfig.template(_content) || _content;
div.innerHTML = showContent;
container.appendChild(div);
return div;
},
popper: {
placement: layerConfig && layerConfig.position || 'right-start',
removeOnDestroy: true,
modifiers: {
computeStyle: {
gpuAcceleration: false
},
offset: {
fn(data) {
var zoom = getZoom();
if (layerConfig && layerConfig.modifiersOffset) {
var fData = layerConfig.modifiersOffset(data, zoom, container);
return fData || data;
}
return data;
}
}
}
}
});
newLayerPopperMap = newLayerPopperMap.set(id, nodePopper);
}
}
});
if (layerPopperMap) {
layerPopper = layerPopper.set(layerKey, layerPopperMap);
}
newPopperMap = newPopperMap.set(layerKey, newLayerPopperMap);
});
}
if (layerPopper) {
layerPopper.forEach(layerInfo => {
if (layerInfo) {
layerInfo.forEach(nodePopper => {
nodePopper.destroy();
});
}
});
}
this.popperMap = newPopperMap;
});
_defineProperty(this, "updatePopper", () => {
this.popperMap.forEach(item => {
item.forEach(notePopper => {
notePopper.scheduleUpdate();
});
});
});
_defineProperty(this, "handleDoubleClick", event => {
event.stopPropagation();
});
this.currentJsonData = _immutable.default.fromJS({
elements: {}
});
this.zoomMode = 'shownormal';
this.popperMap = _immutable.default.Map();
this.dragging = false;
this.runningLayout = null;
this.timeout = null;
this.clickTimer = null;
this.isDblClick = false;
this.layoutConfig = null;
this.graphScapeContainer = _react.default.createRef();
this.container = _react.default.createRef();
this.graphNavigator = _react.default.createRef();
}
componentDidMount() {
var {
graphStyle: userGraphStyle,
layout,
boxSelect,
navigator: navigatorConfig,
panZoom,
zoom,
pan,
afterRender,
elements,
minZoom,
maxZoom,
wheelSensitivity,
autoFit,
floatingLayer,
floatingLayerConfig,
extensions,
hideEdgesOnViewport,
events
} = this.props;
if (extensions.length > 0) {
extensions.forEach(extension => {
_cytoscape.default.use(extension);
});
}
var graphStyle = userGraphStyle || _defaultStyle.default;
var initParams = {
container: this.graphScapeContainer.current,
boxSelectionEnabled: boxSelect,
wheelSensitivity,
layout: layout || {
name: 'preset'
},
style: this.formatGraphStyle(graphStyle),
minZoom,
maxZoom,
hideEdgesOnViewport
};
if (pan) {
initParams.pan = pan;
}
if (zoom) {
initParams.zoom = zoom;
}
this.cy = (0, _cytoscape.default)(initParams);
if (Object.keys(elements).length > 0) {
this.cy.json({
elements
});
var immuElements = _immutable.default.fromJS(elements);
var unLayoutNodeIds = immuElements.get('nodes') && immuElements.get('nodes').filter(item => !item.get('position')).map(item => item.getIn(['data', 'id']));
if (unLayoutNodeIds && unLayoutNodeIds.size > 0) {
this.changeLayout(layout);
} else {
if (autoFit) {
this.cy.fit(30);
this.cy.center();
}
this.changeCurrentJsonData();
}
}
if (navigatorConfig) {
this.initNavigator(navigatorConfig);
}
if (panZoom) {
this.initPanZoom(panZoom);
}
this.changePopperList(floatingLayer, floatingLayerConfig);
this.bindEvent(events);
if (afterRender) {
afterRender(this.cy);
}
}
componentWillReceiveProps(nextProps) {
var {
layout: nextLayout,
boxSelect: nextBoxLayout,
zoom: nextZoom,
pan: nextPan,
elements: nextElements,
floatingLayer: nextFloatingLayer,
graphStyle: nextGraphStyle,
autoFit,
hideEdgesOnViewport: nextHideEdgesOnViewport
} = nextProps;
var {
layout,
boxSelect,
zoom,
pan,
floatingLayer,
graphStyle,
elements,
hideEdgesOnViewport
} = this.props;
if (typeof nextLayout === 'object' && nextLayout.name !== layout.name || typeof nextLayout === 'string' && nextLayout !== layout) {
this.changeLayout(nextLayout);
return;
}
if (nextBoxLayout !== boxSelect) {
this.cy.boxSelectionEnabled(nextBoxLayout);
this.cy.userPanningEnabled(!nextBoxLayout);
return;
}
var newElements = _immutable.default.fromJS(nextElements);
var mapElements = newElements.map(list => _immutable.default.Map(list.map(item => [item.getIn(['data', 'id']), item])));
var currentMapElements = this.currentJsonData.get('elements').map(list => _immutable.default.Map(list.map(item => [item.getIn(['data', 'id']), item])));
if (!_immutable.default.is(mapElements, currentMapElements)) {
var newNodes = newElements.get('nodes') || _immutable.default.List();
var actualNodes = _immutable.default.List();
var unLayoutNodes = [];
newNodes.forEach(item => {
var nodeId = item.getIn(['data', 'id']);
var existNode = currentMapElements && currentMapElements.getIn(['nodes', nodeId]);
var prevPosition = existNode && existNode.get('position');
var itemPosition = item.get('position') || prevPosition;
if (!itemPosition) {
unLayoutNodes.push(item);
}
actualNodes = actualNodes.push(item.set('position', itemPosition));
});
console.time('cytoscape.json');
var jsonData = {
elements: nextElements
};
if (nextPan) {
jsonData.pan = nextPan;
}
if (nextZoom) {
jsonData.zoom = nextZoom;
}
if (nextHideEdgesOnViewport !== hideEdgesOnViewport) {
jsonData.hideEdgesOnViewport = nextHideEdgesOnViewport;
}
this.cy.json(jsonData);
if (unLayoutNodes.length > 0) {
this.changeLayout(nextProps.layout);
this.changeCurrentJsonData();
} else {
if (autoFit && newNodes.size > 1) {
this.cy.fit(30);
this.cy.center();
} else if (autoFit && newNodes && newNodes.size > 0) {
this.cy.center();
}
this.changeCurrentJsonData();
this.handleChangeDisplay();
}
console.timeEnd('cytoscape.json');
} else {
if (nextZoom && nextZoom !== zoom) {
this.cy.zoom(nextZoom);
this.changeCurrentJsonData();
return;
}
if (nextPan && (!pan || nextPan.x !== pan.x || nextPan.y !== pan.y)) {
this.cy.pan(nextPan);
this.changeCurrentJsonData();
}
}
if (nextGraphStyle && !_immutable.default.is(_immutable.default.fromJS(graphStyle), _immutable.default.fromJS(nextGraphStyle))) {
this.cy.style().fromJson(this.formatGraphStyle(nextGraphStyle)).update();
}
if (!_immutable.default.is(_immutable.default.fromJS(nextFloatingLayer), _immutable.default.fromJS(floatingLayer))) {
this.changePopperList(nextFloatingLayer, nextProps.floatingLayerConfig);
}
}
shouldComponentUpdate() {
return false;
}
componentWillUnmount() {
this.cy.destroy();
}
initNavigator(navigatorConfig) {
var customConfig = navigatorConfig !== true && navigatorConfig;
var config = _objectSpread({}, _navigatorConfig.default, {}, customConfig, {
container: this.graphNavigator.current
});
this.cy.navigator(config);
}
initPanZoom(panZoom) {
var {
minZoom,
maxZoom
} = this.props;
var {
sliderHandleIcon,
zoomInIcon,
zoomOutIcon
} = panZoom;
var {
sliderHandleIcon: defaultSliderHandleIcon,
zoomInIcon: defaultZoomInIcon,
zoomOutIcon: defaultZoomOutIcon
} = _panZoomConfig.default,
others = _objectWithoutProperties(_panZoomConfig.default, ["sliderHandleIcon", "zoomInIcon", "zoomOutIcon"]);
var config = _objectSpread({}, others, {
sliderHandleIcon: "".concat(defaultSliderHandleIcon, " ").concat(sliderHandleIcon),
zoomInIcon: "".concat(defaultZoomInIcon, " ").concat(zoomInIcon),
zoomOutIcon: "".concat(defaultZoomOutIcon, " ").concat(zoomOutIcon),
minZoom,
maxZoom
});
this.cy.panzoom(config);
}
bindEvent(events) {
var {
cy
} = this;
cy.on('click', this.handleClick).on('tapend', this.handleTapEnd).on('zoom', this.handleChangeZoom).on('layoutstop', this.handleLayoutStop).on('cxttap', this.handleCxtTap).on('lock', this.changeCurrentJsonData).on('unlock', this.changeCurrentJsonData).on('position', this.handlePosition);
cy.on('pan zoom resize', this.updatePopper);
Object.keys(events).forEach(key => {
cy.on(key, events[key]);
});
}
changeLayout(layout) {
if (this.runningLayout) {
this.runningLayout.stop();
}
console.time('布局');
var graph = this.cy;
if (typeof layout !== 'string') {
var {
name: layoutName
} = layout;
var defaultConfig = _layout.default[layoutName];
if (defaultConfig) {
this.layoutConfig = Object.assign({}, defaultConfig, layout);
} else {
this.layoutConfig = layout;
}
this.runningLayout = graph.layout(this.layoutConfig);
this.runningLayout.run();
return;
}
if (layout === 'auto') {
this.layoutConfig = _layout.default[layout];
this.runningLayout = graph.layout(_layout.default[layout]);
this.runningLayout.run();
return;
}
var selectedNodes = graph.nodes(':selected').not(':locked');
if (selectedNodes.length > 1 && selectedNodes.length !== graph.nodes().length && layout !== 'breadthfirst') {
var box = this.getBoundingBox(graph.nodes(':selected').not(':locked'));
if (layout === 'grid') {
var gap = graph.nodes(':selected').not(':locked').length * 63;
if (box.x1 === box.x2) box.x2 += gap;
if (box.y1 === box.y2) box.y2 += gap;
}
this.layoutConfig = Object.assign({}, _layout.default[layout], {
boundingBox: box,
stop: this.handleLayoutStop
});
this.runningLayout = selectedNodes.layout(this.layoutConfig);
this.runningLayout.run();
} else {
var self = this;
this.layoutConfig = Object.assign({}, _layout.default[layout], {
stop() {
var nodePo = self.getBoundingBox();
var graphPo = graph.extent();
if (nodePo.x1 < graphPo.x1 || nodePo.x2 > graphPo.x2 || nodePo.y1 < graphPo.y1 || nodePo.y2 > graphPo.y2) {
graph.animate({
fit: {
padding: 20
},
center: {}
}, {
duration: 300,
complete() {}
});
}
}
});
this.runningLayout = graph.layout(this.layoutConfig);
this.runningLayout.run();
}
}
render() {
var styleConfig = {};
var {
width,
height,
background,
className,
navigator: navigatorConfig,
panZoom: customPanZoomConfig
} = this.props;
if (width) {
styleConfig.width = width;
}
if (height) {
styleConfig.height = height;
}
if (background) {
styleConfig.background = background;
}
var cls = '';
if (customPanZoomConfig && customPanZoomConfig.mode) {
cls += " pan-zoom-".concat(customPanZoomConfig.mode);
}
if (customPanZoomConfig && customPanZoomConfig.size) {
cls += " pan-zoom-".concat(customPanZoomConfig.size);
}
return _react.default.createElement("div", {
className: (0, _classnames.default)('ml-cytoscape', className, cls),
style: styleConfig,
ref: this.container
}, _react.default.createElement("div", {
ref: this.graphScapeContainer,
style: {
height: '100%'
}
}), navigatorConfig && _react.default.createElement(_navigator.default, _extends({
ref: this.graphNavigator
}, navigatorConfig)));
}
}
ReactCytoscape.defaultProps = {
width: '100%',
height: '100%',
layout: 'auto',
layoutSelected: false,
pan: null,
zoom: null,
boxSelect: false,
background: 'transparent',
minZoom: 0.1,
maxZoom: 6,
zoomBig: 1,
zoomNormal: 0.5,
zoomSmall: 0.2,
elements: {},
graphStyle: null,
floatingLayer: null,
floatingLayerConfig: null,
afterRender: null,
className: null,
wheelSensitivity: 0.1,
autoFit: false,
onChangeZoom: noop,
onDblClick: noop,
onChangeDisplay: noop,
onLayoutStop: noop,
onCxtTap: noop,
onClick: noop,
selectSingleOnCxt: false,
autoSelectEdges: true,
extensions: [],
onTap: noop,
hideEdgesOnViewport: false,
navigator: true,
panZoom: true,
events: {}
};
ReactCytoscape.propTypes = {
width: _propTypes.default.string,
height: _propTypes.default.string,
layout: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]),
pan: _propTypes.default.shape({
x: _propTypes.default.number,
y: _propTypes.default.number
}),
zoom: _propTypes.default.number,
boxSelect: _propTypes.default.bool,
background: _propTypes.default.string,
minZoom: _propTypes.default.number,
maxZoom: _propTypes.default.number,
zoomBig: _propTypes.default.number,
zoomNormal: _propTypes.default.number,
zoomSmall: _propTypes.default.number,
graphStyle: _propTypes.default.object,
elements: _propTypes.default.object,
floatingLayer: _propTypes.default.object,
floatingLayerConfig: _propTypes.default.object,
onChangeDisplay: _propTypes.default.func,
onLayoutStop: _propTypes.default.func,
onCxtTap: _propTypes.default.func,
onClick: _propTypes.default.func,
onDblClick: _propTypes.default.func,
afterRender: _propTypes.default.func,
className: _propTypes.default.string,
wheelSensitivity: _propTypes.default.number,
autoFit: _propTypes.default.bool,
layoutSelected: _propTypes.default.bool,
onChangeZoom: _propTypes.default.func,
selectSingleOnCxt: _propTypes.default.bool,
autoSelectEdges: _propTypes.default.bool,
onTap: _propTypes.default.func,
extensions: _propTypes.default.array,
hideEdgesOnViewport: _propTypes.default.bool,
navigator: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.shape({
className: _propTypes.default.string,
headerClassName: _propTypes.default.string,
afterDragging: _propTypes.default.func
})]),
panZoom: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.shape({
className: _propTypes.default.string,
sliderHandleIcon: _propTypes.default.string,
zoomInIcon: _propTypes.default.string,
zoomOutIcon: _propTypes.default.string,
mode: _propTypes.default.string,
size: _propTypes.default.string
})]),
events: _propTypes.default.object
};
var _default = ReactCytoscape;
exports.default = _default;
ReactCytoscape.__docgenInfo = {
"description": "React\u5C01\u88C5\u7684cytoscape.js\u7EC4\u4EF6",
"methods": [{
"name": "getBoundingBox",
"docblock": null,
"modifiers": [],
"params": [{
"name": "nodes",
"type": null
}],
"returns": null
}, {
"name": "getNodePosition",
"docblock": "\u83B7\u53D6\u6307\u5B9A\u70B9\u7684\u4F4D\u7F6E\u4FE1\u606F",
"modifiers": [],
"params": [{
"name": "nodeId"
}],
"returns": null,
"description": "\u83B7\u53D6\u6307\u5B9A\u70B9\u7684\u4F4D\u7F6E\u4FE1\u606F"
}, {
"name": "getEventFrom",
"docblock": "\u83B7\u53D6\u89E6\u53D1\u4E8B\u4EF6\u7684\u5BF9\u8C61\u7C7B\u578B\uFF08\u753B\u5E03\u3001\u8282\u70B9\u3001\u8FB9\uFF09",
"modifiers": [],
"params": [{
"name": "eventTarget"
}],
"returns": null,
"description": "\u83B7\u53D6\u89E6\u53D1\u4E8B\u4EF6\u7684\u5BF9\u8C61\u7C7B\u578B\uFF08\u753B\u5E03\u3001\u8282\u70B9\u3001\u8FB9\uFF09"
}, {
"name": "formatGraphStyle",
"docblock": "\u683C\u5F0F\u5316\u6837\u5F0F",
"modifiers": [],
"params": [{
"name": "graphStyle"
}],
"returns": null,
"description": "\u683C\u5F0F\u5316\u6837\u5F0F"
}, {
"name": "handleClick",
"docblock": "\u70B9\u51FB\u4E8B\u4EF6",
"modifiers": [],
"params": [{
"name": "event"
}],
"returns": null,
"description": "\u70B9\u51FB\u4E8B\u4EF6"
}, {
"name": "handleTapEnd",
"docblock": "TapEnd\u4E8B\u4EF6\uFF0C\u70B9\u51FB\u65F6\u81EA\u52A8\u9009\u4E2D\u8FB9\u3002\u56E0\u4E3A\u8981\u652F\u6301\u53CC\u51FB\u4E8B\u4EF6\uFF0C\u6240\u4EE5click\u4E8B\u4EF6\u505A\u4E86\u5EF6\u8FDF\uFF0C\u4E3A\u4E86\u9009\u4E2D\u8FB9\u7684\u6548\u679C\u65E0\u5EF6\u8FDF\uFF0C\u6240\u4EE5\u5728tapEnd\u4E8B\u4EF6\u4E2D\u5904\u7406\u6B64\u903B\u8F91",
"modifiers": [],
"params": [{
"name": "event"
}],
"returns": null,
"description": "TapEnd\u4E8B\u4EF6\uFF0C\u70B9\u51FB\u65F6\u81EA\u52A8\u9009\u4E2D\u8FB9\u3002\u56E0\u4E3A\u8981\u652F\u6301\u53CC\u51FB\u4E8B\u4EF6\uFF0C\u6240\u4EE5click\u4E8B\u4EF6\u505A\u4E86\u5EF6\u8FDF\uFF0C\u4E3A\u4E86\u9009\u4E2D\u8FB9\u7684\u6548\u679C\u65E0\u5EF6\u8FDF\uFF0C\u6240\u4EE5\u5728tapEnd\u4E8B\u4EF6\u4E2D\u5904\u7406\u6B64\u903B\u8F91"
}, {
"name": "handleChangeZoom",
"docblock": "\u6539\u53D8\u7F29\u653E\u65F6\uFF0C\u6839\u636E\u4E0D\u540C\u7684\u7F29\u653E\u7EA7\u522B\u8BBE\u7F6E\u4E0D\u540C\u7684classname",
"modifiers": [],
"params": [],
"returns": null,
"description": "\u6539\u53D8\u7F29\u653E\u65F6\uFF0C\u6839\u636E\u4E0D\u540C\u7684\u7F29\u653E\u7EA7\u522B\u8BBE\u7F6E\u4E0D\u540C\u7684classname"
}, {
"name": "handleCxtTap",
"docblock": "\u53F3\u952E\u70B9\u51FB\u65F6\u7684\u56DE\u8C03",
"modifiers": [],
"params": [{
"name": "event"
}],
"returns": null,
"description": "\u53F3\u952E\u70B9\u51FB\u65F6\u7684\u56DE\u8C03"
}, {
"name": "handleChangeDisplay",
"docblock": null,
"modifiers": [],
"params": [],
"returns": null
}, {
"name": "handlePosition",
"docblock": null,
"modifiers": [],
"params": [{
"name": "event",
"type": null
}],
"returns": null
}, {
"name": "changeDisplay",
"docblock": "\u5728\u753B\u5E03\u53D1\u751F\u53D8\u5316\u540E\uFF0C\u66F4\u65B0\u5F53\u524D\u4FDD\u5B58\u7684\u6570\u636E\uFF0C\u89E6\u53D1\u56DE\u8C03",
"modifiers": [],
"params": [],
"returns": null,
"description": "\u5728\u753B\u5E03\u53D1\u751F\u53D8\u5316\u540E\uFF0C\u66F4\u65B0\u5F53\u524D\u4FDD\u5B58\u7684\u6570\u636E\uFF0C\u89E6\u53D1\u56DE\u8C03"
}, {
"name": "changeCurrentJsonData",
"docblock": null,
"modifiers": [],
"params": [],
"returns": null
}, {
"name": "handleLayoutStop",
"docblock": "\u5E03\u5C40\u7ED3\u675F\u65F6\u7684\u56DE\u8C03",
"modifiers": [],
"params": [],
"returns": null,
"description": "\u5E03\u5C40\u7ED3\u675F\u65F6\u7684\u56DE\u8C03"
}, {
"name": "generatePNG",
"docblock": "\u751F\u6210png\u56FE\u7247",
"modifiers": [],
"params": [{
"name": "params"
}],
"returns": null,
"description": "\u751F\u6210png\u56FE\u7247"
}, {
"name": "getZoom",
"docblock": null,
"modifiers": [],
"params": [],
"returns": null
}, {
"name": "changePopperList",
"docblock": "\u8BBE\u7F6E\u6D6E\u6846",
"modifiers": [],
"params": [{
"name": "floatingLayer"
}, {
"name": "floatingLayerConfig"
}],
"returns": null,
"description": "\u8BBE\u7F6E\u6D6E\u6846"
}, {
"name": "updatePopper",
"docblock": "\u91CD\u65B0\u8BBE\u7F6E\u6D6E\u6846\u7684\u4F4D\u7F6E",
"modifiers": [],
"params": [],
"returns": null,
"description": "\u91CD\u65B0\u8BBE\u7F6E\u6D6E\u6846\u7684\u4F4D\u7F6E"
}, {
"name": "handleDoubleClick",
"docblock": null,
"modifiers": [],
"params": [{
"name": "event",
"type": null
}],
"returns": null
}, {
"name": "initNavigator",
"docblock": "\u521D\u59CB\u5316\u5BFC\u822A\u5668",
"modifiers": [],
"params": [{
"name": "navigatorConfig"
}],
"returns": null,
"description": "\u521D\u59CB\u5316\u5BFC\u822A\u5668"
}, {
"name": "initPanZoom",
"docblock": "\u521D\u59CB\u5316\u7F29\u653E\u6309\u94AE",
"modifiers": [],
"params": [{
"name": "panZoom"
}],
"returns": null,
"description": "\u521D\u59CB\u5316\u7F29\u653E\u6309\u94AE"
}, {
"name": "bindEvent",
"docblock": "\u7ED1\u5B9A\u4E8B\u4EF6",
"modifiers": [],
"params": [{
"name": "events"
}],
"returns": null,
"description": "\u7ED1\u5B9A\u4E8B\u4EF6"
}, {
"name": "changeLayout",
"docblock": null,
"modifiers": [],
"params": [{
"name": "layout",
"type": null
}],
"returns": null
}],
"displayName": "ReactCytoscape",
"props": {
"width": {
"defaultValue": {
"value": "'100%'",
"computed": false
},
"type": {
"name": "string"
},
"required": false,
"description": ""
},
"height": {
"defaultValue": {
"value": "'100%'",
"computed": false
},
"type": {
"name": "string"
},
"required": false,
"description": ""
},
"layout": {
"defaultValue": {
"value": "'auto'",
"computed": false
},
"type": {
"name": "union",
"value": [{
"name": "object"
}, {
"name": "string"
}]
},
"required": false,
"description": "\u5E03\u5C40\uFF0C\u652F\u6301\u4EE5\u4E0B\u51E0\u79CD\u7C7B\u578B\u7684\u5E03\u5C40\u65B9\u5F0F\uFF1A\"auto\"-\u81EA\u52A8\u5E03\u5C40\u3001\"grid\":-\u7F51\u683C\u5E03\u5C40\u3001\"circle\"-\u73AF\u5F62\u5E03\u5C40\u3001\"breadthfirst\"-\u5C42\u6B21\u5E03\u5C40\u3001\"concentric\"-\u540C\u5FC3\u8F74\u5E03\u5C40"
},
"layoutSelected": {
"defaultValue": {
"value": "false",
"computed": false
},
"type": {
"name": "bool"
},
"required": false,
"description": "\u662F\u5426\u53EA\u9488\u5BF9\u9009\u4E2D\u7684\u5143\u7D20\u5E03\u5C40"
},
"pan": {
"defaultValue": {
"value": "null",
"computed": false
},
"type": {
"name": "shape",
"value": {
"x": {
"name": "number",
"required": false
},
"y": {
"name": "number",
"required": false
}
}
},
"required": false,
"description": ""
},
"zoom": {
"defaultValue": {
"value": "null",
"computed": false
},
"type": {
"name": "number"
},
"required": false,
"description": "\u753B\u5E03\u7684\u7F29\u653E\u7CFB\u6570"
},
"boxSelect": {
"defaultValue": {
"value": "false",
"computed": false
},
"type": {
"name": "bool"
},
"required": false,
"description": "\u662F\u5426\u5F00\u542F\u533A\u5757\u9009\u62E9\uFF0Ctrue-\u5F00\u542F\uFF1Bfalse-\u4E0D\u5F00\u542F"
},
"background": {
"defaultValue": {
"value": "'transparent'",
"computed": false
},
"type": {
"name": "string"
},
"required": false,
"description": "\u80CC\u666F"
},
"minZoom": {
"defaultValue": {
"value": "0.1",
"computed": false
},
"type": {
"name": "number"
},
"required": false,
"description": "\u753B\u5E03\u652F\u6301\u7684\u6700\u5C0F\u7F29\u653E\u7EA7\u522B"
},
"maxZoom": {
"defaultValue": {
"value": "6",
"computed": false
},
"type": {
"name": "number"
},
"required": false,
"description": "\u753B\u5E03\u652F\u6301\u7684\u6700\u5927\u7F29\u653E\u7EA7\u522B"
},
"zoomBig": {
"defaultValue": {
"value": "1",
"computed": false
},
"type": {
"name": "number"
},
"required": false,
"description": "\u753B\u5E03\u7F29\u653E\u7B49\u7EA7\u5206\u4E3A\u56DB\u7EA7\uFF0C\u5927\u3001\u6B63\u5E38\u3001\u5C0F\u3001\u5FAE\u5C0F\u3002\u9488\u5BF9\u4E0D\u540C\u7684\u7B49\u7EA7\u53EF\u4EE5\u914D\u7F6E\u4E0D\u540C\u7684\u663E\u793A\u6548\u679C\u3002zoomBig\u6307\u5B9A\u7F29\u653E\u7B49\u7EA7\u4E3A\u201C\u5927\u201D\u7684\u7F29\u653E\u7EA7\u522B\u7684\u4E0B\u9650\uFF0C\u8D85\u8FC7\u6B64\u8BBE\u7F6E\u7684\u7F29\u653E\u7EA7\u522B\u5373\u4E3A\u5927"
},
"zoomNormal": {
"defaultValue": {
"value": "0.5",
"computed": false
},
"type": {
"name": "number"
},
"required": false,
"description": "zoomNormal\u6307\u5B9A\u7F29\u653E\u7B49\u7EA7\u4E3A\u201C\u6B63\u5E38\u201D\u7684\u7F29\u653E\u7EA7\u522B\u7684\u4E0B\u9650\uFF0C\u8D85\u8FC7\u6B64\u8BBE\u7F6E\u7684\u7F29\u653E\u7EA7\u522B\u5373\u4E3A\u6B63\u5E38"
},
"zoomSmall": {
"defaultValue": {
"value": "0.2",
"computed": false
},
"type": {
"name": "number"
},
"required": false,
"description": "zoomSmall\u6307\u5B9A\u7F29\u653E\u7B49\u7EA7\u4E3A\u201C\u5C0F\u201D\u7684\u7F29\u653E\u7EA7\u522B\u7684\u4E0B\u9650\uFF0C\u8D85\u8FC7\u6B64\u8BBE\u7F6E\u7684\u7F29\u653E\u7EA7\u522B\u5373\u4E3A\u5C0F\uFF0C\u5C0F\u4E8E\u6B64\u8BBE\u7F6E\u7684\u7F29\u653E\u7EA7\u522B\u4E3A\u5FAE\u5C0F"
},
"elements": {
"defaultValue": {
"value": "{}",
"computed": false
},
"type": {
"name": "object"
},
"required": false,
"description": "\u753B\u5E03\u4E2D\u7684\u6570\u636E"
},
"graphStyle": {
"defaultValue": {
"value": "null",
"computed": false
},
"type": {
"name": "object"
},
"required": false,
"description": "\u56FE\u6790\u753B\u5E03\u7684\u6837\u5F0F\u914D\u7F6E\uFF0C\u53EF\u4EE5\u901A\u8FC7selector\u6765\u8BBE\u7F6E\u663E\u793A\u6837\u5F0F\uFF0C\u8BF7\u53C2\u8003demo"
},
"floatingLayer": {
"defaultValue": {
"value": "null",
"computed": false
},
"type": {
"name": "object"
},
"required": false,
"description": "\u6D6E\u6846"
},
"floatingLayerConfig": {
"defaultValue": {
"value": "null",
"computed": false
},
"type": {
"name": "object"
},
"required": false,
"description": "\u6D6E\u6846\u7684\u6A21\u677F"
},
"afterRender": {
"defaultValue": {
"value": "null",
"computed": false
},
"type": {
"name": "func"
},
"required": false,
"description": "\u56FE\u6790\u7EC4\u4EF6\u6E32\u67D3\u5B8C\u6210\u540E\u7684\u56DE\u8C03"
},
"className": {
"defaultValue": {
"value": "null",
"computed": false
},
"type": {
"name": "string"
},
"required": false,
"description": "\u6837\u5F0F\u540D"
},
"wheelSensitivity": {
"defaultValue": {
"value": "0.1",
"computed": false
},
"type": {
"name": "number"
},
"required": false,
"description": ""
},
"autoFit": {
"defaultValue": {
"value": "false",
"computed": false
},
"type": {
"name": "bool"
},
"required": false,
"description": ""
},
"onChangeZoom": {
"defaultValue": {
"value": "() => {}",
"computed": false
},
"type": {
"name": "func"
},
"required": false,
"description": ""
},
"onDblClick": {
"defaultValue": {
"value": "() => {}",
"computed": false
},
"type": {
"name": "func"
},
"required": false,
"description": "\u70B9\u51FB\u53CC\u51FB\u65F6\u7684\u56DE\u8C03\u51FD\u6570"
},
"onChangeDisplay": {
"defaultValue": {
"value": "() => {}",
"computed": false
},
"type": {
"name": "func"
},
"required": false,
"description": "\u753B\u5E03\u4E2D\u7684\u72B6\u6001\u6539\u53D8\u65F6\u7684\u56DE\u8C03\u51FD\u6570\uFF08\u4F8B\uFF1A\u5E03\u5C40\u53D8\u5316\u3001\u9009\u4E2D\u6539\u53D8\u3001\u4F4D\u7F6E\u6539\u53D8\u7B49\uFF09\uFF0C\u53C2\u6570chartData"
},
"onLayoutStop": {
"defaultValue": {
"value": "() => {}",
"computed": false
},
"type": {
"name": "func"
},
"required": false,
"description": "\u5E03\u5C40\u7ED3\u675F\u65F6\u7684\u56DE\u8C03\u51FD\u6570"
},
"onCxtTap": {
"defaultValue": {
"value": "() => {}",
"computed": false
},
"type": {
"name": "func"
},
"required": false,
"description": "\u70B9\u51FB\u53F3\u952E\u65F6\u7684\u56DE\u8C03\u51FD\u6570"
},
"onClick": {
"defaultValue": {
"value": "() => {}",
"computed": false
},
"type": {
"name": "func"
},
"required": false,
"description": "\u70B9\u51FB\u65F6\u7684\u56DE\u8C03\u51FD\u6570"
},
"selectSingleOnCxt": {
"defaultValue": {
"value": "false",
"computed": false
},
"type": {
"name": "bool"
},
"required": false,
"description": "\u53F3\u952E\u70B9\u51FB\u5BF9\u8C61\u65F6\u662F\u5426\u53D6\u6D88\u4E4B\u524D\u5BF9\u8C61\u7684\u9009\u4E2D\u72B6\u6001"
},
"autoSelectEdges": {
"defaultValue": {
"value": "true",
"computed": false
},
"type": {
"name": "bool"
},
"required": false,
"description": "\u5728\u9009\u4E2D\u70B9\u65F6\u662F\u5426\u81EA\u52A8\u9009\u4E2D\u76F8\u90BB\u7684\u8FB9"
},
"extensions": {
"defaultValue": {
"value": "[]",
"computed": false
},
"type": {
"name": "array"
},
"required": false,
"description": ""
},
"onTap": {
"defaultValue": {
"value": "() => {}",
"computed": false
},
"type": {
"name": "func"
},
"required": false,
"description": ""
},
"hideEdgesOnViewport": {
"defaultValue": {
"value": "false",
"computed": false
},
"type": {
"name": "bool"
},
"required": false,
"description": ""
},
"navigator": {
"defaultValue": {
"value": "true",
"computed": false
},
"type": {
"name": "union",
"value": [{
"name": "bool"
}, {
"name": "shape",
"value": {
"className": {
"name": "string",
"required": false
},
"headerClassName": {
"name": "string",
"required": false
},
"afterDragging": {
"name": "func",
"required": false
}
}
}]
},
"required": false,
"description": ""
},
"panZoom": {
"defaultValue": {
"value": "true",
"computed": false
},
"type": {
"name": "union",
"value": [{
"name": "bool"
}, {
"name": "shape",
"value": {
"className": {
"name": "string",
"required": false
},
"sliderHandleIcon": {
"name": "string",
"required": false
},
"zoomInIcon": {
"name": "string",
"required": false
},
"zoomOutIcon": {
"name": "string",
"required": false
},
"mode": {
"name": "string",
"required": false
},
"size": {
"name": "string",
"required": false
}
}
}]
},
"required": false,
"description": ""
},
"events": {
"defaultValue": {
"value": "{}",
"computed": false
},
"type": {
"name": "object"
},
"required": false,
"description": ""
}
}
};