Include border into the element selection line

[miina]

Context

Originally only an "outer" border was implemented outside of the selection line.
It was discussed later that the border should also be included in the selection line, so the user can snap by the border and also select an element by clicking on the border.

Summary

This PR adjusts the frame, edit, display mode to include the border into the selection line.

Relevant Technical Choices

• Note that the border width does not change the width and height of the element directly as originally intended since the border is in pixels and not responsive.
• Non-rectangular shapes have a different border logic and are already displaying the frame somewhere in the middle of the border -- these will not have the selection line perfectly including the border now either. This change mainly applies to rectangular elements / shapes.
• Edit mode stays the same for media -- border is not included in the edit mode.

To-do

• Fix display with unlocked border
• Fix text edit with unlocked border
• Fix resizing multiple elements
• Refactor
• Fix tests
• Add new test for selecting by clicking on border

User-facing changes

Testing Instructions

• This is a non-user-facing change and requires no QA

This PR can be tested by following these steps:

1. Add rectangular elements with border (media, text, shape)
2. Increase and decrease the border -- verify that border is now included in the selection line.
3. Verify it's possible to drag from the border
4. Verify it's possible to select an element by clicking on the border
5. Verify that resizing still works and isn't jumpy / changing the element size unexpectedly.
6. Verify that border is also included in the selection in text edit mode.
7. Verify that media edit mode does not include border (is as before)
8. Verify that output is not influenced by this change.
9. Verify that when adding border to an element, the content of the element stays in the same place.

Reviews

Does this PR have a security-related impact?

Does this PR change what data or activity we track or use?

Does this PR have a legal-related impact?

Checklist

• This PR addresses an existing issue and I have linked this PR to it in ZenHub
• I have tested this code to the best of my abilities
• I have verified accessibility to the best of my abilities (docs)
• I have verified i18n and l10n (translation, right-to-left layout) to the best of my abilities
• This code is covered by automated tests (unit, integration, and/or e2e) to verify it works as intended (docs)
• I have added documentation where necessary
• I have added a matching Type: XYZ label to the PR

---

Fixes #5325

[lgtm-com]

This pull request introduces 3 alerts when merging 936fcb0 into 88943a0 - view on LGTM.com

new alerts:

• 3 for Unused variable, import, function or class

[lgtm-com]

This pull request introduces 3 alerts when merging 55bb1b2 into 88943a0 - view on LGTM.com

new alerts:

• 3 for Unused variable, import, function or class

[lgtm-com]

This pull request introduces 3 alerts when merging 09ace6c into 6460356 - view on LGTM.com

new alerts:

• 3 for Unused variable, import, function or class

[merapi]

Note that the border width does not change the width and height of the element directly as originally intended since the border is in pixels and not responsive.

A side effect of that(?) is the alignment for those elements is trickier, we should probably consult that with UX but Andrew is out until Wednesday.

(elements in both groups are aligned to the left)

[miina]

Note that the border width does not change the width and height of the element directly as originally intended since the border is in pixels and not responsive.

A side effect of that(?) is the alignment for those elements is trickier, we should probably consult that with UX but Andrew is out until Wednesday.

This was actually like this before as well -- since the border width isn't included to the width/height currently either. Since we're using non-responsive CSS border but the elements are responsive, using the border to align is not really possible and is as it was before. We could create a follow-up issue if this needs changing.

[googleforcreators-bot]

Plugin builds for 43e0f5f are ready 🛎️!

• Download development build
• Download production build

[merapi]

This was actually like this before as well

Oh, that's good then - no change in behavior 👍🏻

[merapi]

LG, @barklund PTAL and let's move it to QA because there is a lot to check.

[miina]

Moved it to QA already in case something time-consuming comes up but would be still good to get a review from @barklund, too.

[barklund]

Generally looks great, but found a few edge-cases with bugs.