Bugzilla – Full Text Bug Listing
| Summary: | AnnotationStyler to merge html and DOM node style in compare widget. | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Product: | [ECD] Orion | Reporter: | libing wang <libingw> | ||||||||||
| Component: | Editor | Assignee: | libing wang <libingw> | ||||||||||
| Status: | RESOLVED FIXED | QA Contact: | |||||||||||
| Severity: | major | ||||||||||||
| Priority: | P2 | CC: | Carolyn_MacLeod, gasper.vrhovsek, livia.dobai | ||||||||||
| Version: | unspecified | ||||||||||||
| Target Milestone: | 15.0 | ||||||||||||
| Hardware: | PC | ||||||||||||
| OS: | Mac OS X | ||||||||||||
| See Also: | https://github.com/eclipse/orion.client/pull/83 | ||||||||||||
| Whiteboard: | |||||||||||||
| Attachments: |
|
||||||||||||
fyi result.ndoe should be result.node (In reply to Carolyn MacLeod from comment #1) > fyi result.ndoe should be result.node thanks, Car. Gasper, while we are still trying to fix other minor things related to this area, if you want to see a quick POC demo, I recommend you downloading the compare build from http://www.eclipse.org/downloads/download.php?file=/orion/drops/R-14.3-201704041103/built-compare.zip&mirror_id=346. After you download it, for a temporary hack, insert the snippet below under line 7937 in file built-compare-amd.js. if (style.html) { result.html = style.html; } if (style.node) { result.node = style.node; } Then use the attached demo html to see how it works. You just need to add the html file to the same folder where you unzip the compare build. Once the demo page is up, you click the load sample button, you will see a text area DOM inserted under line 13. Created attachment 267703 [details]
A POC demo to insert a custom DOM in the compare editor
Note that at line 126, 127 in the demo html
rangeStyle: {styleClass: "lineHighlightGutter2", node: div2Insert},
//rangeStyle: {styleClass: "lineHighlightGutter1", html: "<div style='width:100px;height:30px;background-color:blue'></div>"},
You can flip over between html and node type of injected DOM...
Created attachment 267704 [details]
Screen cap from the demo
Please also see the attached as the screen cap from the POC demo
first cut of the fix: https://github.com/eclipse/orion.client/commit/28a79e51243d7065e85485ce51524eabbf13db08 Still see rendering issues like: If you click on the same row where the injection lives, the injected dom node disappears. But if you scroll down and up, it is rendered back a again. I think it is a textView redraw issue... Hello! My name is Livia. I'm working with Gasper on a project where we successfully used your fix to add DOM nodes to the widget editor. Thank you for that! However there are still some issues. We prepared a demo to illustrate the encountered problems and hopefully will help you to fix them: https://gitlab-xhproject.xlab.si/livia_dobai/annotdemo Thank you for all the efforts and I will be honestly grateful if you could work on this problem soon. Best regards, Livia Created attachment 268990 [details]
temporary built-compare-amd.js file
(In reply to Livia Dobai from comment #8) > Hello! > My name is Livia. I'm working with Gasper on a project where we successfully > used your fix to add DOM nodes to the widget editor. Thank you for that! > However there are still some issues. > We prepared a demo to illustrate the encountered problems and hopefully will > help you to fix them: > https://gitlab-xhproject.xlab.si/livia_dobai/annotdemo > > Thank you for all the efforts and I will be honestly grateful if you could > work on this problem soon. > > Best regards, Livia Hi Livia, we have a fix for you. As we are approaching Orion 15 release, my code changes need to be reviewed and +1, I cant push the code now and get it ready in the download page yet. But I attached a local build version of the fix. Just replace your built-compare-amd.js with the attached one. I've already tested your demo locally here, seems all the issues have been resolved. GitHub Pull Request 83 created by [libingw] https://github.com/eclipse/orion.client/pull/83 You can now use the following snippet to inject your DOM at the end of a line. var startIndex = textModel.getLineEnd(lineNumber); var endIndex = startIndex; With this fix and new build, all our reported issues are fixed. Thank you. related bug 518725 |
Created attachment 267667 [details] UI requirement from the user One of the orion compare widget consumers would like to inject their DOM node into the compare widget editor(in unified mode). To support that we need to merge the html and DOM node style of annotation in the AnnotationStyler._mergeStyle API. We've already hacked the widget build locally in that API and it seems working. Added the snippet below at the end of the API: if (style.html) { result.html = style.html; } if (style.node) { result.ndoe = style.node; }