-
Notifications
You must be signed in to change notification settings - Fork 24
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Zware refactoring van situatieplan tekenmodule met het oog op stabili…
…teit en performance - Nieuwe class ElectroItemZoeker - Nieuwe file voor geometrische functies - Nieuwe class voor drag en drop functies - Code om missing links naar eendraadschema te verwijderen verplaatst naar SituationPlan - Nieuwe eigenschap needsViewUpdate in SituationPlanElement om te vermijden dan alles altijd opnieuw getekend wordt - Hernoemen van de file waarin de eigenschappen van situatieplan elementen kunnen gewijzigd worden - Aanzienlijke wijzigingen in SituationPlanView met het oog op performance, vooral in google Chrome. Door gebruik te maken van een parameter needsViewUpdate en van documentfragments wordt het aantal DOM updates sterk terug gedrongen en komt de performance van google chrome opnieuw in de buurt van die van firefox - class EventManager heeft zijn eigen file gekregen - outerbox heet nu outerdiv - Er kan niet meer geklikked worden op de undo functies in de ribbon als er geen undo mogelijk is.
- Loading branch information
Showing
18 changed files
with
1,434 additions
and
768 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1 @@ | ||
| var CONF_builddate="20250105-150906" | ||
| var CONF_builddate="20250112-145253" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| /** | ||
| * Manages the addition and removal of event listeners on HTML elements. | ||
| */ | ||
| class EventManager { | ||
| private listeners: { element: HTMLElement, type: string, listener: EventListenerOrEventListenerObject }[] = []; | ||
|
|
||
| /** | ||
| * Adds an event listener to a specified HTML element. If a listener of the same | ||
| * type already exists on the element, it is removed before adding the new one. | ||
| * | ||
| * @param element - The HTML element to attach the event listener to. | ||
| * @param type - The type of the event. | ||
| * @param listener - The event listener function or object. | ||
| */ | ||
| addEventListener(element: HTMLElement, type: string, listener: EventListenerOrEventListenerObject) { | ||
| const existingListenerIndex = this.listeners.findIndex(l => l.element === element && l.type === type); | ||
| if (existingListenerIndex !== -1) { | ||
| const existingListener = this.listeners[existingListenerIndex]; | ||
| element.removeEventListener(type, existingListener.listener); | ||
| this.listeners.splice(existingListenerIndex, 1); | ||
| } | ||
|
|
||
| this.listeners.push({ element, type, listener }); | ||
| element.addEventListener(type, listener); | ||
| } | ||
|
|
||
| /** | ||
| * Removes all event listeners managed by this EventManager instance. | ||
| */ | ||
| removeAllEventListeners() { | ||
| this.listeners.forEach(({ element, type, listener }) => { | ||
| element.removeEventListener(type, listener); | ||
| }); | ||
| this.listeners = []; | ||
| } | ||
|
|
||
| /** | ||
| * Disposes of the EventManager by removing all event listeners. | ||
| */ | ||
| dispose() { | ||
| this.removeAllEventListeners(); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| /** | ||
| * Class gebruikt in SituationPlanView om te zoeken naar electroitems op basis van de kringnaam. | ||
| * Dit laat toe items to selecteren uit het volledige eendraadschema en ze te plaatsen op het situatieschema. | ||
| * | ||
| * Deze class refereert naar de volgende globale variabelen: | ||
| * - structure | ||
| */ | ||
|
|
||
| class ElectroItemZoeker { | ||
|
|
||
| private excludedTypes = ['Aansluiting','Bord','Kring','Domotica','Domotica module (verticaal)', | ||
| 'Domotica gestuurde verbruiker','Leiding','Splitsing','Verlenging', | ||
| 'Vrije ruimte','Meerdere verbruikers']; | ||
|
|
||
| private data: {id: number, kringnaam: string, adres: string, type: string}[] = []; | ||
|
|
||
| /** | ||
| * Constructor van de ElectroItemZoeker. | ||
| * | ||
| * Initialiseert de lijst van alle toegestane ElectroItems in het situatieplan. | ||
| */ | ||
|
|
||
| constructor() { | ||
| this.reCalculate(); | ||
| } | ||
|
|
||
| /** | ||
| * Geeft de lijst van alle toegestane ElectroItems in het situatieplan retour. | ||
| * @returns {Object[]} een lijst van objecten met de volgende structuur: | ||
| * {id: number, kringnaam: string, adres: string, type: string} | ||
| */ | ||
|
|
||
| getData() { | ||
| return this.data; | ||
| } | ||
|
|
||
| /** | ||
| * Geeft een lijst van alle unieke kringnamen retour uit de lijst van ElectroItems. | ||
| * @returns {string[]} een lijst van unieke kringnamen. | ||
| */ | ||
|
|
||
| getUniqueKringnaam(): string[] { | ||
| return Array.from(new Set(this.data.map(x => x.kringnaam))); | ||
| } | ||
|
|
||
| /** | ||
| * Geeft een lijst van alle ElectroItems retour die behoren tot de kring met de naam 'kringnaam'. | ||
| * @param {string} kringnaam - de naam van de kring. | ||
| * @returns {Object[]} een lijst van objecten met de volgende structuur: | ||
| * {id: number, adres: string, type: string} | ||
| */ | ||
|
|
||
| getElectroItemsByKring(kringnaam: string): {id: number, adres: string, type: string}[] { | ||
| return this.data.filter(x => x.kringnaam === kringnaam).map(x => ({id: x.id, adres: x.adres, type: x.type})); | ||
| } | ||
|
|
||
| /** | ||
| * Rekent de lijst van alle toegestane ElectroItems opnieuw uit. | ||
| * | ||
| * Deze methode wordt gebruikt om de lijst van ElectroItems te vullen die in het situatieplan gebruikt mogen worden. | ||
| * De lijst wordt opnieuw uitgerekend door de volgende stappen: | ||
| * 1. Doorlopen alle actieve ElectroItems in de structuur. | ||
| * 2. Voor elke ElectroItem worden de kringnaam en het type bepaald. | ||
| * 3. Als de kringnaam niet leeg is en het type niet voorkomt in de lijst van uitgesloten types, dan wordt de ElectroItem toegevoegd aan de lijst. | ||
| * 4. De ElectroItem wordt toegevoegd met de volgende structuur: {id: number, kringnaam: string, adres: string, type: string} | ||
| */ | ||
|
|
||
| reCalculate() { | ||
| for (let i = 0; i<structure.length; i++) { | ||
| if (structure.active[i]) { | ||
| let id:number = structure.id[i]; | ||
| let kringnaam:string = structure.findKringName(id).trim(); | ||
| if (kringnaam != '') { | ||
| let type:string = (structure.data[i] as Electro_Item).getType(); | ||
| if ( (type != null) && (this.excludedTypes.indexOf(type) === -1) ) { | ||
| let adres:string = (structure.data[i] as Electro_Item).getReadableAdres(); | ||
| this.data.push({id: id, kringnaam: kringnaam, adres:adres, type: type}); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| /** | ||
| * Functie die de breedte en hoogte van een rechthoek als invoer neemt, evenals een rotatie rond het midden van de rechthoek. | ||
| * De functie retourneert de breedte en hoogte van de kleinste rechthoek die de geroteerde rechthoek omsluit met zijden langs de X- en Y-assen. | ||
| */ | ||
|
|
||
| function getRotatedRectangleSize(width: number, height: number, rotation: number) { | ||
| const rotationInRadians = rotation * Math.PI / 180; | ||
| const cos = Math.cos(rotationInRadians); | ||
| const sin = Math.sin(rotationInRadians); | ||
| const rotatedWidth = Math.abs(width * cos) + Math.abs(height * sin); | ||
| const rotatedHeight = Math.abs(width * sin) + Math.abs(height * cos); | ||
| return { width: rotatedWidth, height: rotatedHeight }; | ||
| } | ||
|
|
||
| /** | ||
| * Functie die de breedte en hoogte van een rechthoek als invoer neemt, evenals een rotatie rond het midden van de rechthoek. | ||
| * De functie retourneert de breedte en hoogte van de rechthoek die voldoet aan de volgende eigenschappen: | ||
| * - De zijden zijn parallel aan de X-as en de Y-as. | ||
| * - De rechthoek snijdt de X-as en Y-as in dezelfde punten als de originele geroteerde rechthoek | ||
| * | ||
| * Deze functie kan gebruikt worden om de locatie van labels te bepalen. | ||
| */ | ||
|
|
||
| function getXYRectangleSize(width: number, height: number, rotation: number) { | ||
| rotation = Math.abs(rotation) % 180; | ||
| if (rotation > 90) rotation = 180 - rotation; | ||
| const rotationInRadians = rotation * Math.PI / 180; | ||
| const cos = Math.cos(rotationInRadians); | ||
| const sin = Math.sin(rotationInRadians); | ||
| return { width: Math.min(width/cos,height/sin), height: Math.min(width/sin,height/cos) }; | ||
| } | ||
|
|
||
| /** | ||
| * Cache het resultaat van getPixelsPerMillimeter() om de overhead van het maken en verwijderen van een DOM-element bij elke oproep te voorkomen. | ||
| */ | ||
| let cachedPixelsPerMillimeter: number | null = null; | ||
|
|
||
| /** | ||
| * Berekent het aantal pixels in een millimeter op het huidige scherm. | ||
| * Maakt gebruik van een cache om de overhead van het maken en verwijderen van een DOM-element bij elke oproep te voorkomen. | ||
| * @returns {number} Het aantal pixels in een millimeter. | ||
| */ | ||
| function getPixelsPerMillimeter(): number { | ||
| if (cachedPixelsPerMillimeter === null) { | ||
| const div = document.createElement('div'); | ||
| div.style.width = '10mm'; | ||
| div.style.position = 'absolute'; | ||
| document.body.appendChild(div); | ||
| const widthInPixels = div.offsetWidth; | ||
| document.body.removeChild(div); | ||
| cachedPixelsPerMillimeter = widthInPixels / 10; | ||
| } | ||
| return cachedPixelsPerMillimeter; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| /** | ||
| * Class that helps with dragging a box on the situation plan view. | ||
| * It keeps track of the start position of the drag and the zoomfactor. | ||
| */ | ||
| class MouseDrag { | ||
|
|
||
| private startDragx: number = 0; | ||
| private startDragy: number = 0; | ||
| private startOffsetLeft: number = 0; | ||
| private startOffsetTop: number = 0; | ||
| private zoomfactor: number = 1; | ||
|
|
||
| /** | ||
| * Start the drag. | ||
| * @param mousex The x position of the mouse when the drag starts. | ||
| * @param mousey The y position of the mouse when the drag starts. | ||
| * @param startOffsetLeft The left position of the box when the drag starts. | ||
| * @param startOffsetTop The top position of the box when the drag starts. | ||
| * @param zoomfactor The zoomfactor of the situation plan view when the drag starts. | ||
| */ | ||
| startDrag(mousex: number = 0, mousey: number = 0, | ||
| startOffsetLeft: number = 0, startOffsetTop: number = 0, | ||
| zoomfactor: number = 1) { | ||
| this.startDragx = mousex; | ||
| this.startDragy = mousey; | ||
| this.startOffsetLeft = startOffsetLeft; | ||
| this.startOffsetTop = startOffsetTop; | ||
| this.zoomfactor = zoomfactor; | ||
| } | ||
|
|
||
| /** | ||
| * Return the new left and top position of the box based on the current mouse position. | ||
| * @param mousex The current x position of the mouse. | ||
| * @param mousey The current y position of the mouse. | ||
| * @returns An object with the new left and top position of the box. | ||
| */ | ||
| returnNewLeftTop(mousex: number = 0, mousey: number = 0) { | ||
| return ( { | ||
| left: (mousex - this.startDragx) / this.zoomfactor + this.startOffsetLeft, | ||
| top: (mousey - this.startDragy) / this.zoomfactor + this.startOffsetTop}); | ||
| } | ||
| } |
Oops, something went wrong.