1 # Trace-Viewer Coordinate Systems. 2 3 ## Coordinate Systems 4 5 To represent browser content in trace-viewer we need to draw boxes and 6 pictures created in one browser in the DOM of another browser window. 7 How does a pixel in the output relate to a pixel in the original browser view? 8 9 ### Scaling 10 11 The snapshot view lives in a quad-stack-viewer DOM element. This is area of 12 pixels in trace-viewer, for example 685x342 px. 13 14 The quad-stack-viewer contains a view-container with a CSS transform. The 15 transform will zoom (CSS scale), pan (CSS translateX, translateY), 16 orient (CSS rotateX, rotateY) its contents, a canvas. Common scale factors 17 will be 0.1 - 2.0. The transformation is controlled by user inputs. 18 19 Internally the canvas has the _world_ coordinates. 20 21 The _world_ coordinates completely enclose the boxes we may draw, plus some 22 padding so the edges of boxes do not sit against the edge of the world. For 23 example, padding space of .75 times the minimum of width and height may be 24 added. Since the original browser has a few thousand pixels, the padded world 25 may be 5-6000 pixels on a side. 26 27 The _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 36 The quad-stack-viewer DOM element is positioned by CSS at some offset in the 37 document. All of our origins are relative to the top left corner of the 38 quad-stack-viewer. 39 40 The 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 42 when the final size of the canvas is less than the element?* 43 44 The _deviceViewportRect_ is the visible browser window in _world_ coordinates. 45 Typically 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
