rene/banyaro
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix: Foto-Editor — Prozent-Offsets (Position-Bug), Long-press, Stift-Icon

Browse source
This commit is contained in:
rene 2026-04-17 23:06:24 +02:00
parent 913cebcba1
commit 4f12c8e6a4
4 changed files with 16 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

2
backend/static/js/app.js
View file

@ -3,7 +3,7 @@
Router, State-Management, Navigation, Initialisierung.
============================================================ */
const APP_VER = '120'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VER = '122'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const App = (() => {

19
backend/static/js/pages/dog-profile.js
View file

@ -81,11 +81,11 @@ window.Page_dog_profile = (() => {
${dog.foto_url
? `<div class="dp-avatar-ring">
<img src="${dog.foto_url}" alt="${_esc(dog.name)}" class="dp-avatar-img"
style="transform:scale(${dog.foto_zoom||1}) translate(${dog.foto_offset_x||0}px,${dog.foto_offset_y||0}px)">
style="transform:scale(${dog.foto_zoom||1}) translate(${dog.foto_offset_x||0}%,${dog.foto_offset_y||0}%)">
</div>`
: `<div class="dp-avatar-ring dp-avatar-empty">${UI.icon('dog')}</div>`}
<button class="dp-avatar-edit-btn" id="dp-photo-edit-btn" title="Foto bearbeiten">
${UI.icon('camera')}
<button class="dp-avatar-edit-btn" id="dp-photo-edit-btn">
${UI.icon('pencil-simple')}
</button>
</div>
@ -284,7 +284,8 @@ window.Page_dog_profile = (() => {
<div class="photo-editor-preview" id="pe-preview">
${hasPhoto
? `<img src="${UI.escape(dog.foto_url)}" id="pe-img" draggable="false"
style="transform:scale(${zoom}) translate(${ox}px,${oy}px)">`
oncontextmenu="return false"
style="transform:scale(${zoom}) translate(${ox}%,${oy}%)">`
: `<div class="photo-editor-empty">${UI.icon('dog')}</div>`}
</div>
${hasPhoto ? `
@ -314,8 +315,11 @@ window.Page_dog_profile = (() => {
const img = document.getElementById('pe-img');
const zoomSlider = document.getElementById('pe-zoom');
// Offsets in % des Preview-Containers (200px) — konsistent mit Profil-Anzeige
const PREVIEW_PX = 200;
function _applyTransform() {
if (img) img.style.transform = `scale(${_zoom}) translate(${_ox}px,${_oy}px)`;
if (img) img.style.transform = `scale(${_zoom}) translate(${_ox}%,${_oy}%)`;
}
// Zoom-Slider
@ -336,8 +340,9 @@ window.Page_dog_profile = (() => {
});
img.addEventListener('pointermove', e => {
if (!_dragging) return;
_ox = _baseX + (e.clientX - _startX) / _zoom;
_oy = _baseY + (e.clientY - _startY) / _zoom;
// Pixel-Delta → Prozent des Preview-Containers, korrigiert um Zoom
_ox = _baseX + (e.clientX - _startX) / (PREVIEW_PX / 100) / _zoom;
_oy = _baseY + (e.clientY - _startY) / (PREVIEW_PX / 100) / _zoom;
_applyTransform();
});
img.addEventListener('pointerup', () => { _dragging = false; });