Boxen kunnen nu ook geselecteerd en verschoven worden door op het lab…

…el te klikken.

builddate.js

@@ -1 +1 @@
-var CONF_builddate="20250222-211554"
+var CONF_builddate="20250222-214339"

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;

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);
     };
     /**

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':