Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

#10711: Control loading FontAwesome for vector style #10715

Merged
merged 4 commits into from
Dec 9, 2024
Merged

#10711: Control loading FontAwesome for vector style #10715

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
cffacb9
#10711: Control loading FontAwsome for vector style
mahmoudadel54 Dec 4, 2024
51cd13c
#10711: enhance drawIcons if there are icons in data and loadFontAwes…
mahmoudadel54 Dec 4, 2024
9e72423
#10711: using cfg loadFontAwesomeForIcons in root in localConfig inst…
mahmoudadel54 Dec 9, 2024
ef4f18c
#10711: remove unused console.log in StylePArserUtils
mahmoudadel54 Dec 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion web/client/utils/styleparser/StyleParserUtils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ import isNil from 'lodash/isNil';
import isObject from 'lodash/isObject';
import MarkerUtils from '../MarkerUtils';
import {randomInt} from '../RandomUtils';
import { getConfigProp } from '../ConfigUtils';


export const isGeoStylerBooleanFunction = (got) => [
Expand Down Expand Up @@ -917,7 +918,10 @@ export const drawIcons = (geoStylerStyle, options) => {
}, []);
const marks = symbolizers.filter(({ kind }) => kind === 'Mark');
const icons = symbolizers.filter(({ kind }) => kind === 'Icon');
return loadFontAwesome()
const loadFontAwesomeForIcons = getConfigProp("loadFontAwesomeForIcons");
// if undefined or true it will load it to preserve previous behaviour
const loadingPromise = (isNil(loadFontAwesomeForIcons) || loadFontAwesomeForIcons) && icons?.length ? loadFontAwesome() : Promise.resolve();
return loadingPromise
Copy link
Contributor

@allyoucanmap allyoucanmap Dec 9, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@MV88 @mahmoudadel54 in another branch I was exporting to loadingFontAwesome to a specific utils (this branch is not merged yet on master)

https://github.com/allyoucanmap/MapStore2/blob/96dea788d349a09fc7512466beae3cd0aebe1fec/web/client/utils/FontUtils.js

wouldn't it be better to expose a register function instead to have a loadFontAwesomeForIcons config?

let fontAwesomeLoaded = false;

export const isFontAwesomeReady = () => fontAwesomeLoaded;

let defaultLoadFontAwesome = () => {
    if (fontAwesomeLoaded) {
        return Promise.resolve();
    }
    // async load of font awesome
    return import('font-awesome/css/font-awesome.min.css')
        .then(() => {
            // ensure the font is loaded
            return document.fonts.load('1rem FontAwesome')
                .then(() => {
                    fontAwesomeLoaded = true;
                    return fontAwesomeLoaded;
                });
        });
};

export const registerLoadFontAwesome = (promiseFunc) => {
  defaultLoadFontAwesome = promiseFunc;
}

export const loadFontAwesome = () => {
    return defaultLoadFontAwesome();
};

then in a specific project you could use registerLoadFontAwesome in the app entry to override the default function

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@allyoucanmap
I think the use case we opened this issue is in importing vector layer. In import new vector layer -- > drawIcons method is called and it calls loadFontAwesome within it by default. We don't make exporting this specific method and use it particularly in import.
So I think your approach doesn't prevent calling this method because in import vector layer, calling this method is not optional.

.then(
() => new Promise((resolve) => {
if (marks.length > 0 || icons.length > 0) {
Expand Down
Loading