fix: change the baseline for more robust vertical position ht Marco

elastic · Mar 23, 2021 · cb12f05 · cb12f05
1 parent 5f2e3bb
commit cb12f05
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/...r-all-stories-small-multiples-alpha-sunbursts-visually-looks-correct-1-snap.png b/...r-all-stories-small-multiples-alpha-sunbursts-visually-looks-correct-1-snap.png
diff --git a/src/chart_types/partition_chart/renderer/canvas/canvas_renderers.ts b/src/chart_types/partition_chart/renderer/canvas/canvas_renderers.ts
@@ -232,6 +232,9 @@ function renderLinkLabels(
   });
 }
 
+const midlineOffset = 0.35; // 0.35 is a [common constant](http://tavmjong.free.fr/SVG/TEXT_IN_A_BOX/index.html) representing half height
+const innerPad = midlineOffset * panelTitleFontSize; // todo replace it with theme.axisPanelTitle.padding.inner
+
 /** @internal */
 export function renderPartitionCanvas2d(
   ctx: CanvasRenderingContext2D,
@@ -265,19 +268,21 @@ export function renderPartitionCanvas2d(
     //     - due to using the math x/y convention (+y is up) while Canvas uses screen convention (+y is down)
     //         text rendering must be y-flipped, which is a bit easier this way
     ctx.textAlign = 'center';
-    ctx.textBaseline = 'middle';
+    ctx.textBaseline = 'bottom';
 
     // panel titles
     ctx.fillText(
       panelTitle,
       isSunburst(config.partitionLayout) ? diskCenter.x : diskCenter.x + (config.width * width) / 2,
       isSunburst(config.partitionLayout)
         ? config.linkLabel.maxCount > 0
-          ? diskCenter.y - (config.height * height) / 2 + 12
-          : diskCenter.y - outerRadius - panelTitleFontSize
+          ? diskCenter.y - (config.height * height) / 2 + panelTitleFontSize
+          : diskCenter.y - outerRadius - innerPad
         : diskCenter.y + 12,
     );
 
+    ctx.textBaseline = 'middle';
+
     ctx.translate(diskCenter.x, diskCenter.y);
     // this applies the mathematical x/y conversion (+y is North) which is easier when developing geometry
     // functions - also, all renderers have flexibility (eg. SVG scale) and WebGL NDC is also +y up