diff --git a/js/kundenkarte.js b/js/kundenkarte.js index a8535db..99817ce 100755 --- a/js/kundenkarte.js +++ b/js/kundenkarte.js @@ -8966,50 +8966,71 @@ gridLayer.setAttribute('class', 'schematic-wire-grid-layer'); gridLayer.setAttribute('pointer-events', 'none'); - // Collect all terminal positions and routing Y-lines + // Collect all terminal positions and routing lines this.wireGridPoints = []; var pointCount = 0; - // Get X positions from all TE slots on all carriers + // SVG-Bereich ermitteln + var svgWidth = parseInt(this.svgElement.getAttribute('width')) || 800; + var svgHeight = parseInt(this.svgElement.getAttribute('height')) || 600; + + // X-Positionen: TE-Slots + Rand links/rechts var xPositions = []; + var minX = Infinity, maxX = 0; + this.carriers.forEach(function(carrier) { if (typeof carrier._x === 'undefined') return; var totalTE = carrier.total_te || 12; + var carrierEndX = carrier._x + totalTE * self.TE_WIDTH; + if (carrier._x < minX) minX = carrier._x; + if (carrierEndX > maxX) maxX = carrierEndX; + for (var te = 1; te <= totalTE; te++) { - // Terminal center X position for this TE var teX = carrier._x + (te - 1) * self.TE_WIDTH + (self.TE_WIDTH / 2); if (xPositions.indexOf(teX) === -1) xPositions.push(teX); } }); - // Get Y positions from equipment terminals and routing space + // Rand-Raster links und rechts (alle 20px) + if (minX !== Infinity) { + for (var leftX = minX - 30; leftX > 30; leftX -= 20) { + if (xPositions.indexOf(leftX) === -1) xPositions.push(leftX); + } + for (var rightX = maxX + 30; rightX < svgWidth - 30; rightX += 20) { + if (xPositions.indexOf(rightX) === -1) xPositions.push(rightX); + } + } + + // Y-Positionen: Terminals + Routing-Bereich var yPositions = []; + var minY = Infinity, maxY = 0; + this.equipment.forEach(function(eq) { if (typeof eq._y === 'undefined') return; - // Top terminal Y var topY = eq._y - 7; - // Bottom terminal Y var bottomY = eq._y + (eq._height || self.BLOCK_HEIGHT) + 7; + if (topY < minY) minY = topY; + if (bottomY > maxY) maxY = bottomY; if (yPositions.indexOf(topY) === -1) yPositions.push(topY); if (yPositions.indexOf(bottomY) === -1) yPositions.push(bottomY); }); - // Add routing Y lines between carriers (for horizontal routing) + // Routing-Bereich ober- und unterhalb der Blöcke this.carriers.forEach(function(carrier) { if (typeof carrier._y === 'undefined') return; var railCenterY = carrier._y + self.RAIL_HEIGHT / 2; var blockTop = railCenterY - self.BLOCK_HEIGHT / 2; var blockBottom = railCenterY + self.BLOCK_HEIGHT / 2; - // Add grid lines above and below the busbar area - var busbarSpace = 60; // Space for busbars - for (var offsetY = busbarSpace + 20; offsetY < busbarSpace + 100; offsetY += self.WIRE_GRID_SIZE) { + // Raster oberhalb (Sammelschienen-Bereich) + for (var offsetY = 20; offsetY < 150; offsetY += 15) { var routeY = blockTop - offsetY; - if (routeY > 0 && yPositions.indexOf(routeY) === -1) yPositions.push(routeY); + if (routeY > 20 && yPositions.indexOf(routeY) === -1) yPositions.push(routeY); } - for (var offsetY2 = busbarSpace + 20; offsetY2 < busbarSpace + 100; offsetY2 += self.WIRE_GRID_SIZE) { + // Raster unterhalb (Abgang-Bereich) + for (var offsetY2 = 20; offsetY2 < 150; offsetY2 += 15) { var routeY2 = blockBottom + offsetY2; - if (yPositions.indexOf(routeY2) === -1) yPositions.push(routeY2); + if (routeY2 < svgHeight - 20 && yPositions.indexOf(routeY2) === -1) yPositions.push(routeY2); } }); @@ -9056,7 +9077,7 @@ setupMagneticSnap: function() { var self = this; var $svg = $(this.svgElement); - var magnetRadius = 20; // Distance in pixels to activate magnetic snap + var magnetRadius = 25; // Snap-Radius in SVG-Einheiten // Remove old handler if exists $svg.off('mousemove.magneticSnap'); @@ -9064,21 +9085,26 @@ $svg.on('mousemove.magneticSnap', function(e) { if (!self.wireDrawMode) return; - var rect = self.svgElement.getBoundingClientRect(); - var x = e.clientX - rect.left; - var y = e.clientY - rect.top; + // KORREKT: SVG-Koordinaten über matrixTransform + var svg = self.svgElement; + var pt = svg.createSVGPoint(); + pt.x = e.clientX; + pt.y = e.clientY; + var svgP = pt.matrixTransform(svg.getScreenCTM().inverse()); + var x = svgP.x; + var y = svgP.y; // Find nearest grid point from terminal-aligned points var nearestX = x, nearestY = y; var minDist = Infinity; if (self.wireGridPoints && self.wireGridPoints.length > 0) { - self.wireGridPoints.forEach(function(pt) { - var d = Math.sqrt(Math.pow(x - pt.x, 2) + Math.pow(y - pt.y, 2)); + self.wireGridPoints.forEach(function(gpt) { + var d = Math.sqrt(Math.pow(x - gpt.x, 2) + Math.pow(y - gpt.y, 2)); if (d < minDist) { minDist = d; - nearestX = pt.x; - nearestY = pt.y; + nearestX = gpt.x; + nearestY = gpt.y; } }); }