update

2026-07-26 20:15:08 +02:00
parent 6b155affbd
commit ebfb2fc360
6 changed files with 190 additions and 88 deletions
--- a/frontend/src/components/FeatureKarte.vue
+++ b/frontend/src/components/FeatureKarte.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { nextTick, onMounted, ref, watch } from 'vue'
+import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { marked } from 'marked'
 import { featureSpeichern } from '../api.js'

@@ -8,7 +8,7 @@ const props = defineProps({
  feature: { type: Object, required: true },
  vollmodus: { type: Boolean, default: false }, // frisch angelegt: direkt im Vollmodus öffnen
 })
-const emit = defineEmits(['aktualisiert', 'kontextmenue'])
+const emit = defineEmits(['aktualisiert', 'entfernen'])

 function kopie(sekt) {
  return {
@@ -71,7 +71,6 @@ function abbrechen() {
 async function fertig() {
  const a = aktiv.value
  if (!a) return
-  blurZeit = Date.now() // der Klick, der das Feld schloss, soll die Ansicht nicht schließen
  aktiv.value = null
  const neu = entwurf.value.trim()

@@ -99,14 +98,56 @@ function abbrechenLeer(a) {
  if (!a.original && a.feld === 'funktion') s.value.funktionen.splice(a.i, 1)
 }

-function neueFunktion() {
-  s.value.funktionen.unshift({ text: '', ziel: '', regeln: '', testen: '' })
-  starte('funktion', 0)
+// Kontextmenü: RMB auf eine Funktion (entfernen) oder auf die Karte (erstellen/Feature entfernen)
+const kontextMenue = ref(null) // {funktion: index|null, x, y}
+
+function oeffneKontextMenue(e, i = null) {
+  kontextMenue.value = { funktion: i, x: e.clientX, y: e.clientY }
 }

-function entferneFunktion(i) {
-  s.value.funktionen.splice(i, 1)
-  speichern()
+function schliesseKontextMenue() {
+  kontextMenue.value = null
+}
+
+onMounted(() => window.addEventListener('click', schliesseKontextMenue))
+onUnmounted(() => window.removeEventListener('click', schliesseKontextMenue))
+
+// Modal für Funktion erstellen und entfernen
+const modal = ref(null) // {art: 'erstellen'} | {art: 'entfernen', i}
+const modalName = ref('')
+const modalFeld = ref(null)
+
+async function menueFunktionErstellen() {
+  kontextMenue.value = null
+  modal.value = { art: 'erstellen' }
+  modalName.value = ''
+  await nextTick()
+  modalFeld.value?.focus()
+}
+
+function menueFunktionEntfernen() {
+  const i = kontextMenue.value.funktion
+  kontextMenue.value = null
+  modal.value = { art: 'entfernen', i }
+}
+
+function menueFeatureEntfernen() {
+  kontextMenue.value = null
+  emit('entfernen')
+}
+
+async function erstellenBestaetigen() {
+  const name = modalName.value.trim()
+  if (!name) return
+  s.value.funktionen.push({ text: name, ziel: '', regeln: '', testen: '' })
+  modal.value = null
+  await speichern()
+}
+
+async function entfernenBestaetigen() {
+  s.value.funktionen.splice(modal.value.i, 1)
+  modal.value = null
+  await speichern()
 }

 function wechsleArt() {
@@ -157,20 +198,10 @@ function punkte(text) {
  return text.split('\n').map(z => z.replace(/^[-*]\s*/, '').trim()).filter(Boolean)
 }

-// Standardansicht ist reine Übersicht: Klick öffnet die ausführliche Ansicht,
-// nur dort wird bearbeitet; Klick auf freie Fläche schließt sie wieder —
-// außer der Klick hat gerade eine Bearbeitung beendet (Blur kommt vor dem Klick)
-let blurZeit = 0
-
-function wechsleAnsicht(e) {
-  if (gross.value) {
-    if (e.target.closest('button, input, textarea, .klickbar, h3, .hinweis')) return
-    if (Date.now() - blurZeit < 300) return
-    gross.value = false
-  } else {
-    if (e.target.closest('button, input, textarea')) return
-    gross.value = true
-  }
+// Kompaktmodus zum Lesen, Vollmodus zum Anpassen — MMB auf die Karte
+// oder das Augen-Icon schaltet um
+function wechsleAnsicht() {
+  gross.value = !gross.value
 }

 onMounted(() => {
@@ -182,8 +213,9 @@ onMounted(() => {
  <article
    class="karte"
    :class="[s.art, { gross }]"
-    @click="wechsleAnsicht"
-    @contextmenu.prevent.stop="emit('kontextmenue', $event)"
+    @mousedown.middle.prevent
+    @auxclick.middle.prevent="wechsleAnsicht"
+    @contextmenu.prevent.stop="oeffneKontextMenue($event)"
  >
    <header>
      <input
@@ -204,6 +236,11 @@ onMounted(() => {
        @click="wechsleArt"
      >{{ s.art }}</button>
      <span v-else class="badge" :class="s.art === 'kern' ? 'blau' : 'gruen'">{{ s.art }}</span>
+      <button
+        class="icon-knopf"
+        :title="gross ? 'Kompaktmodus' : 'Vollmodus'"
+        @click="wechsleAnsicht"
+      >👁</button>
    </header>

    <section :class="{ leer: !s.ziel && !istAktiv('ziel') }">
@@ -239,13 +276,13 @@ onMounted(() => {

    <section :class="{ leer: !s.funktionen.length }">
      <p class="gruppe">Funktionen</p>
-      <button v-if="gross" class="hinzu werkzeug" @click="neueFunktion">+ Funktion</button>
      <div class="liste">
      <div
        v-for="(f, i) in s.funktionen"
        :key="i"
        class="funktion"
        :class="{ offen: aktiv && aktiv.i === i }"
+        @contextmenu.prevent.stop="oeffneKontextMenue($event, i)"
      >
        <div class="zeile kopf">
          <span class="pfeil">▸</span>
@@ -258,7 +295,6 @@ onMounted(() => {
            @keydown.esc="abbrechen"
          >
          <div v-else class="funktionstitel klickbar" @click="starte('funktion', i)">{{ f.text }}</div>
-          <button v-if="gross" class="icon-knopf rot" title="Funktion entfernen" @click="entferneFunktion(i)">✕</button>
        </div>

        <!-- Regeln und Flow nur beim Hover über die Funktion (oder während der Bearbeitung) -->
@@ -320,11 +356,49 @@ onMounted(() => {
    </section>

    <p v-if="meldung" class="meldung">{{ meldung }}</p>
+
+    <div
+      v-if="kontextMenue"
+      class="kontextmenue"
+      :style="{ left: kontextMenue.x + 'px', top: kontextMenue.y + 'px' }"
+    >
+      <button v-if="kontextMenue.funktion !== null" @click="menueFunktionEntfernen">✕ Funktion entfernen</button>
+      <template v-else>
+        <button v-if="gross" @click="menueFunktionErstellen">+ Funktion erstellen</button>
+        <button @click="menueFeatureEntfernen">✕ Feature entfernen</button>
+      </template>
+    </div>
+
+    <div v-if="modal" class="schleier" @click.self="modal = null">
+      <div class="modal karte">
+        <template v-if="modal.art === 'erstellen'">
+          <h2>Funktion erstellen</h2>
+          <input
+            ref="modalFeld"
+            v-model="modalName"
+            placeholder="Funktionstitel"
+            @keyup.enter="erstellenBestaetigen"
+            @keydown.esc="modal = null"
+          >
+          <footer>
+            <button @click="modal = null">Abbrechen</button>
+            <button class="primaer" :disabled="!modalName.trim()" @click="erstellenBestaetigen">Bestätigen</button>
+          </footer>
+        </template>
+        <template v-else>
+          <h2>Funktion entfernen</h2>
+          <p class="frage">„{{ s.funktionen[modal.i].text }}“ entfernen?</p>
+          <footer>
+            <button @click="modal = null">Abbrechen</button>
+            <button class="primaer" @click="entfernenBestaetigen">Entfernen</button>
+          </footer>
+        </template>
+      </div>
+    </div>
  </article>
 </template>

 <style scoped>
-.karte { cursor: pointer; }
 .karte.kern { border-color: var(--akzent); }
 .karte.optional { border-color: var(--gruen); }

@@ -356,7 +430,7 @@ header {
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--rand);
 }
-h3 { margin: 0; font-size: 1rem; cursor: pointer; flex: 1; }
+h3 { margin: 0; font-size: 1rem; flex: 1; }
 /* Im Bearbeitungsmodus zeigt Hover die klickbare Titelfläche */
 .karte.gross h3 {
  padding: 0.1rem 0.3rem;
@@ -392,7 +466,7 @@ section.leer { display: none; }
  padding: 0.1rem 0.3rem;
  margin: 0.1rem 0 0.1rem -0.3rem;
  border-radius: 4px;
-  cursor: pointer;
+  cursor: text;
 }
 .hinweis:hover { background: var(--code-bg); }
 .hinzu {
@@ -470,7 +544,10 @@ textarea {
  font-size: 0.85rem;
  line-height: 1.5;
 }
-.klickbar { cursor: pointer; user-select: none; }
+/* Karte: MMB schaltet den Modus um; Texte sind nur im Vollmodus bearbeitbar */
+.karte { cursor: pointer; }
+.klickbar { user-select: none; }
+.karte.gross .klickbar, .karte.gross h3 { cursor: text; }
 .inhalt.klickbar { border-radius: 4px; }
 .inhalt.klickbar:hover { background: var(--code-bg); }
 h3, .hinweis { user-select: none; }
--- a/frontend/src/components/FeatureListe.vue
+++ b/frontend/src/components/FeatureListe.vue
@@ -29,15 +29,11 @@ function aktualisiert(altId, f) {
  if (neuId.value === altId) neuId.value = f.id
 }

-// Kontextmenü: Rechtsklick auf eine Card (entfernen) oder den Hauptbereich (erstellen)
-const kontextMenue = ref(null) // {feature|null, x, y}
-
-function oeffneKartenMenue(e, f) {
-  kontextMenue.value = { feature: f, x: e.clientX, y: e.clientY }
-}
+// Kontextmenü auf dem Hauptbereich (erstellen); das Menü der Card führt die Karte selbst
+const kontextMenue = ref(null) // {x, y}

 function oeffneBereichsMenue(e) {
-  kontextMenue.value = { feature: null, x: e.clientX, y: e.clientY }
+  kontextMenue.value = { x: e.clientX, y: e.clientY }
 }

 function schliesseKontextMenue() {
@@ -61,9 +57,7 @@ async function menueErstellen() {
  modalFeld.value?.focus()
 }

-function menueEntfernen() {
-  const feature = kontextMenue.value.feature
-  kontextMenue.value = null
+function featureEntfernen(feature) {
  meldung.value = ''
  modal.value = { art: 'entfernen', feature }
 }
@@ -110,7 +104,7 @@ watch(() => props.projekt, laden, { immediate: true })
        :feature="f"
        :vollmodus="f.id === neuId"
        @aktualisiert="aktualisiert"
-        @kontextmenue="oeffneKartenMenue($event, f)"
+        @entfernen="featureEntfernen(f)"
      />
    </div>

@@ -119,8 +113,7 @@ watch(() => props.projekt, laden, { immediate: true })
      class="kontextmenue"
      :style="{ left: kontextMenue.x + 'px', top: kontextMenue.y + 'px' }"
    >
-      <button v-if="kontextMenue.feature" @click="menueEntfernen">✕ Feature entfernen</button>
-      <button v-else @click="menueErstellen">+ Feature erstellen</button>
+      <button @click="menueErstellen">+ Feature erstellen</button>
    </div>

    <div v-if="modal" class="schleier" @click.self="modal = null">