rbbt-rest 1.6.8 → 1.6.9
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/lib/rbbt/rest/common/cache.rb +15 -9
- data/lib/rbbt/rest/common/misc.rb +18 -0
- data/lib/rbbt/rest/entity/rest.rb +1 -1
- data/lib/rbbt/rest/workflow.rb +5 -0
- data/share/views/compass/app.sass +40 -4
- data/share/views/layout.haml +1 -34
- data/share/views/layout/coda.haml +37 -5
- data/share/views/layout/header.haml +19 -10
- data/share/views/layout/top_menu.haml +6 -8
- data/share/views/public/js/app.js +1 -5
- data/share/views/public/js/rbbt.aesthetics.js +12 -4
- data/share/views/public/js/rbbt.basic.js +51 -0
- data/share/views/public/js/rbbt.entity.js +0 -2
- data/share/views/public/js/rbbt.entity_list.js +1 -1
- data/share/views/public/js/rbbt.favourites.js +85 -96
- data/share/views/public/js/rbbt.job.js +127 -0
- data/share/views/public/js/rbbt.js +1 -13
- data/share/views/public/js/rbbt.knowledge_base.js +3 -2
- data/share/views/public/js/rbbt.modal.js +56 -0
- data/share/views/public/js/rbbt.views.js +47 -0
- data/share/views/public/plugins/color-js/LICENSE +22 -0
- data/share/views/public/plugins/color-js/README.markdown +189 -0
- data/share/views/public/plugins/color-js/color.d.ts +108 -0
- data/share/views/public/plugins/color-js/color.js +840 -0
- data/share/views/public/plugins/color-js/test/color-test.js +325 -0
- metadata +11 -2
@@ -0,0 +1,47 @@
|
|
1
|
+
rbbt.mview = {}
|
2
|
+
|
3
|
+
rbbt.mview.plot = function(content, title, caption){
|
4
|
+
var plot
|
5
|
+
|
6
|
+
if (undefined === title){
|
7
|
+
plot = m('figure.ui.segment', m('.header', 'No figure to display'))
|
8
|
+
}else{
|
9
|
+
if (title == 'loading'){
|
10
|
+
plot = m('figure.ui.segment.loading', 'loading figure')
|
11
|
+
}else{
|
12
|
+
var elems = []
|
13
|
+
var img_title = title
|
14
|
+
|
15
|
+
if (! img_title) img_title = 'image'
|
16
|
+
else img_title = img_title.replace(': ', ' ')
|
17
|
+
|
18
|
+
var img_filename = img_title + '.svg'
|
19
|
+
var download_func = function(){
|
20
|
+
var blob = new Blob([content], {type: "image/svg+xml;charset=utf-8"});
|
21
|
+
return saveAs(blob, img_filename);
|
22
|
+
}
|
23
|
+
var download = m('.download.ui.labeled.icon.button',{onclick: download_func}, [m('i.icon.download'), "Download"])
|
24
|
+
if (title) elems.push(m('.ui.header', title))
|
25
|
+
elems.push(m('.content.svg', m.trust(content)))
|
26
|
+
if (caption) elems.push(m('figcaption', m.trust(caption)))
|
27
|
+
if (content) elems.push(download)
|
28
|
+
|
29
|
+
plot = m('figure.ui.segment', elems)
|
30
|
+
}
|
31
|
+
|
32
|
+
}
|
33
|
+
|
34
|
+
return plot
|
35
|
+
}
|
36
|
+
|
37
|
+
rbbt.mview.button = function(options,args){
|
38
|
+
return m('.ui.button', options, args)
|
39
|
+
}
|
40
|
+
|
41
|
+
rbbt.mview.ibutton = function(options,args){
|
42
|
+
return m('.ui.icon.button', options, args)
|
43
|
+
}
|
44
|
+
|
45
|
+
rbbt.mview.dropdown = function(name, options){
|
46
|
+
return m('.ui.dropdown.item', [m('i.icon.dropdown'), name, m('.menu', options)])
|
47
|
+
}
|
@@ -0,0 +1,22 @@
|
|
1
|
+
Copyright (c) 2008-2010, Andrew Brehaut, Tim Baumann, Matt Wilson
|
2
|
+
All rights reserved.
|
3
|
+
|
4
|
+
Redistribution and use in source and binary forms, with or without
|
5
|
+
modification, are permitted provided that the following conditions are met:
|
6
|
+
|
7
|
+
* Redistributions of source code must retain the above copyright notice,
|
8
|
+
this list of conditions and the following disclaimer.
|
9
|
+
* Redistributions in binary form must reproduce the above copyright notice,
|
10
|
+
this list of conditions and the following disclaimer in the documentation
|
11
|
+
and/or other materials provided with the distribution.
|
12
|
+
|
13
|
+
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
|
14
|
+
AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
|
15
|
+
IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
|
16
|
+
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
|
17
|
+
FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
|
18
|
+
DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
|
19
|
+
SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
|
20
|
+
CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
|
21
|
+
OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
|
22
|
+
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
@@ -0,0 +1,189 @@
|
|
1
|
+
<script language="javascript" src="https://raw.github.com/brehaut/color-js/master/color.js"></script>
|
2
|
+
<a href="https://raw.github.com/brehaut/color-js/master/color.js">Color.js</a> provides an API to do simple color management in javascript. Color objects provide methods to do a number of common, useful operations independent of the underlying color model they need.
|
3
|
+
|
4
|
+
The library supports RGB, HSV and HSL color models, along with alpha channel on all of them. CSS string representations of colors are supported for convenience. If you need colorspace management that correlates to human perception rather than display technology, [colorspace.js](http://boronine.com/colorspaces.js/) looks like an excellent library.
|
5
|
+
|
6
|
+
Color objects are always immutable; all operations on them return new objects.
|
7
|
+
|
8
|
+
This API is designed for correctness and clarity first, but operates at the expense of some performance. If you need raw performance look for a library that forces you to do the cloning and conversion yourself, rather than implicitly as this one does.
|
9
|
+
|
10
|
+
# Using the library
|
11
|
+
|
12
|
+
Once you have included the library in your page, you can access the public namespace `net.brehaut` (reverse DNS scheme). The only export from `color.js` is the `Color` factory function. You may wish
|
13
|
+
to import this into your local scope, eg:
|
14
|
+
|
15
|
+
var Color = net.brehaut.Color;
|
16
|
+
|
17
|
+
You can use the library in a CommonJS environment, too:
|
18
|
+
|
19
|
+
var Color = require('./color').Color;
|
20
|
+
|
21
|
+
`Color` will create a new object for you from an object, string, or array. Note that this is a factory function, _not_ a constructor. eg:
|
22
|
+
|
23
|
+
var Green = Color("#00FF00");
|
24
|
+
var Red = Color({hue: 0, saturation: 1, value: 1});
|
25
|
+
var Blue = Color("rgb(0,0,255)");
|
26
|
+
var Cyan = Color({hue: 180, saturation: 1, lightness: 0.5});
|
27
|
+
var Magenta = Color("hsl(300, 100%, 50%)");
|
28
|
+
var Yellow = Color([255,255,0]);
|
29
|
+
|
30
|
+
Each method on a color either returns a new color (or set of colors) or returns a value. You can chain manipulation methods together as much as you need. Eg
|
31
|
+
|
32
|
+
var C1 = Red.shiftHue(45).darkenByRatio(0.5).desaturateByAmount(0.1);
|
33
|
+
|
34
|
+
A common use case for this code is to set page elements colors to calculated values, the method `toCSS` provides a string for you to use. eg:
|
35
|
+
|
36
|
+
document.getElementById('myElement').style.backgroundColor = C1.toCSS();
|
37
|
+
|
38
|
+
# Methods
|
39
|
+
|
40
|
+
There are three sorts of operations available on color objects; accessor methods (eg `getHue`/`setHue`), methods that manipulate the color and return a new object (eh `shiftHue`) or methods that return arrays of colors (eg, `splitComplementaryScheme`), and methods that do conversion and construction (eg `toCSS`).
|
41
|
+
|
42
|
+
All values are a float from 0 to 1, with the exception of _hue_ which is a degree (from 0 to 360).
|
43
|
+
|
44
|
+
### Accessor Methods
|
45
|
+
These methods are automatically generated by the API and are used to access the properties of the object. It is advisable to use these methods than try to access the property directly as the API makes no guarantees about the specific model members available.
|
46
|
+
|
47
|
+
* `getRed()` : Number
|
48
|
+
* `setRed( newRed )` : Color
|
49
|
+
* `getGreen()`: Number
|
50
|
+
* `setGreen( newGreen )` : Color
|
51
|
+
* `getBlue()` : Number
|
52
|
+
* `setBlue( newBlue )`: Color
|
53
|
+
* `getHue()` : Number (degrees)
|
54
|
+
* `setHue( newHue )` : color
|
55
|
+
* `getSaturation()` : Number
|
56
|
+
* `setSaturation( newSaturation )` : Color
|
57
|
+
* `getValue()` : Number
|
58
|
+
* `setValue( newValue )` : Color
|
59
|
+
* `getLightness()` : Number
|
60
|
+
* `setLightness( newValue )` : Color
|
61
|
+
* `getLuminance()` : Number --- returns a number between 0 and 1 that represents how bright this color appears on a conventional monitor.
|
62
|
+
* `getAlpha()` : Number
|
63
|
+
* `setAlpha( newAlpha )` : Number
|
64
|
+
|
65
|
+
### Color Methods
|
66
|
+
|
67
|
+
The following methods all return a new color.
|
68
|
+
|
69
|
+
* `shiftHue( degrees )` : Color
|
70
|
+
* `darkenByAmount( amount )` : Color
|
71
|
+
* `darkenByRatio( ratio )` : Color
|
72
|
+
* `lightenByAmount( amount )` : Color
|
73
|
+
* `lightenByRatio( amount )` : Color
|
74
|
+
* `devalueByAmount( amount )` : Color
|
75
|
+
* `devalueByRatio( ratio )` : Color
|
76
|
+
* `valueByAmount( amount )` : Color
|
77
|
+
* `valueByRatio( amount )` : Color
|
78
|
+
* `desaturateByAmount( amount )` : Color
|
79
|
+
* `desaturateByRatio( ratio )` : Color
|
80
|
+
* `saturateByAmount( amount )` : Color
|
81
|
+
* `saturateByRatio( ratio )` : Color
|
82
|
+
* `blend( color , alpha )` : Color --- returns a new color that is self blended with alpha of `color`. eg `black.blend ( white , 0 )` is black, `black.blend ( white , 0.5 )` is grey and `black.blend ( white , 1 )` is white.
|
83
|
+
|
84
|
+
The following methods return a list of colors
|
85
|
+
|
86
|
+
* `schemeFromDegrees( listOfdegrees )` : List of Colors
|
87
|
+
* `complementaryScheme( )` : List of Colors
|
88
|
+
* `splitComplementaryScheme( )` : List of Colors
|
89
|
+
* `splitComplementaryCWScheme( )` : List of Colors
|
90
|
+
* `splitComplementaryCCWScheme( )` : List of Colors
|
91
|
+
* `triadicScheme( )` : List of Colors
|
92
|
+
* `clashScheme( )` : List of Colors
|
93
|
+
* `tetradicScheme( )` : List of Colors
|
94
|
+
* `fourToneCWScheme( )` : List of Colors
|
95
|
+
* `fourToneCCWScheme( )` : List of Colors
|
96
|
+
* `fiveToneAScheme( )` : List of Colors
|
97
|
+
* `fiveToneBScheme( )` : List of Colors
|
98
|
+
* `fiveToneCScheme( )` : List of Colors
|
99
|
+
* `fiveToneDScheme( )` : List of Colors
|
100
|
+
* `fiveToneEScheme( )` : List of Colors
|
101
|
+
* `sixToneCWScheme( )` : List of Colors
|
102
|
+
* `sixToneCCWScheme( )` : List of Colors
|
103
|
+
* `neutralScheme( )` : List of Colors
|
104
|
+
* `analogousScheme( )` : List of Colors
|
105
|
+
|
106
|
+
### Conversion and Construction
|
107
|
+
|
108
|
+
* `fromObject( o )` : Color --- `o` is an object with values from a color model, a css string, or an RGB array.
|
109
|
+
* `toCSS([bytesPerChannel])` : String --- css hexdecimal representation. `bytesPerChannel` defaults to 2
|
110
|
+
* `toString()` : String --- returns CSS representation
|
111
|
+
* `toHSV()` : Color
|
112
|
+
* `toRGB()` : Color
|
113
|
+
* `toHSL()` : Color
|
114
|
+
|
115
|
+
## Type definitions
|
116
|
+
|
117
|
+
Users of [TypeScript](http://typescriptlang.org/) can find type definitions in `color.d.ts`.
|
118
|
+
|
119
|
+
# Library design notes
|
120
|
+
|
121
|
+
This library has been designed for correctness and with ease of use in mind. With regard to ease of use, `Color` objects allow you to chain operations by returning a new object each time. These operations involve common modification to the values in the object by a value or by a ratio where suitable, and automatically convert to the appropriate color model as required.
|
122
|
+
|
123
|
+
The models chosen have been picked with regard to what makes most sense to a web developer, and ease of implementation, hence RGB, HSV and HSL.
|
124
|
+
|
125
|
+
Internally theres a bit of metaprogramming soup to make it easier to define color models correctly, and ensure that colors remain values.
|
126
|
+
|
127
|
+
# Changes
|
128
|
+
|
129
|
+
<dl>
|
130
|
+
<dt><em>May 3, 2013</em></dt>
|
131
|
+
<dd>Version 1.0.1: Bug fix for alpha support in achromatic HSV to RGB.</dd>
|
132
|
+
|
133
|
+
<dt><em>May 1, 2013</em></dt>
|
134
|
+
<dd>Version 1.0
|
135
|
+
<ul>
|
136
|
+
<li>Alpha channels are supported on all color models.</li>
|
137
|
+
</ul>
|
138
|
+
</dd>
|
139
|
+
|
140
|
+
<dt><em>April 16, 2013</em></dt>
|
141
|
+
<dd>Version 0.6
|
142
|
+
<ul>
|
143
|
+
<li>fromArray RGB factory added. This factory takes an array of three RGB values as ints from 0-255.</li>
|
144
|
+
</ul>
|
145
|
+
</dd>
|
146
|
+
|
147
|
+
<dt><em>March 4, 2013</em></dt>
|
148
|
+
<dd>Version 0.5
|
149
|
+
<ul>
|
150
|
+
<li>Fixes bug where <code>lightenBy…/darkenBy…</code> used <code>value</code> property from <code>HSV</code> model, despite <code>HSL</code> now being supported.</li>
|
151
|
+
<li><code>valueBy…/devalueBy…</code> methods added. These behave like the old <code>lightenBy…/darkenBy…</code> methods.</li>
|
152
|
+
<li>Module function now uses strict mode.</li>
|
153
|
+
</ul>
|
154
|
+
</dd>
|
155
|
+
|
156
|
+
<dt><em>July 24, 2010</em></dt>
|
157
|
+
<dd>Version 0.4
|
158
|
+
<ul>
|
159
|
+
<li>Support for HSL color model</li>
|
160
|
+
<li>Common.JS module support</li>
|
161
|
+
<li>Minor bug fixes</li>
|
162
|
+
</ul>
|
163
|
+
</dd>
|
164
|
+
|
165
|
+
|
166
|
+
<dt><em>January 14, 2008</em></dt>
|
167
|
+
<dd>Version 0.3 released
|
168
|
+
<ul>
|
169
|
+
<li><a href="http://www.jslint.com">JSLint</a> is now happy with it.</li>
|
170
|
+
<li>Approx 25% faster by caching factory constructor functions — effectively unrolls <code>object</code></li>
|
171
|
+
</ul>
|
172
|
+
</dd>
|
173
|
+
|
174
|
+
<dt><em>January 13, 2008</em></dt>
|
175
|
+
<dd>Version 0.2 released
|
176
|
+
<ul>
|
177
|
+
<li>Code tided up, now with comments</li>
|
178
|
+
<li>Docs written</li>
|
179
|
+
<li>
|
180
|
+
Small edges cases implemented, eg, a black Color is returned if invalid arguments are
|
181
|
+
passed
|
182
|
+
</li>
|
183
|
+
<li>CSS named colors are supported</li>
|
184
|
+
</ul>
|
185
|
+
</dd>
|
186
|
+
</dl>
|
187
|
+
</dl>
|
188
|
+
|
189
|
+
|
@@ -0,0 +1,108 @@
|
|
1
|
+
// This typescript file provides ambient types for color.js.
|
2
|
+
//
|
3
|
+
// Please consult that file for the implementation of the script.
|
4
|
+
|
5
|
+
declare module net.brehaut {
|
6
|
+
export interface Color {
|
7
|
+
// field accessors
|
8
|
+
getRed(): number;
|
9
|
+
setRed(newRed: number): Color;
|
10
|
+
getGreen(): number;
|
11
|
+
setGreen(newGreen: number): Color;
|
12
|
+
getBlue(): number;
|
13
|
+
setBlue(newBlue: number): Color;
|
14
|
+
|
15
|
+
getHue(): number;
|
16
|
+
setHue(newHue: number): Color;
|
17
|
+
getSaturation(): number;
|
18
|
+
setSaturation(newSaturation: number): Color;
|
19
|
+
|
20
|
+
getValue(): number;
|
21
|
+
setValue(newValue: number): Color;
|
22
|
+
|
23
|
+
getLightness(): number;
|
24
|
+
setLightness(newValue: number): Color;
|
25
|
+
getLuminance(): number;
|
26
|
+
getAlpha(): number;
|
27
|
+
setAlpha(newAlpha: number): Color;
|
28
|
+
|
29
|
+
// manipulation methods
|
30
|
+
shiftHue(degrees: number): Color;
|
31
|
+
|
32
|
+
darkenByAmount(amount: number): Color;
|
33
|
+
darkenByRatio(ratio: number): Color;
|
34
|
+
lightenByAmount(amount: number): Color;
|
35
|
+
lightenByRatio(amount: number): Color;
|
36
|
+
|
37
|
+
devalueByAmount(amount: number): Color;
|
38
|
+
devalueByRatio(ratio: number): Color;
|
39
|
+
valueByAmount(amount: number): Color;
|
40
|
+
valueByRatio(amount: number): Color;
|
41
|
+
|
42
|
+
desaturateByAmount(amount: number): Color;
|
43
|
+
desaturateByRatio(ratio: number): Color;
|
44
|
+
saturateByAmount(amount: number): Color;
|
45
|
+
saturateByRatio(ratio: number ): Color;
|
46
|
+
|
47
|
+
blend(color:Color, alpha:number): Color;
|
48
|
+
|
49
|
+
// generating lists of colors
|
50
|
+
schemeFromDegrees(listOfdegrees: number[]): Color[];
|
51
|
+
|
52
|
+
complementaryScheme(): Color[];
|
53
|
+
splitComplementaryScheme(): Color[];
|
54
|
+
splitComplementaryCWScheme(): Color[];
|
55
|
+
splitComplementaryCCWScheme(): Color[];
|
56
|
+
triadicScheme(): Color[];
|
57
|
+
clashScheme(): Color[];
|
58
|
+
tetradicScheme(): Color[];
|
59
|
+
fourToneCWScheme(): Color[];
|
60
|
+
fourToneCCWScheme(): Color[];
|
61
|
+
fiveToneAScheme(): Color[];
|
62
|
+
fiveToneBScheme(): Color[];
|
63
|
+
fiveToneCScheme(): Color[];
|
64
|
+
fiveToneDScheme(): Color[];
|
65
|
+
fiveToneEScheme(): Color[];
|
66
|
+
sixToneCWScheme(): Color[];
|
67
|
+
sixToneCCWScheme(): Color[];
|
68
|
+
neutralScheme(): Color[];
|
69
|
+
analogousScheme(): Color[];
|
70
|
+
|
71
|
+
// conversion and construction
|
72
|
+
toCSS(bytesPerChannel?: number): string;
|
73
|
+
toString(): string;
|
74
|
+
toHSV(): string;
|
75
|
+
toRGB(): string;
|
76
|
+
toHSL(): string;
|
77
|
+
}
|
78
|
+
|
79
|
+
// types used in construction of a Color
|
80
|
+
export interface ValuesObject {
|
81
|
+
alpha?: number;
|
82
|
+
}
|
83
|
+
|
84
|
+
export interface RGBAValues extends ValuesObject {
|
85
|
+
red: number;
|
86
|
+
green: number;
|
87
|
+
blue: number;
|
88
|
+
}
|
89
|
+
|
90
|
+
export interface HSVAValue extends ValuesObject {
|
91
|
+
hue: number;
|
92
|
+
saturation: number;
|
93
|
+
value: number;
|
94
|
+
}
|
95
|
+
|
96
|
+
export interface HSLValue extends ValuesObject {
|
97
|
+
hue: number;
|
98
|
+
saturation: number;
|
99
|
+
lightness: number;
|
100
|
+
}
|
101
|
+
|
102
|
+
// public constructor
|
103
|
+
function Color(): Color;
|
104
|
+
function Color(cssColor: string): Color;
|
105
|
+
function Color(color: ValuesObject): Color;
|
106
|
+
function Color(color: number[]): Color;
|
107
|
+
}
|
108
|
+
|
@@ -0,0 +1,840 @@
|
|
1
|
+
// Copyright (c) 2008-2013, Andrew Brehaut, Tim Baumann, Matt Wilson,
|
2
|
+
// Simon Heimler, Michel Vielmetter
|
3
|
+
//
|
4
|
+
// All rights reserved.
|
5
|
+
//
|
6
|
+
// Redistribution and use in source and binary forms, with or without
|
7
|
+
// modification, are permitted provided that the following conditions are met:
|
8
|
+
//
|
9
|
+
// * Redistributions of source code must retain the above copyright notice,
|
10
|
+
// this list of conditions and the following disclaimer.
|
11
|
+
// * Redistributions in binary form must reproduce the above copyright notice,
|
12
|
+
// this list of conditions and the following disclaimer in the documentation
|
13
|
+
// and/or other materials provided with the distribution.
|
14
|
+
//
|
15
|
+
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
|
16
|
+
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
|
17
|
+
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
|
18
|
+
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
|
19
|
+
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
|
20
|
+
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
|
21
|
+
// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
|
22
|
+
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
|
23
|
+
// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
|
24
|
+
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
|
25
|
+
// POSSIBILITY OF SUCH DAMAGE.
|
26
|
+
|
27
|
+
// color.js - version 1.0.1
|
28
|
+
//
|
29
|
+
// HSV <-> RGB code based on code from http://www.cs.rit.edu/~ncs/color/t_convert.html
|
30
|
+
// object function created by Douglas Crockford.
|
31
|
+
// Color scheme degrees taken from the colorjack.com colorpicker
|
32
|
+
//
|
33
|
+
// HSL support kindly provided by Tim Baumann - http://github.com/timjb
|
34
|
+
|
35
|
+
// create namespaces
|
36
|
+
/*global net */
|
37
|
+
if ("undefined" == typeof net) { var net = {}; }
|
38
|
+
if (!net.brehaut) { net.brehaut = {}; }
|
39
|
+
|
40
|
+
// this module function is called with net.brehaut as 'this'
|
41
|
+
(function ( ) {
|
42
|
+
"use strict";
|
43
|
+
// Constants
|
44
|
+
|
45
|
+
// css_colors maps color names onto their hex values
|
46
|
+
// these names are defined by W3C
|
47
|
+
var css_colors = {aliceblue:'#F0F8FF',antiquewhite:'#FAEBD7',aqua:'#00FFFF',aquamarine:'#7FFFD4',azure:'#F0FFFF',beige:'#F5F5DC',bisque:'#FFE4C4',black:'#000000',blanchedalmond:'#FFEBCD',blue:'#0000FF',blueviolet:'#8A2BE2',brown:'#A52A2A',burlywood:'#DEB887',cadetblue:'#5F9EA0',chartreuse:'#7FFF00',chocolate:'#D2691E',coral:'#FF7F50',cornflowerblue:'#6495ED',cornsilk:'#FFF8DC',crimson:'#DC143C',cyan:'#00FFFF',darkblue:'#00008B',darkcyan:'#008B8B',darkgoldenrod:'#B8860B',darkgray:'#A9A9A9',darkgrey:'#A9A9A9',darkgreen:'#006400',darkkhaki:'#BDB76B',darkmagenta:'#8B008B',darkolivegreen:'#556B2F',darkorange:'#FF8C00',darkorchid:'#9932CC',darkred:'#8B0000',darksalmon:'#E9967A',darkseagreen:'#8FBC8F',darkslateblue:'#483D8B',darkslategray:'#2F4F4F',darkslategrey:'#2F4F4F',darkturquoise:'#00CED1',darkviolet:'#9400D3',deeppink:'#FF1493',deepskyblue:'#00BFFF',dimgray:'#696969',dimgrey:'#696969',dodgerblue:'#1E90FF',firebrick:'#B22222',floralwhite:'#FFFAF0',forestgreen:'#228B22',fuchsia:'#FF00FF',gainsboro:'#DCDCDC',ghostwhite:'#F8F8FF',gold:'#FFD700',goldenrod:'#DAA520',gray:'#808080',grey:'#808080',green:'#008000',greenyellow:'#ADFF2F',honeydew:'#F0FFF0',hotpink:'#FF69B4',indianred:'#CD5C5C',indigo:'#4B0082',ivory:'#FFFFF0',khaki:'#F0E68C',lavender:'#E6E6FA',lavenderblush:'#FFF0F5',lawngreen:'#7CFC00',lemonchiffon:'#FFFACD',lightblue:'#ADD8E6',lightcoral:'#F08080',lightcyan:'#E0FFFF',lightgoldenrodyellow:'#FAFAD2',lightgray:'#D3D3D3',lightgrey:'#D3D3D3',lightgreen:'#90EE90',lightpink:'#FFB6C1',lightsalmon:'#FFA07A',lightseagreen:'#20B2AA',lightskyblue:'#87CEFA',lightslategray:'#778899',lightslategrey:'#778899',lightsteelblue:'#B0C4DE',lightyellow:'#FFFFE0',lime:'#00FF00',limegreen:'#32CD32',linen:'#FAF0E6',magenta:'#FF00FF',maroon:'#800000',mediumaquamarine:'#66CDAA',mediumblue:'#0000CD',mediumorchid:'#BA55D3',mediumpurple:'#9370D8',mediumseagreen:'#3CB371',mediumslateblue:'#7B68EE',mediumspringgreen:'#00FA9A',mediumturquoise:'#48D1CC',mediumvioletred:'#C71585',midnightblue:'#191970',mintcream:'#F5FFFA',mistyrose:'#FFE4E1',moccasin:'#FFE4B5',navajowhite:'#FFDEAD',navy:'#000080',oldlace:'#FDF5E6',olive:'#808000',olivedrab:'#6B8E23',orange:'#FFA500',orangered:'#FF4500',orchid:'#DA70D6',palegoldenrod:'#EEE8AA',palegreen:'#98FB98',paleturquoise:'#AFEEEE',palevioletred:'#D87093',papayawhip:'#FFEFD5',peachpuff:'#FFDAB9',peru:'#CD853F',pink:'#FFC0CB',plum:'#DDA0DD',powderblue:'#B0E0E6',purple:'#800080',rebeccapurple:'#663399',red:'#FF0000',rosybrown:'#BC8F8F',royalblue:'#4169E1',saddlebrown:'#8B4513',salmon:'#FA8072',sandybrown:'#F4A460',seagreen:'#2E8B57',seashell:'#FFF5EE',sienna:'#A0522D',silver:'#C0C0C0',skyblue:'#87CEEB',slateblue:'#6A5ACD',slategray:'#708090',slategrey:'#708090',snow:'#FFFAFA',springgreen:'#00FF7F',steelblue:'#4682B4',tan:'#D2B48C',teal:'#008080',thistle:'#D8BFD8',tomato:'#FF6347',turquoise:'#40E0D0',violet:'#EE82EE',wheat:'#F5DEB3',white:'#FFFFFF',whitesmoke:'#F5F5F5',yellow:'#FFFF00',yellowgreen:'#9ACD32'};
|
48
|
+
|
49
|
+
// CSS value regexes, according to http://www.w3.org/TR/css3-values/
|
50
|
+
var css_integer = '(?:\\+|-)?\\d+';
|
51
|
+
var css_float = '(?:\\+|-)?\\d*\\.\\d+';
|
52
|
+
var css_number = '(?:' + css_integer + ')|(?:' + css_float + ')';
|
53
|
+
css_integer = '(' + css_integer + ')';
|
54
|
+
css_float = '(' + css_float + ')';
|
55
|
+
css_number = '(' + css_number + ')';
|
56
|
+
var css_percentage = css_number + '%';
|
57
|
+
var css_whitespace = '\\s*?';
|
58
|
+
|
59
|
+
// http://www.w3.org/TR/2003/CR-css3-color-20030514/
|
60
|
+
var hsl_hsla_regex = new RegExp([
|
61
|
+
'^hsl(a?)\\(', css_number, ',', css_percentage, ',', css_percentage, '(,(', css_number, '))?\\)$'
|
62
|
+
].join(css_whitespace) );
|
63
|
+
var rgb_rgba_integer_regex = new RegExp([
|
64
|
+
'^rgb(a?)\\(', css_integer, ',', css_integer, ',', css_integer, '(,(', css_number, '))?\\)$'
|
65
|
+
].join(css_whitespace) );
|
66
|
+
var rgb_rgba_percentage_regex = new RegExp([
|
67
|
+
'^rgb(a?)\\(', css_percentage, ',', css_percentage, ',', css_percentage, '(,(', css_number, '))?\\)$'
|
68
|
+
].join(css_whitespace) );
|
69
|
+
|
70
|
+
// Package wide variables
|
71
|
+
|
72
|
+
// becomes the top level prototype object
|
73
|
+
var color;
|
74
|
+
|
75
|
+
/* registered_models contains the template objects for all the
|
76
|
+
* models that have been registered for the color class.
|
77
|
+
*/
|
78
|
+
var registered_models = [];
|
79
|
+
|
80
|
+
|
81
|
+
/* factories contains methods to create new instance of
|
82
|
+
* different color models that have been registered.
|
83
|
+
*/
|
84
|
+
var factories = {};
|
85
|
+
|
86
|
+
// Utility functions
|
87
|
+
|
88
|
+
/* object is Douglas Crockfords object function for prototypal
|
89
|
+
* inheritance.
|
90
|
+
*/
|
91
|
+
if (!this.object) {
|
92
|
+
this.object = function (o) {
|
93
|
+
function F () { }
|
94
|
+
F.prototype = o;
|
95
|
+
return new F();
|
96
|
+
};
|
97
|
+
}
|
98
|
+
var object = this.object;
|
99
|
+
|
100
|
+
/* takes a value, converts to string if need be, then pads it
|
101
|
+
* to a minimum length.
|
102
|
+
*/
|
103
|
+
function pad ( val, len ) {
|
104
|
+
val = val.toString();
|
105
|
+
var padded = [];
|
106
|
+
|
107
|
+
for (var i = 0, j = Math.max( len - val.length, 0); i < j; i++) {
|
108
|
+
padded.push('0');
|
109
|
+
}
|
110
|
+
|
111
|
+
padded.push(val);
|
112
|
+
return padded.join('');
|
113
|
+
}
|
114
|
+
|
115
|
+
|
116
|
+
/* takes a string and returns a new string with the first letter
|
117
|
+
* capitalised
|
118
|
+
*/
|
119
|
+
function capitalise ( s ) {
|
120
|
+
return s.slice(0,1).toUpperCase() + s.slice(1);
|
121
|
+
}
|
122
|
+
|
123
|
+
/* removes leading and trailing whitespace
|
124
|
+
*/
|
125
|
+
function trim ( str ) {
|
126
|
+
return str.replace(/^\s+|\s+$/g, '');
|
127
|
+
}
|
128
|
+
|
129
|
+
/* used to apply a method to object non-destructively by
|
130
|
+
* cloning the object and then apply the method to that
|
131
|
+
* new object
|
132
|
+
*/
|
133
|
+
function cloneOnApply( meth ) {
|
134
|
+
return function ( ) {
|
135
|
+
var cloned = this.clone();
|
136
|
+
meth.apply(cloned, arguments);
|
137
|
+
return cloned;
|
138
|
+
};
|
139
|
+
}
|
140
|
+
|
141
|
+
|
142
|
+
/* registerModel is used to add additional representations
|
143
|
+
* to the color code, and extend the color API with the new
|
144
|
+
* operation that model provides. see before for examples
|
145
|
+
*/
|
146
|
+
function registerModel( name, model ) {
|
147
|
+
var proto = object(color);
|
148
|
+
var fields = []; // used for cloning and generating accessors
|
149
|
+
|
150
|
+
var to_meth = 'to'+ capitalise(name);
|
151
|
+
|
152
|
+
function convertAndApply( meth ) {
|
153
|
+
return function ( ) {
|
154
|
+
return meth.apply(this[to_meth](), arguments);
|
155
|
+
};
|
156
|
+
}
|
157
|
+
|
158
|
+
for (var key in model) if (model.hasOwnProperty(key)) {
|
159
|
+
proto[key] = model[key];
|
160
|
+
var prop = proto[key];
|
161
|
+
|
162
|
+
if (key.slice(0,1) == '_') { continue; }
|
163
|
+
if (!(key in color) && "function" == typeof prop) {
|
164
|
+
// the method found on this object is a) public and b) not
|
165
|
+
// currently supported by the color object. Create an impl that
|
166
|
+
// calls the toModel function and passes that new object
|
167
|
+
// onto the correct method with the args.
|
168
|
+
color[key] = convertAndApply(prop);
|
169
|
+
}
|
170
|
+
else if ("function" != typeof prop) {
|
171
|
+
// we have found a public property. create accessor methods
|
172
|
+
// and bind them up correctly
|
173
|
+
fields.push(key);
|
174
|
+
var getter = 'get'+capitalise(key);
|
175
|
+
var setter = 'set'+capitalise(key);
|
176
|
+
|
177
|
+
color[getter] = convertAndApply(
|
178
|
+
proto[getter] = (function ( key ) {
|
179
|
+
return function ( ) {
|
180
|
+
return this[key];
|
181
|
+
};
|
182
|
+
})( key )
|
183
|
+
);
|
184
|
+
|
185
|
+
color[setter] = convertAndApply(
|
186
|
+
proto[setter] = (function ( key ) {
|
187
|
+
return function ( val ) {
|
188
|
+
var cloned = this.clone();
|
189
|
+
cloned[key] = val;
|
190
|
+
return cloned;
|
191
|
+
};
|
192
|
+
})( key )
|
193
|
+
);
|
194
|
+
}
|
195
|
+
} // end of for over model
|
196
|
+
|
197
|
+
// a method to create a new object - largely so prototype chains dont
|
198
|
+
// get insane. This uses an unrolled 'object' so that F is cached
|
199
|
+
// for later use. this is approx a 25% speed improvement
|
200
|
+
function F () { }
|
201
|
+
F.prototype = proto;
|
202
|
+
function factory ( ) {
|
203
|
+
return new F();
|
204
|
+
}
|
205
|
+
factories[name] = factory;
|
206
|
+
|
207
|
+
proto.clone = function () {
|
208
|
+
var cloned = factory();
|
209
|
+
for (var i = 0, j = fields.length; i < j; i++) {
|
210
|
+
var key = fields[i];
|
211
|
+
cloned[key] = this[key];
|
212
|
+
}
|
213
|
+
return cloned;
|
214
|
+
};
|
215
|
+
|
216
|
+
color[to_meth] = function ( ) {
|
217
|
+
return factory();
|
218
|
+
};
|
219
|
+
|
220
|
+
registered_models.push(proto);
|
221
|
+
|
222
|
+
return proto;
|
223
|
+
}// end of registerModel
|
224
|
+
|
225
|
+
// Template Objects
|
226
|
+
|
227
|
+
/* color is the root object in the color hierarchy. It starts
|
228
|
+
* life as a very simple object, but as color models are
|
229
|
+
* registered it has methods programmatically added to manage
|
230
|
+
* conversions as needed.
|
231
|
+
*/
|
232
|
+
color = {
|
233
|
+
/* fromObject takes an argument and delegates to the internal
|
234
|
+
* color models to try to create a new instance.
|
235
|
+
*/
|
236
|
+
fromObject: function ( o ) {
|
237
|
+
if (!o) {
|
238
|
+
return object(color);
|
239
|
+
}
|
240
|
+
|
241
|
+
for (var i = 0, j = registered_models.length; i < j; i++) {
|
242
|
+
var nu = registered_models[i].fromObject(o);
|
243
|
+
if (nu) {
|
244
|
+
return nu;
|
245
|
+
}
|
246
|
+
}
|
247
|
+
|
248
|
+
return object(color);
|
249
|
+
},
|
250
|
+
|
251
|
+
toString: function ( ) {
|
252
|
+
return this.toCSS();
|
253
|
+
}
|
254
|
+
};
|
255
|
+
|
256
|
+
var transparent = null; // defined with an RGB later.
|
257
|
+
|
258
|
+
/* RGB is the red green blue model. This definition is converted
|
259
|
+
* to a template object by registerModel.
|
260
|
+
*/
|
261
|
+
registerModel('RGB', {
|
262
|
+
red: 0,
|
263
|
+
green: 0,
|
264
|
+
blue: 0,
|
265
|
+
alpha: 0,
|
266
|
+
|
267
|
+
/* getLuminance returns a value between 0 and 1, this is the
|
268
|
+
* luminance calcuated according to
|
269
|
+
* http://www.poynton.com/notes/colour_and_gamma/ColorFAQ.html#RTFToC9
|
270
|
+
*/
|
271
|
+
getLuminance: function ( ) {
|
272
|
+
return (this.red * 0.2126) + (this.green * 0.7152) + (this.blue * 0.0722);
|
273
|
+
},
|
274
|
+
|
275
|
+
/* does an alpha based blend of color onto this. alpha is the
|
276
|
+
* amount of 'color' to use. (0 to 1)
|
277
|
+
*/
|
278
|
+
blend: function ( color , alpha ) {
|
279
|
+
color = color.toRGB();
|
280
|
+
alpha = Math.min(Math.max(alpha, 0), 1);
|
281
|
+
var rgb = this.clone();
|
282
|
+
|
283
|
+
rgb.red = (rgb.red * (1 - alpha)) + (color.red * alpha);
|
284
|
+
rgb.green = (rgb.green * (1 - alpha)) + (color.green * alpha);
|
285
|
+
rgb.blue = (rgb.blue * (1 - alpha)) + (color.blue * alpha);
|
286
|
+
rgb.alpha = (rgb.alpha * (1 - alpha)) + (color.alpha * alpha);
|
287
|
+
|
288
|
+
return rgb;
|
289
|
+
},
|
290
|
+
|
291
|
+
/* fromObject attempts to convert an object o to and RGB
|
292
|
+
* instance. This accepts an object with red, green and blue
|
293
|
+
* members or a string. If the string is a known CSS color name
|
294
|
+
* or a hexdecimal string it will accept it.
|
295
|
+
*/
|
296
|
+
fromObject: function ( o ) {
|
297
|
+
if (o instanceof Array) {
|
298
|
+
return this._fromRGBArray ( o );
|
299
|
+
}
|
300
|
+
if ("string" == typeof o) {
|
301
|
+
return this._fromCSS( trim( o ) );
|
302
|
+
}
|
303
|
+
if (o.hasOwnProperty('red') &&
|
304
|
+
o.hasOwnProperty('green') &&
|
305
|
+
o.hasOwnProperty('blue')) {
|
306
|
+
return this._fromRGB ( o );
|
307
|
+
}
|
308
|
+
// nothing matchs, not an RGB object
|
309
|
+
},
|
310
|
+
|
311
|
+
_stringParsers: [
|
312
|
+
// CSS RGB(A) literal:
|
313
|
+
function ( css ) {
|
314
|
+
css = trim(css);
|
315
|
+
|
316
|
+
var withInteger = match(rgb_rgba_integer_regex, 255);
|
317
|
+
if(withInteger) {
|
318
|
+
return withInteger;
|
319
|
+
}
|
320
|
+
return match(rgb_rgba_percentage_regex, 100);
|
321
|
+
|
322
|
+
function match(regex, max_value) {
|
323
|
+
var colorGroups = css.match( regex );
|
324
|
+
|
325
|
+
// If there is an "a" after "rgb", there must be a fourth parameter and the other way round
|
326
|
+
if (!colorGroups || (!!colorGroups[1] + !!colorGroups[5] === 1)) {
|
327
|
+
return null;
|
328
|
+
}
|
329
|
+
|
330
|
+
var rgb = factories.RGB();
|
331
|
+
rgb.red = Math.min(1, Math.max(0, colorGroups[2] / max_value));
|
332
|
+
rgb.green = Math.min(1, Math.max(0, colorGroups[3] / max_value));
|
333
|
+
rgb.blue = Math.min(1, Math.max(0, colorGroups[4] / max_value));
|
334
|
+
rgb.alpha = !!colorGroups[5] ? Math.min(Math.max(parseFloat(colorGroups[6]), 0), 1) : 1;
|
335
|
+
|
336
|
+
return rgb;
|
337
|
+
}
|
338
|
+
},
|
339
|
+
|
340
|
+
function ( css ) {
|
341
|
+
var lower = css.toLowerCase();
|
342
|
+
if (lower in css_colors) {
|
343
|
+
css = css_colors[lower];
|
344
|
+
}
|
345
|
+
|
346
|
+
if (!css.match(/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/)) {
|
347
|
+
return;
|
348
|
+
}
|
349
|
+
|
350
|
+
css = css.replace(/^#/,'');
|
351
|
+
|
352
|
+
var bytes = css.length / 3;
|
353
|
+
|
354
|
+
var max = Math.pow(16, bytes) - 1;
|
355
|
+
|
356
|
+
var rgb = factories.RGB();
|
357
|
+
rgb.red = parseInt(css.slice(0, bytes), 16) / max;
|
358
|
+
rgb.green = parseInt(css.slice(bytes * 1,bytes * 2), 16) / max;
|
359
|
+
rgb.blue = parseInt(css.slice(bytes * 2), 16) / max;
|
360
|
+
rgb.alpha = 1;
|
361
|
+
return rgb;
|
362
|
+
},
|
363
|
+
|
364
|
+
function ( css ) {
|
365
|
+
if (css.toLowerCase() !== 'transparent') return;
|
366
|
+
|
367
|
+
return transparent;
|
368
|
+
}
|
369
|
+
],
|
370
|
+
|
371
|
+
_fromCSS: function ( css ) {
|
372
|
+
var color = null;
|
373
|
+
for (var i = 0, j = this._stringParsers.length; i < j; i++) {
|
374
|
+
color = this._stringParsers[i](css);
|
375
|
+
if (color) return color;
|
376
|
+
}
|
377
|
+
},
|
378
|
+
|
379
|
+
_fromRGB: function ( RGB ) {
|
380
|
+
var newRGB = factories.RGB();
|
381
|
+
|
382
|
+
newRGB.red = RGB.red;
|
383
|
+
newRGB.green = RGB.green;
|
384
|
+
newRGB.blue = RGB.blue;
|
385
|
+
newRGB.alpha = RGB.hasOwnProperty('alpha') ? RGB.alpha : 1;
|
386
|
+
|
387
|
+
return newRGB;
|
388
|
+
},
|
389
|
+
|
390
|
+
_fromRGBArray: function ( RGB ) {
|
391
|
+
var newRGB = factories.RGB();
|
392
|
+
|
393
|
+
newRGB.red = Math.max(0, Math.min(1, RGB[0] / 255));
|
394
|
+
newRGB.green = Math.max(0, Math.min(1, RGB[1] / 255));
|
395
|
+
newRGB.blue = Math.max(0, Math.min(1, RGB[2] / 255));
|
396
|
+
newRGB.alpha = RGB[3] !== undefined ? Math.max(0, Math.min(1, RGB[3])) : 1;
|
397
|
+
|
398
|
+
return newRGB;
|
399
|
+
},
|
400
|
+
|
401
|
+
// convert to a CSS string. defaults to two bytes a value
|
402
|
+
toCSSHex: function ( bytes ) {
|
403
|
+
bytes = bytes || 2;
|
404
|
+
|
405
|
+
var max = Math.pow(16, bytes) - 1;
|
406
|
+
var css = [
|
407
|
+
"#",
|
408
|
+
pad ( Math.round(this.red * max).toString( 16 ).toUpperCase(), bytes ),
|
409
|
+
pad ( Math.round(this.green * max).toString( 16 ).toUpperCase(), bytes ),
|
410
|
+
pad ( Math.round(this.blue * max).toString( 16 ).toUpperCase(), bytes )
|
411
|
+
];
|
412
|
+
|
413
|
+
return css.join('');
|
414
|
+
},
|
415
|
+
|
416
|
+
toCSS: function ( bytes ) {
|
417
|
+
if (this.alpha === 1) return this.toCSSHex(bytes);
|
418
|
+
|
419
|
+
var max = 255;
|
420
|
+
|
421
|
+
var components = [
|
422
|
+
'rgba(',
|
423
|
+
Math.max(0, Math.min(max, Math.round(this.red * max))), ',',
|
424
|
+
Math.max(0, Math.min(max, Math.round(this.green * max))), ',',
|
425
|
+
Math.max(0, Math.min(max, Math.round(this.blue * max))), ',',
|
426
|
+
Math.max(0, Math.min(1, this.alpha)),
|
427
|
+
')'
|
428
|
+
];
|
429
|
+
|
430
|
+
return components.join('');
|
431
|
+
},
|
432
|
+
|
433
|
+
toHSV: function ( ) {
|
434
|
+
var hsv = factories.HSV();
|
435
|
+
var min, max, delta;
|
436
|
+
|
437
|
+
min = Math.min(this.red, this.green, this.blue);
|
438
|
+
max = Math.max(this.red, this.green, this.blue);
|
439
|
+
hsv.value = max; // v
|
440
|
+
|
441
|
+
delta = max - min;
|
442
|
+
|
443
|
+
if( delta == 0 ) { // white, grey, black
|
444
|
+
hsv.hue = hsv.saturation = 0;
|
445
|
+
}
|
446
|
+
else { // chroma
|
447
|
+
hsv.saturation = delta / max;
|
448
|
+
|
449
|
+
if( this.red == max ) {
|
450
|
+
hsv.hue = ( this.green - this.blue ) / delta; // between yellow & magenta
|
451
|
+
}
|
452
|
+
else if( this.green == max ) {
|
453
|
+
hsv.hue = 2 + ( this.blue - this.red ) / delta; // between cyan & yellow
|
454
|
+
}
|
455
|
+
else {
|
456
|
+
hsv.hue = 4 + ( this.red - this.green ) / delta; // between magenta & cyan
|
457
|
+
}
|
458
|
+
|
459
|
+
hsv.hue = ((hsv.hue * 60) + 360) % 360; // degrees
|
460
|
+
}
|
461
|
+
|
462
|
+
hsv.alpha = this.alpha;
|
463
|
+
|
464
|
+
return hsv;
|
465
|
+
},
|
466
|
+
toHSL: function ( ) {
|
467
|
+
return this.toHSV().toHSL();
|
468
|
+
},
|
469
|
+
|
470
|
+
toRGB: function ( ) {
|
471
|
+
return this.clone();
|
472
|
+
}
|
473
|
+
});
|
474
|
+
|
475
|
+
transparent = color.fromObject({red: 0, blue: 0, green: 0, alpha: 0});
|
476
|
+
|
477
|
+
|
478
|
+
/* Like RGB above, this object describes what will become the HSV
|
479
|
+
* template object. This model handles hue, saturation and value.
|
480
|
+
* hue is the number of degrees around the color wheel, saturation
|
481
|
+
* describes how much color their is and value is the brightness.
|
482
|
+
*/
|
483
|
+
registerModel('HSV', {
|
484
|
+
hue: 0,
|
485
|
+
saturation: 0,
|
486
|
+
value: 1,
|
487
|
+
alpha: 1,
|
488
|
+
|
489
|
+
shiftHue: cloneOnApply(function ( degrees ) {
|
490
|
+
var hue = (this.hue + degrees) % 360;
|
491
|
+
if (hue < 0) {
|
492
|
+
hue = (360 + hue) % 360;
|
493
|
+
}
|
494
|
+
|
495
|
+
this.hue = hue;
|
496
|
+
}),
|
497
|
+
|
498
|
+
devalueByAmount: cloneOnApply(function ( val ) {
|
499
|
+
this.value = Math.min(1, Math.max(this.value - val, 0));
|
500
|
+
}),
|
501
|
+
|
502
|
+
devalueByRatio: cloneOnApply(function ( val ) {
|
503
|
+
this.value = Math.min(1, Math.max(this.value * (1 - val), 0));
|
504
|
+
}),
|
505
|
+
|
506
|
+
valueByAmount: cloneOnApply(function ( val ) {
|
507
|
+
this.value = Math.min(1, Math.max(this.value + val, 0));
|
508
|
+
}),
|
509
|
+
|
510
|
+
valueByRatio: cloneOnApply(function ( val ) {
|
511
|
+
this.value = Math.min(1, Math.max(this.value * (1 + val), 0));
|
512
|
+
}),
|
513
|
+
|
514
|
+
desaturateByAmount: cloneOnApply(function ( val ) {
|
515
|
+
this.saturation = Math.min(1, Math.max(this.saturation - val, 0));
|
516
|
+
}),
|
517
|
+
|
518
|
+
desaturateByRatio: cloneOnApply(function ( val ) {
|
519
|
+
this.saturation = Math.min(1, Math.max(this.saturation * (1 - val), 0));
|
520
|
+
}),
|
521
|
+
|
522
|
+
saturateByAmount: cloneOnApply(function ( val ) {
|
523
|
+
this.saturation = Math.min(1, Math.max(this.saturation + val, 0));
|
524
|
+
}),
|
525
|
+
|
526
|
+
saturateByRatio: cloneOnApply(function ( val ) {
|
527
|
+
this.saturation = Math.min(1, Math.max(this.saturation * (1 + val), 0));
|
528
|
+
}),
|
529
|
+
|
530
|
+
schemeFromDegrees: function ( degrees ) {
|
531
|
+
var newColors = [];
|
532
|
+
for (var i = 0, j = degrees.length; i < j; i++) {
|
533
|
+
var col = this.clone();
|
534
|
+
col.hue = (this.hue + degrees[i]) % 360;
|
535
|
+
newColors.push(col);
|
536
|
+
}
|
537
|
+
return newColors;
|
538
|
+
},
|
539
|
+
|
540
|
+
complementaryScheme: function ( ) {
|
541
|
+
return this.schemeFromDegrees([0,180]);
|
542
|
+
},
|
543
|
+
|
544
|
+
splitComplementaryScheme: function ( ) {
|
545
|
+
return this.schemeFromDegrees([0,150,320]);
|
546
|
+
},
|
547
|
+
|
548
|
+
splitComplementaryCWScheme: function ( ) {
|
549
|
+
return this.schemeFromDegrees([0,150,300]);
|
550
|
+
},
|
551
|
+
|
552
|
+
splitComplementaryCCWScheme: function ( ) {
|
553
|
+
return this.schemeFromDegrees([0,60,210]);
|
554
|
+
},
|
555
|
+
|
556
|
+
triadicScheme: function ( ) {
|
557
|
+
return this.schemeFromDegrees([0,120,240]);
|
558
|
+
},
|
559
|
+
|
560
|
+
clashScheme: function ( ) {
|
561
|
+
return this.schemeFromDegrees([0,90,270]);
|
562
|
+
},
|
563
|
+
|
564
|
+
tetradicScheme: function ( ) {
|
565
|
+
return this.schemeFromDegrees([0,90,180,270]);
|
566
|
+
},
|
567
|
+
|
568
|
+
fourToneCWScheme: function ( ) {
|
569
|
+
return this.schemeFromDegrees([0,60,180,240]);
|
570
|
+
},
|
571
|
+
|
572
|
+
fourToneCCWScheme: function ( ) {
|
573
|
+
return this.schemeFromDegrees([0,120,180,300]);
|
574
|
+
},
|
575
|
+
|
576
|
+
fiveToneAScheme: function ( ) {
|
577
|
+
return this.schemeFromDegrees([0,115,155,205,245]);
|
578
|
+
},
|
579
|
+
|
580
|
+
fiveToneBScheme: function ( ) {
|
581
|
+
return this.schemeFromDegrees([0,40,90,130,245]);
|
582
|
+
},
|
583
|
+
|
584
|
+
fiveToneCScheme: function ( ) {
|
585
|
+
return this.schemeFromDegrees([0,50,90,205,320]);
|
586
|
+
},
|
587
|
+
|
588
|
+
fiveToneDScheme: function ( ) {
|
589
|
+
return this.schemeFromDegrees([0,40,155,270,310]);
|
590
|
+
},
|
591
|
+
|
592
|
+
fiveToneEScheme: function ( ) {
|
593
|
+
return this.schemeFromDegrees([0,115,230,270,320]);
|
594
|
+
},
|
595
|
+
|
596
|
+
sixToneCWScheme: function ( ) {
|
597
|
+
return this.schemeFromDegrees([0,30,120,150,240,270]);
|
598
|
+
},
|
599
|
+
|
600
|
+
sixToneCCWScheme: function ( ) {
|
601
|
+
return this.schemeFromDegrees([0,90,120,210,240,330]);
|
602
|
+
},
|
603
|
+
|
604
|
+
neutralScheme: function ( ) {
|
605
|
+
return this.schemeFromDegrees([0,15,30,45,60,75]);
|
606
|
+
},
|
607
|
+
|
608
|
+
analogousScheme: function ( ) {
|
609
|
+
return this.schemeFromDegrees([0,30,60,90,120,150]);
|
610
|
+
},
|
611
|
+
|
612
|
+
fromObject: function ( o ) {
|
613
|
+
if (o.hasOwnProperty('hue') &&
|
614
|
+
o.hasOwnProperty('saturation') &&
|
615
|
+
o.hasOwnProperty('value')) {
|
616
|
+
var hsv = factories.HSV();
|
617
|
+
|
618
|
+
hsv.hue = o.hue;
|
619
|
+
hsv.saturation = o.saturation;
|
620
|
+
hsv.value = o.value;
|
621
|
+
hsv.alpha = o.hasOwnProperty('alpha') ? o.alpha : 1;
|
622
|
+
|
623
|
+
return hsv;
|
624
|
+
}
|
625
|
+
// nothing matches, not an HSV object
|
626
|
+
return null;
|
627
|
+
},
|
628
|
+
|
629
|
+
_normalise: function ( ) {
|
630
|
+
this.hue %= 360;
|
631
|
+
this.saturation = Math.min(Math.max(0, this.saturation), 1);
|
632
|
+
this.value = Math.min(Math.max(0, this.value));
|
633
|
+
this.alpha = Math.min(1, Math.max(0, this.alpha));
|
634
|
+
},
|
635
|
+
|
636
|
+
toRGB: function ( ) {
|
637
|
+
this._normalise();
|
638
|
+
|
639
|
+
var rgb = factories.RGB();
|
640
|
+
var i;
|
641
|
+
var f, p, q, t;
|
642
|
+
|
643
|
+
if( this.saturation === 0 ) {
|
644
|
+
// achromatic (grey)
|
645
|
+
rgb.red = this.value;
|
646
|
+
rgb.green = this.value;
|
647
|
+
rgb.blue = this.value;
|
648
|
+
rgb.alpha = this.alpha;
|
649
|
+
return rgb;
|
650
|
+
}
|
651
|
+
|
652
|
+
var h = this.hue / 60; // sector 0 to 5
|
653
|
+
i = Math.floor( h );
|
654
|
+
f = h - i; // factorial part of h
|
655
|
+
p = this.value * ( 1 - this.saturation );
|
656
|
+
q = this.value * ( 1 - this.saturation * f );
|
657
|
+
t = this.value * ( 1 - this.saturation * ( 1 - f ) );
|
658
|
+
|
659
|
+
switch( i ) {
|
660
|
+
case 0:
|
661
|
+
rgb.red = this.value;
|
662
|
+
rgb.green = t;
|
663
|
+
rgb.blue = p;
|
664
|
+
break;
|
665
|
+
case 1:
|
666
|
+
rgb.red = q;
|
667
|
+
rgb.green = this.value;
|
668
|
+
rgb.blue = p;
|
669
|
+
break;
|
670
|
+
case 2:
|
671
|
+
rgb.red = p;
|
672
|
+
rgb.green = this.value;
|
673
|
+
rgb.blue = t;
|
674
|
+
break;
|
675
|
+
case 3:
|
676
|
+
rgb.red = p;
|
677
|
+
rgb.green = q;
|
678
|
+
rgb.blue = this.value;
|
679
|
+
break;
|
680
|
+
case 4:
|
681
|
+
rgb.red = t;
|
682
|
+
rgb.green = p;
|
683
|
+
rgb.blue = this.value;
|
684
|
+
break;
|
685
|
+
default: // case 5:
|
686
|
+
rgb.red = this.value;
|
687
|
+
rgb.green = p;
|
688
|
+
rgb.blue = q;
|
689
|
+
break;
|
690
|
+
}
|
691
|
+
|
692
|
+
rgb.alpha = this.alpha;
|
693
|
+
|
694
|
+
return rgb;
|
695
|
+
},
|
696
|
+
toHSL: function() {
|
697
|
+
this._normalise();
|
698
|
+
|
699
|
+
var hsl = factories.HSL();
|
700
|
+
|
701
|
+
hsl.hue = this.hue;
|
702
|
+
var l = (2 - this.saturation) * this.value,
|
703
|
+
s = this.saturation * this.value;
|
704
|
+
if(l && 2 - l) {
|
705
|
+
s /= (l <= 1) ? l : 2 - l;
|
706
|
+
}
|
707
|
+
l /= 2;
|
708
|
+
hsl.saturation = s;
|
709
|
+
hsl.lightness = l;
|
710
|
+
hsl.alpha = this.alpha;
|
711
|
+
|
712
|
+
return hsl;
|
713
|
+
},
|
714
|
+
|
715
|
+
toHSV: function ( ) {
|
716
|
+
return this.clone();
|
717
|
+
}
|
718
|
+
});
|
719
|
+
|
720
|
+
registerModel('HSL', {
|
721
|
+
hue: 0,
|
722
|
+
saturation: 0,
|
723
|
+
lightness: 0,
|
724
|
+
alpha: 1,
|
725
|
+
|
726
|
+
darkenByAmount: cloneOnApply(function ( val ) {
|
727
|
+
this.lightness = Math.min(1, Math.max(this.lightness - val, 0));
|
728
|
+
}),
|
729
|
+
|
730
|
+
darkenByRatio: cloneOnApply(function ( val ) {
|
731
|
+
this.lightness = Math.min(1, Math.max(this.lightness * (1 - val), 0));
|
732
|
+
}),
|
733
|
+
|
734
|
+
lightenByAmount: cloneOnApply(function ( val ) {
|
735
|
+
this.lightness = Math.min(1, Math.max(this.lightness + val, 0));
|
736
|
+
}),
|
737
|
+
|
738
|
+
lightenByRatio: cloneOnApply(function ( val ) {
|
739
|
+
this.lightness = Math.min(1, Math.max(this.lightness * (1 + val), 0));
|
740
|
+
}),
|
741
|
+
|
742
|
+
fromObject: function ( o ) {
|
743
|
+
if ("string" == typeof o) {
|
744
|
+
return this._fromCSS( o );
|
745
|
+
}
|
746
|
+
if (o.hasOwnProperty('hue') &&
|
747
|
+
o.hasOwnProperty('saturation') &&
|
748
|
+
o.hasOwnProperty('lightness')) {
|
749
|
+
return this._fromHSL ( o );
|
750
|
+
}
|
751
|
+
// nothing matchs, not an RGB object
|
752
|
+
},
|
753
|
+
|
754
|
+
_fromCSS: function ( css ) {
|
755
|
+
var colorGroups = trim( css ).match( hsl_hsla_regex );
|
756
|
+
|
757
|
+
// if there is an "a" after "hsl", there must be a fourth parameter and the other way round
|
758
|
+
if (!colorGroups || (!!colorGroups[1] + !!colorGroups[5] === 1)) {
|
759
|
+
return null;
|
760
|
+
}
|
761
|
+
|
762
|
+
var hsl = factories.HSL();
|
763
|
+
hsl.hue = (colorGroups[2] % 360 + 360) % 360;
|
764
|
+
hsl.saturation = Math.max(0, Math.min(parseInt(colorGroups[3], 10) / 100, 1));
|
765
|
+
hsl.lightness = Math.max(0, Math.min(parseInt(colorGroups[4], 10) / 100, 1));
|
766
|
+
hsl.alpha = !!colorGroups[5] ? Math.max(0, Math.min(1, parseFloat(colorGroups[6]))) : 1;
|
767
|
+
|
768
|
+
return hsl;
|
769
|
+
},
|
770
|
+
|
771
|
+
_fromHSL: function ( HSL ) {
|
772
|
+
var newHSL = factories.HSL();
|
773
|
+
|
774
|
+
newHSL.hue = HSL.hue;
|
775
|
+
newHSL.saturation = HSL.saturation;
|
776
|
+
newHSL.lightness = HSL.lightness;
|
777
|
+
|
778
|
+
newHSL.alpha = HSL.hasOwnProperty('alpha') ? HSL.alpha : 1;
|
779
|
+
|
780
|
+
return newHSL;
|
781
|
+
},
|
782
|
+
|
783
|
+
_normalise: function ( ) {
|
784
|
+
this.hue = (this.hue % 360 + 360) % 360;
|
785
|
+
this.saturation = Math.min(Math.max(0, this.saturation), 1);
|
786
|
+
this.lightness = Math.min(Math.max(0, this.lightness));
|
787
|
+
this.alpha = Math.min(1, Math.max(0, this.alpha));
|
788
|
+
},
|
789
|
+
|
790
|
+
toHSL: function() {
|
791
|
+
return this.clone();
|
792
|
+
},
|
793
|
+
toHSV: function() {
|
794
|
+
this._normalise();
|
795
|
+
|
796
|
+
var hsv = factories.HSV();
|
797
|
+
|
798
|
+
// http://ariya.blogspot.com/2008/07/converting-between-hsl-and-hsv.html
|
799
|
+
hsv.hue = this.hue; // H
|
800
|
+
var l = 2 * this.lightness,
|
801
|
+
s = this.saturation * ((l <= 1) ? l : 2 - l);
|
802
|
+
hsv.value = (l + s) / 2; // V
|
803
|
+
hsv.saturation = ((2 * s) / (l + s)) || 0; // S
|
804
|
+
hsv.alpha = this.alpha;
|
805
|
+
|
806
|
+
return hsv;
|
807
|
+
},
|
808
|
+
toRGB: function() {
|
809
|
+
return this.toHSV().toRGB();
|
810
|
+
}
|
811
|
+
});
|
812
|
+
|
813
|
+
// Package specific exports
|
814
|
+
|
815
|
+
/* the Color function is a factory for new color objects.
|
816
|
+
*/
|
817
|
+
function Color( o ) {
|
818
|
+
return color.fromObject( o );
|
819
|
+
}
|
820
|
+
Color.isValid = function( str ) {
|
821
|
+
var key, c = Color( str );
|
822
|
+
|
823
|
+
var length = 0;
|
824
|
+
for(key in c) {
|
825
|
+
if(c.hasOwnProperty(key)) {
|
826
|
+
length++;
|
827
|
+
}
|
828
|
+
}
|
829
|
+
|
830
|
+
return length > 0;
|
831
|
+
};
|
832
|
+
net.brehaut.Color = Color;
|
833
|
+
}).call(net.brehaut);
|
834
|
+
|
835
|
+
/* Export to CommonJS
|
836
|
+
*/
|
837
|
+
var module;
|
838
|
+
if(module) {
|
839
|
+
module.exports.Color = net.brehaut.Color;
|
840
|
+
}
|