src/ui-mobile/whiteboard/js/thumbnail.js

   1 /***************************************************************************
   2  *   Copyright (C) 2011 by Lukáš Karas <lukas.karas@centrum.cz>            *
   3  *                                                                         *
   4  *   This program is free software; you can redistribute it and/or modify  *
   5  *   it under the terms of the GNU General Public License as published by  *
   6  *   the Free Software Foundation; either version 2 of the License, or     *
   7  *   (at your option) any later version.                                   *
   8  *                                                                         *
   9  *   This program is distributed in the hope that it will be useful,       *
  10  *   but WITHOUT ANY WARRANTY; without even the implied warranty of        *
  11  *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the         *
  12  *   GNU General Public License for more details.                          *
  13  *                                                                         *
  14  *   You should have received a copy of the GNU General Public License     *
  15  *   along with this program; if not, write to the                         *
  16  *   Free Software Foundation, Inc.,                                       *
  17  *   59 Temple Place - Suite 330, Boston, MA  02111-1307, USA.             *
  18  ***************************************************************************/
  19
  20 Thumbnail.prototype = SvgCanvas.prototype.clone();
  21
  22 Thumbnail.prototype.constructor = Thumbnail;
  23
  24 function Thumbnail(canvasWrapper, canvasWidth, canvasHeight, showOutsideCanvas, callback){
  25   // call super constructor
  26   SvgCanvas.apply(this, arguments);
  27   this.init();
  28
  29   this.viewportCenter = {
  30     x: (this.canvasWidth / 2),
  31     y: (this.canvasHeight / 2)
  32   }
  33
  34   // add viewport svg elem
  35   this.viewport = this.svgdoc.createElementNS(this.svgns, "svg");
  36   $(this.viewport).attr({
  37     id: this.idPrefix+'viewport',
  38     width: this.canvasWidth,
  39     height: this.canvasHeight,
  40     x: this.canvasWidth,
  41     y: this.canvasHeight,
  42     overflow: 'visible',
  43     xmlns: this.svgns,
  44     'viewBox': '0 0 '+this.canvasWidth+' '+this.canvasHeight+'',
  45     //"xmlns:se": this.se_ns,
  46     "xlinkns": this.xlinkns
  47   }).appendTo(this.svgroot);
  48
  49   this.viewportRect = this.addSvgElementFromJson({
  50             "element": "rect",
  51             "attr": {
  52               "id": (this.idPrefix+"viewportRect" ),
  53               "fill": "rgba(255, 255, 255, 0)",
  54               "width": this.canvasWidth,
  55               "height": this.canvasHeight,
  56               "x": 0,
  57               "y": 0,
  58               "stroke": "#22C",
  59               "stroke-width": 4,
  60               "style": "cursor: hand;"
  61             }
  62           });
  63   $( this.viewport ).append( this.viewportRect );
  64
  65   // fit to wrapper (only width)
  66   var z = this.canvasWrapper.width() / (this.canvasWidth *1.5);
  67   this.setZoom(z);
  68   this.registerViewportCallback(callback);
  69 }
  70
  71 /**
  72  * ...for register callback interface for listen of viewport changes from user
  73  * it can be registered only once
  74  */
  75 Thumbnail.prototype.registerViewportCallback = function(callback){
  76   if (this.viewportCallback)
  77     return;
  78   this.viewportCallback = callback;
  79
  80   var inst = this;
  81   // $( this.canvasWrapper ).mousedown(function(e){inst.wrapperMouseDown(e)});
  82   $( this.canvasWrapper ).mousedown(function(e){inst.mouseDown(e)});
  83   $( window ).mouseup(function(e){inst.mouseUp(e)})
  84               .mousemove(function(e){inst.mouseMove(e)});
  85 }
  86
  87 Thumbnail.prototype.mouseDown = function(e){
  88   this.mouseIsDown = true;
  89
  90   if (e.target.id != this.viewportRect.id ){
  91     console.log("thumbnail click out of viewport...");
  92     var xc = ((this.canvasWrapper.scrollLeft() / this.zoom) - this.canvasWidth) + ((e.clientX - this.canvasWrapper.offset().left ) / this.zoom);
  93     var yc = ((this.canvasWrapper.scrollTop() / this.zoom) - this.canvasHeight) + ((e.clientY - this.canvasWrapper.offset().top ) / this.zoom);
  94     this.viewportCenter.x = xc;
  95     this.viewportCenter.y = yc;
  96     this.viewportCallback.showInCenter( xc, yc);
  97   }
  98
  99   this.mouseStart = {
 100     clientX: e.clientX,
 101     clientY: e.clientY,
 102     viewportCenterX: this.viewportCenter.x,
 103     viewportCenterY: this.viewportCenter.y
 104   };
 105   e.preventDefault();
 106 }
 107
 108 Thumbnail.prototype.mouseUp = function(e){
 109   this.mouseIsDown = false;
 110   e.preventDefault();
 111 }
 112
 113 Thumbnail.prototype.mouseMove = function(e){
 114   if (this.mouseIsDown){
 115     var dx = (e.clientX - this.mouseStart.clientX) / this.zoom;
 116     var dy = (e.clientY - this.mouseStart.clientY) / this.zoom;
 117     // console.log("viewport moved "+dx+"x"+dy);
 118     this.viewportCallback.showInCenter( this.mouseStart.viewportCenterX + dx, this.mouseStart.viewportCenterY + dy);
 119   }
 120 }
 121
 122 Thumbnail.prototype.viewportChanged = function(x,y,w,h){
 123   this.viewportCenter = {
 124     x: (x+(w/2)),
 125     y: (y+(h/2))
 126   };
 127   $( this.viewportRect ).attr({
 128     "x": x,
 129     "y": y,
 130     "width": w,
 131     "height": h
 132   });
 133 }