mathuo · mathuo · Dec 28, 2023 · Dec 28, 2023
diff --git a/packages/dockview-core/src/dnd/droptarget.scss b/packages/dockview-core/src/dnd/droptarget.scss
@@ -3,10 +3,10 @@
 
     > .drop-target-dropzone {
         position: absolute;
-        left: 0px;
         top: 0px;
+        left: 0px;
+        right: 0px;
         height: 100%;
-        width: 100%;
         z-index: 1000;
         pointer-events: none;
 
@@ -17,8 +17,8 @@
             width: 100%;
             background-color: var(--dv-drag-over-background-color);
             transition: top 70ms ease-out, left 70ms ease-out,
-                width 70ms ease-out, height 70ms ease-out,
-                opacity 0.15s ease-out;
+                right 70ms ease-out, width 70ms ease-out,
+                height 70ms ease-out, opacity 0.15s ease-out;
             will-change: transform;
             pointer-events: none;
 

diff --git a/packages/dockview-core/src/dnd/overlay.scss b/packages/dockview-core/src/dnd/overlay.scss
@@ -42,8 +42,8 @@
 
     .dv-resize-handle-top {
         height: 4px;
-        width: calc(100% - 8px);
         left: 4px;
+        right: 4px;
         top: -2px;
         z-index: 999;
         position: absolute;
@@ -52,8 +52,8 @@
 
     .dv-resize-handle-bottom {
         height: 4px;
-        width: calc(100% - 8px);
         left: 4px;
+        right: 4px;
         bottom: -2px;
         z-index: 999;
         position: absolute;

diff --git a/packages/dockview-core/src/dockview/components/greadyRenderContainer.ts b/packages/dockview-core/src/dockview/components/greadyRenderContainer.ts
@@ -1,6 +1,6 @@
 import { DragAndDropObserver } from '../../dnd/dnd';
 import { Droptarget } from '../../dnd/droptarget';
-import { getDomNodePagePosition, toggleClass } from '../../dom';
+import { getDomNodePagePosition, hasClassInTree, toggleClass } from '../../dom';
 import { CompositeDisposable, Disposable, IDisposable } from '../../lifecycle';
 import { IDockviewPanel } from '../dockviewPanel';
 
@@ -77,7 +77,9 @@ export class GreadyRenderContainer extends CompositeDisposable {
             // TODO propagate position to avoid getDomNodePagePosition calls
             const box = getDomNodePagePosition(referenceContainer.element);
             const box2 = getDomNodePagePosition(this.element);
-            focusContainer.style.left = `${box.left - box2.left}px`;
+            const isRtl = hasClassInTree(this.element, 'dv-rtl');
+            focusContainer.style.left = isRtl ? '' : `${(box.left || 0) - (box2.left || 0)}px`;
+            focusContainer.style.right = isRtl ? `${(box.right || 0) - (box2.right || 0)}px` : '';
             focusContainer.style.top = `${box.top - box2.top}px`;
             focusContainer.style.width = `${box.width}px`;
             focusContainer.style.height = `${box.height}px`;

diff --git a/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.scss b/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.scss
@@ -63,12 +63,19 @@
                 content: ' ';
                 position: absolute;
                 top: 0;
-                left: 0;
                 z-index: 5;
                 pointer-events: none;
                 background-color: var(--dv-tab-divider-color);
                 width: 1px;
                 height: 100%;
+
+                .dv-ltr & {
+                    left: 0;
+                }
+
+                .dv-rtl & {
+                    right: 0;
+                }
             }
         }
     }

diff --git a/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts b/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts
@@ -251,15 +251,15 @@ export class TabsContainer
                     ) {
                         event.preventDefault();
 
-                        const { top, left } =
+                        const { top, left, right } =
                             this.element.getBoundingClientRect();
-                        const { top: rootTop, left: rootLeft } =
+                        const { top: rootTop, left: rootLeft, right: rootRight } =
                             this.accessor.element.getBoundingClientRect();
 
                         this.accessor.addFloatingGroup(
                             this.group,
                             {
-                                x: left - rootLeft + 20,
+                                x: (this.accessor.options.isRtl ? (right - rootRight) : (left - rootLeft)) + 20,
                                 y: top - rootTop + 20,
                             },
                             { inDragMode: true }
@@ -361,14 +361,14 @@ export class TabsContainer
 
                     const panel = this.accessor.getGroupPanel(tab.panel.id);
 
-                    const { top, left } = tab.element.getBoundingClientRect();
-                    const { top: rootTop, left: rootLeft } =
+                    const { top, left, right } = tab.element.getBoundingClientRect();
+                    const { top: rootTop, left: rootLeft, right: rootRight } =
                         this.accessor.element.getBoundingClientRect();
 
                     this.accessor.addFloatingGroup(
                         panel as DockviewPanel,
                         {
-                            x: left - rootLeft,
+                            x: (this.accessor.options.isRtl ? (right - rootRight) : (left - rootLeft)) + 20,
                             y: top - rootTop,
                         },
                         { inDragMode: true }

diff --git a/packages/dockview-core/src/dockview/dockviewComponent.scss b/packages/dockview-core/src/dockview/dockviewComponent.scss
@@ -2,12 +2,20 @@
     position: relative;
     background-color: var(--dv-group-view-background-color);
 
+    &.dv-ltr {
+        direction: ltr;
+    }
+
+    &.dv-rtl {
+        direction: rtl;
+    }
+
     .dv-watermark-container {
         position: absolute;
         top: 0px;
         left: 0px;
+        right: 0px;
         height: 100%;
-        width: 100%;
         z-index: 1;
     }
 

diff --git a/packages/dockview-core/src/dockview/dockviewComponent.ts b/packages/dockview-core/src/dockview/dockviewComponent.ts
@@ -316,6 +316,7 @@ export class DockviewComponent
             styles: options.styles,
             parentElement: options.parentElement,
             disableAutoResizing: options.disableAutoResizing,
+            isRtl: options.isRtl,
         });
 
         const gready = document.createElement('div');
@@ -1007,7 +1008,8 @@ export class DockviewComponent
                 const relativeLocation = getRelativeLocation(
                     this.gridview.orientation,
                     location,
-                    target
+                    target,
+                    this.options.isRtl
                 );
                 const group = this.createGroupAtLocation(relativeLocation);
                 panel = this.createPanel(options, group);
@@ -1155,7 +1157,8 @@ export class DockviewComponent
             const relativeLocation = getRelativeLocation(
                 this.gridview.orientation,
                 location,
-                target
+                target,
+                this.options.isRtl
             );
             this.doAddGroup(group, relativeLocation);
             return group;
@@ -1270,7 +1273,8 @@ export class DockviewComponent
             const targetLocation = getRelativeLocation(
                 this.gridview.orientation,
                 referenceLocation,
-                destinationTarget
+                destinationTarget,
+                this.options.isRtl
             );
 
             if (sourceGroup && sourceGroup.size < 2) {
@@ -1310,7 +1314,8 @@ export class DockviewComponent
                 const location = getRelativeLocation(
                     this.gridview.orientation,
                     updatedReferenceLocation,
-                    destinationTarget
+                    destinationTarget,
+                    this.options.isRtl
                 );
                 this.doAddGroup(targetGroup, location);
             } else {
@@ -1325,7 +1330,8 @@ export class DockviewComponent
                 const dropLocation = getRelativeLocation(
                     this.gridview.orientation,
                     referenceLocation,
-                    destinationTarget
+                    destinationTarget,
+                    this.options.isRtl
                 );
 
                 const group = this.createGroupAtLocation(dropLocation);
@@ -1374,7 +1380,8 @@ export class DockviewComponent
                 const dropLocation = getRelativeLocation(
                     this.gridview.orientation,
                     referenceLocation,
-                    target
+                    target,
+                    this.options.isRtl
                 );
 
                 this.gridview.addView(

diff --git a/packages/dockview-core/src/dockview/dockviewFloatingGroupPanel.ts b/packages/dockview-core/src/dockview/dockviewFloatingGroupPanel.ts
@@ -7,7 +7,7 @@ export interface IDockviewFloatingGroupPanel {
     position(
         bounds: Partial<{
             top: number;
-            left: number;
+            side: number;
             height: number;
             width: number;
         }>
@@ -27,7 +27,7 @@ export class DockviewFloatingGroupPanel
     position(
         bounds: Partial<{
             top: number;
-            left: number;
+            side: number;
             height: number;
             width: number;
         }>

diff --git a/packages/dockview-core/src/dockview/options.ts b/packages/dockview-core/src/dockview/options.ts
@@ -98,6 +98,7 @@ export interface DockviewComponentOptions extends DockviewRenderFunctions {
               minimumWidthWithinViewport?: number;
           };
     defaultRenderer?: DockviewPanelRenderer;
+    isRtl?: boolean;
     debug?: boolean;
 }
 

diff --git a/packages/dockview-core/src/dom.ts b/packages/dockview-core/src/dom.ts
@@ -186,15 +186,29 @@ export function quasiDefaultPrevented(event: Event): boolean {
     return (event as any)[QUASI_PREVENT_DEFAULT_KEY];
 }
 
+// Gets whether the given class exists in the element or its parent tree
+export function hasClassInTree(domNode: Element, className: string): boolean {
+    if (domNode.classList.contains(className)) {
+      return true;
+    }
+    if (domNode.parentElement) {
+      return hasClassInTree(domNode.parentElement, className);
+    }
+    return false;
+}
+
 export function getDomNodePagePosition(domNode: Element): {
-    left: number;
+    left?: number;
+    right?: number;
     top: number;
     width: number;
     height: number;
 } {
-    const { left, top, width, height } = domNode.getBoundingClientRect();
+    const isRtl = hasClassInTree(domNode, 'dv-rtl');
+    const { left, right, top, width, height } = domNode.getBoundingClientRect();
     return {
-        left: left + window.scrollX,
+        left: isRtl ? undefined : left + window.scrollX,
+        right: isRtl ? right + window.scrollX : undefined,
         top: top + window.scrollY,
         width: width,
         height: height,

diff --git a/packages/dockview-core/src/gridview/baseComponentGridview.ts b/packages/dockview-core/src/gridview/baseComponentGridview.ts
@@ -7,6 +7,7 @@ import { ISplitviewStyles, Orientation, Sizing } from '../splitview/splitview';
 import { IPanel } from '../panel/types';
 import { MovementOptions2 } from '../dockview/options';
 import { Resizable } from '../resizable';
+import { toggleClass } from '../dom';
 
 const nextLayoutId = sequentialNumberGenerator();
 
@@ -34,6 +35,7 @@ export interface BaseGridOptions {
     readonly styles?: ISplitviewStyles;
     readonly parentElement?: HTMLElement;
     readonly disableAutoResizing?: boolean;
+    readonly isRtl?: boolean;
 }
 
 export interface IGridPanelView extends IGridView, IPanel {
@@ -137,6 +139,9 @@ export abstract class BaseGrid<T extends IGridPanelView>
             options.orientation
         );
 
+        toggleClass(this.gridview.element, 'dv-rtl', options.isRtl === true);
+        toggleClass(this.gridview.element, 'dv-ltr', options.isRtl === false);
+
         this.element.appendChild(this.gridview.element);
 
         this.layout(0, 0, true); // set some elements height/widths

diff --git a/packages/dockview-core/src/gridview/gridview.scss b/packages/dockview-core/src/gridview/gridview.scss
@@ -2,4 +2,12 @@
 .branch-node {
     height: 100%;
     width: 100%;
+
+    &.dv-ltr {
+        direction: ltr;
+    }
+
+    &.dv-rtl {
+        direction: rtl;
+    }
 }
diff --git a/packages/dockview-core/src/gridview/gridview.ts b/packages/dockview-core/src/gridview/gridview.ts
@@ -123,7 +123,8 @@ export function getGridLocation(element: HTMLElement): number[] {
 export function getRelativeLocation(
     rootOrientation: Orientation,
     location: number[],
-    direction: Position
+    direction: Position,
+    isRtl?: boolean
 ): number[] {
     const orientation = getLocationOrientation(rootOrientation, location);
     const directionOrientation = getDirectionOrientation(direction);
@@ -132,13 +133,13 @@ export function getRelativeLocation(
         const [rest, _index] = tail(location);
         let index = _index;
 
-        if (direction === 'right' || direction === 'bottom') {
+        if ((isRtl ? direction === 'left' : direction === 'right') || direction === 'bottom') {
             index += 1;
         }
 
         return [...rest, index];
     } else {
-        const index = direction === 'right' || direction === 'bottom' ? 1 : 0;
+        const index = (isRtl ? direction === 'left' : direction === 'right') || direction === 'bottom' ? 1 : 0;
         return [...location, index];
     }
 }

diff --git a/packages/dockview-core/src/gridview/gridviewComponent.ts b/packages/dockview-core/src/gridview/gridviewComponent.ts
@@ -110,6 +110,7 @@ export class GridviewComponent
             orientation: options.orientation,
             styles: options.styles,
             disableAutoResizing: options.disableAutoResizing,
+            isRtl: options.isRtl,
         });
 
         this._options = options;
@@ -299,7 +300,8 @@ export class GridviewComponent
             relativeLocation = getRelativeLocation(
                 this.gridview.orientation,
                 location,
-                target
+                target,
+                this.options.isRtl
             );
         }
 
@@ -330,7 +332,8 @@ export class GridviewComponent
                 relativeLocation = getRelativeLocation(
                     this.gridview.orientation,
                     location,
-                    target
+                    target,
+                    this.options.isRtl
                 );
             }
         }
@@ -406,7 +409,8 @@ export class GridviewComponent
         const targetLocation = getRelativeLocation(
             this.gridview.orientation,
             referenceLocation,
-            target
+            target,
+            this.options.isRtl
         );
 
         const [targetParentLocation, to] = tail(targetLocation);
@@ -435,7 +439,8 @@ export class GridviewComponent
         const location = getRelativeLocation(
             this.gridview.orientation,
             updatedReferenceLocation,
-            target
+            target,
+            this.options.isRtl
         );
         this.doAddGroup(targetGroup, location);
     }

diff --git a/packages/dockview-core/src/gridview/options.ts b/packages/dockview-core/src/gridview/options.ts
@@ -17,5 +17,6 @@ export interface GridviewComponentOptions {
     };
     frameworkComponentFactory?: FrameworkFactory<GridviewPanel>;
     styles?: ISplitviewStyles;
+    isRtl?: boolean;
     parentElement?: HTMLElement;
 }