new dynamic bubble

Author: yanncloud

src/components/learning-path/LearningPathMap.tsx

@@ -659,46 +659,73 @@ export function LearningPathMap() {
               {/* Sprechblase mit Button (bei Hervorhebung) */}
               {activeBubble === i && (
                 <g onClick={e => e.stopPropagation()}>
-                  <polygon
-                    points={`${cx},${cy + radius - 5} ${cx - 20},${cy + radius + 10.49} ${cx + 20},${cy + radius + 10.49}`}
-                    fill="rgba(255,255,255,0.9)"
-                    className="filter drop-shadow-md"
-                  />
-                  <foreignObject
-                    x="10%"
-                    y={cy + radius + 10}
-                    width="80%"
-                    height={bubbleHeight + 4} // Hier wird die dynamische Höhe genutzt
-                  >
-                    <div
-                      ref={bubbleRef} // Hier wird der Ref gesetzt, damit wir das Element messen können
-                      className="bg-white bg-opacity-90 p-4 rounded-3xl shadow-md text-center text-sm z-100"
-                    >
-                      <p className="font-bold mt-3 text-lg">
-                        {el.source.title}
-                      </p>
-                      <button
-                        className="bg-blue-500 text-white py-2 px-4 rounded-full mt-2 hover:bg-blue-600 transition-colors"
-                        onClick={e => {
-                          e.stopPropagation()
-                          setActiveBubble(null)
-                          handleLearningPathStepClick(getClickParams())
-                        }}
-                      >
-                        {el.solvedPercentage > 0
-                          ? el.source.type === 'challenge'
-                            ? 'Challenge weiter'
-                            : el.source.type === 'video'
-                              ? 'Video weiter'
-                              : 'Aufgabe weiter'
-                          : el.source.type === 'challenge'
-                            ? 'Challenge starten'
-                            : el.source.type === 'video'
-                              ? 'Video starten'
-                              : 'Aufgabe starten'}
-                      </button>
-                    </div>
-                  </foreignObject>
+                  {(() => {
+                    const svgWidth = 375 // Breite des viewBox
+                    const bubbleWidth = svgWidth * 0.8 // 80% der Breite (ca. 300px)
+                    const margin = 15 // 15px Abstand zu beiden Rändern
+                    const minX = margin // Minimaler x-Wert für die Bubble
+                    const maxX = svgWidth - bubbleWidth - margin // Maximaler x-Wert
+                    let offsetX = cx - bubbleWidth / 2 // Bubble zentriert zum Knoten
+
+                    // Clamp: Sicherstellen, dass die Bubble nicht außerhalb des Bereichs gerät
+                    if (offsetX < minX) offsetX = minX
+                    if (offsetX > maxX) offsetX = maxX
+
+                    return (
+                      <>
+                        {/* Pfeil (Polygon) */}
+                        <polygon
+                          points={`
+              ${cx},${cy + radius - 5}
+              ${cx - 20},${cy + radius + 15.6}
+              ${cx + 20},${cy + radius + 15.6}
+            `}
+                          fill="rgba(255,255,255,0.9)"
+                          className="filter drop-shadow-md"
+                        />
+
+                        {/* Bubble als foreignObject mit fester Breite und dynamischem offsetX */}
+                        <foreignObject
+                          x={offsetX}
+                          y={cy + radius + 15}
+                          width={bubbleWidth}
+                          height={bubbleHeight + 4}
+                        >
+                          <div
+                            ref={bubbleRef}
+                            className="h-full flex flex-col items-center justify-center
+                           bg-white bg-opacity-90 p-4 rounded-3xl shadow-md 
+                            text-center text-sm z-100"
+                          >
+                            <p className="font-bold text-lg">
+                              {el.source.title}
+                            </p>
+                            <button
+                              className="bg-blue-500 text-white py-2 px-4 rounded-full mt-2
+                             hover:bg-blue-600 transition-colors"
+                              onClick={e => {
+                                e.stopPropagation()
+                                setActiveBubble(null)
+                                handleLearningPathStepClick(getClickParams())
+                              }}
+                            >
+                              {el.solvedPercentage > 0
+                                ? el.source.type === 'challenge'
+                                  ? 'Challenge weiter'
+                                  : el.source.type === 'video'
+                                    ? 'Video weiter'
+                                    : 'Aufgabe weiter'
+                                : el.source.type === 'challenge'
+                                  ? 'Challenge starten'
+                                  : el.source.type === 'video'
+                                    ? 'Video starten'
+                                    : 'Aufgabe starten'}
+                            </button>
+                          </div>
+                        </foreignObject>
+                      </>
+                    )
+                  })()}
                 </g>
               )}
 
@@ -815,7 +842,8 @@ export function LearningPathMap() {
                   cx={cx}
                   cy={cy}
                   r={radius - 2}
-                  className="fill-gray-200/60 pointer-events-none"
+                  //className="fill-gray-200/60 pointer-events-none"
+                  className="fill-[#DADADA]/80 pointer-events-none"
                 />
               )}
               {/* Fortschrittskreis (äußerer Kreis mit grünem Rand) */}