Fix allow touch scrolling

[0ro]

#5903

[wegneto]

I've applied this to my code and it's working fine.

[iherasymenko]

Works just fine for me.

[RinaldoNani]

allowTouchScrolling is not working on iPad as of last version of fabric.js. BUT works perfectly with e.g. version 2.3.3. This is driving me crazy.
I thought the issue was fixed!...
Please, hints are definitely needed!

[asturur]

This should fix it.
I have no idea what kind of regression testing have been done and i m actually concentrated on other things. But you can probably apply this fix safely

[emily-yoon]

This worked for me as well.

[royercross]

This fix works to fix the scroll, But... When you put an object and moveit arround, the scroll canvas also move with it, anyone worked on a solution on that?.

[wegneto]

I've added this fix to my code I have been using it for 6 months without noticing any side-effects.

[wegneto]

This fix works to fix the scroll, But... When you put an object and moveit arround, the scroll canvas also move with it, anyone worked on a solution on that?.

Hey @royercross ,

I had the same issue and fixed it by using a logic to enable and disable the scrolling. Like this:

function configScroll (canvas) {
    var disableScroll = function () {
        canvas.allowTouchScrolling = false;
    };

    var enableScroll = function () {
        canvas.allowTouchScrolling = true;
    };

    canvas.on('selection:created', disableScroll);

    canvas.on('mouse:down', function (event) {
        if (event.target && event.target.asset) {
            disableScroll();
        } else {
            enableScroll();
        }
    });

    canvas.on('selection:cleared', enableScroll);
}

[royercross]

This fix works to fix the scroll, But... When you put an object and moveit arround, the scroll canvas also move with it, anyone worked on a solution on that?.

Hey @royercross ,

I had the same issue and fixed it by using a logic to enable and disable the scrolling. Like this:

function configScroll (canvas) {
    var disableScroll = function () {
        canvas.allowTouchScrolling = false;
    };

    var enableScroll = function () {
        canvas.allowTouchScrolling = true;
    };

    canvas.on('selection:created', disableScroll);

    canvas.on('mouse:down', function (event) {
        if (event.target && event.target.asset) {
            disableScroll();
        } else {
            enableScroll();
        }
    });

    canvas.on('selection:cleared', enableScroll);
}

i tried that, but the problem is on mobile only, if you move an element to quickly and fast, you get an error because you cannot prevent scrolling event if it is alrready happening.

So i found another solution in case anyone need it.

_onTouchStart: function(e) {
      var targetR = this.findTarget(e);
      !this.allowTouchScrolling && e.preventDefault && e.preventDefault();
      targetR && e.preventDefault && e.preventDefault();

[lynmije]

i tried the solutions above but scrolling is still not working on my end with mobile devices

[juxhinNM]

Will it take more to merged?

[allweek]

well, combined peoples solutions I got result with this code

(function() {
          var addListener = fabric.util.addListener,
                  removeListener = fabric.util.removeListener,
                  addEventOptions = { passive: false };

          fabric.util.object.extend(fabric.Canvas.prototype, /** @lends fabric.Canvas.prototype */ {
            _onTouchStart: function(e) {
              var targetR = this.findTarget(e);
              !this.allowTouchScrolling && e.preventDefault && e.preventDefault();
              targetR && e.preventDefault && e.preventDefault();
              if (this.mainTouchId === null) {
                this.mainTouchId = this.getPointerId(e);
              }
              this.__onMouseDown(e);
              this._resetTransformEventData();
              var canvasElement = this.upperCanvasEl,
              eventTypePrefix = this._getEventPrefix();
              addListener(fabric.document, 'touchend', this._onTouchEnd, addEventOptions);
              addListener(fabric.document, 'touchmove', this._onMouseMove, addEventOptions);
              // Unbind mousedown to prevent double triggers from touch devices
              removeListener(canvasElement, eventTypePrefix + 'down', this._onMouseDown);
            }
          });
        })();

//(!) Important, this code above should be before fabric canvas init and "allowTouchScrolling: true" should be added (v.4.2.0):
canvas = new fabric.Canvas('canvasId', {allowTouchScrolling: true});

Thanks for all !

[RakeshYadvanshi]

well, combined peoples solutions I got result with this code

(function() {
          var addListener = fabric.util.addListener,
                  removeListener = fabric.util.removeListener,
                  addEventOptions = { passive: false };

          fabric.util.object.extend(fabric.Canvas.prototype, /** @lends fabric.Canvas.prototype */ {
            _onTouchStart: function(e) {
              var targetR = this.findTarget(e);
              !this.allowTouchScrolling && e.preventDefault && e.preventDefault();
              targetR && e.preventDefault && e.preventDefault();
              if (this.mainTouchId === null) {
                this.mainTouchId = this.getPointerId(e);
              }
              this.__onMouseDown(e);
              this._resetTransformEventData();
              var canvasElement = this.upperCanvasEl,
              eventTypePrefix = this._getEventPrefix();
              addListener(fabric.document, 'touchend', this._onTouchEnd, addEventOptions);
              addListener(fabric.document, 'touchmove', this._onMouseMove, addEventOptions);
              // Unbind mousedown to prevent double triggers from touch devices
              removeListener(canvasElement, eventTypePrefix + 'down', this._onMouseDown);
            }
          });
        })();

//(!) Important, this code above should be before fabric canvas init and "allowTouchScrolling: true" should be added (v.4.2.0): canvas = new fabric.Canvas('canvasId', {allowTouchScrolling: true});

Thanks for all !

it does not work for me

[squireaj]

Any reason why this has never been merged? We could really use it in our project. That fix above worked but still, why can't the PR just be merged?

[yiukamsum]

well, combined peoples solutions I got result with this code

(function() {
          var addListener = fabric.util.addListener,
                  removeListener = fabric.util.removeListener,
                  addEventOptions = { passive: false };

          fabric.util.object.extend(fabric.Canvas.prototype, /** @lends fabric.Canvas.prototype */ {
            _onTouchStart: function(e) {
              var targetR = this.findTarget(e);
              !this.allowTouchScrolling && e.preventDefault && e.preventDefault();
              targetR && e.preventDefault && e.preventDefault();
              if (this.mainTouchId === null) {
                this.mainTouchId = this.getPointerId(e);
              }
              this.__onMouseDown(e);
              this._resetTransformEventData();
              var canvasElement = this.upperCanvasEl,
              eventTypePrefix = this._getEventPrefix();
              addListener(fabric.document, 'touchend', this._onTouchEnd, addEventOptions);
              addListener(fabric.document, 'touchmove', this._onMouseMove, addEventOptions);
              // Unbind mousedown to prevent double triggers from touch devices
              removeListener(canvasElement, eventTypePrefix + 'down', this._onMouseDown);
            }
          });
        })();

//(!) Important, this code above should be before fabric canvas init and "allowTouchScrolling: true" should be added (v.4.2.0): canvas = new fabric.Canvas('canvasId', {allowTouchScrolling: true});
Thanks for all !

it does not work for me

    _onTouchStart: function(e) {
      let targetR = this.findTarget(e);
      if(!this.allowTouchScrolling || targetR){
        e.preventDefault && e.preventDefault();
      }
      if (this.mainTouchId === null) {
        this.mainTouchId = this.getPointerId(e);
      }
      // ...
    },
    _onMouseMove: function (e) {
      let targetR = this.findTarget(e);
      if(!this.allowTouchScrolling || targetR){
        e.preventDefault && e.preventDefault();
      }
      this.__onMouseMove(e);
    },

This work for me