Notice: this Wiki will be going read only early in 2024 and edits will no longer be 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"
(→Border style) |
(Add link to bugzilla issues regarding this feature) |
||
(26 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
− | |||
== Introduction == | == Introduction == | ||
+ | <!--This new feature adds the possibility to have more option to customize nodes of diagrams. | ||
+ | More, SVG symbol can be used for most of nodes. A floating label can also be added to be used with it.--> | ||
− | + | 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" | ||
+ | |- | ||
+ | ! 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 == | ==Rounded Corner == | ||
− | The | + | The radius of corners can be set throught CSS. |
===CSS properties=== | ===CSS properties=== | ||
Line 15: | Line 37: | ||
{| class="wikitable" | {| class="wikitable" | ||
|- | |- | ||
− | ! Property name !! Value type !! | + | ! Property name !! Value type !! Default Value !! Comment |
|- | |- | ||
|radiusWidth || Integer|| 0|| Set the radius width of corners | |radiusWidth || Integer|| 0|| Set the radius width of corners | ||
Line 33: | Line 55: | ||
==Oval shape setting == | ==Oval shape setting == | ||
− | To force the figure to be an oval, even if | + | 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 === | ===CSS property === | ||
Line 39: | Line 61: | ||
{| class="wikitable" | {| class="wikitable" | ||
|- | |- | ||
− | ! Property name !! Value type !! | + | ! Property name !! Value type !! Default Value !! Comment |
|- | |- | ||
|isOval ||Boolean ||false ||Set to true if you want to have an oval shape | |isOval ||Boolean ||false ||Set to true if you want to have an oval shape | ||
Line 53: | Line 75: | ||
[[File:ovalResult.PNG]] | [[File:ovalResult.PNG]] | ||
− | |||
− | |||
== Floating Label == | == Floating Label == | ||
− | A floating label is now available on | + | 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 === | ===CSS properties === | ||
Line 64: | Line 84: | ||
{| class="wikitable" | {| class="wikitable" | ||
|- | |- | ||
− | ! Property name !! Value type !! | + | ! Property name !! Value type !! Default Value !! Comment |
|- | |- | ||
|isFloatingLabelConstrained ||Boolean ||false ||Set to true if the floating label is constrained on eight position, you can move it manually. | |isFloatingLabelConstrained ||Boolean ||false ||Set to true if the floating label is constrained on eight position, you can move it manually. | ||
Line 85: | Line 105: | ||
|- | |- | ||
! Value !! Description! | ! Value !! Description! | ||
+ | |- | ||
+ | |stereotype ||Style constant for stereotype display in labels. | ||
|- | |- | ||
|name ||Style constant for name display in labels. | |name ||Style constant for name display in labels. | ||
Line 97: | Line 119: | ||
|- | |- | ||
|defaultValue|| Style constant for default value display in labels. | |defaultValue|| Style constant for default value display in labels. | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
|- | |- | ||
|direction|| Style constant for direction display in labels. | |direction|| Style constant for direction display in labels. | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
|- | |- | ||
|returnType|| Style constant for return type display in labels. | |returnType|| Style constant for return type display in labels. | ||
|- | |- | ||
|returnMultiplicity|| Style constant for return multiplicity display in labels. | |returnMultiplicity|| Style constant for return multiplicity display in labels. | ||
− | |||
− | |||
|- | |- | ||
|} | |} | ||
===Result === | ===Result === | ||
− | <source lang="css">Class> Label { | + | <source lang="css">Class> Label[kind="FloatingLabel"] { |
visible:true; | visible:true; | ||
}</source> | }</source> | ||
Line 143: | Line 147: | ||
[[File:FloatingLabelOffset.png]] | [[File:FloatingLabelOffset.png]] | ||
− | |||
==SVG symbol usage == | ==SVG symbol usage == | ||
Line 154: | Line 157: | ||
{| class="wikitable" | {| class="wikitable" | ||
|- | |- | ||
− | ! Property name !! Value type !! | + | ! Property name !! Value type !! Default Value !! Comment |
|- | |- | ||
|maxNumberOfSymbol||Integer ||10 ||Set the maximum number of of symbols to be displayed. | |maxNumberOfSymbol||Integer ||10 ||Set the maximum number of of symbols to be displayed. | ||
Line 162: | Line 165: | ||
==SVG color set == | ==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. |
− | 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 | + | 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. | Gradient must be disabled. | ||
Line 169: | Line 172: | ||
{| class="wikitable" | {| class="wikitable" | ||
|- | |- | ||
− | ! Property name !! Value type !! | + | ! Property name !! Value type !! Default Value !! Comment |
|- | |- | ||
|useOriginalColors ||Boolean ||true ||Set if the SVG image use original colors. | |useOriginalColors ||Boolean ||true ||Set if the SVG image use original colors. | ||
Line 181: | Line 184: | ||
== Border style == | == Border style == | ||
− | The border style can be | + | The border style can be customized 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 === | === CSS properties === | ||
{| class="wikitable" | {| class="wikitable" | ||
|- | |- | ||
− | ! Property name !! Value type !! | + | ! Property name !! Value type !! Default Value !! Comment |
|- | |- | ||
|borderStyle ||String ||solid ||Set the style of the border(dash, dashDot, dashDotDot, dot, solid, custom). | |borderStyle ||String ||solid ||Set the style of the border(dash, dashDot, dashDotDot, dot, solid, custom). | ||
Line 197: | Line 200: | ||
=== Result === | === Result === | ||
− | + | <source lang="css"> | |
Class { | Class { | ||
− | borderStyle:dash; /*dashDot; dashDotDot; dot; | + | borderStyle:dash; /*dashDot; dashDotDot; dot; */ |
lineWidth:2; | lineWidth:2; | ||
− | } | + | }</source> |
+ | [[File:DashLineStyle.png]][[File:DashDotLineStyle.png]][[File:DashDotDotLineStyle.png]][[File:DotLineStyle.png]] | ||
+ | <source lang="css"> | ||
Class { | Class { | ||
borderStyle:custom; | borderStyle:custom; | ||
customDash:10 10; | customDash:10 10; | ||
lineWidth:2; | lineWidth:2; | ||
− | } | + | }</source> |
+ | |||
+ | [[File:CustomLineStyle.png]] | ||
== Compartment top line length == | == Compartment top line length == | ||
− | The top line length of compartments can be | + | The top line length of compartments can be setted. |
=== CSS properties === | === CSS properties === | ||
{| class="wikitable" | {| class="wikitable" | ||
|- | |- | ||
− | ! Property name !! Value type !! | + | ! Property name !! Value type !! Default 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. | |lineLength ||int ||-1 ||Set the top line length of the compartment. By default the length is set to the width of the compartment. | ||
Line 230: | Line 237: | ||
<source lang="css">Class > Compartment{ | <source lang="css">Class > Compartment{ | ||
− | + | lineLength:40; | |
}</source> | }</source> | ||
− | + | [[File:LineLengthTo40.png]] | |
<source lang="css">Class > Compartment{ | <source lang="css">Class > Compartment{ | ||
Line 239: | Line 246: | ||
}</source> | }</source> | ||
− | + | [[File:LineLengthRatioTo08.png]] | |
== Compartment top line position == | == Compartment top line position == | ||
− | The position of line can be | + | The position of line can be setted, the default is center. |
=== CSS property === | === CSS property === | ||
{| class="wikitable" | {| class="wikitable" | ||
|- | |- | ||
− | ! Property name !! Value type !! | + | ! Property name !! Value type !! Default Value !! Comment |
|- | |- | ||
|linePosition ||String ||“center” ||Set the compartment top line position.Can be left, center, right. | |linePosition ||String ||“center” ||Set the compartment top line position.Can be left, center, right. | ||
Line 258: | Line 265: | ||
<source lang="css">Class > Compartment{ | <source lang="css">Class > Compartment{ | ||
lineLengthRatio:"0.50"; | lineLengthRatio:"0.50"; | ||
− | linePosition:"left"; | + | linePosition:"left"; /*center; right;*/ |
}</source> | }</source> | ||
− | + | [[File:LinePositionToLeft.png]][[File:LinePositionToCenter.png]][[File:LinePositionToRight.png]] | |
− | + | ||
== Name position == | == Name position == | ||
− | The name position of named | + | The name position (left, middle, right) of named nodes can be chosen with the CSS property “textAlignment”. |
− | + | ||
=== CSS property === | === CSS property === | ||
{| class="wikitable" | {| class="wikitable" | ||
|- | |- | ||
− | ! Property name !! Value type !! | + | ! Property name !! Value type !! Default Value !! Comment |
|- | |- | ||
− | | | + | |textAlignment ||String ||“center” ||Set name the position of the name. |
|- | |- | ||
|} | |} | ||
Line 281: | Line 286: | ||
<source lang="css">Class{ | <source lang="css">Class{ | ||
− | + | textAlignment:"left"; /*center, right*/ | |
}</source> | }</source> | ||
− | + | [[File:NamePositionToLeft.png]][[File:NamePositionToCenter.png]][[File:NamePositionToRight.png]] | |
− | + | ||
== Add header == | == Add header == | ||
− | A header can be | + | A header can be added to the figure at the top-left corner with the CSS attribute “displayHeader”. |
=== CSS properties === | === CSS properties === | ||
{| class="wikitable" | {| class="wikitable" | ||
|- | |- | ||
− | ! Property name !! Value type !! | + | ! Property name !! Value type !! Default Value !! Comment |
|- | |- | ||
− | | | + | |displayHeader ||Boolean ||true ||Set to true to add a header. |
|- | |- | ||
|} | |} | ||
Line 303: | Line 307: | ||
<source lang="css">Class{ | <source lang="css">Class{ | ||
− | + | textAlignment:"left"; | |
− | + | displayHeader:true; | |
}</source> | }</source> | ||
− | + | [[File:DisplayHeader.png]] | |
− | + | ||
== Port position == | == Port position == | ||
− | The port position can be | + | 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 === | === CSS Property === | ||
{| class="wikitable" | {| class="wikitable" | ||
|- | |- | ||
− | ! Property name !! Value type !! | + | ! Property name !! Value type !! Default Value !! Comment |
|- | |- | ||
|portPosition ||String ||“onLine” ||Set the position of the port. Can be “inside”, “ouside” or “onLine”. | |portPosition ||String ||“onLine” ||Set the position of the port. Can be “inside”, “ouside” or “onLine”. | ||
Line 326: | Line 329: | ||
<source lang="css">Port{ | <source lang="css">Port{ | ||
− | portPosition:"inside"; /* | + | portPosition:"inside"; /*onLine, outside*/ |
}</source> | }</source> | ||
+ | |||
+ | [[File:PortInside.png]][[File:PortOnLine.png]][[File: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" | ||
+ | |- | ||
+ | ! Property name !! Value type !! Default 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:isPackageResult.png]] | ||
+ | |||
+ | == Shadow improvement == | ||
+ | |||
+ | The shadow width and color can now be chosen. | ||
+ | |||
+ | === CSS Property === | ||
+ | {| class="wikitable" | ||
+ | |- | ||
+ | ! Property name !! Value type !! Default 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:shadowResult.png]] | ||
+ | |||
+ | == Known issues == | ||
+ | |||
+ | Bug [https://bugs.eclipse.org/bugs/show_bug.cgi?id=472167 472167] lists some nodes that are currently not supported |
Latest revision as of 11:40, 27 October 2015
Contents
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.
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
Property name | Value type | Default Value | Comment |
---|---|---|---|
radiusWidth | Integer | 0 | Set the radius width of corners |
radiusHeight | Integer | 0 | Set the radius height of corners |
Result
Class { radiusWidth:150; radiusHeight:50; }
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
Property name | Value type | Default Value | Comment |
---|---|---|---|
isOval | Boolean | false | Set to true if you want to have an oval shape |
Result
Class { isOval:true; }
Floating Label
A floating label is now available on most nodes. It’s managed throws CSS properties, it can be specificly selected with:*>Label[kind="FloatingLabel"]
CSS properties
Property name | Value type | Default 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! |
---|---|
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
Class> Label[kind="FloatingLabel"] { visible:true; }
Class { isFloatingLabelConstrained:true }
Class{ floatingLabelOffsetWidth:10; floatingLabelOffsetHeight:-30; }
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
Property name | Value type | Default 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
Property name | Value type | Default Value | Comment |
---|---|---|---|
useOriginalColors | Boolean | true | Set if the SVG image use original colors. |
Result
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
Property name | Value type | Default 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
Class { borderStyle:dash; /*dashDot; dashDotDot; dot; */ lineWidth:2; }
Class { borderStyle:custom; customDash:10 10; lineWidth:2; }
Compartment top line length
The top line length of compartments can be setted.
CSS properties
Property name | Value type | Default 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
Class > Compartment{ lineLength:40; }
Class > Compartment{ lineLengthRatio:"0.80"; }
Compartment top line position
The position of line can be setted, the default is center.
CSS property
Property name | Value type | Default Value | Comment |
---|---|---|---|
linePosition | String | “center” | Set the compartment top line position.Can be left, center, right. |
Result
Class > Compartment{ lineLengthRatio:"0.50"; linePosition:"left"; /*center; right;*/ }
Name position
The name position (left, middle, right) of named nodes can be chosen with the CSS property “textAlignment”.
CSS property
Property name | Value type | Default Value | Comment |
---|---|---|---|
textAlignment | String | “center” | Set name the position of the name. |
Result
Class{ textAlignment:"left"; /*center, right*/ }
Add header
A header can be added to the figure at the top-left corner with the CSS attribute “displayHeader”.
CSS properties
Property name | Value type | Default Value | Comment |
---|---|---|---|
displayHeader | Boolean | true | Set to true to add a header. |
Result
Class{ textAlignment:"left"; displayHeader:true; }
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
Property name | Value type | Default Value | Comment |
---|---|---|---|
portPosition | String | “onLine” | Set the position of the port. Can be “inside”, “ouside” or “onLine”. |
Result
Port{ portPosition:"inside"; /*onLine, outside*/ }
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
Property name | Value type | Default Value | Comment |
---|---|---|---|
isPackage | Boolean | false | Set if the shape have to be displayed as a package. |
Result
Class{ isPackage:true; textAlignment:"left"; }
Shadow improvement
The shadow width and color can now be chosen.
CSS Property
Property name | Value type | Default 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
Class{ shadow:true; shadowWidth:10; shadowColor:"blue"; }
Known issues
Bug 472167 lists some nodes that are currently not supported