From c4860b7340f84caf291114a37eece5ce0498ee00 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 23 Jun 2015 10:13:38 -0400 Subject: vertical palette --- css/sally.css | 26 +++++++++++++++++++------- index.html | 7 ++++--- js/app.js | 1 + js/matrix.js | 2 +- js/ui/controls.js | 30 +++++++++++++++++++++++++++--- js/ui/letters.js | 10 ++++++++-- js/ui/palette.js | 9 +++++++++ 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 @@ -
+
-
+
- .
+ .
@@ -35,6 +35,7 @@ select
_ grid
_ rotate
+ _ vertical

brush size: 5 x 5
canvas size: 100 x 30
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) -- cgit v1.2.3-70-g09d2