This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Amy Casillas
Posted May 14 - Read on Facebook

I think I'm missing something obvious here, but I can't figure it out. When I use Events.touchEvent(event).clientX to get the x location of a touch event, it works as expected on the iPhone. However, when mirroring in a browser using the iPhone 5S Device setting, the clientX reports an X value based on the top-left of the browser. So, a click in the middle of the screen that should be around x=320 is reported as x=980 (obviously this depends on browser width). Is there a way to translate that, or make it only consider the top left corner of the iPhone template instead of the browser?

13 Comments

Marcelo Eduardo Oliveira

Hi Amy, Koen sent an example to someone last year:

http://share.framerjs.com/hdpafq33v4bc/

The deal is event is not calculating the device frame / positioning.

He mentioned at the time that this would be added to the core, we should add to request list.

David McGavern

I wish there was an easier way to do this! :)

Joshua Tucker

Marcelo Eduardo Oliveira Which means for the time being, you could use one of the Utils to determine whether you're mirroring on a device or a desktop browser (Utils.isDesktop, Utils.isTouch, etc.) and then adjust the calculation accordingly.

http://framerjs.com/docs/#utils.utilities

Koen Bok

Yeah I should fix this. I have the code. Just need to figure out naming. I was thinking to start using "screen" exclusively for the device and "canvas" for your entire document (including the device).

Jordan Robert Dobson

I like this suggestion Koen.

Marcelo Eduardo Oliveira

+1

Alexis Morin

Any idea when this is coming? The issue still exists...

Koen Bok

Well we fixed most of it. You can now do layer.screenFrame and layer.canvasFrame and compare it to your mouse position.

Jordan Robert Dobson

Koen Bok I've seen originalFrame around before is that a thing? Or still a thing?

Koen Bok

It's something people use to store a frame on a layer like:

layer.originalFrame = layer.frame

Jordan Robert Dobson

Wasn't sure if you were creating those values or not.

Johannes Eckert

maybe I don't get it… what is canvasFrame compared to screenframe? This is a layer that starts at 0,0 and covers the whole browser window. This is with my mouse cursor at the edge of the browser/device screen, so any calculation I can do has to result in 0, but the math will not work…

witdh and height of canvasframe or screenframe don't change when I resize the prototype. Shouldn't they?

Johannes Eckert

here's an example project: http://share.framerjs.com/zmsncw0br6s6/

Read the entire post on Facebook