refactor: panning-accessor and panning-manager

fix #21

packages/x6/src/addon/dnd/index.ts

@@ -388,8 +388,8 @@ export class Dnd<T> extends Disablable<Dnd.EventArgMap<T>> {
   protected onDragOver(graph: Graph, e: MouseEvent) {
     const offset = util.getOffset(graph.container)
     const origin = util.getScrollOrigin(graph.container)
-    let x = DomEvent.getClientX(e) - offset.x + origin.x - graph.panDx
-    let y = DomEvent.getClientY(e) - offset.y + origin.y - graph.panDy
+    let x = DomEvent.getClientX(e) - offset.x + origin.x - graph.panX
+    let y = DomEvent.getClientY(e) - offset.y + origin.y - graph.panY
 
     if (this.options.autoScroll === true) {
       graph.scrollPointToVisible(x, y, graph.autoExtend)

packages/x6/src/graph/base-graph.ts

@@ -3056,8 +3056,8 @@ export interface CompositeOptions {
 export interface BaseGraph extends IPreDependencies {}
 
 export interface IPreDependencies {
-  panningX: number
-  panningY: number
+  panX: number
+  panY: number
 
   snap(value: number): number
   getGridSize(): number

packages/x6/src/graph/eventloop-manager.ts

@@ -75,8 +75,8 @@ export class EventLoopManager extends BaseManager {
     if (e.graphX == null || e.graphY == null) {
       const p = util.clientToGraph(this.graph.container, e)
 
-      e.graphX = p.x - this.graph.panDx
-      e.graphY = p.y - this.graph.panDy
+      e.graphX = p.x - this.graph.panX
+      e.graphY = p.y - this.graph.panY
 
       if (
         this.isMouseDown &&

packages/x6/src/graph/graph.ts

@@ -44,8 +44,8 @@ export class Graph extends BaseGraph implements IHooks {
     this.renderer = this.createRenderer()
     this.selection = this.createSelection()
 
-    this.panDx = 0
-    this.panDy = 0
+    this.panX = 0
+    this.panY = 0
 
     super.createManagers()
     super.createHandlers()

packages/x6/src/graph/moving-accessor.ts

@@ -202,8 +202,8 @@ export class MovingAccessor extends BaseGraph {
       DomEvent.getClientX(e),
       DomEvent.getClientY(e),
     )
-    p.x -= this.panDx
-    p.y -= this.panDy
+    p.x -= this.panX
+    p.y -= this.panY
     const swimlane = this.retrievalManager.getSwimlaneAt(p.x, p.y)
 
     let target = cell

packages/x6/src/graph/panning-accessor.ts

@@ -1,20 +1,16 @@
-import * as util from '../util'
-import { events } from './events'
 import { BaseGraph } from './base-graph'
 
 export class PanningAccessor extends BaseGraph {
-  public panDx: number
-  public panDy: number
-  protected shiftPreview1: HTMLElement | null
-  protected shiftPreview2: HTMLElement | null
+  public panX: number
+  public panY: number
 
   enablePanning() {
-    this.panningHandler.enablePanning()
+    this.panningHandler.enable()
     return this
   }
 
   disablePanning() {
-    this.panningHandler.disablePanning()
+    this.panningHandler.disable()
     return this
   }
 
@@ -29,110 +25,11 @@ export class PanningAccessor extends BaseGraph {
   }
 
   /**
-   * Shifts the graph display by the given amount. This is used to preview
-   * panning operations, use `view.setTranslate` to set a persistent
-   * translation of the view.
-   *
-   * @param dx Amount to shift the graph along the x-axis.
-   * @param dy Amount to shift the graph along the y-axis.
+   * Shifts the graph display by the given amount. Use `view.setTranslate`
+   * to set a persistent translation of the view.
    */
   pan(x: number, y: number, relative: boolean = false) {
-    const dx = relative ? this.panDx + x : x
-    const dy = relative ? this.panDy + y : y
-
-    if (this.useScrollbarsForPanning && util.hasScrollbars(this.container)) {
-      const container = this.container
-      const maxScrollLeft = container.scrollWidth - container.clientWidth
-      const maxScrollTop = container.scrollHeight - container.clientHeight
-      const scrollLeft = util.clamp(dx, 0, maxScrollLeft)
-      const scrollTop = util.clamp(dy, 0, maxScrollTop)
-      container.scrollLeft = scrollLeft
-      container.scrollTop = scrollTop
-    } else {
-      const stage = this.view.getStage()!
-      if (this.dialect === 'svg') {
-        // Puts everything inside the container in a DIV so that it
-        // can be moved without changing the state of the container
-        if (dx === 0 && dy === 0) {
-          stage.removeAttribute('transform')
-
-          if (this.shiftPreview1 != null && this.shiftPreview2 != null) {
-            let child = this.shiftPreview1.firstChild
-            while (child != null) {
-              const next = child.nextSibling
-              this.container.appendChild(child)
-              child = next
-            }
-
-            util.removeElement(this.shiftPreview1)
-            this.shiftPreview1 = null
-
-            this.container.appendChild(stage.parentNode!)
-
-            child = this.shiftPreview2.firstChild
-            while (child != null) {
-              const next = child.nextSibling
-              this.container.appendChild(child)
-              child = next
-            }
-
-            util.removeElement(this.shiftPreview2)
-            this.shiftPreview2 = null
-          }
-        } else {
-          stage.setAttribute('transform', `translate(${dx},${dy})`)
-
-          if (this.shiftPreview1 == null) {
-            // Needs two divs for stuff before and after the SVG element
-            this.shiftPreview1 = document.createElement('div')
-            this.shiftPreview1.style.position = 'absolute'
-            this.shiftPreview1.style.overflow = 'visible'
-
-            this.shiftPreview2 = document.createElement('div')
-            this.shiftPreview2.style.position = 'absolute'
-            this.shiftPreview2.style.overflow = 'visible'
-
-            let current = this.shiftPreview1
-            let child = this.container.firstChild as HTMLElement
-
-            while (child != null) {
-              const next = child.nextSibling as HTMLElement
-              // SVG element is moved via transform attribute
-              if (child !== stage.parentNode) {
-                current.appendChild(child)
-              } else {
-                current = this.shiftPreview2
-              }
-
-              child = next
-            }
-
-            // Inserts elements only if not empty
-            if (this.shiftPreview1.firstChild != null) {
-              this.container.insertBefore(this.shiftPreview1, stage.parentNode)
-            }
-
-            if (this.shiftPreview2.firstChild != null) {
-              this.container.appendChild(this.shiftPreview2)
-            }
-          }
-
-          this.shiftPreview1.style.left = `${dx}px`
-          this.shiftPreview1.style.top = `${dy}px`
-          this.shiftPreview2!.style.left = util.toPx(dx)
-          this.shiftPreview2!.style.top = util.toPx(dy)
-        }
-      } else {
-        stage.style.left = util.toPx(dx)
-        stage.style.top = util.toPx(dy)
-      }
-
-      this.panDx = dx
-      this.panDy = dy
-    }
-
-    this.trigger(events.pan, { dx, dy })
-
+    this.panningManager.pan(x, y, relative)
     return this
   }