From bf4488af86af970dba0b65a3f3538f4164d7bc60 Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <Julia.Svinaryova@onlyoffice.com>
Date: Fri, 14 Oct 2022 17:56:25 +0300
Subject: [PATCH] [rtl] Make dimension picker

---
 .../main/lib/component/DimensionPicker.js     | 39 +++++++++++++------
 1 file changed, 28 insertions(+), 11 deletions(-)

diff --git a/apps/common/main/lib/component/DimensionPicker.js b/apps/common/main/lib/component/DimensionPicker.js
index 24aece99f..e6dda50f8 100644
--- a/apps/common/main/lib/component/DimensionPicker.js
+++ b/apps/common/main/lib/component/DimensionPicker.js
@@ -53,12 +53,13 @@ define([
                 minRows     : 5,
                 minColumns  : 5,
                 maxRows     : 20,
-                maxColumns  : 20
+                maxColumns  : 20,
+                direction   : undefined // 'left', 'right'
             },
 
             template:_.template([
                 '<div style="width: 100%; height: 100%;">',
-                    '<div class="dimension-picker-status">0x0</div>',
+                    '<div dir="ltr" class="dimension-picker-status">0x0</div>',
                     '<div class="dimension-picker-observecontainer">',
                         '<div class="dimension-picker-mousecatcher"></div>',
                         '<div class="dimension-picker-unhighlighted"></div>',
@@ -84,12 +85,24 @@ define([
                 me.maxRows     = me.options.maxRows;
                 me.maxColumns  = me.options.maxColumns;
 
+                me.direction   = me.options.direction;
+                if (Common.UI.isRTL() && !me.direction) {
+                    me.direction = 'right';
+                }
+
                 me.curColumns = 0;
                 me.curRows = 0;
 
                 var onMouseMove = function(event){
+                    var offsetX;
+                    if (me.direction === 'right' && me.areaMouseCatcher) {
+                        var width = me.areaMouseCatcher.width();
+                        offsetX = event.offsetX === undefined ? (width - event.originalEvent.layerX) : (width - event.offsetX)*Common.Utils.zoom()
+                    } else {
+                        offsetX = event.offsetX === undefined ? event.originalEvent.layerX : event.offsetX*Common.Utils.zoom();
+                    }
                     me.setTableSize(
-                        Math.ceil((event.offsetX === undefined ? event.originalEvent.layerX : event.offsetX*Common.Utils.zoom()) / me.itemSize),
+                        Math.ceil(offsetX / me.itemSize),
                         Math.ceil((event.offsetY === undefined ? event.originalEvent.layerY : event.offsetY*Common.Utils.zoom()) / me.itemSize),
                         event
                     );
@@ -104,27 +117,31 @@ define([
                 };
 
                 if (rootEl){
-                    var areaMouseCatcher    = rootEl.find('.dimension-picker-mousecatcher');
+                    me.areaMouseCatcher    = rootEl.find('.dimension-picker-mousecatcher');
                     me.areaUnHighLighted   = rootEl.find('.dimension-picker-unhighlighted');
                     me.areaHighLighted     = rootEl.find('.dimension-picker-highlighted');
                     me.areaStatus          = rootEl.find('.dimension-picker-status');
 
                     rootEl.css({width: me.minColumns + 'em'});
-                    areaMouseCatcher.css('z-index', 1);
-                    areaMouseCatcher.width(me.maxColumns + 'em').height(me.maxRows + 'em');
+                    me.areaMouseCatcher.css('z-index', 1);
+                    me.areaMouseCatcher.width(me.maxColumns + 'em').height(me.maxRows + 'em');
                     me.areaUnHighLighted.width(me.minColumns + 'em').height(me.minRows + 'em');
-                    me.areaStatus.html(me.curColumns + ' x ' + me.curRows);
+                    me.areaStatus.html(!Common.UI.isRTL() ? this.curColumns + ' x ' + this.curRows : this.curRows + ' x ' + this.curColumns);
                     me.areaStatus.width(me.areaUnHighLighted.width());
 
-                    areaMouseCatcher.on('mousemove', onMouseMove);
+                    me.areaMouseCatcher.on('mousemove', onMouseMove);
                     me.areaHighLighted.on('mousemove', onMouseMove);
                     me.areaUnHighLighted.on('mousemove', onMouseMove);
-                    areaMouseCatcher.on('mouseleave', onMouseLeave);
+                    me.areaMouseCatcher.on('mouseleave', onMouseLeave);
                     me.areaHighLighted.on('mouseleave', onMouseLeave);
                     me.areaUnHighLighted.on('mouseleave', onMouseLeave);
-                    areaMouseCatcher.on('click', onHighLightedMouseClick);
+                    me.areaMouseCatcher.on('click', onHighLightedMouseClick);
                     me.areaHighLighted.on('click', onHighLightedMouseClick);
                     me.areaUnHighLighted.on('click', onHighLightedMouseClick);
+
+                    if (me.direction === 'right') {
+                        me.areaHighLighted.css({left: 'auto', right: '0'});
+                    }
                 }
             },
 
@@ -157,7 +174,7 @@ define([
                     );
 
                     this.cmpEl.width(this.areaUnHighLighted.width());
-                    this.areaStatus.html(this.curColumns + ' x ' + this.curRows);
+                    this.areaStatus.html(!Common.UI.isRTL() ? this.curColumns + ' x ' + this.curRows : this.curRows + ' x ' + this.curColumns);
                     this.areaStatus.width(this.areaUnHighLighted.width());
 
                     this.trigger('change', this, this.curColumns, this.curRows, event);