# Formes

- Human documentation: [https://docs.univer.ai/fr-FR/guides/sheets/features/shapes](https://docs.univer.ai/fr-FR/guides/sheets/features/shapes)

- Agent Markdown: [https://docs.univer.ai/fr-FR/guides/sheets/features/shapes.md](https://docs.univer.ai/fr-FR/guides/sheets/features/shapes.md)

- Requested language: `fr-FR`

- Content language: `fr-FR`

- Documentation version: `1.2.0`

- Source: [sheets/features/shapes.fr-FR.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/sheets/features/shapes.fr-FR.mdx)

---

#### Package metadata

```json
{
  "mobile": true,
  "preset": [
    {
      "client": "@univerjs/preset-sheets-advanced",
      "locale": "@univerjs/preset-sheets-advanced/locales/fr-FR",
      "style": "@univerjs/preset-sheets-advanced/lib/index.css"
    }
  ],
  "plugins": [
    {
      "client": "@univerjs-pro/engine-formula"
    },
    {
      "client": "@univerjs/drawing"
    },
    {
      "client": "@univerjs/drawing-ui",
      "locale": "@univerjs/drawing-ui/locale/fr-FR",
      "style": "@univerjs/drawing-ui/lib/index.css"
    },
    {
      "client": "@univerjs/sheets-drawing"
    },
    {
      "client": "@univerjs/sheets-drawing-ui",
      "locale": "@univerjs/sheets-drawing-ui/locale/fr-FR",
      "style": "@univerjs/sheets-drawing-ui/lib/index.css"
    },
    {
      "client": "@univerjs-pro/sheets-shape"
    },
    {
      "client": "@univerjs-pro/sheets-shape-ui",
      "facade": "@univerjs-pro/sheets-shape/facade",
      "locale": "@univerjs-pro/sheets-shape-ui/locale/fr-FR",
      "style": "@univerjs-pro/sheets-shape-ui/lib/index.css"
    }
  ],
  "license": true,
  "server": false
}
```

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.

> Interactive example: [Open the playground](/playground/sheets/shapes)

## Mode plugin

### Installation

#### npm

```bash
npm 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-ui
```

#### pnpm

```bash
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-ui
```

#### yarn

```bash
yarn 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-ui
```

#### bun

```bash
bun 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-ui
```

> [!WARN]
> Les 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

```typescript
import { UniverProFormulaEnginePlugin } from '@univerjs-pro/engine-formula' // [!code ++]
import { UniverSheetsShapePlugin } from '@univerjs-pro/sheets-shape' // [!code ++]
import { UniverSheetsShapeUIPlugin } from '@univerjs-pro/sheets-shape-ui' // [!code ++]
import SheetsShapeUIEnUS from '@univerjs-pro/sheets-shape-ui/locale/en-US' // [!code ++]
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'
import { UniverDrawingPlugin } from '@univerjs/drawing' // [!code ++]
import { UniverDrawingUIPlugin } from '@univerjs/drawing-ui' // [!code ++]
import DrawingUIEnUS from '@univerjs/drawing-ui/locale/en-US' // [!code ++]
import { UniverSheetsDrawingPlugin } from '@univerjs/sheets-drawing' // [!code ++]
import { UniverSheetsDrawingUIPlugin } from '@univerjs/sheets-drawing-ui' // [!code ++]
import SheetsDrawingUIEnUS from '@univerjs/sheets-drawing-ui/locale/en-US' // [!code ++]

import '@univerjs-pro/sheets-shape/facade' // [!code ++]

import '@univerjs/drawing-ui/lib/index.css' // [!code ++]
import '@univerjs/sheets-drawing-ui/lib/index.css' // [!code ++]
import '@univerjs-pro/sheets-shape-ui/lib/index.css' // [!code ++]

const univer = new Univer({
  locale: LocaleType.EN_US,
  locales: {
    [LocaleType.EN_US]: mergeLocales(
      DrawingUIEnUS, // [!code ++]
      SheetsDrawingUIEnUS, // [!code ++]
      SheetsShapeUIEnUS, // [!code ++]
    ),
  },
})

univer.registerPlugin(UniverProFormulaEnginePlugin) // [!code ++]
univer.registerPlugin(UniverDrawingPlugin) // [!code ++]
univer.registerPlugin(UniverDrawingUIPlugin) // [!code ++]
univer.registerPlugin(UniverSheetsDrawingPlugin) // [!code ++]
univer.registerPlugin(UniverSheetsDrawingUIPlugin) // [!code ++]
univer.registerPlugin(UniverSheetsShapePlugin) // [!code ++]
univer.registerPlugin(UniverSheetsShapeUIPlugin) // [!code ++]
```

Si vous disposez d’une licence commerciale Univer, consultez [Utiliser une licence côté client](https://docs.univer.ai/fr-FR/server/license.md#in-plugin-mode) pour la configuration.

## Prise en charge mobile

Configurez d’abord l’[éditeur mobile](https://docs.univer.ai/fr-FR/guides/sheets/getting-started/installation.md#mobile-support). 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

> [!NOTE]
> 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`.

#### npm

```bash
npm install @univerjs/preset-sheets-drawing @univerjs/preset-sheets-advanced
```

#### pnpm

```bash
pnpm add @univerjs/preset-sheets-drawing @univerjs/preset-sheets-advanced
```

#### yarn

```bash
yarn add @univerjs/preset-sheets-drawing @univerjs/preset-sheets-advanced
```

#### bun

```bash
bun add @univerjs/preset-sheets-drawing @univerjs/preset-sheets-advanced
```

### Utilisation

```typescript
import { UniverSheetsAdvancedPreset } from '@univerjs/preset-sheets-advanced' // [!code ++]
import UniverPresetSheetsAdvancedEnUS from '@univerjs/preset-sheets-advanced/locales/en-US' // [!code ++]
import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'
import UniverPresetSheetsCoreEnUS from '@univerjs/preset-sheets-core/locales/en-US'
import { UniverSheetsDrawingPreset } from '@univerjs/preset-sheets-drawing' // [!code ++]
import UniverPresetSheetsDrawingEnUS from '@univerjs/preset-sheets-drawing/locales/en-US' // [!code ++]
import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'

import '@univerjs/preset-sheets-core/lib/index.css'
import '@univerjs/preset-sheets-drawing/lib/index.css' // [!code ++]
import '@univerjs/preset-sheets-advanced/lib/index.css' // [!code ++]

const { univerAPI } = createUniver({
  locale: LocaleType.EN_US,
  locales: {
    [LocaleType.EN_US]: mergeLocales(
      UniverPresetSheetsCoreEnUS,
      UniverPresetSheetsDrawingEnUS, // [!code ++]
      UniverPresetSheetsAdvancedEnUS, // [!code ++]
    ),
  },
  presets: [
    UniverSheetsCorePreset(),
    UniverSheetsDrawingPreset(), // [!code ++]
    UniverSheetsAdvancedPreset(), // [!code ++]
  ],
})
```

Si vous disposez d’une licence commerciale Univer, consultez [Utiliser une licence côté client](https://docs.univer.ai/fr-FR/server/license.md#in-preset-mode) pour la configuration.

## Facade API

Vous trouverez les définitions de types complètes de l’API Facade dans la [FacadeAPI](https://docs.univer.ai/fr-FR/reference/facade/univer.md).

### Importation

> [!INFO: 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.

```typescript
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.

```typescript
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](https://docs.univer.ai/fr-FR/reference/facade/shape-text.md) actif. Lisez le texte avec `getPlainText()`, remplacez-le entièrement avec `setText()` et réglez la police, la couleur et l’alignement.

```ts
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](https://docs.univer.ai/fr-FR/reference/facade/shape-text.md#settextstyle) et les [marges et la disposition du bloc de texte](https://docs.univer.ai/fr-FR/reference/facade/shape-text.md#settextboxoptions).

```ts
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.

```typescript
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.

```typescript
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.