From bd4c9b8e67a6df02683728a9ee50a2712f173476 Mon Sep 17 00:00:00 2001 From: "Georgy.Khatuncev" Date: Sat, 21 Sep 2024 02:28:53 +0500 Subject: [PATCH] Optimize JS --- CanvasCycleVDP/PercentColumn.js | 71 ++++++++++++++------------------- CanvasCycleVDP/Rectangle.js | 51 ++++++++++++----------- 2 files changed, 56 insertions(+), 66 deletions(-) diff --git a/CanvasCycleVDP/PercentColumn.js b/CanvasCycleVDP/PercentColumn.js index eec7bc1..e8a1412 100644 --- a/CanvasCycleVDP/PercentColumn.js +++ b/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) - *или слева направо (true)*/ + // Проценты поднимаются снизу вверх (false) или слева направо (true) var rotate = false; - //Проценты статуса + // Проценты статуса var percent = 0; - //Цвет + // Цвет var color = '#000'; - /*Функции для работы с координатами - * основного прямоугольника */ - this.X = function (val) { - if (val === undefined) return rAll.X(); - rAll.X(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.X = (val) => (val === undefined ? rAll.X() : rAll.X(val)); + this.Y = (val) => (val === undefined ? rAll.Y() : rAll.Y(val)); + this.W = (val) => (val === undefined ? rAll.W() : rAll.W(val)); + this.H = (val) => (val === undefined ? rAll.H() : rAll.H(val)); + + // Установка процента от 0 до 100 + this.Percent = (val) => { if (val === undefined) return percent; - var v = parseFloat(val); - v = (isNaN(v) || v < 0) ? 0 : (v > 100) ? 100 : v; - percent = v; + percent = Math.max(0, Math.min(100, parseFloat(val) || 0)); }; + //Установка цвета в формате #****** или #*** - 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 = (c === null) ? '#000000' : c[0]; + color = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(val) ? val : '#000000'; }; + //Функция изменения начальной координаты и размеров прямоугольника - 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.W() : size, - (rotate) ? rAll.H() : size + rotate ? rAll.Y() : rAll.Y() + rAll.H() - size, + rotate ? size : rAll.W(), + 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 diff --git a/CanvasCycleVDP/Rectangle.js b/CanvasCycleVDP/Rectangle.js index c1795e5..bcd28c2 100644 --- a/CanvasCycleVDP/Rectangle.js +++ b/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 (isNaN(a) || a < 0) ? 0 : a; - } + return Math.max(0, parseFloat(val) || 0); + }; + + // Инициализация свойств + 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; - x = chkVal(val); + if (val === undefined) return _x; + _x = chkVal(val); }; this.Y = function (val) { - if (val === undefined) return y; - y = chkVal(val); + if (val === undefined) return _y; + _y = chkVal(val); }; this.W = function (val) { - if (val === undefined) return w; - w = chkVal(val); + if (val === undefined) return _w; + _w = chkVal(val); }; this.H = function (val) { - if (val === undefined) return h; - h = chkVal(val); + if (val === undefined) return _h; + _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); -} \ No newline at end of file +}