2D: Bezier-Hilfslinien beim Editieren + Kreis kann zur Ellipse werden

Bezier: Anker→Griff-Verbindungen werden beim Editieren (Selektion) gestrichelt
angezeigt, nicht nur während des Zeichnens — macht sichtbar, welcher Griff
welchen Kurvenabschnitt steuert (wie bei üblichen Vektor-Editoren).

Kreis: bekommt wie die Ellipse zwei Griffe (Ost/Nord). Zieht man einen davon
unabhängig, wird der Kreis zur Ellipse (rotation 0); nähern sich die
Halbachsen beim Ziehen wieder an, wird daraus wieder ein Kreis. Erstellen
bleibt unverändert ein normaler Kreis — der Formwandel passiert nur beim
Bearbeiten.

src/state/projectSlice.drawingGrips.test.ts

@@ -40,9 +40,9 @@ beforeEach(() => {
 });
 
 describe("drawingVertices — Kreis/Bogen", () => {
-  it("Kreis liefert einen Radius-Griff auf der Ost-Seite", () => {
+  it("Kreis liefert zwei Griffe (Ost/Nord) — wie eine Ellipse", () => {
     const v = drawingVertices(circleDrawing);
-    expect(v).toEqual([{ x: 3, y: 3 }]);
+    expect(v).toEqual([{ x: 3, y: 3 }, { x: 2, y: 4 }]);
   });
 
   it("Bogen liefert Start-/End-/Mittel-Winkel-Griffe", () => {
@@ -55,8 +55,21 @@ describe("drawingVertices — Kreis/Bogen", () => {
 });
 
 describe("moveGripOf — Kreis/Bogen", () => {
-  it("Kreis-Griff ziehen ändert nur den Radius, nicht das Zentrum", () => {
-    getState().moveGripOf("d-circle", null, 0, { x: 5, y: 3 }); // 3m vom Zentrum
+  it("Kreis-Ost-Griff auf denselben Radius gezogen bleibt ein Kreis", () => {
+    getState().moveGripOf("d-circle", null, 0, { x: 3, y: 3 }); // weiterhin 1m Ost
+    const g = getState().project.drawings2d.find((d) => d.id === "d-circle")!.geom;
+    expect(g).toMatchObject({ shape: "circle", center: { x: 2, y: 3 }, r: 1 });
+  });
+
+  it("Kreis-Ost-Griff auf einen ANDEREN Radius gezogen wird zur Ellipse (Nutzer-Wunsch: Kreis kann beim Bearbeiten zur Ellipse werden)", () => {
+    getState().moveGripOf("d-circle", null, 0, { x: 5, y: 3 }); // 3m Ost statt 1m
+    const g = getState().project.drawings2d.find((d) => d.id === "d-circle")!.geom;
+    expect(g).toMatchObject({ shape: "ellipse", center: { x: 2, y: 3 }, rx: 3, ry: 1, rotation: 0 });
+  });
+
+  it("Ellipse-Griff zurück auf (fast) gleiche Halbachsen gezogen wird wieder zum Kreis", () => {
+    getState().moveGripOf("d-circle", null, 0, { x: 5, y: 3 }); // → Ellipse rx=3, ry=1
+    getState().moveGripOf("d-circle", null, 1, { x: 2, y: 6 }); // Nord-Griff auf ry=3
     const g = getState().project.drawings2d.find((d) => d.id === "d-circle")!.geom;
     expect(g).toMatchObject({ shape: "circle", center: { x: 2, y: 3 }, r: 3 });
   });

src/state/projectSlice.ts

@@ -1452,6 +1452,24 @@ function resizeGeom(
   }
 }
 
+/**
+ * Kreis, solange rx≈ry (relative Toleranz 0.5%) — sonst Ellipse (rotation 0).
+ * Trägt den Kreis-zu-Ellipse-Formwandel beim Griff-Ziehen (Nutzer-Wunsch:
+ * „Kreis wird wie bisher erstellt, kann beim Bearbeiten zur Ellipse werden");
+ * symmetrisch nutzbar auch für die Rückrichtung (Ellipse → Kreis, wenn man
+ * die Halbachsen wieder aneinander annähert).
+ */
+function ellipseOrCircle(
+  center: Vec2,
+  rx: number,
+  ry: number,
+): import("../model/types").Drawing2DGeom {
+  if (Math.abs(rx - ry) <= 0.005 * Math.max(rx, ry)) {
+    return { shape: "circle", center, r: (rx + ry) / 2 };
+  }
+  return { shape: "ellipse", center, rx, ry, rotation: 0 };
+}
+
 // ── Editier-Griffe (verschoben aus App.tsx, 1:1) ─────────────────────────────
 
 /**
@@ -1472,8 +1490,16 @@ export function drawingVertices(d: import("../model/types").Drawing2D): Vec2[] {
       { x: g.min.x, y: g.max.y },
     ];
   }
+  // Kreis: zwei Griffe (Ost/Nord, wie bei der Ellipse) — zieht man EINEN der
+  // beiden unabhängig, wird der Kreis zur Ellipse (s. `moveGrip`). So bleibt
+  // ein Kreis ein Kreis, solange man ihn nicht gezielt verzerrt (Nutzer-
+  // Wunsch: „Kreis erstellen wie bisher, beim Bearbeiten kann er zur Ellipse
+  // werden").
   if (g.shape === "circle") {
-    return [{ x: g.center.x + g.r, y: g.center.y }];
+    return [
+      { x: g.center.x + g.r, y: g.center.y },
+      { x: g.center.x, y: g.center.y + g.r },
+    ];
   }
   if (g.shape === "arc") {
     const mid = (g.a0 + g.a1) / 2;
@@ -1569,10 +1595,14 @@ function moveGrip(
         }
         // Text: der einzige Griff (Index 0) sitzt am Ankerpunkt → verschiebt ihn.
         if (g.shape === "text") return { ...d, geom: { ...g, at: pt } };
-        // Kreis: der einzige Griff (Index 0) ändert nur den Radius.
+        // Kreis: Griff 0 (Ost) bzw. 1 (Nord) — zieht man die beiden Achsen
+        // unabhängig auseinander, wird der Kreis zur Ellipse (rotation 0);
+        // bleiben rx/ry (fast) gleich, bleibt es ein Kreis (s. `ellipseOrCircle`).
         if (g.shape === "circle") {
-          const r = Math.max(1e-3, Math.hypot(pt.x - g.center.x, pt.y - g.center.y));
-          return { ...d, geom: { ...g, r } };
+          const dx = pt.x - g.center.x, dy = pt.y - g.center.y;
+          const rx = index === 0 ? Math.max(1e-3, Math.abs(dx)) : g.r;
+          const ry = index === 0 ? g.r : Math.max(1e-3, Math.abs(dy));
+          return { ...d, geom: ellipseOrCircle(g.center, rx, ry) };
         }
         // Bogen: Griff 0/1 (Start-/End-Winkel, s. drawingVertices) ändert a0/a1;
         // Griff 2 (Bogenmitte) ändert nur den Radius (Winkel bleiben fest).
@@ -1592,8 +1622,13 @@ function moveGrip(
           const dx = pt.x - g.center.x, dy = pt.y - g.center.y;
           const lx = dx * c + dy * s;
           const ly = -dx * s + dy * c;
-          if (index === 0) return { ...d, geom: { ...g, rx: Math.max(1e-3, Math.abs(lx)) } };
-          return { ...d, geom: { ...g, ry: Math.max(1e-3, Math.abs(ly)) } };
+          const rx = index === 0 ? Math.max(1e-3, Math.abs(lx)) : g.rx;
+          const ry = index === 0 ? g.ry : Math.max(1e-3, Math.abs(ly));
+          // Nur bei rotation 0 kann eine (fast) gleichseitige Ellipse wieder
+          // zum Kreis kollabieren — eine gedrehte Ellipse mit rx≈ry ist optisch
+          // bereits ein Kreis, „Drehung" wäre dann aber wieder bedeutungslos.
+          if (g.rotation === 0) return { ...d, geom: ellipseOrCircle(g.center, rx, ry) };
+          return { ...d, geom: { ...g, rx, ry } };
         }
         return d;
       }),

src/state/useGripEditing.ts

@@ -202,6 +202,26 @@ export function useGripEditing(opts: {
     return out;
   })();
 
+  // Bezier-Hilfslinien (Anker → Kontrollpunkt-Griff), gestrichelt gerendert,
+  // damit sichtbar/nachvollziehbar ist, welcher Griff welchen Kurvenabschnitt
+  // steuert (Nutzer-Wunsch: „Hilfslinien sollten schon sichtbar sein um sie
+  // zu steuern" — wie bei Illustrator/Inkscape üblich). `pts` folgt dem Muster
+  // Anker·Griff·Griff·Anker·… (s. `Drawing2DGeom["bezier"]`); jeder Anker
+  // bekommt eine Linie zu seinem/seinen benachbarten Griff(en).
+  const gripHandleLines: { a: Vec2; b: Vec2 }[] = (() => {
+    const out: { a: Vec2; b: Vec2 }[] = [];
+    for (const id of effectiveDrawingIds) {
+      const d = project.drawings2d.find((x) => x.id === id);
+      const g = d?.geom;
+      if (!g || g.shape !== "bezier") continue;
+      for (let i = 0; i + 3 < g.pts.length; i += 3) {
+        out.push({ a: g.pts[i], b: g.pts[i + 1] }); // Anker → Griff 1
+        out.push({ a: g.pts[i + 3], b: g.pts[i + 2] }); // nächster Anker → Griff 2
+      }
+    }
+    return out;
+  })();
+
   // Nachbar-Griff-Index INNERHALB desselben Elements (für Anker-Auflösung).
   // null = kein Nachbar möglich (Einzelgriff-Element wie Kreis/Öffnung/Treppe).
   const neighborGripIndex = (index: number): number | null => {
@@ -1048,6 +1068,7 @@ export function useGripEditing(opts: {
 
   return {
     grips,
+    gripHandleLines,
     edgeGrips,
     gripHandlers,
     gripEdit,