如何将自定义节点和属性添加到AlloyUI图生成器

我一直在尝试使用AlloyUI的图生成器示例 。

我需要添加一些额外的自定义节点types以及一些节点的其他属性。 我想过修改，然后build立图书馆，但这听起来像是一个矫枉过正的工作，而且我也有build设问题 。

是否有捷径可寻？

UPDATE

我意识到我可以直接修改build文件夹中的文件来摆脱构build过程。 我尝试添加如下内容：

var Lang = A.Lang, .. CUSTOM = 'custom', .. .. A.DiagramNodeCustom = A.Component.create({ NAME: DIAGRAM_NODE_NAME, ATTRS: { type: { value: CUSTOM }, }, EXTENDS: A.DiagramNodeTask }); A.DiagramBuilder.types[CUSTOM] = A.DiagramNodeCustom; 

到/build/aui-diagram-builder-impl/aui-diagram-builder-impl.js 。

我有我的主要JavaScript文件结构如下：

 var Y = YUI().use( 'aui-diagram-builder', .. function(Y) { var availableFields = [ .. { iconClass: 'aui-diagram-node-task-icon', label: 'Custom', type: 'custom' }, .. ]; diagram = new Y.DiagramBuilder( { availableFields: availableFields, boundingBox: '#myDiagramContainer', srcNode: '#myDiagramBuilder' } ).render(); .. } ); 

我可以知道添加一个自定义节点到我的图表。 我可以点击它，并更改名称等，但不幸的是它是在图中看不见的。 此外，我仍然无法find如何添加新的属性到节点。 有任何想法吗？

Answer 1

如上所述，迄今为止所做的一切听起来都不错。

我想你只是错过了一些CSS能够看到你的节点。 你可以看到它在这里工作

查看CSS面板

 .aui-diagram-node-custom .aui-diagram-node-content { /* Style of your node in the diagram */ } .aui-diagram-node-custom-icon { /* Style of your node icon in the nodes lists */ } 

注意：从alloy-2.0.0pr6开始，css类不再以aui-为前缀，所以当你开始使用更新的版本的时候记住这一点。 我在这里举了一个例子

编辑：为了能够向编辑器面板公开新的属性，自定义字段需要扩展getPropertyModel方法以将新的属性添加到模型中。

 getPropertyModel: function() { var instance = this; var model = Y.DiagramNodeTask.superclass.getPropertyModel.apply(instance, arguments); model.push({ attributeName: 'customAttr', name: 'Custom Attribute' }); return model; } 

在这里你可以find一个更新的例子

Answer 2

你所做的一切听起来都对。 我唯一能看到的是你说你修改了文件aui -diagram-builder-impl.js ，但是在创buildYUI沙箱时，你没有指定filter为raw ，默认的YUIfilter是min ，所以除非你在其他地方有一个全局的configuration，把filter设置为raw ，你的浏览器可能会加载aui-diagram-builder-impl-min.js而不是aui-diagram-builder-impl.js 。

你应该做的是这样的：

 YUI({ filter: 'raw' }).use( 'aui-diagram-builder', . . . ) 

但我强烈build议你不要直接更改构build文件。 您可以在自定义文件中创build您的DiagramNodeCustom 。 做就是了：

 YUI().use( 'aui-diagram-builder', function(A) { A.DiagramNodeCustom = A.Component.create({ NAME: DIAGRAM_NODE_NAME, ATTRS: { type: { value: CUSTOM }, }, EXTENDS: A.DiagramNodeTask }); A.DiagramBuilder.types[CUSTOM] = A.DiagramNodeCustom; // and then do your thing here } ); 

希望能帮助到你。