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

74 Add Edge Toolbar and Edge Pop Over for Editing Edges #94

Open
wants to merge 5 commits into
base: main
Choose a base branch
from

Conversation

kurunbelemir
Copy link
Collaborator

Checklist

  • I linked PR with a related issue
  • I added multiple screenshots/screencasts of my UI changes

Motivation and Context

As a user, I would like to be able to change my edge types, swap my target and source ends of my path, specifiy role and multiplicity of the path ends so that I can show realionship between the components.

This PR completes https://github.com/ls1intum/Apollon2/issues/xx

Description

Custom Toolbar and Popover is created.
Toolbar contains edit and delete icons.
Popover is used for Edge type changes, target-source swap, Role and Multiplicity Label.
Color functionality will be added later on.

Steps for Testing

  1. Click Toolbar and click edit button.
  2. Change Role and Multiplicity and see the updated edge.
  3. Change Edge position, swap source and target and see if the changes are consistent.
  4. Create new edge and change the edge type.
  5. Click delete button and see if edge is removed correctly.

Screenshots

image image

@kurunbelemir kurunbelemir added the enhancement New feature or request label Feb 3, 2025
@kurunbelemir kurunbelemir requested a review from egenerse February 3, 2025 13:40
@kurunbelemir kurunbelemir self-assigned this Feb 3, 2025
@kurunbelemir kurunbelemir linked an issue Feb 3, 2025 that may be closed by this pull request
Copy link
Collaborator

@egenerse egenerse left a comment

Choose a reason for hiding this comment

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

  • Bidirectional edge target edge is off from the node.
  • Custom Edge toolbar doesn't disappear when I click out
  • Change edge direction changes connected handles
  • Source and target multiplicity role placements are over nodes
  • After selecting new edge type popover closes, it should remain open
Screen.Recording.2025-02-03.at.21.02.13.mov

Comment on lines 121 to 122
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
Copy link
Collaborator

Choose a reason for hiding this comment

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

Do we need these state handlers for hover? Can't we define a class and add it to the app.css file to handle hover from there?

library/lib/hooks/useConnect.ts Outdated Show resolved Hide resolved
library/lib/hooks/useEdges.ts Outdated Show resolved Hide resolved
library/lib/initialElements.ts Outdated Show resolved Hide resolved
library/lib/utils/edgeUtils.ts Outdated Show resolved Hide resolved
library/lib/edges/AggregationEdge.tsx Outdated Show resolved Hide resolved
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
Status: Backlog
Development

Successfully merging this pull request may close these issues.

Edit Edge
2 participants