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

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',

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