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

Revision as of 10:21, 16 December 2014

DRAFT

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.

Rounded Corner

The radius of corners can be set throught CSS.

CSS properties

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

Result

Class {
	isOval:true;
}

Floating Label

A floating label is now available on most nodes. It’s managed throws CSS properties.

CSS properties

Attibutes for the mask label:

Result

Class> Label {
	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

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

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

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

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

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 “namePosition”.

CSS property

Result

Class{
	namePosition:"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

Result

Class{
	namePosition:"left";
	displayHeader:true;
}

Figure 20: Shape with a header

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

Result

Port{
	portPosition:"inside"; /*onLine, outside*/
}