前言AntV是蚂蚁金服新一代数据可视化解决方案，其中X6主要用于解决图形编辑领域相关的解决方案。它是一个带有内置编辑器的图形编辑引擎。功能和组件等，本文旨在通过对x6源码的简单分析，对图编辑领域的一些底层引擎有一个大概的了解，同时也对需要基于团队中的X6编辑引擎。遇到问题时，可以快速找到问题点。架构X6整体基于MVVM架构设计，将Graph类整体暴露出来。其中Node、Edge、Port等都有暴露的方法，可以单独使用。它像Jquery一样提供了一些dom操作方法，整体TheGraph是基于一个事件基类来对事件进行整体处理，dispose用于显示和判断实例。整体设计符合SOLID原则，提供了发布和订阅解耦的事件机制，并且对于可扩展的结构，提供了注册机制用于可扩展的插件组织。整体目录使用monorepo进行源码仓库管理。componentsx6-react-shapex6-vectorx6-vue-shape的源码从架构层面可以看出，整体暴露的就是Graph这样一个大类，所以在分析源码调用的过程中，我们把握Graph和逐渐向外扩展，从而掌握一个整体设计环节，避免陷入局部无法抽取GraphGraph类提供所有整体结构的汇总，从而暴露给用户classGraphextendsBasecoat{publicreadonlyoptions：GraphOptions.Definitionpublicreadonlycss：CSSManagerpublicreadonlymodel：Modelpublicreadonlyview：GraphViewpublicreadonlyhook：HookManagerpublicreadonlygrid：Gridpublicreadonlydefs：Defspublicreadonlyknob：Knobpublicreadonlycoord：Coordpublicreadonlyrenderer：ViewRendererpublicreadonlysnapline:SnaplineHighlightpublicreadonlypubliclight::Transformpublicreadonly剪贴板:Clipboardpublicreadonly选择：选择公共只读背景：背景公共只读历史：历史公共只读滚动条：滚动条公共只读迷你地图：迷你地图公共只读键盘：快捷方式公共只读鼠标滚轮：轮公共只读平移：平移公共只读打印：打印公共只读格式：格式公共只读size:SizeManager//拿到需要加载的容器publicgetcontainer(){returnthis.view.container}protectedget[Symbol.toStringTag](){returnGraph.toStringTag}constructor(options:Partial){super()this.options=GraphOptions.get(options)this.css=newCSSManager(this)this.hook=newHookManager(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的各种属性，如标记等classBaseextends节点{getlabel(){returnthis.getLabel()}setlabel(val:string|undefined|null){this.setLabel(val)}getLabel(){returnthis.getAttrByPath('text/text')}setLabel(label?:string|null,options?:Node.SetOptions){if(label==null){this.removeLabel()}else{this.setAttrByPath('text/text',标签,options)}returnthis}removeLabel(){this.removeAttrByPath('text/text')returnthis}}//创建形状的方法functioncreateShape(shape:string,config:Node.Config,options:{noText?:booleanignoreMarkup?:booleanparent?:Node.Definition|typeofBase}={},){constname=getName(shape)constdefaults:Node.Config={constructorName:name,attrs:{'.':{填充：'#ffffff',stroke:'none',},[shape]:{fill:'#ffffff',stroke:'#000000',},},}if(!options.ignoreMarkup){defaults.markup=getMarkup（形状，options.noText===true）}constbase=options.parent||Basereturnbase.define(ObjectExt.merge(defaults,config,{shape:name}),)astypeofBase}Model提供了Node、Cell、Edge、Prot等的处理方法classModelextendsBasecoat{publicreadonlycollection:Collectionprotectedreadonlybatches:KeyValue={}protectedreadonlyaddings:WeakMap=newWeakMap()公共图：Graph|空受保护节点：KeyValue={}受保护边：KeyValue={}受保护输出：KeyValue={}受保护输入：KeyValue={}protectedget[Symbol.toStringTag](){returnModel.toStringTag}constructor(cells:Cell[]=[]){super()this.collection=newCollection(cells)this.setup()}}Renderer渲染模型相关的数据类RendererextendsBase{受保护的视图：KeyValue受保护的z枢轴：KeyValue保护更新：Renderer.Updatesprotectedinit(){}protectedstartListening(){}protectedstopListening(){}protectedresetUpdates(){}protectedonSortModel(){}protectedonModelReseted(){}protectedonBatchStop(){}protectedonCellAdded(){}protectedonCellRemove(){}protectedonCellZIndexChanged(){}protectedonCellVisibleChanged(){}protectedprocessEdgeOnTerminalVisibleChanged(){}protectedisEdgeTerminalVisible(){}}存储数据的公共存储库，与渲染器进行交互classStoreextendsBasecoat>{protecteddata:Dprotectedprevious:Dprotectedchanged:Partialprotectedpending=falseprotectedchanging=falseprotectedpendingOptions:Store.MutateOptions|nullprotectedmutate(){}constructor(data:Partial={}){super()this.data={}asDthis.mutate(ObjectExt.cloneDeep(data))这个。变了={}}get(){}set(){}remove(){}clone(){}}View聚合EdgeView、CellView等，使用了jQuery的相关DOM操作abstractclassViewextendsBasecoat{publicreadonlycid:stringpubliccontainer:Elementprotectedselectors:Markup.Selectorspublicgetpriority(){return2}constructor(){super()this.cid=Private.uniqueId()View.views[this.cid]}=this}}Geometry提供几种图形的操作处理，包括Curve、Ellipse、Line、Point、PolyLine、Rectangle、Angle等abstractclassGeometry{abstractscale(sx:number,sy:number,origin?:Point.PointLike|Point.PointData,):这个抽象旋转(angle:number,origin?:Point.PointLike|Point.PointData,):这个抽象翻译(tx:number,ty:number):这个抽象翻译(p:Point.PointLike|Point.PointData):thisabstractequals(g:any):booleanabstractclone():GeometryabstracttoJSON():JSONObject|JSONArray抽象序列化（）：字符串valueOf（）{returnthis.toJSON()}toString(){returnJSON.stringify(this.toJSON())}}Registry提供注册机制，classRegistry,OptionalType=never,>{publicreadonly数据：KeyValue公共只读选项：Registry.Optionsconstructor(options:Registry.Options){this.options={...options}this.data=(this.options.dataasKeyValue)||复制代码{}this.register=this.register.bind(this)this.unregister=this.unregister.bind(this)}getnames(){returnObject.keys(this.data)}register(){}取消注册(){}get(){}exist(){}}Events提供事件监听（发布和订阅）机制classEvents{privatelisteners:{[name:string]:any[]}={}on(){}once(){}off(){}trigger(){}emit(){}}总结我们看到的整体，要实现一个底层的图编辑引擎需要做好整体架构设计和解构，通常无非是MVC结构的一种变体，所以我们选择Model层，View层，Cont在roller层的过程中，可以综合考虑软件工程中不同的设计方案，比如事件系统的设计，插件机制的设计等。另外，在底层渲染方面，毕竟，作为图形可视化领域的前端解决方案，SVG、HTML、Canvas等不同解决方案的选择也需要有针对性地考虑。上述可视化领域的深度和广度并不局限于前端。希望能够在这方面进行系统的学习和实践，从而在前端领域有所探索。机会，互相鼓励！！！参考X6官网Antv/X6x6源码antvisG6vsX6vsTopology源码统计分析X61.0SorryforthelateXFlow1.0:ProfessionalgrapheditingapplicationsolutionX6:DeeplypolishedandperfectAntVgrapheditingengineX6
