Eclipse Community Forums: Graphiti » Quartz Composer-like style

Help

Home

Home » Modeling » Graphiti » Quartz Composer-like style

Show: Today's Messages :: Show Polls :: Message Navigator

Quartz Composer-like style [message #1757861]

Mon, 20 March 2017 19:59

Ron Koerner

Messages: 7
Registered: August 2010

Junior Member

I need a graphical editor in the style of Apple's Quartz Composer:

From what I can see from the documentation Graphiti is not an immediate fit for that.

So my question is: can Graphiti be configured to look like that without twisting it beyond recongnition or would it be easier to build myself based GEF4/Zest?

Report message to a moderator

Re: Quartz Composer-like style [message #1757876 is a reply to message #1757861]

Tue, 21 March 2017 07:29

Michael Wenz

Messages: 1931
Registered: July 2009
Location: Walldorf, Germany

Senior Member

Ron,

well, to some extend:
- Connections will always be in the front of any shape (also for the connection points inside the shapes)
- Spline like connections are possible, but would probably need to before-hand experiments to get them looking and behaving as above.
- The rest of the appearance should be achievable.

Open question is the behavior of the diagram and user feedback which cannot be seen in the diagram.

HTH,
Michael

Report message to a moderator

Re: Quartz Composer-like style [message #1757905 is a reply to message #1757876]

Tue, 21 March 2017 15:23

Ron Koerner

Messages: 7
Registered: August 2010

Junior Member

Hi Michael,

thanks for the quick response.

I'd even prefer the start and end of the connections to be in front, but the middle part would be better below shapes. Well, let's see how it works, maybe I can live with that.

Actually the only hard requirements would be:
1. shapes have labeled connectors with fixed positions inside the shape
2. connectors can have different colors
3. clicking a connector and dragging it to another connector will create a connection (if the "types"/colors of the connectors are compatible)

I think, 2 and 3 are fine, but I could not see how to do 1. All I've seen were connectors where the user could move everything around.

Can you point me into the correct direction?

Thanks,
Ron

Report message to a moderator

Re: Quartz Composer-like style [message #1757976 is a reply to message #1757905]

Wed, 22 March 2017 13:26

Michael Wenz

Messages: 1931
Registered: July 2009
Location: Walldorf, Germany

Senior Member

Ron,

1. can be achieved with a ContainerShape with a not visible Rectangle having a Shape with a circle for the connector and a Text inside. The inner Shape with the circle should have an anchor taking the connection and the Container can be made not movable, by providing no move feature for it or where its move feature just disallows all target (canMove returns false).

HTH,
Michael

Report message to a moderator

Re: Quartz Composer-like style [message #1758093 is a reply to message #1757976]

Thu, 23 March 2017 13:21

Ron Koerner

Messages: 7
Registered: August 2010

Junior Member

Thanks. I'll try that.

Report message to a moderator

Re: Quartz Composer-like style [message #1764736 is a reply to message #1758093]

Thu, 01 June 2017 21:31

Ron Koerner

Messages: 7
Registered: August 2010

Junior Member

After a while I actually came around implementing this. I got most of the things working, but I don't know if I did it the best way. So here are the problems I encountered and my solutions:

Anchors:

I provided a null-feature for MoveAnchorFeature, but the anchor is still selectable and movable, it just cannot be dropped anywhere. Anyway, after adding a DragAndDropFeature, the problem is not visible anymore.
I first placed the FixedPointAnchor in an active nested Shape in the ContainerShape, but that caused buttons to appear around it, which I did not want. I solved that by just having one Shape for the whole Rectangle and everything else is either nested GraphicsAlgorithms or FixPointAnchors directly in the ContainerShape. FixedPointAnchor could really need some documentation. I also do not really understand what inactive shapes are for, as the same can be achieved with nested GraphicsAlgorithms.

Spline connectors:

My requirement is that a connector connecting on the left-hand side of the element has a tangent vector of (-1,0) and (1,0) on the right-hand side. This is very complicated to achieve when using a CurveConnector, as it would be necessary to reverse-engineer how it actually works. Is anyone actually using this? It would be ideal if there was a RoutedConnector which accepts a router, so users can make their own routing. While it probably would be possible to add a new connector type, it is discouraged as the class which would be overriden is marked with @noextend (or something like that). What I did was just using a FreeFormConnector with a lot of bend points that are arranged using a hermite spline. I also extended the MoveShapeFeature and LayoutFeature to update the bend points after moving/layouting. This works very nicely now.

General experiences:

- drag and drop was super easy, basically just a single line
- layouting is very complicated, it would probably benefit from some abstraction on top of the drawing primitives
- I haven't found a way to calculate the width of a Text. Is there one?
- I'm using DirectEditing, which works, but the Text field is apparently oriented TOP LEFT, while the actual text is CENTER CENTER. Is it possible to center the input field?

While I cannot share the full code, I can probably answer questions about my implementation and provide code snippets, if someone is interested.

Regards,
Ron

Report message to a moderator

Re: Quartz Composer-like style [message #1765575 is a reply to message #1764736]

Mon, 12 June 2017 14:17

Michael Wenz

Messages: 1931
Registered: July 2009
Location: Walldorf, Germany

Senior Member

Ron,

thanks for the feedback.

For what you wanted to achieve, the inactive shapes and GA nesting behave mostly the same, but there are other (sometimes subtile) differences that rectify both. But I agree that this is complicated and not easy to grasp. And there is for sure a shortage on documenation for this.

Graphiti does does not allow extending the list of connection types. That could be done, but was so far not requested. Adding a route connection type would be possible, but brings the user in rather close contact with GEF, that's why we did not add something like that. But it would of course be a very flexible connection type and I'm basically open for input or contributions here.

Layouting is an old topic that we wanted to address already a while ago, but did never get to it due to its complexity and limited resources for development. But, yes here Graphiti has a big improvement potential...

Text sizes can be calculated with a helper method: GraphitiUi.getUiLayoutService().calculateTextSize(text, textFont)

Regarding the direct editing, I don't think the orientation of the input field can be changed. But this should be aligned with what is set on Text GA side. So I would rather rate this as a bug. Would you file a bug for this?

Michael

Report message to a moderator

Re: Quartz Composer-like style [message #1766829 is a reply to message #1765575]

Tue, 27 June 2017 18:30

Ron Koerner

Messages: 7
Registered: August 2010

Junior Member

Michael,

thanks for the answers. Right now, I'm off to something else right now, but I will be back to this topic soonish, I hope. I'll see that I can create a simple example for the input field problem and maybe a RoutedConnector, which I can address in the bug if it is reproducible.

Regards,
Ron

Report message to a moderator

Previous Topic:	Section is refreshed twice in Propery section
Next Topic:	Creating floating Shape

Goto Forum:

-=] Back to Top [=-

[ Syndicate this forum (XML) ] [

]

Current Time: Fri Oct 04 00:19:52 GMT 2024

.:: Contact :: Home ::.

Breadcrumbs

Sign up to our Newsletter