From 68233dde85bdd8cc72585d9c618b167fad6fe996 Mon Sep 17 00:00:00 2001 From: Nathan Kunicki Date: Sat, 18 Nov 2017 00:59:21 +0000 Subject: [PATCH] Added TypeScript linter --- package-lock.json | 293 ++++++++++++++++++++++++++++++++++++++++++ package.json | 4 +- src/bittmappeditor.ts | 79 +++++++----- src/main.ts | 14 +- tslint.json | 15 +++ 5 files changed, 362 insertions(+), 43 deletions(-) create mode 100644 tslint.json diff --git a/package-lock.json b/package-lock.json index 58eaba6..0d70663 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4,11 +4,304 @@ "lockfileVersion": 1, "requires": true, "dependencies": { + "ansi-regex": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", + "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", + "dev": true + }, + "ansi-styles": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz", + "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=", + "dev": true + }, + "babel-code-frame": { + "version": "6.26.0", + "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz", + "integrity": "sha1-Y/1D99weO7fONZR9uP42mj9Yx0s=", + "dev": true, + "requires": { + "chalk": "1.1.3", + "esutils": "2.0.2", + "js-tokens": "3.0.2" + }, + "dependencies": { + "chalk": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", + "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", + "dev": true, + "requires": { + "ansi-styles": "2.2.1", + "escape-string-regexp": "1.0.5", + "has-ansi": "2.0.0", + "strip-ansi": "3.0.1", + "supports-color": "2.0.0" + } + } + } + }, + "balanced-match": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", + "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", + "dev": true + }, + "brace-expansion": { + "version": "1.1.8", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.8.tgz", + "integrity": "sha1-wHshHHyVLsH479Uad+8NHTmQopI=", + "dev": true, + "requires": { + "balanced-match": "1.0.0", + "concat-map": "0.0.1" + } + }, + "builtin-modules": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-1.1.1.tgz", + "integrity": "sha1-Jw8HbFpywC9bZaR9+Uxf46J4iS8=", + "dev": true + }, + "chalk": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.3.0.tgz", + "integrity": "sha512-Az5zJR2CBujap2rqXGaJKaPHyJ0IrUimvYNX+ncCy8PJP4ltOGTrHUIo097ZaL2zMeKYpiCdqDvS6zdrTFok3Q==", + "dev": true, + "requires": { + "ansi-styles": "3.2.0", + "escape-string-regexp": "1.0.5", + "supports-color": "4.5.0" + }, + "dependencies": { + "ansi-styles": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.0.tgz", + "integrity": "sha512-NnSOmMEYtVR2JVMIGTzynRkkaxtiq1xnFBcdQD/DnNCYPoEPsVJhM98BDyaoNOQIi7p4okdi3E27eN7GQbsUug==", + "dev": true, + "requires": { + "color-convert": "1.9.1" + } + }, + "supports-color": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.5.0.tgz", + "integrity": "sha1-vnoN5ITexcXN34s9WRJQRJEvY1s=", + "dev": true, + "requires": { + "has-flag": "2.0.0" + } + } + } + }, + "color-convert": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.1.tgz", + "integrity": "sha512-mjGanIiwQJskCC18rPR6OmrZ6fm2Lc7PeGFYwCmy5J34wC6F1PzdGL6xeMfmgicfYcNLGuVFA3WzXtIDCQSZxQ==", + "dev": true, + "requires": { + "color-name": "1.1.3" + } + }, + "color-name": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", + "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", + "dev": true + }, + "commander": { + "version": "2.11.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.11.0.tgz", + "integrity": "sha512-b0553uYA5YAEGgyYIGYROzKQ7X5RAqedkfjiZxwi0kL1g3bOaBNNZfYkzt/CL0umgD5wc9Jec2FbB98CjkMRvQ==", + "dev": true + }, + "concat-map": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", + "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", + "dev": true + }, + "diff": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/diff/-/diff-3.4.0.tgz", + "integrity": "sha512-QpVuMTEoJMF7cKzi6bvWhRulU1fZqZnvyVQgNhPaxxuTYwyjn/j1v9falseQ/uXWwPnO56RBfwtg4h/EQXmucA==", + "dev": true + }, + "escape-string-regexp": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", + "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=", + "dev": true + }, + "esutils": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.2.tgz", + "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=", + "dev": true + }, + "fs.realpath": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", + "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=", + "dev": true + }, + "glob": { + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz", + "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==", + "dev": true, + "requires": { + "fs.realpath": "1.0.0", + "inflight": "1.0.6", + "inherits": "2.0.3", + "minimatch": "3.0.4", + "once": "1.4.0", + "path-is-absolute": "1.0.1" + } + }, + "has-ansi": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz", + "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=", + "dev": true, + "requires": { + "ansi-regex": "2.1.1" + } + }, + "has-flag": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-2.0.0.tgz", + "integrity": "sha1-6CB68cx7MNRGzHC3NLXovhj4jVE=", + "dev": true + }, + "inflight": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", + "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=", + "dev": true, + "requires": { + "once": "1.4.0", + "wrappy": "1.0.2" + } + }, + "inherits": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", + "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", + "dev": true + }, + "js-tokens": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz", + "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=", + "dev": true + }, + "minimatch": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", + "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", + "dev": true, + "requires": { + "brace-expansion": "1.1.8" + } + }, + "once": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", + "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", + "dev": true, + "requires": { + "wrappy": "1.0.2" + } + }, + "path-is-absolute": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", + "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=", + "dev": true + }, + "path-parse": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.5.tgz", + "integrity": "sha1-PBrfhx6pzWyUMbbqK9dKD/BVxME=", + "dev": true + }, + "resolve": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.5.0.tgz", + "integrity": "sha512-hgoSGrc3pjzAPHNBg+KnFcK2HwlHTs/YrAGUr6qgTVUZmXv1UEXXl0bZNBKMA9fud6lRYFdPGz0xXxycPzmmiw==", + "dev": true, + "requires": { + "path-parse": "1.0.5" + } + }, + "semver": { + "version": "5.4.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.4.1.tgz", + "integrity": "sha512-WfG/X9+oATh81XtllIo/I8gOiY9EXRdv1cQdyykeXK17YcUW3EXUAi2To4pcH6nZtJPr7ZOpM5OMyWJZm+8Rsg==", + "dev": true + }, + "strip-ansi": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", + "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", + "dev": true, + "requires": { + "ansi-regex": "2.1.1" + } + }, + "supports-color": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", + "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", + "dev": true + }, + "tslib": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.8.0.tgz", + "integrity": "sha512-ymKWWZJST0/CkgduC2qkzjMOWr4bouhuURNXCn/inEX0L57BnRG6FhX76o7FOnsjHazCjfU2LKeSrlS2sIKQJg==", + "dev": true + }, + "tslint": { + "version": "5.8.0", + "resolved": "https://registry.npmjs.org/tslint/-/tslint-5.8.0.tgz", + "integrity": "sha1-H0mtWy53x2w69N3K5VKuTjYS6xM=", + "dev": true, + "requires": { + "babel-code-frame": "6.26.0", + "builtin-modules": "1.1.1", + "chalk": "2.3.0", + "commander": "2.11.0", + "diff": "3.4.0", + "glob": "7.1.2", + "minimatch": "3.0.4", + "resolve": "1.5.0", + "semver": "5.4.1", + "tslib": "1.8.0", + "tsutils": "2.12.2" + } + }, + "tsutils": { + "version": "2.12.2", + "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-2.12.2.tgz", + "integrity": "sha1-rVikhl0X7D3bZjG2ylO+FKVlb/M=", + "dev": true, + "requires": { + "tslib": "1.8.0" + } + }, "typescript": { "version": "2.6.1", "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.6.1.tgz", "integrity": "sha1-7znN6ierrAtQAkLWcmq5DgyEZjE=", "dev": true + }, + "wrappy": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", + "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", + "dev": true } } } diff --git a/package.json b/package.json index f477c13..9e59f62 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,8 @@ "version": "0.0.1", "description": "BittMapp - A monochrome bitmap editor", "scripts": { - "build": "tsc" + "build": "tsc", + "lint": "tslint -c tslint.json \"src/**/*.ts\"" }, "author": "Nathan Kunicki ", "license": "MIT", @@ -11,6 +12,7 @@ "node": ">=8.9.1" }, "devDependencies": { + "tslint": "^5.8.0", "typescript": "^2.6.1" } } diff --git a/src/bittmappeditor.ts b/src/bittmappeditor.ts index 1533121..dc9e635 100644 --- a/src/bittmappeditor.ts +++ b/src/bittmappeditor.ts @@ -1,9 +1,15 @@ -interface BittMappEditorConstructorOptions { - canvas: HTMLCanvasElement, - canvasWidth: number, - canvasHeight: number, - width: number, - height: number +interface IBittMappEditorConstructorOptions { + canvas: HTMLCanvasElement; + canvasWidth: number; + canvasHeight: number; + width: number; + height: number; +} + + +enum MouseButton { + LEFT = 0, + RIGHT = 2 } @@ -25,12 +31,12 @@ class BittMappEditor { private _pixelHeight: number = 0; private _mouseDown: boolean = false; - private _mouseButton: number; + private _mouseButton: MouseButton; private _data: Uint8Array; - constructor (options: BittMappEditorConstructorOptions) { + constructor (options: IBittMappEditorConstructorOptions) { options = options || {}; @@ -64,10 +70,10 @@ class BittMappEditor { throw new Error("BittMappEditor must be constructed with a height."); } - this._context = this._canvas.getContext("2d"); + this._context = this._canvas.getContext("2d") as CanvasRenderingContext2D; - const deviceRatio: number = window.devicePixelRatio, - backingStoreRatio: number = (this._context as any).backingStorePixelRatio || 1; + const deviceRatio: number = window.devicePixelRatio; + const backingStoreRatio: number = (this._context as any).backingStorePixelRatio as number || 1; this._scale = deviceRatio / backingStoreRatio; this._deviceRatio = deviceRatio; @@ -87,7 +93,7 @@ class BittMappEditor { this._canvas.addEventListener("mousedown", (event) => { this._mouseDown = true; - this._mouseButton = event.button; + this._mouseButton = event.button as MouseButton; this._handleMouseEvent(event, this._mouseButton); }); @@ -104,21 +110,21 @@ class BittMappEditor { } - setPixel (x: number, y: number): void { - const byte: number = ((y * (this._width / 8)) + Math.floor(x / 8)), - mask: number = 1 << (x % 8); + public setPixel (x: number, y: number): void { + const byte: number = ((y * (this._width / 8)) + Math.floor(x / 8)); + const mask: number = 1 << (x % 8); this._data[byte] = this._data[byte] |= mask; } - unsetPixel (x: number, y: number): void { - const byte: number = ((y * (this._width / 8)) + Math.floor(x / 8)), - mask: number = 1 << (x % 8); + public unsetPixel (x: number, y: number): void { + const byte: number = ((y * (this._width / 8)) + Math.floor(x / 8)); + const mask: number = 1 << (x % 8); this._data[byte] = this._data[byte] &= ~mask; } - resize (width: number = this._width, height: number = this._height): void { + public resize (width: number = this._width, height: number = this._height): void { this._data = new Uint8Array((width / 8) * height); this._pixelWidth = this.canvasWidth / this._width; this._pixelHeight = this.canvasHeight / this._height; @@ -145,30 +151,30 @@ class BittMappEditor { this.resize(width, this._height); } - - _handleMouseEvent (event: MouseEvent, button: number): void { - const pixelX: number = Math.floor(event.offsetX / this._pixelWidth), - pixelY: number = Math.floor(event.offsetY / this._pixelHeight); + private _handleMouseEvent (event: MouseEvent, button: number): void { - if (button === 0) { + const pixelX: number = Math.floor(event.offsetX / this._pixelWidth); + const pixelY: number = Math.floor(event.offsetY / this._pixelHeight); + + if (button === MouseButton.LEFT) { this.setPixel(pixelX, pixelY); - } else if (button === 2) { + } else if (button === MouseButton.RIGHT) { this.unsetPixel(pixelX, pixelY); } this._redraw(); - + } - _redraw (): void { + private _redraw (): void { this._drawGrid(); this._drawPixels(); } - _drawGrid (): void { + private _drawGrid (): void { this._context.fillStyle = "#FFFFFF"; this._context.strokeStyle = "#CCCCCC"; @@ -198,7 +204,7 @@ class BittMappEditor { for (let j: number = 0; j < (this._height); j++) { const y: number = Math.floor((this.canvasHeight / this._height) * (j + 1)); - + this._context.beginPath(); this._context.moveTo(0, y); this._context.lineTo(this.canvasWidth, y); @@ -209,7 +215,7 @@ class BittMappEditor { } - _drawPixels (): void { + private _drawPixels (): void { this._context.fillStyle = "#000000"; this._context.strokeStyle = "#FFFFFFF"; @@ -221,9 +227,12 @@ class BittMappEditor { for (let k: number = 0; k < 8; k++) { if (byte & 1) { - - this._context.fillRect(0.5 + (((j * 8) + k) * this._pixelWidth), 0.5 + (i * this._pixelHeight), this._pixelWidth - 1, this._pixelHeight - 1); - + + const startX: number = 0.5 + (((j * 8) + k) * this._pixelWidth); + const startY: number = 0.5 + (i * this._pixelHeight); + + this._context.fillRect(startX, startY, this._pixelWidth - 1, this._pixelHeight - 1); + } byte = byte >> 1; } @@ -232,6 +241,6 @@ class BittMappEditor { } } - -} \ No newline at end of file + +} diff --git a/src/main.ts b/src/main.ts index 1c0105a..0063b8b 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,11 +1,11 @@ -window.onload = function (): void { +window.onload = (): void => { - let editor: BittMappEditor = new BittMappEditor({ - canvas: document.getElementById("editor"), - canvasWidth: 640, + const editor: BittMappEditor = new BittMappEditor({ + canvas: document.getElementById("editor") as HTMLCanvasElement, canvasHeight: 640, - width: 32, - height: 32 + canvasWidth: 640, + height: 32, + width: 32 }); -}; \ No newline at end of file +}; diff --git a/tslint.json b/tslint.json new file mode 100644 index 0000000..b77e717 --- /dev/null +++ b/tslint.json @@ -0,0 +1,15 @@ +{ + "defaultSeverity": "error", + "extends": [ + "tslint:recommended" + ], + "jsRules": {}, + "rules": { + "no-consecutive-blank-lines": false, + "space-before-function-paren": false, + "no-bitwise": false, + "trailing-comma": false, + "variable-name": [true, "ban-keywords", "check-format", "allow-leading-underscore"] + }, + "rulesDirectory": [] +} \ No newline at end of file