Compare commits
No commits in common. "ea74d1891c3c57765d3bde94c226a2de5fbfcdfa" and "cf1dadb1b38dd13613a8bfd7859ec588d1b570af" have entirely different histories.
ea74d1891c
...
cf1dadb1b3
9 changed files with 71 additions and 342 deletions
|
|
@ -4,8 +4,6 @@
|
|||
--color-browngray-200: #d0c4ba;
|
||||
--color-browngray-300: #b5a9a1;
|
||||
|
||||
--color-page-highlight: #ff8a50;
|
||||
|
||||
--border-radius: 0.2rem;
|
||||
|
||||
--space-xs: 0.5rem;
|
||||
|
|
|
|||
|
|
@ -30,7 +30,6 @@ button {
|
|||
--color-browngray-050: #f5f3f0;
|
||||
--color-browngray-200: #d0c4ba;
|
||||
--color-browngray-300: #b5a9a1;
|
||||
--color-page-highlight: #ff8a50;
|
||||
--border-radius: 0.2rem;
|
||||
--space-xs: 0.5rem;
|
||||
--curve: cubic-bezier(0.86, 0, 0.07, 1);
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"version":3,"sources":["src/_reset.scss","style.css","src/_variables.scss","src/_text.scss","src/_print-styles.scss","src/_forms.scss","src/_buttons.scss"],"names":[],"mappings":"AAAA;;EAEE,UAAA;EACA,SAAA;ACCF;;ADEA;;;;;;EAME,SAAA;ACCF;;ADEA;;EAEE,YAAA;EACA,aAAA;EAEA,mCAAA;ACAF;;ADGA;EACE,6BAAA;EACA,YAAA;ACAF;;ACzBA;EACE,yBAAA;EACA,8BAAA;EACA,8BAAA;EACA,8BAAA;EAEA,+BAAA;EAEA,uBAAA;EAEA,kBAAA;EAEA,uCAAA;ADwBF;;AEpCA;;;;;;;;;;;;;EAaE,uBAAA;AFuCF;;AGpDA,yBAAA;AACA;EACE,QAAA;EACA,2BAAA;AHuDF;AGrDA;EACE,8BAAA;OAAA,kBAAA;AHuDF;;AGpDA;EACE;IACE,sBAAA;EHuDF;AACF;AGrDA;EACE,+BAAA;AHuDF;;AItEA;;;EAGE,4CAAA;AJyEF;;AItEA;EACE,YAAA;AJyEF;;AItEA,2BAAA;AACA;EACE,yCAAA;UAAA,iCAAA;EACA,iDAAA;EACA,0BAAA;EACA,YAAA;EACA,kBAAA;AJyEF;AIvEE;EACE,uBAAA;EACA,kBAAA;EACA,YAAA;EACA,OAAA;EACA,kBAAA;EACA,uBAAA;EACA,sCAAA;EACA,iCAAA;EACA,8CAAA;EACA,kBAAA;EACA,kBAAA;EACA,mBAAA;EACA,UAAA;EACA,kBAAA;EACA,qDACE;EAEF,WAAA;AJuEJ;AIpEE;EACE,UAAA;EACA,mBAAA;AJsEJ;;AIjEE;EACE,6BAAA;EACA,8BAAA;AJoEJ;AIlEE;EACE,mDAAA;AJoEJ;AIjEE;EACE,0BAAA;AJmEJ;AIjEI;EACE,8BAAA;AJmEN;AIhEI;EACE,aAAA;AJkEN;AIhEM;;EAEE,UAAA;AJkER;AI/DM;EACE,oCAAA;AJiER;AI9DM;EACE,aAAA;EACA,WAAA;AJgER;AI9DQ;EACE,aAAA;EACA,WAAA;AJgEV;AI5DM;EACE,UAAA;AJ8DR;AI7DQ;EACE,aAAA;AJ+DV;AI9DU;EACE,kBAAA;EACA,eAAA;EACA,cAAA;EACA,SAAA;EACA,WAAA;EACA,eAAA;AJgEZ;AI7DU;EACE,oBAAA;EACA,WAAA;AJ+DZ;AIzDI;EACE,aAAA;EACA,eAAA;EACA,wBAAA;AJ2DN;AIzDM;EACE,WAAA;AJ2DR;AIzDM;EACE,UAAA;AJ2DR;AIzDQ;EACE,UAAA;AJ2DV;AIvDU;EACE,UAAA;AJyDZ;;AKlLA;EACE,eAAA;EAEA,4CAAA;EACA,iCAAA;EACA,uCAAA;EACA,mCAAA;EACA,sBAAA;ALoLF;AKlLE;EACE,sBAAA;EACA,WAAA;ALoLJ;AKhLI;EACE,sBAAA;EACA,WAAA;EACA,YAAA;ALkLN","file":"style.css"}
|
||||
{"version":3,"sources":["src/_reset.scss","style.css","src/_variables.scss","src/_text.scss","src/_print-styles.scss","src/_forms.scss","src/_buttons.scss"],"names":[],"mappings":"AAAA;;EAEE,UAAA;EACA,SAAA;ACCF;;ADEA;;;;;;EAME,SAAA;ACCF;;ADEA;;EAEE,YAAA;EACA,aAAA;EAEA,mCAAA;ACAF;;ADGA;EACE,6BAAA;EACA,YAAA;ACAF;;ACzBA;EACE,yBAAA;EACA,8BAAA;EACA,8BAAA;EACA,8BAAA;EAEA,uBAAA;EAEA,kBAAA;EAEA,uCAAA;ADyBF;;AEnCA;;;;;;;;;;;;;EAaE,uBAAA;AFsCF;;AGnDA,yBAAA;AACA;EACE,QAAA;EACA,2BAAA;AHsDF;AGpDA;EACE,8BAAA;OAAA,kBAAA;AHsDF;;AGnDA;EACE;IACE,sBAAA;EHsDF;AACF;AGpDA;EACE,+BAAA;AHsDF;;AIrEA;;;EAGE,4CAAA;AJwEF;;AIrEA;EACE,YAAA;AJwEF;;AIrEA,2BAAA;AACA;EACE,yCAAA;UAAA,iCAAA;EACA,iDAAA;EACA,0BAAA;EACA,YAAA;EACA,kBAAA;AJwEF;AItEE;EACE,uBAAA;EACA,kBAAA;EACA,YAAA;EACA,OAAA;EACA,kBAAA;EACA,uBAAA;EACA,sCAAA;EACA,iCAAA;EACA,8CAAA;EACA,kBAAA;EACA,kBAAA;EACA,mBAAA;EACA,UAAA;EACA,kBAAA;EACA,qDACE;EAEF,WAAA;AJsEJ;AInEE;EACE,UAAA;EACA,mBAAA;AJqEJ;;AIhEE;EACE,6BAAA;EACA,8BAAA;AJmEJ;AIjEE;EACE,mDAAA;AJmEJ;AIhEE;EACE,0BAAA;AJkEJ;AIhEI;EACE,8BAAA;AJkEN;AI/DI;EACE,aAAA;AJiEN;AI/DM;;EAEE,UAAA;AJiER;AI9DM;EACE,oCAAA;AJgER;AI7DM;EACE,aAAA;EACA,WAAA;AJ+DR;AI7DQ;EACE,aAAA;EACA,WAAA;AJ+DV;AI3DM;EACE,UAAA;AJ6DR;AI5DQ;EACE,aAAA;AJ8DV;AI7DU;EACE,kBAAA;EACA,eAAA;EACA,cAAA;EACA,SAAA;EACA,WAAA;EACA,eAAA;AJ+DZ;AI5DU;EACE,oBAAA;EACA,WAAA;AJ8DZ;AIxDI;EACE,aAAA;EACA,eAAA;EACA,wBAAA;AJ0DN;AIxDM;EACE,WAAA;AJ0DR;AIxDM;EACE,UAAA;AJ0DR;AIxDQ;EACE,UAAA;AJ0DV;AItDU;EACE,UAAA;AJwDZ;;AKjLA;EACE,eAAA;EAEA,4CAAA;EACA,iCAAA;EACA,uCAAA;EACA,mCAAA;EACA,sBAAA;ALmLF;AKjLE;EACE,sBAAA;EACA,WAAA;ALmLJ;AK/KI;EACE,sBAAA;EACA,WAAA;EACA,YAAA;ALiLN","file":"style.css"}
|
||||
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4.83582 12L11.0429 18.2071L12.4571 16.7929L7.66424 12L12.4571 7.20712L11.0429 5.79291L4.83582 12ZM10.4857 12L16.6928 18.2071L18.107 16.7929L13.3141 12L18.107 7.20712L16.6928 5.79291L10.4857 12Z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 298 B |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M19 10H20C20.5523 10 21 10.4477 21 11V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V11C3 10.4477 3.44772 10 4 10H5V9C5 5.13401 8.13401 2 12 2C15.866 2 19 5.13401 19 9V10ZM5 12V20H19V12H5ZM11 14H13V18H11V14ZM17 10V9C17 6.23858 14.7614 4 12 4C9.23858 4 7 6.23858 7 9V10H17Z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 388 B |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M7 10H20C20.5523 10 21 10.4477 21 11V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V11C3 10.4477 3.44772 10 4 10H5V9C5 5.13401 8.13401 2 12 2C14.7405 2 17.1131 3.5748 18.2624 5.86882L16.4731 6.76344C15.6522 5.12486 13.9575 4 12 4C9.23858 4 7 6.23858 7 9V10ZM5 12V20H19V12H5ZM10 15H14V17H10V15Z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 409 B |
208
src/App.vue
208
src/App.vue
|
|
@ -19,9 +19,7 @@ provide('activeTab', activeTab);
|
|||
|
||||
// Page interaction state
|
||||
const hoveredPage = ref(null);
|
||||
const selectedPages = ref([]); // Pages with active border (when popup is open)
|
||||
const EDGE_THRESHOLD = 30; // px from edge to trigger hover
|
||||
const PAGE_HIGHLIGHT_COLOR = '#ff8a50';
|
||||
|
||||
let savedScrollPercentage = 0;
|
||||
const currentFrameIndex = ref(1); // 1 or 2, which iframe is currently visible
|
||||
|
|
@ -53,15 +51,6 @@ const isNearPageEdge = (pageElement, mouseX, mouseY) => {
|
|||
);
|
||||
};
|
||||
|
||||
// Get all pages using the same template as the given page
|
||||
const getPagesWithSameTemplate = (page, doc) => {
|
||||
const pageType = page.getAttribute('data-page-type') || 'default';
|
||||
const allPages = doc.querySelectorAll('.pagedjs_page');
|
||||
return Array.from(allPages).filter(
|
||||
(p) => (p.getAttribute('data-page-type') || 'default') === pageType
|
||||
);
|
||||
};
|
||||
|
||||
// Handle mouse movement in iframe
|
||||
const handleIframeMouseMove = (event) => {
|
||||
const pages = event.target.ownerDocument.querySelectorAll('.pagedjs_page');
|
||||
|
|
@ -76,51 +65,20 @@ const handleIframeMouseMove = (event) => {
|
|||
|
||||
// Update hover state
|
||||
if (foundPage !== hoveredPage.value) {
|
||||
// Remove highlight from previous page (only if not in selectedPages)
|
||||
if (hoveredPage.value && !selectedPages.value.includes(hoveredPage.value)) {
|
||||
// Remove highlight from previous page
|
||||
if (hoveredPage.value) {
|
||||
hoveredPage.value.style.outline = '';
|
||||
}
|
||||
|
||||
// Add highlight to new page (only if not already selected)
|
||||
if (foundPage && !selectedPages.value.includes(foundPage)) {
|
||||
foundPage.style.outline = `2px solid ${PAGE_HIGHLIGHT_COLOR}50`;
|
||||
// Add highlight to new page
|
||||
if (foundPage) {
|
||||
foundPage.style.outline = '2px solid rgba(97, 175, 239, 0.3)';
|
||||
}
|
||||
|
||||
hoveredPage.value = foundPage;
|
||||
}
|
||||
};
|
||||
|
||||
// Clear selection highlight from all selected pages
|
||||
const clearSelectedPages = () => {
|
||||
selectedPages.value.forEach((page) => {
|
||||
page.style.outline = '';
|
||||
});
|
||||
selectedPages.value = [];
|
||||
};
|
||||
|
||||
// Content elements that can trigger ElementPopup
|
||||
const CONTENT_ELEMENTS = [
|
||||
'P', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6',
|
||||
'IMG', 'FIGURE', 'FIGCAPTION',
|
||||
'UL', 'OL', 'LI',
|
||||
'BLOCKQUOTE', 'PRE', 'CODE',
|
||||
'TABLE', 'THEAD', 'TBODY', 'TR', 'TH', 'TD',
|
||||
'A', 'SPAN', 'STRONG', 'EM', 'B', 'I', 'U',
|
||||
'ARTICLE', 'SECTION', 'ASIDE', 'HEADER', 'FOOTER', 'NAV'
|
||||
];
|
||||
|
||||
// Check if element is a content element (or find closest content parent)
|
||||
const getContentElement = (element) => {
|
||||
let current = element;
|
||||
while (current && current.tagName !== 'BODY') {
|
||||
if (CONTENT_ELEMENTS.includes(current.tagName)) {
|
||||
return current;
|
||||
}
|
||||
current = current.parentElement;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
// Handle click in iframe
|
||||
const handleIframeClick = (event) => {
|
||||
const element = event.target;
|
||||
|
|
@ -128,51 +86,22 @@ const handleIframeClick = (event) => {
|
|||
// Check if clicking near a page edge
|
||||
if (hoveredPage.value) {
|
||||
event.stopPropagation();
|
||||
|
||||
// Clear previous selection
|
||||
clearSelectedPages();
|
||||
|
||||
// Get all pages with same template and highlight them
|
||||
const doc = event.target.ownerDocument;
|
||||
const sameTemplatePages = getPagesWithSameTemplate(hoveredPage.value, doc);
|
||||
sameTemplatePages.forEach((page) => {
|
||||
page.style.outline = `2px solid ${PAGE_HIGHLIGHT_COLOR}`;
|
||||
});
|
||||
selectedPages.value = sameTemplatePages;
|
||||
|
||||
pagePopup.value.open(hoveredPage.value, event, sameTemplatePages.length);
|
||||
pagePopup.value.open(hoveredPage.value, event);
|
||||
elementPopup.value.close();
|
||||
return;
|
||||
}
|
||||
|
||||
// Only show popup for elements inside the page template
|
||||
const isInsidePage = element.closest('.pagedjs_page');
|
||||
if (!isInsidePage) {
|
||||
clearSelectedPages();
|
||||
// Otherwise handle as element click
|
||||
if (element.tagName === 'BODY' || element.tagName === 'HTML') {
|
||||
elementPopup.value.close();
|
||||
pagePopup.value.close();
|
||||
return;
|
||||
}
|
||||
|
||||
// Only show ElementPopup for content elements, not divs
|
||||
const contentElement = getContentElement(element);
|
||||
if (!contentElement) {
|
||||
clearSelectedPages();
|
||||
elementPopup.value.close();
|
||||
pagePopup.value.close();
|
||||
return;
|
||||
}
|
||||
|
||||
clearSelectedPages();
|
||||
elementPopup.value.handleIframeClick(event, contentElement);
|
||||
elementPopup.value.handleIframeClick(event);
|
||||
pagePopup.value.close();
|
||||
};
|
||||
|
||||
// Expose clearSelectedPages for PagePopup to call when closing
|
||||
const handlePagePopupClose = () => {
|
||||
clearSelectedPages();
|
||||
};
|
||||
|
||||
const renderPreview = async (shouldReloadFromFile = false) => {
|
||||
if (isTransitioning.value) return;
|
||||
isTransitioning.value = true;
|
||||
|
|
@ -274,65 +203,6 @@ watch(
|
|||
}
|
||||
);
|
||||
|
||||
// Print the PagedJS content
|
||||
const printPreview = async () => {
|
||||
const frame = activeFrame.value;
|
||||
if (!frame || !frame.contentDocument) return;
|
||||
|
||||
const doc = frame.contentDocument;
|
||||
|
||||
// Collect all styles
|
||||
let allStyles = '';
|
||||
|
||||
// Get inline <style> tags content
|
||||
doc.querySelectorAll('style').forEach((style) => {
|
||||
allStyles += style.innerHTML + '\n';
|
||||
});
|
||||
|
||||
// Get rules from stylesheets
|
||||
for (const sheet of doc.styleSheets) {
|
||||
try {
|
||||
for (const rule of sheet.cssRules) {
|
||||
allStyles += rule.cssText + '\n';
|
||||
}
|
||||
} catch (e) {
|
||||
// Cross-origin stylesheet, try to fetch it
|
||||
if (sheet.href) {
|
||||
try {
|
||||
const response = await fetch(sheet.href);
|
||||
const css = await response.text();
|
||||
allStyles += css;
|
||||
} catch (fetchError) {
|
||||
console.warn('Could not fetch stylesheet:', sheet.href);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Save current page content
|
||||
const originalContent = document.body.innerHTML;
|
||||
const originalStyles = document.head.innerHTML;
|
||||
|
||||
// Replace page content with iframe content
|
||||
document.head.innerHTML = `
|
||||
<meta charset="UTF-8">
|
||||
<title>Impression</title>
|
||||
<style>${allStyles}</style>
|
||||
`;
|
||||
document.body.innerHTML = doc.body.innerHTML;
|
||||
|
||||
// Print
|
||||
window.print();
|
||||
|
||||
// Restore original content after print dialog closes
|
||||
setTimeout(() => {
|
||||
document.head.innerHTML = originalStyles;
|
||||
document.body.innerHTML = originalContent;
|
||||
// Re-mount Vue app would be needed, so we reload instead
|
||||
window.location.reload();
|
||||
}, 100);
|
||||
};
|
||||
|
||||
onMounted(() => renderPreview(true));
|
||||
</script>
|
||||
|
||||
|
|
@ -357,13 +227,7 @@ onMounted(() => renderPreview(true));
|
|||
<PreviewLoader :isLoading="isTransitioning" :shifted="activeTab.length > 0" />
|
||||
|
||||
<ElementPopup ref="elementPopup" :iframeRef="activeFrame" />
|
||||
<PagePopup ref="pagePopup" :iframeRef="activeFrame" @close="handlePagePopupClose" />
|
||||
|
||||
<button class="print-btn" @click="printPreview" title="Imprimer">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M17 2H7V6H17V2ZM19 8H5C3.34 8 2 9.34 2 11V17H6V21H18V17H22V11C22 9.34 20.66 8 19 8ZM16 19H8V14H16V19ZM19 12C18.45 12 18 11.55 18 11C18 10.45 18.45 10 19 10C19.55 10 20 10.45 20 11C20 11.55 19.55 12 19 12Z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<PagePopup ref="pagePopup" :iframeRef="activeFrame" />
|
||||
</template>
|
||||
|
||||
<style>
|
||||
|
|
@ -395,56 +259,4 @@ onMounted(() => renderPreview(true));
|
|||
z-index: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.print-btn {
|
||||
position: fixed;
|
||||
bottom: 2rem;
|
||||
right: 2rem;
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: var(--color-page-highlight);
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.print-btn:hover {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.print-btn svg {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
/* Hide UI elements when printing */
|
||||
@media print {
|
||||
#editor-panel,
|
||||
#element-popup,
|
||||
#page-popup,
|
||||
.preview-loader,
|
||||
.print-btn {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.preview-frame {
|
||||
position: static !important;
|
||||
margin-left: 0 !important;
|
||||
transform: none !important;
|
||||
width: 100% !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.preview-frame:not(:first-of-type) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -639,8 +639,8 @@ const close = () => {
|
|||
selectedElement.value = null;
|
||||
};
|
||||
|
||||
const handleIframeClick = (event, targetElement = null) => {
|
||||
const element = targetElement || event.target;
|
||||
const handleIframeClick = (event) => {
|
||||
const element = event.target;
|
||||
|
||||
if (element.tagName === 'BODY' || element.tagName === 'HTML') {
|
||||
close();
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@
|
|||
<div class="popup-header">
|
||||
<div class="header-left">
|
||||
<span class="page-label">@page</span>
|
||||
<span class="page-name">{{ templateName || 'default' }}</span>
|
||||
<span class="page-count">{{ pageCount }} page{{ pageCount > 1 ? 's' : '' }}</span>
|
||||
<span class="page-name">geoformat</span>
|
||||
<span class="page-count">6 pages</span>
|
||||
</div>
|
||||
<button class="close-btn" @click="close">×</button>
|
||||
</div>
|
||||
|
|
@ -298,13 +298,9 @@ const props = defineProps({
|
|||
iframeRef: Object,
|
||||
});
|
||||
|
||||
const emit = defineEmits(['close']);
|
||||
|
||||
const visible = ref(false);
|
||||
const position = ref({ x: 0, y: 0 });
|
||||
const selectedPageElement = ref(null);
|
||||
const pageCount = ref(0);
|
||||
const templateName = ref('');
|
||||
const isEditable = ref(false);
|
||||
const inheritanceLocked = ref(true);
|
||||
const backgroundColorInput = ref(null);
|
||||
|
|
@ -313,10 +309,10 @@ let isUpdatingFromStore = false;
|
|||
let updateTimer = null;
|
||||
|
||||
const margins = ref({
|
||||
top: { value: 0, unit: 'mm' },
|
||||
bottom: { value: 0, unit: 'mm' },
|
||||
left: { value: 0, unit: 'mm' },
|
||||
right: { value: 0, unit: 'mm' },
|
||||
top: { value: 6, unit: 'mm' },
|
||||
bottom: { value: 7, unit: 'mm' },
|
||||
left: { value: 6, unit: 'mm' },
|
||||
right: { value: 7, unit: 'mm' },
|
||||
});
|
||||
|
||||
const background = ref({
|
||||
|
|
@ -340,89 +336,27 @@ const POPUP_HEIGHT = 600;
|
|||
|
||||
const { calculatePosition } = usePopupPosition(POPUP_WIDTH, POPUP_HEIGHT);
|
||||
|
||||
// Get the selector for the current template's @page rule
|
||||
const getTemplateSelector = () => {
|
||||
return templateName.value ? `@page ${templateName.value}` : '@page';
|
||||
};
|
||||
|
||||
// Get or create the template-specific @page block
|
||||
const getOrCreateTemplateBlock = () => {
|
||||
const selector = getTemplateSelector();
|
||||
let block = stylesheetStore.extractBlock(selector);
|
||||
|
||||
if (!block && templateName.value) {
|
||||
// Create new block with current values from @page
|
||||
const baseBlock = stylesheetStore.extractBlock('@page');
|
||||
if (baseBlock) {
|
||||
// Insert the new template block after @page
|
||||
const marginValue = `${margins.value.top.value}${margins.value.top.unit} ${margins.value.right.value}${margins.value.right.unit} ${margins.value.bottom.value}${margins.value.bottom.unit} ${margins.value.left.value}${margins.value.left.unit}`;
|
||||
const newBlock = `\n@page ${templateName.value} {\n margin: ${marginValue};${background.value.value ? `\n background: ${background.value.value};` : ''}\n}\n`;
|
||||
|
||||
stylesheetStore.content = stylesheetStore.content.replace(
|
||||
baseBlock,
|
||||
baseBlock + newBlock
|
||||
);
|
||||
block = stylesheetStore.extractBlock(selector);
|
||||
}
|
||||
}
|
||||
|
||||
return block;
|
||||
};
|
||||
|
||||
// Remove the template-specific @page block
|
||||
const removeTemplateBlock = () => {
|
||||
if (!templateName.value) return;
|
||||
|
||||
const selector = `@page ${templateName.value}`;
|
||||
const block = stylesheetStore.extractBlock(selector);
|
||||
|
||||
if (block) {
|
||||
// Remove the block and any surrounding whitespace
|
||||
stylesheetStore.content = stylesheetStore.content.replace(
|
||||
new RegExp(`\\n?${selector.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\s*\\{[^}]*\\}\\n?`),
|
||||
'\n'
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const updateMargins = () => {
|
||||
// Only update if inheritance is unlocked
|
||||
if (inheritanceLocked.value) return;
|
||||
|
||||
const marginValue = `${margins.value.top.value}${margins.value.top.unit} ${margins.value.right.value}${margins.value.right.unit} ${margins.value.bottom.value}${margins.value.bottom.unit} ${margins.value.left.value}${margins.value.left.unit}`;
|
||||
|
||||
const currentBlock = getOrCreateTemplateBlock();
|
||||
const currentBlock = stylesheetStore.extractBlock('@page');
|
||||
if (!currentBlock) return;
|
||||
|
||||
const selector = getTemplateSelector();
|
||||
const updatedBlock = currentBlock.replace(
|
||||
/(margin:\s*)[^;]+/,
|
||||
`$1${marginValue}`
|
||||
);
|
||||
|
||||
if (currentBlock.includes('margin:')) {
|
||||
const updatedBlock = currentBlock.replace(
|
||||
/(margin:\s*)[^;]+/,
|
||||
`$1${marginValue}`
|
||||
);
|
||||
stylesheetStore.content = stylesheetStore.content.replace(
|
||||
currentBlock,
|
||||
updatedBlock
|
||||
);
|
||||
} else {
|
||||
const updatedBlock = currentBlock.replace(
|
||||
/(\s*})$/,
|
||||
` margin: ${marginValue};\n$1`
|
||||
);
|
||||
stylesheetStore.content = stylesheetStore.content.replace(
|
||||
currentBlock,
|
||||
updatedBlock
|
||||
);
|
||||
}
|
||||
stylesheetStore.content = stylesheetStore.content.replace(
|
||||
currentBlock,
|
||||
updatedBlock
|
||||
);
|
||||
};
|
||||
|
||||
const updateBackground = () => {
|
||||
// Only update if inheritance is unlocked
|
||||
if (inheritanceLocked.value) return;
|
||||
if (!background.value.value) return;
|
||||
|
||||
const currentBlock = getOrCreateTemplateBlock();
|
||||
const currentBlock = stylesheetStore.extractBlock('@page');
|
||||
if (!currentBlock) return;
|
||||
|
||||
if (currentBlock.includes('background:')) {
|
||||
|
|
@ -487,37 +421,39 @@ const loadValuesFromStylesheet = () => {
|
|||
try {
|
||||
isUpdatingFromStore = true;
|
||||
|
||||
// Extract values from @page block (same logic as PageSettings)
|
||||
const pageBlock = stylesheetStore.extractBlock('@page');
|
||||
if (!pageBlock) return;
|
||||
// Extract margin from @page
|
||||
const marginData = stylesheetStore.extractValue('@page', 'margin');
|
||||
if (marginData) {
|
||||
// Parse margin shorthand (top right bottom left)
|
||||
const marginStr = typeof marginData === 'string' ? marginData : marginData.value;
|
||||
const marginValues = marginStr.split(' ');
|
||||
|
||||
// Parse margins with regex (top right bottom left)
|
||||
const marginMatch = pageBlock.match(
|
||||
/margin:\s*([0-9.]+)([a-z]+)\s+([0-9.]+)([a-z]+)\s+([0-9.]+)([a-z]+)\s+([0-9.]+)([a-z]+)/i
|
||||
);
|
||||
if (marginMatch) {
|
||||
margins.value.top = {
|
||||
value: parseFloat(marginMatch[1]),
|
||||
unit: marginMatch[2],
|
||||
};
|
||||
margins.value.right = {
|
||||
value: parseFloat(marginMatch[3]),
|
||||
unit: marginMatch[4],
|
||||
};
|
||||
margins.value.bottom = {
|
||||
value: parseFloat(marginMatch[5]),
|
||||
unit: marginMatch[6],
|
||||
};
|
||||
margins.value.left = {
|
||||
value: parseFloat(marginMatch[7]),
|
||||
unit: marginMatch[8],
|
||||
};
|
||||
if (marginValues.length === 4) {
|
||||
// Parse each margin value
|
||||
const parseMargin = (value) => {
|
||||
const match = value.match(/^([\d.]+)(\w+)$/);
|
||||
if (match) {
|
||||
return { value: parseFloat(match[1]), unit: match[2] };
|
||||
}
|
||||
return { value: 0, unit: 'mm' };
|
||||
};
|
||||
|
||||
const top = parseMargin(marginValues[0]);
|
||||
const right = parseMargin(marginValues[1]);
|
||||
const bottom = parseMargin(marginValues[2]);
|
||||
const left = parseMargin(marginValues[3]);
|
||||
|
||||
margins.value.top = top;
|
||||
margins.value.right = right;
|
||||
margins.value.bottom = bottom;
|
||||
margins.value.left = left;
|
||||
}
|
||||
}
|
||||
|
||||
// Extract background
|
||||
const bgMatch = pageBlock.match(/background:\s*([^;]+)/);
|
||||
if (bgMatch) {
|
||||
background.value.value = bgMatch[1].trim();
|
||||
// Extract background from @page
|
||||
const backgroundData = stylesheetStore.extractValue('@page', 'background');
|
||||
if (backgroundData) {
|
||||
background.value.value = typeof backgroundData === 'string' ? backgroundData : backgroundData.value;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading values from stylesheet:', error);
|
||||
|
|
@ -526,18 +462,14 @@ const loadValuesFromStylesheet = () => {
|
|||
}
|
||||
};
|
||||
|
||||
const open = (pageElement, event, count = 1) => {
|
||||
const open = (pageElement, event) => {
|
||||
selectedPageElement.value = pageElement;
|
||||
pageCount.value = count;
|
||||
position.value = calculatePosition(event);
|
||||
|
||||
// Extract template name from data-page-type attribute
|
||||
templateName.value = pageElement.getAttribute('data-page-type') || '';
|
||||
// Add border to the selected page
|
||||
pageElement.style.outline = '2px solid #61afef';
|
||||
|
||||
// Reset inheritance state when opening
|
||||
inheritanceLocked.value = true;
|
||||
|
||||
// Load values from stylesheet (@page block)
|
||||
// Load values from stylesheet
|
||||
loadValuesFromStylesheet();
|
||||
|
||||
visible.value = true;
|
||||
|
|
@ -575,30 +507,21 @@ const open = (pageElement, event, count = 1) => {
|
|||
};
|
||||
|
||||
const close = () => {
|
||||
selectedPageElement.value = null;
|
||||
// Remove border from the selected page
|
||||
if (selectedPageElement.value) {
|
||||
selectedPageElement.value.style.outline = '';
|
||||
selectedPageElement.value = null;
|
||||
}
|
||||
visible.value = false;
|
||||
isEditable.value = false;
|
||||
emit('close');
|
||||
};
|
||||
|
||||
const toggleInheritance = () => {
|
||||
const wasLocked = inheritanceLocked.value;
|
||||
inheritanceLocked.value = !inheritanceLocked.value;
|
||||
|
||||
if (inheritanceLocked.value && !wasLocked) {
|
||||
// Re-locking: remove the template-specific block
|
||||
// Fields keep their values, but preview returns to @page defaults
|
||||
removeTemplateBlock();
|
||||
}
|
||||
// When unlocking: fields already have values, block will be created on first edit
|
||||
// TODO: Implement CSS priority logic when unlocked
|
||||
};
|
||||
|
||||
const pageCss = computed(() => {
|
||||
// Show template-specific block if unlocked and exists, otherwise show @page
|
||||
if (!inheritanceLocked.value && templateName.value) {
|
||||
const templateBlock = stylesheetStore.extractBlock(`@page ${templateName.value}`);
|
||||
if (templateBlock) return templateBlock;
|
||||
}
|
||||
return stylesheetStore.extractBlock('@page') || '';
|
||||
});
|
||||
|
||||
|
|
@ -679,7 +602,7 @@ defineExpose({ open, close, visible });
|
|||
}
|
||||
|
||||
.page-label {
|
||||
background: var(--color-page-highlight);
|
||||
background: #ff8a50;
|
||||
color: white;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
|
|
@ -693,7 +616,7 @@ defineExpose({ open, close, visible });
|
|||
}
|
||||
|
||||
.page-count {
|
||||
color: var(--color-page-highlight);
|
||||
color: #ff8a50;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue