Skip to main content

How to: Create 'Change Image Size' ribbon items

  • 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.

Change Image Size Item

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;
        }
    }
};