[gnome-characters/bilelmoussaoui/gtk4] characters view: center characters on the view

[Bilal Elmoussaoui <bilelmoussaoui src gnome org>]

commit 838f4e8e157a2a030f5413c5f3801760a66ce372
Author: Bilal Elmoussaoui <bil elmoussaoui gmail com>
Date:   Wed Nov 24 10:25:58 2021 +0100

    characters view: center characters on the view
    
    instead of empty space on one side

 src/charactersView.js | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)
---
diff --git a/src/charactersView.js b/src/charactersView.js
index c49ec90..0eb99b5 100644
--- a/src/charactersView.js
+++ b/src/charactersView.js
@@ -389,11 +389,13 @@ var CharactersView = GObject.registerClass({
 
         let start = Math.max(0, Math.floor(scrollPos / cellSize));
         let end = Math.min(this._rows.length, Math.ceil((scrollPos + vadj.get_page_size()) / cellSize));
-        let offset = scrollPos % cellSize;
+        let offsetY = scrollPos % cellSize;
 
-        snapshot.translate(new Graphene.Point({ x: 0, y: -offset }));
+        snapshot.translate(new Graphene.Point({ x: 0, y: -offsetY }));
 
-        let borderColor = styleContext.lookup_color("borders")[1];
+        let borderColor = styleContext.lookup_color('borders')[1];
+        let allocatedWidth = this.get_allocation().width;
+        let offsetX = (allocatedWidth - cellSize * this._cellsPerRow) / 2;
 
         for (let index = start; index < end; index++) {
             let y = (index - start) * cellSize;
@@ -401,10 +403,10 @@ var CharactersView = GObject.registerClass({
             // Draw baseline.
             snapshot.append_color(borderColor, new Graphene.Rect({
                 origin: new Graphene.Point({ x: 0, y: y + BASELINE_OFFSET * cellSize }),
-                size: new Graphene.Size({ width: this.get_allocation().width, height: 1.0 }),
+                size: new Graphene.Size({ width: allocatedWidth, height: 1.0 }),
             }));
 
-            this._rows[index].snapshot(snapshot, 0, y, pangoContext, styleContext);
+            this._rows[index].snapshot(snapshot, offsetX, y, pangoContext, styleContext);
         }
     }