summaryrefslogtreecommitdiff
path: root/js/ui
diff options
context:
space:
mode:
Diffstat (limited to 'js/ui')
-rw-r--r--js/ui/brush.js28
-rw-r--r--js/ui/canvas.js24
-rw-r--r--js/ui/controls.js120
-rw-r--r--js/ui/keys.js8
-rw-r--r--js/ui/palette.js2
-rw-r--r--js/ui/selection.js148
6 files changed, 262 insertions, 68 deletions
diff --git a/js/ui/brush.js b/js/ui/brush.js
index a055a97..50f6e07 100644
--- a/js/ui/brush.js
+++ b/js/ui/brush.js
@@ -7,20 +7,6 @@ var brush = (function(){
})
brush.modified = false
-
- brush.bind = function(){
- brush.forEach(function(lex, x, y){
- if (lex.bound) return
- lex.bound = true
-
- lex.span.addEventListener('mousedown', function(e){
- e.preventDefault()
- dragging = true
- // lex.fill(lex.fg, lex.bg)
- })
-
- })
- }
brush.bind = function(){
@@ -70,8 +56,22 @@ var brush = (function(){
})
}
+ brush.expand = function(i){
+ var w = this.w = clamp(this.w+i, 1, 9), h = this.h = clamp(this.h+i, 1, 9)
+ controls.width.char = ""+w
+ controls.width.build()
+ controls.height.char = ""+h
+ controls.height.build()
+ this.rebuild()
+ }
+ brush.contract = function(i){
+ this.expand(-i)
+ }
+
+ brush.char = " "
brush.fg = 0
brush.bg = 1
+ brush.opacity = 1
return brush
diff --git a/js/ui/canvas.js b/js/ui/canvas.js
index 4b595a5..206cbee 100644
--- a/js/ui/canvas.js
+++ b/js/ui/canvas.js
@@ -1,4 +1,4 @@
-var canvas = (function(){
+var canvas = current_canvas = (function(){
var cols = 80
var rows = 24
@@ -11,8 +11,6 @@ var canvas = (function(){
exports.bind = function(){
- var last_point = [0,0]
-
exports.forEach(function(lex, x, y){
if (lex.bound) return
@@ -26,19 +24,23 @@ var canvas = (function(){
dragging = true
current_canvas = canvas
if (drawing) {
- erasing = (e.which == "3" || e.ctrlKey)
- draw(lex, x, y, erasing)
- last_point[0] = x
- last_point[1] = y
+ draw.down(e, lex, point)
+ }
+ else if (selecting) {
+ selection.down(e, lex, point)
+ }
+ else if (filling) {
+ draw.fill(brush, x, y)
}
lex.focus()
})
- lex.span.addEventListener("mousemove", function(){
+ lex.span.addEventListener("mousemove", function(e){
if (! dragging) return
if (drawing) {
- line(lex, last_point, point, erasing)
- last_point[0] = x
- last_point[1] = y
+ draw.move(e, lex, point)
+ }
+ else if (selecting) {
+ selection.move(e, lex, point)
}
lex.focus()
})
diff --git a/js/ui/controls.js b/js/ui/controls.js
index d575725..81403db 100644
--- a/js/ui/controls.js
+++ b/js/ui/controls.js
@@ -2,12 +2,13 @@ var controls = (function(){
var controls = {}
-
controls.circle = new Tool (circle_el)
controls.circle.use = function(){
brush.generate = controls.circle.generate
brush.generate()
drawing = true
+ filling = false
+ selection.hide()
brush.modified = false
}
controls.circle.generate = function(){
@@ -28,80 +29,100 @@ var controls = (function(){
controls.square.use = function(){
brush.generate = controls.square.generate
brush.generate()
- drawing = true
brush.modified = false
+ drawing = true
+ filling = false
+ selection.hide()
}
controls.square.generate = function(){
var fg = brush.fg, bg = brush.bg
brush.fill(fg,bg)
}
-
-
+
controls.text = new Tool (text_el)
controls.text.use = function(){
brush.generate = controls.text.generate
brush.generate()
drawing = false
+ filling = false
+ selection.hide()
}
controls.text.generate = function(){
}
-
+ controls.select = new Tool (select_el)
+ controls.select.use = function(){
+ drawing = false
+ filling = false
+ selection.show()
+ }
+
+ controls.fill = new Tool (fill_el)
+ controls.fill.use = function(){
+ drawing = false
+ filling = true
+ selection.hide()
+ }
+
controls.clear = new Tool (clear_el)
controls.clear.use = function(){
canvas.clear()
}
-
controls.grid = new Tool (grid_el)
controls.grid.use = function(){
document.body.classList.toggle('grid')
}
-
-
- controls.shader = new Tool (shader_el)
- controls.shader.use = function(){
- shader_textarea.style.display = "block"
- // setTimeout(function(){ shader_textarea.focus() })
- shader_textarea.focus()
+ controls.grid.show = function(){
+ document.body.classList.add('grid')
}
- controls.shader.blur = function(){
- Tool.prototype.blur.call(this)
- shader_textarea.style.display = "none"
+ controls.grid.hide = function(){
+ document.body.classList.remove('grid')
}
+
+ ClipboardTool = Tool.extend({
+ blur: function(){
+ this.__blur()
+ clipboard.hide()
+ }
+ })
+ ShaderTool = Tool.extend({
+ use: function(){
+ shader_textarea.style.display = "block"
+ shader_textarea.focus()
+ },
+ blur: function(){
+ this.__blur()
+ shader_textarea.style.display = "none"
+ }
+ })
+
+ controls.shader = new ShaderTool (shader_el)
+
shader_textarea.value = demo_shader.innerHTML
shader_textarea.addEventListener("input", function(){
var fn = shader.build(shader_textarea.value)
fn && shader.run(canvas)
})
- controls.save = new Tool (save_el)
+ controls.save = new ClipboardTool (save_el)
controls.save.use = function(){
clipboard.show()
clipboard.export_mode()
}
- controls.save.blur = function(){
- Tool.prototype.blur.call(this)
- clipboard.hide()
- }
- controls.load = new Tool (load_el)
+ controls.load = new ClipboardTool (load_el)
controls.load.use = function(){
clipboard.show()
clipboard.import_mode()
}
- controls.load.blur = function(){
- Tool.prototype.blur.call(this)
- clipboard.hide()
- }
controls.animate = new Tool (animate_checkbox)
controls.animate.use = function(){
var state = shader.toggle()
- if (state) animate_checkbox.innerHTML = "x animate"
- else animate_checkbox.innerHTML = "_ animate"
+ if (state) this.el.innerHTML = "x animate"
+ else this.el.innerHTML = "_ animate"
}
-
controls.width = new Lex (width_el)
controls.height = new Lex (height_el)
controls.canvas_width = new Lex (canvas_width_el)
@@ -110,7 +131,12 @@ var controls = (function(){
// bind
controls.bind = function(){
- [controls.width, controls.height, controls.canvas_width, controls.canvas_height].forEach(function(lex){
+ [
+ controls.width,
+ controls.height,
+ controls.canvas_width,
+ controls.canvas_height
+ ].forEach(function(lex){
lex.span.addEventListener('mousedown', function(e){
lex.focus()
})
@@ -120,6 +146,8 @@ var controls = (function(){
controls.square,
controls.circle,
controls.text,
+ controls.fill,
+ controls.select,
controls.clear,
controls.grid,
controls.shader,
@@ -133,14 +161,14 @@ var controls = (function(){
})
controls.width.key = int_key(function(n, keyCode){
- controls.width.blur()
+ controls.width.blur()
controls.width.char = ""+n
controls.width.build()
brush.w = n
brush.rebuild()
})
controls.height.key = int_key(function(n, keyCode){
- controls.height.blur()
+ controls.height.blur()
controls.height.char = ""+n
controls.height.build()
brush.h = n
@@ -154,22 +182,36 @@ var controls = (function(){
}
controls.canvas_width.char = ""+n
controls.canvas_width.build()
- canvas.w = n
- canvas.rebuild()
- canvas.build()
})
+ controls.canvas_width.onBlur = function(){
+ var w = parseInt(controls.canvas_width.char) || 1
+ controls.canvas_width.char = w+""
+ controls.canvas_width.build()
+ canvas.resize(w, canvas.h)
+ }
+
controls.canvas_height.key = int_key(function(n, keyCode){
controls.canvas_height.read()
- if (controls.canvas_height.char.length == 1) {
+ if (controls.canvas_height.char.length < 3) {
n = parseInt(controls.canvas_height.char) * 10 + n
}
controls.canvas_height.char = ""+n
controls.canvas_height.build()
- canvas.h = n
- canvas.rebuild()
- canvas.build()
})
+ controls.canvas_height.onBlur = function(){
+ var h = parseInt(controls.canvas_height.char) || 1
+ controls.canvas_height.char = h+""
+ controls.canvas_height.build()
+ canvas.resize(canvas.w, h)
+ }
}
+ function int_key (f) {
+ return function (key, keyCode) {
+ var n = parseInt(key)
+ ! isNaN(n) && f(n)
+ }
+ }
+
return controls
})() \ No newline at end of file
diff --git a/js/ui/keys.js b/js/ui/keys.js
index 7711e9d..1915333 100644
--- a/js/ui/keys.js
+++ b/js/ui/keys.js
@@ -5,7 +5,7 @@ var keys = (function(){
keys.bind = function(){
cursor_input.addEventListener('keydown', function(e){
- console.log("keycode:", e.keyCode)
+ // console.log("keycode:", e.keyCode)
switch (e.keyCode) {
case 27: // esc
@@ -69,12 +69,14 @@ var keys = (function(){
var char = cursor_input.value
cursor_input.value = ""
- console.log("input:", char)
+ // console.log("input:", char)
if (focused && char) {
var y = focused.y, x = focused.x
focused.key(char, e.keyCode)
- current_canvas.focusLex(y + direction[0], focused.x + direction[1])
+ if (! ('y' in focused && 'x' in focused) ) { return }
+ // console.log(y, direction[0], x, direction[1])
+ current_canvas.focusLex(y + direction[0], x + direction[1])
}
})
}
diff --git a/js/ui/palette.js b/js/ui/palette.js
index ce8078e..54211fb 100644
--- a/js/ui/palette.js
+++ b/js/ui/palette.js
@@ -2,7 +2,7 @@ var palette = (function(){
var palette = new Matrix (32, 2, function(x,y){
var lex = new Lex (x,y)
- lex.bg = all_hue(x>>1)
+ lex.bg = all_inv_hue(x>>1)
lex.build()
return lex
})
diff --git a/js/ui/selection.js b/js/ui/selection.js
new file mode 100644
index 0000000..cbd15bf
--- /dev/null
+++ b/js/ui/selection.js
@@ -0,0 +1,148 @@
+var selection = (function(){
+
+ var creating = false, moving = false, copying = false
+
+ var selection_canvas = new Matrix (1, 1, function(x,y){
+ var lex = new Lex (x,y)
+ lex.build()
+ return lex
+ })
+
+ var selector_el = document.createElement("div")
+ selector_el.className = "selector_el"
+ selection_canvas.append(selector_el)
+ document.body.appendChild(selector_el)
+
+ // in selection mode..
+ // - we start by clicking the canvas. this positions the selection, and copies
+ // the character
+ // - then we drag down and to the right. this resizes the selection and pushes new
+ // rows and columns. each of these copies the character underneath.
+ // - on mouseup, the selection is locked. then..
+ // - drag the selection to move it -- this "cuts" it and leaves a blank space on the canvas.
+ // - shift-drag the selection to copy it
+
+ var a = [0, 0]
+ var b = [0, 0]
+ var c = [0, 0]
+ var d = [0, 0]
+
+ function reset () {
+ a[0] = a[1] = b[0] = b[1] = 0
+ }
+ function left (a,b) { return min(a[0],b[0]) }
+ function top (a,b) { return min(a[1],b[1]) }
+ function right (a,b) { return max(a[0],b[0]) }
+ function bottom (a,b) { return max(a[1],b[1]) }
+ function width (a,b) { return abs(a[0]-b[0])+1 }
+ function height (a,b) { return abs(a[1]-b[1])+1 }
+ function mag_x (a,b) { return a[0]-b[0] }
+ function mag_y (a,b) { return a[1]-b[1] }
+ function orient (a,b) {
+ var l = left(a,b), m = top(a,b), n = right(a,b), o = bottom(a,b)
+ a[0] = l ; a[1] = m ; b[0] = n ; b[1] = o
+ }
+
+ function contains (a,b,point) {
+ var contains_x = a[0] <= point[0] && point[0] <= b[0]
+ var contains_y = a[1] <= point[1] && point[1] <= b[1]
+ return (contains_x && contains_y)
+ }
+ function reposition (a,b) {
+ var cell = canvas.aa[top(a,b)][left(a,b)].span
+ var cell_left = cell.offsetLeft
+ var cell_top = cell.offsetTop
+ var cell_width = 9
+ var cell_height = 17
+ var w = width(a,b)
+ var h = height(a,b)
+ selector_el.style.top = (cell_top-1) + "px"
+ selector_el.style.left = (cell_left-2) + "px"
+ selector_el.style.width = (cell_width*w+1) + "px"
+ selector_el.style.height = (cell_height*h+1) + "px"
+ }
+ function down (e, lex, point){
+ if ( ! contains(a,b,point) ) {
+ copying = false
+ moving = false
+ creating = true
+ a[0] = point[0]
+ a[1] = point[1]
+ b[0] = point[0]
+ b[1] = point[1]
+ reposition(a,b)
+ selector_el.classList.add("creating")
+ } else {
+ copying = false
+ moving = true
+ creating = false
+ c[0] = point[0]
+ c[1] = point[1]
+ d[0] = point[0]
+ d[1] = point[1]
+ }
+ show()
+ selector_el.classList.remove("dragging")
+ }
+ function move (e, lex, point){
+ if (creating) {
+ b[0] = point[0]
+ b[1] = point[1]
+ reposition(a,b)
+ }
+ else if (moving) {
+ d[0] = point[0]
+ d[1] = point[1]
+ var dx = - clamp( mag_x(c,d), b[0] - canvas.w + 1, a[0] )
+ var dy = - clamp( mag_y(c,d), b[1] - canvas.h + 1, a[1] )
+ reposition( [ a[0] + dx, a[1] + dy ], [ b[0] + dx, b[1] + dy ])
+ }
+ else if (copying) {
+ }
+ }
+ function up (e) {
+ if (creating) {
+ orient(a,b)
+ selection_canvas.resize(width(a,b), height(a,b))
+ blit.copy_from( canvas, selection_canvas, a[0], a[1] )
+ selection_canvas.build()
+ selector_el.classList.remove("creating")
+ }
+ if (moving) {
+ var dx = - clamp( mag_x(c,d), b[0] - canvas.w + 1, a[0] )
+ var dy = - clamp( mag_y(c,d), b[1] - canvas.h + 1, a[1] )
+ a[0] += dx
+ a[1] += dy
+ b[0] += dx
+ b[1] += dy
+ blit.copy_to( canvas, selection_canvas, a[0], a[1] )
+ }
+ if (copying) {
+ }
+ creating = moving = copying = false
+ selector_el.classList.remove("dragging")
+ }
+
+ function show () {
+ selecting = true
+ controls.grid.show()
+ }
+ function hide () {
+ reset()
+ selector_el.style.top = "-9999px"
+ selector_el.style.left = "-9999px"
+ selector_el.style.width = "0px"
+ selector_el.style.height = "0px"
+ selecting = false
+ }
+
+ var selection = {}
+ selection.down = down
+ selection.move = move
+ selection.up = up
+ selection.canvas = selection_canvas
+ selection.show = show
+ selection.hide = hide
+ return selection
+
+})()
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-11 21:01:32 +0000