Cursor doesn't invert background and foreground colours
Closed this issue · 23 comments
Hey again 😄
One thing I've noticed is that the cursor doesn't invert the highlighted character, as expected:
NyaoVim:
Neovim on iTerm2:
Yes, I noticed that. But it has a reason.
Neovim screen is rendered on <canvas> but cursor is a simple <div> DOM element. Its width is changed following current mode of Neovim. It means that the cursor element can't know the charactor under cursor.
But there may be good way to handle it and I could improve cursor (at least blinking cursor might be implemented). So I remain this issue open. If anyone has an idea for this, it is helpful.
Just only setting the left border on the <div> would be better until a better solution is found imo.
Actually, if you could add a class for each different mode, rather than modifying directly the cursor style, it would allow for a better user control.
(e.g. add .normal-mode class on cursor when normal mode is entered)
Although there already is a mode-switch event if I recall correctly?
As for the reversed cursor, you'll be happy to see this: https://webkit.org/blog/3632/introducing-backdrop-filters/
Still in nightly but you could write a filler for now. Or I could. I'll check if I can send a patch later today.
Just only setting the left border on the
would be better until a better solution is found imo.
I think it is better to let users know which mode they are in.
Actually, if you could add a class for each different mode, rather than modifying directly the cursor style, it would allow for a better user control.
That sounds better and it's easy to add .normal-mode class. But <neovim-editor> is a Web Componet. It means that it is not possible to apply CSS directory outside the component. I think CSS variable should be one of solutions. I'll consider it.
What's up with ::shadow? Here I sure can modify that ugly cursor.
(look the cursor; IT SHINES)
(gist with the shiny cursor: https://gist.github.com/romgrk/92d3e7cb4d81d026f6ec)
Oh, ::shadow looks helpful (TR). Thank you for your help. Then it is easy to add .normal-mode class on normal mode and .insert-mode class on insert mode. I'll implement it to <neovim-editor>!
Just out of curiosity, why can't the cursor be rendered in the canvas element?
EDIT:
Also, an rgba background color instead of a shadow would prevent the glow around the cursor, unless the glow is a desired effect?
EDIT2:
If it's possible to change the cursor from a div to a canvas, you could load the content of the main canvas, cut out the section covered by the cursor, then invert the pixels in canvas.
Here is some info on how to copy one canvas to another: http://stackoverflow.com/questions/4405336/how-to-copy-contents-of-one-canvas-to-another-canvas-locally
Thank you for the suggestion.
The reason I selected <div> element for cursor because it is easy to move on screen. If we render a cursor on <canvas> directly, it is necessary to remove current cursor before rendering it at next position to move it. We need to restore the screen under the cursor. The situation of screen under cursor depends on background color, font color and Neovim's mode (shape of cursor).
However, it is not impossible and it is worth to try.
I think the cursor-as-a-separate canvas solution would be the best of both worlds -- it would still be easier than rendering the cursor directly on the main canvas, and yet also allow you to invert it easily.
I wonder if it wouldn't be faster to have the <div> element containing the character below it, and just setting it's color/background-color. @rhysd, any idea of the ressource consumption of having an additional canvas? Is it faster to let electron render stuff in general?
A div would be more performant, but @rhysd said there is no way for the cursor to know what character is under it. Unless this isn't strictly true?
Considering rendering information from Neovim, it is easier to use <div> than rendering on another <canvas>. However, as @flyingfisch said, we can't get the character under the cursor because we already rendered the character in <canvas> and we can't extract it.
As @flyingfisch suggested, we can get the character under the cursor as an image data. And we can invert the color of the image and paste it to another <canvas>.
It may require additional resource, but I think it doesn't affect application performance because cursor is tiny.
Anyway, we should try and look the result 😄
I'm going to try that in this weekend.
Sounds great, looking forward to trying it!
On Wed, Mar 2, 2016, 8:47 PM Linda_pp notifications@github.com wrote:
I'm going to try that in this weekend.
—
Reply to this email directly or view it on GitHub
#16 (comment).
I tried first implementation for this in new-cursor branch of neovim-component 😄
It looks working well.
At first, there was a little performance problem because cursor is actually moving throughout the screen at full throttle for rendering. So I added 10ms delay before rendering cursor, and if cursor moves to next place while the delay, I made NyaoVim cancel previous cursor rendering.
After adding some tests, I'd merge the branch into master.
EDIT:
If you want to change the delay, cursor-draw-delay property is available. (0 means no delay).
Very nice, are you doing an actual invert, or are you doing a background/foreground color swap like the terminal version does?
Actual invert. I want to reflect bg/fg colors but currently it is not implemented.
I'm implementing cursor blinking now.
I tried guessing and swapping bg/fg colors under the cursor but it looks not good because of anti-aliased font rendering.
I introduced new cursor on NyaoVim 0.0.19 although it is not an actual fg/bg colors swapping. But it is much better than previous.
If there is a good way to detect and swap fg/bg colors under the cursor, please ping me that (e.g. comment in this issue). Then I'll reopen this issue and try it.
Hi! Sorry for commenting on this old issue, but I'm not sure if the problem I'm facing is just mine or not.
New cursor works well in visual and normal mode, but it doesn't in insert mode:
Am I missing something?
@BABBA22 I ran into the same problem and implemented some changes. I used some css derived from what was commented here earlier, and I also implemented a watch for mode changes to add a css class to the cursor (which seems no longer working). Mine is set up to blink only in insert mode.
@keyframes blink {
0% {
opacity: 1.0;
animation-timing-function: ease-in;
}
50% {
opacity: 0.0;
animation-timing-function: ease-in-out;
}
100% {
opacity: 1.0;
}
}
neovim-editor::shadow .neovim-editor.neovim-cursor.style-scope {
opacity: 0.9;
}
neovim-editor::shadow .neovim-editor.neovim-cursor.style-scope.mode-insert {
animation-name: blink;
animation-duration: 1s;
animation-iteration-count: infinite;
transition: all
transition: 0.15s
transition: cubic-bezier(0.38, 0.75, 0.43, 0.88);
}
window.onload = function(){
var nyaovimEditor = document.getElementById('nyaovim-editor');
// watch for mode changes; attach css class to cursor
nyaovimEditor.editor.store.on('mode', function(){
nyaovimEditor.$$(".neovim-cursor").className = "neovim-cursor style-scope neovim-editor";
nyaovimEditor.$$(".neovim-cursor").className += " mode-" + nyaovimEditor.editor.store.mode;
});
}
On an unrelated topic, I have a few other things implemented that people may be interested in. These were must-haves for me to use neovim/nyaovim on a daily basis. Where would one post code snippets like this?
- save window size & position on a per file basis
- set window title to filename
- check & warn about unsaved buffer before exiting