📦 SvgHandler module

All SVG files related operation done by "SVGHandler" module. This
module had capability to Parse SVG files directory & Change colors of
it.
This commit is contained in:
ful1e5 2021-02-19 18:19:26 +05:30
parent af55c59c34
commit 4329aca7aa
4 changed files with 125 additions and 51 deletions

View file

@ -0,0 +1,67 @@
import fs from "fs";
import path from "path";
class SvgDirectoryParser {
/**
* Manage and Parse SVG file path in `absolute` fashion.
* This Parser look svg files as below fashion:
* `
* <@svgDir>/static
* <@svgDir>/animated
* `
* @param svgDir is relative/absolute path, Where `SVG` files are stored.
*/
semiAnimated: boolean = false;
constructor(private svgDir: string) {
if (!fs.existsSync(this.svgDir)) {
throw new Error(`SVG files not found in ${this.svgDir}`);
}
}
/**
* Return absolute paths array of SVG files located inside '@svgDir/static'
*/
public getStatic(): string[] {
const staticDir = path.resolve(this.svgDir, "static");
if (!fs.existsSync(staticDir)) {
console.log(`${this.svgDir} contains semi-animated .svg files`);
this.semiAnimated = true;
return [];
} else {
const staticCursors = fs
.readdirSync(staticDir)
.map((f) => path.resolve(staticDir, f));
if (staticCursors.length == 0) {
throw new Error("Static Cursors directory is empty");
}
return staticCursors;
}
}
/**
* Return absolute paths array of SVG files located inside '@svgDir/animated'
*/
public getAnimated(): string[] {
const animatedDir = path.resolve(this.svgDir, "animated");
if (!fs.existsSync(animatedDir)) {
throw new Error("Animated Cursors directory not found");
}
const animatedCursors = fs
.readdirSync(animatedDir)
.map((f) => path.resolve(animatedDir, f));
if (animatedCursors.length == 0 && this.semiAnimated) {
throw new Error(
`Can't parse svg directory ${this.svgDir} as semi-animated theme`
);
}
return animatedCursors;
}
}
export { SvgDirectoryParser };

View file

@ -0,0 +1,52 @@
import { Colors } from "../types";
/**
* Default Key Colors for generating colored svg.
* base="#00FF00" (Green)
* outline="#0000FF" (Blue)
* watch.background="#FF0000" (Red)
* */
const defaultKeyColors: Colors = {
base: "#00FF00",
outline: "#0000FF",
watch: {
background: "#FF0000",
},
};
/**
* Customize colors of svg code.
* @param {string} content SVG code.
* @param {Colors} colors Customize colors.
* @param {Colors} [keys] Colors Key, That was written SVG code.
* @returns {string} SVG code with colors.
*/
const colorSvg = (
content: string,
colors: Colors,
keys: Colors = defaultKeyColors
): string => {
content = content
.replace(new RegExp(keys.base, "ig"), colors.base)
.replace(new RegExp(keys.outline, "ig"), colors.outline);
try {
// === trying to replace `watch` color ===
if (!colors.watch?.background) {
throw new Error("");
}
const { background: b } = colors.watch;
content = content.replace(new RegExp(keys.watch!.background, "ig"), b); // Watch Background
} catch (error) {
// === on error => replace `watch` color as `base` ===
content = content.replace(
new RegExp(keys.watch!.background, "ig"),
colors.base
);
}
return content;
};
export { colorSvg };

View file

@ -0,0 +1,4 @@
import { colorSvg } from "./colorSvg";
import { SvgDirectoryParser } from "./SvgDirectoryParser";
export { colorSvg, SvgDirectoryParser };

View file

@ -1,52 +1,3 @@
import { Colors } from "./types";
import * as SVGHandler from "./SVGHandler";
/**
* Default Key Colors for generating colored svg.
* base="#00FF00" (Green)
* outline="#0000FF" (Blue)
* watch.background="#FF0000" (Red)
* */
const defaultKeyColors: Colors = {
base: "#00FF00",
outline: "#0000FF",
watch: {
background: "#FF0000",
},
};
/**
* Customize colors of svg code.
* @param {string} content SVG code.
* @param {Colors} colors Customize colors.
* @param {Colors} [keys] Colors Key, That was written SVG code.
* @returns {string} SVG code with colors.
*/
const colorSvg = (
content: string,
colors: Colors,
keys: Colors = defaultKeyColors
): string => {
content = content
.replace(new RegExp(keys.base, "ig"), colors.base)
.replace(new RegExp(keys.outline, "ig"), colors.outline);
try {
// === trying to replace `watch` color ===
if (!colors.watch?.background) {
throw new Error("");
}
const { background: b } = colors.watch;
content = content.replace(new RegExp(keys.watch!.background, "ig"), b); // Watch Background
} catch (error) {
// === on error => replace `watch` color as `base` ===
content = content.replace(
new RegExp(keys.watch!.background, "ig"),
colors.base
);
}
return content;
};
export { colorSvg };
export { SVGHandler };