From 7d508e2ede041ee9fe0c6935bcce04917adc71d7 Mon Sep 17 00:00:00 2001 From: Lewis Hemens Date: Sun, 12 Jan 2014 19:08:29 +0000 Subject: [PATCH] Basic version of button panel working, added line tool --- js-lib/controller.js | 23 +++++++------- js-lib/state-controller.js | 61 ++++++++++++++++++++++++++++++++++++++ root.html | 35 +++++++++++++++++++++- 3 files changed, 107 insertions(+), 12 deletions(-) diff --git a/js-lib/controller.js b/js-lib/controller.js index b1562dc..72deb70 100644 --- a/js-lib/controller.js +++ b/js-lib/controller.js @@ -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( diff --git a/js-lib/state-controller.js b/js-lib/state-controller.js index 525c96a..0ffe74d 100644 --- a/js-lib/state-controller.js +++ b/js-lib/state-controller.js @@ -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)); }; /** diff --git a/root.html b/root.html index 394acd9..127ddb9 100644 --- a/root.html +++ b/root.html @@ -4,9 +4,42 @@ asciiflow-2.0 + - + +