[gnome-characters] characterList: Refactor invisible-char display

[Daiki Ueno <dueno src gnome org>]

commit 9c9a6df2c923e1eb29cda830e0afaef61d052a24
Author: Daiki Ueno <dueno src gnome org>
Date:   Mon Dec 14 16:52:25 2015 +0900

    characterList: Refactor invisible-char display

 src/characterList.js |   73 +++++++++++++++++++++++++++++++++----------------
 1 files changed, 49 insertions(+), 24 deletions(-)
---
diff --git a/src/characterList.js b/src/characterList.js
index 8522d79..7788bf0 100644
--- a/src/characterList.js
+++ b/src/characterList.js
@@ -75,11 +75,15 @@ const CharacterListRow = new Lang.Class({
         // Draw characters.  Do centering and attach to the baseline.
         let cellSize = getCellSize(this._fontDescription);
         for (let i in this._characters) {
-            layout.set_text(this._characters[i], -1);
-            if (Gc.character_is_invisible (this._characters[i])) {
-                this._drawOverlay(cr, x + cellSize * i, y, cellSize, cellSize,
-                                  this._characters[i]);
+            var cellRect = new Gdk.Rectangle({ x: x + cellSize * i,
+                                               y: y,
+                                               width: cellSize,
+                                               height: cellSize });
+            if (Gc.character_is_invisible(this._characters[i])) {
+                this._drawBoundingBox(cr, cellRect, this._characters[i]);
+                this._drawCharacterName(cr, cellRect, this._characters[i]);
             } else {
+                layout.set_text(this._characters[i], -1);
                 let layoutBaseline = layout.get_baseline();
                 let [logicalRect, inkRect] = layout.get_extents();
                 cr.moveTo(x + cellSize * i - logicalRect.x / Pango.SCALE +
@@ -91,31 +95,52 @@ const CharacterListRow = new Lang.Class({
         }
     },
 
-    _drawOverlay: function(cr, x, y, width, height, uc) {
+    _computeBoundingBox: function(cr, cellRect, uc) {
+        let layout = PangoCairo.create_layout(cr);
+        layout.set_font_description(this._fontDescription);
+        layout.set_text(uc, -1);
+        let layoutBaseline = layout.get_baseline();
+
+        let [logicalRect, inkRect] = layout.get_extents();
+
+        inkRect.x = cellRect.x - inkRect.x / Pango.SCALE +
+            (cellRect.width - inkRect.width / Pango.SCALE) / 2;
+        inkRect.y = cellRect.y + BASELINE_OFFSET * cellRect.height -
+            layoutBaseline / Pango.SCALE;
+        inkRect.width = inkRect.width / Pango.SCALE;
+        inkRect.height = inkRect.height / Pango.SCALE;
+        return inkRect;
+    },
+
+    _drawBoundingBox: function(cr, cellRect, uc) {
         cr.save();
-        cr.rectangle(x, y, width, height);
+        cr.rectangle(cellRect.x, cellRect.y, cellRect.width, cellRect.height);
         cr.clip();
 
-        // Draw character shape as a gray rectangle.
         let layout = PangoCairo.create_layout(cr);
-        layout.set_text(uc, -1);
         layout.set_font_description(this._fontDescription);
-        let layoutBaseline = layout.get_baseline();
-        let [logicalRect, inkRect] = layout.get_extents();
-        let x0 = x - inkRect.x / Pango.SCALE +
-            (width - inkRect.width / Pango.SCALE) / 2;
-        let y0 = y + BASELINE_OFFSET * height - layoutBaseline / Pango.SCALE;
+        layout.set_text(uc, -1);
+        let shapeRect = this._computeBoundingBox(cr, cellRect, uc);
+
         let borderWidth = 1;
-        cr.rectangle(x0 - borderWidth * 2,
-                     y0 - borderWidth * 2,
-                     inkRect.width / Pango.SCALE + borderWidth * 2,
-                     inkRect.height / Pango.SCALE + borderWidth * 2);
+        cr.rectangle(shapeRect.x - borderWidth * 2,
+                     shapeRect.y - borderWidth * 2,
+                     shapeRect.width + borderWidth * 2,
+                     shapeRect.height + borderWidth * 2);
         cr.setSourceRGBA(239.0 / 255.0, 239.0 / 255.0, 239.0 / 255.0, 1.0);
         cr.fill();
 
-        // Draw character name.
-        layout.set_width(width * Pango.SCALE * 0.8);
-        layout.set_height(height * Pango.SCALE * 0.8);
+        cr.restore();
+    },
+
+    _drawCharacterName: function(cr, cellRect, uc) {
+        cr.save();
+        cr.rectangle(cellRect.x, cellRect.y, cellRect.width, cellRect.height);
+        cr.clip();
+
+        let layout = PangoCairo.create_layout(cr);
+        layout.set_width(cellRect.width * Pango.SCALE * 0.8);
+        layout.set_height(cellRect.height * Pango.SCALE * 0.8);
         layout.set_wrap(Pango.WrapMode.WORD);
         layout.set_ellipsize(Pango.EllipsizeMode.END);
         layout.set_alignment(Pango.Alignment.CENTER);
@@ -123,10 +148,10 @@ const CharacterListRow = new Lang.Class({
         var name = Gc.character_name(uc);
         layout.set_text(Util.capitalize(name), -1);
         let [logicalRect, inkRect] = layout.get_extents();
-        cr.moveTo(x - logicalRect.x / Pango.SCALE +
-                  (width - logicalRect.width / Pango.SCALE) / 2,
-                  y - logicalRect.y / Pango.SCALE +
-                  (height - logicalRect.height / Pango.SCALE) / 2);
+        cr.moveTo(cellRect.x - logicalRect.x / Pango.SCALE +
+                  (cellRect.width - logicalRect.width / Pango.SCALE) / 2,
+                  cellRect.y - logicalRect.y / Pango.SCALE +
+                  (cellRect.height - logicalRect.height / Pango.SCALE) / 2);
         cr.setSourceRGBA(0.0, 0.0, 0.0, 1.0);
         PangoCairo.show_layout(cr, layout);