rotate button

4 files changed, 37 insertions, 1 deletions

diff --git a/css/sally.css b/css/sally.css
index b08ed8a..4acd3a7 100644
--- a/css/sally.css
+++ b/css/sally.css
@@ -88,6 +88,20 @@ textarea { font-size:12pt; width: 37vw; height: 300px; background: #333; color:
   box-shadow: 0 0 2px rgba(255,255,255,0.3);
   margin: 3px;
 }
+div.rotated {
+	width: 100%;
+}
+.rotated #canvas_rapper {
+	white-space: pre;
+  transform: translateX(-50%) translateY(-50%) translateZ(0) rotate(-90deg);
+  transform-origin: 50% 50%;
+	position: absolute;
+  left: 50%;
+}
+canvas_rapper.parentNode.style.height = (canvas_rapper.offsetWidth+20)+ "px"
+canvas_rapper.style.top = + "%"
+  top: 35%;
+
 #tools_block > * {
 	cursor: crosshair;
 }
diff --git a/index.html b/index.html
index 1f68f74..7bb07ab 100644
--- a/index.html
+++ b/index.html
@@ -34,6 +34,7 @@
       <br>
       <span id="select_el" class="tool">select</span><br>
       <span id="grid_el" class="tool">_ grid</span><br>
+			<span id="rotate_checkbox" class="tool">_ rotate</span><br>
       <br>
       brush size: <span id="width_el" class="ed">5</span> x <span id="height_el" class="ed">5</span><br>
       canvas size: <span id="canvas_width_el" class="ed">100</span> x <span id="canvas_height_el" class="ed">30</span><br>
diff --git a/js/matrix.js b/js/matrix.js
index 21963f1..0695810 100644
--- a/js/matrix.js
+++ b/js/matrix.js
@@ -181,6 +181,8 @@ Matrix.prototype.resize = function(w,h){
   this.w = w
   this.h = h
   this.bind && this.bind()
+
+  if (this.rotated) { controls.rotate.use() }
 }
 
 //
diff --git a/js/ui/controls.js b/js/ui/controls.js
index 6b34ff7..6e37834 100644
--- a/js/ui/controls.js
+++ b/js/ui/controls.js
@@ -167,7 +167,7 @@ var controls = (function(){
     controls.shader.focus()
     controls.shader.use(true)
   }
-  
+ 
   controls.experimental_palette = new HiddenCheckbox (experimental_palette_toggle)
   controls.experimental_palette.use = function(state){
     var state = palette.experimental()
@@ -195,6 +195,24 @@ var controls = (function(){
   }
   
   //
+
+  controls.rotate = new BlurredCheckbox (rotate_checkbox)
+  controls.rotate.use = function(state){
+  	canvas.rotated = typeof state == "boolean" ? state : ! canvas.rotated
+		if (canvas.rotated) {
+			canvas_rapper.parentNode.classList.add("rotated")
+			canvas_rapper.parentNode.style.height = (canvas_rapper.offsetWidth+20) + "px"
+			canvas_rapper.style.top = ((canvas_rapper.offsetWidth+20)/2) + "px"
+		}
+		else {
+			canvas_rapper.parentNode.classList.remove("rotated")
+			canvas_rapper.parentNode.style.height = (canvas_rapper.offsetHeight+20) + "px"
+			canvas_rapper.style.top = "auto"
+		}
+		this.update(canvas.rotated)
+  }
+
+  //
   
   controls.width = new Lex (width_el)
   controls.height = new Lex (height_el)
@@ -228,6 +246,7 @@ var controls = (function(){
       controls.fg,
       controls.bg,
       controls.char,
+      controls.rotate,
       controls.shader,
       controls.animate,
       controls.save,