@ant-design/pro-flow
Version:
A React based Flow components
154 lines • 7.14 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import BasicNodeGroup from "../BasicGroupNode";
import BasicNode from "../BasicNode";
import React, { createContext, useCallback, useContext, useEffect, useMemo } from 'react';
import ReactFlow, { BackgroundVariant, useViewport } from 'reactflow';
import 'reactflow/dist/style.css';
import { Background, Language, MiniMap, RadiusEdge } from "../index";
import DefaultNode from "./components/DefaultNode";
import { FlowViewContext } from "./provider/provider";
import { useStyles } from "./styles";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
export var FlowContext = /*#__PURE__*/createContext({});
var initFn = function initFn() {};
var FlowView = function FlowView(props) {
var _props$onNodeDragStar = props.onNodeDragStart,
onNodeDragStart = _props$onNodeDragStar === void 0 ? initFn : _props$onNodeDragStar,
_props$onPaneClick = props.onPaneClick,
onPaneClick = _props$onPaneClick === void 0 ? initFn : _props$onPaneClick,
_props$onNodeClick = props.onNodeClick,
onNodeClick = _props$onNodeClick === void 0 ? initFn : _props$onNodeClick,
_props$onEdgeClick = props.onEdgeClick,
onEdgeClick = _props$onEdgeClick === void 0 ? initFn : _props$onEdgeClick,
_props$onNodesChange = props.onNodesChange,
onNodesChange = _props$onNodesChange === void 0 ? initFn : _props$onNodesChange,
_props$onEdgesChange = props.onEdgesChange,
onEdgesChange = _props$onEdgesChange === void 0 ? initFn : _props$onEdgesChange,
_props$nodes = props.nodes,
nodes = _props$nodes === void 0 ? [] : _props$nodes,
_props$edges = props.edges,
edges = _props$edges === void 0 ? [] : _props$edges,
_props$nodeTypes = props.nodeTypes,
nodeTypes = _props$nodeTypes === void 0 ? {} : _props$nodeTypes,
_props$edgeTypes = props.edgeTypes,
edgeTypes = _props$edgeTypes === void 0 ? {} : _props$edgeTypes,
_props$miniMap = props.miniMap,
miniMap = _props$miniMap === void 0 ? true : _props$miniMap,
children = props.children,
_props$background = props.background,
background = _props$background === void 0 ? true : _props$background,
_props$autoLayout = props.autoLayout,
autoLayout = _props$autoLayout === void 0 ? true : _props$autoLayout,
_props$stepLessZoomin = props.stepLessZooming,
stepLessZooming = _props$stepLessZoomin === void 0 ? false : _props$stepLessZoomin,
flowProps = props.flowProps,
_props$minZoom = props.minZoom,
minZoom = _props$minZoom === void 0 ? 0.1 : _props$minZoom,
_props$maxZoom = props.maxZoom,
maxZoom = _props$maxZoom === void 0 ? 2 : _props$maxZoom,
className = props.className,
_props$layoutOptions = props.layoutOptions,
layoutOptions = _props$layoutOptions === void 0 ? {
rankdir: 'LR',
align: 'UL',
nodesep: 100,
ranksep: 200
} : _props$layoutOptions;
var _useContext = useContext(FlowViewContext),
miniMapPosition = _useContext.miniMapPosition,
flowDataAdapter = _useContext.flowDataAdapter,
flowViewRef = _useContext.flowViewRef,
renderNodes = _useContext.nodes,
renderEdges = _useContext.edges;
var _useStyles = useStyles(),
styles = _useStyles.styles,
cx = _useStyles.cx;
var nodeTypesMemo = useMemo(function () {
return _objectSpread(_objectSpread({}, nodeTypes), {}, {
BasicNode: BasicNode,
BasicNodeGroup: BasicNodeGroup,
default: DefaultNode
});
}, []);
var edgeTypesMemo = useMemo(function () {
return _objectSpread(_objectSpread({}, edgeTypes), {}, {
radius: RadiusEdge
});
}, []);
var _useViewport = useViewport(),
zoom = _useViewport.zoom;
useEffect(function () {
var _zoom = zoom ? zoom : 1;
flowDataAdapter(nodes, edges, _zoom, autoLayout, layoutOptions);
}, [nodes, edges]);
useEffect(function () {
if (!stepLessZooming) return;
flowDataAdapter(nodes, edges, zoom, autoLayout, layoutOptions);
}, [zoom]);
var handleNodesChange = useCallback(function (nodes) {
onNodesChange(nodes);
}, [onNodesChange]);
var handleEdgesChange = useCallback(function (edges) {
onEdgesChange(edges);
}, [onEdgesChange]);
var handleNodeDragStart = useCallback(function (event, node, nodes) {
// TODO: 应当把事件中的 node 转换为 FlowViewNode 透出给用户
// const {node} = transformNode(node);
onNodeDragStart(event, node, nodes);
}, [onNodeDragStart]);
var handleNodeDragStop = useCallback(function () {}, []);
var handlePaneClick = useCallback(function (event) {
// TODO: 应当把事件中的 node 转换为 FlowViewNode 透出给用户
// const {node} = transformNode(node);
onPaneClick(event);
}, [onPaneClick]);
var handleNodeClick = useCallback(function (event, node) {
// TODO: 应当把事件中的 node 转换为 FlowViewNode 透出给用户
// const {node} = transformNode(node);
onNodeClick(event, node);
}, [onNodeClick]);
var handleEdgeClick = useCallback(function (event, edge) {
// TODO: 应当把事件中的 node 转换为 FlowViewNode 透出给用户
// const {node} = transformNode(node);
onEdgeClick(event, edge);
}, [onEdgeClick]);
return /*#__PURE__*/_jsx(_Fragment, {
children: /*#__PURE__*/_jsxs(ReactFlow, _objectSpread(_objectSpread({
ref: flowViewRef,
className: cx(styles.container, className),
onNodeDragStart: handleNodeDragStart,
onNodeDragStop: handleNodeDragStop,
onPaneClick: handlePaneClick,
onNodeClick: handleNodeClick,
onEdgeClick: handleEdgeClick,
onNodesChange: handleNodesChange,
onEdgesChange: handleEdgesChange,
nodes: renderNodes,
edges: renderEdges,
nodeTypes: nodeTypesMemo,
edgeTypes: edgeTypesMemo,
panOnScroll: true,
fitView: true,
minZoom: minZoom,
maxZoom: maxZoom
}, flowProps), {}, {
children: [miniMap && /*#__PURE__*/_jsx(MiniMap, {
language: Language.zh_CN,
position: miniMapPosition,
className: 'pro-flow-controller'
}), children, background && /*#__PURE__*/_jsx(Background, {
style: {
backgroundColor: '#F7F8FA'
},
gap: 10,
color: "#bac3d4",
variant: BackgroundVariant.Dots
})]
}))
});
};
export default FlowView;