WIP: recreate object element when loading maps to avoid node warnings about dangling file handles
This commit is contained in:
77
src/index.js
77
src/index.js
@@ -8,7 +8,6 @@ globalThis.svgns = "http://www.w3.org/2000/svg";
|
||||
const mapPlaceholder = document.querySelector('.map-placeholder'),
|
||||
distanceOutput = document.getElementById('status'),
|
||||
proneToggle = document.getElementById('toggle-prone-counter'),
|
||||
object = document.querySelector('object'),
|
||||
contentVisToggleEl = document.querySelector('#content input[type="checkbox"].visible'),
|
||||
|
||||
toggleContentVis = (function () {
|
||||
@@ -90,17 +89,17 @@ document.querySelectorAll('.end-move').forEach(el => el.addEventListener('click'
|
||||
gameboard.endMove();
|
||||
}));
|
||||
|
||||
object.addEventListener('load', function () {
|
||||
mapPlaceholder.remove();
|
||||
this.style.opacity = 1;
|
||||
// object.addEventListener('load', function () {
|
||||
// mapPlaceholder.remove();
|
||||
// this.style.opacity = 1;
|
||||
|
||||
const svg = this.contentDocument.querySelector('svg'),
|
||||
startLocs = svg.querySelector('.start-locations');
|
||||
// const svg = this.contentDocument.querySelector('svg'),
|
||||
// startLocs = svg.querySelector('.start-locations');
|
||||
|
||||
panzoom.start(svg);
|
||||
gameboard.start(svg);
|
||||
recordSheet.start(startLocs, gameboard.getUnits(), gameboard.unSelect, gameboard.select);
|
||||
});
|
||||
// panzoom.start(svg);
|
||||
// gameboard.start(svg);
|
||||
// recordSheet.start(startLocs, gameboard.getUnits(), gameboard.unSelect, gameboard.select);
|
||||
// });
|
||||
|
||||
contentVisToggleEl.checked = (localStorage.getItem('content-visibility') !== 'false');
|
||||
toggleContentVis();
|
||||
@@ -112,4 +111,60 @@ mapSelectDialog
|
||||
.updateValueOnSelection()
|
||||
.changeMapOnConfirm();
|
||||
|
||||
object.data = `${localStorage.getItem('map') || 'map1'}.svg`;
|
||||
// const xhr = new XMLHttpRequest();
|
||||
|
||||
// xhr.onload = () => {
|
||||
// console.log(xhr);
|
||||
// const oldObj = document.querySelector('object');
|
||||
// const object = document.createElement('object');
|
||||
// object.setAttribute('type', 'image/svg+xml');
|
||||
// object.style.opacity = 0;
|
||||
// mapPlaceholder.after(object);
|
||||
|
||||
// object.addEventListener('load', function () {
|
||||
// oldObj.remove();
|
||||
// mapPlaceholder.remove();
|
||||
// this.style.opacity = 1;
|
||||
|
||||
// const svg = this.contentDocument.querySelector('svg'),
|
||||
// startLocs = svg.querySelector('.start-locations');
|
||||
|
||||
// panzoom.start(svg);
|
||||
// gameboard.start(svg);
|
||||
// recordSheet.start(startLocs, gameboard.getUnits(), gameboard.unSelect, gameboard.select);
|
||||
// });
|
||||
|
||||
// object.data = fileName;
|
||||
// };
|
||||
|
||||
// xhr.open('GET', fileName);
|
||||
// xhr.responseType = 'document';
|
||||
// xhr.send();
|
||||
|
||||
const fileName = `${localStorage.getItem('map') || 'map1'}.svg`;
|
||||
const oldObj = document.querySelector('object');
|
||||
|
||||
console.log('old data', oldObj.getAttribute('data'), 'new data', fileName);
|
||||
|
||||
const object = document.createElement('object');
|
||||
object.setAttribute('type', 'image/svg+xml');
|
||||
object.style.opacity = 0;
|
||||
mapPlaceholder.after(object);
|
||||
|
||||
object.addEventListener('load', function () {
|
||||
oldObj.remove();
|
||||
mapPlaceholder.remove();
|
||||
this.style.opacity = 1;
|
||||
|
||||
const svg = this.contentDocument.querySelector('svg'),
|
||||
startLocs = svg.querySelector('.start-locations');
|
||||
|
||||
panzoom.start(svg);
|
||||
gameboard.start(svg);
|
||||
recordSheet.start(startLocs, gameboard.getUnits(), gameboard.unSelect, gameboard.select);
|
||||
});
|
||||
|
||||
if (oldObj.getAttribute('data') !== fileName) {
|
||||
console.log('object data changed');
|
||||
object.data = fileName;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user