Basic version of button panel working, added line tool

This commit is contained in:
Lewis Hemens 2014-01-12 19:08:29 +00:00
parent 8358c33c1b
commit 7d508e2ede
3 changed files with 107 additions and 12 deletions

View File

@ -27,8 +27,7 @@ ascii.Controller = function(view, state) {
/** @type {ascii.Vector} */ this.lastMoveCell;
/** @type {number} */ this.pressTimestamp;
this.installDesktopBindings();
this.installTouchBindings();
this.installBindings();
};
/**
@ -40,7 +39,7 @@ ascii.Controller.prototype.handlePress = function(position) {
// Check to see if a drag happened in the given allowed time.
window.setTimeout(function() {
if (this.dragOrigin == null) {
if (this.dragOrigin == null && this.pressVector != null) {
this.stateController.handleDrawingPress(this.view.screenToCell(position));
this.view.dirty = true;
}
@ -110,43 +109,45 @@ ascii.Controller.prototype.handleZoom = function(delta) {
/**
* Installs input bindings for desktop devices.
*/
ascii.Controller.prototype.installDesktopBindings = function() {
ascii.Controller.prototype.installBindings = function() {
var controller = this;
$(this.view.canvas).bind('mousewheel', function(e) {
controller.handleZoom(e.originalEvent.wheelDelta);
});
$(this.view.canvas).mousedown(function(e) {
controller.handlePress(new ascii.Vector(e.clientX, e.clientY));
});
$(this.view.canvas).mouseup(function(e) {
controller.handleRelease(new ascii.Vector(e.clientX, e.clientY));
});
$(this.view.canvas).mouseleave(function(e) {
controller.handleRelease(new ascii.Vector(e.clientX, e.clientY));
});
$(this.view.canvas).mousemove(function(e) {
controller.handleMove(new ascii.Vector(e.clientX, e.clientY));
});
$(window).resize(function(e) { controller.view.resizeCanvas() });
};
/**
* Installs input bindings for touch devices.
*/
ascii.Controller.prototype.installTouchBindings = function() {
var controller = this;
$(window).resize(function(e) { controller.view.resizeCanvas() });
$(this.view.canvas).bind('touchstart', function(e) {
e.preventDefault();
controller.handlePress(new ascii.Vector(
e.originalEvent.touches[0].pageX,
e.originalEvent.touches[0].pageY));
});
$(this.view.canvas).bind('touchend', function(e) {
e.preventDefault();
// TODO: This works for now as we don't use a touchend position anywhere.
// Need to track last position from touchmove and use it here.
controller.handleRelease(new ascii.Vector(0, 0));
});
$(this.view.canvas).bind('touchmove', function(e) {
e.preventDefault();
controller.handleMove(new ascii.Vector(

View File

@ -62,6 +62,55 @@ DrawBox.prototype.draw = function() {
}
};
/**
* @constructor
* @implements {DrawFunction}
* @param {ascii.State} state
*/
function DrawLine(state) {
this.state = state;
/** @type {ascii.Vector} */ this.startPosition = null;
/** @type {ascii.Vector} */ this.endPosition = null;
}
DrawLine.prototype.start = function(position) {
this.startPosition = position;
this.endPosition = position;
this.draw();
};
DrawLine.prototype.move = function(position) {
this.endPosition = position;
this.state.clearDraw();
this.draw();
};
DrawLine.prototype.end = function(position) {
this.state.commitDraw();
};
/** Draws the currently dragged out line. */
DrawLine.prototype.draw = function() {
// TODO: Infer line direction.
var isClockwise = true;
var hX1 = Math.min(this.startPosition.x, this.endPosition.x);
var vY1 = Math.min(this.startPosition.y, this.endPosition.y);
var hX2 = Math.max(this.startPosition.x, this.endPosition.x);
var vY2 = Math.max(this.startPosition.y, this.endPosition.y);
var hY = isClockwise ? this.startPosition.y : this.endPosition.y;
var vX = isClockwise ? this.endPosition.x : this.startPosition.x;
while (hX1++ < hX2) {
this.state.drawValue(new ascii.Vector(hX1, hY), '\u2014');
}
while (vY1++ < vY2) {
this.state.drawValue(new ascii.Vector(vX, vY1), '|');
}
this.state.drawValue(new ascii.Vector(this.startPosition.x, this.startPosition.y), '+');
this.state.drawValue(new ascii.Vector(this.endPosition.x, this.endPosition.y), '+');
this.state.drawValue(new ascii.Vector(vX, hY), '+');
};
/**
* @constructor
* @implements {DrawFunction}
@ -92,6 +141,18 @@ DrawFreeform.prototype.end = function(position) {
ascii.StateController = function(state) {
/** @type {ascii.State} */ this.state = state;
/** @type {DrawFunction} */ this.drawFunction = new DrawBox(state);
$('#box-button').click(function(e) {
this.drawFunction = new DrawBox(state);
}.bind(this));
$('#line-button').click(function(e) {
this.drawFunction = new DrawLine(state);
}.bind(this));
$('#freeform-button').click(function(e) {
this.drawFunction = new DrawFreeform(state);
}.bind(this));
};
/**

View File

@ -4,9 +4,42 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<title>asciiflow-2.0</title>
<style>
#menu {
margin-left: auto;
margin-right: auto;
position: absolute;
top: 5px;
left: 0px;
right: 0px;
z-index: 100;
width: 300px;
background: #EEE;
text-align: center;
}
button {
width: 97px;
height: 30px;
text-align: center;
cursor: pointer;
}
#ascii-canvas {
position: absolute;
left: 0px;
top: 0px;
cursor: crosshair;
};
</style>
</head>
<body>
<canvas id="ascii-canvas" style="position:absolute; left:0px; top:0px;"></canvas>
<div id="menu">
<button id="box-button">Box</button>
<button id="line-button">Line</button>
<button id="freeform-button">Freeform</button>
</div>
<canvas id="ascii-canvas"></canvas>
<script src="jquery-1.9.1.min.js"></script>
<script src="js-compiled.js"></script>
</body>