Skip to main content

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.

Jump to: navigation, search

Difference between revisions of "Papyrus/Mars Work Description/NewFeature/Shape customisation"

(Introduction)
(Add link to bugzilla issues regarding this feature)
 
(23 intermediate revisions by 2 users not shown)
Line 1: Line 1:
DRAFT
 
  
 
== 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.-->
  
This new feature adds the possibility to have more option to customize nodes of diagrams.
+
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.
  
More, SVG symbol can be displayed for most of nodes. A floating label can also be added to be used with it.
+
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 rounded Corner feature is implemented in the class RoundedCompartmentFigure (Figure 5).
+
The radius of corners can be set throught CSS.
  
 
===CSS properties===
 
===CSS properties===
Line 15: Line 37:
 
{| class="wikitable"
 
{| class="wikitable"
 
|-
 
|-
! Property&nbsp;name !! Value&nbsp;type !! Initial&nbsp;Value !! Comment
+
! Property&nbsp;name !! Value&nbsp;type !! Default&nbsp;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 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 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&nbsp;name !! Value&nbsp;type !! Initial&nbsp;Value !! Comment
+
! Property&nbsp;name !! Value&nbsp;type !! Default&nbsp;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]]
 
Figure 4: Result of oval shape setting
 
  
 
== Floating Label ==
 
== 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 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&nbsp;name !! Value&nbsp;type !! Initial&nbsp;Value !! Comment
+
! 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.
 
|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.
|-
 
|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.
 
|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.
 
|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.
|-
 
|conjugated|| Style constant for conjugated 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&nbsp;name !! Value&nbsp;type !! Initial&nbsp;Value !! Comment
+
! Property&nbsp;name !! Value&nbsp;type !! Default&nbsp;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 fill color of the element.  
+
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&nbsp;name !! Value&nbsp;type !! Initial&nbsp;Value !! Comment
+
! Property&nbsp;name !! Value&nbsp;type !! Default&nbsp;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 customize through CSS.  
+
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&nbsp;name !! Value&nbsp;type !! Initial&nbsp;Value !! Comment
+
! 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).
 
|borderStyle ||String ||solid ||Set the style of the border(dash, dashDot, dashDotDot, dot, solid, custom).
Line 216: Line 219:
 
== Compartment top line length ==
 
== Compartment top line length ==
  
The top line length of compartments can be set.  
+
The top line length of compartments can be setted.  
  
 
=== CSS properties ===
 
=== CSS properties ===
 
{| class="wikitable"
 
{| class="wikitable"
 
|-
 
|-
! Property&nbsp;name !! Value&nbsp;type !! Initial&nbsp;Value !! Comment
+
! 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.
 
|lineLength ||int ||-1 ||Set the top line length of the compartment. By default the length is set to the width of the compartment.
Line 237: Line 240:
 
}</source>
 
}</source>
 
   
 
   
Figure 16: Compartment top line length set to 40
+
[[File:LineLengthTo40.png]]
 
   
 
   
 
<source lang="css">Class > Compartment{
 
<source lang="css">Class > Compartment{
Line 243: Line 246:
 
}</source>
 
}</source>
 
   
 
   
Figure 17: Compartment top line length ratio set to 0.80
+
[[File:LineLengthRatioTo08.png]]
  
 
== Compartment top line position ==
 
== Compartment top line position ==
  
The position of line can be set, the default is center.
+
The position of line can be setted, the default is center.
  
 
=== CSS property ===
 
=== CSS property ===
 
{| class="wikitable"
 
{| class="wikitable"
 
|-
 
|-
! Property&nbsp;name !! Value&nbsp;type !! Initial&nbsp;Value !! Comment
+
! Property&nbsp;name !! Value&nbsp;type !! Default&nbsp;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 265: Line 268:
 
}</source>
 
}</source>
  
+
[[File:LinePositionToLeft.png]][[File:LinePositionToCenter.png]][[File:LinePositionToRight.png]]
Figure 18: Compartment top line position set to left
+
  
 
== Name position ==
 
== 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 (left, middle, right) of named nodes can be chosen with the CSS property “textAlignment”.
 
+
  
 
=== CSS property ===
 
=== CSS property ===
 
{| class="wikitable"
 
{| class="wikitable"
 
|-
 
|-
! Property&nbsp;name !! Value&nbsp;type !! Initial&nbsp;Value !! Comment
+
! Property&nbsp;name !! Value&nbsp;type !! Default&nbsp;Value !! Comment
 
|-
 
|-
|namePosition ||String ||“center” ||Set name the position of named node.
+
|textAlignment ||String ||“center” ||Set name the position of the name.
 
|-
 
|-
 
|}
 
|}
Line 285: Line 286:
  
 
<source lang="css">Class{
 
<source lang="css">Class{
namePosition:"left"; /* center, right*/
+
textAlignment:"left"; /*center, right*/
 
}</source>
 
}</source>
  
 
+
[[File:NamePositionToLeft.png]][[File:NamePositionToCenter.png]][[File:NamePositionToRight.png]]
Figure 19: Name position set to Left, center and right
+
  
 
== Add header ==
 
== Add header ==
  
A header can be add to the shape at the top-left corner with the CSS “hasHeader”.
+
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&nbsp;name !! Value&nbsp;type !! Initial&nbsp;Value !! Comment
+
! Property&nbsp;name !! Value&nbsp;type !! Default&nbsp;Value !! Comment
 
|-
 
|-
 
|displayHeader ||Boolean ||true ||Set to true to add a header.
 
|displayHeader ||Boolean ||true ||Set to true to add a header.
Line 307: Line 307:
  
 
<source lang="css">Class{
 
<source lang="css">Class{
namePosition:"left";
+
textAlignment:"left";
 
displayHeader:true;
 
displayHeader:true;
 
}</source>
 
}</source>
 
   
 
   
Figure 20: Shape with a header
+
[[File:DisplayHeader.png]]
 
+
  
 
== Port position ==
 
== 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 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&nbsp;name !! Value&nbsp;type !! Initial&nbsp;Value !! Comment
+
! 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”.
 
|portPosition ||String ||“onLine” ||Set the position of the port. Can be “inside”, “ouside” or “onLine”.
Line 330: Line 329:
  
 
<source lang="css">Port{
 
<source lang="css">Port{
portPosition:"inside"; /*outside, onLine*/
+
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&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:isPackageResult.png]]
 +
 +
== Shadow improvement ==
 +
 +
The shadow width and color can now be chosen.
 +
 +
=== CSS Property ===
 +
{| class="wikitable"
 +
|-
 +
! 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: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

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;
}

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

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;
}

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:
 *>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;
}

FloatingLabelVisibleResult.PNG

Class {
	isFloatingLabelConstrained:true
}

FloatingLabelConstrained.PNG

Class{
	floatingLabelOffsetWidth:10;
	floatingLabelOffsetHeight:-30;	
}

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

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

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

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;
}

DashLineStyle.pngDashDotLineStyle.pngDashDotDotLineStyle.pngDotLineStyle.png

Class {	
	borderStyle:custom;
	customDash:10 10;
	lineWidth:2;
}

CustomLineStyle.png

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;
}

LineLengthTo40.png

Class > Compartment{
	lineLengthRatio:"0.80";
}

LineLengthRatioTo08.png

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;*/
}

LinePositionToLeft.pngLinePositionToCenter.pngLinePositionToRight.png

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*/
}

NamePositionToLeft.pngNamePositionToCenter.pngNamePositionToRight.png

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;
}

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

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*/
}

PortInside.pngPortOnLine.pngPortOuside.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

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";
}

IsPackageResult.png

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";
}

ShadowResult.png

Known issues

Bug 472167 lists some nodes that are currently not supported

Back to the top