svg editor gut

app/assets/css/device-type-edit.css

@@ -1,5 +1,5 @@
 .device-type-edit {
-    max-width: 800px;
+    max-width: 1200px;
     margin: 20px auto;
     padding: 20px;
 }
@@ -105,7 +105,7 @@
 
 .device-type-edit .shape-editor {
     display: grid;
-    grid-template-columns: 180px 1fr 320px;
+    grid-template-columns: 1fr;
     gap: 16px;
     margin-top: 16px;
 }
@@ -145,13 +145,20 @@
     flex-wrap: wrap;
 }
 
-.device-type-edit .shape-editor-canvas {
+.device-type-edit .shape-editor-canvas,
+.device-type-edit .shape-toolbox,
+.device-type-edit .shape-overlay {
     border: 1px solid #ddd;
     border-radius: 6px;
     background: white;
     padding: 12px;
 }
 
+.device-type-edit .shape-toolbox,
+.device-type-edit .shape-overlay {
+    width: 100%;
+}
+
 .device-type-edit .shape-editor-canvas svg {
     width: 100%;
     min-height: 320px;

app/assets/js/device-type-shape-editor.js

@@ -8,6 +8,8 @@
         '10': { width: 420, height: 80 }
     };
 
+    let portOptionsInput = null;
+
     function initEditor() {
         const editor = document.getElementById('device-type-shape-editor');
         const svg = document.getElementById('shape-canvas');
@@ -36,6 +38,7 @@
             portNameLabel: document.getElementById('shape-port-name-label'),
             deleteButton: document.getElementById('shape-delete')
         };
+        portOptionsInput = document.getElementById('shape-port-options');
 
         const metaInputs = {
             formFactor: document.getElementById('shape-meta-form-factor'),
@@ -68,6 +71,7 @@
         let selectedShapeId = null;
         let shapes = [];
         let meta = getDefaultMeta();
+        let portNameOptions = readPortOptions();
 
         const definition = readDefinition(hiddenInput.value);
         shapes = normalizeShapeList(definition.shapes);
@@ -78,6 +82,7 @@
         bindOverlayEvents(overlay);
         bindMetaEvents();
         applyFormFactorPreset();
+        populatePortSelect();
         applyMetaToInputs();
         persist();
         render();
@@ -250,6 +255,20 @@
             });
         }
 
+        function populatePortSelect() {
+            if (!overlay.portName) {
+                return;
+            }
+            portNameOptions = readPortOptions();
+            overlay.portName.innerHTML = '<option value="">- Port wählen -</option>';
+            portNameOptions.forEach((name) => {
+                const option = document.createElement('option');
+                option.value = name;
+                option.textContent = name;
+                overlay.portName.appendChild(option);
+            });
+        }
+
         function handleMetaInputChange(event) {
             const targetId = event?.target?.id;
             applyMetaFromInputs();
@@ -284,17 +303,14 @@
                 return;
             }
 
-            if (meta.heightHe !== 1) {
-                return;
-            }
-
             const preset = FORM_FACTOR_PRESETS[meta.formFactor];
             if (!preset) {
                 return;
             }
 
             meta.canvasWidth = Math.max(MIN_CANVAS_WIDTH, preset.width);
-            meta.canvasHeight = Math.max(MIN_CANVAS_HEIGHT, preset.height);
+            const targetHeight = Math.round(preset.height * Math.max(1, meta.heightHe));
+            meta.canvasHeight = Math.max(MIN_CANVAS_HEIGHT, targetHeight);
         }
 
         function applyOverlayToSelectedShape() {
@@ -405,6 +421,8 @@
                 return;
             }
 
+            populatePortSelect();
+
             overlay.type.value = selected.type;
             overlay.x.value = selected.x;
             overlay.y.value = selected.y;
@@ -665,6 +683,27 @@
         }
     }
 
+    function readPortOptions() {
+        if (!portOptionsInput) {
+            return [];
+        }
+
+        const raw = String(portOptionsInput.value || '').trim();
+        if (!raw) {
+            return [];
+        }
+
+        try {
+            const parsed = JSON.parse(raw);
+            if (!Array.isArray(parsed)) {
+                return [];
+            }
+            return parsed.filter((value) => typeof value === 'string');
+        } catch (error) {
+            return [];
+        }
+    }
+
     function readDefinition(raw) {
         const parsed = readJson(raw);
         if (Array.isArray(parsed)) {

app/assets/js/network-view.js

@@ -12,6 +12,7 @@
  * -> bewusst simpel & erweiterbar
  */
 
+(() => {
 /* =========================
  * Konfiguration
  * ========================= */
@@ -287,3 +288,4 @@ document.addEventListener('keydown', (e) => {
 
     // TODO: Delete -> Gerät entfernen?
 });
+})();

app/assets/js/svg-editor.js

@@ -12,6 +12,7 @@
  * Abhängigkeiten: keine (Vanilla JS)
  */
 
+(() => {
 /* =========================
  * Konfiguration
  * ========================= */
@@ -256,3 +257,4 @@ document.addEventListener('keydown', (e) => {
         deleteSelectedPort();
     }
 });
+})();

app/modules/device_types/edit.php

@@ -234,7 +234,9 @@ $pageTitle = $isEdit ? "Gerätetyp bearbeiten: " . htmlspecialchars($deviceType[
                             </label>
                             <label id="shape-port-name-label" hidden>
                                 Port-Name
-                                <input type="text" id="shape-param-port-name" placeholder="z.B. Gi1/0/1">
+                                <select id="shape-param-port-name">
+                                    <option value="">- Port wählen -</option>
+                                </select>
                             </label>
                         </div>
 
@@ -299,6 +301,7 @@ $pageTitle = $isEdit ? "Gerätetyp bearbeiten: " . htmlspecialchars($deviceType[
                         <?php endif; ?>
                     </tbody>
                 </table>
+                <input type="hidden" id="shape-port-options" value="<?php echo htmlspecialchars(json_encode(array_values(array_column($ports, 'name'))), ENT_QUOTES); ?>">
 
                 <div class="port-actions">
                     <button type="button" class="button" id="add-port-row">+ Port hinzufügen</button>