wbo1/client-data/tools/rect/rect.js

/**
 *                        WHITEBOPHIR
 *********************************************************
 * @licstart  The following is the entire license notice for the
 *  JavaScript code in this page.
 *
 * Copyright (C) 2013  Ophir LOJKINE
 *
 *
 * The JavaScript code in this page is free software: you can
 * redistribute it and/or modify it under the terms of the GNU
 * General Public License (GNU GPL) as published by the Free Software
 * Foundation, either version 3 of the License, or (at your option)
 * any later version.  The code is distributed WITHOUT ANY WARRANTY;
 * without even the implied warranty of MERCHANTABILITY or FITNESS
 * FOR A PARTICULAR PURPOSE.  See the GNU GPL for more details.
 *
 * As additional permission under GNU GPL version 3 section 7, you
 * may distribute non-source (e.g., minimized or compacted) forms of
 * that code without the copy of the GNU GPL normally required by
 * section 4, provided you include this license notice and a URL
 * through which recipients can access the Corresponding Source.
 *
 * @licend
 */

(function(){ //Code isolation
	//Indicates the id of the shape the user is currently drawing or an empty string while the user is not drawing
	var curId = "",
		curUpdate = { //The data of the message that will be sent for every new point
				'type' : 'update',
				'id' : "",
        'x'  : 0,
				'y'  : 0,
				'x2' : 0,
				'y2' : 0
		},
		lastTime = performance.now(); //The time at which the last point was drawn

	function start (x,y, evt) {

		//Prevent the press from being interpreted by the browser
		evt.preventDefault();

		curId = Tools.generateUID("r"); //"r" for rectangle

		Tools.drawAndSend({
			'type' : 'rect',
			'id' : curId,
			'color' : Tools.getColor(),
			'size' : Tools.getSize(),
      'x' : x,
      'y' : y,
      'x2': x,
      'y2': y
		});

    curUpdate.id = curId;
    curUpdate.x = x;
    curUpdate.y = y;
	}

	function move (x,y, evt){
		/*Wait 70ms before adding any point to the currently drawing shape.
		This allows the animation to be smother*/
		if (curId !== "") {
			curUpdate['x2'] = x; curUpdate['y2'] = y;
			if (performance.now() - lastTime > 70) {
				Tools.drawAndSend(curUpdate);
				lastTime = performance.now();
			} else {
				draw(curUpdate);
			}
		}
		if (evt) evt.preventDefault();
	}

	function stop (x,y){
		//Add a last point to the shape
		move(x,y);
		curId = "";
	}

	function draw(data) {
		switch(data.type) {
			case "rect":
				createShape(data);
				break;
			case "update":
				var shape = svg.getElementById(data['id']);
				if (!shape) {
					console.error("Straight shape: Hmmm... I received a point of a rect that has not been created (%s).", data['id']);
					createShape({ //create a new shape in order not to loose the points
            "id": data['id'],
            "x": data['x2'],
            "y": data['y2']
          });
				}
        updateShape(shape, data);
				break;
			default:
				console.error("Straight shape: Draw instruction with unknown type. ", data);
				break;
		}
	}

	var svg = Tools.svg;
	function createShape(data) {
		//Creates a new shape on the canvas, or update a shape that already exists with new information
		var shape = svg.getElementById(data.id) || Tools.createSVGElement("rect");
		shape.id = data.id;
    updateShape(shape, data);
		//If some data is not provided, choose default value. The shape may be updated later
		shape.setAttribute("stroke", data.color || "black" );
		shape.setAttribute("stroke-width", data.size || 10 );
		svg.appendChild(shape);
		return shape;
	}

  function updateShape(shape, data) {
    shape.x.baseVal.value = Math.min(data['x2'], data['x']);
    shape.y.baseVal.value = Math.min(data['y2'], data['y']);
    shape.width.baseVal.value  = Math.abs(data['x2'] - data['x']);
    shape.height.baseVal.value = Math.abs(data['y2'] - data['y']);
  }

	Tools.add({ //The new tool
	 	"name" : "Rectangle",
	 	"icon" : "▢",
	 	"listeners" : {
	 		"press" : start,
	 		"move" : move,
      "release" : stop,
	 	},
	 	"draw" : draw,
	 	"mouseCursor" : "crosshair",
    "stylesheet" : "tools/rect/rect.css"
	});

})(); //End of code isolation