From 8375261eb19ed2f4d119073dd998b04537c61c89 Mon Sep 17 00:00:00 2001 From: Michael Smith Date: Fri, 26 May 2023 10:57:58 +0200 Subject: [PATCH] Fix problems highlighted by eslint --- main.js | 175 +++++++++++++++++++++----------------------- src/binarystream.js | 4 +- src/pbm.js | 32 ++++---- tests/pbm.test.js | 57 +++++++-------- 4 files changed, 128 insertions(+), 140 deletions(-) diff --git a/main.js b/main.js index f0ce9f9..aee8848 100644 --- a/main.js +++ b/main.js @@ -24,33 +24,14 @@ */ -import PBM from "./src/pbm.js"; +import PBM from './src/pbm.js'; -const thumbnailCanvas = document.getElementById("thumbnail-canvas"); -const thumbnailContext = thumbnailCanvas.getContext("2d"); -const imageCanvas = document.getElementById("image-canvas"); -const imageContext = imageCanvas.getContext("2d"); -const paletteCanvas = document.getElementById("palette-canvas"); -const paletteContext = paletteCanvas.getContext("2d"); - -const inputElement = document.getElementById("imagefile"); -inputElement.addEventListener("change", handleFile, false); - -document.getElementById("paletteLeft").addEventListener("click", paletteLeft); -document.getElementById("paletteRight").addEventListener("click", paletteRight); - -document.getElementById("cycleColors").addEventListener("click", () => { - if (running) { - running = false; - } else { - running = true; - animate(); - } -}); - -const palettePageLabelEl = document.getElementById("palettePageLabel"); -const cyclingSpeedLabel = document.getElementById("cyclingSpeedLabel"); -cyclingSpeedLabel.innerText = cyclingSpeedSlider.value; +const thumbnailCanvas = document.getElementById('thumbnail-canvas'); +const thumbnailContext = thumbnailCanvas.getContext('2d'); +const imageCanvas = document.getElementById('image-canvas'); +const imageContext = imageCanvas.getContext('2d'); +const paletteCanvas = document.getElementById('palette-canvas'); +const paletteContext = paletteCanvas.getContext('2d'); let currentPalettePage = 0; let image = null; @@ -58,38 +39,6 @@ let running = false; let cycleSpeed = 15.0; -document - .getElementById("cyclingSpeedSlider") - .addEventListener("input", (evt) => { - cycleSpeed = evt.target.value; - cyclingSpeedLabel.innerText = cycleSpeed; - }); - -fetch("/assets/TEST.LBM") - .then((response) => { - return response.arrayBuffer(); - }) - .then((buffer) => { - image = loadImage(buffer); - drawPalette(image.palette, currentPalettePage, paletteContext); - drawImage(image.thumbnail, thumbnailContext); - drawImage(image, imageContext); - }); - -function handleFile() { - const imageFile = this.files[0]; - const reader = new FileReader(); - - reader.onload = (evt) => { - image = loadImage(evt.target.result); - drawPalette(image.palette, currentPalettePage, paletteContext); - drawImage(image.thumbnail, thumbnailContext); - drawImage(image, imageContext); - }; - - reader.readAsArrayBuffer(imageFile); -} - function loadImage(buffer) { image = new PBM(buffer); thumbnailCanvas.width = image.thumbnail.width; @@ -100,26 +49,6 @@ function loadImage(buffer) { return image; } -function paletteLeft(evt) { - if (currentPalettePage === 0) { - currentPalettePage = 3; - } else { - currentPalettePage--; - } - palettePageLabelEl.innerText = currentPalettePage + 1; - drawPalette(); -} - -function paletteRight(evt) { - if (currentPalettePage === 3) { - currentPalettePage = 0; - } else { - currentPalettePage++; - } - palettePageLabelEl.innerText = currentPalettePage + 1; - drawPalette(); -} - function drawPalette() { const colorSize = 20; // in pixels const width = 4 * colorSize; // 4 columns @@ -142,19 +71,19 @@ function drawPalette() { } } -function drawImage(image, ctx) { - ctx.clearRect(0, 0, image.width, image.height); - let pixels = ctx.createImageData(image.width, image.height); +function drawImage(anImage, ctx) { + ctx.clearRect(0, 0, anImage.width, anImage.height); + const pixels = ctx.createImageData(anImage.width, anImage.height); - for (let x = 0; x < image.width; x++) { - for (let y = 0; y < image.height; y++) { - const index = y * image.width + x; - const paletteIndex = image.pixelData[index]; + for (let x = 0; x < anImage.width; x++) { + for (let y = 0; y < anImage.height; y++) { + const index = y * anImage.width + x; + const paletteIndex = anImage.pixelData[index]; const pixelIndex = index * 4; - const r = image.palette[paletteIndex][0]; - const g = image.palette[paletteIndex][1]; - const b = image.palette[paletteIndex][2]; + const r = anImage.palette[paletteIndex][0]; + const g = anImage.palette[paletteIndex][1]; + const b = anImage.palette[paletteIndex][2]; pixels.data[pixelIndex] = r; pixels.data[pixelIndex + 1] = g; @@ -166,17 +95,53 @@ function drawImage(image, ctx) { ctx.putImageData(pixels, 0, 0); } +function handleFile() { + const imageFile = this.files[0]; + const reader = new FileReader(); + + reader.onload = (evt) => { + image = loadImage(evt.target.result); + drawPalette(image.palette, currentPalettePage, paletteContext); + drawImage(image.thumbnail, thumbnailContext); + drawImage(image, imageContext); + }; + + reader.readAsArrayBuffer(imageFile); +} + +function paletteLeft() { + if (currentPalettePage === 0) { + currentPalettePage = 3; + } else { + currentPalettePage -= 1; + } + document.getElementById('palettePageLabel').innerText = + currentPalettePage + 1; + drawPalette(); +} + +function paletteRight() { + if (currentPalettePage === 3) { + currentPalettePage = 0; + } else { + currentPalettePage += 1; + } + document.getElementById('palettePageLabel').innerText = + currentPalettePage + 1; + drawPalette(); +} + function cycleColors(now) { image.cyclingRanges.forEach((range) => { if (range.active) { if (!range.lastTime) range.lastTime = now; if (now - range.lastTime > range.rate / cycleSpeed) { - if (range.direction === "forward") { + if (range.direction === 'forward') { // Move last color to first position const lastColor = image.palette.splice(range.high, 1)[0]; image.palette.splice(range.low, 0, lastColor); - } else if (range.direction === "reverse") { + } else if (range.direction === 'reverse') { // Move first color to last position const firstColor = image.palette.splice(range.low, 1)[0]; image.palette.splice(range.high, 0, firstColor); @@ -194,3 +159,33 @@ function animate(now) { if (running) requestAnimationFrame(animate); } + +const inputElement = document.getElementById('imagefile'); +inputElement.addEventListener('change', handleFile, false); + +document.getElementById('paletteLeft').addEventListener('click', paletteLeft); +document.getElementById('paletteRight').addEventListener('click', paletteRight); +document.getElementById('cycleColors').addEventListener('click', () => { + if (running) { + running = false; + } else { + running = true; + animate(); + } +}); + +document + .getElementById('cyclingSpeedSlider') + .addEventListener('input', (evt) => { + cycleSpeed = evt.target.value; + document.getElementById('cyclingSpeedLabel').innerText = cycleSpeed; + }); + +fetch('/assets/TEST.LBM') + .then((response) => response.arrayBuffer()) + .then((buffer) => { + image = loadImage(buffer); + drawPalette(image.palette, currentPalettePage, paletteContext); + drawImage(image.thumbnail, thumbnailContext); + drawImage(image, imageContext); + }); diff --git a/src/binarystream.js b/src/binarystream.js index 83d7eb4..8be328c 100644 --- a/src/binarystream.js +++ b/src/binarystream.js @@ -46,7 +46,7 @@ class BinaryStream { readByte() { const byte = this.dataView.getUint8(this.index); - this.index++; + this.index += 1; return byte; } @@ -58,7 +58,7 @@ class BinaryStream { } readString(length) { - let string = ""; + let string = ''; for (let i = 0; i < length; i++) { const byte = this.dataView.getUint8(this.index + i); diff --git a/src/pbm.js b/src/pbm.js index a1790fd..9081ecc 100644 --- a/src/pbm.js +++ b/src/pbm.js @@ -24,7 +24,7 @@ */ -import BinaryStream from "./binarystream.js"; +import BinaryStream from './binarystream.js'; class PBM { constructor(arrayBuffer) { @@ -81,7 +81,7 @@ class PBM { const formatId = this.binaryStream.readString(4); // Validate chunk according to notes on https://en.wikipedia.org/wiki/ILBM - if (chunkId !== "FORM") { + if (chunkId !== 'FORM') { throw new Error( `Invalid chunkId: "${chunkId}" at byte ${this.binaryStream.index}. Expected "FORM".` ); @@ -95,7 +95,7 @@ class PBM { ); } - if (formatId !== "PBM ") { + if (formatId !== 'PBM ') { throw new Error(`Invalid formatId: "${formatId}". Expected "PBM ".`); } @@ -105,23 +105,23 @@ class PBM { chunkLength = this.binaryStream.readUint32BE(); switch (chunkId) { - case "BMHD": + case 'BMHD': this.parseBMHD(); break; - case "CMAP": + case 'CMAP': this.parseCMAP(); break; - case "DPPS": + case 'DPPS': // NOTE(m): Ignore unknown DPPS chunk of size 110 bytes this.binaryStream.jump(110); break; - case "CRNG": + case 'CRNG': this.parseCRNG(); break; - case "TINY": + case 'TINY': this.parseTINY(chunkLength); break; - case "BODY": + case 'BODY': this.parseBODY(chunkLength); break; default: @@ -159,7 +159,7 @@ class PBM { // TODO(m): Read 3 bytes at a time? for (let i = 0; i < numColors; i++) { - let rgb = []; + const rgb = []; for (let j = 0; j < 3; j++) { rgb.push(this.binaryStream.readByte()); } @@ -189,11 +189,11 @@ class PBM { const directionBitMask = 1 << 1; this.cyclingRanges.push({ - rate: rate, + rate, active: (flags & activeBitMask) !== 0, - direction: (flags & directionBitMask) !== 0 ? "reverse" : "forward", - low: low, - high: high, + direction: (flags & directionBitMask) !== 0 ? 'reverse' : 'forward', + low, + high, }); } @@ -226,7 +226,7 @@ class PBM { } decompress(endOfChunkIndex) { - let result = []; + const result = []; while (this.binaryStream.index < endOfChunkIndex) { const byte = this.binaryStream.readByte(); @@ -251,7 +251,7 @@ class PBM { // TODO(m): Read a range of bytes straight into an array? // Use arrayBuffers throughout instead? readUncompressed(endOfChunkIndex) { - let result = []; + const result = []; while (this.binaryStream.index < endOfChunkIndex) { const byte = this.binaryStream.readByte(); diff --git a/tests/pbm.test.js b/tests/pbm.test.js index caa9d3a..93b435f 100644 --- a/tests/pbm.test.js +++ b/tests/pbm.test.js @@ -1,3 +1,4 @@ +/* eslint-disable no-new */ /* MIT License @@ -24,49 +25,46 @@ */ -import { expect, test } from "vitest"; +import { expect, test } from 'vitest'; -import PBM from "../src/pbm.js"; +import PBM from '../src/pbm.js'; -test("Successfully parse a PBM file", () => { - const fs = require("fs"); - const data = fs.readFileSync("./tests/fixtures/VALID.LBM"); +const fs = require('fs'); + +test('Successfully parse a PBM file', () => { + const data = fs.readFileSync('./tests/fixtures/VALID.LBM'); expect(() => { new PBM(data.buffer); }).not.toThrowError(); }); -test("Fail to parse a PBM file with an invalid chunk id", () => { - const fs = require("fs"); - const data = fs.readFileSync("./tests/fixtures/INVALID_CHUNK_ID.LBM"); +test('Fail to parse a PBM file with an invalid chunk id', () => { + const data = fs.readFileSync('./tests/fixtures/INVALID_CHUNK_ID.LBM'); expect(() => { new PBM(data.buffer); }).toThrowError(/^Invalid chunkId: "FARM" at byte 12. Expected "FORM".$/); }); -test("Fail to parse a PBM file with an invalid chunk length", () => { - const fs = require("fs"); - const data = fs.readFileSync("./tests/fixtures/INVALID_CHUNK_LENGTH.LBM"); +test('Fail to parse a PBM file with an invalid chunk length', () => { + const data = fs.readFileSync('./tests/fixtures/INVALID_CHUNK_LENGTH.LBM'); expect(() => { new PBM(data.buffer); }).toThrowError(/^Invalid chunk length: 7070 bytes. Expected 7012 bytes.$/); }); -test("Fail to parse an IFF file that is not a PBM file", () => { - const fs = require("fs"); - const data = fs.readFileSync("./tests/fixtures/SEASCAPE.LBM"); +test('Fail to parse an IFF file that is not a PBM file', () => { + const data = fs.readFileSync('./tests/fixtures/SEASCAPE.LBM'); expect(() => { new PBM(data.buffer); }).toThrowError(/^Invalid formatId: "ILBM". Expected "PBM ".$/); }); -test("Parse a PBM bitmap header", () => { - const fs = require("fs"); - const data = fs.readFileSync("./tests/fixtures/VALID.LBM"); +test('Parse a PBM bitmap header', () => { + const data = fs.readFileSync('./tests/fixtures/VALID.LBM'); const image = new PBM(data.buffer); expect(image.width).toStrictEqual(640); @@ -84,26 +82,23 @@ test("Parse a PBM bitmap header", () => { expect(image.pageHeight).toStrictEqual(480); }); -test("Parse PBM palette information", () => { - const fs = require("fs"); - const data = fs.readFileSync("./tests/fixtures/VALID.LBM"); +test('Parse PBM palette information', () => { + const data = fs.readFileSync('./tests/fixtures/VALID.LBM'); const image = new PBM(data.buffer); expect(image.palette.length).toStrictEqual(256); expect(image.palette[10]).toStrictEqual([87, 255, 87]); }); -test("Parse PBM color cycling information", () => { - const fs = require("fs"); - const data = fs.readFileSync("./tests/fixtures/VALID.LBM"); +test('Parse PBM color cycling information', () => { + const data = fs.readFileSync('./tests/fixtures/VALID.LBM'); const image = new PBM(data.buffer); expect(image.cyclingRanges.length).toStrictEqual(16); }); -test("Parse PBM thumbnail", () => { - const fs = require("fs"); - const data = fs.readFileSync("./tests/fixtures/VALID.LBM"); +test('Parse PBM thumbnail', () => { + const data = fs.readFileSync('./tests/fixtures/VALID.LBM'); const image = new PBM(data.buffer); expect(image.thumbnail.width).toStrictEqual(80); @@ -111,9 +106,8 @@ test("Parse PBM thumbnail", () => { expect(image.thumbnail.size).toStrictEqual(4800); }); -test("Decode PBM thumbnail pixel data", () => { - const fs = require("fs"); - const data = fs.readFileSync("./tests/fixtures/VALID.LBM"); +test('Decode PBM thumbnail pixel data', () => { + const data = fs.readFileSync('./tests/fixtures/VALID.LBM'); const image = new PBM(data.buffer); expect(image.thumbnail.pixelData.length).toStrictEqual(4800); @@ -122,9 +116,8 @@ test("Decode PBM thumbnail pixel data", () => { expect(image.palette[14]).toStrictEqual([255, 255, 87]); }); -test("Decode PBM image pixel data", () => { - const fs = require("fs"); - const data = fs.readFileSync("./tests/fixtures/VALID.LBM"); +test('Decode PBM image pixel data', () => { + const data = fs.readFileSync('./tests/fixtures/VALID.LBM'); const image = new PBM(data.buffer); expect(image.pixelData.length).toStrictEqual(307_200);