-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsketch.tut
590 lines (522 loc) · 28.8 KB
/
sketch.tut
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
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
/// Sketch -- a tutorial Antony Scriven 2003-11-24
-- Cribsheet
+---------------------+-----------------------------------------+
| Action | Effect |
| ----------------- | ------------------------------------- |
| Click/drag-+ | |
| Btn-+ | | |
| Key-+ | | | Normal mode Visual block |
| Clicks-+ | | | | |
+---------------------+-----------------------------------------+
| Lines L c | - or + Transparent box/line |
| L d | --- |
| 2 L c | > < ^ v Box/line with arrow |
| 3 L c | | |
| S L c | Round/square Opaque box/line |
|- - - - - - - - - - -|- - - - - - - - - - - - - - - - - - - - -|
| Paint C L cd | Brush Brush fill |
| M L c | . -> : -> # |
|- - - - - - - - - - -|- - - - - - - - - - - - - - - - - - - - -|
| Select R c | Select Erase |
| R d | Select Transparent copy+move |
| S R d | Opaque copy+move |
|- - - - - - - - - - -|- - - - - - - - - - - - - - - - - - - - -|
| Erase C R cd | Eraser |
| M R cd | Fat eraser |
+---------------------+-----------------------------------------+
| Map | Effect |
| ---------------- | ------------------------------------- |
| <leader>f | Flood fill (any character) |
+---------------------+-----------------------------------------+
-- Overview
Sketch is a plugin for Vim. Sketch can help with creating
simple drawings and diagrams using the mouse. You need at
least a two-button mouse to get the most of this package.
The shift and control keys are used to modify the mouse's
actions. The alt/meta key is also used but I have avoided
it for the most part: I realise that some keyboards don't
have this key or it isn't easily accessible.
Sketch is most useful for line diagrams. It is useful for
drawing boxes, lines, and arrows in a quick and hopefully
intuitive way. You can draw freehand by clicking and
dragging with the mouse. You can also make a visual
selection and fill it with a line or a box. Arrowheads
can be added easily; the direction is automatic. An
eraser is provided. Also there are three different brush
tips for painting or for fills.
-- Requirements
Sketch requires a vim that can handle mouse input. I have
incorporated all the drawing functions into the mouse
buttons + modifier keys. So you may struggle with a
one-button mouse. Also, double-clicks and triple-clicks
are used, so these must be supported.
Please bear in mind that I have only tested this plugin
on gvim 6.1 on Windows. I am unlikely to test on other
platforms any time soon. So bug reports or patches for
problems encountered on other systems are welcome.
-- Getting started
This tutorial involves modifying this file. So you may
wish to save your own copy before you start editing, e.g.
:save my_sketch.tut
I haven't included any maps to start the plugin. I feel
that each user should define the maps that they see fit.
The function to start and stop drawing is called
ToggleSketch(). So I have in my vimrc:
map <F1> :call ToggleSketch()<CR>
You should try something similar. When you start Sketch
two things should happen. First, a message should appear
in the status line telling you that sketch is turned on.
Second, if you don't normally display scrollbars in gvim,
these will be turned on for you.
Note that Sketch implements buffer-local maps. This means
that you need to turn Sketch on/off for each individual
buffer you draw in. This is not as convenient as
having it work globally on all buffers. I implemented it
this way because sometimes my mouse would stray into
another buffer make unwanted drawings there.
Note however that although I have implemented Sketch with
buffer-local maps, it is still possible to accidentally
draw in another window. I don't think I can avoid this
because of the way that Vim handles mouse actions. But
the buffer-local maps keep any drawing to a minimum
(hopefully just one character). So either make sure that
only one window is open, or be careful!
Final warning: don't try to size the window by dragging
the status line while Sketch is turned on. You will just
end up drawing instead. Any fixes for this are most
welcome. And don't forget, you can always undo.
* * *
Throughout this tutorial bear the following in mind. The
left mouse button is used for drawing. The right mouse
button is used for selecting and erasing.
Tip: Get into the habit of 1. turning Sketch on,
2. drawing your diagrams, 3. immediately turning
Sketch off.
-- Freehand line drawing
Turn sketch on. To draw a line like this:
+-------------------------------------------------------+
| |
| -------------------- |
| |
+-------------------------------------------------------+
simply click with the left mouse button and drag. Here's
some space for you to try it. All line drawing is done
with the left mouse button. Try it out.
+-------------------------------------------------------+
| |
| |
| |
+-------------------------------------------------------+
Now try an L-shape.
+-------------------------------------------------------+
| |
| | |
| | |
| +---- |
| |
+-------------------------------------------------------+
Sketch automatically selects a `-' or a `|' depending on
the direction you are drawing in. Corners automatically
become a cross, as do intersections:
+-------------------------------------------------------+
| +-----------+ |
| | | | |
| ----+------+----+----+ |
| | | | | |
| +------+ +----+ |
+-------------------------------------------------------+
Now try just a single click.
+-------------------------------------------------------+
| |
| - |
| |
+-------------------------------------------------------+
Note that it is a horizontal line. When you first click,
Sketch can't know which direction you are going in. It
assumes horizontal. If you actually move vertically, it
will correct this initial `-' to a `|'. But what if you
really want just a single `|'? This is pretty rare, but I
have provided for this. Use a triple-click.
+-------------------------------------------------------+
| |
| | |
| |
+-------------------------------------------------------+
Note that if you single-click on an existing character it
turns into a cross.
+-------------------------------------------------------+
| |
| Click on these: - | |
| They will become: + + |
| |
+-------------------------------------------------------+
It is often useful to be able to draw arrows. The
direction is automatically selected for you. You use a
double-click to do this.
+-------------------------------------------------------+
| ---------------> |
| ^| |^ |
| |+------------>| |
| | Drag | |
| Click Double-click |
+-------------------------------------------------------+
(To select the arrowhead direction without drawing a
line, see the section on erasing below.)
-- Painting
To paint, you need to hold down the control key while
using the left mouse button. The current brush tip is
displayed in the command line: [.] or [:] or [#].
(Sometimes you can't see it, but I try to display it as
much as possible.) If you want to change the brush tip,
hold down the meta/alt key and click the left mouse
button.
+-------------------------------------------------------+
| Ctrl+LeftMouse Meta+LeftMouse, Meta+LeftMouse, |
| Ctrl+LeftMouse Ctrl+LeftMouse |
| ...... |
| ... .. ::::::::: ########## |
| . .. :: ::: ########## |
| . .. ::: ### #### |
| ...... :::: ###### |
| .. :::::: ####### |
| . ::: #### |
| . .. :: ::: ### #### |
| ... ... ::: ::: ############ |
| ..... ::::::: ########## |
+-------------------------------------------------------+
Have a go.
+-------------------------------------------------------+
| Ctrl+LeftMouse Meta+LeftMouse, Meta+LeftMouse, |
| Ctrl+LeftMouse Ctrl+LeftMouse |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
+-------------------------------------------------------+
-- Erasing
This uses the right mouse button. Don't use just a single
rightclick, I'll show you that in the next section. To
erase one character, use Control+RightMouse. For a fatter
erase, drag with Meta+Rightmouse.
+-------------------------------------------------------+
| Ctrl+RightMouse Meta+RightMouse |
| ####################### ####################### |
| ####################### ##### #### |
| #### ##### ##### #### |
| ################# ##### ##### #### |
| #### ##### ############# #### |
| #### ################## ######### #### |
| #### ################## ####### #### |
| #### ###### ####### ####### |
| ####################### ####################### |
+-------------------------------------------------------+
Your turn.
+-------------------------------------------------------+
| Ctrl+RightMouse Meta+RightMouse |
| ####################### ####################### |
| ####################### ####################### |
| ####################### ####################### |
| ####################### ####################### |
| ####################### ####################### |
| ####################### ####################### |
| ####################### ####################### |
| ####################### ####################### |
| ####################### ####################### |
+-------------------------------------------------------+
(If you need to move the cursor out of the way of a
drawing, I recommend using Ctrl+RightMouse.)
Tip: to select the direction of an arrowhead without
drawing a line, you can use the eraser to drag a
direction with Control+RightMouse.
Tip: Need to make more room for your diagram? Jump to the
end of this file (use G) for an example, then use
Ctrl-O to jump back here.
-- Selection: erasing, boxes, lines, fills
Like erasing, this uses the right mouse button. Click and
drag to get a visual block selection. Then another right
click to erase.
+-------------------------------------------------------+
| Right drag over the Then rightclick. |
| area marked out by the |
| box below. |
| |
| ###################### ####################### |
| ##+----------------+## ## ## |
| ##|################|## ## ## |
| ##|################|## ## ## |
| ##|################|## ## ## |
| ##|################|## ## ## |
| ##|################|## ## ## |
| ##|################|## ## ## |
| ##+----------------+## ## ## |
| ###################### ####################### |
| |
+-------------------------------------------------------+
This is the most useful way to erase parts of a drawing:
Rightdrag, rightclick. To cancel a selection, use <Esc>.
Tip: :help gv
You can also use a selection for drawing boxes, lines,
and fills. Remember that we drew lines earlier with the
leftmouse button, and painted with control+LeftMouse. You
can probably guess how these work when a visual block
selection is active.
+-------------------------------------------------------+
| |
| Select from Then leftclick |
| here > >+---------+ |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| < to +---------+< |
| here |
| |
+-------------------------------------------------------+
Or with a brush:
+-------------------------------------------------------+
| |
| Select from Then control+leftclick |
| here > >........... |
| ........... |
| ........... |
| ........... |
| ........... |
| ........... |
| ........... |
| ........... |
| < to ...........< |
| here |
| |
+-------------------------------------------------------+
Boxes are by default transparent. Use shift+leftclick for
an opaque box.
+-------------------------------------------------------+
| Rightdrag, Rightdrag, |
| Leftclick Shift+leftclick |
| +------------+ +-------------+ |
| | | | | |
| | +-------------+ | +-------------+ |
| | | | | | | | |
| | | | | | | | |
| +-----|------+ | +------| | |
| | | | | |
| +-------------+ +-------------+ |
| |
+-------------------------------------------------------+
Tip: if you want your boxes the same size, make sure you
have :set showcmd. The size of your selection will
be displayed at the right in the command line.
To draw a line, just make sure the selection is one line
high, or one line wide.
+-------------------------------------------------------+
| |
| Select from here > < to here |
| Left click >-------------< |
| |
+-------------------------------------------------------+
When you draw a free hand line, you are drawing through
other lines. Intersections became a cross. When you draw
a line by dragging a selection, and then left-clicking,
the line is above other lines.
+-------------------------------------------------------+
| Select +------+ then +------+ |
| from | | left | | |
| here > | | < to here click ------------ |
| +------+ +------+ |
+-------------------------------------------------------+
However, should you want to join a line to a box, for
example, this will also work.
+-------------------------------------------------------+
| |
| +---------+ +---------+ |
| | | | | |
| | | | | |
| +---------+ +----+----+ |
| Select from here / | |
| (on the line) | |
| | |
| to here > | |
| |
+-------------------------------------------------------+
The line becomes joined to the box.
Tip: want to use a character other than `-' or `|'?
Highlight as normal then press r<character>
Tip: when drawing an arrow using this method you do not
need to click to create the line, and then double
click to create the arrowhead. You can vis select
and then just double click to create the line and
the arrowhead in one go.
By default, boxes have square corners. This is indicated
by the `[Square]' in the command line. If you would like
rounded corners, use shift+left-click (similar to meta
+ left-click to change the paint brush). This is the
result.
+-------------------------------------------------------+
| |
| With a After Shift + After Shift + |
| selection, Left-Click Left-Click, |
| Left-Click draw the box draw the box |
| |
| +----------+ .----------. +----------+ |
| | | | | | | |
| | | | | | | |
| | | | | | | |
| +----------+ '----------' +----------+ |
| |
+-------------------------------------------------------+
This also effects freehand lines you draw by dragging
with the left mouse button.
-- Dragging objects
This is classed as a selection, and so it uses the right
mouse button. If you right drag on a highlighted region,
it is copied, and you can move the copy with the mouse.
+-------------------------------------------------------+
| |
| +--------------------+ |
| | | |
| | ---> | |
| | | |
| +--------------------+ |
| |
| |
| Highlight the square, then right drag until |
| the cursor is where the arrow indicates. |
| |
| +--------------------+ |
| | | |
| | --->+--------------------+ |
| | | | | |
| +--------------|-----+ ---> | |
| | | |
| +--------------------+ |
+-------------------------------------------------------+
Note that the selection is transparent by default. Use
Shift + RightDrag to get an opaque selection. This is
similar to the way that Shift + LeftClick draws an opaque
box. I've tried to make the mouse actions consistent in
this way. Also note that the mouse is always at the top
lefthand corner of the selection.
Screen updates when moving transparent objects can either
be
slow, :set lazyredraw
or flickery, :set nolazyredraw
the choice is yours! (I like to :se lz myself).
Because a copy is always created, you can easily use a
few shapes as a template to build up a more complicated
diagram. I selected a shape from the `Templates' then
right-dragged it to form the diagram on the left.
+-------------------------------------------------------+
| | Templates |
| .------------. +-----+ | .------------. |
| | |----->| | | | | |
| | | | | | | | |
| '------------' +-----+ | '------------' |
| | | | +-----+ .---. |
| | | | | | / \ |
| +-----+ | | | : : |
| .------------. | | | +-----+ \ / |
| | |<-----| | | '---' |
| | | +-----+ -------------------|
| '------------' |
| | |
| v |
| +-----+ .---. .---. |
| | | / \ / \ |
| | |---->: :<--->: : |
| +-----+ \ / \ / |
| '---' '---' |
+-------------------------------------------------------+
Tip: naturally you can also select and drag text, so you
can move, for example, labels about.
Tip: Once a diagram has been started, it is probably
quicker to select and drag parts of the diagram
about, rather than to keep using your templates box.
Using transparent copying, complex diagrams become easy.
+-------------------------------------------------------+
| |
| .---------. .---------. |
| |\ A \ |\ B \ |
| | \ \ | \ \ |
| | .---------. | .---------. |
| | | | | | | | | |
| ' |------' | ' |------' | |
| \ | \ | \ | \ | |
| \| .---------. \| .---------. |
| '------|\ E \ '------|\ F \ |
| | \ \ | \ \ |
| .---------| .---------.--------| .---------. |
| |\ D | | | | C | | | | |
| | \ ' |------' |\ ' |------' | |
| | .-------\ | \ | .-------\ | \ | |
| | | | \| \| | | \| \| |
| ' |------' '---------' |------' '---------' |
| \ | \ | \ | \ | |
| \| .---------. \| .---------. |
| '------|\ H \ '------|\ G \ |
| | \ \ | \ \ |
| | .---------. | .---------. |
| | | | | | | | | |
| ' |------' | ' |------' | |
| \ | \ | \ | \ | |
| \| \| \| \| |
| '---------' '---------' |
| |
+-------------------------------------------------------+
To create this diagram:
1. Draw a square. This is the back of the box.
2. Transparent drag to create the front of the box.
3. Manually add the connecting diagonals and rub out
lines to make the sides opaque. We now have a box
with the front open.
4. Drag copies of this box to make the four boxes at
the back.
5. Select all four boxes and transparent drag to
create the four at the front.
6. Manually rub out any lines showing through these
boxes.
Alternatively, you could fill the initial box like this:
.---------.
|\#########\
|#\#########\
|##.---------.
|##|######|##| Now after you drag the four boxes at
'##|------'##| the back to the front, you can search
\#|#######\#| for #s and replace with spaces, to
\|########\| create the same effect.
'---------'
Sketch isn't meant to be a serious diagramming tool, but
if you do need to jot something down in your notes and
you don't want to leave the comfort of Vim or plain text
format, then it can be useful.
Still not convinced of the benefits of this package?
Delete all the pictures from the tutorial and give it to
someone else to try :-)
-- Making more room for your diagram
Finally I'll show you how to make some more space for
your drawing. Move the cursor here -> <- and then press
z<Enter> to make this paragraph at the top of your
screen. We are now at the end of the file and you can
probably see some tilde's below indicating this. If you
try to draw past the end of the file, new lines will
automatically be added. So an easy way to make some more
room is to erase past the end of the file. Try it, and
watch the tildes disappear. Unfortunately, you cannot
select a visual block past the end of a file.
Have fun --Antony