diff --git a/views/submission/templates/shared/tenprint.html b/views/submission/templates/shared/tenprint.html index 4733466bd5a9cb95926041a46bc1264ae105e064..3e63baec097efa518b724e601798a2ed08bff9d6 100644 --- a/views/submission/templates/shared/tenprint.html +++ b/views/submission/templates/shared/tenprint.html @@ -64,6 +64,14 @@ orientationsData[ "{{ zone[ 'fpc' ] }}" ] = {{ zone[ 'orientation' ] }}; {% endfor %} + var get_pos_relative_svg = function( event ) + { + return { + x: event.clientX - $( "#tenprint_svg" ).offset().left, + y: event.clientY - $( "#tenprint_svg" ).offset().top + }; + } + var update_quality_db = function() { var quality = $( "#file_{{ file[ 'uuid' ] }}_quality > select > option:checked" ).val(); @@ -289,13 +297,11 @@ { event.preventDefault(); - var tenprint_svg_offset = $( "#tenprint_svg" ).offset(); - var pos_x = event.clientX - tenprint_svg_offset.left; - var pos_y = event.clientY - tenprint_svg_offset.top; + var pos = get_pos_relative_svg( event ); start_click_pos = { - x: pos_x, - y: pos_y + x: pos.x, + y: pos.y } switch( event.target.nodeName ) @@ -452,12 +458,10 @@ endy: 0 }; - var tenprint_svg_offset = $( "#tenprint_svg" ).offset(); - var pos_x = event.clientX - tenprint_svg_offset.left; - var pos_y = event.clientY - tenprint_svg_offset.top; + var pos = get_pos_relative_svg( event ); - click_and_drag_value.startx = pos_x; - click_and_drag_value.starty = pos_y; + click_and_drag_value.startx = pos.x; + click_and_drag_value.starty = pos.y; $( SVG( "rect" ) ) .attr( "id", "tmp_rect" ) @@ -473,15 +477,13 @@ } var move_add_segment = function( evnet ) { - var tenprint_svg_offset = $( "#tenprint_svg" ).offset(); - var pos_x = event.clientX - tenprint_svg_offset.left; - var pos_y = event.clientY - tenprint_svg_offset.top; + var pos = get_pos_relative_svg( event ); - diff_x = pos_x - start_click_pos.x; - diff_y = pos_y - start_click_pos.y; + diff_x = pos.x - start_click_pos.x; + diff_y = pos.y - start_click_pos.y; - var a = Math.min( pos_x, start_click_pos.x ); - var b = Math.min( pos_y, start_click_pos.y ); + var a = Math.min( pos.x, start_click_pos.x ); + var b = Math.min( pos.y, start_click_pos.y ); $( "#tmp_rect" ) .attr( "x", a ) @@ -491,12 +493,10 @@ } var end_add_segment = function( event ) { - var tenprint_svg_offset = $( "#tenprint_svg" ).offset(); - var pos_x = event.clientX - tenprint_svg_offset.left; - var pos_y = event.clientY - tenprint_svg_offset.top; + var pos = get_pos_relative_svg( event ); - click_and_drag_value.endx = pos_x; - click_and_drag_value.endy = pos_y; + click_and_drag_value.endx = pos.x; + click_and_drag_value.endy = pos.y; var x = Math.min( click_and_drag_value.startx, click_and_drag_value.endx ); var y = Math.min( click_and_drag_value.starty, click_and_drag_value.endy ); @@ -549,9 +549,7 @@ { current_action = "move_segment"; - var tenprint_svg_offset = $( "#tenprint_svg" ).offset(); - var pos_x = event.clientX - tenprint_svg_offset.left; - var pos_y = event.clientY - tenprint_svg_offset.top; + var pos = get_pos_relative_svg( event ); move_target = event.target; move_target_initial_pos = { @@ -566,17 +564,15 @@ y2: parseFloat( $( move_target ).parent().children( "line" ).attr( "y2" ) ) } - click_and_drag_value.startx = pos_x; - click_and_drag_value.starty = pos_y; + click_and_drag_value.startx = pos.x; + click_and_drag_value.starty = pos.y; } var move_move_segment = function( event ) { - var tenprint_svg_offset = $( "#tenprint_svg" ).offset(); - var pos_x = event.clientX - tenprint_svg_offset.left; - var pos_y = event.clientY - tenprint_svg_offset.top; + var pos = get_pos_relative_svg( event ); - diff_x = pos_x - start_click_pos.x; - diff_y = pos_y - start_click_pos.y; + diff_x = pos.x - start_click_pos.x; + diff_y = pos.y - start_click_pos.y; $( move_target ).attr( "x", move_target_initial_pos.x + diff_x ); $( move_target ).attr( "y", move_target_initial_pos.y + diff_y ); @@ -634,28 +630,26 @@ { var cross_offset = 10; - var tenprint_svg_offset = $( "#tenprint_svg" ).offset(); - var pos_x = event.clientX - tenprint_svg_offset.left; - var pos_y = event.clientY - tenprint_svg_offset.top; + var pos = get_pos_relative_svg( event ); - $( "#line_move_n" ).attr( "x1", pos_x ); - $( "#line_move_n" ).attr( "x2", pos_x ); + $( "#line_move_n" ).attr( "x1", pos.x ); + $( "#line_move_n" ).attr( "x2", pos.x ); $( "#line_move_n" ).attr( "y1", 0 ); - $( "#line_move_n" ).attr( "y2", pos_y - cross_offset ); + $( "#line_move_n" ).attr( "y2", pos.y - cross_offset ); $( "#line_move_w" ).attr( "x1", 0 ); - $( "#line_move_w" ).attr( "x2", pos_x - cross_offset ); - $( "#line_move_w" ).attr( "y1", pos_y ); - $( "#line_move_w" ).attr( "y2", pos_y ); + $( "#line_move_w" ).attr( "x2", pos.x - cross_offset ); + $( "#line_move_w" ).attr( "y1", pos.y ); + $( "#line_move_w" ).attr( "y2", pos.y ); - $( "#line_move_e" ).attr( "x1", pos_x + cross_offset ); + $( "#line_move_e" ).attr( "x1", pos.x + cross_offset ); $( "#line_move_e" ).attr( "x2", svg_width ); - $( "#line_move_e" ).attr( "y1", pos_y ); - $( "#line_move_e" ).attr( "y2", pos_y ); + $( "#line_move_e" ).attr( "y1", pos.y ); + $( "#line_move_e" ).attr( "y2", pos.y ); - $( "#line_move_s" ).attr( "x1", pos_x ); - $( "#line_move_s" ).attr( "x2", pos_x ); - $( "#line_move_s" ).attr( "y1", pos_y + cross_offset ); + $( "#line_move_s" ).attr( "x1", pos.x ); + $( "#line_move_s" ).attr( "x2", pos.x ); + $( "#line_move_s" ).attr( "y1", pos.y + cross_offset ); $( "#line_move_s" ).attr( "y2", svg_height ); if( event.target.nodeName === "image" ) @@ -672,13 +666,11 @@ { if( move_text !== null ) { - var tenprint_svg_offset = $( "#tenprint_svg" ).offset(); - var pos_x = event.clientX - tenprint_svg_offset.left; - var pos_y = event.clientY - tenprint_svg_offset.top; + var pos = get_pos_relative_svg( event ); $( "#move_text" ) - .attr( "x", pos_x + 10 ) - .attr( "y", pos_y - 10 ) + .attr( "x", pos.x + 10 ) + .attr( "y", pos.y - 10 ) .text( "segment " + move_text + " (" + segments_position_code[ move_text ] + ")" ) } else { $( "#move_text" ) @@ -714,12 +706,10 @@ } var move_resize_segment = function( event ) { - var tenprint_svg_offset = $( "#tenprint_svg" ).offset(); - var pos_x = event.clientX - tenprint_svg_offset.left; - var pos_y = event.clientY - tenprint_svg_offset.top; + var pos = get_pos_relative_svg( event ); - diff_x = pos_x - start_click_pos.x; - diff_y = pos_y - start_click_pos.y; + diff_x = pos.x - start_click_pos.x; + diff_y = pos.y - start_click_pos.y; $( resize_target ).attr( "width", resize_target_initial_size.width + diff_x ); $( resize_target ).attr( "height", resize_target_initial_size.height + diff_y ); @@ -779,9 +769,7 @@ var dist_to_br_corner = function( event ) { - var tenprint_svg_offset = $( "#tenprint_svg" ).offset(); - var pos_x = event.clientX - tenprint_svg_offset.left; - var pos_y = event.clientY - tenprint_svg_offset.top; + var pos = get_pos_relative_svg( event ); var targetx = $( event.target ).attr( "x" ); var targety = $( event.target ).attr( "y" ); @@ -793,8 +781,8 @@ targetwidth = parseFloat( targetwidth ); targetheight = parseFloat( targetheight ); - var dx = ( targetx + targetwidth ) - pos_x; - var dy = ( targety + targetheight ) - pos_y; + var dx = ( targetx + targetwidth ) - pos.x; + var dy = ( targety + targetheight ) - pos.y; return Math.sqrt( dx * dx + dy * dy ); }