Accessing Elements inside HTML

[Isaac López Marín]

Hello,

I'm working with HTML inside jointjs elements.

I would like to know the way to access the elements of the graph inside the HTML.

For instance, I have 4 Elements with a given stroke attribute. They are inside 4 HTML objects. Each HTML object has a <select> field.

For each Element, I want to change the stroke attribute when I change the value of the <select> field.

My doubts are:

- I don't know where I have to access the Elements of the graph (updateBox, initialize...?)

- I don't know the way to access them: one by one, using a trigger, implementing some custom functions...?

I tried to find something similar in the tutorial and API sections, but without success.

The code:

....

joint.shapes.html.Element = joint.shapes.basic.Rect.extend({

    defaults: joint.util.deepSupplement({

        type: 'html.Element',

        attrs: {

            rect: { stroke: 'green', 'stroke-width': 8, 'status': 'green' }

        }

    }, joint.shapes.basic.Rect.prototype.defaults)

});

// Create a custom view for that element that displays an HTML div above it.

// -------------------------------------------------------------------------

joint.shapes.html.ElementView = joint.dia.ElementView.extend({

    template: [

               '<div class="html-element">',

                '<label></label>',

                '<span></span>',

        '<select><option>green</option><option>yellow</option><option>red</option></select>',

                '<div class="img" id="status_image_div">',

            '<img id="status_image" src="Images/circle_<%=status%>.png" alt="<%=status%>">',

           

            '</div>',

               '</div>'

           ].join(''),

    initialize: function() {

        _.bindAll(this, 'updateBox');

        

        joint.dia.ElementView.prototype.initialize.apply(this, arguments);

        //Load the associated template

        this.$box = $(_.template(this.template)());

        

      // Prevent paper from handling pointerdown.

        this.$box.find('select').on('mousedown click', function(evt) { evt.stopPropagation(); });

        // This is an example of reacting on the input change and storing the input data in the cell model.

        this.$box.find('select').on('change', _.bind(function(evt) {

            this.model.set('select', $(evt.target).val());

        }, this));

        this.$box.find('select').val(this.model.get('select'));

      // Update the box position whenever the underlying model changes.

        this.model.on('change', this.updateBox, this);

        

        //this.model.attr('rect/stroke',this.model.get('select'));

     

        

        

        // Remove the box when the model gets removed from the graph.

        //this.model.on('remove', this.removeBox, this);

        this.updateBox();

    },

    //Loads the template into the View:

    render: function() {

   

        joint.dia.ElementView.prototype.render.apply(this, arguments);

        this.paper.$el.prepend(this.$box);

        this.updateBox();

        return this;

    },

    updateBox: function() {

        // Set the position and dimension of the box so that it covers the JointJS element.

        var bbox = this.model.getBBox();

        // Example of updating the HTML with a data stored in the cell model.

        this.$box.find('label').text(this.model.get('label'));

        

        this.$box.find('img').attr("src","Images/circle_" + this.model.get('select') + ".png");

        //this.$box.find('span').text(this.model.get('select'));

        

        //This doesn't work

        //this.$box.find('html-element').attr('rect/stroke',this.model.get('select'));

        //this.$box.find('html-element').attr('status',this.model.get('select'));

        

        //This doesn´t work for more than one element.

//      el_A01.attr('rect/stroke',this.model.get('select'));

//     el_A02.attr('rect/stroke',this.model.get('select'));

//     el_A03.attr('rect/stroke',this.model.get('select'));

//     el_A04.attr('rect/stroke',this.model.get('select'));

//     el_2FC.attr('rect/stroke',this.model.get('select'));

        this.$box.css({ width: bbox.width, height: bbox.height, left: bbox.x, top: bbox.y, transform: 'rotate(' + (this.model.get('angle') || 0) + 'deg)' });

    }

});

// Create JointJS elements and add them to the graph as usual.

// -----------------------------------------------------------

var el_A01 = new joint.shapes.html.Element({ position: { x: 50, y: 50 }, size: { width: 170, height: 100 }, label: 'label_A01', status: 'green', select: 'green' });

var el_A02 = new joint.shapes.html.Element({ position: { x: 50, y: 170 }, size: { width: 170, height: 100 }, label: 'Host Turbine', status: 'green', select: 'green'});

var el_A03 = new joint.shapes.html.Element({ position: { x: 50, y: 300 }, size: { width: 170, height: 100 }, label: 'label_A03', status: 'green', select: 'green'});

var el_A04 = new joint.shapes.html.Element({ position: { x: 50, y: 420 }, size: { width: 170, height: 100 }, label: 'Host Turbine', status: 'green', select: 'green'});

var el_2FC = new joint.shapes.html.Element({ position: { x: 800, y: 160 }, size: { width: 170, height: 100 }, label: 'Switch TurbN', status: 'green', select: 'green'});

el_A02.attr({ rect: { stroke: 'red' }});

el_A04.attr({ rect: { stroke: 'yellow' }});

el_2FC.attr({ rect: { stroke: 'green'}});

.....

[Isaac López Marín]

Hello again,

finally I could access the current node in the initialize function in this way:

this.$box.find('select').on('change', _.bind(function(evt) {

            this.model.set('select', $(evt.target).val());

            //Update the stroke and status attribute of the current Element.

            this.model.attr('rect/stroke',$(evt.target).val());

            this.model.attr('status',$(evt.target).val());

        }, this));

        

        

        //this.model.on('mousedown click', function(evt) { evt.stopPropagation(); });

        //Reacts when the model selected has changed. 

        //evt is the current object.

        this.model.on('change',function(evt) {

        var links = graph.getConnectedLinks(evt,{outbound:true});

        _.each(links, function(link) {

        link.attr('.connection/stroke',evt.attr('rect/stroke'));

        //console.log(link.id);

        });

        }, this);