Bracket-matcher animation


#1

I’m trying to do some animation like this. But have no success at all. Here is my styles.less:


#2

Unfortunately, this is a known issue:

You can create a package that contains a context-targeted stylesheet that will work though:

https://atom.io/docs/v0.187.0/upgrading-to-1-0-apis-upgrading-your-ui-theme-or-package-selectors#context-targeted-style-sheets


#3

It works with syntax theme, but doesn’t with simple package. And if I will use custom theme, how to add just brackets animation without override user theme?


#4

Extremely hacky, but you can exploit the fact that the .highlights element comes after the .cursors element (at least in my case it does, if it doesn’t for you then this is all useless), and that the .cursors element toggles the .blink-off class at a certain interval. Then use transition instead of animation:

atom-text-editor::shadow {
  .highlights .bracket-matcher .region {
    background-color: red;
    transition: background-color 400ms; // cursor blinks at 400ms intervals
  }

  .cursors.blink-off ~ .highlights .bracket-matcher .region {
    background-color: yellow;
  }
}

And you’ve got nice, animating brackets :smile:


#5

This is just awesome! Really dirty hack, but it’s everything I need. Thanks! :thumbsup:


#6

This is incorrect. It works just fine with a simple package. I verified it with the following:

  1. Created a new, empty package
  2. Created a new file within the package styles/index.atom-text-editor.less
  3. Added the following contents:
@-webkit-keyframes example {
  from { background-color: red; }
  to { background-color: yellow; }
}

.bracket-matcher .region {
  border-radius: 3px;
  background-color: rgba(0, 255, 0, 0.5);
  border-bottom: 0px;

  -webkit-animation: example 500ms ease infinite alternate;
}

Then I reloaded Atom and :tada:


#7

Ok, I will try this tomorrow :wink:
By the way, olmokramer method gave me 25% of cpu load, and it depends on “time” parameter.


#8

Yep, it works, but same cpu load problem. I think olmokramer solution is much simpler, even when it have some problems with long timing.


#9

Hm… Why color and font-weight does not work here?


#10

Because bracket-matcher uses a Decorator which sits in the same place visually, but it does not wrap the actual text itself:


#11

Oh, I see. How user can customize this (I mean color and font-weight)?


#12

That depends on the grammar for the language (i.e. it’s different for each language). You can get the scope of the character by placing the cursor on the character and then running the editor:log-cursor-scope command. The CSS selector you should use is the same as the scope:

# output from editor:log-cursor-scope on a closing bracket (}) in a .less file
source.css.less
meta.property-list.css
punctuation.section.property-list.end.css

then you can use

.less .property-list .punctuation {
  &.begin,
  &.end {
    font-weight: 900;
  }
}

Sadly, it’s not always as easy as LESS… In coffeescript for example the { and the } are scoped as keyword.operator.coffee, but so is the = sign. So you can’t distinguish between a { and a =.


#13

I’ve realized that. Thanks.


#14

Sorry to hijiack a bit the topic, Leedohm, but I’d like to know the name of your color showing package. It’s so clean and nice. :smile:
Thanks


#15

@Lock There are multiple packages that do this. In no particular order:

I can’t find the one @leedohm is using though, but maybe you can: https://atom.io/packages/search?q=color

EDIT Ah… the package @leedohm is using seems to be atom-color-highlight with option Markers at end of line enabled


#16

If you’re meaning the color circles at the end of the CSS lines @Lock, then yes @olmokramer is correct. I also try to keep the packages I am currently using Starred so you can look at my list of Stars on the website to see what I’m using most recently:


#17

Many thanks @olmokramer and @leedohm that’s exactly what I needed. :smile:
I’m quite new in using Atom (I recently switched from Sublime Text) and I’m still learning about these wonderful plugins. :slight_smile:


#18

You might like this package then: atom-like-brackets-editor


#19

@leedohm I’m trying to use webkit-animation to highlight brackets but even your example doesn’t work for me. I tried disabling the bracket-matcher package in case it interfered, but with no success. Is there anything else to do to get your example to work?

I’m trying to reproduce https://github.com/Gozala/lt.plugins.bracketglow/blob/master/bracketglow.css

EDIT: just to provide more information, I created a new package named brackets-glow, created styles/index.atom.text-editor.less and put the following in it:

@-webkit-keyframes glowing-pulse {
  0% {
    text-shadow: 0 0 3px;
    opacity: 0.7;
  }
  100% {
    text-shadow: 0 0 2px,
                 0 0 3px;
    opacity: 0.9;
  }
}

.bracket-matcher .region {
    -webkit-animation: glowing-pulse 0.7s infinite alternate ease-in-out;
}

Thanks!


#20

This works: https://github.com/dpo/atom-brackets-glow
But is there a way to change the text color with this technique? The original LightTable style is discreet yet visible and elegant.