_initElements()

in custom-editor-sample/media/pawDraw.js [86:158]
61 lines of code
11 McCabe index (conditional complexity)

		_initElements(/** @type {HTMLElement} */ parent) {
			const colorButtons = /** @type {NodeListOf<HTMLButtonElement>} */ (document.querySelectorAll('.drawing-controls button'));
			for (const colorButton of colorButtons) {
				colorButton.addEventListener('click', e => {
					e.stopPropagation();
					colorButtons.forEach(button => button.classList.remove('active'));
					colorButton.classList.add('active');
					this.drawingColor = colorButton.dataset['color'];
				});
			}

			this.wrapper = document.createElement('div');
			this.wrapper.style.position = 'relative';
			parent.append(this.wrapper);

			this.initialCanvas = document.createElement('canvas');
			this.initialCtx = this.initialCanvas.getContext('2d');
			this.wrapper.append(this.initialCanvas);

			this.drawingCanvas = document.createElement('canvas');
			this.drawingCanvas.style.position = 'absolute';
			this.drawingCanvas.style.top = '0';
			this.drawingCanvas.style.left = '0';
			this.drawingCtx = this.drawingCanvas.getContext('2d');
			this.wrapper.append(this.drawingCanvas);

			let isDrawing = false;

			parent.addEventListener('mousedown', () => {
				if (!this.ready || !this.editable) {
					return;
				}

				this.beginStoke(this.drawingColor);
				this.drawingCtx.strokeStyle = this.drawingColor;

				isDrawing = true;
				document.body.classList.add('isDrawing');
				this.drawingCtx.beginPath();
			});

			document.body.addEventListener('mouseup', async () => {
				if (!isDrawing || !this.ready || !this.editable) {
					return;
				}

				isDrawing = false;
				document.body.classList.remove('isDrawing');
				this.drawingCtx.closePath();

				const edit = this.endStroke();

				if (edit.stroke.length) {
					vscode.postMessage({
						type: 'stroke',
						color: edit.color,
						stroke: edit.stroke,
					});
				}
			});

			parent.addEventListener('mousemove', e => {
				if (!isDrawing || !this.ready || !this.editable) {
					return;
				}
				const rect = this.wrapper.getBoundingClientRect();
				const x = e.clientX - rect.left;
				const y = e.clientY - rect.top;
				this.drawingCtx.lineTo(x, y);
				this.drawingCtx.stroke();
				this.addPoint(x, y);
			});
		}