Welcome to the support center for

Fancy Product Designer & Multistep Product Configurator

Planned

Being able to scroll down on Android and iPhone while touching canvas

Right now it looks like I can't advance the page when I have my finger on the canvas. Touching and moving my finger on the yellow areas allow me to advance. However, if I touch any other area something is grabbing my touch requests and not allowing to advance. I have received several tickets from my customers that state my stite is locking their phone but in reality the canvas is grabbing the scroll requests.


My feature request: If a fancy product doesn't have draggable elements then the canvas must release control and allow the page to advance on mobile devices when trying to scroll with a finger.


Will be added in next version.

Added in 3.1

Great! Can't wait to try it out.

Hey @radykal,


This is a GREAT improvement! - Just one thing. Is it possible to "lock" the scrolling ONLY while the customer is dragging an image around in an upload zone?

At the moment when customer drags image up or down in an upload zone the whole canvas scroll making it difficult to position image.



I agree with @JohnReimann. Enable canvas lock automatically when an object is being dragged. Way to go... :D

I agree, dragging an element right now scrolls up and down the page degrading the user experience. Definitely dragging an element should lock the screen on the canvas. 

This is happening for me too - but only on Android (Galaxy S7), works fine on iPhone

@radykal 

I disabled the canvas touch scrolling option to try move elements without scrolling the page (up, down, left and right) and I'm getting this warning from fabric.js:

Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080 
_onMouseMove @ fabric.min.js:4

 Following the link on the warning I found this: 

AddEventListenerOptions defaults passive to false. 
With this change touchstart and touchmove listeners added to the document will default to passive:true (so that calls to preventDefault will be ignored).. 
 If the value is explicitly provided in the AddEventListenerOptions it will continue having the value specified by the page. 
 This is behind a flag starting in Chrome 54, and enabled by default in Chrome 56. See https://developers.google.com/web/updates/2017/01/scrolling-intervention

I have Chrome 56.0.2924.87

Should I report this on a new ticket? 

I cannot scroll even though none of the objects on the stage are Dragable. What is the problem?

Ok, i finally found the setting. But activating it will always disable drag & drop. Is it just me who has this issue?

Anyway here is my hack of a solution:


 

jQuery( document ).ready( function( $ ) {	
	
	// FPD fixes after init
	if(window.$selector){
		$selector.on('productCreate', function(evt, viewInstance) {

			// Drag vs Scroll
			var disableScroll = function(){
				// don't know why this does not work, but the css fix does
			    //fancyProductDesigner.currentViewInstance.stage.allowTouchScrolling = false;
			    $('body').css('overflow','hidden');
			    
			};
			var enableScroll = function(){
				//fancyProductDesigner.currentViewInstance.stage.allowTouchScrolling = true;
				$('body').css('overflow','auto');
				$('body').css('overflow-x','visible');
			};
			fancyProductDesigner.currentViewInstance.stage.on('object:moving', disableScroll);
			fancyProductDesigner.currentViewInstance.stage.on('object:scaling', disableScroll);
			fancyProductDesigner.currentViewInstance.stage.on('object:rotating', disableScroll);
			fancyProductDesigner.currentViewInstance.stage.on('mouse:up', enableScroll);

		});
	}
});

 


Login or Signup to post a comment