mirror of
https://github.com/ful1e5/Bibata_Cursor.git
synced 2025-05-20 02:05:12 -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";
|
||||
|
||||
/**
|
||||
* 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 };
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue