How to: Create 'Change Image Size' ribbon items

• Aug 08, 2024
• 2 minutes to read

The code sample below demonstrates how to create ribbon items that are displayed when an image is selected and allow users to change the image size.

JS

const options = DevExpress.RichEdit.createOptions();

var changeWidthImageSizeCommandId = 'ChangeWidthImageSize';
var changeHeightImageSizeCommandId = 'ChangeHeightImageSize';
/** @type {DevExpress.RichEdit.Image} */
var selectedImage = null;
/** @type {DevExpress.RichEdit.RibbonNumberBoxItem} */
var changeWidthImageSizeItem = null;
/** @type {DevExpress.RichEdit.RibbonNumberBoxItem} */
var changeHeightImageSizeItem = null;

/** @param {DevExpress.RichEdit.RichEdit} richEdit */
function getSelectedImage(richEdit) {
    const selIntervals = richEdit.selection.intervals;
    if(selIntervals.length === 1 && selIntervals[0].length === 1) {
        var images = richEdit.selection.activeSubDocument.images.find(selIntervals);
        if(images.length == 1 && images[0].interval.start == selIntervals[0].start)
            return images[0];
    }
    return null;
}
function deleteSizeItems(ribbon) {
    var foTab = ribbon.getTab(DevExpress.RichEdit.RibbonTabType.FloatingObjectsFormat);
    foTab.removeItem(changeWidthImageSizeItem.id);
    foTab.removeItem(changeHeightImageSizeItem.id);
    changeWidthImageSizeItem = null;
    changeHeightImageSizeItem = null;
}
options.events.selectionChanged = function (s, e) {
    selectedImage = getSelectedImage(s);
    if(selectedImage) {
        s.updateRibbon(function(ribbon) {
            if(changeWidthImageSizeItem)
                deleteSizeItems(ribbon);
            changeWidthImageSizeItem = new DevExpress.RichEdit.RibbonNumberBoxItem(changeWidthImageSizeCommandId, 'Image Width', { 
                step: 0.1,
                width: 110,
                format: '#0.##',
                value: richEdit.unitConverter.twipsToInches(selectedImage.actualSize.width),
            });
            changeHeightImageSizeItem = new DevExpress.RichEdit.RibbonNumberBoxItem(changeHeightImageSizeCommandId, 'Image Height', {
                step: 0.1,
                width: 110,
                format: '#0.##',
                value: richEdit.unitConverter.twipsToInches(selectedImage.actualSize.height),
            });
            var foTab = ribbon.getTab(DevExpress.RichEdit.RibbonTabType.FloatingObjectsFormat);
            foTab.insertItemBefore(changeWidthImageSizeItem, DevExpress.RichEdit.FloatingObjectsFormatTabItemId.BringForwardMenu);
            foTab.insertItemBefore(changeHeightImageSizeItem, DevExpress.RichEdit.FloatingObjectsFormatTabItemId.BringForwardMenu);
        });
    }
    else {
        if(changeWidthImageSizeItem) {
            s.updateRibbon(function(ribbon) {
                deleteSizeItems(ribbon);
            });
        }
    }
};
options.events.customCommandExecuted = function(s, e) {
    switch(e.commandName) {
        case changeWidthImageSizeCommandId:
        case changeHeightImageSizeCommandId: {
            if(selectedImage) {
                var size = selectedImage.actualSize;
                if(e.commandName === changeWidthImageSizeCommandId)
                    size.width = s.unitConverter.inchesToTwips(e.parameter);
                else
                    size.height = s.unitConverter.inchesToTwips(e.parameter);
                selectedImage.actualSize = size;
            }
            break;
        }
    }
};