tags:

views:

38

answers:

1

I have found a script that adds mouse trail on Opera's mouse gesture. Very nice done but with one problem. It detects when the mouse button is down and starts to draw a line BUT it doesn't detect when the mouse button is released. The trail is displayed for an amount of time (1 second). Can the script be updated so that the trail is present on screen as long as the button mouse is pressed ?

The script was found in http://extendopera.org/userjs/content/gesture-tails

var GestureTrail={
//options:
  opacity:1,
  color:'#f27',


        canvas:null,
        _2d:null,
        start:null,
        cur:null,
        isdown:false,
        init:function(){

        /* create a transparent canvas element the size of
           the full window and insert it into the document */
          var canvas=document.createElement('canvas');
          canvas.height=window.innerHeight;
          canvas.width=window.innerWidth;
          document.body.appendChild(canvas);
          canvas.style="position:fixed;top:0;display:none;z-index:-999;left:0;opacity:"+this.opacity+";";
          this.canvas=canvas;

        /* grab the 2d methods for the canvas element */
          this._2d=this.canvas.getContext('2d');

    window.addEventListener("mousemove",function(e){GestureTrail.draw(e);},0);
    window.addEventListener("mouseup",function(e){GestureTrail.release();},0);
        },
        click:function(e){
          if(e.button!=2){return true;} // if not rightclick
          this.start={x:e.clientX,y:e.clientY}; // set the line start-point to the mouse position
                this._2d.strokeStyle=this.color;
          this.isdown=true;
          setTimeout(function(){GestureTrail.release();},1000); // thanks to Somh for thinking of this
          },
        draw:function(e){
          if(!this.isdown){return;} // if the mouse isn't down
          this.canvas.style.zIndex="999";    // bring the canvas element to the top 
          this.canvas.style.display="block"; /* (must be done on move - if done on mousedown
                                                it obscures text selection (HotClick) context menu) */
                this.cur={x:e.clientX,y:e.clientY}; // set point to begin drawing from
    this._2d.beginPath();
                this._2d.moveTo(this.start.x,this.start.y);
                this._2d.lineTo(this.cur.x,this.cur.y);
                this._2d.stroke();
    this.start=this.cur; /* sets the startpoint for the next mousemove to the
                             current point, otherwise the line constantly restarts
                             from the first point and you get a kind of fan-like pattern */
        },
        release:function(){
          this._2d.clearRect(0,0,window.innerWidth,window.innerHeight); // wipe the trails from the entire window
          this.isdown=false;
          this.canvas.style.zIndex="-999"; // send the canvas element back down below the page
          }
};

window.opera.addEventListener("BeforeEvent.mousedown",function(e){GestureTrail.click(e.event);},0);
window.addEventListener('DOMContentLoaded',function(){GestureTrail.init();},0);
A: 

remove:

  setTimeout(function(){GestureTrail.release();},1000); // thanks to Somh for thinking of this

thats at the end of the click function. that should be all

but that is a site for real programming questions, not for customers to look for programms to do their work without payment

M3t0r
I have tested all kind of choices. I am a developer and not a customer. I was just curious how I could adapt this script to fit my needs. Removing that line (I did before asking the question) makes the line visible all the time. So it isn't a solution.
Alin
the script doesn't work for me at all. when a gesture is done none of the events are fired. your problem could be that the mousedown and mousemove events are called, but not the mouseup and the only way out of that is the timeout. open dragonfly and see wich events are fired.
M3t0r