pyegeria 5.3.4.5__py3-none-any.whl → 5.3.4.7__py3-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.
@@ -233,158 +233,116 @@ def construct_mermaid_html(mermaid_str: str) -> str:
233
233
 
234
234
  graph_id = title_label.replace(" ", "_")
235
235
  escaped_header = html.escape(title_label) if title_label else "" # Sanitize the header safely
236
+ escaped_mermaid_code = html.escape(mermaid_code)
236
237
 
237
- header_html = f"<h2 class='diagram-header'>{escaped_header}</h2>\nGUID: {guid}" if title_label else ""
238
+ # header_html = f"<h2 class='diagram-header'>{escaped_header}</h2>\nGUID: {guid}" if title_label else ""
239
+ # Header HTML (display only if header exists)
240
+ header_html = f"""
241
+ <h2 style="text-align: center; color: #007acc; margin-bottom: 16px;">
242
+ {escaped_header}
243
+ </h2>
244
+ """ if title_label else ""
238
245
 
239
246
  # Construct the HTML content with Mermaid.js initialization and zoom/pan support
247
+
248
+
240
249
  mermaid_html = f"""
241
- <!DOCTYPE html>
242
- <html lang="en">
243
- <head>
244
- <meta charset="UTF-8">
245
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
246
- <title>Mermaid Diagram with Centered Pan and Zoom</title>
247
- <!-- Load Mermaid.js -->
248
- <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
249
- <style>
250
- body {{
251
- font-family: Arial, sans-serif;
252
- background-color: #f4f4f4;
253
- margin: 0;
254
- padding: 0;
255
- display: flex;
256
- justify-content: center;
257
- align-items: center;
258
- height: 100vh;
259
- }}
260
- .diagram-container {{
261
- width: 90%;
262
- max-width: 800px;
263
- padding: 20px;
264
- border: 1px solid #ddd;
265
- border-radius: 12px;
266
- background-color: white;
267
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
268
- text-align: center;
269
- position: relative;
270
- }}
271
- .diagram-header {{
272
- margin-bottom: 20px;
273
- font-size: 1.8rem;
274
- font-weight: bold;
275
- color: #007acc;
276
- }}
277
- .pan-zoom-container {{
278
- position: relative;
279
- width: 100%;
280
- height: 500px;
281
- overflow: hidden;
282
- border: 1px solid #ccc;
283
- background-color: #f9f9f9;
284
- cursor: grab;
285
- }}
286
- .pan-zoom-content {{
287
- position: absolute;
288
- transform-origin: 0 0;
289
- cursor: grab;
290
- }}
291
- .pan-zoom-content:active {{
292
- cursor: grabbing;
293
- }}
294
- </style>
295
- </head>
296
- <body>
297
- <div class="diagram-container">
298
- {header_html}
299
- <div class="pan-zoom-container">
300
- <div id="{graph_id}" class="mermaid pan-zoom-content">
301
- {mermaid_code}
302
- </div>
250
+ <div id="{graph_id}-container" class="diagram-container"
251
+ style="width: 90%; max-width: 800px; margin: auto; padding: 20px;
252
+ background: white; border: 1px solid #ddd;
253
+ border-radius: 12px; position: relative;">
254
+ {header_html}
255
+ <div class="pan-zoom-container"
256
+ style="width: 100%; height: 500px; overflow: hidden;
257
+ position: relative; background: #f9f9f9;
258
+ border: 1px solid #ccc; cursor: grab;">
259
+ <div id="{graph_id}" class="mermaid pan-zoom-content"
260
+ style="position: absolute; transform-origin: 0 0;">
261
+ {escaped_mermaid_code}
303
262
  </div>
304
263
  </div>
264
+ </div>
265
+
266
+ <script>
267
+ (function() {{
268
+ // Check if Mermaid.js is already loaded; load if not
269
+ if (typeof mermaid === "undefined") {{
270
+ const script = document.createElement('script');
271
+ script.src = "https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js";
272
+ script.onload = () => initializeMermaid();
273
+ document.head.appendChild(script);
274
+ }} else {{
275
+ initializeMermaid();
276
+ }}
305
277
 
306
- <script>
307
- document.addEventListener("DOMContentLoaded", function() {{
308
- // Initialize Mermaid.js
309
- console.log("Initializing Mermaid...");
278
+ function initializeMermaid() {{
279
+ // Re-render the Mermaid chart
310
280
  mermaid.initialize({{ startOnLoad: true }});
281
+ mermaid.init(undefined, document.querySelector("#{graph_id}"));
311
282
 
283
+ // Add interactivity for pan and zoom
312
284
  const container = document.querySelector('.pan-zoom-container');
313
285
  const content = document.querySelector('.pan-zoom-content');
314
- let rect; // Bounding box of the rendered diagram
315
- let scale = 1; // Current zoom level
316
- let panX = 0; // Pan offset in X direction
317
- let panY = 0; // Pan offset in Y direction
286
+
287
+ let scale = 1; // Current zoom level
288
+ let panX = 0; // X-axis pan
289
+ let panY = 0; // Y-axis pan
318
290
  let isDragging = false;
319
291
  let startX, startY;
320
292
 
321
- // Helper: Apply transformations
293
+ // Apply Transformations
322
294
  const applyTransform = () => {{
323
295
  content.style.transform = `translate(${{panX}}px, ${{panY}}px) scale(${{scale}})`;
324
296
  }};
325
297
 
326
- // Helper: Center the diagram and fit it to the container
298
+ // Center Diagram on Load
327
299
  const centerAndFitDiagram = () => {{
328
- rect = content.getBoundingClientRect();
329
300
  const containerRect = container.getBoundingClientRect();
301
+ const rect = content.getBoundingClientRect();
330
302
 
331
- // Calculate the required scale to fit the diagram
332
303
  scale = Math.min(
333
304
  containerRect.width / rect.width,
334
305
  containerRect.height / rect.height
335
306
  );
336
307
 
337
- // Adjust pan to center the diagram
338
308
  panX = (containerRect.width - rect.width * scale) / 2;
339
309
  panY = (containerRect.height - rect.height * scale) / 2;
340
310
 
341
311
  applyTransform();
342
- console.log("Diagram centered and fitted to container.");
343
312
  }};
344
313
 
345
- // Add pan/zoom functionality
346
- const zoomCenteredOnDiagram = (event, deltaZoom) => {{
347
- rect = content.getBoundingClientRect();
348
- const containerRect = container.getBoundingClientRect();
314
+ setTimeout(centerAndFitDiagram, 200); // Allow rendering time
349
315
 
350
- // Center of the diagram
351
- const diagramCenterX = rect.left + rect.width / 2;
352
- const diagramCenterY = rect.top + rect.height / 2;
353
-
354
- const zoomX = (diagramCenterX - containerRect.left) * deltaZoom;
355
- const zoomY = (diagramCenterY - containerRect.top) * deltaZoom;
356
-
357
- panX -= zoomX;
358
- panY -= zoomY;
359
- }};
360
-
361
- container.addEventListener('wheel', function(event) {{
316
+ // Enable Mouse-Wheel Zoom
317
+ container.addEventListener('wheel', (event) => {{
362
318
  event.preventDefault();
363
319
  const zoomSpeed = 0.1;
364
320
  const previousScale = scale;
365
321
 
366
- // Zoom in or out
367
322
  if (event.deltaY < 0) {{
368
- scale = Math.min(scale + zoomSpeed, 4); // Limit zoom-in
323
+ scale = Math.min(scale + zoomSpeed, 4);
369
324
  }} else {{
370
- scale = Math.max(scale - zoomSpeed, 0.5); // Limit zoom-out
325
+ scale = Math.max(scale - zoomSpeed, 0.5);
371
326
  }}
372
327
 
373
- // Calculate deltaZoom and adjust pan
374
- const deltaZoom = scale / previousScale - 1;
375
- zoomCenteredOnDiagram(event, deltaZoom);
328
+ const zoomRatio = scale / previousScale;
329
+ const clientRect = container.getBoundingClientRect();
330
+
331
+ panX -= (event.clientX - clientRect.left) * (zoomRatio - 1);
332
+ panY -= (event.clientY - clientRect.top) * (zoomRatio - 1);
376
333
 
377
334
  applyTransform();
378
335
  }});
379
336
 
380
- container.addEventListener('mousedown', function(event) {{
337
+ // Enable Drag-to-Pan
338
+ container.addEventListener('mousedown', (event) => {{
381
339
  isDragging = true;
382
340
  startX = event.clientX - panX;
383
341
  startY = event.clientY - panY;
384
342
  container.style.cursor = "grabbing";
385
343
  }});
386
344
 
387
- container.addEventListener('mousemove', function(event) {{
345
+ container.addEventListener('mousemove', (event) => {{
388
346
  if (!isDragging) return;
389
347
 
390
348
  panX = event.clientX - startX;
@@ -393,27 +351,123 @@ def construct_mermaid_html(mermaid_str: str) -> str:
393
351
  applyTransform();
394
352
  }});
395
353
 
396
- container.addEventListener('mouseup', function() {{
354
+ container.addEventListener('mouseup', () => {{
397
355
  isDragging = false;
398
356
  container.style.cursor = "grab";
399
357
  }});
400
358
 
401
- container.addEventListener('mouseleave', function() {{
359
+ container.addEventListener('mouseleave', () => {{
402
360
  isDragging = false;
403
361
  container.style.cursor = "grab";
404
362
  }});
363
+ }}
364
+ }})();
365
+ </script>
405
366
 
406
- // Ensure Mermaid renders the diagram, then fit and center it
407
- setTimeout(centerAndFitDiagram, 100); // Delay to ensure Mermaid.js rendering is complete
408
- }});
409
- </script>
410
- </body>
411
- </html>
412
- """
413
-
414
-
415
-
367
+ """
416
368
  return mermaid_html
369
+ # mermaid_html = f"""
370
+ # <h2 style="text-align: center; color: #007acc; margin-bottom: 16px;">
371
+ # {escaped_header}
372
+ # </h2>
373
+ # """ if header else ""
374
+ # # <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;">
375
+ # # {header_html}
376
+ # # <div class="pan-zoom-container" style="width: 100%; height: 500px; overflow: hidden; position: relative; background: #f9f9f9; border: 1px solid #ccc; cursor: grab;">
377
+ # # <div id="{graph_id}" class="mermaid pan-zoom-content" style="position: absolute; transform-origin: 0 0; cursor: grab;">
378
+ # # {escaped_mermaid_code}
379
+ # # </div>
380
+ # # </div>
381
+ # # </div>
382
+ # # <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
383
+ # # <script>
384
+ # # // Initialize Mermaid.js and set up pan/zoom
385
+ # # mermaid.initialize({{ startOnLoad: true }});
386
+ # #
387
+ # # const container = document.querySelector('.pan-zoom-container');
388
+ # # const content = document.querySelector('.pan-zoom-content');
389
+ # # const rect = content.getBoundingClientRect();
390
+ # #
391
+ # # let scale = 1; // Current zoom level
392
+ # # let panX = 0; // X-axis pan offset
393
+ # # let panY = 0; // Y-axis pan offset
394
+ # # let isDragging = false;
395
+ # # let startX, startY;
396
+ # #
397
+ # # // Helper: Apply transformations
398
+ # # const applyTransform = () => {{
399
+ # # content.style.transform = `translate(${{panX}}px, ${{panY}}px) scale(${{scale}})`;
400
+ # # }};
401
+ # #
402
+ # # // Helper: Center the diagram and fit it to the container
403
+ # # const centerAndFitDiagram = () => {{
404
+ # # const containerRect = container.getBoundingClientRect();
405
+ # # const rect = content.getBoundingClientRect();
406
+ # #
407
+ # # scale = Math.min(
408
+ # # containerRect.width / rect.width,
409
+ # # containerRect.height / rect.height
410
+ # # );
411
+ # #
412
+ # # panX = (containerRect.width - rect.width * scale) / 2;
413
+ # # panY = (containerRect.height - rect.height * scale) / 2;
414
+ # #
415
+ # # applyTransform();
416
+ # # console.log("Diagram centered and fitted.");
417
+ # # }};
418
+ # #
419
+ # # // Add zoom functionality
420
+ # # container.addEventListener('wheel', function(event) {{
421
+ # # event.preventDefault();
422
+ # # const zoomSpeed = 0.1;
423
+ # # const previousScale = scale;
424
+ # #
425
+ # # if (event.deltaY < 0) {{
426
+ # # scale = Math.min(scale + zoomSpeed, 4);
427
+ # # }} else {{
428
+ # # scale = Math.max(scale - zoomSpeed, 0.5);
429
+ # # }}
430
+ # #
431
+ # # const zoomRatio = scale / previousScale;
432
+ # # panX -= (event.clientX - container.getBoundingClientRect().left) * (zoomRatio - 1);
433
+ # # panY -= (event.clientY - container.getBoundingClientRect().top) * (zoomRatio - 1);
434
+ # #
435
+ # # applyTransform();
436
+ # # }});
437
+ # #
438
+ # # // Add drag functionality for panning
439
+ # # container.addEventListener('mousedown', function(event) {{
440
+ # # isDragging = true;
441
+ # # startX = event.clientX - panX;
442
+ # # startY = event.clientY - panY;
443
+ # # container.style.cursor = "grabbing";
444
+ # # }});
445
+ # #
446
+ # # container.addEventListener('mousemove', function(event) {{
447
+ # # if (!isDragging) return;
448
+ # #
449
+ # # panX = event.clientX - startX;
450
+ # # panY = event.clientY - startY;
451
+ # #
452
+ # # applyTransform();
453
+ # # }});
454
+ # #
455
+ # # container.addEventListener('mouseup', function() {{
456
+ # # isDragging = false;
457
+ # # container.style.cursor = "grab";
458
+ # # }});
459
+ # #
460
+ # # container.addEventListener('mouseleave', function() {{
461
+ # # isDragging = false;
462
+ # # container.style.cursor = "grab";
463
+ # # }});
464
+ # #
465
+ # # // Center diagram after rendering by Mermaid
466
+ # # setTimeout(centerAndFitDiagram, 200);
467
+ # # </script>
468
+ # # """
469
+ #
470
+ # return mermaid_html
417
471
 
418
472
 
419
473