From 94f06d88f19f219ec0d3e0190601ce9d9707d210 Mon Sep 17 00:00:00 2001
From: Jalal <jimmy002020@gmail.com>
Date: Tue, 13 Jul 2021 08:44:19 +0200
Subject: [PATCH] Unify Draggable opts with DnD  (#282)

* unify draggable opts

* refactor base opts

* add overflow-x method
---
 packages/dnd/src/DnD.ts                 | 13 +++++++++----
 packages/dnd/src/Draggable/Base.ts      | 21 ++++++++++++++++++---
 packages/dnd/src/Draggable/Draggable.ts |  4 ++--
 packages/dnd/src/Draggable/types.ts     |  8 ++------
 packages/dnd/src/types.ts               | 16 ++++++++++++++++
 5 files changed, 47 insertions(+), 15 deletions(-)

diff --git a/packages/dnd/src/DnD.ts b/packages/dnd/src/DnD.ts
index 4725c697d..2dbb4a6a4 100644
--- a/packages/dnd/src/DnD.ts
+++ b/packages/dnd/src/DnD.ts
@@ -13,10 +13,9 @@ import store from "./DnDStore";
 
 import type { ElmTree } from "./DnDStore";
 
-import type { DndOpts } from "./types";
-import { DraggableOpts } from "./Draggable/types";
+import type { DndOpts, FinalDndOpts } from "./types";
 
-const defaultOpts = Object.freeze({
+const defaultOpts: DndOpts = Object.freeze({
   thresholds: {
     vertical: 60,
     horizontal: 60,
@@ -28,6 +27,12 @@ const defaultOpts = Object.freeze({
     allowLeavingFromLeft: true,
     allowLeavingFromRight: true,
   },
+
+  scroll: {
+    enable: true,
+    speed: 10,
+    threshold: 50,
+  },
 });
 
 class DnD extends Droppable {
@@ -69,7 +74,7 @@ class DnD extends Droppable {
       elmCoreInstanceWithTree,
       siblingsBoundaries,
       initCoordinates,
-      options as DraggableOpts
+      options as FinalDndOpts
     );
 
     super(draggable);
diff --git a/packages/dnd/src/Draggable/Base.ts b/packages/dnd/src/Draggable/Base.ts
index a23dbbcae..0007cc77b 100644
--- a/packages/dnd/src/Draggable/Base.ts
+++ b/packages/dnd/src/Draggable/Base.ts
@@ -19,8 +19,8 @@ import type {
   DraggableBaseInterface,
   ThresholdPercentages,
   LayoutThresholds,
-  DraggableOpts,
 } from "./types";
+import { FinalDndOpts } from "../types";
 
 /**
  * Base element.
@@ -35,7 +35,7 @@ class Base
 
   operationID: string;
 
-  opts: DraggableOpts;
+  opts: FinalDndOpts;
 
   parentsList: ELmBranch;
 
@@ -55,7 +55,7 @@ class Base
     elmTree: ElmTree,
     siblingsBoundaries: BoundariesOffset,
     initCoordinates: MouseCoordinates,
-    opts: DraggableOpts
+    opts: FinalDndOpts
   ) {
     const {
       element,
@@ -204,6 +204,15 @@ class Base
     $.maxRight = left + horizontal;
   }
 
+  isParenOverflowX() {
+    const parentBottom =
+      this.activeParent!.offset.top + this.activeParent!.offset.height;
+
+    const elemOverflowX = parentBottom > window.innerHeight;
+
+    return elemOverflowX;
+  }
+
   /**
    * Assigns new ACTIVE_PARENT: parent who contains dragged
    *
@@ -221,6 +230,12 @@ class Base
      * transformed and which is not.
      */
     this.isOutActiveParent = false;
+
+    if (this.opts.scroll.enable) {
+      this.opts.scroll.enable = this.opts.scroll.enable
+        ? this.isParenOverflowX()
+        : false;
+    }
   }
 }
 
diff --git a/packages/dnd/src/Draggable/Draggable.ts b/packages/dnd/src/Draggable/Draggable.ts
index 9b38ce6ce..e71bf2144 100644
--- a/packages/dnd/src/Draggable/Draggable.ts
+++ b/packages/dnd/src/Draggable/Draggable.ts
@@ -16,8 +16,8 @@ import type {
   TempOffset,
   Threshold,
   TempTranslate,
-  DraggableOpts,
 } from "./types";
+import type { FinalDndOpts } from "../types";
 
 class Draggable extends Base implements DraggableDnDInterface {
   private innerOffsetX: number;
@@ -46,7 +46,7 @@ class Draggable extends Base implements DraggableDnDInterface {
     elmTree: ElmTree,
     siblingsBoundaries: BoundariesOffset,
     initCoordinates: MouseCoordinates,
-    opts: DraggableOpts
+    opts: FinalDndOpts
   ) {
     super(elmTree, siblingsBoundaries, initCoordinates, opts);
 
diff --git a/packages/dnd/src/Draggable/types.ts b/packages/dnd/src/Draggable/types.ts
index 6b5db50e2..75bca38f6 100644
--- a/packages/dnd/src/Draggable/types.ts
+++ b/packages/dnd/src/Draggable/types.ts
@@ -8,6 +8,7 @@
 import type { CoreInstanceInterface } from "@dflex/core-instance";
 import type { ELmBranch } from "@dflex/dom-gen";
 import type { AbstractDraggableInterface } from "@dflex/draggable";
+import type { FinalDndOpts } from "../types";
 
 export interface ThresholdPercentages {
   vertical: number;
@@ -43,17 +44,12 @@ export interface Restrictions {
   allowLeavingFromRight: boolean;
 }
 
-export interface DraggableOpts {
-  restrictions: Restrictions;
-  thresholds: ThresholdPercentages;
-}
-
 export interface DraggableBaseInterface
   extends AbstractDraggableInterface<CoreInstanceInterface> {
   tempIndex: number;
   operationID: string;
 
-  opts: DraggableOpts;
+  opts: FinalDndOpts;
 
   parentsList: ELmBranch | null;
   siblingsList: string[] | null;
diff --git a/packages/dnd/src/types.ts b/packages/dnd/src/types.ts
index d018ebeb2..9b5294d23 100644
--- a/packages/dnd/src/types.ts
+++ b/packages/dnd/src/types.ts
@@ -6,7 +6,23 @@
  */
 import type { ThresholdPercentages, Restrictions } from "./Draggable";
 
+export interface ScrollOpt {
+  speed: number;
+  threshold: number;
+}
+
+export interface Scroll extends ScrollOpt {
+  enable: boolean;
+}
+
+export interface FinalDndOpts {
+  thresholds: ThresholdPercentages;
+  restrictions: Restrictions;
+  scroll: Scroll;
+}
+
 export interface DndOpts {
   thresholds?: Partial<ThresholdPercentages>;
   restrictions?: Partial<Restrictions>;
+  scroll?: Partial<Scroll>;
 }