How to add custom nodes and properties to AlloyUI diagram builder

Question

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?

Slink

Answer 1

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

Fiction

This is great, thanks. Any chance you also know how to add attributes to nodes? – Slink

Yeah, sorry about that! I've updated one of the examples here. Basically you need to extend the getPropertyModel method to add the properties you want to expose. – Fiction

+1, this works great for me on the front-end. However, when I go to save the diagram I'm sending the data over by calling builder.toJSON(). All of the standard attributes are there, but my custom attribute (that is displaying fine on the front-end) does not appear in the JSON object. Any ideas? – Sulfaguanidine

hey @watcher in order to be printed out in the toJSON method, the attribute needs to be added to the SERIALIZABLE_ATTRS array. I've updated the example so that you can check it out. Not the best code, but you should get the idea! ;) – Fiction

Answer 2

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.

Billyebilobate

It's much cleaner to define it in a custom file, thanks, but I still have the invisibility problem and don't know how to add attributes to nodes as in here. – Slink