Home » Modeling » Graphiti » How to overlay images
How to overlay images [message #654961] |
Thu, 17 February 2011 13:51  |
Eclipse User |
|
|
|
I use an image and some text to represent nodes in my diagram. I need to add some background image to my nodes when certain condition is true. The background image is larger than the regular node image. But I don't want to change the selection bounding box for the node when the background image is added.
I tried to use negative coordinates for the background image but that image gets clipped by the node bounding box.
Is it possible in Graphiti to render images outside of the node bounding box? Also, if I have multiple images for a node, what's the order in Graphiti to render those images?
Thank you!
|
|
| | | |
Re: How to overlay images [message #658702 is a reply to message #658683] |
Wed, 09 March 2011 09:28   |
Eclipse User |
|
|
|
Hi,
This is as far as I have gotten - I can draw outside the selection bounding box,
by creating a Shape attached to the Diagram, not the Containing Shape. But then if I move the element, the Shape does not move along.
Any suggestions would be much appreciated.
- Jan
@Override public PictogramElement add(IAddContext context)
{
(...)
ContainerShape containerShape = peCreateService.createContainerShape(targetDiagram, true);
// Containing rectangle
Rectangle rectangle = gaService.createInvisibleRectangle(containerShape);
rectangle.setFilled(false); rectangle.setLineVisible(false);
gaService.setLocationAndSize(rectangle, x, y, w, h);
link(containerShape, bo);
// Drawing within selection bounding box - is cropped
Shape shape = peCreateService.createShape(containerShape, false);
Polyline polyline = gaService.createPolyline(shape, ...);
link(shape, bo);
// Drawing outside the selection bounding box - is shown, but not moved
Shape shape2 = peCreateService.createShape(getDiagram(), true);
Polyline polyline = gaService.createPolyline(shape2, ...);
gaService.setLocation(shape2.getGraphicsAlgorithm(), x-20, y-20);
link(shape2, bo);
layoutPictogramElement(containerShape);
return containerShape;
}
|
|
|
Re: How to overlay images [message #658732 is a reply to message #658702] |
Wed, 09 March 2011 10:55   |
Eclipse User |
|
|
|
Jan,
you should create the outer shape as a parent of the outer ContainerShape
(the one that is "visualized" using the invisible rectangle) not the
diagram. This way the shape belongs to the object, in your implementation
the shape is simply another root element.
Michael
"Jan Schoubo" wrote in message news:il82dh$7dd$1@news.eclipse.org...
Hi,
This is as far as I have gotten - I can draw outside the selection bounding
box,
by creating a Shape attached to the Diagram, not the Containing Shape. But
then if I move the element, the Shape does not move along.
Any suggestions would be much appreciated.
- Jan
@Override public PictogramElement add(IAddContext context)
{
(...)
ContainerShape containerShape =
peCreateService.createContainerShape(targetDiagram, true);
// Containing rectangle
Rectangle rectangle =
gaService.createInvisibleRectangle(containerShape);
rectangle.setFilled(false); rectangle.setLineVisible(false);
gaService.setLocationAndSize(rectangle, x, y, w, h);
link(containerShape, bo);
// Drawing within selection bounding box - is cropped
Shape shape = peCreateService.createShape(containerShape, false);
Polyline polyline = gaService.createPolyline(shape, ...);
link(shape, bo);
// Drawing outside the selection bounding box - is shown, but not moved
Shape shape2 = peCreateService.createShape(getDiagram(), true);
Polyline polyline = gaService.createPolyline(shape2, ...);
gaService.setLocation(shape2.getGraphicsAlgorithm(), x-20, y-20);
link(shape2, bo);
layoutPictogramElement(containerShape);
return containerShape;
}
--
Jan Schoubo, schoubo reasoning
|
|
|
Re: How to overlay images [message #658787 is a reply to message #658732] |
Wed, 09 March 2011 13:54   |
Eclipse User |
|
|
|
I modified TutorialAddEClassFeature to illustrate the use of the background image. Here is the code and hope it helps:
[CODE]
public PictogramElement add(IAddContext context)
{
final EClass addedClass = (EClass) context.getNewObject();
final Diagram targetDiagram = (Diagram) context.getTargetContainer();
final IPeCreateService peCreateService = Graphiti.getPeCreateService();
final ContainerShape containerShape = peCreateService.createContainerShape(targetDiagram, true);
// check whether the context has a size (e.g. from a create feature)
// otherwise define a default size for the shape
final int width = context.getWidth() <= 0 ? 65 : context.getWidth();
final int height = context.getHeight() <= 0 ? 90 : context.getHeight();
final IGaService gaService = Graphiti.getGaService();
final Rectangle invisibleRectangle = gaService.createInvisibleRectangle(containerShape);
gaService.setLocationAndSize(invisibleRectangle, context.getX(), context.getY(), width + INVISIBLE_RECT_EXTRA_WIDTH,
height + INVISIBLE_RECT_EXTRA_HEIGHT);
// add the background image to the ghost shape
Shape ghostShape = peCreateService.createShape(containerShape, false);
Image bgImage = gaService.createImage(ghostShape, TutorialImageProvider.IMG_ECLASS_BG);
gaService.setLocationAndSize(bgImage, 0, 0, 105, 102);
// create a rectangle to hold the node image
int offsetX = INVISIBLE_RECT_EXTRA_WIDTH / 2;
int offsetY = INVISIBLE_RECT_EXTRA_HEIGHT;
Rectangle rectangle = gaService.createRectangle(invisibleRectangle);
rectangle.setParentGraphicsAlgorithm(invisibleRectangle);
rectangle.setFilled(false);
rectangle.setLineVisible(false);
gaService.setLocationAndSize(rectangle, offsetX, offsetY, width, height);
Shape imageShape = peCreateService.crfinal int height = context.getHeight() <= 0 ? 90 : context.getHeight();
final IGaService gaService = Graphiti.getGaService();
final Rectangle invisibleRectangle = gaService.createInvisibleRectangle(containerShape);
gaService.setLocationAndSize(invisibleRectangle, context.getX(), context.getY(), width + INVISIBLE_RECT_EXTRA_WIDTH,
height + INVISIBLE_RECT_EXTRA_HEIGHT);
// add the background image to the ghost shape
Shape ghostShape = peCreateService.createShape(containerShape, false);
Image bgImage = gaService.createImage(ghostShape, TutorialImageProvider.IMG_ECLASS_BG);
gaService.setLocationAndSize(bgImage, 0, 0, 105, 102);
// create a rectangle to hold the node image
int offsetX = INVISIBLE_RECT_EXTRA_WIDTH / 2;
int offsetY = INVISIBLE_RECT_EXTRA_HEIGHT;
Rectangle rectangle = gaService.createRectangle(invisibleRectangle);
rectangle.setParentGraphicsAlgorithm(invisibleRectangle);
rectangle.setFilled(false);
rectangle.setLineVisible(false);
gaService.setLocationAndSize(rectangle, offsetX, offsetY, width, height);
Shape imageShape = peCreateService.createShape(containerShape, false);
Image nodeImage = gaService.createImage(imageShape, TutorialImageProvider.IMG_ECLASS);
gaService.setLocationAndSize(nodeImage, offsetX, offsetY, 65, 71);
if (addedClass.eResource() == null)
{
getDiagram().eResource().getContents().add(addedClass);
}
// create link and wire it
link(
|
|
|
Re: How to overlay images [message #658792 is a reply to message #658732] |
Wed, 09 March 2011 14:27   |
Eclipse User |
|
|
|
Michael,
Thanks, I have tried following your suggestion, by putting an extra ContainerShape between the diagram and the drawing shapes:
ContainerShape outercontainerShape = peCreateService.createContainerShape(targetDiagram, true);
ContainerShape containerShape = peCreateService.createContainerShape(outercontainerShape, false);
Now I can draw my "real" symbol in the inner container, and the "extras" in the outer,
cropping now works, and the whole drawing moves as one when I drag it,
However, when I click on any line - "real" or "extra" - I select the element, and the bounding box shows the outer limit. I would like the selection to be only "live" for the "real" part - and I think that is what Shenxue's code tries to show.
Shenxue,
Thanks for the sample, but it was garbled (probably a paste too many)?
Can you repost?
Many thanks to you both!
|
|
|
Re: How to overlay images [message #658812 is a reply to message #658792] |
Wed, 09 March 2011 16:30   |
Eclipse User |
|
|
|
You can change the selection bounding box for a node by overriding getSelectionBorder() method in your tool behavior provider. The EClass tutorial sample had an example of it:
@Override
public GraphicsAlgorithm getSelectionBorder(PictogramElement pe) {
IFeatureProvider featureProvider = getFeatureProvider();
Object bo = featureProvider.getBusinessObjectForPictogramElement(pe);
if (bo instanceof EClass) {
GraphicsAlgorithm invisible = pe.getGraphicsAlgorithm();
EList<GraphicsAlgorithm> graphicsAlgorithmChildren = invisible.getGraphicsAlgorithmChildren();
if (!graphicsAlgorithmChildren.isEmpty()) {
return graphicsAlgorithmChildren.get(0);
}
}
return super.getSelectionBorder(pe);
}
The code I pasted earlier was cut off. Here is the code being cut off:
Shape imageShape = peCreateService.createShape(containerShape, false);
Image nodeImage = gaService.createImage(imageShape, TutorialImageProvider.IMG_ECLASS);
gaService.setLocationAndSize(nodeImage, offsetX, offsetY, 65, 71);
if (addedClass.eResource() == null)
{
getDiagram().eResource().getContents().add(addedClass);
}
// create link and wire it
link(containerShape, addedClass);
// SHAPE WITH TEXT
{
// create shape for text
final Shape textShape = peCreateService.createShape(containerShape, false);
// create and set text graphics algorithm
final Text text = gaService.createText(textShape, addedClass.getName());
text.setStyle(StyleUtil.getStyleForEClassText(getDiagram()));
text.setHorizontalAlignment(Orientation.ALIGNMENT_CENTER);
text.setVerticalAlignment(Orientation.ALIGNMENT_CENTER);
gaService.setLocationAndSize(text, offsetX , offsetY + 70, width, 20);
// create link and wire it
link(textShape, addedClass);
}
// add a chopbox anchor to the shape
peCreateService.createChopboxAnchor(containerShape);
return containerShape;
|
|
|
Re: How to overlay images [message #659065 is a reply to message #658812] |
Thu, 10 March 2011 15:47   |
Eclipse User |
|
|
|
Thanks Michael, Shenxue,
I can now get exactly the visual appearance I want (with cleaner code), but I still miss the smaller selection box - it keeps showing the "full" box, corresponding to the top-level ContainerShape based on the targetDiagram.
Below are the main parts of the add() routine and the getSelectionBorder of the ToolBehaviourProvider.
The log from a typical run always print:
getSelectionBorder
Is Track...
GA: 140x140 at x,y (which corresponds to the outer box size)
but never the follow-on "Has children", which indicates that my
pe.getGraphicsAlgorithm().getGraphicsAlgorithmChildren() has no children?
I am probably missing something obvious?
Is there any utility method to dump out the while Pictogram/GraphicsAlgorithm structure in an understandable format?
- Jan
....
ContainerShape containerShape = peCreateService.createContainerShape(targetDiagram, true);
link(containerShape, businessobject);
// Containing rectangle
Rectangle outerRectangle = gaService.createInvisibleRectangle(containerShape);
outerRectangle.setFilled(false);
outerRectangle.setLineVisible(false);
gaService.setLocationAndSize(outerRectangle, ...);
ContainerShape innerContainerShape = peCreateService.createContainerShape(containerShape, false);
// Selection box
Rectangle innerRectangle = gaService.createInvisibleRectangle(innerContainerShape);
innerRectangle.setFilled(false);
innerRectangle.setLineVisible(false);
gaService.setLocationAndSize(innerRectangle, ...);
// Visible lines in the element
Polyline polyline = gaService.createPolyline(innerRectangle, new int[]{...});
// Visible lines outside the element
Polyline polyline = gaService.createPolyline(containerShape, new int[]{...});
// also tried = gaService.createPolyline(outerRectangle, new int[]{...});
gaService.setLocationAndSize(containerShape.getGraphicsAlgorithm(), ...);
businessobject.setX(...);
businessobject.setY(...);
@Override
public GraphicsAlgorithm getSelectionBorder(PictogramElement pe)
{
System.out.println("getSelectionBorder");
IFeatureProvider featureProvider = getFeatureProvider();
Object bo = featureProvider.getBusinessObjectForPictogramElement(pe);
if (bo instanceof Track)
{
System.out.println(" Is Track...");
GraphicsAlgorithm outerElement = pe.getGraphicsAlgorithm();
System.out.println(" GA: "+outerElement.getWidth()+"x"+outerElement.getHeight()+" at "+outerElement.getX()+","+outerElement.getY());
EList<GraphicsAlgorithm> graphicsAlgorithmChildren = outerElement.getGraphicsAlgorithmChildren();
if (!graphicsAlgorithmChildren.isEmpty())
{
System.out.println(" Has children...");
GraphicsAlgorithm innerElement = graphicsAlgorithmChildren.get(0);
return innerElement;
}
}
return super.getSelectionBorder(pe);
}
|
|
| | |
Re: How to overlay images [message #659175 is a reply to message #659065] |
Fri, 11 March 2011 06:48  |
Eclipse User |
|
|
|
You can switch on a generic outline for your diagram showing all graphical
elements in their nesting structure. Simply setin the Eclipse preferences
under "Graphiti Test Preferences" the flag "Use generic outline view". This
requires the examples common plugiin installed.
Michael
"Jan Schoubo" wrote in message news:ilbd16$nrc$1@news.eclipse.org...
Thanks Michael, Shenxue,
I can now get exactly the visual appearance I want (with cleaner code), but
I still miss the smaller selection box - it keeps showing the "full" box,
corresponding to the top-level ContainerShape based on the targetDiagram.
Below are the main parts of the add() routine and the getSelectionBorder of
the ToolBehaviourProvider.
The log from a typical run always print:
getSelectionBorder
Is Track...
GA: 140x140 at x,y (which corresponds to the outer box size)
but never the follow-on "Has children", which indicates that my
pe.getGraphicsAlgorithm().getGraphicsAlgorithmChildren() has no children?
I am probably missing something obvious?
Is there any utility method to dump out the while
Pictogram/GraphicsAlgorithm structure in an understandable format?
- Jan
....
ContainerShape containerShape =
peCreateService.createContainerShape(targetDiagram, true);
link(containerShape, businessobject);
// Containing rectangle
Rectangle outerRectangle =
gaService.createInvisibleRectangle(containerShape);
outerRectangle.setFilled(false);
outerRectangle.setLineVisible(false);
gaService.setLocationAndSize(outerRectangle, ...);
ContainerShape innerContainerShape =
peCreateService.createContainerShape(containerShape, false);
// Selection box
Rectangle innerRectangle =
gaService.createInvisibleRectangle(innerContainerShape);
innerRectangle.setFilled(false);
innerRectangle.setLineVisible(false);
gaService.setLocationAndSize(innerRectangle, ...);
// Visible lines in the element
Polyline polyline = gaService.createPolyline(innerRectangle, new
int[]{...});
// Visible lines outside the element
Polyline polyline = gaService.createPolyline(containerShape, new
int[]{...});
// also tried = gaService.createPolyline(outerRectangle, new
int[]{...});
gaService.setLocationAndSize(containerShape.getGraphicsAlgor ithm(),
....);
businessobject.setX(...);
businessobject.setY(...);
@Override
public GraphicsAlgorithm getSelectionBorder(PictogramElement pe)
{
System.out.println("getSelectionBorder");
IFeatureProvider featureProvider = getFeatureProvider();
Object bo = featureProvider.getBusinessObjectForPictogramElement(pe);
if (bo instanceof Track)
{
System.out.println(" Is Track...");
GraphicsAlgorithm outerElement = pe.getGraphicsAlgorithm();
System.out.println(" GA:
"+outerElement.getWidth()+"x"+outerElement.getHeight()+" at
"+outerElement.getX()+","+outerElement.getY());
EList<GraphicsAlgorithm> graphicsAlgorithmChildren =
outerElement.getGraphicsAlgorithmChildren();
if (!graphicsAlgorithmChildren.isEmpty())
{
System.out.println(" Has children...");
GraphicsAlgorithm innerElement = graphicsAlgorithmChildren.get(0);
return innerElement;
}
}
return super.getSelectionBorder(pe);
}
--
Jan Schoubo, schoubo reasoning
|
|
|
Goto Forum:
Current Time: Wed Jul 23 08:48:58 EDT 2025
Powered by FUDForum. Page generated in 0.12944 seconds
|