haskal
/
asciiflow2
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Arrow tool, currently doesn't support re-sizing, also changed default dash to not be the em dash

This commit is contained in:
Lewis Hemens 2014-04-27 13:20:23 +01:00
parent e2aa7e7456
commit b9b036d1b6
7 changed files with 347 additions and 252 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/arrow-icon.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

3
index.html
View File

@ -339,6 +339,7 @@ textarea {
.box-image { background-image: url('images/box-icon.gif'); }
.line-image { background-image: url('images/line-icon.gif'); }
.arrow-image { background-image: url('images/arrow-icon.gif'); }
.freeform-image { background-image: url('images/freeform-icon.gif'); }
.erase-image { background-image: url('images/erase-icon.gif'); }
.move-image { background-image: url('images/move-icon.gif'); }
@ -488,6 +489,7 @@ textarea {
<div id="draw-tools">
<button id="box-button" class="tool active box-image"></button>
<button id="line-button" class="tool line-image"></button>
<button id="arrow-button" class="tool arrow-image"></button>
<button id="freeform-button" class="tool freeform-image"></button>
<button id="erase-button" class="tool erase-image"></button>
<button id="move-button" class="tool move-image"></button>
@ -525,6 +527,7 @@ textarea {
Mobile: <span>Drag quickly to move. Press and hold to start drawing. Pinch to zoom in/out.</span></p>
<div class="info-icon box-image"></div><div class="info-description">Draw boxes. <span>You can resize them later with the Resize tool.</span></div><br>
<div class="info-icon line-image"></div><div class="info-description">Draw lines. <span>Connect it to another line to change the orientation.</span></div><br>
<div class="info-icon arrow-image"></div><div class="info-description">Draw arrows. <span>Connect it to another line to change the orientation.</span></div><br>
<div class="info-icon freeform-image"></div><div class="info-description">Draw freehand. <span>Press a character on the keyboard and draw with it.</span></div><br>
<div class="info-icon erase-image"></div><div class="info-description">Erase. <span>Drag out an area to remove its contents from the canvas.</span></div><br>
<div class="info-icon move-image"></div><div class="info-description">Resize boxes and lines. <span>Drag a line to change its size/shape.</span></div><br>

530
js-compiled.js
View File

File diff suppressed because it is too large Load Diff

12
js-lib/common.js
View File

@ -15,10 +15,18 @@ try {
/** @const */ var MAX_GRID_HEIGHT = 600;
/** @const */ var SPECIAL_VALUE = '+';
/** @const */ var ALT_SPECIAL_VALUE = '^';
/** @const */ var SPECIAL_ARROW_LEFT = '<';
/** @const */ var SPECIAL_ARROW_UP = '^';
/** @const */ var SPECIAL_ARROW_RIGHT = '>';
/** @const */ var SPECIAL_ARROW_DOWN = 'v';
/** @const */ var SPECIAL_VALUES = ['+', '\u2012', '\u2013'];
/** @const */ var ALT_SPECIAL_VALUES = ['>', '<', '^', 'v'];
/** @const */ var ALL_SPECIAL_VALUES = SPECIAL_VALUES.concat(ALT_SPECIAL_VALUES);
/** @const */ var MAX_UNDO = 50;
/** @const */ var SPECIAL_LINE_H = '\u2013';
/** @const */ var SPECIAL_LINE_H = '\u2012';
/** @const */ var SPECIAL_LINE_V = '|';
/** @const */ var ERASE_CHAR = '\u2009';
@ -155,7 +163,7 @@ ascii.Cell.prototype.getRawValue = function() {
/** @return {boolean} */
ascii.Cell.prototype.isSpecial = function() {
return this.getRawValue() == SPECIAL_VALUE;
return ALL_SPECIAL_VALUES.indexOf(this.getRawValue()) != -1;
};
/** @return {boolean} */

5
js-lib/controller.js
View File

@ -168,7 +168,10 @@ ascii.Controller.prototype.handleDrawButton = function(id) {
this.drawFunction = new ascii.DrawBox(this.state);
}
if (id == 'line-button') {
this.drawFunction = new ascii.DrawLine(this.state);
this.drawFunction = new ascii.DrawLine(this.state, false);
}
if (id == 'arrow-button') {
this.drawFunction = new ascii.DrawLine(this.state, true);
}
if (id == 'freeform-button') {
this.drawFunction = new ascii.DrawFreeform(this.state, "X");

7
js-lib/draw.js
View File

@ -104,9 +104,11 @@ ascii.DrawBox.prototype.handleKey = function(value) {};
* @constructor
* @implements {ascii.DrawFunction}
* @param {ascii.State} state
* @param {boolean} isArrow
*/
ascii.DrawLine = function(state) {
ascii.DrawLine = function(state, isArrow) {
this.state = state;
this.isArrow = isArrow;
/** @type {ascii.Vector} */ this.startPosition = null;
};
@ -127,6 +129,9 @@ ascii.DrawLine.prototype.move = function(position) {
(endContext.left && endContext.right);
drawLine(this.state, this.startPosition, position, clockwise);
if (this.isArrow) {
this.state.drawValue(position, ALT_SPECIAL_VALUE);
}
};
/** @inheritDoc */

42
js-lib/state.js
View File

@ -95,7 +95,7 @@ ascii.State.prototype.clearDraw = function() {
ascii.State.prototype.getDrawValue = function(position) {
var cell = this.getCell(position);
var value = cell.scratchValue != null ? cell.scratchValue : cell.value;
if (value != SPECIAL_VALUE) {
if (value != SPECIAL_VALUE && value != ALT_SPECIAL_VALUE) {
return value;
}
@ -108,10 +108,41 @@ ascii.State.prototype.getDrawValue = function(position) {
if (!context.left && !context.right && context.up && context.down) {
return SPECIAL_LINE_V;
}
if (context.left && context.right && context.up && context.down) {
if (context.sum() == 4) {
return SPECIAL_LINE_H;
}
return SPECIAL_VALUE;
if (value == SPECIAL_VALUE && context.sum() == 3) {
return SPECIAL_VALUE;
}
if (value == ALT_SPECIAL_VALUE && context.sum() == 3) {
if (!context.left) {
return SPECIAL_ARROW_LEFT;
}
if (!context.up) {
return SPECIAL_ARROW_UP;
}
if (!context.down) {
return SPECIAL_ARROW_DOWN;
}
if (!context.right) {
return SPECIAL_ARROW_RIGHT;
}
}
if (value == ALT_SPECIAL_VALUE && context.sum() == 1) {
if (context.left) {
return SPECIAL_ARROW_RIGHT;
}
if (context.up) {
return SPECIAL_ARROW_DOWN;
}
if (context.down) {
return SPECIAL_ARROW_UP;
}
if (context.right) {
return SPECIAL_ARROW_LEFT;
}
}
return value;
};
/**
@ -257,9 +288,12 @@ ascii.State.prototype.fromText = function(value, offset) {
// Convert special output back to special chars.
// TODO: This is a horrible hack, need to handle multiple special chars
// correctly and preserve them through line drawing etc.
if (char == SPECIAL_LINE_H || char == SPECIAL_LINE_V) {
if (SPECIAL_VALUES.indexOf(char) != -1) {
char = SPECIAL_VALUE;
}
if (ALT_SPECIAL_VALUES.indexOf(char) != -1) {
char = ALT_SPECIAL_VALUE;
}
this.drawValue(new ascii.Vector(i, j).add(offset).subtract(middle), char);
}
}