Erweiterungen

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

@@ -45,6 +45,9 @@ window.initProfileInvoiceGenerator = function() {
   var elementStart = { x: 0, y: 0 };
   var gridSize = 5;
   
+  // Image cache to prevent flickering during resize
+  var imageCache = {};
+  
   // Page dimensions
   var padding = 10;
   var pageX, pageY, pageWidth, pageHeight;
@@ -167,35 +170,58 @@ window.initProfileInvoiceGenerator = function() {
       ctx.stroke();
     } else if (el.type === 'image') {
       if (el.imageData) {
-        // Draw the uploaded image with aspect ratio preserved
-        var img = new Image();
-        img.onload = function() {
+        // Check if image is already cached
+        if (imageCache[el.imageData]) {
+          // Use cached image for flicker-free rendering
+          var img = imageCache[el.imageData];
           // Calculate dimensions to maintain aspect ratio (object-fit: contain)
           var imgAspect = img.width / img.height;
           var boxAspect = w / h;
           var drawW, drawH, drawX, drawY;
           
           if (imgAspect > boxAspect) {
-            // Image is wider than box - fit to width
             drawW = w;
             drawH = w / imgAspect;
             drawX = x;
-            drawY = y + (h - drawH) / 2; // Center vertically
+            drawY = y + (h - drawH) / 2;
           } else {
-            // Image is taller than box - fit to height
             drawW = h * imgAspect;
             drawH = h;
-            drawX = x + (w - drawW) / 2; // Center horizontally
+            drawX = x + (w - drawW) / 2;
             drawY = y;
           }
           
           ctx.drawImage(img, drawX, drawY, drawW, drawH);
-          // Redraw selection if this element is selected
-          if (selectedElement && selectedElement.id === el.id) {
-            drawSelection(el);
-          }
-        };
-        img.src = el.imageData;
+        } else {
+          // Load and cache the image
+          var img = new Image();
+          img.onload = function() {
+            imageCache[el.imageData] = img;
+            // Calculate dimensions to maintain aspect ratio
+            var imgAspect = img.width / img.height;
+            var boxAspect = w / h;
+            var drawW, drawH, drawX, drawY;
+            
+            if (imgAspect > boxAspect) {
+              drawW = w;
+              drawH = w / imgAspect;
+              drawX = x;
+              drawY = y + (h - drawH) / 2;
+            } else {
+              drawW = h * imgAspect;
+              drawH = h;
+              drawX = x + (w - drawW) / 2;
+              drawY = y;
+            }
+            
+            ctx.drawImage(img, drawX, drawY, drawW, drawH);
+            // Redraw selection if this element is selected
+            if (selectedElement && selectedElement.id === el.id) {
+              drawSelection(el);
+            }
+          };
+          img.src = el.imageData;
+        }
       } else {
         // Draw placeholder
         ctx.fillStyle = '#f0f0f0';
@@ -799,10 +825,41 @@ window.initProfileInvoiceGenerator = function() {
   };
   
   // Get canvas data
+  // Helper functions for percentage conversion
+  function toPercentX(value) {
+    return (value / basePageWidth * 100).toFixed(2);
+  }
+  function toPercentY(value) {
+    return (value / basePageHeight * 100).toFixed(2);
+  }
+  function fromPercentX(percent) {
+    return Math.round(parseFloat(percent) / 100 * basePageWidth);
+  }
+  function fromPercentY(percent) {
+    return Math.round(parseFloat(percent) / 100 * basePageHeight);
+  }
+  
   window.getProfileCanvasData = function() {
     saveState();
+    // Convert pixel values to percentages for storage
+    var elementsWithPercent = elements.map(function(el) {
+      return {
+        id: el.id,
+        type: el.type,
+        text: el.text,
+        xPercent: toPercentX(el.x),
+        yPercent: toPercentY(el.y),
+        widthPercent: toPercentX(el.width),
+        heightPercent: toPercentY(el.height),
+        fontSize: el.fontSize,
+        fontStyle: el.fontStyle,
+        color: el.color,
+        isStatic: el.isStatic,
+        imageData: el.imageData
+      };
+    });
     return {
-      elements: elements
+      elements: elementsWithPercent
     };
   };
   
@@ -868,6 +925,21 @@ window.initProfileInvoiceGenerator = function() {
             elementCounter++;
             el.id = 'element-' + elementCounter;
           }
+          
+          // Convert percentages to pixels if they exist, otherwise use legacy pixel values
+          if (el.xPercent !== undefined) {
+            el.x = fromPercentX(el.xPercent);
+          }
+          if (el.yPercent !== undefined) {
+            el.y = fromPercentY(el.yPercent);
+          }
+          if (el.widthPercent !== undefined) {
+            el.width = fromPercentX(el.widthPercent);
+          }
+          if (el.heightPercent !== undefined) {
+            el.height = fromPercentY(el.heightPercent);
+          }
+          
           elements.push(el);
         });