1# Trace-Viewer Coordinate Systems. 2 3## Coordinate Systems 4 5To represent browser content in trace-viewer we need to draw boxes and 6pictures created in one browser in the DOM of another browser window. 7How does a pixel in the output relate to a pixel in the original browser view? 8 9### Scaling 10 11The snapshot view lives in a quad-stack-viewer DOM element. This is area of 12pixels in trace-viewer, for example 685x342 px. 13 14The quad-stack-viewer contains a view-container with a CSS transform. The 15transform will zoom (CSS scale), pan (CSS translateX, translateY), 16orient (CSS rotateX, rotateY) its contents, a canvas. Common scale factors 17will be 0.1 - 2.0. The transformation is controlled by user inputs. 18 19Internally the canvas has the _world_ coordinates. 20 21The _world_ coordinates completely enclose the boxes we may draw, plus some 22padding so the edges of boxes do not sit against the edge of the world. For 23example, padding space of .75 times the minimum of width and height may be 24added. Since the original browser has a few thousand pixels, the padded world 25may be 5-6000 pixels on a side. 26 27The _world_ coordinates are scaled by several factors: 28 * _quad_stack_scale_ adjusts the size of the canvas (eg 0.5). 29 * _devicePixelRatio_ adjusts for high-res devices (eg 1 or 2), 30 * _ui.RASTER_SCALE_, adjusts the size of the canvas. (eg 0.75) 31 32*Do we still need RASTER_SCALE?* 33 34### Translation (origins) 35 36The quad-stack-viewer DOM element is positioned by CSS at some offset in the 37document. All of our origins are relative to the top left corner of the 38quad-stack-viewer. 39 40The CSS transforms move us from the DOM coordinate system to the world system. 41*What is the origin of the canvas in the DOM coordinate system 42when the final size of the canvas is less than the element?* 43 44The _deviceViewportRect_ is the visible browser window in _world_ coordinates. 45Typically it will be at X,Y = 0,0. Thus the _world_ origin will be eg 46-0.75\*3000px , -0.75\*2500px, due to the world padding. 47