diff --git a/builddate.js b/builddate.js index ccebe84..d129704 100644 --- a/builddate.js +++ b/builddate.js @@ -1 +1 @@ -var CONF_builddate="20250222-211554" +var CONF_builddate="20250222-214339" diff --git a/css/styles.css b/css/styles.css index 4162095..04ebd1a 100644 --- a/css/styles.css +++ b/css/styles.css @@ -232,7 +232,7 @@ ul#minitabs a:hover { font-size: 11px; background-color: rgba(192, 192, 192, 0); border: 0px solid #000; - /* cursor: pointer; */ + cursor: pointer; box-sizing: border-box; /* Include border in size calculation */ transform: rotate(0deg); display: inline-block; diff --git a/eendraadschema.js b/eendraadschema.js index 7917dd4..3ea84fe 100644 --- a/eendraadschema.js +++ b/eendraadschema.js @@ -2865,10 +2865,26 @@ var SituationPlanView = /** @class */ (function () { */ this.startDrag = function (event) { _this.contextMenu.hide(); + if (event == null) + return; + var box = null; + //check if the classname is a box or a boxlabel + if (event.target.classList.contains('box')) { + box = event.target; + } + else if (event.target.classList.contains('boxlabel')) { + var sitPlanElement = event.target.sitPlanElementRef; + if (sitPlanElement == null) + return; + box = sitPlanElement.boxref; + } + ; + if (box == null) + return; event.stopPropagation(); // Voorkomt body klikgebeurtenis _this.clearSelection(); // Wist bestaande selectie - _this.selectBox(event.target); // Selecteert de box die we willen slepen - _this.draggedBox = event.target; // Houdt de box die we aan het slepen zijn + _this.selectBox(box); // Selecteert de box die we willen slepen + _this.draggedBox = box; // Houdt de box die we aan het slepen zijn switch (event.type) { case 'mousedown': _this.mousedrag.startDrag(event.clientX, event.clientY, _this.draggedBox.offsetLeft, _this.draggedBox.offsetTop, _this.zoomfactor); @@ -3134,7 +3150,7 @@ var SituationPlanView = /** @class */ (function () { element.boxref = box; // Boxlabel aanmaken op de DOM voor de tekst bij het symbool var boxlabel = document.createElement('div'); - boxlabel.className = "boxlabel"; + Object.assign(boxlabel, { id: element.id + '_label', className: "boxlabel", sitPlanElementRef: element }); boxlabel.innerHTML = htmlspecialchars(element.getAdres()); // is deze nodig? Wellicht reeds onderdeel van updateContent element.boxlabelref = boxlabel; // Content updaten en toevoegen aan de DOM @@ -3147,7 +3163,8 @@ var SituationPlanView = /** @class */ (function () { // Event handlers voor het bewegen met muis of touch box.addEventListener('mousedown', this.startDrag); box.addEventListener('touchstart', this.startDrag); - box.addEventListener('touchend', this.stopDrag); + boxlabel.addEventListener('mousedown', this.startDrag); + boxlabel.addEventListener('touchstart', this.startDrag); box.addEventListener('contextmenu', this.showContextMenu); }; /** diff --git a/src/sitplan/SituationPlanView.ts b/src/sitplan/SituationPlanView.ts index 546cc2d..c5aad42 100644 --- a/src/sitplan/SituationPlanView.ts +++ b/src/sitplan/SituationPlanView.ts @@ -192,7 +192,7 @@ class SituationPlanView { // Boxlabel aanmaken op de DOM voor de tekst bij het symbool let boxlabel = document.createElement('div'); - boxlabel.className = "boxlabel"; + Object.assign(boxlabel, {id: element.id + '_label', className: "boxlabel", sitPlanElementRef: element}); boxlabel.innerHTML = htmlspecialchars(element.getAdres()); // is deze nodig? Wellicht reeds onderdeel van updateContent element.boxlabelref = boxlabel; @@ -204,7 +204,8 @@ class SituationPlanView { // Event handlers voor het bewegen met muis of touch box.addEventListener('mousedown', this.startDrag); box.addEventListener('touchstart', this.startDrag); - box.addEventListener('touchend', this.stopDrag); + boxlabel.addEventListener('mousedown', this.startDrag); + boxlabel.addEventListener('touchstart', this.startDrag); box.addEventListener('contextmenu', this.showContextMenu); } @@ -517,10 +518,25 @@ class SituationPlanView { private startDrag = (event) => { this.contextMenu.hide(); + if (event == null) return; + + let box:HTMLElement = null; + + //check if the classname is a box or a boxlabel + if (event.target.classList.contains('box')) { + box = event.target; + } else if (event.target.classList.contains('boxlabel')) { + let sitPlanElement = event.target.sitPlanElementRef; + if (sitPlanElement == null) return; + box = sitPlanElement.boxref; + }; + + if (box == null) return; + event.stopPropagation(); // Voorkomt body klikgebeurtenis this.clearSelection(); // Wist bestaande selectie - this.selectBox(event.target); // Selecteert de box die we willen slepen - this.draggedBox = event.target; // Houdt de box die we aan het slepen zijn + this.selectBox(box); // Selecteert de box die we willen slepen + this.draggedBox = box; // Houdt de box die we aan het slepen zijn switch (event.type) { case 'mousedown':