本文来说明LogicFlow core的目录结构，@logicflow/core版本0.3.0-alpha.5
根据上图进行说明
1、文件的引用
LogicFlow.tsx是入口文件，它使用view中的Graph.tsx(import Graph from './view/Graph')。
Graph.tsx中的 <div className="lf-graph" style={style}></div>是svg的父节点元素，svg的节点、边等都在这个节点之下。Graph.tsx使用overlay下的CanvasOverlay.tsx。
CanvasOverlay中使用{children}，内容依然在Graph.tsx中。
Graph.tsx中使用{map(graphModel.sortElements, (nodeModel) => ())}进行了节点遍历，LogicFlow.tsx中的getView方法获取视图，使用GraphModel.tsx中的sortElements获取视图对应modal数据。
GraphModel.tsx中的sortElements方法返回的是节点和边的model。节点model用BaseNodeModel表示，边model用BaseEdgeModel。BaseNodeModel和BaseEdgeModel分别是节点model的父类和边model的父类。
2、继承关系
view/node/RectNode.tsx的model数据是model/node中的RectNodeModel.ts。RectNodeModel继承了BaseNodeModel，BaseNodeModel实现了BaseModel接口。BaseNodeModel中定义的方法RectNodeModel是可以使用的。
RectNode.tsx继承了BaseNode.tsx,在BaseNode.tsx中调用getShape()获取实例时，是调用的对应的子类。
3、移动节点
移动RectNode节点，调用的是BaseNode.tsx中通过onMouseDown={this.handleMouseDown}绑定的方法。handleMouseDown方法中使用到了工具类util中的drag.ts中的StepDrag，最后调用的是graphModel.moveNode(model.id, curDeltaX, curDeltaY)。
moveNode方法在GraphModel.tsx中，moveNode调用了BaseNodeModel中的move方法，移动节点的位置。
文章梳理了文件结构，和继承关系。
也可以查看：LogicFlow core解析（一） 和更多官方内容。
