PyPI - pyegeria - Versions diffs - 5.3.4.5__py3-none-any.whl → 5.3.4.7__py3-none-any.whl - Mend

pyegeria 5.3.4.5py3-none-any.whl → 5.3.4.7py3-none-any.whl

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

pyegeria/mermaid_utilities.py +167 -113
pyegeria/test_m.html +131 -181
pyegeria/test_m1.html +273 -0
pyegeria/test_mer.ipynb +596 -0
{pyegeria-5.3.4.5.dist-info → pyegeria-5.3.4.7.dist-info}/METADATA +1 -1
{pyegeria-5.3.4.5.dist-info → pyegeria-5.3.4.7.dist-info}/RECORD +9 -7
{pyegeria-5.3.4.5.dist-info → pyegeria-5.3.4.7.dist-info}/LICENSE +0 -0
{pyegeria-5.3.4.5.dist-info → pyegeria-5.3.4.7.dist-info}/WHEEL +0 -0
{pyegeria-5.3.4.5.dist-info → pyegeria-5.3.4.7.dist-info}/entry_points.txt +0 -0

pyegeria/mermaid_utilities.py CHANGED Viewed

@@ -233,158 +233,116 @@ 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 ""
+    # Header HTML (display only if header exists)
+    header_html = f"""
+        <h2 style="text-align: center; color: #007acc; margin-bottom: 16px;">
+            {escaped_header}
+        </h2>
+        """ 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: 0 0;
-                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 id="{graph_id}-container" 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;">
+                {escaped_mermaid_code}
             </div>
         </div>
+    </div>
+    <script>
+        (function() {{
+            // Check if Mermaid.js is already loaded; load if not
+            if (typeof mermaid === "undefined") {{
+                const script = document.createElement('script');
+                script.src = "https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js";
+                script.onload = () => initializeMermaid();
+                document.head.appendChild(script);
+            }} else {{
+                initializeMermaid();
+            }}
-        <script>
-            document.addEventListener("DOMContentLoaded", function() {{
-                // Initialize Mermaid.js
-                console.log("Initializing Mermaid...");
+            function initializeMermaid() {{
+                // Re-render the Mermaid chart
                 mermaid.initialize({{ startOnLoad: true }});
+                mermaid.init(undefined, document.querySelector("#{graph_id}"));
+                // Add interactivity for pan and zoom
                 const container = document.querySelector('.pan-zoom-container');
                 const content = document.querySelector('.pan-zoom-content');
-                let rect;      // Bounding box of the rendered diagram
-                let scale = 1; // Current zoom level
-                let panX = 0;  // Pan offset in X direction
-                let panY = 0;  // Pan offset in Y direction
+                let scale = 1;  // Current zoom level
+                let panX = 0;   // X-axis pan
+                let panY = 0;   // Y-axis pan
                 let isDragging = false;
                 let startX, startY;
-                // Helper: Apply transformations
+                // Apply Transformations
                 const applyTransform = () => {{
                     content.style.transform = `translate(${{panX}}px, ${{panY}}px) scale(${{scale}})`;
                 }};
-                // Helper: Center the diagram and fit it to the container
+                // Center Diagram on Load
                 const centerAndFitDiagram = () => {{
-                    rect = content.getBoundingClientRect();
                     const containerRect = container.getBoundingClientRect();
+                    const rect = content.getBoundingClientRect();
-                    // Calculate the required scale to fit the diagram
                     scale = Math.min(
                         containerRect.width / rect.width,
                         containerRect.height / rect.height
                     );
-                    // Adjust pan to center the diagram
                     panX = (containerRect.width - rect.width * scale) / 2;
                     panY = (containerRect.height - rect.height * scale) / 2;
                     applyTransform();
-                    console.log("Diagram centered and fitted to container.");
                 }};
-                // Add pan/zoom functionality
-                const zoomCenteredOnDiagram = (event, deltaZoom) => {{
-                    rect = content.getBoundingClientRect();
-                    const containerRect = container.getBoundingClientRect();
+                setTimeout(centerAndFitDiagram, 200); // Allow rendering time
-                    // Center of the diagram
-                    const diagramCenterX = rect.left + rect.width / 2;
-                    const diagramCenterY = rect.top + rect.height / 2;
-                    const zoomX = (diagramCenterX - containerRect.left) * deltaZoom;
-                    const zoomY = (diagramCenterY - containerRect.top) * deltaZoom;
-                    panX -= zoomX;
-                    panY -= zoomY;
-                }};
-                container.addEventListener('wheel', function(event) {{
+                // Enable Mouse-Wheel Zoom
+                container.addEventListener('wheel', (event) => {{
                     event.preventDefault();
                     const zoomSpeed = 0.1;
                     const previousScale = scale;
-                    // Zoom in or out
                     if (event.deltaY < 0) {{
-                        scale = Math.min(scale + zoomSpeed, 4); // Limit zoom-in
+                        scale = Math.min(scale + zoomSpeed, 4);
                     }} else {{
-                        scale = Math.max(scale - zoomSpeed, 0.5); // Limit zoom-out
+                        scale = Math.max(scale - zoomSpeed, 0.5);
                     }}
-                    // Calculate deltaZoom and adjust pan
-                    const deltaZoom = scale / previousScale - 1;
-                    zoomCenteredOnDiagram(event, deltaZoom);
+                    const zoomRatio = scale / previousScale;
+                    const clientRect = container.getBoundingClientRect();
+                    panX -= (event.clientX - clientRect.left) * (zoomRatio - 1);
+                    panY -= (event.clientY - clientRect.top) * (zoomRatio - 1);
                     applyTransform();
                 }});
-                container.addEventListener('mousedown', function(event) {{
+                // Enable Drag-to-Pan
+                container.addEventListener('mousedown', (event) => {{
                     isDragging = true;
                     startX = event.clientX - panX;
                     startY = event.clientY - panY;
                     container.style.cursor = "grabbing";
                 }});
-                container.addEventListener('mousemove', function(event) {{
+                container.addEventListener('mousemove', (event) => {{
                     if (!isDragging) return;
                     panX = event.clientX - startX;
@@ -393,27 +351,123 @@ def construct_mermaid_html(mermaid_str: str) -> str:
                     applyTransform();
                 }});
-                container.addEventListener('mouseup', function() {{
+                container.addEventListener('mouseup', () => {{
                     isDragging = false;
                     container.style.cursor = "grab";
                 }});
-                container.addEventListener('mouseleave', function() {{
+                container.addEventListener('mouseleave', () => {{
                     isDragging = false;
                     container.style.cursor = "grab";
                 }});
+            }}
+        }})();
+    </script>
-                // Ensure Mermaid renders the diagram, then fit and center it
-                setTimeout(centerAndFitDiagram, 100); // Delay to ensure Mermaid.js rendering is complete
-            }});
-        </script>
-    </body>
-    </html>
-"""
+    """
     return mermaid_html
+    # mermaid_html = f"""
+    #     <h2 style="text-align: center; color: #007acc; margin-bottom: 16px;">
+    #         {escaped_header}
+    #     </h2>
+#         """ if header else ""
+# #     <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);
+# #             }}
+# #
+# #             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

pyegeria 5.3.4.5__py3-none-any.whl → 5.3.4.7__py3-none-any.whl

pyegeria 5.3.4.5py3-none-any.whl → 5.3.4.7py3-none-any.whl