[英]How to add custom nodes and properties to AlloyUI diagram builder
I have been trying to use diagram builder example of AlloyUI. 我一直在尝试使用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.
我考虑过修改然后构建库,但这对于这样的任务来说听起来有点过分,而且我也遇到了构建问题 。
Is there an easy way to do this? 是否有捷径可寻?
UPDATE UPDATE
I realized I could directly modify files in build folder to get rid of build process. 我意识到我可以直接修改build文件夹中的文件来摆脱构建过程。 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;
to /build/aui-diagram-builder-impl/aui-diagram-builder-impl.js
. 到
/build/aui-diagram-builder-impl/aui-diagram-builder-impl.js
。
I have my main javascript file structures as such: 我有我的主要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();
..
}
);
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. 如上所述,到目前为止您所做的一切听起来都不错
I think you're only missing some CSS to be able to see your nodes. 我想你只是缺少一些CSS才能看到你的节点。 You can see it working here
你可以看到它在这里工作
Check out the CSS Panel 查看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 */
}
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. 注意:从Alloy-2.0.0pr6开始,css类不再以aui-作为前缀,因此在开始使用较新版本时请记住这一点。 I've put together an example here
我在这里举了一个例子
Edit: 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
方法以将新属性添加到模型中。
getPropertyModel: function() {
var instance = this;
var model = Y.DiagramNodeTask.superclass.getPropertyModel.apply(instance, arguments);
model.push({
attributeName: 'customAttr',
name: 'Custom Attribute'
});
return model;
}
Here you can find an updated example 在这里您可以找到更新的示例
Everything you did sounds right. 你所做的一切听起来都是对的。 The only thing I can see is that you said you modified the file aui- diagram-builder-impl.js , but when creating the YUI sandbox, you're not specifying the filter to raw and the default YUI filter is min , so unless you have a global config elsewhere setting the filter to raw , your browser is probably loading aui-diagram-builder-impl-min.js instead of aui-diagram-builder-impl.js .
我唯一能看到的是你说你修改了文件aui- diagram-builder-impl.js ,但是在创建YUI沙箱时,你没有指定过滤器为raw ,默认的YUI过滤器是min ,所以除非你有一个全局配置将过滤器设置为raw ,你的浏览器可能正在加载aui-diagram-builder-impl-min.js而不是aui-diagram-builder-impl.js 。
What you should do is something like: 你应该做的是:
YUI({ filter: 'raw' }).use(
'aui-diagram-builder',
.
.
.
)
But I highly recommend you to not change the build files directly. 但我强烈建议您不要直接更改构建文件。 You can create your DiagramNodeCustom in your custom file.
您可以在自定义文件中创建DiagramNodeCustom 。 Just do:
做就是了:
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
}
);
Hope it helps. 希望能帮助到你。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.