Eclipse Community Forums: Graphiti » Setting anchors on the inner shape

Help

Home

Home » Modeling » Graphiti » Setting anchors on the inner shape

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

Setting anchors on the inner shape [message #1755770]

Tue, 07 March 2017 18:37

Alex Kravets

Messages: 561
Registered: November 2009

Senior Member

I am trying to create a figure that has an image an a text underneath the image. For this I have a ContainerShape that has two Shapes in it - Image and Text. Text can be edited and its Container should grow with it. One of the requirements in that the Image hosts Anchors - connection goes through main ContainerShape and hits the Image boundary. I have this working partially as you can see from screenshot below.

Issues I am having are these:

The action pad pops up not only around Image, but around ContainerShape and Text as well. I'd like the Image to be the "main figure".

When I drag the figure by clicking on the Image first, I am able to move it outside of the boundaries of ContainerShape (right side of the screenshot). I want to be able to move the whole figure - Image, Text and Container by dragging the Image. Should I implement my own MoveFeature for this?

Can someone point out what am I doing wrong?

Here the my code:

public PictogramElement add(IAddContext context) {
		ContainerShape containerShape = Graphiti.getPeCreateService().createContainerShape(context.getTargetContainer(), true);
		IPeCreateService peCreateService = Graphiti.getPeCreateService();
		IGaService gaService = Graphiti.getGaService();
		
		Rectangle rectangle = gaService.createRectangle(containerShape);
		gaService.setLocationAndSize(rectangle, context.getX(), context.getY(), 60, 60);
		rectangle.setLineWidth(2);
		rectangle.setStyle(StyleUtil.getStyleForEClass(getDiagram()));
		
		ObjectType object = (ObjectType) context.getNewObject();
		Shape imageShape = peCreateService.createContainerShape(containerShape, true);
		
		Image image = gaService.createImage(imageShape, imageProvider.resolveComponentImage(object.getId()));
		gaService.setLocationAndSize(image, 15, 10, 25, 30);
		
		final ChopboxAnchor newAnchor = peCreateService.createChopboxAnchor(imageShape);

		int width = context.getWidth() < MIN_SIZE ? MIN_SIZE : context.getWidth();
		int height = context.getHeight() < MIN_SIZE ? MIN_SIZE : context.getHeight();

		Shape shape = peCreateService.createShape(containerShape, false);
		
		Text text = gaService.createText(shape, object.getName());
        text.setForeground(gaService.manageColor(getDiagram(), IColorConstant.BLACK));
        text.setHorizontalAlignment(Orientation.ALIGNMENT_CENTER ); 
        // vertical alignment has as default value "center"
        text.setFont(gaService.manageDefaultFont(getDiagram(), false, true));
        gaService.setLocationAndSize(text, 5, 40, 50, 20);
        
        IDirectEditingInfo directEditingInfo =
                getFeatureProvider().getDirectEditingInfo();
            // set container shape for direct editing after object creation
            directEditingInfo.setMainPictogramElement(containerShape);
            // set shape and graphics algorithm where the editor for
            // direct editing shall be opened after object creation
            directEditingInfo.setPictogramElement(shape);
            directEditingInfo.setGraphicsAlgorithm(text);
 
        // create link and wire it
        link(shape, object);

		layoutPictogramElement(containerShape);

		final Connection targetConnection = context.getTargetConnection();
		if (targetConnection != null) {
			gaService.setLocation(containerShape.getGraphicsAlgorithm(), context.getX() - (width / 2), context.getY() - (height / 2));

			Anchor oldEndAnchor = targetConnection.getEnd();
			targetConnection.setEnd(newAnchor);

			Connection connection = peCreateService.createManhattanConnection(getDiagram());
			ConnectionDecorator cd = peCreateService.createConnectionDecorator(connection, false, 1.0, true);
			StyleUtil.createRightArrow(cd);
			Polyline p = gaService.createPolyline(connection);

			GraphicsAlgorithm targetConnectionGraphicsAlgorithm = targetConnection.getGraphicsAlgorithm();
			p.setLineWidth(targetConnectionGraphicsAlgorithm.getLineWidth());
			p.setForeground(targetConnectionGraphicsAlgorithm.getForeground());
			p.setLineStyle(targetConnectionGraphicsAlgorithm.getLineStyle());

			connection.setStart(newAnchor);
			connection.setEnd(oldEndAnchor);
		}

		
		// Create an italic font to use it later in the rich tooltip
		gaService.manageFont(getDiagram(), IGaService.DEFAULT_FONT, IGaService.DEFAULT_FONT_SIZE, true, false);

		return containerShape;
	}

[Updated on: Tue, 07 March 2017 19:16]

Report message to a moderator

Re: Setting anchors on the inner shape [message #1755783 is a reply to message #1755770]

Wed, 08 March 2017 07:20

Michael Wenz

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

Senior Member

Alex,

there are different options to implement this:
1) You can male the image and text inactive, but still have anchors on them. The rectangle would only have a ChopboxAnchor that would enable dragging connections to the shape. In the CreateConnection feature you would then redirect the connection to the anchor on the image. That would also make the speed buttons appear around the rectangle only.
2) Keep the inner shapes active, but implement your own move feature for them that would move the outer rectangle.

Independent of what you choose above you may influence where the speed button appear by overriding the method getSelectionBorder in your tool behavior provider.

HTH,
Michael

Report message to a moderator

Re: Setting anchors on the inner shape [message #1755868 is a reply to message #1755783]

Wed, 08 March 2017 17:49

Alex Kravets

Messages: 561
Registered: November 2009

Senior Member

Thanks Michael your suggestions helped a lot.

Here is my solution for those who might need it, this is based on my shape definition above. I went ahead with implementing my own MoveShapeFeature as it seemed more straight forward.

I ended up overriding MoveShapeFeature.internalMove(IMoveShapeContext context) method:

protected void internalMove(IMoveShapeContext context) {
		GraphicsAlgorithm graphicsAlgorithm = context.getShape().getGraphicsAlgorithm();
		if(graphicsAlgorithm instanceof Image){
			Shape shape = context.getShape();
			ContainerShape container = shape.getContainer();
			MoveShapeContext moveContext = new MoveShapeContext(container);
			moveContext.setSourceContainer(container);
			moveContext.setTargetContainer(container);
			
			int deltaX = context.getDeltaX();
			int deltaY = context.getDeltaY();
			
			moveContext.setX(deltaX);
			moveContext.setY(deltaY);
			
			super.internalMove(moveContext);
		}
                ...
                ...
}

I also overrode DefaultToolBehaviorProvider.getSelection(PictogramElement pe, PictogramElement[] oldSelection) so that when user selects outer ContainerShape, the one that hosts Image and Text, it's not getting select so not to confuse the user. This delegates selection to diagram if Rectangle whose lines are invisible is selected. This is a bit broad as it would affect all Rectangles, so better solution would be to perhaps to attach a Property to Rectangle that signals that it cannot be selected and check this property here.

public PictogramElement getSelection(PictogramElement pe, PictogramElement[] oldSelection) {
		GraphicsAlgorithm graphicsAlgorithm = pe.getGraphicsAlgorithm();
		if(graphicsAlgorithm instanceof Rectangle){
			Boolean lineVisible = ((Rectangle)graphicsAlgorithm).getLineVisible();
			if(!lineVisible){
				return getDiagramTypeProvider().getDiagram();
			}
		}
		return super.getSelection(pe, oldSelection);
}

Here is final result