PyPI - pyegeria - Versions diffs - 5.3.4.4.dev7__tar.gz → 5.3.4.4.dev8__tar.gz - Mend

@@ -10,7 +10,7 @@ A running Egeria environment is needed to run these functions.
 These functions have been tested in a Jupyter notebook - but may work in other environments.
 """
+import html
 import os
 import time
@@ -232,6 +232,9 @@ def construct_mermaid_html(mermaid_str: str) -> str:
     title_label, guid, mermaid_code = parse_mermaid_code(mermaid_str)
     graph_id = title_label.replace(" ", "_")
+    escaped_header = html.escape(title_label) if title_label else ""  # Sanitize the header safely
+    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"""
@@ -240,46 +243,49 @@ def construct_mermaid_html(mermaid_str: str) -> str:
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>Mermaid Diagram</title>
+        <title>Mermaid Diagram with Centered Pan and Zoom</title>
         <!-- Load Mermaid.js -->
-        <script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js"></script>
+        <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;
-                background-color: #f4f4f4;
-            }}
-            .diagram-container {{
                 display: flex;
-                flex-direction: column;
+                justify-content: center;
                 align-items: center;
+                height: 100vh;
+            }}
+            .diagram-container {{
+                width: 90%;
+                max-width: 800px;
                 padding: 20px;
-                background-color: white;
                 border: 1px solid #ddd;
-                border-radius: 8px;
-                margin: 20px;
+                border-radius: 12px;
+                background-color: white;
                 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-                max-width: 800px;
-                margin: 30px auto;
+                text-align: center;
+                position: relative;
             }}
             .diagram-header {{
                 margin-bottom: 20px;
-                font-size: 1.8em;
+                font-size: 1.8rem;
                 font-weight: bold;
                 color: #007acc;
-                text-align: center;
             }}
             .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: 0 0;
+                transform-origin: center;
                 cursor: grab;
             }}
             .pan-zoom-content:active {{
@@ -288,30 +294,25 @@ def construct_mermaid_html(mermaid_str: str) -> str:
         </style>
     </head>
     <body>
-        <div class="diagram-header">
-            <h3 class='diagram-header'>{title_label}</h3>
-            {guid}
-        </div>
-        <!-- Diagram with Header -->
         <div class="diagram-container">
+            {header_html}
             <div class="pan-zoom-container">
-                <div id="{graph_id}" class="mermaid pan-zoom-content">{mermaid_code}</div>
+                <div id="{graph_id}" class="mermaid pan-zoom-content">
+                    {mermaid_code}
+                </div>
             </div>
         </div>
         <script>
-            // Initialize Mermaid.js and enable pan/zoom
+            // Initialize Mermaid.js and make the graph pan/zoom enabled
             document.addEventListener("DOMContentLoaded", function() {{
-                const graphContainer = document.getElementById("{graph_id}");
-                // Render the Mermaid diagram
+                // Initialize Mermaid.js
+                console.log("Initializing Mermaid...");
                 mermaid.initialize({{ startOnLoad: true }});
-                mermaid.init(undefined, graphContainer);
-                // Enable pan/zoom functionality
-                const container = document.querySelector(".pan-zoom-container");
-                const content = document.querySelector(".pan-zoom-content");
+                // 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
@@ -319,60 +320,79 @@ def construct_mermaid_html(mermaid_str: str) -> str:
                 let isDragging = false;
                 let startX, startY;
-                // Mouse wheel zoom
-                container.addEventListener("wheel", function(event) {{
+                // 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;
-                    // Update zoom level
+                    // Increase or decrease scale depending on the scroll direction
                     if (event.deltaY < 0) {{
-                        scale = Math.min(scale + zoomSpeed, 4); // Zoom in
+                        scale = Math.min(scale + zoomSpeed, 4); // Limit zoom-in
                     }} else {{
-                        scale = Math.max(scale - zoomSpeed, 0.5); // Zoom out
+                        scale = Math.max(scale - zoomSpeed, 0.5); // Limit zoom-out
                     }}
-                    // Adjust offsets for smooth zoom behavior
-                    const rect = content.getBoundingClientRect();
-                    const offsetX = event.clientX - rect.left;
-                    const offsetY = event.clientY - rect.top;
-                    panX -= (offsetX / previousScale - offsetX / scale);
-                    panY -= (offsetY / previousScale - offsetY / scale);
+                    // Compute the zoom delta
+                    const deltaZoom = scale / previousScale - 1;
-                    // Apply zoom and pan
+                    // 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) {{
+                container.addEventListener('mousedown', function(event) {{
                     isDragging = true;
                     startX = event.clientX - panX;
                     startY = event.clientY - panY;
                     container.style.cursor = "grabbing";
                 }});
-                container.addEventListener("mousemove", function(event) {{
+                container.addEventListener('mousemove', function(event) {{
                     if (!isDragging) return;
                     panX = event.clientX - startX;
                     panY = event.clientY - startY;
-                    // Apply panning
+                    // Apply transformations
                     content.style.transform = `translate(${{panX}}px, ${{panY}}px) scale(${{scale}})`;
                 }});
-                container.addEventListener("mouseup", function() {{
+                container.addEventListener('mouseup', function() {{
                     isDragging = false;
                     container.style.cursor = "grab";
                 }});
-                container.addEventListener("mouseleave", function() {{
+                container.addEventListener('mouseleave', function() {{
                     isDragging = false;
                     container.style.cursor = "grab";
                 }});
+                console.log("Pan and zoom enabled");
             }});
         </script>
     </body>
     </html>
     """

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

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "pyegeria"
-version = "5.3.4.4-dev7"
+version = "5.3.4.4-dev8"
 license = 'Apache 2.0'
 authors = ["Dan Wolfson <dan.wolfson@pdr-associates.com>"]

pyegeria 5.3.4.4.dev7__tar.gz → 5.3.4.4.dev8__tar.gz

pyegeria 5.3.4.4.dev7tar.gz → 5.3.4.4.dev8tar.gz