From ae4f53b42260084b16a00e3027c09bf4c2e50030 Mon Sep 17 00:00:00 2001 From: "Thibaut(Teebo)" Date: Tue, 29 Oct 2024 14:30:37 +0100 Subject: [PATCH 1/3] eslint recommended --- eslint.config.mjs | 3 ++ src/filters/HSL.ts | 7 ++- src/filters/Invert.ts | 7 ++- src/filters/Kaleidoscope.ts | 94 ++++++++++++++----------------------- src/filters/Mask.ts | 6 +-- src/filters/Noise.ts | 2 +- src/filters/Posterize.ts | 11 ++--- src/filters/RGB.ts | 11 ++--- src/filters/Sepia.ts | 16 +++---- 9 files changed, 63 insertions(+), 94 deletions(-) create mode 100644 eslint.config.mjs diff --git a/eslint.config.mjs b/eslint.config.mjs new file mode 100644 index 00000000..c6231ea1 --- /dev/null +++ b/eslint.config.mjs @@ -0,0 +1,3 @@ +import tseslint from 'typescript-eslint'; + +export default tseslint.config(...tseslint.configs.recommended); diff --git a/src/filters/HSL.ts b/src/filters/HSL.ts index 1f1b4d9a..47763ad2 100644 --- a/src/filters/HSL.ts +++ b/src/filters/HSL.ts @@ -59,13 +59,12 @@ Factory.addGetterSetter( */ export const HSL: Filter = function (imageData) { - let data = imageData.data, + const data = imageData.data, nPixels = data.length, v = 1, s = Math.pow(2, this.saturation()), h = Math.abs(this.hue() + 360) % 360, - l = this.luminance() * 127, - i; + l = this.luminance() * 127; // Basis for the technique used: // http://beesbuzz.biz/code/hsv_color_transforms.php @@ -94,7 +93,7 @@ export const HSL: Filter = function (imageData) { let r: number, g: number, b: number, a: number; - for (i = 0; i < nPixels; i += 4) { + for (let i = 0; i < nPixels; i += 4) { r = data[i + 0]; g = data[i + 1]; b = data[i + 2]; diff --git a/src/filters/Invert.ts b/src/filters/Invert.ts index a9bb259b..766c9506 100644 --- a/src/filters/Invert.ts +++ b/src/filters/Invert.ts @@ -9,11 +9,10 @@ import { Filter } from '../Node'; * node.filters([Konva.Filters.Invert]); */ export const Invert: Filter = function (imageData) { - let data = imageData.data, - len = data.length, - i; + const data = imageData.data, + len = data.length; - for (i = 0; i < len; i += 4) { + for (let i = 0; i < len; i += 4) { // red data[i] = 255 - data[i]; // green diff --git a/src/filters/Kaleidoscope.ts b/src/filters/Kaleidoscope.ts index 70336fa8..bdca220c 100644 --- a/src/filters/Kaleidoscope.ts +++ b/src/filters/Kaleidoscope.ts @@ -1,5 +1,5 @@ import { Factory } from '../Factory'; -import { Node, Filter } from '../Node'; +import { Filter, Node } from '../Node'; import { Util } from '../Util'; import { getNumberValidator } from '../Validators'; @@ -20,53 +20,41 @@ import { getNumberValidator } from '../Validators'; */ const ToPolar = function (src, dst, opt) { - let srcPixels = src.data, + const srcPixels = src.data, dstPixels = dst.data, xSize = src.width, ySize = src.height, xMid = opt.polarCenterX || xSize / 2, - yMid = opt.polarCenterY || ySize / 2, - i, - x, - y, - r = 0, - g = 0, - b = 0, - a = 0; + yMid = opt.polarCenterY || ySize / 2; // Find the largest radius - let rad, - rMax = Math.sqrt(xMid * xMid + yMid * yMid); - x = xSize - xMid; - y = ySize - yMid; - rad = Math.sqrt(x * x + y * y); + let rMax = Math.sqrt(xMid * xMid + yMid * yMid); + let x = xSize - xMid; + let y = ySize - yMid; + const rad = Math.sqrt(x * x + y * y); rMax = rad > rMax ? rad : rMax; // We'll be uisng y as the radius, and x as the angle (theta=t) - let rSize = ySize, - tSize = xSize, - radius, - theta; + const rSize = ySize, + tSize = xSize; // We want to cover all angles (0-360) and we need to convert to // radians (*PI/180) - let conversion = ((360 / tSize) * Math.PI) / 180, - sin, - cos; + const conversion = ((360 / tSize) * Math.PI) / 180; // var x1, x2, x1i, x2i, y1, y2, y1i, y2i, scale; - for (theta = 0; theta < tSize; theta += 1) { - sin = Math.sin(theta * conversion); - cos = Math.cos(theta * conversion); - for (radius = 0; radius < rSize; radius += 1) { + for (let theta = 0; theta < tSize; theta += 1) { + const sin = Math.sin(theta * conversion); + const cos = Math.cos(theta * conversion); + for (let radius = 0; radius < rSize; radius += 1) { x = Math.floor(xMid + ((rMax * radius) / rSize) * cos); y = Math.floor(yMid + ((rMax * radius) / rSize) * sin); - i = (y * xSize + x) * 4; - r = srcPixels[i + 0]; - g = srcPixels[i + 1]; - b = srcPixels[i + 2]; - a = srcPixels[i + 3]; + let i = (y * xSize + x) * 4; + const r = srcPixels[i + 0]; + const g = srcPixels[i + 1]; + const b = srcPixels[i + 2]; + const a = srcPixels[i + 3]; // Store it //i = (theta * xSize + radius) * 4; @@ -97,35 +85,23 @@ const ToPolar = function (src, dst, opt) { */ const FromPolar = function (src, dst, opt) { - let srcPixels = src.data, + const srcPixels = src.data, dstPixels = dst.data, xSize = src.width, ySize = src.height, xMid = opt.polarCenterX || xSize / 2, - yMid = opt.polarCenterY || ySize / 2, - i, - x, - y, - dx, - dy, - r = 0, - g = 0, - b = 0, - a = 0; + yMid = opt.polarCenterY || ySize / 2; // Find the largest radius - let rad, - rMax = Math.sqrt(xMid * xMid + yMid * yMid); - x = xSize - xMid; - y = ySize - yMid; - rad = Math.sqrt(x * x + y * y); + let rMax = Math.sqrt(xMid * xMid + yMid * yMid); + let x = xSize - xMid; + let y = ySize - yMid; + const rad = Math.sqrt(x * x + y * y); rMax = rad > rMax ? rad : rMax; // We'll be uisng x as the radius, and y as the angle (theta=t) - let rSize = ySize, + const rSize = ySize, tSize = xSize, - radius, - theta, phaseShift = opt.polarRotation || 0; // We need to convert to degrees and we need to make sure @@ -137,18 +113,18 @@ const FromPolar = function (src, dst, opt) { for (x = 0; x < xSize; x += 1) { for (y = 0; y < ySize; y += 1) { - dx = x - xMid; - dy = y - yMid; - radius = (Math.sqrt(dx * dx + dy * dy) * rSize) / rMax; - theta = ((Math.atan2(dy, dx) * 180) / Math.PI + 360 + phaseShift) % 360; + const dx = x - xMid; + const dy = y - yMid; + const radius = (Math.sqrt(dx * dx + dy * dy) * rSize) / rMax; + let theta = ((Math.atan2(dy, dx) * 180) / Math.PI + 360 + phaseShift) % 360; theta = (theta * tSize) / 360; x1 = Math.floor(theta); y1 = Math.floor(radius); - i = (y1 * xSize + x1) * 4; - r = srcPixels[i + 0]; - g = srcPixels[i + 1]; - b = srcPixels[i + 2]; - a = srcPixels[i + 3]; + let i = (y1 * xSize + x1) * 4; + const r = srcPixels[i + 0]; + const g = srcPixels[i + 1]; + const b = srcPixels[i + 2]; + const a = srcPixels[i + 3]; // Store it i = (y * xSize + x) * 4; diff --git a/src/filters/Mask.ts b/src/filters/Mask.ts index 81a0bc44..0668c0d5 100644 --- a/src/filters/Mask.ts +++ b/src/filters/Mask.ts @@ -1,5 +1,5 @@ import { Factory } from '../Factory'; -import { Node, Filter } from '../Node'; +import { Filter, Node } from '../Node'; import { getNumberValidator } from '../Validators'; function pixelAt(idata, x, y) { @@ -181,8 +181,8 @@ function smoothEdgeMask(mask, sw, sh) { */ export const Mask: Filter = function (imageData) { // Detect pixels close to the background color - let threshold = this.threshold(), - mask = backgroundMask(imageData, threshold); + const threshold = this.threshold(); + let mask = backgroundMask(imageData, threshold); if (mask) { // Erode mask = erodeMask(mask, imageData.width, imageData.height); diff --git a/src/filters/Noise.ts b/src/filters/Noise.ts index 39fd3ea1..77a9d710 100644 --- a/src/filters/Noise.ts +++ b/src/filters/Noise.ts @@ -1,5 +1,5 @@ import { Factory } from '../Factory'; -import { Node, Filter } from '../Node'; +import { Filter, Node } from '../Node'; import { getNumberValidator } from '../Validators'; /** diff --git a/src/filters/Posterize.ts b/src/filters/Posterize.ts index 8c768e19..6fb89b91 100644 --- a/src/filters/Posterize.ts +++ b/src/filters/Posterize.ts @@ -1,6 +1,7 @@ import { Factory } from '../Factory'; -import { Node, Filter } from '../Node'; +import { Filter, Node } from '../Node'; import { getNumberValidator } from '../Validators'; + /** * Posterize Filter. Adjusts the channels so that there are no more * than n different values for that channel. This is also applied @@ -15,16 +16,14 @@ import { getNumberValidator } from '../Validators'; * node.filters([Konva.Filters.Posterize]); * node.levels(0.8); // between 0 and 1 */ - export const Posterize: Filter = function (imageData) { // level must be between 1 and 255 - let levels = Math.round(this.levels() * 254) + 1, + const levels = Math.round(this.levels() * 254) + 1, data = imageData.data, len = data.length, - scale = 255 / levels, - i; + scale = 255 / levels; - for (i = 0; i < len; i += 1) { + for (let i = 0; i < len; i += 1) { data[i] = Math.floor(data[i] / scale) * scale; } }; diff --git a/src/filters/RGB.ts b/src/filters/RGB.ts index 8bdca660..e5ea879c 100644 --- a/src/filters/RGB.ts +++ b/src/filters/RGB.ts @@ -15,18 +15,15 @@ import { RGBComponent } from '../Validators'; * node.blue(120); * node.green(200); */ - export const RGB: Filter = function (imageData) { - let data = imageData.data, + const data = imageData.data, nPixels = data.length, red = this.red(), green = this.green(), - blue = this.blue(), - i, - brightness; + blue = this.blue(); - for (i = 0; i < nPixels; i += 4) { - brightness = + for (let i = 0; i < nPixels; i += 4) { + const brightness = (0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2]) / 255; data[i] = brightness * red; // r data[i + 1] = brightness * green; // g diff --git a/src/filters/Sepia.ts b/src/filters/Sepia.ts index 2187bd0e..3719ffe3 100644 --- a/src/filters/Sepia.ts +++ b/src/filters/Sepia.ts @@ -12,17 +12,13 @@ import { Filter } from '../Node'; * node.filters([Konva.Filters.Sepia]); */ export const Sepia: Filter = function (imageData) { - let data = imageData.data, - nPixels = data.length, - i, - r, - g, - b; + const data = imageData.data, + nPixels = data.length; - for (i = 0; i < nPixels; i += 4) { - r = data[i + 0]; - g = data[i + 1]; - b = data[i + 2]; + for (let i = 0; i < nPixels; i += 4) { + const r = data[i + 0]; + const g = data[i + 1]; + const b = data[i + 2]; data[i + 0] = Math.min(255, r * 0.393 + g * 0.769 + b * 0.189); data[i + 1] = Math.min(255, r * 0.349 + g * 0.686 + b * 0.168); From 338696c691b532346ed690a33c172f7714c11089 Mon Sep 17 00:00:00 2001 From: "Thibaut(Teebo)" Date: Tue, 29 Oct 2024 14:46:32 +0100 Subject: [PATCH 2/3] eslint recommended --- src/Stage.ts | 18 ++++++++---------- src/Tween.ts | 40 ++++++++++++++++++---------------------- 2 files changed, 26 insertions(+), 32 deletions(-) diff --git a/src/Stage.ts b/src/Stage.ts index 3c312245..73f96838 100644 --- a/src/Stage.ts +++ b/src/Stage.ts @@ -249,11 +249,10 @@ export class Stage extends Container { * @name Konva.Stage#clear */ clear() { - let layers = this.children, - len = layers.length, - n; + const layers = this.children, + len = layers.length; - for (n = 0; n < len; n++) { + for (let n = 0; n < len; n++) { layers[n].clear(); } return this; @@ -367,12 +366,11 @@ export class Stage extends Container { if (!pos) { return null; } - let layers = this.children, + const layers = this.children, len = layers.length, - end = len - 1, - n; + end = len - 1; - for (n = end; n >= 0; n--) { + for (let n = end; n >= 0; n--) { const shape = layers[n].getIntersection(pos); if (shape) { return shape; @@ -820,8 +818,8 @@ export class Stage extends Container { * }); */ setPointersPositions(evt) { - let contentPosition = this._getContentPosition(), - x: number | null = null, + const contentPosition = this._getContentPosition(); + let x: number | null = null, y: number | null = null; evt = evt ? evt : window.event; diff --git a/src/Tween.ts b/src/Tween.ts index d29d6f15..bb2d8278 100644 --- a/src/Tween.ts +++ b/src/Tween.ts @@ -4,7 +4,7 @@ import { Node, NodeConfig } from './Node'; import { Konva } from './Global'; import { Line } from './shapes/Line'; -let blacklist = { +const blacklist = { node: 1, duration: 1, easing: 1, @@ -14,8 +14,8 @@ let blacklist = { PAUSED = 1, PLAYING = 2, REVERSING = 3, - idCounter = 0, colorAttrs = ['fill', 'stroke', 'shadowColor']; +let idCounter = 0; class TweenEngine { prop: string; @@ -195,12 +195,12 @@ export class Tween { onUpdate: Function | undefined; constructor(config: TweenConfig) { - let that = this, + const that = this, node = config.node as any, nodeId = node._id, - duration, easing = config.easing || Easings.Linear, - yoyo = !!config.yoyo, + yoyo = !!config.yoyo; + let duration, key; if (typeof config.duration === 'undefined') { @@ -266,26 +266,23 @@ export class Tween { this.onUpdate = config.onUpdate; } _addAttr(key, end) { - let node = this.node, - nodeId = node._id, - start, - diff, - tweenId, - n, + const node = this.node, + nodeId = node._id; + let diff, len, trueEnd, trueStart, endRGBA; // remove conflict from tween map if it exists - tweenId = Tween.tweens[nodeId][key]; + const tweenId = Tween.tweens[nodeId][key]; if (tweenId) { delete Tween.attrs[nodeId][tweenId][key]; } // add to tween map - start = node.getAttr(key); + let start = node.getAttr(key); if (Util._isArray(end)) { diff = []; @@ -310,7 +307,7 @@ export class Tween { } if (key.indexOf('fill') === 0) { - for (n = 0; n < len; n++) { + for (let n = 0; n < len; n++) { if (n % 2 === 0) { diff.push(end[n] - start[n]); } else { @@ -326,7 +323,7 @@ export class Tween { } } } else { - for (n = 0; n < len; n++) { + for (let n = 0; n < len; n++) { diff.push(end[n] - start[n]); } } @@ -353,9 +350,9 @@ export class Tween { Tween.tweens[nodeId][key] = this._id; } _tweenFunc(i) { - let node = this.node, - attrs = Tween.attrs[node._id][this._id], - key, + const node = this.node, + attrs = Tween.attrs[node._id][this._id]; + let key, attr, start, diff, @@ -525,14 +522,13 @@ export class Tween { * @name Konva.Tween#destroy */ destroy() { - let nodeId = this.node._id, + const nodeId = this.node._id, thisId = this._id, - attrs = Tween.tweens[nodeId], - key; + attrs = Tween.tweens[nodeId]; this.pause(); - for (key in attrs) { + for (const key in attrs) { delete Tween.tweens[nodeId][key]; } From 3ba489fc096ea54ebbaaf887ba1a488f98e52708 Mon Sep 17 00:00:00 2001 From: "Thibaut(Teebo)" Date: Tue, 29 Oct 2024 14:48:29 +0100 Subject: [PATCH 3/3] eslint recommended --- src/Util.ts | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/src/Util.ts b/src/Util.ts index 8dff2d51..ae5075a5 100644 --- a/src/Util.ts +++ b/src/Util.ts @@ -260,7 +260,7 @@ export class Transform { } // CONSTANTS -let OBJECT_ARRAY = '[object Array]', +const OBJECT_ARRAY = '[object Array]', OBJECT_NUMBER = '[object Number]', OBJECT_STRING = '[object String]', OBJECT_BOOLEAN = '[object Boolean]', @@ -423,8 +423,8 @@ let OBJECT_ARRAY = '[object Array]', yellow: [255, 255, 0], yellowgreen: [154, 205, 5], }, - RGB_REGEX = /rgb\((\d{1,3}),(\d{1,3}),(\d{1,3})\)/, - animQueue: Array = []; + RGB_REGEX = /rgb\((\d{1,3}),(\d{1,3}),(\d{1,3})\)/; + let animQueue: Array = []; const req = (typeof requestAnimationFrame !== 'undefined' && requestAnimationFrame) || @@ -904,21 +904,20 @@ export const Util = { return pc; }, _prepareArrayForTween(startArray, endArray, isClosed) { - let n, - start: Vector2d[] = [], + const start: Vector2d[] = [], end: Vector2d[] = []; if (startArray.length > endArray.length) { const temp = endArray; endArray = startArray; startArray = temp; } - for (n = 0; n < startArray.length; n += 2) { + for (let n = 0; n < startArray.length; n += 2) { start.push({ x: startArray[n], y: startArray[n + 1], }); } - for (n = 0; n < endArray.length; n += 2) { + for (let n = 0; n < endArray.length; n += 2) { end.push({ x: endArray[n], y: endArray[n + 1],