Fonctionnalités principales

Le cœur d’Univer Boards associe un modèle de pages et d’éléments à un canevas interactif dans le navigateur. Le modèle et l’interface sont fournis par deux packages Web SDK et fonctionnent comme une unité UNIVER_BOARD indépendante.

Fonctionnalités

• Pages et ordre des éléments : stockez les pages dans pages et les objets graphiques dans les elements de chaque page, avec des listes d’ordre explicites aux deux niveaux.
• Éléments du canevas : utilisez du texte, des formes, des images, des connecteurs, des groupes, des conteneurs et des couloirs.
• Modification pilotée par des commandes : faites passer les modifications, l’ordre et les relations parent-enfant par une couche de commandes avec des autorisations et des points d’intégration pour l’historique et la collaboration facultatifs.
• Canevas du navigateur : affichez les éléments et bénéficiez de la sélection, des transformations, du presse-papiers, de l’édition de texte, des contrôles de vue et des panneaux.
• Adaptateurs extensibles : ajoutez des fonctionnalités Boards facultatives comme les tableaux, cartes mentales, graphiques, ressources, l’impression et l’échange.
• Persistance : créez, restaurez et enregistrez un instantané IBoardData avec ses pages, ressources, thèmes et l’état de la page active.

Mode plugin

Installation

Ajoutez les deux packages Boards à l’environnement Univer décrit dans Installation et utilisation de base :

pnpm add @univerjs-pro/boards @univerjs-pro/boards-ui

npm install @univerjs-pro/boards @univerjs-pro/boards-ui

yarn add @univerjs-pro/boards @univerjs-pro/boards-ui

bun add @univerjs-pro/boards @univerjs-pro/boards-ui

Enregistrement des plugins du produit

Enregistrez d’abord les dépendances partagées de rendu, document, dessin, encre et modification de formes, ainsi que la licence , comme indiqué dans le guide d’installation, puis les plugins Boards :

import { UniverBoardsPlugin } from '@univerjs-pro/boards'import { UniverBoardsUIPlugin } from '@univerjs-pro/boards-ui'import '@univerjs-pro/boards-ui/lib/index.css'univer.registerPlugin(UniverBoardsPlugin)univer.registerPlugin(UniverBoardsUIPlugin)

UniverBoardsPlugin enregistre le modèle Board, les commandes, les services d’éléments, les adaptateurs et les autorisations. UniverBoardsUIPlugin ajoute le canevas rendu et les interactions dans le navigateur.

Mode preset

Univer Boards ne fournit actuellement aucun preset dédié. Utilisez le mode plugin pour le modèle comme pour l’interface du navigateur.

Configuration des menus et barre d’outils du canevas

Les menus contextuels de Boards utilisent le MenuConfig commun. Ajoutez menu à l’enregistrement existant de UniverUIPlugin, et non à UniverBoardsUIPlugin. Cet exemple place Dupliquer en tête de son groupe :

Configuration initiale

import type { MenuConfig } from '@univerjs/ui'import { UniverUIPlugin } from '@univerjs/ui'const menu: MenuConfig = {  'board.menu.duplicate-selection': { order: -1 },}univer.registerPlugin(UniverUIPlugin, { container: 'app', menu })

order trie les éléments de même niveau du menu contextuel par ordre croissant, sans les déplacer vers un autre groupe. Utilisez l’identifiant de l’élément dans la définition du menu du produit ; il peut différer de celui de la commande.

Mise à jour à l’exécution

Importez @univerjs/ui/facade avant de créer univerAPI avec FUniver.newAPI(univer). updateMenuConfig() fusionne les modifications, conserve les champs non spécifiés et actualise les menus. Les menus enregistrés plus tard reçoivent également ces réglages.

import '@univerjs/ui/facade'univerAPI.updateMenuConfig({  'board.menu.duplicate-selection': { order: 5 },})

Barre d’outils du canevas

Boards utilise sa propre barre d’outils de canevas et n’enregistre pas de Ribbon standard pour le produit. gridLayout ne contrôle que le Ribbon commun en grille, sans réorganiser la barre d’outils ni les menus contextuels. Configurez les outils avec UniverBoardsUIPlugin.toolbar.tools, par exemple pour désactiver le stylet dans l’enregistrement existant :

import { UniverBoardsUIPlugin } from '@univerjs-pro/boards-ui'univer.registerPlugin(UniverBoardsUIPlugin, {  toolbar: { tools: { pen: false } },})

toolbar.tools contrôle la disponibilité des outils, pas leur ordre ni leur position dans une grille. Voir la référence Boards UI pour distinguer les contrôles du canevas des menus communs.