app/static/scripts/globalScripts.js
// we want to scan the tree and build bezier paths between connected cards
we want to scan the tree and build bezier paths between connected cards
we want to scan the tree and build bezier paths between connected cards
function build_paths() {
    for( let person of PERSON_ARRAY) {
        if( person.hasCard ) {
            var child_card = person.cardHolder;
            var child_points = {
                origin_x:child_card.offsetLeft,
                origin_y:child_card.offsetTop
            }
        }
        for( let parent of person.parents ) {
            if(parent.hasCard) {
                var parent_card = parent.cardHolder;
                var parent_point = {
                    origin_x:parent_card.offsetLeft,
                    origin_y:parent_card.offsetTop
                }
                if( parent_point.origin_x < child_points.origin_x ) {
                    var new_path = document.createElementNS("http://www.w3.org/2000/svg", 'path');
                    new_path.setAttribute('class', 'svg_path');
                    var child_y_offset = 50;
                    var parent_x_offset = 100;
                    var parent_y_offset = 70;
                    var parent_target_y = parent_point.origin_y + parent_y_offset;
                    var parent_target_x = parent_point.origin_x + parent_x_offset;
                    var child_target_y = child_points.origin_y + child_y_offset;
                    var child_target_x = child_points.origin_x;
                    var m_value = 'M' + child_target_x + ',' + child_target_y + ' ';
                    var c_value = 'C' + parent_target_x + ',' + child_target_y + ' ' + parent_target_x + ',' + child_target_y + ' ' + parent_target_x + ',' + parent_target_y;
                    var data = m_value + c_value;
                    new_path.setAttributeNS(null, "d", data);
                    svg_holder.appendChild(new_path);
                } else if (parent_point.origin_x > child_points.origin_x) {     
                    var new_path = document.createElementNS("http://www.w3.org/2000/svg", 'path');
                    new_path.setAttribute('class', 'svg_path');
                    var child_x_offset = 200;
                    var child_y_offset = 50;
                    var parent_x_offset = 100;
                    var parent_y_offset = 70;
                    var parent_target_y = parent_point.origin_y + parent_y_offset;
                    var parent_target_x = parent_point.origin_x + parent_x_offset;
                    var child_target_y = child_points.origin_y + child_y_offset;
                    var child_target_x = child_points.origin_x + child_x_offset;
                    var m_value = 'M' + child_target_x + ',' + child_target_y + ' ';
                    var c_value = 'C' + parent_target_x + ',' + child_target_y + ' ' + parent_target_x + ',' + child_target_y + ' ' + parent_target_x + ',' + parent_target_y;
                    var data = m_value + c_value;
                    new_path.setAttributeNS(null, "d", data);
                    svg_holder.appendChild(new_path);
                } else {
                    var new_path = document.createElementNS("http://www.w3.org/2000/svg", 'path');
                    new_path.setAttribute('class', 'svg_path');
                    var child_x_offset = 100;
                    var child_y_offset = 20;
                    var parent_x_offset = 100;
                    var parent_y_offset = 70;
                    var parent_target_y = parent_point.origin_y + parent_y_offset;
                    var parent_target_x = parent_point.origin_x + parent_x_offset;
                    var child_target_y = child_points.origin_y + child_y_offset;
                    var child_target_x = child_points.origin_x + child_x_offset;
                    var m_value = 'M' + child_target_x + ',' + child_target_y + ' ';
                    var c_value = 'C' + parent_target_x + ',' + child_target_y + ' ' + parent_target_x + ',' + child_target_y + ' ' + parent_target_x + ',' + parent_target_y;
                    var data = m_value + c_value;
                    new_path.setAttributeNS(null, "d", data);
                    svg_holder.appendChild(new_path);
                }
            }
        }
    }
}
function build_paths ( ) { for ( let person of PERSON_ARRAY ) { if ( person . hasCard ) { var child_card = person . cardHolder ; var child_points = { origin_x : child_card . offsetLeft , origin_y : child_card . offsetTop } } for ( let parent of person . parents ) { if ( parent . hasCard ) { var parent_card = parent . cardHolder ; var parent_point = { origin_x : parent_card . offsetLeft , origin_y : parent_card . offsetTop } if ( parent_point . origin_x < child_points . origin_x ) { var new_path = document . createElementNS ( "http://www.w3.org/2000/svg" , 'path' ) ; new_path . setAttribute ( 'class' , 'svg_path' ) ; var child_y_offset = 50 ; var parent_x_offset = 100 ; var parent_y_offset = 70 ; var parent_target_y = parent_point . origin_y + parent_y_offset ; var parent_target_x = parent_point . origin_x + parent_x_offset ; var child_target_y = child_points . origin_y + child_y_offset ; var child_target_x = child_points . origin_x ; var m_value = 'M' + child_target_x + ',' + child_target_y + ' ' ; var c_value = 'C' + parent_target_x + ',' + child_target_y + ' ' + parent_target_x + ',' + child_target_y + ' ' + parent_target_x + ',' + parent_target_y ; var data = m_value + c_value ; new_path . setAttributeNS ( null , "d" , data ) ; svg_holder . appendChild ( new_path ) ; } else if ( parent_point . origin_x > child_points . origin_x ) { var new_path = document . createElementNS ( "http://www.w3.org/2000/svg" , 'path' ) ; new_path . setAttribute ( 'class' , 'svg_path' ) ; var child_x_offset = 200 ; var child_y_offset = 50 ; var parent_x_offset = 100 ; var parent_y_offset = 70 ; var parent_target_y = parent_point . origin_y + parent_y_offset ; var parent_target_x = parent_point . origin_x + parent_x_offset ; var child_target_y = child_points . origin_y + child_y_offset ; var child_target_x = child_points . origin_x + child_x_offset ; var m_value = 'M' + child_target_x + ',' + child_target_y + ' ' ; var c_value = 'C' + parent_target_x + ',' + child_target_y + ' ' + parent_target_x + ',' + child_target_y + ' ' + parent_target_x + ',' + parent_target_y ; var data = m_value + c_value ; new_path . setAttributeNS ( null , "d" , data ) ; svg_holder . appendChild ( new_path ) ; } else { var new_path = document . createElementNS ( "http://www.w3.org/2000/svg" , 'path' ) ; new_path . setAttribute ( 'class' , 'svg_path' ) ; var child_x_offset = 100 ; var child_y_offset = 20 ; var parent_x_offset = 100 ; var parent_y_offset = 70 ; var parent_target_y = parent_point . origin_y + parent_y_offset ; var parent_target_x = parent_point . origin_x + parent_x_offset ; var child_target_y = child_points . origin_y + child_y_offset ; var child_target_x = child_points . origin_x + child_x_offset ; var m_value = 'M' + child_target_x + ',' + child_target_y + ' ' ; var c_value = 'C' + parent_target_x + ',' + child_target_y + ' ' + parent_target_x + ',' + child_target_y + ' ' + parent_target_x + ',' + parent_target_y ; var data = m_value + c_value ; new_path . setAttributeNS ( null , "d" , data ) ; svg_holder . appendChild ( new_path ) ; } } } } }
we want to scan the tree and build bezier paths between connected cards
we want to scan the tree and build bezier paths between connected cards
// persons location on the screen.. // these will change  // right x, right y , etc // just build path to parents // each one will create a new path..  // parent is on the left above // create the path // offsets from the origin values created above // parent is on the right above // create the path // offsets from the origin values created above // parent is directly above! // offsets from the origin values created above