gridstack · adumesny · Feb 7, 2024 · Feb 7, 2024
diff --git a/src/dd-draggable.ts b/src/dd-draggable.ts
@@ -41,8 +41,6 @@ const skipMouseDown = 'input,textarea,button,select,option,[contenteditable="tru
 // let count = 0; // TEST
 
 export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt<DDDraggableOpt> {
-  public el: HTMLElement;
-  public option: DDDraggableOpt;
   public helper: HTMLElement; // used by GridStackDDNative
 
   /** @internal */
@@ -71,10 +69,8 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
     yOffset: 0
   };
 
-  constructor(el: HTMLElement, option: DDDraggableOpt = {}) {
+  constructor(public el: HTMLElement, public option: DDDraggableOpt = {}) {
     super();
-    this.el = el;
-    this.option = option;
 
     // get the element that is actually supposed to be dragged by
     let handleName = option.handle.substring(1);

diff --git a/src/dd-droppable.ts b/src/dd-droppable.ts
@@ -23,13 +23,9 @@ export interface DDDroppableOpt {
 export class DDDroppable extends DDBaseImplement implements HTMLElementExtendOpt<DDDroppableOpt> {
 
   public accept: (el: HTMLElement) => boolean;
-  public el: HTMLElement;
-  public option: DDDroppableOpt;
 
-  constructor(el: HTMLElement, opts: DDDroppableOpt = {}) {
+  constructor(public el: HTMLElement, public option: DDDroppableOpt = {}) {
     super();
-    this.el = el;
-    this.option = opts;
     // create var event binding so we can easily remove and still look like TS methods (unlike anonymous functions)
     this._mouseEnter = this._mouseEnter.bind(this);
     this._mouseLeave = this._mouseLeave.bind(this);

diff --git a/src/dd-element.ts b/src/dd-element.ts
@@ -19,14 +19,11 @@ export class DDElement {
     return el.ddElement;
   }
 
-  public el: DDElementHost;
   public ddDraggable?: DDDraggable;
   public ddDroppable?: DDDroppable;
   public ddResizable?: DDResizable;
 
-  constructor(el: DDElementHost) {
-    this.el = el;
-  }
+  constructor(public el: DDElementHost) {}
 
   public on(eventName: string, callback: (event: MouseEvent) => void): DDElement {
     if (this.ddDraggable && ['drag', 'dragstart', 'dragstop'].indexOf(eventName) > -1) {

diff --git a/src/dd-resizable-handle.ts b/src/dd-resizable-handle.ts
@@ -14,23 +14,14 @@ export interface DDResizableHandleOpt {
 export class DDResizableHandle {
   /** @internal */
   protected el: HTMLElement;
-  /** @internal */
-  protected host: HTMLElement;
-  /** @internal */
-  protected option: DDResizableHandleOpt;
-  /** @internal */
-  protected dir: string;
   /** @internal true after we've moved enough pixels to start a resize */
   protected moving = false;
   /** @internal */
   protected mouseDownEvent: MouseEvent;
   /** @internal */
   protected static prefix = 'ui-resizable-';
 
-  constructor(host: HTMLElement, direction: string, option: DDResizableHandleOpt) {
-    this.host = host;
-    this.dir = direction;
-    this.option = option;
+  constructor(protected host: HTMLElement, protected dir: string, protected option: DDResizableHandleOpt) {
     // create var event binding so we can easily remove and still look like TS methods (unlike anonymous functions)
     this._mouseDown = this._mouseDown.bind(this);
     this._mouseMove = this._mouseMove.bind(this);
@@ -41,12 +32,11 @@ export class DDResizableHandle {
 
   /** @internal */
   protected _init(): DDResizableHandle {
-    const el = document.createElement('div');
+    const el = this.el = document.createElement('div');
     el.classList.add('ui-resizable-handle');
     el.classList.add(`${DDResizableHandle.prefix}${this.dir}`);
     el.style.zIndex = '100';
     el.style.userSelect = 'none';
-    this.el = el;
     this.host.appendChild(this.el);
     this.el.addEventListener('mousedown', this._mouseDown);
     if (isTouch) {

diff --git a/src/dd-resizable.ts b/src/dd-resizable.ts
@@ -30,11 +30,6 @@ interface RectScaleReciprocal {
 }
 
 export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt<DDResizableOpt> {
-
-  // have to be public else complains for HTMLElementExtendOpt ?
-  public el: GridItemHTMLElement;
-  public option: DDResizableOpt;
-
   /** @internal */
   protected handlers: DDResizableHandle[];
   /** @internal */
@@ -60,10 +55,9 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt
   /** @internal */
   protected sizeToContent: boolean;
 
-  constructor(el: HTMLElement, opts: DDResizableOpt = {}) {
+  // have to be public else complains for HTMLElementExtendOpt ?
+  constructor(public el: GridItemHTMLElement, public option: DDResizableOpt = {}) {
     super();
-    this.el = el;
-    this.option = opts;
     // create var event binding so we can easily remove and still look like TS methods (unlike anonymous functions)
     this._mouseOver = this._mouseOver.bind(this);
     this._mouseOut = this._mouseOut.bind(this);

diff --git a/src/gridstack.ts b/src/gridstack.ts
@@ -207,15 +207,9 @@ export class GridStack {
   /** scoping so users can call new GridStack.Engine(12) for example */
   public static Engine = GridStackEngine;
 
-  /** the HTML element tied to this grid after it's been initialized */
-  public el: GridHTMLElement;
-
   /** engine used to implement non DOM grid functionality */
   public engine: GridStackEngine;
 
-  /** grid options - public for classes to access, but use methods to modify! */
-  public opts: GridStackOptions;
-
   /** point to a parent grid item if we're nested (inside a grid-item in between 2 Grids) */
   public parentGridItem?: GridStackNode;
 
@@ -267,12 +261,11 @@ export class GridStack {
 
   /**
    * Construct a grid item from the given element and options
-   * @param el
-   * @param opts
+   * @param el the HTML element tied to this grid after it's been initialized
+   * @param opts grid options - public for classes to access, but use methods to modify!
    */
-  public constructor(el: GridHTMLElement, opts: GridStackOptions = {}) {
+  public constructor(public el: GridHTMLElement, public opts: GridStackOptions = {}) {
     el.gridstack = this;
-    this.el = el; // exposed HTML element to the user
     opts = opts || {}; // handles null/undefined/0
 
     if (!el.classList.contains('grid-stack')) {
@@ -344,18 +337,17 @@ export class GridStack {
       defaults.animate = Utils.toBool(el.getAttribute('gs-animate'))
     }
 
-    this.opts = Utils.defaults(opts, defaults);
-    opts = null; // make sure we use this.opts instead
+    opts = Utils.defaults(opts, defaults);
     this._initMargin(); // part of settings defaults...
 
     // Now check if we're loading into 1 column mode FIRST so we don't do un-necessary work (like cellHeight = width / 12 then go 1 column)
     this.checkDynamicColumn();
-    this.el.classList.add('gs-' + this.opts.column);
+    this.el.classList.add('gs-' + opts.column);
 
-    if (this.opts.rtl === 'auto') {
-      this.opts.rtl = (el.style.direction === 'rtl');
+    if (opts.rtl === 'auto') {
+      opts.rtl = (el.style.direction === 'rtl');
     }
-    if (this.opts.rtl) {
+    if (opts.rtl) {
       this.el.classList.add('grid-stack-rtl');
     }
 
@@ -369,34 +361,34 @@ export class GridStack {
       parentGridItem.el.classList.add('grid-stack-sub-grid');
     }
 
-    this._isAutoCellHeight = (this.opts.cellHeight === 'auto');
-    if (this._isAutoCellHeight || this.opts.cellHeight === 'initial') {
+    this._isAutoCellHeight = (opts.cellHeight === 'auto');
+    if (this._isAutoCellHeight || opts.cellHeight === 'initial') {
       // make the cell content square initially (will use resize/column event to keep it square)
       this.cellHeight(undefined, false);
     } else {
       // append unit if any are set
-      if (typeof this.opts.cellHeight == 'number' && this.opts.cellHeightUnit && this.opts.cellHeightUnit !== gridDefaults.cellHeightUnit) {
-        this.opts.cellHeight = this.opts.cellHeight + this.opts.cellHeightUnit;
-        delete this.opts.cellHeightUnit;
+      if (typeof opts.cellHeight == 'number' && opts.cellHeightUnit && opts.cellHeightUnit !== gridDefaults.cellHeightUnit) {
+        opts.cellHeight = opts.cellHeight + opts.cellHeightUnit;
+        delete opts.cellHeightUnit;
       }
-      this.cellHeight(this.opts.cellHeight, false);
+      this.cellHeight(opts.cellHeight, false);
     }
 
     // see if we need to adjust auto-hide
-    if (this.opts.alwaysShowResizeHandle === 'mobile') {
-      this.opts.alwaysShowResizeHandle = isTouch;
+    if (opts.alwaysShowResizeHandle === 'mobile') {
+      opts.alwaysShowResizeHandle = isTouch;
     }
 
     this._styleSheetClass = 'gs-id-' + GridStackEngine._idSeq++;
     this.el.classList.add(this._styleSheetClass);
 
     this._setStaticClass();
 
-    let engineClass = this.opts.engineClass || GridStack.engineClass || GridStackEngine;
+    let engineClass = opts.engineClass || GridStack.engineClass || GridStackEngine;
     this.engine = new engineClass({
       column: this.getColumn(),
-      float: this.opts.float,
-      maxRow: this.opts.maxRow,
+      float: opts.float,
+      maxRow: opts.maxRow,
       onChange: (cbNodes) => {
         let maxH = 0;
         this.engine.nodes.forEach(n => { maxH = Math.max(maxH, n.y + n.h) });
@@ -417,25 +409,25 @@ export class GridStack {
     // create initial global styles BEFORE loading children so resizeToContent margin can be calculated correctly
     this._updateStyles(false, 0);
 
-    if (this.opts.auto) {
+    if (opts.auto) {
       this.batchUpdate(); // prevent in between re-layout #1535 TODO: this only set float=true, need to prevent collision check...
       this.getGridItems().forEach(el => this._prepareElement(el));
       this.batchUpdate(false);
     }
 
     // load any passed in children as well, which overrides any DOM layout done above
-    if (this.opts.children) {
-      let children = this.opts.children;
-      delete this.opts.children;
+    if (opts.children) {
+      let children = opts.children;
+      delete opts.children;
       if (children.length) this.load(children); // don't load empty
     }
 
     // if (this.engine.nodes.length) this._updateStyles(); // update based on # of children. done in engine onChange CB
-    this.setAnimation(this.opts.animate);
+    this.setAnimation(opts.animate);
 
     // dynamic grids require pausing during drag to detect over to nest vs push
-    if (this.opts.subGridDynamic && !DDManager.pauseDrag) DDManager.pauseDrag = true;
-    if (this.opts.draggable?.pause !== undefined) DDManager.pauseDrag = this.opts.draggable.pause;
+    if (opts.subGridDynamic && !DDManager.pauseDrag) DDManager.pauseDrag = true;
+    if (opts.draggable?.pause !== undefined) DDManager.pauseDrag = opts.draggable.pause;
 
     this._setupRemoveDrop();
     this._setupAcceptWidget();