Add text box drawing tool

[RFSH]

As the title suggests, we want to allow users to draw text on the image. The following are what we need to investigate as part of this:

1. How should we position the text? What should be the default font size for different zoom levels?
2. What should the controls to add a text box look like?
   • The most straightforward implementation is to popup an input box somewhere. That being said, we should investigate other methods first, as this is not an ideal/acceptable solution.
   • We could display an input overlay on top of the SVG and, after drawing, transform it into an SVG (Not worth pursuing since it can be easily broken).
   • We can show a box around an actual SVG text tag. The content changes based on user input, and we should display a blinking icon to mimic the browser's focus behavior.
   • We should show a textarea using foreignObject in the SVG. This way we're showing a fully functional text box to the users.
3. User should be able to move the drawn text. Our solution for this should not be specific to the text, and after implementing this feature, users should be able to move any drawn shapes.
4. Users should be able to change the text styles (font size, bold, italic, etc.)

[RFSH]

We had a discussion about this and the following is the list of tasks for this issue:

• [x] Add a text box option to the toolbar
• [ ] Clicking on the text box option should
  • [x] Go to "text box drawing mode":
  • [ ] Add the dynamic toolbar options related to text box (for now it should be just font-size and font-weight)
  • [x] Clicking anywhere on the page should show a textarea on top of the image
    • [x] The border should be visible
    • [ ] It should have a default height and width, and user should be able to change that.
    • [ ] Users should be able to move the textarea around.
  • [x] Changing the focus (or clicking on other options) should hide the textarea and draw the text as SVG.
• [x] Users should be able to save the drawn text box
• [x] Users should be able to load an annotation that has text box

• [ ] Come up with heuristics to transform the actual size to a font-size that is understandable by users.

  • We should come up with a proper transformation logic that works in the general scenario and allow us to draw text in all zoom levels (even when users is zoom all the way in or out).
  • Click here for more information

    - After a drawing is done (or when the annotation loads), zooming in should make the drawn text box bigger relative to the viewport, and if they zoom out, it should become smaller. - When drawing a text, users should be able to change the font size of the drawn text. But what should the value of the font size be? and should its definition change base on zoom level? - If we tie the font size with the zoom level, we should not allow users to change zoom while drawing. Or we have to change the font-size input as users zoom. Also, it would be hard for users to figure out the behavior or to create a consistent drawing. That's why we decided not to pursue this. - If we don't tie the font-size value with the zoom level, then a text with font-size=14 will be the same size regardless of the zoom level users drew the text with. But this means that users should be able to pick reasonable font-size values that display proper text for when the image is zoomed all the way in and when it's zoomed all the way out. - The simplest way to handle this is to ask users to pick the literal font size we will use. But while dealing with a huge image, the font size we will use in the zoomed-all-the-way-out state would be a huge number. That's why we might want to develop a transformation logic instead. - The logic should be able to produce a reasonable font size for when the user is zoomed all the way in. Font size cannot be less than 1, so we must ensure font-size=1 is usable in this case. - We probably want to optimize it for images with a certain number of allowed zoom levels (let's say 7), then make sure it works in all the zoom levels.

P.S. The selection is missing from this and we should most probably do that as a separate task for all the drawing tools.

[nikhiilll]

We need a functionality wherein the textarea should enable the users to write the text and should be converted into SVG text at the same position with respect to the image. Similarly, the users should be able to edit the text annotation by clicking on it and the SVG text should be replaced by a textarea. To achieve this functionality, I decided to use foreginObject to add HTML elements to the SVG itself.

Why foreignObject? I decided to go ahead with a foriegnObject instead of adding a textarea to an overlay because adding it to the overlay would increase the complexity in terms of switching back and forth between textarea and SVG text, placing the textarea at the proper position in the overlay and the click/drag functionality not working properly if the textarea might get covered by another overlay.

The logic currently is that we would add a foreignObject containing a div and append the textarea to this div. Adding a div as a wrapper would be helpful for the resizing and dragging functionality. This implementation works in the POC stage. We are able to append a textarea to the SVG and type the text as well.

Issues faced:

• Some letter keys like a, d, f, r, s and w would not work as OpenSeadragon has key handlers that listen for the key events and have custom functionality like moving, zooming etc. mapped for these keys. I have disabled the key handler for the viewer for now by setting the key handler to null - reference.
• The font was not visible at first even though we were getting the input events for the textarea. The issue is the font size, the font size needs to be very large and in proportion to our image size. Instead of 10-20px, the font-size is visible around 1000px and more.
• The resize functionality of the textarea is not working. The draggable bottom right corner area is very small and it is almost impossible to reach it accurately. Same issue with the image size as above. I tried to find a way to increase the area of drag using styling, but the actual draggable area still remains the same.

[nikhiilll]

To enable resizable textarea, I am using transparent divs that can be dragged to increase/decrease the size of the div containing the textarea. 3 divs are being used:

1. The div on the right side of the textarea div would enable horizontal resizing.
2. The div on the bottom will enable vertical resizing.
3. The div in the bottom-right corner will enable both.

Here is a working POC that I have created: CodePen

The issue that I'm currently facing is similar to the previous input issue. There are OpenSeadragon handlers defined to handle the click, drag, mouseup and mousedown functionality. These need to be disabled when either of the divs mentioned above are being used to resize the textarea and enabled again. The same would be the scenario for moving functionality. We will need to disable and enable the handlers dynamically. I'm working on this.

[RFSH]

The latest changes in text-annotation-tool branch include the new textbox drawing tool. In this comment we will keep track of the missing features/bugs. We should not merge this branch with master until all the listed issues are resolved.

• [x] The last added textbox is getting ignored. If there are multiple textboxes in the same SVG, while importing (loading the page), the last textbox does not render.
  • The export does show that all the textboxes are exported, the issue seems to exist in import functionality.
• [x] Switching from textbox to p is not preserving the spacing properly and text is moving a bit.
• [x] Text color should honor the chosen color in the toolbar.
• [x] Textbox width is static. As a result after typing some characters, the text will be moved to the next line.
  • User either should be able to change the width of the textbox, or textbox should expand while typing.
• [x] Users should be able to erase textbox like any other drawings.
• [x] Highlight functionality is not working for textbox.
  • Custom functions are needed in Text annotation class that override the functions in base.js that are used in other annotations.
• [x] The font-size input should have a proper default value based on the image size and zoom level.
• [x] Switching from textbox to p is not preserving newlines.
• [x] If while moving the textbox mouse goes outside of the ForeignObject, the textbox stops moving.
  • The outer mouse event listeners are getting called instead. We should see if we can somehow disable the outer listeners. If that's not possible, we can try increasing the space or speed to hide the problem.