Issue #33 - demonstrate vertical text alignment

danielearwicker · May 23, 2015 · c55f3f9 · c55f3f9
1 parent 36cb7c7
commit c55f3f9
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 8 deletions.
diff --git a/index.html b/index.html
@@ -121,6 +121,11 @@
         <button id="smiley"><img src="smiley.png"></button>
         <button id="undo">Undo</button>
         <button id="redo">Redo</button>
+        <select id="valign">
+            <option value="top">Top</option>
+            <option value="middle">Middle</option>
+            <option value="bottom">Bottom</option>
+        </select>
     </div>
 
     <div id="exampleEditor"></div>
@@ -371,6 +376,11 @@ <h1>How to use it</h1>
             });
         });
 
+        var valign = document.querySelector('#valign')
+        carota.dom.handleEvent(valign, 'change', function() {
+            exampleEditor.setVerticalAlignment(valign.value);
+        });
+
         // We don't update the JSON view until half a second after the last change
         // to avoid slowing things down too much
         var persistenceTextArea = document.querySelector('#examplePersistence textarea');

diff --git a/src/editor.js b/src/editor.js
@@ -285,6 +285,26 @@ exports.create = function(element) {
         console.log(ev.which);
     });
 
+    var verticalAlignment = 'top';
+
+    doc.setVerticalAlignment = function(va) {
+        verticalAlignment = va;
+        paint();
+    }
+
+    function getVerticalOffset() {
+        var docHeight = doc.frame.bounds().h;
+        if (docHeight < element.clientHeight) { 
+            switch (verticalAlignment) {
+                case 'middle':
+                    return (element.clientHeight - docHeight) / 2;
+                case 'bottom':
+                    return element.clientHeight - docHeight;
+            }
+        }
+        return 0;
+    }
+
     var paint = function() {
 
         var availableWidth = element.clientWidth * 1; // adjust to 0.5 to see if we draw in the wrong places!
@@ -319,7 +339,8 @@ exports.create = function(element) {
         ctx.scale(dpr, dpr);
 
         ctx.clearRect(0, 0, logicalWidth, logicalHeight);
-        ctx.translate(0, -element.scrollTop);
+        ctx.translate(0, getVerticalOffset() - element.scrollTop);
+
         doc.draw(ctx, rect(0, element.scrollTop, logicalWidth, logicalHeight));
         doc.drawSelection(ctx, selectDragStart || (document.activeElement === textArea));
     };
@@ -384,25 +405,28 @@ exports.create = function(element) {
         }
     });
 
-    dom.handleMouseEvent(spacer, 'mousedown', function(ev, x, y) {
-        var node = doc.byCoordinate(x, y);
+    function registerMouseEvent(name, handler) {
+        dom.handleMouseEvent(spacer, name, function(ev, x, y) {
+            handler(doc.byCoordinate(x, y - getVerticalOffset()));
+        });
+    }
+
+    registerMouseEvent('mousedown', function(node) {
         selectDragStart = node.ordinal;
         doc.select(node.ordinal, node.ordinal);
         keyboardX = null;
     });
 
-    dom.handleMouseEvent(spacer, 'dblclick', function(ev, x, y) {
-        var node = doc.byCoordinate(x, y);
+    registerMouseEvent('dblclick', function(node) {
         node = node.parent();
         if (node) {
             doc.select(node.ordinal, node.ordinal +
                 (node.word ? node.word.text.length : node.length));
         }
     });
 
-    dom.handleMouseEvent(spacer, 'mousemove', function(ev, x, y) {
+    registerMouseEvent('mousemove', function(node) {
         if (selectDragStart !== null) {
-            var node = doc.byCoordinate(x, y);
             if (node) {
                 focusChar = node.ordinal;
                 if (selectDragStart > node.ordinal) {
@@ -414,7 +438,7 @@ exports.create = function(element) {
         }
     });
 
-    dom.handleMouseEvent(spacer, 'mouseup', function(ev, x, y) {
+    registerMouseEvent('mouseup', function(node) {
         selectDragStart = null;
         keyboardX = null;
         updateTextArea();