@@ -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();
|
||||
|
||||
Reference in New Issue
Block a user