@rxflow/base
Version:
BaseFlow - 核心 Flow 组件库
238 lines (233 loc) • 9.41 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Flow = Flow;
require("@xyflow/react/dist/style.css");
var _components = require("./components");
var _hooks = require("./hooks");
var _react = require("@xyflow/react");
var _ahooks = require("ahooks");
var _lodash = require("lodash");
var _react2 = _interopRequireWildcard(require("react"));
var _Controls = _interopRequireDefault(require("./components/Controls"));
var _DebugInfo = require("./components/DebugInfo");
var _manhattan = require("./edges/manhattan");
var _useGetEdgesChangeHandlers = require("./hooks/edges/useGetEdgesChangeHandlers");
var _useSetNodeDragging = require("./hooks/node/useSetNodeDragging");
var _useForceUpdateTimes = require("./hooks/render/useForceUpdateTimes");
var _useListenRender = require("./hooks/useListenRender");
var _scrollbar = require("./plugins/scrollbar");
var _hasDimensionsChange = require("./utils/hasDimensionsChange");
require("./index.less");
var _base = require("./utils/layouts/base");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
/**
* @author: yanxianliang
* @date: 2025-07-27 16:33
* @modified：2025/7/27 16:33 by yanxianliang
* @desc: Flow
*
* Copyright (c) 2025 by yanxianliang, All Rights Reserved.
*/
const proOptions = {
hideAttribution: true
}; // 默认隐藏水印
function Flow(props) {
const {
width,
height,
showControls = true,
// 默认开启
controlsPosition = 'top-right',
controlsOrientation,
showMiniMap,
showLegend,
background = '#F2F7FAFF',
// 默认背景色
showFullscreen,
showForceLayout,
showInteractive,
showFitView,
showZoom,
onlyRenderVisibleElements = true,
// 默认开启虚拟渲染
rootStyle: _rootStyle,
fitViewOptions,
nodes,
edges,
layout = _base.baseLayout,
autoCenter = false,
omitProps = [],
// 不向下透传的属性
forceLayout = !!props.layout,
// 是否强制布局，如果强制布局会监控节点的dimension改变事件，自动触发布局计算
getMiniMapNodeColor,
markers,
plugins,
readOnly,
onZoomOut,
onZoomIn,
onFitView,
onInteractiveChange,
customControls,
nodeTypes: _nodeTypes,
onEdgesChange,
children,
forceFitView
} = props;
(0, _useListenRender.useListenRender)(); // 性能监听 hook
const [minimapVisible, setMinimapVisible] = (0, _react2.useState)(!!(showMiniMap && !showControls)); // 不显示控制器是默认按照字段控制 miniMap显示状态
const storeApi = (0, _react.useStoreApi)();
const containerRef = (0, _react2.useRef)(null);
const theme = (0, _hooks.useTheme)();
const themeVars = (0, _hooks.useThemeVars)();
const nodeTypes = (0, _hooks.useNodeTypes)(_nodeTypes); // 获取注册的节点类型
const forceUpdateTimes = (0, _useForceUpdateTimes.useForceUpdateTimes)();
const triggerLayout = (0, _hooks.useForceUpdate)();
const setNodeDragging = (0, _useSetNodeDragging.useSetNodeDragging)();
const instance = (0, _react.useReactFlow)();
const getState = (0, _hooks.useGetState)();
const rootStyle = (0, _react2.useMemo)(() => {
return {
width: typeof width === 'number' ? `${width}px` : width,
height: typeof height === 'number' ? `${height}px` : height,
..._rootStyle,
...themeVars
};
}, [width, height, _rootStyle, themeVars]);
const {
nodes: _nodes,
edges: _edges
} = (0, _react2.useMemo)(() => {
const store = storeApi.getState();
return layout({
nodeTypes,
originNodes: nodes || [],
originEdges: edges || [],
theme,
onlyRenderVisibleElements,
// 不支持修改该参数
store,
state: getState(),
flowProps: props
});
}, [nodes, edges, forceUpdateTimes]);
const flowProps = (0, _react2.useMemo)(() => {
const options = {
selectNodesOnDrag: false,
preventScrolling: true,
panOnScroll: false,
zoomOnScroll: true,
nodesDraggable: false,
proOptions: proOptions,
fitViewOptions: {
nodes: _nodes?.length && autoCenter ? [_nodes[0]] : undefined,
...props.fitViewOptions
},
fitView: true,
onlyRenderVisibleElements,
...(0, _lodash.omit)(props, ['flowInstanceRef', 'width', 'height', 'nodes', 'edges', 'fitViewOptions', 'theme', 'background', 'nodeTypes', 'showControls', 'showMiniMap', 'autoCenter', 'rootStyle', 'layout', 'onNodesChange', 'omitProps', 'forceLayout', 'controlsPosition', 'getMiniMapNodeColor', 'markers', 'onBeforeLayout', 'onLayout', 'onAfterLayout', 'plugins', 'readOnly', 'showFitView', 'showFullscreen', 'showInteractive', 'showZoom', 'showForceLayout', 'onInteractiveChange', 'onZoomOut', 'onZoomIn', 'onFitView', 'customControls', 'controlsOrientation', ...omitProps]),
edgeTypes: {
manhattan: _manhattan.ManhattanEdge,
...(props.edgeTypes || {})
}
};
if (plugins?.scroller) {
// 只读模式也需要
options.zoomOnScroll = false;
options.panOnScroll = true;
options.panOnDrag = options.panOnDrag ?? [1, 2];
options.selectionOnDrag = options.selectionOnDrag ?? true;
options.selectionMode = options.selectionMode ?? _react.SelectionMode.Partial;
}
if (readOnly) {
options.nodesDraggable = false;
options.nodesConnectable = false;
options.elementsSelectable = false;
}
return options;
}, [props, _nodes, readOnly, onlyRenderVisibleElements]);
const onNodesChange = (0, _ahooks.useMemoizedFn)(changes => {
if (forceLayout && (0, _hasDimensionsChange.hasDimensionsChange)(changes)) {
// 强制布局
triggerLayout();
}
props.onNodesChange?.(changes);
});
const onNodeDragStart = (0, _ahooks.useMemoizedFn)((event, node, nodes) => {
setNodeDragging(true);
flowProps.onNodeDragStart?.(event, node, nodes);
});
const onNodeDragStop = (0, _ahooks.useMemoizedFn)((event, node, nodes) => {
setNodeDragging(false);
flowProps.onNodeDragStop?.(event, node, nodes);
});
const getEdgesChangeHandlers = (0, _useGetEdgesChangeHandlers.useGetEdgesChangeHandlers)();
const _onEdgesChange = (0, _ahooks.useMemoizedFn)(changes => {
onEdgesChange?.(changes);
// 触发注册事件
getEdgesChangeHandlers()?.forEach(onEdgesChange => {
onEdgesChange?.(changes);
});
});
(0, _react2.useEffect)(() => {
if (forceFitView) {
instance.fitView(fitViewOptions);
}
}, [nodes]);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
ref: containerRef,
style: rootStyle,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DebugInfo.DebugInfo, {
debug: props.debug
}), markers ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MarkerDefinitions, {
marks: markers
}) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.ReactFlow, {
nodeTypes: nodeTypes,
...flowProps,
nodes: _nodes,
edges: _edges,
onNodesChange: onNodesChange,
onNodeDragStart: onNodeDragStart,
onNodeDragStop: onNodeDragStop,
onEdgesChange: _onEdgesChange,
children: [plugins?.scroller ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_scrollbar.Scrollbar, {
...plugins.scroller,
width: width,
height: height
}) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Background, {
bgColor: background,
className: 'rxflow-bg-hide-pattern',
variant: _react.BackgroundVariant.Lines
}), minimapVisible && /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.MiniMap, {
zoomable: true,
pannable: true,
nodeColor: getMiniMapNodeColor
}), showControls && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Controls.default, {
showFullscreen: showFullscreen,
containerRef: containerRef,
fitViewOptions: fitViewOptions,
position: controlsPosition,
showInteractive: showInteractive,
showMiniMap: showMiniMap,
showFitView: showFitView,
showZoom: showZoom,
setMinimapVisible: setMinimapVisible,
minimapVisible: minimapVisible,
showForceLayout: showForceLayout,
onFitView: onFitView,
onZoomOut: onZoomOut,
onZoomIn: onZoomIn,
onInteractiveChange: onInteractiveChange,
children: customControls,
orientation: controlsOrientation
}), showLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Legend, {
showLegend: showLegend
}), children]
})]
});
}