Added TypeScript linter
This commit is contained in:
Nathan Kunicki
parent
a7725f7ca0
commit
68233dde85
293
package-lock.json
generated
293
package-lock.json
generated
@ -4,11 +4,304 @@
|
|||||||
"lockfileVersion": 1,
|
"lockfileVersion": 1,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"dependencies": {
|
"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": {
|
"typescript": {
|
||||||
"version": "2.6.1",
|
"version": "2.6.1",
|
||||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-2.6.1.tgz",
|
"resolved": "https://registry.npmjs.org/typescript/-/typescript-2.6.1.tgz",
|
||||||
"integrity": "sha1-7znN6ierrAtQAkLWcmq5DgyEZjE=",
|
"integrity": "sha1-7znN6ierrAtQAkLWcmq5DgyEZjE=",
|
||||||
"dev": true
|
"dev": true
|
||||||
|
},
|
||||||
|
"wrappy": {
|
||||||
|
"version": "1.0.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
|
||||||
|
"integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
|
||||||
|
"dev": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -3,7 +3,8 @@
|
|||||||
"version": "0.0.1",
|
"version": "0.0.1",
|
||||||
"description": "BittMapp - A monochrome bitmap editor",
|
"description": "BittMapp - A monochrome bitmap editor",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build": "tsc"
|
"build": "tsc",
|
||||||
|
"lint": "tslint -c tslint.json \"src/**/*.ts\""
|
||||||
},
|
},
|
||||||
"author": "Nathan Kunicki <me@nathankunicki.com>",
|
"author": "Nathan Kunicki <me@nathankunicki.com>",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
@ -11,6 +12,7 @@
|
|||||||
"node": ">=8.9.1"
|
"node": ">=8.9.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"tslint": "^5.8.0",
|
||||||
"typescript": "^2.6.1"
|
"typescript": "^2.6.1"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,9 +1,15 @@
|
|||||||
interface BittMappEditorConstructorOptions {
|
interface IBittMappEditorConstructorOptions {
|
||||||
canvas: HTMLCanvasElement,
|
canvas: HTMLCanvasElement;
|
||||||
canvasWidth: number,
|
canvasWidth: number;
|
||||||
canvasHeight: number,
|
canvasHeight: number;
|
||||||
width: number,
|
width: number;
|
||||||
height: number
|
height: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
enum MouseButton {
|
||||||
|
LEFT = 0,
|
||||||
|
RIGHT = 2
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -25,12 +31,12 @@ class BittMappEditor {
|
|||||||
private _pixelHeight: number = 0;
|
private _pixelHeight: number = 0;
|
||||||
|
|
||||||
private _mouseDown: boolean = false;
|
private _mouseDown: boolean = false;
|
||||||
private _mouseButton: number;
|
private _mouseButton: MouseButton;
|
||||||
|
|
||||||
private _data: Uint8Array;
|
private _data: Uint8Array;
|
||||||
|
|
||||||
|
|
||||||
constructor (options: BittMappEditorConstructorOptions) {
|
constructor (options: IBittMappEditorConstructorOptions) {
|
||||||
|
|
||||||
options = options || {};
|
options = options || {};
|
||||||
|
|
||||||
@ -64,10 +70,10 @@ class BittMappEditor {
|
|||||||
throw new Error("BittMappEditor must be constructed with a height.");
|
throw new Error("BittMappEditor must be constructed with a height.");
|
||||||
}
|
}
|
||||||
|
|
||||||
this._context = <CanvasRenderingContext2D> this._canvas.getContext("2d");
|
this._context = this._canvas.getContext("2d") as CanvasRenderingContext2D;
|
||||||
|
|
||||||
const deviceRatio: number = window.devicePixelRatio,
|
const deviceRatio: number = window.devicePixelRatio;
|
||||||
backingStoreRatio: number = <number> (this._context as any).backingStorePixelRatio || 1;
|
const backingStoreRatio: number = (this._context as any).backingStorePixelRatio as number || 1;
|
||||||
|
|
||||||
this._scale = deviceRatio / backingStoreRatio;
|
this._scale = deviceRatio / backingStoreRatio;
|
||||||
this._deviceRatio = deviceRatio;
|
this._deviceRatio = deviceRatio;
|
||||||
@ -87,7 +93,7 @@ class BittMappEditor {
|
|||||||
|
|
||||||
this._canvas.addEventListener("mousedown", (event) => {
|
this._canvas.addEventListener("mousedown", (event) => {
|
||||||
this._mouseDown = true;
|
this._mouseDown = true;
|
||||||
this._mouseButton = event.button;
|
this._mouseButton = event.button as MouseButton;
|
||||||
this._handleMouseEvent(event, this._mouseButton);
|
this._handleMouseEvent(event, this._mouseButton);
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -104,21 +110,21 @@ class BittMappEditor {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
setPixel (x: number, y: number): void {
|
public setPixel (x: number, y: number): void {
|
||||||
const byte: number = ((y * (this._width / 8)) + Math.floor(x / 8)),
|
const byte: number = ((y * (this._width / 8)) + Math.floor(x / 8));
|
||||||
mask: number = 1 << (x % 8);
|
const mask: number = 1 << (x % 8);
|
||||||
this._data[byte] = this._data[byte] |= mask;
|
this._data[byte] = this._data[byte] |= mask;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
unsetPixel (x: number, y: number): void {
|
public unsetPixel (x: number, y: number): void {
|
||||||
const byte: number = ((y * (this._width / 8)) + Math.floor(x / 8)),
|
const byte: number = ((y * (this._width / 8)) + Math.floor(x / 8));
|
||||||
mask: number = 1 << (x % 8);
|
const mask: number = 1 << (x % 8);
|
||||||
this._data[byte] = this._data[byte] &= ~mask;
|
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._data = new Uint8Array((width / 8) * height);
|
||||||
this._pixelWidth = this.canvasWidth / this._width;
|
this._pixelWidth = this.canvasWidth / this._width;
|
||||||
this._pixelHeight = this.canvasHeight / this._height;
|
this._pixelHeight = this.canvasHeight / this._height;
|
||||||
@ -145,30 +151,30 @@ class BittMappEditor {
|
|||||||
this.resize(width, this._height);
|
this.resize(width, this._height);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
_handleMouseEvent (event: MouseEvent, button: number): void {
|
|
||||||
|
|
||||||
const pixelX: number = Math.floor(event.offsetX / this._pixelWidth),
|
private _handleMouseEvent (event: MouseEvent, button: number): void {
|
||||||
pixelY: number = Math.floor(event.offsetY / this._pixelHeight);
|
|
||||||
|
|
||||||
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);
|
this.setPixel(pixelX, pixelY);
|
||||||
} else if (button === 2) {
|
} else if (button === MouseButton.RIGHT) {
|
||||||
this.unsetPixel(pixelX, pixelY);
|
this.unsetPixel(pixelX, pixelY);
|
||||||
}
|
}
|
||||||
|
|
||||||
this._redraw();
|
this._redraw();
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
_redraw (): void {
|
private _redraw (): void {
|
||||||
this._drawGrid();
|
this._drawGrid();
|
||||||
this._drawPixels();
|
this._drawPixels();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
_drawGrid (): void {
|
private _drawGrid (): void {
|
||||||
|
|
||||||
this._context.fillStyle = "#FFFFFF";
|
this._context.fillStyle = "#FFFFFF";
|
||||||
this._context.strokeStyle = "#CCCCCC";
|
this._context.strokeStyle = "#CCCCCC";
|
||||||
@ -198,7 +204,7 @@ class BittMappEditor {
|
|||||||
for (let j: number = 0; j < (this._height); j++) {
|
for (let j: number = 0; j < (this._height); j++) {
|
||||||
|
|
||||||
const y: number = Math.floor((this.canvasHeight / this._height) * (j + 1));
|
const y: number = Math.floor((this.canvasHeight / this._height) * (j + 1));
|
||||||
|
|
||||||
this._context.beginPath();
|
this._context.beginPath();
|
||||||
this._context.moveTo(0, y);
|
this._context.moveTo(0, y);
|
||||||
this._context.lineTo(this.canvasWidth, y);
|
this._context.lineTo(this.canvasWidth, y);
|
||||||
@ -209,7 +215,7 @@ class BittMappEditor {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
_drawPixels (): void {
|
private _drawPixels (): void {
|
||||||
|
|
||||||
this._context.fillStyle = "#000000";
|
this._context.fillStyle = "#000000";
|
||||||
this._context.strokeStyle = "#FFFFFFF";
|
this._context.strokeStyle = "#FFFFFFF";
|
||||||
@ -221,9 +227,12 @@ class BittMappEditor {
|
|||||||
|
|
||||||
for (let k: number = 0; k < 8; k++) {
|
for (let k: number = 0; k < 8; k++) {
|
||||||
if (byte & 1) {
|
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;
|
byte = byte >> 1;
|
||||||
}
|
}
|
||||||
@ -232,6 +241,6 @@ class BittMappEditor {
|
|||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
}
|
||||||
|
|||||||
14
src/main.ts
14
src/main.ts
@ -1,11 +1,11 @@
|
|||||||
window.onload = function (): void {
|
window.onload = (): void => {
|
||||||
|
|
||||||
let editor: BittMappEditor = new BittMappEditor({
|
const editor: BittMappEditor = new BittMappEditor({
|
||||||
canvas: <HTMLCanvasElement> document.getElementById("editor"),
|
canvas: document.getElementById("editor") as HTMLCanvasElement,
|
||||||
canvasWidth: 640,
|
|
||||||
canvasHeight: 640,
|
canvasHeight: 640,
|
||||||
width: 32,
|
canvasWidth: 640,
|
||||||
height: 32
|
height: 32,
|
||||||
|
width: 32
|
||||||
});
|
});
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|||||||
15
tslint.json
Normal file
15
tslint.json
Normal file
@ -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": []
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user