This commit is contained in:
2026-02-09 11:17:35 +01:00
parent 68f35123af
commit b7c26b5229
3 changed files with 73 additions and 26 deletions

View File

@@ -177,17 +177,28 @@ document.addEventListener('DOMContentLoaded', function() {
const centralNode = systemGraphic.querySelector('.central-node');
const otherNodes = systemGraphic.querySelectorAll('.node:not(.central-node)');
if (!centralNode || !systemGraphic) return;
if (!centralNode || !systemGraphic || !connections) return;
// Get the computed transform scale of the system graphic
const computedStyle = window.getComputedStyle(systemGraphic);
const transform = computedStyle.transform;
let scale = 1;
if (transform && transform !== 'none') {
const matrix = new DOMMatrix(transform);
scale = matrix.a; // Get the X scale factor
}
const graphicRect = systemGraphic.getBoundingClientRect();
const centralRect = centralNode.getBoundingClientRect();
// Calculate center position relative to the graphic container
const centerX = centralRect.left - graphicRect.left + centralRect.width / 2;
const centerY = centralRect.top - graphicRect.top + centralRect.height / 2;
// Calculate center position relative to the graphic container, accounting for scale
const centerX = (centralRect.left - graphicRect.left + centralRect.width / 2) / scale;
const centerY = (centralRect.top - graphicRect.top + centralRect.height / 2) / scale;
// Set SVG viewBox to match container
connections.setAttribute('viewBox', `0 0 ${graphicRect.width} ${graphicRect.height}`);
// Set SVG viewBox to match container (unscaled dimensions)
const viewBoxWidth = graphicRect.width / scale;
const viewBoxHeight = graphicRect.height / scale;
connections.setAttribute('viewBox', `0 0 ${viewBoxWidth} ${viewBoxHeight}`);
connections.style.width = '100%';
connections.style.height = '100%';
@@ -196,9 +207,9 @@ document.addEventListener('DOMContentLoaded', function() {
otherNodes.forEach(node => {
const nodeRect = node.getBoundingClientRect();
// Calculate node center position relative to the graphic container
const nodeX = nodeRect.left - graphicRect.left + nodeRect.width / 2;
const nodeY = nodeRect.top - graphicRect.top + nodeRect.height / 2;
// Calculate node center position relative to the graphic container, accounting for scale
const nodeX = (nodeRect.left - graphicRect.left + nodeRect.width / 2) / scale;
const nodeY = (nodeRect.top - graphicRect.top + nodeRect.height / 2) / scale;
// Create dashed line for better visibility
const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');