From e93a9a1a86d530254abd5532ff66d93630496d03 Mon Sep 17 00:00:00 2001 From: Marco De Donno Date: Thu, 21 May 2020 19:43:02 +0200 Subject: [PATCH] Rectoring the grouping of objects for the ruler --- js/backend.admin.js | 74 ++++++++++++++++++++++++--------------------- 1 file changed, 39 insertions(+), 35 deletions(-) diff --git a/js/backend.admin.js b/js/backend.admin.js index d70f270..cd94c54 100644 --- a/js/backend.admin.js +++ b/js/backend.admin.js @@ -1891,8 +1891,8 @@ Pianos4Backend.ImageManager = function( parent, params ) function( svg ){ var imgg = svg.group( { "id": "gimg" } ); svg.image( imgg, 0, 0, "100%", "100%", "?action=get_image&id=" + img.id ); - var g = svg.group( { "id": "gline", "stroke": 'red', "strokeWidth": 2 } ); - svg.line( g, 0, 0, 0, 0 ); + var lineg = svg.group( imgg, { "id": "gline", "stroke": 'red', "strokeWidth": 2 } ); + svg.line( lineg, 0, 0, 0, 0 ); var gr = svg.group( { "id": "gruler", "transform-origin": "0 0" } ); svg.rect( gr, -0.5 * ruler_size, 0, ruler_size, 3, { fill: "#ffffff" } ); @@ -1954,39 +1954,43 @@ Pianos4Backend.ImageManager = function( parent, params ) $( "#imagesvgdiv > svg" ) .attr( "width", img.width ) .attr( "height", img.height ) - .on( "mousedown", function( event ){ - is_mouse_dragging = true; - - startx = event.originalEvent.offsetX; - starty = event.originalEvent.offsetY; - - $( "#gline > line" ).attr( "x1", startx ); - $( "#gline > line" ).attr( "y1", starty ); - } ) - .on( "mouseup", function(){ - is_mouse_dragging = false; - draw_ruler(); - } ) - .on( "mousewheel", function( event ){ - var delta = Math.sign( event.originalEvent.wheelDelta ); - - if( event.shiftKey ) - { - ruler_offset += 0.05 * delta; - } else { - suspected_resolution += 1 * delta; - } - draw_ruler(); - } ) - .on( "mousemove", function( event ){ - if( is_mouse_dragging ) - { - endx = event.originalEvent.offsetX; - endy = event.originalEvent.offsetY; - $( "#gline > line" ).attr( "x2", endx ); - $( "#gline > line" ).attr( "y2", endy ); - } - } ) + + $( "#gimg" ) + .on( "mousedown", function( event ){ + is_mouse_dragging = true; + + startx = event.originalEvent.offsetX; + starty = event.originalEvent.offsetY; + + $( "#gline > line" ).attr( "x1", startx ); + $( "#gline > line" ).attr( "y1", starty ); + } ) + .on( "mouseup", function(){ + is_mouse_dragging = false; + draw_ruler(); + } ); + + $( "#imagesvgdiv > svg" ) + .on( "mousewheel", function( event ){ + var delta = Math.sign( event.originalEvent.wheelDelta ); + + if( event.shiftKey ) + { + ruler_offset += 0.05 * delta; + } else { + suspected_resolution += 1 * delta; + } + draw_ruler(); + } ) + .on( "mousemove", function( event ){ + if( is_mouse_dragging ) + { + endx = event.originalEvent.offsetX; + endy = event.originalEvent.offsetY; + $( "#gline > line" ).attr( "x2", endx ); + $( "#gline > line" ).attr( "y2", endy ); + } + } ) }, 0 ); var metadata = $( '
' ) -- GitLab