From cd87b8ee333d70267443136dce12b0145730c022 Mon Sep 17 00:00:00 2001 From: Marco De Donno Date: Thu, 27 Jul 2017 17:05:43 +0200 Subject: [PATCH] Add the TPS live cursor --- js/pianos4_tool_TPS.js | 120 ++++++++++++++++++++++++++--------------- js/pianos4_view.js | 72 +++++++++++++++++++++++++ 2 files changed, 150 insertions(+), 42 deletions(-) diff --git a/js/pianos4_tool_TPS.js b/js/pianos4_tool_TPS.js index 4314d80..ec45d4d 100644 --- a/js/pianos4_tool_TPS.js +++ b/js/pianos4_tool_TPS.js @@ -38,38 +38,49 @@ function Pianos4ToolTPS( params ) { return 'TPS'; } - + this.getLabel = function() { return 'TPS'; } - + this.getIcon = function() { return 'icons/TPS.png'; } - + this.bind = function( aView ) { assert( !view ); view = aView; } - + this.unbind = function() { assert( view ); view = null; } - + this.activate = function() { views = pianos.getViewsdict(); + bindTo( 'mark' ); + bindTo( 'print' ); + + update_TPS_parameters(); + log( 'TPS tool activate' ); } - + this.deactivate = function() { + views.mark.remove_Ghost_Cursor_live(); + views.print.remove_Ghost_Cursor_live(); + + unbindFrom( 'mark' ); + unbindFrom( 'print' ); + log( 'TPS tool de-activate' ); } @@ -79,31 +90,25 @@ function Pianos4ToolTPS( params ) this.onMouseUp = function( pos, target, event ) { - if( ! event.ctrlKey ) - { - if( typeof( g.be ) === "undefined" ) - updateG(); - - var viewtype = view.getType(); - var clickedView = views[ viewtype ]; - - var p = TPS_project( g[ viewtype ], pos ); - - clickedAnchor = new Pianos4TPSAnchore( viewtype, "user", pos ); - - log( pos ); - log( clickedAnchor ); - - action = new Pianos4Action_CreateAnnotation( clickedView, 'GC', clickedAnchor ); - pianos.exec( action ); - - updateAllViews(); - - // Force toggle the GC layer - pianos.toggleLayer( 'GC', true ); - - return true; - } + if( typeof( TPS_g.mark.be ) === "undefined" ) + update_TPS_parameters(); + + var viewtype = view.getType(); + var clickedView = views[ viewtype ]; + + var p = TPS_project( TPS_g[ viewtype ], pos ); + + clickedAnchor = new Pianos4TPSAnchore( viewtype, "user", pos ); + + action = new Pianos4Action_CreateAnnotation( clickedView, 'GC', clickedAnchor ); + pianos.exec( action ); + + updateAllViews(); + + // Force toggle the GC layer + pianos.toggleLayer( 'GC', true ); + + return true; } this.onMouseMove = function( pos, target, event ) @@ -119,7 +124,7 @@ function Pianos4ToolTPS( params ) var generate = $( '' ) .text( 'Generate' ) .attr( 'href', '#generate' ) - .bind( 'click', updateG ); + .bind( 'click', update_TPS_parameters ); var update = $( '' ) .text( 'Update' ) @@ -150,14 +155,45 @@ function Pianos4ToolTPS( params ) var views = null; var popup = null; var options = null; - var desactivated = false; - var g = {}; - var live = false; + var drawTimestamp = Date.now(); + var TPS_g = {}; // ------------------------------ // Private functions // ------------------------------ + var bindTo = function( to ) + { + var d3svg = d3.select('#pianos .pianos4_' + to + ' .pianos4_view_canvas'); + d3svg.on('mousemove', function() + { + onMouseMoveLive( event, views[ to ], to ); + }); + } + + var unbindFrom = function( from ) + { + d3.select( '#pianos .pianos4_' + from + ' .pianos4_view_canvas' ) + .on( 'mousemove', null ); + } + + var onMouseMoveLive = function( event, view, viewtype ) + { + if( typeof( TPS_g.mark.be ) !== "undefined" && Date.now() - drawTimestamp > 1000 / 60 ) + { + var pos = view.getCanvasPos( [ event.clientX, event.clientY ] ); + + // var viewtype = view.getType(); + var otherview = viewtype == "print" ? "mark" : "print"; + var p = TPS_project( TPS_g[ viewtype ], pos ); + + views[ otherview ].update_Ghost_Cursor_live( p ); + views[ viewtype ].remove_Ghost_Cursor_live(); + + drawTimestamp = Date.now(); + } + } + var getAllPairedMinutiae = function() { var mark = pianos.getView( 'mark' ); @@ -182,12 +218,12 @@ function Pianos4ToolTPS( params ) ref: refpos }; } - - var updateG = function() + var update_TPS_parameters = function() { + var pair = getAllPairedMinutiae(); - g.mark = TPS_generate( pair.mark, pair.ref ); - g.print = TPS_generate( pair.ref, pair.mark ); + TPS_g.mark = TPS_generate( pair.mark, pair.ref ); + TPS_g.print = TPS_generate( pair.ref, pair.mark ); } var updateView = function( from, to, fg ) @@ -206,8 +242,8 @@ function Pianos4ToolTPS( params ) var updateAllViews = function() { - updateG(); - updateView( views.mark, views.print, g.mark ); - updateView( views.print, views.mark, g.print ); + update_TPS_parameters(); + updateView( views.mark, views.print, TPS_g.mark ); + updateView( views.print, views.mark, TPS_g.print ); } } diff --git a/js/pianos4_view.js b/js/pianos4_view.js index dab274d..bcaa12e 100644 --- a/js/pianos4_view.js +++ b/js/pianos4_view.js @@ -324,6 +324,21 @@ function Pianos4View(params) nodes[ i ].remove(); } + this.add_Ghost_Cursor_live = function() + { + drawGhostCursorLive(); + } + + this.remove_Ghost_Cursor_live = function() + { + deleteGhostCursorLive(); + } + + this.update_Ghost_Cursor_live = function( GC ) + { + updateGhostCursorLive( GC ); + } + this.updateMinutiaPairing = function(minutia) { assert(minutia && minutia.id in annotations.minutiae); @@ -1510,6 +1525,33 @@ function Pianos4View(params) .attr('transform', 'rotate( -150 )'); } + var GC_live = defs.append('svg:g') + .attr('id', 'GC_live') + .attr('opacity',0.8); + + var GC_live_data = [ + { size: s2, color: '#ffffff' }, + { size: s, color: '#ff0000' }, + ] + + for( var i = 0; i < 4; i++ ) + { + for( var GC_live_data_index = 0; GC_live_data_index < GC_live_data.length; GC_live_data_index++ ) + { + var d = GC_live_data[ GC_live_data_index ]; + + GC_live.append('svg:line') + .attr('x1', 5 ) + .attr('x2', 20 ) + .attr('y1', 0 ) + .attr('y2', 0 ) + .attr('stroke-width', d.size) + .attr('stroke', d.color) + .attr('fill', d.color) + .attr('transform','rotate('+90*i+')'); + } + } + // Actual content of the SVG // Root transform node @@ -1964,6 +2006,36 @@ function Pianos4View(params) node.remove(); } + var drawGhostCursorLive = function() + { + if( layers.GC.select( "#GC_live" ).empty() ) + { + var g = getDrawableGroup( 'GC' ) + .attr( 'transform', 'translate( 10, 10 )' ) + .attr( 'id', "GC_live" ) + .attr( 'class', 'pianos4_editable pianos4_GC' ); + + var g = g.append( 'svg:use' ) + .attr( 'xlink:href', '#GC_live' ); + } + } + + var deleteGhostCursorLive = function() + { + layers.GC.select( "#GC_live" ).remove(); + } + + var updateGhostCursorLive = function( pos ) + { + var GC_live = layers.GC.select( "#GC_live" ); + + if( GC_live.empty() ) + drawGhostCursorLive(); + + GC_live + .attr( 'transform', 'translate( ' + pos[ 0 ] + ', '+ pos[ 1 ] + ' )' ); + } + var drawGhostCursor = function( GC ) { var id = "GC_" + GC.id; -- GitLab