Improve handling of change bounds in several areas #344

martin-fleck-at · 2024-05-13T20:11:40Z

What it does

Improve handling of change bounds

Introduce change bounds manager to centralize bounds-related services
-- Bounds changes through position snapping and movement restriction
-- Validation for size and position of an element
-- Customizable methods for when to use move and resize options
Introduce change bounds tracker for moves and resizes
-- Tracker calculates move on diagram and calculates move and resizes
-- Tracker supports options on which parts of the process are applied
Provide moveable wrappers for resize and routing handles

Fixes eclipse-glsp/glsp#1337

Extend current resize capabilities
-- Introduce mode for symmetric resize
-- Introduce one-dimensional resize on top, right, bottom and left side

Fixes eclipse-glsp/glsp#1338
Fixes eclipse-glsp/glsp#1339

Fix elements moving during resizing when hitting minimum bounds
-- Store calculated minimum size from layouter in element
-- Adapt resize so we do not produce invalid sized bounds

Fixes eclipse-glsp/glsp#1340

Minor:

Ensure we get proper cursor feedback when hovering over resize handle
Add additional convenience functions
Add origin viewport command for convenience

Please note this PR builds upon #343 and should only be merged afterwards!

How to test

Double check that everything behaves as before (minus the bugs)
Symmetric resize can be tested using the Ctrl Key
Additional resize handles can be tested by adding the locations to the ChangeBoundsManager. The corners are kept for backwards-compatibilty.
General sizing can be tested more easily with the debug bounds module from Introduce an optional grid module to deal with a grid layout #343

Follow-ups

Changelog

This PR should be mentioned in the changelog
This PR introduces a breaking change (if yes, provide more details below for the changelog and the migration guide)

As soon as we agree on the PR, I'll write a paragraph about the changes ;-)

tortmayr

Thanks a lot Martin.
I really like the centralized approach of handling bound changes.
I have retested everything and can confirm that all mentioned bugs are fixed and (almost) everything works as expected.

There seems to be a bug when resizing elements close to the diagram border when projetion bars are visible:

resize-bug.mp4

On master the resize works as expected in this case.

Other than that i also noticed that the a11y keyboard resize tool currently does not respect grid size i.e. resizing with +/- does not snap the size to the grid. But we can handle that in a follow-up PR if necessary.

packages/client/css/change-bounds.css

packages/client/src/features/bounds/local-bounds.ts

packages/client/src/utils/gmodel-util.ts

packages/protocol/src/utils/type-util.ts

- Introduce change bounds manager to centralize bounds-related services -- Bounds changes through position snapping and movement restriction -- Validation for size and position of an element -- Customizable methods for when to use move and resize options - Introduce change bounds tracker for moves and resizes -- Tracker calculates move on diagram and calculates move and resizes -- Tracker supports options on which parts of the process are applied - Provide moveable wrappers for resize and routing handles Fixes eclipse-glsp/glsp#1337 - Extend current resize capabilities -- Introduce mode for symmetric resize -- Introduce one-dimensional resize on top, right, bottom and left side Fixes eclipse-glsp/glsp#1338 Fixes eclipse-glsp/glsp#1339 - Fix elements moving during resizing when hitting minimum bounds -- Store calculated minimum size from layouter in element -- Adapt resize so we do not produce invalid sized bounds Fixes eclipse-glsp/glsp#1340 Minor: - Ensure we get proper cursor feedback when hovering over resize handle - Add additional convenience functions - Add origin viewport command for convenience Contributed on behalf of Axon Ivy AG

- Fix issue with wrong coordinates on project bars during move/resize - Fix move during resize for constrained, symmetric resize - Ensure symmetric resize does not trigger deselect of element - Remove !important from CSS rules - Allow undefined unsnap modifier for adopters - Use isSizeable for debug decoration to avoid wrong edge decoration - Remove non-generic getAbsoluteEdgeBounds - Better unify the helper functions for CSS classes - Fix deprecation warnings - Minor cleanup Contributed on behalf of Axon Ivy AG

martin-fleck-at · 2024-05-16T10:24:14Z

@tortmayr I think I managed to address all the issues, I'd really appreciate it if you could have another, more detailed look at this. Thank you very much!

tortmayr

Thanks Martin. All issues have been addressed and everything seems to work as expected now. Nice job!

I encountered one issue with the recently introduced debug module. It also decorates validation markers (and potentially other decorations) which looks a bit confusing. We should probably not decorate decorations at all:

tortmayr · 2024-05-16T10:53:30Z

packages/client/css/helper-lines.css

@@ -16,8 +16,8 @@

 .helper-line {
    pointer-events: none;
-    stroke: red;
-    stroke-width: 1px;
+    stroke: #f7086c;


Should we maybe use a less aggressive color than red for the helper lines?

Do you maybe have a suggestion? I tried to choose a softer red, more pink-ish color to make it less look like an error. However, I couldn't quickly find a color that has a good contrast to most other colors and still look very visible on the blue-ish background.

I pushed an update where I set the stroke width back to 1 and use the blue that we also use for the resize handles, please have a look at that.

tortmayr · 2024-05-16T10:57:21Z

packages/protocol/src/sprotty-geometry-bounds.ts

@@ -49,7 +49,7 @@ declare module 'sprotty-protocol/lib/utils/geometry' {
         * @param right right bounds
         * @returns true if the two bounds are equal
         */
-        function equals(left: Bounds, right: Bounds): boolean;
+        function equals(left: Bounds, right: Bounds, eps?: number): boolean;


Missing @param for the eps param

@param

- Add missing @param doc - Do not debug decoratable elements - Adapt color of helper line

martin-fleck-at · 2024-05-16T11:49:02Z

@tortmayr Thank you, I pushed an update that should address the remaining issues. Now we just need to agree on a color ;-)

tortmayr

Thanks Martin.
Everything now works as expected.
I'm happy with the new color of the helper lines 😛

* Improve handling of change bounds - Introduce change bounds manager to centralize bounds-related services -- Bounds changes through position snapping and movement restriction -- Validation for size and position of an element -- Customizable methods for when to use move and resize options - Introduce change bounds tracker for moves and resizes -- Tracker calculates move on diagram and calculates move and resizes -- Tracker supports options on which parts of the process are applied - Provide moveable wrappers for resize and routing handles Fixes eclipse-glsp/glsp#1337 - Extend current resize capabilities -- Introduce mode for symmetric resize -- Introduce one-dimensional resize on top, right, bottom and left side Fixes eclipse-glsp/glsp#1338 Fixes eclipse-glsp/glsp#1339 - Fix elements moving during resizing when hitting minimum bounds -- Store calculated minimum size from layouter in element -- Adapt resize so we do not produce invalid sized bounds Fixes eclipse-glsp/glsp#1340 Minor: - Ensure we get proper cursor feedback when hovering over resize handle - Add additional convenience functions - Add origin viewport command for convenience Contributed on behalf of Axon Ivy AG

martin-fleck-at requested a review from tortmayr May 13, 2024 20:16

tortmayr requested changes May 14, 2024

View reviewed changes

martin-fleck-at added 2 commits May 16, 2024 12:22

martin-fleck-at force-pushed the issues/1337-1340 branch from 9229bcb to 7c15c61 Compare May 16, 2024 10:23

tortmayr requested changes May 16, 2024

View reviewed changes

PR Review

eafbadd

- Add missing @param doc - Do not debug decoratable elements - Adapt color of helper line

tortmayr self-requested a review May 16, 2024 12:30

tortmayr approved these changes May 16, 2024

View reviewed changes

tortmayr merged commit a0e5612 into master May 16, 2024
6 checks passed

tortmayr deleted the issues/1337-1340 branch June 15, 2024 17:34

tortmayr added the changelog label Jun 21, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve handling of change bounds in several areas #344

Improve handling of change bounds in several areas #344

martin-fleck-at commented May 13, 2024

tortmayr left a comment

martin-fleck-at commented May 16, 2024

tortmayr left a comment

tortmayr May 16, 2024

martin-fleck-at May 16, 2024

martin-fleck-at May 16, 2024

tortmayr May 16, 2024

martin-fleck-at May 16, 2024

martin-fleck-at commented May 16, 2024

tortmayr left a comment

Improve handling of change bounds in several areas #344

Improve handling of change bounds in several areas #344

Conversation

martin-fleck-at commented May 13, 2024

What it does

How to test

Follow-ups

Changelog

tortmayr left a comment

Choose a reason for hiding this comment

martin-fleck-at commented May 16, 2024

tortmayr left a comment

Choose a reason for hiding this comment

tortmayr May 16, 2024

Choose a reason for hiding this comment

martin-fleck-at May 16, 2024

Choose a reason for hiding this comment

martin-fleck-at May 16, 2024

Choose a reason for hiding this comment

tortmayr May 16, 2024

Choose a reason for hiding this comment

martin-fleck-at May 16, 2024

Choose a reason for hiding this comment

martin-fleck-at commented May 16, 2024

tortmayr left a comment

Choose a reason for hiding this comment