Cursor doesn't invert background and foreground colours about nyaovim HOT 23 CLOSED

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.

from nyaovim.

Just only setting the left border on the <div> would be better until a better solution is found imo.

from nyaovim.

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?

from nyaovim.

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.

from nyaovim.

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.

from nyaovim.

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)

from nyaovim.

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>!

from nyaovim.

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

from nyaovim.

@flyingfisch

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.

from nyaovim.

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.

from nyaovim.

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?

from nyaovim.

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?

from nyaovim.

@romgrk @flyingfisch

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 😄

from nyaovim.

I'm going to try that in this weekend.

from nyaovim.

Sounds great, looking forward to trying it!

On Wed, Mar 2, 2016, 8:47 PM Linda_pp [email protected] wrote:

I'm going to try that in this weekend.

—
Reply to this email directly or view it on GitHub
#16 (comment).

from nyaovim.

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).

from nyaovim.

Very nice, are you doing an actual invert, or are you doing a background/foreground color swap like the terminal version does?

from nyaovim.

Actual invert. I want to reflect bg/fg colors but currently it is not implemented.

from nyaovim.

I'm implementing cursor blinking now.

from nyaovim.

@flyingfisch

I tried guessing and swapping bg/fg colors under the cursor but it looks not good because of anti-aliased font rendering.

from nyaovim.

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.

from nyaovim.

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?

from nyaovim.

@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

from nyaovim.