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

refactor: simplify ElementPopup with flat refs and style descriptors
All checks were successful
Deploy / Build and Deploy to Production (push) Successful in 22s
Details

Browse source 
Flatten ref({ value }) to simple ref(), replace 9 updateX functions with
a generic updateProp driven by descriptor arrays, and loop over descriptors
in generatePreviewCss/loadValuesFromStylesheet/applyAllStyles. Remove
trivial passthrough computed properties. (-123 lines)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-02-26 15:47:58 +01:00
parent 69d5ebe7ed
commit f3c7132044
4 changed files with 129 additions and 242 deletions
Download patch file Download diff file Expand all files Collapse all files

1
public/content/1_cohesion-des-mondes/5_test-avec-geoformat/2_roadtrip-a-vos-risques-et-perils/.regenerate-map-image Normal file
View file

@ -0,0 +1 @@
1772115179

10
public/content/1_cohesion-des-mondes/5_test-avec-geoformat/2_roadtrip-a-vos-risques-et-perils/1_marker-1769700434/marker.txt
View file

@ -2,7 +2,11 @@ Title: Nîmes
----
Content:
Cover:
----
Text: [{"content":{"text":"<p>Nisi nec morbi diam tortor quis interdum fusce quisque sit aliquam scelerisque a vivamus gravida id eros nisl tortor commodo amet mi quis tincidunt metus.</p><p>Congue proin urna eget quisque sem a fusce felis eros purus hendrerit facilisis hendrerit metus accumsan metus nec eu cursus elementum maecenas ut scelerisque sit.</p>"},"id":"1adbada8-6dee-4ab4-b33b-d914d4806b70","isHidden":false,"type":"text"}]
----
@ -22,4 +26,8 @@ Markericonsize: 40
----
Content:
----
Uuid: lajqvh51bnvty5xr

2
public/content/1_cohesion-des-mondes/5_test-avec-geoformat/narrative.txt
View file

@ -6,7 +6,7 @@ Author: Mélina Vuillaumier
----
Cover:
Cover: - file://gw2bzdqno3enn1in
----

358
src/components/ElementPopup.vue
View file

@ -11,8 +11,8 @@
@toggle-inheritance="toggleInheritance"
>
<template #header-left>
<span class="element-label">{{ selectorTag }}</span>
<span class="instance-count">{{ instanceCount }} instances</span>
<span class="element-label">{{ selector || '' }}</span>
<span class="instance-count">{{ elementInstanceCount }} instances</span>
</template>
<template #controls>
@ -21,11 +21,11 @@
<div class="field field-font" :class="{ 'field--view-only': inheritanceLocked }">
<label class="label-with-tooltip" data-css="font-family">Police</label>
<div class="field-with-option">
<select v-model="fontFamily.value" :disabled="inheritanceLocked">
<select v-model="fontFamily" :disabled="inheritanceLocked">
<option v-for="f in fonts" :key="f" :value="f">{{ f }}</option>
</select>
<div class="field-checkbox">
<input type="checkbox" v-model="fontStyle.italic" :disabled="inheritanceLocked" />
<input type="checkbox" v-model="italic" :disabled="inheritanceLocked" />
<label class="label-with-tooltip" data-css="font-style">Italique</label>
</div>
</div>
@ -56,7 +56,7 @@
type="button"
:class="{ active: fontSize.unit === 'px' }"
:disabled="inheritanceLocked"
@click="updateFontSizeUnit('px')"
@click="updateUnitPropUnit(fontSize, 'px')"
>
px
</button>
@ -69,7 +69,7 @@
<div class="settings-subsection">
<div class="field" :class="{ 'field--view-only': inheritanceLocked }">
<label class="label-with-tooltip" data-css="text-align">Alignement</label>
<select v-model="textAlign.value" :disabled="inheritanceLocked">
<select v-model="textAlign" :disabled="inheritanceLocked">
<option value="left">Gauche</option>
<option value="center">Centre</option>
<option value="right">Droite</option>
@ -86,7 +86,7 @@
<input
ref="colorInput"
type="text"
v-model="color.value"
v-model="color"
:disabled="inheritanceLocked"
data-coloris
/>
@ -102,7 +102,7 @@
<input
ref="backgroundInput"
type="text"
v-model="background.value"
v-model="background"
:disabled="inheritanceLocked"
data-coloris
/>
@ -126,7 +126,7 @@
type="button"
:class="{ active: marginOuter.unit === 'mm' }"
:disabled="inheritanceLocked"
@click="updateMarginOuterUnit('mm')"
@click="updateUnitPropUnit(marginOuter, 'mm')"
>
mm
</button>
@ -134,7 +134,7 @@
type="button"
:class="{ active: marginOuter.unit === 'px' }"
:disabled="inheritanceLocked"
@click="updateMarginOuterUnit('px')"
@click="updateUnitPropUnit(marginOuter, 'px')"
>
px
</button>
@ -159,7 +159,7 @@
type="button"
:class="{ active: paddingInner.unit === 'mm' }"
:disabled="inheritanceLocked"
@click="updatePaddingInnerUnit('mm')"
@click="updateUnitPropUnit(paddingInner, 'mm')"
>
mm
</button>
@ -167,7 +167,7 @@
type="button"
:class="{ active: paddingInner.unit === 'px' }"
:disabled="inheritanceLocked"
@click="updatePaddingInnerUnit('px')"
@click="updateUnitPropUnit(paddingInner, 'px')"
>
px
</button>
@ -180,7 +180,7 @@
</template>
<script setup>
import { ref, computed, watch, nextTick } from 'vue';
import { ref, reactive, computed, watch, nextTick } from 'vue';
import { useStylesheetStore } from '../stores/stylesheet';
import { useDebounce } from '../composables/useDebounce';
import NumberInput from './ui/NumberInput.vue';
@ -210,46 +210,51 @@ const backgroundInput = ref(null);
let isUpdatingFromStore = false;
const { debouncedUpdate } = useDebounce(500);
// Style properties
const fontFamily = ref({ value: 'Alegreya Sans' });
const fontStyle = ref({ italic: false });
const fontWeight = ref({ value: 400 });
const fontSize = ref({ value: 23, unit: 'px' });
const textAlign = ref({ value: 'left' });
const color = ref({ value: 'rgb(0, 0, 0)' });
const background = ref({ value: 'transparent' });
const marginOuter = ref({ value: 0, unit: 'mm' });
const paddingInner = ref({ value: 0, unit: 'mm' });
// Style properties — flat refs for simple values, reactive for value+unit
const fontFamily = ref('Alegreya Sans');
const italic = ref(false);
const fontWeight = ref(400);
const textAlign = ref('left');
const color = ref('rgb(0, 0, 0)');
const background = ref('transparent');
const fontSize = reactive({ value: 23, unit: 'px' });
const marginOuter = reactive({ value: 0, unit: 'mm' });
const paddingInner = reactive({ value: 0, unit: 'mm' });
// Constants
const fonts = ['Alegreya Sans', 'Alegreya', 'Arial', 'Georgia', 'Times New Roman'];
const weights = ['200', '300', '400', '600', '800'];
// Computed to adapt fontWeight for UnitToggle
const fontWeightString = computed({
get: () => String(fontWeight.value.value),
set: (val) => {
fontWeight.value.value = parseInt(val);
}
get: () => String(fontWeight.value),
set: (val) => { fontWeight.value = parseInt(val); }
});
const immediateUpdate = (callback) => {
callback();
// Style property descriptors
const styleProps = [
{ css: 'font-family', get: () => fontFamily.value, set: v => fontFamily.value = v.replace(/['"]/g, ''), debounce: false },
{ css: 'font-style', get: () => italic.value ? 'italic' : 'normal', set: v => italic.value = v === 'italic', debounce: false },
{ css: 'font-weight', get: () => fontWeight.value, set: v => fontWeight.value = parseInt(v), debounce: false },
{ css: 'text-align', get: () => textAlign.value, set: v => textAlign.value = v, debounce: false },
{ css: 'color', get: () => color.value, set: v => color.value = v, debounce: true },
{ css: 'background', get: () => background.value, set: v => background.value = v, debounce: true },
];
const unitProps = [
{ css: 'font-size', ref: fontSize, debounce: true },
{ css: 'margin', ref: marginOuter, debounce: true },
{ css: 'padding', ref: paddingInner, debounce: true },
];
// Generic update: push a single property to the stylesheet store
const updateProp = (cssProp, value, unit) => {
if (!selector.value) return;
stylesheetStore.updateProperty(selector.value, cssProp, value, unit);
};
const updateFontSizeUnit = (newUnit) => {
fontSize.value.value = convertUnit(fontSize.value.value, fontSize.value.unit, newUnit);
fontSize.value.unit = newUnit;
};
const updateMarginOuterUnit = (newUnit) => {
marginOuter.value.value = convertUnit(marginOuter.value.value, marginOuter.value.unit, newUnit);
marginOuter.value.unit = newUnit;
};
const updatePaddingInnerUnit = (newUnit) => {
paddingInner.value.value = convertUnit(paddingInner.value.value, paddingInner.value.unit, newUnit);
paddingInner.value.unit = newUnit;
const updateUnitPropUnit = (prop, newUnit) => {
prop.value = convertUnit(prop.value, prop.unit, newUnit);
prop.unit = newUnit;
};
const getSelectorFromElement = (element) => {
@ -269,62 +274,37 @@ const getSelectorFromElement = (element) => {
return tagName;
};
const getInstanceCount = (selector) => {
const getInstanceCount = (sel) => {
if (!props.iframeRef || !props.iframeRef.contentDocument) return 0;
try {
const elements = props.iframeRef.contentDocument.querySelectorAll(selector);
return elements.length;
return props.iframeRef.contentDocument.querySelectorAll(sel).length;
} catch (e) {
return 0;
}
};
const selectorTag = computed(() => {
return selector.value || '';
});
const instanceCount = computed(() => {
return elementInstanceCount.value;
});
const elementCss = computed(() => {
if (!selector.value) return '';
return stylesheetStore.extractBlock(selector.value) || '';
});
// Generate a preview CSS block from current field values
const generatePreviewCss = () => {
if (!selector.value) return '';
const properties = [];
if (fontFamily.value.value) {
properties.push(` font-family: ${fontFamily.value.value};`);
for (const prop of styleProps) {
const val = prop.get();
if (val && (prop.css !== 'font-style' || val === 'italic')) {
properties.push(` ${prop.css}: ${val};`);
}
}
if (fontStyle.value.italic) {
properties.push(` font-style: italic;`);
}
if (fontWeight.value.value) {
properties.push(` font-weight: ${fontWeight.value.value};`);
}
if (fontSize.value.value) {
properties.push(` font-size: ${fontSize.value.value}${fontSize.value.unit};`);
}
if (textAlign.value.value) {
properties.push(` text-align: ${textAlign.value.value};`);
}
if (color.value.value) {
properties.push(` color: ${color.value.value};`);
}
if (background.value.value) {
properties.push(` background: ${background.value.value};`);
}
if (marginOuter.value.value !== undefined && marginOuter.value.value !== null) {
properties.push(` margin: ${marginOuter.value.value}${marginOuter.value.unit};`);
}
if (paddingInner.value.value !== undefined && paddingInner.value.value !== null) {
properties.push(` padding: ${paddingInner.value.value}${paddingInner.value.unit};`);
for (const prop of unitProps) {
if (prop.ref.value !== undefined && prop.ref.value !== null) {
properties.push(` ${prop.css}: ${prop.ref.value}${prop.ref.unit};`);
}
}
if (properties.length === 0) return '';
@ -347,87 +327,37 @@ const displayedCss = computed(() => {
' */';
});
// Update functions for each property
const updateFontFamily = () => {
if (!selector.value || !fontFamily.value.value) return;
stylesheetStore.updateProperty(selector.value, 'font-family', fontFamily.value.value);
};
const updateFontStyle = () => {
if (!selector.value) return;
stylesheetStore.updateProperty(selector.value, 'font-style', fontStyle.value.italic ? 'italic' : 'normal');
};
const updateFontWeight = () => {
if (!selector.value) return;
stylesheetStore.updateProperty(selector.value, 'font-weight', fontWeight.value.value);
};
const updateFontSize = () => {
if (!selector.value) return;
stylesheetStore.updateProperty(selector.value, 'font-size', fontSize.value.value, fontSize.value.unit);
};
const updateTextAlign = () => {
if (!selector.value) return;
stylesheetStore.updateProperty(selector.value, 'text-align', textAlign.value.value);
};
const updateColor = () => {
if (!selector.value || !color.value.value) return;
stylesheetStore.updateProperty(selector.value, 'color', color.value.value);
};
const updateBackground = () => {
if (!selector.value || !background.value.value) return;
stylesheetStore.updateProperty(selector.value, 'background', background.value.value);
};
const updateMarginOuter = () => {
if (!selector.value) return;
stylesheetStore.updateProperty(selector.value, 'margin', marginOuter.value.value, marginOuter.value.unit);
};
const updatePaddingInner = () => {
if (!selector.value) return;
stylesheetStore.updateProperty(selector.value, 'padding', paddingInner.value.value, paddingInner.value.unit);
};
// Apply all current field values to create/update the CSS block
const applyAllStyles = () => {
if (!selector.value) return;
updateFontFamily();
updateFontStyle();
updateFontWeight();
updateFontSize();
updateTextAlign();
updateColor();
updateBackground();
updateMarginOuter();
updatePaddingInner();
for (const prop of styleProps) {
updateProp(prop.css, prop.get());
}
for (const prop of unitProps) {
updateProp(prop.css, prop.ref.value, prop.ref.unit);
}
};
// Helper to reduce watcher boilerplate
const watchProp = (getter, updateFn, debounce = false) => {
watch(getter, () => {
// Watchers — simple props
for (const prop of styleProps) {
watch(prop.get, () => {
if (isUpdatingFromStore) return;
debounce ? debouncedUpdate(updateFn) : immediateUpdate(updateFn);
const fn = () => updateProp(prop.css, prop.get());
prop.debounce ? debouncedUpdate(fn) : fn();
});
};
}
watchProp(() => fontFamily.value.value, updateFontFamily);
watchProp(() => fontStyle.value.italic, updateFontStyle);
watchProp(() => fontWeight.value.value, updateFontWeight);
watchProp(() => fontSize.value.value, updateFontSize, true);
watchProp(() => fontSize.value.unit, updateFontSize);
watchProp(() => textAlign.value.value, updateTextAlign);
watchProp(() => color.value.value, updateColor, true);
watchProp(() => background.value.value, updateBackground, true);
watchProp(() => marginOuter.value.value, updateMarginOuter, true);
watchProp(() => marginOuter.value.unit, updateMarginOuter);
watchProp(() => paddingInner.value.value, updatePaddingInner, true);
watchProp(() => paddingInner.value.unit, updatePaddingInner);
// Watchers — unit props (watch both value and unit)
for (const prop of unitProps) {
watch(() => prop.ref.value, () => {
if (isUpdatingFromStore) return;
const fn = () => updateProp(prop.css, prop.ref.value, prop.ref.unit);
prop.debounce ? debouncedUpdate(fn) : fn();
});
watch(() => prop.ref.unit, () => {
if (isUpdatingFromStore) return;
updateProp(prop.css, prop.ref.value, prop.ref.unit);
});
}
const handleCssInput = (newCss) => {
const oldBlock = elementCss.value;
@ -443,9 +373,7 @@ watch(
if (basePopup.value?.visible && !isUpdatingFromStore) {
isUpdatingFromStore = true;
loadValuesFromStylesheet();
nextTick(() => {
isUpdatingFromStore = false;
});
nextTick(() => { isUpdatingFromStore = false; });
}
}
);
@ -457,9 +385,7 @@ watch(
if (basePopup.value?.visible && wasEditing && !isEditing && !isUpdatingFromStore) {
isUpdatingFromStore = true;
loadValuesFromStylesheet();
nextTick(() => {
isUpdatingFromStore = false;
});
nextTick(() => { isUpdatingFromStore = false; });
}
}
);
@ -468,58 +394,22 @@ const loadValuesFromStylesheet = () => {
if (!selector.value) return;
try {
const fontFamilyData = stylesheetStore.extractValue(selector.value, 'font-family');
if (fontFamilyData) {
const value = typeof fontFamilyData === 'string' ? fontFamilyData : fontFamilyData.value;
fontFamily.value.value = value.replace(/['"]/g, '');
// Simple props
for (const prop of styleProps) {
const data = stylesheetStore.extractValue(selector.value, prop.css);
if (data) {
const value = typeof data === 'string' ? data : data.value;
prop.set(value);
}
}
const fontStyleData = stylesheetStore.extractValue(selector.value, 'font-style');
if (fontStyleData) {
const value = typeof fontStyleData === 'string' ? fontStyleData : fontStyleData.value;
fontStyle.value.italic = value === 'italic';
}
const fontWeightData = stylesheetStore.extractValue(selector.value, 'font-weight');
if (fontWeightData) {
const value = typeof fontWeightData === 'string' ? fontWeightData : fontWeightData.value;
fontWeight.value.value = parseInt(value);
}
const fontSizeData = stylesheetStore.extractValue(selector.value, 'font-size');
if (fontSizeData && fontSizeData.value !== undefined) {
fontSize.value.value = fontSizeData.value;
fontSize.value.unit = fontSizeData.unit;
}
const textAlignData = stylesheetStore.extractValue(selector.value, 'text-align');
if (textAlignData) {
const value = typeof textAlignData === 'string' ? textAlignData : textAlignData.value;
textAlign.value.value = value;
}
const colorData = stylesheetStore.extractValue(selector.value, 'color');
if (colorData) {
const value = typeof colorData === 'string' ? colorData : colorData.value;
color.value.value = value;
}
const backgroundData = stylesheetStore.extractValue(selector.value, 'background');
if (backgroundData) {
const value = typeof backgroundData === 'string' ? backgroundData : backgroundData.value;
background.value.value = value;
}
const marginData = stylesheetStore.extractValue(selector.value, 'margin');
if (marginData && marginData.value !== undefined) {
marginOuter.value.value = marginData.value;
marginOuter.value.unit = marginData.unit;
}
const paddingData = stylesheetStore.extractValue(selector.value, 'padding');
if (paddingData && paddingData.value !== undefined) {
paddingInner.value.value = paddingData.value;
paddingInner.value.unit = paddingData.unit;
// Unit props
for (const prop of unitProps) {
const data = stylesheetStore.extractValue(selector.value, prop.css);
if (data && data.value !== undefined) {
prop.ref.value = data.value;
prop.ref.unit = data.unit;
}
}
} catch (error) {
console.error('Error loading values from stylesheet:', error);
@ -532,27 +422,15 @@ const open = (element, event, count = null) => {
selectedElement.value = element;
selector.value = getSelectorFromElement(element);
// Store instance count if provided, otherwise calculate it
elementInstanceCount.value = count !== null ? count : getInstanceCount(selector.value);
// Detect inheritance state from CSS block state
const blockState = stylesheetStore.getBlockState(selector.value);
basePopup.value.inheritanceLocked = blockState !== 'active';
if (blockState === 'active') {
basePopup.value.inheritanceLocked = false;
} else {
basePopup.value.inheritanceLocked = true;
}
// Load values from stylesheet (includes commented blocks)
loadValuesFromStylesheet();
// Open popup (sets visible, position, inits Coloris)
basePopup.value.open(event);
nextTick(() => {
isUpdatingFromStore = false;
});
nextTick(() => { isUpdatingFromStore = false; });
};
const close = () => {
@ -586,34 +464,34 @@ const toggleInheritance = () => {
basePopup.value.inheritanceLocked = false;
} else if (basePopup.value.inheritanceLocked && blockState === 'none') {
if (selectedElement.value && props.iframeRef && props.iframeRef.contentWindow) {
const computed = props.iframeRef.contentWindow.getComputedStyle(selectedElement.value);
const cs = props.iframeRef.contentWindow.getComputedStyle(selectedElement.value);
isUpdatingFromStore = true;
fontFamily.value.value = computed.fontFamily.replace(/['"]/g, '').split(',')[0].trim();
fontStyle.value.italic = computed.fontStyle === 'italic';
fontWeight.value.value = parseInt(computed.fontWeight);
fontFamily.value = cs.fontFamily.replace(/['"]/g, '').split(',')[0].trim();
italic.value = cs.fontStyle === 'italic';
fontWeight.value = parseInt(cs.fontWeight);
const fontSizeMatch = computed.fontSize.match(/([\d.]+)(px|rem|em|pt)/);
const fontSizeMatch = cs.fontSize.match(/([\d.]+)(px|rem|em|pt)/);
if (fontSizeMatch) {
fontSize.value.value = parseFloat(fontSizeMatch[1]);
fontSize.value.unit = fontSizeMatch[2];
fontSize.value = parseFloat(fontSizeMatch[1]);
fontSize.unit = fontSizeMatch[2];
}
textAlign.value.value = computed.textAlign;
color.value.value = computed.color;
background.value.value = computed.backgroundColor;
textAlign.value = cs.textAlign;
color.value = cs.color;
background.value = cs.backgroundColor;
const marginMatch = computed.marginTop.match(/([\d.]+)(px|mm|pt)/);
const marginMatch = cs.marginTop.match(/([\d.]+)(px|mm|pt)/);
if (marginMatch) {
marginOuter.value.value = parseFloat(marginMatch[1]);
marginOuter.value.unit = marginMatch[2];
marginOuter.value = parseFloat(marginMatch[1]);
marginOuter.unit = marginMatch[2];
}
const paddingMatch = computed.paddingTop.match(/([\d.]+)(px|mm|pt)/);
const paddingMatch = cs.paddingTop.match(/([\d.]+)(px|mm|pt)/);
if (paddingMatch) {
paddingInner.value.value = parseFloat(paddingMatch[1]);
paddingInner.value.unit = paddingMatch[2];
paddingInner.value = parseFloat(paddingMatch[1]);
paddingInner.unit = paddingMatch[2];
}
isUpdatingFromStore = false;