ทำให้ปรับแต่งได้ยึดหยุ่นกว่านี้สามารถนำเข้าไฟล์แสดงผลและบันทึกได้จากหน้าเว็บ

index.html

@@ -59,40 +59,39 @@
                     <div class="template-viewer flex flex-col items-center gap-8 pb-20" id="template-view">
                         
                         <!-- Page 1 -->
-                        <div id="page1" class="page bg-white shadow-2xl relative overflow-hidden origin-top transition-transform duration-200">
+                        <div id="page1" class="page bg-white shadow-2xl relative overflow-hidden origin-top transition-transform duration-200" data-page="1">
                             <img id="bg1" loading="lazy" class="absolute inset-0 w-full h-full object-cover pointer-events-none z-0" src="" alt="BG 1">
-                            <img id="photo" loading="lazy" class="field absolute border border-slate-200 z-10 rounded object-cover bg-slate-100" style="top:46px;left:725px;width:110px;height:138px;" src="https://via.placeholder.com/110x138?text=Photo" alt="Photo">
-                            <img id="qr1" loading="lazy" class="field absolute z-10 bg-white" style="top:977px;left:762.5px;width:69px;height:69px;" src="" alt="QR 1">
+                            <img id="photo" loading="lazy" class="field absolute border border-slate-200 z-10 rounded object-cover bg-slate-100" style="top:46px;left:725px;width:110px;height:138px;" src="https://via.placeholder.com/110x138?text=Photo" draggable="true" data-field-type="image" alt="Photo">
+                            <img id="qr1" loading="lazy" class="field absolute z-10 bg-white" style="top:977px;left:762.5px;width:69px;height:69px;" src="" draggable="true" data-field-type="image" alt="QR 1">
                             
                             <!-- Dynamic Text Fields -->
-                            <div id="f1" class="field absolute whitespace-nowrap z-20 font-sans font-bold cursor-default select-none border border-transparent" style="top:80px;left:230px;font-size:16px;">f1</div>
-                            <div id="f2" class="field absolute whitespace-nowrap z-20 font-sans font-bold cursor-default select-none border border-transparent" style="top:110px;left:230px;font-size:16px;">f2</div>
-                            <div id="f3" class="field absolute whitespace-nowrap z-20 font-sans font-normal cursor-default select-none border border-transparent" style="top:150px;left:230px;font-size:14px;">f3</div>
-                            <div id="f4" class="field absolute whitespace-nowrap z-20 font-sans font-normal cursor-default select-none border border-transparent" style="top:180px;left:230px;font-size:14px;">f4</div>
-                            <div id="f5" class="field absolute whitespace-nowrap z-20 font-sans font-normal cursor-default select-none border border-transparent" style="top:180px;left:580px;font-size:14px;">f5</div>
-                            <div id="f6" class="field absolute whitespace-nowrap z-20 font-sans font-normal cursor-default select-none border border-transparent" style="top:210px;left:580px;font-size:14px;">f6</div>
-                            <div id="f7" class="field absolute whitespace-nowrap z-20 font-sans font-normal cursor-default select-none border border-transparent" style="top:240px;left:230px;font-size:14px;">f7</div>
-                            <div id="f8" class="field absolute whitespace-nowrap z-20 font-sans font-normal cursor-default select-none border border-transparent" style="top:240px;left:580px;font-size:14px;">f8</div>
-                            <div id="f9" class="field absolute whitespace-nowrap z-20 font-sans font-normal cursor-default select-none border border-transparent" style="top:270px;left:230px;font-size:14px;">f9</div>
-                            <div id="f10" class="field absolute whitespace-nowrap z-20 font-sans font-normal cursor-default select-none border border-transparent" style="top:300px;left:230px;font-size:14px;">f10</div>
+                            <div id="f1" class="field absolute whitespace-nowrap z-20 font-sans font-bold cursor-default select-none border border-transparent" style="top:80px;left:230px;font-size:16px;" draggable="true" data-field-type="text">f1</div>
+                            <div id="f2" class="field absolute whitespace-nowrap z-20 font-sans font-bold cursor-default select-none border border-transparent" style="top:110px;left:230px;font-size:16px;" draggable="true" data-field-type="text">f2</div>
+                            <div id="f3" class="field absolute whitespace-nowrap z-20 font-sans font-normal cursor-default select-none border border-transparent" style="top:150px;left:230px;font-size:14px;" draggable="true" data-field-type="text">f3</div>
+                            <div id="f4" class="field absolute whitespace-nowrap z-20 font-sans font-normal cursor-default select-none border border-transparent" style="top:180px;left:230px;font-size:14px;" draggable="true" data-field-type="text">f4</div>
+                            <div id="f5" class="field absolute whitespace-nowrap z-20 font-sans font-normal cursor-default select-none border border-transparent" style="top:180px;left:580px;font-size:14px;" draggable="true" data-field-type="text">f5</div>
+                            <div id="f6" class="field absolute whitespace-nowrap z-20 font-sans font-normal cursor-default select-none border border-transparent" style="top:210px;left:580px;font-size:14px;" draggable="true" data-field-type="text">f6</div>
+                            <div id="f7" class="field absolute whitespace-nowrap z-20 font-sans font-normal cursor-default select-none border border-transparent" style="top:240px;left:230px;font-size:14px;" draggable="true" data-field-type="text">f7</div>
+                            <div id="f8" class="field absolute whitespace-nowrap z-20 font-sans font-normal cursor-default select-none border border-transparent" style="top:240px;left:580px;font-size:14px;" draggable="true" data-field-type="text">f8</div>
+                            <div id="f9" class="field absolute whitespace-nowrap z-20 font-sans font-normal cursor-default select-none border border-transparent" style="top:270px;left:230px;font-size:14px;" draggable="true" data-field-type="text">f9</div>
+                            <div id="f10" class="field absolute whitespace-nowrap z-20 font-sans font-normal cursor-default select-none border border-transparent" style="top:300px;left:230px;font-size:14px;" draggable="true" data-field-type="text">f10</div>
                         </div>
                         
                         <!-- Page 2 -->
-                        <div id="page2" class="page bg-white shadow-2xl relative overflow-hidden origin-top transition-transform duration-200">
+                        <div id="page2" class="page bg-white shadow-2xl relative overflow-hidden origin-top transition-transform duration-200" data-page="2">
                             <img id="bg2" loading="lazy" class="absolute inset-0 w-full h-full object-cover pointer-events-none z-0" src="" alt="BG 2">
-                            <img id="qr2" loading="lazy" class="field absolute z-10 bg-white" style="top:925px;left:120px;width:90px;height:90px;" src="" alt="QR 2">
+                            <img id="qr2" loading="lazy" class="field absolute z-10 bg-white" style="top:925px;left:120px;width:90px;height:90px;" src="" draggable="true" data-field-type="image" alt="QR 2">
                             
-                            <div id="f12" class="field absolute whitespace-nowrap z-20 font-sans font-normal cursor-default select-none border border-transparent" style="top:60px;left:200px;font-size:19px;">f12</div>
-                            <div id="f13" class="field absolute whitespace-nowrap z-20 font-sans font-normal cursor-default select-none border border-transparent" style="top:100px;left:200px;font-size:19px;">f13</div>
-                            <div id="f14" class="field absolute whitespace-nowrap z-20 font-sans font-light cursor-default select-none border border-transparent" style="top:140px;left:200px;font-size:19px;">f14</div>
-                            <div id="f15" class="field absolute whitespace-nowrap z-20 font-sans font-light cursor-default select-none border border-transparent" style="top:180px;left:200px;font-size:19px;">f15</div>
-                            <div id="f16" class="field absolute whitespace-nowrap z-20 font-sans font-light cursor-default select-none border border-transparent" style="top:180px;left:550px;font-size:19px;">f16</div>
-                            <div id="f17" class="field absolute whitespace-nowrap z-20 font-sans font-light cursor-default select-none border border-transparent" style="top:220px;left:200px;font-size:19px;">f17</div>
-                            <div id="f18" class="field absolute whitespace-nowrap z-20 font-sans font-light cursor-default select-none border border-transparent" style="top:220px;left:550px;font-size:19px;">f18</div>
+                            <div id="f12" class="field absolute whitespace-nowrap z-20 font-sans font-normal cursor-default select-none border border-transparent" style="top:60px;left:200px;font-size:19px;" draggable="true" data-field-type="text">f12</div>
+                            <div id="f13" class="field absolute whitespace-nowrap z-20 font-sans font-normal cursor-default select-none border border-transparent" style="top:100px;left:200px;font-size:19px;" draggable="true" data-field-type="text">f13</div>
+                            <div id="f14" class="field absolute whitespace-nowrap z-20 font-sans font-light cursor-default select-none border border-transparent" style="top:140px;left:200px;font-size:19px;" draggable="true" data-field-type="text">f14</div>
+                            <div id="f15" class="field absolute whitespace-nowrap z-20 font-sans font-light cursor-default select-none border border-transparent" style="top:180px;left:200px;font-size:19px;" draggable="true" data-field-type="text">f15</div>
+                            <div id="f16" class="field absolute whitespace-nowrap z-20 font-sans font-light cursor-default select-none border border-transparent" style="top:180px;left:550px;font-size:19px;" draggable="true" data-field-type="text">f16</div>
+                            <div id="f17" class="field absolute whitespace-nowrap z-20 font-sans font-light cursor-default select-none border border-transparent" style="top:220px;left:200px;font-size:19px;" draggable="true" data-field-type="text">f17</div>
+                            <div id="f18" class="field absolute whitespace-nowrap z-20 font-sans font-light cursor-default select-none border border-transparent" style="top:220px;left:550px;font-size:19px;" draggable="true" data-field-type="text">f18</div>
                         </div>
                     </div>
-                    
-                    <!-- PDF View -->
+<!-- PDF View -->
                     <div class="pdf-viewer hidden flex-col items-center gap-6 pb-20" id="pdf-view">
                         <div id="pdf-content" class="flex flex-col items-center"></div>
                     </div>

script.js

@@ -1,3 +1,4 @@
+
 'use strict';
 
 /**
@@ -17,9 +18,14 @@ const state = {
     currentView: 'template', // 'template' | 'pdf'
     designMode: false,
     selectedFieldId: null,
-    fieldConfig: {}
+    fieldConfig: {},
+    currentLayoutConfig: {
+        fields: {},
+        pages: [],
+        metadata: {}
+    },
+    isLayoutLoaded: false
 };
-
 // --- Database Config ---
 const DB_NAME = 'PDFWizardDB';
 const STORE = 'docs';
@@ -263,6 +269,7 @@ function toggleDesignMode() {
         if(standardPanel) standardPanel.style.display = 'none';
         if(designPanel) designPanel.style.display = 'block';
         toast('Design Mode Active', 'info');
+        updateFieldPositionsFromState();
     } else {
         if(standardPanel) standardPanel.style.display = 'block';
         if(designPanel) designPanel.style.display = 'none';
@@ -271,6 +278,21 @@ function toggleDesignMode() {
     }
 }
 
+function updateFieldPositionsFromState() {
+    if (state.currentLayoutConfig.fields) {
+        Object.keys(state.currentLayoutConfig.fields).forEach(fieldId => {
+            const field = state.currentLayoutConfig.fields[fieldId];
+            const element = document.getElementById(fieldId);
+            if (element && field.position) {
+                element.style.top = field.position.top;
+                element.style.left = field.position.left;
+                if (field.style) {
+                    Object.assign(element.style, field.style);
+                }
+            }
+        });
+    }
+}
 function selectField(id) {
     if (!state.designMode) return;
     deselectField();
@@ -400,6 +422,7 @@ function onMouseUp() {
 // --- Layout Config ---
 function saveFieldConfig() {
     localStorage.setItem('pdf_field_config', JSON.stringify(state.fieldConfig));
+    saveLayoutToStorage();
 }
 
 function loadFieldConfig() {
@@ -414,8 +437,95 @@ function loadFieldConfig() {
             }
         });
     }
+    loadLayoutFromStorage();
+}
+
+function saveLayoutToStorage() {
+    const layoutData = {
+        fields: {},
+        pages: [],
+        metadata: {
+            version: '1.0',
+            savedAt: new Date().toISOString(),
+            name: state.currentLayoutName || 'default'
+        }
+    };
+
+    // Capture all field positions and styles
+    document.querySelectorAll('.field').forEach(field => {
+        layoutData.fields[field.id] = {
+            position: {
+                top: field.style.top,
+                left: field.style.left
+            },
+            style: {
+                fontSize: field.style.fontSize,
+                fontWeight: field.style.fontWeight,
+                color: field.style.color,
+                fontFamily: field.style.fontFamily
+            },
+            type: field.tagName === 'IMG' ? 'image' : 'text',
+            page: field.closest('.page')?.id || 'page1'
+        };
+    });
+
+    // Capture page configurations
+    ['page1', 'page2'].forEach(pageId => {
+        const page = document.getElementById(pageId);
+        if (page) {
+            layoutData.pages.push({
+                id: pageId,
+                background: page.querySelector('img[src*="bg"]')?.src || '',
+                dimensions: {
+                    width: page.offsetWidth,
+                    height: page.offsetHeight
+                }
+            });
+        }
+    });
+
+    state.currentLayoutConfig = layoutData;
+    return layoutData;
+}
+
+function loadLayoutFromStorage() {
+    const saved = localStorage.getItem('pdf_layout_config');
+    if (saved) {
+        try {
+            state.currentLayoutConfig = JSON.parse(saved);
+            applyLayoutConfig(state.currentLayoutConfig);
+            state.isLayoutLoaded = true;
+        } catch (e) {
+            console.warn('Failed to load layout config:', e);
+        }
+    }
 }
 
+function applyLayoutConfig(config) {
+    // Apply field configurations
+    Object.keys(config.fields).forEach(fieldId => {
+        const fieldConfig = config.fields[fieldId];
+        const element = document.getElementById(fieldId);
+        if (element && fieldConfig.position) {
+            element.style.top = fieldConfig.position.top;
+            element.style.left = fieldConfig.position.left;
+            if (fieldConfig.style) {
+                Object.assign(element.style, fieldConfig.style);
+            }
+        }
+    });
+
+    // Apply page backgrounds
+    config.pages?.forEach(pageConfig => {
+        const pageElement = document.getElementById(pageConfig.id);
+        if (pageElement && pageConfig.background) {
+            const bgImg = pageElement.querySelector('img[id^="bg"]');
+            if (bgImg) {
+                bgImg.src = pageConfig.background;
+            }
+        }
+    });
+}
 // --- File Handling ---
 function handleBgFile(page, file) {
     if (!file) return;
@@ -624,9 +734,10 @@ async function downloadPDF() {
     loading(true, 'Generating PDF...');
     try {
         const data = state.data[state.currentIndex];
+        const layout = await saveLayoutToStorage(); // Capture current layout
         const element = document.createElement('div');
         
-        // Prepare HTML snapshot
+        // Prepare HTML snapshot with current layout
         element.style.width = '892px';
         element.style.position = 'absolute';
         element.style.left = '-9999px';
@@ -650,14 +761,11 @@ async function downloadPDF() {
         if(state.bg2B64) bg2.src = state.bg2B64;
         
         // Populate Data
-        const f1 = element.querySelector('#f1');
-        // ... (simplified population, assuming showData already updated DOM, but we are cloning)
-        // Better to rely on the DOM state before clone or manually inject
         fieldIds.forEach(id => {
             const key = fieldToKey[id];
             const val = data[key] || '';
             const el = element.querySelector('#'+id);
-            if(el) el.innerHTML = val ? `<b>${val}</b>` : '';
+            if(el) el.innerHTML = val ? `<b>${sanitize(val)}</b>` : '';
         });
         
         const photo = element.querySelector('#photo');
@@ -667,7 +775,7 @@ async function downloadPDF() {
 
         const opt = {
             margin: 0,
-            filename: `${data['1'] || 'doc'}.pdf`,
+            filename: `${data['1'] || state.currentLayoutName || 'doc'}.pdf`,
             image: { type: 'jpeg', quality: 0.98 },
             html2canvas: { scale: 2, useCORS: true },
             jsPDF: { unit: 'px', format: [892, 1261], orientation: 'portrait' }
@@ -675,7 +783,18 @@ async function downloadPDF() {
 
         await html2pdf().set(opt).from(element).save();
         document.body.removeChild(element);
-        toast('PDF Downloaded', 'success');
+        
+        // Save layout to history
+        const doc = {
+            id: Date.now().toString(),
+            fileName: data['1'] ? `${data['1']}.pdf` : 'generated.pdf',
+            date: new Date().toISOString(),
+            layout: layout,
+            data: data
+        };
+        await saveDoc(doc);
+        
+        toast('PDF Downloaded & Layout Saved', 'success');
     } catch (e) {
         toast('Generation Failed', 'error');
         debugLog(e);
@@ -684,6 +803,95 @@ async function downloadPDF() {
     }
 }
 
+async function exportLayout() {
+    const layout = await saveLayoutToStorage();
+    const blob = new Blob([JSON.stringify(layout, null, 2)], { type: 'application/json' });
+    const link = document.createElement('a');
+    link.href = URL.createObjectURL(blob);
+    link.download = `${layout.metadata.name || 'layout'}_${new Date().getTime()}.json`;
+    link.click();
+    toast('Layout Exported', 'success');
+}
+
+async function importLayout(file) {
+    if (!file || !file.name.endsWith('.json')) {
+        toast('Please select a layout JSON file', 'error');
+        return;
+    }
+    
+    const reader = new FileReader();
+    reader.onload = async (e) => {
+        try {
+            const layout = JSON.parse(e.target.result);
+            if (!layout.fields || !layout.pages) {
+                throw new Error('Invalid layout format');
+            }
+            state.currentLayoutConfig = layout;
+            applyLayoutConfig(layout);
+            
+            // Update form inputs
+            document.getElementById('layout-name-input').value = layout.metadata?.name || 'Unnamed Layout';
+            
+            toast('Layout Imported Successfully', 'success');
+            state.isLayoutLoaded = true;
+        } catch (err) {
+            toast('Failed to import layout: ' + err.message, 'error');
+            debugLog(err);
+        }
+    };
+    reader.readAsText(file);
+}
+
+async function saveLayoutToDB() {
+    try {
+        const layout = saveLayoutToStorage();
+        const doc = {
+            id: `layout_${Date.now()}`,
+            fileName: `${layout.metadata.name}_layout.json`,
+            date: new Date().toISOString(),
+            type: 'layout',
+            data: layout,
+            metadata: layout.metadata
+        };
+        await saveDoc(doc);
+        toast('Layout Saved to History', 'success');
+        return layout;
+    } catch (err) {
+        toast('Failed to save layout', 'error');
+        debugLog(err);
+        return null;
+    }
+}
+
+function newLayout() {
+    const confirmNew = confirm('Create new layout? Unsaved changes will be lost.');
+    if (!confirmNew) return;
+    
+    // Reset all fields to default positions
+    document.querySelectorAll('.field').forEach(field => {
+        field.style.top = '';
+        field.style.left = '';
+        field.style.fontSize = '';
+        field.style.fontWeight = '';
+        field.style.color = '';
+        field.classList.remove('selected');
+    });
+    
+    state.fieldConfig = {};
+    state.currentLayoutConfig = {
+        fields: {},
+        pages: [],
+        metadata: {}
+    };
+    state.isLayoutLoaded = false;
+    state.currentLayoutName = 'New Layout';
+    
+    deselectField();
+    localStorage.removeItem('pdf_field_config');
+    localStorage.removeItem('pdf_layout_config');
+    
+    toast('New Layout Created', 'success');
+}
 async function downloadAllPDFs() {
     if (state.data.length === 0) return;
     if (!confirm(`Download ${state.data.length} PDFs?`)) return;