如何将自定义节点和属性添加到AlloyUI图表生成器 [英] How to add custom nodes and properties to AlloyUI diagram builder
问题描述
我一直在尝试使用AlloyUI的图表生成器示例.
I have been trying to use diagram builder example of AlloyUI.
我需要为节点添加一些额外的自定义节点类型以及一些其他属性.我曾考虑过修改然后构建库,但这听起来像是对这项任务的过大杀伤力,而且我还问题与建筑物.
I need to add some extra custom node types as well as some additional properties for the nodes. I thought about modifying and then building the library but it sounds like an overkill for such a task and also I have had issues with building.
有一种简单的方法吗?
更新
我意识到我可以直接修改构建文件夹中的文件以摆脱构建过程.我尝试添加类似的内容:
I realized I could directly modify files in build folder to get rid of build process. I tried adding something like:
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文件结构如下:
I have my main javascript file structures as such:
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();
..
}
);
,我知道将自定义节点添加到图表中.我可以单击它并更改名称,但是不幸的是,它在图中是不可见的.而且我仍然找不到如何向节点添加新属性.有什么想法吗?
and I can know add a custom node to my diagram. I can click on it and change the name and such but unfortunately it is invisible on the diagram. Also I still couldn't find how to add new attributes to nodes. Any ideas?
推荐答案
如上所述,您到目前为止所做的一切听起来都不错.
As stated, everything you did so far sounds good.
我认为您只是缺少一些CSS才能看到您的节点.您可以在此处
I think you're only missing some CSS to be able to see your nodes. You can see it working here
查看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-作为前缀,因此在开始使用较新版本时,请记住这一点.我在此处
Note: Starting from alloy-2.0.0pr6, css classes are no longer prefixed with aui-, so keep that in mind when you start using a newer version. I've put together an example here
编辑:为了能够向编辑器面板公开新属性,自定义字段需要扩展getPropertyModel
方法,以将新属性添加到模型中.
To be able to expose new attributes to the editor panel, the custom field needs to extend the getPropertyModel
method to add the new properties to the model.
getPropertyModel: function() {
var instance = this;
var model = Y.DiagramNodeTask.superclass.getPropertyModel.apply(instance, arguments);
model.push({
attributeName: 'customAttr',
name: 'Custom Attribute'
});
return model;
}
在这里您可以找到更新的示例
这篇关于如何将自定义节点和属性添加到AlloyUI图表生成器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!