Flux

Focal point editor ​

The focal point editor lets users set the focal point of an image by dragging or using the keyboard, with a live preview of the result. The chosen point is exposed through v-model.

Accessibility

The editor is focusable and exposed as a 2D slider. Once focused, the focal point can be moved with the arrow keys (hold Shift for larger steps), and Home / End jump to the top-left and bottom-right corners. The current position is announced through aria-valuetext.

Props

model-value: [number, number]
The focal point.

src: string
Source of the image.

Emits

update:model-value: [number, number]
Triggered when the selected focal point changes.

Examples ​

Editor

<template>
    <FluxPane>
        <FluxFocalPointEditor
            v-model="focalPoint"
            src="/assets/demo/image-2.jpg">
            <template #footer-before>
                <FluxSecondaryButton icon-leading="question"/>
            </template>

            <template #footer>
                <FluxPrimaryButton
                    icon-leading="circle-check"
                    label="Save"/>
            </template>
        </FluxFocalPointEditor>
    </FluxPane>
</template>

<script
    lang="ts"
    setup>
    import { FluxFocalPointEditor, FluxPane, FluxPrimaryButton, FluxSecondaryButton } from '@flux-ui/components';
    import { ref } from 'vue';

    const focalPoint = ref<[number, number]>([75, 50]);
</script>

Used components ​