Erweiterungen

src/main/frontend/invoice-generator/profile-invoice-generator.js

@@ -1,4 +1,12 @@
 // Profile Invoice Generator - Initializes canvas on the edit-profile page
+// Global state to persist between tab switches
+window.profileInvoiceState = window.profileInvoiceState || {
+  elements: [],
+  selectedElement: null,
+  elementCounter: 0,
+  initialized: false
+};
+
 window.initProfileInvoiceGenerator = function() {
   var containerId = 'invoice-canvas-container-profile';
   var container = document.getElementById(containerId);
@@ -8,12 +16,9 @@ window.initProfileInvoiceGenerator = function() {
     return;
   }
   
-  // Check if canvas already exists
-  var existingCanvas = container.querySelector('canvas');
-  if (existingCanvas) {
-    console.log('Canvas already exists');
-    return;
-  }
+  // Always clear and recreate canvas to ensure clean state
+  container.innerHTML = '';
+  window.profileInvoiceState.initialized = false;
   
   // Get container dimensions
   var rect = container.getBoundingClientRect();
@@ -31,13 +36,13 @@ window.initProfileInvoiceGenerator = function() {
   
   var ctx = canvas.getContext('2d');
   
-  // State
-  var elements = [];
-  var selectedElement = null;
+  // Restore state from global or initialize
+  var elements = window.profileInvoiceState.elements;
+  var selectedElement = window.profileInvoiceState.selectedElement;
+  var elementCounter = window.profileInvoiceState.elementCounter;
   var isDragging = false;
   var dragStart = { x: 0, y: 0 };
   var elementStart = { x: 0, y: 0 };
-  var elementCounter = 0;
   var gridSize = 5;
   
   // Page dimensions
@@ -474,23 +479,34 @@ window.initProfileInvoiceGenerator = function() {
     }
   };
   
+  // Save state to global before functions are defined
+  function saveState() {
+    window.profileInvoiceState.elements = elements;
+    window.profileInvoiceState.selectedElement = selectedElement;
+    window.profileInvoiceState.elementCounter = elementCounter;
+  }
+  
   // Clear canvas function
   window.clearProfileCanvas = function() {
     elements = [];
     selectedElement = null;
+    window.profileInvoiceState.elements = [];
+    window.profileInvoiceState.selectedElement = null;
     notifyElementDeselected();
     draw();
   };
   
   // Get canvas data
   window.getProfileCanvasData = function() {
+    saveState();
     return {
       elements: elements
     };
   };
   
   draw();
-  console.log('Profile canvas initialized');
+  window.profileInvoiceState.initialized = true;
+  console.log('Profile canvas initialized with ' + elements.length + ' elements');
   
   // Handle window resize
   window.addEventListener('resize', function() {
@@ -531,4 +547,45 @@ window.initProfileInvoiceGenerator = function() {
       }
     });
   }
+  
+  // Load template function
+  window.loadProfileTemplate = function(templateData) {
+    try {
+      var data = JSON.parse(templateData);
+      if (data.elements && Array.isArray(data.elements)) {
+        // Clear existing elements
+        elements = [];
+        selectedElement = null;
+        
+        // Load new elements
+        data.elements.forEach(function(el) {
+          // Ensure element has an ID
+          if (!el.id) {
+            elementCounter++;
+            el.id = 'element-' + elementCounter;
+          }
+          elements.push(el);
+        });
+        
+        // Update counter to be higher than any loaded element
+        elements.forEach(function(el) {
+          if (el.id && el.id.startsWith('element-')) {
+            var num = parseInt(el.id.replace('element-', ''));
+            if (!isNaN(num) && num > elementCounter) {
+              elementCounter = num;
+            }
+          }
+        });
+        
+        // Save to global state
+        saveState();
+        
+        draw();
+        notifyElementDeselected();
+        console.log('Template loaded with ' + elements.length + ' elements');
+      }
+    } catch (e) {
+      console.error('Error loading template:', e);
+    }
+  };
 };