From: Errietta Kostala Date: Thu, 2 Jul 2015 14:53:07 +0000 (+0000) Subject: Align the svg properly for BI/RL text X-Git-Url: http://git.shadowcat.co.uk/gitweb/gitweb.cgi?a=commitdiff_plain;h=c1241fc863654d834708b2ee3af18c886fc44b33;p=scpubgit%2Fstemmaweb.git Align the svg properly for BI/RL text --- diff --git a/root/js/relationship.js b/root/js/relationship.js index 7088831..158aeb2 100644 --- a/root/js/relationship.js +++ b/root/js/relationship.js @@ -200,16 +200,42 @@ function svgEnlargementLoaded() { //This is essential to make sure zooming and panning works properly. svg_root.viewBox.baseVal.width = graph_svg.attr( 'width' ); svg_root.viewBox.baseVal.height = graph_svg.attr( 'height' ); + //Now set scale and translate so svg height is about 150px and vertically centered in viewbox. //This is just to create a nice starting enlargement. var initial_svg_height = 250; var scale = initial_svg_height/graph_svg.attr( 'height' ); var additional_translate = (graph_svg.attr( 'height' ) - initial_svg_height)/(2*scale); var transform = svg_g.getAttribute('transform'); - var translate = parseFloat( transform.match( /translate\([^\)]*\)/ )[0].split('(')[1].split(' ')[1].split(')')[0] ); - translate += additional_translate; - var transform = 'rotate(0) scale(' + scale + ') translate(4 ' + translate + ')'; - svg_g.setAttribute('transform', transform); + + var x = 4; + + var y = parseFloat( transform.match( /translate\([^\)]*\)/ )[0].split('(')[1].split(' ')[1].split(')')[0] ); + y += additional_translate; + + var transform = 'rotate(0) scale(' + scale + ')'; + svg_g.setAttribute('transform', transform); + + var keymap = document.getElementById("keymap"); + + var keymap_right = keymap.getBoundingClientRect().right; + keymap_right = svg_root.viewBox.baseVal.width - keymap_right; + + var keymap_left = keymap.getBoundingClientRect().width; + + if (text_direction == 'RL') { + // Edge of screen minus the width of the svg minus the width of the + // keymap minus the margin + + x = (scrollToEnd() - keymap_right - keymap_left - 40) / scale; + } + else if (text_direction == 'BI') { + x = placeMiddle() / scale; + y = (svg_g.getBoundingClientRect().height + 50) / scale; + } + + svg_g.setAttribute('transform', transform + ' translate(' + x + ' ' + y + ')'); + //used to calculate min and max zoom level: start_element_height = $('#__START__').children('ellipse')[0].getBBox().height; //some use of call backs to ensure succesive execution @@ -224,10 +250,6 @@ function svgEnlargementLoaded() { //initialize marquee marquee = new Marquee(); - - if (text_direction == 'RL') { - scrollToEnd(); - } } function add_relations( callback_fn ) { @@ -1070,19 +1092,26 @@ function readings_equivalent( source, target ) { function scrollToEnd() { var stateTf = svg_root_element.getCTM().inverse(); + var elem_width = Math.floor(svg_root_element.getBoundingClientRect().width); + var vbdim = svg_root.viewBox.baseVal; + + var x = vbdim.width - elem_width; + + return x; +} + +function placeMiddle() { + var stateTf = svg_root_element.getCTM().inverse(); + + var elem_width = Math.floor(svg_root_element.getBoundingClientRect().width); var vbdim = svg_root.viewBox.baseVal; - var width = Math.floor(svg_root_element.getBoundingClientRect().width) - vbdim.width; - var p = svg_root.createSVGPoint(); - p.x = width; - p.y = 0; - p = p.matrixTransform(stateTf); + var x = Math.floor((vbdim.width - elem_width) /2); - var matrix = stateTf.inverse().translate(-p.x, -100); - var s = "matrix(" + matrix.a + "," + matrix.b + "," + matrix.c + "," + matrix.d + "," + matrix.e + "," + matrix.f + ")"; - svg_root_element.setAttribute("transform", s); + return x; } + $(document).ready(function () { timer = null;