cytoscape.js icon indicating copy to clipboard operation
cytoscape.js copied to clipboard

rotation of node

Open captain-Akshay opened this issue 9 months ago • 15 comments

Description of new feature i wanted to rotate the node using a button as other canvas does but cytoscape is not having this style property of "rotation" or "transform" it would be great to have it

For reviewers

Reviewers should ensure that the following tasks are carried out for incorporated issues:

  • [ ] Ensure that the reporter has adequately described their idea. If not, elicit more information about the use case. You should iteratively build a spec together.
  • [ ] Ensure that the issue is a good fit for the core library. Some things are best done in extensions (e.g. UI-related features that aren't style-related). Some things are best done by app authors themselves -- instead of in Cytoscape libraries.
  • [ ] The issue has been associated with a corresponding milestone.
  • [ ] The commits have been incorporated into the unstable branch via pull request. The corresponding pull request is cross-referenced.

captain-Akshay avatar Nov 17 '23 12:11 captain-Akshay

What would this proposed feature rotate precisely? Which properties? Which behaviour?

maxkfranz avatar Nov 17 '23 14:11 maxkfranz

#2913 elaborated here . The thing i m saying is that i m working my multiple node for different shapes and i want to put a button over the node to rotate it on the z-axis but there is no style exposed for the node to rotate here..that's why it would be great and highly appreciated if you could add them in the style!

@maxkfranz

captain-Akshay avatar Nov 17 '23 15:11 captain-Akshay

And i apologies for such short and lame request @maxkfranz

captain-Akshay avatar Nov 17 '23 15:11 captain-Akshay

This still needs more scoping.

What other properties would be affected, e.g. labels?

Go through the documentation and build a list of affected properties and specify what the behaviour would be in tandem with your proposed property. Show mockups of different combinations. Note any edge cases to consider.

maxkfranz avatar Nov 22 '23 14:11 maxkfranz

@maxkfranz Upon observing other canvases with similar options, I have noted the following commonalities:

  • Nodes typically have the ability to rotate in a fixed position.
  • Labels generally remain in a consistent position.
  • The position of the label (bottom, left, right, or top) is user-dependent.

It is essential to consider the following edge cases:

  • The edge connected to the node should maintain its position without undergoing rotation.
  • If the label is at the bottom, it should remain in the same position unless the user opts to rotate it along with the node.

To address this, I propose exposing a rotation property in the node style, allowing users to control the degree of rotation while maintaining a fixed position.

P.S. I'm not good with figma so can't share any mockup sorry.

captain-Akshay avatar Nov 23 '23 15:11 captain-Akshay

What about all the other, related properties, like background images?If you can’t use Figma, you’re welcome to upload pen and paper mockups, photographed with your mobile phone. On Nov 23, 2023, at 10:41, Akshay Sharma @.***> wrote: @maxkfranz Upon observing other canvases with similar options, I have noted the following commonalities:

Nodes typically have the ability to rotate in a fixed position. Labels generally remain in a consistent position. The position of the label (bottom, left, right, or top) is user-dependent.

It is essential to consider the following edge cases:

The edge connected to the node should maintain its position without undergoing rotation. If the label is at the bottom, it should remain in the same position unless the user opts to rotate it along with the node.

To address this, I propose exposing a rotation property in the node style, allowing users to control the degree of rotation while maintaining a fixed position. P.S. I'm not good with figma so can't share any mockup sorry.

—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: @.***>

maxkfranz avatar Nov 27 '23 13:11 maxkfranz

What about all the other, related properties, like background images?If you can’t use Figma, you’re welcome to upload pen and paper mockups, photographed with your mobile phone.

@captain-Akshay, any thoughts on the above?

maxkfranz avatar Dec 07 '23 18:12 maxkfranz

@maxkfranz yes the background Image will rotate itself else what's the point rotating a circular shape :). For mockup: we can make the edge fixed or movable based which ever one is easier

Screencast from 2023-12-08 00-13-11.webm

captain-Akshay avatar Dec 07 '23 18:12 captain-Akshay

I can imagine other use cases where the dev just wants the shape rotated -- and where having the images rotated would not be desirable.

So, it's important that we consider the interplay of the (many) other properties on nodes if we're to introduce a rotation property.

The least invasive option would be to support only a property like shape-rotation, where only the shape is rotated. It's explicit and the user expectations would be in line with how it works, whereas more complex rotation options may not (e.g. do the edge endpoints get rotated -- some people would expect yes, others no).

maxkfranz avatar Dec 08 '23 14:12 maxkfranz

Oh yes! there might be cases to rotate only the outer border than the inner image if can expose all the aspect then that would be great!

background-rotation shape-rotation edge-rotation only if possible controlling all the aspect together would be easier too if all of them are exposed. based on user the top 2 would suffice all the aspect.

captain-Akshay avatar Dec 10 '23 19:12 captain-Akshay

Unless there's a clear use case for your proposed edge-rotation, how about we focus solely on background-rotation and shape-rotation for now?

maxkfranz avatar Dec 12 '23 18:12 maxkfranz

yeah edge-rotation have only some particular use cases we can ignore that and focus on the other two! it's great to have the other two!

captain-Akshay avatar Dec 12 '23 20:12 captain-Akshay

Great. I look forward to seeing your PR. Best to start with shape-rotation, as background-rotation could be handled in a second PR.

maxkfranz avatar Dec 13 '23 17:12 maxkfranz

sure let me try doing that!

captain-Akshay avatar Dec 13 '23 23:12 captain-Akshay

This issue has been automatically marked as stale, because it has not had activity within the past 14 days. It will be closed if no further activity occurs within the next 7 days. If a feature request is important to you, please consider making a pull request. Thank you for your contributions.

stale[bot] avatar Dec 28 '23 00:12 stale[bot]

This issue has been automatically marked as stale, because it has not had activity within the past 14 days. It will be closed if no further activity occurs within the next 7 days. If a feature request is important to you, please consider making a pull request. Thank you for your contributions.

stale[bot] avatar Mar 13 '24 04:03 stale[bot]