mirror of
https://github.com/ful1e5/Bibata_Cursor.git
synced 2025-05-20 10:15:11 -04:00
📦 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:
parent
af55c59c34
commit
4329aca7aa
4 changed files with 125 additions and 51 deletions
67
bitmapper/packages/core/src/SVGHandler/SvgDirectoryParser.ts
Normal file
67
bitmapper/packages/core/src/SVGHandler/SvgDirectoryParser.ts
Normal 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 };
|
52
bitmapper/packages/core/src/SVGHandler/colorSvg.ts
Normal file
52
bitmapper/packages/core/src/SVGHandler/colorSvg.ts
Normal 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 };
|
4
bitmapper/packages/core/src/SVGHandler/index.ts
Normal file
4
bitmapper/packages/core/src/SVGHandler/index.ts
Normal file
|
@ -0,0 +1,4 @@
|
||||||
|
import { colorSvg } from "./colorSvg";
|
||||||
|
import { SvgDirectoryParser } from "./SvgDirectoryParser";
|
||||||
|
|
||||||
|
export { colorSvg, SvgDirectoryParser };
|
|
@ -1,52 +1,3 @@
|
||||||
import { Colors } from "./types";
|
import * as SVGHandler from "./SVGHandler";
|
||||||
|
|
||||||
/**
|
export { 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 };
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue