@gapit/element-color

This components purpose is to change an elements color. It has multiple methods that can be executed in both safe and unsafe variations. The safe versions will throw an error if given an undefined element, while the unsafe will proceed without action.

It can be used in synergy with @gapit/query-selector.

setElementColor

import { setElementColor } from "@gapit/element-color";
import { querySelectorUnsafe } from "@gapit/query-selector";

const element = querySelectorUnsafe("#some-element");

//  setElementColor has an third optional variable with default value false.

setElementColor(element, { fill: "#272729" });
//  This will effectively run: setElementColorSafe(element, { fill: "#272729" });

setElementColor(element, { stroke: "#272729" }, true);
//  This will effectively run: setElementColorUnsafe(element, { stroke: "#272729" });

setElementColorBySelector

import { setElementColorBySelector } from "@gapit/element-color";

const elementId = "#some-element";

setElementColorBySelector(elementId, { fill: "#272729" });

setElementColorBySelector(elementId, { stroke: "#272729" }, true);

setGroupElementColor

import { setGroupElementColor } from "@gapit/element-color";
import { querySelectorUnsafe } from "@gapit/query-selector";

const element = querySelectorUnsafe("#some-group-element");

setGroupElementColor(element, { fill: "#272729" });

setGroupElementColor(element, { stroke: "#272729" }, true);

setGroupElementColorBySelector

import { setGroupElementColorBySelector } from "@gapit/element-color";

const elementId = "#some-group-element";

setGroupElementColorBySelector(elementId, { fill: "#272729" });

setGroupElementColorBySelector(elementId, { stroke: "#272729" }, true);