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

Files changed (521) hide show

{pyegeria-5.3.4.4.dev5 → pyegeria-5.3.4.4.dev7}/pyegeria/mermaid_utilities.py RENAMED Viewed

@@ -232,6 +232,7 @@ def construct_mermaid_html(mermaid_str: str) -> str:
     title_label, guid, mermaid_code = parse_mermaid_code(mermaid_str)
     graph_id = title_label.replace(" ", "_")
     # Construct the HTML content with Mermaid.js initialization and zoom/pan support
     mermaid_html = f"""
     <!DOCTYPE html>
@@ -239,118 +240,143 @@ 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>Interactive Mermaid Graph</title>
-        <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
+        <title>Mermaid Diagram</title>
+        <!-- Load Mermaid.js -->
+        <script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js"></script>
+        <style>
+            body {{
+                font-family: Arial, sans-serif;
+                margin: 0;
+                padding: 0;
+                background-color: #f4f4f4;
+            }}
+            .diagram-container {{
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                padding: 20px;
+                background-color: white;
+                border: 1px solid #ddd;
+                border-radius: 8px;
+                margin: 20px;
+                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+                max-width: 800px;
+                margin: 30px auto;
+            }}
+            .diagram-header {{
+                margin-bottom: 20px;
+                font-size: 1.8em;
+                font-weight: bold;
+                color: #007acc;
+                text-align: center;
+            }}
+            .pan-zoom-container {{
+                position: relative;
+                width: 100%;
+                height: 500px;
+                overflow: hidden;
+                background-color: #f9f9f9;
+            }}
+            .pan-zoom-content {{
+                position: absolute;
+                transform-origin: 0 0;
+                cursor: grab;
+            }}
+            .pan-zoom-content:active {{
+                cursor: grabbing;
+            }}
+        </style>
+    </head>
+    <body>
+        <div class="diagram-header">
+            <h3 class='diagram-header'>{title_label}</h3>
+            {guid}
+        </div>
+        <!-- Diagram with Header -->
+        <div class="diagram-container">
+            <div class="pan-zoom-container">
+                <div id="{graph_id}" class="mermaid pan-zoom-content">{mermaid_code}</div>
+            </div>
+        </div>
         <script>
-            // Initialize Mermaid.js
+            // Initialize Mermaid.js and enable pan/zoom
             document.addEventListener("DOMContentLoaded", function() {{
                 const graphContainer = document.getElementById("{graph_id}");
-                // Inject Mermaid code into the container
-                graphContainer.innerHTML = `{mermaid_code}`;
-                // Manually render the Mermaid graph
-                window.mermaid?.run({{ querySelector: "#{graph_id}" }});
-            }});
-            // Enable panning and zooming
-            document.addEventListener("DOMContentLoaded", function() {{
-                const container = document.querySelector('.pan-zoom-container');
-                const content = document.querySelector('.pan-zoom-content');
+                // Render the Mermaid diagram
+                mermaid.initialize({{ startOnLoad: true }});
+                mermaid.init(undefined, graphContainer);
-                let scale = 1;
-                let panX = 0;
-                let panY = 0;
+                // Enable 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;
-                // Mouse wheel zoom with cursor as focal point
-                container.addEventListener('wheel', function(event) {{
+                // Mouse wheel zoom
+                container.addEventListener("wheel", function(event) {{
                     event.preventDefault();
                     const zoomSpeed = 0.1;
-                    const zoomDelta = event.deltaY > 0 ? -zoomSpeed : zoomSpeed;
                     const previousScale = scale;
-                    // Clamp zoom level between 50% and 400%
-                    scale = Math.min(Math.max(0.5, scale + zoomDelta), 4);
+                    // Update zoom level
+                    if (event.deltaY < 0) {{
+                        scale = Math.min(scale + zoomSpeed, 4); // Zoom in
+                    }} else {{
+                        scale = Math.max(scale - zoomSpeed, 0.5); // Zoom out
+                    }}
-                    // Calculate the focal point for zoom using mouse position
+                    // Adjust offsets for smooth zoom behavior
                     const rect = content.getBoundingClientRect();
                     const offsetX = event.clientX - rect.left;
                     const offsetY = event.clientY - rect.top;
-                    // Adjust pan values to focus zoom on cursor
                     panX -= (offsetX / previousScale - offsetX / scale);
                     panY -= (offsetY / previousScale - offsetY / scale);
-                    // Apply transformations
-                    content.style.transform = `translate(${panX}px, ${panY}px) scale(${scale})`;
+                    // Apply zoom and pan
+                    content.style.transform = `translate(${{panX}}px, ${{panY}}px) scale(${{scale}})`;
                 }});
-                // Handle panning with mouse drag
-                container.addEventListener('mousedown', function(event) {{
+                // 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) {{
+                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})`;
+                    // Apply panning
+                    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";
                 }});
             }});
         </script>
-        <style>
-            body {{
-                margin: 0;
-                padding: 0;
-                font-family: Arial, sans-serif;
-            }}
-            .pan-zoom-container {{
-                overflow: hidden;
-                position: relative;
-                width: 100%;
-                height: 100vh;
-                background-color: #f4f4f4;
-            }}
-            .pan-zoom-content {{
-                display: inline-block;
-                transform-origin: 0 0;
-                cursor: grab;
-            }}
-            .pan-zoom-content:active {{
-                cursor: grabbing;
-            }}
-        </style>
-    </head>
-    <body>
-        <title>{title_label}</title>
-        <h3>{title_label}</h3>
-        GUID : {guid}
-        <div class="pan-zoom-container">
-            <div id="{graph_id}" class="pan-zoom-content mermaid">
-                <!-- Placeholder for Mermaid.js -->
-            </div>
-        </div>
     </body>
     </html>
     """
     return mermaid_html

@@ -1,6 +1,6 @@
 Metadata-Version: 2.3
 Name: pyegeria
-Version: 5.3.4.4.dev5
+Version: 5.3.4.4.dev7
 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-dev5"
+version = "5.3.4.4-dev7"
 license = 'Apache 2.0'
 authors = ["Dan Wolfson <dan.wolfson@pdr-associates.com>"]

pyegeria 5.3.4.4.dev5__tar.gz → 5.3.4.4.dev7__tar.gz

pyegeria 5.3.4.4.dev5tar.gz → 5.3.4.4.dev7tar.gz