55 lines
1.1 KiB
Markdown
55 lines
1.1 KiB
Markdown
---
|
|
title: useMenuModel
|
|
description: Build app and canvas menu models from the current editor state.
|
|
---
|
|
|
|
# useMenuModel
|
|
|
|
`useMenuModel()` builds higher-level menu structures on top of editor commands and selection state.
|
|
|
|
It is useful when you want ready-to-render menu groups instead of composing commands manually.
|
|
|
|
## Usage
|
|
|
|
```ts
|
|
import { useMenuModel } from '@open-pencil/vue'
|
|
|
|
const { appMenu, canvasMenu, selectionLabelMenu } = useMenuModel()
|
|
```
|
|
|
|
## Basic example
|
|
|
|
```ts
|
|
const { canvasMenu } = useMenuModel()
|
|
```
|
|
|
|
Render `canvasMenu.value` into your context menu component.
|
|
|
|
## Practical examples
|
|
|
|
### App-style top menu
|
|
|
|
`appMenu` groups entries into:
|
|
|
|
- Edit
|
|
- View
|
|
- Object
|
|
- Arrange
|
|
|
|
### Context menu with page moves
|
|
|
|
`canvasMenu` includes dynamic items like “Move to page” based on current selection and available pages.
|
|
|
|
### Selection labels
|
|
|
|
`selectionLabelMenu` exposes context-sensitive labels like:
|
|
|
|
- `Hide` / `Show`
|
|
- `Lock` / `Unlock`
|
|
|
|
## Related APIs
|
|
|
|
- [useEditorCommands](./use-editor-commands)
|
|
- [useSelectionState](./use-selection-state)
|
|
- [useSelectionCapabilities](./use-selection-capabilities)
|