Comments (23)
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.
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.
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.
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.
Related Issues (20)
- Strange redraw behaviour
- Uncaught TypeError: Cannot read property 'editor' of null
- clipboard: error invoking win32yank:
- scrolloff strange update behavior
- q key for command window or recording macros non-functional HOT 1
- can not binding <M-n> key in mac os.
- copy with mouse HOT 1
- yarn global add nyaovim not work HOT 2
- No argument possible HOT 1
- Cannot install in Ubuntu 16.04 HOT 5
- Installation error HOT 2
- NyaoVim always starts with two open buffers
- Not possible to paste on prompt with Ctrl+V or window menus HOT 1
- I cannot open a file directly from command line using NyaoVim HOT 2
- Colorful (subpixel) font rendering
- Would like a way to donate to this project?
- :autocmd FocusGained not working with nvim 0.3.8 HOT 1
- WSL2 support?
- How to change Font
- transparent HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from nyaovim.