From de40b08a269147ae409cfa1bfef634cd683cda8d Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Sat, 25 Mar 2017 00:47:23 +0100
Subject: translate and rotate

---
 index.html             |  10 +++-
 js/app.js              |   4 ++
 js/ui/canvas.js        |   6 ++
 js/ui/controls.js      |  46 ++++++++++++---
 js/ui/transform.js     | 156 +++++++++++++++++++++++++++++++++++++++++++++++++
 js/vendor/colorcode.js |   1 -
 6 files changed, 213 insertions(+), 10 deletions(-)
 create mode 100644 js/ui/transform.js

diff --git a/index.html b/index.html
index 074080f..586d414 100644
--- a/index.html
+++ b/index.html
@@ -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>
diff --git a/js/app.js b/js/app.js
index 3531d7c..e0b737d 100644
--- a/js/app.js
+++ b/js/app.js
@@ -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;
-- 
cgit v1.2.3-70-g09d2