pannable-mixin.html

<script>
  const PannableMixin = ((superClass) => class extends superClass {
    
    constructor() {
      super();
      
      this._panningData = {
        element: this,
        isPanning: false,
        startPanX: 0,
        startPanY: 0,
        netPanX: 0,
        netPanY: 0
      };
      
      this.addEventListener('mousedown', this._panningStart.bind(this));
      this.addEventListener('mouseup', this._panningEnd.bind(this));
      this.addEventListener('mousemove', this._panningEvent.bind(this));
    }
    
    setPanningElement(element) {
      if(element) {
        this._panningData.element = element;
      }
    }
    
    resetPanning() {
      this._panningData.startPanX = 0;
      this._panningData.startPanY = 0;
      this._panningData.netPanX = 0;
      this._panningData.netPanY = 0;
      this._panElement();
    }
    
    _panElement() {
      this._panningData.element.style.transform = `translate(${this._panningData.netPanX}px, ${this._panningData.netPanY}px)`;
    }
      
    _panningStart(e) {
      this._panningData.isPanning = true;
      this._panningData.startPanX = e.pageX;
      this._panningData.startPanY = e.pageY;
    }
    
    _panningEnd(e) {
      this._panningData.isPanning = false;
      this._panningData.startPanX = 0;
      this._panningData.startPanY = 0;
    }
    
    _panningEvent(e) {
      if(!this._panningData.isPanning) {
        return;
      }
      
      // Pan
      this._panningData.netPanX += e.pageX - this._panningData.startPanX;
      this._panningData.netPanY += e.pageY - this._panningData.startPanY;
      this._panElement();
      
      // Update starting position for next calculation
      this._panningData.startPanX = e.pageX;
      this._panningData.startPanY = e.pageY;
    }
    
  });
</script>