mirror of
https://github.com/lalbornoz/roar.git
synced 2024-11-23 07:36:37 +00:00
c100fc5cc5
index.html, assets/{css/sally.css,js/{matrix,ui/controls}.js}: removes dead {rotate[d],pixels} code.
index.html: cleanup UI layout.
539 lines
13 KiB
JavaScript
539 lines
13 KiB
JavaScript
function Matrix (w,h,f){
|
|
this.x = 0
|
|
this.y = 0
|
|
this.w = w
|
|
this.h = h
|
|
this.f = f
|
|
this.focus_x = 0
|
|
this.focus_y = 0
|
|
this.initialize()
|
|
}
|
|
Matrix.prototype.initialize = function(f){
|
|
var w = this.w || 1, h = this.h || 1, f = f || this.f
|
|
var aa = new Array (h)
|
|
for (var y = 0; y < h; y++) {
|
|
aa[y] = new Array (w)
|
|
for (var x = 0; x < w; x++) {
|
|
aa[y][x] = f(x,y)
|
|
}
|
|
}
|
|
this.aa = aa
|
|
}
|
|
Matrix.prototype.rebuild = function (){
|
|
this.demolish()
|
|
this.initialize()
|
|
this.append()
|
|
this.bind()
|
|
this.generate && this.generate()
|
|
this.focus_clamp()
|
|
check_if_lost_focus()
|
|
}
|
|
Matrix.prototype.clone = function () {
|
|
var base = this
|
|
var clone = new Matrix(this.w, this.h, function(x,y){
|
|
return base.getCell(x,y).clone()
|
|
})
|
|
clone.f = this.f
|
|
return clone
|
|
}
|
|
Matrix.prototype.assign = function (mat) {
|
|
var base = this
|
|
this.demolish()
|
|
this.w = mat.w
|
|
this.h = mat.h
|
|
// this.f = function(){}
|
|
this.initialize(function(x,y){
|
|
var el = mat.getCell(x,y).clone()
|
|
el.build()
|
|
return el
|
|
})
|
|
this.append()
|
|
this.bind()
|
|
check_if_lost_focus()
|
|
return this
|
|
}
|
|
|
|
Matrix.prototype.bind = function () {}
|
|
Matrix.prototype.demolish = function (){
|
|
this.forEach(function(lex){
|
|
lex.demolish()
|
|
})
|
|
while (this.rapper && this.rapper.firstChild) {
|
|
this.rapper.removeChild(this.rapper.firstChild);
|
|
}
|
|
this.aa.forEach(function(row){
|
|
row.length = 0
|
|
})
|
|
this.aa.length = 0
|
|
}
|
|
Matrix.prototype.forEach = function(f){
|
|
this.aa.forEach(function(row, y){
|
|
row.forEach(function(lex, x){
|
|
f(lex, x, y)
|
|
})
|
|
})
|
|
}
|
|
Matrix.prototype.focus_clamp = function(){
|
|
this.focus_x = clamp(this.focus_x, 0, this.w - 1)
|
|
this.focus_y = clamp(this.focus_y, 0, this.h - 1)
|
|
}
|
|
Matrix.prototype.focus_add = function(x, y){
|
|
this.focus(this.focus_x + x, this.focus_y + y)
|
|
}
|
|
Matrix.prototype.focus = function(x, y){
|
|
if (x === undefined) x = this.focus_x
|
|
if (y === undefined) y = this.focus_y
|
|
x = mod(x, this.w)
|
|
y = mod(y, this.h)
|
|
this.focus_x = x
|
|
this.focus_y = y
|
|
|
|
//focused_input = this
|
|
this.aa[y][x].focus()
|
|
}
|
|
Matrix.prototype.focusLex = function(y,x){
|
|
if (x < 0) {
|
|
y -= 1
|
|
}
|
|
if (x > this.aa[0].length) {
|
|
y += 1
|
|
}
|
|
this.aa[mod(y,this.h)][mod(x,this.w)].focus()
|
|
}
|
|
Matrix.prototype.clear = function(){
|
|
this.forEach(function(lex,x,y){ lex.clear() })
|
|
}
|
|
Matrix.prototype.erase = function(){
|
|
this.forEach(function(lex,x,y){ lex.erase() })
|
|
}
|
|
Matrix.prototype.fill = function(lex){
|
|
this.fg = lex.fg
|
|
this.bg = lex.bg
|
|
this.char = lex.char
|
|
this.opacity = lex.opacity
|
|
this.forEach(function(el,x,y){
|
|
el.assign(lex)
|
|
el.build()
|
|
})
|
|
}
|
|
|
|
Matrix.prototype.build = function(){
|
|
this.forEach(function(lex,x,y){
|
|
lex.build()
|
|
})
|
|
}
|
|
Matrix.prototype.append = function(rapper){
|
|
rapper = this.rapper = rapper || this.rapper
|
|
if (! this.rapper) return
|
|
this.aa.forEach(function(row, y){
|
|
var div = document.createElement("div")
|
|
row.forEach(function(lex, x) {
|
|
div.appendChild(lex.span)
|
|
})
|
|
rapper.appendChild( div )
|
|
})
|
|
}
|
|
Matrix.prototype.region = function(w,h,x,y) {
|
|
w = w || 1
|
|
h = h || 1
|
|
x = x || 0
|
|
y = y || 0
|
|
var parent = this
|
|
var mat = new Matrix(w, h, function(x,y){
|
|
return parent.aa[y][x]
|
|
})
|
|
mat.f = this.f
|
|
return mat
|
|
}
|
|
Matrix.prototype.setCell = function(lex,x,y){
|
|
this.aa[y] && this.aa[y][x] && this.aa[y][x].assign(lex)
|
|
}
|
|
Matrix.prototype.getCell = function(x,y){
|
|
if (this.aa[y] && this.aa[y][x]) return this.aa[y][x]
|
|
else return null
|
|
}
|
|
Matrix.prototype.get = function(x,y){
|
|
y = floor(mod(y || 0, this.h))
|
|
x = floor(mod(x || 0, this.w))
|
|
if (this.aa[y] && this.aa[y][x]) return this.aa[y][x]
|
|
else return null
|
|
}
|
|
|
|
Matrix.prototype.resize = function(w,h){
|
|
w = w || canvas.w
|
|
h = h || canvas.h
|
|
var div, row, lex
|
|
var f = this.f, old_h = this.aa.length, old_w = this.aa[0].length
|
|
var rapper = this.rapper
|
|
w = max(w, 1)
|
|
h = max(h, 1)
|
|
if (h < old_h) {
|
|
for (var y = old_h; y > h; y--) {
|
|
row = this.aa.pop()
|
|
div = row[0].span.parentNode
|
|
row.forEach(function(lex, x){
|
|
lex.demolish()
|
|
})
|
|
div.parentNode.removeChild(div)
|
|
}
|
|
}
|
|
else if (h > old_h) {
|
|
for (var y = old_h; y < h; y++) {
|
|
div = document.createElement("div")
|
|
rapper.appendChild( div )
|
|
this.aa[y] = new Array (w)
|
|
for (var x = 0; x < w; x++) {
|
|
lex = this.aa[y][x] = f(x,y)
|
|
div.appendChild(lex.span)
|
|
}
|
|
}
|
|
}
|
|
|
|
if (w < old_w) {
|
|
this.aa.forEach(function(row, y){
|
|
while (row.length > w) {
|
|
lex = row.pop()
|
|
lex.demolish()
|
|
}
|
|
})
|
|
}
|
|
else if (w > old_w) {
|
|
this.aa.forEach(function(row, y){
|
|
div = row[0].span.parentNode
|
|
for (var x = row.length; x < w; x++) {
|
|
lex = row[x] = f(x,y)
|
|
div.appendChild(lex.span)
|
|
}
|
|
})
|
|
}
|
|
|
|
this.w = w
|
|
this.h = h
|
|
this.bind && this.bind()
|
|
this.focus_clamp()
|
|
if (this.rapper && this.rapper.parentNode != document.body) {
|
|
this.resize_rapper()
|
|
}
|
|
}
|
|
Matrix.prototype.resize_rapper = function(){
|
|
var cell = canvas.aa[0][0].span
|
|
var cw = cell.offsetWidth
|
|
var ch = cell.offsetHeight
|
|
// if (canvas.grid) { ch++ }
|
|
var width = cw * this.aa[0].length
|
|
var height = ch * this.aa.length
|
|
if (canvas.grid) { width++; height++ }
|
|
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){
|
|
var last, line = ""
|
|
row.forEach(function(lex, x) {
|
|
line += lex.ascii()
|
|
})
|
|
return line // .replace(/\s+$/,"")
|
|
})
|
|
var txt = lines.join("\n")
|
|
return txt
|
|
}
|
|
Matrix.prototype.ansi = function (opts) {
|
|
var lines = this.aa.map(function(row, y){
|
|
var last, line = ""
|
|
row.forEach(function(lex, x) {
|
|
if (lex.eqColor(last)) {
|
|
line += lex.sanitize()
|
|
}
|
|
else {
|
|
line += lex.ansi()
|
|
last = lex
|
|
}
|
|
})
|
|
return line
|
|
})
|
|
var txt = lines.filter(function(line){ return line.length > 0 }).join('\\e[0m\\n') + "\\e[0m"
|
|
return 'echo -e "' + txt + '"'
|
|
}
|
|
Matrix.prototype.mirc = function (opts) {
|
|
var cutoff = false
|
|
var lines = this.aa.map(function(row, y){
|
|
var last, line = ""
|
|
row.forEach(function(lex, x) {
|
|
var bg_ = -1, fg_ = 15
|
|
if (lex.eqColor(last)) {
|
|
line += lex.sanitize()
|
|
}
|
|
else {
|
|
[bg_, fg_, line_] = lex.mirc(bg_, fg_)
|
|
line += line_; last = lex;
|
|
}
|
|
})
|
|
if (opts && opts.cutoff && line.length > opts.cutoff) {
|
|
cutoff = true
|
|
}
|
|
return line
|
|
})
|
|
|
|
var txt = lines.filter(function(line){ return line.length > 0 }).join('\n')
|
|
|
|
if (cutoff) {
|
|
txt = new String(txt)
|
|
txt.cutoff = true
|
|
}
|
|
return txt
|
|
}
|
|
Matrix.prototype.irssi = function(opts){
|
|
var mirc = this.mirc(opts)
|
|
var txt = mirc
|
|
// .replace(/\%/g, '%%')
|
|
.replace(/\\/g, '\\x5C')
|
|
.replace(/\"/g, '\\\"')
|
|
// .replace(/\'/g, '\\\'')
|
|
.replace(/\`/g, '\\\`')
|
|
.replace(/\$/g, '\\$')
|
|
// .replace(/\n\s+/g, '\n')
|
|
// .replace(/\s+$/g, '\n')
|
|
// .replace(/^\n+/, '')
|
|
.replace(/\n/g, '\\n')
|
|
.replace(/\x02/g, '\\x02')
|
|
.replace(/\x03/g, '\\x03')
|
|
|
|
txt = unicode.escapeToEscapedBytes(txt)
|
|
txt = '/exec -out printf "%b" "' + txt + '"\n'
|
|
if (mirc.cutoff){
|
|
txt = new String(txt)
|
|
txt.cutoff = true
|
|
}
|
|
return txt
|
|
}
|
|
|
|
var undo = (function(){
|
|
|
|
var max_states = 200;
|
|
|
|
// undotimetotal = 0;
|
|
|
|
var stack = {undo: [], redo: []};
|
|
var current_undo = null;
|
|
var dom = {undo: undo_el, redo: redo_el};
|
|
dom.undo.is_visible = dom.redo.is_visible = false
|
|
|
|
var LexState = function(lex){
|
|
this.fg = lex.fg;
|
|
this.bg = lex.bg;
|
|
this.char = lex.char;
|
|
this.opacity = lex.opacity;
|
|
};
|
|
|
|
var update_dom_visibility = function(type){
|
|
var el = dom[type]
|
|
if (el.is_visible){
|
|
if (stack[type].length === 0) {
|
|
el.classList.add('hidden')
|
|
el.is_visible = false
|
|
}
|
|
} else if (stack[type].length > 0){
|
|
el.classList.remove('hidden')
|
|
el.is_visible = true
|
|
}
|
|
}
|
|
var update_dom = function(){
|
|
update_dom_visibility('undo')
|
|
update_dom_visibility('redo')
|
|
}
|
|
|
|
// state is an undo or redo state that might contain these props
|
|
// { lexs: {'0,0': LexState, ...}, // for sparse lex changes (eg brush, fill)
|
|
// focus: {x:, y: },
|
|
// size: {w:, h: },
|
|
// rects: [{x:, y:, w:, h:, lexs: [LexState, ...]}, ...]
|
|
// }
|
|
var new_state = function(){
|
|
var state = {lexs:{}};
|
|
save_focus(canvas.focus_x, canvas.focus_y, state)
|
|
return state
|
|
}
|
|
var new_redo = function(){
|
|
return new_state()
|
|
}
|
|
var new_undo = function(){
|
|
current_undo = new_state()
|
|
stack.redo = []
|
|
stack.undo.push(current_undo)
|
|
if (stack.undo.length > max_states) stack.undo.shift();
|
|
update_dom()
|
|
return current_undo
|
|
}
|
|
|
|
var save_focus = function(x, y, state){
|
|
state = state || current_undo
|
|
state.focus = {x:x, y:y}
|
|
}
|
|
var save_size = function(w, h, state){
|
|
state = state || current_undo
|
|
state.size = {w:w, h:h};
|
|
}
|
|
// the reason for stringifying the x y coords is so that each
|
|
// coordinate is saved only once in an undo state.
|
|
// otherwise there would be problems with, eg, a brush stroke
|
|
// that passed over the same grid cell twice.
|
|
var save_lex = function(x, y, lex, state){
|
|
// var start = Date.now()
|
|
state = state || current_undo
|
|
var lexs = state.lexs;
|
|
var xy = x + "," + y;
|
|
if (xy in lexs) return;
|
|
lexs[xy] = new LexState(lex)
|
|
// undotimetotal += Date.now() - start
|
|
}
|
|
var save_focused_lex = function(state){
|
|
state = state || current_undo
|
|
var x = canvas.focus_x
|
|
var y = canvas.focus_y
|
|
save_lex(x, y, canvas.aa[y][x], state)
|
|
}
|
|
var save_rect = function(xpos, ypos, w, h, state){
|
|
if (w === 0 || h === 0) return;
|
|
state = state || current_undo;
|
|
state.rects = state.rects || []
|
|
var aa = canvas.aa;
|
|
var rect = {x: xpos, y: ypos, w: w, h: h, lexs: []}
|
|
var lexs = rect.lexs
|
|
var xlen = xpos + w
|
|
var ylen = ypos + h
|
|
for (var y = ypos; y < ylen; y++){
|
|
var aay = aa[y]
|
|
for (var x = xpos; x < xlen; x++){
|
|
lexs.push(new LexState(aay[x]))
|
|
}
|
|
}
|
|
state.rects.push(rect)
|
|
}
|
|
var save_resize = function(w, h, old_w, old_h, state){
|
|
state = state || current_undo
|
|
save_size(old_w, old_h, state)
|
|
if (old_w > w){
|
|
// .---XX
|
|
// | XX
|
|
// |___XX
|
|
save_rect(w, 0, old_w - w, old_h, state)
|
|
if (old_h > h){
|
|
// .----.
|
|
// | |
|
|
// XXXX_|
|
|
save_rect(0, h, w, old_h - h, state)
|
|
}
|
|
} else if (old_h > h){
|
|
// .----.
|
|
// | |
|
|
// XXXXXX
|
|
save_rect(0, h, old_w, old_h - h, state)
|
|
}
|
|
}
|
|
|
|
var restore_state = function(state){
|
|
// all redo states will have a cached undo state on them
|
|
// an undo state might have a cached redo state
|
|
// if it doesn't have one, generate one
|
|
var make_redo = ! ('redo' in state || 'undo' in state);
|
|
var aa = canvas.aa
|
|
var lex, lexs;
|
|
|
|
if (make_redo){
|
|
state.redo = new_redo()
|
|
|
|
// copy saved rects that intersect with current canvas size
|
|
// important to do this before resizing canvas
|
|
if ('rects' in state){
|
|
for (var ri=0, rect; rect=state.rects[ri]; ri++){
|
|
if (rect.x >= canvas.w ||
|
|
rect.y >= canvas.h) continue;
|
|
var w = Math.min(rect.w, canvas.w - rect.x)
|
|
var h = Math.min(rect.h, canvas.h - rect.y)
|
|
save_rect(rect.x, rect.y, w, h, state.redo)
|
|
}
|
|
}
|
|
if ('size' in state){
|
|
save_resize(state.size.w, state.size.h, canvas.w, canvas.h, state.redo)
|
|
}
|
|
}
|
|
|
|
if ('size' in state){
|
|
canvas.resize(state.size.w, state.size.h, true);
|
|
}
|
|
|
|
if ('rects' in state){
|
|
for (var ri=0, rect; rect=state.rects[ri]; ri++){
|
|
lexs = rect.lexs
|
|
for (var li=0; lex=lexs[li]; li++){
|
|
var x = (li % rect.w) + rect.x
|
|
var y = ((li / rect.w)|0) + rect.y
|
|
aa[y][x].assign(lex)
|
|
}
|
|
}
|
|
}
|
|
|
|
lexs = state.lexs
|
|
for (var key in lexs){
|
|
var xy = key.split(',');
|
|
lex = aa[xy[1]][xy[0]]
|
|
if (make_redo)
|
|
save_lex(xy[0], xy[1], lex, state.redo)
|
|
lex.assign(lexs[key])
|
|
}
|
|
|
|
if ('focus' in state){
|
|
canvas.focus_x = state.focus.x
|
|
canvas.focus_y = state.focus.y
|
|
if (current_canvas === canvas){
|
|
canvas.focus()
|
|
}
|
|
}
|
|
}
|
|
|
|
var undo = function(){
|
|
var state = stack.undo.pop();
|
|
if (!state) return;
|
|
|
|
restore_state(state)
|
|
|
|
// now take the applied undo state and store it on the redo state
|
|
// and push the redo state to the redo stack
|
|
state.redo.undo = state
|
|
stack.redo.push(state.redo)
|
|
delete state.redo
|
|
|
|
update_dom()
|
|
}
|
|
|
|
var redo = function(){
|
|
var state = stack.redo.pop();
|
|
if (!state) return;
|
|
|
|
restore_state(state)
|
|
|
|
state.undo.redo = state
|
|
stack.undo.push(state.undo)
|
|
delete state.undo
|
|
|
|
update_dom()
|
|
}
|
|
|
|
return {
|
|
stack: stack,
|
|
new: new_undo,
|
|
// new_redo: new_redo,
|
|
save_focus: save_focus,
|
|
save_size: save_size,
|
|
save_lex: save_lex,
|
|
save_focused_lex: save_focused_lex,
|
|
save_rect: save_rect,
|
|
save_resize: save_resize,
|
|
undo: undo,
|
|
redo: redo
|
|
}
|
|
|
|
})()
|