JSFiddle - React, Tailwind, and code Playground

by marclundgren

HTML

<link rel="stylesheet" href="http://cdn.alloyui.com/2.0.0pr6/aui-css/css/bootstrap.css">
<script src="http://cdn.alloyui.com/2.0.0pr6/aui/aui-min.js"></script>

CSS

.diagram-node-custom .diagram-node-content {
    background: url(http://a.deviantart.net/avatars/m/e/mercedes77.gif?5) no-repeat scroll center transparent;
}
.diagram-node-custom-icon {
    background: url(http://dribbble.s3.amazonaws.com/users/1266/screenshots/213334/emoticon-0188-nyancat.gif) no-repeat scroll center transparent;
}

JavaScript

YUI().use('aui-diagram-builder', function (A) {

        A.DiagramNodeCustom = A.Component.create({
            NAME: 'diagram-node',

            ATTRS: {
                type: {
                    value: 'custom'
                },
                name: {
                    valueFn: function () {
                        var instance = this;

                        return instance.get('type') + this.get('id');
                    }
                },
                id: {
                    valueFn: function () {
                        var instance = this;

                        return (++A.Env._uidx);
                    },
                    writeOnce: true
                }
            },

            EXTENDS: A.DiagramNodeTask,

            prototype: {
                getPropertyModel: function () {
                    var instance = this;

                    var model = A.DiagramNodeTask.superclass.getPropertyModel.apply(instance, arguments);

                    model.push({
                        attributeName: 'id',
                        name: 'ID'
                    });

                    return model;
                }
            }
        });

        A.DiagramBuilder.types['custom'] = A.DiagramNodeCustom;

        var availableFields = [{
            iconClass: 'diagram-node-start-icon',
            label: 'Start',
            type: 'start'
        }, {
            iconClass: 'diagram-node-task-icon',
            label: 'Task',
            type: 'task'
        }, {
            iconClass: 'diagram-node-custom-icon',
            label: 'Custom',
            type: 'custom'
        }];

        diagram = new A.DiagramBuilder({
            availableFields: availableFields,
            boundingBox: '#myDiagramContainer',
            fields: [{
                name: 'SameName',
                type: 'task',
                xy: [100, 100],
            }, {
                name: 'AnotherName',
                type: 'task',
                xy:...