Annotate visual

Goal:

• The user in the editor is able to add annotations where ever he likes in the visual
• In a future implementation (not in with this issue) those annotations can be exported as PDF comments with a PDF version of the layout. Please see linked confluence page for more info and ideas in this regard.
• The feature will work for all tasks with visual, regardless if the source of the visual is a link, an HTML file, an xsl+xml or a PDF.
• The functionality will be added to the editor help video
• When clicking on a text in the layout (visible via the text hover), the annotation will be added as segment comment. (those annotations move with the text flow of the text in the visual - relatively positioned in the HTML of the page). This comment is also visible in the segment comment panel in the segment editor. Vice versa a comment added in the segment comment panel will also be visible at the segment in the layout. The segment comment is NOT shown in the tooltip on the segment in the layout anymore, yet the tooltip as such is kept with the other information it contains.
• Else the annotation will be added as segment-independent annotation. Those annotations move with the background images of the page (absolutely positioned to the top of the page-div in HTML)
• Both annotation types (segment comment and segment-independent annotation) will be visible in the layout with the same icons and the text bubble, that contains the comment will expand i the same way
• At the right side of the right visual area there will be three icons. It will also be possible to trigger those actions with keyboard short-cuts.
  • expanded annotations (expands all bubbles to make the text readable)
  • collapsed annotations (shows only the collapsed icons for the annotations)
  • hide annotations (completely hide all annotations)

Implementation:

• Annotations can be made by clicking on an annotation icon on the right side of the right iframe in the visual

• • This changes the cursor to a Cross and the user sees a message "click where you want to place the annotation"
  • The annotation is placed as a small icon at the click position
  • Hovering over the icon shows the annotation
  • Clicking on the icon expands the annotation to a bubble with the text in it
  • With two more icons on the right all annotation bubbles can be expanded and collapsed.
• Where annotations can be made:
  • Only in the WYSIWIG (right) Iframe. For the (nowerdays inexistent) cases, there is no WYSIWIG we do not have Annotations

Additional Notes:

Aleks: let's talk before you start, there are lot's of pitfalls with this issue

->Annotations will serve all 3 main review-types: PDF/HTML, Image, Video
-> Common datamodel: LEK_visualreview_annotation: id, taskGuid, reviewFileId, segmentId, commentId, comment, userGuid, userName, created, modified, xCoord, yCoord, pageNr, timestamp
-> Usually, the annotations represent an extended comment refering to an segment, so the comment can be found in the referenced comment.
---> In this case, segmentId & comentId are set, [ comment, userGuid, userName, created, modified ] are empty
---> videos have comments that do not relate to segments/comments making this pretty ugly model neccessary
---> all SQL must reflect this disambiguity
-> JS Controller may is different for pdfhtml/video/image
-> Annotations-controller should be hold by IframeController: iframeController.getAnnotations().doSmth(); iframeController.registerAnnotations(annotationsController);
-> Crucial: Like IframeController Annotations-Controller must NOT use ExtJS (Reason: The review HTML files contain elements with the same ID, causing major trouble with ExtJS caches)
-> The Tooltip of the Comment that is shown above the review should be implemented as an ExtJS Tooltip, see the existing Editor.plugins.VisualReview.view.SegmentTip, the API can be according
-> Annotations in an HTML review: When created, we take the most nearby segment. There should be an API in IframeController to get the nearest segment (I may code this since this will involve all the logic in the scroller and the iframecontroller)