bf90a70d05
- Add a reactive useColorModel API for format state, channel edits, Reka bridges, and slider presentation - Move the app color panel and ColorInputRoot onto the shared model and remove superseded picker helpers - Document the public contract and cover precise RGB plus OkHCL intent round trips
62 lines
1.7 KiB
Markdown
62 lines
1.7 KiB
Markdown
---
|
|
title: useOkHCL
|
|
description: Persist OkHCL intent for selected node fills and strokes.
|
|
---
|
|
|
|
# useOkHCL
|
|
|
|
`useOkHCL()` is the editor-aware adapter for OkHCL fill and stroke metadata. It reads stored color
|
|
intent, updates nodes with undo, reports preview gamut information, and remembers the selected
|
|
field format for each fill or stroke.
|
|
|
|
Use [`useColorModel()`](../composables/use-color-model) for framework-agnostic conversion, channel
|
|
editing, and slider presentation. Use `useOkHCL()` only where those edits need to be persisted to an
|
|
OpenPencil editor.
|
|
|
|
## Usage
|
|
|
|
```ts
|
|
import { useOkHCL } from '@open-pencil/vue'
|
|
|
|
const okhcl = useOkHCL()
|
|
|
|
const color = okhcl.getFillOkHCLColor(node, 0)
|
|
okhcl.updateFillOkHCL(node, 0, { c: 0.2 })
|
|
```
|
|
|
|
## Format state
|
|
|
|
```ts
|
|
const format = okhcl.getFieldFormat(node, 0, 'fill')
|
|
okhcl.setFillFieldFormat(node, 0, 'okhcl')
|
|
```
|
|
|
|
Selecting `okhcl` initializes intent from the fill or stroke's current RGBA color. The returned
|
|
`fieldOptions` can be used to build a format selector.
|
|
|
|
## Preview information
|
|
|
|
```ts
|
|
const preview = okhcl.getFillPreviewInfo(node, 0)
|
|
// { previewColorSpace, clipped }
|
|
```
|
|
|
|
Preview information reflects the document render color space and whether the stored OkHCL intent
|
|
needed gamut mapping.
|
|
|
|
## Returns
|
|
|
|
- `getFillOkHCLColor()` / `getStrokeOkHCLColor()`
|
|
- `getFillPreviewInfo()` / `getStrokePreviewInfo()`
|
|
- `getFieldFormat()`
|
|
- `setFillFieldFormat()` / `setStrokeFieldFormat()`
|
|
- `updateFillOkHCL()` / `updateStrokeOkHCL()`
|
|
- `fieldOptions`
|
|
|
|
## Related APIs
|
|
|
|
- [useColorModel](../composables/use-color-model)
|
|
- [useFillControls](../composables/use-fill-controls)
|
|
- [useStrokeControls](../composables/use-stroke-controls)
|
|
- [ColorPickerRoot](../components/color-picker-root)
|