x6

当前部分基于： v2.11.1

x6 包是 X6 项目的核心。我们忽略其他部分，关注 src 的目录结构:

./packages/x6/src
├── __tests__
│   └── util
├── config
│   └── index.ts
├── graph                       # 核心
│   ├── background.ts           # 背景
│   ├── base.ts
│   ├── coord.ts                # 坐标系
│   ├── css.ts                  # css
│   ├── defs.ts                 # svg 的 defs
│   ├── events.ts               # 事件类型定义
│   ├── graph.ts                # Graph
│   ├── grid.ts                 # 网格
│   ├── highlight.ts            # 高亮
│   ├── index.ts
│   ├── mousewheel.ts           # 鼠标滚轮
│   ├── options.ts              # 选项类型定义
│   ├── panning.ts              # 画布平移
│   ├── size.ts                 # 画布尺寸
│   ├── transform.ts            # 画布变换，包括缩放、旋转、过渡、定位
│   ├── view.ts                 # GraphView 是 Graph 的视图
│   └── virtual-render.ts       # 虚拟渲染器，收集 200ms 内的变更，统一提交到渲染器
├── index.less
├── index.ts
├── model                       # 渲染模型
│   ├── animation.ts
│   ├── cell.ts
│   ├── collection.ts
│   ├── edge.ts
│   ├── index.ts
│   ├── model.ts
│   ├── node.ts
│   ├── port.ts
│   ├── registry.ts
│   └── store.ts
├── registry                    # 注册表
│   ├── attr
│   ├── background
│   ├── connection-point
│   ├── connection-strategy
│   ├── connector
│   ├── edge-anchor
│   ├── filter
│   ├── grid
│   ├── highlighter
│   ├── index.ts
│   ├── marker
│   ├── node-anchor
│   ├── port-label-layout
│   ├── port-layout
│   ├── registry.ts
│   ├── router
│   └── tool
├── renderer                    # 渲染器
│   ├── index.ts
│   ├── queueJob.ts
│   ├── renderer.ts
│   └── scheduler.ts
├── shape                       # 预定义的基础图形
│   ├── base.ts
│   ├── circle.ts
│   ├── edge.ts
│   ├── ellipse.ts
│   ├── html.ts
│   ├── image.ts
│   ├── index.ts
│   ├── path.ts
│   ├── poly.ts
│   ├── polygon.ts
│   ├── polyline.ts
│   ├── rect.ts
│   ├── text-block.ts
│   └── util.ts
├── style                       # 样式和主题
│   ├── index.less
│   ├── raw.ts
│   └── themes
├── util
│   └── index.ts
└── view                        # 渲染视图
    ├── attr.ts
    ├── cache.ts
    ├── cell.ts
    ├── edge.ts
    ├── flag.ts
    ├── index.ts
    ├── markup.ts
    ├── node.ts
    ├── tool.ts
    └── view.ts

架构设计

x6 包主要分为以下部分：

• Graph 画布，位于 x6/src/graph/graph.ts，承载所有的画布的功能，不实现具体功能，仅仅是把所有功能组合起来，提供操作画布的 API
• model 模型，位于 x6/src/model/，由画布内的元素构成的抽象模型，模型仅仅是对画布内元素的描述，不负责渲染
• view 视图，位于 x6/src/view/，负责对模型的实际渲染
• renderer 渲染器，位于 x6/src/renderer/renderer.ts，用于调度渲染的时机，并将模型和视图关联起来，它会在适合的时候将模型使用对应的视图进行渲染
• registry 注册表，位于 x6/src/registry/，将对应的功能使用特定的名称进行注册，以便在使用时直接使用名称，在内部从注册表中查询对应的实现
• 事件驱动，画布的各个功能和插件间通过事件进行交流