关于前端:AntV-X6源码简析

6次阅读

共计 7002 个字符，预计需要花费 18 分钟才能阅读完成。

AntV 是蚂蚁金服全新一代数据可视化解决方案，其中 X6 次要用于解决图编辑畛域相干的解决方案，其是一款图编辑引擎，内置了一下编辑器所需的性能及组件等，本文旨在通过简要剖析 x6 源码来对图编辑畛域的一些底层引擎进行一个大抵理解，同时也为团队中须要进行基于 X6 编辑引擎进行构建的图编辑器提供一些侧面理解，在碰到问题时能够较快的找到问题点。

X6 整体是基于 MVVM 的架构进行设计的，对外整体裸露 Graph 的类，其中的 Node、Edge、Port 等都有对外裸露的办法，能够独自应用，其中提供了类 Jquery 的一些 dom 操作方法，整体的 Graph 基于了一个事件基类，对事件进行的整体的解决，其中应用了 dispose 来对实例进行显示断定。

整体设计合乎 SOLID 准则，提供事件机制进行公布订阅解耦，对于扩展性构造则提供注册机制，进行扩展性插件组织

整体采纳 monorepo 进行源码的仓库治理

packages
- x6
  - addon
  - common
  - geometry
  - global
  - graph
  - layout
  - model
  - registry
  - shape
  - style
  - types
  - util
  - view
- x6-angular-shape
- x6-geometry
  - angle
  - curve
  - ellipse
  - line
  - point
  - polyline
  - rectangle
- x6-react
- x6-react-components
- x6-react-shape
- x6-vector
- x6-vue-shape

从架构档次能够看出，整体对外裸露的就是 Graph 这么一个大类，因此在剖析源码调用过程中，咱们抓住 Graph 进行逐渐的往外拓展，从而把握整体的一个设计链路，防止陷入部分无奈抽离

Graph 类提供了整体所有构造的汇总，从而裸露给用户

class Graph extends Basecoat<EventArgs> {
  public readonly options: GraphOptions.Definition
  public readonly css: CSSManager
  public readonly model: Model
  public readonly view: GraphView
  public readonly hook: HookManager
  public readonly grid: Grid
  public readonly defs: Defs
  public readonly knob: Knob
  public readonly coord: Coord
  public readonly renderer: ViewRenderer
  public readonly snapline: Snapline
  public readonly highlight: Highlight
  public readonly transform: Transform
  public readonly clipboard: Clipboard
  public readonly selection: Selection
  public readonly background: Background
  public readonly history: History
  public readonly scroller: Scroller
  public readonly minimap: MiniMap
  public readonly keyboard: Shortcut
  public readonly mousewheel: Wheel
  public readonly panning: Panning
  public readonly print: Print
  public readonly format: Format
  public readonly size: SizeManager
  
  // 拿到须要加载的 container
  public get container() {return this.view.container}

  protected get [Symbol.toStringTag]() {return Graph.toStringTag}

  constructor(options: Partial<GraphOptions.Manual>) {super()

    this.options = GraphOptions.get(options)
    this.css = new CSSManager(this)
    this.hook = new HookManager(this)
    this.view = this.hook.createView()
    this.defs = this.hook.createDefsManager()
    this.coord = this.hook.createCoordManager()
    this.transform = this.hook.createTransformManager()
    this.knob = this.hook.createKnobManager()
    this.highlight = this.hook.createHighlightManager()
    this.grid = this.hook.createGridManager()
    this.background = this.hook.createBackgroundManager()
    this.model = this.hook.createModel()
    this.renderer = this.hook.createRenderer()
    this.clipboard = this.hook.createClipboardManager()
    this.snapline = this.hook.createSnaplineManager()
    this.selection = this.hook.createSelectionManager()
    this.history = this.hook.createHistoryManager()
    this.scroller = this.hook.createScrollerManager()
    this.minimap = this.hook.createMiniMapManager()
    this.keyboard = this.hook.createKeyboard()
    this.mousewheel = this.hook.createMouseWheel()
    this.print = this.hook.createPrintManager()
    this.format = this.hook.createFormatManager()
    this.panning = this.hook.createPanningManager()
    this.size = this.hook.createSizeManager()}
}

实现各种类型办法的两头解耦层，用于包裹属性等

// shape 的基类，标记 shape 的各种属性，如标签等
class Base<
  Properties extends Node.Properties = Node.Properties,
> extends Node<Properties> {get label() {return this.getLabel()
  }

  set label(val: string | undefined | null) {this.setLabel(val)
  }

  getLabel() {return this.getAttrByPath<string>('text/text')
  }

  setLabel(label?: string | null, options?: Node.SetOptions) {if (label == null) {this.removeLabel()
    } else {this.setAttrByPath('text/text', label, options)
    }

    return this
  }

  removeLabel() {this.removeAttrByPath('text/text')
    return this
  }
}

// 创立 shape 的办法
function createShape(
  shape: string,
  config: Node.Config,
  options: {
    noText?: boolean
    ignoreMarkup?: boolean
    parent?: Node.Definition | typeof Base
  } = {},) {const name = getName(shape)
  const defaults: Node.Config = {
    constructorName: name,
    attrs: {
      '.': {
        fill: '#ffffff',
        stroke: 'none',
      },
      [shape]: {
        fill: '#ffffff',
        stroke: '#000000',
      },
    },
  }

  if (!options.ignoreMarkup) {defaults.markup = getMarkup(shape, options.noText === true)
  }

  const base = options.parent || Base
  return base.define(ObjectExt.merge(defaults, config, { shape: name}),
  ) as typeof Base
}

提供了 Node、Cell、Edge、Prot 等的解决办法

class Model extends Basecoat<Model.EventArgs> {
  public readonly collection: Collection
  protected readonly batches: KeyValue<number> = {}
  protected readonly addings: WeakMap<Cell, boolean> = new WeakMap()
  public graph: Graph | null
  protected nodes: KeyValue<boolean> = {}
  protected edges: KeyValue<boolean> = {}
  protected outgoings: KeyValue<string[]> = {}
  protected incomings: KeyValue<string[]> = {}

  protected get [Symbol.toStringTag]() {return Model.toStringTag}

  constructor(cells: Cell[] = []) {super()
    this.collection = new Collection(cells)
    this.setup()}
}

渲染 Model 相干的数据

class Renderer extends Base {
  protected views: KeyValue<CellView>
  protected zPivots: KeyValue<Comment>
  protected updates: Renderer.Updates
  protected init() {}
  protected startListening() {}
  protected stopListening() {}
  protected resetUpdates() {}
  protected onSortModel() {}
  protected onModelReseted() {}
  protected onBatchStop() {}
  protected onCellAdded() {}
  protected onCellRemove() {}
  protected onCellZIndexChanged() {}
  protected onCellVisibleChanged() {}
  protected processEdgeOnTerminalVisibleChanged() {}
  protected isEdgeTerminalVisible() {}
}

数据的公共存储仓库，与 renderer 进行交互

class Store<D> extends Basecoat<Store.EventArgs<D>>{
  protected data: D
  protected previous: D
  protected changed: Partial<D>
  protected pending = false
  protected changing = false
  protected pendingOptions: Store.MutateOptions | null
  protected mutate<K extends keyof D>() {}
  constructor(data: Partial<D> = {}) {super()
    this.data = {} as D
    this.mutate(ObjectExt.cloneDeep(data))
    this.changed = {}}
  get() {}
  set() {}
  remove() {}
  clone() {}
}

聚合 EdgeView、CellView 等，应用了 jQuery 的相干 DOM 操作

abstract class View<EventArgs = any> extends Basecoat<EventArgs> {
  public readonly cid: string
  public container: Element
  protected selectors: Markup.Selectors

  public get priority() {return 2}

  constructor() {super()
    this.cid = Private.uniqueId()
    View.views[this.cid] = this
  }
}

提供几何图形的操作解决，包含 Curve、Ellipse、Line、Point、PolyLine、Rectangle、Angle 等

abstract class Geometry {
  abstract scale(
    sx: number,
    sy: number,
    origin?: Point.PointLike | Point.PointData,
  ): this

  abstract rotate(
    angle: number,
    origin?: Point.PointLike | Point.PointData,
  ): this

  abstract translate(tx: number, ty: number): this

  abstract translate(p: Point.PointLike | Point.PointData): this

  abstract equals(g: any): boolean

  abstract clone(): Geometry

  abstract toJSON(): JSONObject | JSONArray

  abstract serialize(): string

  valueOf() {return this.toJSON()
  }

  toString() {return JSON.stringify(this.toJSON())
  }
}

提供注册核心的机制，

class Registry<
  Entity,
  Presets = KeyValue<Entity>,
  OptionalType = never,
> {
  public readonly data: KeyValue<Entity>
  public readonly options: Registry.Options<Entity | OptionalType>

  constructor(options: Registry.Options<Entity | OptionalType>) {this.options = { ...options}
    this.data = (this.options.data as KeyValue<Entity>) || {}
    this.register = this.register.bind(this)
    this.unregister = this.unregister.bind(this)
  }

  get names() {return Object.keys(this.data)
  }

  register() {}
  unregister() {}
  get() {}
  exist() {}
}

提供事件的监听 (公布订阅) 机制

class Events<EventArgs extends Events.EventArgs = any> {private listeners: { [name: string]: any[]} = {}

    on() {}
    once() {}
    off() {}
    trigger() {}
    emit() {}
}

整体咱们看到，要想实现一款底层的图编辑引擎，须要做好整体的架构设计及解构，通常不外乎 MVC 的构造的变种，因此咱们在抉择 Model 层、View 层、Controller 层的过程中，能够综合思考软件工程中不同的设计方案来解决，比方对事件零碎的设计、插件机制的设计等等，另外在底层渲染方面，毕竟作为图可视化畛域的前端计划，对 SVG、HTML、Canvas 等不同计划的抉择也须要针对性思考，以上。可视化畛域深度与广度摸索起来不仅仅局限于前端侧，心愿可能在这方面可能零碎的学习与实际，从而摸索出在前端畛域的一些机会，共勉！！！

X6 官网
Antv/X6< 图编辑引擎 >
x6 源码
antvis G6 vs X6 vs Topology 源码统计分析
X6 1.0 道歉来晚
XFlow 1.0：业余的图编辑利用解决方案
X6：深度打磨，日臻完善
AntV 旗下图编辑引擎 X6

正文完

前端

发表至：前端

2022-03-06

0

关于前端:深度-阿里云蒋江伟什么是真正的云原生

关于前端:好物周刊40多功能文件管理器

关于前端:webpack-进阶Webpack-打包后的代码是怎样的

关于前端:在vue中使用-echarts530

关于前端:可不要忽视了TypeScript中函数和类的重要性

关于前端:AntV-X6源码简析

前言

架构

目录

源码

Graph

Shape

Model

Renderer

Store

View

Geometry

Registry

Events

总结

参考

站内搜索