Skip to content

Instantly share code, notes, and snippets.

@alexpeachey

alexpeachey/index.html

Created April 3, 2011 16:14
Show Gist options
  • Save alexpeachey/900529 to your computer and use it in GitHub Desktop.
Save alexpeachey/900529 to your computer and use it in GitHub Desktop.
Download ZIP
Click new and you get a square and it alerts the bbox for the square and it is correct. Click the square, you get some handles. Only the center move handle is active. Click and drag the square somewhere else. Now click new again and you get another square
Raw
index.html
<!DOCTYPE html>
<head>
<title>Raphael Bugs</title>
<link href='style.css' rel='stylesheet' type='text/css' />
</head>
<body>
<button id='newButton'>
New
</button>
<div id='paper'></div>
<script src='jquery.js' type='text/javascript'></script>
<script src='raphael.js' type='text/javascript'></script>
<script src='qb.js' type='text/javascript'></script>
</body>
Raw
qb.js
function QB(paperID,paperW,paperH) {
if (!(this instanceof arguments.callee)){
return new arguments.callee(arguments);
}
var self = this;
self.init = function() {
self.paper = Raphael(paperID,paperW,paperH);
self.pInit();
$('#newButton').click(function(){
var commands = ["M","L","L","L"];
var dataPoints = [0,0,0,0,0,0,96,0,0,0,0,0,96,96,0,0,0,0,0,96,0,0,0,0];
self.createShape(commands,dataPoints);
});
}
self.pInit = function() {
var p = "M 0 0";
for (var i = 1; i <= Raphael.snapTo(1,paperW/96); i++) {
var x1 = (i-1)*96;
var x2 = i*96;
for (var j = 1; j <= Raphael.snapTo(1,paperH/96); j++) {
var y1 = (j-1)*96;
var y2 = j*96;
p = p + " L " + x2 + " " + y1 + " L " + x2 + " " + y2 + " L " + x1 + " " + y2 + " L " + x1 + " " + y1 + " M " + x1 + " " + y2;
}
p = p + " M " + x2 + " 0 ";
}
self.grid = self.paper.path(p).attr({'fill': "lightgray"});
$(self.grid.node).click(self.clearSelections);
self.shapes = new Array();
self.shapeExtras = new Array();
self.selections = self.paper.set();
}
self.createShape = function(c,d) {
var s = self.paper.path(self.createPath(c,d)).attr({fill: "white"});
var se = new Object;
se.commands = c;
se.dataPoints = d;
se.tx = 96;
se.ty = 96;
se.sx = 1;
se.sy = 1;
se.r = 0;
s.transform(' ').translate(se.tx,se.ty).scale(se.sx,se.sy).rotate(se.r);
$(s.node).click(self.addToSelection);
self.shapes.push(s);
self.shapeExtras[s.id] = se;
var bb = s.getBBox();
alert(bb.x + ", " + bb.y + " " + bb.width + ", " + bb.height);
}
self.createPath = function(commands,data) {
var s = "";
var count = commands.length;
for (var i=0;i<count;i++) {
var c = commands[i];
switch (c) {
case "M":
s = s + c + data[6*i] + " " + data[6*i + 1];
break;
case "L":
s = s + c + data[6*i] + " " + data[6*i + 1];
break;
default:
break;
}
}
s = s + " Z";
return s;
}
self.removeHighlight = function() {
if (self.highlight != undefined) {
self.highlight.remove();
//self.handles[8].undrag();
for(var i=0,ii=self.handles.length;i<ii;i++) {
self.handles[i].remove();
}
self.handles = new Array();
}
}
self.clearSelections = function() {
self.removeHighlight();
for(var i=0,ii=self.selections.length;i<ii;i++) {
self.selections.pop();
}
self.selections.remove();
self.selections = self.paper.set();
}
self.addToSelection = function(event) {
var s = self.paper.getElementByPoint(event.pageX,event.pageY);
if(event.shiftKey) {
var exists = false;
for(var i=0,ii=self.selections.length;i<ii;i++) {
if (self.selections[i] == s) { exists = true; }
}
if (!exists) { self.selections.push(s); }
}
else {
self.clearSelections();
self.selections.push(s);
}
var bb = self.selections.getBBox();
//alert(bb.x + ", " + bb.y);
self.removeHighlight();
self.highlight = self.paper.rect(bb.x,bb.y,bb.width,bb.height).attr({stroke: "blue"}).scale(1.2,1.2);
self.handles = new Array();
bb = self.highlight.getBBox();
//alert(bb.x + ", " + bb.y + " " + bb.width + ", " + bb.height);
self.handles[0] = self.paper.circle(bb.x,bb.y,5).attr({fill: "blue"});
self.handles[1] = self.paper.circle(bb.x+(bb.width*0.5),bb.y,5).attr({fill: "blue"});
self.handles[2] = self.paper.circle(bb.x+bb.width,bb.y,5).attr({fill: "blue"});
self.handles[3] = self.paper.circle(bb.x+bb.width,bb.y+(bb.height*0.5),5).attr({fill: "blue"});
self.handles[4] = self.paper.circle(bb.x+bb.width,bb.y+bb.height,5).attr({fill: "blue"});
self.handles[5] = self.paper.circle(bb.x+(bb.width*0.5),bb.y+bb.height,5).attr({fill: "blue"});
self.handles[6] = self.paper.circle(bb.x,bb.y+bb.height,5).attr({fill: "blue"});
self.handles[7] = self.paper.circle(bb.x,bb.y+(bb.height*0.5),5).attr({fill: "blue"});
self.handles[8] = self.paper.circle(bb.x+(bb.width*0.5),bb.y+(bb.height*0.5),5).attr({fill: "blue"});
self.handles[8].drag(
function(dx,dy,x,y,event) {
for(var i=0,ii=self.selections.length;i<ii;i++) {
var s = self.selections[i];
var se = self.shapeExtras[s.id];
se.ttx = dx;
se.tty = dy;
s.transform(' ').translate(se.tx+se.ttx,se.ty+se.tty).scale(se.sx,se.sy).rotate(se.r);
}
self.highlight.transform(' ').translate(dx,dy).scale(1.2,1.2);
for(var i=0,ii=self.handles.length;i<ii;i++) {
self.handles[i].transform(' ').translate(dx,dy);
}
},
function(x,y,event) {
},
function(event) {
for(var i=0,ii=self.selections.length;i<ii;i++) {
var s = self.selections[i];
var se = self.shapeExtras[s.id];
se.tx = se.tx + se.ttx;
se.ty = se.ty + se.tty;
}
});
}
self.init();
}
$(function() {
qb = new QB('paper',858,898);
})
Raw
style.css
#paper {
width: 858px;
height: 898px;
border: 1px solid black;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment