studio-variable/geoproject-app
5
0
Fork 0
Code Issues 10 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

31
src/components/editor/PageSettings.vue
View file

@ -66,21 +66,21 @@
<button
type="button"
:class="{ active: margins.top.unit === 'mm' }"
@click="margins.top.unit = 'mm'"
@click="updateMarginUnit('top', 'mm')"
>
mm
</button>
<button
type="button"
:class="{ active: margins.top.unit === 'px' }"
@click="margins.top.unit = 'px'"
@click="updateMarginUnit('top', 'px')"
>
px
</button>
<button
type="button"
:class="{ active: margins.top.unit === 'rem' }"
@click="margins.top.unit = 'rem'"
@click="updateMarginUnit('top', 'rem')"
>
rem
</button>
@ -107,21 +107,21 @@
<button
type="button"
:class="{ active: margins.bottom.unit === 'mm' }"
@click="margins.bottom.unit = 'mm'"
@click="updateMarginUnit('bottom', 'mm')"
>
mm
</button>
<button
type="button"
:class="{ active: margins.bottom.unit === 'px' }"
@click="margins.bottom.unit = 'px'"
@click="updateMarginUnit('bottom', 'px')"
>
px
</button>
<button
type="button"
:class="{ active: margins.bottom.unit === 'rem' }"
@click="margins.bottom.unit = 'rem'"
@click="updateMarginUnit('bottom', 'rem')"
>
rem
</button>
@ -148,21 +148,21 @@
<button
type="button"
:class="{ active: margins.left.unit === 'mm' }"
@click="margins.left.unit = 'mm'"
@click="updateMarginUnit('left', 'mm')"
>
mm
</button>
<button
type="button"
:class="{ active: margins.left.unit === 'px' }"
@click="margins.left.unit = 'px'"
@click="updateMarginUnit('left', 'px')"
>
px
</button>
<button
type="button"
:class="{ active: margins.left.unit === 'rem' }"
@click="margins.left.unit = 'rem'"
@click="updateMarginUnit('left', 'rem')"
>
rem
</button>
@ -189,21 +189,21 @@
<button
type="button"
:class="{ active: margins.right.unit === 'mm' }"
@click="margins.right.unit = 'mm'"
@click="updateMarginUnit('right', 'mm')"
>
mm
</button>
<button
type="button"
:class="{ active: margins.right.unit === 'px' }"
@click="margins.right.unit = 'px'"
@click="updateMarginUnit('right', 'px')"
>
px
</button>
<button
type="button"
:class="{ active: margins.right.unit === 'rem' }"
@click="margins.right.unit = 'rem'"
@click="updateMarginUnit('right', 'rem')"
>
rem
</button>
@ -295,6 +295,7 @@ import { useStylesheetStore } from '../../stores/stylesheet';
import { useDebounce } from '../../composables/useDebounce';
import Coloris from '@melloware/coloris';
import NumberInput from '../ui/NumberInput.vue';
import { convertUnit } from '../../utils/unit-conversion';
import '@melloware/coloris/dist/coloris.css';
const stylesheetStore = useStylesheetStore();
@ -324,6 +325,12 @@ const margins = ref({
right: { value: 20, unit: 'mm' },
});
const updateMarginUnit = (side, newUnit) => {
const m = margins.value[side];
m.value = convertUnit(m.value, m.unit, newUnit);
m.unit = newUnit;
};
const background = ref({
value: '',
format: 'hex',