├── .gitignore ├── .travis.yml ├── CHANGELOG.md ├── LICENSE.md ├── README.md ├── atom-color-highlight-palette.jpg ├── atom-color-highlight-variables.gif ├── atom-color-highlight.jpg ├── lib ├── atom-color-highlight-element.coffee ├── atom-color-highlight-model.coffee ├── atom-color-highlight.coffee ├── dot-marker-element.coffee ├── marker-element.coffee └── marker-mixin.coffee ├── package.json ├── resources └── transparent-background.png ├── spec ├── atom-color-highlight-spec.coffee ├── fixtures │ ├── source.css │ └── source.less └── test-file.md └── styles └── atom-color-highlight.less /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | npm-debug.log 3 | node_modules 4 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: objective-c 2 | 3 | notifications: 4 | email: 5 | on_success: never 6 | on_failure: change 7 | 8 | script: 'curl -s https://raw.githubusercontent.com/atom/ci/master/build-package.sh | sh' 9 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | 2 | # v3.0.8 (2015-02-10) 3 | 4 | ## :arrow_up: Dependencies Update 5 | 6 | - Update pigments to version 3.2.0 ([99697994](https://github.com/abe33/atom-color-highlight/commit/99697994d62123e4cdaf66edfce85d6b17f869c9), [#75](https://github.com/abe33/atom-color-highlight/issues/75)) 7 | 8 | 9 | # v3.0.7 (2015-02-09) 10 | 11 | ## :bug: Bug Fixes 12 | 13 | - Fix calling method on undefined marker ([d58c511b](https://github.com/abe33/atom-color-highlight/commit/d58c511b89525a5d147a66f386e2cbc8c6fe3708), [#64](https://github.com/abe33/atom-color-highlight/issues/64)) 14 | 15 | 16 | # v3.0.6 (2015-02-03) 17 | 18 | - Upgrade pigments version. Includes fixes for [#74](https://github.com/abe33/atom-color-highlight/issues/74)) 19 | 20 | 21 | # v3.0.5 (2015-01-16) 22 | 23 | ## :bug: Bug Fixes 24 | 25 | - Fix deprecations on editor methods ([8386e01e](https://github.com/abe33/atom-color-highlight/commit/8386e01e72cee23be975d61984dcd23f3ec4b484)) 26 | 27 | 28 | # v3.0.4 (2015-01-14) 29 | 30 | ## :bug: Bug Fixes 31 | 32 | - Fix missing color search for restored text editors ([f189b73d](https://github.com/abe33/atom-color-highlight/commit/f189b73dc2a316e9754909ca1b9fd679146d90bb)) 33 | - Prevent errors in markers update when res is null ([cfe9dbfa](https://github.com/abe33/atom-color-highlight/commit/cfe9dbfa93e3760c28b313959b93e46ba724426e)) 34 | - Fix remaining deprecations ([36179390](https://github.com/abe33/atom-color-highlight/commit/36179390fe1e20d3118532cd2e93107f3a8c9c99)) 35 | 36 | 37 | # v3.0.3 (2015-01-07) 38 | 39 | ## :bug: Bug Fixes 40 | 41 | - Fix error raised when closing an editor ([f9914482](https://github.com/abe33/atom-color-highlight/commit/f991448225d1d1dd0c33efd9db8bce087d12b4b2)) 42 | 43 | 44 | # v3.0.2 (2015-01-05) 45 | 46 | ## :bug: Bug Fixes 47 | 48 | - Fix colors marker not rendered when editor is not active when opened ([5f291f66](https://github.com/abe33/atom-color-highlight/commit/5f291f6620273ad120cbcb265f6d9d8698b7a930)) 49 | 50 | 51 | # v3.0.1 (2015-01-03) 52 | 53 | - Add missing CHANGELOG entries for v3.0.0. 54 | 55 | 56 | # v3.0.0 (2015-01-03) 57 | 58 | - The major changes in v3.0.0 concerns the view appended to the DOM. Now views are handled through custom elements instead of `space-pen` views. 59 | 60 | 61 | # v2.0.16 (2014-12-31) 62 | 63 | ## :bug: Bug Fixes 64 | 65 | - Fix marker display issue when scrolling ([01aba50e](https://github.com/abe33/atom-color-highlight/commit/01aba50e0fd89262275895c4274f74115db27242)) 66 | 67 | 68 | # v2.0.15 (2014-12-30) 69 | 70 | ## :bug: Bug Fixes 71 | 72 | - Fix broken update check method ([f1f9c992](https://github.com/abe33/atom-color-highlight/commit/f1f9c992197a081cb7489fdef93293d4a8fc8df8)) 73 | - Fix remaining deprecations ([c186b932](https://github.com/abe33/atom-color-highlight/commit/c186b93207d5a516cd7d425e8abbf306385e3135)) 74 | 75 | 76 | # v2.0.14 (2014-12-02) 77 | 78 | ## :bug: Bug Fixes 79 | 80 | - Fix palette event deprecation ([7e905df5](https://github.com/abe33/atom-color-highlight/commit/7e905df5947a3278d9ad19e3f4b768d9f237f869)) 81 | 82 | 83 | # v2.0.13 (2014-11-30) 84 | 85 | ## :bug: Bug Fixes 86 | 87 | - Fix error raised on view destruction ([58ab0830](https://github.com/abe33/atom-color-highlight/commit/58ab0830f71f18d0c7946868eb8da2a1b5b82d4c), [#60](https://github.com/abe33/atom-color-highlight/issues/60)) 88 | 89 | 90 | # v2.0.12 (2014-11-28) 91 | 92 | ## :bug: Bug Fixes 93 | 94 | - Fix error raised when closing the last editor of a pane ([8ee359eb](https://github.com/abe33/atom-color-highlight/commit/8ee359ebb17b96cfae8dc2174d22f2d2c102198d)) 95 | 96 | 97 | 98 | # v2.0.11 (2014-11-27) 99 | 100 | ## :bug: Bug Fixes 101 | 102 | - Remove remaining logs ([73544811](https://github.com/abe33/atom-color-highlight/commit/73544811e7a4669d24ebafc359e9d7558936b4ab), [#58](https://github.com/abe33/atom-color-highlight/issues/58)) 103 | 104 | 105 | 106 | # v2.0.10 (2014-11-26) 107 | 108 | ## :package: Dependencies 109 | 110 | - Upgrade to pigments v3.0.4. 111 | 112 | 113 | # v2.0.9 (2014-11-26) 114 | 115 | ## :bug: Bug Fixes 116 | 117 | - Prevent errors when accessing finder ([a0eba38d](https://github.com/abe33/atom-color-highlight/commit/a0eba38dd4592e35e5b63950c096ab9fb3ea1f67), [#57](https://github.com/abe33/atom-color-highlight/issues/57)) 118 | 119 | 120 | # v2.0.8 (2014-11-25) 121 | 122 | ## :bug: Bug Fixes 123 | 124 | - Change how finder package is required in models ([147647a2](https://github.com/abe33/atom-color-highlight/commit/147647a250a9aed6a39a04813af210dc73142199)) 125 | 126 | 127 | # v2.0.7 (2014-11-25) 128 | 129 | ## :package: Dependencies 130 | 131 | - Upgrade to pigments v3.0.3. 132 | 133 | 134 | # v2.0.6 (2014-11-17) 135 | 136 | ## :memo: Documentation 137 | 138 | - Add a more detailed description of the `excludedGrammars` setting. 139 | 140 | 141 | # v2.0.5 (2014-11-14) 142 | 143 | ## :bug: Bug Fixes 144 | 145 | - Rebuild markers on editor config changes ([845b8d65](https://github.com/abe33/atom-color-highlight/commit/845b8d6537538fc9036eb7141bcfa19b3e4d6e9a), [#32](https://github.com/abe33/atom-color-highlight/issues/32)) 146 | - Fix region styles when shadow DOM is enabled ([06c0f4e2](https://github.com/abe33/atom-color-highlight/commit/06c0f4e2aac3f466cecc56bc47ffa5929015568b)) 147 | 148 | 149 | # v2.0.4 (2014-10-22) 150 | 151 | ## :bug: Bug Fixes 152 | 153 | - Fix broken access to scope in latest Atom ([ffb4468d](https://github.com/abe33/atom-color-highlight/commit/ffb4468d196b93edf11cd0bcea21b26158aad1d0)) 154 | 155 | 156 | # v2.0.3 (2014-10-15) 157 | 158 | ## :bug: Bug Fixes 159 | 160 | - Fix issue with variable names in pigments ([51e4a719](https://github.com/abe33/atom-color-highlight/commit/51e4a7191cab8d897cd29367d9029dff252dc071)) 161 | 162 | 163 | # v2.0.2 (2014-10-14) 164 | 165 | ## :bug: Bug Fixes 166 | 167 | - Fix access to a removed private method ([f12d0a2f](https://github.com/abe33/atom-color-highlight/commit/f12d0a2f55eae586fec825966d3764f64783c14c)) 168 | 169 | 170 | # v2.0.1 (2014-10-14) 171 | 172 | ## :bug: Bug Fixes 173 | 174 | - Fix engine version ([52be0d14](https://github.com/abe33/atom-color-highlight/commit/52be0d145ee1ec610d5caaf365293bbf49942685)) 175 | 176 | 177 | # v2.0.0 (2014-10-14) 178 | 179 | ## :sparkles: Features 180 | 181 | - Add a setting to exclude specified grammar from highlighting ([724ff88a](https://github.com/abe33/atom-color-highlight/commit/724ff88aeb0d6d891798e92cec295c91140e8415))
By setting a list of grammar scopes in the `excludedGrammars` setting, 182 | the corresponding files won’t display any color highlights. 183 | 184 | ## :bug: Bug Fixes 185 | 186 | - Fix deprecations ([6a80af02](https://github.com/abe33/atom-color-highlight/commit/6a80af021e33dad4416854b183fa679a80f76ec7)) 187 | - Fix atom freeze when canceling big multiple selections ([10fb9bfa](https://github.com/abe33/atom-color-highlight/commit/10fb9bfa6a1bd95ba0a25c5a3b5124f1e39b7b3a)) 188 | 189 | 190 | # v1.0.5 (2014-10-03) 191 | 192 | ## :bug: Bug Fixes 193 | 194 | - Fix broken dot marker update since API changes ([a9b97049](https://github.com/abe33/atom-color-highlight/commit/a9b97049b8fdbd7ae85e093076178f07f590f25f)) 195 | 196 | 197 | # v1.0.4 (2014-09-18) 198 | 199 | ## :bug: Bug Fixes 200 | 201 | - Fix aliased color at n+2 not detected ([6f446e79](https://github.com/abe33/atom-color-highlight/commit/6f446e790ec083b87f4dde38035844ea0755304b)) 202 | 203 | ## :racehorse: Performances 204 | 205 | - Prevent works when no markers was found ([352c9cf1](https://github.com/abe33/atom-color-highlight/commit/352c9cf1fe248e9f69e1c8dd5def404094f72952)) 206 | 207 | 208 | # v1.0.3 (2014-09-16) 209 | 210 | ## :bug: Bug Fixes 211 | 212 | - Fix deprecated method calls on markers ([040475c8](https://github.com/abe33/atom-color-highlight/commit/040475c8019d5f19bacc236d5710224098581328)) 213 | - Fix deprecated method calls ([bfcc4a90](https://github.com/abe33/atom-color-highlight/commit/bfcc4a902e5d0c68a0a6aa74d17b7a308b817210)) 214 | 215 | 216 | # v1.0.1 (2014-08-04) 217 | 218 | ## :bug: Bug Fixes 219 | 220 | - Fix warning due to deprecated prefixed function ([49bd8c6e](https://github.com/abe33/atom-color-highlight/commit/49bd8c6e8f3e6fcb48ba4876d9c2a1b89a810e9c)) 221 | 222 | 223 | # v1.0.0 (2014-08-04) 224 | 225 | ## :sparkles: Features 226 | 227 | - Add support of pigments 2.0.0 and Atom 0.120.0 ([78d0db5f](https://github.com/abe33/atom-color-highlight/commit/78d0db5fc3665b26933340f89502b739de52b873)) 228 | 229 | ## :bug: Bug Fixes 230 | 231 | - Fix invalid layout when adding removing a color in a line ([a185707c](https://github.com/abe33/atom-color-highlight/commit/a185707c64a1c3a997785067a2fb6ea574c82ddb)) 232 | 233 | 234 | # v0.19.4 (2014-07-30) 235 | 236 | ## :bug: Bug Fixes 237 | 238 | - Fix missing match when a color is followed by a class selector ([8c482feb](https://github.com/abe33/atom-color-highlight/commit/8c482feb568db30829bffca96ace40bf7be0b386)) 239 | 240 | 241 | # v0.19.3 (2014-07-21) 242 | 243 | ## :bug: Bug Fixes 244 | 245 | - Fix invalid lighten/darken operation for less/sass ([abe33/pigments@8ac0214d](https://github.com/abe33/pigments/commit/8ac0214dd67ea34b77be21ce03440f9de914f3fe), [abe33/atom-color-highlight#26](https://github.com/abe33/atom-color-highlight/issues/26)) 246 | - Fix css color function raising exception when invalid ([abe33/pigments@a883ccad](https://github.com/abe33/pigments/commit/a883ccadb60a3498d01506ab821ed43e39992fe4), [abe33/atom-color-highlight#27](https://github.com/abe33/atom-color-highlight/issues/27)) 247 | 248 | 249 | 250 | # v0.19.2 (2014-07-21) 251 | 252 | ## :bug: Bug Fixes 253 | 254 | - Fix broken variable handling at n+1 ([abe33/pigments@f34be5b0](https://github.com/abe33/pigments/commit/f34be5b082ce60a11ad3f710604e410b60d5a4e8), [#23](https://github.com/abe33/atom-color-highlight/issues/23)) 255 | 256 | 257 | # v0.19.1 (2014-07-20) 258 | 259 | ## :bug: Bug Fixes 260 | 261 | - Fix creating markers for invalid colors ([dc204b98](https://github.com/abe33/atom-color-highlight/commit/dc204b981a42ee1404748c72f9e85227b4605275)) 262 | 263 | 264 | # v0.19.0 (2014-07-20) 265 | 266 | ## :sparkles: Features 267 | 268 | - Implement masking markers present in strings ([7691338b](https://github.com/abe33/atom-color-highlight/commit/7691338bfec09c4887927b0aefd04f4512c22a8c)) 269 | - Add support for variables in color functions ([abe33/pigments@ee67434a](https://github.com/abe33/pigments/commit/ee67434acc0ae8542e8cb02235247216561900fc)) 270 |
Includes: 271 | - Any parameter can now be a variable 272 | - Any missing variable will mark the color as invalid 273 | 274 | 275 | # v0.18.0 (2014-07-18) 276 | 277 | ## :bug: Bug Fixes 278 | 279 | - Fix sass method parsed as css color function ([eced697f](https://github.com/abe33/atom-color-highlight/commit/eced697f8d3b8d6003e1959b7c306973d161aac7), [#21](https://github.com/abe33/atom-color-highlight/issues/21)) 280 | 281 | 282 | # v0.17.0 (2014-07-16) 283 | 284 | ## :sparkles: Features 285 | 286 | - Add support for css 4 `gray` functional notation. ([abe33/pigments@f8f0d212](https://github.com/abe33/pigments/commit/f8f0d21223c24b4724c8e0638b4f3b52126160b1)) 287 | - Add support for the `hwb` color model the corresponding css4 function. ([abe33/pigments@b64d9574](https://github.com/abe33/pigments/commit/b64d95749a348cb66e9434c5438eac6afbca0693), [abe33/atom-color-highlight#20](https://github.com/abe33/atom-color-highlight/issues/20)) 288 | 289 | ## :bug: Bug Fixes 290 | 291 | - Fix z-index issues with popover lists ([ea13b1d1](https://github.com/abe33/atom-color-highlight/commit/ea13b1d1c473878708746ef020358914f7b5dd50), [#17](https://github.com/abe33/atom-color-highlight/issues/17)) 292 | - Fix missing getBufferRange method on dot markers ([4d25639b](https://github.com/abe33/atom-color-highlight/commit/4d25639b97439ab6ffc54113ab8c89fbb25c967b), [#19](https://github.com/abe33/atom-color-highlight/issues/19)) 293 | 294 | 295 | # v0.16.0 (2014-07-11) 296 | 297 | ## :sparkles: Features 298 | 299 | - Implement masking markers present in comments ([cb4d5529](https://github.com/abe33/atom-color-highlight/commit/cb4d5529231cdfdbb6a4d9645c27b394db111587), [#16](https://github.com/abe33/atom-color-highlight/issues/16)) 300 | - Implement dot markers on end of lines ([98d7e33d](https://github.com/abe33/atom-color-highlight/commit/98d7e33d531b0fc2a6e20bb9f8d54bc1be78d796), [#11](https://github.com/abe33/atom-color-highlight/issues/11)) 301 | 302 | 303 | # v0.15.0 (2014-07-10) 304 | 305 | ## :sparkles: Features 306 | 307 | - Add Travis CI setup ([38bbaf09](https://github.com/abe33/atom-color-highlight/commit/38bbaf096062558fe6848e945e73fb4c0ecfb5e1)) 308 | - Implement highlight update on palette refresh ([a0aa45f6](https://github.com/abe33/atom-color-highlight/commit/a0aa45f6c2f7ee4220e3dd1e64b3ade40bece018)) 309 | 310 | ## :bug: Bug Fixes 311 | 312 | - Fix views and models access by editors on react ([3f0c77eb](https://github.com/abe33/atom-color-highlight/commit/3f0c77eb29e418bf257f257bbab2eb65d3791696)) 313 | 314 | 315 | # v0.14.0 (2014-06-03) 316 | 317 | ## :sparkles: Features 318 | 319 | - Add screenshot for live update feature ([259574ea](https://github.com/abe33/atom-color-highlight/commit/259574ea9866999719a79cc5ea97b678ae472df2)) 320 | - Add live update of colors derived of a variable from same file ([6ab0d54a](https://github.com/abe33/atom-color-highlight/commit/6ab0d54af430cb9fb7b16000d262fb86d2f3bfc2)) 321 | - Implement support for color provided by pigments during scan ([dedf26ff](https://github.com/abe33/atom-color-highlight/commit/dedf26ffcae5bec74e66cbe0583e6fbabd7ad33a))
It enables parsing of colors using variables defined in the 322 | same file. 323 | 324 | 325 | # 0.13.4 (2014-05-29) 326 | 327 | ## :bug: Bug Fixes 328 | 329 | - Force new pigments version ([57e187e2](https://github.com/abe33/atom-color-highlight/commit/57e187e2228f55160a46d5f982ddf1d1d276b6d8), Closes [#12](https://github.com/abe33/atom-color-highlight/issues/12)) 330 | 331 | 332 | # 0.13.3 (2014-05-29) 333 | 334 | ## :bug: Bug Fixes 335 | 336 | - Fix broken view when react editor is enabled ([4be2c7b3](https://github.com/abe33/atom-color-highlight/commit/4be2c7b352005966f94f9be9410571d0958788c3)) 337 | 338 | 339 | # 0.13.1 (2014-05-14) 340 | 341 | ## :bug: Bug Fixes 342 | 343 | - **meta:** updates CHANGELOG with latest changes 344 | 345 | 346 | # 0.13.0 (2014-05-14) 347 | 348 | ## :bug: Bug Fixes 349 | 350 | - **markers**: handles properly declarations that spans on several lines ([349ada974e](https://github.com/abe33/atom-color-highlight/commit/349ada974e45919ec7426daa7f8940acc486961b), [#8](https://github.com/abe33/atom-color-highlight/issues/8)) 351 | 352 | 353 | # 0.12.0 (2014-04-25) 354 | 355 | ## :sparkles: Features 356 | 357 | - **expressions**: 358 | - uses [pigments](https://github.com/abe33/pigments) module and removes previous color model 359 | - uses [project-palette-finder](https://atom.io/packages/project-palette-finder) color model if available 360 | 361 | 362 | # 0.11.1 (2014-04-16) 363 | 364 | ## :sparkles: Features 365 | 366 | - **docs**: updates the changelog 367 | 368 | 369 | # 0.11.0 (2014-04-16) 370 | 371 | ## :sparkles: Features 372 | 373 | - **dependencies**: updates oniguruma version from `1.x` to `2.x` 374 | 375 | 376 | # 0.10.0 (2014-04-16) 377 | 378 | ## :sparkles: Features 379 | 380 | - **functions**: adds support for the following color functions: 381 | - tint (stylus) 382 | - shade (stylus) 383 | - lighten 384 | - darken 385 | - transparentize 386 | - opacify 387 | - grayscale 388 | - saturate 389 | - desaturate 390 | - adjust-hue 391 | - invert 392 | - mix (sass/less) 393 | - fadein (less) 394 | - fadeout (less) 395 | - greyscale (less) 396 | 397 | 398 | # 0.9.0 (2014-04-11) 399 | 400 | ## :sparkles: Features 401 | 402 | - **expressions:** 403 | - adds support for hsv and hsva expression 404 | - adds support for `darken`, `lighten` and `transparentize` functions 405 | 406 | ## :bug: Bug Fixes 407 | 408 | - **expressions:** previously hsl expressions was treated as in hsv color space 409 | 410 | 411 | # 0.8.0 (2014-03-14) 412 | 413 | ## :bug: Bug Fixes 414 | 415 | - **markers:** fixes invalid marker position on update after grammar change 416 | ([4f11759b](https://github.com/abe33/atom-color-highlight/commit/4f11759bad8e9bfa2a4b956ec56ab53928f802ee), 417 | [#2](https://github.com/abe33/atom-color-highlight/issues/2)) 418 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | Copyright (c) 2014 Cédric Néhémie 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining 4 | a copy of this software and associated documentation files (the 5 | "Software"), to deal in the Software without restriction, including 6 | without limitation the rights to use, copy, modify, merge, publish, 7 | distribute, sublicense, and/or sell copies of the Software, and to 8 | permit persons to whom the Software is furnished to do so, subject to 9 | the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be 12 | included in all copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 17 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 18 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 19 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 20 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # This package is no longer maintained as it is now replaced by the [pigments package](https://atom.io/packages/pigments).
If both packages are installed this package will not activate. 2 | 3 | 4 | # Atom Color Highlight [![Build Status](https://travis-ci.org/abe33/atom-color-highlight.svg?branch=master)](https://travis-ci.org/abe33/atom-color-highlight) 5 | 6 | Highlights colors in files. 7 | 8 | ![AtomColorHighlight Screenshot](https://raw.github.com/abe33/atom-color-highlight/master/atom-color-highlight-variables.gif) 9 | 10 | ![AtomColorHighlight Screenshot](https://raw.github.com/abe33/atom-color-highlight/master/atom-color-highlight.jpg) 11 | 12 | ### Project Palette Support 13 | 14 | If you have the [project-palette-finder package](https://atom.io/packages/project-palette-finder) installed, the package will automatically benefit from the palette definitions: 15 | 16 | ![AtomColorHighlight And Project Palette Screenshot](https://raw.github.com/abe33/atom-color-highlight/master/atom-color-highlight-palette.jpg) 17 | 18 | ### API 19 | 20 | This package provides some API so that you can access the models it creates for the text editors: 21 | 22 | #### Observing Models Creation 23 | 24 | ```coffeescript 25 | atom.packages.activatePackage('atom-color-highlight').then (pkg) -> 26 | atomColorHighlight = pkg.mainModule 27 | 28 | atomColorHighlight.observeColorHighlightModels (model) -> 29 | # Model is an instance of AtomColorHighlightModel 30 | ``` 31 | 32 | #### Retrieving Models For Text Editors 33 | 34 | ```coffeescript 35 | atom.packages.activatePackage('atom-color-highlight').then (pkg) -> 36 | atomColorHighlight = pkg.mainModule 37 | 38 | model = atomColorHighlight.modelForEditor(editor) 39 | ``` 40 | 41 | #### Listening To A Model's Markers Update 42 | 43 | ```coffeescript 44 | model.onDidUpdateMarkers (markers) -> 45 | # Do something with markers 46 | ``` 47 | 48 | The `markers` array contains the display buffer markers for all the colors found in the corresponding text editor. Those markers contains extra properties with color data: 49 | 50 | * `marker.bufferMarker.properties.color`: The color `String` that was matched by the model. 51 | * `marker.bufferMarker.properties.cssColor`: The CSS representation of the color as a `String`. 52 | * `marker.bufferMarker.properties.textColor`: The text color, based on the original color luminance, computed beforehand. 53 | 54 | ### Modifying Markers Styles 55 | 56 | To target the classical markers, use the following rule: 57 | 58 | ```less 59 | atom-text-editor, atom-text-editor::shadow { 60 | atom-color-highlight color-marker .region { 61 | // ... 62 | } 63 | } 64 | ``` 65 | 66 | And to target the dot marker at end of lines, use the following rule: 67 | 68 | ```less 69 | atom-text-editor, atom-text-editor::shadow { 70 | atom-color-highlight dot-color-marker { 71 | // ... 72 | } 73 | } 74 | ``` 75 | 76 | ### Extending Color Parsing 77 | 78 | You can register a new color expression using the `Color.addExpression` method. 79 | 80 | ```coffeescript 81 | atom.packages.activatePackage('atom-color-highlight').then (pkg) -> 82 | atomColorHighlight = pkg.mainModule 83 | {Color} = atomColorHighlight 84 | 85 | Color.addExpression 'name', 'regexp', (color, expression, fileVariables) -> 86 | # modify color using data extracted from expression 87 | ``` 88 | 89 | The first argument is a string that match the new expression using regular expressions. 90 | This string will be used to match the expression both when scanning the 91 | buffer and when creating a `Color` object for the various matches. 92 | 93 | Note that the regular expression source will be concatened with the other 94 | expressions to create the `RegExp` used on the buffer. 95 | In that regards, selectors such `^` and `$` should be avoided at all cost. 96 | 97 | The second argument is the function called by the `Color` class when the 98 | current expression match your regexp. It'll be called with the `Color` instance 99 | to modify, the matching expression as a string and an object containing the variables found in the file (can be colors or any other values). 100 | 101 | For instance, the CSS hexadecimal RGB notation is defined as follow: 102 | 103 | ```coffeescript 104 | Color.addExpression 'css_hexa_6', "#([\\da-fA-F]{6})(?![\\da-fA-F])", (color, expression, fileVariables) -> 105 | [m, hexa] = @onigRegExp.search(expression) 106 | 107 | color.hex = hexa.match 108 | ``` 109 | -------------------------------------------------------------------------------- /atom-color-highlight-palette.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abe33/atom-color-highlight/57a884a30a54a93819986d25892c6f1cd8fbfdc2/atom-color-highlight-palette.jpg -------------------------------------------------------------------------------- /atom-color-highlight-variables.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abe33/atom-color-highlight/57a884a30a54a93819986d25892c6f1cd8fbfdc2/atom-color-highlight-variables.gif -------------------------------------------------------------------------------- /atom-color-highlight.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abe33/atom-color-highlight/57a884a30a54a93819986d25892c6f1cd8fbfdc2/atom-color-highlight.jpg -------------------------------------------------------------------------------- /lib/atom-color-highlight-element.coffee: -------------------------------------------------------------------------------- 1 | _ = require 'underscore-plus' 2 | {CompositeDisposable, Disposable} = require 'event-kit' 3 | 4 | MarkerElement = require './marker-element' 5 | DotMarkerElement = require './dot-marker-element' 6 | 7 | class AtomColorHighlightElement extends HTMLElement 8 | 9 | createdCallback: -> 10 | @selections = [] 11 | @markerViews = {} 12 | @subscriptions = new CompositeDisposable 13 | 14 | attach: -> 15 | requestAnimationFrame => 16 | editorElement = atom.views.getView(@model.editor) 17 | editorRoot = editorElement.shadowRoot ? editorElement 18 | editorRoot.querySelector('.lines')?.appendChild this 19 | 20 | detachedCallback: -> 21 | @attach() unless @model.isDestroyed() 22 | 23 | setModel: (@model) -> 24 | {@editor} = @model 25 | @editorElement = atom.views.getView(@editor) 26 | 27 | @subscriptions.add @model.onDidUpdateMarkers (markers) => 28 | @markersUpdated(markers) 29 | @subscriptions.add @model.onDidDestroy => @destroy() 30 | 31 | @subscriptions.add @editor.onDidAddCursor => @requestSelectionUpdate() 32 | @subscriptions.add @editor.onDidRemoveCursor => @requestSelectionUpdate() 33 | @subscriptions.add @editor.onDidChangeCursorPosition => @requestSelectionUpdate() 34 | @subscriptions.add @editor.onDidAddSelection => @requestSelectionUpdate() 35 | @subscriptions.add @editor.onDidRemoveSelection => @requestSelectionUpdate() 36 | @subscriptions.add @editor.onDidChangeSelectionRange => @requestSelectionUpdate() 37 | 38 | @subscriptions.add @editorElement.onDidAttach => 39 | @updateSelections() 40 | @updateMarkers() 41 | 42 | @subscriptions.add atom.config.observe 'atom-color-highlight.hideMarkersInComments', => @rebuildMarkers() 43 | @subscriptions.add atom.config.observe 'atom-color-highlight.hideMarkersInStrings', => @rebuildMarkers() 44 | @subscriptions.add atom.config.observe 'atom-color-highlight.markersAtEndOfLine', => @rebuildMarkers() 45 | @subscriptions.add atom.config.observe 'atom-color-highlight.dotMarkersSize', => @rebuildMarkers() 46 | @subscriptions.add atom.config.observe 'atom-color-highlight.dotMarkersSpading', => @rebuildMarkers() 47 | @subscriptions.add atom.config.observe 'editor.lineHeight', => @rebuildMarkers() 48 | @subscriptions.add atom.config.observe 'editor.fontSize', => @rebuildMarkers() 49 | 50 | @updateSelections() 51 | 52 | requestSelectionUpdate: -> 53 | return if @updateRequested 54 | 55 | @updateRequested = true 56 | requestAnimationFrame => 57 | @updateRequested = false 58 | return if @editor.getBuffer().isDestroyed() 59 | @updateSelections() 60 | 61 | updateSelections: -> 62 | return if @editor.displayBuffer.isDestroyed() 63 | return if @markers?.length is 0 64 | 65 | selections = @editor.getSelections() 66 | 67 | viewsToBeDisplayed = _.clone(@markerViews) 68 | 69 | for id,view of @markerViews 70 | view.removeClass('selected') 71 | 72 | for selection in selections 73 | range = selection.getScreenRange() 74 | viewRange = view.getScreenRange() 75 | 76 | continue unless viewRange? and range? 77 | 78 | if viewRange.intersectsWith(range) 79 | view.addClass('selected') 80 | delete viewsToBeDisplayed[id] 81 | 82 | view.show() for id,view of viewsToBeDisplayed 83 | 84 | # Tear down any state and detach 85 | destroy: -> 86 | @subscriptions.dispose() 87 | @destroyAllViews() 88 | @parentNode?.removeChild(this) 89 | 90 | getMarkerAt: (position) -> 91 | for id, view of @markerViews 92 | return view if view.marker.bufferMarker.containsPoint(position) 93 | 94 | removeMarkers: -> 95 | markerView.remove() for id, markerView of @markerViews 96 | @markerViews = {} 97 | 98 | markersUpdated: (@markers) -> 99 | markerViewsToRemoveById = _.clone(@markerViews) 100 | markersByRows = {} 101 | useDots = atom.config.get('atom-color-highlight.markersAtEndOfLine') 102 | sortedMarkers = [] 103 | 104 | for marker in @markers 105 | continue unless marker? 106 | if @markerViews[marker.id]? 107 | delete markerViewsToRemoveById[marker.id] 108 | if useDots 109 | sortedMarkers.push @markerViews[marker.id] 110 | else 111 | if useDots 112 | markerView = @createDotMarkerElement(marker, markersByRows) 113 | sortedMarkers.push markerView 114 | else 115 | markerView = @createMarkerElement(marker) 116 | @appendChild(markerView) 117 | @markerViews[marker.id] = markerView 118 | 119 | for id, markerView of markerViewsToRemoveById 120 | delete @markerViews[id] 121 | markerView.remove() 122 | 123 | if useDots 124 | markersByRows = {} 125 | for markerView in sortedMarkers 126 | markerView.markersByRows = markersByRows 127 | markerView.updateNeeded = true 128 | markerView.clearPosition = true 129 | markerView.updateDisplay() 130 | 131 | rebuildMarkers: -> 132 | return unless @markers 133 | markersByRows = {} 134 | 135 | for marker in @markers 136 | continue unless marker? 137 | @markerViews[marker.id].remove() if @markerViews[marker.id]? 138 | 139 | if atom.config.get('atom-color-highlight.markersAtEndOfLine') 140 | markerView = @createDotMarkerElement(marker, markersByRows) 141 | else 142 | markerView = @createMarkerElement(marker) 143 | 144 | @appendChild(markerView) 145 | @markerViews[marker.id] = markerView 146 | 147 | updateMarkers: -> 148 | markerView.updateDisplay() for id,markerView of @markerViews 149 | 150 | destroyAllViews: -> 151 | @removeChild(@firstChild) while @firstChild 152 | @markerViews = {} 153 | 154 | createMarkerElement: (marker) -> 155 | element = new MarkerElement 156 | element.init({@editorElement, @editor, marker}) 157 | element 158 | 159 | createDotMarkerElement: (marker, markersByRows) -> 160 | element = new DotMarkerElement 161 | element.init({@editorElement, @editor, marker, markersByRows}) 162 | element 163 | 164 | # ######## ## ######## ## ## ######## ## ## ######## 165 | # ## ## ## ### ### ## ### ## ## 166 | # ## ## ## #### #### ## #### ## ## 167 | # ###### ## ###### ## ### ## ###### ## ## ## ## 168 | # ## ## ## ## ## ## ## #### ## 169 | # ## ## ## ## ## ## ## ### ## 170 | # ######## ######## ######## ## ## ######## ## ## ## 171 | 172 | module.exports = AtomColorHighlightElement = document.registerElement 'atom-color-highlight', prototype: AtomColorHighlightElement.prototype 173 | 174 | AtomColorHighlightElement.registerViewProvider = (modelClass) -> 175 | atom.views.addViewProvider modelClass, (model) -> 176 | element = new AtomColorHighlightElement 177 | element.setModel(model) 178 | element 179 | -------------------------------------------------------------------------------- /lib/atom-color-highlight-model.coffee: -------------------------------------------------------------------------------- 1 | _ = require 'underscore-plus' 2 | {CompositeDisposable, Emitter} = require 'event-kit' 3 | 4 | module.exports = 5 | class AtomColorHighlightModel 6 | @idCounter: 0 7 | 8 | @markerClass: 'color-highlight' 9 | @bufferRange: [[0,0], [Infinity,Infinity]] 10 | 11 | constructor: (@editor) -> 12 | @buffer = @editor.getBuffer() 13 | @id = AtomColorHighlightModel.idCounter++ 14 | @dirty = false 15 | @emitter = new Emitter 16 | @subscriptions = new CompositeDisposable 17 | 18 | onDidUpdateMarkers: (callback) -> 19 | @emitter.on 'did-update-markers', callback 20 | 21 | onDidDestroy: (callback) -> 22 | @emitter.on 'did-destroy', callback 23 | 24 | update: => 25 | return if @frameRequested 26 | 27 | @frameRequested = true 28 | requestAnimationFrame => 29 | @frameRequested = false 30 | @updateMarkers() 31 | 32 | subscribeToBuffer: -> 33 | @subscriptions.add @editor.onDidChange => @dirty = true 34 | @subscriptions.add @editor.onDidStopChanging => @update() 35 | @subscriptions.add @editor.displayBuffer.onDidTokenize => @update() 36 | @subscriptions.add @editor.onDidDestroy => @destroy() 37 | 38 | unsubscribeFromBuffer: -> 39 | @subscriptions.dispose() 40 | @buffer = null 41 | 42 | init: -> 43 | @subscribeToBuffer() 44 | @destroyAllMarkers() 45 | @update() 46 | 47 | destroy: -> 48 | @destroyed = true 49 | @emitter.emit('did-destroy') 50 | @unsubscribeFromBuffer() if @buffer? 51 | 52 | isDestroyed: -> @destroyed 53 | 54 | eachColor: (block) -> 55 | return @constructor.Color.scanBufferForColors(@buffer, block) if @buffer? 56 | 57 | updateMarkers: -> 58 | return @destroyAllMarkers() unless @buffer? 59 | return if @updating 60 | 61 | @updating = true 62 | updatedMarkers = [] 63 | markersToRemoveById = {} 64 | 65 | markersToRemoveById[marker.id] = marker for marker in @markers 66 | 67 | try 68 | promise = @eachColor() 69 | 70 | promise.then (results) => 71 | @updating = false 72 | results = [] unless results? 73 | 74 | for res in results 75 | continue unless res? 76 | 77 | {bufferRange: range, match, color} = res 78 | 79 | continue if color.isInvalid 80 | 81 | if marker = @findMarker(match, range) 82 | if marker.bufferMarker.properties.cssColor isnt color.toCSS() 83 | marker = @createMarker(match, color, range) 84 | else 85 | delete markersToRemoveById[marker.id] 86 | else 87 | marker = @createMarker(match, color, range) 88 | 89 | updatedMarkers.push marker 90 | 91 | marker.destroy() for id, marker of markersToRemoveById 92 | 93 | @markers = updatedMarkers 94 | @emitter.emit 'did-update-markers', _.clone(@markers) 95 | @dirty = false 96 | .fail (e) -> 97 | @dirty = false 98 | console.log e 99 | 100 | catch e 101 | @destroyAllMarkers() 102 | throw e 103 | 104 | findMarker: (color, range) -> 105 | attributes = 106 | type: @constructor.markerClass 107 | color: color 108 | startPosition: range.start 109 | endPosition: range.end 110 | 111 | _.find @editor.findMarkers(attributes), (marker) -> marker.isValid() 112 | 113 | destroyAllMarkers: -> 114 | marker.destroy() for marker in @markers ? [] 115 | @markers = [] 116 | @emitter.emit 'did-update-markers', _.clone(@markers) 117 | 118 | createMarker: (color, colorObject, range) -> 119 | l = colorObject.luma() 120 | 121 | textColor = if l > 0.43 122 | 'black' 123 | else 124 | 'white' 125 | 126 | markerAttributes = 127 | type: @constructor.markerClass 128 | color: color 129 | cssColor: colorObject.toCSS() 130 | textColor: textColor 131 | invalidate: 'touch' 132 | persistent: false 133 | 134 | @editor.markBufferRange(range, markerAttributes) 135 | -------------------------------------------------------------------------------- /lib/atom-color-highlight.coffee: -------------------------------------------------------------------------------- 1 | {Emitter, CompositeDisposable} = require 'event-kit' 2 | {deprecate} = require 'grim' 3 | [AtomColorHighlightModel, AtomColorHighlightElement] = [] 4 | 5 | class AtomColorHighlight 6 | config: 7 | markersAtEndOfLine: 8 | type: 'boolean' 9 | default: false 10 | hideMarkersInComments: 11 | type: 'boolean' 12 | default: false 13 | hideMarkersInStrings: 14 | type: 'boolean' 15 | default: false 16 | dotMarkersSize: 17 | type: 'number' 18 | default: 16 19 | min: 2 20 | dotMarkersSpacing: 21 | type: 'number' 22 | default: 4 23 | min: 0 24 | excludedGrammars: 25 | type: 'array' 26 | default: [] 27 | description: "Prevents files matching the specified grammars scopes from having their colors highligted. Changing this setting may need a restart to take effect. This setting takes a list of scope strings separated with commas. Scope for a grammar can be found in the corresponding package description in the settings view." 28 | items: 29 | type: 'string' 30 | 31 | models: {} 32 | 33 | activate: (state) -> 34 | @subscriptions = new CompositeDisposable 35 | 36 | AtomColorHighlightModel ||= require './atom-color-highlight-model' 37 | AtomColorHighlightElement ||= require './atom-color-highlight-element' 38 | @Color ||= require 'pigments' 39 | 40 | AtomColorHighlightElement.registerViewProvider(AtomColorHighlightModel) 41 | AtomColorHighlightModel.Color = @Color 42 | 43 | unless atom.inSpecMode() 44 | try atom.packages.activatePackage('project-palette-finder').then (pack) => 45 | finder = pack.mainModule 46 | AtomColorHighlightModel.Color = @Color = finder.Color if finder? 47 | @subscriptions.add finder.onDidUpdatePalette @update 48 | 49 | @emitter = new Emitter 50 | @subscriptions.add atom.workspace.observeTextEditors (editor) => 51 | 52 | return if editor.getGrammar().scopeName in atom.config.get('atom-color-highlight.excludedGrammars') 53 | 54 | model = new AtomColorHighlightModel(editor) 55 | view = atom.views.getView(model) 56 | 57 | model.init() 58 | view.attach() 59 | 60 | @subscriptions.add sub = model.onDidDestroy => 61 | @subscriptions.remove(sub) 62 | sub.dispose() 63 | delete @models[editor.id] 64 | 65 | @models[editor.id] = model 66 | @emitter.emit 'did-create-model', model 67 | 68 | # If pigments is running then we deactivate this package 69 | try atom.packages.activatePackage('pigments').then => 70 | @deactivate() 71 | 72 | eachColorHighlightEditor: (callback) -> 73 | deprecate 'Use ::observeColorHighlightModels instead' 74 | @observeColorHighlightModels(callback) 75 | 76 | observeColorHighlightModels: (callback) -> 77 | callback?(editor) for id,editor of @models if callback? 78 | @onDidCreateModel(callback) 79 | 80 | onDidCreateModel: (callback) -> 81 | @emitter.on 'did-create-model', callback 82 | 83 | modelForEditor: (editor) -> @models[editor.id] 84 | 85 | deactivate: -> 86 | model.destroy() for id,model of @models 87 | @subscriptions.dispose() 88 | @models = {} 89 | 90 | module.exports = new AtomColorHighlight 91 | -------------------------------------------------------------------------------- /lib/dot-marker-element.coffee: -------------------------------------------------------------------------------- 1 | {CompositeDisposable} = require 'event-kit' 2 | MarkerMixin = require './marker-mixin' 3 | 4 | module.exports = 5 | class DotMarkerElement extends HTMLElement 6 | MarkerMixin.includeInto(this) 7 | 8 | createdCallback: -> 9 | @subscriptions = new CompositeDisposable() 10 | 11 | init: ({@editorElement, @editor, @marker, @markersByRows}) -> 12 | @innerHTML = '
' 13 | 14 | @updateNeeded = @marker.isValid() 15 | @oldScreenRange = @getScreenRange() 16 | @buffer = @editor.getBuffer() 17 | @clearPosition = true 18 | 19 | @subscribeToMarker() 20 | @updateDisplay() 21 | 22 | updateDisplay: => 23 | return unless @isUpdateNeeded() 24 | 25 | @updateNeeded = false 26 | range = @getScreenRange() 27 | return if range.isEmpty() 28 | 29 | @hide() if @isHidden() 30 | 31 | size = @getSize() 32 | spacing = @getSpacing() 33 | @markersByRows[range.start.row] ?= 0 34 | 35 | if @clearPosition 36 | @position = @markersByRows[range.start.row] 37 | @clearPosition = false 38 | 39 | @markersByRows[range.start.row]++ 40 | 41 | color = @getColor() 42 | colorText = @getColorTextColor() 43 | line = @editor.lineTextForScreenRow(range.start.row) 44 | lineLength = line.length 45 | position = row: range.start.row, column: lineLength 46 | {top, left} = @editorElement.pixelPositionForScreenPosition(position) 47 | @style.top = top + 'px' 48 | @style.width = size + 'px' 49 | @style.height = size + 'px' 50 | @style.left = (left + spacing + @position * (size + spacing)) + 'px' 51 | @style.backgroundColor = color 52 | @style.color = colorText 53 | 54 | getSize: -> atom.config.get('atom-color-highlight.dotMarkersSize') 55 | getSpacing: -> atom.config.get('atom-color-highlight.dotMarkersSpacing') 56 | 57 | module.exports = DotMarkerElement = document.registerElement 'dot-color-marker', prototype: DotMarkerElement.prototype 58 | -------------------------------------------------------------------------------- /lib/marker-element.coffee: -------------------------------------------------------------------------------- 1 | {CompositeDisposable} = require 'event-kit' 2 | MarkerMixin = require './marker-mixin' 3 | 4 | module.exports = 5 | class MarkerElement extends HTMLElement 6 | MarkerMixin.includeInto(this) 7 | 8 | createdCallback: -> 9 | @regions = [] 10 | 11 | init: ({@editorElement, @editor, @marker}) -> 12 | @updateNeeded = @marker.isValid() 13 | @oldScreenRange = @getScreenRange() 14 | 15 | @subscribeToMarker() 16 | @updateDisplay() 17 | 18 | updateDisplay: => 19 | return unless @isUpdateNeeded() 20 | 21 | @updateNeeded = false 22 | @clearRegions() 23 | range = @getScreenRange() 24 | return if range.isEmpty() 25 | 26 | @hide() if @isHidden() 27 | 28 | rowSpan = range.end.row - range.start.row 29 | 30 | if rowSpan == 0 31 | @appendRegion(1, range.start, range.end) 32 | else 33 | @appendRegion(1, range.start, {row: range.start.row, column: Infinity}) 34 | if rowSpan > 1 35 | @appendRegion(rowSpan - 1, { row: range.start.row + 1, column: 0}, {row: range.start.row + 1, column: Infinity}) 36 | @appendRegion(1, { row: range.end.row, column: 0 }, range.end) 37 | 38 | appendRegion: (rows, start, end) -> 39 | { lineHeight, charWidth } = @editorElement 40 | color = @getColor() 41 | colorText = @getColorTextColor() 42 | bufferRange = @editor.bufferRangeForScreenRange({start, end}) 43 | text = @editor.getTextInRange(bufferRange) 44 | 45 | css = @editorElement.pixelPositionForScreenPosition(start) 46 | css.height = lineHeight * rows 47 | if end 48 | css.width = @editorElement.pixelPositionForScreenPosition(end).left - css.left 49 | else 50 | css.right = 0 51 | 52 | region = document.createElement('div') 53 | region.className = 'region' 54 | region.textContent = text 55 | for name, value of css 56 | region.style[name] = value + 'px' 57 | 58 | region.style.backgroundColor = color 59 | region.style.color = colorText 60 | 61 | @appendChild(region) 62 | @regions.push(region) 63 | 64 | clearRegions: -> 65 | region.remove() for region in @regions 66 | @regions = [] 67 | 68 | module.exports = MarkerElement = document.registerElement 'color-marker', prototype: MarkerElement.prototype 69 | -------------------------------------------------------------------------------- /lib/marker-mixin.coffee: -------------------------------------------------------------------------------- 1 | Mixin = require 'mixto' 2 | {CompositeDisposable} = require 'event-kit' 3 | 4 | module.exports = 5 | class MarkerMixin extends Mixin 6 | addClass: (cls) -> @classList.add(cls) 7 | removeClass: (cls) -> @classList.remove(cls) 8 | 9 | remove: -> 10 | @subscriptions.dispose() 11 | @marker = null 12 | @editor = null 13 | @editor = null 14 | 15 | @parentNode?.removeChild(this) 16 | 17 | show: -> 18 | @style.display = "" unless @isHidden() 19 | 20 | hide: -> 21 | @style.display = "none" 22 | 23 | isVisible: -> 24 | oldScreenRange = @oldScreenRange 25 | newScreenRange = @getScreenRange() 26 | 27 | @oldScreenRange = newScreenRange 28 | @intersectsRenderedScreenRows(oldScreenRange) or @intersectsRenderedScreenRows(newScreenRange) 29 | 30 | subscribeToMarker: -> 31 | @subscriptions ?= new CompositeDisposable 32 | @subscriptions.add @marker.onDidChange (e) => @onMarkerChanged(e) 33 | @subscriptions.add @marker.onDidDestroy (e) => @remove() 34 | 35 | @subscriptions.add @editor.onDidChangeScrollTop (e) => @updateDisplay() 36 | 37 | onMarkerChanged: ({isValid}) -> 38 | @updateNeeded = isValid 39 | @updateDisplay() 40 | @updateVisibility() 41 | 42 | updateVisibility: -> 43 | if @isVisible() then @show() else @hide() 44 | 45 | isUpdateNeeded: -> 46 | return false unless @updateNeeded 47 | @isVisible() 48 | 49 | intersectsRenderedScreenRows: (range) -> 50 | range.intersectsRowRange(@editorElement.getFirstVisibleScreenRow(), @editorElement.getLastVisibleScreenRow()) 51 | 52 | isHidden: -> 53 | @hiddenDueToComment() or @hiddenDueToString() 54 | 55 | getScope: (bufferRange) -> 56 | if @editor.displayBuffer.scopesForBufferPosition? 57 | @editor.displayBuffer.scopesForBufferPosition(bufferRange.start).join(';') 58 | else 59 | descriptor = @editor.displayBuffer.scopeDescriptorForBufferPosition(bufferRange.start) 60 | if descriptor.join? 61 | descriptor.join(';') 62 | else 63 | descriptor.scopes.join(';') 64 | 65 | hiddenDueToComment: -> 66 | bufferRange = @getBufferRange() 67 | scope = @getScope(bufferRange) 68 | 69 | atom.config.get('atom-color-highlight.hideMarkersInComments') and scope.match(/comment/)? 70 | 71 | hiddenDueToString: -> 72 | bufferRange = @getBufferRange() 73 | scope = @getScope(bufferRange) 74 | atom.config.get('atom-color-highlight.hideMarkersInStrings') and scope.match(/string/)? 75 | 76 | getColor: -> @marker?.bufferMarker.properties.cssColor 77 | getColorText: -> @marker?.bufferMarker.properties.color 78 | getColorTextColor: -> @marker?.bufferMarker.properties.textColor 79 | getScreenRange: -> @marker?.getScreenRange() 80 | getBufferRange: -> @marker?.getBufferRange() 81 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "atom-color-highlight", 3 | "main": "./lib/atom-color-highlight", 4 | "version": "3.0.9", 5 | "private": true, 6 | "description": "Highlights color in files", 7 | "repository": "https://github.com/abe33/atom-color-highlight", 8 | "license": "MIT", 9 | "engines": { 10 | "atom": ">=0.136.0" 11 | }, 12 | "devDependencies": { 13 | "qq": "*" 14 | }, 15 | "dependencies": { 16 | "q": "1.x", 17 | "underscore-plus": "1.x", 18 | "pigments": ">= 3.2.0", 19 | "mixto": "1.x", 20 | "event-kit": "0.7.x", 21 | "grim": "^1" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /resources/transparent-background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abe33/atom-color-highlight/57a884a30a54a93819986d25892c6f1cd8fbfdc2/resources/transparent-background.png -------------------------------------------------------------------------------- /spec/atom-color-highlight-spec.coffee: -------------------------------------------------------------------------------- 1 | 2 | describe "AtomColorHighlight", -> 3 | [workspaceElement, editor, editorElement, buffer, markers, atomColorHighlight, model, charWidth] = [] 4 | 5 | beforeEach -> 6 | atom.config.set 'editor.fontSize', 10 7 | atom.config.set 'editor.lineHeight', 1 8 | 9 | waitsForPromise -> atom.packages.activatePackage('language-sass') 10 | waitsForPromise -> atom.workspace.open('sample.sass') 11 | 12 | waitsForPromise -> 13 | atom.packages.activatePackage('atom-color-highlight').then (pkg) -> 14 | atomColorHighlight = pkg.mainModule 15 | 16 | runs -> 17 | workspaceElement = atom.views.getView(atom.workspace) 18 | jasmine.attachToDOM(workspaceElement) 19 | 20 | styleNode = document.createElement('style') 21 | styleNode.textContent = """ 22 | atom-text-editor atom-color-highlight .region, 23 | atom-text-editor::shadow atom-color-highlight .region { 24 | margin-left: 0 !important; 25 | } 26 | 27 | atom-text-editor atom-color-highlight dot-color-marker, 28 | atom-text-editor::shadow atom-color-highlight dot-color-marker { 29 | margin-top: 0 !important; 30 | } 31 | """ 32 | 33 | jasmine.attachToDOM(styleNode) 34 | 35 | editor = atom.workspace.getActiveTextEditor() 36 | editorElement = atom.views.getView(editor) 37 | buffer = editor.getBuffer() 38 | model = atomColorHighlight.modelForEditor(editor) 39 | charWidth = editor.getDefaultCharWidth() 40 | 41 | editor.setText(""" 42 | $color: #f0f 43 | $other_color: '#ff0' 44 | 45 | // $light_color: lighten($color, 50%) 46 | 47 | $transparent_color: $color - rgba(0,0,0,0.5) 48 | 49 | $color_red: #D11A0A 50 | $color_red_light: lighten($color_red, 30%) 51 | $color_red_dark: darken($color_red, 10%) 52 | $color_red_darker: darken($color_red, 20%) 53 | """) 54 | 55 | editor.getBuffer().emitter.emit('did-stop-changing') 56 | 57 | waitsFor -> not model.dirty 58 | 59 | runs -> 60 | markers = editorElement.shadowRoot.querySelectorAll('.region') 61 | 62 | it 'retrieves the editor content', -> 63 | expect(markers.length).toEqual(9) 64 | 65 | it 'positions the regions properly', -> 66 | expect(markers[0].offsetTop).toEqual(0) 67 | expect(markers[0].offsetLeft).toEqual(8 * charWidth) 68 | 69 | expect(markers[1].offsetTop).toEqual(10) 70 | expect(markers[1].offsetLeft).toEqual(15 * charWidth) 71 | 72 | expect(markers[2].offsetTop).toEqual(30) 73 | expect(markers[2].offsetLeft).toEqual(17 * charWidth) 74 | 75 | expect(markers[3].offsetTop).toEqual(50) 76 | expect(markers[3].offsetLeft).toEqual(20 * charWidth) 77 | 78 | expect(markers[4].offsetTop).toEqual(50) 79 | expect(markers[4].offsetLeft).toEqual(29 * charWidth) 80 | 81 | expect(markers[5].offsetTop).toEqual(70) 82 | expect(markers[5].offsetLeft).toEqual(12 * charWidth) 83 | 84 | describe 'when content is added to the editor', -> 85 | beforeEach -> 86 | editor.moveToBottom() 87 | editor.insertText(' red') 88 | editor.getBuffer().emitter.emit('did-stop-changing') 89 | 90 | waitsFor -> not model.dirty 91 | 92 | it 'updates the markers in the view', -> 93 | markers = editorElement.shadowRoot.querySelectorAll('.region') 94 | expect(markers.length).toEqual(10) 95 | 96 | describe 'when core:backspace is triggered', -> 97 | beforeEach -> 98 | editor.setCursorBufferPosition [5,0] 99 | atom.commands.dispatch(editorElement, 'core:backspace') 100 | editor.getBuffer().emitter.emit('did-stop-changing') 101 | 102 | waitsFor -> not model.dirty 103 | 104 | it 'adjusts the position of the markers in the view', -> 105 | markers = editorElement.shadowRoot.querySelectorAll('.region') 106 | 107 | expect(markers[4].offsetTop).toEqual(40) 108 | expect(markers[4].offsetLeft).toEqual(29 * charWidth) 109 | 110 | expect(markers[5].offsetTop).toEqual(60) 111 | expect(markers[5].offsetLeft).toEqual(12 * charWidth) 112 | 113 | describe 'when content is removed from the editor', -> 114 | beforeEach -> 115 | editor.setText('') 116 | editor.getBuffer().emitter.emit('did-stop-changing') 117 | 118 | waitsFor -> not model.dirty 119 | 120 | it 'removes all the markers in the view', -> 121 | markers = editorElement.shadowRoot.querySelectorAll('.region') 122 | expect(markers.length).toEqual(0) 123 | 124 | describe 'when a rgba() expression is followed by parentheses', -> 125 | beforeEach -> 126 | editor.setText(''' 127 | .information 128 | background rgba(#ffffff, 0.93) 129 | transform translate(0, 0) 130 | color #000000 131 | 132 | .status, .name 133 | transform translate(0, 0) 134 | ''') 135 | editor.getBuffer().emitter.emit('did-stop-changing') 136 | 137 | waitsFor -> not model.dirty 138 | 139 | it 'stops at the end of the rgba() declaration', -> 140 | markers = editorElement.shadowRoot.querySelectorAll('color-marker') 141 | expect(markers.length).toEqual(2) 142 | 143 | describe 'when the markers at end of line setting is enabled', -> 144 | beforeEach -> 145 | atom.config.set 'atom-color-highlight.markersAtEndOfLine', true 146 | markers = editorElement.shadowRoot.querySelectorAll('dot-color-marker') 147 | 148 | it 'replaces the markers with dot markers', -> 149 | expect(markers.length).toEqual(9) 150 | 151 | it 'positions the dot markers at the end of line', -> 152 | spacing = atom.config.get('atom-color-highlight.dotMarkersSpacing') 153 | size = atom.config.get('atom-color-highlight.dotMarkersSize') 154 | 155 | expect(markers[0].offsetLeft).toEqual(12 * charWidth + spacing) 156 | expect(markers[0].offsetTop).toEqual(0) 157 | 158 | expect(markers[1].offsetLeft).toEqual(20 * charWidth + spacing) 159 | expect(markers[1].offsetTop).toEqual(10) 160 | 161 | expect(markers[2].offsetLeft).toEqual(37 * charWidth + spacing) 162 | expect(markers[2].offsetTop).toEqual(30) 163 | 164 | expect(markers[3].offsetLeft).toEqual(44 * charWidth + spacing) 165 | expect(markers[3].offsetTop).toEqual(50) 166 | 167 | expect(markers[4].offsetLeft).toEqual(44 * charWidth + spacing * 2 + size) 168 | expect(markers[4].offsetTop).toEqual(50) 169 | 170 | expect(markers[5].offsetLeft).toEqual(19 * charWidth + spacing) 171 | expect(markers[5].offsetTop).toEqual(70) 172 | 173 | describe 'when hide markers in comments is enabled', -> 174 | beforeEach -> 175 | atom.config.set 'atom-color-highlight.hideMarkersInComments', true 176 | 177 | it 'hides the corresponding markers', -> 178 | markers = editorElement.shadowRoot.querySelectorAll('color-marker:not([style*="display: none"])') 179 | expect(markers.length).toEqual(8) 180 | 181 | describe 'when hide markers in strings is enabled', -> 182 | beforeEach -> 183 | atom.config.set 'atom-color-highlight.hideMarkersInStrings', true 184 | 185 | it 'hides the corresponding markers', -> 186 | markers = editorElement.shadowRoot.querySelectorAll('color-marker:not([style*="display: none"])') 187 | expect(markers.length).toEqual(8) 188 | 189 | describe 'when an exclusion scope is defined in settings', -> 190 | beforeEach -> 191 | atom.config.set 'atom-color-highlight.excludedGrammars', ['source.css'] 192 | 193 | waitsForPromise -> atom.packages.activatePackage('language-css') 194 | waitsForPromise -> atom.workspace.open('source.css') 195 | 196 | runs -> 197 | editor = atom.workspace.getActiveTextEditor() 198 | editorElement = atom.views.getView(editor) 199 | model = atomColorHighlight.modelForEditor(editor) 200 | 201 | it 'does not create a model for the editor', -> 202 | expect(model).toBeUndefined() 203 | 204 | it 'does not render markers in the editor', -> 205 | expect(editorElement.shadowRoot.querySelectorAll('color-marker').length).toEqual(0) 206 | 207 | describe 'when the package is deactivated', -> 208 | beforeEach -> 209 | atom.packages.deactivatePackage('atom-color-highlight') 210 | 211 | it 'removes the view from the text editor', -> 212 | expect(editorElement.shadowRoot.querySelector('atom-color-highlight')).not.toExist() 213 | -------------------------------------------------------------------------------- /spec/fixtures/source.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #fff; 3 | color: #000; 4 | } 5 | -------------------------------------------------------------------------------- /spec/fixtures/source.less: -------------------------------------------------------------------------------- 1 | @color_1: red; 2 | @color_2: blue; 3 | @color_3: green; 4 | -------------------------------------------------------------------------------- /spec/test-file.md: -------------------------------------------------------------------------------- 1 | ### SVG Colors (case insensitive) 2 | 3 | * orangered 4 | * YellowGreen 5 | * GOLD 6 | 7 | ### RGB model 8 | 9 | * red: `#F00` 10 | * red: `#FF0000` 11 | * red: `rgb(255, 0, 0)` 12 | * red: `rgb(100%, 0%, 0%)` 13 | 14 | ### RGB with alpha channel 15 | 16 | * transparent red: `rgba(255, 0, 0, 0.5)` 17 | 18 | ### HSL model 19 | 20 | * red: `hsl(0, 100%, 50%)` 21 | * green: `hsl(120, 100%, 50%)` 22 | * dark green: `hsl(120, 100%, 25%)` 23 | * light green: `hsl(120, 100%, 75%)` 24 | * paster green: `hsl(120, 50%, 50%)` 25 | 26 | ### HSL model with alpha channel 27 | 28 | * green: `hsla(120, 100%, 50%, 1)` 29 | * transparent green: `hsla(120, 100%, 50%, 0.5)` 30 | * very transparent green: `hsla(120, 100%, 50%, 0.1)` 31 | 32 | ### HSV model 33 | 34 | * red: `hsv(0, 100%, 100%)` 35 | * green: `hsv(120, 100%, 100%)` 36 | * dark green: `hsv(120, 100%, 50%)` 37 | 38 | ### HSV model with alpha channel 39 | 40 | * green: `hsva(120, 100%, 100%, 1)` 41 | * transparent green: `hsva(120, 100%, 100%, 0.5)` 42 | * very transparent green: `hsva(120, 100%, 100%, 0.1)` 43 | 44 | ### Basic Sass/Stylus color functions 45 | 46 | * dark green: `darken(#00ff00, 20%)` 47 | * light green: `lighten(#00ff00, 20%)` 48 | * transparent dark green: `transparentize(darken(#00ff00, 20%), 0.5)` 49 | 50 | ### Hexadecimal integer colors 51 | 52 | * integer color: `0xabcdef` 53 | * integer transparent color: `0x66abcdef` 54 | * integer very transparent color: `0x11abcdef` 55 | 56 | ### GLSL Colors 57 | 58 | * glsl color: `vec4(0.2, 0.4, 0.5, 1)` 59 | * glsl transparent color: `vec4(0.2, 0.4, 0.5, 0.5)` 60 | * glsl very transparent color: `vec4(0.2, 0.4, 0.5, 0.1)` 61 | 62 | ### Very long color 63 | 64 | * very long color declaration that may wrap the line: `lighten( saturate( blue, 40%), 20%)` 65 | 66 | ### CSS Color Function 67 | 68 | * color tint: `color(red tint(60%))` 69 | -------------------------------------------------------------------------------- /styles/atom-color-highlight.less: -------------------------------------------------------------------------------- 1 | 2 | @import "ui-variables"; 3 | @import "syntax-variables"; 4 | 5 | .select-list.popover-list { 6 | z-index: 2 !important; 7 | } 8 | 9 | atom-text-editor, atom-text-editor::shadow { 10 | atom-color-highlight { 11 | display: block; 12 | z-index: 1; 13 | position: relative; 14 | 15 | dot-color-marker { 16 | display: block; 17 | position: absolute; 18 | border-radius: 50%; 19 | margin-top: 2px; 20 | z-index: -2; 21 | 22 | &.selected { 23 | .selector { 24 | position: absolute; 25 | height: 0; 26 | width: 0; 27 | border: 6px solid transparent; 28 | border-bottom-color: @background-color-info; 29 | left: 50%; 30 | margin-left: -6px; 31 | top: 100%; 32 | } 33 | } 34 | } 35 | 36 | color-marker.selected { 37 | display: none; 38 | } 39 | 40 | .region { 41 | position: absolute; 42 | padding: 0px 2px; 43 | margin-left: -1px; 44 | display: inline-block; 45 | line-height: inherit; 46 | box-sizing: content-box; 47 | border-radius: 2px; 48 | z-index: -2; 49 | white-space: pre; 50 | } 51 | 52 | dot-color-marker:before, 53 | .region:before { 54 | content: ''; 55 | display: block; 56 | position: absolute; 57 | width: 100%; 58 | height: 100%; 59 | background: url(atom://atom-color-highlight/resources/transparent-background.png); 60 | top: 0; 61 | left: 0; 62 | z-index: -1; 63 | border-radius: inherit; 64 | } 65 | 66 | dot-color-marker:after, 67 | .region:after { 68 | content: ''; 69 | display: block; 70 | position: absolute; 71 | width: 100%; 72 | height: 100%; 73 | background: inherit; 74 | z-index: -1; 75 | top: 0; 76 | left: 0; 77 | border-radius: inherit; 78 | } 79 | } 80 | } 81 | --------------------------------------------------------------------------------