浏览代码

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

master
Lewis Hemens 5 年前
父节点
当前提交
b9b036d1b6
共有 7 个文件被更改,包括 347 次插入252 次删除
  1. 二进制
      images/arrow-icon.gif
  2. 3
    0
      index.html
  3. 286
    244
      js-compiled.js
  4. 10
    2
      js-lib/common.js
  5. 4
    1
      js-lib/controller.js
  6. 6
    1
      js-lib/draw.js
  7. 38
    4
      js-lib/state.js

二进制
images/arrow-icon.gif 查看文件


+ 3
- 0
index.html 查看文件

@@ -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>

+ 286
- 244
js-compiled.js
文件差异内容过多而无法显示
查看文件


+ 10
- 2
js-lib/common.js 查看文件

@@ -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} */

+ 4
- 1
js-lib/controller.js 查看文件

@@ -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");

+ 6
- 1
js-lib/draw.js 查看文件

@@ -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 */

+ 38
- 4
js-lib/state.js 查看文件

@@ -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);
}
}

正在加载...
取消
保存