Browse Source

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

master
Lewis Hemens 5 years ago
parent
commit
b9b036d1b6
7 changed files with 347 additions and 252 deletions
  1. BIN
      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

BIN
images/arrow-icon.gif View File


+ 3
- 0
index.html View File

@@ -339,6 +339,7 @@ textarea {
339 339
 
340 340
 .box-image { background-image: url('images/box-icon.gif'); }
341 341
 .line-image { background-image: url('images/line-icon.gif'); }
342
+.arrow-image { background-image: url('images/arrow-icon.gif'); }
342 343
 .freeform-image { background-image: url('images/freeform-icon.gif'); }
343 344
 .erase-image { background-image: url('images/erase-icon.gif'); }
344 345
 .move-image { background-image: url('images/move-icon.gif'); }
@@ -488,6 +489,7 @@ textarea {
488 489
 <div id="draw-tools">
489 490
   <button id="box-button" class="tool active box-image"></button>
490 491
   <button id="line-button" class="tool line-image"></button>
492
+  <button id="arrow-button" class="tool arrow-image"></button>
491 493
   <button id="freeform-button" class="tool freeform-image"></button>
492 494
   <button id="erase-button" class="tool erase-image"></button>
493 495
   <button id="move-button" class="tool move-image"></button>
@@ -525,6 +527,7 @@ textarea {
525 527
         Mobile: <span>Drag quickly to move. Press and hold to start drawing. Pinch to zoom in/out.</span></p>
526 528
         <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>
527 529
         <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>
530
+        <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>
528 531
         <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>
529 532
         <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>
530 533
         <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
File diff suppressed because it is too large
View File


+ 10
- 2
js-lib/common.js View File

@@ -15,10 +15,18 @@ try {
15 15
 /** @const */ var MAX_GRID_HEIGHT = 600;
16 16
 
17 17
 /** @const */ var SPECIAL_VALUE = '+';
18
+/** @const */ var ALT_SPECIAL_VALUE = '^';
19
+/** @const */ var SPECIAL_ARROW_LEFT = '<';
20
+/** @const */ var SPECIAL_ARROW_UP = '^';
21
+/** @const */ var SPECIAL_ARROW_RIGHT = '>';
22
+/** @const */ var SPECIAL_ARROW_DOWN = 'v';
23
+/** @const */ var SPECIAL_VALUES = ['+', '\u2012', '\u2013'];
24
+/** @const */ var ALT_SPECIAL_VALUES = ['>', '<', '^', 'v'];
25
+/** @const */ var ALL_SPECIAL_VALUES = SPECIAL_VALUES.concat(ALT_SPECIAL_VALUES);
18 26
 
19 27
 /** @const */ var MAX_UNDO = 50;
20 28
 
21
-/** @const */ var SPECIAL_LINE_H = '\u2013';
29
+/** @const */ var SPECIAL_LINE_H = '\u2012';
22 30
 /** @const */ var SPECIAL_LINE_V = '|';
23 31
 
24 32
 /** @const */ var ERASE_CHAR = '\u2009';
@@ -155,7 +163,7 @@ ascii.Cell.prototype.getRawValue = function() {
155 163
 
156 164
 /** @return {boolean} */
157 165
 ascii.Cell.prototype.isSpecial = function() {
158
-  return this.getRawValue() == SPECIAL_VALUE;
166
+  return ALL_SPECIAL_VALUES.indexOf(this.getRawValue()) != -1;
159 167
 };
160 168
 
161 169
 /** @return {boolean} */

+ 4
- 1
js-lib/controller.js View File

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

+ 6
- 1
js-lib/draw.js View File

@@ -104,9 +104,11 @@ ascii.DrawBox.prototype.handleKey = function(value) {};
104 104
  * @constructor
105 105
  * @implements {ascii.DrawFunction}
106 106
  * @param {ascii.State} state
107
+ * @param {boolean} isArrow
107 108
  */
108
-ascii.DrawLine = function(state) {
109
+ascii.DrawLine = function(state, isArrow) {
109 110
   this.state = state;
111
+  this.isArrow = isArrow;
110 112
   /** @type {ascii.Vector} */ this.startPosition = null;
111 113
 };
112 114
 
@@ -127,6 +129,9 @@ ascii.DrawLine.prototype.move = function(position) {
127 129
       (endContext.left && endContext.right);
128 130
 
129 131
   drawLine(this.state, this.startPosition, position, clockwise);
132
+  if (this.isArrow) {
133
+    this.state.drawValue(position, ALT_SPECIAL_VALUE);
134
+  }
130 135
 };
131 136
 
132 137
 /** @inheritDoc */

+ 38
- 4
js-lib/state.js View File

@@ -95,7 +95,7 @@ ascii.State.prototype.clearDraw = function() {
95 95
 ascii.State.prototype.getDrawValue = function(position) {
96 96
   var cell = this.getCell(position);
97 97
   var value = cell.scratchValue != null ? cell.scratchValue : cell.value;
98
-  if (value != SPECIAL_VALUE) {
98
+  if (value != SPECIAL_VALUE && value != ALT_SPECIAL_VALUE) {
99 99
     return value;
100 100
   }
101 101
 
@@ -108,10 +108,41 @@ ascii.State.prototype.getDrawValue = function(position) {
108 108
   if (!context.left && !context.right && context.up && context.down) {
109 109
     return SPECIAL_LINE_V;
110 110
   }
111
-  if (context.left && context.right && context.up && context.down) {
111
+  if (context.sum() == 4) {
112 112
     return SPECIAL_LINE_H;
113 113
   }
114
-  return SPECIAL_VALUE;
114
+  if (value == SPECIAL_VALUE && context.sum() == 3) {
115
+    return SPECIAL_VALUE;
116
+  }
117
+  if (value == ALT_SPECIAL_VALUE && context.sum() == 3) {
118
+    if (!context.left) {
119
+      return SPECIAL_ARROW_LEFT;
120
+    }
121
+    if (!context.up) {
122
+      return SPECIAL_ARROW_UP;
123
+    }
124
+    if (!context.down) {
125
+      return SPECIAL_ARROW_DOWN;
126
+    }
127
+    if (!context.right) {
128
+      return SPECIAL_ARROW_RIGHT;
129
+    }
130
+  }
131
+  if (value == ALT_SPECIAL_VALUE && context.sum() == 1) {
132
+    if (context.left) {
133
+      return SPECIAL_ARROW_RIGHT;
134
+    }
135
+    if (context.up) {
136
+      return SPECIAL_ARROW_DOWN;
137
+    }
138
+    if (context.down) {
139
+      return SPECIAL_ARROW_UP;
140
+    }
141
+    if (context.right) {
142
+      return SPECIAL_ARROW_LEFT;
143
+    }
144
+  }
145
+  return value;
115 146
 };
116 147
 
117 148
 /**
@@ -257,9 +288,12 @@ ascii.State.prototype.fromText = function(value, offset) {
257 288
       // Convert special output back to special chars.
258 289
       // TODO: This is a horrible hack, need to handle multiple special chars
259 290
       // correctly and preserve them through line drawing etc.
260
-      if (char == SPECIAL_LINE_H || char == SPECIAL_LINE_V) {
291
+      if (SPECIAL_VALUES.indexOf(char)  != -1) {
261 292
         char = SPECIAL_VALUE;
262 293
       }
294
+      if (ALT_SPECIAL_VALUES.indexOf(char) != -1) {
295
+        char = ALT_SPECIAL_VALUE;
296
+      }
263 297
       this.drawValue(new ascii.Vector(i, j).add(offset).subtract(middle), char);
264 298
     }
265 299
   }

Loading…
Cancel
Save