resolved some comments

Author: danielgindi

src/dd-draggable.ts

@@ -402,9 +402,9 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
       : (-event.clientX + targetOffset.left - xformOffsetX);
 
     return {
-      x: x,
+      x,
       top: targetOffset.top,
-      offsetX: offsetX,
+      offsetX,
       offsetTop: - event.clientY + targetOffset.top - xformOffsetY,
       width: targetOffset.width * this.dragTransform.xScale,
       height: targetOffset.height * this.dragTransform.yScale

src/gridstack.scss

@@ -28,7 +28,7 @@
  .grid-stack > .grid-stack-item {
    position: absolute;
    padding: 0;
-   top: 0;
+   top: 0; // some default to reduce at least first row inline styles
    width: var(--gs-column-width); // reduce 1x1 items inline styles
    height: var(--gs-cell-height);
 
@@ -45,10 +45,10 @@
  }
 
  .grid-stack:not(.grid-stack-rtl) > .grid-stack-item {
-   left: 0; // some default to reduce at least first row/column inline styles
+   left: 0; // some default to reduce at least first column inline styles
  }
  .grid-stack.grid-stack-rtl > .grid-stack-item {
-   right: 0; // some default to reduce at least first row/column inline styles
+   right: 0; // some default to reduce at least first column inline styles
  }
 
  .grid-stack {

src/gridstack.ts

@@ -224,8 +224,6 @@ export class GridStack {
   /** @internal true if we got created by drag over gesture, so we can removed on drag out (temporary) */
   public _isTemp?: boolean;
 
-  private isRtl = false;
-
   /**
    * @internal create placeholder DIV as needed
    * @returns the placeholder element for indicating drop zones during drag operations
@@ -335,7 +333,6 @@ export class GridStack {
     if (opts.rtl) {
       this.el.classList.add('grid-stack-rtl');
     }
-    this.isRtl = opts.rtl;
 
     // check if we're been nested, and if so update our style and keep pointer around (used during save)
     const parentGridItem: GridItemHTMLElement = this.el.closest('.' + gridDefaults.itemClass);
@@ -1924,7 +1921,7 @@ export class GridStack {
   protected _writePosAttr(el: HTMLElement, n: GridStackNode): GridStack {
     // Avoid overwriting the inline style of the element during drag/resize, but always update the placeholder
     if ((!n._moving && !n._resizing) || this._placeholder === el) {
-      const xProp = this.isRtl ? 'right' : 'left';
+      const xProp = this.opts.rtl ? 'right' : 'left';
       // width/height:1 x/y:0 is set by default in the main CSS, so no need to set inlined vars
       el.style.top = n.y ? (n.y === 1 ? `var(--gs-cell-height)` : `calc(${n.y} * var(--gs-cell-height))`) : null;
       el.style[xProp] = n.x ? (n.x === 1 ? `var(--gs-column-width)` : `calc(${n.x} * var(--gs-column-width))`) : null;
@@ -2803,12 +2800,12 @@ export class GridStack {
         start: onStartMoving,
         stop: onEndMoving,
         drag: dragOrResize,
-        rtl: this.isRtl,
+        rtl: this.opts.rtl,
       }).resizable(el, {
         start: onStartMoving,
         stop: onEndMoving,
         resize: dragOrResize,
-        rtl: this.isRtl,
+        rtl: this.opts.rtl,
       });
       node._initDD = true; // we've set DD support now
     }