Optimize JS

CanvasCycleVDP/PercentColumn.js

@@ -1,71 +1,60 @@
-function PercentColumn(x, y, w, h) {
+function PercentColumn(x = 0, y = 0, w = 0, h = 0) {
 	// Основной прямоугольник
 	var rAll = new Rectangle(x, y, w, h);
 	// Прямоугольник процентов
 	var rPerc = new Rectangle();
-	/*Проценты поднимаются снизу вверх (false)
+	// Проценты поднимаются снизу вверх (false) или слева направо (true)
-	 *или слева направо (true)*/
 	var rotate = false;
 	// Проценты статуса
 	var percent = 0;
 	// Цвет
 	var color = '#000';
 
-	/*Функции для работы с координатами
+	// Геттеры и сеттеры для координат и размеров
-	* основного прямоугольника */
+	this.X = (val) => (val === undefined ? rAll.X() : rAll.X(val));
-	this.X = function (val) {
+	this.Y = (val) => (val === undefined ? rAll.Y() : rAll.Y(val));
-		if (val === undefined) return rAll.X();
+	this.W = (val) => (val === undefined ? rAll.W() : rAll.W(val));
-		rAll.X(val);
+	this.H = (val) => (val === undefined ? rAll.H() : rAll.H(val));
-	};
+
-	this.Y = function (val) {
-		if (val === undefined) return rAll.Y();
-		rAll.Y(val);
-	};
-	this.W = function (val) {
-		if (val === undefined) return rAll.W();
-		rAll.W(val);
-	};
-	this.H = function (val) {
-		if (val === undefined) return rAll.H();
-		rAll.H(val);
-	};
 	// Установка процента от 0 до 100
-	this.Percent = function (val) {
+	this.Percent = (val) => {
 		if (val === undefined) return percent;
-		var v = parseFloat(val);
+		percent = Math.max(0, Math.min(100, parseFloat(val) || 0));
-		v = (isNaN(v) || v < 0) ? 0 : (v > 100) ? 100 : v;
-		percent = v;
 	};
+	
 	//Установка цвета в формате #****** или #***
-	this.Color = function (val) {
+	this.Color = (val) => {
 		if (val === undefined) return color;
-		var c = val.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+		color = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(val) ? val : '#000000';
-		color = (c === null) ? '#000000' : c[0];
 	};
+	
 	//Функция изменения начальной координаты и размеров прямоугольника
-	this.RectParam = function (_x, _y, _w, _h) {
+	this.RectParam = (_x, _y, _w, _h) => {
 		rAll.RectParam(_x, _y, _w, _h);
 	};
+	
 	//Функция изменения прямоугольника по другому прямоугольнику
-	this.Rect = function (val) {
+	this.Rect = (val) => {
 		if (val === undefined) return rAll;
 		rAll.Rect(val);
 	};
+	
 	//Изменение направления отрисовки процентов
-	this.Rotate = function (val) {
+	this.Rotate = (val) => {
 		if (val === undefined) return rotate;
-		rotate = (typeof val === 'boolean') ? val : false;
+		rotate = typeof val === 'boolean' ? val : false;
 	};
 	//Перерасчитываем элементы
 	function Rebuild() {
 		var size = ((!rotate) ? rAll.H() : rAll.W()) * percent / 100;
 		rPerc.RectParam(
 			rAll.X(),
-			(rotate) ? rAll.Y() : rAll.Y() + rAll.H() - size,
+			rotate ? rAll.Y() : rAll.Y() + rAll.H() - size,
-			(!rotate) ? rAll.W() : size,
+			rotate ? size : rAll.W(),
-			(rotate) ? rAll.H() : size
+			rotate ? rAll.H() : size
 		);
 	}
+	
 	//Рисуем проценты
 	this.Print = function (ctx) {
 		Rebuild();
@@ -74,6 +63,7 @@
 		ctx.fillRect(rPerc.X(), rPerc.Y(), rPerc.W(), rPerc.H());
 		ctx.strokeRect(rAll.X(), rAll.Y(), rAll.W(), rAll.H());
 	};
+	
 	//Рисуем текст
 	this.PrintText = function (ctx) {
 		ctx.save();
@@ -82,6 +72,7 @@
 		ctx.fillStyle = '#888';
 		ctx.textAlign = 'center';
 		ctx.textBaseline = 'middle';
+		
 		if (!rotate)
 			ctx.font = (rAll.W() - 10 < 0 ? 0 : rAll.W() - 10) + 'px Arial';
 		else

CanvasCycleVDP/Rectangle.js

@@ -1,46 +1,45 @@
 // Объявление класса прямоугольника
-function Rectangle(x, y, w, h) {
+function Rectangle(x = 0, y = 0, w = 0, h = 0) {
-	/*Функции для работы с координатами
+	// Функция для проверки и возврата корректного значения
-	 * основного прямоугольника */
 	function chkVal(val) {
-		var a = parseFloat(val);
+		return Math.max(0, parseFloat(val) || 0);
-		return (isNaN(a) || a < 0) ? 0 : a;
+	};
-	}
+	
+	// Инициализация свойств
+	let _x = chkVal(x);
+	let _y = chkVal(y);
+	let _w = chkVal(w);
+	let _h = chkVal(h);
+	
+	// Геттеры и сеттеры
 	this.X = function (val) {
-		if (val === undefined) return x;
+		if (val === undefined) return _x;
-		x = chkVal(val);
+		_x = chkVal(val);
 	};
 	this.Y = function (val) {
-		if (val === undefined) return y;
+		if (val === undefined) return _y;
-		y = chkVal(val);
+		_y = chkVal(val);
 	};
 	this.W = function (val) {
-		if (val === undefined) return w;
+		if (val === undefined) return _w;
-		w = chkVal(val);
+		_w = chkVal(val);
 	};
 	this.H = function (val) {
-		if (val === undefined) return h;
+		if (val === undefined) return _h;
-		h = chkVal(val);
+		_h = chkVal(val);
 	};
-	//Функция изменения начальной координаты и размеров прямоугольника
+	
+	// Функция изменения параметров прямоугольника
 	this.RectParam = function (_x, _y, _w, _h) {
 		this.X(_x);
 		this.Y(_y);
 		this.W(_w);
 		this.H(_h);
 	};
+	
 	//Функция изменения прямоугольника по другому прямоугольнику
 	this.Rect = function (val) {
 		if (val === undefined) return this;
 		this.RectParam(val.X(), val.Y(), val.W(), val.H());
 	};
-	//Первая инициализация
-	if (x === undefined) x = 0;
-	else this.X(x);
-	if (y === undefined) y = 0;
-	else this.Y(y);
-	if (w === undefined) w = 0;
-	else this.W(w);
-	if (h === undefined) h = 0;
-	else this.H(h);
 }