vertical palette

author: Jules Laplace <jules@okfoc.us> 2015-06-23 10:13:38 -0400
committer: Jules Laplace <jules@okfoc.us> 2015-06-23 10:13:38 -0400
commit: c4860b7340f84caf291114a37eece5ce0498ee00 (patch)
tree: 2bb2c33b5f075e9537273cc488adf113f0b29dfe
parent: bff03a8d7cec99b01e9967c0784b6ee6f4ed1703 (diff)
7 files changed, 69 insertions, 16 deletions
diff --git a/css/sally.css b/css/sally.css
index 4acd3a7..bdc3e61 100644
--- a/css/sally.css
+++ b/css/sally.css
@@ -85,22 +85,34 @@ textarea { font-size:12pt; width: 37vw; height: 300px; background: #333; color:
 #shader_rapper { display: none; }
 #import_rapper { display: none; }
 #canvas_rapper {
+	white-space: pre;
   box-shadow: 0 0 2px rgba(255,255,255,0.3);
   margin: 3px;
 }
-div.rotated {
-	width: 100%;
-}
+
+#ui_rapper { clear:both; float: left; }
+#workspace_rapper { width: 100%; }
+
+.loading .vertical #ui_rapper { clear: none }
+.vertical #ui_rapper { width: 300px; float: left; clear: none; }
+.vertical .rapper, .vertical .block { float: left; }
+.vertical #canvas_rapper,
+.vertical #canvas_rapper div,
+.vertical #tools_rapper,
+.vertical #palette_rapper,
+.vertical #brush_container { display: inline-block; float: left}
+.vertical #workspace_rapper { width: auto; position: relative; float: left; }
+.vertical #palette_rapper { margin-right: 10px; }
+.vertical #tools_block { min-width: 100%; }
+
+#experimental_palette_toggle { float: left; clear: right; }
+
 .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 7bb07ab..e498f9d 100644
--- a/index.html
+++ b/index.html
@@ -4,14 +4,14 @@
 
 <body class="loading">
 
-  <div>
+  <div id="workspace_rapper">
     <div id="canvas_rapper" class="rapper"></div>
   </div>
 
-  <div style="clear:both;width: 300px;float: left;">
+  <div id="ui_rapper">
     <div class="block" id="tools_block">
       <div id="palette_rapper"></div>
-      <span id="experimental_palette_toggle">.</div>
+      <span id="experimental_palette_toggle">.</span>
       <div id="letters_rapper"></div>
       <div id="custom_rapper"></div>
     </div>
@@ -35,6 +35,7 @@
       <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>
+			<span id="vertical_checkbox" class="tool">_ vertical</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/app.js b/js/app.js
index d65f239..0532c81 100644
--- a/js/app.js
+++ b/js/app.js
@@ -32,6 +32,7 @@ function build () {
   brush.build()
 
   // controls.grid.use()
+  controls.rotate.refresh()
 }
 function bind () {
   canvas.bind()
diff --git a/js/matrix.js b/js/matrix.js
index f661ceb..90ff7fc 100644
--- a/js/matrix.js
+++ b/js/matrix.js
@@ -182,7 +182,7 @@ Matrix.prototype.resize = function(w,h){
   this.h = h
   this.bind && this.bind()
 
-  if (this.rotated) { controls.rotate.use(this.rotated) }
+  if (this.rotated) { controls.rotate.refresh(this.rotated) }
 }
 
 //
diff --git a/js/ui/controls.js b/js/ui/controls.js
index 3b9dfc4..50eea73 100644
--- a/js/ui/controls.js
+++ b/js/ui/controls.js
@@ -199,22 +199,45 @@ var controls = (function(){
   controls.rotate = new BlurredCheckbox (rotate_checkbox)
   controls.rotate.use = function(state){
   	canvas.rotated = typeof state == "boolean" ? state : ! canvas.rotated
+  	controls.rotate.refresh()
+  }
+  controls.rotate.refresh = function(){
 		if (canvas.rotated) {
 			canvas_rapper.parentNode.classList.add("rotated")
-			canvas_rapper.parentNode.style.height = (canvas_rapper.offsetWidth+20) + "px"
-			// canvas_rapper.parentNode.style.width = (canvas_rapper.offsetHeight+20) + "px"
+			canvas_rapper.parentNode.style.height = (canvas_rapper.firstChild.offsetWidth+20) + "px"
+			canvas_rapper.parentNode.style.width = (canvas_rapper.offsetHeight+20) + "px"
 			canvas_rapper.style.top = ((canvas_rapper.offsetWidth+20)/2) + "px"
 			// canvas_rapper.style.left = ((canvas_rapper.offsetHeight+20)/2) + "px"
 		}
 		else {
 			canvas_rapper.parentNode.classList.remove("rotated")
 			canvas_rapper.parentNode.style.height = ""
-			// canvas_rapper.parentNode.style.width = (canvas_rapper.offsetWidth+20) + "px"
+			canvas_rapper.style.width = 
+			canvas_rapper.parentNode.style.width = (canvas_rapper.firstChild.offsetWidth+20) + "px"
 			canvas_rapper.style.top = ""
 			// canvas_rapper.style.left = "auto"
 		}
 		this.update(canvas.rotated)
   }
+  
+  //
+  
+  controls.vertical = new BlurredCheckbox (vertical_checkbox)
+  controls.vertical.use = function(state){
+  	canvas.vertical = typeof state == "boolean" ? state : ! canvas.vertical
+  	controls.vertical.refresh()
+  }
+  controls.vertical.refresh = function(){
+		if (canvas.vertical) {
+			document.body.classList.add("vertical")
+		}
+		else {
+			document.body.classList.remove("vertical")
+		}
+		palette.repaint()
+		letters.repaint()
+		this.update(canvas.vertical)
+	}
 
   //
   
@@ -251,6 +274,7 @@ var controls = (function(){
       controls.bg,
       controls.char,
       controls.rotate,
+      controls.vertical,
       controls.shader,
       controls.animate,
       controls.save,
diff --git a/js/ui/letters.js b/js/ui/letters.js
index 702512a..36d778b 100644
--- a/js/ui/letters.js
+++ b/js/ui/letters.js
@@ -19,11 +19,17 @@ var letters = (function(){
     last_charset = charset
     var chars = unicode.block(charset, 32)
     if (chars[0] != " ") chars.unshift(" ")
-    letters.resize( 32, Math.ceil( chars.length / 32 ) )
+    if (canvas.vertical) {
+			letters.resize( Math.ceil( chars.length / 16 ), 16 )
+    }
+    else {
+			letters.resize( 32, Math.ceil( chars.length / 32 ) )
+    }
 
     var i = 0
 
   	letters.forEach(function(lex,x,y){
+  		if (canvas.vertical) { x=x^y;y=x^y;x=x^y }
   	  var char = chars[i++]
   	  if (palette.chars.indexOf(brush.char) > 1) {
         lex.bg = brush.fg
@@ -40,7 +46,7 @@ var letters = (function(){
 	}
   
   letters.bind = function(){
-    letters.forEach(function(lex, x, y){
+    letters.forEach(function(lex,x,y){
       if (lex.bound) return
       lex.bound = true
 
diff --git a/js/ui/palette.js b/js/ui/palette.js
index 1fc17cf..7417316 100644
--- a/js/ui/palette.js
+++ b/js/ui/palette.js
@@ -11,7 +11,16 @@ var palette = (function(){
   palette.chars = "  ▓▒░"
 
   palette.repaint = function(){
+		var xw = use_experimental_palette ? 5 : 2
+    if (canvas.vertical) {
+			palette.resize( xw, 16 )
+    }
+    else {
+			palette.resize( 32, xw )
+    }
+
   	palette.forEach(function(lex,x,y){
+  		if (canvas.vertical) { x=x^y;y=x^y;x=x^y;x*=2 }
   		if (y < 2) {
 				lex.bg = palette_fn(x>>1)
 				lex.fg = palette_fn(x>>1)
author	Jules Laplace <jules@okfoc.us>	2015-06-23 10:13:38 -0400
committer	Jules Laplace <jules@okfoc.us>	2015-06-23 10:13:38 -0400
commit	c4860b7340f84caf291114a37eece5ce0498ee00 (patch)
tree	2bb2c33b5f075e9537273cc488adf113f0b29dfe
parent	bff03a8d7cec99b01e9967c0784b6ee6f4ed1703 (diff)