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

fix element popup toggle: remove/re-enable cycle + inherited CSS comments
All checks were successful
Deploy / Build and Deploy to Production (push) Successful in 10m27s
Details

Browse source 
Remove pre-toggle snapshot system that was re-adding CSS values after
removeProps, causing toggles to not properly disable styles and breaking
the off/on/off cycle. Reset refs to defaults on toggle-off so displayed
CSS shows inherited values. Fix hasInCss to exclude commented blocks.
Replace "valeur par défaut" with "hérité de la page" comments.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-03-09 17:04:05 +01:00
parent b544928a65
commit 1f3649fc14
1 changed files with 48 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

90
src/composables/useElementSettings.js
View file

@ -236,33 +236,30 @@ export function useElementSettings({ margin, padding, basePopup }) {
} }
}; };
// --- Pre-toggle CSS snapshot --- // --- Reset refs to inherited/default values when toggle is turned off ---
// Saves the CSS values for a group before toggle ON, restores them on toggle OFF const resetRefsToDefaults = (group) => {
const preToggleSnapshots = new Map(); // key: `${selector}::${group}` → { cssProp: extractedValue } if (group === 'font') {
fontFamily.value = textDefaults.fontFamily;
const savePreToggleSnapshot = (group) => { italic.value = ELEMENT_DEFAULTS.italic;
const key = `${selector.value}::${group}`; bold.value = ELEMENT_DEFAULTS.bold;
const cssProps = settingGroups[group]; // Re-apply inline defaults if applicable
const snapshot = {}; const inlineDefaults = INLINE_DEFAULTS[currentTag.value];
for (const cssProp of cssProps) { if (inlineDefaults) {
const val = stylesheetStore.extractValue(selector.value, cssProp); if (inlineDefaults.fontStyle === 'italic') italic.value = true;
if (val) snapshot[cssProp] = val; if (inlineDefaults.fontWeight === 'bold') bold.value = true;
}
preToggleSnapshots.set(key, snapshot);
};
const restorePreToggleSnapshot = (group) => {
const key = `${selector.value}::${group}`;
const snapshot = preToggleSnapshots.get(key);
if (!snapshot) return;
for (const [cssProp, val] of Object.entries(snapshot)) {
if (typeof val === 'object' && 'value' in val) {
updateProp(cssProp, val.value, val.unit);
} else {
updateProp(cssProp, val);
} }
} else if (group === 'fontSize') {
fontSize.value = textDefaults.fontSize.value;
fontSize.unit = textDefaults.fontSize.unit;
} else if (group === 'lineHeight') {
lineHeight.value = textDefaults.lineHeight.value;
lineHeight.unit = textDefaults.lineHeight.unit;
} else if (group === 'color') {
color.value = textDefaults.color;
// Re-apply inline default color if applicable
const inlineDefaults = INLINE_DEFAULTS[currentTag.value];
if (inlineDefaults?.color) color.value = inlineDefaults.color;
} }
preToggleSnapshots.delete(key);
}; };
// --- Toggle actions --- // --- Toggle actions ---
@ -275,7 +272,6 @@ export function useElementSettings({ margin, padding, basePopup }) {
settingEnabled[group] = enabled; settingEnabled[group] = enabled;
isUpdatingFromStore = true; isUpdatingFromStore = true;
if (enabled) { if (enabled) {
savePreToggleSnapshot(group);
restoreFromCache(group); restoreFromCache(group);
applyAllEnabledGroups(); applyAllEnabledGroups();
} else { } else {
@ -286,7 +282,8 @@ export function useElementSettings({ margin, padding, basePopup }) {
} else { } else {
removeProps(settingGroups[group]); removeProps(settingGroups[group]);
} }
restorePreToggleSnapshot(group); // Reset refs to defaults so displayedCss shows inherited values
resetRefsToDefaults(group);
} }
saveElementState(); saveElementState();
nextTick(() => { isUpdatingFromStore = false; }); nextTick(() => { isUpdatingFromStore = false; });
@ -353,10 +350,10 @@ export function useElementSettings({ margin, padding, basePopup }) {
const INDEPENDENT_TAGS = new Set(['li', 'ul', 'ol', 'dt', 'dd', 'dl', 'table', 'tr', 'td', 'th', 'caption', 'figure', 'figcaption', 'pre', 'blockquote']); const INDEPENDENT_TAGS = new Set(['li', 'ul', 'ol', 'dt', 'dd', 'dl', 'table', 'tr', 'td', 'th', 'caption', 'figure', 'figcaption', 'pre', 'blockquote']);
const isIndependentElement = computed(() => INDEPENDENT_TAGS.has(currentTag.value)); const isIndependentElement = computed(() => INDEPENDENT_TAGS.has(currentTag.value));
// Check if the current selector has a CSS property in the store // Check if the current selector has a CSS property in the store (active CSS only, not commented)
const hasInCss = (cssProp) => { const hasInCss = (cssProp) => {
if (!selector.value) return false; if (!selector.value) return false;
return !!stylesheetStore.extractValue(selector.value, cssProp); return !!stylesheetStore.extractValue(selector.value, cssProp, false);
}; };
const displayedCss = computed(() => { const displayedCss = computed(() => {
@ -364,9 +361,10 @@ export function useElementSettings({ margin, padding, basePopup }) {
const lines = []; const lines = [];
for (const entry of displayedCssOrder) { for (const entry of displayedCssOrder) {
if (entry.skip && entry.skip()) continue; if (entry.skip && entry.skip()) continue;
const groupEnabled = settingEnabled[entry.group];
// For inline elements, skip special groups (TextSettings defaults) when toggle is OFF // For inline elements, skip special groups (TextSettings defaults) when toggle is OFF
// Exception: keep if the current tag has an inline default for this CSS property // Exception: keep if the current tag has an inline default for this CSS property
if (entry.special && isInlineElement.value && !settingEnabled[entry.group]) { if (entry.special && isInlineElement.value && !groupEnabled) {
const tagDefaults = INLINE_DEFAULTS[currentTag.value]; const tagDefaults = INLINE_DEFAULTS[currentTag.value];
const cssToDefaultKey = { 'color': 'color', 'font-family': 'fontFamily' }; const cssToDefaultKey = { 'color': 'color', 'font-family': 'fontFamily' };
const defaultKey = cssToDefaultKey[entry.css]; const defaultKey = cssToDefaultKey[entry.css];
@ -374,18 +372,26 @@ export function useElementSettings({ margin, padding, basePopup }) {
} }
const val = entry.getValue(); const val = entry.getValue();
if (val === null || val === undefined) continue; if (val === null || val === undefined) continue;
// Show "valeur par défaut" only if the value actually matches the TextSettings default
let isTextDefault = false; // Determine inheritance comment for disabled groups
if (entry.special && !settingEnabled[entry.group]) { let comment = '';
const textDefaultValues = { if (!groupEnabled) {
'font-family': textDefaults.fontFamily === 'sans-serif' ? 'sans-serif' : `"${textDefaults.fontFamily}"`, if (entry.special) {
'font-size': `${textDefaults.fontSize.value}${textDefaults.fontSize.unit}`, // Special groups: show "hérité de la page" when value matches page-level default
'line-height': `${textDefaults.lineHeight.value}${textDefaults.lineHeight.unit}`, const textDefaultValues = {
'color': textDefaults.color, 'font-family': textDefaults.fontFamily === 'sans-serif' ? 'sans-serif' : `"${textDefaults.fontFamily}"`,
}; 'font-size': `${textDefaults.fontSize.value}${textDefaults.fontSize.unit}`,
isTextDefault = val === textDefaultValues[entry.css]; 'line-height': `${textDefaults.lineHeight.value}${textDefaults.lineHeight.unit}`,
'color': textDefaults.color,
};
if (val === textDefaultValues[entry.css]) {
comment = ' /* hérité de la page */';
}
} else if (hasInCss(entry.css)) {
// Non-special groups: show comment when CSS exists but toggle is off
comment = ' /* hérité de la page */';
}
} }
const comment = isTextDefault ? ' /* valeur par défaut */' : '';
lines.push(` ${entry.css}: ${val};${comment}`); lines.push(` ${entry.css}: ${val};${comment}`);
} }
for (const side of ['top', 'right', 'bottom', 'left']) { for (const side of ['top', 'right', 'bottom', 'left']) {
@ -402,7 +408,7 @@ export function useElementSettings({ margin, padding, basePopup }) {
}); });
const editableFullCss = computed(() => { const editableFullCss = computed(() => {
return displayedCss.value.replace(/ \/\* valeur par défaut \*\//g, ''); return displayedCss.value.replace(/ \/\* (?:valeur par défaut|hérité de la page) \*\//g, '');
}); });
// --- CSS parsing & sync --- // --- CSS parsing & sync ---