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

Menu style changes and pointer support

This commit is contained in:
Lewis Hemens 2014-01-20 21:36:58 +00:00
parent e73ba39e13
commit 5c837d80bf
3 changed files with 47 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
index.html
View File

@ -17,38 +17,41 @@
text-align: center; text-align: center;
} }
#dialog { .dialog {
transition: height 0.3s; transition: height 0.3s;
background: #DDD;
border-radius: 5px; border-radius: 5px;
margin-top: 10px; margin: 10px;
} border: 1px solid #444;
background: #D0E0FF;
#dialog.hidden {
height: 0px;
display: none; display: none;
} }
.visible {
display: block !important;
}
button { button {
width: 60px; width: 15%;
height: 30px; height: 30px;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
border-radius: 5px; border-radius: 5px;
background: #DEF; background: #DEF;
outline: 0 !important; outline: 0 !important;
border: 0px; border-width: 1px;
border-color: #DDD;
} }
button.active { button.active {
font-weight: bold; border-color: #444;
background: #D0E0FF;
} }
#ascii-canvas { #ascii-canvas {
position: fixed; position: fixed;
left: 0px; left: 0px;
top: 0px; top: 0px;
cursor: crosshair;
}; };
#export-area { #export-area {
@ -61,15 +64,15 @@ button.active {
<body> <body>
<div id="menu"> <div id="menu">
<div id="buttons"> <div id="buttons">
<button id="box-button">Box</button> <button id="box-button" class="active">Box</button>
<button id="line-button">Line</button> <button id="line-button">Line</button>
<button id="freeform-button">Draw</button> <button id="freeform-button">Draw</button>
<button id="erase-button">Erase</button> <button id="erase-button">Erase</button>
<button id="move-button">Resize</button> <button id="move-button">Resize</button>
<button id="menu-button">Menu</button> <button id="menu-button">Menu</button>
</div> </div>
<div id="dialog" class="hidden"> <div id="menu-button-dialog" class="dialog">
<textarea id="export-area"></textarea> <pre id="export-area">BLAH</pre>
</div> </div>
</div> </div>
<canvas id="ascii-canvas"></canvas> <canvas id="ascii-canvas"></canvas>

14
js-lib/controller.js
View File

@ -41,6 +41,10 @@ ascii.Controller.prototype.handlePress = function(position) {
* @param {ascii.Vector} position * @param {ascii.Vector} position
*/ */
ascii.Controller.prototype.handleMove = function(position) { ascii.Controller.prototype.handleMove = function(position) {
// Update the cursor pointer, depending on the draw function.
this.view.canvas.style.cursor = this.drawFunction.getCursor(
this.view.screenToCell(position));
// No clicks, so just ignore. // No clicks, so just ignore.
if (this.pressVector == null) { return; } if (this.pressVector == null) { return; }
@ -156,12 +160,12 @@ 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(); $('#buttons > button').removeClass('active');
$('#dialog').addClass('hidden'); $('.dialog').removeClass('visible');
$('#' + id).addClass('active'); $('#' + id).addClass('active');
if (id == 'menu-button') { $('#' + id + '-dialog').addClass('visible');
$('#dialog').removeClass('hidden');
}
// Install the right draw tool based on button pressed. // Install the right draw tool based on button pressed.
if (id == 'box-button') { if (id == 'box-button') {
this.drawFunction = new ascii.DrawBox(this.state); this.drawFunction = new ascii.DrawBox(this.state);

25
js-lib/draw.js
View File

@ -44,6 +44,11 @@ ascii.DrawFunction.prototype.start = function(position) {};
ascii.DrawFunction.prototype.move = function(position) {}; ascii.DrawFunction.prototype.move = function(position) {};
/** End of drawing. @param {ascii.Vector} position */ /** End of drawing. @param {ascii.Vector} position */
ascii.DrawFunction.prototype.end = function(position) {}; ascii.DrawFunction.prototype.end = function(position) {};
/** Cursor for given cell.
* @param {ascii.Vector} position
* @return {string}
*/
ascii.DrawFunction.prototype.getCursor = function(position) {};
/** /**
* @constructor * @constructor
@ -67,7 +72,9 @@ ascii.DrawBox.prototype.move = function(position) {
ascii.DrawBox.prototype.end = function(position) { ascii.DrawBox.prototype.end = function(position) {
this.state.commitDraw(); this.state.commitDraw();
}; };
ascii.DrawBox.prototype.getCursor = function(position) {
return 'crosshair';
};
/** /**
* @constructor * @constructor
@ -94,10 +101,12 @@ ascii.DrawLine.prototype.move = function(position) {
drawLine(this.state, this.startPosition, position, clockwise); drawLine(this.state, this.startPosition, position, clockwise);
}; };
ascii.DrawLine.prototype.end = function(position) { ascii.DrawLine.prototype.end = function(position) {
this.state.commitDraw(); this.state.commitDraw();
}; };
ascii.DrawLine.prototype.getCursor = function(position) {
return 'crosshair';
};
/** /**
* @constructor * @constructor
@ -116,9 +125,11 @@ ascii.DrawFreeform.prototype.start = function(position) {
ascii.DrawFreeform.prototype.move = function(position) { ascii.DrawFreeform.prototype.move = function(position) {
this.state.setValue(position, this.value); this.state.setValue(position, this.value);
}; };
ascii.DrawFreeform.prototype.end = function(position) { ascii.DrawFreeform.prototype.end = function(position) {
}; };
ascii.DrawFreeform.prototype.getCursor = function(position) {
return 'crosshair';
};
/** /**
* @constructor * @constructor
@ -215,3 +226,11 @@ ascii.DrawMove.prototype.followLine = function(startPosition, direction) {
} }
}; };
ascii.DrawMove.prototype.getCursor = function(position) {
if (this.state.getCell(position).isSpecial()) {
return 'pointer';
} else {
return 'default';
}
};