|
|
|
|
@ -486,7 +486,6 @@ const stylesheetStore = useStylesheetStore();
|
|
|
|
|
|
|
|
|
|
let isUpdatingFromStore = false;
|
|
|
|
|
let updateTimer = null;
|
|
|
|
|
let isSyncingFromSimple = false; // Flag to prevent detailed watchers from triggering when syncing from simple field
|
|
|
|
|
|
|
|
|
|
const debouncedUpdate = (callback) => {
|
|
|
|
|
clearTimeout(updateTimer);
|
|
|
|
|
@ -525,201 +524,70 @@ const background = ref({
|
|
|
|
|
|
|
|
|
|
// Margin outer
|
|
|
|
|
const marginOuter = ref({
|
|
|
|
|
value: 0,
|
|
|
|
|
value: 23,
|
|
|
|
|
unit: 'mm',
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const marginOuterExpanded = ref(false);
|
|
|
|
|
|
|
|
|
|
const marginOuterDetailed = ref({
|
|
|
|
|
top: { value: 0, unit: 'mm' },
|
|
|
|
|
bottom: { value: 24, unit: 'mm' },
|
|
|
|
|
left: { value: 0, unit: 'mm' },
|
|
|
|
|
right: { value: 0, unit: 'mm' },
|
|
|
|
|
top: { value: 23, unit: 'mm' },
|
|
|
|
|
bottom: { value: 23, unit: 'mm' },
|
|
|
|
|
left: { value: 23, unit: 'mm' },
|
|
|
|
|
right: { value: 23, unit: 'mm' },
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Margin inner
|
|
|
|
|
const marginInner = ref({
|
|
|
|
|
value: 0,
|
|
|
|
|
value: 23,
|
|
|
|
|
unit: 'mm',
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const marginInnerExpanded = ref(false);
|
|
|
|
|
|
|
|
|
|
const marginInnerDetailed = ref({
|
|
|
|
|
top: { value: 0, unit: 'mm' },
|
|
|
|
|
bottom: { value: 0, unit: 'mm' },
|
|
|
|
|
left: { value: 0, unit: 'mm' },
|
|
|
|
|
right: { value: 0, unit: 'mm' },
|
|
|
|
|
top: { value: 23, unit: 'mm' },
|
|
|
|
|
bottom: { value: 23, unit: 'mm' },
|
|
|
|
|
left: { value: 23, unit: 'mm' },
|
|
|
|
|
right: { value: 23, unit: 'mm' },
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Update functions
|
|
|
|
|
const updateBodyStyle = (property, value) => {
|
|
|
|
|
const currentBlock = stylesheetStore.extractBlock('body') || createBodyRule();
|
|
|
|
|
|
|
|
|
|
if (currentBlock.includes(`${property}:`)) {
|
|
|
|
|
// Update existing property
|
|
|
|
|
const updatedBlock = currentBlock.replace(
|
|
|
|
|
new RegExp(`(${property}:\\s*)[^;]+`, 'i'),
|
|
|
|
|
`$1${value}`
|
|
|
|
|
);
|
|
|
|
|
stylesheetStore.content = stylesheetStore.content.replace(
|
|
|
|
|
currentBlock,
|
|
|
|
|
updatedBlock
|
|
|
|
|
);
|
|
|
|
|
} else {
|
|
|
|
|
// Add new property
|
|
|
|
|
const updatedBlock = currentBlock.replace(
|
|
|
|
|
/(\s*})$/,
|
|
|
|
|
` ${property}: ${value};\n$1`
|
|
|
|
|
);
|
|
|
|
|
stylesheetStore.content = stylesheetStore.content.replace(
|
|
|
|
|
currentBlock,
|
|
|
|
|
updatedBlock
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const updateParagraphStyle = (property, value) => {
|
|
|
|
|
const currentBlock = stylesheetStore.extractBlock('p') || createParagraphRule();
|
|
|
|
|
|
|
|
|
|
if (currentBlock.includes(`${property}:`)) {
|
|
|
|
|
// Update existing property
|
|
|
|
|
const updatedBlock = currentBlock.replace(
|
|
|
|
|
new RegExp(`(${property}:\\s*)[^;]+`, 'i'),
|
|
|
|
|
`$1${value}`
|
|
|
|
|
);
|
|
|
|
|
stylesheetStore.content = stylesheetStore.content.replace(
|
|
|
|
|
currentBlock,
|
|
|
|
|
updatedBlock
|
|
|
|
|
);
|
|
|
|
|
} else {
|
|
|
|
|
// Add new property
|
|
|
|
|
const updatedBlock = currentBlock.replace(
|
|
|
|
|
/(\s*})$/,
|
|
|
|
|
` ${property}: ${value};\n$1`
|
|
|
|
|
);
|
|
|
|
|
stylesheetStore.content = stylesheetStore.content.replace(
|
|
|
|
|
currentBlock,
|
|
|
|
|
updatedBlock
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// Remove detailed margin properties (margin-top, margin-right, etc.)
|
|
|
|
|
const removeDetailedMargins = () => {
|
|
|
|
|
let currentBlock = stylesheetStore.extractBlock('p');
|
|
|
|
|
if (!currentBlock) return;
|
|
|
|
|
|
|
|
|
|
let updatedBlock = currentBlock;
|
|
|
|
|
updatedBlock = updatedBlock.replace(/\s*margin-top:\s*[^;]+;\n?/gi, '');
|
|
|
|
|
updatedBlock = updatedBlock.replace(/\s*margin-right:\s*[^;]+;\n?/gi, '');
|
|
|
|
|
updatedBlock = updatedBlock.replace(/\s*margin-bottom:\s*[^;]+;\n?/gi, '');
|
|
|
|
|
updatedBlock = updatedBlock.replace(/\s*margin-left:\s*[^;]+;\n?/gi, '');
|
|
|
|
|
|
|
|
|
|
if (updatedBlock !== currentBlock) {
|
|
|
|
|
stylesheetStore.content = stylesheetStore.content.replace(
|
|
|
|
|
currentBlock,
|
|
|
|
|
updatedBlock
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// Remove detailed padding properties (padding-top, padding-right, etc.)
|
|
|
|
|
const removeDetailedPadding = () => {
|
|
|
|
|
let currentBlock = stylesheetStore.extractBlock('p');
|
|
|
|
|
if (!currentBlock) return;
|
|
|
|
|
|
|
|
|
|
let updatedBlock = currentBlock;
|
|
|
|
|
updatedBlock = updatedBlock.replace(/\s*padding-top:\s*[^;]+;\n?/gi, '');
|
|
|
|
|
updatedBlock = updatedBlock.replace(/\s*padding-right:\s*[^;]+;\n?/gi, '');
|
|
|
|
|
updatedBlock = updatedBlock.replace(/\s*padding-bottom:\s*[^;]+;\n?/gi, '');
|
|
|
|
|
updatedBlock = updatedBlock.replace(/\s*padding-left:\s*[^;]+;\n?/gi, '');
|
|
|
|
|
|
|
|
|
|
if (updatedBlock !== currentBlock) {
|
|
|
|
|
stylesheetStore.content = stylesheetStore.content.replace(
|
|
|
|
|
currentBlock,
|
|
|
|
|
updatedBlock
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// Remove shorthand margin property
|
|
|
|
|
const removeShorthandMargin = () => {
|
|
|
|
|
let currentBlock = stylesheetStore.extractBlock('p');
|
|
|
|
|
if (!currentBlock) return;
|
|
|
|
|
|
|
|
|
|
let updatedBlock = currentBlock.replace(/\s*margin:\s*[^;]+;\n?/gi, '');
|
|
|
|
|
|
|
|
|
|
if (updatedBlock !== currentBlock) {
|
|
|
|
|
stylesheetStore.content = stylesheetStore.content.replace(
|
|
|
|
|
currentBlock,
|
|
|
|
|
updatedBlock
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// Remove shorthand padding property
|
|
|
|
|
const removeShorthandPadding = () => {
|
|
|
|
|
let currentBlock = stylesheetStore.extractBlock('p');
|
|
|
|
|
if (!currentBlock) return;
|
|
|
|
|
|
|
|
|
|
let updatedBlock = currentBlock.replace(/\s*padding:\s*[^;]+;\n?/gi, '');
|
|
|
|
|
|
|
|
|
|
if (updatedBlock !== currentBlock) {
|
|
|
|
|
stylesheetStore.content = stylesheetStore.content.replace(
|
|
|
|
|
currentBlock,
|
|
|
|
|
updatedBlock
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const createBodyRule = () => {
|
|
|
|
|
stylesheetStore.content += '\n\nbody {\n}\n';
|
|
|
|
|
return 'body {\n}';
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const createParagraphRule = () => {
|
|
|
|
|
stylesheetStore.content += '\n\np {\n}\n';
|
|
|
|
|
return 'p {\n}';
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// Watchers - Immediate updates for select/buttons/checkboxes
|
|
|
|
|
watch(font, () => {
|
|
|
|
|
if (isUpdatingFromStore) return;
|
|
|
|
|
immediateUpdate(() => {
|
|
|
|
|
// TODO: implement font update when fonts are available
|
|
|
|
|
// TODO: implement font update
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
watch(italic, (newValue) => {
|
|
|
|
|
watch(italic, () => {
|
|
|
|
|
if (isUpdatingFromStore) return;
|
|
|
|
|
immediateUpdate(() => {
|
|
|
|
|
updateBodyStyle('font-style', newValue ? 'italic' : 'normal');
|
|
|
|
|
// TODO: implement italic update
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
watch(weight, (newValue) => {
|
|
|
|
|
watch(weight, () => {
|
|
|
|
|
if (isUpdatingFromStore) return;
|
|
|
|
|
immediateUpdate(() => {
|
|
|
|
|
updateParagraphStyle('font-weight', newValue);
|
|
|
|
|
// TODO: implement weight update
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
watch(alignment, (newValue) => {
|
|
|
|
|
watch(alignment, () => {
|
|
|
|
|
if (isUpdatingFromStore) return;
|
|
|
|
|
immediateUpdate(() => {
|
|
|
|
|
updateBodyStyle('text-align', newValue);
|
|
|
|
|
// TODO: implement alignment update
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Font size - immediate for both value and unit (applied to paragraphs)
|
|
|
|
|
// Font size - debounced for value, immediate for unit
|
|
|
|
|
watch(
|
|
|
|
|
() => fontSize.value.value,
|
|
|
|
|
() => {
|
|
|
|
|
if (isUpdatingFromStore) return;
|
|
|
|
|
immediateUpdate(() => {
|
|
|
|
|
updateParagraphStyle('font-size', `${fontSize.value.value}${fontSize.value.unit}`);
|
|
|
|
|
debouncedUpdate(() => {
|
|
|
|
|
// TODO: implement font size update
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
@ -729,50 +597,40 @@ watch(
|
|
|
|
|
() => {
|
|
|
|
|
if (isUpdatingFromStore) return;
|
|
|
|
|
immediateUpdate(() => {
|
|
|
|
|
updateParagraphStyle('font-size', `${fontSize.value.value}${fontSize.value.unit}`);
|
|
|
|
|
// TODO: implement font size update
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
// Color - immediate update for Coloris
|
|
|
|
|
// Color - debounced for text value
|
|
|
|
|
watch(
|
|
|
|
|
() => color.value.value,
|
|
|
|
|
() => {
|
|
|
|
|
if (isUpdatingFromStore) return;
|
|
|
|
|
immediateUpdate(() => {
|
|
|
|
|
updateBodyStyle('color', color.value.value);
|
|
|
|
|
debouncedUpdate(() => {
|
|
|
|
|
// TODO: implement color update
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
// Background - immediate update for Coloris
|
|
|
|
|
// Background - debounced for value
|
|
|
|
|
watch(
|
|
|
|
|
() => background.value.value,
|
|
|
|
|
() => {
|
|
|
|
|
if (isUpdatingFromStore) return;
|
|
|
|
|
immediateUpdate(() => {
|
|
|
|
|
updateBodyStyle('background', background.value.value);
|
|
|
|
|
debouncedUpdate(() => {
|
|
|
|
|
// TODO: implement background update
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
// Margin outer - debounced for value, immediate for unit (applied to paragraphs)
|
|
|
|
|
// Margin outer - debounced for value, immediate for unit
|
|
|
|
|
watch(
|
|
|
|
|
() => marginOuter.value.value,
|
|
|
|
|
() => {
|
|
|
|
|
if (isUpdatingFromStore) return;
|
|
|
|
|
|
|
|
|
|
// Update all detailed values to match the simple value
|
|
|
|
|
isSyncingFromSimple = true;
|
|
|
|
|
marginOuterDetailed.value.top.value = marginOuter.value.value;
|
|
|
|
|
marginOuterDetailed.value.right.value = marginOuter.value.value;
|
|
|
|
|
marginOuterDetailed.value.bottom.value = marginOuter.value.value;
|
|
|
|
|
marginOuterDetailed.value.left.value = marginOuter.value.value;
|
|
|
|
|
isSyncingFromSimple = false;
|
|
|
|
|
|
|
|
|
|
debouncedUpdate(() => {
|
|
|
|
|
removeDetailedMargins(); // Remove detailed properties first
|
|
|
|
|
updateParagraphStyle('margin', `${marginOuter.value.value}${marginOuter.value.unit}`);
|
|
|
|
|
// TODO: implement margin outer update
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
@ -781,23 +639,13 @@ watch(
|
|
|
|
|
() => marginOuter.value.unit,
|
|
|
|
|
() => {
|
|
|
|
|
if (isUpdatingFromStore) return;
|
|
|
|
|
|
|
|
|
|
// Update all detailed units to match the simple unit
|
|
|
|
|
isSyncingFromSimple = true;
|
|
|
|
|
marginOuterDetailed.value.top.unit = marginOuter.value.unit;
|
|
|
|
|
marginOuterDetailed.value.right.unit = marginOuter.value.unit;
|
|
|
|
|
marginOuterDetailed.value.bottom.unit = marginOuter.value.unit;
|
|
|
|
|
marginOuterDetailed.value.left.unit = marginOuter.value.unit;
|
|
|
|
|
isSyncingFromSimple = false;
|
|
|
|
|
|
|
|
|
|
immediateUpdate(() => {
|
|
|
|
|
removeDetailedMargins(); // Remove detailed properties first
|
|
|
|
|
updateParagraphStyle('margin', `${marginOuter.value.value}${marginOuter.value.unit}`);
|
|
|
|
|
// TODO: implement margin outer update
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
// Margin outer detailed - debounced for values, immediate for units (applied to paragraphs)
|
|
|
|
|
// Margin outer detailed - debounced for values, immediate for units
|
|
|
|
|
watch(
|
|
|
|
|
() => [
|
|
|
|
|
marginOuterDetailed.value.top.value,
|
|
|
|
|
@ -806,13 +654,9 @@ watch(
|
|
|
|
|
marginOuterDetailed.value.right.value,
|
|
|
|
|
],
|
|
|
|
|
() => {
|
|
|
|
|
if (isUpdatingFromStore || !marginOuterExpanded.value || isSyncingFromSimple) return;
|
|
|
|
|
if (isUpdatingFromStore) return;
|
|
|
|
|
debouncedUpdate(() => {
|
|
|
|
|
removeShorthandMargin(); // Remove shorthand property first
|
|
|
|
|
updateParagraphStyle('margin-top', `${marginOuterDetailed.value.top.value}${marginOuterDetailed.value.top.unit}`);
|
|
|
|
|
updateParagraphStyle('margin-bottom', `${marginOuterDetailed.value.bottom.value}${marginOuterDetailed.value.bottom.unit}`);
|
|
|
|
|
updateParagraphStyle('margin-left', `${marginOuterDetailed.value.left.value}${marginOuterDetailed.value.left.unit}`);
|
|
|
|
|
updateParagraphStyle('margin-right', `${marginOuterDetailed.value.right.value}${marginOuterDetailed.value.right.unit}`);
|
|
|
|
|
// TODO: implement margin outer detailed update
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
@ -825,34 +669,20 @@ watch(
|
|
|
|
|
marginOuterDetailed.value.right.unit,
|
|
|
|
|
],
|
|
|
|
|
() => {
|
|
|
|
|
if (isUpdatingFromStore || !marginOuterExpanded.value || isSyncingFromSimple) return;
|
|
|
|
|
if (isUpdatingFromStore) return;
|
|
|
|
|
immediateUpdate(() => {
|
|
|
|
|
removeShorthandMargin(); // Remove shorthand property first
|
|
|
|
|
updateParagraphStyle('margin-top', `${marginOuterDetailed.value.top.value}${marginOuterDetailed.value.top.unit}`);
|
|
|
|
|
updateParagraphStyle('margin-bottom', `${marginOuterDetailed.value.bottom.value}${marginOuterDetailed.value.bottom.unit}`);
|
|
|
|
|
updateParagraphStyle('margin-left', `${marginOuterDetailed.value.left.value}${marginOuterDetailed.value.left.unit}`);
|
|
|
|
|
updateParagraphStyle('margin-right', `${marginOuterDetailed.value.right.value}${marginOuterDetailed.value.right.unit}`);
|
|
|
|
|
// TODO: implement margin outer detailed update
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
// Margin inner - debounced for value, immediate for unit (applied to paragraphs)
|
|
|
|
|
// Margin inner - debounced for value, immediate for unit
|
|
|
|
|
watch(
|
|
|
|
|
() => marginInner.value.value,
|
|
|
|
|
() => {
|
|
|
|
|
if (isUpdatingFromStore) return;
|
|
|
|
|
|
|
|
|
|
// Update all detailed values to match the simple value
|
|
|
|
|
isSyncingFromSimple = true;
|
|
|
|
|
marginInnerDetailed.value.top.value = marginInner.value.value;
|
|
|
|
|
marginInnerDetailed.value.right.value = marginInner.value.value;
|
|
|
|
|
marginInnerDetailed.value.bottom.value = marginInner.value.value;
|
|
|
|
|
marginInnerDetailed.value.left.value = marginInner.value.value;
|
|
|
|
|
isSyncingFromSimple = false;
|
|
|
|
|
|
|
|
|
|
debouncedUpdate(() => {
|
|
|
|
|
removeDetailedPadding(); // Remove detailed properties first
|
|
|
|
|
updateParagraphStyle('padding', `${marginInner.value.value}${marginInner.value.unit}`);
|
|
|
|
|
// TODO: implement margin inner update
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
@ -861,23 +691,13 @@ watch(
|
|
|
|
|
() => marginInner.value.unit,
|
|
|
|
|
() => {
|
|
|
|
|
if (isUpdatingFromStore) return;
|
|
|
|
|
|
|
|
|
|
// Update all detailed units to match the simple unit
|
|
|
|
|
isSyncingFromSimple = true;
|
|
|
|
|
marginInnerDetailed.value.top.unit = marginInner.value.unit;
|
|
|
|
|
marginInnerDetailed.value.right.unit = marginInner.value.unit;
|
|
|
|
|
marginInnerDetailed.value.bottom.unit = marginInner.value.unit;
|
|
|
|
|
marginInnerDetailed.value.left.unit = marginInner.value.unit;
|
|
|
|
|
isSyncingFromSimple = false;
|
|
|
|
|
|
|
|
|
|
immediateUpdate(() => {
|
|
|
|
|
removeDetailedPadding(); // Remove detailed properties first
|
|
|
|
|
updateParagraphStyle('padding', `${marginInner.value.value}${marginInner.value.unit}`);
|
|
|
|
|
// TODO: implement margin inner update
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
// Margin inner detailed - debounced for values, immediate for units (applied to paragraphs)
|
|
|
|
|
// Margin inner detailed - debounced for values, immediate for units
|
|
|
|
|
watch(
|
|
|
|
|
() => [
|
|
|
|
|
marginInnerDetailed.value.top.value,
|
|
|
|
|
@ -886,13 +706,9 @@ watch(
|
|
|
|
|
marginInnerDetailed.value.right.value,
|
|
|
|
|
],
|
|
|
|
|
() => {
|
|
|
|
|
if (isUpdatingFromStore || !marginInnerExpanded.value || isSyncingFromSimple) return;
|
|
|
|
|
if (isUpdatingFromStore) return;
|
|
|
|
|
debouncedUpdate(() => {
|
|
|
|
|
removeShorthandPadding(); // Remove shorthand property first
|
|
|
|
|
updateParagraphStyle('padding-top', `${marginInnerDetailed.value.top.value}${marginInnerDetailed.value.top.unit}`);
|
|
|
|
|
updateParagraphStyle('padding-bottom', `${marginInnerDetailed.value.bottom.value}${marginInnerDetailed.value.bottom.unit}`);
|
|
|
|
|
updateParagraphStyle('padding-left', `${marginInnerDetailed.value.left.value}${marginInnerDetailed.value.left.unit}`);
|
|
|
|
|
updateParagraphStyle('padding-right', `${marginInnerDetailed.value.right.value}${marginInnerDetailed.value.right.unit}`);
|
|
|
|
|
// TODO: implement margin inner detailed update
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
@ -905,46 +721,13 @@ watch(
|
|
|
|
|
marginInnerDetailed.value.right.unit,
|
|
|
|
|
],
|
|
|
|
|
() => {
|
|
|
|
|
if (isUpdatingFromStore || !marginInnerExpanded.value || isSyncingFromSimple) return;
|
|
|
|
|
if (isUpdatingFromStore) return;
|
|
|
|
|
immediateUpdate(() => {
|
|
|
|
|
removeShorthandPadding(); // Remove shorthand property first
|
|
|
|
|
updateParagraphStyle('padding-top', `${marginInnerDetailed.value.top.value}${marginInnerDetailed.value.top.unit}`);
|
|
|
|
|
updateParagraphStyle('padding-bottom', `${marginInnerDetailed.value.bottom.value}${marginInnerDetailed.value.bottom.unit}`);
|
|
|
|
|
updateParagraphStyle('padding-left', `${marginInnerDetailed.value.left.value}${marginInnerDetailed.value.left.unit}`);
|
|
|
|
|
updateParagraphStyle('padding-right', `${marginInnerDetailed.value.right.value}${marginInnerDetailed.value.right.unit}`);
|
|
|
|
|
// TODO: implement margin inner detailed update
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
// Toggle expanded state - sync values when expanding
|
|
|
|
|
watch(marginOuterExpanded, (newValue) => {
|
|
|
|
|
if (newValue) {
|
|
|
|
|
// When expanding, copy simple value to all detailed fields
|
|
|
|
|
marginOuterDetailed.value.top.value = marginOuter.value.value;
|
|
|
|
|
marginOuterDetailed.value.top.unit = marginOuter.value.unit;
|
|
|
|
|
marginOuterDetailed.value.bottom.value = marginOuter.value.value;
|
|
|
|
|
marginOuterDetailed.value.bottom.unit = marginOuter.value.unit;
|
|
|
|
|
marginOuterDetailed.value.left.value = marginOuter.value.value;
|
|
|
|
|
marginOuterDetailed.value.left.unit = marginOuter.value.unit;
|
|
|
|
|
marginOuterDetailed.value.right.value = marginOuter.value.value;
|
|
|
|
|
marginOuterDetailed.value.right.unit = marginOuter.value.unit;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
watch(marginInnerExpanded, (newValue) => {
|
|
|
|
|
if (newValue) {
|
|
|
|
|
// When expanding, copy simple value to all detailed fields
|
|
|
|
|
marginInnerDetailed.value.top.value = marginInner.value.value;
|
|
|
|
|
marginInnerDetailed.value.top.unit = marginInner.value.unit;
|
|
|
|
|
marginInnerDetailed.value.bottom.value = marginInner.value.value;
|
|
|
|
|
marginInnerDetailed.value.bottom.unit = marginInner.value.unit;
|
|
|
|
|
marginInnerDetailed.value.left.value = marginInner.value.value;
|
|
|
|
|
marginInnerDetailed.value.left.unit = marginInner.value.unit;
|
|
|
|
|
marginInnerDetailed.value.right.value = marginInner.value.value;
|
|
|
|
|
marginInnerDetailed.value.right.unit = marginInner.value.unit;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
Coloris.init();
|
|
|
|
|
Coloris({
|
|
|
|
|
@ -961,167 +744,5 @@ onMounted(() => {
|
|
|
|
|
'transparent',
|
|
|
|
|
],
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Sync initial values from stylesheet
|
|
|
|
|
syncFromStore();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Sync values from store to form fields
|
|
|
|
|
const syncFromStore = () => {
|
|
|
|
|
isUpdatingFromStore = true;
|
|
|
|
|
|
|
|
|
|
const bodyBlock = stylesheetStore.extractBlock('body');
|
|
|
|
|
const paragraphBlock = stylesheetStore.extractBlock('p');
|
|
|
|
|
|
|
|
|
|
// Extract from body block (italic, alignment, color, background)
|
|
|
|
|
if (bodyBlock) {
|
|
|
|
|
// Extract font-style (italic)
|
|
|
|
|
const fontStyleMatch = bodyBlock.match(/font-style:\s*([^;]+)/i);
|
|
|
|
|
if (fontStyleMatch) {
|
|
|
|
|
italic.value = fontStyleMatch[1].trim() === 'italic';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Extract text-align
|
|
|
|
|
const textAlignMatch = bodyBlock.match(/text-align:\s*([^;]+)/i);
|
|
|
|
|
if (textAlignMatch) {
|
|
|
|
|
alignment.value = textAlignMatch[1].trim();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Extract color
|
|
|
|
|
const colorMatch = bodyBlock.match(/color:\s*([^;]+)/i);
|
|
|
|
|
if (colorMatch) {
|
|
|
|
|
color.value.value = colorMatch[1].trim();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Extract background
|
|
|
|
|
const backgroundMatch = bodyBlock.match(/background:\s*([^;]+)/i);
|
|
|
|
|
if (backgroundMatch) {
|
|
|
|
|
background.value.value = backgroundMatch[1].trim();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Extract from paragraph block (weight, size, margins, padding)
|
|
|
|
|
if (paragraphBlock) {
|
|
|
|
|
// Extract font-weight
|
|
|
|
|
const fontWeightMatch = paragraphBlock.match(/font-weight:\s*([^;]+)/i);
|
|
|
|
|
if (fontWeightMatch) {
|
|
|
|
|
weight.value = fontWeightMatch[1].trim();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Extract font-size
|
|
|
|
|
const fontSizeMatch = paragraphBlock.match(/font-size:\s*([0-9.]+)(px|em|rem)/i);
|
|
|
|
|
if (fontSizeMatch) {
|
|
|
|
|
fontSize.value.value = parseFloat(fontSizeMatch[1]);
|
|
|
|
|
fontSize.value.unit = fontSizeMatch[2];
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Extract margin (simple or detailed)
|
|
|
|
|
const marginMatch = paragraphBlock.match(/margin:\s*([^;]+)/i);
|
|
|
|
|
const marginTopMatch = paragraphBlock.match(/margin-top:\s*([0-9.]+)(mm|px)/i);
|
|
|
|
|
|
|
|
|
|
if (marginTopMatch) {
|
|
|
|
|
// Has detailed margins (margin-top, margin-right, etc.)
|
|
|
|
|
const marginBottomMatch = paragraphBlock.match(/margin-bottom:\s*([0-9.]+)(mm|px)/i);
|
|
|
|
|
const marginLeftMatch = paragraphBlock.match(/margin-left:\s*([0-9.]+)(mm|px)/i);
|
|
|
|
|
const marginRightMatch = paragraphBlock.match(/margin-right:\s*([0-9.]+)(mm|px)/i);
|
|
|
|
|
|
|
|
|
|
if (marginTopMatch) {
|
|
|
|
|
marginOuterDetailed.value.top.value = parseFloat(marginTopMatch[1]);
|
|
|
|
|
marginOuterDetailed.value.top.unit = marginTopMatch[2];
|
|
|
|
|
}
|
|
|
|
|
if (marginBottomMatch) {
|
|
|
|
|
marginOuterDetailed.value.bottom.value = parseFloat(marginBottomMatch[1]);
|
|
|
|
|
marginOuterDetailed.value.bottom.unit = marginBottomMatch[2];
|
|
|
|
|
}
|
|
|
|
|
if (marginLeftMatch) {
|
|
|
|
|
marginOuterDetailed.value.left.value = parseFloat(marginLeftMatch[1]);
|
|
|
|
|
marginOuterDetailed.value.left.unit = marginLeftMatch[2];
|
|
|
|
|
}
|
|
|
|
|
if (marginRightMatch) {
|
|
|
|
|
marginOuterDetailed.value.right.value = parseFloat(marginRightMatch[1]);
|
|
|
|
|
marginOuterDetailed.value.right.unit = marginRightMatch[2];
|
|
|
|
|
}
|
|
|
|
|
} else if (marginMatch) {
|
|
|
|
|
// Has shorthand margin - check if it's 1 value or 4 values
|
|
|
|
|
const marginValue = marginMatch[1].trim();
|
|
|
|
|
|
|
|
|
|
// Check for 4-value format: "0mm 0mm 24mm 0mm" (top right bottom left)
|
|
|
|
|
const fourValueMatch = marginValue.match(/^([0-9.]+)(mm|px)\s+([0-9.]+)(mm|px)\s+([0-9.]+)(mm|px)\s+([0-9.]+)(mm|px)$/i);
|
|
|
|
|
|
|
|
|
|
if (fourValueMatch) {
|
|
|
|
|
// Parse 4-value format and store in detailed margins
|
|
|
|
|
marginOuterDetailed.value.top.value = parseFloat(fourValueMatch[1]);
|
|
|
|
|
marginOuterDetailed.value.top.unit = fourValueMatch[2];
|
|
|
|
|
marginOuterDetailed.value.right.value = parseFloat(fourValueMatch[3]);
|
|
|
|
|
marginOuterDetailed.value.right.unit = fourValueMatch[4];
|
|
|
|
|
marginOuterDetailed.value.bottom.value = parseFloat(fourValueMatch[5]);
|
|
|
|
|
marginOuterDetailed.value.bottom.unit = fourValueMatch[6];
|
|
|
|
|
marginOuterDetailed.value.left.value = parseFloat(fourValueMatch[7]);
|
|
|
|
|
marginOuterDetailed.value.left.unit = fourValueMatch[8];
|
|
|
|
|
} else {
|
|
|
|
|
// Single value format: "10mm"
|
|
|
|
|
const singleValueMatch = marginValue.match(/^([0-9.]+)(mm|px)$/i);
|
|
|
|
|
if (singleValueMatch) {
|
|
|
|
|
marginOuter.value.value = parseFloat(singleValueMatch[1]);
|
|
|
|
|
marginOuter.value.unit = singleValueMatch[2];
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Extract padding (simple or detailed)
|
|
|
|
|
const paddingMatch = paragraphBlock.match(/padding:\s*([^;]+)/i);
|
|
|
|
|
const paddingTopMatch = paragraphBlock.match(/padding-top:\s*([0-9.]+)(mm|px)/i);
|
|
|
|
|
|
|
|
|
|
if (paddingTopMatch) {
|
|
|
|
|
// Has detailed padding (padding-top, padding-right, etc.)
|
|
|
|
|
const paddingBottomMatch = paragraphBlock.match(/padding-bottom:\s*([0-9.]+)(mm|px)/i);
|
|
|
|
|
const paddingLeftMatch = paragraphBlock.match(/padding-left:\s*([0-9.]+)(mm|px)/i);
|
|
|
|
|
const paddingRightMatch = paragraphBlock.match(/padding-right:\s*([0-9.]+)(mm|px)/i);
|
|
|
|
|
|
|
|
|
|
if (paddingTopMatch) {
|
|
|
|
|
marginInnerDetailed.value.top.value = parseFloat(paddingTopMatch[1]);
|
|
|
|
|
marginInnerDetailed.value.top.unit = paddingTopMatch[2];
|
|
|
|
|
}
|
|
|
|
|
if (paddingBottomMatch) {
|
|
|
|
|
marginInnerDetailed.value.bottom.value = parseFloat(paddingBottomMatch[1]);
|
|
|
|
|
marginInnerDetailed.value.bottom.unit = paddingBottomMatch[2];
|
|
|
|
|
}
|
|
|
|
|
if (paddingLeftMatch) {
|
|
|
|
|
marginInnerDetailed.value.left.value = parseFloat(paddingLeftMatch[1]);
|
|
|
|
|
marginInnerDetailed.value.left.unit = paddingLeftMatch[2];
|
|
|
|
|
}
|
|
|
|
|
if (paddingRightMatch) {
|
|
|
|
|
marginInnerDetailed.value.right.value = parseFloat(paddingRightMatch[1]);
|
|
|
|
|
marginInnerDetailed.value.right.unit = paddingRightMatch[2];
|
|
|
|
|
}
|
|
|
|
|
} else if (paddingMatch) {
|
|
|
|
|
// Has shorthand padding - check if it's 1 value or 4 values
|
|
|
|
|
const paddingValue = paddingMatch[1].trim();
|
|
|
|
|
|
|
|
|
|
// Check for 4-value format: "0mm 0mm 0mm 0mm" (top right bottom left)
|
|
|
|
|
const fourValueMatch = paddingValue.match(/^([0-9.]+)(mm|px)\s+([0-9.]+)(mm|px)\s+([0-9.]+)(mm|px)\s+([0-9.]+)(mm|px)$/i);
|
|
|
|
|
|
|
|
|
|
if (fourValueMatch) {
|
|
|
|
|
// Parse 4-value format and store in detailed padding
|
|
|
|
|
marginInnerDetailed.value.top.value = parseFloat(fourValueMatch[1]);
|
|
|
|
|
marginInnerDetailed.value.top.unit = fourValueMatch[2];
|
|
|
|
|
marginInnerDetailed.value.right.value = parseFloat(fourValueMatch[3]);
|
|
|
|
|
marginInnerDetailed.value.right.unit = fourValueMatch[4];
|
|
|
|
|
marginInnerDetailed.value.bottom.value = parseFloat(fourValueMatch[5]);
|
|
|
|
|
marginInnerDetailed.value.bottom.unit = fourValueMatch[6];
|
|
|
|
|
marginInnerDetailed.value.left.value = parseFloat(fourValueMatch[7]);
|
|
|
|
|
marginInnerDetailed.value.left.unit = fourValueMatch[8];
|
|
|
|
|
} else {
|
|
|
|
|
// Single value format: "10mm"
|
|
|
|
|
const singleValueMatch = paddingValue.match(/^([0-9.]+)(mm|px)$/i);
|
|
|
|
|
if (singleValueMatch) {
|
|
|
|
|
marginInner.value.value = parseFloat(singleValueMatch[1]);
|
|
|
|
|
marginInner.value.unit = singleValueMatch[2];
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
isUpdatingFromStore = false;
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|