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

fix: convert values when switching CSS units to preserve visual size
All checks were successful
Deploy / Build and Deploy to Production (push) Successful in 21s
Details

Browse source 
Previously, changing unit (e.g. mm → px) kept the numeric value unchanged,
causing visual changes. Now values are converted through a px pivot unit
so the rendered size stays the same.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-02-24 14:08:30 +01:00
parent 342a6eccf1
commit de3bb2a274
5 changed files with 92 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -379,6 +379,7 @@ import NumberInput from '../ui/NumberInput.vue';
import { useCssUpdater } from '../../composables/useCssUpdater';
import { useCssSync } from '../../composables/useCssSync';
import { useDebounce } from '../../composables/useDebounce';
import { convertUnit } from '../../utils/unit-conversion';
const { updateStyle, setMargin, setDetailedMargins, setPadding, setDetailedPadding } = useCssUpdater();
const { extractValue, extractNumericValue, extractSpacing } = useCssSync();
@ -439,20 +440,24 @@ const prevMarginInner = ref({
let isUpdatingFromStore = false;
// Update margin outer unit for all sides
const updateMarginOuterUnit = (unit) => {
marginOuterDetailed.value.top.unit = unit;
marginOuterDetailed.value.right.unit = unit;
marginOuterDetailed.value.bottom.unit = unit;
marginOuterDetailed.value.left.unit = unit;
// Update margin outer unit for all sides with conversion
const updateMarginOuterUnit = (newUnit) => {
const sides = ['top', 'right', 'bottom', 'left'];
sides.forEach((side) => {
const s = marginOuterDetailed.value[side];
s.value = convertUnit(s.value, s.unit, newUnit);
s.unit = newUnit;
});
};
// Update margin inner unit for all sides
const updateMarginInnerUnit = (unit) => {
marginInnerDetailed.value.top.unit = unit;
marginInnerDetailed.value.right.unit = unit;
marginInnerDetailed.value.bottom.unit = unit;
marginInnerDetailed.value.left.unit = unit;
// Update margin inner unit for all sides with conversion
const updateMarginInnerUnit = (newUnit) => {
const sides = ['top', 'right', 'bottom', 'left'];
sides.forEach((side) => {
const s = marginInnerDetailed.value[side];
s.value = convertUnit(s.value, s.unit, newUnit);
s.unit = newUnit;
});
};
// Watchers for body styles