I updated my custom command to the following:
http://plnkr.co/edit/xyOBA6iCx4BPqjqBlPYN?p=preview
Instead of using ids for each table cell, I decided to place them in the first row:
<td id="row-1">1</td>
</tr>
<tr><td id="row-2">2</td></tr>
<tr><td id="row-3">3</td></tr>
I also assigned an id to the first columns:
<td id="col-1" width="34px">1</td>
<td id="col-2" width="34px">2</td>
<td id="col-3" width="34px">3</td>
The new directive is now called "draw-line," which utilizes mathematical calculations for determining the length:
var from_elem = angular.element( document.querySelector( '#' + attrs.from ) );
var to_elem = angular.element( document.querySelector( '#' + attrs.to ) );
var height_distance = from_elem[0].getBoundingClientRect().top - to_elem[0].getBoundingClientRect().top;
var width_distance = from_elem[0].getBoundingClientRect().left - to_elem[0].getBoundingClientRect().left;
var distance = Math.sqrt(
Math.pow(height_distance, 2) +
Math.pow(width_distance, 2)
);
var angle = Math.atan(height_distance / width_distance);
var my_current_border = element[0].getBoundingClientRect().width;
var required_padding = (distance - my_current_border) / 2;
element.css({
'top': to_elem[0].getBoundingClientRect().top + 'px',
'left': to_elem[0].getBoundingClientRect().left + 'px',
'border-top': '1px solid',
'position': 'absolute',
'padding-left': required_padding + 'px',
'padding-right': required_padding + 'px',
'transform': 'rotate(' + angle + 'rad)',
'transform-origin': 'left top'
});
Currently, it only functions properly for top left to top left connections, but that meets my requirements.
Is it a common practice in Angular to select elements as demonstrated below?
var from_elem = angular.element( document.querySelector( '#' + attrs.to ) );
and subsequently calculate the position like so:
var height_distance = from_elem[0].getBoundingClientRect().top - to_elem[0].getBoundingClientRect().top;