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

3 values systeme for heritage

Browse source
This commit is contained in:
Julie Blanc 2026-03-05 19:00:29 +01:00
parent 449f0eda31
commit bc2317ab69
4 changed files with 280 additions and 215 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -72,7 +72,7 @@
</template>
<script setup>
import { ref, watch, onMounted } from 'vue';
import { ref, watch, onMounted, nextTick } from 'vue';
import { initColoris } from '../../composables/useColoris';
import InputWithUnit from '../ui/InputWithUnit.vue';
import { useCssUpdater } from '../../composables/useCssUpdater';
@ -87,67 +87,85 @@ const { debouncedUpdate } = useDebounce(500);
const textDefaults = useTextDefaults();
const { fonts: projectFonts, loadFont, loadAllFontPreviews } = useProjectFonts();
// State
const font = ref('sans-serif');
const fontSize = ref({ value: 16, unit: 'px' });
const lineHeight = ref({ value: 20, unit: 'px' });
// State — initial values match stylesheet.print.css (overwritten by syncFromStore)
const font = ref('DM Sans');
const fontSize = ref({ value: 14, unit: 'px' });
const lineHeight = ref({ value: 18, unit: 'px' });
const color = ref('rgb(0, 0, 0)');
const colorInput = ref(null);
let isUpdatingFromStore = false;
// Start true to block immediate watchers from overwriting textDefaults during setup
let isUpdatingFromStore = true;
// Watchers for body styles
watch(font, async (val) => {
if (isUpdatingFromStore) return;
textDefaults.fontFamily = val;
if (val !== 'sans-serif') await loadFont(val);
if (isUpdatingFromStore) return;
const cssValue = val === 'sans-serif' ? 'sans-serif' : `"${val}"`;
updateStyle('body', 'font-family', cssValue);
}, { immediate: true });
watch(color, (val) => {
textDefaults.color = val;
if (isUpdatingFromStore) return;
textDefaults.color = val;
updateStyle('body', 'color', val);
}, { immediate: true });
watch(fontSize, (val) => {
textDefaults.fontSize = { value: val.value, unit: val.unit };
if (isUpdatingFromStore) return;
textDefaults.fontSize = { value: val.value, unit: val.unit };
debouncedUpdate(() => {
updateStyle('p', 'font-size', `${val.value}${val.unit}`);
});
}, { deep: true, immediate: true });
watch(lineHeight, (val) => {
textDefaults.lineHeight = { value: val.value, unit: val.unit };
if (isUpdatingFromStore) return;
textDefaults.lineHeight = { value: val.value, unit: val.unit };
debouncedUpdate(() => {
updateStyle('p', 'line-height', `${val.value}${val.unit}`);
});
}, { deep: true, immediate: true });
// Sync from store
// Sync from store (first mount) or from textDefaults (subsequent mounts)
const syncFromStore = () => {
isUpdatingFromStore = true;
const fontVal = extractValue('body', 'font-family');
if (fontVal) {
const cleaned = fontVal.replace(/['"]/g, '').trim();
font.value = cleaned || 'sans-serif';
if (textDefaults._initialized) {
// Already initialized — restore from textDefaults (not from CSS which may contain popup values)
font.value = textDefaults.fontFamily;
fontSize.value = { value: textDefaults.fontSize.value, unit: textDefaults.fontSize.unit };
lineHeight.value = { value: textDefaults.lineHeight.value, unit: textDefaults.lineHeight.unit };
color.value = textDefaults.color;
} else {
// First mount — read from CSS store
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;
const fontSizeVal = extractNumericValue('p', 'font-size', ['px']);
if (fontSizeVal) fontSize.value = fontSizeVal;
const lineHeightVal = extractNumericValue('p', 'line-height', ['px']);
if (lineHeightVal) lineHeight.value = lineHeightVal;
// Persist to textDefaults from CSS-synced values
textDefaults.fontFamily = font.value;
textDefaults.fontSize = { value: fontSize.value.value, unit: fontSize.value.unit };
textDefaults.lineHeight = { value: lineHeight.value.value, unit: lineHeight.value.unit };
textDefaults.color = color.value;
textDefaults._initialized = true;
}
const colorVal = extractValue('body', 'color');
if (colorVal) color.value = colorVal;
const fontSizeVal = extractNumericValue('p', 'font-size', ['px']); // ['px', 'em', 'rem']
if (fontSizeVal) fontSize.value = fontSizeVal;
const lineHeightVal = extractNumericValue('p', 'line-height', ['px']);
if (lineHeightVal) lineHeight.value = lineHeightVal;
isUpdatingFromStore = false;
// Release flag after watchers triggered by ref changes have been skipped
nextTick(() => { isUpdatingFromStore = false; });
};
const updateColorisButtons = () => {