Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance. Project price only 1 $
You can buy this project and download/modify it how often you want.
Here is a description of the CSS language used by GraphStream. Where possible, this language is
kept coherent with the uses of the HTML or SVG CSS, but naturally, this is not always possible.
The selectors
=============
There are four main selectors :
graph
To add style to the whole graph.
node
To add style to node elements.
edge
To add style to edge elements.
sprite
To add style to sprite elements.
The selectors can then be augmented by elements identifiers, classes names and events.
Here is the syntax for elements identifiers :
node#A
Here is the syntax for classes :
node.myClassName
Here is the syntax for events :
node:selected
node#A:selected
node.myClassName:selected
The selectors tell to what elements the style applies. The combination of identifiers, classes
and events allows to select specific elements, and even specific elements at a given condition
during time.
The style properties
====================
Given a selector the style is described by a set of style properties, given between curly braces
and separated by semicolons.
Here is an example of style definition :
node.foo:selected { fill-color: red; }
Some considerations on the meaning of styles
============================================
One could think that the node style inherits the graph style for example. However this is not
the case. The graph style applies to the background of the graph, however it can also
allow to define a general style.
The common properties
=====================
These properties apply to all elements, they are inspired by (but not the same as) SVG CSS
properties :
z-index:
The Z-index allows to put elements in layers, giving a drawing order. This allows to know
above or under which other elements an element is to be drawn.
fill-mode:
none
plain
dyn-plain(ui.color)
gradient-radial
gradient-horizontal
gradient-vertical
gradient-diagonal1
gradient-diagonal2
image-tiled
image-scaled
image-scaled-ratio-max
image-scaled-ratio-min
The fill is the main color, gradient, or image pattern that fills the surface of the element
(graph, node, sprite, or edge background).
radial gradients start fromt the center of the element.
diagonal1 is a diagonal going from top-left to bottom-right, diagonal2 goes from top-right
to bottom-left.
image-tiled keeps the size of the original image in pixels and repeats it, centered in the
element.
image-scaled can deform the image to perfectly fit the element.
image-scaled-ratio-min, keeps the image ratio and may not cover the complete element surface
if the ratio of the element is not the same as the one of the image. The -max version always
fill the element, but some parts of the image may not show if the ratios differs.
default is plain.
fill-color:
If the fill mode is plain or gradient, this defines the color or colors to use. For gradients,
you must give at least two colors.
fill-image:
If the fill mode is an image, this specifies the image to use.
stroke-mode:
none
plain
dashes (todo)
dots (todo)
Specifies how to draw the border or contour of the element. Graphs can also have a stroke. In
this case this defines a box around all the elements.
stroke-color:
Color of the stroke.
stroke-width:
number
Width of the stroke.
shadow-mode:
none
plain
gradient-radial
gradient-horizontal
gradient-vertical
Shadows are always drawn at the lowest z-level possible. They have the same shape as the element
they pertain to. Using the "shadow-width" property it is possible to make the shadow larger
than the element. The shadow can be plain, or a gradient.
shadow-color:
Color or colors of the shadow. If the shadow mode is a gradient, two colors at least are
needed. It is not necessary to specify alpha for shadows as they always are drawn at he lowest
z-level.
shadow-width:
Width of the shadow. This is given in pixels, graph units or percents added to the size of
the element.
shadow-offset:
Offset of the shadow shape according to the element shape.
padding:
Space added between the contour of the element and its content (text, image or other).
text-mode:
normal
truncated (todo)
hidden
text-visibility-mode:
normal
hidden
at-zoom
under-zoom
over-zoom
zoom-range
zooms
The text mode impacts on how the text is rendered. More modes are available for specific
elements.
text-visibility:
Specify the range of visibility of the text if the text mode is one of the "zoom" modes.
text-color:
Color of the text.
text-style:
normal
italic
bold
bold-italic
Style of the text.
text-alignment:
center
left
right
at_left
at_right
under
above
line_breaks (todo)
justify (todo)
along
text-font:
Font of the text.
text-size:
Size of the font in points only.
text-padding:
text-offset:
text-background-mode:
none,
plain,
rounded-box
text-background-color:
icon-mode:
none,
at-left,
at-right, (todo)
above, (todo)
under (todo)
icon:
dyn-icon(ui.icon)
This contains either the url of an icon or the string "dyn-icon". In the later case, you can use
the "ui.icon" attribute on elements to specify the icon to use. For static icons using CSS
is encouraged. However if you must vary often the icon of an element, ui.icon can be useful.
visibility-mode:
normal
hidden
at-zoom
under-zoom
over-zoom
zoom-range
zooms
Visibility of the element. The zooms values allows to show the element only at specified zoom
levels.
visibility:
The values for the "zoom" modes of the "visibility-mode" property.
Properties common to nodes, edges and sprites
=============================================
size-mode:
normal
dyn-size(ui.size)
fit
The "ui.size" attribute takes values that can be numbers (in which case the units are PX),
or a string. The string can contain only a number or a number with units "px", "gu" or "%".
size:
shape-points:
(todo)
text-alignment:
center
left
right
at-left
at-right
under
above
justify
Properties common to nodes and sprites
======================================
shape:
circle
box
rounded-box
diamond
triangle
cross
polygon (todo)
freeplane
jcomponent
round-corner: ? (todo)
? (todo)
jcomponent:
button
text-field
panel (todo)
slider ? (todo)
Properties for nodes
====================
Properties for sprites
======================
shape:
pie-chart
flow
arrow
sprite-orientation:
none
from, node0
to, node1
projection
Properties for edges
====================
shape:
line
angle
cubic-curve
cubic-angle-curve ? (todo)
polyline (todo)
polyline-scaled (todo)
blob
freeplane
text-alignment:
along (todo)
arrow-shape:
none
arrow
circle
diamond
image
arrow-image:
dynamic
If the url is the keyword "dynamic" the image is taken from the attribute "ui.arrow-image".
arrow-size:
Properties for graphs
=====================
canvas-color:
(todo ?)
Color of all the viewer area that is not covered by the graph.
