(fix): Use OL getFontParameters to parse font

The fontFamily was incorrectly set to the full canvas font.
Ex: 10px sans-serif
See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/font

CHANGES.md

@@ -1,5 +1,9 @@
 # @geoblocks/geoblocks changes
 
+## 0.2.15
+
+- Use ol getFontParameters to parse font.
+
 ## 0.2.14
 
 - Fix (invert) text Y axis offset.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoblocks/mapfishprint",
-  "version": "0.2.14",
+  "version": "0.2.15",
   "publishConfig": {
     "access": "public"
   },

src/VectorEncoder.ts

@@ -25,6 +25,8 @@ import type {Feature as GeoJSONFeature, FeatureCollection as GeoJSONFeatureColle
 import {fromCircle} from 'ol/geom/Polygon.js';
 import {Constants} from './constants';
 
+import {getFontParameters} from 'ol/css.js';
+
 /** Represents the different types of printing styles. */
 export const PrintStyleType = {
   LINE_STRING: 'LineString',
@@ -518,10 +520,15 @@ export default class VectorEncoder {
   protected encodeVectorStyleText(symbolizers: MFPSymbolizer[], textStyle: Text) {
     const label = textStyle.getText();
     if (label) {
+      const fp = getFontParameters(textStyle.getFont() || 'sans-serif');
       const symbolizer = {
         type: 'text',
         label: textStyle.getText(),
-        fontFamily: textStyle.getFont() ? textStyle.getFont() : 'sans-serif',
+        fontFamily: fp.family,
+        fontSize: fp.size,
+        fontStyle: fp.style,
+        fontWeight: fp.weight,
+        // FIXME: missing fontVariant, is it supported in MFP?
         labelXOffset: textStyle.getOffsetX(),
         // OL and MFP behaves differently on the Y offset
         labelYOffset: -textStyle.getOffsetY(),

src/types.ts

@@ -49,7 +49,7 @@ export interface MFPSymbolizerText extends MFPSymbolizer, MFPFillStyle {
   type: 'text';
   fontColor: string;
   fontFamily: string;
-  fontSize: number;
+  fontSize: string; // ex 12px
   fontStyle: string;
   fontWeight: string;
   haloColor: string;

test.js

@@ -241,7 +241,10 @@ test('Vector features', async (t) => {
         {
           type: 'text',
           label: 'A polygon',
-          fontFamily: '12px sans-serif',
+          fontFamily: 'sans-serif',
+          fontSize: '12px',
+          fontStyle: 'normal',
+          fontWeight: 'normal',
           labelXOffset: 0,
           labelYOffset: 12,
           labelAlign: 'cm',
@@ -264,7 +267,10 @@ test('Vector features', async (t) => {
         {
           type: 'text',
           label: 'A circle',
-          fontFamily: '12px sans-serif',
+          fontFamily: 'sans-serif',
+          fontSize: '12px',
+          fontStyle: 'normal',
+          fontWeight: 'normal',
           labelXOffset: 0,
           labelYOffset: 12,
           labelAlign: 'cm',
@@ -285,7 +291,10 @@ test('Vector features', async (t) => {
         {
           type: 'text',
           label: 'A line',
-          fontFamily: '12px sans-serif',
+          fontFamily: 'sans-serif',
+          fontSize: '12px',
+          fontStyle: 'normal',
+          fontWeight: 'normal',
           labelXOffset: 0,
           labelYOffset: 12,
           labelAlign: 'cm',
@@ -300,7 +309,10 @@ test('Vector features', async (t) => {
         {
           type: 'text',
           label: 'A point',
-          fontFamily: '12px sans-serif',
+          fontFamily: 'sans-serif',
+          fontSize: '12px',
+          fontStyle: 'normal',
+          fontWeight: 'normal',
           labelXOffset: 0,
           labelYOffset: 12,
           labelAlign: 'cm',