From c98fcc829cdc2b23d593f7f1dd0528a2755995c9 Mon Sep 17 00:00:00 2001
From: Eduard Wisch <data@data-it-solution.de>
Date: Thu, 9 Apr 2026 14:18:49 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20Anh=C3=A4nge-Buttons=20einheitlich=20+?=
 =?UTF-8?q?=20Bilder=20bei=20Zeichnen-Tools=20nicht=20mehr=20ziehbar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Anhänge-Spalte:
- Buttons und Labels waren unterschiedlich breit → Scrollbalken querte
  die Box. Fix: alle Controls (.butAction, button, select) in
  .bericht-attachments auf display:block + width:100% + box-sizing
  border-box, einheitliches Padding, ellipsis bei Überlänge.
- overflow-x: hidden verhindert horizontale Scrollbar im Container.
- min-width: 0 damit grid-Container nicht überlaufen.

Zeichen-Tools:
- Problem: Beim Malen wurden die Bilder (fabric.Image) mitbewegt
  weil sie immer selectable/evented waren.
- Fix: applyTool() setzt auf ALLEN Canvas-Objekten selectable=false
  und evented=false sobald ein Zeichen-Tool aktiv ist. Nur bei
  'select' werden sie wieder aktiviert.
- discardActiveObject() nach Tool-Wechsel damit keine Selektion
  aktiv bleibt.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
[deploy]
---
 css/bericht.css | 28 ++++++++++++++++++++++++++++
 js/editor.js    | 13 +++++++++++++
 2 files changed, 41 insertions(+)

diff --git a/css/bericht.css b/css/bericht.css
index fa12b23..0e5f392 100644
--- a/css/bericht.css
+++ b/css/bericht.css
@@ -25,7 +25,35 @@
     padding: 10px;
     max-height: 80vh;
     overflow-y: auto;
+    overflow-x: hidden;
+    box-sizing: border-box;
+    min-width: 0; /* verhindert grid-Überlauf */
 }
+.bericht-attachments *, .bericht-pages * { box-sizing: border-box; }
+
+/* Alle Buttons in der Anhänge-Spalte einheitlich volle Breite */
+.bericht-attachments .butAction,
+.bericht-attachments button,
+.bericht-attachments select,
+.bericht-attachments label.butAction {
+    display: block;
+    width: 100%;
+    box-sizing: border-box;
+    text-align: center;
+    padding: 8px 12px;
+    margin: 4px 0 0 0;
+    background: var(--colorbackbody, #2a2a30);
+    color: var(--colortext, #e0e0e0);
+    border: 1px solid var(--colorboxbordertitle1, #555);
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 13px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.bericht-attachments .butAction:hover,
+.bericht-attachments button:hover { background: var(--colorbackhmenu1, #337ab7); color: #fff; }
 .bericht-attachments h4,
 .bericht-pages h4 {
     margin: 0 0 8px 0;
diff --git a/js/editor.js b/js/editor.js
index a8419b2..ce58b27 100644
--- a/js/editor.js
+++ b/js/editor.js
@@ -508,6 +508,19 @@
         // Cursor-Hint
         fabricCanvas.defaultCursor = (currentTool === 'select') ? 'default' : 'crosshair';
 
+        // Wenn ein Zeichen-Tool aktiv ist, sperren wir Bilder und bestehende Shapes,
+        // damit sie nicht versehentlich verschoben werden. Bei 'select' wird alles
+        // wieder ziehbar.
+        const isSelect = (currentTool === 'select');
+        fabricCanvas.getObjects().forEach(obj => {
+            obj.set({
+                selectable: isSelect,
+                evented: isSelect,
+            });
+        });
+        if (!isSelect) fabricCanvas.discardActiveObject();
+        fabricCanvas.requestRenderAll();
+
         fabricCanvas.off('mouse:down', shapeDown);
         fabricCanvas.off('mouse:move', shapeMove);
         fabricCanvas.off('mouse:up',   shapeUp);