Added working export tool
This commit is contained in:
Lewis Hemens
parent
3f9384e727
commit
2c31dc1df8
49
index.html
49
index.html
|
|
@ -13,13 +13,16 @@
|
|||
}
|
||||
|
||||
.dialog {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 70px;
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
transition: height 0.3s;
|
||||
border-radius: 5px;
|
||||
margin: 10px;
|
||||
border: 1px solid #444;
|
||||
background: #D0E0FF;
|
||||
|
||||
margin-top: 3px;
|
||||
background: #F8F8F8;
|
||||
display: none;
|
||||
border: 1px solid #444;
|
||||
}
|
||||
|
||||
.visible {
|
||||
|
|
@ -43,6 +46,13 @@ button.active {
|
|||
background: #D0E0FF;
|
||||
}
|
||||
|
||||
#export-button {
|
||||
background: #D8D8D8;
|
||||
}
|
||||
#export-button.active {
|
||||
background: #C8C8C8;
|
||||
}
|
||||
|
||||
#ascii-canvas {
|
||||
position: fixed;
|
||||
left: 0px;
|
||||
|
|
@ -68,6 +78,16 @@ button.active {
|
|||
margin: 0px;
|
||||
}
|
||||
|
||||
#export-area {
|
||||
width: 380px;
|
||||
height: 280px;
|
||||
overflow: hidden;
|
||||
resize: none;
|
||||
margin: 5px;
|
||||
font-family: monospace;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -81,17 +101,18 @@ button.active {
|
|||
</pre></div>
|
||||
<div id="menu">
|
||||
<div id="buttons">
|
||||
<button id="box-button" class="active">Box</button>
|
||||
<button id="line-button">Line</button>
|
||||
<button id="freeform-button">Draw</button>
|
||||
<button id="erase-button">Erase</button>
|
||||
<button id="move-button">Resize</button>
|
||||
<button id="text-button">Text</button>
|
||||
<button id="export-button" class="tool">Export</button>
|
||||
<button id="box-button" class="tool active">Box</button>
|
||||
<button id="line-button" class="tool">Line</button>
|
||||
<button id="freeform-button" class="tool">Draw</button>
|
||||
<button id="erase-button" class="tool">Erase</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="menu-button">Menu</button> -->
|
||||
</div>
|
||||
<div id="menu-button-dialog" class="dialog">
|
||||
<pre id="export-area">BLAH</pre>
|
||||
<div id="export-button-dialog" class="dialog">
|
||||
<textarea id="export-area"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<canvas id="ascii-canvas"></canvas>
|
||||
|
|
|
|||
|
|
@ -150,10 +150,15 @@ ascii.Controller.prototype.installBindings = function() {
|
|||
});
|
||||
// TODO: Handle pinch to zoom.
|
||||
|
||||
$('#buttons > button').click(function(e) {
|
||||
$('#buttons > button.tool').click(function(e) {
|
||||
this.updateButtons(e.target.id);
|
||||
}.bind(this));
|
||||
|
||||
$('#undo-button').click(function(e) {
|
||||
this.state.undo();
|
||||
this.view.dirty = true;
|
||||
}.bind(this));
|
||||
|
||||
$(window).keypress(function(e) {
|
||||
this.handleKeyPress(e);
|
||||
}.bind(this));
|
||||
|
|
@ -168,7 +173,7 @@ ascii.Controller.prototype.installBindings = function() {
|
|||
* @param {string} id The ID of the element clicked.
|
||||
*/
|
||||
ascii.Controller.prototype.updateButtons = function(id) {
|
||||
$('#buttons > button').removeClass('active');
|
||||
$('#buttons > button.tool').removeClass('active');
|
||||
$('.dialog').removeClass('visible');
|
||||
|
||||
$('#' + id).addClass('active');
|
||||
|
|
@ -193,6 +198,9 @@ ascii.Controller.prototype.updateButtons = function(id) {
|
|||
if (id == 'text-button') {
|
||||
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 (specialKeyCode != null) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
//event.preventDefault();
|
||||
//event.stopPropagation();
|
||||
this.drawFunction.handleKey(specialKeyCode);
|
||||
this.view.dirty = true;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -147,9 +147,12 @@ ascii.State.prototype.commitDraw = function(opt_skipSave) {
|
|||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Undoes the last committed state.
|
||||
*/
|
||||
ascii.State.prototype.undo = function() {
|
||||
if (this.undoStates.length == 0) { return; }
|
||||
|
||||
var lastState = this.undoStates.pop();
|
||||
for (var i in lastState) {
|
||||
var mappedValue = lastState[i];
|
||||
|
|
@ -157,3 +160,37 @@ ascii.State.prototype.undo = function() {
|
|||
}
|
||||
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;
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue