Skip to main content
aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorNicolas FAUVERGUE2019-09-09 13:32:07 +0000
committerPatrick Tessier2019-09-17 12:51:55 +0000
commitd41fdf4e01506b9e9b7a39efbcb45b746aa21114 (patch)
tree77c73fc9b256bcbb1786e214ea7e282f621be8ed
parent20f8e49b96250d184559516741f332413d3f3f33 (diff)
downloadorg.eclipse.papyrus-d41fdf4e01506b9e9b7a39efbcb45b746aa21114.tar.gz
org.eclipse.papyrus-d41fdf4e01506b9e9b7a39efbcb45b746aa21114.tar.xz
org.eclipse.papyrus-d41fdf4e01506b9e9b7a39efbcb45b746aa21114.zip
Bug 550902: [Doc] The papyrus embedded documentation must be the same
than the documentation on the wiki - Manage the CSS Doc to be conform with the application - Add shape customization available in the "Mars Work Description" Change-Id: I15a84ba95a672d744597a7222e14c810ebb2b0b8 Signed-off-by: Nicolas FAUVERGUE <nicolas.fauvergue@cea.fr>
-rw-r--r--plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/css.mediawiki563
-rw-r--r--plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/ColoredNodeExample.pngbin0 -> 1304 bytes
-rw-r--r--plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/CustomLineStyle.pngbin0 -> 1472 bytes
-rw-r--r--plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/DashDotDotLineStyle.pngbin0 -> 2181 bytes
-rw-r--r--plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/DashDotLineStyle.pngbin0 -> 2134 bytes
-rw-r--r--plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/DashLineStyle.pngbin0 -> 1829 bytes
-rw-r--r--plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/DefaultStereotypeDisplay.jpgbin0 -> 8255 bytes
-rw-r--r--plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/DisplayHeader.pngbin0 -> 1418 bytes
-rw-r--r--plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/DotLineStyle.pngbin0 -> 1888 bytes
-rw-r--r--plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/FloatingLabelConstrained.pngbin0 -> 1691 bytes
-rw-r--r--plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/FloatingLabelOffset.pngbin0 -> 1553 bytes
-rw-r--r--plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/FloatingLabelVisibleResult.pngbin0 -> 1711 bytes
-rw-r--r--plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/IsPackageResult.pngbin0 -> 1297 bytes
-rw-r--r--plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/LineLengthRatioTo08.pngbin0 -> 1287 bytes
-rw-r--r--plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/LineLengthTo40.pngbin0 -> 1272 bytes
-rw-r--r--plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/LinePositionToCenter.pngbin0 -> 1297 bytes
-rw-r--r--plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/LinePositionToLeft.pngbin0 -> 1264 bytes
-rw-r--r--plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/LinePositionToRight.pngbin0 -> 1290 bytes
-rw-r--r--plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/NamePositionToCenter.pngbin0 -> 1239 bytes
-rw-r--r--plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/NamePositionToLeft.pngbin0 -> 1249 bytes
-rw-r--r--plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/NamePositionToRight.pngbin0 -> 1230 bytes
-rw-r--r--plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/OvalResult.pngbin0 -> 3484 bytes
-rw-r--r--plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/PortInside.pngbin0 -> 3400 bytes
-rw-r--r--plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/PortOnLine.pngbin0 -> 3395 bytes
-rw-r--r--plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/PortOuside.pngbin0 -> 3470 bytes
-rw-r--r--plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/PropertiesLocation.pngbin0 -> 14410 bytes
-rw-r--r--plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/RadiusResult.pngbin0 -> 2534 bytes
-rw-r--r--plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/ShadowResult.pngbin0 -> 1547 bytes
28 files changed, 516 insertions, 47 deletions
diff --git a/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/css.mediawiki b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/css.mediawiki
index cdd9a2c81e4..10f0d402e87 100644
--- a/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/css.mediawiki
+++ b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/css.mediawiki
@@ -44,6 +44,7 @@ Similarily to "Diagram Stylesheet" you can define a particular style for a Model
# Go to the Style tab of the properties view
# Add a new "Model style sheet"
# Browse your workspace to find your css file, and press OK. Your stylesheet is now associated to your Model.
+
== Project Stylesheets ==
You can associate to a project specific stylesheets.
# Select a project in "Project Explorer" view
@@ -92,7 +93,6 @@ Eclipse implements the 2.1 version of the CSS syntax. The available selectors ar
*'''#myID''': Matches the element with the CSS ID "myID". The CSS ID must be unique among a diagram. To avoid confusing the users, and because this selector doesn't make much sense on diagrams, this selector has been disabled in Papyrus.<br>
*'''<nowiki>[property=value]</nowiki>''': Matches the elements which have a property "property" with the value "value". It can also match the properties of Stereotypes<br>
*'''<nowiki>[appliedStereotypes~="MyStereotype"]</nowiki>''': Matches the elements on which the Stereotype "MyStereotype" is applied. You can use either the Stereotype's name or qualified name (MyProfile::MyPackage::MyStereotype). Note: always use the "~=" operator (Which means "contains"), because UML elements can have more than one applied stereotype.
-*'''<nowiki>[typeAppliedStereotypes~="MyStereotype"]</nowiki>''': Matches the TypedElements with a type which has the Stereotype "MyStereotype" applied. You can use either the Stereotype's name or qualified name (MyProfile::MyPackage::MyStereotype). Note: always use the "~=" operator (Which means "contains"), because UML elements can have more than one applied stereotype.
* ''':pseudo''': Matches the element on which the pseudo-selector "pseudo" is applied. Pseudo-selectors are typically used for dynamic events, and for filtering some non-semantic properties. In Papyrus, they are used for identifying more precisely the floating labels (When an element has more than one label: see the [#Mask_Label Mask Label] chapter below), and they are also used by the animation framework to specify events (See the Moka documentation)
These selectors can be combined using one of the following combinators:<br>
@@ -147,17 +147,6 @@ Meaning: The elements with the "Block" stereotype must be displayed in bold.
Meaning: The elements with the "Block" stereotype, and the stereotype property "isEncapsulated" set to true, must be displayed in red.
-<source lang="css">Property[typeAppliedStereotypes~="Block"]{
- fillColor:red;
-}
-
-/* Equivalent: qualified name */
-Property[typeAppliedStereotypes~="SysML::Blocks::Block"]{
- fillColor:red;
-}</source>
-
-Meaning: The properties, whose type has the "Block" stereotype applied, must be displayed in bold.
-
All these rules can be combined:
<source lang="css">Class[appliedStereotypes~=Block][appliedStereotypes~=MyCustomStereotype][isEncapsulated=true][myCustomProperty=SomeValue][isAbstract=false]{
@@ -167,12 +156,7 @@ All these rules can be combined:
* the UML Property "isAbstract" is set to false */
fillColor:red;
-}
-
-Property[typeAppliedStereotypes~="SysML::Blocks::Block"][appliedStereotypes~=MyCustomStereotype][isStatic=true][myCustomProperty=SomeValue]{
- fillColor:red;
-}
-</source>
+}</source>
== With the Papyrus tooling ==
@@ -222,7 +206,7 @@ The supported properties are the semantic properties of the UML element (e.g. is
Some selectors can also be used to represent some specific parts of an element. For example, it is possible to hide a specific compartment:
-<source lang="css">Class > Compartment[kind="attribute"] {
+<source lang="css">Class > Compartment[kind="attributes"] {
visible:false;
}
@@ -230,7 +214,7 @@ Class > Compartment[kind="symbol"] {
visible:true;
}
-Compartment[kind="structure"]{
+Compartment[kind="internalstructure"]{
collapsed:true;
}</source>
@@ -245,6 +229,9 @@ Port > Label:Stereotype {
visible: false;
}</source>
+
+You can determine the "kind" of the Compartments by opening the "Filters > Show/Hide Compartments" context menu on a diagram element.
+
== Style properties ==
Style properties are graphical properties supported by the display. Note that some graphical elements may not support some specific properties (Either because they shouldn't support them, or because they are not yet implemented). For example, a UML::Class will not support the ''italic'' property, because in UML, ''italic'' means ''abstract''.
@@ -257,7 +244,7 @@ The simplest way to discover new style properties is to use the Appearance tab o
This table lists the most common properties:
-{| class="wikitable"
+{| class="wikitable" border="1" cellspacing="0"
|-
! Property&nbsp;name !! Value&nbsp;type !! Initial&nbsp;Value !! Applies&nbsp;to !! Comment
|-
@@ -315,7 +302,7 @@ This table lists the most common properties:
|-
| bottomMarginLabel || integer || 0 || Labels || Define the bottom margin of the label in pixel. This is the space between the text box and his container
|-
-| bodyCutLength|| integer || 0 || Labels of transition || Control length of shown code in case of a transition owning an opaque behavior (use Transition > Label)
+| bodyCutLength|| integer || 0 || Opaque behaviors (transition effect or state entry/exit/do actions) || Control length of shown code in case of an opaque behavior within a transition or an entry/exit/do action of a state (use Transition > Label for the former, State > OpaqueBehavior for the latter)
|-
| indicateParameters|| boolean || false || Labels of transition || if a behavior of a transition has parameters, show these instead of abbreviating with (..)
|-
@@ -324,15 +311,18 @@ This table lists the most common properties:
The following properties can be used to bypass the standard UML notation. They can typically be used for pure DSML notations:
+
{| class="wikitable"
|-
! Property&nbsp;name !! Value&nbsp;type !! Initial&nbsp;Value !! Applies&nbsp;to !! Comment
|-
+| isNameWrap || boolean || true || Shapes || If set to true, the name of the Shape will be wrapped.
+|-
| displayBorder || boolean || true || Shapes || If set to false, the borders of the Shape will be hidden.
|-
| displayName || boolean || true || Shapes || If set to false, the name of the Shape will be hidden
|-
-| displayTag || boolean || true || Shapes, connectors || If set to false, the tags (e.g. « component ») of the element will be hidden
+| displayTags || boolean || true || Shapes, connectors || If set to false, the tags (e.g. « component ») of the element will be hidden
|-
| maintainSymbolRatio || boolean || true || Shapes || If the shape is represented with a Symbol, specifies whether the ratio should be maintained or not. If the Symbol is displayed in a compartment, it is usually a good idea to maintain the ratio. If the symbol is the only representation (e.g. when the name, border and compartments are hidden), it is recommended to not maintain the ratio
|-
@@ -348,17 +338,21 @@ The following properties can be used to bypass the standard UML notation. They c
|-
| lineDashGap || integer || N/A || Connectors || When the lineStyle is set to "Dash", specifies the gap between the dashes
|-
-| targetDecoration || <nowiki>[none | default | open_arrow | ...]</nowiki> || N/A || Connectors || Permits to set target decoration. If "targetDecoration" is set to None, hides the target decoration of the Connector (e.g. the arrow)
+| targetDecoration || <nowiki>[none]</nowiki> || N/A || Connectors || If "targetDecoration" is set to None, hides the target decoration of the Connector (e.g. the arrow)
|-
-| sourceDecoration || <nowiki>[none | default | open_arrow | ...]</nowiki> || N/A || Connectors || Permits to set source decoration. If "sourceDecoration" is set to None, hides the source decoration of the Connector (e.g. the arrow)
+| sourceDecoration || <nowiki>[none]</nowiki> || N/A || Connectors || If "sourceDecoration" is set to None, hides the source decoration of the Connector (e.g. the arrow)
|-
| maskLabel || <nowiki>string[]</nowiki> || N/A || Labels, floating labels || This property can be used to configure the display of complex labels (e.g. properties). See examples in the [#Mask_Label Mask Label] chapter below
|-
-| svgFile || path || N/A || Shapes || The path to an SVG file, which should be used as a symbol for the element. It will be displayed in the "symbol" compartment of the shape
+| svgFile || path || N/A || Shapes || The path to an SVG file, which should be used as a symbol for the element. It will be displayed in the "symbol" compartment of the shape. In case of ports, the magic string "position" (if following a slash or dot) will be replaced by "north", "south", "east" or "west", depending on the location of the port.
+|-
+| shapeVisibility || boolean || N/A || Shapes || Show a configured symbol (e.g. an SVG file) as a decoration. Correspond to the "shape decoration" visibility button in the Appearance tab.
|-
-| imagePath || path || N/A || Shapes || The path to an image file, which should be used as a symbol for the element. It will be displayed in the "symbol" compartment of the shape. The format of this image can be: SVG, GIF, JPG, PNG, BMP ...
+| shapeDirection || integer || N/A || Shapes || The position of the shape decoration, the following values are valid: 0 = top-left, 1 = top, 2 = top-right, 3 = left, 4 = center, 5 = right, 6 = bottom-left, 7 = bottom, 8 = bottom-right.
|-
-| followSVGSymbol || boolean || false || Shapes || If the SVG file has a path with the ID "papyrusPath", this path will be used to connect edges
+| imagePath || path || N/A || Shapes || The path to an image file, which should be used as a symbol for the element. It will be displayed in the "symbol" compartment of the shape. The format will be SVG, PNG, JPG, GIF, BMP, ...
+|-
+| followSVGSymbol || boolean || false || Shapes || If the SVG file has a path with the ID "PapyrusPath", this path will be used to connect edges
|-
| svgCssFile || path || N/A || Shapes || The path to a CSS file which will be applied to the SVG symbol (If an SVG symbol is used). Can be used to dynamically change the appearance of the SVG image (e.g. change color, ...)
|-
@@ -366,7 +360,9 @@ The following properties can be used to bypass the standard UML notation. They c
|-
| textAlignment || string || left/center || Floating labels || Set the text alignment of the label. (left, center, right)
|-
-| labelConstrained|| boolean || false || Labels of Port || Constraint the label, it will be automatic positioned at the proper position according to the position of the Port on its parents. Text alignment will be forced according to the position of its parent. The label can't be moved.
+| labelConstrained|| boolean || false || Labels of Port || Constraint the label, according to the position attribute. Left by default. position:AUTO; will be automatic positioned at the proper position according to the position of the Port on its parents. Text alignment will be forced according to the position of its parent. The label can't be moved.
+|-
+|position ||String ||EAST || ||Set the forced position.
|-
| labelOffsetX|| integer || 0 || Labels of Port || Set the offset on X when label is constrained
|-
@@ -438,7 +434,7 @@ The following properties can be used to bypass the standard UML notation. They c
Other properties address presentation aspects that relate not so much to visual style as to content of the diagram:
-{| class="wikitable"
+{| class="wikitable" border="1" cellspacing="0"
|-
! Property&nbsp;name !! Value&nbsp;type !! Initial&nbsp;Value !! Applies&nbsp;to !! Comment
|-
@@ -521,11 +517,38 @@ Which results in:
[[Image:images/Papyrus_CSS_maskLabel_result.png|Mask label result]]<br>
=== Stereotype Display ===
-The Display of Stereotypes can also by driven by CSS.
-[[https://wiki.eclipse.org/MDT/Papyrus/UserGuide/CSS/StereotypeDisplay Detailed Information ]]
-Special selectors and Styles have been implemented to allow the user to define where and how the stereotypes are displayed.
+Since Papyrus 1.1, the applied stereotypes display of an element can be managed via CSS.
+In order to understand what those CSS represents, here is some pieces of information.
+
+First of all the applied stereotypes can display their Name and / or their Properties.
+
+== Stereotype Name Display ==
+The Name of the Stereotype can be displayed with different depth.
+Full depth means that all the path of the stereotype is displayed.
+
+ <nowiki> Full depth => "SysML::Blocks::Block"</nowiki>
+
+No depth means that just the last segment is displayed.
+
+ <nowiki> No depth => "Block"</nowiki>
+
+== Stereotype Properties Display ==
+The Properties of a stereotype can be displayed in 3 different locations:
+* In a '''compartment''' in case of node element (ex: a Class, a Block)
+* In '''braces''' into the header of the element
+* In an external figure as a '''comment'''
+
+[[File:images/PropertiesLocation.png]]
+
+== Default display settings ==
+By default, only the name of the Stereotypes with no depth are displayed.
+None of the properties are displayed.
+
+[[File:images/DefaultStereotypeDisplay.JPG]]
+
+For your information, here is the default CSS implemented for the stereotype display.
-==== Default CSS ====
+=== Default CSS ===
The following CSS rules are implemented by default for all the Diagrams:
<source lang="css">
@@ -533,7 +556,7 @@ Shape[type=StereotypeComment]{
visible:false;
}
-Shape[type=StereotypeComment] Compartment[type=StereotypeBrace]{
+StereotypeComment Compartment[type=StereotypeBrace]{
visible:false;
}
@@ -551,37 +574,426 @@ Label[type=StereotypeLabel]{
</source>
-==== CSS Exemple====
+== Override the default settings ==
+To override the default settings, a new CSS has to be implemented.
+
+=== CSS Exemple ===
Here is some exemple of CSS to display the Stereotype:
<source lang="css">
+/* To modify the depth */
Label[type=StereotypeLabel]{
- depth:-1;
+ depth:"-1";
}
+/* To make the properties visible into compartment */
Compartment[type=StereotypeCompartment]{
visible:true;
}
+/* Hide the property "allocatedTo" into the compartment */
Compartment[type=StereotypeCompartment]>[property="allocatedTo"]{
visible:false;
}
+/* Hide all the properties into the Compartment of the stereotype Block */
Compartment[stereotype="SysML::Blocks::Block"]{
visible:false;
}
-Shape[type=StereotypeComment]{
+/* Display the Comment shape */
+StereotypeComment{
visible:true;
}
-Shape[type=StereotypeComment] Compartment[type=StereotypeBrace]{
+/* Display the properties in Brace into the Comment*/
+StereotypeComment Compartment[type=StereotypeBrace]{
visible:true;
}
</source>
-= Manipulating styles =
+=== Shape customization ===
+
+===== Introduction =====
+The idea of this feature is to create a generic compartment figure which have rounded corner. This figure can be used for most cases.
+For specific cases an SVG symbol can be displayed. A floating label is created to be used with symbol. This label can be constrained or free, with feedback.
+
+This rounded compartment figure must implements a set of features. To permit the customization of the figure, it must be allowed to set it by CSS.
+
+{| class="wikitable" border="1" cellspacing="0"
+|-
+! Feature !! Description
+|-
+|Rounded corner ||It shall be possible to set rounded corners
+|-
+|Shadow ||Shadow shall be compliant with rounded corner figure
+|-
+|Vertical and horizontal radiant ||Radiant shall be compliant with rounded corner figure
+|-
+|Oval figure ||It shall be possible to force the figure to be oval
+|-
+|Floating label ||It shall be possible to add a floating label and customize it
+|-
+|CSS customization ||Each feature shall be customize thanks to CSS properties
+|-
+|SVG Color ||the Color of SVG figure shall be chosen
+|-
+|}
+
+===== Rounded Corner =====
+
+The radius of corners can be set throught CSS.
+
+====== CSS properties ======
+
+{| class="wikitable" border="1" cellspacing="0"
+|-
+! Property&nbsp;name !! Value&nbsp;type !! Default&nbsp;Value !! Comment
+|-
+|radiusWidth || Integer|| 0|| Set the radius width of corners
+|-
+|radiusHeight || Integer|| 0|| Set the radius height of corners
+|-
+|}
+
+====== Result ======
+<source lang="css">Class {
+ radiusWidth:150;
+ radiusHeight:50;
+}</source>
+
+[[File:images/radiusResult.PNG]]
+
+===== Oval shape setting =====
+
+To force the figure to be an oval, even if it is resized, a specific CSS property has been added. The radius width and height will be not take into account anymore.
+
+====== CSS property ======
+
+{| class="wikitable" border="1" cellspacing="0"
+|-
+! Property&nbsp;name !! Value&nbsp;type !! Default&nbsp;Value !! Comment
+|-
+|isOval ||Boolean ||false ||Set to true if you want to have an oval shape
+|-
+|}
+
+====== Result ======
+
+<source lang="css">
+Class {
+ isOval:true;
+}</source>
+
+[[File:images/ovalResult.PNG]]
+
+===== Floating Label =====
+
+A floating label is now available on most nodes. It’s managed throws CSS properties, it can be specificly selected with: <source lang="css"> *>Label[kind="FloatingLabel"]</source>
+
+====== CSS properties ======
+
+{| class="wikitable" border="1" cellspacing="0"
+|-
+! Property&nbsp;name !! Value&nbsp;type !! Default&nbsp;Value !! Comment
+|-
+|isFloatingLabelConstrained ||Boolean ||false ||Set to true if the floating label is constrained on eight position, you can move it manually.
+|-
+|labelConstrained ||Boolean ||false ||Forced the label to one position, by default(for port) it will placed according to the parent position.
+|-
+|position ||String ||EAST ||Set the forced position.
+|-
+|floatingLabelOffsetWidth|| Integer ||0 ||Define the width offset of the label when it is not attached.
+|-
+|floatingLabelOffsetHeight || Integer ||0 ||Define the height offset of the label when it is not attached.
+|-
+|maskLabel ||List of String|| name ||Set the mask of the floating label.
+|-
+|}
+
+Attributes for the mask label:
+
+{| class="wikitable" border="1" cellspacing="0"
+|-
+! Value !! Description!
+|-
+|stereotype ||Style constant for stereotype display in labels.
+|-
+|name ||Style constant for name display in labels.
+|-
+|visibility|| Style constant for visibility display in labels.
+|-
+|derived|| Style constant for isDerive display in labels.
+|-
+|type || Style constant for name display in labels.
+|-
+|multiplicity|| Style constant for multiplicity display in labels.
+|-
+|defaultValue|| Style constant for default value display in labels.
+|-
+|direction|| Style constant for direction display in labels.
+|-
+|returnType|| Style constant for return type display in labels.
+|-
+|returnMultiplicity|| Style constant for return multiplicity display in labels.
+|-
+|}
+
+====== Result ======
+<source lang="css">Class> Label[kind="FloatingLabel"] {
+ visible:true;
+}</source>
+
+[[File:images/FloatingLabelVisibleResult.PNG]]
+
+<source lang="css">Class {
+ isFloatingLabelConstrained:true
+}</source>
+
+[[File:images/FloatingLabelConstrained.PNG]]
+
+<source lang="css">Class{
+ floatingLabelOffsetWidth:10;
+ floatingLabelOffsetHeight:-30;
+}</source>
+
+[[File:images/FloatingLabelOffset.png]]
+
+===== SVG symbol usage =====
+
+SVG is available on symbol compartment like before. The maximum number of displayed symbols can now be set by CSS.
+Note: SVG Symbol don’t work with affixed Node as Port.
+
+====== CSS property ======
+
+{| class="wikitable" border="1" cellspacing="0"
+|-
+! Property&nbsp;name !! Value&nbsp;type !! Default&nbsp;Value !! Comment
+|-
+|maxNumberOfSymbol||Integer ||10 ||Set the maximum number of of symbols to be displayed.
+|-
+|}
+
+===== SVG color set =====
+
+The color of the SVG symbol can be chosen. For that, set the CSS properties “useOriginalColors” of the element to false.
+The white color of the SVG image will be changed by the fill color of the element. The black color of the SVG image will be changed by the line color of the element.
+Gradient must be disabled.
+
+====== CSS property ======
+{| class="wikitable" border="1" cellspacing="0"
+|-
+! Property&nbsp;name !! Value&nbsp;type !! Default&nbsp;Value !! Comment
+|-
+|useOriginalColors ||Boolean ||true ||Set if the SVG image use original colors.
+|-
+|}
+
+====== Result ======
+
+[[File:images/ColoredNodeExample.png]]
+
+===== Border style =====
+
+The border style can be customized through CSS.
+Six styles are available: dash, dashDot, dashDotDot, dot, solid and custom.
+With custom style you can set the customDash.
+
+====== CSS properties ======
+{| class="wikitable" border="1" cellspacing="0"
+|-
+! Property&nbsp;name !! Value&nbsp;type !! Default&nbsp;Value !! Comment
+|-
+|borderStyle ||String ||solid ||Set the style of the border(dash, dashDot, dashDotDot, dot, solid, custom).
+|-
+|customDash ||Int[] ||[5,5] ||Set the custom style.
+|-
+|}
+
+====== Result ======
+<source lang="css">
+Class {
+ borderStyle:dash; /*dashDot; dashDotDot; dot; */
+ lineWidth:2;
+}</source>
+
+[[File:images/DashLineStyle.png]][[File:images/DashDotLineStyle.png]][[File:images/DashDotDotLineStyle.png]][[File:images/DotLineStyle.png]]
+
+<source lang="css">
+Class {
+ borderStyle:custom;
+ customDash:10 10;
+ lineWidth:2;
+}</source>
+
+[[File:images/CustomLineStyle.png]]
+
+===== Compartment top line length =====
+
+The top line length of compartments can be setted.
+
+====== CSS properties ======
+{| class="wikitable" border="1" cellspacing="0"
+|-
+! Property&nbsp;name !! Value&nbsp;type !! Default&nbsp;Value !! Comment
+|-
+|lineLength ||int ||-1 ||Set the top line length of the compartment. By default the length is set to the width of the compartment.
+|-
+|lineLengthRatio ||String ||“1.0” ||Set the top line length ratio of the compartment.
+|-
+|}
+
+====== Result ======
+
+Figure 15: Default compartment top line
+
+<source lang="css">Class > Compartment{
+ lineLength:40;
+}</source>
+
+[[File:images/LineLengthTo40.png]]
+
+<source lang="css">Class > Compartment{
+ lineLengthRatio:"0.80";
+}</source>
+
+[[File:images/LineLengthRatioTo08.png]]
+
+===== Compartment top line position =====
+
+The position of line can be setted, the default is center.
+
+====== CSS property ======
+{| class="wikitable" border="1" cellspacing="0"
+|-
+! Property&nbsp;name !! Value&nbsp;type !! Default&nbsp;Value !! Comment
+|-
+|linePosition ||String ||“center” ||Set the compartment top line position.Can be left, center, right.
+|-
+|}
+
+====== Result ======
+
+<source lang="css">Class > Compartment{
+ lineLengthRatio:"0.50";
+ linePosition:"left"; /*center; right;*/
+}</source>
+
+[[File:images/LinePositionToLeft.png]][[File:images/LinePositionToCenter.png]][[File:images/LinePositionToRight.png]]
+
+===== Name position =====
+
+The name position (left, middle, right) of named nodes can be chosen with the CSS property “textAlignment”.
+
+====== CSS property ======
+{| class="wikitable" border="1" cellspacing="0"
+|-
+! Property&nbsp;name !! Value&nbsp;type !! Default&nbsp;Value !! Comment
+|-
+|textAlignment ||String ||“center” ||Set name the position of the name.
+|-
+|}
+
+====== Result ======
+
+<source lang="css">Class{
+ textAlignment:"left"; /*center, right*/
+}</source>
+
+[[File:images/NamePositionToLeft.png]][[File:images/NamePositionToCenter.png]][[File:images/NamePositionToRight.png]]
+
+===== Add header =====
+
+A header can be added to the figure at the top-left corner with the CSS attribute “displayHeader”.
+
+====== CSS properties ======
+{| class="wikitable" border="1" cellspacing="0"
+|-
+! Property&nbsp;name !! Value&nbsp;type !! Default&nbsp;Value !! Comment
+|-
+|displayHeader ||Boolean ||true ||Set to true to add a header.
+|-
+|}
+
+====== Result ======
+
+<source lang="css">Class{
+ textAlignment:"left";
+ displayHeader:true;
+}</source>
+
+[[File:images/DisplayHeader.png]]
+
+===== Port position =====
+
+The port position can be setted to inside, outside or on the line. The "onLine" option is the default value. The CSS property to applied on port is “portPosition”
+
+====== CSS Property ======
+{| class="wikitable" border="1" cellspacing="0"
+|-
+! Property&nbsp;name !! Value&nbsp;type !! Default&nbsp;Value !! Comment
+|-
+|portPosition ||String ||“onLine” ||Set the position of the port. Can be “inside”, “ouside” or “onLine”.
+|-
+|}
+
+====== Result ======
+
+<source lang="css">Port{
+ portPosition:"inside"; /*onLine, outside*/
+}</source>
+
+[[File:images/PortInside.png]][[File:images/PortOnLine.png]][[File:images/PortOuside.png]]
+
+===== Display as a package =====
+
+Shape of elements can be displayed as a package through the CSS attribute "isPackage". This property has a higher priority than others customizations.
+
+====== CSS Property ======
+{| class="wikitable" border="1" cellspacing="0"
+|-
+! Property&nbsp;name !! Value&nbsp;type !! Default&nbsp;Value !! Comment
+|-
+|isPackage ||Boolean ||false ||Set if the shape have to be displayed as a package.
+|-
+|}
+
+====== Result ======
+
+<source lang="css">Class{
+ isPackage:true;
+ textAlignment:"left";
+}</source>
+
+[[File:images/isPackageResult.png]]
+
+===== Shadow improvement =====
+
+The shadow width and color can now be chosen.
+
+====== CSS Property ======
+{| class="wikitable" border="1" cellspacing="0"
+|-
+! Property&nbsp;name !! Value&nbsp;type !! Default&nbsp;Value !! Comment
+|-
+|shadowWidth ||Integer ||4 ||Set the width of the shadow.
+|-
+|shadowColor ||String ||"-1" ||Set the color of the shadow. By default the shadow have the same color as the border.
+|-
+|}
+
+====== Result ======
+
+<source lang="css">Class{
+ shadow:true;
+ shadowWidth:10;
+ shadowColor:"blue";
+}</source>
+
+[[File:images/shadowResult.png]]
+
+= Manipulating styles =
The computed styles will be applied automatically. For example, if your stylesheet tells that all your abstract classes must be red, the classes color will change automatically according to the value of their "isAbstract" property.
@@ -603,6 +1015,63 @@ Once a style is applied on an object, the object will be refreshed each time the
All the green classes will become red.<br>
+= Themes and preferences =
+
+== CSS Support ==
+
+Papyrus should provide a CSS Engine for its diagrams. The stylesheets should be defined at three levels:
+
+* Workspace stylesheets: Applied on every elements
+* Model stylesheets: Applied on each element of the Model
+* Diagram Stylesheets: Applied on each element of the Diagram
+
+The CSS Engine should handle three kinds of properties:
+
+* GMF "Style" properties
+* Papyrus style properties (From Annotated Notation model)
+* User defined properties
+
+Regarding the CSS Selectors, they should be based on the Semantic model, plus the diagram type, i.e. :
+
+<source lang="css">
+Class { /* All GMF views representing a Class */
+ bold:true; /* This is a GMF property */
+}
+
+ClassDiagram Class { /* All classes in a ClassDiagram */
+ bold:false;
+}
+</source>
+
+The selectors should also be able to test semantic properties:
+
+<source lang="css">
+Class[isAbstract=true] {
+ italic:true;
+}
+</source>
+
+The CSS Engine should be generic enough to handle any kind of Semantic Model (i.e. it should not depend on UML).
+
+It should be possible to define local Style, CSS Classes and CSS ID on specific GMF Elements.
+
+==Extended CSS Support==
+
+Papyrus should provide an Extended CSS Syntax, allowing the user to define its own CSS Selectors through custom queries (OCL, EMF Facet, Java...)
+
+This extended CSS syntax is not compatible with the standard CSS parsers. Thus, we will need to define a custom parser for CSSX files. The CSSX parser should be able to handle standard CSS files, as well as custom queries.
+
+<source lang="css">
+Class[hasStereotype("SysML::Blocks::Block")] {
+ fillColor:#C3D1D5;
+ gradient:white vertical;
+}
+</source>
+
+==Editor & Preferences==
+
+The user should be able to edit the CSS/CSSX files either textually or graphically. The graphical editor should look like the current Papyrus preferences page, which it will replace.
+
= Limitations and issues =
There are currently a few identified limitations to the Stylesheet framework, as well as a few minor bugs:<br>
@@ -611,13 +1080,10 @@ There are currently a few identified limitations to the Stylesheet framework, as
Currently, some complex selectors are not supported in the Papyrus stylesheets. Especially, the following are not supported yet:<br>
-=== Selector inheritance ===
-
-It is not possible to apply a style to all descendant of a given Metaclass. For example, a Behavior will not inherit styles from a Class, although a Behavior actually is a Class.<br>
-
-=== Events support ===
-
-Selectors based on user events are not yet implemented. For example, the CSS specification defines the&nbsp;:hover pseudo-selector to represent an element hovered by the mouse, which is not yet supported in Papyrus.<br>
+;Selector inheritance
+:It is not possible to apply a style to all descendant of a given Metaclass. For example, a Behavior will not inherit styles from a Class, although a Behavior actually is a Class.<br>
+;Events support
+:Selectors based on user events are not yet implemented. For example, the CSS specification defines the&nbsp;:hover pseudo-selector to represent an element hovered by the mouse, which is not yet supported in Papyrus.<br>
== Known bugs ==
@@ -625,3 +1091,6 @@ The following bugs have been identified:<br>
*[https://bugs.eclipse.org/bugs/show_bug.cgi?id=386574 Bug 386574]: <nowiki>[CSS - Refresh] Only the active diagram is refresh when the stylesheets change</nowiki><br>
*[https://bugs.eclipse.org/bugs/show_bug.cgi?id=436665 Bug 436665]: <nowiki>[CSS] Refresh issue when an element is moved to a different owner</nowiki>
+*[https://bugs.eclipse.org/bugs/show_bug.cgi?id=472167 Bug 472167]: <nowiki>lists some nodes that are currently not supported</nowiki>
+
+
diff --git a/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/ColoredNodeExample.png b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/ColoredNodeExample.png
new file mode 100644
index 00000000000..96e1aad343d
--- /dev/null
+++ b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/ColoredNodeExample.png
Binary files differ
diff --git a/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/CustomLineStyle.png b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/CustomLineStyle.png
new file mode 100644
index 00000000000..e56e96bc69d
--- /dev/null
+++ b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/CustomLineStyle.png
Binary files differ
diff --git a/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/DashDotDotLineStyle.png b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/DashDotDotLineStyle.png
new file mode 100644
index 00000000000..62d819c27aa
--- /dev/null
+++ b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/DashDotDotLineStyle.png
Binary files differ
diff --git a/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/DashDotLineStyle.png b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/DashDotLineStyle.png
new file mode 100644
index 00000000000..d682953fdd0
--- /dev/null
+++ b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/DashDotLineStyle.png
Binary files differ
diff --git a/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/DashLineStyle.png b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/DashLineStyle.png
new file mode 100644
index 00000000000..f7aad509cd8
--- /dev/null
+++ b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/DashLineStyle.png
Binary files differ
diff --git a/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/DefaultStereotypeDisplay.jpg b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/DefaultStereotypeDisplay.jpg
new file mode 100644
index 00000000000..422a8c20753
--- /dev/null
+++ b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/DefaultStereotypeDisplay.jpg
Binary files differ
diff --git a/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/DisplayHeader.png b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/DisplayHeader.png
new file mode 100644
index 00000000000..205261f0f46
--- /dev/null
+++ b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/DisplayHeader.png
Binary files differ
diff --git a/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/DotLineStyle.png b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/DotLineStyle.png
new file mode 100644
index 00000000000..9575b552047
--- /dev/null
+++ b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/DotLineStyle.png
Binary files differ
diff --git a/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/FloatingLabelConstrained.png b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/FloatingLabelConstrained.png
new file mode 100644
index 00000000000..d7d16e44c4f
--- /dev/null
+++ b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/FloatingLabelConstrained.png
Binary files differ
diff --git a/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/FloatingLabelOffset.png b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/FloatingLabelOffset.png
new file mode 100644
index 00000000000..26f8d855a44
--- /dev/null
+++ b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/FloatingLabelOffset.png
Binary files differ
diff --git a/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/FloatingLabelVisibleResult.png b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/FloatingLabelVisibleResult.png
new file mode 100644
index 00000000000..fb00cc73b1a
--- /dev/null
+++ b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/FloatingLabelVisibleResult.png
Binary files differ
diff --git a/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/IsPackageResult.png b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/IsPackageResult.png
new file mode 100644
index 00000000000..ad3bcb79551
--- /dev/null
+++ b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/IsPackageResult.png
Binary files differ
diff --git a/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/LineLengthRatioTo08.png b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/LineLengthRatioTo08.png
new file mode 100644
index 00000000000..84878f2d7b8
--- /dev/null
+++ b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/LineLengthRatioTo08.png
Binary files differ
diff --git a/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/LineLengthTo40.png b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/LineLengthTo40.png
new file mode 100644
index 00000000000..5c0a053c890
--- /dev/null
+++ b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/LineLengthTo40.png
Binary files differ
diff --git a/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/LinePositionToCenter.png b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/LinePositionToCenter.png
new file mode 100644
index 00000000000..4065ca8a501
--- /dev/null
+++ b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/LinePositionToCenter.png
Binary files differ
diff --git a/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/LinePositionToLeft.png b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/LinePositionToLeft.png
new file mode 100644
index 00000000000..9902da1244e
--- /dev/null
+++ b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/LinePositionToLeft.png
Binary files differ
diff --git a/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/LinePositionToRight.png b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/LinePositionToRight.png
new file mode 100644
index 00000000000..2be3d465f9d
--- /dev/null
+++ b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/LinePositionToRight.png
Binary files differ
diff --git a/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/NamePositionToCenter.png b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/NamePositionToCenter.png
new file mode 100644
index 00000000000..7a6d0c06069
--- /dev/null
+++ b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/NamePositionToCenter.png
Binary files differ
diff --git a/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/NamePositionToLeft.png b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/NamePositionToLeft.png
new file mode 100644
index 00000000000..296a9c824fc
--- /dev/null
+++ b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/NamePositionToLeft.png
Binary files differ
diff --git a/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/NamePositionToRight.png b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/NamePositionToRight.png
new file mode 100644
index 00000000000..4c1926f0cf7
--- /dev/null
+++ b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/NamePositionToRight.png
Binary files differ
diff --git a/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/OvalResult.png b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/OvalResult.png
new file mode 100644
index 00000000000..99a8907cd2e
--- /dev/null
+++ b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/OvalResult.png
Binary files differ
diff --git a/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/PortInside.png b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/PortInside.png
new file mode 100644
index 00000000000..1e390d7cd42
--- /dev/null
+++ b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/PortInside.png
Binary files differ
diff --git a/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/PortOnLine.png b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/PortOnLine.png
new file mode 100644
index 00000000000..5d6c07f87b3
--- /dev/null
+++ b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/PortOnLine.png
Binary files differ
diff --git a/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/PortOuside.png b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/PortOuside.png
new file mode 100644
index 00000000000..4736b518bb4
--- /dev/null
+++ b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/PortOuside.png
Binary files differ
diff --git a/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/PropertiesLocation.png b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/PropertiesLocation.png
new file mode 100644
index 00000000000..d1bca82bc2b
--- /dev/null
+++ b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/PropertiesLocation.png
Binary files differ
diff --git a/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/RadiusResult.png b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/RadiusResult.png
new file mode 100644
index 00000000000..ade8fb1cdbd
--- /dev/null
+++ b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/RadiusResult.png
Binary files differ
diff --git a/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/ShadowResult.png b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/ShadowResult.png
new file mode 100644
index 00000000000..5ff9222f4b7
--- /dev/null
+++ b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/images/ShadowResult.png
Binary files differ

Back to the top