-
Notifications
You must be signed in to change notification settings - Fork 1
/
codedit_view.html
296 lines (289 loc) · 13 KB
/
codedit_view.html
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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title> codedit_view - layouting and rendering </title>
<script src="jquery.js"></script>
<script src="jquery-cookie.js"></script>
<script src="jquery-tablesorter.js"></script>
<script src="strftime.js"></script>
<script src="mustache.js"></script>
<script src="config.js"></script>
<script src="main.js"></script>
<link rel="stylesheet" type="text/css" href="templates/reset.css" />
<link rel="stylesheet" type="text/css" href="templates/hack.css" />
<link rel="stylesheet" type="text/css" id="lights_css" />
<script>
var DOCNAME = 'codedit_view'
var PROJECT = 'codedit'
//set the lights before rendering starts
set_lights()
</script>
</head>
<body>
<header>
<div class="container">
<div class="btn-container btn-lights-container">
<a href="#" class="btn btn-lights" id="lights">lights</a>
</div>
<div class="btn-container btn-home-container">
<a href="/" class="btn btn-home">luapower</a>
</div>
<table id="header_table">
<tr>
<td style="vertical-align: middle;" width="100%">
<h1> codedit_view </h1>
<h2> layouting and rendering </h2>
</td>
<td style="vertical-align: middle;" align="right" style="height: 150px">
<table><tr><td>
<div class="doc" id="package_info_container">
<div id="package_info"> </div>
<div id="commit_log"> </div>
</div>
<a href="https://github.com/luapower/codedit" class="btn btn-rightside btn-github"><span class="icon"></span>View on GitHub</a>
</td></tr><tr><td>
<a href="https://github.com/luapower/codedit/tarball/master" class="btn btn-rightside">Download as .tar.gz</a>
</td></tr><tr><td>
<a href="https://github.com/luapower/codedit/zipball/master" class="btn btn-rightside">Download as .zip</a>
</td></tr></table>
</td>
</tr>
</table>
<div class="btn-container btn-discuss-container">
<a href="https://github.com/luapower/codedit/issues/new" target="_blank"
class="btn btn-rightside btn-discuss"><span class="icon"></span>Discuss</a>
</div>
</div>
</header>
<div class="bg-container">
<div class="bg-center-container">
<div class="bg bg-codedit" style="background-image: url('bg/codedit.png');"></div>
</div>
</div>
<div class="under-header">
<div class="container">
<div id="toc_container" class="toc_container doc"></div>
<button id=tab1_button class="tab_button hidden">Documentation</button>
<button id=tab2_button class="tab_button hidden">Package Info</button>
<div id="tabs_cointainer">
<div id="tab1_container">
<section class="doc">
<span id="module_info"></span>
<h2 id="local-view_class-requirecodedit_view"><code>local view_class = require'codedit_view'</code></h2>
<p>Codedit views deal with measuring, layouting, rendering and hit testing of codedit buffers. Rendering is done in terms of a set of primitive drawing methods, which in codedit_view are just stubs. You'll have to subclass codedit_view and implement these methods in order to have a working view (for subclassing you can use <a href="glue.html#inherit">glue.inherit</a> or <a href="glue.html#update">glue.update</a>).</p>
<p><strong>NOTE:</strong> codedit_view assumes a monospace font and a fixed line height.</p>
<h2 id="properties">Properties</h2>
<pre class="sourceCode lua"><code class="sourceCode lua"><span class="co">--tab expansion</span>
<span class="kw">tabsize</span> <span class="ot">=</span> <span class="dv">3</span>
<span class="co">--font metrics</span>
<span class="kw">line_h</span> <span class="ot">=</span> <span class="dv">16</span>
<span class="kw">char_w</span> <span class="ot">=</span> <span class="dv">8</span>
<span class="kw">char_baseline</span> <span class="ot">=</span> <span class="dv">13</span>
<span class="co">--cursor metrics</span>
<span class="kw">cursor_xoffset</span> <span class="ot">=</span> <span class="ot">-</span><span class="dv">1</span> <span class="co">--cursor x offset from a char's left corner</span>
<span class="kw">cursor_xoffset_col1</span> <span class="ot">=</span> <span class="dv">0</span> <span class="co">--cursor x offset for the first column</span>
<span class="kw">cursor_thickness</span> <span class="ot">=</span> <span class="dv">2</span>
<span class="co">--scrolling</span>
<span class="kw">cursor_margins</span> <span class="ot">=</span> <span class="ot">{</span><span class="kw">top</span> <span class="ot">=</span> <span class="dv">16</span><span class="ot">,</span> <span class="kw">left</span> <span class="ot">=</span> <span class="dv">0</span><span class="ot">,</span> <span class="kw">right</span> <span class="ot">=</span> <span class="dv">0</span><span class="ot">,</span> <span class="kw">bottom</span> <span class="ot">=</span> <span class="dv">16</span><span class="ot">},</span>
<span class="co">--rendering</span>
<span class="kw">highlight_cursor_lines</span> <span class="ot">=</span> <span class="kw">true</span>
<span class="kw">lang</span> <span class="ot">=</span> <span class="kw">nil</span> <span class="co">--lexer to use for syntax highlighting. nil means no highlighting.</span>
<span class="co">--reflowing</span>
<span class="kw">line_width</span> <span class="ot">=</span> <span class="dv">72</span></code></pre>
<h2 id="methods">Methods</h2>
<table>
<col width="50%" />
<col width="50%" />
<tbody>
<tr class="odd">
<td align="left"><code>view_class:new(buffer) -> view</code></td>
<td align="left">create a view for a buffer</td>
</tr>
<tr class="even">
<td align="left"><strong>rendering</strong></td>
<td align="left"></td>
</tr>
<tr class="odd">
<td align="left"><code>view:add_selection(sel)</code></td>
<td align="left">add a selection to the set of objects to render</td>
</tr>
<tr class="even">
<td align="left"><code>view:add_cursor(cur)</code></td>
<td align="left">add a cursor to the set of objects to render</td>
</tr>
<tr class="odd">
<td align="left"><code>view:add_margin(margin, pos)</code></td>
<td align="left">add a margin to the set of objects to render</td>
</tr>
<tr class="even">
<td align="left"><code>view:render()</code></td>
<td align="left">render the added objects</td>
</tr>
<tr class="odd">
<td align="left"><strong>rendering stubs</strong></td>
<td align="left"></td>
</tr>
<tr class="even">
<td align="left"><code>view:draw_char(x, y, s, i, color)</code></td>
<td align="left">draw a colored utf-8 char. the char to be drawn is the utf-8 codepoint at byte index <code>i</code> in string <code>s</code></td>
</tr>
<tr class="odd">
<td align="left"><code>view:draw_rect(x, y, w, h, color)</code></td>
<td align="left">draw a colored rectangle</td>
</tr>
<tr class="even">
<td align="left"><code>view:clip(x, y, w, h)</code></td>
<td align="left">create a clipping rectangle so that all subsequent drawing operations will be clipped by it</td>
</tr>
<tr class="odd">
<td align="left"><code>view:draw_scrollbox(x, y, w, h, cx, cy, cw, ch) -> cx, cy, clip_x, clip_y, clip_w, clip_h</code></td>
<td align="left">draw a scrollbox widget with (x, y, w, h) outside rect and (cx, cy, cw, ch) client rect. return the new cx, cy, adjusted from user input and other scrollbox constraints, followed by the clipping rect. the client rect is relative to the clipping rect of the scrollbox (which can be different than it's outside rect). this stub implementation is equivalent to a scrollbox that takes no user input, has no margins, and has invisible scrollbars.</td>
</tr>
<tr class="even">
<td align="left"><strong>hit testing</strong></td>
<td align="left"></td>
</tr>
<tr class="odd">
<td align="left"><code>view:selection_hit_test(sel, x, y) -> true | false</code></td>
<td align="left">hit test a selection</td>
</tr>
<tr class="even">
<td align="left"><code>view:margin_hit_test(margin, x, y) -> true | false</code></td>
<td align="left">hit test a margin</td>
</tr>
<tr class="odd">
<td align="left"><code>view:client_hit_test(x, y) -> true | false</code></td>
<td align="left">hit test the client area</td>
</tr>
<tr class="even">
<td align="left"><strong>scrolling</strong><sup><a href="#fn1" class="footnoteRef" id="fnref1">1</a></sup></td>
<td align="left"></td>
</tr>
<tr class="odd">
<td align="left"><code>view:scroll_by(x, y)</code></td>
<td align="left">scroll the view, in pixels</td>
</tr>
<tr class="even">
<td align="left"><code>view:scroll_up()</code><br /><code>view:scroll_down()</code></td>
<td align="left">scroll one screen up or down</td>
</tr>
<tr class="odd">
<td align="left"><code>view:make_rect_visible(x, y, w, h)</code></td>
<td align="left">scroll to make a specific rectangle visible</td>
</tr>
<tr class="even">
<td align="left"><code>view:cursor_make_visible(cur)</code></td>
<td align="left">scroll to make the char under cursor visible</td>
</tr>
<tr class="odd">
<td align="left"><strong>measurements in text space</strong><sup><a href="#fn2" class="footnoteRef" id="fnref2">2</a></sup></td>
<td align="left"></td>
</tr>
<tr class="even">
<td align="left"><code>view:char_coords(line, vcol) -> x, y</code></td>
<td align="left">visual char position in text space</td>
</tr>
<tr class="odd">
<td align="left"><code>view:char_at(x, y) -> line, vcol</code></td>
<td align="left">visual char at text space coordinates</td>
</tr>
<tr class="even">
<td align="left"><code>view:char_rect(line1, vcol1, line2, vcol2) -> x, y, w, h</code></td>
<td align="left">the rectangle surrounding a block of text</td>
</tr>
<tr class="odd">
<td align="left"><code>view:selection_line_rect(sel, line) -> x, y, w, h</code></td>
<td align="left">selection line shape in text space</td>
</tr>
<tr class="even">
<td align="left"><code>view:cursor_rect(cursor) -> x, y, w, h</code></td>
<td align="left">cursor shape in text space</td>
</tr>
<tr class="odd">
<td align="left"><code>view:pagesize() -> n</code></td>
<td align="left">how many lines of text are in the clipping rect</td>
</tr>
<tr class="even">
<td align="left"><strong>measurements in screen space</strong></td>
<td align="left"></td>
</tr>
<tr class="odd">
<td align="left"><code>view:client_size() -> w, h</code></td>
<td align="left">size of the text space (also called client rectangle in the context of layouting) as limited by the available text and any out-of-text cursors.</td>
</tr>
<tr class="even">
<td align="left"><code>view:margins_width() -> w</code></td>
<td align="left">width of all margins combined</td>
</tr>
<tr class="odd">
<td align="left"><code>view:margin_x(margin) -> x</code></td>
<td align="left">x coord of a margin in screen space</td>
</tr>
<tr class="even">
<td align="left"><strong>clipping rectangles</strong></td>
<td align="left"></td>
</tr>
<tr class="odd">
<td align="left"><code>view:clip_rect() -> x, y, w, h</code></td>
<td align="left">clip rect of the client area, in screen space, as obtained from drawing the scrollbox</td>
</tr>
<tr class="even">
<td align="left"><code>view:margin_clip_rect(margin) -> x, y, w, h</code></td>
<td align="left">clip rect of a margin area, in screen space</td>
</tr>
<tr class="odd">
<td align="left"><code>view:line_clip_rect(line) -> x, y, w, h</code></td>
<td align="left">clip rect of a line of text, in screen space</td>
</tr>
<tr class="even">
<td align="left"><strong>clipping in visual char space</strong></td>
<td align="left"></td>
</tr>
<tr class="odd">
<td align="left"><code>view:visible_lines() -> line1, line2</code></td>
<td align="left">which lines are partially or entirely visibile</td>
</tr>
<tr class="even">
<td align="left"><code>view:visible_cols() -> col1, col2</code></td>
<td align="left">which visual columns are partially or entirely visibile</td>
</tr>
<tr class="odd">
<td align="left"><code>view:line_is_visible(line) -> true | false</code></td>
<td align="left">is line visibile?</td>
</tr>
<tr class="even">
<td align="left"><code>view:screen_to_client(x, y)</code><br /><code>view:client_to_screen(x, y)</code><br /><code>view:screen_to_margin_client(margin, x, y)</code> <code>view:margin_client_to_screen(margin, x, y)</code></td>
<td align="left">point translation from screen space to client (text) space and back</td>
</tr>
</tbody>
</table>
<div class="footnotes">
<hr />
<ol>
<li id="fn1"><p>scrolling means adjusting the position of the client rectangle relative to the clipping rectangle<a href="#fnref1">↩</a></p></li>
<li id="fn2"><p>coordinates in text space are relative to the client rectangle<a href="#fnref2">↩</a></p></li>
</ol>
</div>
</section>
</div>
<div id="tab2_container" class="doc"></div>
</div>
</div>
<div class="container">
<footer>
<div id="disqus_thread"></div>
<div class="faint">[email protected] | <a href="http://unlicense.org/">public domain</a></div>
</footer>
</div>
</div>
<script type="text/x-mustache" id=info_tab_template>
<h3>Modules</h3>
<ul>
{{#module_array}}
<li>{{name}}</li>
{{/module_array}}
</ul>
</script>
</body>
</html>