mirror of
https://github.com/lalbornoz/roar.git
synced 2024-12-22 20:36:37 +00:00
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
parent
8ec55357e6
commit
f9100dacb0
@ -76,13 +76,6 @@ a:hover { text-decoration: underline }
|
||||
}
|
||||
}
|
||||
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; }
|
||||
body.grid span { border-right: 1px solid #444; border-bottom: 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 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 > * {
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
@ -6,8 +6,6 @@ var selecting = false
|
||||
var filling = false
|
||||
var changed = false
|
||||
var transforming = false
|
||||
var mirror_x = false
|
||||
var mirror_y = false
|
||||
var focused
|
||||
|
||||
var canvas, tools, palette, controls, brush, mode
|
||||
|
||||
@ -115,27 +115,9 @@ var draw = (function(){
|
||||
changed = true
|
||||
if (e.shiftKey) {
|
||||
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 {
|
||||
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[1] = point[1]
|
||||
@ -149,16 +131,6 @@ var draw = (function(){
|
||||
function move (e, lex, point) {
|
||||
var w = canvas.w, h = canvas.h
|
||||
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[1] = point[1]
|
||||
}
|
||||
@ -223,12 +195,6 @@ var draw = (function(){
|
||||
var y_b = mod( point[1], h )
|
||||
var last_point_mod = [x_b, y_b], point_mod = [x_a, y_a]
|
||||
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[1] = point[1]
|
||||
|
||||
@ -223,21 +223,10 @@ Matrix.prototype.resize_rapper = function(){
|
||||
var width = cw * this.aa[0].length
|
||||
var height = ch * this.aa.length
|
||||
if (canvas.grid) { width++; height++ }
|
||||
if (this.rotated) {
|
||||
this.rapper.parentNode.classList.add("rotated")
|
||||
this.rapper.parentNode.style.height = (width) + "px"
|
||||
this.rapper.parentNode.style.width = (height) + "px"
|
||||
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"
|
||||
}
|
||||
this.rapper.parentNode.style.height = ""
|
||||
this.rapper.style.width =
|
||||
this.rapper.parentNode.style.width = (width) + "px"
|
||||
this.rapper.style.top = ""
|
||||
}
|
||||
Matrix.prototype.ascii = function () {
|
||||
var lines = this.aa.map(function(row, y){
|
||||
|
||||
31
assets/js/ui/controls.js
vendored
31
assets/js/ui/controls.js
vendored
@ -182,37 +182,6 @@ var controls = (function(){
|
||||
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.memorable = true
|
||||
controls.vertical.use = function(state){
|
||||
|
||||
13
index.html
13
index.html
@ -26,14 +26,10 @@
|
||||
<div id="brush_container" class="block">
|
||||
<div id="brush_rapper">
|
||||
</div>
|
||||
<br>
|
||||
<span id="fg_checkbox" class="tool">x fg</span><br>
|
||||
<span id="bg_checkbox" class="tool">x bg</span><br>
|
||||
<span id="char_checkbox" class="tool">x char</span><br>
|
||||
<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>
|
||||
<span id="add_custom_el" class="tool">+ add</span><br>
|
||||
<br>
|
||||
<span id="undo_el" class="tool hidden">undo</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="translate_el" class="tool">translate</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 id="textarea_mode" style="float: left">
|
||||
@ -66,6 +57,8 @@
|
||||
<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>
|
||||
<span id="grid_el" class="tool">_ grid</span>
|
||||
<span id="vertical_checkbox" class="tool">x vertical</span>
|
||||
</div>
|
||||
|
||||
<div id="import_rapper">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user