- Toevoegen context menu in het situatieschema voor snellere aanpassing van symbool-eigenschappen.

- Adreslocatie roteert mee indien via het contextmenu een rotatie wordt uitgevoerd.
- In het print-menu twee HTML veldjes een formeel id gegeven (warning google Chrome)
- Enter toets op een symbool opent nu ook de symbooleigenschappen
- Ctrl-pijlen doet nu een symbool roteren in het situatieschema

Author: igoethal

builddate.js

@@ -1 +1 @@
-var CONF_builddate="20250202-152459"
+var CONF_builddate="20250209-140637"

css/styles.css

@@ -398,3 +398,38 @@ table {
   transform: translate(-50%, -50%);
   pointer-events: none; /* Allow clicks to pass through the SVG */
 }
+
+.context-menu {
+  position: absolute;
+  display: none;
+  border: 1px solid #aaa;
+  background-color: #f0f0f0;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
+  z-index: 999999999; /* Try to always be on top */
+  font-size: 12px;
+  line-height: 1.0;
+}
+
+.context-menu-item {
+  padding: 4px 6px;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.context-menu-item:hover {
+  background-color: #e0e0e0;
+}
+
+.context-menu-shortcut {
+  margin-left: 16px;
+  color: #888;
+}
+
+.context-menu-separator {
+  border: none;
+  border-top: 1px solid #ddd;
+  margin: 2px 0;
+}
+

eendraadschema.js

@@ -295,6 +295,7 @@ function restart_all() {
 
 function toggleAppView(type: '2col' | 'config' | 'draw') {
     let lastview = structure.properties.currentView;
+    if ((structure.sitplanview != null) && (structure.sitplanview.contextMenu != null)) structure.sitplanview.contextMenu.hide();
 
     structure.properties.currentView = type;
     if (type === '2col') {  
@@ -354,10 +355,12 @@ function load_example(nr: number) {
 }
 
 function undoClicked() {
+    if ((structure.sitplanview != null) && (structure.sitplanview.contextMenu != null)) structure.sitplanview.contextMenu.hide();
     undostruct.undo();    
 }
 
 function redoClicked() {
+    if ((structure.sitplanview != null) && (structure.sitplanview.contextMenu != null)) structure.sitplanview.contextMenu.hide();
     undostruct.redo();    
 }
 

src/main.ts

@@ -309,6 +309,7 @@ class Print_Table {
 
     insertHTMLselectPaperSize(div: HTMLElement, redrawCallBack: RedrawCallBackFunction): void {
         var select: HTMLSelectElement = document.createElement('select');
+        select.id = 'select_papersize_input';
 
         var optionA4: HTMLOptionElement = document.createElement('option');
         optionA4.value = 'A4';
@@ -342,6 +343,7 @@ class Print_Table {
 
     insertHTMLselectdpi(div: HTMLElement, redrawCallBack: RedrawCallBackFunction): void {
         var select: HTMLSelectElement = document.createElement('select');
+        select.id = "select_dpi_input";
 
         var option300: HTMLOptionElement = document.createElement('option');
         option300.value = '300';

src/print/Print_Table.ts

@@ -0,0 +1,113 @@
+class ContextMenu {
+    private menuItems: { label: string, shortcut?: string, callback: () => void }[] = [];
+    private menuElement: HTMLElement | null = null;
+
+    /**
+     * Constructor voor het initialiseren van het contextmenu-element.
+     * @param div - Het HTML-element waaraan het contextmenu wordt toegevoegd.
+     */
+    constructor(div: HTMLElement = document.body) {
+        this.menuElement = document.createElement('div');
+        this.menuElement.className = 'context-menu';
+        div.appendChild(this.menuElement);
+    }
+
+    /**
+     * Wis alle menu-items.
+     */
+    clearMenu(): void {
+        this.menuItems = [];
+        if (this.menuElement) {
+            this.menuElement.innerHTML = '';
+        }
+    }
+
+    /**
+     * Voeg een menu-item toe met een optionele sneltoets.
+     * @param label - De tekstlabel van het menu-item.
+     * @param callback - De functie die wordt aangeroepen bij het klikken op het menu-item.
+     * @param shortcut - De optionele sneltoets voor het menu-item.
+     */
+    addMenuItem(label: string, callback: () => void, shortcut?: string): void {
+        this.menuItems.push({ label, shortcut, callback });
+    }
+
+    /**
+     * Voeg een scheidingslijn toe aan het menu.
+     */
+    addLine(): void {
+        this.menuItems.push({ label: 'separator', callback: () => {} });
+    }
+
+    /**
+     * Render de menu-items.
+     */
+    private renderMenu(): void {
+        if (this.menuElement) {
+            this.menuElement.innerHTML = '';
+            this.menuItems.forEach((item, index) => {
+                if (item.label === 'separator') {
+                    const separator = document.createElement('hr');
+                    separator.className = 'context-menu-separator';
+                    this.menuElement.appendChild(separator);
+                } else {
+                    const menuItem = document.createElement('div');
+                    menuItem.className = 'context-menu-item';
+
+                    const labelElement = document.createElement('span');
+                    labelElement.textContent = item.label;
+
+                    const shortcutElement = document.createElement('span');
+                    shortcutElement.textContent = item.shortcut || '';
+                    shortcutElement.className = 'context-menu-shortcut';
+
+                    menuItem.appendChild(labelElement);
+                    menuItem.appendChild(shortcutElement);
+
+                    menuItem.addEventListener('click', () => {
+                        item.callback();
+                        this.hide();
+                    });
+
+                    this.menuElement.appendChild(menuItem);
+                }
+            });
+        }
+    }
+
+    /**
+     * Toon het contextmenu op de locatie van de muisklik.
+     * @param event - Het muisgebeurtenisobject.
+     */
+    show(event: MouseEvent): void {
+        if (this.menuElement) {
+            this.renderMenu();
+            this.menuElement.style.display = 'block';
+            const { clientX, clientY } = event;
+            const { innerWidth, innerHeight } = window;
+            const { offsetWidth, offsetHeight } = this.menuElement;
+
+            let left = clientX;
+            let top = clientY;
+
+            if (left + offsetWidth > innerWidth) {
+                left = innerWidth - offsetWidth;
+            }
+            if (top + offsetHeight > innerHeight) {
+                top = innerHeight - offsetHeight;
+            }
+
+            this.menuElement.style.left = `${left}px`;
+            this.menuElement.style.top = `${top}px`;
+        }
+    }
+
+    /**
+     * Verberg het contextmenu.
+     */
+    hide(): void {
+        if (this.menuElement) {
+            this.menuElement.style.display = 'none';
+        }
+    }
+}

src/sitplan/ContextMenu.ts

@@ -125,6 +125,17 @@ class SituationPlanElement {
         if (this.adrestype === 'manueel') this.adres = adres; else this.adres = null;
     }
 
+    /**
+     * setAdresLocation
+     * 
+     * @param adreslocation string: 'rechts' of 'links' of 'boven' of 'onder'
+     */
+
+
+    setAdresLocation(adreslocation: AdresLocation) {
+        this.adreslocation = adreslocation;
+    }
+
     /** 
      * getAdresType
      *