Merged release/0.2.0 into master

CHANGELOG.md

@@ -0,0 +1,27 @@
+# Change Log
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](http://keepachangelog.com/) 
+and this project adheres to [Semantic Versioning](http://semver.org/).
+
+## [0.2.0] - 2017.01.25
+### Added
+- Queue class for queuing document update
+
+### Fixed
+- Colored background update
+
+## [0.1.2] (2017.01.18)
+### Fixed
+- Colored background update
+
+## [0.1.1] (2017.01.18)
+### Changed
+- Logo less pixelated
+- README
+
+## [0.1.0] (2017.01.17)
+### Added
+- Regex matching css hexa colors
+- Colored background generation
+- Colored background update

README.md

@@ -1,10 +1,6 @@
 # Colorize
 
-[![codebeat badge](https://codebeat.co/badges/71c89f96-3953-49b5-a5ae-8f40ad1359fd)](https://codebeat.co/projects/github-com-kamikillerto-vscode_colorize)
-[![Build Status](https://travis-ci.org/KamiKillertO/vscode_colorize.svg?branch=master)](https://travis-ci.org/KamiKillertO/vscode_colorize)
-[![Build status](https://ci.appveyor.com/api/projects/status/errygb6n97kiq75a?svg=true)](https://ci.appveyor.com/project/KamiKillertO/vscode-colorize)
-[![Licence](https://img.shields.io/github/license/KamiKillertO/vscode_colorize.svg)](https://github.com/KamiKillertO/vscode_colorize)
-![VS Code Marketplace](http://vsmarketplacebadge.apphb.com/version-short/kamikillerto.vscode-colorize.svg)
+[![codebeat badge](https://codebeat.co/badges/71c89f96-3953-49b5-a5ae-8f40ad1359fd)](https://codebeat.co/projects/github-com-kamikillerto-vscode_colorize) [![Build Status](https://travis-ci.org/KamiKillertO/vscode_colorize.svg?branch=master)](https://travis-ci.org/KamiKillertO/vscode_colorize) [![Build status](https://ci.appveyor.com/api/projects/status/errygb6n97kiq75a?svg=true)](https://ci.appveyor.com/project/KamiKillertO/vscode-colorize) [![Licence](https://img.shields.io/github/license/KamiKillertO/vscode_colorize.svg)](https://github.com/KamiKillertO/vscode_colorize) ![VS Code Marketplace](http://vsmarketplacebadge.apphb.com/version-short/kamikillerto.vscode-colorize.svg)
 
 Instantly visualize your css colors
 
@@ -24,11 +20,16 @@ Calling out known issues can help limit users opening duplicate issues against y
 
 ## Release Notes
 
-## Latest 0.1.2 (2017.01.18)
+### Latest 0.2.0 (2017.01.25)
+
+- Huge code refacto
+- Dramatically improvement colored background updates
+
+### 0.1.2 (2017.01.18)
 
 - Fix background update
 
-## 0.1.1 (2017.01.18)
+### 0.1.1 (2017.01.18)
 
 - README update
 - Update logo
@@ -51,6 +52,7 @@ See [CHANGELOG](CHANGELOG.md) for more information.
 - [ ] Generate background for hsla colors
 - [ ] Generate background for Predefined/Cross-browser colors
 - [ ] Generate background for preprocessor variables
+- [ ] Generate background for css variables
 
 ## Contributing
 

package.json

@@ -2,7 +2,7 @@
   "name": "vscode-colorize",
   "displayName": "colorize",
   "description": "A vscode extension to help visualize css colors in files.",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "publisher": "kamikillerto",
   "license": "Apache-2.0",
   "icon": "assets/logo.png",
@@ -21,7 +21,7 @@
     "preprocessor"
   ],
   "galleryBanner": {
-    "theme": "dark"
+    "theme": "light"
   },
   "activationEvents": [
     "onLanguage:css",
@@ -38,8 +38,7 @@
   },
   "homepage": "https://github.com/KamiKillertO/vscode_colorize",
   "repository": {
-    "type": "git",
-    "url": "https://github.com/KamiKillertO/vscode_colorize"
+    "url": "https://github.com/KamiKillertO/vscode_colorize.git"
   },
   "scripts": {
     "vscode:prepublish": "tsc -p ./",

src/color-decoration.ts

@@ -0,0 +1,54 @@
+import {
+  TextEditor,
+  Range,
+  TextEditorDecorationType,
+  Position,
+  window
+} from 'vscode';
+
+import ColorUtil from './color-util';
+import Color from './color'
+
+class ColorDecoration {
+  public color: Color;
+  public textPosition: Range;
+  public decoration: TextEditorDecorationType;
+  public disposed: boolean = false;
+
+  public constructor(textPosition: Range, color: Color) {
+    this.textPosition = textPosition;
+    this.color = color;
+    this._generateDecorator();
+  }
+
+  private _updateDecoration(editor) {
+    this.decoration.dispose();
+    this.decoration = this._generateDecorator();
+    editor.setDecorations(this.decoration, [{
+      range: this.textPosition
+    }]);
+  }
+  public dispose(): void {
+    this.decoration.dispose();
+  }
+
+  private _generateDecorator(): TextEditorDecorationType {
+    let textColor = null;
+    let luminance = ColorUtil.luminance(this.color);
+    if (luminance < 0.7) {
+      textColor = '#fff';
+    } else {
+      textColor = '#000';
+    }
+    let backgroundDecorationType = window.createTextEditorDecorationType({
+      borderWidth: "1px",
+      borderStyle: "solid",
+      borderColor: this.color.value,
+      backgroundColor: this.color.value,
+      color: textColor
+    });
+    this.decoration = backgroundDecorationType;
+    return backgroundDecorationType;
+  }
+}
+export default ColorDecoration;

src/color-util.ts

@@ -1,20 +1,21 @@
 import { HEXA_COLOR } from './color-regex';
+import Color from './color';
 
-const ColorUtil = {
-  getRGB(color: string): number[] {
+class ColorUtil {
+  public static getRGB(color: Color): number[] {
     let rgb: any[] = [];
-    if (color.match(HEXA_COLOR)) {
-      rgb = /#(.+)/gi.exec(color);
+    if (color.model === 'hexa') {
+      rgb = /#(.+)/gi.exec(color.value);
       if (rgb[1].length === 3) {
         return rgb[1].split('').map(_ => parseInt(_ + _, 16));
       }
       rgb = rgb[1].split('').map(_ => parseInt(_, 16));
       return [16 * rgb[0] + rgb[1], 16 * rgb[2] + rgb[3], 16 * rgb[4] + rgb[5]];
     }
     return [];
-  },
+  }
 
-  luminance(color: string): number {
+  public static luminance(color: Color): number {
     let rgb = this.getRGB(color);
     if (!rgb) {
       return null;
@@ -31,5 +32,29 @@ const ColorUtil = {
     });
     return 0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2];
   }
+
+  public static extractColor(text: string):Color[] {
+    let colors:Color[] = [];
+    colors = colors.concat(this._extractHexa(text));
+    return colors;
+  }
+
+  public static match(text: string, model: string):boolean {
+    switch(model) {
+      case 'hexa':
+        return !!text.match(HEXA_COLOR);
+      default:
+        return false;
+    }
+  }
+
+  private static _extractHexa(text: string): Color[] {
+    let match = null;
+    let colors:Color[] = [];
+    while((match = HEXA_COLOR.exec(text)) !== null) {
+      colors.push(new Color('hexa', match[1], match.index))
+    }
+    return colors;
+  }
 };
 export default ColorUtil;

src/color.ts

@@ -0,0 +1,14 @@
+import ColorUtil from './color-util';
+
+class Color {
+  public model: string;
+  public value: string;
+  public positionInText: number;
+
+  public constructor(model: string, value: string, positionInText: number = 0) {
+    this.model = model;
+    this.value = value;
+    this.positionInText = positionInText;
+  }
+}
+export default Color;