From fd77483ef0cd7110f72bfc36d9c571fcb81e1bf7 Mon Sep 17 00:00:00 2001
From: Guillaume Beraudo <guillaume.beraudo@camptocamp.com>
Date: Tue, 11 Jun 2024 11:40:10 +0200
Subject: [PATCH] (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           |  4 ++++
 package.json         |  2 +-
 src/VectorEncoder.ts |  9 ++++++++-
 src/types.ts         |  2 +-
 test.js              | 20 ++++++++++++++++----
 5 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/CHANGES.md b/CHANGES.md
index d91b79a..05fdd63 100644
--- a/CHANGES.md
+++ b/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.
diff --git a/package.json b/package.json
index 068c8bd..5ca9263 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@geoblocks/mapfishprint",
-  "version": "0.2.14",
+  "version": "0.2.15",
   "publishConfig": {
     "access": "public"
   },
diff --git a/src/VectorEncoder.ts b/src/VectorEncoder.ts
index b1cb1c4..21b0a24 100644
--- a/src/VectorEncoder.ts
+++ b/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(),
diff --git a/src/types.ts b/src/types.ts
index 731f6ec..00d3b66 100644
--- a/src/types.ts
+++ b/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;
diff --git a/test.js b/test.js
index c13cbd4..4126fbe 100644
--- a/test.js
+++ b/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',