Styles¶

Levels¶

The map viewer module can show many types of maps. Some of them have only one level of logic, like the maps than only show seats or only show sections.

Other maps have two levels. First level shows the sections, and when you zoom-in, the seats become visible.

There is a threshold that defines how much scaling_factor is needed to change from level to level.

Styles¶

To customize the styles of the Viewer, it is necessary to specify the styles for every map level with setStyles method.

How to build a styles object¶

This object is made of several levels that are going to be analyzed. The final result is a simple JSON that will define how to paint the Viewer elements.

**First level: Node Type **¶

The first level specifies the node type or types to style. A null indicates that the node will not have style and therefore will not be painted.

1
2
3
4

var styles = [{
    seat: {...},
    section: {...}
}];

Second level: states reference¶

The second level refers to the states. Every state will have an object that will define its styles. In case the input is another state, it will inherit its styles. In this example, the state disabled inherits the unavailable styles.

1
2
3
4
5
6
7
8
9

var styles = [{
    seat: {
        available: {...},
        unavailable: {...},
        selected: {...},
        disabled: "unavailable"
    },
    section: {...}
}];

Third level: pseudo states¶

The third level will divide the style in two cases: normal and hover (being normal when it is not hover). It is necessary to specify styles for normal, but it is not necessary to do it for hover. If there is no section in hover, normal will be used.

In this example we specify styles for hover in available and selected.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

var styles = [{
    seat: {
        available: {
            normal: {...},
            hover: {...}
        },
        unavailable: {
            normal: {...}
        },
        selected: {
            normal: {...},
            hover: {...}
        },
        disabled: "unavailable"
    },
    section: {...}
}];

Fourth level: style tags¶

In this level, we list the different styles tags that we want to paint differently. It is necessary to include "none", which will be the default style when there is no tag.

In this example we want to paint differently the nodes that use the tag "tag1", but only when they are available or selected (they will use the default style for unavailable).

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

var styles = [{
    seat: {
        available: {
            normal: {
                none: {...},
                tag1: {...}
            },
            hover: {
                none: {...},
                tag1: {...}
            }
        },
        unavailable: {
            normal: {
                none: {...}
            }
        },
        selected: {
            normal: {
                none: {...},
                tag1: {...}
            },
            hover: {
                none: {...},
                tag1: {...}
            }
        },
        disabled: "unavailable"
    },
    section: {...}
}];

Fifth level: styles¶

Finally, in this level we specify which styles will have a node when all previous conditions are reached. The style options are:

• cursor (string): Specifies the cursor used. You can see a list of cursors here. "auto" will be used if this is not specified.
• fillStyle (string): Specifies the fill color. There will be no fill if this is not specified.
• strokeStyle (string): Specifies the stroke color. There will be no stroke if this is not specified.
• lineWidth (number): Specifies the stroke width (if strokeStyle exists). A default value (0.1) will be used if this is not specified.
• lineDash (number[]): sets the line dash pattern used when stroking lines. More info here.
• lineDashOffset (number): Specifies the line dash offset. More info here.
• opacity (number): Opacity, from 0 (not visible) to 1 (completely visible).
• fillOpacity (number): Fill opacity, from 0 (not visible) to 1 (completely visible).
• strokeOpacity (number): Stroke opacity, from 0 (not visible) to 1 (completely visible).
• text (boolean): enables or disables node text labels.
• textFillStyle (string): Specifies the fill color for the text (if text is true). There will be no fill text if this is not specified.
• textStrokeStyle (string): Specifies the stroke color for the text (if text is true).
• textLineWidth (string): Specifies the stroke width for the text (if text is true). be no fill text if this is not specified.
• textFontSize (number): Specifies the font size of the text.
• textFontFamily (string): Specifies the font family of the text.
• textBackground (boolean): Adds a background to the text. false by default.
• textBackgroundFillStyle (string): Changes the text background color. white by default.
• textBackgroundOpacity (number): Opacity of the background. 0.5 by default.
• icon (string): Specifies if an icon is going to be drawn over the node. No icon will be used if this is not specified. Available icons are can be checked with getIconsList method.
• iconFillStyle (string): pecifies the fill color of the icon. There will be no fill if this is not specified.
• iconStrokeStyle (string): Specifies the stroke color of the icon. There will be no stroke if this is not specified.
• iconLineWidth (number): Specifies the stroke width of the icon (if iconStrokeStyle exists). A default value (0.025) will be used if this is not specified.
• iconScale (string): scaling factor applied to the icon (if any).
• iconOpacity (number): Icon opacity, from 0 (not visible) to 1 (completely visible).
• iconFillOpacity (number): Icon fill opacity, from 0 (not visible) to 1 (completely visible).
• iconStrokeOpacity (number): Icon stroke opacity, from 0 (not visible) to 1 (completely visible).

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

var styles = [{
    seat: {
        available: {
            normal: {
                none: {
                    fillStyle: "red",
                    cursor: "auto"
                },
                tag1: {
                    fillStyle: "orange",
                    cursor: "auto"
                }
            },
            hover: {
                none: {
                    fillStyle: "red",
                    strokeStyle: "red",
                    lineWidth: 0.1,
                    cursor: "pointer"
                },
                tag1: {
                    fillStyle: "orange",
                    strokeStyle: "orange",
                    lineWidth: 0.1,
                    cursor: "pointer"
                }
            }
        },
        unavailable: {
            normal: {
                none: {
                    fillStyle: "grey",
                    cursor: "auto"
                }
            }
        },
        selected: {
            normal: {
                none: {
                    fillStyle: "green",
                    cursor: "auto"
                },
                tag1: {
                    fillStyle: "yellow",
                    cursor: "auto"
                }
            },
            hover: {
                none: {
                    fillStyle: "green",
                    strokeStyle: "green",
                    lineWidth: 0.1,
                    cursor: "pointer"
                },
                tag1: {
                    fillStyle: "yellow",
                    strokeStyle: "yellow",
                    lineWidth: 0.1,
                    cursor: "pointer"
                }
            }
        },
        disabled: "unavailable"
    },
    section: {...}
}];