refactor(cartesian): cartesian rendering iteration (#1286)

This commit discontinues the very large dimensions used for patterns; improves types; removes hundreds of lines; increases efficiency eg. by pre-transforming textures, upping O() and culling canvas2d API calls; code readability improvs eg. brevity and names; partial fix #1202  

BREAKING CHANGE: 
- `TextStyle.fontStyle` is no longer a `string`, it's the more specific `FontStyle`
- For symmetry, `fontStyle` in word cloud is also switching from `string` to `FontStyle`
- Certain text configurations included both `fill` and `textColor` for the text color; `fill` got removed, because `textColor` is part of the public `Font` type, and because `textColor` has clearer meaning than `fill`. Yet, some of the code used the `fill` property and/or made the `fill` property also mandatory. So, userland code needs to remove some `fill` property, and might need to ensure that the correct value is going into `textColor`
- `getRadians` got unpublished 
- No attempt to draw a rect border if there's not enough width/height for at least the specified border width (ie. width/height being at least twice the border width)

packages/charts/api/charts.api.md

@@ -745,6 +745,12 @@ export type FitConfig = {
     endValue?: number | 'nearest';
 };
 
+// @public (undocumented)
+export const FONT_STYLES: readonly ["normal", "italic", "oblique", "inherit", "initial", "unset"];
+
+// @public (undocumented)
+export type FontStyle = typeof FONT_STYLES[number];
+
 // @public
 export interface GeometryStateStyle {
     opacity: number;
@@ -900,7 +906,6 @@ export interface HeatmapConfig {
         label: Font & {
             fontSize: Pixels;
             maxWidth: Pixels | 'fill';
-            fill: string;
             align: TextAlign;
             baseline: TextBaseline;
             visible: boolean;
@@ -959,7 +964,6 @@ export interface HeatmapConfig {
         name: string;
         fontSize: Pixels;
         width: Pixels | 'auto';
-        fill: string;
         align: TextAlign;
         baseline: TextBaseline;
         visible: boolean;
@@ -973,7 +977,6 @@ export interface HeatmapConfig {
         width: Pixels | 'auto' | {
             max: Pixels;
         };
-        fill: string;
         baseline: TextBaseline;
         visible: boolean;
         padding: number | {
@@ -1996,7 +1999,7 @@ export interface TextStyle {
     // (undocumented)
     fontSize: number;
     // (undocumented)
-    fontStyle?: string;
+    fontStyle?: FontStyle;
     // (undocumented)
     padding: number | SimplePadding;
 }
@@ -2253,7 +2256,7 @@ export interface WordcloudConfigs {
     // (undocumented)
     fontFamily: string;
     // (undocumented)
-    fontStyle: string;
+    fontStyle: FontStyle;
     // (undocumented)
     fontWeight: number;
     // (undocumented)
@@ -2294,7 +2297,7 @@ export interface WordcloudSpec extends Spec {
     // (undocumented)
     fontFamily: string;
     // (undocumented)
-    fontStyle: string;
+    fontStyle: FontStyle;
     // (undocumented)
     fontWeight: number;
     // (undocumented)
@@ -2368,8 +2371,8 @@ export type YDomainRange = YDomainBase & DomainRange & LogScaleOptions;
 // Warnings were encountered during analysis:
 //
 // src/chart_types/heatmap/layout/types/config_types.ts:20:13 - (ae-forgotten-export) The symbol "SizeRatio" needs to be exported by the entry point index.d.ts
-// src/chart_types/heatmap/layout/types/config_types.ts:52:5 - (ae-forgotten-export) The symbol "TextAlign" needs to be exported by the entry point index.d.ts
-// src/chart_types/heatmap/layout/types/config_types.ts:53:5 - (ae-forgotten-export) The symbol "TextBaseline" needs to be exported by the entry point index.d.ts
+// src/chart_types/heatmap/layout/types/config_types.ts:51:5 - (ae-forgotten-export) The symbol "TextAlign" needs to be exported by the entry point index.d.ts
+// src/chart_types/heatmap/layout/types/config_types.ts:52:5 - (ae-forgotten-export) The symbol "TextBaseline" needs to be exported by the entry point index.d.ts
 // src/chart_types/partition_chart/layout/types/config_types.ts:139:5 - (ae-forgotten-export) The symbol "TimeMs" needs to be exported by the entry point index.d.ts
 // src/chart_types/partition_chart/layout/types/config_types.ts:140:5 - (ae-forgotten-export) The symbol "AnimKeyframe" needs to be exported by the entry point index.d.ts
 

packages/charts/src/chart_types/heatmap/layout/config/config.ts

@@ -41,7 +41,6 @@ export const config: Config = {
     name: 'X Value',
     visible: true,
     width: 'auto',
-    fill: 'black',
     fontSize: 12,
     fontFamily: 'Sans-Serif',
     fontStyle: 'normal',
@@ -58,7 +57,6 @@ export const config: Config = {
     name: 'Y Value',
     visible: true,
     width: 'auto',
-    fill: 'black',
     fontSize: 12,
     fontFamily: 'Sans-Serif',
     fontStyle: 'normal',
@@ -91,7 +89,6 @@ export const config: Config = {
     label: {
       visible: true,
       maxWidth: 'fill',
-      fill: 'black',
       fontSize: 10,
       fontFamily: 'Sans-Serif',
       fontStyle: 'normal',

packages/charts/src/chart_types/heatmap/layout/types/config_types.ts

@@ -48,7 +48,6 @@ export interface Config {
     name: string;
     fontSize: Pixels;
     width: Pixels | 'auto';
-    fill: string;
     align: TextAlign;
     baseline: TextBaseline;
     visible: boolean;
@@ -59,7 +58,6 @@ export interface Config {
     name: string;
     fontSize: Pixels;
     width: Pixels | 'auto' | { max: Pixels };
-    fill: string;
     baseline: TextBaseline;
     visible: boolean;
     padding: number | { left?: number; right?: number; top?: number; bottom?: number };
@@ -86,7 +84,6 @@ export interface Config {
     label: Font & {
       fontSize: Pixels;
       maxWidth: Pixels | 'fill';
-      fill: string;
       align: TextAlign;
       baseline: TextBaseline;
       visible: boolean;

packages/charts/src/chart_types/wordcloud/layout/types/viewmodel_types.ts

@@ -9,6 +9,7 @@
 import { $Values as Values } from 'utility-types';
 
 import { Pixels, PointObject, Rectangle } from '../../../../common/geometry';
+import { FontStyle } from '../../../../common/text_utils';
 import { Color } from '../../../../utils/common';
 import { config } from '../config/config';
 import { Config } from './config_types';
@@ -58,7 +59,7 @@ export interface Configs {
   endAngle: number;
   exponent: number;
   fontFamily: string;
-  fontStyle: string;
+  fontStyle: FontStyle;
   fontWeight: number;
   height: number;
   maxFontSize: number;
@@ -81,7 +82,7 @@ export interface WordcloudViewModel {
   padding: number;
   fontWeight: number;
   fontFamily: string;
-  fontStyle: string;
+  fontStyle: FontStyle;
   minFontSize: number;
   maxFontSize: number;
   spiral: string;

packages/charts/src/chart_types/wordcloud/specs/index.ts

@@ -9,6 +9,7 @@
 import React from 'react';
 
 import { ChartType } from '../..';
+import { FontStyle } from '../../../common/text_utils';
 import { Spec } from '../../../specs';
 import { SpecType } from '../../../specs/constants';
 import { getConnect, specComponentFactory } from '../../../state/spec_factory';
@@ -42,7 +43,7 @@ export interface WordcloudSpec extends Spec {
   padding: number;
   fontWeight: number;
   fontFamily: string;
-  fontStyle: string;
+  fontStyle: FontStyle;
   minFontSize: number;
   maxFontSize: number;
   spiral: string;

packages/charts/src/chart_types/xy_chart/renderer/canvas/axes/index.ts

@@ -18,7 +18,7 @@ import { renderTickLabel } from './tick_label';
 
 /** @internal */
 export interface AxisProps {
-  panelTitle?: string | undefined;
+  panelTitle?: string;
   secondary?: boolean;
   panelAnchor: Point;
   axisStyle: AxisStyle;

packages/charts/src/chart_types/xy_chart/renderer/canvas/axes/tick_label.ts

@@ -7,103 +7,59 @@
  */
 
 import { AxisProps } from '.';
-import { Font, FontStyle } from '../../../../../common/text_utils';
-import { withContext } from '../../../../../renderers/canvas';
 import { AxisTick, getTickLabelProps } from '../../../utils/axis_utils';
 import { renderText } from '../primitives/text';
 import { renderDebugRectCenterRotated } from '../utils/debug';
 
 /** @internal */
-export function renderTickLabel(ctx: CanvasRenderingContext2D, tick: AxisTick, showTicks: boolean, props: AxisProps) {
-  const {
-    axisSpec: { position, labelFormat },
-    dimension: axisTicksDimensions,
-    size,
-    debug,
-    axisStyle,
-  } = props;
+export function renderTickLabel(
+  ctx: CanvasRenderingContext2D,
+  tick: AxisTick,
+  showTicks: boolean,
+  { axisSpec: { position, labelFormat }, dimension, size, debug, axisStyle }: AxisProps,
+) {
   const labelStyle = axisStyle.tickLabel;
-  const { rotation: tickLabelRotation, alignment, offset } = labelStyle;
-
-  const { maxLabelBboxWidth, maxLabelBboxHeight, maxLabelTextWidth, maxLabelTextHeight } = axisTicksDimensions;
-  const { x, y, offsetX, offsetY, textOffsetX, textOffsetY, horizontalAlign, verticalAlign } = getTickLabelProps(
+  const tickLabelProps = getTickLabelProps(
     axisStyle,
     tick.position,
     position,
-    tickLabelRotation,
+    labelStyle.rotation,
     size,
-    axisTicksDimensions,
+    dimension,
     showTicks,
-    offset,
-    alignment,
+    labelStyle.offset,
+    labelStyle.alignment,
   );
 
+  const center = { x: tickLabelProps.x + tickLabelProps.offsetX, y: tickLabelProps.y + tickLabelProps.offsetY };
+
   if (debug) {
+    const { maxLabelBboxWidth, maxLabelBboxHeight, maxLabelTextWidth: width, maxLabelTextHeight: height } = dimension;
     // full text container
-    renderDebugRectCenterRotated(
-      ctx,
-      {
-        x: x + offsetX,
-        y: y + offsetY,
-      },
-      {
-        x: x + offsetX,
-        y: y + offsetY,
-        height: maxLabelTextHeight,
-        width: maxLabelTextWidth,
-      },
-      undefined,
-      undefined,
-      tickLabelRotation,
-    );
+    renderDebugRectCenterRotated(ctx, center, { ...center, width, height }, undefined, undefined, labelStyle.rotation);
     // rotated text container
-    if (![0, -90, 90, 180].includes(tickLabelRotation)) {
-      renderDebugRectCenterRotated(
-        ctx,
-        {
-          x: x + offsetX,
-          y: y + offsetY,
-        },
-        {
-          x: x + offsetX,
-          y: y + offsetY,
-          height: maxLabelBboxHeight,
-          width: maxLabelBboxWidth,
-        },
-        undefined,
-        undefined,
-        0,
-      );
+    if (labelStyle.rotation % 90 !== 0) {
+      renderDebugRectCenterRotated(ctx, center, { ...center, width: maxLabelBboxWidth, height: maxLabelBboxHeight });
     }
   }
-  const font: Font = {
-    fontFamily: labelStyle.fontFamily,
-    fontStyle: labelStyle.fontStyle ? (labelStyle.fontStyle as FontStyle) : 'normal',
-    fontVariant: 'normal',
-    fontWeight: 'normal',
-    textColor: labelStyle.fill,
-    textOpacity: 1,
-  };
-  withContext(ctx, (ctx) => {
-    renderText(
-      ctx,
-      {
-        x: x + offsetX,
-        y: y + offsetY,
-      },
-      labelFormat ? labelFormat(tick.value) : tick.label,
-      {
-        ...font,
-        fontSize: labelStyle.fontSize,
-        fill: labelStyle.fill,
-        align: horizontalAlign as CanvasTextAlign,
-        baseline: verticalAlign as CanvasTextBaseline,
-      },
-      tickLabelRotation,
-      {
-        x: textOffsetX,
-        y: textOffsetY,
-      },
-    );
-  });
+
+  renderText(
+    ctx,
+    center,
+    labelFormat ? labelFormat(tick.value) : tick.label,
+    {
+      fontFamily: labelStyle.fontFamily,
+      fontStyle: labelStyle.fontStyle ?? 'normal',
+      fontVariant: 'normal',
+      fontWeight: 'normal',
+      textColor: labelStyle.fill,
+      textOpacity: 1,
+      fontSize: labelStyle.fontSize,
+      align: tickLabelProps.horizontalAlign,
+      baseline: tickLabelProps.verticalAlign,
+    },
+    labelStyle.rotation,
+    tickLabelProps.textOffsetX,
+    tickLabelProps.textOffsetY,
+  );
 }

packages/charts/src/chart_types/xy_chart/renderer/canvas/panels/panel_title.ts

@@ -6,10 +6,9 @@
  * Side Public License, v 1.
  */
 
-import { FontStyle } from '../../../../../common/text_utils';
 import { Position } from '../../../../../utils/common';
 import { getSimplePadding } from '../../../../../utils/dimensions';
-import { AxisStyle } from '../../../../../utils/themes/theme'; // todo revise if it should rely on axis-anything
+import { TextStyle } from '../../../../../utils/themes/theme'; // todo revise if it should rely on axis-anything
 import { isHorizontalAxis } from '../../../utils/axis_type_utils';
 import { getTitleDimension, shouldShowTicks } from '../../../utils/axis_utils';
 import { AxisProps } from '../axes';
@@ -114,20 +113,14 @@ function renderHorizontalTitle(ctx: CanvasRenderingContext2D, props: PanelTitleP
 }
 
 /** @internal */
-export function getFontStyle({
-  fontFamily,
-  fontStyle,
-  fill,
-  fontSize,
-}: AxisStyle['axisTitle'] | AxisStyle['axisPanelTitle']): TextFont {
+export function getFontStyle({ fontFamily, fontStyle, fill, fontSize }: TextStyle): TextFont {
   return {
     fontFamily,
     fontVariant: 'normal',
-    fontStyle: fontStyle ? (fontStyle as FontStyle) : 'normal',
-    fontWeight: 'normal',
+    fontStyle: fontStyle ?? 'normal',
+    fontWeight: 'bold',
     textColor: fill,
     textOpacity: 1,
-    fill,
     align: 'center',
     baseline: 'middle',
     fontSize,