move DragListener/HitDragListener away from jq

src/common/DragListener.ts

@@ -16,6 +16,14 @@ import { default as ListenerMixin, ListenerInterface } from './ListenerMixin'
 import GlobalEmitter from './GlobalEmitter'
 
 
+export interface DragListenerOptions {
+  delay?: number
+  distance?: number
+  subjectEl?: HTMLElement
+  scroll?: boolean
+  [handlerName: string]: any
+}
+
 /* Tracks a drag's mouse movement, firing various handlers
 ----------------------------------------------------------------------------------------------------------------------*/
 // TODO: use Emitter
@@ -26,8 +34,8 @@ export default class DragListener {
   stopListeningTo: ListenerInterface['stopListeningTo']
 
   $document: JQuery
-  options: any
-  subjectEl: JQuery
+  options: DragListenerOptions
+  subjectEl: HTMLElement
 
   // coordinates of the initial mousedown
   originX: any
@@ -35,7 +43,7 @@ export default class DragListener {
 
   // the wrapping element that scrolls, or MIGHT scroll if there's overflow.
   // TODO: do this for wrappers that have overflow:hidden as well.
-  scrollEl: JQuery
+  scrollEl: HTMLElement
 
   isInteracting: boolean = false
   isDistanceSurpassed: boolean = false
@@ -64,7 +72,7 @@ export default class DragListener {
   scrollIntervalMs: number = 50 // millisecond wait between scroll increment
 
 
-  constructor(options) {
+  constructor(options: DragListenerOptions) {
     this.options = options || {}
   }
 
@@ -102,7 +110,7 @@ export default class DragListener {
 
       this.originX = getEvX(ev)
       this.originY = getEvY(ev)
-      this.scrollEl = getScrollParent($(ev.target))
+      this.scrollEl = getScrollParent($(ev.target))[0]
 
       this.bindHandlers()
       this.initAutoScroll()
@@ -349,8 +357,8 @@ export default class DragListener {
     this.isAutoScroll =
       this.options.scroll &&
       scrollEl &&
-      !scrollEl.is(window) &&
-      !scrollEl.is(document)
+      scrollEl !== (window as any) &&
+      scrollEl !== (document as any)
 
     if (this.isAutoScroll) {
       // debounce makes sure rapid calls don't happen
@@ -372,7 +380,7 @@ export default class DragListener {
   // Computes and stores the bounding rectangle of scrollEl
   computeScrollBounds() {
     if (this.isAutoScroll) {
-      this.scrollBounds = this.scrollEl[0].getBoundingClientRect()
+      this.scrollBounds = this.scrollEl.getBoundingClientRect()
       // TODO: use getClientRect in future. but prevents auto scrolling when on top of scrollbars
     }
   }
@@ -440,21 +448,21 @@ export default class DragListener {
     let el = this.scrollEl
 
     if (this.scrollTopVel < 0) { // scrolling up?
-      if (el.scrollTop() <= 0) { // already scrolled all the way up?
+      if (el.scrollTop <= 0) { // already scrolled all the way up?
         this.scrollTopVel = 0
       }
     } else if (this.scrollTopVel > 0) { // scrolling down?
-      if (el.scrollTop() + el[0].clientHeight >= el[0].scrollHeight) { // already scrolled all the way down?
+      if (el.scrollTop + el.clientHeight >= el.scrollHeight) { // already scrolled all the way down?
         this.scrollTopVel = 0
       }
     }
 
     if (this.scrollLeftVel < 0) { // scrolling left?
-      if (el.scrollLeft() <= 0) { // already scrolled all the left?
+      if (el.scrollLeft <= 0) { // already scrolled all the left?
         this.scrollLeftVel = 0
       }
     } else if (this.scrollLeftVel > 0) { // scrolling right?
-      if (el.scrollLeft() + el[0].clientWidth >= el[0].scrollWidth) { // already scrolled all the way right?
+      if (el.scrollLeft + el.clientWidth >= el.scrollWidth) { // already scrolled all the way right?
         this.scrollLeftVel = 0
       }
     }
@@ -468,10 +476,10 @@ export default class DragListener {
 
     // change the value of scrollEl's scroll
     if (this.scrollTopVel) {
-      el.scrollTop(el.scrollTop() + this.scrollTopVel * frac)
+      el.scrollTop = el.scrollTop + this.scrollTopVel * frac
     }
     if (this.scrollLeftVel) {
-      el.scrollLeft(el.scrollLeft() + this.scrollLeftVel * frac)
+      el.scrollLeft = el.scrollLeft + this.scrollLeftVel * frac
     }
 
     this.constrainScrollVel() // since the scroll values changed, recompute the velocities

src/common/HitDragListener.ts

@@ -6,18 +6,21 @@ import {
   getRectCenter,
   diffPoints
 } from '../util'
-import DragListener from './DragListener'
+import { default as DragListener, DragListenerOptions } from './DragListener'
+
+
+export interface HitDragListenerOptions extends DragListenerOptions {
+  subjectCenter?: boolean
+}
 
 
 /* Tracks mouse movements over a component and raises events about which hit the mouse is over.
 ------------------------------------------------------------------------------------------------------------------------
-options:
-- subjectEl
-- subjectCenter
 */
 
 export default class HitDragListener extends DragListener {
 
+  options: HitDragListenerOptions
   component: any // converts coordinates to hits
     // methods: hitsNeeded, hitsNotNeeded, queryHit
 
@@ -26,7 +29,7 @@ export default class HitDragListener extends DragListener {
   coordAdjust: any // delta that will be added to the mouse coordinates when computing collisions
 
 
-  constructor(component, options) {
+  constructor(component, options: HitDragListenerOptions) {
     super(options)
     this.component = component
   }
@@ -48,7 +51,7 @@ export default class HitDragListener extends DragListener {
 
       // constrain the point to bounds of the element being dragged
       if (subjectEl) {
-        subjectRect = subjectEl[0].getBoundingClientRect() // used for centering as well
+        subjectRect = subjectEl.getBoundingClientRect() // used for centering as well
         point = constrainPoint(point, subjectRect)
       }
 

src/component/interactions/EventDragging.ts

@@ -134,7 +134,7 @@ export default class EventDragging extends Interaction {
     // of the view.
     let dragListener = this.dragListener = new HitDragListener(view, {
       scroll: this.opt('dragScroll'),
-      subjectEl: el,
+      subjectEl: el[0],
       subjectCenter: true,
       interactionStart: (ev) => {
         seg.component = component // for renderDrag

src/component/interactions/EventResizing.ts

@@ -77,7 +77,7 @@ export default class EventResizing extends Interaction {
     // Tracks mouse movement over the *grid's* coordinate map
     let dragListener = this.dragListener = new HitDragListener(component, {
       scroll: this.opt('dragScroll'),
-      subjectEl: el,
+      subjectEl: el[0],
       interactionStart: () => {
         isDragging = false
       },