ปรับตำแหน้งฟิลด์ไม่ได้

script.js

@@ -100,13 +100,14 @@ function setupGlobalListeners() {
     document.getElementById('zoom-in').addEventListener('click', zoomIn);
     document.getElementById('zoom-out').addEventListener('click', zoomOut);
     document.getElementById('current-pg').addEventListener('change', (e) => goToPage(e.target.value));
-
     // Property Controls
     ['prop-x', 'prop-y', 'prop-size', 'prop-weight', 'prop-color'].forEach(id => {
-        document.getElementById(id)?.addEventListener('input', updateFieldFromInputs);
+        const el = document.getElementById(id);
+        if (el) {
+            el.addEventListener('input', updateFieldFromInputs);
+        }
     });
-
-    // Modals
+// Modals
     document.querySelectorAll('.close-modal, #btn-qr-cancel').forEach(btn => {
         btn.addEventListener('click', (e) => {
             const modal = e.target.closest('.fixed.z-\\[200\\]'); // Select modal wrapper
@@ -265,7 +266,6 @@ function switchTab(tab) {
     state.scale = 1;
     updateZoomDisplay();
 }
-
 // --- Design Mode & Drag & Drop ---
 function toggleDesignMode() {
     state.designMode = !state.designMode;
@@ -303,6 +303,7 @@ function updateFieldPositionsFromState() {
         });
     }
 }
+
 function selectField(id) {
     if (!state.designMode) return;
     deselectField();
@@ -318,8 +319,8 @@ function selectField(id) {
         if (controls) controls.style.display = 'block';
         
         document.getElementById('prop-id').textContent = id;
-        document.getElementById('prop-x').value = parseFloat(el.style.left);
-        document.getElementById('prop-y').value = parseFloat(el.style.top);
+        document.getElementById('prop-x').value = parseFloat(el.style.left) || 0;
+        document.getElementById('prop-y').value = parseFloat(el.style.top) || 0;
         
         if (el.tagName === 'IMG') {
             document.getElementById('prop-size').parentElement.style.display = 'none';
@@ -332,7 +333,7 @@ function selectField(id) {
             
             document.getElementById('prop-size').value = parseFloat(el.style.fontSize) || 14;
             document.getElementById('prop-weight').value = el.style.fontWeight || 'normal';
-            document.getElementById('prop-color').value = rgbToHex(el.style.color);
+            document.getElementById('prop-color').value = rgbToHex(el.style.color) || '#000000';
         }
     }
 }
@@ -343,35 +344,45 @@ function deselectField() {
         if (el) el.classList.remove('selected');
     }
     state.selectedFieldId = null;
-    document.getElementById('no-field-selected').style.display = 'block';
-    document.getElementById('field-controls').style.display = 'none';
+    const noSel = document.getElementById('no-field-selected');
+    const controls = document.getElementById('field-controls');
+    if (noSel) noSel.style.display = 'block';
+    if (controls) controls.style.display = 'none';
 }
 
 function updateFieldFromInputs() {
     if (!state.selectedFieldId) return;
     const el = document.getElementById(state.selectedFieldId);
+    if (!el) return;
+    
     const x = parseFloat(document.getElementById('prop-x').value) || 0;
     const y = parseFloat(document.getElementById('prop-y').value) || 0;
     
     el.style.left = x + 'px';
     el.style.top = y + 'px';
     
-    state.fieldConfig[state.selectedFieldId] = { ...state.fieldConfig[state.selectedFieldId], top: y+'px', left: x+'px' };
+    // Update state.fieldConfig
+    if (!state.fieldConfig[state.selectedFieldId]) {
+        state.fieldConfig[state.selectedFieldId] = {};
+    }
+    
+    state.fieldConfig[state.selectedFieldId].top = y + 'px';
+    state.fieldConfig[state.selectedFieldId].left = x + 'px';
 
     if (el.tagName !== 'IMG') {
-        const size = document.getElementById('prop-size').value;
-        const color = document.getElementById('prop-color').value;
-        const weight = document.getElementById('prop-weight').value;
+        const size = document.getElementById('prop-size').value || '14';
+        const color = document.getElementById('prop-color').value || '#000000';
+        const weight = document.getElementById('prop-weight').value || 'normal';
         
         el.style.fontSize = size + 'px';
         el.style.color = color;
         el.style.fontWeight = weight;
         
-        state.fieldConfig[state.selectedFieldId] = { 
-            ...state.fieldConfig[state.selectedFieldId], 
-            fontSize: size+'px', color, fontWeight: weight 
-        };
+        state.fieldConfig[state.selectedFieldId].fontSize = size + 'px';
+        state.fieldConfig[state.selectedFieldId].color = color;
+        state.fieldConfig[state.selectedFieldId].fontWeight = weight;
     }
+    
     saveFieldConfig();
 }
 
@@ -397,14 +408,16 @@ function onMouseMove(e) {
     const parent = dragInfo.el.parentElement;
     const pRect = parent.getBoundingClientRect();
     
-    // Calculate new position relative to parent, compensating for zoom if any (assuming page transform origin top center)
-    // Since .page has transform, we need to adjust coordinates or use unscaled logic
-    // Simplified: Assuming 1:1 for now, or accounting for page scale
+    // Calculate new position relative to parent, compensating for zoom
     let scale = state.scale;
     
     let newLeft = (e.clientX - pRect.left - dragInfo.offsetX) / scale;
     let newTop = (e.clientY - pRect.top - dragInfo.offsetY) / scale;
     
+    // Ensure non-negative positions
+    newLeft = Math.max(0, newLeft);
+    newTop = Math.max(0, newTop);
+    
     dragInfo.el.style.left = newLeft + 'px';
     dragInfo.el.style.top = newTop + 'px';
     
@@ -418,17 +431,16 @@ function onMouseMove(e) {
 function onMouseUp() {
     if (dragInfo.active && dragInfo.el) {
         // Save config on drop
-        state.fieldConfig[dragInfo.el.id] = {
-            ...state.fieldConfig[dragInfo.el.id],
-            left: dragInfo.el.style.left,
-            top: dragInfo.el.style.top
-        };
+        if (!state.fieldConfig[dragInfo.el.id]) {
+            state.fieldConfig[dragInfo.el.id] = {};
+        }
+        state.fieldConfig[dragInfo.el.id].left = dragInfo.el.style.left;
+        state.fieldConfig[dragInfo.el.id].top = dragInfo.el.style.top;
         saveFieldConfig();
     }
     dragInfo.active = false;
     dragInfo.el = null;
 }
-
 // --- Layout Config ---
 function saveFieldConfig() {
     localStorage.setItem('pdf_field_config', JSON.stringify(state.fieldConfig));
@@ -438,14 +450,18 @@ function saveFieldConfig() {
 function loadFieldConfig() {
     const saved = localStorage.getItem('pdf_field_config');
     if (saved) {
-        state.fieldConfig = JSON.parse(saved);
-        Object.keys(state.fieldConfig).forEach(id => {
-            const el = document.getElementById(id);
-            const cfg = state.fieldConfig[id];
-            if (el && cfg) {
-                Object.assign(el.style, cfg);
-            }
-        });
+        try {
+            state.fieldConfig = JSON.parse(saved);
+            Object.keys(state.fieldConfig).forEach(id => {
+                const el = document.getElementById(id);
+                const cfg = state.fieldConfig[id];
+                if (el && cfg) {
+                    Object.assign(el.style, cfg);
+                }
+            });
+        } catch (e) {
+            console.warn('Failed to load field config:', e);
+        }
     }
     loadLayoutFromStorage();
 }
@@ -495,6 +511,7 @@ function saveLayoutToStorage() {
     });
 
     state.currentLayoutConfig = layoutData;
+    localStorage.setItem('pdf_layout_config', JSON.stringify(layoutData));
     return layoutData;
 }
 
@@ -502,8 +519,9 @@ function loadLayoutFromStorage() {
     const saved = localStorage.getItem('pdf_layout_config');
     if (saved) {
         try {
-            state.currentLayoutConfig = JSON.parse(saved);
-            applyLayoutConfig(state.currentLayoutConfig);
+            const parsed = JSON.parse(saved);
+            state.currentLayoutConfig = parsed;
+            applyLayoutConfig(parsed);
             state.isLayoutLoaded = true;
         } catch (e) {
             console.warn('Failed to load layout config:', e);
@@ -512,6 +530,8 @@ function loadLayoutFromStorage() {
 }
 
 function applyLayoutConfig(config) {
+    if (!config || !config.fields) return;
+    
     // Apply field configurations
     Object.keys(config.fields).forEach(fieldId => {
         const fieldConfig = config.fields[fieldId];