src/ui-mobile/whiteboard/js/maknetowb.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 function MaknetoWhiteboard(workArea){
  21   this.workArea = workArea;
  22   this.mouseIsDown = false;
  23   this.connector = connector;
  24 }
  25
  26 MaknetoWhiteboard.prototype.init = function(weigth, height){
  27
  28   this.zoom = 1;
  29   this.maxZoom = 5;
  30   this.minZoom = 0.5; // FIXME: compute this
  31   if (this.thumb){
  32     this.thumb.destroy();
  33   }
  34   if (this.whiteboard){
  35     this.whiteboard.destroy();
  36   }
  37
  38   //this.thumb      = new Thumbnail( $(this.thumbArea), weigth, height, false, this);
  39   try{
  40     this.whiteboard = new Whiteboard($(this.workArea) , weigth, height, true, this, this.connector.getUID());
  41   }catch(e){
  42     console.error("error while initializing svg whiteboard: "+JSON.stringify(e));
  43   }
  44
  45 /*
  46   this.thumb.registerViewportCallback(this);
  47
  48   var inst = this;
  49   this.workArea.scroll(function(){
  50     inst.viewportChanged();
  51   });
  52
  53   // initial update of thumbnail viewport
  54   this.viewportChanged();
  55   */
  56 }
  57
  58 MaknetoWhiteboard.prototype.zoomIn = function(){
  59   var z = this.zoom + 0.1;
  60   if (z > this.maxZoom)
  61     return;
  62   this.setZoom(z)
  63 }
  64
  65 MaknetoWhiteboard.prototype.zoomOut = function(){
  66   var z = this.zoom - 0.1;
  67   if (z < this.minZoom)
  68     return;
  69   this.setZoom(z)
  70 }
  71
  72 MaknetoWhiteboard.prototype.setZoom = function(z){
  73   //$('#zoom').html( Math.round(z*10) / 10);
  74
  75   /*
  76   var x = (this.workArea.scrollLeft() + ((this.workArea.width() ) / 2) )/ this.zoom;
  77   var y = (this.workArea.scrollTop() + ((this.workArea.height() ) / 2) )/ this.zoom;
  78   console.log("zoom center "+x+"x"+y+" ("+this.zoom+")");
  79   */
  80
  81   this.zoom = z;
  82   this.whiteboard.setZoom(this.zoom);
  83 //this.whiteboard.showInCenter(x*this.zoom, y*this.zoom);
  84 }
  85
  86 /**
  87  * calback function from thumbnail... mouse action on thumnail can change viewport
  88  */
  89 MaknetoWhiteboard.prototype.showInCenter = function(x,y){
  90   this.whiteboard.showInCenter(x, y);
  91 }
  92
  93 /**
  94  * function registered on canvas scrool events. it inform thumnail that viewport was changed
  95  */
  96 MaknetoWhiteboard.prototype.viewportChanged = function(){
  97   /*
  98   var x = (this.workArea.scrollLeft() / this.zoom) - this.whiteboard.canvasWidth;
  99   var y = (this.workArea.scrollTop()  / this.zoom) - this.whiteboard.canvasHeight;
 100   var w = this.workArea.width()  / this.zoom;
 101   var h = this.workArea.height() / this.zoom;
 102
 103   this.thumb.viewportChanged(x,y,w,h);
 104   */
 105 }
 106
 107
 108 MaknetoWhiteboard.prototype.buildNewXmlTag = function(wb){
 109   var str = "<"+wb.element+" ";
 110   for (var attr in wb.attr){
 111     if (typeof wb.attr[attr] == 'function')
 112       continue; // workaround for Object.clone method
 113
 114     str += attr+"='"+wb.attr[attr]+"' ";
 115   }
 116   str +=" />";
 117   return str;
 118 }
 119 MaknetoWhiteboard.prototype.buildConfigureXmlTag = function(wb){
 120   var str = "";
 121   for (var i in wb.attr){
 122     var attr = wb.attr[i];
 123     if (attr == undefined || attr.value === undefined)
 124       continue;
 125     str += "<attribute name='"+attr.name+"'>"+attr.value+"</attribute>\n";
 126   }
 127   return str;
 128 }
 129 /**
 130   * convert json data from own html whiteboard to SVG Whiteboardind XMPP extension XML
 131   */
 132 MaknetoWhiteboard.prototype.buildXmlMessage = function(msg){
 133   var xmlMessage = "<wb xmlns='http://jabber.org/protocol/svgwb'>\n";
 134   if (msg.wb.type == "new"){
 135     xmlMessage += "<new id='"+msg.wb.id+"' version='"+msg.wb.version+"' index='"+msg.wb.index+"'>\n";
 136     xmlMessage += this.buildNewXmlTag(msg.wb);
 137     xmlMessage += "\n</new>";
 138   }
 139   if (msg.wb.type == "configure"){
 140     xmlMessage += "<configure target='"+msg.wb.target+"' version='"+msg.wb.version+"'>\n";
 141     xmlMessage += this.buildConfigureXmlTag(msg.wb);
 142     xmlMessage += "\n</configure>";
 143   }
 144   xmlMessage += "\n</wb>";
 145   return xmlMessage;
 146 }
 147
 148 MaknetoWhiteboard.prototype.processLocalCommand = function(drawCommand){
 149   var msg = {
 150     type : "groupchat",
 151     from : this.connector.getUID(),
 152     to : this.room,
 153     wb: drawCommand
 154   };
 155   try{
 156     // TODO: colect more events to one big message
 157     if (this.connector.sendMessage( this.buildXmlMessage(msg))){
 158       this.processCommand(drawCommand);
 159     }
 160   }catch(e){
 161     console.error("error while building, sending or processing command "+JSON.stringify(e));
 162   }
 163 }
 164
 165 MaknetoWhiteboard.prototype.processMessage = function(message){
 166   if (message.type != "groupchat" || message.to != this.room || (!message.wb))
 167     return;
 168   this.processCommand(message.wb);
 169 }
 170
 171 MaknetoWhiteboard.prototype.processCommand = function(drawCommand){
 172   //console.log(" sending command..."+JSON.stringify(drawCommand));
 173   try{
 174     this.whiteboard.processCommand(drawCommand);
 175   }catch(e){
 176     console.error("error processing command "+JSON.stringify(e));
 177   }
 178 //console.log("command: "+JSON.stringify(drawCommand));
 179 //this.thumb.processCommand(drawCommand);
 180 }
 181
 182 MaknetoWhiteboard.prototype.handleNewCommands = function(newElems){
 183
 184   for (var i =0; i < newElems.length; i++){
 185
 186     var elem = newElems[i];
 187
 188     if (!elem.hasChildNodes())
 189       continue;
 190     var child = elem.childNodes[0];
 191     for (var chi = 0; chi < elem.childNodes.length; chi++){
 192       if (child.nodeName !== "#text")
 193         break;
 194       child = elem.childNodes[chi];
 195     }
 196     if (child.nodeName === "#text")
 197       continue;
 198     //console.log("child name "+child.nodeName+" ");
 199     //elem.chi
 200
 201     var attributes = {};
 202     for (var ati = 0; ati< child.attributes.length; ati++){
 203       if (child.attributes[ati].nodeName !== undefined){
 204         //console.log("   "+child.nodeName+" "+ child.attributes[ati].nodeName+" = "+child.attributes[ati].nodeValue);
 205         attributes[ child.attributes[ati].nodeName ] = child.attributes[ati].nodeValue;
 206       }
 207     }
 208
 209     this.processCommand({
 210       type: "new",
 211       id: elem.getAttribute ("id"),
 212       index: elem.getAttribute ("index"),
 213       element: child.nodeName, // FIXME ?
 214       version: elem.getAttribute ("version"),
 215       attr: attributes
 216     });
 217   }
 218
 219 }
 220
 221 MaknetoWhiteboard.prototype.handleConfigureCommands = function(configureElems){
 222   for (var i=0; i< configureElems.length; i++){
 223     //console.log("iterate elems...");
 224     var elem = configureElems[i];
 225     var target = elem.getAttribute("target");
 226     var version = elem.getAttribute("version");
 227     //console.log(" configure "+target);
 228
 229     var attributes = elem.getElementsByTagName ("attribute");
 230     var jsonAttrs = [];
 231     for (var ai = 0; ai< attributes.length; ai++){
 232       var attribute = attributes[ai];
 233       var name = attribute.getAttribute("name");
 234       var value = attribute.hasChildNodes()? attribute.childNodes[0].nodeValue :"";
 235       //console.log(" configure "+target+" "+name+"="+value);
 236       jsonAttrs[ai] = {
 237         name: name,
 238         value: value
 239       };
 240     }
 241     var command = {
 242       type: "configure",
 243       target: target,
 244       version: version,
 245       attr: jsonAttrs
 246     };
 247     this.processCommand(command);
 248   }
 249 }
 250
 251 MaknetoWhiteboard.prototype.processXmlCommand = function(message){
 252   //console.log("xml message ");
 253
 254   try{
 255     var doc = Utils.text2xml(message);
 256
 257     var newElems = doc.getElementsByTagName ("new");
 258     this.handleNewCommands(newElems);
 259
 260     var configureElems = doc.getElementsByTagName("configure");
 261     this.handleConfigureCommands(configureElems);
 262   //console.log("...done");
 263
 264   }catch(e){
 265     console.error("PARSE ERROR");
 266   }
 267 }
 268
 269 /**
 270  * callback method. notify that outgoing message was successfuly sent
 271  */
 272 MaknetoWhiteboard.prototype.messageSent= function(message){
 273   //console.log("sent");
 274 }
 275 MaknetoWhiteboard.prototype.setForegroundColor = function(color){
 276   this.whiteboard.foregroundColor = color;
 277 }