Formes
Les formes d’Univer Sheets permettent de créer des organigrammes, des annotations, des bulles et des repères visuels directement dans les feuilles de calcul.
Mode plugin
Installation
pnpm add @univerjs-pro/engine-formula @univerjs/drawing @univerjs/drawing-ui @univerjs/sheets-drawing @univerjs/sheets-drawing-ui @univerjs-pro/sheets-shape @univerjs-pro/sheets-shape-uinpm install @univerjs-pro/engine-formula @univerjs/drawing @univerjs/drawing-ui @univerjs/sheets-drawing @univerjs/sheets-drawing-ui @univerjs-pro/sheets-shape @univerjs-pro/sheets-shape-uiyarn add @univerjs-pro/engine-formula @univerjs/drawing @univerjs/drawing-ui @univerjs/sheets-drawing @univerjs/sheets-drawing-ui @univerjs-pro/sheets-shape @univerjs-pro/sheets-shape-uibun add @univerjs-pro/engine-formula @univerjs/drawing @univerjs/drawing-ui @univerjs/sheets-drawing @univerjs/sheets-drawing-ui @univerjs-pro/sheets-shape @univerjs-pro/sheets-shape-uiLes formes nécessitent aussi UniverProFormulaEnginePlugin du package @univerjs-pro/engine-formula. Dans votre code d’initialisation de base, remplacez l’importation et l’enregistrement de UniverFormulaEnginePlugin par ce plugin. N’enregistrez pas les deux moteurs de formules : l’insertion de formes pourrait échouer avec une erreur de dépendance manquante.
Les plugins de formes dépendent des plugins de dessin. Vous devez également enregistrer UniverDrawingPlugin, UniverSheetsDrawingPlugin, UniverDrawingUIPlugin et UniverSheetsDrawingUIPlugin avant les plugins de formes.
Utilisation
import { UniverProFormulaEnginePlugin } from '@univerjs-pro/engine-formula'import { UniverSheetsShapePlugin } from '@univerjs-pro/sheets-shape'import { UniverSheetsShapeUIPlugin } from '@univerjs-pro/sheets-shape-ui'import SheetsShapeUIEnUS from '@univerjs-pro/sheets-shape-ui/locale/en-US'import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import { UniverDrawingPlugin } from '@univerjs/drawing'import { UniverDrawingUIPlugin } from '@univerjs/drawing-ui'import DrawingUIEnUS from '@univerjs/drawing-ui/locale/en-US'import { UniverSheetsDrawingPlugin } from '@univerjs/sheets-drawing'import { UniverSheetsDrawingUIPlugin } from '@univerjs/sheets-drawing-ui'import SheetsDrawingUIEnUS from '@univerjs/sheets-drawing-ui/locale/en-US'import '@univerjs-pro/sheets-shape/facade'import '@univerjs/drawing-ui/lib/index.css'import '@univerjs/sheets-drawing-ui/lib/index.css'import '@univerjs-pro/sheets-shape-ui/lib/index.css'const univer = new Univer({ locale: LocaleType.EN_US, locales: { [LocaleType.EN_US]: mergeLocales( DrawingUIEnUS, SheetsDrawingUIEnUS, SheetsShapeUIEnUS, ), },})univer.registerPlugin(UniverProFormulaEnginePlugin)univer.registerPlugin(UniverDrawingPlugin)univer.registerPlugin(UniverDrawingUIPlugin)univer.registerPlugin(UniverSheetsDrawingPlugin)univer.registerPlugin(UniverSheetsDrawingUIPlugin)univer.registerPlugin(UniverSheetsShapePlugin)univer.registerPlugin(UniverSheetsShapeUIPlugin)Si vous disposez d’une licence commerciale Univer, consultez Utiliser une licence côté client pour la configuration.
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.
| Paquet | Inscription de bureau | Inscription mobile |
|---|---|---|
@univerjs/drawing-ui | UniverDrawingUIPlugin | UniverDrawingMobileUIPlugin |
@univerjs/sheets-drawing-ui | UniverSheetsDrawingUIPlugin | UniverSheetsDrawingMobileUIPlugin |
@univerjs-pro/sheets-shape-ui | UniverSheetsShapeUIPlugin | UniverSheetsShapeMobileUIPlugin |
Mode prédéfini
La fonctionnalité de formes est incluse dans le preset @univerjs/preset-sheets-advanced. Ce preset enregistre déjà UniverProFormulaEnginePlugin ; aucun remplacement manuel du moteur de formules n’est nécessaire.
Installation
Le preset UniverSheetsAdvancedPreset de @univerjs/preset-sheets-advanced dépend du preset UniverSheetsDrawingPreset lors de l’exécution. Installez d’abord @univerjs/preset-sheets-drawing.
pnpm add @univerjs/preset-sheets-drawing @univerjs/preset-sheets-advancednpm install @univerjs/preset-sheets-drawing @univerjs/preset-sheets-advancedyarn add @univerjs/preset-sheets-drawing @univerjs/preset-sheets-advancedbun add @univerjs/preset-sheets-drawing @univerjs/preset-sheets-advancedUtilisation
import { UniverSheetsAdvancedPreset } from '@univerjs/preset-sheets-advanced'import UniverPresetSheetsAdvancedEnUS from '@univerjs/preset-sheets-advanced/locales/en-US'import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'import UniverPresetSheetsCoreEnUS from '@univerjs/preset-sheets-core/locales/en-US'import { UniverSheetsDrawingPreset } from '@univerjs/preset-sheets-drawing'import UniverPresetSheetsDrawingEnUS from '@univerjs/preset-sheets-drawing/locales/en-US'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'import '@univerjs/preset-sheets-core/lib/index.css'import '@univerjs/preset-sheets-drawing/lib/index.css'import '@univerjs/preset-sheets-advanced/lib/index.css'const { univerAPI } = createUniver({ locale: LocaleType.EN_US, locales: { [LocaleType.EN_US]: mergeLocales( UniverPresetSheetsCoreEnUS, UniverPresetSheetsDrawingEnUS, UniverPresetSheetsAdvancedEnUS, ), }, presets: [ UniverSheetsCorePreset(), UniverSheetsDrawingPreset(), UniverSheetsAdvancedPreset(), ],})Si vous disposez d’une licence commerciale Univer, consultez Utiliser une licence côté client pour la configuration.
Facade API
Vous trouverez les définitions de types complètes de l’API Facade dans la FacadeAPI.
Importation
Remarque sur le mode plugin
Seul le mode plugin nécessite l’importation manuelle du package Facade. Le mode prédéfini inclut déjà le package Facade correspondant : aucune importation supplémentaire n’est nécessaire.
import '@univerjs-pro/sheets-shape/facade'Insérer des formes de base
Appelez FWorksheet.insertShape avec les données de création communes. La méthode renvoie une façade active.
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()const rectShape = fWorksheet.insertShape({ shapeType: univerAPI.Enum.ShapeTypeEnum.Rect, transform: { left: 120, top: 80, width: 240, height: 120 }, shapeData: { fill: { fillType: univerAPI.Enum.ShapeFillEnum.SolidFill, color: '#e6f4ff', }, stroke: { lineStrokeType: univerAPI.Enum.ShapeLineTypeEnum.SolidLine, color: '#1677ff', width: 2, }, },})if (!rectShape) throw new Error('Shape could not be inserted.')Modifier le texte d’une forme
Utilisez la forme renvoyée par insertShape() ci-dessous ou dans l’exemple précédent. getText() renvoie un objet FShapeText actif. Lisez le texte avec getPlainText(), remplacez-le entièrement avec setText() et réglez la police, la couleur et l’alignement.
if (!rectShape) throw new Error('Shape is not available')const shapeText = rectShape.getText()console.log(shapeText.getPlainText())shapeText .setText('Quarterly review') .setFontSize(18) .setColor('#2563eb') .setBold(true) .setHorizontalAlign(univerAPI.Enum.HorizontalAlign.CENTER) .setVerticalAlign(univerAPI.Enum.VerticalAlign.MIDDLE)setText() remplace le texte existant. Utilisez setRichText() pour combiner plusieurs styles. Pour modifier le texte enrichi existant, appelez getRichText()?.copy(), modifiez le constructeur puis transmettez-le à setRichText(). Ses modifications ne sont pas appliquées automatiquement. Voir aussi les styles de texte et les marges et la disposition du bloc de texte.
const richText = univerAPI.newRichText() .text('Quarterly ') .bold('review')shapeText.setRichText(richText)Insérer et relier des connecteurs
Insérez un connecteur avec FWorksheet.insertShape, puis liez ses extrémités à l’aide de la façade FConnectorShape renvoyée.
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()const leftShape = fWorksheet.insertShape({ shapeType: univerAPI.Enum.ShapeTypeEnum.RoundRect, transform: { left: 80, top: 80, width: 180, height: 100 },})const rightShape = fWorksheet.insertShape({ shapeType: univerAPI.Enum.ShapeTypeEnum.Ellipse, transform: { left: 420, top: 200, width: 180, height: 100 },})const connectorShape = fWorksheet.insertShape({ shapeType: univerAPI.Enum.ShapeTypeEnum.BentConnector3, transform: { left: 240, top: 130, width: 240, height: 120 },})if (!leftShape || !rightShape || !connectorShape) { throw new Error('Shapes could not be inserted.')}const startSite = leftShape.getConnectionSites()[0]const rightSites = rightShape.getConnectionSites()const endSite = rightSites[2] ?? rightSites[0]if (!startSite || !endSite) throw new Error('Connection site not found.')connectorShape .bindStart(leftShape.getId(), startSite.index) .bindEnd(rightShape.getId(), endSite.index) .setEndArrow(univerAPI.Enum.ShapeArrowTypeEnum.Arrow)Mettre à jour et supprimer des formes
Mettez à jour et supprimez une forme directement depuis sa façade active.
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()const firstShape = fWorksheet.getShapes().find(shape => !shape.isConnectorShape())if (firstShape) { firstShape .setStrokeColor('#ff4d4f') .setStrokeWidth(3) .setSolidFill('#fff1f0') // Remove the shape later if needed const removed = firstShape.remove() console.log(removed)}Reproduire la mise en forme des formes
Sélectionnez la forme source, activez le pinceau puis choisissez la cible. Il copie remplissage, contour, effets et styles de texte pris en charge en conservant identité, géométrie, contenu et liaisons de formules de la cible. Effacer la mise en forme restaure les valeurs d’insertion. SmartArt est exclu. Le plugin UI correspondant active ce comportement automatiquement.
Que pensez-vous de ce guide ?