Feature: select tool extension feature

[hunkim98]

🚀 [Related Issue: #43]

Preview

Screen.Recording.2023-07-08.at.8.58.01.AM.mov

Changes

Allow extension (sideways & diagonally) for selected area

• [🎨Component] Detect extension direction for selected area

  • To make extension happen for selected area, I have added an algorithm to detect the extension direction when the user's mouse is down.

• [🎨Component] Add algorithm for extending the selected area

  • I have deeply thought about the correct algorithm for extending the selected area. After much thought, I thought of a way to set an originPixelIndex and made each pixel in the area to extend according to the distance with the originPixelIndex.
  • Refer to src/utils/position.ts getOverlappingPixelIndicesForModifiedPixels to check how I made the algorithm to find the pixels to color for the extended area
  • If you see the code, I calculate each pixel's pixel-offset distance to the origin pixel index. Then I calculate the corner positions for each pixel. After I get the corner positions, I find the pixel indices that overlap with the corner positions
    

    dotting/src/utils/position.ts

    Lines 465 to 531 in ab97c6b

    	export const getOverlappingPixelIndicesForModifiedPixels = (
    	originalPixels: Array<ColorChangeItem>,
    	originPixelIndex: { rowIndex: number; columnIndex: number },
    	modifyPixelWidthRatio: number,
    	modifyPixelHeightRatio: number,
    	gridSquareLength: number,
    	) => {
    	const pixelsToColor: Array<ColorChangeItem> = [];
    	for (const item of originalPixels) {
    	const pixelDistanceFromOrigin = {
    	rowOffset: item.rowIndex - originPixelIndex.rowIndex,
    	columnOffset: item.columnIndex - originPixelIndex.columnIndex,
    	};
    	const pixelWordPosOffset = {
    	x: pixelDistanceFromOrigin.columnOffset * gridSquareLength,
    	y: pixelDistanceFromOrigin.rowOffset * gridSquareLength,
    	};
    	const cornerWorldPos = {
    	topLeft: {
    	x: pixelWordPosOffset.x * modifyPixelWidthRatio,
    	y: pixelWordPosOffset.y * modifyPixelHeightRatio,
    	},
    	topRight: {
    	x: (pixelWordPosOffset.x + gridSquareLength) * modifyPixelWidthRatio,
    	y: pixelWordPosOffset.y * modifyPixelHeightRatio,
    	},
    	bottomLeft: {
    	x: pixelWordPosOffset.x * modifyPixelWidthRatio,
    	y: (pixelWordPosOffset.y + gridSquareLength) * modifyPixelHeightRatio,
    	},
    	bottomRight: {
    	x: (pixelWordPosOffset.x + gridSquareLength) * modifyPixelWidthRatio,
    	y: (pixelWordPosOffset.y + gridSquareLength) * modifyPixelHeightRatio,
    	},
    	};
    	for (
    	let i = cornerWorldPos.topLeft.x;
    	i < cornerWorldPos.topRight.x;
    	i += gridSquareLength
    	) {
    	for (
    	let j = cornerWorldPos.topLeft.y;
    	j < cornerWorldPos.bottomLeft.y;
    	j += gridSquareLength
    	) {
    	const pixelIndex = {
    	rowIndex: Math.round(
    	originPixelIndex.rowIndex + Math.floor(j / gridSquareLength),
    	),
    	columnIndex: Math.round(
    	originPixelIndex.columnIndex + Math.floor(i / gridSquareLength),
    	),
    	color: item.color,
    	previousColor: item.previousColor,
    	};
    	// console.log(originPixelIndex, "originPixelIndex");
    	// console.log(
    	// pixelIndex,
    	// "pixelIndex",
    	// );
    	pixelsToColor.push(pixelIndex);
    	}
    	}
    	}
    	return pixelsToColor;
    	};

• [🎨Component] Add event listeners for key down and key up

  • When using extension with select tool, most people expect to extend with an 'Alt' key pressed. The 'Alt' key is commonly perceived to make extension happen for both sides simultaneously. To make this happen, I first needed to let the Dotting component to listen to key events.
  • Adding key event listeners to the canvas element did not seem to work well. Thus, I found a way to instead put the event listener inside the parent div element.
    

    dotting/src/components/Dotting.tsx

    Lines 596 to 615 in ab97c6b

    	return (
    	<div
    	style={{
    	width: props.width,
    	height: props.height,
    	position: "relative",
    	outline: "none",
    	}}
    	ref={containerRef}
    	tabIndex={1}
    	onMouseDown={() => {
    	containerRef.current?.focus();
    	}}
    	onKeyDown={e => {
    	editor?.onKeyDown(e);
    	}}
    	onKeyUp={e => {
    	editor?.onKeyUp(e);
    	}}
    	>

• [🔗Other] Add tests for extension select area

  • Since extending select area is a new feature, it needs to be tested. I created some tests for the select area extension functionality. This is the first unit test I have created for Dotting, and I hope future developers write test codes for the code they write from now on! (@Lee-Si-Yoon, @lerrybe)
  • I also created a fake mouse down util for testing mouse clicks for canvas elements
    

    dotting/src/utils/testUtils.ts

    Lines 1 to 25 in ab97c6b

    	export interface MouseEventWithOffsets extends MouseEventInit {
    	pageX?: number;
    	pageY?: number;
    	offsetX?: number;
    	offsetY?: number;
    	x?: number;
    	y?: number;
    	altKey?: boolean;
    	}
    	export class FakeMouseEvent extends MouseEvent {
    	constructor(type: string, values: MouseEventWithOffsets) {
    	const { pageX, pageY, offsetX, offsetY, x, y, ...mouseValues } = values;
    	super(type, mouseValues);
    	Object.assign(this, {
    	offsetX: offsetX || 0,
    	offsetY: offsetY || 0,
    	pageX: pageX || 0,
    	pageY: pageY || 0,
    	x: x || 0,
    	y: y || 0,
    	});
    	}
    	}

  • People interested in how I implemented test codes for Dotting may refer to src/test/interactionLayer/select.test.tsx
    

    dotting/src/test/interactionLayer/select.test.tsx

    Lines 7 to 78 in ab97c6b

    	describe("test for select tool", () => {
    	let editor: Editor;
    	let canvasElement: HTMLCanvasElement;
    	beforeEach(() => {
    	const divElement = document.createElement("div");
    	const interactionCanvas = divElement.appendChild(
    	document.createElement("canvas"),
    	);
    	const gridCanvas = divElement.appendChild(document.createElement("canvas"));
    	const dataCanvas = divElement.appendChild(document.createElement("canvas"));
    	const backgroundCanvas = divElement.appendChild(
    	document.createElement("canvas"),
    	);
    	const mockEditor = new Editor({
    	gridCanvas,
    	interactionCanvas,
    	dataCanvas,
    	backgroundCanvas,
    	});
    	divElement.tabIndex = 1;
    	divElement.onmousedown = () => {
    	divElement.focus();
    	};
    	divElement.addEventListener("keydown", (e: any) => {
    	editor.onKeyDown(e);
    	});
    	mockEditor.setSize(800, 800);
    	editor = mockEditor;
    	// initialize the canvas with select tool selecting all the pixels
    	canvasElement = editor.getCanvasElement();
    	editor.setBrushTool(BrushTool.SELECT);
    	fireEvent(
    	canvasElement,
    	new FakeMouseEvent("mousedown", {
    	offsetX: 0,
    	offsetY: 0,
    	}),
    	);
    	fireEvent(
    	canvasElement,
    	new FakeMouseEvent("mousemove", {
    	offsetX: canvasElement.width,
    	offsetY: canvasElement.height,
    	}),
    	);
    	fireEvent(
    	canvasElement,
    	new FakeMouseEvent("mouseup", {
    	offsetX: canvasElement.width,
    	offsetY: canvasElement.height,
    	}),
    	);
    	});
    	afterEach(() => {
    	jest.clearAllMocks();
    	});
    	it("selects all the pixels in the canvas", () => {
    	const columnCount = editor.getColumnCount();
    	const rowCount = editor.getRowCount();
    	const selectedArea = editor.getSelectedArea();
    	expect(selectedArea?.startPixelIndex).toStrictEqual({
    	rowIndex: 0,
    	columnIndex: 0,
    	});
    	expect(selectedArea?.endPixelIndex).toStrictEqual({
    	rowIndex: rowCount - 1,
    	columnIndex: columnCount - 1,
    	});
    	});

Notes

• I had to add lots of code due to the complexity of the issue. I am sorry for writing too much code. If you have any questions on how I implemented the extension functionality, please feel free to ask my anytime! (@lerrybe, @Lee-Si-Yoon)

Next Up?

• It seems that we should change our world position for pixels. currently the middle pixel in the grid is (0,0) of the canvas. However, I think we should make {rowIndex: 0, columnIndex: 0} to be the (0,0) of the canvas. I will work on that.

[github-actions]

PR Preview Action v1.4.4
Preview removed because the pull request was closed.
2023-07-15 13:33 UTC

[lerrybe]

Creating an event class for simulation purposes is impressive.

[hunkim98]

Yes, the basic jest mouse event does not have offsetX or offsetY!
The solution was brought from testing-library/react-testing-library#268

[Lee-Si-Yoon]

Suggested change

	export const getRelativeCornerWordPosOfPixelToOrigin = (
	// the pixelIndex passed as a parameter should be an integer
	pixelIndex: {
	rowIndex: number;
	columnIndex: number;
	},
	originPixelIndex: { rowIndex: number; columnIndex: number },
	gridSquareLength: number,
	) => {
	// it will return world pos relative to originpixel word pos
	// the origin will be set to 0,0
	/**
	* @summary it will return world pos relative to originpixel word pos, the origin will be set to 0,0
	* @param pixelIndex - the pixelIndex passed as a parameter should be an integer
	*/
	export const getRelativeCornerWordPosOfPixelToOrigin = (
	pixelIndex: {
	rowIndex: number;
	columnIndex: number;
	},
	originPixelIndex: { rowIndex: number; columnIndex: number },
	gridSquareLength: number,
	) => {

how about using jsDoc tags for annotations?

[hunkim98]

From now on, I will try to use jsDoc tags as much as possible

[Lee-Si-Yoon]

how about adding these to storybook example? let's show off great feature

[hunkim98]

I will add an example for this in another PR later!

[sonarcloud]

SonarCloud Quality Gate failed.   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
30 Code Smells

68.1% Coverage
12.2% Duplication

Catch issues before they fail your Quality Gate with our IDE extension SonarLint