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.
Is there an easy way to do this?
UPDATE
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;
to /build/aui-diagram-builder-impl/aui-diagram-builder-impl.js
.
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.
I think you're only missing some CSS to be able to see your nodes. You can see it working here
Check out the CSS Panel
.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. 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: 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.
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. 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.