index.html, assets/js/{app,gfx,ui/controls}.js: removes pointless brush [xy] mirroring `feature.'

index.html, assets/{css/sally.css,js/{matrix,ui/controls}.js}: removes dead {rotate[d],pixels} code.
index.html: cleanup UI layout.
This commit is contained in:
Lucio Andrés Illanes Albornoz 2018-11-24 13:06:52 +01:00
parent 8ec55357e6
commit f9100dacb0
6 changed files with 7 additions and 106 deletions

View File

@ -76,13 +76,6 @@ a:hover { text-decoration: underline }
} }
} }
span,a { min-width: 8px; line-height: 15px; display: inline-block; } span,a { min-width: 8px; line-height: 15px; display: inline-block; }
body.pixels {
line-height: 8px;
}
.pixels #brush_rapper span,
.pixels #brush_rapper a,
.pixels #canvas_rapper span,
.pixels #canvas_rapper a { line-height: 8px; overflow: hidden; }
.rapper { cursor: crosshair; } .rapper { cursor: crosshair; }
body.grid span { border-right: 1px solid #444; border-bottom: 1px solid #444; } body.grid span { border-right: 1px solid #444; border-bottom: 1px solid #444; }
body.grid div { border-left: 1px solid #444; } body.grid div { border-left: 1px solid #444; }
@ -132,13 +125,6 @@ textarea { font-size:12pt; width: 37vw; height: 300px; background: #333; color:
.vertical #secret_rapper { margin-right: 10px; } .vertical #secret_rapper { margin-right: 10px; }
.vertical #secret_rapper span { float: left; clear: both; } .vertical #secret_rapper span { float: left; clear: both; }
.rotated #canvas_rapper {
transform: translateX(-50%) translateY(-50%) translateZ(0) rotate(-90deg);
transform-origin: 50% 50%;
position: absolute;
left: 50%;
}
#tools_block > * { #tools_block > * {
cursor: crosshair; cursor: crosshair;
} }

View File

@ -6,8 +6,6 @@ var selecting = false
var filling = false var filling = false
var changed = false var changed = false
var transforming = false var transforming = false
var mirror_x = false
var mirror_y = false
var focused var focused
var canvas, tools, palette, controls, brush, mode var canvas, tools, palette, controls, brush, mode

View File

@ -115,27 +115,9 @@ var draw = (function(){
changed = true changed = true
if (e.shiftKey) { if (e.shiftKey) {
line (lex, last_point, point, erasing) line (lex, last_point, point, erasing)
if (mirror_x) {
line(lex, [w-last_point[0], last_point[1]], [w-point[0], point[1]], erasing)
}
if (mirror_y) {
line(lex, [last_point[0], h-last_point[1]], [point[0], h-point[1]], erasing)
}
if (mirror_x && mirror_y) {
line(lex, [w-last_point[0], h-last_point[1]], [w-point[0], h-point[1]], erasing)
}
} }
else { else {
stamp (canvas, brush, point[0], point[1], erasing) stamp (canvas, brush, point[0], point[1], erasing)
if (mirror_x) {
stamp (canvas, brush, w-point[0], point[1], erasing)
}
if (mirror_y) {
stamp (canvas, brush, point[0], h-point[1], erasing)
}
if (mirror_x && mirror_y) {
stamp (canvas, brush, w-point[0], h-point[1], erasing)
}
} }
last_point[0] = point[0] last_point[0] = point[0]
last_point[1] = point[1] last_point[1] = point[1]
@ -149,16 +131,6 @@ var draw = (function(){
function move (e, lex, point) { function move (e, lex, point) {
var w = canvas.w, h = canvas.h var w = canvas.w, h = canvas.h
line(lex, last_point, point, erasing) line(lex, last_point, point, erasing)
if (mirror_x) {
line(lex, [w-last_point[0], last_point[1]], [w-point[0], point[1]], erasing)
}
if (mirror_y) {
line(lex, [last_point[0], h-last_point[1]], [point[0], h-point[1]], erasing)
}
if (mirror_x && mirror_y) {
line(lex, [w-last_point[0], h-last_point[1]], [w-point[0], h-point[1]], erasing)
}
last_point[0] = point[0] last_point[0] = point[0]
last_point[1] = point[1] last_point[1] = point[1]
} }
@ -223,12 +195,6 @@ var draw = (function(){
var y_b = mod( point[1], h ) var y_b = mod( point[1], h )
var last_point_mod = [x_b, y_b], point_mod = [x_a, y_a] var last_point_mod = [x_b, y_b], point_mod = [x_a, y_a]
line(lex, last_point_mod, point_mod, erasing) line(lex, last_point_mod, point_mod, erasing)
// if (mirror_x) {
// line(lex, [w-last_point_mod[0], last_point_mod[1]], [w-point_mod[0], point_mod[1]], erasing)
// }
// if (mirror_y) {
// line(lex, [last_point_mod[0], h-last_point_mod[1]], [point_mod[0], h-point_mod[1]], erasing)
// }
} }
last_point[0] = point[0] last_point[0] = point[0]
last_point[1] = point[1] last_point[1] = point[1]

View File

@ -223,21 +223,10 @@ Matrix.prototype.resize_rapper = function(){
var width = cw * this.aa[0].length var width = cw * this.aa[0].length
var height = ch * this.aa.length var height = ch * this.aa.length
if (canvas.grid) { width++; height++ } if (canvas.grid) { width++; height++ }
if (this.rotated) { this.rapper.parentNode.style.height = ""
this.rapper.parentNode.classList.add("rotated") this.rapper.style.width =
this.rapper.parentNode.style.height = (width) + "px" this.rapper.parentNode.style.width = (width) + "px"
this.rapper.parentNode.style.width = (height) + "px" this.rapper.style.top = ""
this.rapper.style.top = (width/2) + "px"
// this.rapper.style.left = ((canvas_rapper.offsetHeight+20)/2) + "px"
}
else {
this.rapper.parentNode.classList.remove("rotated")
this.rapper.parentNode.style.height = ""
this.rapper.style.width =
this.rapper.parentNode.style.width = (width) + "px"
this.rapper.style.top = ""
// canvas_rapper.style.left = "auto"
}
} }
Matrix.prototype.ascii = function () { Matrix.prototype.ascii = function () {
var lines = this.aa.map(function(row, y){ var lines = this.aa.map(function(row, y){

View File

@ -182,37 +182,6 @@ var controls = (function(){
this.update(brush.draw_char) this.update(brush.draw_char)
} }
//
// controls.turn = new BlurredCheckbox (turn_checkbox)
// controls.turn.memorable = true
// controls.turn.use = function(state){
// canvas.rotated = typeof state == "boolean" ? state : ! canvas.rotated
// canvas.resize_rapper()
// this.update(canvas.rotated)
// }
// controls.pixels = new BlurredCheckbox (pixels_checkbox)
// controls.pixels.memorable = true
// controls.pixels.use = function(state){
// canvas.pixels = typeof state == "boolean" ? state : ! canvas.pixels
// document.body.classList.toggle("pixels", canvas.pixels)
// this.update(canvas.pixels)
// }
controls.mirror_x = new BlurredCheckbox (mirror_x_checkbox)
controls.mirror_x.use = function(state){
window.mirror_x = typeof state == "boolean" ? state : ! window.mirror_x
this.update(window.mirror_x)
}
controls.mirror_y = new BlurredCheckbox (mirror_y_checkbox)
controls.mirror_y.use = function(state){
window.mirror_y = typeof state == "boolean" ? state : ! window.mirror_y
this.update(window.mirror_y)
}
//
controls.vertical = new BlurredCheckbox (vertical_checkbox) controls.vertical = new BlurredCheckbox (vertical_checkbox)
controls.vertical.memorable = true controls.vertical.memorable = true
controls.vertical.use = function(state){ controls.vertical.use = function(state){

View File

@ -26,14 +26,10 @@
<div id="brush_container" class="block"> <div id="brush_container" class="block">
<div id="brush_rapper"> <div id="brush_rapper">
</div> </div>
<br>
<span id="fg_checkbox" class="tool">x fg</span><br> <span id="fg_checkbox" class="tool">x fg</span><br>
<span id="bg_checkbox" class="tool">x bg</span><br> <span id="bg_checkbox" class="tool">x bg</span><br>
<span id="char_checkbox" class="tool">x char</span><br> <span id="char_checkbox" class="tool">x char</span><br>
<br> <span id="add_custom_el" class="tool">+ add</span><br>
<span id="add_custom_el" class="tool">+ add</span>
<span id="mirror_x_checkbox" class="tool">_ mirror x</span><br>
<span id="mirror_y_checkbox" class="tool">_ mirror y</span><br>
<br> <br>
<span id="undo_el" class="tool hidden">undo</span><br> <span id="undo_el" class="tool hidden">undo</span><br>
<span id="redo_el" class="tool hidden">redo</span><br> <span id="redo_el" class="tool hidden">redo</span><br>
@ -50,11 +46,6 @@
<span id="scale_el" class="tool">scale</span><br> <span id="scale_el" class="tool">scale</span><br>
<span id="translate_el" class="tool">translate</span><br> <span id="translate_el" class="tool">translate</span><br>
<span id="slice_el" class="tool">slice</span><br> <span id="slice_el" class="tool">slice</span><br>
<span id="grid_el" class="tool">_ grid</span>
<!-- <span id="rotate_checkbox" class="tool">_ rotate</span><br> -->
<span id="vertical_checkbox" class="tool">x vertical</span>
<!-- <span id="pixels_checkbox" class="tool">_ pixels</span><br> -->
</div> </div>
<div id="textarea_mode" style="float: left"> <div id="textarea_mode" style="float: left">
@ -66,6 +57,8 @@
<br> <br>
brush: <span id="brush_w_el" class="ed">5</span> x <span id="brush_h_el" class="ed">5</span><br> brush: <span id="brush_w_el" class="ed">5</span> x <span id="brush_h_el" class="ed">5</span><br>
canvas: <span id="canvas_w_el" class="ed">100</span> x <span id="canvas_h_el" class="ed">30</span><br> canvas: <span id="canvas_w_el" class="ed">100</span> x <span id="canvas_h_el" class="ed">30</span><br>
<span id="grid_el" class="tool">_ grid</span>
<span id="vertical_checkbox" class="tool">x vertical</span>
</div> </div>
<div id="import_rapper"> <div id="import_rapper">