Skip to content

Commit

Permalink
#2803 Update documentation to highlight new Sirius features
Browse files Browse the repository at this point in the history
Diagram related documentation is updated
* layout children
* layout ports
* "move pinned elements" option
* color feature
* other

Signed-off-by: lfasani <laurent.fasani@obeo.fr>
  • Loading branch information
lfasani authored and pdulth committed Feb 12, 2024
1 parent 1f2d45d commit d141be3
Show file tree
Hide file tree
Showing 34 changed files with 375 additions and 173 deletions.
Binary file not shown.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Expand Up @@ -107,13 +107,6 @@ <h2 id="Hide.2Fmodify_container_label">Hide/modify container label</h2>
<p>
<img border="0" src="../../Images/Tips52.png"/>
</p>
<ul>
<li>From the Properties View / Appearance tab by setting the font color to white.</li>
</ul>
<p>If you want to modify it, you can select another color, police, type, size</p>
<p>
<img border="0" src="../../Images/Tips36.png"/>
</p>
<ul>
<li>From the shortcut:
<b>
Expand All @@ -124,25 +117,8 @@ <h2 id="Hide.2Fmodify_container_label">Hide/modify container label</h2>
</b>.
</li>
</ul>
<h2 id="Pin_.2F_Unpin_Diagram_Elements">Pin / Unpin Diagram Elements</h2>
<p>Diagram element pinning functionality allows
<b>marking specific elements in a diagram as having a fixed location so that they are not moved by the Arrange All action</b>. Once the end user has performed a first layout effort, the Arrange All action can still be called for new elements without risking harming the positioning of existing elements.
</p>
<p>When diagram elements are selected, the diagram toolbar contains two dedicated buttons to pin / unpin selected elements.</p>
<p>
<img border="0" src="../../Images/Tips40.png"/>
</p>
<p>When no diagram element is selected, the diagram toolbar contains a button for displaying a dialog showing the pin / unpin status of all elements.</p>
<p>
<div class="thumb">
<div class="thumbinner" style="width:702px;">
<a href="../../Images/Tips42.png" class="image">
<img class="thumbimage" width="700" border="0" src="../../Images/Tips42.png"/>
</a>
</div>
</div>
</p>
<p>In contrast, it can be useful to change the container label appearance
<h2 id="Change_Label_Appearance">Change Label Appearance</h2>
<p>It can be useful to change the container label appearance
<b>to highlight a container or a kind of container.</b>
</p>
<p>To modify the label appearance of a node in the diagram, you can select underline, strikethrough functionalities in the
Expand Down
Expand Up @@ -49,27 +49,11 @@ To hide label element, you have to deselect it.

[[Image:../../Images/Tips52.png]]

* From the Properties View / Appearance tab by setting the font color to white.
If you want to modify it, you can select another color, police, type, size

[[Image:../../Images/Tips36.png]]

* From the shortcut: '''''Ctrl + L'''''. And to reveal it:'''''Ctrl + Shift + L'''''.
==Pin / Unpin Diagram Elements==

Diagram element pinning functionality allows '''marking specific elements in a diagram as having a fixed location so that they are not moved by the Arrange All action'''. Once the end user has performed a first layout effort, the Arrange All action can still be called for new elements without risking harming the positioning of existing elements.

When diagram elements are selected, the diagram toolbar contains two dedicated buttons to pin / unpin selected elements.

[[Image:../../Images/Tips40.png]]

When no diagram element is selected, the diagram toolbar contains a button for displaying a dialog showing the pin / unpin status of all elements.

[[File:../../Images/Tips42.png|thumbnail|700px|]]
==Change Label Appearance==

In contrast, it can be useful to change the container label appearance '''to highlight a container or a kind of container.'''
It can be useful to change the container label appearance '''to highlight a container or a kind of container.'''

To modify the label appearance of a node in the diagram, you can select underline, strikethrough functionalities in the '''''Properties View / Appearance tab'''''.

Expand Down
@@ -0,0 +1,73 @@
<?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>19_DiagramElementColorManagement</title>
<link type="text/css" rel="stylesheet" href="PLUGINS_ROOT/org.polarsys.capella.doc/html/styles.css"/>
</head>
<body>
<h1 id="Diagram_Element_Color_Management">Diagram Element Color Management</h1>
<p>There are 3 menu items that allow to change the color of an element:</p>
<ul>
<li>
<b>Font Color</b> menu allows you to change the font color of the label of the selected element(s).
</li>
<li>
<b>Fill Color</b> menu allows you to change the background color of the selected element(s).
</li>
<li>
<b>Line Color</b> menu allows you to change the border color of a Node or Container, or the color of the Edge for the selected element(s).
</li>
</ul>
<p>
<img border="0" src="../../Images/color_palette_popup_4_categories.png"/>
</p>
<p>When one of the color-change menus is clicked, a popup dialog with color palettes appears, allowing you to choose which color to apply among four categories provided:</p>
<ul>
<li>
<b>Last used</b> colors category displays the ten last colors used by the user.
</li>
<li>
<b>Custom</b> colors category displays the ten first colors defined by the user. Additional colors can be created by clicking on the "More..." button. Users can also reorder the set of custom colors, choosing which colors to display in the popup dialog.
</li>
<li>
<b>Suggested</b> colors category displays the ten "preferred colors" defined by the user which are a subset of the colors defined in the Viewpoint Specification Model (odesign). This category is not displayed if no colors are defined in the VSM. Users can modify their ten "preferred colors" by clicking on the "More..." button. Here's an example of colors defined in the VSM: !images/VSM_user_fixed_colors.png!
</li>
<li>
<b>Basic</b> colors category displays ten application-defined colors for use in most contexts. This color palette cannot be modified by the user.
</li>
</ul>
<table border="1">
<tr>
<td>
<p>
<img height="48" width="48" border="0" src="../../Images/InfoIcon.png"/>
</p>
</td>
<td>
<p>
<b>Custom</b> and
<b>Suggested</b> colors categories are persisted in the aird file.

<b>Last used</b> colors category is persisted in the workspace preferences.
</p>
</td>
</tr>
</table>
<table border="1">
<tr>
<td>
<p>
<img height="48" width="48" border="0" src="../../Images/InfoIcon.png"/>
</p>
</td>
<td>
<p>The colors saved for "Custom" and "Suggested" categories are persisted
<b>separately</b> for "Font Color", "Fill Color" and "Line Color".
This is useful because you usually different colors for label and background for example.
</p>
</td>
</tr>
</table>
</body>
</html>
@@ -0,0 +1,35 @@
=Diagram Element Color Management=

There are 3 menu items that allow to change the color of an element:
* '''Font Color''' menu allows you to change the font color of the label of the selected element(s).
* '''Fill Color''' menu allows you to change the background color of the selected element(s).
* '''Line Color''' menu allows you to change the border color of a Node or Container, or the color of the Edge for the selected element(s).

[[Image:../../Images/color_palette_popup_4_categories.png]]

When one of the color-change menus is clicked, a popup dialog with color palettes appears, allowing you to choose which color to apply among four categories provided:
* '''Last used''' colors category displays the ten last colors used by the user.
* '''Custom''' colors category displays the ten first colors defined by the user. Additional colors can be created by clicking on the "More..." button. Users can also reorder the set of custom colors, choosing which colors to display in the popup dialog.
* '''Suggested''' colors category displays the ten "preferred colors" defined by the user which are a subset of the colors defined in the Viewpoint Specification Model (odesign). This category is not displayed if no colors are defined in the VSM. Users can modify their ten "preferred colors" by clicking on the "More..." button. Here's an example of colors defined in the VSM: !images/VSM_user_fixed_colors.png!
* '''Basic''' colors category displays ten application-defined colors for use in most contexts. This color palette cannot be modified by the user.

{| border="1"
|-
|
[[Image:../../Images/InfoIcon.png|48x48px]]
|
'''Custom''' and '''Suggested''' colors categories are persisted in the aird file.
'''Last used''' colors category is persisted in the workspace preferences.
|}

{| border="1"
|-
|
[[Image:../../Images/InfoIcon.png|48x48px]]
|
The colors saved for "Custom" and "Suggested" categories are persisted '''separately''' for "Font Color", "Fill Color" and "Line Color".
This is useful because you usually different colors for label and background for example.
|}

Expand Up @@ -2,18 +2,16 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>5_Layout management</title>
<title>5_Diagram Layout management</title>
<link type="text/css" rel="stylesheet" href="PLUGINS_ROOT/org.polarsys.capella.doc/html/styles.css"/>
</head>
<body>
<h1 id="Layout_Management">Layout Management</h1>
<h2 id="Use_Case:_Diagram_Cloning">Use Case: Diagram Cloning</h2>
<h2 id="Diagram_Cloning">Diagram Cloning</h2>
<p>In order to
<b>ease the alternative architectures set up</b>, a cloning diagram functionality exits in Capella. Directly in the
<i>Capella Project explorer</i>, right click on the diagram you want to clone and select
<b>
<i>Clone Diagram</i>
</b>. A new diagram is created next to the original one.
<b>'Clone Diagram</b>'. A new diagram is created next to the original one.
</p>
<p>
<img border="0" src="../../Images/Tips6.png"/>
Expand All @@ -40,7 +38,7 @@ <h2 id="Diagram_Template">Diagram Template</h2>
</div>
</p>
<ul>
<li>Step3: On the LAB, paste the template Layout</li>
<li>Step3: On the LAB, use "Paste Format (Semantic)" to paste the template layout and style. Use "Paste Layout (Semantic)" to paste the layout only.</li>
</ul>
<p>
<div class="thumb">
Expand All @@ -56,8 +54,10 @@ <h2 id="Layout_mode">Layout mode</h2>
<p>
<img border="0" src="../../Images/TT10.png"/>
</p>
<h2 id="Layout.2FStyle_Capella_Copy.2FPaste">Layout/Style Capella Copy/Paste</h2>
<p>You can Copy/Paste the layout and the style of elements to reuse them in another diagram containing the same elements:</p>
<h2 id="Layout.2FStyle_Capella_Copy.2FPaste_.28semantic.29">Layout/Style Capella Copy/Paste (semantic)</h2>
<p>You can Copy/Paste the layout and the style of elements to reuse them
<b>in another diagram containing the same Capella semantic elements</b>:
</p>
<p>
<div class="thumb">
<div class="thumbinner" style="width:502px;">
Expand All @@ -68,15 +68,9 @@ <h2 id="Layout.2FStyle_Capella_Copy.2FPaste">Layout/Style Capella Copy/Paste</h2
</div>
</p>
<p>It is also possible to Paste only the layout or only the style of elements by right clicking on the diagram, selecting
<b>
<i>Capella Copy/Paste</i>
</b> and then
<b>
<i>Paste with layout only</i>
</b> or
<b>
<i>Paste with style only</i>
</b>
<b>'Capella Copy/Paste</b>' and then
<b>'Paste with layout only</b>' or
<b>'Paste with style only</b>'
</p>
<p>
<img border="0" src="../../Images/Tips7.png"/>
Expand All @@ -96,8 +90,8 @@ <h2 id="Copy.2FPaste_Layout_and_Style">Copy/Paste Layout and Style</h2>
<p>
<div class="thumb">
<div class="thumbinner">
<a href="../../Images/copy_paste_layout_1.png" class="image">
<img class="thumbimage" border="0" src="../../Images/copy_paste_layout_1.png"/>
<a href="../../Images/copy_paste_layout_edit_menu.png" class="image">
<img class="thumbimage" border="0" src="../../Images/copy_paste_layout_edit_menu.png"/>
</a>
</div>
</div>
Expand Down Expand Up @@ -127,7 +121,7 @@ <h2 id="Copy.2FPaste_Layout_and_Style">Copy/Paste Layout and Style</h2>
<p>
<b>Copy based on selection</b>
</p>
<p>Format can be copied from a selection of elements, either right-clicking the selection &gt; Edit &gt; copy format, or clicking "Copy the format of the selected diagram elements"</p>
<p>Format can be copied from a selection of elements, either right-clicking the selection &gt; Edit &gt; Copy format, or clicking "Copy the format of the selected diagram elements"</p>
<p>
<div class="thumb">
<div class="thumbinner">
Expand All @@ -152,7 +146,7 @@ <h2 id="Copy.2FPaste_Layout_and_Style">Copy/Paste Layout and Style</h2>
</div>
</p>
<p>However, if a semantic element is displayed multiple times, the paste might not be accurate, and may cause these multiple occurrences to be overlapped. To overcome this issue, we recommend to use multiple copy/paste on a fragmented selection instead (See examples)</p>
<p>Style or layout can also be pasted separately, using Edit &gt; Paste Style , or Edit &gt; Paste Layout</p>
<p>Style or layout can also be pasted separately, using Edit &gt; Paste Style (semantic) , or Edit &gt; Paste Layout (semantic)</p>
<p>
<b>Paste on selection</b>
</p>
Expand Down Expand Up @@ -218,18 +212,52 @@ <h2 id="Straighten_to_top">Straighten to top</h2>
</div>
</div>
</p>
<h2 id="Arrange_All">Arrange All</h2>
<p>"Arrange All" action correctly
<b>arranges automatically diagram elements.</b>
<h2 id="Layout_actions">Layout actions</h2>
<p>There are 2
<a href="/wiki/../help/topic/org.polarsys.capella.ui.doc/html/05.%20Diagram%20Management/5.1.%20Diagram%20concepts.html#Layout_Management" title="../help/topic/org.polarsys.capella.ui.doc/html/05.%20Diagram%20Management/5.1.%20Diagram%20concepts.html#Layout_Management">layout actions families</a> :
</p>
<ul>
<li>"Layout All" "Layout Selection" and "Layout Children" to layout diagram nodes and node containers</li>
<li>"Layout Connected Ports" to layout ports of diagram nodes</li>
</ul>
<p>
<div class="thumb">
<div class="thumbinner" style="width:402px;">
<a href="../../Images/Tips71.png" class="image">
<img class="thumbimage" width="400" border="0" src="../../Images/Tips71.png"/>
<div class="thumbinner" style="width:602px;">
<a href="../../Images/layout_actions_menus_nodeSelection.png" class="image">
<img class="thumbimage" width="600" border="0" src="../../Images/layout_actions_menus_nodeSelection.png"/>
</a>
</div>
</div>
</p>
<table border="1">
<tr>
<td>
<p>
<img height="48" width="48" border="0" src="../../Images/InfoIcon.png"/>
</p>
</td>
<td>
<p>
<a href="/wiki/../help/topic/org.polarsys.capella.ui.doc/html/05.%20Diagram%20Management/5.1.%20Diagram%20concepts.html#Layout_Children" title="../help/topic/org.polarsys.capella.ui.doc/html/05.%20Diagram%20Management/5.1.%20Diagram%20concepts.html#Layout_Children">"Layout Children"</a> and
<a href="/wiki/../help/topic/org.polarsys.capella.ui.doc/html/05.%20Diagram%20Management/5.1.%20Diagram%20concepts.html#Layout_Connected_Ports" title="../help/topic/org.polarsys.capella.ui.doc/html/05.%20Diagram%20Management/5.1.%20Diagram%20concepts.html#Layout_Connected_Ports">"Layout Connected Ports"</a> are usefull actions to layout nodes and ports because they layout only children node/ports thus having the most controlled impact.
</p>
</td>
</tr>
</table>
<table border="1">
<tr>
<td>
<p>
<img height="48" width="48" border="0" src="../../Images/InfoIcon.png"/>
</p>
</td>
<td>
<p>Remember the "Move Pinned Elements" button allow to ignore or take into account the Pin status.
See
<a href="/wiki/../help/topic/org.polarsys.capella.ui.doc/html/05.%20Diagram%20Management/5.1.%20Diagram%20concepts.html#Layout_Management" title="../help/topic/org.polarsys.capella.ui.doc/html/05.%20Diagram%20Management/5.1.%20Diagram%20concepts.html#Layout_Management">Layout Management</a>
</p>
</td>
</tr>
</table>
</body>
</html>

0 comments on commit d141be3

Please sign in to comment.