vmario
/
doodle3d-client
mirror of https://github.com/Doodle3D/doodle3d-client.git
0
0
Fork 0
Code Issues Releases Wiki Activity

Bounds checking in shape move/zoom (WIP). 

More specific unbinding of popup key handlers.
This commit is contained in:
Wouter R 2014-01-17 00:28:57 +01:00
parent 06ff438119
commit 1098c86dd5
2 changed files with 72 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
js/Popup.js
View File

@ -25,8 +25,8 @@ function Popup(element, mask) {
document.body.addEventListener('touchmove', prevent, false);
mask.unbind("onButtonClick");
if (escapeKeyHandler) $(document).unbind("onEscapeKey");
if (enterKeyHandler) $(document).unbind("onEnterKey");
if (escapeKeyHandler) $(document).unbind("onEscapeKey", escapeKeyHandler);
if (enterKeyHandler) $(document).unbind("onEnterKey", enterKeyHandler);
}
this.setEscapeKeyHandler = function(hnd) { escapeKeyHandler = hnd; }

80
js/Shape.js
View File

@ -84,18 +84,52 @@ function rotatePoints(points, radians, cx, cy) {
}
function moveShape(x,y) {
translatePoints(_points,x,y);
updateView();
var bounds = getBounds(_points);
var delta = clipDeltaToCanvas(x, y, bounds);
if (delta.x != 0 || delta.y != 0) {
translatePoints(_points, delta.x, delta.y);
updateView();
}
}
//TODO: bounds should be cached and marked dirty on modification of points array
//TODO: reduction of zoomValue is still not completely correct (but acceptable?)
function zoomShape(zoomValue) {
var bounds = getBounds(_points);
translatePoints(_points,-bounds.x,-bounds.y);
translatePoints(_points,-bounds.width/2,-bounds.height/2);
scalePoints(_points,zoomValue,zoomValue);
translatePoints(_points,bounds.width/2,bounds.height/2);
translatePoints(_points,bounds.x,bounds.y);
updateView();
var bounds = getBounds(_points);
var zw = bounds.width * zoomValue; zh = bounds.height * zoomValue;
var newBounds = { x: bounds.x - (zw - bounds.width) / 2, y: bounds.y - (zh - bounds.height) / 2, width: zw, height: zh };
// console.log("bounds: " + bounds.x + ", " + bounds.y + ", " + bounds.width + ", " + bounds.height);
// console.log("newBounds: " + newBounds.x + ", " + newBounds.y + ", " + newBounds.width + ", " + newBounds.height);
var ldx = Math.max(0, -newBounds.x);
var rdx = Math.min(0, canvasWidth - (newBounds.x + newBounds.width));
var tdy = Math.max(0, -newBounds.y);
var bdy = Math.min(0, canvasHeight - (newBounds.y + newBounds.height));
var delta = { x: ldx + rdx, y: tdy + bdy };
if (ldx != 0 && rdx != 0) delta.x /= 2;
if (tdy != 0 && bdy != 0) delta.y /= 2;
delta.x /= zoomValue;
delta.y /= zoomValue;
var zxMax = Math.min(zoomValue, canvasWidth / newBounds.width);
var zyMax = Math.min(zoomValue, canvasHeight / newBounds.height);
var oldZV = zoomValue;
var dir = zoomValue >= 1.0 ? 1 : 0;
zoomValue = Math.min(zxMax, zyMax);
if (dir == 1 && zoomValue < 1.0) zoomValue = 1;
console.log("orgZV, zxMax, zyMax, finZV: " + oldZV + ", " + zxMax + ", " + zyMax + ", " + zoomValue);
translatePoints(_points, delta.x, delta.y); //move points towards center as far as necessary to avoid clipping
translatePoints(_points,-bounds.x,-bounds.y);
translatePoints(_points,-bounds.width/2,-bounds.height/2);
scalePoints(_points,zoomValue,zoomValue);
translatePoints(_points,bounds.width/2,bounds.height/2);
translatePoints(_points,bounds.x,bounds.y);
updateView();
}
function rotateShape(radians) {
@ -111,4 +145,30 @@ function updateView() {
redrawDoodle();
adjustPreviewTransformation();
renderToImageDataPreview();
}
if (debugMode) {
var bounds = getBounds(_points);
drawCircleTemp(bounds.x + bounds.width / 2, bounds.y + bounds.height / 2, 5, 'red');
}
}
//returns (dx,dy) updated such that it moving bounds by that amount still fits inside canvas
//if dx,dy == 0,0, it is assumed that bounds do not fit to begin with, so a delta is returned to minimize clipping on all sides (for zooming)
function clipDeltaToCanvas(dx, dy, bounds) {
dx = Math.max(dx, -bounds.x);
dx = Math.min(dx, canvasWidth - (bounds.x + bounds.width));
dy = Math.max(dy, -bounds.y);
dy = Math.min(dy, canvasHeight - (bounds.y + bounds.height));
return { x: dx, y: dy };
}
//*draws* a circle (i.e. it is not added as points to shape)
function drawCircleTemp(x, y, r, color) {
ctx.beginPath();
ctx.lineWidth = 1;
ctx.fillStyle = color;
ctx.arc(x, y, r, 0, 2 * Math.PI, false);
ctx.fill();
ctx.stroke();
ctx.fillStyle = 'black';
}