Cartes mentales

La prise en charge des cartes mentales dans Boards est facultative. Ajoutez-la si votre produit nécessite des nœuds de carte mentale et des interactions avec ceux-ci dans le canevas Board.

Enregistrer la prise en charge des cartes mentales

import { UniverBoardsMindPlugin } from '@univerjs-pro/boards-mind'import { UniverBoardsMindUIPlugin } from '@univerjs-pro/boards-mind-ui'import BoardsMindUIFrFR from '@univerjs-pro/boards-mind-ui/locale/fr-FR'import '@univerjs-pro/boards-mind/facade'import '@univerjs-pro/boards-mind-ui/lib/index.css'univer.registerPlugin(UniverBoardsMindPlugin)univer.registerPlugin(UniverBoardsMindUIPlugin)

Prise en charge mobile

Configurez d’abord l’éditeur mobile. Dans l’initialisation en mode plugin de cette page, remplacez les inscriptions de bureau ci-dessous par les exports mobiles des mêmes paquets avant d’ouvrir un document. Conservez modèles, styles, traductions et imports Facade ; n’enregistrez pas les deux variantes.

Rôle des packages

• @univerjs-pro/boards-mind intègre les éléments de carte mentale au modèle Board.
• @univerjs-pro/boards-mind-ui ajoute la modification, le rendu et les interactions avec l'interface utilisateur des cartes mentales. Il fournit également @univerjs-pro/boards-mind-ui/locale/* et @univerjs-pro/boards-mind-ui/lib/index.css pour les éditeurs utilisés dans un navigateur.

Choix selon l'environnement d'exécution

Utilisez les deux packages dans un éditeur exécuté dans un navigateur. Pour traiter des instantanés côté serveur, enregistrez le package du modèle avec UniverBoardsPlugin et n'incluez pas les packages d'interface utilisateur.

Enregistrez la prise en charge des cartes mentales avant d'ouvrir des instantanés qui contiennent des éléments de carte mentale.

Facade API

Utilisez la Facade structurée plutôt que de modifier séparément les formes et les connecteurs.

const board = univerAPI.getActiveBoard()if (!board) throw new Error('No active Board')const mindMap = board.insertMindMap({  left: 180,  top: 180,  root: {    text: 'Release',    children: [      { text: 'Product', children: [{ text: 'Scope' }, { text: 'UX' }] },      { text: 'Engineering', children: [{ text: 'API' }, { text: 'QA' }] },      { text: 'Launch', children: [{ text: 'Docs' }] },    ],  },})if (!mindMap) throw new Error('Cannot insert mind map')const qa = mindMap.getNodes().find(node => node.getText() === 'QA')qa?.addChild({ text: 'Automation' })

FBoard expose insertMindMap, getMindMap et getMindMaps. La carte permet de rechercher les nœuds et descendants, gérer disposition et limites, appeler reflow, setLayout, setBranchLineType et supprimer. Les nœuds gèrent texte, insertion d’enfants ou de frères, changement de parent, promotion, détachement, ordre, styles et repli.

Réorganiser dans des limites

reflow() dispose et centre atomiquement la carte dans un rectangle en coordonnées Board, sans changer la taille des nœuds et du texte. Il réessaie par défaut avec les espacements minimaux autorisés. Si la carte ne tient toujours pas, Board reste inchangé et le résultat contient bounds-too-small et requiredBounds.

const result = mindMap.reflow({  bounds: { left: 80, top: 80, width: 1_000, height: 600 },  padding: 24,})if (!result.success) {  console.warn(result.reason, result.requiredBounds)}

Le rectangle sert uniquement au placement : il ne change pas le parent, ne rogne pas et ne redimensionne pas le conteneur. Une réorganisation réussie forme une seule opération d’annulation.