@revolist/revogrid/dist/collection/plugins/rtl/rtl.plugin.js

Virtual reactive data grid spreadsheet component - RevoGrid.

/*!
 * Built by Revolist OU ❤️
 */
import { BasePlugin } from "../base.plugin";
/**
 * RTL (Right-to-Left) Plugin for RevoGrid
 *
 * This plugin handles RTL transformation by subscribing to the beforecolumnsset event
 * and applying column order reversal when RTL mode is enabled.
 */
export class RTLPlugin extends BasePlugin {
    constructor(revogrid, providers) {
        super(revogrid, providers);
        this.isRTLEnabled = false;
        this.init();
    }
    init() {
        // Subscribe to beforecolumnsset event to apply RTL transformation
        this.addEventListener('beforecolumnsset', (event) => {
            this.handleBeforeColumnsSet(event);
        });
        // Listen for RTL property changes
        this.addEventListener('aftergridinit', () => {
            this.updateRTLState();
        });
        // Watch for RTL property changes
        this.watch('rtl', (value) => {
            this.isRTLEnabled = value;
            this.emit('rtlstatechanged', { rtl: this.isRTLEnabled });
        }, { immediate: true });
    }
    /**
     * Handle the beforecolumnsset event to apply RTL transformation
     */
    handleBeforeColumnsSet(event) {
        if (!this.isRTLEnabled) {
            return; // No transformation needed if RTL is disabled
        }
        const columnCollection = event.detail;
        // Apply RTL transformation to all column types
        const transformedColumns = this.applyRTLTransformationToCollection(columnCollection);
        // Update the event detail with transformed columns
        event.detail.columns = transformedColumns.columns;
        event.detail.columnByProp = transformedColumns.columnByProp;
        event.detail.columnGrouping = transformedColumns.columnGrouping;
    }
    /**
     * Apply RTL transformation to the entire column collection
     */
    applyRTLTransformationToCollection(collection) {
        const transformedCollection = {
            columns: {
                rgCol: [],
                colPinStart: [],
                colPinEnd: [],
            },
            columnByProp: Object.assign({}, collection.columnByProp),
            columnGrouping: {
                rgCol: [],
                colPinStart: [],
                colPinEnd: [],
            },
            maxLevel: collection.maxLevel,
            sort: Object.assign({}, collection.sort),
        };
        // Transform each column type
        Object.keys(collection.columns).forEach((type) => {
            const columnType = type;
            const columns = collection.columns[columnType];
            // Apply RTL transformation to columns - create new reversed array
            const reversedColumns = [...columns].reverse();
            transformedCollection.columns[columnType] = reversedColumns;
            // Transform column grouping for this type
            transformedCollection.columnGrouping[columnType] = this.applyRTLTransformationToGroups(collection.columnGrouping[columnType], columns.length);
        });
        return transformedCollection;
    }
    /**
     * Apply RTL transformation to column groups
     */
    applyRTLTransformationToGroups(groups, totalColumns) {
        return groups.map(group => {
            // Reverse the indexes for RTL
            const reversedIndexes = group.indexes.map((index) => totalColumns - 1 - index).reverse();
            return Object.assign(Object.assign({}, group), { indexes: reversedIndexes });
        }).reverse(); // Reverse the group order
    }
    /**
     * Update RTL state based on the grid's rtl property
     */
    updateRTLState() {
        const grid = this.revogrid;
        if (grid && typeof grid.rtl === 'boolean') {
            this.isRTLEnabled = grid.rtl;
        }
    }
    /**
     * Get current RTL state
     */
    getRTLState() {
        return this.isRTLEnabled;
    }
    /**
     * Clean up the plugin
     */
    destroy() {
        super.destroy();
    }
}