共计 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
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 的基类,标记 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
}
Model
提供了 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()}
}
Renderer
渲染 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() {}
}
Store
数据的公共存储仓库,与 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() {}
}
View
聚合 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
}
}
Geometry
提供几何图形的操作解决,包含 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())
}
}
Registry
提供注册核心的机制,
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() {}
}
Events
提供事件的监听 (公布订阅) 机制
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