PyPI - pyegeria - Versions diffs - 5.3.4.4.dev8__tar.gz → 5.3.4.6__tar.gz - Mend

@@ -233,169 +233,107 @@ def construct_mermaid_html(mermaid_str: str) -> str:
     graph_id = title_label.replace(" ", "_")
     escaped_header = html.escape(title_label) if title_label else ""  # Sanitize the header safely
+    escaped_mermaid_code = html.escape(mermaid_code)
-    header_html = f"<h2 class='diagram-header'>{escaped_header}</h2>\nGUID: {guid}" if title_label else ""
+    header_html = f"<h2 class='diagram-header'>{escaped_header}</h2>\nGUID: {guid}" if {title_label} else ""
     # Construct the HTML content with Mermaid.js initialization and zoom/pan support
     mermaid_html = f"""
-    <!DOCTYPE html>
-    <html lang="en">
-    <head>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>Mermaid Diagram with Centered Pan and Zoom</title>
-        <!-- Load Mermaid.js -->
-        <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
-        <style>
-            body {{
-                font-family: Arial, sans-serif;
-                background-color: #f4f4f4;
-                margin: 0;
-                padding: 0;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                height: 100vh;
-            }}
-            .diagram-container {{
-                width: 90%;
-                max-width: 800px;
-                padding: 20px;
-                border: 1px solid #ddd;
-                border-radius: 12px;
-                background-color: white;
-                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-                text-align: center;
-                position: relative;
-            }}
-            .diagram-header {{
-                margin-bottom: 20px;
-                font-size: 1.8rem;
-                font-weight: bold;
-                color: #007acc;
-            }}
-            .pan-zoom-container {{
-                position: relative;
-                width: 100%;
-                height: 500px;
-                overflow: hidden;
-                border: 1px solid #ccc;
-                background-color: #f9f9f9;
-                cursor: grab;
-            }}
-            .pan-zoom-content {{
-                position: absolute;
-                transform-origin: center;
-                cursor: grab;
-            }}
-            .pan-zoom-content:active {{
-                cursor: grabbing;
-            }}
-        </style>
-    </head>
-    <body>
-        <div class="diagram-container">
-            {header_html}
-            <div class="pan-zoom-container">
-                <div id="{graph_id}" class="mermaid pan-zoom-content">
-                    {mermaid_code}
-                </div>
+    <div class="diagram-container" style="width: 90%; max-width: 800px; margin: auto; padding: 20px; background: white; border: 1px solid #ddd; border-radius: 12px; position: relative;">
+        {header_html}
+        <div class="pan-zoom-container" style="width: 100%; height: 500px; overflow: hidden; position: relative; background: #f9f9f9; border: 1px solid #ccc; cursor: grab;">
+            <div id="{graph_id}" class="mermaid pan-zoom-content" style="position: absolute; transform-origin: 0 0; cursor: grab;">
+                {escaped_mermaid_code}
             </div>
         </div>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+    <script>
+        // Initialize Mermaid.js and set up pan/zoom
+        mermaid.initialize({{ startOnLoad: true }});
+        const container = document.querySelector('.pan-zoom-container');
+        const content = document.querySelector('.pan-zoom-content');
+        const rect = content.getBoundingClientRect();
+        let scale = 1; // Current zoom level
+        let panX = 0;  // X-axis pan offset
+        let panY = 0;  // Y-axis pan offset
+        let isDragging = false;
+        let startX, startY;
+        // Helper: Apply transformations
+        const applyTransform = () => {{
+            content.style.transform = `translate(${{panX}}px, ${{panY}}px) scale(${{scale}})`;
+        }};
+        // Helper: Center the diagram and fit it to the container
+        const centerAndFitDiagram = () => {{
+            const containerRect = container.getBoundingClientRect();
+            const rect = content.getBoundingClientRect();
+            scale = Math.min(
+                containerRect.width / rect.width,
+                containerRect.height / rect.height
+            );
+            panX = (containerRect.width - rect.width * scale) / 2;
+            panY = (containerRect.height - rect.height * scale) / 2;
+            applyTransform();
+            console.log("Diagram centered and fitted.");
+        }};
+        // Add zoom functionality
+        container.addEventListener('wheel', function(event) {{
+            event.preventDefault();
+            const zoomSpeed = 0.1;
+            const previousScale = scale;
+            if (event.deltaY < 0) {{
+                scale = Math.min(scale + zoomSpeed, 4);
+            }} else {{
+                scale = Math.max(scale - zoomSpeed, 0.5);
+            }}
-        <script>
-            // Initialize Mermaid.js and make the graph pan/zoom enabled
-            document.addEventListener("DOMContentLoaded", function() {{
-                // Initialize Mermaid.js
-                console.log("Initializing Mermaid...");
-                mermaid.initialize({{ startOnLoad: true }});
-                // After Mermaid.js renders the diagram, initialize pan/zoom functionality
-                const container = document.querySelector('.pan-zoom-container');
-                const content = document.querySelector('.pan-zoom-content');
-                let scale = 1; // Zoom level
-                let panX = 0;  // X-axis pan
-                let panY = 0;  // Y-axis pan
-                let isDragging = false;
-                let startX, startY;
-                // Centering logic for zoom behavior
-                const zoomToCenter = (event, deltaZoom) => {{
-                    const rect = content.getBoundingClientRect();
-                    // Get the center point of the container
-                    const containerCenterX = container.clientWidth / 2;
-                    const containerCenterY = container.clientHeight / 2;
-                    // Calculate offset of the content relative to the container center
-                    const offsetX = containerCenterX - (rect.left + rect.width / 2);
-                    const offsetY = containerCenterY - (rect.top + rect.height / 2);
-                    // Adjust pan values based on the zoom delta
-                    panX += offsetX * deltaZoom;
-                    panY += offsetY * deltaZoom;
-                }};
-                // Mouse wheel zoom functionality
-                container.addEventListener('wheel', function(event) {{
-                    event.preventDefault();
-                    const zoomSpeed = 0.1;
-                    const previousScale = scale;
-                    // Increase or decrease scale depending on the scroll direction
-                    if (event.deltaY < 0) {{
-                        scale = Math.min(scale + zoomSpeed, 4); // Limit zoom-in
-                    }} else {{
-                        scale = Math.max(scale - zoomSpeed, 0.5); // Limit zoom-out
-                    }}
-                    // Compute the zoom delta
-                    const deltaZoom = scale / previousScale - 1;
-                    // Center the zoom on the diagram
-                    zoomToCenter(event, deltaZoom);
-                    // Apply transformations
-                    content.style.transform = `translate(${{panX}}px, ${{panY}}px) scale(${{scale}})`;
-                }});
-                // Drag-to-pan functionality
-                container.addEventListener('mousedown', function(event) {{
-                    isDragging = true;
-                    startX = event.clientX - panX;
-                    startY = event.clientY - panY;
-                    container.style.cursor = "grabbing";
-                }});
-                container.addEventListener('mousemove', function(event) {{
-                    if (!isDragging) return;
-                    panX = event.clientX - startX;
-                    panY = event.clientY - startY;
-                    // Apply transformations
-                    content.style.transform = `translate(${{panX}}px, ${{panY}}px) scale(${{scale}})`;
-                }});
-                container.addEventListener('mouseup', function() {{
-                    isDragging = false;
-                    container.style.cursor = "grab";
-                }});
-                container.addEventListener('mouseleave', function() {{
-                    isDragging = false;
-                    container.style.cursor = "grab";
-                }});
-                console.log("Pan and zoom enabled");
-            }});
-        </script>
-    </body>
-    </html>
+            const zoomRatio = scale / previousScale;
+            panX -= (event.clientX - container.getBoundingClientRect().left) * (zoomRatio - 1);
+            panY -= (event.clientY - container.getBoundingClientRect().top) * (zoomRatio - 1);
-    """
+            applyTransform();
+        }});
+        // Add drag functionality for panning
+        container.addEventListener('mousedown', function(event) {{
+            isDragging = true;
+            startX = event.clientX - panX;
+            startY = event.clientY - panY;
+            container.style.cursor = "grabbing";
+        }});
+        container.addEventListener('mousemove', function(event) {{
+            if (!isDragging) return;
+            panX = event.clientX - startX;
+            panY = event.clientY - startY;
+            applyTransform();
+        }});
+        container.addEventListener('mouseup', function() {{
+            isDragging = false;
+            container.style.cursor = "grab";
+        }});
+        container.addEventListener('mouseleave', function() {{
+            isDragging = false;
+            container.style.cursor = "grab";
+        }});
+        // Center diagram after rendering by Mermaid
+        setTimeout(centerAndFitDiagram, 200);
+    </script>
+"""
     return mermaid_html

@@ -1,6 +1,6 @@
 Metadata-Version: 2.3
 Name: pyegeria
-Version: 5.3.4.4.dev8
+Version: 5.3.4.6
 Summary: A python client for Egeria
 License: Apache 2.0
 Keywords: egeria,metadata,governance

pyegeria 5.3.4.4.dev8__tar.gz → 5.3.4.6__tar.gz

pyegeria 5.3.4.4.dev8tar.gz → 5.3.4.6tar.gz