diff options
| -rw-r--r-- | index.html | 10 | ||||
| -rw-r--r-- | js/app.js | 4 | ||||
| -rw-r--r-- | js/ui/canvas.js | 6 | ||||
| -rw-r--r-- | js/ui/controls.js | 46 | ||||
| -rw-r--r-- | js/ui/transform.js | 156 | ||||
| -rw-r--r-- | js/vendor/colorcode.js | 1 |
6 files changed, 213 insertions, 10 deletions
@@ -42,12 +42,17 @@ <span id="fill_el" class="tool">fill</span><br> <span id="select_el" class="tool">select</span><br> <br> + <span id="rotate_el" class="tool">rotate</span><br> + <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> + <br> <span id="undo_el" class="tool hidden">undo</span><br> <span id="redo_el" class="tool hidden">redo</span><br> <br> <span id="grid_el" class="tool">_ grid</span><br> - <span id="rotate_checkbox" class="tool">_ rotate</span><br> - <span id="vertical_checkbox" class="tool">_ vertical</span><br> + <!-- <span id="rotate_checkbox" class="tool">_ rotate</span><br> --> + <span id="vertical_checkbox" class="tool">x vertical</span><br> <span id="pixels_checkbox" class="tool">_ pixels</span><br> <br> brush size: <span id="brush_w_el" class="ed">5</span> x <span id="brush_h_el" class="ed">5</span><br> @@ -137,6 +142,7 @@ <script src="js/ui/palette.js"></script> <script src="js/ui/letters.js"></script> <script src="js/ui/selection.js"></script> +<script src="js/ui/transform.js"></script> <script src="js/ui/nopaint.js"></script> <script src="js/app.js"></script> @@ -5,6 +5,7 @@ var erasing = false var selecting = false var filling = false var changed = false +var transforming = false var focused var canvas, tools, palette, controls, brush, mode @@ -61,6 +62,9 @@ function bind () { if (selecting) { selection.up(e) } + else if (transforming) { + transform.up(e) + } }) window.addEventListener("touchend", function(){ dragging = false diff --git a/js/ui/canvas.js b/js/ui/canvas.js index 75b8f97..ca14323 100644 --- a/js/ui/canvas.js +++ b/js/ui/canvas.js @@ -44,6 +44,9 @@ var canvas = current_canvas = (function(){ else if (selecting) { selection.down(e, lex, point) } + else if (transforming) { + transform.down(e, lex, point) + } else if (filling) { undo.new() draw.fill(brush, x, y) @@ -62,6 +65,9 @@ var canvas = current_canvas = (function(){ else if (selecting) { selection.move(e, lex, point) } + else if (transforming) { + transform.move(e, lex, point) + } canvas.focus(x, y) }) diff --git a/js/ui/controls.js b/js/ui/controls.js index 06cd171..1dd83c7 100644 --- a/js/ui/controls.js +++ b/js/ui/controls.js @@ -56,6 +56,38 @@ var controls = (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 @@ -222,13 +254,13 @@ var controls = (function(){ // - controls.rotate = new BlurredCheckbox (rotate_checkbox) - controls.rotate.memorable = true - controls.rotate.use = function(state){ - canvas.rotated = typeof state == "boolean" ? state : ! canvas.rotated - canvas.resize_rapper() - this.update(canvas.rotated) - } +// 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 diff --git a/js/ui/transform.js b/js/ui/transform.js new file mode 100644 index 0000000..b0ef894 --- /dev/null +++ b/js/ui/transform.js @@ -0,0 +1,156 @@ +var transform = (function(){ + + var p = [0,0], q = [0,0] + var mode + var copy + + function down (e, lex, point){ + p[0] = point[0] + p[1] = point[1] + q[0] = e.pageX + q[1] = e.pageY + undo.new() + undo.save_rect(0, 0, canvas.w, canvas.h) + copy = canvas.clone() + mode.init(e) + } + function move (e, lex, point){ + var pdx = point[0] - p[0] + var pdy = point[1] - p[1] + var dx = e.pageX - q[0] + var dy = e.pageY - q[1] + var w = canvas.w + var h = canvas.h + mode.before(dx, dy, pdx, pdy) + for (var x = 0; x < w; x++) { + for (var y = 0; y < h; y++) { + lex = canvas.get(x, y) + if (! mode.shade( copy, canvas, lex, x, y, w, h )) { + lex.build() + } + } + } + } + function up (e){ + } + + var modes = { + + rotate: { + init: function(e){ + mode.theta = 0 + }, + before: function(dx, dy){ + var radius = dist(0, 0, dx, dy) + if (radius < 10) return + mode.theta = angle(0, 0, dx, -dy) + }, + shade: function(src, dest, lex, x, y, w, h){ + x = (x/w) * 2 - 1 + y = (y/h) * 2 - 1 + var ca = cos(mode.theta) + var sa = sin(mode.theta) + var a = x * ca - y * sa + var b = x * sa + y * ca + x = (a + 1) / 2 * w + y = (b + 1) / 2 * h + var copy = src.get(x, y) + lex.assign(copy) + return true + }, + }, + +/* + scale: { + init: function(e){ + }, + before: function(dx, dy){ + }, + shade: function(src, dest, lex, x, y, w, h){ + x = (x/w) * 2 - 1 + y = (y/h) * 2 - 1 + x *= this.x_scale + y *= this.y_scale + x = (x + 1) / 2 * w + y = (y + 1) / 2 * h + var copy = src.get(x, y) + lex.assign(copy) + return true + }, + }, +*/ + + translate: { + init: function(e){ + mode.dx = mode.dy = 0 + }, + before: function(dx, dy, pdx, pdy){ + mode.dx = -pdx + mode.dy = -pdy + }, + shade: function(src, dest, lex, x, y, w, h){ + var copy = src.get(x+mode.dx, y+mode.dy) + lex.assign(copy) + return true + }, + }, + + slice: { + init: function(e){ + mode.position = 0 + }, + before: function(dx, dy){ + var dd = mode.is_y ? dy : dx + mode.position = mod(mode.position + dd, mode.limit) + mode.direction = dy + copy.assign(canvas) + }, + shade: function(src, dest, lex, x, y, w, h){ + if (mode.is_y) { + if (y >= mode.position) { + var copy = src.get(x + mode.direction, y) + lex.assign(copy) + } + } + else if (x >= mode.position) { + var copy = src.get(x, y + mode.direction) + lex.assign(copy) + } + return true + }, + }, + +/* + mode: { + init: function(e){ + }, + before: function(dx, dy){ + }, + shade: function(src, dest, lex, x, y, w, h){ + }, + }, +*/ + } + + function set_mode(m){ + if (m in modes) { + mode = modes[m] + transforming = true + } + } + + function done(){ + transforming = false + copy && copy.demolish() + } + + return { + down: down, + move: move, + up: up, + set_mode: set_mode, + modes: modes, + done: done, + } + +})()
\ No newline at end of file diff --git a/js/vendor/colorcode.js b/js/vendor/colorcode.js index 75940d2..1d035d3 100644 --- a/js/vendor/colorcode.js +++ b/js/vendor/colorcode.js @@ -358,7 +358,6 @@ for (var i=0, wh; wh=fsexps[i]; i++){ } fonts[font.name] = font } -console.log(fonts) },{"../fontutil":7}],7:[function(require,module,exports){ var util = {}; module.exports = util; |