schraegbilder.git

@@ -57,16 +57,16 @@

         </div>

     </div>

     <hr>

-    <h2>Punkte eintragen</h2>

+    <h2>Punkte und Linien eintragen</h2>

     <div class="control-group">

-        <label for="punkte-input">Punkte (z.B. A(2|4|3) oder B(-1|2|4)):</label>

+        <label for="punkte-input">Punkte (z.B. A(2|4|3) oder B(-1|2|4)) und Linien A-B oder A_B (gestrichelt):</label><br>

         <textarea id="punkte-input" rows="6" placeholder="A(2|4|3)&#10;B(-1|2|4)" py-input="zeichne_koordinatensystem">A(2|4|3)</textarea>

     </div>

     <div class="control-group checkbox-group">

         <label>

             <input type="checkbox" id="show-labels" checked py-input="zeichne_koordinatensystem">

-            Punkte überhaupt beschriften

+            Punkte beschriften

         </label>

     </div>

     <div class="control-group checkbox-group">

@@ -1,61 +1,126 @@

 import re

+import json

+import base64

 from pyscript import document, window

 from schraegbild.svg_builder import SchraegbildBuilder

-# Globale Variable, um den aktuellen SVG-String für den Download zwischenzuspeichern

+# Globale Variable für den Download

 aktuelles_svg = ""

+# Flag, um Endlosschleifen beim Laden des Hashs zu verhindern

+block_hash_update = False

+

+

+def get_int_value(selector, default=0):

+    val_string = document.querySelector(selector).value.strip()

+    if not val_string: return default

+    try:

+        return int(val_string)

+    except ValueError:

+        return default

 def zeichne_koordinatensystem(event=None):

-    global aktuelles_svg

+    global aktuelles_svg, block_hash_update

-    # 1. Werte auslesen wie bisher

-    len_x1 = int(document.querySelector("#len-x1").value)

-    len_x2 = int(document.querySelector("#len-x2").value)

-    len_x3 = int(document.querySelector("#len-x3").value)

-    neg_x1 = int(document.querySelector("#neg-x1").value)

-    neg_x2 = int(document.querySelector("#neg-x2").value)

-    neg_x3 = int(document.querySelector("#neg-x3").value)

-    mod_x1 = int(document.querySelector("#mod-x1").value)

-    mod_x2 = int(document.querySelector("#mod-x2").value)

-    mod_x3 = int(document.querySelector("#mod-x3").value)

+    # 1. Werte auslesen

+    len_x1 = get_int_value("#len-x1", 5)

+    len_x2 = get_int_value("#len-x2", 6)

+    len_x3 = get_int_value("#len-x3", 6)

+    neg_x1 = get_int_value("#neg-x1", 0)

+    neg_x2 = get_int_value("#neg-x2", 0)

+    neg_x3 = get_int_value("#neg-x3", 0)

+    mod_x1 = get_int_value("#mod-x1", 2)

+    mod_x2 = get_int_value("#mod-x2", 2)

+    mod_x3 = get_int_value("#mod-x3", 2)

     show_labels = document.querySelector("#show-labels").checked

     show_coords = document.querySelector("#show-coords").checked

     punkte_text = document.querySelector("#punkte-input").value

-    # 2. Punkte parsen

+    # --- NEU: Zustand in der URL speichern ---

+    if not block_hash_update:

+        zustand = {

+            "x1": len_x1, "x2": len_x2, "x3": len_x3,

+            "nx1": neg_x1, "nx2": neg_x2, "nx3": neg_x3,

+            "mx1": mod_x1, "mx2": mod_x2, "mx3": mod_x3,

+            "lbl": show_labels, "crd": show_coords,

+            "txt": punkte_text

+        }

+        # Als JSON packen, in Bytes umwandeln, Base64 codieren und als UTF-8 String in die URL schieben

+        json_bytes = json.dumps(zustand).encode('utf-8')

+        b64_string = base64.b64encode(json_bytes).decode('utf-8')

+        window.location.hash = b64_string

+

+    # 2. Punkte & Kanten parsen

     punkte_liste = []

-    pattern = re.compile(r"([A-Za-z0-9_]+)\s*\(\s*([-\d.]+)\s*\|\s*([-\d.]+)\s*\|\s*([-\d.]+)\s*\)")

+    kanten_liste = []

+    p_pattern = re.compile(r"([A-Za-z0-9_]+)\s*\(\s*([-\d.]+)\s*\|\s*([-\d.]+)\s*\|\s*([-\d.]+)\s*\)")

+    k_pattern = re.compile(r"([A-Za-z0-9_]+)\s*([-_])\s*([A-Za-z0-9_]+)")

     for zeile in punkte_text.splitlines():

-        match = pattern.search(zeile)

-        if match:

-            name = match.group(1)

-            x1 = float(match.group(2))

-            x2 = float(match.group(3))

-            x3 = float(match.group(4))

-            punkte_liste.append({"name": name, "coords": (x1, x2, x3)})

-

-    # 3. Builder aufrufen

+        zeile = zeile.strip()

+        if not zeile: continue

+        p_match = p_pattern.search(zeile)

+        if p_match:

+            punkte_liste.append({"name": p_match.group(1),

+                                 "coords": (float(p_match.group(2)), float(p_match.group(3)), float(p_match.group(4)))})

+            continue

+        k_match = k_pattern.search(zeile)

+        if k_match:

+            kanten_liste.append({"von": k_match.group(1), "nach": k_match.group(3),

+                                 "style": "sichtbar" if k_match.group(2) == "-" else "verdeckt"})

+

+    # 3. Rendern

     builder = SchraegbildBuilder(

-        len_x1, len_x2, len_x3, neg_x1, neg_x2, neg_x3, mod_x1, mod_x2, mod_x3,

-        punkte=punkte_liste, show_labels=show_labels, show_coords=show_coords

+        len_x1, len_x2, len_x3, neg_x1, neg_x2, neg_x3, mod_x1, max(1, mod_x2), max(1, mod_x3),

+        punkte=punkte_liste, kanten=kanten_liste, show_labels=show_labels, show_coords=show_coords

     )

-    # SVG generieren und global speichern

     aktuelles_svg = builder.generiere_koordinatensystem()

-

-    # Im UI anzeigen

     document.querySelector("#canvas-container").innerHTML = aktuelles_svg

+def lade_zustand_aus_url():

+    """Prüft beim Start, ob ein Permalink geladen wurde"""

+    global block_hash_update

+    hash_val = window.location.hash

+

+    if not hash_val or len(hash_val) <= 1:

+        return  # Kein Permalink vorhanden, Standardwerte nutzen

+

+    try:

+        # Das '#' vorne abschneiden und Base64 decodieren

+        b64_data = hash_val[1:]

+        json_bytes = base64.b64decode(b64_data)

+        zustand = json.loads(json_bytes.decode('utf-8'))

+

+        # UI-Updates blockieren den Hash-Writer temporär, um Echos zu verhindern

+        block_hash_update = True

+

+        # Werte in die HTML-Felder zurückschreiben

+        document.querySelector("#len-x1").value = zustand.get("x1", 5)

+        document.querySelector("#len-x2").value = zustand.get("x2", 6)

+        document.querySelector("#len-x3").value = zustand.get("x3", 6)

+        document.querySelector("#neg-x1").value = zustand.get("nx1", 0)

+        document.querySelector("#neg-x2").value = zustand.get("nx2", 0)

+        document.querySelector("#neg-x3").value = zustand.get("nx3", 0)

+        document.querySelector("#mod-x1").value = zustand.get("mx1", 2)

+        document.querySelector("#mod-x2").value = zustand.get("mx2", 2)

+        document.querySelector("#mod-x3").value = zustand.get("mx3", 2)

+

+        document.querySelector("#show-labels").checked = zustand.get("lbl", True)

+        document.querySelector("#show-coords").checked = zustand.get("crd", True)

+        document.querySelector("#punkte-input").value = zustand.get("txt", "")

+

+        block_hash_update = False

+    except Exception as e:

+        print(f"Fehler beim Laden des Permalinks: {e}")

+        block_hash_update = False

+

+

 def download_svg(event=None):

     global aktuelles_svg

-    if not aktuelles_svg:

-        return

-

-    # Über das JavaScript-Window-Objekt einen unsichtbaren Download-Link bauen

+    if not aktuelles_svg: return

     js_code = f"""

     var blob = new Blob([{repr(aktuelles_svg)}], {{type: "image/svg+xml;charset=utf-8"}});

     var url = URL.createObjectURL(blob);

@@ -67,9 +132,11 @@ def download_svg(event=None):

     document.body.removeChild(a);

     URL.revokeObjectURL(url);

     """

-    # Den JS-Code im Browser-Kontext ausführen

     window.eval(js_code)

-# Initialer Aufruf

+# --- START-SEQUENZ ---

+# 1. Prüfen, ob Voreinstellungen aus einem Link geladen werden müssen

+lade_zustand_aus_url()

+# 2. Erstmalig zeichnen

 zeichne_koordinatensystem()

\ No newline at end of file

@@ -6,7 +6,7 @@ from schraegbild.projektion import projiziere_3d_auf_2d

 class SchraegbildBuilder:

     def __init__(self, len_x1: int, len_x2: int, len_x3: int, neg_x1: int, neg_x2: int, neg_x3: int,

                  mod_x1: int = 2, mod_x2: int = 2, mod_x3: int = 2, skalierung: float = 40.0,

-                 punkte: list = None, show_labels: bool = True, show_coords: bool = True):

+                 punkte: list = None, kanten: list = None, show_labels: bool = True, show_coords: bool = True):

         self.len_x1 = len_x1

         self.len_x2 = len_x2

@@ -19,17 +19,17 @@ class SchraegbildBuilder:

         self.mod_x3 = mod_x3

         self.skalierung = skalierung

-        # NEU: Parameter für Punkte sichern

         self.punkte = punkte if punkte is not None else []

+        self.kanten = kanten if kanten is not None else []

         self.show_labels = show_labels

         self.show_coords = show_coords

+        # Ein schnelles Dictionary bauen, um Koordinaten via Name sofort zu finden

+        self.punkt_dict = {p["name"]: p["coords"] for p in self.punkte}

+

+        # [Rest der Viewport-Berechnung bleibt unverändert wie zuvor]

         kaestchen = skalierung / 2.0

         padding = 2 * skalierung

-

-        # --- Extrempunkte berechnen (Jetzt inkl. der eingetragenen Punkte!) ---

-        # Damit das Skript nicht abstürzt, wenn ein Lehrer einen Punkt außerhalb des Systems einträgt,

-        # beziehen wir die Punkte dynamisch in den Viewport mit ein:

         punkte_fuer_viewport = [

             projiziere_3d_auf_2d(self.len_x1 + 1, 0, 0, skalierung),

             projiziere_3d_auf_2d(-self.neg_x1, 0, 0, skalierung),

@@ -75,9 +75,8 @@ class SchraegbildBuilder:

     def generiere_koordinatensystem(self) -> str:

         dwg = self.dwg

-        # [Hier bleibt der komplette bisherige Code für Hintergrund, Achsen, Ticks, Beschriftungen unverändert]

+        # [Hier Achsen, Hintergrund & Ticks wie gewohnt zeichnen lassen...]

         dwg.add(dwg.rect(insert=(0, 0), size=(self.breite, self.hoehe), fill=self.gitter_pattern.get_paint_server()))

-

         p_ursprung = self.to_svg(0, 0, 0)

         dwg.add(dwg.line(p_ursprung, self.to_svg(self.len_x1 + 1, 0, 0), stroke='black', stroke_width=1.5,

                          marker_end=self.pfeil.get_funciri()))

@@ -136,29 +135,34 @@ class SchraegbildBuilder:

         dwg.add(dwg.text("x₃", insert=(p_x3_label[0] - 5, p_x3_label[1] - 15),

                          style="font-family:Arial; font-size:14px; font-weight:bold;"))

-        # --- AB HIER NEU: PUNKTE ZEICHNEN ---

+        # --- NEU: ERST DIE KANTEN ZEICHNEN ---

+        for k in self.kanten:

+            if k["von"] in self.punkt_dict and k["nach"] in self.punkt_dict:

+                v_x, v_y = self.to_svg(*self.punkt_dict[k["von"]])

+                n_x, n_y = self.to_svg(*self.punkt_dict[k["nach"]])

+

+                if k["style"] == "sichtbar":

+                    # Durchgezogene, blaue Schulbuchkante

+                    dwg.add(dwg.line((v_x, v_y), (n_x, n_y), stroke='#0055ff', stroke_width=2))

+                else:

+                    # Gestrichelte Kante für verdeckte Geometrien

+                    dwg.add(

+                        dwg.line((v_x, v_y), (n_x, n_y), stroke='#0055ff', stroke_width=1.5, stroke_dasharray='4,4'))

+

+        # --- DANN DIE PUNKTE DARÜBER LEGEN ---

         for p in self.punkte:

             x1, x2, x3 = p["coords"]

             pt = self.to_svg(x1, x2, x3)

-

-            # Punktkreuz zeichnen (Größe: 4px Armlänge, rot hervorgehoben für Fokus)

             dwg.add(dwg.line((pt[0] - 4, pt[1] - 4), (pt[0] + 4, pt[1] + 4), stroke='red', stroke_width=1.5))

             dwg.add(dwg.line((pt[0] - 4, pt[1] + 4), (pt[0] + 4, pt[1] - 4), stroke='red', stroke_width=1.5))

-            # Beschriftungslogik auswerten

             if self.show_labels:

                 if self.show_coords:

-                    # Format: A(2|4|3) - wir formatieren eventuelle Floats sauber weg, wenn es Ganzzahlen sind

                     fmt_coords = f"({int(x1) if x1.is_integer() else x1}|{int(x2) if x2.is_integer() else x2}|{int(x3) if x3.is_integer() else x3})"

                     label_text = f"{p['name']}{fmt_coords}"

                 else:

-                    # Nur Name: A

                     label_text = p["name"]

-

-                dwg.add(dwg.text(

-                    label_text,

-                    insert=(pt[0] + 6, pt[1] - 6),

-                    style="font-family:Arial, sans-serif; font-size:13px; font-weight:bold; fill:red;"

-                ))

+                dwg.add(dwg.text(label_text, insert=(pt[0] + 6, pt[1] - 6),

+                                 style="font-family:Arial, sans-serif; font-size:13px; font-weight:bold; fill:red;"))

         return dwg.tostring()

\ No newline at end of file