[editor: moving to the appropriate forum…]
I need to do 'in-box' text annotation for shapes, meaning when the user double-click a shape, he/she is able to type the text on the shape in the canvas, instead of a prompted separate text box, like in dojox.sketch.
My initial thoughts would be to add a "dijit.form.TextBox" on the shape, but how to add such a textbox or text area or similar thing on the shape in the canvas? Thanks.
-Sharon
You'll end up overlaying the shape.
There's no real way of getting text "inside" a shape; what ends up happening is that you position another element on top of it, and probably group it (like we did with sketch). Unfortunately that means keeping track and position of two separate elements but that's pretty much the only solution.
add a textbox on the top of a shape
To summarize the problem: how to add a text node on the top of a shape node in the drawing canvas?
onDblClick=function(shape,event){
var textbox=new dijit.form.TextBox(); // could be something else
// this is to add the textbox on the top of the double-clicked shape....
//I get the error: shape.add is not a function, I also tried shape.addChild(textbox)...
// My purpose is to get the DOM node of the shape, then add the textbox on the top of this node....
// so what method should I use here?
if(!shape) shape = event.target.parentNode;
shape.add(textbox);
var l = textbox.getValue();
..........
}
Thanks.
I guess this question might
I guess this question might fit better at "dijit support" - how to add a text box or text area on the fly / dynamically, on the top of the shape, then accept the user's input? Can the administrator move this thread to that forum, thanks!
To better elaborate my question: I need to add text on the top of the shape, like in Microsoft visio or word drawing, or OpenOffice. When the user double clicks the shape (in some cases, right-click), a text area or text box appears inside the shape, then the user is able to type in some text. After the user click somewhere else on the drawing canvas, only the text remains on the shape, the border of the text area or text box will disappear.