这也是样本[index.html](https://github.com/spring-projects/spring-flo/blob/master/samples/spring-flo-sample/src/main/resources/static/index.html)的工作方式。将元模型服务连接到编辑器后,将基于从元模型服务获得的元模型对象填充调色板。然后,你应该能够在画布上放置节点,用链接连接节点,并移动它们。请注意,节点和链接的可视化表示可能与期望的相去甚远。实现[渲染服务](#render-service)使你能够自定义该外观和感觉(在没有提供的呈现服务的情况下,FLO 执行一些非常基本的呈现)。一个基本的呈现服务将实现[createnode()](#createnodemetadata-properties-optional)和[createlink()](#createlinksource-target-metadata-properties-optional)函数(另见[JS API 联合 DOCS](http://jointjs.com/api)),以获得调色板和画布上形状的正确外观和感觉。
对新创建的图`node`执行任何附加的初始化,当`node`已经添加到联合 JS 图中并在画布上呈现时,E。g.元素的 SVG DOM 结构是可用的。`context`参数是一个对象,其`paper`和`graph`属性适用于`node`。当 SVG DOM 附加到页面 DOM 时,在节点上执行任何类型的初始化都是有用的。例如:将字符串标签放入形状中,在形状上使用角度指示,添加 DOM 侦听器等。
#### initializeNewLink(link, context)_(可选)_
在`link`已经添加到联合 JS 图并在画布上呈现时,执行新创建的图`link`的任何附加初始化。g.元素的 SVG DOM 结构是可用的。`context`参数是一个对象,其`paper`和`graph`属性适用于`link`。当链接的 SVG DOM 附加到页面 DOM 时,在链接上执行任何类型的初始化都是有用的。例如:在形状上使用角度指令,添加 DOM 侦听器等。
#### initializeNewHandle(handle, context) _(可选)_
在`handle`已添加到联合 JS 图并在画布上呈现时,对新创建的图`handle`执行任何附加的初始化。g.元素的 SVG DOM 结构是可用的。`context`参数是一个对象,其`paper`和`graph`属性适用于`handle`。当一个句柄形状的 SVG DOM 被追加到页面 DOM 时,对它执行任何类型的初始化都是有用的。例如:将字符串标签放入形状中,在形状上使用角度指示,添加 DOM 侦听器等。
在`decoration`已添加到联合 JS 图并在画布上呈现时,对新创建的图`decoration`执行任何附加的初始化。g.元素的 SVG DOM 结构是可用的。`context`参数是一个对象,其`paper`和`graph`属性适用于`decoration`。当装饰形状的 SVG DOM 附加到页面 DOM 时,对它执行任何类型的初始化都是有用的。例如:将字符串标签放入形状中,在形状上使用角度指示,添加 DOM 侦听器等。
#### getNodeView() _(可选)_
返回`joint.dia.ElementView`的实例。它也可以是`function(element)`形式的函数,该函数接受一个元素模型,并应该返回一个负责将该模型呈现到屏幕上的对象。在正常情况下,这个功能不需要实现,由框架创建的联合 JS 视图对象应该足够了。如果不同的节点需要不同的联合 JS 视图,或者视图有一些特殊的呈现(I。e.嵌入的 HTML 元素)。参见[联合 JS 文件选项](http://jointjs.com/api#joint.dia.Paper:options)
决定是否允许或不允许源视图/端口(`cellViewS`/`portS`)和目标视图/端口(`cellViewT`/`portT`)之间的连接。`end`要么是`'source'`要么是`'target'`,它告诉我们拖动链接的哪一端。这对于定义例如从元素 A 的端口输出开始的链接是否可以指向 Elmement B 的端口引脚很有用。