[TIMOB-7999] iOS: convertPointToView doesn't work as well as globalPoint

GitHub Issue	n/a
Type	Bug
Priority	High
Status	Closed
Resolution	Won't Fix
Resolution Date	2013-01-30T01:49:41.000+0000
Affected Version/s	Release 2.1.0
Fix Version/s	n/a
Components	iOS
Labels	SupportTeam, api
Reporter	Junaid Younus
Assignee	Blain Hamon
Created	2012-03-14T11:59:10.000+0000
Updated	2017-03-22T21:34:17.000+0000

Description

*Code*

var win = Ti.UI.createWindow({
	backgroundColor: 'white'
});

var view = Ti.UI.createView({
	width: 100,
	height: 100,
	top: 0,
	left: 0,
	backgroundColor: 'red',
	transform: Ti.UI.create2DMatrix()
});

view.addEventListener('touchmove', function(e)
{
	var point = view.convertPointToView({x: e.x, y: e.y}, win);
	Ti.API.info('x: ' + point.x + ' | y: ' + point.y);
	view.transform = Ti.UI.create2DMatrix().translate(point.x - (view.width / 2), point.y - (view.height / 2));
	
	//Ti.API.info('x: ' + e.globalPoint.x + ' | y: ' + e.globalPoint.y);
	//view.transform = Ti.UI.create2DMatrix().translate(e.globalPoint.x - (view.width / 2), e.globalPoint.y - (view.height / 2));
});

win.add(view);
win.open();

*Expected result* The red view should move nice and smoothly, without any lag/jumps. *Actual result* When you move the view around, it actually seems to jump around. Instead of slowly and fluidly moving to where the finger is at, it sometimes jumps and shoots outside the Ti.UI.Window. *Notes* -You might have to keep moving the red view around in circles/into different corners to be able to reproduce it. Also try moving at different speeds, it seems to behave differently sometimes when you move your finger faster/slower. -If you uncomment the two lines, and comment out the three lines above it, it seems to be work perfectly fine. -This problem only occurs on the device itself, the simulator doesn't seem to have this issue. -I have only tested this on an iPhone 3GS running iOS 5.0.1.

Comments

Blain Hamon 2012-08-14

Out of curiosity, why are they animating in this fashion? This looks very inefficient.
Junaid Younus 2012-08-14

I would assume it's because they want to have objects that you can move around on the screen and reposition. If you do this just by adjusting the pixels (ie changing the left/right and top/bottom property), it looks laggy and jumps, it moves the object pixel by pixel. If you do it this way, it actually seems to make it look a lot smoother, without that lag. It's as if it moves the view by something less than a pixel and more accurately, resulting into a much nice experience for the end user.

Blain Hamon 2012-08-21

Note to self: FUNCTION Checkpoint 1: 0.000002 FUNCTION Checkpoint 1.1: 0.000094 FUNCTION Checkpoint 1.5: 0.000316 CALL Checkpoint 1: 0.000002 CALL Checkpoint 2: 0.000099 Checkpoint 1: 0.000002 Checkpoint 2: 0.000053 Checkpoint 3: 0.000388 Checkpoint 4: 0.000478 Checkpoint 5: 0.000703 CALL Checkpoint 3: 0.000919 FUNCTION Checkpoint 1.6: 0.001317 FUNCTION Checkpoint 2: 0.001360 FUNCTION Checkpoint 3: 0.001633 This might be just a case where we should optimize function calls and the like. The difference is that globalPoint was never really global, but it doesn't require checking on the views. convertToPoint has to call back to the main thread. In the mean time, may I suggest this optimization? Reducing bridge calls?

   var win = Ti.UI.createWindow({
       backgroundColor: 'white'
   });
   
   var viewHeight = 100;
   var viewWidth = 100;
   var unitMatrix = Ti.UI.create2DMatrix();
   
   var view = Ti.UI.createView({
       width: viewWidth,
       height: viewHeight,
       top: 0,
       left: 0,
       backgroundColor: 'red',
       transform: unitMatrix
   });
    
   view.addEventListener('touchmove', function(e)
   {
       var point = view.convertPointToView({x: e.x, y: e.y}, win);
       Ti.API.info('x: ' + point.x + ' | y: ' + point.y);
       view.transform = unitMatrix.translate(point.x - (viewWidth / 2), point.y - (viewHeight / 2));
        
       //Ti.API.info('x: ' + e.globalPoint.x + ' | y: ' + e.globalPoint.y);
       //view.transform = Ti.UI.create2DMatrix().translate(e.globalPoint.x - (view.width / 2), e.globalPoint.y - (view.height / 2));
   });
    
   win.add(view);
   win.open();

Pedro Enrique 2012-10-25

For those interested in dragging views around in Titanium, I have created a native module that works for Android and iPhone, the purpose was to overcome this performance issue. The module is free and open source and can be found here: https://github.com/pec1985/TiDraggable NOTE: This module is not Appcelerator supported, for bugs and/or features, please open an _issue_ in the github repository.

Blain Hamon 2013-01-30

In retrospect, neither convertPointToView nor globalPoint (which wasn't truly global, or when it was, it was TOO global) are needed.

   var win = Ti.UI.createWindow({backgroundColor: 'white'});
    
   var viewHeight = 100;
   var viewWidth = 100;
   var offsetMatrix = Ti.UI.create2DMatrix();
   
   var view = Ti.UI.createView({
       width: viewWidth,
       height: viewHeight,
       top: 0,
       left: 0,
       backgroundColor: 'red',
       transform: offsetMatrix
   });
   
   var ex, why;
   
   view.addEventListener('touchstart',function(e){
   	ex = e.x; why = e.y;
   })
   
   view.addEventListener('touchmove', function(e)
   {
   	offsetMatrix = offsetMatrix.translate(e.x-ex,e.y-why);
       view.transform = offsetMatrix;
   });
   
   win.add(view);
   win.open();

In tracking the delta of the touch relative to where it started, no conversion is needed, and furthermore, less math is needed. It also gives an advantage over the original code in that the drag does not jump the red box to be centered around the touch. Moving to mark as 'won't fix'

Blain Hamon 2013-01-30

Test does not actually need convertPointToView. While globalPoint does not require a bridge traversal, its fundamental concept was flawed and thus it was deprecated and removed.
Lee Morris 2017-03-22

Closing ticket as "Won't Fix".

JSON Source