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

Added working export tool

This commit is contained in:
Lewis Hemens 2014-01-21 23:31:58 +00:00
parent 3f9384e727
commit 2c31dc1df8
3 changed files with 85 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
index.html
View File

@ -13,13 +13,16 @@
} }
.dialog { .dialog {
position: absolute;
top: 0px;
left: 70px;
width: 400px;
height: 300px;
transition: height 0.3s; transition: height 0.3s;
border-radius: 5px; margin-top: 3px;
margin: 10px; background: #F8F8F8;
border: 1px solid #444;
background: #D0E0FF;
display: none; display: none;
border: 1px solid #444;
} }
.visible { .visible {
@ -43,6 +46,13 @@ button.active {
background: #D0E0FF; background: #D0E0FF;
} }
#export-button {
background: #D8D8D8;
}
#export-button.active {
background: #C8C8C8;
}
#ascii-canvas { #ascii-canvas {
position: fixed; position: fixed;
left: 0px; left: 0px;
@ -68,6 +78,16 @@ button.active {
margin: 0px; margin: 0px;
} }
#export-area {
width: 380px;
height: 280px;
overflow: hidden;
resize: none;
margin: 5px;
font-family: monospace;
white-space: pre;
}
</style> </style>
</head> </head>
<body> <body>
@ -81,17 +101,18 @@ button.active {
</pre></div> </pre></div>
<div id="menu"> <div id="menu">
<div id="buttons"> <div id="buttons">
<button id="box-button" class="active">Box</button> <button id="export-button" class="tool">Export</button>
<button id="line-button">Line</button> <button id="box-button" class="tool active">Box</button>
<button id="freeform-button">Draw</button> <button id="line-button" class="tool">Line</button>
<button id="erase-button">Erase</button> <button id="freeform-button" class="tool">Draw</button>
<button id="move-button">Resize</button> <button id="erase-button" class="tool">Erase</button>
<button id="text-button">Text</button> <button id="move-button" class="tool">Resize</button>
<button id="text-button" class="tool">Text</button>
<button id="undo-button">Undo</button>
<!-- <button id="select-button">Select</button> --> <!-- <button id="select-button">Select</button> -->
<!-- <button id="menu-button">Menu</button> -->
</div> </div>
<div id="menu-button-dialog" class="dialog"> <div id="export-button-dialog" class="dialog">
<pre id="export-area">BLAH</pre> <textarea id="export-area"></textarea>
</div> </div>
</div> </div>
<canvas id="ascii-canvas"></canvas> <canvas id="ascii-canvas"></canvas>

16
js-lib/controller.js
View File

@ -150,10 +150,15 @@ ascii.Controller.prototype.installBindings = function() {
}); });
// TODO: Handle pinch to zoom. // TODO: Handle pinch to zoom.
$('#buttons > button').click(function(e) { $('#buttons > button.tool').click(function(e) {
this.updateButtons(e.target.id); this.updateButtons(e.target.id);
}.bind(this)); }.bind(this));
$('#undo-button').click(function(e) {
this.state.undo();
this.view.dirty = true;
}.bind(this));
$(window).keypress(function(e) { $(window).keypress(function(e) {
this.handleKeyPress(e); this.handleKeyPress(e);
}.bind(this)); }.bind(this));
@ -168,7 +173,7 @@ ascii.Controller.prototype.installBindings = function() {
* @param {string} id The ID of the element clicked. * @param {string} id The ID of the element clicked.
*/ */
ascii.Controller.prototype.updateButtons = function(id) { ascii.Controller.prototype.updateButtons = function(id) {
$('#buttons > button').removeClass('active'); $('#buttons > button.tool').removeClass('active');
$('.dialog').removeClass('visible'); $('.dialog').removeClass('visible');
$('#' + id).addClass('active'); $('#' + id).addClass('active');
@ -193,6 +198,9 @@ ascii.Controller.prototype.updateButtons = function(id) {
if (id == 'text-button') { if (id == 'text-button') {
this.drawFunction = new ascii.DrawText(this.state); this.drawFunction = new ascii.DrawText(this.state);
} }
if (id == 'export-button') {
$('#export-area').val(this.state.outputText());
}
}; };
/** /**
@ -230,8 +238,8 @@ ascii.Controller.prototype.handleKeyDown = function(event) {
if (event.keyCode == 39) { specialKeyCode = KEY_RIGHT; } if (event.keyCode == 39) { specialKeyCode = KEY_RIGHT; }
if (specialKeyCode != null) { if (specialKeyCode != null) {
event.preventDefault(); //event.preventDefault();
event.stopPropagation(); //event.stopPropagation();
this.drawFunction.handleKey(specialKeyCode); this.drawFunction.handleKey(specialKeyCode);
this.view.dirty = true; this.view.dirty = true;
} }

39
js-lib/state.js
View File

@ -147,9 +147,12 @@ ascii.State.prototype.commitDraw = function(opt_skipSave) {
} }
}; };
/**
* Undoes the last committed state.
*/
ascii.State.prototype.undo = function() { ascii.State.prototype.undo = function() {
if (this.undoStates.length == 0) { return; } if (this.undoStates.length == 0) { return; }
var lastState = this.undoStates.pop(); var lastState = this.undoStates.pop();
for (var i in lastState) { for (var i in lastState) {
var mappedValue = lastState[i]; var mappedValue = lastState[i];
@ -157,3 +160,37 @@ ascii.State.prototype.undo = function() {
} }
this.commitDraw(true); this.commitDraw(true);
}; };
/**
* Outputs the entire contents of the diagram as text.
* @return {string}
*/
ascii.State.prototype.outputText = function() {
// Find the first/last cells in the diagram so we don't output everything.
var start = new ascii.Vector(Number.MAX_VALUE, Number.MAX_VALUE);
var end = new ascii.Vector(-1, -1);
for (var i = 0; i < this.cells.length; i++) {
for (var j = 0; j < this.cells[i].length; j++) {
if (this.cells[i][j].getRawValue() != null) {
if (i < start.x) { start.x = i; }
if (j < start.y) { start.y = j; }
if (i > end.x) { end.x = i; }
if (j > end.y) { end.y = j; }
}
}
}
if (end.x < 0) { return '' };
var output = '';
for (var j = start.y; j <= end.y; j++) {
var line = '';
for (var i = start.x; i <= end.x; i++) {
var val = this.getDrawValue(new ascii.Vector(i, j));
line += (val == null ? ' ' : val);
}
// Trim end whitespace.
output += line.replace('\\s+$/g', '') + '\n';
}
return output;
};