From fb07a3ee801e3a8bb3a8ea7c94e2a5c0dbd83cba Mon Sep 17 00:00:00 2001
From: Harpush <harpush25@gmail.com>
Date: Fri, 2 Dec 2022 13:44:46 +0200
Subject: [PATCH] fix: handle rtl in vertical direction correctly

---
 package.json                                           |  1 +
 .../angular-split/src/lib/component/split.component.ts |  6 +++++-
 src/app/examples/dir-rtl/dir-rtl.component.ts          | 10 +++++++++-
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index a6a8cf0e..29d63674 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
+    "lib-start": "ng build angular-split --watch",
     "lint": "ng lint",
     "app_build": "yarn lib_build && ng build --configuration production --base-href /angular-split/",
     "app_analyze": "yarn lib_build && ng build --configuration production --stats-json && webpack-bundle-analyzer dist/angular-split-app/stats.json",
diff --git a/projects/angular-split/src/lib/component/split.component.ts b/projects/angular-split/src/lib/component/split.component.ts
index 910a60da..1c019749 100644
--- a/projects/angular-split/src/lib/component/split.component.ts
+++ b/projects/angular-split/src/lib/component/split.component.ts
@@ -687,9 +687,13 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
 
     let offset =
       this.direction === 'horizontal' ? this.startPoint.x - this.endPoint.x : this.startPoint.y - this.endPoint.y
-    if (this.dir === 'rtl') {
+
+    // RTL requires negative offset only in horizontal mode as in vertical
+    // RTL has no effect on drag direction.
+    if (this.dir === 'rtl' && this.direction === 'horizontal') {
       offset = -offset
     }
+
     const steppedOffset = Math.round(offset / this.gutterStep) * this.gutterStep
 
     if (steppedOffset === this.snapshot.lastSteppedOffset) {
diff --git a/src/app/examples/dir-rtl/dir-rtl.component.ts b/src/app/examples/dir-rtl/dir-rtl.component.ts
index 136dba8c..3b24b003 100644
--- a/src/app/examples/dir-rtl/dir-rtl.component.ts
+++ b/src/app/examples/dir-rtl/dir-rtl.component.ts
@@ -16,6 +16,10 @@ import { AComponent } from '../../ui/components/AComponent'
         align-items: center;
         flex-wrap: wrap;
       }
+
+      .btns > button:not(:last-child) {
+        margin-right: 10px;
+      }
     `,
   ],
   template: `
@@ -23,7 +27,7 @@ import { AComponent } from '../../ui/components/AComponent'
     <div class="container">
       <sp-example-title [type]="exampleEnum.DIR"></sp-example-title>
       <div class="split-example">
-        <as-split [dir]="dir">
+        <as-split [dir]="dir" [direction]="direction">
           <as-split-area size="20">
             <p>
               1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tiam, quis nostrud exercitation
@@ -62,10 +66,14 @@ import { AComponent } from '../../ui/components/AComponent'
         <button class="btn btn-warning" (click)="dir = dir === 'rtl' ? 'ltr' : 'rtl'">
           {{ 'Toggle dir: "' + dir + '"' }}
         </button>
+        <button class="btn btn-warning" (click)="direction = direction === 'vertical' ? 'horizontal' : 'vertical'">
+          {{ 'Toggle direction: "' + direction + '"' }}
+        </button>
       </div>
     </div>
   `,
 })
 export class DirRtlComponent extends AComponent {
   dir = 'rtl'
+  direction = 'horizontal'
 }