1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/xhtml;charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<meta name="generator" content="Doxygen 1.8.8"/>
<title>Dillo: Interrupted drawing</title>
<link href="tabs.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="https://www.dillo.org/dw/html/jquery.js"></script>
<script type="text/javascript" src="dynsections.js"></script>
<link href="doxygen.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="top"><!-- do not remove this div, it is closed by doxygen! -->
<div id="titlearea">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr style="height: 56px;">
<td style="padding-left: 0.5em;">
<div id="projectname">Dillo
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- end header part -->
<!-- Generated by Doxygen 1.8.8 -->
<div id="navrow1" class="tabs">
<ul class="tablist">
<li><a href="index.html"><span>Main Page</span></a></li>
<li class="current"><a href="pages.html"><span>Related Pages</span></a></li>
<li><a href="namespaces.html"><span>Namespaces</span></a></li>
<li><a href="annotated.html"><span>Classes</span></a></li>
<li><a href="files.html"><span>Files</span></a></li>
</ul>
</div>
</div><!-- top -->
<div class="header">
<div class="headertitle">
<div class="title">Interrupted drawing </div> </div>
</div><!--header-->
<div class="contents">
<div class="textblock"><h1>Describing the problem </h1>
<p>Without interrupting drawing (which is described below), a widget can define the order in which its parts (background, non-widget content, child widgets, etc.) are drawn, but it must be drawn as a whole. There are situations when this is not possible.</p>
<p>Consider the following simple HTML document: </p><pre class="fragment"><head>
<style>
#sc-1 { position: relative; z-index: 1; background: #ffe0e0; }
#fl-1 { float: right; background: #b0ffb0; }
#sc-2 { position: relative; z-index: 1; background: #f0f0ff; }
</style>
</head>
<body>
<div id="sc-1">
<div id="fl-1">
Float, line 1/3<br/>
Float, line 2/3<br/>
Float, line 3/3
</div>
Stacking Context 1
<div id="sc-2">Stacking Context 2</div>
</div>
</body>
</pre><p>The rendering will look like this:</p>
<div class="image">
<img src="dw-interrupted-drawing-1.png" alt="dw-interrupted-drawing-1.png"/>
</div>
<p>Note the missing "Float, line 2/3" of element #fl-1, which is covered by element #sc-2.</p>
<p>As described in <a class="el" href="dw-out-of-flow.html">Handling Elements Out Of Flow</a>, it has to be distinguished between the <em>container</em> hierarchy (equivalent to the hierarchy of <a class="el" href="classdw_1_1core_1_1Widget.html" title="The base class of all dillo widgets. ">dw::core::Widget</a>.) and the the <em>generator</em> hierarchy. In the following diagram, the former is represented by solid lines, the latter by dotted lines:</p>
<div align="center">
<img src="dot_inline_dotgraph_3.png" alt="dot_inline_dotgraph_3.png" border="0" usemap="#dot_inline_dotgraph_3.map"/>
<map name="dot_inline_dotgraph_3.map" id="dot_inline_dotgraph_3.map"></map>
</div>
<p>The drawing order of the four elements (represented by widgets) is:</p>
<ul>
<li>body,</li>
<li>#sc-1,</li>
<li>#fl-1,</li>
<li>#sc-2.</li>
</ul>
<p>Since</p>
<ol type="1">
<li>#sc-2 is a child of #sc-1, but</li>
<li>#fl-1 is a child of the body, and</li>
<li>a widget can only draw its descendants (not neccessary children, but drawing siblings is not allowed),</li>
</ol>
<p>#sc-1 cannot be drawn as a whole; instead drawing is <b>interrupted</b> by #fl-1. This means:</p>
<ol type="1">
<li>the background and text of #sc-1 is drawn;</li>
<li>drawing of #sc-1 is <b>interrupted</b> by #fl-1 (see below for details),</li>
<li>drawing of #sc-1 is <b>continued</b>, by drawing #sc-2.</li>
</ol>
<p>The exact control flow is described in this sequence diagram:</p>
<div class="image">
<img src="dw-interrupted-drawing-2.png" alt="dw-interrupted-drawing-2.png"/>
</div>
<h1>When is drawing interrupted? </h1>
<p>A widget out of flow is regarded as part of the stacking context (see <a class="el" href="dw-stacking-context.html">Handling stacking contexts</a>) of its <em>generator</em> (in the example above: #fl-1 is part of the stacking context stablished by #sc-1, not the one established by body). For this reason, a widget out of flow must, in some cases, drawn while the <em>gerator</em> is drawn, as an interruption. The exact rule:</p>
<p>A widget out of flow must be drawn as an interruption (while the generator* is drawn) if the stacking context of the generator (to which this widget belongs) is in front of the stacking context of the container (the parent widget).</p>
<p>See <a class="el" href="classdw_1_1oof_1_1OOFAwareWidget.html#a71c15f48f27369ba42e21aa1ae738e9f">dw::oof::OOFAwareWidget::doesWidgetOOFInterruptDrawing</a>.</p>
<h1>How does interruption of drawing work? </h1>
<p>When a widget detects that an other widget should be drawn as interruption (see above), it calls <a class="el" href="classdw_1_1core_1_1Widget.html#aaebe553117db0b7ba2cb0243d06311df">dw::core::Widget::drawInterruption</a>, which</p>
<ol type="1">
<li>draws the widget within another "context" (area and reference widget); for this the original drawing area (<a class="el" href="classdw_1_1core_1_1DrawingContext.html#a290ae2431e7edf6dacb1daf021cea72f">dw::core::DrawingContext::getToplevelArea</a>) is used.</li>
<li>Using dw::core::DrawingContext::addWidgetDrawnAsInterruption, and checking later with dw::core::DrawingContext::hasWidgetBeenDrawnAsInterruption prevents these widgets from being drawn twice. </li>
</ol>
</div></div><!-- contents -->
<!-- start footer part -->
<hr class="footer"/><address class="footer"><small>
Generated on Sat May 28 2016 11:47:43 for Dillo by  <a href="http://www.doxygen.org/index.html">
<img class="footer" src="doxygen.png" alt="doxygen"/>
</a> 1.8.8
</small></address>
</body>
</html>
|
