Arborescence avancée

L’onglet Arborescence représente la structure sérialisée du formulaire et permet désormais de la modifier directement, sans revenir systématiquement au canvas.

Nœuds pris en charge

L’arbre affiche :

• le formulaire racine ;
• les étapes du stepper ;
• tous les champs et contenus statiques ;
• les sections et fieldsets ;
• chaque colonne d’un conteneur q-columns ;
• chaque onglet d’un conteneur q-tabs-structure ;
• les enfants imbriqués, quelle que soit leur profondeur.

La sélection reste synchronisée avec le canvas et le panneau de propriétés.

Drag-and-drop direct

Une poignée apparaît devant les champs, les étapes et les colonnes déplaçables.

Trois destinations sont matérialisées :

Indicateur	Effet
ligne supérieure	insère avant le nœud ciblé ;
encadrement	dépose dans le conteneur ciblé ;
ligne inférieure	insère après le nœud ciblé.

Un champ peut être déplacé entre :

• la racine ;
• une étape ;
• une section ou un fieldset ;
• une colonne ;
• un onglet.

Les étapes se réordonnent entre elles. Les colonnes se réordonnent à l’intérieur de leur conteneur q-columns.

Le déplacement est désactivé tant qu’un filtre de recherche est actif afin d’éviter de calculer un index à partir d’une liste partiellement masquée.

Prévention des cycles

Un conteneur ne peut pas être déposé dans lui-même ni dans l’un de ses descendants. Le store vérifie la destination avant l’affichage de l’indicateur puis de nouveau au moment de la mutation.

Cette double vérification protège également les appels programmatiques à moveFieldToTarget().

Menus d’actions

Chaque nœud possède un menu accessible :

• avec le bouton ⋮ ;
• par clic droit sur le nœud.

Selon le type de nœud, les actions proposées sont :

• sélectionner ;
• développer ou réduire ;
• déplacer vers le haut ou le bas ;
• dupliquer ;
• supprimer.

Les contraintes métier restent appliquées : la dernière étape et la dernière colonne d’un conteneur ne peuvent pas être supprimées.

Contrat public

Les types et helpers purs sont disponibles depuis le sous-chemin tree :

import type {
  QFormBuilderTreeAction,
  QFormBuilderTreeDragSource,
  QFormBuilderTreeDropIntent,
  QFormBuilderTreeNodeMeta,
} from '@vevedh/qform-builder-layer/types'

import {
  getQFormBuilderTreeDropPosition,
  normalizeQFormBuilderTreeDestinationIndex,
  resolveQFormBuilderTreeDropIntent,
} from '@vevedh/qform-builder-layer/tree'

Les mutations finales continuent de passer par le store du builder. Elles sont donc enregistrées dans l’historique visible avec les actions field-move, column-move ou step-move.

Bonnes pratiques

• Donner un name stable à tous les champs et conteneurs.
• Préférer le déplacement par l’arbre pour les structures profondément imbriquées.
• Conserver le canvas pour le réglage visuel des largeurs et des propriétés.
• Ne pas contourner canMoveFieldToTarget() lors d’une intégration personnalisée.
• Tester les schémas importés dans FormViewer après des déplacements complexes.