fix: LEAP-1191: Fix drawing tools scenarios with ctrl pressed

[Gondragos]

This fix changes behaviour into:

1. We can draw region over another region with keeping ctrl/cmd pressed only when there is no selected region yet.
2. We can add region to selection with ctrl/cmd pressed, in case if there is(are) some selected region(s).

PR fulfills these requirements

• Commit message(s) and PR title follows the format [fix|feat|ci|chore|doc]: TICKET-ID: Short description of change made ex. fix: DEV-XXXX: Removed inconsistent code usage causing intermittent errors
• Tests for the changes have been added/updated (for bug fixes/features)
• Docs have been added/updated (for bug fixes/features)
• Best efforts were made to ensure docs/code are concise and coherent (checked for spelling/grammatical errors, commented out code, debug logs etc.)
• Self-reviewed and ran all changes on a local instance (for bug fixes/features)

Change has impacts in these area(s)

• Product design
• Backend (Database)
• Backend (API)
• Frontend

Describe the reason for change

There is an intersection of two expected behaviours:

1. We need to draw regions over other regions. And that was originally solved with adding ability to draw with pressed ctrl/cmd key to ignore interactions with existing regions.
2. We want to be able to select more than one region to work with all them at once (hiding, deleting, moving and so on). And we use ctrl/cmd pressing as well.

So that, with keeping ctrl/cmd pressed and clicking on the region we got:

1. Starting drawing region by clicking.
2. Adding region to the current selection.
   But all that in the same time.

What feature flags were used to cover this change?

N/A

Does this PR introduce a breaking change?

• Yes, and covered entirely by feature flag(s)
• Yes, and covered partially by feature flag(s)
• No
• Not sure (briefly explain the situation below)

What level of testing was included in the change?

• e2e
• integration
• unit

Which logical domain(s) does this change affect?

Image, Drawing tools

[netlify]

✅ Deploy Preview for label-studio-docs-new-theme canceled.

Name	Link
🔨 Latest commit	c8fe64b
🔍 Latest deploy log	https://app.netlify.com/sites/label-studio-docs-new-theme/deploys/669528fa2c620e0008b4f4d4

[netlify]

✅ Deploy Preview for heartex-docs canceled.

Name	Link
🔨 Latest commit	c8fe64b
🔍 Latest deploy log	https://app.netlify.com/sites/heartex-docs/deploys/669528fac40c770008b87406

[bmartel]

Looks great 🔥

[yyassi-heartex]

I may be misunderstanding something but based on the description if there is no selection we create a new region overtop existing regions. (this seems to allow it as coded)
but if there is a selection then we add to the selection - would that not go through here and fail? or does that go through another spot?

[bmartel]

based on the description if there is no selection we create a new region overtop existing regions
if there is a selection then we add to the selection

Only when the meta key is pressed, otherwise its the default behaviour as before which depends on the state as to the operation.

[Gondragos]

If we are going to skip the interaction, the event will be processed inside the tool and it will draw region

label-studio/web/libs/editor/src/components/ImageView/ImageView.jsx

Lines 595 to 617 in 03837fc

	if (
	// create regions over another regions with Cmd/Ctrl pressed
	item.getSkipInteractions() ||
	e.target === item.stageRef ||
	findClosestParent(e.target, isRightElementToCatchToolInteractions)
	) {
	window.addEventListener("mousemove", this.handleGlobalMouseMove);
	window.addEventListener("mouseup", this.handleGlobalMouseUp);
	const { offsetX: x, offsetY: y } = e.evt;
	// store the canvas coords for calculations in further events
	const { left, top } = item.containerRef.getBoundingClientRect();
	this.canvasX = left;
	this.canvasY = top;
	if (this.skipNextMouseDown) {
	this.skipNextMouseDown = false;
	return true;
	}
	item.event("mousedown", e, x, y);
	return true;
	}
	};

With the currently selected region, we will skip this interaction, but clicking on the region will still be processed.

label-studio/web/libs/editor/src/regions/RectRegion.jsx

Lines 514 to 522 in 03837fc

	onClick={(e) => {
	if (item.parent.getSkipInteractions()) return;
	if (store.annotationStore.selected.relationMode) {
	stage.container().style.cursor = Constants.DEFAULT_CURSOR;
	}
	item.setHighlight(false);
	item.onClickRegion(e);
	}}

And it affects selection

label-studio/web/libs/editor/src/mixins/KonvaRegion.js

Lines 128 to 135 in 03837fc

	const selectAction = () => {
	const allowedDrawingThroughRegion = self.object.allowedDrawingThroughRegion;
	// Prevent selecting interactions with an existing region
	// If we have intention to draw a new region instead
	if (additiveMode && allowedDrawingThroughRegion) return;
	self._selectArea(additiveMode);
	deferredSelectId = null;
	};

So with ctrl/cmd key pressed and drawing tool selected it might draw over existed region if there is no selection and add/remove to/from selection if there is already selected regions.

I hope that I've mentioned here all meaningful spots,
'cause it's really a bit complicated. 😅

[yyassi-heartex]

/selenium test

'/selenium' is an unknown pull-request command.
See '/help'

[Gondragos]

/git merge develop

Workflow run
Successfully merged: create mode 100644 web/libs/editor/src/components/TopBar/tests/CurrentTask.test.tsx

[Gondragos]

/git merge develop

Workflow run
Successfully merged: Already up to date.