Styling ​

The TemplateAPI contains a number of useful modules to style the SVG shapes within the template.

Shape Style ​

The ShapeStyle object is meant to apply certain styles to any shape.

interface ShapeStyle {
	key: string;
	value: string;
	condition: (() => boolean) | boolean;
}

The ShapeStyle() method can be passed as a modifier within shape definitions.

function ShapeStyle(
	key: string, 
	value: string, 
	condition?: (() => boolean) | boolean
): ShapeStyle;

// adds the css class "warning" to the shape if the data.warning property is truthy
ShapeStyle("class", "warning", data.warning);

// always sets the font weight to 600
ShapeStyle("font-weight", "600", true);

ShapeStyle("class", "warning.important.dark_text", true);

Tag Style ​

The TagStyle object contains the styling data to be applied on a TagShape.

interface TagStyle {
	padding: {
		top: number;
		right: number;
		bottom: number;
		left: number;
	};
	textStyles: ShapeStyle[];
	backgroundStyles: ShapeStyle[];
	cornerRadius: number;
}

The TagStyle() method can be passed as a modifier within tag definitions and takes parameters to restrucutre them into a TagStyle object.

function TagStyle(
	padding: number | [number, number] | [number, number, number, number],
	textStyles: ShapeStyle[] = [],
	backgroundStyles: ShapeStyle[] = [],
	cornerRadius: number = 0
): TagStyle;

// Tag with a height-padding of 20px and width-padding of 30px
// applied text style from the "tag-text" css class and a font-size of 24px
// applied background style to be red
// and 15px rounded corners
TagStyle(
	[20, 30],
	[ShapeStyle("class", "tag-text", true), ShapeStyle("font-size", "24px", true)],
	[ShapeStyle("fill", "red", true)],
	15
);

Collection Style ​

The CollectionStyle object contains the styling data to be applied on a CollectionShape.

interface CollectionStyle {
	height: number;
	width: number;
	x: number;
	y: number;
	dx: number;
	dy: number;
	rowCount: number;
	align: Alignment;
	rowMargins: number[];
}

The CollectionStyle() method can be passed as a modifier within collection definitions and takes parameters directly.

function CollectionStyle(
	height: number,
	width: number,
	x: number,
	y: number,
	dx: number,
	dy: number,
	rowCount: number,
	align: Alignment = Alignment.Center,
	rowMargins: number[] = []
): CollectionStyle;

CollectionStyle(
	100, // 100px heigh
	300, // 300px wide
	0, // 0px from the left
	30, // 30px from the top
	10, // 10px horizontal space between each item
	10, // 10px vertical space between each item
	2, // 2 rows of items are possible
	Alignment.Center, // items are centered
	[30, 60] // the first row has 30px horizontal margin and the second 60px
);

LOD Style ​

The LODStyle(Level of Detail) object contains the styling data to be applied by the OnZoom event.

interface LODStyle {
	shape: d3.Selection<SVGElement, any, any, any>;
	key: string;
	value: string;
	condition: ((k: number) => boolean) | boolean;
}

The LODStyle() method can be passed as a modifier within LOD definitions and takes parameters directly.

function LODStyle(
	shape: d3.Selection<SVGElement, any, any, any>,
	key: string,
	value: string,
	condition?: ((k: number) => boolean) | boolean
): LODStyle;

// applies the css class hidden to the shape if the scale factor is below 0.6
LODStyle(shape, "class", "hidden", (k) => k < 0.6);

LODStyle(shape, "class", "title.xl.dark_text", (k) => k < 0.6);

Theme Style ​

The ThemeStyle object is meant to by used in conjunction with the ShapeStyle object to apply certain styles to any shape based on the current theme.

export interface ThemeStyle {
	data: Node;
	lightValue: string;
	darkValue: string;
}

The ThemeStyle() method can be passed as a parameter to the ShapeStyle() value parameter and defines the values to be applied wheather the theme is light or dark.

function ThemeStyle(
	data: Node,
	lightValue: string,
	darkValue: string
): ThemeStyle;

ShapeStyle("fill", ThemeStyle("white", "black"));

const someText = TextCollection("Hello World", CollectionStyle(0, 0, 200, 200, 20, 20, 1), [
	ShapeStyle("class", "gly_text", true),
	ShapeStyle("fill", ThemeStyle(data, "#00796b", "#b2dfdb")),
]);

Coloring Utilities ​

Besides theme controlled coloring there are some use cases where certain coloring is dictated by some custom logic (e.g. the payload of a node). Since elements like text should be easily readable the coloring should be determined by the background color.

The TemplateAPI now provides a few utility functions to help with this.

Brightness ​

brightness() takes a color string and returns the brightness of the color as a number between 0 and 1. The function expects a color string in the format #rrggbb or rgb(r, g, b).

const { brightness } = TemplateAPI;
brightness("#4db6ac"); // 0.5861372549019608
brightness("rgb(77, 182, 172)"); // 0.5861372549019608

Is Light ​

isLight() is a wrapper around brightness() and returns true if the color is determined to be light and false if it is dark.

const { isLight } = TemplateAPI;
isLight("#4db6ac"); // true
isLight("rgb(77, 182, 172)"); // true

Is Dark ​

isDark() is a wrapper around brightness() and returns true if the color is determined to be dark and false if it is light.

const { isDark } = TemplateAPI;
isDark("#4db6ac"); // false
isDark("rgb(77, 182, 172)"); // false