Notice: This Wiki is now read only and edits are no longer possible. Please see: https://gitlab.eclipse.org/eclipsefdn/helpdesk/-/wikis/Wiki-shutdown-plan for the plan.
Difference between revisions of "Papyrus/Mars Work Description/NewFeature/Shape customisation"
Line 1: | Line 1: | ||
DRAFT | DRAFT | ||
− | == | + | == Introduction == |
This new feature is possibility to have more option to customize nodes of diagrams. | This new feature is possibility to have more option to customize nodes of diagrams. | ||
Line 7: | Line 7: | ||
An SVG symbol can be displayed for most of nodes. A floating label can be added to be used with it. This label can be constrained or free. | An SVG symbol can be displayed for most of nodes. A floating label can be added to be used with it. This label can be constrained or free. | ||
− | == | + | ==Rounded Corner == |
The rounded Corner feature is implemented in the class RoundedCompartmentFigure (Figure 5). | The rounded Corner feature is implemented in the class RoundedCompartmentFigure (Figure 5). | ||
− | === | + | ===CSS properties=== |
− | Property name | + | {| class="wikitable" |
− | radiusWidth | + | |- |
− | radiusHeight | + | ! Property name !! Value type !! Initial Value !! Comment |
+ | |- | ||
+ | |radiusWidth || Integer|| 0|| Set the radius width of corners | ||
+ | |- | ||
+ | |radiusHeight || Integer|| 0|| Set the radius height of corners | ||
+ | |- | ||
+ | |} | ||
− | === | + | ===Result === |
<source lang="css">DataType { | <source lang="css">DataType { | ||
radiusWidth:150; | radiusWidth:150; | ||
Line 27: | Line 33: | ||
Figure 1: Result of the use of CSS to set corner radius | Figure 1: Result of the use of CSS to set corner radius | ||
− | == | + | ==Oval shape setting == |
To force the figure to be an oval, even if he resizes it, a specific CSS property has been added. The radius Wisth and Height will be not take into account anymore. | To force the figure to be an oval, even if he resizes it, a specific CSS property has been added. The radius Wisth and Height will be not take into account anymore. | ||
− | === | + | ===CSS properties === |
− | Property name | + | {| class="wikitable" |
− | isOval | + | |- |
+ | ! Property name !! Value type !! Initial Value !! Comment | ||
+ | |- | ||
+ | |isOval ||Boolean ||false ||Set to true if you want to have an oval shape | ||
+ | |- | ||
+ | |} | ||
+ | ===Result === | ||
− | |||
<source lang="css"> | <source lang="css"> | ||
DataType { | DataType { | ||
Line 45: | Line 56: | ||
Figure 4: Result of oval shape setting | Figure 4: Result of oval shape setting | ||
− | == | + | == Floating Label == |
A floating label is now available on all refactored figures. It’s manage throws CSS properties. | A floating label is now available on all refactored figures. It’s manage throws CSS properties. | ||
− | === | + | ===CSS properties === |
− | Property Value type Initial Value | + | {| class="wikitable" |
− | + | |- | |
− | isFloatingLabelConstrained Boolean false Set to true if the floating label is constrained on eight position, you can move it manually | + | ! Property name !! Value type !! Initial Value !! Comment |
− | 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. | + | |isFloatingLabelConstrained ||Boolean ||false ||Set to true if the floating label is constrained on eight position, you can move it manually. |
− | 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 | + | |labelConstrained ||Boolean ||false ||Forced the label to one position, by default(for port) it will placed according to the parent position. |
− | maskLabel List of String Set the mask of the floating label | + | |- |
− | + | |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. | |
− | + | |- | |
− | + | |} | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | = | + | Attibutes for the mask label: |
+ | |||
+ | {| class="wikitable" | ||
+ | |- | ||
+ | ! Value !! Description! | ||
+ | |- | ||
+ | |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. | ||
+ | |- | ||
+ | |modifiers|| Style constant for modifiers display in labels. | ||
+ | |- | ||
+ | |multiline|| Style constant for carriage return in labels. | ||
+ | |- | ||
+ | |parametersDirection|| Style constant for operation#parameter direction display in labels. | ||
+ | |- | ||
+ | |direction|| Style constant for direction display in labels. | ||
+ | |- | ||
+ | |parametersName|| Style constant for operation#parameter name display in labels. | ||
+ | |- | ||
+ | |parametersType|| Style constant for operation#parameter type display in labels. | ||
+ | |- | ||
+ | |parametersMultiplicity|| Style constant for operation#parameter multiplicity display in labels. | ||
+ | |- | ||
+ | |parametersDefault|| Style constant for operation#parameter default value display in labels. | ||
+ | |- | ||
+ | |parametersModifiers|| Style constant for operation#parameter modifiers display in labels. | ||
+ | |- | ||
+ | |returnType|| Style constant for return type display in labels. | ||
+ | |- | ||
+ | |returnMultiplicity|| Style constant for return multiplicity display in labels. | ||
+ | |- | ||
+ | |conjugated|| Style constant for conjugated labels. | ||
+ | |- | ||
+ | |} | ||
+ | |||
+ | |||
+ | ===Result === | ||
<source lang="css">DataType > Label { | <source lang="css">DataType > Label { | ||
visible:true; | visible:true; | ||
Line 87: | Line 132: | ||
Figure 5: Result of displayFloatingLabel | Figure 5: Result of displayFloatingLabel | ||
+ | |||
<source lang="css">DataType { | <source lang="css">DataType { | ||
isFloatingLabelConstrained:true | isFloatingLabelConstrained:true | ||
Line 96: | Line 142: | ||
Figure 6: Result of isFloatingLabelConstrained | Figure 6: Result of isFloatingLabelConstrained | ||
+ | |||
<source lang="css">DataType { | <source lang="css">DataType { | ||
floatingLabelOffsetWidth:10; | floatingLabelOffsetWidth:10; | ||
floatingLabelOffsetHeight:-30; | floatingLabelOffsetHeight:-30; | ||
− | } | + | } |
− | + | ||
+ | DataType > Label { | ||
visible:true; | visible:true; | ||
}</source> | }</source> | ||
Line 107: | Line 155: | ||
− | == | + | ==SVG symbol usage == |
SVG is available on symbol compartment like before. | SVG is available on symbol compartment like before. | ||
The max number of displayed symbol can now be set by CSS (default 10). | The max number of displayed symbol can now be set by CSS (default 10). | ||
− | CSS | + | |
+ | |||
+ | === CSS property === | ||
<source lang="css">TimeObservation { | <source lang="css">TimeObservation { | ||
Line 119: | Line 169: | ||
Note: SVG Symbol don’t work with affixed Node as Port. | Note: SVG Symbol don’t work with affixed Node as Port. | ||
− | === | + | ===Result === |
Line 126: | Line 176: | ||
− | maxNumberOfSymbol:2 | + | With <code>maxNumberOfSymbol:2</code> : |
− | == | + | ==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 color of the SVG symbol can be chosen. For that set the CSS properties “useOriginalColors” of the element to false. | ||
Line 135: | Line 185: | ||
Gradient must be disabled. | Gradient must be disabled. | ||
− | === | + | ===CSS properties === |
+ | {| class="wikitable" | ||
+ | |- | ||
+ | ! Property name !! Value type !! Initial Value !! Comment | ||
+ | |- | ||
+ | |useOriginalColors ||Boolean ||true ||Set if the SVG image use original colors. | ||
+ | |- | ||
+ | |} | ||
− | + | === Result === | |
− | + | ||
− | + | ||
− | === | + | |
− | == | + | == Border style == |
The border style can be customize through CSS. | The border style can be customize through CSS. | ||
− | Six styles are available: dash, dashDot, dashDotDot, dot, solid and custom | + | Six styles are available: dash, dashDot, dashDotDot, dot, solid and custom. |
With custom style you can set the customDash | With custom style you can set the customDash | ||
− | === | + | === CSS properties === |
+ | {| class="wikitable" | ||
+ | |- | ||
+ | ! Property name !! Value type !! Initial 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. | ||
+ | |- | ||
+ | |} | ||
− | + | === Results === | |
− | + | ||
− | + | ||
− | + | ||
− | === | + | |
Line 177: | Line 236: | ||
The top line length of compartments can be set. | The top line length of compartments can be set. | ||
− | === | + | === CSS properties === |
+ | {| class="wikitable" | ||
+ | |- | ||
+ | ! Property name !! Value type !! Initial 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: === | |
− | + | ||
− | + | ||
− | + | ||
− | === | + | |
By default: | By default: | ||
Line 201: | Line 265: | ||
Figure 17: Compartment top line length ratio set to 0.80 | Figure 17: Compartment top line length ratio set to 0.80 | ||
− | == | + | == Compartment top line position == |
The position of line can be set, the default is center. | The position of line can be set, the default is center. | ||
− | === | + | === CSS properties === |
+ | {| class="wikitable" | ||
+ | |- | ||
+ | ! Property name !! Value type !! Initial Value !! Comment | ||
+ | |- | ||
+ | |linePosition ||String ||“center” ||Set the compartment top line position.Can be left, center, right. | ||
+ | |- | ||
+ | |} | ||
− | |||
− | |||
− | === | + | === Result: === |
<source lang="css">Class > Compartment{ | <source lang="css">Class > Compartment{ | ||
Line 220: | Line 289: | ||
Figure 18: Compartment top line position set to left | Figure 18: Compartment top line position set to left | ||
− | == | + | == Name position == |
The name position of named node can be chosen with the CSS property “namePosition” on the element (left, middle, right). | The name position of named node can be chosen with the CSS property “namePosition” on the element (left, middle, right). | ||
− | === | + | === CSS properties === |
+ | {| class="wikitable" | ||
+ | |- | ||
+ | ! Property name !! Value type !! Initial Value !! Comment | ||
+ | |- | ||
+ | |namePosition ||String ||“center” ||Set name the position of named node. | ||
+ | |- | ||
+ | |} | ||
− | + | === Results: === | |
− | + | ||
− | + | ||
− | + | ||
− | === | + | |
<source lang="css">Class{ | <source lang="css">Class{ | ||
Line 241: | Line 313: | ||
− | == | + | == Add header == |
A header can be add to the shape at the top-left corner with the CSS “hasHeader”. | A header can be add to the shape at the top-left corner with the CSS “hasHeader”. | ||
− | === | + | === CSS properties === |
+ | {| class="wikitable" | ||
+ | |- | ||
+ | ! Property name !! Value type !! Initial Value !! Comment | ||
+ | |- | ||
+ | |hasHeader ||Boolean ||true ||Set to true to add a header. | ||
+ | |- | ||
+ | |} | ||
− | + | === Result === | |
− | + | ||
− | + | ||
− | + | ||
− | === | + | |
<source lang="css">Class{ | <source lang="css">Class{ | ||
Line 261: | Line 336: | ||
− | == | + | == Port position == |
The port position can be set to inside, outside or on line. The online option is the default value. The CSS property to applied on port is “portPosition” | The port position can be set to inside, outside or on line. The online option is the default value. The CSS property to applied on port is “portPosition” | ||
− | === | + | === CSS Properties === |
+ | {| class="wikitable" | ||
+ | |- | ||
+ | ! Property name !! Value type !! Initial Value !! Comment | ||
+ | |- | ||
+ | |portPosition ||String ||“onLine” ||Set the position of the port. Can be “inside”, “ouside” or “onLine”. | ||
+ | |- | ||
+ | |} | ||
− | + | === Result === | |
− | + | ||
− | + | ||
− | + | ||
− | === | + | |
<source lang="css">Port{ | <source lang="css">Port{ | ||
Line 279: | Line 357: | ||
− | == | + | == Summary == |
− | + | ||
− | |||
+ | === CSS Properties === | ||
+ | {| class="wikitable" | ||
+ | |- | ||
+ | ! Property name !! Value type !! Initial Value !! Comment | ||
+ | |- | ||
+ | | | ||
+ | |- | ||
+ | |} | ||
Property Value type Initial Value Comment | Property Value type Initial Value Comment | ||
radiusWidth Integer 0 Set the radius with of corners | radiusWidth Integer 0 Set the radius with of corners |
Revision as of 10:58, 11 December 2014
DRAFT
Contents
Introduction
This new feature is possibility to have more option to customize nodes of diagrams.
An SVG symbol can be displayed for most of nodes. A floating label can be added to be used with it. This label can be constrained or free.
Rounded Corner
The rounded Corner feature is implemented in the class RoundedCompartmentFigure (Figure 5).
CSS properties
Property name | Value type | Initial Value | Comment |
---|---|---|---|
radiusWidth | Integer | 0 | Set the radius width of corners |
radiusHeight | Integer | 0 | Set the radius height of corners |
Result
DataType { radiusWidth:150; radiusHeight:50; }
Figure 1: Result of the use of CSS to set corner radius
Oval shape setting
To force the figure to be an oval, even if he resizes it, a specific CSS property has been added. The radius Wisth and Height will be not take into account anymore.
CSS properties
Property name | Value type | Initial Value | Comment |
---|---|---|---|
isOval | Boolean | false | Set to true if you want to have an oval shape |
Result
DataType { isOval:true; }
Figure 4: Result of oval shape setting
Floating Label
A floating label is now available on all refactored figures. It’s manage throws CSS properties.
CSS properties
Property name | Value type | Initial 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. |
Attibutes for the mask label:
Value | Description! |
---|---|
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. |
modifiers | Style constant for modifiers display in labels. |
multiline | Style constant for carriage return in labels. |
parametersDirection | Style constant for operation#parameter direction display in labels. |
direction | Style constant for direction display in labels. |
parametersName | Style constant for operation#parameter name display in labels. |
parametersType | Style constant for operation#parameter type display in labels. |
parametersMultiplicity | Style constant for operation#parameter multiplicity display in labels. |
parametersDefault | Style constant for operation#parameter default value display in labels. |
parametersModifiers | Style constant for operation#parameter modifiers display in labels. |
returnType | Style constant for return type display in labels. |
returnMultiplicity | Style constant for return multiplicity display in labels. |
conjugated | Style constant for conjugated labels. |
Result
DataType > Label { visible:true; }
Figure 5: Result of displayFloatingLabel
DataType { isFloatingLabelConstrained:true }
DataType > Label { visible:true; }
Figure 6: Result of isFloatingLabelConstrained
DataType { floatingLabelOffsetWidth:10; floatingLabelOffsetHeight:-30; } DataType > Label { visible:true; }
Figure 7: Result of floatingLabelOffsetWidth and of floatingLabelOffsetHeight
SVG symbol usage
SVG is available on symbol compartment like before. The max number of displayed symbol can now be set by CSS (default 10).
CSS property
TimeObservation { maxNumberOfSymbol:1; }
Note: SVG Symbol don’t work with affixed Node as Port.
Result
Figure 8: Result of SVG usage with RoundedCompartmentFigure
With maxNumberOfSymbol:2
:
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 fill color of the element. Gradient must be disabled.
CSS properties
Property name | Value type | Initial Value | Comment |
---|---|---|---|
useOriginalColors | Boolean | true | Set if the SVG image use original colors. |
Result
Border style
The border style can be customize through CSS. Six styles are available: dash, dashDot, dashDotDot, dot, solid and custom. With custom style you can set the customDash
CSS properties
Property name | Value type | Initial 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. |
Results
Figure 9: Border style set to dash
Figure 10: Border style set to dashDot
Figure 11: Border style set to dashDotDot
Figure 12: Border style set to dot
Figure 13: Border style set to solid
Figure 14: Border style set to dash with shadow
1.10 Compartment top line length
The top line length of compartments can be set.
CSS properties
Property name | Value type | Initial 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:
By default:
Figure 15: Default compartment top line
Class > Compartment{ length:40; }
Figure 16: Compartment top line length set to 40
Class > Compartment{ lineLengthRatio:"0.80"; }
Figure 17: Compartment top line length ratio set to 0.80
Compartment top line position
The position of line can be set, the default is center.
CSS properties
Property name | Value type | Initial Value | Comment |
---|---|---|---|
linePosition | String | “center” | Set the compartment top line position.Can be left, center, right. |
Result:
Class > Compartment{ lineLengthRatio:"0.50"; linePosition:"left"; }
Figure 18: Compartment top line position set to left
Name position
The name position of named node can be chosen with the CSS property “namePosition” on the element (left, middle, right).
CSS properties
Property name | Value type | Initial Value | Comment |
---|---|---|---|
namePosition | String | “center” | Set name the position of named node. |
Results:
Class{ namePosition:"left"; /* center, right*/ }
Figure 19: Name position set to Left, center and right
Add header
A header can be add to the shape at the top-left corner with the CSS “hasHeader”.
CSS properties
Property name | Value type | Initial Value | Comment |
---|---|---|---|
hasHeader | Boolean | true | Set to true to add a header. |
Result
Class{ namePosition:"left"; hasHeader:true; }
Figure 20: Shape with a header
Port position
The port position can be set to inside, outside or on line. The online option is the default value. The CSS property to applied on port is “portPosition”
CSS Properties
Property name | Value type | Initial Value | Comment |
---|---|---|---|
portPosition | String | “onLine” | Set the position of the port. Can be “inside”, “ouside” or “onLine”. |
Result
Port{ portPosition:"inside"; /*outside, onLine*/ }
Summary
CSS Properties
Property name | Value type | Initial Value | Comment |
---|---|---|---|
Property Value type Initial Value Comment radiusWidth Integer 0 Set the radius with of corners radiusHeight Integer 0 Set the radius height of corners isOval Boolean false Set to true if you want to have an oval shape displayFloatingLabel Boolean false Set to true to display a floating label isFloatingLabelConstrained Boolean false Set to true if the floating Label is constrained on eight 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 Set the mask of the floating label useOriginalColors Boolean true Set if the SVG image use original colors. borderStyle String solid Set the style of the border(dash, dashDot, dashDotDot, dot, solid) 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 linePosition String “center” Set the compartment top line position.Can be left, center, right. namePosition String “center” Set name the position of named node. Can be left, center, right. diplayHeader Boolean true Set to true to add a header. portPosition String “onLine” Set the position of the port. Can be “inside”, “ouside” or “onLine”.