Bearbeite Issues #22 bis #24

closes #22

closes #23

closes #24
This commit is contained in:
2026-02-19 10:31:53 +01:00
parent 0642a3b6ef
commit b973d2857b
6 changed files with 49 additions and 97 deletions

View File

@@ -38,6 +38,18 @@ document.addEventListener('DOMContentLoaded', () => {
let viewWidth = DEFAULT_PLAN_SIZE.width;
let viewHeight = DEFAULT_PLAN_SIZE.height;
overlay.setAttribute('preserveAspectRatio', 'none');
const backgroundImage = document.createElementNS(SVG_NS, 'image');
backgroundImage.classList.add('floor-plan-background');
backgroundImage.setAttribute('x', '0');
backgroundImage.setAttribute('y', '0');
backgroundImage.setAttribute('width', String(DEFAULT_PLAN_SIZE.width));
backgroundImage.setAttribute('height', String(DEFAULT_PLAN_SIZE.height));
backgroundImage.setAttribute('preserveAspectRatio', 'none');
backgroundImage.setAttribute('display', 'none');
overlay.appendChild(backgroundImage);
const activeMarker = document.createElementNS(SVG_NS, 'rect');
activeMarker.classList.add('active-marker');
if (markerType === 'patchpanel') {
@@ -237,7 +249,6 @@ document.addEventListener('DOMContentLoaded', () => {
const panelBuildingSelect = document.getElementById('panel-building-select');
const panelFloorSelect = document.getElementById('panel-floor-select');
const outletRoomSelect = document.getElementById('outlet-room-select');
const floorPlanSvg = document.getElementById('floor-plan-svg');
const panelPlacementFields = document.getElementById('panel-placement-fields');
const panelFloorPlanGroup = document.getElementById('panel-floor-plan-group');
const panelFloorMissingHint = document.getElementById('panel-floor-missing-hint');
@@ -312,21 +323,19 @@ document.addEventListener('DOMContentLoaded', () => {
};
const updateFloorPlanImage = () => {
if (!floorPlanSvg) {
return;
}
const floorOption = panelFloorSelect?.selectedOptions?.[0];
const roomOption = outletRoomSelect?.selectedOptions?.[0];
const svgUrl = floorOption?.dataset?.svgUrl || roomOption?.dataset?.floorSvgUrl || '';
if (svgUrl) {
floorPlanSvg.src = svgUrl;
floorPlanSvg.hidden = false;
backgroundImage.setAttribute('href', svgUrl);
backgroundImage.setAttribute('width', String(planSize.width));
backgroundImage.setAttribute('height', String(planSize.height));
backgroundImage.setAttribute('display', 'block');
loadPlanDimensions(svgUrl);
} else {
floorPlanSvg.removeAttribute('src');
floorPlanSvg.hidden = true;
backgroundImage.removeAttribute('href');
backgroundImage.setAttribute('display', 'none');
planSize.width = DEFAULT_PLAN_SIZE.width;
planSize.height = DEFAULT_PLAN_SIZE.height;
resetView();
@@ -335,13 +344,6 @@ document.addEventListener('DOMContentLoaded', () => {
filterPatchpanelBindOptions();
};
if (floorPlanSvg) {
floorPlanSvg.addEventListener('error', () => {
floorPlanSvg.removeAttribute('src');
floorPlanSvg.hidden = true;
});
}
const loadPlanDimensions = async (svgUrl) => {
if (!svgUrl) {
return;
@@ -365,6 +367,8 @@ document.addEventListener('DOMContentLoaded', () => {
if (parts.length === 4 && parts.every((value) => Number.isFinite(value))) {
planSize.width = Math.max(1, parts[2]);
planSize.height = Math.max(1, parts[3]);
backgroundImage.setAttribute('width', String(planSize.width));
backgroundImage.setAttribute('height', String(planSize.height));
resetView();
renderReferenceMarkers();
updateFromInputs();
@@ -381,12 +385,16 @@ document.addEventListener('DOMContentLoaded', () => {
planSize.width = DEFAULT_PLAN_SIZE.width;
planSize.height = DEFAULT_PLAN_SIZE.height;
}
backgroundImage.setAttribute('width', String(planSize.width));
backgroundImage.setAttribute('height', String(planSize.height));
resetView();
renderReferenceMarkers();
updateFromInputs();
} catch (error) {
planSize.width = DEFAULT_PLAN_SIZE.width;
planSize.height = DEFAULT_PLAN_SIZE.height;
backgroundImage.setAttribute('width', String(planSize.width));
backgroundImage.setAttribute('height', String(planSize.height));
resetView();
renderReferenceMarkers();
updateFromInputs();
@@ -584,23 +592,6 @@ document.addEventListener('DOMContentLoaded', () => {
});
}
document.querySelectorAll('[data-floor-plan-zoom]').forEach((button) => {
button.addEventListener('click', () => {
const action = button.getAttribute('data-floor-plan-zoom');
if (action === 'in') {
const rect = overlay.getBoundingClientRect();
zoomAt(rect.left + (rect.width / 2), rect.top + (rect.height / 2), 0.85);
return;
}
if (action === 'out') {
const rect = overlay.getBoundingClientRect();
zoomAt(rect.left + (rect.width / 2), rect.top + (rect.height / 2), 1.15);
return;
}
resetView();
});
});
updateOverlayViewBox();
updateFromInputs();
filterPatchpanelBindOptions();