前言
前段时间重构了下面这样一个页面(产品页面不方便截图):
类似于拓扑图的配置,原来是使用go.js实现的,类似的库还有antv g6。重构主要是为了提高代码质量,降低维护成本,产品上需要更强的定制化能力(对付产品经理的变态需求),所以经过一番研究之后,最后决定放弃使用现成的库。原因如下:
维护成本高:类似的库(antv/g6, go.js)都是基于canvas实现,也都大同小异的定义了一套组件,有一定的学习成本,同时基于这样的库写出来的代码都相对复杂;
灵活性差:因为是canvas实现,元素一般需要指定尺寸,所以在一些需要元素大小自适应的地方并没有DOM元素好实现;
定制化能力差。只能使用库里定义的api和事件,遇到一些比较极端的需求时无能为力。
当然,以上两个库还是相当强大的,不过基于这些原因,自己基于(DOM + SVG)撸一个拓扑图配置的工具库topology-byfe
demo演示
源代码
import React from 'react';
import { Topology, topologyWrapper, TemplateWrapper } from 'topology-byfe';
import { ITopologyNode, ITopologyData, IWrapperOptions } from 'topology-byfe/lib/declare';
import './index.less';
interface FlowState {
data: ITopologyData;
}
class Flow extends React.Component {
state: FlowState = {
data: { lines: [], nodes: [] },
};
generatorNodeData = (isBig: boolean) => ({
id: `${Date.now()}`,
name: isBig ? '宽节点'