From c823345676fc7de36876ac83364c366b38235959 Mon Sep 17 00:00:00 2001
From: Paul Bokel <paul.bokel@gmail.com>
Date: Mon, 27 Apr 2026 15:13:49 +0000
Subject: [PATCH] Rewrite profile photo crop/zoom logic

Display and crop were using inconsistent coordinate systems.
Display now uses: translate(translateX+offsetX, translateY+offsetY) scale(zoomLevel)
Crop uses: srcX = -(offsetX + translateX) / scale

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 templates/attendee/profile.html | 230 ++++++++++++++++++--------------
 1 file changed, 128 insertions(+), 102 deletions(-)

diff --git a/templates/attendee/profile.html b/templates/attendee/profile.html
index 2d649e6..dd3fe94 100644
--- a/templates/attendee/profile.html
+++ b/templates/attendee/profile.html
@@ -2,37 +2,68 @@
 
 {% block title %}{{ 'profile'|t }} - NetEvents{% endblock %}
 
+{% block extra_styles %}
+<style>
+.profile-page {
+    max-width: 900px;
+    margin: 0 auto;
+    padding: 50px 40px;
+}
+.profile-container {
+    display: flex;
+    gap: 30px;
+    align-items: flex-start;
+}
+.photo-box {
+    background: #f8f9fa;
+    border: 1px solid #e0e0e0;
+    border-radius: 10px;
+    padding: 20px;
+    text-align: center;
+}
+.photo-box h3 {
+    margin-bottom: 15px;
+    color: #2c3e50;
+}
+.profile-photo-section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+</style>
+{% endblock %}
+
 {% block content %}
 <div class="profile-page">
     <h1>{{ 'my_profile'|t }}</h1>
 
     <div class="profile-container">
-        <div class="profile-photo-section">
-            <div class="current-photo" id="photo-container">
-                {% if attendee.profile_picture %}
-                    <img src="{{ url_for('static', filename='uploads/' + attendee.profile_picture) }}" alt="{{ 'profile_photo'|t }}" class="profile-img" id="profile-preview">
-                {% else %}
-                    <img src="" alt="{{ 'profile_preview'|t }}" class="profile-img" id="profile-preview" style="display: none;">
-                    <div class="no-photo" id="no-photo">{{ 'no_photo'|t }}</div>
-                {% endif %}
-            </div>
+        <div class="photo-box">
+            <h3>{{ 'profile_photo'|t }}</h3>
+            <div class="profile-photo-section">
+                <div class="current-photo" id="photo-container">
+                    {% if attendee.profile_picture %}
+                        <img src="{{ url_for('static', filename='uploads/' + attendee.profile_picture) }}" alt="{{ 'profile_photo'|t }}" class="profile-img" id="profile-preview">
+                    {% else %}
+                        <img src="" alt="{{ 'profile_preview'|t }}" class="profile-img" id="profile-preview" style="display: none;">
+                        <div class="no-photo" id="no-photo">{{ 'no_photo'|t }}</div>
+                    {% endif %}
+                </div>
 
-            <canvas id="crop-canvas" style="display: none;"></canvas>
+                <canvas id="crop-canvas" style="display: none;"></canvas>
 
-            <div class="zoom-controls">
-                <button type="button" class="btn btn-sm btn-outline" onclick="adjustZoom(-0.25)">{{ 'zoom_out'|t }}</button>
-                <span id="zoom-level">100%</span>
-                <button type="button" class="btn btn-sm btn-outline" onclick="adjustZoom(0.25)">{{ 'zoom_in'|t }}</button>
-                <button type="button" class="btn btn-sm btn-outline" onclick="resetImage()">{{ 'reset'|t }}</button>
-            </div>
+                <div class="zoom-controls">
+                    <button type="button" class="btn btn-sm btn-outline" onclick="adjustZoom(-0.25)">-</button>
+                    <span id="zoom-level">100%</span>
+                    <button type="button" class="btn btn-sm btn-outline" onclick="adjustZoom(0.25)">+</button>
+                    <button type="button" class="btn btn-sm btn-outline" onclick="handleFormSubmit()">{{ 'save'|t }}</button>
+                </div>
 
-            <form method="POST" action="{{ url_for('upload_photo') }}" enctype="multipart/form-data" class="photo-upload-form" id="photo-form">
                 <div class="form-group">
                     <label for="photo">{{ 'upload_photo'|t }}</label>
                     <input type="file" id="photo" name="photo" accept="image/*">
                 </div>
-                <button type="submit" class="btn btn-sm btn-primary" id="upload-btn">{{ 'upload'|t }}</button>
-            </form>
+            </div>
         </div>
 
         <form method="POST" action="{{ url_for('attendee_profile') }}" class="profile-form">
@@ -56,6 +87,16 @@
                 <input type="text" id="role" name="role" value="{{ attendee.role or '' }}">
             </div>
 
+            <div class="form-group">
+                <label for="phone">{{ 'phone'|t }}</label>
+                <input type="tel" id="phone" name="phone" value="{{ attendee.phone or '' }}">
+            </div>
+
+            <div class="form-group">
+                <label for="linkedin">{{ 'linkedin'|t }}</label>
+                <input type="url" id="linkedin" name="linkedin" value="{{ attendee.linkedin or '' }}">
+            </div>
+
             <div class="form-group">
                 <label for="introduction">{{ 'short_introduction'|t }}</label>
                 <textarea id="introduction" name="introduction" rows="4">{{ attendee.introduction or '' }}</textarea>
@@ -74,13 +115,13 @@
     height: 150px;
     margin-bottom: 10px;
     overflow: hidden;
-    border-radius: 50%;
+    border-radius: 0;
     position: relative;
     background: #e0e0e0;
 }
 .profile-img {
     position: absolute;
-    border-radius: 50%;
+    border-radius: 0;
     cursor: move;
 }
 .no-photo, #no-photo {
@@ -103,9 +144,9 @@
 </style>
 
 <script>
-var zoomLevel = 1;
-var panX = 0;
-var panY = 0;
+var zoomLevel = 1.0;
+var translateX = 0;
+var translateY = 0;
 var isDragging = false;
 var dragStartX = 0;
 var dragStartY = 0;
@@ -129,8 +170,6 @@ function init() {
         document.addEventListener('mouseup', endDrag);
         container.addEventListener('wheel', handleWheel);
     }
-
-    document.getElementById('photo-form').addEventListener('submit', handleFormSubmit);
 }
 
 function handleFileSelect(e) {
@@ -142,7 +181,9 @@ function handleFileSelect(e) {
         var img = new Image();
         img.onload = function() {
             originalImage = img;
-            resetImage();
+            zoomLevel = 1.0;
+            translateX = 0;
+            translateY = 0;
             preview.src = event.target.result;
             preview.style.display = 'block';
             var noPhoto = document.getElementById('no-photo');
@@ -155,24 +196,15 @@ function handleFileSelect(e) {
 }
 
 function adjustZoom(delta) {
-    var newZoom = zoomLevel + delta;
-    if (newZoom < 1) newZoom = 1;
-    if (newZoom > 3) newZoom = 3;
-    zoomLevel = newZoom;
+    var oldZoom = zoomLevel;
+    zoomLevel = Math.max(1.0, Math.min(3.0, zoomLevel + delta));
     document.getElementById('zoom-level').textContent = Math.round(zoomLevel * 100) + '%';
 
-    if (zoomLevel === 1) {
-        panX = 0;
-        panY = 0;
-    }
-    updateDisplay();
-}
+    // Adjust translation to zoom toward center
+    var factor = zoomLevel / oldZoom;
+    translateX *= factor;
+    translateY *= factor;
 
-function resetImage() {
-    zoomLevel = 1;
-    panX = 0;
-    panY = 0;
-    document.getElementById('zoom-level').textContent = '100%';
     updateDisplay();
 }
 
@@ -182,66 +214,65 @@ function updateDisplay() {
     var img = originalImage;
     var imgW = img.naturalWidth;
     var imgH = img.naturalHeight;
-    var imgAspect = imgW / imgH;
 
-    // Calculate display size (object-fit: cover)
-    var dispW, dispH;
-    if (imgAspect > 1) {
+    var scale, dispW, dispH, offsetX, offsetY;
+    if (imgW >= imgH) {
+        scale = containerSize / imgH;
         dispH = containerSize;
-        dispW = dispH * imgAspect;
+        dispW = imgW * scale;
+        offsetX = (containerSize - dispW) / 2;
+        offsetY = 0;
     } else {
+        scale = containerSize / imgW;
         dispW = containerSize;
-        dispH = dispW / imgAspect;
+        dispH = imgH * scale;
+        offsetX = 0;
+        offsetY = (containerSize - dispH) / 2;
     }
 
-    // Center offset for object-fit: cover
-    var offsetX = (containerSize - dispW) / 2;
-    var offsetY = (containerSize - dispH) / 2;
-
-    // Apply pan (drag right = see right side of image)
-    var totalX = offsetX + panX;
-    var totalY = offsetY + panY;
-
-    preview.style.width = dispW + 'px';
-    preview.style.height = dispH + 'px';
-    preview.style.left = totalX + 'px';
-    preview.style.top = totalY + 'px';
-    preview.style.transform = 'scale(' + zoomLevel + ')';
-    preview.style.transformOrigin = 'center center';
+    preview.style.transform = 'translate(' + (translateX + offsetX) + 'px, ' + (translateY + offsetY) + 'px) scale(' + zoomLevel + ')';
 }
 
 function startDrag(e) {
-    if (!originalImage) return;
+    if (!originalImage || zoomLevel <= 1.0) return;
     isDragging = true;
-    dragStartX = e.clientX - panX;
-    dragStartY = e.clientY - panY;
+    dragStartX = e.clientX - translateX;
+    dragStartY = e.clientY - translateY;
     preview.style.cursor = 'grabbing';
     e.preventDefault();
 }
 
 function doDrag(e) {
     if (!isDragging) return;
-    panX = e.clientX - dragStartX;
-    panY = e.clientY - dragStartY;
+    translateX = e.clientX - dragStartX;
+    translateY = e.clientY - dragStartY;
     updateDisplay();
 }
 
 function endDrag() {
     isDragging = false;
-    if (preview) preview.style.cursor = 'move';
+    if (preview) preview.style.cursor = zoomLevel > 1.0 ? 'move' : 'default';
 }
 
 function handleWheel(e) {
     e.preventDefault();
-    if (e.deltaY < 0) {
-        adjustZoom(0.1);
-    } else {
-        adjustZoom(-0.1);
-    }
+    var rect = container.getBoundingClientRect();
+    var mouseX = e.clientX - rect.left - containerSize / 2;
+    var mouseY = e.clientY - rect.top - containerSize / 2;
+
+    var oldZoom = zoomLevel;
+    zoomLevel = Math.max(1.0, Math.min(3.0, zoomLevel - e.deltaY * 0.01));
+
+    // Zoom toward mouse position
+    translateX = mouseX - (mouseX - translateX) * (zoomLevel / oldZoom);
+    translateY = mouseY - (mouseY - translateY) * (zoomLevel / oldZoom);
+
+    document.getElementById('zoom-level').textContent = Math.round(zoomLevel * 100) + '%';
+    updateDisplay();
 }
 
 function handleFormSubmit(e) {
-    e.preventDefault();
+    if (e) e.preventDefault();
 
     if (!originalImage) {
         alert('Please select an image first');
@@ -256,43 +287,38 @@ function handleFormSubmit(e) {
     var img = originalImage;
     var imgW = img.naturalWidth;
     var imgH = img.naturalHeight;
-    var imgAspect = imgW / imgH;
 
-    // Calculate display size (object-fit: cover)
-    var dispW, dispH;
-    if (imgAspect > 1) {
+    // Calculate how the image fits in the container (object-fit: cover)
+    var scale, dispW, dispH, offsetX, offsetY;
+    if (imgW >= imgH) {
+        scale = containerSize / imgH;
         dispH = containerSize;
-        dispW = dispH * imgAspect;
+        dispW = imgW * scale;
+        offsetX = (containerSize - dispW) / 2;
+        offsetY = 0;
     } else {
+        scale = containerSize / imgW;
         dispW = containerSize;
-        dispH = dispW / imgAspect;
+        dispH = imgH * scale;
+        offsetX = 0;
+        offsetY = (containerSize - dispH) / 2;
     }
 
-    // Centering offsets
-    var offsetX = (containerSize - dispW) / 2;
-    var offsetY = (containerSize - dispH) / 2;
-
-    // Scale factors from display to image coordinates
-    var scaleX = imgW / dispW;
-    var scaleY = imgH / dispH;
-
-    // Source crop region
-    var srcX = (offsetX + panX + containerSize / 2) / (scaleX * zoomLevel) - containerSize / (2 * scaleX);
-    var srcY = (offsetY + panY + containerSize / 2) / (scaleY * zoomLevel) - containerSize / (2 * scaleY);
-    var srcW = containerSize / (scaleX * zoomLevel);
-    var srcH = containerSize / (scaleY * zoomLevel);
+    // Display: translate(translateX + offsetX, translateY + offsetY) scale(zoomLevel)
+    // Container pixel (cx, cy) maps to source: sx = (cx - offsetX - translateX) / scale
+    // So container pixel (0,0) maps to source: srcX = -(offsetX + translateX) / scale
+    var srcX = -(offsetX + translateX) / scale;
+    var srcY = -(offsetY + translateY) / scale;
+    var srcW = containerSize / scale / zoomLevel;
+    var srcH = containerSize / scale / zoomLevel;
 
     // Clamp to image bounds
-    srcX = Math.max(0, srcX);
-    srcY = Math.max(0, srcY);
-    srcW = Math.min(imgW - srcX, srcW);
-    srcH = Math.min(imgH - srcY, srcH);
+    srcX = Math.max(0, Math.min(srcX, imgW - srcW));
+    srcY = Math.max(0, Math.min(srcY, imgH - srcH));
+    srcW = Math.min(srcW, imgW - srcX);
+    srcH = Math.min(srcH, imgH - srcY);
 
-    // Draw with circular clip
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    ctx.beginPath();
-    ctx.arc(150, 150, 150, 0, Math.PI * 2);
-    ctx.clip();
+    ctx.clearRect(0, 0, 300, 300);
     ctx.drawImage(img, srcX, srcY, srcW, srcH, 0, 0, 300, 300);
 
     canvas.toBlob(function(blob) {