diff options
| -rw-r--r-- | css/sally.css | 26 | ||||
| -rw-r--r-- | index.html | 7 | ||||
| -rw-r--r-- | js/app.js | 1 | ||||
| -rw-r--r-- | js/matrix.js | 2 | ||||
| -rw-r--r-- | js/ui/controls.js | 30 | ||||
| -rw-r--r-- | js/ui/letters.js | 10 | ||||
| -rw-r--r-- | 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; @@ -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> @@ -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) |