UIImageCropper

Properties

Name Type
props props
state state

new UIImageCropper(props)

An editor component that lets the user edit text fields on a node.

Param Type
props props

Example

import {UIImageCropper, api} from 'writer'

render($$) {
    const imageNode = this.props.node
    const cropperOverlay = $$('div').ref('cropperOverlay').addClass('hidden')

    imageNode.fetchSpecifiedUrls(['service', 'original'])
        .then((src) => {
             const cropper = $$(ImageCropperComponent, {
                 parentId: imageNode,
                 src,
                 configuredCrops: {"16:9": [16,9], "1:1": [1,1]},
                 width: imageNode.width,
                 height: imageNode.height,
                 crops: imageNode.crops.crops || [],
                 disableAutomaticCrop: imageNode.disableAutomaticCrop,
                 abort: () => {
                     console.info('handle abort')
                 },
                 restore: () => {
                     console.info('handle restore')
                     return false
                 },
                 save: (newCrops, disableAutomaticCrop) => {
                     console.info('handle the formatted crops', newCrops)
                 }
             })
             this.refs.cropperOverlay.removeClass('hidden')
             this.refs.cropperOverlay.append(cropper)
         })
         .catch(err => {
             console.error(err)
             api.ui.showMessageDialog([{
                 type: 'error',
                 message: `${this.getLabel('The image doesn\'t seem to be available just yet. Please wait a few seconds and try again.')}\n\n${err}`
             }])
         })
}

UIImageCropper.props

Properties

Name Type Default Description
parentId string imageNode
src string asdf
configuredCrops object asdf
width number imageNode.width
height number imageNode.height
[crops] object [] imageNode.crops.crops, crop definitions. Defaults to empty array
[disableAutomaticCrop] boolean false imageNode.disableAutomaticCrop
abort function Called before Image Cropper closes
restore function Called when clicking "Restore All"-button
save function Called after defined crops have been mapped

UIImageCropper.state

Properties

Name Type Default Description
[disableAutomaticCrop] string false Disables automatic crop

results matching ""

    No results matching ""