Text Annotation Tool #105
Merged
Text Annotation Tool #105
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Implemented the four corner resizing of the text input div and movement of the input div. To do in future commits: • Switching the text input to SVG text and vice versa. • Styling of the input div. • Checking the disable mouse trackers and enabling them.
Added the export functionality for the foreign object. Also, removed the transition from textarea to SVG text.
Working on switching the multiple annotations to text on switching.
Made changes for the transition to work for multiple input tags which are placed according to user selection.
Added the annotation toolbar input for font-size and implemented the functionality to change the font-size. Also, added relevant comments to document the code.
Fixed the bug where the annotation is not rendered during import, if the annotation exists after the textbox annotation. Cloned the node instead of using the imported node while adding to the annotation SVG.
1. The text color now takes the stroke color at the start and also changes when the stroke color is changed using color picker. 2. Fixed the spacing issue and text moving while switching from text to p tag after transformation.
Implemented the horizontal resizing functionality. Fixed the text wrapping depending on width of the textbox.
1. The text annotation now gets highlighted and unhighlighted on hover. 2. All the group annotations get highlighted on hover and vice versa. 3. Fixed the code for erase of text annotation. Facing some bugs with the annotation not changing with the toolbar in the code causing the erase functionality to malfunction on the first click.
1. The highlight functionality is now added, it is working end-to-end along with other annotations in the group. 2. Fixed the bug where the erase functionality would work for all the modes. Now it only works in the erase mode. 3. Fixed the mousetracker bug where the trackers for the annotations were not getting destroyed correctly.
1. Implemented the absolute mapping for the font-size 2. Completed the changes for the textbox sizing to be relative instead of absolute for attributes like spacing, width, padding, resizer size etc.
1. Implemented the text size functionality taking into account the zoom level. 2. Bug fixes for font change
Implemented the new font size input with the following features: 1. Increase/decrease buttons for font size 2. Input area in between the buttons to type the font size 3. Dropdown with predefined values for the font size
This was
linked to
issues
Apr 10, 2023
RFSH
requested changes
Apr 13, 2023
RFSH
requested changes
Apr 24, 2023
There was a problem hiding this comment.
Apart from the comments,
- Did you apply the changes to make sure this feature is working in Safari? If you did, please comment in places that you had to change the implementation why the other method didn't work.
- Let me know you've gone through the viewer regression tests for Firefox, Chrome, and Safari. I'll do the same thing as the last step to make sure everything is good to go.
js/viewer/annotation/text.js
Outdated
| textInput.style.overflowY = "hidden"; | ||
| textInput.style.fontSize = this._attrs["font-size"] + "px"; | ||
| textOuterDiv.style.padding = (this.parent.getStrokeScale() * this._ratio * 4) + "px"; | ||
| textOuterDiv.style.border = (this.parent.getStrokeScale() * this._ratio) + "px solid red"; |
There was a problem hiding this comment.
Add a TODO about this line and briefly explain how you would go about implementing it. You should also create a new issue about this.
RFSH
reviewed
Apr 24, 2023
Removed the text SVG element that gets created while initializing the text annotation. As we use a foreignObject with input or p tag, we do not need the SVG text tag.
- discard wasn't properly removing the drawn group. so in the drawn svg you could see duplicated groups. - when we were adding the saved state back, the new elements were DOM elements and not SVG. while this was fine for the elements that we had, foreignObject wasn't working properly because of it.
Safari does not work well with the logic we have for positioning the resize control on the right border. Made temporary fix to add the resize functionality only for non-safari browsers for now.
instead of changing the styles of e.target, I'm now always changing the styles of divCount. e.target could be the textarea and as a result we were resizing the textarea instead of moving it around.
- avoid using both style and attributes for foreignObject - was causing issues in safari - it's also cleaner this way - add a new parameter in addAnnotation instead of abusing the existing params. - clean up the code - avoid adding id to the imported svg - make the class names consistent - remove commented code
|
In Safari, we couldn't figure out how to show the handler for resizing the textbox, so for now, that feature is not used in Safari. Everything else seems to be working as expected. I will merge this PR and get back to the Safari issue later. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Text Annotation
Added the text annotation functionality. To implement the text annotation, we are using a ForeignObject inside the annotation SVG. We use a Textarea input to let the user type and get the text. Once the user starts drawing another annotation, we transform the input to a p tag containing the same text and styling that the user had.
Changes
annotationContainer.css: Added styling for the textbox functionality and the font size inputannotation-tool.js: Added the text annotation tool option, font size input and handling for annotation-specific functionsannotation-group.js: Changes to handle the creation and import of text annotationannotation-svg.js: Changes to handle font size change and parsing of text/foreign object nodesbase.js: Small changes to handle the export for text annotationtext.js: Added this file which contains all the text annotation functionalityviewer.js: Implemented functions to implement mouse handlers to handle the positioning of text annotationmview.html: Added the import for the text annotation file