Basic version of button panel working, added line tool
This commit is contained in:
parent
8358c33c1b
commit
7d508e2ede
|
@ -27,8 +27,7 @@ ascii.Controller = function(view, state) {
|
||||||
/** @type {ascii.Vector} */ this.lastMoveCell;
|
/** @type {ascii.Vector} */ this.lastMoveCell;
|
||||||
/** @type {number} */ this.pressTimestamp;
|
/** @type {number} */ this.pressTimestamp;
|
||||||
|
|
||||||
this.installDesktopBindings();
|
this.installBindings();
|
||||||
this.installTouchBindings();
|
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -40,7 +39,7 @@ ascii.Controller.prototype.handlePress = function(position) {
|
||||||
|
|
||||||
// Check to see if a drag happened in the given allowed time.
|
// Check to see if a drag happened in the given allowed time.
|
||||||
window.setTimeout(function() {
|
window.setTimeout(function() {
|
||||||
if (this.dragOrigin == null) {
|
if (this.dragOrigin == null && this.pressVector != null) {
|
||||||
this.stateController.handleDrawingPress(this.view.screenToCell(position));
|
this.stateController.handleDrawingPress(this.view.screenToCell(position));
|
||||||
this.view.dirty = true;
|
this.view.dirty = true;
|
||||||
}
|
}
|
||||||
|
@ -110,43 +109,45 @@ ascii.Controller.prototype.handleZoom = function(delta) {
|
||||||
/**
|
/**
|
||||||
* Installs input bindings for desktop devices.
|
* Installs input bindings for desktop devices.
|
||||||
*/
|
*/
|
||||||
ascii.Controller.prototype.installDesktopBindings = function() {
|
ascii.Controller.prototype.installBindings = function() {
|
||||||
var controller = this;
|
var controller = this;
|
||||||
|
|
||||||
$(this.view.canvas).bind('mousewheel', function(e) {
|
$(this.view.canvas).bind('mousewheel', function(e) {
|
||||||
controller.handleZoom(e.originalEvent.wheelDelta);
|
controller.handleZoom(e.originalEvent.wheelDelta);
|
||||||
});
|
});
|
||||||
|
|
||||||
$(this.view.canvas).mousedown(function(e) {
|
$(this.view.canvas).mousedown(function(e) {
|
||||||
controller.handlePress(new ascii.Vector(e.clientX, e.clientY));
|
controller.handlePress(new ascii.Vector(e.clientX, e.clientY));
|
||||||
});
|
});
|
||||||
|
|
||||||
$(this.view.canvas).mouseup(function(e) {
|
$(this.view.canvas).mouseup(function(e) {
|
||||||
controller.handleRelease(new ascii.Vector(e.clientX, e.clientY));
|
controller.handleRelease(new ascii.Vector(e.clientX, e.clientY));
|
||||||
});
|
});
|
||||||
|
|
||||||
$(this.view.canvas).mouseleave(function(e) {
|
$(this.view.canvas).mouseleave(function(e) {
|
||||||
controller.handleRelease(new ascii.Vector(e.clientX, e.clientY));
|
controller.handleRelease(new ascii.Vector(e.clientX, e.clientY));
|
||||||
});
|
});
|
||||||
|
|
||||||
$(this.view.canvas).mousemove(function(e) {
|
$(this.view.canvas).mousemove(function(e) {
|
||||||
controller.handleMove(new ascii.Vector(e.clientX, e.clientY));
|
controller.handleMove(new ascii.Vector(e.clientX, e.clientY));
|
||||||
});
|
});
|
||||||
$(window).resize(function(e) { controller.view.resizeCanvas() });
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
$(window).resize(function(e) { controller.view.resizeCanvas() });
|
||||||
* Installs input bindings for touch devices.
|
|
||||||
*/
|
|
||||||
ascii.Controller.prototype.installTouchBindings = function() {
|
|
||||||
var controller = this;
|
|
||||||
$(this.view.canvas).bind('touchstart', function(e) {
|
$(this.view.canvas).bind('touchstart', function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
controller.handlePress(new ascii.Vector(
|
controller.handlePress(new ascii.Vector(
|
||||||
e.originalEvent.touches[0].pageX,
|
e.originalEvent.touches[0].pageX,
|
||||||
e.originalEvent.touches[0].pageY));
|
e.originalEvent.touches[0].pageY));
|
||||||
});
|
});
|
||||||
|
|
||||||
$(this.view.canvas).bind('touchend', function(e) {
|
$(this.view.canvas).bind('touchend', function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
// TODO: This works for now as we don't use a touchend position anywhere.
|
// 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.
|
// Need to track last position from touchmove and use it here.
|
||||||
controller.handleRelease(new ascii.Vector(0, 0));
|
controller.handleRelease(new ascii.Vector(0, 0));
|
||||||
});
|
});
|
||||||
|
|
||||||
$(this.view.canvas).bind('touchmove', function(e) {
|
$(this.view.canvas).bind('touchmove', function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
controller.handleMove(new ascii.Vector(
|
controller.handleMove(new ascii.Vector(
|
||||||
|
|
|
@ -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
|
* @constructor
|
||||||
* @implements {DrawFunction}
|
* @implements {DrawFunction}
|
||||||
|
@ -92,6 +141,18 @@ DrawFreeform.prototype.end = function(position) {
|
||||||
ascii.StateController = function(state) {
|
ascii.StateController = function(state) {
|
||||||
/** @type {ascii.State} */ this.state = state;
|
/** @type {ascii.State} */ this.state = state;
|
||||||
/** @type {DrawFunction} */ this.drawFunction = new DrawBox(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));
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
35
root.html
35
root.html
|
@ -4,9 +4,42 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
|
||||||
<title>asciiflow-2.0</title>
|
<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>
|
</head>
|
||||||
<body>
|
<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="jquery-1.9.1.min.js"></script>
|
||||||
<script src="js-compiled.js"></script>
|
<script src="js-compiled.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
Loading…
Reference in New Issue