Skip to content

Commit dc32811

Browse files
chriswebchrisweb
committed
linting update
1 parent 79bcac7 commit dc32811

File tree

5 files changed

+84
-85
lines changed

5 files changed

+84
-85
lines changed

‎eslint.config.mjs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const compat = new FlatCompat({
1515
})
1616

1717
export default [{
18-
ignores: ['**/node_modules/', '**/dist/', '**/examples/'],
18+
ignores: ['**/node_modules/', '**/dist/'],
1919
}, ...compat.extends('eslint:recommended', 'plugin:@typescript-eslint/recommended'), {
2020
plugins: {
2121
'@typescript-eslint': typescriptEslint,

‎examples/simple-waveform/server/src/bootstrap.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
'use strict';
1+
'use strict'
22

3-
import { Server } from './library/server';
3+
import { Server } from './library/server'
44

5-
const server = new Server();
5+
const server = new Server()
66

7-
server.run();
7+
server.run()

‎src/index.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
1-
export { Waveform, IWaveCoreOptions, IWaveLayoutOptions, IWaveClickCallback } from './library/core';
2-
1+
export { Waveform, IWaveCoreOptions, IWaveLayoutOptions, IWaveClickCallback } from './library/core'

‎src/library/canvas.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@ export class Canvas {
33
public getContext(element: HTMLCanvasElement): CanvasRenderingContext2D {
44

55
if (element === null) {
6-
throw new Error('No element to get context from');
6+
throw new Error('No element to get context from')
77
}
88

9-
const canvasContext = element.getContext('2d');
9+
const canvasContext = element.getContext('2d')
1010

11-
return canvasContext;
11+
return canvasContext
1212

1313
}
1414

‎src/library/core.ts

Lines changed: 75 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Canvas } from './canvas';
1+
import { Canvas } from './canvas'
22

33
export interface IWaveCoreOptions {
44
canvasElement?: HTMLCanvasElement;
@@ -35,35 +35,35 @@ export class Waveform {
3535
peakBottomFillStyle: '#ff2975',
3636
peakTopProgressFillStyle: '#ffd319',
3737
peakBottomProgressFillStyle: '#ff901f'
38-
};
38+
}
3939

40-
protected _canvasContext: CanvasRenderingContext2D;
41-
protected _canvasElement: HTMLCanvasElement;
42-
protected _waveData: number[];
43-
protected _waveLayoutOptions: IWaveLayoutOptions = Waveform.layoutOptions;
44-
protected _firstDrawing = true;
45-
protected _latestRange: number | null = null;
46-
protected _plugins: [] = [];
47-
protected _waveClickCallback: IWaveClickCallback | null = null;
40+
protected _canvasContext: CanvasRenderingContext2D
41+
protected _canvasElement: HTMLCanvasElement
42+
protected _waveData: number[]
43+
protected _waveLayoutOptions: IWaveLayoutOptions = Waveform.layoutOptions
44+
protected _firstDrawing = true
45+
protected _latestRange: number | null = null
46+
protected _plugins: [] = []
47+
protected _waveClickCallback: IWaveClickCallback | null = null
4848

4949
constructor(waveCoreOptions?: IWaveCoreOptions) {
5050

5151
if (waveCoreOptions !== undefined) {
5252

5353
if (waveCoreOptions.canvasElement !== undefined) {
54-
this.setCanvasElement(waveCoreOptions.canvasElement);
54+
this.setCanvasElement(waveCoreOptions.canvasElement)
5555
}
5656

5757
if (waveCoreOptions.data !== undefined) {
58-
this.setWaveData(waveCoreOptions.data);
58+
this.setWaveData(waveCoreOptions.data)
5959
}
6060

6161
if (waveCoreOptions.layout !== undefined) {
62-
this.setLayoutOptions(waveCoreOptions.layout);
62+
this.setLayoutOptions(waveCoreOptions.layout)
6363
}
6464

6565
if (waveCoreOptions.waveformClickCallback !== undefined) {
66-
this.setWaveformClickCallback(waveCoreOptions.waveformClickCallback);
66+
this.setWaveformClickCallback(waveCoreOptions.waveformClickCallback)
6767
}
6868

6969
}
@@ -72,96 +72,96 @@ export class Waveform {
7272

7373
public setCanvasElement(canvasElement: HTMLCanvasElement): void {
7474

75-
this._canvasElement = canvasElement;
75+
this._canvasElement = canvasElement
7676

77-
const canvas = new Canvas();
77+
const canvas = new Canvas()
7878

79-
this._canvasContext = canvas.getContext(canvasElement);
79+
this._canvasContext = canvas.getContext(canvasElement)
8080

81-
this._addClickWaveListener();
81+
this._addClickWaveListener()
8282

8383
}
8484

8585
public getCanvasElement(): HTMLCanvasElement {
8686

87-
return this._canvasElement;
87+
return this._canvasElement
8888

8989
}
9090

9191
public setWaveData(data: number[]): void {
9292

9393
// reset the _latestRange to allow a new
9494
// draw even if the range did not change
95-
this._latestRange = null;
95+
this._latestRange = null
9696

97-
this._waveData = data;
97+
this._waveData = data
9898

9999
}
100100

101101
public getWaveData(): number[] {
102102

103-
return this._waveData;
103+
return this._waveData
104104

105105
}
106106

107107
public setLayoutOptions(layout: IWaveLayoutOptions): void {
108108

109-
Object.assign(this._waveLayoutOptions, layout);
109+
Object.assign(this._waveLayoutOptions, layout)
110110

111111
}
112112

113113
public getLayoutOptions(): IWaveLayoutOptions {
114114

115-
return this._waveLayoutOptions;
115+
return this._waveLayoutOptions
116116

117117
}
118118

119119
public setWaveformClickCallback(waveformClickCallback: IWaveClickCallback): void {
120120

121-
this._waveClickCallback = waveformClickCallback;
121+
this._waveClickCallback = waveformClickCallback
122122

123123
}
124124

125125
public getWaveformClickCallback(): IWaveClickCallback {
126126

127-
return this._waveClickCallback;
127+
return this._waveClickCallback
128128

129129
}
130130

131131
protected _addClickWaveListener(): void {
132132

133-
this._canvasElement.addEventListener('click', this._canvasElementClick.bind(this));
133+
this._canvasElement.addEventListener('click', this._canvasElementClick.bind(this))
134134

135135
}
136136

137137
protected _removeClickWaveListener(): void {
138138

139-
this._canvasElement.removeEventListener('click', this._canvasElementClick.bind(this));
139+
this._canvasElement.removeEventListener('click', this._canvasElementClick.bind(this))
140140

141141
}
142142

143143
protected _canvasElementClick(event: MouseEvent): void {
144144

145145
if (this._waveClickCallback !== null) {
146146

147-
event.preventDefault();
147+
event.preventDefault()
148148

149-
const canvasHorizontalPositionInPixel = this._getMouseHorizontalPosition(event);
150-
const pixelsPerPercent = this._canvasElement.width / 100;
151-
const clickHorizontalPositionInPercent = canvasHorizontalPositionInPixel / pixelsPerPercent;
149+
const canvasHorizontalPositionInPixel = this._getMouseHorizontalPosition(event)
150+
const pixelsPerPercent = this._canvasElement.width / 100
151+
const clickHorizontalPositionInPercent = canvasHorizontalPositionInPixel / pixelsPerPercent
152152

153-
this._waveClickCallback(clickHorizontalPositionInPercent);
153+
this._waveClickCallback(clickHorizontalPositionInPercent)
154154

155155
}
156156

157157
}
158158

159159
protected _getMouseHorizontalPosition(event: MouseEvent): number {
160160

161-
const boundingClientRectangle = this._canvasElement.getBoundingClientRect();
162-
const position = event.clientX - boundingClientRectangle.left;
161+
const boundingClientRectangle = this._canvasElement.getBoundingClientRect()
162+
const position = event.clientX - boundingClientRectangle.left
163163

164-
return position;
164+
return position
165165

166166
}
167167

@@ -174,101 +174,101 @@ export class Waveform {
174174
// measure fps
175175
//this.fps();
176176

177-
const peaksLength = this._waveData.length;
177+
const peaksLength = this._waveData.length
178178

179179
if (peaksLength === 0) {
180180
// nothing to draw
181-
console.warn('can not draw, peaks array (waveData) is empty');
182-
return;
181+
console.warn('can not draw, peaks array (waveData) is empty')
182+
return
183183
}
184184

185185
if (range < 0 || range > 100) {
186-
console.warn('range value must be >= 0 and <= 100');
187-
return;
186+
console.warn('range value must be >= 0 and <= 100')
187+
return
188188
}
189189

190190
// the canvas width is the width of all the peaks, plus the width of
191191
// all the spaces, the amount of spaces is equal to the amount of peaks
192192
// minus one
193-
const canvasWidth = (peaksLength * this._waveLayoutOptions.peakWidthInPixel) + ((peaksLength - 1) * this._waveLayoutOptions.spaceWidthInPixel);
193+
const canvasWidth = (peaksLength * this._waveLayoutOptions.peakWidthInPixel) + ((peaksLength - 1) * this._waveLayoutOptions.spaceWidthInPixel)
194194

195-
let peaksRange = 0;
195+
let peaksRange = 0
196196

197-
const peaksPercentage = peaksLength / 100;
197+
const peaksPercentage = peaksLength / 100
198198

199-
peaksRange = Math.round(range * peaksPercentage);
199+
peaksRange = Math.round(range * peaksPercentage)
200200

201201
// if the range did not change since last draw don't redraw
202202
// except if force is true
203203
if (peaksRange === this._latestRange && !force) {
204-
return;
204+
return
205205
}
206206

207-
this._latestRange = peaksRange;
207+
this._latestRange = peaksRange
208208

209-
const canvasHeight = this._waveLayoutOptions.waveHeightInPixel;
209+
const canvasHeight = this._waveLayoutOptions.waveHeightInPixel
210210

211211
// canvas dimensions
212-
this._canvasElement.height = canvasHeight;
213-
this._canvasElement.width = canvasWidth;
212+
this._canvasElement.height = canvasHeight
213+
this._canvasElement.width = canvasWidth
214214

215215
// each peak is the line and the line width is the peak width
216-
this._canvasContext.lineWidth = this._waveLayoutOptions.peakWidthInPixel;
216+
this._canvasContext.lineWidth = this._waveLayoutOptions.peakWidthInPixel
217217

218218
// the max height of the top peaks
219-
const topPeakMaxHeightInPixel = this._waveLayoutOptions.waveHeightInPixel * (this._waveLayoutOptions.waveTopPercentage / 100);
219+
const topPeakMaxHeightInPixel = this._waveLayoutOptions.waveHeightInPixel * (this._waveLayoutOptions.waveTopPercentage / 100)
220220

221221
// the max height of the bottom peaks
222-
const bottomPeakMaxHeightInPixel = this._waveLayoutOptions.waveHeightInPixel * ((100 - this._waveLayoutOptions.waveTopPercentage) / 100);
222+
const bottomPeakMaxHeightInPixel = this._waveLayoutOptions.waveHeightInPixel * ((100 - this._waveLayoutOptions.waveTopPercentage) / 100)
223223

224224
// canvas background fill style
225-
this._canvasContext.fillStyle = this._waveLayoutOptions.waveBackgroundFillStyle;
226-
this._canvasContext.fillRect(0, 0, canvasWidth, canvasHeight);
225+
this._canvasContext.fillStyle = this._waveLayoutOptions.waveBackgroundFillStyle
226+
this._canvasContext.fillRect(0, 0, canvasWidth, canvasHeight)
227227

228-
let i;
228+
let i
229229

230230
for (i = 0; i < peaksLength; i++) {
231231

232-
let topStrokeFillStyle;
233-
let bottomStrokeFillStyle;
232+
let topStrokeFillStyle
233+
let bottomStrokeFillStyle
234234

235235
if (i < peaksRange) {
236236

237-
topStrokeFillStyle = this._waveLayoutOptions.peakTopProgressFillStyle;
238-
bottomStrokeFillStyle = this._waveLayoutOptions.peakBottomProgressFillStyle;
237+
topStrokeFillStyle = this._waveLayoutOptions.peakTopProgressFillStyle
238+
bottomStrokeFillStyle = this._waveLayoutOptions.peakBottomProgressFillStyle
239239

240240
} else {
241241

242-
topStrokeFillStyle = this._waveLayoutOptions.peakTopFillStyle;
243-
bottomStrokeFillStyle = this._waveLayoutOptions.peakBottomFillStyle;
242+
topStrokeFillStyle = this._waveLayoutOptions.peakTopFillStyle
243+
bottomStrokeFillStyle = this._waveLayoutOptions.peakBottomFillStyle
244244

245245
}
246246

247-
const peakHeightInPercent = this._waveData[i];
247+
const peakHeightInPercent = this._waveData[i]
248248

249249
// the horizontal position of a peak
250-
const peakHorizontalPosition = ((i + 1) * this._waveLayoutOptions.peakWidthInPixel) + (i * this._waveLayoutOptions.spaceWidthInPixel);
250+
const peakHorizontalPosition = ((i + 1) * this._waveLayoutOptions.peakWidthInPixel) + (i * this._waveLayoutOptions.spaceWidthInPixel)
251251

252252
// waveform top
253-
this._canvasContext.beginPath();
254-
this._canvasContext.moveTo(peakHorizontalPosition, topPeakMaxHeightInPixel);
255-
this._canvasContext.lineTo(peakHorizontalPosition, topPeakMaxHeightInPixel - (topPeakMaxHeightInPixel * (peakHeightInPercent / 100)));
256-
this._canvasContext.strokeStyle = topStrokeFillStyle;
257-
this._canvasContext.stroke();
253+
this._canvasContext.beginPath()
254+
this._canvasContext.moveTo(peakHorizontalPosition, topPeakMaxHeightInPixel)
255+
this._canvasContext.lineTo(peakHorizontalPosition, topPeakMaxHeightInPixel - (topPeakMaxHeightInPixel * (peakHeightInPercent / 100)))
256+
this._canvasContext.strokeStyle = topStrokeFillStyle
257+
this._canvasContext.stroke()
258258

259259
// waveform bottom
260-
this._canvasContext.beginPath();
261-
this._canvasContext.moveTo(peakHorizontalPosition, topPeakMaxHeightInPixel);
262-
this._canvasContext.lineTo(peakHorizontalPosition, topPeakMaxHeightInPixel + (bottomPeakMaxHeightInPixel * (peakHeightInPercent / 100)));
263-
this._canvasContext.strokeStyle = bottomStrokeFillStyle;
264-
this._canvasContext.stroke();
260+
this._canvasContext.beginPath()
261+
this._canvasContext.moveTo(peakHorizontalPosition, topPeakMaxHeightInPixel)
262+
this._canvasContext.lineTo(peakHorizontalPosition, topPeakMaxHeightInPixel + (bottomPeakMaxHeightInPixel * (peakHeightInPercent / 100)))
263+
this._canvasContext.strokeStyle = bottomStrokeFillStyle
264+
this._canvasContext.stroke()
265265

266266
}
267267
}
268268

269269
public destroy(): void {
270270

271-
this._removeClickWaveListener();
271+
this._removeClickWaveListener()
272272

273273
}
274274
}

0 commit comments

Comments
 (0)