roar/js/ui/controls.js
Lucio Andrés Illanes Albornoz (arab, vxp) 0eb96f9266 Initial commit.
2018-11-26 10:22:19 +01:00

375 lines
10 KiB
JavaScript

var controls = (function(){
var controls = {}
controls.cross = new Tool (cross_el)
controls.cross.use = function(){
if (brush.mask == blit.cross) {
controls.cross.el.innerHTML = "ssoɹɔ"
brush.mask = blit.inverted_cross
}
else {
controls.cross.el.innerHTML = "cross"
brush.mask = blit.cross
}
brush.generate()
drawing = true
brush.modified = false
}
controls.cross.done = function(){
controls.cross.el.innerHTML = "cross"
drawing = false
}
controls.circle = new Tool (circle_el)
controls.circle.use = function(){
brush.mask = blit.circle
brush.generate()
drawing = true
brush.modified = false
}
controls.circle.done = function(){
drawing = false
}
controls.square = new Tool (square_el)
controls.square.use = function(){
brush.mask = blit.square
brush.generate()
brush.modified = false
drawing = true
}
controls.square.done = function(){
drawing = false
}
controls.text = new Tool (text_el)
controls.text.use = function(){
current_filetool && current_filetool.blur()
}
controls.select = new Tool (select_el)
controls.select.use = function(){
selection.show()
}
controls.select.done = function(){
selection.hide()
}
controls.rotate = new Tool (rotate_el)
controls.rotate.use = function(){
transform.set_mode('rotate')
}
controls.rotate.done = function(){
transform.done()
}
controls.scale = new Tool (scale_el)
controls.scale.use = function(){
transform.set_mode('scale')
}
controls.scale.done = function(){
transform.done()
}
controls.slice = new Tool (slice_el)
controls.slice.use = function(){
transform.set_mode('slice')
}
controls.slice.done = function(){
transform.done()
}
controls.translate = new Tool (translate_el)
controls.translate.use = function(){
transform.set_mode('translate')
}
controls.translate.done = function(){
transform.done()
}
controls.fill = new Tool (fill_el)
controls.fill.use = function(){
filling = true
document.body.classList.add("bucket")
}
controls.fill.done = function(){
filling = false
document.body.classList.remove("bucket")
}
controls.undo = new BlurredTool (undo_el)
controls.undo.use = function(){
undo.undo()
}
controls.redo = new BlurredTool (redo_el)
controls.redo.use = function(){
undo.redo()
}
controls.clear = new BlurredTool (clear_el)
controls.clear.use = function(){
undo.new()
undo.save_rect(0, 0, canvas.w, canvas.h)
canvas.erase()
current_filetool && current_filetool.blur()
}
controls.webcam = new FileTool (webcam_el)
controls.webcam.load = function(){
this.loaded = true
webcam_close.addEventListener("click", function(){ controls.webcam.blur() })
window.addEventListener("message", function(e){
if (e.origin !== window.location.origin) return
controls.webcam.blur()
controls.circle.focus()
import_textarea.value = e.data
clipboard.import_colorcode()
})
}
controls.webcam.use = function(){
if (! this.loaded) {
this.load()
}
webcam_iframe.src = "webcam.html"
webcam_rapper.style.display = "block"
}
controls.webcam.done = function(){
webcam_iframe.src = ""
webcam_rapper.style.display = "none"
}
controls.grid = new BlurredCheckbox (grid_el)
controls.grid.memorable = true
controls.grid.use = function(state){
state = typeof state == "boolean" ? state : ! document.body.classList.contains("grid")
document.body.classList[ state ? "add" : "remove" ]('grid')
letters.grid = palette.grid = canvas.grid = state
canvas.resize_rapper()
palette.resize_rapper()
letters.resize_rapper()
if (! selection.hidden) selection.reposition()
this.update( state )
}
ClipboardTool = FileTool.extend({
blur: function(){
this.__blur()
clipboard.hide()
}
})
controls.save = new ClipboardTool (save_el)
controls.save.use = function(){
changed && clipboard.upload_png()
clipboard.show()
clipboard.export_mode()
}
controls.send_to_irc = new ClipboardTool (send_to_irc_el)
controls.send_to_irc.use = function(){
changed && clipboard.upload_png()
clipboard.show()
clipboard.export_mode()
alert('your ascii art is now on display on the IRC channel inside the panke.gallery!')
}
controls.load = new ClipboardTool (load_el)
controls.load.use = function(){
// console.log("use")
clipboard.show()
clipboard.import_mode()
}
controls.save_format = new RadioGroup(format_el)
controls.save_format.name = 'save_format'
controls.save_format.memorable = true
var cs = controls.save_format.controls
cs.mirc.use = cs.irssi.use = cs.ascii.use = function(){
clipboard.export_data()
}
//
var ShaderTool = FileTool.extend({
active: false,
use: function(state){
this.active = typeof state == "boolean" ? state : ! this.active
if (this.active) {
shader_rapper.style.display = "block"
shader_textarea.focus()
} else {
shader_rapper.style.display = "none"
}
},
done: function(){
this.use(false)
}
})
controls.shader = new ShaderTool (shader_el)
shader_textarea.value = shader_textarea.value || demo_shader.innerHTML
shader_textarea.addEventListener("input", function(){
var fn = shader.build(shader_textarea.value)
fn && shader.run(canvas)
})
controls.animate = new BlurredCheckbox (animate_checkbox)
controls.animate.use = function(state){
var state = shader.toggle()
this.update(state)
// controls.shader.focus()
controls.shader.use(true)
}
controls.shader_target = new RadioGroup(shader_target_el)
var cs = controls.shader_target.controls
cs.canvas.use = function(){ shader.canvas = canvas }
cs.brush.use = function(){ shader.canvas = brush }
cs.selection.use = function(){ shader.canvas = selection.canvas }
controls.experimental_palette = new HiddenCheckbox (experimental_palette_toggle)
controls.experimental_palette.memorable = true
controls.experimental_palette.use = function(state){
var state = palette.experimental(state)
this.update(state)
}
controls.advanced = new BlurredCheckbox (advanced_checkbox)
controls.advanced.memorable = true
controls.advanced.use = function(state){
console.log(state)
state = typeof state == "boolean" ? state : ! document.body.classList.contains('panke')
if (state)
document.body.classList.add('panke')
else
document.body.classList.remove('panke')
this.update(state)
}
/*
controls.nopaint = new HiddenCheckbox (nopaint_toggle)
controls.nopaint.memorable = true
controls.nopaint.on = "N"
controls.nopaint.use = function(state){
var state = nopaint.toggle(state)
this.update(state)
}
*/
//
controls.fg = new BlurredCheckbox (fg_checkbox)
controls.fg.use = function(state){
brush.draw_fg = state || ! brush.draw_fg
this.update(brush.draw_fg)
}
controls.bg = new BlurredCheckbox (bg_checkbox)
controls.bg.use = function(state){
brush.draw_bg = state || ! brush.draw_bg
this.update(brush.draw_bg)
}
controls.char = new BlurredCheckbox (char_checkbox)
controls.char.use = function(state){
brush.draw_char = state || ! 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.memorable = true
controls.vertical.use = function(state){
canvas.vertical = typeof state == "boolean" ? state : ! canvas.vertical
controls.vertical.refresh()
}
controls.vertical.refresh = function(){
if (canvas.vertical) {
document.body.classList.add("vertical")
}
else {
document.body.classList.remove("vertical")
}
palette.repaint()
letters.repaint()
this.update(canvas.vertical)
}
//
controls.brush_w = new Lex (brush_w_el)
controls.brush_h = new Lex (brush_h_el)
controls.canvas_w = new Lex (canvas_w_el)
controls.canvas_h = new Lex (canvas_h_el)
// bind
controls.bind = function(){
for (var n in controls){
var control = controls[n]
if (typeof control === 'object' && 'bind' in control){
control.bind()
}
}
[
controls.brush_w,
controls.brush_h,
controls.canvas_w,
controls.canvas_h
].forEach(function(lex){
lex.span.addEventListener('mousedown', function(e){
lex.focus()
if (is_mobile) cursor_input.focus()
})
});
controls.brush_w.key = keys.single_numeral_key(controls.brush_w, function(w){ brush.resize(w, brush.h) })
controls.brush_w.raw_key = keys.arrow_key(function(w){ brush.size_add(w, 0) })
controls.brush_h.key = keys.single_numeral_key(controls.brush_h, function(h){ brush.resize(brush.w, h) })
controls.brush_h.raw_key = keys.arrow_key(function(h){ brush.size_add(0, h) })
controls.canvas_w.key = keys.multi_numeral_key(controls.canvas_w, 3)
controls.canvas_w.onBlur = keys.multi_numeral_blur(controls.canvas_w, function(w){ canvas.resize(w, canvas.h) })
controls.canvas_w.raw_key = keys.arrow_key(function(w){ canvas.size_add(w, 0) })
controls.canvas_h.key = keys.multi_numeral_key(controls.canvas_h, 3)
controls.canvas_h.onBlur = keys.multi_numeral_blur(controls.canvas_h, function(h){ canvas.resize(canvas.w, h) })
controls.canvas_h.raw_key = keys.arrow_key(function(h){ canvas.size_add(0, h) })
add_custom_el.addEventListener("click", function(){
custom.clone()
})
}
return controls
})()