JSFiddle - React, Tailwind, and code Playground

by jbalsas

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.0/aui/aui.js"></script>
<button id="myButton">toJSON</button>
<div id="myDiagramContainer">
    <div id="myDiagramBuilder" width=100></div>
</div>

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

var Y = YUI({filter: 'raw'}).use(
    'aui-diagram-builder',

function (Y) {

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

        ATTRS: {
            type: {
                value: 'custom'
            },
            customAttr: {
                validator: Y.Lang.isString,
                value: 'A Custom default'
            }
        },

        EXTENDS: Y.DiagramNodeTask,

        prototype: {
            initializer: function() {
                var instance = this;
                
                this.SERIALIZABLE_ATTRS.push('customAttr');
            },
            
            getPropertyModel: function () {
                var instance = this;

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

                model.push({
                    attributeName: 'customAttr',
                    name: 'Custom Attribute'
                });

                return model;
            }
        }
    });

    Y.DiagramBuilder.types['custom'] = Y.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'
    }, {
        iconClass: 'diagram-node-end-icon',
        label: 'End',
        type: 'end'
    }];

    diagram = new Y.DiagramBuilder({
        availableFields: availableFields,
        boundingBox: '#myDiagramContainer',
        srcNode: '#myDiagramBuilder'
    }).render();
    
    var CustomConnector = function() {
    };
    
    CustomConnector.ATTRS = {
        testAttr: {
            valueFn: function() {
                return 'test attr instance value';
            }
        }
    };
    
    CustomConnector.prototype.initializer = function() {
        var instance = this;

       ...