-
Notifications
You must be signed in to change notification settings - Fork 85
/
8_Other layout facilities.html
132 lines (130 loc) · 5.21 KB
/
8_Other layout facilities.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
<?xml version='1.0' encoding='utf-8' ?><!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/html; charset=utf-8"/>
<title>8_Other layout facilities</title>
<link type="text/css" rel="stylesheet" href="PLUGINS_ROOT/org.polarsys.capella.doc/html/styles.css"/>
</head>
<body>
<h1 id="Other_Layout_Facilities">Other Layout Facilities</h1>
<p>In order to
<b>facilitate the layout set up of elements on diagrams</b>, some Diagram facilities exist:
</p>
<h2 id="Elements_Alignment">Elements Alignment</h2>
<p>If you select at least two elements, you can align them on the right, middle, left, top...</p>
<p>
<img border="0" src="../../Images/Tips20.png"/>
</p>
<p>This can also be achieved on edge labels, however for it to work, you need to select the labels (and not the edges)</p>
<p>
<img border="0" src="../../Images/align_examples.png"/>
</p>
<h2 id="Elements_Distribution">Elements Distribution</h2>
<p>If you select at least 3 elements, you can distribute them vertically, horizontally (i.e ensure that there is a gap of the same size between each element in the chosen direction).</p>
<p>This can also be achieved on edge labels, however for it to work, you need to select the labels (and not the edges)</p>
<p>
<img border="0" src="../../Images/Tips21.png"/>
</p>
<h2 id="Layout_commands_to_set_edges_with_connected_ports_vertical_or_horizontal">Layout commands to set edges with connected ports vertical or horizontal</h2>
<p>The goal of this feature is to
<b>assist user to set edge selection vertical or horizontal</b> in order to help exchange layout. If the edge is connected to "ports", the
<b>"port" is moved too</b>.''
To do this, it is recommended to layout all connected ports first, then use the right-to-left multiple selection.
</p>
<p>
<div class="thumb">
<div class="thumbinner" style="width:602px;">
<a href="../../Images/Tips22.png" class="image">
<img class="thumbimage" width="600" border="0" src="../../Images/Tips22.png"/>
</a>
</div>
</div>
</p>
<h2 id="Multi_selection_for_graphical_move_of_ports.2Bexchanges">Multi selection for graphical move of ports+exchanges</h2>
<p>This feature aims to
<b>move the group {edge, labels, ports}</b> in a single operation when using the
<b>
<i>F3 shortcut</i>
</b> and drag/move the edge.
</p>
<p>Moreover, by selecting multiple edges with ports and pressing
<b>
<i>F3</i>
</b> key, you can move them simultaneously:
</p>
<p>
<img border="0" src="../../Images/Tips23.png"/>
</p>
<h2 id="Snap_back_labels_on_edge_selection">Snap back labels on edge selection</h2>
<p>Although there is already a button to snap back a label to it original position on label selection, a new button "
<i>Snap Back Label(s)</i>"
<b>on edge selection</b> allows to snap back all labels (source, middle, target) of this edge at the same time:
</p>
<p>
<div class="thumb">
<div class="thumbinner" style="width:802px;">
<a href="../../Images/Tips73.png" class="image">
<img class="thumbimage" width="800" border="0" src="../../Images/Tips73.png"/>
</a>
</div>
</div>
</p>
<h2 id="Display_link_between_an_edge_and_its_label">Display link between an edge and its label</h2>
<p>It is a new preference added in
<b>Sirius > Sirius Diagram > Connections</b>:
<div class="thumb">
<div class="thumbinner" style="width:702px;">
<a href="../../Images/Tips74.png" class="image">
<img class="thumbimage" width="700" border="0" src="../../Images/Tips74.png"/>
</a>
</div>
</div>
</p>
<p>When you
<b>select an edge or a label</b>, graphical link appears between them:
<div class="thumb">
<div class="thumbinner" style="width:702px;">
<a href="../../Images/Tips75.png" class="image">
<img class="thumbimage" width="700" border="0" src="../../Images/Tips75.png"/>
</a>
</div>
</div>
</p>
<h2 id="Copy_Paste_Of_Notes">Copy Paste Of Notes</h2>
<p>To quickly copy paste Notes on a diagram,
<b>click on CTRL and move the Notes</b>: new Notes are created.
</p>
<p>
<div class="thumb">
<div class="thumbinner" style="width:502px;">
<a href="../../Images/TipsCopyNote.png" class="image">
<img class="thumbimage" width="500" border="0" src="../../Images/TipsCopyNote.png"/>
</a>
</div>
</div>
</p>
<h2 id="Add_vertical_blank_space_on_sequence_diagrams">Add vertical blank space on sequence diagrams</h2>
<p>On a sequence diagram, instead of moving vertically each graphical element in order to have more space, it is possible to do it more easily by using the combination:</p>
<ul>
<li>Hold
<b>Ctrl</b>
</li>
<li>Hold
<b>Shift</b>
</li>
<li>Hold
<b>Left-Mouse</b>
</li>
<li>Move the mouse downwards. </li>
</ul>
<p>
<div class="thumb">
<div class="thumbinner" style="width:902px;">
<a href="../../Images/Tips91.png" class="image">
<img class="thumbimage" width="900" border="0" src="../../Images/Tips91.png"/>
</a>
</div>
</div>
</p>
</body>
</html>