diff --git a/public/assets/css/stylesheet.print.css b/public/assets/css/stylesheet.print.css index 4784100..c760569 100644 --- a/public/assets/css/stylesheet.print.css +++ b/public/assets/css/stylesheet.print.css @@ -31,20 +31,7 @@ figure, img{ } -/* h1{ - font-size: 38px; - background: rgba(255, 255, 255, 0.521); - padding-top: 10px; - padding-left: 20px; - padding-bottom: 10px; - padding-right: 20px; - margin-left: 0px; - margin-right: 0px; - margin-bottom: 0px; - margin-top: 60px; -} */ - -p.author{ +/* p.author{ font-size: 24px; font-weight: bold; background: rgba(255, 255, 255, 0.521); @@ -59,7 +46,7 @@ p.author{ padding: 10px 20px; margin: 0; margin-top: 60px; -} +} */ .figure-backgroung-cover img{ width: 100%; height: 100%; @@ -77,7 +64,7 @@ p.author{ break-before: right; } - +/* h2{ font-size: 38px; margin-top: 36px; @@ -85,7 +72,7 @@ h2{ padding: 20px; break-after: avoid; } - + */ @@ -94,36 +81,36 @@ h2{ ─────────────────────────────────────────── */ -h3{ +/* h3{ margin-top: 30px; break-after: avoid; -} +} */ /* ─────────────────────────────────────────── CARTES ─────────────────────────────────────────── */ -h4{ +/* h4{ break-after: avoid; margin-top: 30px; text-decoration: underline; -} +} */ /* ─────────────────────────────────────────── MARKERS ─────────────────────────────────────────── */ - +/* h5{ display: flex; align-items: center; } .marker-title img{ width: 40px; -} +} */ diff --git a/src/components/ElementPopup.vue b/src/components/ElementPopup.vue index 70ada0c..451612a 100644 --- a/src/components/ElementPopup.vue +++ b/src/components/ElementPopup.vue @@ -433,6 +433,8 @@ const getInstanceCount = (sel) => { const open = (element, event, count = null) => { elementInstanceCount.value = count !== null ? count : getInstanceCount(getSelectorFromElement(element)); + marginLocked.value = false; + paddingLocked.value = false; openSettings(element, event, { getSelectorFromElement, getInstanceCount, diff --git a/src/composables/useElementSettings.js b/src/composables/useElementSettings.js index 4c5e2d4..b6bbaea 100644 --- a/src/composables/useElementSettings.js +++ b/src/composables/useElementSettings.js @@ -234,6 +234,35 @@ export function useElementSettings({ margin, padding, basePopup }) { } }; + // --- Pre-toggle CSS snapshot --- + // Saves the CSS values for a group before toggle ON, restores them on toggle OFF + const preToggleSnapshots = new Map(); // key: `${selector}::${group}` → { cssProp: extractedValue } + + const savePreToggleSnapshot = (group) => { + const key = `${selector.value}::${group}`; + const cssProps = settingGroups[group]; + const snapshot = {}; + for (const cssProp of cssProps) { + const val = stylesheetStore.extractValue(selector.value, cssProp); + if (val) snapshot[cssProp] = val; + } + 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); + } + } + preToggleSnapshots.delete(key); + }; + // --- Toggle actions --- const onSubsectionClick = (group) => { if (settingEnabled[group]) return; @@ -244,6 +273,7 @@ export function useElementSettings({ margin, padding, basePopup }) { settingEnabled[group] = enabled; isUpdatingFromStore = true; if (enabled) { + savePreToggleSnapshot(group); restoreFromCache(group); applyAllEnabledGroups(); } else { @@ -254,6 +284,7 @@ export function useElementSettings({ margin, padding, basePopup }) { } else { removeProps(settingGroups[group]); } + restorePreToggleSnapshot(group); } saveElementState(); nextTick(() => { isUpdatingFromStore = false; }); @@ -349,15 +380,13 @@ export function useElementSettings({ margin, padding, basePopup }) { const comment = isTextDefault ? ' /* valeur par défaut */' : ''; lines.push(` ${entry.css}: ${val};${comment}`); } - const showMargin = settingEnabled.margin || ['top', 'right', 'bottom', 'left'].some(s => hasInCss(`margin-${s}`)); - if (showMargin) { - for (const side of ['top', 'right', 'bottom', 'left']) { + for (const side of ['top', 'right', 'bottom', 'left']) { + if (settingEnabled.margin || hasInCss(`margin-${side}`)) { lines.push(` margin-${side}: ${margin[side].value}${margin[side].unit};`); } } - const showPadding = settingEnabled.padding || ['top', 'right', 'bottom', 'left'].some(s => hasInCss(`padding-${s}`)); - if (showPadding) { - for (const side of ['top', 'right', 'bottom', 'left']) { + for (const side of ['top', 'right', 'bottom', 'left']) { + if (settingEnabled.padding || hasInCss(`padding-${side}`)) { lines.push(` padding-${side}: ${padding[side].value}${padding[side].unit};`); } } diff --git a/src/stores/stylesheet.js b/src/stores/stylesheet.js index 4093a29..7f46cca 100644 --- a/src/stores/stylesheet.js +++ b/src/stores/stylesheet.js @@ -196,17 +196,41 @@ export const useStylesheetStore = defineStore('stylesheet', () => { set('p', 'line-height', TEXT_DEFAULTS.lineHeight.value, TEXT_DEFAULTS.lineHeight.unit); // Heading defaults (h1, h2, ...) + // Unit props: { value, unit } objects mapped to a CSS property + const unitPropsMap = { + fontSize: 'font-size', + lineHeight: 'line-height', + borderWidth: 'border-width', + textDecorationThickness: 'text-decoration-thickness', + textUnderlineOffset: 'text-underline-offset', + }; + // String props: plain string values mapped to a CSS property + const stringPropsMap = { + background: 'background', + color: 'color', + fontFamily: 'font-family', + textAlign: 'text-align', + borderStyle: 'border-style', + borderColor: 'border-color', + textDecorationLine: 'text-decoration-line', + textDecorationStyle: 'text-decoration-style', + textDecorationColor: 'text-decoration-color', + }; + // Spacing props: objects with top/right/bottom/left sides + const spacingProps = ['padding', 'margin']; + for (const [tag, props] of Object.entries(HEADING_DEFAULTS)) { - if (props.fontSize) set(tag, 'font-size', props.fontSize.value, props.fontSize.unit); - if (props.background) set(tag, 'background', props.background); - if (props.padding) { - for (const side of ['top', 'right', 'bottom', 'left']) { - if (props.padding[side]) set(tag, `padding-${side}`, props.padding[side].value, props.padding[side].unit); - } + for (const [key, cssProp] of Object.entries(unitPropsMap)) { + if (props[key]) set(tag, cssProp, props[key].value, props[key].unit); } - if (props.margin) { - for (const side of ['top', 'right', 'bottom', 'left']) { - if (props.margin[side]) set(tag, `margin-${side}`, props.margin[side].value, props.margin[side].unit); + for (const [key, cssProp] of Object.entries(stringPropsMap)) { + if (props[key]) set(tag, cssProp, props[key]); + } + for (const prop of spacingProps) { + if (props[prop]) { + for (const side of ['top', 'right', 'bottom', 'left']) { + if (props[prop][side]) set(tag, `${prop}-${side}`, props[prop][side].value, props[prop][side].unit); + } } } } diff --git a/src/utils/defaults.js b/src/utils/defaults.js index 6d60021..97969c5 100644 --- a/src/utils/defaults.js +++ b/src/utils/defaults.js @@ -56,6 +56,7 @@ export const HEADING_DEFAULTS = Object.freeze({ }), margin: Object.freeze({ top: Object.freeze({ value: 60, unit: 'px' }), + bottom: Object.freeze({ value: 30, unit: 'px' }), }), }), });