Papyrus/Mars Work Description/NewFeature/Shape customisation

DRAFT

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

Class {
	radiusWidth:150;
	radiusHeight:50;
}

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 property

Property name	Value type	Initial Value	Comment
isOval	Boolean	false	Set to true if you want to have an oval shape

Result

Class {
	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 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	Initial Value	Comment
maxNumberOfSymbol	Integer	10	Set the maximum number of of symbols to be displayed.

Result

TimeObservation {
	maxNumberOfSymbol:1;
}

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 property

Property name	Value type	Initial Value	Comment
useOriginalColors	Boolean	true	Set if the SVG image use original colors.

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.

Result

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

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

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 property

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 property

Property name	Value type	Initial Value	Comment
namePosition	String	“center”	Set name the position of named node.

Result

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 Property

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