Aanpassingen helpertip:

- er kan nu aangegeven worden of de "nooit meer weergeven" optie per default aan staat voor een tip of niet.

Bugfix schakelaars/lichtcircuit:
- Defaukt symbolen werden niet correct toegevoegd aan SVGSymbols en daardoor niet altijdweergegeven in het situatieschema.

Mousedrag class:
- De mousedrag class heeft een nieuwe interne state om te checken of er effectief een drag (verandering van positie) heeft plaats gevonden of enkel een klik.

SituationPlanElement:
- Bugfix, probleem met het roteren van symbolen die werden geladen vanuit bestand over hoeken tussen 90 en 270 graden opgelost.

SituationPlanView:
- Rotatieprobleem opgelost (zie boven)
- Pijltjestoetsen kunnen nu ook gebruikt worden voor verplaatsing van symbolen
- Beperkte aanpassing van de helpertip voor het situatieschema zelf.

Author: igoethal

builddate.js

@@ -1 +1 @@
-var CONF_builddate="20250125-215843"
+var CONF_builddate="20250202-145724"

eendraadschema.js

@@ -1753,8 +1753,9 @@ var HelperTip = /** @class */ (function () {
         this.storagePrefix = storagePrefix;
     }
     // Show the helper tip if it hasn't been dismissed before
-    HelperTip.prototype.show = function (key, htmlContent) {
+    HelperTip.prototype.show = function (key, htmlContent, checked) {
         var _this = this;
+        if (checked === void 0) { checked = false; }
         var neverDisplayKey = "".concat(this.storagePrefix, ".").concat(key, ".neverDisplay");
         var displayedInThisSessionKey = "".concat(this.storagePrefix, ".").concat(key, ".displayedInThisSession");
         // Check if the tip was dismissed before
@@ -1799,8 +1800,9 @@ var HelperTip = /** @class */ (function () {
         checkboxLabel.style.marginTop = '10px';
         var checkbox = document.createElement('input');
         checkbox.type = 'checkbox';
+        checkbox.checked = checked;
         checkboxLabel.appendChild(checkbox);
-        var checkboxText = document.createTextNode(' Deze tekst niet meer weergeven');
+        var checkboxText = document.createTextNode(' Deze tekst nooit meer weergeven in deze browser.');
         var italicText = document.createElement('i');
         italicText.appendChild(checkboxText);
         checkboxLabel.appendChild(italicText);
@@ -1991,6 +1993,7 @@ var MouseDrag = /** @class */ (function () {
         this.startOffsetLeft = 0;
         this.startOffsetTop = 0;
         this.zoomfactor = 1;
+        this.hassMoved = false;
     }
     /**
      * Start the drag.
@@ -2011,6 +2014,7 @@ var MouseDrag = /** @class */ (function () {
         this.startOffsetLeft = startOffsetLeft;
         this.startOffsetTop = startOffsetTop;
         this.zoomfactor = zoomfactor;
+        this.hassMoved = false;
     };
     /**
      * Return the new left and top position of the box based on the current mouse position.
@@ -2021,6 +2025,8 @@ var MouseDrag = /** @class */ (function () {
     MouseDrag.prototype.returnNewLeftTop = function (mousex, mousey) {
         if (mousex === void 0) { mousex = 0; }
         if (mousey === void 0) { mousey = 0; }
+        if (mousex != this.startDragx || mousey != this.startDragy)
+            this.hassMoved = true;
         return ({
             left: (mousex - this.startDragx) / this.zoomfactor + this.startOffsetLeft,
             top: (mousey - this.startDragy) / this.zoomfactor + this.startOffsetTop
@@ -2333,7 +2339,7 @@ var SituationPlanElement = /** @class */ (function () {
         }
         return false;
     };
-    SituationPlanElement.prototype.rotates360degrees = function () {
+    SituationPlanElement.prototype.isEDSSymbolAndRotates360degrees = function () {
         if (this.isEendraadschemaSymbool()) {
             var electroElement = structure.getElectroItemById(this.electroItemId);
             if (electroElement != null) {
@@ -2342,7 +2348,7 @@ var SituationPlanElement = /** @class */ (function () {
             }
             return false;
         }
-        return true;
+        return false;
     };
     /**
      * setAdres
@@ -2482,7 +2488,7 @@ var SituationPlanElement = /** @class */ (function () {
             rotate = rotate % 360;
             var spiegel = false;
             if ((rotate >= 90) && (rotate < 270)) {
-                if (_this.rotates360degrees())
+                if (_this.isEDSSymbolAndRotates360degrees())
                     spiegel = true;
                 if (_this.isEendraadschemaSymbool())
                     rotate = rotate + 180;
@@ -2682,15 +2688,23 @@ var SituationPlanView = /** @class */ (function () {
          * @param event - De gebeurtenis die de sleepactie stopt (muisklik release of touchend).
          */
         this.stopDrag = function (event) {
+            function showArrowHelp() {
+                var helperTip = new HelperTip(appDocStorage);
+                helperTip.show('sitplan.arrowdrag', "<h3>Tip: Symbolen verplaatsen</h3>\n            <p>Voor fijnere controle tijdens het verschuiven van symbolen kan u ook de pijltjes op het toetsenbord gebruiken.</p>", true);
+            }
             event.stopPropagation();
             switch (event.type) {
                 case 'mouseup':
                     document.removeEventListener('mousemove', _this.processDrag);
                     document.removeEventListener('mouseup', _this.stopDrag);
+                    if (_this.mousedrag.hassMoved)
+                        showArrowHelp();
                     break;
                 case 'touchend':
                     document.removeEventListener('touchmove', _this.processDrag);
                     document.removeEventListener('touchend', _this.stopDrag);
+                    if (_this.mousedrag.hassMoved)
+                        showArrowHelp();
                     break;
                 default:
                     console.error('Ongeldige event voor stopDrag functie');
@@ -2733,6 +2747,8 @@ var SituationPlanView = /** @class */ (function () {
         // Verwijder alle selecties wanneer we ergens anders klikken dan op een box
         this.event_manager.addEventListener(outerdiv, 'mousedown', function () { _this.clearSelection(); });
         this.event_manager.addEventListener(outerdiv, 'touchstart', function () { _this.clearSelection(); });
+        // Voegt event handlers toe voor de pijltjestoesten
+        this.attachArrowKeys();
     }
     /**
      * Maakt deze instance ongedaan en verwijderd alle door deze instance aangemaakte elementen uit de DOM.
@@ -2945,10 +2961,13 @@ var SituationPlanView = /** @class */ (function () {
         function getRotationTransform(sitPlanElement) {
             if (!sitPlanElement)
                 return '';
-            var rotation = sitPlanElement.rotate % 360;
+            var rotation = sitPlanElement.rotate;
+            while (rotation < 0)
+                rotation += 360;
+            rotation = rotation % 360;
             var spiegel = false;
             if ((rotation >= 90) && (rotation < 270)) {
-                if (sitPlanElement.rotates360degrees())
+                if (sitPlanElement.isEDSSymbolAndRotates360degrees())
                     spiegel = true;
                 if (sitPlanElement.isEendraadschemaSymbool())
                     rotation -= 180;
@@ -3157,6 +3176,45 @@ var SituationPlanView = /** @class */ (function () {
         }
         this.updateRibbon();
     };
+    /**
+     * Voegt eventlisteners toe om pijltjestoetsen te hanteren.
+     *
+     * Wanneer een pijltjestoets wordt ingedrukt, en er is een box geselecteerd, dan wordt de positie van de box aangepast.
+     * De positie van de box wordt aangepast door de posx of posy van het element in het situatieplan te veranderen.
+     * Daarna wordt de functie updateSymbolAndLabelPosition aangeroepen om de positie van het symbool en het label van de box te updaten.
+     */
+    SituationPlanView.prototype.attachArrowKeys = function () {
+        var _this = this;
+        this.event_manager.addEventListener(document, 'keydown', function (event) {
+            if (_this.outerdiv.style.display == 'none')
+                return; // Check if we are really in the situationplan, if not, the default scrolling action will be executed by the browser
+            if (document.getElementById('popupOverlay') != null)
+                return; // We need the keys when editing symbol properties.
+            if (_this.selectedBox) { // Check if we have a selected box, if not, the default scrolling action will be executed by the browser
+                event.preventDefault();
+                var sitPlanElement = _this.selectedBox.sitPlanElementRef;
+                if (!sitPlanElement)
+                    return;
+                switch (event.key) {
+                    case 'ArrowLeft':
+                        sitPlanElement.posx -= 1;
+                        break;
+                    case 'ArrowRight':
+                        sitPlanElement.posx += 1;
+                        break;
+                    case 'ArrowUp':
+                        sitPlanElement.posy -= 1;
+                        break;
+                    case 'ArrowDown':
+                        sitPlanElement.posy += 1;
+                        break;
+                    default:
+                        return;
+                }
+                _this.updateSymbolAndLabelPosition(sitPlanElement);
+            }
+        });
+    };
     /**
      * Hangt een klik event listener aan het gegeven element met als doel de huidig geselecteerde box te verwijderen.
      *
@@ -3371,7 +3429,7 @@ function showSituationPlanPage() {
     structure.sitplanview.redraw();
     // Initialize the HelperTip with the storage
     var helperTip = new HelperTip(appDocStorage);
-    helperTip.show('sitplan.introductie', "<h3>Situatieschema</h3>\n    <p>Op deze pagina kan u een situatieschema tekenen</p>\n    <p>Laad een plattegrond met de knop \"Uit bestand\" en voeg symbolen toe met de knop \"Uit schema\".</p>\n    <p>Klik <a href=\"Documentation/sitplandoc.pdf\" target=\"_blank\" rel=\"noopener noreferrer\">hier</a> om in een nieuw venster de documentatie te bekijken.</p>\n    <p>Het situatieschema werd recent toegevoegd aan het programma en zal nog verder ontwikkeld worden over de komende weken. Opmerkingen zijn welkom in het \"contact\"-formulier.</p>");
+    helperTip.show('sitplan.introductie', "<h3>Situatieschema tekenen</h3>\n    <p>Op deze pagina kan u een situatieschema tekenen.</p>\n    <p>Laad een plattegrond met de knop \"Uit bestand\" en voeg symbolen toe met de knop \"Uit schema\".</p>\n    <p>Klik <a href=\"Documentation/sitplandoc.pdf\" target=\"_blank\" rel=\"noopener noreferrer\">hier</a> om in een nieuw venster de documentatie te bekijken.</p>\n    <p>Het situatieschema werd recent toegevoegd aan het programma en zal nog verder ontwikkeld worden over de komende weken. Opmerkingen zijn welkom in het \"contact\"-formulier.</p>");
 }
 /**
  * Een serie functies om een formulier te tonen met edit-functionaliteiten voor symbolen in het situatieplan
@@ -4402,7 +4460,7 @@ var Schakelaar = /** @class */ (function () {
     Schakelaar.prototype.defaulttoDrawReturnObj = function (startx, symbol) {
         var outputstr = "";
         var endx = startx + 20;
-        SVGSymbols.addSymbol(symbol);
+        SVGSymbols.addSymbol(symbol.substring(1));
         outputstr += '<line x1="' + startx + '" x2="' + endx + '" y1="25" y2="25" stroke="black" />'
             + '<use xlink:href="' + symbol + '" x="' + endx + '" y="25" />';
         return ({ endx: endx, str: outputstr, lowerbound: null });
@@ -4932,6 +4990,7 @@ var Lichtcircuit = /** @class */ (function (_super) {
         if (this.props.aantal_lichtpunten >= 1) { //1 of meerdere lampen
             // Teken de lamp
             endx = startx + 29;
+            SVGSymbols.addSymbol('lamp');
             mySVG.data += '<line x1="' + startx + '" x2="' + endx + '" y1="25" y2="25" stroke="black" />'
                 + '<use xlink:href="#lamp" x="' + endx + '" y="25" />';
             // Teken aantal lampen en symbool 'h' voor halfwaterdicht

src/List_Item/Schakelaars/Lichtcircuit.ts

@@ -126,6 +126,8 @@ class Lichtcircuit extends Schakelaars {
         if (this.props.aantal_lichtpunten >= 1) { //1 of meerdere lampen
             // Teken de lamp
             endx = startx + 29;
+            
+            SVGSymbols.addSymbol('lamp');
             mySVG.data += '<line x1="' + startx + '" x2="' + endx + '" y1="25" y2="25" stroke="black" />'
                     +  '<use xlink:href="#lamp" x="' + endx + '" y="25" />';
 

src/List_Item/Schakelaars/Schakelaar.ts

@@ -227,7 +227,7 @@ class Schakelaar {
         let outputstr:string = "";
         let endx = startx + 20;
 
-        SVGSymbols.addSymbol(symbol);
+        SVGSymbols.addSymbol(symbol.substring(1));
 
         outputstr += '<line x1="' + startx + '" x2="' + endx + '" y1="25" y2="25" stroke="black" />'
                   +  '<use xlink:href="' + symbol + '" x="' + endx + '" y="25" />';

src/documentation/HelperTip.ts

@@ -8,7 +8,7 @@ class HelperTip {
     }
 
     // Show the helper tip if it hasn't been dismissed before
-    show(key: string, htmlContent: string): void {
+    show(key: string, htmlContent: string, checked: boolean = false): void {
       const neverDisplayKey = `${this.storagePrefix}.${key}.neverDisplay`;
       const displayedInThisSessionKey = `${this.storagePrefix}.${key}.displayedInThisSession`;
 
@@ -60,9 +60,10 @@ class HelperTip {
 
       const checkbox = document.createElement('input');
       checkbox.type = 'checkbox';
+      checkbox.checked = checked;
       checkboxLabel.appendChild(checkbox);
 
-      const checkboxText = document.createTextNode(' Deze tekst niet meer weergeven');
+      const checkboxText = document.createTextNode(' Deze tekst nooit meer weergeven in deze browser.');
       const italicText = document.createElement('i');
       italicText.appendChild(checkboxText);
       checkboxLabel.appendChild(italicText);

src/sitplan/MouseDrag.ts

@@ -10,6 +10,8 @@ class MouseDrag {
     private startOffsetTop: number = 0;
     private zoomfactor: number = 1;
 
+    public hassMoved: boolean = false;
+
     /**
      * Start the drag.
      * @param mousex The x position of the mouse when the drag starts.
@@ -26,6 +28,7 @@ class MouseDrag {
         this.startOffsetLeft = startOffsetLeft;
         this.startOffsetTop = startOffsetTop;
         this.zoomfactor = zoomfactor;
+        this.hassMoved = false;
     }
 
     /**
@@ -35,6 +38,7 @@ class MouseDrag {
      * @returns An object with the new left and top position of the box.
      */
     returnNewLeftTop(mousex: number = 0, mousey: number = 0) {
+        if (mousex != this.startDragx || mousey != this.startDragy) this.hassMoved = true;
         return ( {
             left: (mousex - this.startDragx) / this.zoomfactor + this.startOffsetLeft,
             top: (mousey - this.startDragy) / this.zoomfactor + this.startOffsetTop});

src/sitplan/SituationPlanElement.ts

@@ -99,7 +99,7 @@ class SituationPlanElement {
 
     private static readonly ROTATES_360_DEGREES_TYPES = new Set(['Contactdoos','Lichtpunt','Drukknop','Media','Schakelaars','Lichtcircuit']);
 
-    rotates360degrees(): boolean {
+    isEDSSymbolAndRotates360degrees(): boolean {
         if (this.isEendraadschemaSymbool()) {
             let electroElement: Electro_Item = structure.getElectroItemById(this.electroItemId);
             if (electroElement != null) {
@@ -108,7 +108,7 @@ class SituationPlanElement {
             }
             return false;
         }
-        return true;
+        return false;
     }
 
     /**
@@ -254,7 +254,7 @@ class SituationPlanElement {
             let spiegel = false;
 
             if ( (rotate >= 90) && (rotate < 270) ) {
-                if (this.rotates360degrees()) spiegel = true;
+                if (this.isEDSSymbolAndRotates360degrees()) spiegel = true;
                 if (this.isEendraadschemaSymbool()) rotate = rotate + 180;
             }
 

src/sitplan/SituationPlanView.ts

@@ -36,6 +36,9 @@ class SituationPlanView {
         // Verwijder alle selecties wanneer we ergens anders klikken dan op een box
         this.event_manager.addEventListener(outerdiv, 'mousedown', () => { this.clearSelection(); } );
         this.event_manager.addEventListener(outerdiv, 'touchstart', () => { this.clearSelection(); } );
+
+        // Voegt event handlers toe voor de pijltjestoesten
+        this.attachArrowKeys();
     }
 
     /**
@@ -256,11 +259,13 @@ class SituationPlanView {
         function getRotationTransform(sitPlanElement: SituationPlanElement | null): string {
             if (!sitPlanElement) return '';
 
-            let rotation: number = sitPlanElement.rotate % 360;
+            let rotation: number = sitPlanElement.rotate;
+            while (rotation < 0) rotation += 360;
+            rotation = rotation % 360;
             let spiegel: boolean = false;
 
             if ((rotation >= 90) && (rotation < 270)) {
-                if (sitPlanElement.rotates360degrees()) spiegel = true;
+                if (sitPlanElement.isEDSSymbolAndRotates360degrees()) spiegel = true;
                 if (sitPlanElement.isEendraadschemaSymbool()) rotation -= 180;
             }
 
@@ -478,16 +483,25 @@ class SituationPlanView {
      * @param event - De gebeurtenis die de sleepactie stopt (muisklik release of touchend).
      */
     private stopDrag = (event) => {
+        function showArrowHelp() {
+            const helperTip = new HelperTip(appDocStorage);
+            helperTip.show('sitplan.arrowdrag',
+            `<h3>Tip: Symbolen verplaatsen</h3>
+            <p>Voor fijnere controle tijdens het verschuiven van symbolen kan u ook de pijltjes op het toetsenbord gebruiken.</p>`,true);
+        }
+
         event.stopPropagation();
 
         switch (event.type) {
             case 'mouseup':
                 document.removeEventListener('mousemove', this.processDrag);
                 document.removeEventListener('mouseup', this.stopDrag);
+                if (this.mousedrag.hassMoved) showArrowHelp();
                 break;
             case 'touchend':
                 document.removeEventListener('touchmove', this.processDrag);
                 document.removeEventListener('touchend', this.stopDrag);
+                if (this.mousedrag.hassMoved) showArrowHelp();
                 break;
             default:
                 console.error('Ongeldige event voor stopDrag functie');
@@ -555,6 +569,45 @@ class SituationPlanView {
         this.updateRibbon();
     }
 
+    /**
+     * Voegt eventlisteners toe om pijltjestoetsen te hanteren.
+     * 
+     * Wanneer een pijltjestoets wordt ingedrukt, en er is een box geselecteerd, dan wordt de positie van de box aangepast.
+     * De positie van de box wordt aangepast door de posx of posy van het element in het situatieplan te veranderen.
+     * Daarna wordt de functie updateSymbolAndLabelPosition aangeroepen om de positie van het symbool en het label van de box te updaten.
+     */
+    attachArrowKeys() {
+        
+        this.event_manager.addEventListener(document, 'keydown', (event) => {
+            if (this.outerdiv.style.display == 'none') return; // Check if we are really in the situationplan, if not, the default scrolling action will be executed by the browser
+            if (document.getElementById('popupOverlay') != null) return; // We need the keys when editing symbol properties.
+
+            if (this.selectedBox) { // Check if we have a selected box, if not, the default scrolling action will be executed by the browser
+                event.preventDefault();
+                const sitPlanElement = (this.selectedBox as any).sitPlanElementRef;
+                if (!sitPlanElement) return;
+
+                switch (event.key) {
+                    case 'ArrowLeft':
+                        sitPlanElement.posx -= 1;
+                        break;
+                    case 'ArrowRight':
+                        sitPlanElement.posx += 1;
+                        break;
+                    case 'ArrowUp':
+                        sitPlanElement.posy -= 1;
+                        break;
+                    case 'ArrowDown':
+                        sitPlanElement.posy += 1;
+                        break;
+                    default:
+                        return;
+                }
+                this.updateSymbolAndLabelPosition(sitPlanElement);
+            }
+        });
+    }
+
     /**
      * Hangt een klik event listener aan het gegeven element met als doel de huidig geselecteerde box te verwijderen.
      * 
@@ -900,8 +953,8 @@ function showSituationPlanPage() {
     // Initialize the HelperTip with the storage
     const helperTip = new HelperTip(appDocStorage);
     helperTip.show('sitplan.introductie',
-    `<h3>Situatieschema</h3>
-    <p>Op deze pagina kan u een situatieschema tekenen</p>
+    `<h3>Situatieschema tekenen</h3>
+    <p>Op deze pagina kan u een situatieschema tekenen.</p>
     <p>Laad een plattegrond met de knop "Uit bestand" en voeg symbolen toe met de knop "Uit schema".</p>
     <p>Klik <a href="Documentation/sitplandoc.pdf" target="_blank" rel="noopener noreferrer">hier</a> om in een nieuw venster de documentatie te bekijken.</p>
     <p>Het situatieschema werd recent toegevoegd aan het programma en zal nog verder ontwikkeld worden over de komende weken. Opmerkingen zijn welkom in het "contact"-formulier.</p>`);