Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

#2216 S-Group pop-up tool tip is positioned so that it overlaps structure #2289

Merged

Conversation

Konstantin1996
Copy link
Collaborator

@Konstantin1996 Konstantin1996 commented Mar 1, 2023

What was done?

For now it calculates according to the green rectangle that appears when user hovering over the element. Function calculateMiddleCoordsForRect calculate middle coord for each side of the rect. After that panel appears relativly to the middle point of side.

Panel info is always in the bottom if it is center of the page.

image
image

Close to borders
image
image
image

  • created WrapperPositionedRelativeToRectangle component.
  • moved calculateScrollOffsetX , calculateScrollOffsetY into helpers.ts to reduce code duplication
  • created calculateMiddleCoordsForRect accepts array of arrays [[1,2], [3,4], [3,4]] => [{ x: 2, y: 3 }, { x: 3, y: 4}]
  • added wrapperRef on div to get dinamically changed width / height of the element

Please, review and add to the q

…ate structure calculation do not change at all.

For now it calculates according to the green rectangle that appears when user hovering over the element.
Function calculateMiddleCoordsForRect calculate middle coord for each side of the rect.
After that panel appears relativly to the middle point of side.

- created WrapperPositionedRelativeToRectangle component.
- moved calculateScrollOffsetX , calculateScrollOffsetY into helpers.ts to reduce code duplication
- created calculateMiddleCoordsForRect accepts array of arrays [[1,2], [3,4], [3,4]] => [{ x: 2, y: 3 }, { x: 3, y: 4}]
- added wrapperRef on div to get dinamically changed width / height of the element
@Konstantin1996 Konstantin1996 changed the title Change Calculation of the position for InfoPanel component. For template structure calculation do not change at all. #2216 S-Group pop-up tool tip is positioned so that it overlaps structure Mar 1, 2023
(line) => line.slice(1)
)

const [mLeftSide, mBottomSide, mRightSide, mTopSide] =
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What does the 'm' prefix mean in variable names? :)

const viewportRightLimit =
render?.clientArea?.clientWidth - BAR_PANEL_SIZE - width

// We need to remove first element of the path. Example of the path => ['M', 23, 43]
Copy link
Collaborator

@KonstantinEpam23 KonstantinEpam23 Mar 6, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just curious, why do we need to remove it? Looks like we are just picking it?

@KonstantinEpam23 KonstantinEpam23 merged commit 3e78f98 into master Mar 8, 2023
@KonstantinEpam23 KonstantinEpam23 deleted the #2216-s-group-pop-up-tool-tip-is-positioned branch March 8, 2023 07:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

S-Group pop-up tool tip is positioned so that it overlaps structure
2 participants