studio-variable/geoproject-app
4
0
Fork 0
Code Issues 25 Pull requests Projects Releases Packages Wiki Activity Actions

implement font-family module

Browse source
This commit is contained in:
Julie Blanc 2026-03-05 16:29:42 +01:00
parent 6f5efb6fbc
commit cb9fd93e51
137 changed files with 1177 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/components/editor/TextSettings.vue
View file

@ -11,10 +11,11 @@
<!-- Police -->
<div class="settings-subsection">
<div class="field field-font">
<label for="text-font" class="label-with-tooltip field--view-only" data-css="font-family" title="Fonctionnalité à venir">Police</label>
<label for="text-font" class="label-with-tooltip" data-css="font-family">Police</label>
<div class="field-font__options">
<select id="text-font" v-model="font" disabled class="field--view-only" title="Fonctionnalité à venir">
<option v-for="f in fonts" :key="f" :value="f">{{ f }}</option>
<select id="text-font" v-model="font">
<option value="sans-serif">Police système (sans-serif)</option>
<option v-for="f in projectFonts" :key="f.name" :value="f.name" :style="{ fontFamily: `'${f.name}', ${f.category}` }">{{ f.name }}</option>
</select>
</div>
</div>
@ -78,17 +79,16 @@ import { useCssUpdater } from '../../composables/useCssUpdater';
import { useCssSync } from '../../composables/useCssSync';
import { useDebounce } from '../../composables/useDebounce';
import { useTextDefaults } from '../../composables/useTextDefaults';
import { useProjectFonts } from '../../composables/useProjectFonts';
const { updateStyle } = useCssUpdater();
const { extractValue, extractNumericValue } = useCssSync();
const { debouncedUpdate } = useDebounce(500);
const textDefaults = useTextDefaults();
// Constants
const fonts = ['Alegreya Sans', 'Arial', 'Georgia', 'Helvetica', 'Times New Roman'];
const { fonts: projectFonts, loadFont, loadAllFontPreviews } = useProjectFonts();
// State
const font = ref('Alegreya Sans');
const font = ref('sans-serif');
const fontSize = ref({ value: 16, unit: 'px' });
const lineHeight = ref({ value: 20, unit: 'px' });
const color = ref('rgb(0, 0, 0)');
@ -97,10 +97,12 @@ const colorInput = ref(null);
let isUpdatingFromStore = false;
// Watchers for body styles
watch(font, (val) => {
watch(font, async (val) => {
textDefaults.fontFamily = val;
if (val !== 'sans-serif') await loadFont(val);
if (isUpdatingFromStore) return;
updateStyle('body', 'font-family', `"${val}"`);
const cssValue = val === 'sans-serif' ? 'sans-serif' : `"${val}"`;
updateStyle('body', 'font-family', cssValue);
}, { immediate: true });
watch(color, (val) => {
@ -130,6 +132,12 @@ watch(lineHeight, (val) => {
const syncFromStore = () => {
isUpdatingFromStore = true;
const fontVal = extractValue('body', 'font-family');
if (fontVal) {
const cleaned = fontVal.replace(/['"]/g, '').trim();
font.value = cleaned || 'sans-serif';
}
const colorVal = extractValue('body', 'color');
if (colorVal) color.value = colorVal;
@ -155,6 +163,7 @@ onMounted(() => {
});
syncFromStore();
setTimeout(updateColorisButtons, 100);
loadAllFontPreviews();
});
</script>