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

Introduce frame elements #321

Merged
merged 10 commits into from
May 2, 2019
Merged

Introduce frame elements #321

merged 10 commits into from
May 2, 2019

Conversation

pinussilvestrus
Copy link
Contributor

@pinussilvestrus pinussilvestrus commented Apr 24, 2019

This pull request introduces basic frame elements support

  • Allow creating elements with frame character (cf. doc 5e9bca6)
  • Frame elements are only interactable on border (cf. ef732ee)
  • It is not allowed to drop elements on frame borders
  • Add visualization (hover, select, drag.hover, cf. 13cc9f8, 9d81e48)

Relates to bpmn-io/bpmn-js#959
Relates to bpmn-io/bpmn-js#960

Frame Interaction

Apr-30-2019 08-48-26

Prevent dropping on borders

Apr-30-2019 08-57-39

Note

We decided to not include the second (inner) outline to frame element borders, since it could lead to confusions (other tools does not offer it at all). Furthermore, right now we only think about rectangles as possible frame elements. The inner square outline would look weird with circle elements (e.g. when creating custom elements).

Let's try out whether only one outline is enough for the user to determine border-only interaction. When we find out that this is confusing, we could add it in a second iteration. I moved the code to a standalone extension (cf. diagram-js-frame-outline)

@ghost ghost assigned pinussilvestrus Apr 24, 2019
@ghost ghost added the needs review Review pending label Apr 24, 2019
@pinussilvestrus pinussilvestrus changed the title WIP Introduce frame elements Introduce frame elements Apr 30, 2019
@pinussilvestrus
Copy link
Contributor Author

Note for the reviewer: To test in a modeling manner, please refer to the bpmn-js implementation example branch.

@pinussilvestrus pinussilvestrus changed the title Introduce frame elements WIP Introduce frame elements Apr 30, 2019
@pinussilvestrus
Copy link
Contributor Author

Thanks for reviewing! I'll check whether we can rid of the extra stuff by adding the .djs-frame class.

@pinussilvestrus pinussilvestrus changed the title WIP Introduce frame elements Introduce frame elements Apr 30, 2019
Copy link
Contributor

@philippfromme philippfromme left a comment

Choose a reason for hiding this comment

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

I've updated the example to include a frame. 🤙

@philippfromme philippfromme merged commit 2f7a135 into master May 2, 2019
@delete-merged-branch delete-merged-branch bot deleted the frames-v2 branch May 2, 2019 15:35
@ghost ghost removed the needs review Review pending label May 2, 2019
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.

3 participants