[BOT]/Rupato/BOT-1600/Fix--Blockly-and-Snackbar-on-RTL (binary-com#14662

) * fix: RTL bugs * fix: minor function * fix: RTl bugs * fix: RTL issues * fix: RTL issues * fix: RTL issues * fix: added new toolbar width * fix: for alignment * fix: for alignment * fix: recalculating the xml values * fix: RTL workspace loading * fix: added required notes * fix: added required notes * fix: added fix for derktop view * fix: added fix for mobile RTL
kate-deriv · May 3, 2024 · 362c115 · 362c115
1 parent 069f9cd
commit 362c115
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 16 deletions.
diff --git a/packages/bot-skeleton/src/scratch/hooks/workspace_svg.js b/packages/bot-skeleton/src/scratch/hooks/workspace_svg.js
@@ -204,6 +204,10 @@ Blockly.WorkspaceSvg.prototype.cleanUp = function (x = 0, y = 0, blocks_to_clean
     const filtered_top_blocks = top_blocks.filter(block => !block.isMainBlock());
 
     filtered_top_blocks.forEach(block => {
+        if (this.RTL && block.comment) {
+            block.RTL = true;
+            block.comment.needsAutoPositioning_ = true;
+        }
         const xy = block.getRelativeToSurfaceXY();
         const cursor_x = is_import ? x : -xy.x;
         const cursor_y = original_cursor_y - (is_import ? 0 : xy.y);

diff --git a/packages/bot-skeleton/src/scratch/utils/index.js b/packages/bot-skeleton/src/scratch/utils/index.js
@@ -445,6 +445,23 @@ export const scrollWorkspace = (workspace, scroll_amount, is_horizontal, is_chro
         if (block_canvas_rect_top > toolbox_top) {
             scroll_y = delta_y;
         }
+
+        /* NOTE: This was done for mobile view since 
+        when we try to calculate the scroll amount for RTL,
+        we need to realign the scroll to(0, 0) for the workspace.
+        Then, from the width of the canvas, we need to subtract the width of the block. 
+        To Make the block visible in the view width
+        */
+
+        if (window.innerWidth < 768) {
+            workspace.scrollbar.set(0, scroll_y);
+            const calc_scroll =
+                Blockly.derivWorkspace.svgBlockCanvas_?.getBoundingClientRect().width -
+                Blockly.derivWorkspace.svgBlockCanvas_?.getBoundingClientRect().left +
+                60;
+            workspace.scrollbar.set(calc_scroll, scroll_y);
+            return;
+        }
     }
     workspace.scrollbar.set(scroll_x, scroll_y);
 };

diff --git a/packages/bot-web-ui/src/components/bot-notification/bot-notification-utils.ts b/packages/bot-web-ui/src/components/bot-notification/bot-notification-utils.ts
@@ -1,5 +1,12 @@
 import { toast, ToastPosition, TypeOptions } from 'react-toastify';
 import { localize } from '@deriv/translations';
+import { isDbotRTL } from '@deriv/bot-skeleton/src/utils/workspace';
+
+const getToastPosition = () => {
+    const is_RTL = isDbotRTL();
+    if (is_RTL) return toast.POSITION.BOTTOM_RIGHT;
+    return toast.POSITION.BOTTOM_LEFT;
+};
 
 export type TNotificationContent = {
     message: string;
@@ -37,7 +44,7 @@ export const notification_message = {
 
 export const notification_style = {
     type: toast.TYPE.DEFAULT,
-    position: toast.POSITION.BOTTOM_LEFT,
+    position: getToastPosition(),
     autoClose: 6000,
     hideProgressBar: true,
     closeOnClick: false,

diff --git a/packages/bot-web-ui/src/stores/load-modal-store.ts b/packages/bot-web-ui/src/stores/load-modal-store.ts
@@ -244,7 +244,6 @@ export default class LoadModalStore implements ILoadModalStore {
         if (this.recent_workspace) {
             (this.recent_workspace as any).RTL = isDbotRTL();
         }
-
         await load({
             block_string: this.selected_strategy?.xml,
             drop_event: {},
@@ -270,7 +269,7 @@ export default class LoadModalStore implements ILoadModalStore {
 
         removeExistingWorkspace(this.selected_strategy.id);
         await load({
-            block_string: this.selected_strategy.xml,
+            block_string: this.selected_strategy?.xml,
             strategy_id: this.selected_strategy.id,
             file_name: this.selected_strategy.name,
             workspace: window.Blockly.derivWorkspace,
@@ -293,7 +292,6 @@ export default class LoadModalStore implements ILoadModalStore {
         if (this.loaded_local_file) {
             this.readFile(false, {} as DragEvent, this.loaded_local_file);
         }
-        this.is_open_button_loading = false;
     };
 
     onActiveIndexChange = (): void => {
@@ -532,6 +530,7 @@ export default class LoadModalStore implements ILoadModalStore {
                 load_options.file_name = file_name;
             }
             await load(load_options);
+            this.is_open_button_loading = false;
         });
         reader.readAsText(file);
     };

diff --git a/packages/bot-web-ui/src/stores/toolbox-store.js b/packages/bot-web-ui/src/stores/toolbox-store.js
@@ -38,6 +38,7 @@ export default class ToolboxStore {
     sub_category_index = [];
     toolbox_dom = null;
     toolbox_examples = null;
+    is_workspace_scroll_adjusted = false;
 
     onMount(toolbox_ref) {
         this.adjustWorkspace();
@@ -49,7 +50,7 @@ export default class ToolboxStore {
             () => this.is_toolbox_open,
             is_toolbox_open => {
                 if (is_toolbox_open) {
-                    this.adjustWorkspace();
+                    //this.adjustWorkspace();
                     // Emit event to GTM
                     const { gtm } = this.core;
                     gtm.pushDataLayer({ event: 'dbot_toolbox_visible', value: true });
@@ -91,18 +92,36 @@ export default class ToolboxStore {
     }
     // eslint-disable-next-line class-methods-use-this
     adjustWorkspace() {
-        setTimeout(() => {
+        // NOTE: added this load modal open check to prevent scroll when load modal is open
+        if (!this.is_workspace_scroll_adjusted && !this.root_store.load_modal.is_load_modal_open) {
             const workspace = Blockly.derivWorkspace;
-            const toolbox_width = document.getElementById('gtm-toolbox')?.getBoundingClientRect().width || 0;
-            const block_canvas_rect = workspace.svgBlockCanvas_?.getBoundingClientRect(); // eslint-disable-line
-
-            if (Math.round(block_canvas_rect?.left) <= toolbox_width) {
-                const scroll_distance = this.core.ui.is_mobile
-                    ? toolbox_width - block_canvas_rect.left + 50
-                    : toolbox_width - block_canvas_rect.left + 36;
-                scrollWorkspace(workspace, scroll_distance, true, false);
-            }
-        }, 300);
+            this.is_workspace_scroll_adjusted = true;
+
+            setTimeout(() => {
+                const toolbox_width = document.getElementById('gtm-toolbox')?.getBoundingClientRect().width || 0;
+                const toolbar_width = document.querySelector('.toolbar__group-btn')?.getBoundingClientRect().width || 0;
+                const block_canvas_rect = workspace.svgBlockCanvas_?.getBoundingClientRect(); // eslint-disable-line
+
+                // Need to set the direction right if the workspace is RTL
+                const is_workspace_LTR = !workspace.RTL;
+                let canvas_direction = block_canvas_rect.left;
+                if (!is_workspace_LTR && window.innerWidth < 768) canvas_direction = block_canvas_rect.right;
+
+                // Need to set the scroll distance based on the device
+                const scroll_distance_mobile = toolbox_width + toolbar_width - canvas_direction + 20;
+                const scroll_distance_desktop = toolbox_width - canvas_direction + 36;
+                const scroll_distance = this.core.ui.is_mobile ? scroll_distance_mobile : scroll_distance_desktop;
+
+                // Scroll the workspace if the toolbox is overlapping the workspace
+                if (Math.round(block_canvas_rect?.left) <= toolbox_width) {
+                    scrollWorkspace(workspace, scroll_distance, true, false);
+                } else if (window.innerWidth < 768 && workspace.RTL) {
+                    scrollWorkspace(workspace, scroll_distance, true, false);
+                }
+
+                this.is_workspace_scroll_adjusted = false;
+            }, 300);
+        }
     }
 
     toggleDrawer() {