diff --git a/builddate.js b/builddate.js index b6e2b06..2db28da 100644 --- a/builddate.js +++ b/builddate.js @@ -1 +1 @@ -var CONF_builddate="20250125-215843" +var CONF_builddate="20250202-145724" diff --git a/eendraadschema.js b/eendraadschema.js index b5eaa1a..6164aac 100644 --- a/eendraadschema.js +++ b/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', "

Tip: Symbolen verplaatsen

\n

Voor fijnere controle tijdens het verschuiven van symbolen kan u ook de pijltjes op het toetsenbord gebruiken.

", 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', "

Situatieschema

\n

Op deze pagina kan u een situatieschema tekenen

\n

Laad een plattegrond met de knop \"Uit bestand\" en voeg symbolen toe met de knop \"Uit schema\".

\n

Klik hier om in een nieuw venster de documentatie te bekijken.

\n

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.

"); + helperTip.show('sitplan.introductie', "

Situatieschema tekenen

\n

Op deze pagina kan u een situatieschema tekenen.

\n

Laad een plattegrond met de knop \"Uit bestand\" en voeg symbolen toe met de knop \"Uit schema\".

\n

Klik hier om in een nieuw venster de documentatie te bekijken.

\n

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.

"); } /** * 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 += '' + ''; 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 += '' + ''; // Teken aantal lampen en symbool 'h' voor halfwaterdicht diff --git a/src/List_Item/Schakelaars/Lichtcircuit.ts b/src/List_Item/Schakelaars/Lichtcircuit.ts index 4467d33..de63289 100644 --- a/src/List_Item/Schakelaars/Lichtcircuit.ts +++ b/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 += '' + ''; diff --git a/src/List_Item/Schakelaars/Schakelaar.ts b/src/List_Item/Schakelaars/Schakelaar.ts index 174179d..a17bf78 100644 --- a/src/List_Item/Schakelaars/Schakelaar.ts +++ b/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 += '' + ''; diff --git a/src/documentation/HelperTip.ts b/src/documentation/HelperTip.ts index 306a5f2..ffcb0f3 100644 --- a/src/documentation/HelperTip.ts +++ b/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); diff --git a/src/sitplan/MouseDrag.ts b/src/sitplan/MouseDrag.ts index 3dc18d6..f53cf6d 100644 --- a/src/sitplan/MouseDrag.ts +++ b/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}); diff --git a/src/sitplan/SituationPlanElement.ts b/src/sitplan/SituationPlanElement.ts index c2c6906..8ab90d3 100644 --- a/src/sitplan/SituationPlanElement.ts +++ b/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; } diff --git a/src/sitplan/SituationPlanView.ts b/src/sitplan/SituationPlanView.ts index f647431..25e1553 100644 --- a/src/sitplan/SituationPlanView.ts +++ b/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', + `

Tip: Symbolen verplaatsen

+

Voor fijnere controle tijdens het verschuiven van symbolen kan u ook de pijltjes op het toetsenbord gebruiken.

`,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', - `

Situatieschema

-

Op deze pagina kan u een situatieschema tekenen

+ `

Situatieschema tekenen

+

Op deze pagina kan u een situatieschema tekenen.

Laad een plattegrond met de knop "Uit bestand" en voeg symbolen toe met de knop "Uit schema".

Klik hier om in een nieuw venster de documentatie te bekijken.

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.

`);