DrawLabel wrapping

[tgilbert]

Dear Support,

We are trying to have a rectangle (with a border) in which we display an image and a label. We currently have implemented this using a DrawGroup + 3 children (DrawRect, DrawImage and DrawLabel) and it works.

Our biggest concern is that the label is always drawn in 1 line and it goes outside the rectangle zone of the group.

It's very important for us to have a way to ensure that the label stays inside its frame... How can we do that ? All your examples show the label below the shape, never inside...

-> There's no setWidth() in DrawLabel
-> We cannot use HTML in setContents()
-> setKeepInParentRect() does not help either

Many thanks,
Thomas

[Isomorphic]

What are you hoping for - clipping? wrapping? expanding the DrawRect automatically?

[Isomorphic]

Note that you can use an HTMLFlow or other SmartClient component as a normal child of a DrawPane. That might be the simplest way to proceed, since <canvas> does not support full rendering of HTML (which is why DrawLabel.setContents() do not accept HTML), and the <canvas> spec actually specifically mentions correct text wrapping as a non-goal.

[tgilbert]

Ok. I would have expected to have a way to just set a width constraint to a label, and see the text automatically wrapped if necessary.
I also prefer to not use the classic other SmartGWT widgets because then I'm loosing the knobs, rotation, easy zooming, grouping, etc...

[Isomorphic]

None of those, except grouping, apply to DrawLabel anyway.

Again, a basic limitation of browser vector drawing is that are some limitations when you want to include HTML or HTML-like feature in the midst of a vector drawing. Often the best approach is to mix in true HTML elements, and that's what we're recommending here.

[tgilbert]

Mmmh, just tried and the DrawLabel.rotateBy() works like a charm :-)

Don't you think that something like the technique described here could be implemented:
http://sourcoder.blogspot.com/2012/1...ml-canvas.html

Also, if at least we could have a getWidth() so that we can adapt the size of the surrounding frame...

Many thanks for your feed-back,
Thomas

[rox_soporan]

I was just trying DrawLabel.rotateBy and in my case it is not working....the label just dissapears..cand you post your example please..thank you

[tgilbert]

Sure:

import com.google.gwt.dom.client.Style.FontWeight;
import com.smartgwt.client.types.ArrowStyle;
import com.smartgwt.client.types.Cursor;
import com.smartgwt.client.types.Overflow;
import com.smartgwt.client.widgets.drawing.DrawGroup;
import com.smartgwt.client.widgets.drawing.DrawImage;
import com.smartgwt.client.widgets.drawing.DrawLabel;
import com.smartgwt.client.widgets.drawing.DrawLine;
import com.smartgwt.client.widgets.drawing.DrawPane;
import com.smartgwt.client.widgets.drawing.DrawRect;
import com.smartgwt.client.widgets.drawing.Point;
import com.smartgwt.client.widgets.drawing.events.MovedEvent;
import com.smartgwt.client.widgets.drawing.events.MovedHandler;
import com.smartgwt.client.widgets.events.DrawEvent;
import com.smartgwt.client.widgets.events.DrawHandler;
import com.smartgwt.client.widgets.events.MouseWheelEvent;
import com.smartgwt.client.widgets.events.MouseWheelHandler;


public class DrawTest extends DrawPane {

    final DrawLine line = new DrawLine();
	final DrawRect drawRect = new DrawRect();  
	final CustomItem drawRect2 = new CustomItem();  

	public DrawTest() {
		this.setHeight(400);  
        this.setWidth(800);  
        this.setShowEdges(true);  
        this.setEdgeSize(4);
        this.setTop(50);
        this.setBackgroundColor("white");  
        this.setOverflow(Overflow.HIDDEN);
        this.setCursor(Cursor.AUTO);
        this.addMouseWheelHandler(new MouseWheelHandler() {
			@Override
			public void onMouseWheel(MouseWheelEvent event) {
				if (event.getWheelDelta() < 0)
					DrawTest.this.setZoomLevel(DrawTest.this.getZoomLevel() * 0.9f);
				else
					DrawTest.this.setZoomLevel(DrawTest.this.getZoomLevel() * 1.1f);
				DrawTest.this.redraw();
			}
		});
        this.init();
        this.addDrawHandler(new DrawHandler() {
			
			@Override
			public void onDraw(DrawEvent event) {
				line.draw();
				drawRect2.draw();
				drawRect.draw();
			}
		});
        this.setCanDrag(true);
        this.draw();
	}
	
	protected void init() {

        drawRect.setLeft(10);  
        drawRect.setTop(10);  
        drawRect.setWidth(150);  
        drawRect.setHeight(100); 
        drawRect.setFillColor("yellow");
        drawRect.setCanDrag(true);
        drawRect.addMovedHandler(new MovedHandler() {
			@Override
			public void onMoved(MovedEvent event) {
		        int[] center1 = getCenter(drawRect);
		        line.setStartPoint(new Point(center1[0], center1[1]));
			}
		});

        drawRect2.setLeft(250);  
        drawRect2.setTop(10);  
        drawRect2.setWidth(250);  
        drawRect2.setHeight(100); 
        drawRect2.addMovedHandler(new MovedHandler() {
			@Override
			public void onMoved(MovedEvent event) {
		        int[] center1 = drawRect2.getFrameCenter();
		        line.setEndPoint(new Point(center1[0], center1[1]));
			}
		});

        line.setEndArrow(ArrowStyle.OPEN);
        line.setLineColor("green");
        
        drawRect2.setDrawPane(this);
        line.setDrawPane(this);
        drawRect.setDrawPane(this);

        int[] center1 = getCenter(drawRect), center2 = drawRect2.getFrameCenter();
        line.setStartPoint(new Point(center1[0], center1[1]));
        line.setEndPoint(new Point(center2[0], center2[1]));
	}
	
	public int[] getCenter(DrawRect item) {
		int x = item.getLeft() + (item.getWidth() / 2);
		int y = item.getTop() + (item.getHeight() / 2);
		return new int[] { x, y };
	}
	
	class CustomItem extends DrawGroup {
		DrawRect  frame = new DrawRect();
		DrawImage image = new DrawImage();
		DrawLabel label = new DrawLabel();
		
		CustomItem() {
	        this.setUseGroupRect(true);
	        this.setCanDrag(true);

			image.setSrc("http://b.dryicons.com/images/icon_sets/classy_icons_set/png/128x128/user.png");
			image.setWidth(48);
			image.setHeight(48);
			
			label.setContents("Hello this is a label I wanted to be wrapped");
			label.setFontWeight(FontWeight.NORMAL.toString());
			label.setKeepInParentRect(true);
			label.rotateBy(45);
			
			setLineWidth(1);
			setHeight(64);
			setAutoWidth();
			
			this.setDrawItems(frame, image, label);
		}
		
		@Override
		public void setHeight(int height) {
			super.setHeight(height);
			frame.setHeight(height);
		}
		
		@Override
		public void setTop(int top) {
			super.setTop(top);
			updateSubItemPosition();
		}

		@Override
		public void setLeft(int left) {
			super.setLeft(left);
			updateSubItemPosition();
		}
		
		private void updateSubItemPosition() {
			frame.moveTo(getLeft(), getTop());
			image.moveTo(getLeft()+3, getTop()+3);
			label.moveTo(image.getLeft() + image.getWidth() + 5, getTop()+3);
		}
		
		@Override
		public void setWidth(int width) {
			super.setWidth(width);
			frame.setWidth(width);
		}
		
		public int[] getFrameCenter() {
			return new int[] { getCenter().getX(), getCenter().getY() };
		}
		
	}
}

[rox_soporan]

oh...in my case it is just dissapearing..:(

[Isomorphic]

rox_soporan, most likely you are testing in IE8 or earlier, or you are using IE9 with the incorrect DOCTYPE (see FAQ).

tgilbert, that's why we said rotation doesn't apply to DrawLabel - although, as you've discovered, we have a functioning implementation for modern browsers, rotation actually can't be supported reliably across all browsers. Note also that aside from older IE, there are issues on mobile browsers.

[rox_soporan]

Indeed..in IE8 it is not working...I hope I will find a workarraound as I've done with rounded canvas. Thank you