Spaces:
Running
Running
File size: 5,007 Bytes
34e0b30 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 | /**
* 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 end = false,
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(),
opacity: Tools.getOpacity(),
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 !== "") {
if (rectangleTool.secondary.active) {
var dx = x - curUpdate.x;
var dy = y - curUpdate.y;
var d = Math.max(Math.abs(dx), Math.abs(dy));
x = curUpdate.x + (dx > 0 ? d : -d);
y = curUpdate.y + (dy > 0 ? d : -d);
}
curUpdate["x2"] = x;
curUpdate["y2"] = y;
if (performance.now() - lastTime > 70 || end) {
Tools.drawAndSend(curUpdate);
lastTime = performance.now();
} else {
draw(curUpdate);
}
}
if (evt) evt.preventDefault();
}
function stop(x, y) {
//Add a last point to the shape
end = true;
move(x, y);
end = false;
curId = "";
}
function draw(data) {
Tools.drawingEvent = true;
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);
shape.setAttribute(
"opacity",
Math.max(0.1, Math.min(1, data.opacity)) || 1,
);
Tools.drawingArea.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"]);
}
var rectangleTool = {
name: "Rectangle",
shortcut: "r",
listeners: {
press: start,
move: move,
release: stop,
},
secondary: {
name: "Square",
icon: "tools/rect/icon-square.svg",
active: false,
},
draw: draw,
mouseCursor: "crosshair",
icon: "tools/rect/icon.svg",
stylesheet: "tools/rect/rect.css",
};
Tools.add(rectangleTool);
})(); //End of code isolation
|