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

`source-endpoint` & `target-endpoint` to specify the intersection/starting/ending points of an edge #1613

Closed
maxkfranz opened this Issue Nov 21, 2016 · 3 comments

Comments

Projects
None yet
2 participants
@maxkfranz
Member

maxkfranz commented Nov 21, 2016

source-endpoint & target-endpoint : Specifies the endpoint of the source side of the edge and the target side of the edge, respectively. There are several options for how those properties can be set:

  • A special, named value may be used.
    • outside-to-node (default) indicates that the edge should be placed automatically to point towards the node's position and be placed on the outside of the node's shape.
    • inside-to-node indicates the edge should go all the way inside the node and point directly on the node's position. This is the same as specifying 0 0.
    • outside-to-line indicates the edge endpoint should be placed outside the node's shape where it would intersect the imaginary line from the source position to the target position. This value is useful for automatically avoiding invalid cases for bezier edges, especially with compound nodes.
  • Two numbers may specify the endpoint. The numbers indicate a position relative to the source node's position. The numbers can be specified as percent values (e.g. 50%, which are relative to the node's width and height respectively) or as absolute distances (e.g. 100px or 2em).
  • A single angle value (e.g. 90deg or 1.57rad) may specify that the endpoint should be placed at where the line formed from the node's position with the specified angle would intersect the node's shape. The angle starts at 12 o'clock and progresses clockwise.

Endpoint modification is not supported for curve-style: haystack edges for performance reasons.

@maxkfranz maxkfranz added this to the 3.1.0 milestone Nov 21, 2016

@maxkfranz maxkfranz changed the title from Specify the to Specify the intersection points of an edge Nov 21, 2016

@maxkfranz maxkfranz changed the title from Specify the intersection points of an edge to Specify the intersection/starting/ending points of an edge Nov 21, 2016

@maxkfranz maxkfranz changed the title from Specify the intersection/starting/ending points of an edge to Style properties to specify the intersection/starting/ending points of an edge Nov 21, 2016

@maxkfranz maxkfranz changed the title from Style properties to specify the intersection/starting/ending points of an edge to `source-direction-*` : Style properties to specify the intersection/starting/ending points of an edge Nov 21, 2016

@maxkfranz maxkfranz changed the title from `source-direction-*` : Style properties to specify the intersection/starting/ending points of an edge to `source-direction-*` to specify the intersection/starting/ending points of an edge Nov 21, 2016

@maxkfranz maxkfranz changed the title from `source-direction-*` to specify the intersection/starting/ending points of an edge to `source-direction-*` & `target-direction-*` to specify the intersection/starting/ending points of an edge Nov 21, 2016

@maxkfranz maxkfranz changed the title from `source-direction-*` & `target-direction-*` to specify the intersection/starting/ending points of an edge to `source-endpoint` & `target-endpoint` to specify the intersection/starting/ending points of an edge Nov 22, 2016

maxkfranz added a commit that referenced this issue Jan 5, 2017

`source-endpoint` & `target-endpoint` to specify the intersection/sta…
…rting/ending points of an edge #1613

- parsed style properties of type `multiple` have separate `value` and `pfValue`
- adds `singleEnum` style property type
- percent style property values normalised on [0, 1] for `pfValue`
-

maxkfranz added a commit that referenced this issue Jan 5, 2017

@maxkfranz maxkfranz closed this Jan 5, 2017

maxkfranz added a commit that referenced this issue Jan 5, 2017

@metincansiper

This comment has been minimized.

Show comment
Hide comment
@metincansiper

metincansiper Apr 7, 2017

Contributor

@maxkfranz I tried this feature. It worked well for me when any one of the source or target nodes is a compound. However, it does not work for me when both of them are simple.

I added the following to my stylesheet

                 {
                   selector: 'edge',
                   style: {
   		  'source-endpoint': '70% 0%',
                         'target-endpoint': '-70% 0%'
                   }
                 }

And I get the following output

ekran alintisi

However if I remove the 'glyph2' (so 'glyph1' become a simple node and no compound node remains) I get the following output.

ekran alintisi

Am I doing something wrong or is there a bug here?

Thanks

Contributor

metincansiper commented Apr 7, 2017

@maxkfranz I tried this feature. It worked well for me when any one of the source or target nodes is a compound. However, it does not work for me when both of them are simple.

I added the following to my stylesheet

                 {
                   selector: 'edge',
                   style: {
   		  'source-endpoint': '70% 0%',
                         'target-endpoint': '-70% 0%'
                   }
                 }

And I get the following output

ekran alintisi

However if I remove the 'glyph2' (so 'glyph1' become a simple node and no compound node remains) I get the following output.

ekran alintisi

Am I doing something wrong or is there a bug here?

Thanks

@maxkfranz

This comment has been minimized.

Show comment
Hide comment
@maxkfranz

maxkfranz Apr 10, 2017

Member

Works fine for me. Maybe you forgot to specify the curve style

Member

maxkfranz commented Apr 10, 2017

Works fine for me. Maybe you forgot to specify the curve style

@metincansiper

This comment has been minimized.

Show comment
Hide comment
@metincansiper

metincansiper Apr 11, 2017

Contributor

Sorry, it is my mistake. It works fine when curve style is specified.

Contributor

metincansiper commented Apr 11, 2017

Sorry, it is my mistake. It works fine when curve style is specified.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment