Using the getComputedTextLength() method in an SVGTextContentElement, it is possible to determine the width of a string in pixels. Using that information, it is now possible to create textboxes in SVG.
This version of Textbox is quite simple. Support needs to be added to allow:
TextboxKeypress() is an event handler that is called when a textbox has focus and a key is pressed.
event is the event object passed generated my the keypress event.
This is a number which represents the current version number for this implementation of the Testbox object. This can be used by scripts to check that the correct version of the object is being used.
An array of Textbox objects used to find the currently active textbox object.
Textbox.Find_Textbox(textbox) - returns the currently active textbox object
This object method is responsible for finding the currently active textbox in the textboxes object array.
textbox is the parent <g> element of the textbox that generated the keypress event.
constructor - new Textbox(x_position, y_position, width, height, parent);
x_position is the x position of the upper left-hand corner of the textbox.
y_position is the y position of the upper left-hand corner of the textbox.
width is the width of the textbox.
height is the height of the textbox.
parent is the element which will contain the textbox.
add_char - add_char(new_char) - add a character to the end of the textbox
add_char() is used to append a character to the end of the text in the textbox. This method will determine if the new character will cause the line to exceed the width of the textbox. If the text is too large, then a new <tspan> is created which effectively creates a new line in the text box.
new_char is the character to add to the end of the textbox. Please note that even though you can pass more than one character to this method, new_char() will not properly handle more than one character at a time.
delete_char - delete_char() - deletes the character at the end of the textbox
delete_char() is used to remove the last character in the textbox. If removing the character results in an empty line, then the <tspan> that represented that line is removed from the textbox.
add_tspan - add_tspan(new_char, [offset]);
add_tspan is an internal method used to assist add_char when a new row needs to be added to the textbox. There should be no reason to call this method directly.
new_char is the text used to initialize a new <tspan>.
offset is an optional parameter. When present, this is the new relative y-offset to use when the new <tspan> element is created. If this parameter is not present, it defaults to 1em.
width is the width of the textbox.
height is the height of the textbox.
In order to use the Textbox object in your SVG file, you will need to insert a <script> element inside of your <svg> element. Textbox uses Node_Builder, so you will need to include this object in a script element also. As an example, if Textbox.js is in the same directory as your SVG document, then you would include the Textbox object with the following text:
<script xlink:href="Textbox.js" />
In order to create a new Textbox object, you need to know the following: the upper-lefthand corner of the textbox, the width of the textbox, the height of the textbox, and the parent node of the textbox graphics. The following line creates a textbox at (10,10) with a width of 100 and and a height of 100. The textbox is appended to the SVGRoot.
textbox = new Textbox(10, 10, 100, 100, SVGRoot);
The following example shows two Textboxes. To activate a textbox, you must click it first and then begin typing. To see the complete details of this example, right-click (or control-click) the SVG file and View Source. (NOTE: if you are viewing this example with NN4, then please see the Known Problems section below.)
Unfortunately, this class does not function properly in Netscape 4.7. To work around the problem, do the following:
I have not been able to determine the exact magical incantation that Netscape wants for the addEventListener method for keypresses. The steps above will force the keypress events to be sent to the class. Once that has been achieved, everything works fine from there.