Merge branch '3948' into 'master'

[3948] Adapt help pages for Component Modeling

See merge request !25

org.fortiss.af3.rcp.help/html/.ratings

@@ -3,7 +3,7 @@ MIRA.requirements.html b0cc481d8fce753a834572074d96b4ef35b4a308 GREEN
 MIRA.requirements_analysis.html 8201ce94671b5d1ad453dee4b23257452de5a004 GREEN
 af3_faq.html 5fcc2680c2ababe82b6f8bf9bffc120d08476ac8 GREEN
 code_specification.html 6abb0c1e49b2545e5b3d81444481689ca5bbd611 RED
-component_architecture.html 5a01c22bbfb55839ef8d05e5850a926173f9452c RED
+component_architecture.html 07026f0362ee3afa6f9e90223a04d429e1430aa1 GREEN
 cosimulation_with_af3.html a2daa6bb9a39083cf2498df26df54572f69c38da RED
 data_dictionary.html 1cfdcfe5879e210456f78095a8b7b4790ab409af RED
 getting_started.html 6e6cfc36a1c621f4a5740aaa155bd8a067790c1f YELLOW
@@ -15,7 +15,7 @@ model_markers_view.html 9b555dfff011f385fdde640f81ddfe0e5b5edf40 RED
 model_testing.html 1337b89d2933f98c3ce76fb70a5e2f96c34c8613 RED
 operatorpanels.html a5343a0ad3a8421da55bf809e831b61d968c5623 RED
 operatorpanels_advanced.html f48da6255d25f04cf83e5c181bfeba5c537bcfd4 RED
-refactoring.html cdfd1f78f6cb543ad3643eecf8f7c5f5130fe9b6 RED
+refactoring.html a0e1ef29371696aac8cc9c966e67324d547e5299 GREEN
 safety.html 5f7d5b677b31bc916ec2c62d82b44502c0705a2d RED
 scheduling.html 94646464662c1745795ab1954dfcc5f469fdaee7 RED
 simulation_with_af3.html 36223384af0af325642fe1dce007aecafa62843f RED

org.fortiss.af3.rcp.help/html/component_architecture.html

@@ -2,7 +2,7 @@
 
 <!--
  Documentation of Creating a Component Architecture.
- 
+
  @author becker
  @ConQAT.Rating GREEN Hash: 589F754EB8ACFD8E12013E9DBE185BCA
 -->
@@ -21,7 +21,7 @@
 To create a component architecture inside an empty new project, open the context menu of the project and select <i>Component Architecture</i>.
 
 <br><br>
-<img src="./pictures/Components.NewArchitecture.png">
+<img src="./pictures/components_new-architecture.png">
 <br><br>
 
 In the same way, you can add more component architectures to your project.
@@ -30,55 +30,63 @@ In the same way, you can add more component architectures to your project.
 
 Once you have created a component architecture, you can specify the contained components as well as channels between them.
 
-To add a component, drag&drop a component from the <i>Model Elements</i> view on the right side to your diagram. In the same way, you can add Input or Output-Ports to your components.
+To add a component, drag &amp; drop a component from the <i>Model Elements</i> view on the right side to your diagram. In the same way, you can add Input or Output-Ports to your components.
 
 <br><br>
-<img src="./pictures/Components.AddComponent.png">
+<img src="./pictures/components_add-component.png">
 <br><br>
 
-To move a component, just pick the component somewhere in the middle and move. 
+To move a component, just pick the component somewhere in the middle and move.
 To resize a component, pick it in the lower right corner and move the mouse to resize.
 
 <br><br>
 
-In order to create channels between your components, press the <b>&lt;alt&gt;-Key</b> (<b>&lt;ctrl&gt;-Key</b> under Linux) on your keyboard and drag the channel from one component to another. 
-If you drag from one component to another, new ports will be created automatically and the channel will be created between the new ports.
-If you drag from one port to another, the channel will be created between these ports.
-Invalid channels (e.g., between two Output-Ports) are avoided by disabling the dragging.
+Channels can be created by dragging from one port to the other.
+When starting the drag, potential target ports are highlighted with green color, while unavailable or incompatible ones are marked red.
+Channels will only be created when dropping over compatible ports.
 
 <br><br>
-<img src="./pictures/Components.Channels.png">
+<img src="./pictures/components_channels.png">
 <br><br>
 
-You can drop ports either on shown Components or into the free space around the Components. 
-In the latter case, the ports are added implicitly to the Parent-Component of the Component-Hierarchy.
+To support the drag &amp; drop actions the interactive areas around elements can be displayed via the respective option in the editor's context menu:
 
+<br><br>
+<img src="./pictures/components_interactive-area-shading.png">
 <br><br>
 
-Notice that Input-Ports of Sub-Components have a different color than Input-Ports of the Parent-Component. 
+These are the areas within which an element can be dragged. Where areas are overlapping, the action applies to the topmost element.
+
+<br><br>
+
+Notice that Input-Ports of Sub-Components have a different color than Input-Ports of the Parent-Component.
 This is, because from the inner point of view, the Input-Ports of the Parent-Component are sending (delegating) data.
 Hence, these Input-Ports are black (like the Output-Ports of Sub-Components).
 
 <br><br>
-<img src="./pictures/Components.Ports.png">
+<img src="./pictures/components_ports.png">
 <br><br>
 
-You can change the route of channels by selecting it, pick the point shown in the middle and move it. 
-Afterwards, two new points are shown between the moved middle point and the two ports. By moving these points, you can further define the route more precisely.
+The shape and route of channels can be modified by adding and moving bend points.
+Bend points can be added by clicking on a point along the channel while pressing the <b>&lt;ctrl&gt;-key</b>.
+The bend points can then be moved by dragging &amp; dropping the red squares around them.
+To remove a bend point, right-click on it while pressing the <b>&lt;ctrl&gt;-key</b>.
 
+<br><br>
+<img src="./pictures/components_bend-points.png">
 <br><br>
 
 In the <i>Properties View</i>, you can edit the names of selected components, channels and ports. You can also specify comments.
 
 <br><br>
-<img src="./pictures/Components.Properties.png">
+<img src="./pictures/components_properties.png">
 <br><br>
 
 <h4><font color="#336699">Causality</font></h4>
 
-Each component is declared to be <i>weakly causal</i> or <i>strongly causal</i>. 
-Weak causality models instantaneous reaction, while strong causality models a delayed reaction. 
-This means that in a weak causal component a value arrived at an Input-Port is directly accessible in the same time step, 
+Each component is declared to be <i>weakly causal</i> or <i>strongly causal</i>.
+Weak causality models instantaneous reaction, while strong causality models a delayed reaction.
+This means that in a weak causal component a value arrived at an Input-Port is directly accessible in the same time step,
 whereas in a strongly causal component such an input value is accessible only at the next time step.
 This indicates that for a strongly causal component, there is a delay of at least one time step before input has any effect on output.
 
@@ -87,7 +95,7 @@ This indicates that for a strongly causal component, there is a delay of at leas
 If you add a component, it is per default weakly causal. You can change the causality in the Properties-View of a component.
 
 <br><br>
-<img src="./pictures/Components.Causality.png">
+<img src="./pictures/components_causality.png">
 <br><br>
 
 The color of a component indicates its causality. There is also a difference in the colors of composite components and atomic components.
@@ -96,7 +104,7 @@ However the causality of a composite component depends on its sub-components, th
 <h4><font color="#336699">Causality and Cycles</font></h4>
 
 Cycles which contain only weakly causal components can entail infinitely many system state modifications at once:
-one component of the cycle makes a change, which triggers <i>immediately</i> (due to weak causality) 
+one component of the cycle makes a change, which triggers <i>immediately</i> (due to weak causality)
 a change in the next component, which also immediately triggers a change in the next component, etc.
 Since we have a cycle, these changes will at one point reach the first component,
 thus yielding an infinite loop of changes.
@@ -109,7 +117,7 @@ but instead spreads on several time instants.
 When a cycle does not have this property, one gets the error "Component ... is part of a weakly causal cycle":
 
 <br><br>
-<img src="./pictures/Weak.Cycle.png">
+<img src="./pictures/components_decorations_weak-cycle.png">
 <br><br>
 
 If it is indeed a property of the model to have such a cycle then one has no other choice than modifying
@@ -121,7 +129,7 @@ In such cases one can either accept the error until one provides a strongly-caus
 by just marking (at least) one of the components among the path as strongly causal:
 
 <br><br>
-<img src="./pictures/Strong.Cycle.png">
+<img src="./pictures/components_decorations_strong-cycle.png">
 <br><br>
 
 <h4><font color="#336699">Initial Message</font></h4>
@@ -132,8 +140,8 @@ If a port is of type structure, it can be initialized by the expression "{MEMBER
 
 <h4><font color="#336699">Propagate Data</font></h4>
 
-AutoFOCUS provides some mechanisms to make development easier and faster. 
-For instance, if you have already connected two Ports by a Channel and want subsequently change the type of the Ports, 
+AutoFOCUS provides some mechanisms to make development easier and faster.
+For instance, if you have already connected two Ports by a Channel and want subsequently change the type of the Ports,
 you have to do this only at one of the both connected Ports.
 Instead of doing the same at the other Port again, you should use the <i>backward</i> and <i>forward</i> buttons in the Properties-View of a Port.
 
@@ -143,7 +151,7 @@ Instead of doing the same at the other Port again, you should use the <i>backwar
 <i>Backward</i> copies the Port-Settings to all Ports connected by an incoming channel.<br>
 
 <br><br>
-<img src="./pictures/Components.Propagation.png">
+<img src="./pictures/components_propagation.png">
 <br><br>
 
 In the shown example the settings of the selected Output-Port are propagated to the connected Input-Port. Also the channel is renamed by this.
@@ -155,7 +163,51 @@ In the shown example the settings of the selected Output-Port are propagated to
 In order to specify the behavior of your components, you might add either <a href="code_specification.html"><i>Code Specifications</i></a> or <a href="state_automaton.html"><i>Automaton Specifications</i></a> to these.
 
 <br><br>
+
+<h4><font color="#336699">Selecting Multiple Elements</font></h4>
+
+Multiple elements of a component architecture can be selected by pressing the <b>&lt;ctrl&gt;-key</b> while selecting components:
+<br><br>
+
+<img src="./pictures/components_multi-select.png">
+
+<h4><font color="#336699">Copy &amp; Paste Components</font></h4>
+
+Components can be copied and pasted via the respective entry in the context menu of the model navigator:
 <br><br>
 
+<img src="./pictures/components_copy-paste.png">
+
+<h4><font color="#336699">Moving Ports</font></h4>
+
+Ports attached to components can be manually moved by
+<ol>
+	<li>
+		clicking on the port first to select it and<br>
+		<img src="./pictures/components_moving-ports_selected.png">
+	</li>
+	<li>dragging and dropping it at any point along the component's border.</li>
+</ol>
+
+<h4><font color="#336699">Zoom</font></h4>
+
+Rolling the mouse wheel while hovering over the component architecture editor and holding the <b>&lt;ctrl&gt;-key</b> zooms in or out, allowing the inspection parts of the model in detail or providing an overview over large models.
+<br><br>
+
+<img src="./pictures/components_zoom.png">
+
+<h4><font color="#336699">Auto-Layout</font></h4>
+
+A component architecture can be automatically organized using the <i>Auto-Layout</i> feature found in the conext menu of the respective architecture in the model viewer:
+<br><br>
+
+<img src="./pictures/components_auto-layout_context-menu.png">
+<br><br>
+
+The components of the architecture are then automatically reorganized like so:
+<br><br>
+
+<img src="./pictures/components_auto-layout_architecture.png">
+
 </body>
 </html>
\ No newline at end of file