Dynamically changing Parent Element height

[Aidan Reel]

Hi

How should I structure my markup to support automatic re-sizing of a parent element as child elements gets added?

 I am using the Discrete Event demo as my starting point. 

    markup: '<g class="rotatable"><g class="scalable"><rect/></g><text class="label"/><g class="inPorts"/><g class="outPorts"/></g>',

    portMarkup: '<g class="port<%= id %>"><circle/><text/></g>',

Instead of keeping the rect height static and uniformly adding the inPorts, I want the rect height to grow to accommodate any number of inPorts.

 

This has been my approach inside the View's render function :

Render the inPorts as normal, (call list addPorts with list of inPorts)

get the bbox of the <g> wrapping all inPorts, now that they have been rendered

change the rect’s height and width, getting a reference from this.model.get('attrs')

However the rect is inside a scalable group, and when I inspect the elements I can see that scale has been set as follows:

<g class=​"scalable" id=​"v_18" transform=​"scale(0.9333333333333333,0.72)​">​

This means that the rect only covers 93% of the inPort’s height and 72% of the inPorts width.

Feels like my approach is wrong.

Aidan

[Roman Bruckner]

Hi Aidan,

you don't have to change that markup at all.

Possible approach could be to resize whole model instead of changing rect's size. Elements (our rect) inside the scalable group are stretched to the size defined in the model.

I would also change ports positioning from relative to absolute. Provided DEVS demo position its ports relatively to rect's height (e.g for 3 ports: 1. 25%, 2. 50% and 3. 75%). So if you were getting your bbox after the view's update, height of the <g> wrapping all inPorts/outPorts was always smaller then size of the rect, no matter how many ports you've added.

View's render method could then look like this:

    addPorts: function(ports, selector) {

        var $ports = this.$(selector).empty();

        var attributes = this.portsAttrs[selector] = {};

        if (!ports || ports.length == 0) return;

        var portTemplate = _.template(this.model.portMarkup);

        var portCount = ports.length;

        _.each(ports, function(portName, index) {

            var portClass = 'port' + index;

            var portSelector = selector + '>.' + portClass;

            attributes[portSelector + '>text'] = { text: portName };

            attributes[portSelector] = { ref: 'rect', 'ref-y': index * 40 + 20};

            if (selector === '.outPorts') { attributes[portSelector]['ref-dx'] = 0; }

            $ports.append(V(portTemplate({ id: index })).node);

        });

        this.update(this.model, _.extend(attributes, this.model.get('attrs')));

var inPortsBBox = this.$el.find('.inPorts')[0].getBBox();

var outPortsBBox = this.$el.find('.outPorts')[0].getBBox();

this.model.resize(this.model.get('size').width, Math.max(inPortsBBox.height, outPortsBBox.height) + 20);

    },

Hope it helps.

Regards

Roman

[Aidan Reel]

Hi Roman,

Thanks for the detailed reply.

I restructured the model and rewrote the view as you described and it all worked.

Interestingly my approach had a subtle bug whereby saving the graph to json, POSTing it to a server, GETting it back, parsing the json and rerendering the graph, caused the height rect to increase.

Regards

Aidan

[Roman Bruckner]

Hi Aidan,

I've tried what you described and you are right. There is a bug causing the rect height to increase after reload graph from JSON.

Can you please confirm the following:

1. The rect height is increased by 1px (or a constant size).

2. It is only happening in webkit-based browsers.

By a first look I can say it has something to do with displaying the port labels and their impact on the port height. We will look into it at some point very soon.

For the time being you can work it around by:

1. adjust the port text position (e.g:  '.outPorts text': { dy: -5 }) so it doesn't affect the port height.

OR

2. hide the the port text before you start getting the bbox in method `addPorts`.

  portLabels = $('.inPorts text, .outPorts text').hide();

  var inPortsBBox = this.$el.find('.inPorts')[0].getBBox();

  var outPortsBBox = this.$el.find('.outPorts')[0].getBBox();

  portLabels.show()

Please let me know if that was the case.

Thank you

Regards

Roman

2013/9/12 Aidan Reel <aida...@gmail.com>

--
 
---
You received this message because you are subscribed to the Google Groups "JointJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jointjs+u...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[Aidan Reel]

Hi Roman,

1. Yes, it was by a constant amount, didn't take exact measure, just eye balling the growth cover an underlying node.

2. At the moment we are focusing on chrome and IE but since the JointJS had outstanding issues with IE (still have to test latest release on IE) we were not testing IE either, so not sure about other non web-kit browsers.

Just to confirm, this only happens if the <g class="scalable"> is removed from the markup. Given your previous answer (which retains that markup) this error no longer occurs.

Aidan