Skip to content

Styles by groups

By default, and for backwards compatibility, styles don't merge between them, making them very verbose to build. Also, as you can only use tags to assign styles, the possible combinations are very low.

You can change the default behavior when loading the module with the styles_by_groups flag. with this flag set to true:

  • Styles will use groups instead of tags, allowing to use multiple combinations of groups.
  • styles of a specific type will merge, similar as css works:
    • normal.none < hover.none < normal[tag] < hover[tag] < normal[groups] < hover[groups]
    • tag styles will merge for backwards compatibility.
1
2
3
4
DVM.loadModule("map_viewer", { 
    container: "container", 
    styles_by_groups: true 
}).then(...);

Example

 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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
const styles = [
    {
        section: {
            available: {
                normal: {
                    none: {
                        fillStyle: "#00ff00",
                        strokeStyle: "#ffffff",
                    },
                    group1: {
                        fillStyle: "#ff0000",
                        priority: 1,
                    },
                    group2: {
                         strokeStyle: "#ff0000",
                         priority: 2
                    },
                },
                hover: {
                    none: {
                        cursor: "pointer",
                        fillStyle: "#0000ff",
                    }
                },
            },
        },
    },
];

viewer.setStyles(styles);

viewer.setAvailable("section", "S_100");
// S_100 styles will be :
// without hover: section.available.normal.none:
// {
//   fillStyle: "#00ff00",
//   strokeStyle: "#ffffff",
// }

// with hover: section.available.normal.none
//           + section.available.hover.none:
// {
//   cursor: "pointer",
//   fillStyle: "#0000ff",
//   strokeStyle: "#ffffff",
// }

viewer.addNodesToGroup("S_100", "group1");
// S_100 styles will be :
// without hover: section.available.normal.none 
//              + section.available.normal.group1:
// {
//   fillStyle: "#ff0000",
//   strokeStyle: "#ffffff",
// }

// with hover: section.available.normal.none
//           + section.available.hover.none 
//           + section.available.normal.group1
//           + section.available.hover.group1:
// {
//   cursor: "pointer",
//   fillStyle: "#0000ff",
//   strokeStyle: "#ffffff",
// }

viewer.addNodesToGroup("S_100", "group2");
// S_100 styles will be :
// without hover: section.available.normal.none 
//              + section.available.normal.group1
//              + section.available.normal.group2:
// {
//   fillStyle: "#ff0000",
//   strokeStyle: "#ff0000",
// }

// with hover: section.available.normal.none
//           + section.available.hover.none:
//              + section.available.normal.group1
//              + section.available.hover.group1
//              + section.available.normal.group2
//              + section.available.hover.group2:
// {
//   cursor: "pointer",
//   fillStyle: "#ff0000",
//   strokeStyle: "#ff0000",
// }

To force merge order you can use the property priority (the more priority, the latest it will merge, overriding previous properties).