fix(canvas_text_bbox_calculator): increase font scaling factor (#93)

jest.config.json

@@ -1,6 +1,11 @@
 {
-  "roots": ["<rootDir>/src"],
+  "roots": [
+    "<rootDir>/src"
+  ],
   "preset": "ts-jest",
   "testEnvironment": "jsdom",
-  "setupFilesAfterEnv": ["<rootDir>/scripts/setup_enzyme.ts"]
-}
+  "setupFilesAfterEnv": [
+    "<rootDir>/scripts/setup_enzyme.ts",
+    "jest-canvas-mock"
+  ]
+}

package.json

@@ -46,8 +46,8 @@
     "@babel/core": "^7.3.4",
     "@commitlint/cli": "^7.5.2",
     "@commitlint/config-conventional": "^7.5.0",
-    "@elastic/eui": "^8.0.0",
     "@elastic/datemath": "^5.0.2",
+    "@elastic/eui": "^8.0.0",
     "@semantic-release/changelog": "^3.0.2",
     "@semantic-release/commit-analyzer": "^6.1.0",
     "@semantic-release/git": "^7.0.8",
@@ -88,6 +88,7 @@
     "enzyme-adapter-react-16": "^1.10.0",
     "husky": "^1.3.1",
     "jest": "^24.1.0",
+    "jest-canvas-mock": "^2.0.0-beta.1",
     "moment": "^2.24.0",
     "node-sass": "^4.11.0",
     "prettier": "1.16.4",
@@ -125,13 +126,13 @@
     "resize-observer-polyfill": "^1.5.1"
   },
   "peerDependencies": {
-    "@elastic/eui": "^8.0.0",
     "@elastic/datemath": "^5.0.2",
+    "@elastic/eui": "^8.0.0",
     "moment": "^2.24.0"
   },
   "config": {
     "commitizen": {
       "path": "./node_modules/cz-conventional-changelog"
     }
   }
-}
+}

src/lib/axes/canvas_text_bbox_calculator.test.ts

@@ -0,0 +1,22 @@
+import { none } from 'fp-ts/lib/Option';
+import { CanvasTextBBoxCalculator } from './canvas_text_bbox_calculator';
+
+describe('CanvasTextBBoxCalculator', () => {
+  test('can create a canvas for computing text measurement values', () => {
+    const canvasBboxCalculator = new CanvasTextBBoxCalculator();
+    const bbox = canvasBboxCalculator.compute('foo').getOrElse({
+      width: 0,
+      height: 0,
+    });
+
+    const expectedDims = {
+      width: 10.6,
+      height: 16,
+    };
+
+    expect(bbox).toEqual(expectedDims);
+
+    canvasBboxCalculator.context = null;
+    expect(canvasBboxCalculator.compute('foo')).toBe(none);
+  });
+});

src/lib/axes/canvas_text_bbox_calculator.ts

@@ -2,9 +2,9 @@ import { none, Option, some } from 'fp-ts/lib/Option';
 import { BBox, BBoxCalculator } from './bbox_calculator';
 
 export class CanvasTextBBoxCalculator implements BBoxCalculator {
+  context: CanvasRenderingContext2D | null;
   private attachedRoot: HTMLElement;
   private offscreenCanvas: HTMLCanvasElement;
-  private context: CanvasRenderingContext2D | null;
   private scaledFontSize: number;
 
   constructor(rootElement?: HTMLElement) {
@@ -15,9 +15,9 @@ export class CanvasTextBBoxCalculator implements BBoxCalculator {
     this.context = this.offscreenCanvas.getContext('2d');
     this.attachedRoot = rootElement || document.documentElement;
     this.attachedRoot.appendChild(this.offscreenCanvas);
-    this.scaledFontSize = 100;
+    this.scaledFontSize = 5;
   }
-  compute(text: string, fontSize = 16, fontFamily = 'Arial'): Option<BBox> {
+  compute(text: string, fontSize = 16, fontFamily = 'Arial', padding: number = 1): Option<BBox> {
     if (!this.context) {
       return none;
     }
@@ -29,7 +29,7 @@ export class CanvasTextBBoxCalculator implements BBoxCalculator {
     const measure = this.context.measureText(text);
 
     return some({
-      width: measure.width / scalingFactor,
+      width: measure.width / scalingFactor + padding,
       height: fontSize,
     });
   }

src/state/chart_state.test.ts

@@ -380,12 +380,12 @@ describe('Chart Store', () => {
     expect(brushEndListener).not.toBeCalled();
 
     store.onBrushEnd(start, end1);
-    expect(brushEndListener.mock.calls[0][0]).toEqual(0.9426386233269598);
-    expect(brushEndListener.mock.calls[0][1]).toEqual(1.5162523900573615);
+    expect(brushEndListener.mock.calls[0][0]).toBeCloseTo(0.9, 1);
+    expect(brushEndListener.mock.calls[0][1]).toBeCloseTo(1.5, 1);
 
     store.onBrushEnd(start, end2);
-    expect(brushEndListener.mock.calls[1][0]).toEqual(0.36902485659655826);
-    expect(brushEndListener.mock.calls[1][1]).toEqual(0.9426386233269598);
+    expect(brushEndListener.mock.calls[1][0]).toBeCloseTo(0.3, 1);
+    expect(brushEndListener.mock.calls[1][1]).toBeCloseTo(0.9, 1);
   });
 
   test('can determine if brush is enabled', () => {

yarn.lock

@@ -3732,6 +3732,11 @@ color-convert@^1.9.0:
   dependencies:
     color-name "1.1.3"
 
+color-convert@~0.5.0:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-0.5.3.tgz#bdb6c69ce660fadffe0b0007cc447e1b9f7282bd"
+  integrity sha1-vbbGnOZg+t/+CwAHzER+G59ygr0=
+
 [email protected]:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
@@ -4242,6 +4247,11 @@ cssesc@^0.1.0:
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4"
   integrity sha1-yBSQPkViM3GgR3tAEJqq++6t27Q=
 
+cssfontparser@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/cssfontparser/-/cssfontparser-1.2.1.tgz#f4022fc8f9700c68029d542084afbaf425a3f3e3"
+  integrity sha1-9AIvyPlwDGgCnVQghK+69CWj8+M=
+
 csso@^3.5.1:
   version "3.5.1"
   resolved "https://registry.yarnpkg.com/csso/-/csso-3.5.1.tgz#7b9eb8be61628973c1b261e169d2f024008e758b"
@@ -7020,6 +7030,14 @@ java-properties@^0.2.9:
   resolved "https://registry.yarnpkg.com/java-properties/-/java-properties-0.2.10.tgz#2551560c25fa1ad94d998218178f233ad9b18f60"
   integrity sha512-CpKJh9VRNhS+XqZtg1UMejETGEiqwCGDC/uwPEEQwc2nfdbSm73SIE29TplG2gLYuBOOTNDqxzG6A9NtEPLt0w==
 
+jest-canvas-mock@^2.0.0-beta.1:
+  version "2.0.0-beta.1"
+  resolved "https://registry.yarnpkg.com/jest-canvas-mock/-/jest-canvas-mock-2.0.0-beta.1.tgz#a99f3dd5bcdc10b57c00da43cbe17847697a9425"
+  integrity sha512-OwUcVnJc0qXUxt+ADSWbADVHUTt5wOmOIqL9N22mXCFclQXcLGPB/CeM3Wnu1eZcRWGE2aGHk5RqbH9qznJhEQ==
+  dependencies:
+    cssfontparser "^1.2.1"
+    parse-color "^1.0.0"
+
 jest-changed-files@^24.0.0:
   version "24.0.0"
   resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-24.0.0.tgz#c02c09a8cc9ca93f513166bc773741bd39898ff7"
@@ -9468,6 +9486,13 @@ parse-asn1@^5.0.0:
     pbkdf2 "^3.0.3"
     safe-buffer "^5.1.1"
 
+parse-color@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/parse-color/-/parse-color-1.0.0.tgz#7b748b95a83f03f16a94f535e52d7f3d94658619"
+  integrity sha1-e3SLlag/A/FqlPU15S1/PZRlhhk=
+  dependencies:
+    color-convert "~0.5.0"
+
 parse-entities@^1.1.2:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/parse-entities/-/parse-entities-1.2.1.tgz#2c761ced065ba7dc68148580b5a225e4918cdd69"