Moteur et API
Monter, redimensionner et détruire le designer
Créez une instance stable qui suit son conteneur et peut être retirée ou remontée sans accumuler de listeners.
Vue d’ensemble du guide
Avant de commencer
- Un bundle JavaScript de production est disponible.
- La page hôte contient un conteneur dédié au designer.
- L’état produit initial peut être chargé par l’hôte.
Résultat attendu
Le designer s’initialise une seule fois, suit la taille de son conteneur et libère proprement ses ressources à la fermeture.
Préparer un conteneur stable
Donnez au nœud de montage une largeur prévisible et une hauteur responsive avant de créer le moteur. Un conteneur sans hauteur ou remplacé trop souvent peut produire un canvas vide malgré une initialisation réussie.
Chargez les styles communs avant le bundle JavaScript et évitez les transitions de layout tant que l’événement ready n’a pas été émis.
Créer un conteneur vide dédié.
Définir une hauteur minimale et des contraintes responsive.
Charger les styles et scripts dans l’ordre de version.
Créer et observer l’instance
Fournissez la locale, les permissions, les adaptateurs, l’état initial et le template avec l’API publique. Attendez ready avant de charger un autre état ou d’appeler une fonction propre à une vue.
Utilisez ResizeObserver sur le conteneur lorsque l’application modifie panneaux, sidebars ou dimensions d’une modale.
Créer une seule instance.
Écouter ready et les erreurs.
Charger l’état produit.
Transmettre les changements de taille du conteneur.
Détruire avant de remonter
Une SPA doit libérer l’instance avant de supprimer son nœud DOM. La destruction retire les ressources de rendu, listeners clavier, observers, uploads et portails appartenant à cette instance.
Un nouveau montage repart toujours d’un état sérialisé, jamais d’objets Fabric ou Babylon conservés.
Persister l’état en attente.
Appeler la méthode publique de destruction.
Retirer l’ancien conteneur.
Créer la nouvelle instance après montage du nouveau nœud.