Skip to content

Commit

Permalink
Aanpassingen helpertip:
Browse files Browse the repository at this point in the history 
- 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.
  • Loading branch information
@igoethal
igoethal committed Feb 2, 2025
1 parent 61e2248 commit d116421
Show file tree
Hide file tree
Showing 8 changed files with 139 additions and 20 deletions.
2 changes: 1 addition & 1 deletion builddate.js
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
var CONF_builddate="20250125-215843"
var CONF_builddate="20250202-145724"
77 changes: 68 additions & 9 deletions eendraadschema.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -1991,6 +1993,7 @@ var MouseDrag = /** @class */ (function () {
this.startOffsetLeft = 0;
this.startOffsetTop = 0;
this.zoomfactor = 1;
this.hassMoved = false;
}
/**
* Start the drag.
Expand All @@ -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.
Expand All @@ -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
Expand Down Expand Up @@ -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) {
Expand All @@ -2342,7 +2348,7 @@ var SituationPlanElement = /** @class */ (function () {
}
return false;
}
return true;
return false;
};
/**
* setAdres
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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');
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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.
*
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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 });
Expand Down Expand Up @@ -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
Expand Down
2 changes: 2 additions & 0 deletions src/List_Item/Schakelaars/Lichtcircuit.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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" />';

Expand Down
2 changes: 1 addition & 1 deletion src/List_Item/Schakelaars/Schakelaar.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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" />';
Expand Down
5 changes: 3 additions & 2 deletions src/documentation/HelperTip.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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`;

Expand Down Expand Up @@ -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);
Expand Down
4 changes: 4 additions & 0 deletions src/sitplan/MouseDrag.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -26,6 +28,7 @@ class MouseDrag {
this.startOffsetLeft = startOffsetLeft;
this.startOffsetTop = startOffsetTop;
this.zoomfactor = zoomfactor;
this.hassMoved = false;
}

/**
Expand All @@ -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});
Expand Down
6 changes: 3 additions & 3 deletions src/sitplan/SituationPlanElement.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -108,7 +108,7 @@ class SituationPlanElement {
}
return false;
}
return true;
return false;
}

/**
Expand Down Expand Up @@ -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;
}

Expand Down
61 changes: 57 additions & 4 deletions src/sitplan/SituationPlanView.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}

/**
Expand Down Expand Up @@ -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;
}

Expand Down Expand Up @@ -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');
Expand Down Expand Up @@ -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.
*
Expand Down Expand Up @@ -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>`);
Expand Down

0 comments on commit d116421

Please sign in to comment.