🏷️ Typing and logs

This commit is contained in:
ful1e5 2020-09-29 09:15:34 +05:30
parent 05755fd92d
commit 992ad041ff
2 changed files with 56 additions and 56 deletions

View file

@ -5,7 +5,7 @@ import ora, { Ora } from "ora";
import puppeteer, { Browser, ElementHandle } from "puppeteer"; import puppeteer, { Browser, ElementHandle } from "puppeteer";
import ColoredSvgGenerator, { import ColoredSvgGenerator, {
Cursors, Cursors,
Inputs ThemeConfig
} from "./SvgHandler/ColoredSvgGenerator"; } from "./SvgHandler/ColoredSvgGenerator";
import { Frames, PixelDiffRate } from "./types"; import { Frames, PixelDiffRate } from "./types";
import { getFrameName } from "./utils/getFrameName"; import { getFrameName } from "./utils/getFrameName";
@ -22,10 +22,34 @@ const pixelDiffRate: PixelDiffRate = {
}; };
export class BitmapsGenerator { export class BitmapsGenerator {
private static: Cursors; private readonly staticCurs: Cursors;
private animated: Cursors; private readonly animatedCurs: Cursors;
private spinner: Ora; private spinner: Ora;
/**
*
* @param source `BitmapsGenerator` Class's object arguments.
*
* @param themeName name of the bitmaps directory.
*
* @param bitmapsDir `absolute` or `relative` path, Where cursors `.png` files generated.
*/
constructor(
private readonly source: ThemeConfig,
private readonly themeName: string,
private readonly bitmapsDir: string
) {
this.createDir(this.bitmapsDir);
this.spinner = ora();
this.spinner.text = ` Preparing ${this.themeName} cursor theme colors...`;
this.spinner.start();
const themeSvgs = new ColoredSvgGenerator(this.source);
this.staticCurs = themeSvgs.getAnimatedCursors();
this.animatedCurs = themeSvgs.getAnimatedCursors();
}
/** /**
* *
* Create directory if it doesn't exists. * Create directory if it doesn't exists.
@ -40,30 +64,6 @@ export class BitmapsGenerator {
} }
} }
/**
*
* @param inputs `BitmapsGenerator` Class's object arguments.
*
* @param themeName name of the bitmaps directory.
*
* @param bitmapsDir `absolute` or `relative` path, Where cursors `.png` files generated.
*/
constructor(
private inputs: Inputs,
private themeName: string,
private bitmapsDir: string
) {
this.createDir(this.bitmapsDir);
this.spinner = ora();
this.spinner.text = ` Preparing ${this.themeName} Color Schema...`;
this.spinner.start();
const svgs = new ColoredSvgGenerator(this.inputs);
this.static = svgs.getColoredAnimatedCursors();
this.animated = svgs.getColoredAnimatedCursors();
}
/** /**
* *
* @param browser `puppeteer` browser instance. * @param browser `puppeteer` browser instance.
@ -103,10 +103,10 @@ export class BitmapsGenerator {
* *
* @param browser `puppeteer` browser instance. * @param browser `puppeteer` browser instance.
*/ */
private async generateStaticCursors(browser: Browser) { private async renderStaticCurs(browser: Browser) {
for (let [cursor] of Object.entries(this.static)) { for (let [cursor] of Object.entries(this.staticCurs)) {
// Generating HTML Template // Generating HTML Template
const { content } = this.static[`${cursor}`]; const { content } = this.staticCurs[`${cursor}`];
// Configs // Configs
const file = `${cursor}.png`; const file = `${cursor}.png`;
@ -114,7 +114,7 @@ export class BitmapsGenerator {
const svgElement = await this.getSvgElement(browser, content); const svgElement = await this.getSvgElement(browser, content);
// Render // Render
this.spinner.text = ` Bitmaping ${chalk.greenBright(file)}`; this.spinner.text = ` Rendering ${chalk.greenBright(file)}`;
await svgElement.screenshot({ omitBackground: true, path: out }); await svgElement.screenshot({ omitBackground: true, path: out });
} }
@ -127,10 +127,10 @@ export class BitmapsGenerator {
* *
* @param browser `puppeteer` browser instance. * @param browser `puppeteer` browser instance.
*/ */
private async generateAnimatedCursors(browser: Browser) { private async renderAnimatedCurs(browser: Browser) {
for (let [cursor] of Object.entries(this.animated)) { for (let [cursor] of Object.entries(this.animatedCurs)) {
// Generating HTML Template // Generating HTML Template
const { content } = this.static[`${cursor}`]; const { content } = this.staticCurs[`${cursor}`];
const svgElement = this.getSvgElement(browser, content); const svgElement = this.getSvgElement(browser, content);
// Config // Config
@ -140,7 +140,7 @@ export class BitmapsGenerator {
const firstFrame = getFrameName(index, cursor); const firstFrame = getFrameName(index, cursor);
// 1st Frame // 1st Frame
this.spinner.text = ` Bitmaping ${chalk.greenBright(firstFrame)}`; this.spinner.text = ` Rendering ${chalk.greenBright(firstFrame)}`;
frames[firstFrame] = { frames[firstFrame] = {
buffer: await (await svgElement).screenshot({ buffer: await (await svgElement).screenshot({
omitBackground: true, omitBackground: true,
@ -152,7 +152,7 @@ export class BitmapsGenerator {
index++; index++;
while (!breakRendering) { while (!breakRendering) {
const key = getFrameName(index, cursor); const key = getFrameName(index, cursor);
this.spinner.text = ` Bitmaping ${chalk.greenBright(key)}`; this.spinner.text = ` Rendering ${chalk.greenBright(key)}`;
const newFrame = await (await svgElement).screenshot({ const newFrame = await (await svgElement).screenshot({
omitBackground: true, omitBackground: true,
@ -188,8 +188,8 @@ export class BitmapsGenerator {
try { try {
this.spinner.color = "yellow"; this.spinner.color = "yellow";
await this.generateStaticCursors(browser); await this.renderStaticCurs(browser);
await this.generateAnimatedCursors(browser); await this.renderAnimatedCurs(browser);
this.spinner.text = ` ${chalk.blueBright( this.spinner.text = ` ${chalk.blueBright(
this.themeName this.themeName

View file

@ -3,7 +3,7 @@ import path from "path";
import SvgDirectoryParser from "./SvgDirectoryParser"; import SvgDirectoryParser from "./SvgDirectoryParser";
import { Colors } from "../types"; import { Colors } from "../types";
export type Inputs = { svgDir: string; colors: Colors }; export type ThemeConfig = { svgDir: string; colors: Colors };
export interface Cursors { export interface Cursors {
[cursorName: string]: { [cursorName: string]: {
@ -20,8 +20,8 @@ export const keyColors: Colors = {
}; };
export default class ColoredSvgGenerator { export default class ColoredSvgGenerator {
private staticCursors: string[]; private staticCurs: string[];
private animatedCursors: string[]; private animatedCurs: string[];
/** /**
* *
@ -35,27 +35,27 @@ export default class ColoredSvgGenerator {
* *
* @param colors `Colors` for static cursors. * @param colors `Colors` for static cursors.
*/ */
constructor(private inputs: Inputs) { constructor(private readonly themeConfig: ThemeConfig) {
const svgParser = new SvgDirectoryParser(this.inputs.svgDir); const svgParser = new SvgDirectoryParser(this.themeConfig.svgDir);
this.animatedCursors = svgParser.getAnimatedCursors(); this.animatedCurs = svgParser.getAnimatedCursors();
this.staticCursors = svgParser.getStaticCursors(); this.staticCurs = svgParser.getStaticCursors();
} }
/** /**
* *
* Generate `static` cursors .svg file according to `Theme Colors`. * Generate `static` cursors .svg file according to `Theme Colors`.
*/ */
public getColoredStaticCursors(): Cursors { public getStaticCursors(): Cursors {
const cursors: Cursors = {}; const cursors: Cursors = {};
this.staticCursors.map((cursor: string) => { this.staticCurs.map((cursor: string) => {
let content = fs.readFileSync(cursor, "utf-8").toString(); let content = fs.readFileSync(cursor, "utf-8").toString();
content = content content = content
.replace(new RegExp(keyColors.base, "g"), this.inputs.colors.base) .replace(new RegExp(keyColors.base, "g"), this.themeConfig.colors.base)
.replace( .replace(
new RegExp(keyColors.outline, "g"), new RegExp(keyColors.outline, "g"),
this.inputs.colors.outline this.themeConfig.colors.outline
); );
cursors[`${path.basename(cursor, ".svg")}`] = { content }; cursors[`${path.basename(cursor, ".svg")}`] = { content };
@ -68,26 +68,26 @@ export default class ColoredSvgGenerator {
* *
* Generate `animated` cursors .svg file according to `Theme Colors`. * Generate `animated` cursors .svg file according to `Theme Colors`.
*/ */
public getColoredAnimatedCursors(): Cursors { public getAnimatedCursors(): Cursors {
const cursors: Cursors = {}; const cursors: Cursors = {};
this.animatedCursors.map((cursor: string) => { this.animatedCurs.map((cursor: string) => {
let content = fs.readFileSync(cursor, "utf-8").toString(); let content = fs.readFileSync(cursor, "utf-8").toString();
content = content content = content
.replace(new RegExp(keyColors.base, "g"), this.inputs.colors.base) .replace(new RegExp(keyColors.base, "g"), this.themeConfig.colors.base)
.replace( .replace(
new RegExp(keyColors.outline, "g"), new RegExp(keyColors.outline, "g"),
this.inputs.colors.outline this.themeConfig.colors.outline
); );
try { try {
// === trying to replace `watch` color === // === trying to replace `watch` color ===
if (!this.inputs.colors.watch?.background) { if (!this.themeConfig.colors.watch?.background) {
throw new Error(""); throw new Error("");
} }
const { background: b } = this.inputs.colors.watch; const { background: b } = this.themeConfig.colors.watch;
content = content.replace( content = content.replace(
new RegExp(keyColors.watch!.background, "g"), new RegExp(keyColors.watch!.background, "g"),
b b
@ -97,7 +97,7 @@ export default class ColoredSvgGenerator {
content = content.replace( content = content.replace(
new RegExp(keyColors.watch!.background, "g"), new RegExp(keyColors.watch!.background, "g"),
this.inputs.colors.base this.themeConfig.colors.base
); );
} }