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

30
src/components/ElementPopup.vue
View file

@ -56,7 +56,7 @@
type="button"
:class="{ active: fontSize.unit === 'px' }"
:disabled="inheritanceLocked"
@click="fontSize.unit = 'px'"
@click="updateFontSizeUnit('px')"
>
px
</button>
@ -64,7 +64,7 @@
type="button"
:class="{ active: fontSize.unit === 'em' }"
:disabled="inheritanceLocked"
@click="fontSize.unit = 'em'"
@click="updateFontSizeUnit('em')"
>
em
</button>
@ -72,7 +72,7 @@
type="button"
:class="{ active: fontSize.unit === 'rem' }"
:disabled="inheritanceLocked"
@click="fontSize.unit = 'rem'"
@click="updateFontSizeUnit('rem')"
>
rem
</button>
@ -142,7 +142,7 @@
type="button"
:class="{ active: marginOuter.unit === 'mm' }"
:disabled="inheritanceLocked"
@click="marginOuter.unit = 'mm'"
@click="updateMarginOuterUnit('mm')"
>
mm
</button>
@ -150,7 +150,7 @@
type="button"
:class="{ active: marginOuter.unit === 'px' }"
:disabled="inheritanceLocked"
@click="marginOuter.unit = 'px'"
@click="updateMarginOuterUnit('px')"
>
px
</button>
@ -175,7 +175,7 @@
type="button"
:class="{ active: paddingInner.unit === 'mm' }"
:disabled="inheritanceLocked"
@click="paddingInner.unit = 'mm'"
@click="updatePaddingInnerUnit('mm')"
>
mm
</button>
@ -183,7 +183,7 @@
type="button"
:class="{ active: paddingInner.unit === 'px' }"
:disabled="inheritanceLocked"
@click="paddingInner.unit = 'px'"
@click="updatePaddingInnerUnit('px')"
>
px
</button>
@ -264,6 +264,7 @@ import { usePopupPosition } from '../composables/usePopupPosition';
import { useDebounce } from '../composables/useDebounce';
import NumberInput from './ui/NumberInput.vue';
import UnitToggle from './ui/UnitToggle.vue';
import { convertUnit } from '../utils/unit-conversion';
import Coloris from '@melloware/coloris';
import '@melloware/coloris/dist/coloris.css';
import hljs from 'highlight.js/lib/core';
@ -325,6 +326,21 @@ const immediateUpdate = (callback) => {
callback();
};
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 getSelectorFromElement = (element) => {
// Try to build a meaningful selector
if (element.id) {