From 08389c7e55bdc2502c298004afd3c8f334c1e92e Mon Sep 17 00:00:00 2001 From: Johannes Weskamm Date: Fri, 24 Mar 2023 13:30:14 +0100 Subject: [PATCH] Fix parsing of css font strings --- data/styles/point_styledLabel_static.ts | 4 ++- package-lock.json | 15 +++++++++-- package.json | 1 + src/OlStyleParser.spec.ts | 2 +- src/OlStyleParser.ts | 33 ++++++++++++++----------- src/Util/OlStyleUtil.ts | 2 +- 6 files changed, 38 insertions(+), 19 deletions(-) diff --git a/data/styles/point_styledLabel_static.ts b/data/styles/point_styledLabel_static.ts index d70a5d9f..0242e06d 100644 --- a/data/styles/point_styledLabel_static.ts +++ b/data/styles/point_styledLabel_static.ts @@ -14,7 +14,9 @@ const pointStyledLabel: Style = { offset: [0, 5], haloColor: '#000000', haloWidth: 5, - rotate: 45 + rotate: 45, + fontStyle: 'normal', + fontWeight: 'normal' }] } ] diff --git a/package-lock.json b/package-lock.json index ec3765d2..e6d8bda9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "license": "BSD-2-Clause", "dependencies": { "color-name": "^1.1.4", + "css-font-parser": "^2.0.0", "geostyler-style": "^7.2.0" }, "devDependencies": { @@ -4806,6 +4807,11 @@ "node": ">=8" } }, + "node_modules/css-font-parser": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/css-font-parser/-/css-font-parser-2.0.0.tgz", + "integrity": "sha512-YjgBiAq5rFNXfsPHofaEZwsUbCoSK0avstS76BSqNyVCM7+oiO44wZxbtq6YFSaQafCG0llS/f79oqlsmzaBJg==" + }, "node_modules/csscolorparser": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/csscolorparser/-/csscolorparser-1.0.3.tgz", @@ -4815,7 +4821,7 @@ "node_modules/cssfontparser": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/cssfontparser/-/cssfontparser-1.2.1.tgz", - "integrity": "sha1-9AIvyPlwDGgCnVQghK+69CWj8+M=", + "integrity": "sha512-6tun4LoZnj7VN6YeegOVb67KBX/7JJsqvj+pv3ZA7F878/eN33AbGa5b/S/wXxS/tcp8nc40xRUrsPlxIyNUPg==", "dev": true }, "node_modules/cssom": { @@ -16943,6 +16949,11 @@ "integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==", "dev": true }, + "css-font-parser": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/css-font-parser/-/css-font-parser-2.0.0.tgz", + "integrity": "sha512-YjgBiAq5rFNXfsPHofaEZwsUbCoSK0avstS76BSqNyVCM7+oiO44wZxbtq6YFSaQafCG0llS/f79oqlsmzaBJg==" + }, "csscolorparser": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/csscolorparser/-/csscolorparser-1.0.3.tgz", @@ -16952,7 +16963,7 @@ "cssfontparser": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/cssfontparser/-/cssfontparser-1.2.1.tgz", - "integrity": "sha1-9AIvyPlwDGgCnVQghK+69CWj8+M=", + "integrity": "sha512-6tun4LoZnj7VN6YeegOVb67KBX/7JJsqvj+pv3ZA7F878/eN33AbGa5b/S/wXxS/tcp8nc40xRUrsPlxIyNUPg==", "dev": true }, "cssom": { diff --git a/package.json b/package.json index afb26813..981ad76f 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ }, "dependencies": { "color-name": "^1.1.4", + "css-font-parser": "^2.0.0", "geostyler-style": "^7.2.0" }, "peerDependencies": { diff --git a/src/OlStyleParser.spec.ts b/src/OlStyleParser.spec.ts index 9f9894b6..4089d73b 100644 --- a/src/OlStyleParser.spec.ts +++ b/src/OlStyleParser.spec.ts @@ -368,7 +368,7 @@ describe('OlStyleParser implements StyleParser', () => { const fontFamily = [ ['arial', 'sans-serif'], ['Georgia', 'serif'], - ['"Neue Helvetica"', 'Helvetica', 'sans-serif'] + ['Neue Helvetica', 'Helvetica', 'sans-serif'] ]; const font1 = `bold 5px ${fontFamily[0].join(', ')}`; const font2 = `italic bold 12px/30px ${fontFamily[1].join(', ')}`; diff --git a/src/OlStyleParser.ts b/src/OlStyleParser.ts index eea43795..5dc07fe4 100644 --- a/src/OlStyleParser.ts +++ b/src/OlStyleParser.ts @@ -1,3 +1,5 @@ +import { parseFont } from 'css-font-parser'; + import { CapType, FillSymbolizer, @@ -403,24 +405,25 @@ export class OlStyleParser implements StyleParser { const allowOverlap = olTextStyle.getOverflow() ? olTextStyle.getOverflow() : undefined; const text = olTextStyle.getText(); const label = Array.isArray(text) ? text[0] : text; - let fontStyleWeightSize: string; - let fontSizePart: string[]; let fontSize: number = Infinity; let fontFamily: string[]|undefined = undefined; + let fontWeight: 'normal' | 'bold' = 'normal'; + let fontStyle: 'normal' | 'italic' | 'oblique' = 'normal'; if (font) { - const fontSplit = font.split('px'); - // font-size is always the first part of font-size/line-height - fontStyleWeightSize = fontSplit[0].trim(); - - fontSizePart = fontStyleWeightSize.split(' '); - // The last element contains font size - fontSize = parseInt(fontSizePart[fontSizePart.length - 1], 10); - const fontFamilyPart: string = fontSplit.length === 2 ? - fontSplit[1] : fontSplit[2]; - fontFamily = fontFamilyPart.split(',').map((fn: string) => { - return fn.startsWith(' ') ? fn.slice(1) : fn; - }); + const fontObj = parseFont(font); + if (fontObj['font-weight']) { + fontWeight = fontObj['font-weight'] as 'normal' | 'bold'; + } + if (fontObj['font-size']) { + fontSize = parseInt(fontObj['font-size'], 10); + } + if (fontObj['font-family']) { + fontFamily = fontObj['font-family']; + } + if (fontObj['font-style']) { + fontStyle = fontObj['font-style'] as 'normal' | 'italic' | 'oblique'; + } } return { @@ -430,6 +433,8 @@ export class OlStyleParser implements StyleParser { color: olFillStyle ? OlStyleUtil.getHexColor(olFillStyle.getColor() as string) : undefined, size: isFinite(fontSize) ? fontSize : undefined, font: fontFamily, + fontWeight, + fontStyle, offset: (offsetX !== undefined) && (offsetY !== undefined) ? [offsetX, offsetY] : [0, 0], haloColor: olStrokeStyle && olStrokeStyle.getColor() ? OlStyleUtil.getHexColor(olStrokeStyle.getColor() as string) : undefined, diff --git a/src/Util/OlStyleUtil.ts b/src/Util/OlStyleUtil.ts index b0cd32aa..9076123c 100644 --- a/src/Util/OlStyleUtil.ts +++ b/src/Util/OlStyleUtil.ts @@ -152,7 +152,7 @@ class OlStyleUtil { const size = symbolizer.size; const font = symbolizer.font; - return fontWeight + ' ' + fontStyle + ' ' + size + 'px ' + font; + return fontWeight + ' ' + fontStyle + ' ' + size + 'px ' + font?.join(', '); }