Eslint recommended

eslint.config.mjs

@@ -0,0 +1,3 @@
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(...tseslint.configs.recommended);

src/Stage.ts

@@ -249,11 +249,10 @@ export class Stage extends Container<Layer> {
    * @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<Layer> {
     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<Layer> {
    * });
    */
   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;
 

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];
     }
 

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<Function> = [];
+  RGB_REGEX = /rgb\((\d{1,3}),(\d{1,3}),(\d{1,3})\)/;
+  let animQueue: Array<Function> = [];
 
 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],

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];

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

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;