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 thoug

Answer 1

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.