Fix node creation: proper angle routing, axios refresh, thema form

Root causes fixed:
1. branchAngle routing only matched 0° — now uses isExtendAngle()
   for all extend angles (0/180/45/315), vertical (90/270) = fork
2. handleForkBranch did nothing at dim 1 — now opens thema form
3. After form submit, Inertia reloaded entire page losing canvas
   dimension state — now uses axios + refreshMapData() via API
4. Custom metro node form used dead Inertia useForm refs

Changes:
- All creation flows now use axios POST + refreshMapData() which
  fetches /api/map/strategy or /api/map/project/{id} without page
  reload, preserving the canvas dimension and zoom state
- New thema creation modal (for ↑↓ fork at dim 1)
- Track creation modal updated to use axios (for ↑↓ fork in dim 2)
- Metro node creation modal updated to use axios
- CommitmentForm @close now triggers refreshMapData()
- CommitmentForm eigenaar_id now has required validation

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

resources/js/Pages/Map/MetroMap.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { ref, computed } from 'vue'
 import { usePage, router, useForm } from '@inertiajs/vue3'
+import axios from 'axios'
 import MetroCanvas from '@/Components/MetroMap/MetroCanvas.vue'
 import Breadcrumb from '@/Components/MetroMap/Breadcrumb.vue'
 import NodePreview from '@/Components/MetroMap/NodePreview.vue'
@@ -88,13 +89,29 @@ const handleDimensionChange = (event) => {
     selectedNode.value = null
 }
 
+// --- Refresh map data without full page reload ---
+const refreshMapData = async () => {
+    try {
+        const url = currentProjectId.value
+            ? `/api/map/project/${currentProjectId.value}`
+            : '/api/map/strategy'
+        const { data } = await axios.get(url)
+        // Update the reactive props — Inertia page props are mutable
+        Object.assign(props.mapData, data)
+    } catch (e) {
+        // Fallback: full page reload
+        router.reload()
+    }
+}
+
 // --- Branch handle node creation ---
+const isExtendAngle = (angle) => [0, 180, 45, 315].includes(angle)
+
 const handleCreateNode = (event) => {
-    if (event.branchAngle === 0) {
+    if (isExtendAngle(event.branchAngle)) {
-        // Extend existing line — determine entity type from lineId
         handleExtendLine(event)
     } else {
-        // Fork — create a new track + first node
+        // Vertical (90°, 270°) = new track
         handleForkBranch(event)
     }
 }
@@ -105,101 +122,124 @@ const handleExtendLine = (event) => {
     // In dim 2 (project level): determine what type of entity to create
     if (event.depth > 1 && event.parentEntityType === 'project') {
         if (lineId.startsWith('lifecycle-') || lineId === 'lifecycle') {
-            // Can't manually add lifecycle phases — they advance via transition
+            return // Lifecycle phases advance via transition, not manual creation
-            return
         }
         if (lineId.startsWith('commitments-') || lineId === 'commitments') {
-            pendingCreatePosition.value = { x: event.x, y: event.y }
+            pendingCreateEvent.value = event
             showCommitmentForm.value = true
             return
         }
         if (lineId.startsWith('documents-') || lineId === 'documents') {
-            // Future: document upload
+            pendingCreateEvent.value = event
-            console.log('Document creation at', event.x, event.y)
+            showMetroNodeForm.value = true
             return
         }
-        // Custom line — create a metro node
+        // Custom line
-        createMetroNode(event)
+        pendingCreateEvent.value = event
+        showMetroNodeForm.value = true
         return
     }
 
-    // In dim 1 (strategy level): extend = add project to theme
+    // In dim 1 (strategy level): extend = add project
     editingProject.value = null
     showProjectForm.value = true
 }
 
 const handleForkBranch = (event) => {
-    // Fork creates a new track (metro line), then the first node on it
+    if (event.depth > 1 && event.parentEntityType === 'project' && event.parentEntityId) {
-    if (event.parentEntityType === 'project' && event.parentEntityId) {
+        // Inside a project → create new metro line
-        pendingForkEvent.value = event
+        pendingCreateEvent.value = event
         showTrackForm.value = true
+    } else {
+        // At dim 1 → create new thema (= new metro line at root)
+        pendingCreateEvent.value = event
+        showThemaForm.value = true
     }
 }
 
-const pendingCreatePosition = ref(null)
+const pendingCreateEvent = ref(null)
-const pendingForkEvent = ref(null)
 
-// --- Track creation form (for fork branches) ---
+// --- Track creation form (for fork branches in dim 2) ---
 const showTrackForm = ref(false)
-const trackForm = useForm({
+const trackFormData = ref({ naam: '' })
-    project_id: null,
+const trackFormProcessing = ref(false)
-    naam: '',
-})
 
-const submitTrackForm = () => {
+const submitTrackForm = async () => {
-    trackForm.project_id = currentProjectId.value
+    trackFormProcessing.value = true
-    trackForm.post('/metro-lines', {
+    try {
-        onSuccess: () => {
+        await axios.post('/metro-lines', {
-            showTrackForm.value = false
+            project_id: currentProjectId.value,
-            trackForm.reset()
+            naam: trackFormData.value.naam,
-            pendingForkEvent.value = null
+        })
-        },
+        showTrackForm.value = false
-    })
+        trackFormData.value.naam = ''
+        pendingCreateEvent.value = null
+        await refreshMapData()
+    } catch (e) {
+        console.error('Track creation failed:', e.response?.data || e.message)
+    } finally {
+        trackFormProcessing.value = false
+    }
 }
 
-// --- Metro node creation form (for custom line extend) ---
+// --- Thema creation form (for fork branches at dim 1) ---
+const showThemaForm = ref(false)
+const themaFormData = ref({ naam: '', beschrijving: '' })
+const themaFormProcessing = ref(false)
+
+const submitThemaForm = async () => {
+    themaFormProcessing.value = true
+    try {
+        await axios.post('/themas', {
+            naam: themaFormData.value.naam,
+            beschrijving: themaFormData.value.beschrijving,
+        })
+        showThemaForm.value = false
+        themaFormData.value = { naam: '', beschrijving: '' }
+        pendingCreateEvent.value = null
+        await refreshMapData()
+    } catch (e) {
+        console.error('Thema creation failed:', e.response?.data || e.message)
+    } finally {
+        themaFormProcessing.value = false
+    }
+}
+
+// --- Metro node / generic item creation form ---
 const showMetroNodeForm = ref(false)
-const pendingMetroNodeEvent = ref(null)
+const nodeFormData = ref({ naam: '', beschrijving: '' })
-const metroNodeForm = useForm({
+const nodeFormProcessing = ref(false)
-    metro_line_id: '',
-    naam: '',
-    beschrijving: '',
-    x: 0,
-    y: 0,
-})
 
-const createMetroNode = (event) => {
+const submitMetroNodeForm = async () => {
-    pendingMetroNodeEvent.value = event
+    const event = pendingCreateEvent.value
-    // Extract metro_line_id from lineId (format: "custom-{id}" or similar)
+    if (!event) return
-    metroNodeForm.x = event.x
-    metroNodeForm.y = event.y
-    metroNodeForm.naam = ''
-    metroNodeForm.beschrijving = ''
-    showMetroNodeForm.value = true
-}
 
-const submitMetroNodeForm = () => {
+    nodeFormProcessing.value = true
-    const event = pendingMetroNodeEvent.value
+    try {
-    // The lineId from the canvas might be something like "custom-5" — extract the DB id
+        const lineId = event.lineId ?? ''
-    // For now, try to find the metro_line by matching
+        const match = lineId.match(/\d+$/)
-    const lineId = event?.lineId ?? ''
-    const match = lineId.match(/\d+$/)
-    metroNodeForm.metro_line_id = match ? match[0] : ''
 
-    metroNodeForm.post('/metro-nodes', {
+        await axios.post('/metro-nodes', {
-        onSuccess: () => {
+            metro_line_id: match ? parseInt(match[0]) : null,
-            showMetroNodeForm.value = false
+            naam: nodeFormData.value.naam,
-            metroNodeForm.reset()
+            beschrijving: nodeFormData.value.beschrijving,
-            pendingMetroNodeEvent.value = null
+            x: event.x,
-        },
+            y: event.y,
-    })
+        })
+        showMetroNodeForm.value = false
+        nodeFormData.value = { naam: '', beschrijving: '' }
+        pendingCreateEvent.value = null
+        await refreshMapData()
+    } catch (e) {
+        console.error('Node creation failed:', e.response?.data || e.message)
+    } finally {
+        nodeFormProcessing.value = false
+    }
 }
 
 // --- FAB handlers ---
 const handleCreateTheme = () => {
-    // Future: thema creation form
+    showThemaForm.value = true
-    editingProject.value = null
-    showProjectForm.value = true
 }
 
 const handleCreateTrack = () => {
@@ -293,10 +333,10 @@ const editingProject = ref(null)
             :show="showCommitmentForm"
             :project-id="currentProjectId"
             :users="users"
-            @close="showCommitmentForm = false; pendingCreatePosition = null"
+            @close="showCommitmentForm = false; pendingCreateEvent = null; refreshMapData()"
         />
 
-        <!-- Track creation modal (for fork branches and FAB) -->
+        <!-- Track creation modal (fork in dim 2) -->
         <Teleport to="body">
             <Transition name="modal-fade">
                 <div v-if="showTrackForm" class="modal-backdrop" @click="showTrackForm = false">
@@ -305,19 +345,13 @@ const editingProject = ref(null)
                         <form @submit.prevent="submitTrackForm">
                             <div class="form-group">
                                 <label class="form-label">Naam</label>
-                                <input
+                                <input v-model="trackFormData.naam" type="text" class="form-input"
-                                    v-model="trackForm.naam"
+                                    placeholder="bijv. Risico's, Acties..." required autofocus />
-                                    type="text"
-                                    class="form-input"
-                                    placeholder="bijv. Risico's, Acties..."
-                                    required
-                                    autofocus
-                                />
                             </div>
                             <div class="form-actions">
                                 <button type="button" class="btn-cancel" @click="showTrackForm = false">Annuleren</button>
-                                <button type="submit" class="btn-submit" :disabled="trackForm.processing">
+                                <button type="submit" class="btn-submit" :disabled="trackFormProcessing">
-                                    {{ trackForm.processing ? 'Bezig...' : 'Aanmaken' }}
+                                    {{ trackFormProcessing ? 'Bezig...' : 'Aanmaken' }}
                                 </button>
                             </div>
                         </form>
@@ -326,7 +360,36 @@ const editingProject = ref(null)
             </Transition>
         </Teleport>
 
-        <!-- Metro node creation modal (for custom line extend) -->
+        <!-- Thema creation modal (fork at dim 1) -->
+        <Teleport to="body">
+            <Transition name="modal-fade">
+                <div v-if="showThemaForm" class="modal-backdrop" @click="showThemaForm = false">
+                    <div class="modal-content" @click.stop>
+                        <div class="modal-header">NIEUW THEMA</div>
+                        <form @submit.prevent="submitThemaForm">
+                            <div class="form-group">
+                                <label class="form-label">Naam</label>
+                                <input v-model="themaFormData.naam" type="text" class="form-input"
+                                    placeholder="Naam van het thema..." required autofocus />
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label">Beschrijving</label>
+                                <textarea v-model="themaFormData.beschrijving" class="form-input form-textarea"
+                                    placeholder="Omschrijving..." rows="3"></textarea>
+                            </div>
+                            <div class="form-actions">
+                                <button type="button" class="btn-cancel" @click="showThemaForm = false">Annuleren</button>
+                                <button type="submit" class="btn-submit" :disabled="themaFormProcessing">
+                                    {{ themaFormProcessing ? 'Bezig...' : 'Aanmaken' }}
+                                </button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </Transition>
+        </Teleport>
+
+        <!-- Metro node creation modal (extend on custom/document lines) -->
         <Teleport to="body">
             <Transition name="modal-fade">
                 <div v-if="showMetroNodeForm" class="modal-backdrop" @click="showMetroNodeForm = false">
@@ -335,28 +398,18 @@ const editingProject = ref(null)
                         <form @submit.prevent="submitMetroNodeForm">
                             <div class="form-group">
                                 <label class="form-label">Naam</label>
-                                <input
+                                <input v-model="nodeFormData.naam" type="text" class="form-input"
-                                    v-model="metroNodeForm.naam"
+                                    placeholder="Naam..." required autofocus />
-                                    type="text"
-                                    class="form-input"
-                                    placeholder="Naam van het punt..."
-                                    required
-                                    autofocus
-                                />
                             </div>
                             <div class="form-group">
                                 <label class="form-label">Beschrijving</label>
-                                <textarea
+                                <textarea v-model="nodeFormData.beschrijving" class="form-input form-textarea"
-                                    v-model="metroNodeForm.beschrijving"
+                                    placeholder="Optioneel..." rows="3"></textarea>
-                                    class="form-input form-textarea"
-                                    placeholder="Optionele beschrijving..."
-                                    rows="3"
-                                ></textarea>
                             </div>
                             <div class="form-actions">
                                 <button type="button" class="btn-cancel" @click="showMetroNodeForm = false">Annuleren</button>
-                                <button type="submit" class="btn-submit" :disabled="metroNodeForm.processing">
+                                <button type="submit" class="btn-submit" :disabled="nodeFormProcessing">
-                                    {{ metroNodeForm.processing ? 'Bezig...' : 'Aanmaken' }}
+                                    {{ nodeFormProcessing ? 'Bezig...' : 'Aanmaken' }}
                                 </button>
                             </div>
                         </form>