1 <html><head><meta http-equiv=
"content-type" content=
"text/html; charset=utf-8"> <style>
3 .COMM {color: #bbb; font-style: italic;}
7 .line {border-right:
1px dotted #
666; color: #
666; font-style: normal;}
8 </style></head><body><pre><span class='line'
> 1</span> <span class=
"COMM">/*
9 <span class='line'
> 2</span> * Copyright (C)
2008,
2009 Mihai Şucan
10 <span class='line'
> 3</span> *
11 <span class='line'
> 4</span> * This file is part of PaintWeb.
12 <span class='line'
> 5</span> *
13 <span class='line'
> 6</span> * PaintWeb is free software: you can redistribute it and/or modify
14 <span class='line'
> 7</span> * it under the terms of the GNU General Public License as published by
15 <span class='line'
> 8</span> * the Free Software Foundation, either version
3 of the License, or
16 <span class='line'
> 9</span> * (at your option) any later version.
17 <span class='line'
> 10</span> *
18 <span class='line'
> 11</span> * PaintWeb is distributed in the hope that it will be useful,
19 <span class='line'
> 12</span> * but WITHOUT ANY WARRANTY; without even the implied warranty of
20 <span class='line'
> 13</span> * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
21 <span class='line'
> 14</span> * GNU General Public License for more details.
22 <span class='line'
> 15</span> *
23 <span class='line'
> 16</span> * You should have received a copy of the GNU General Public License
24 <span class='line'
> 17</span> * along with PaintWeb. If not, see
<http://www.gnu.org/licenses
/>.
25 <span class='line'
> 18</span> *
26 <span class='line'
> 19</span> * $URL: http://code.google.com/p/paintweb $
27 <span class='line'
> 20</span> * $Date:
2009-
07-
09 14:
26:
21 +
0300 $
28 <span class='line'
> 21</span> */
</span><span class=
"WHIT">
29 <span class='line'
> 22</span>
30 <span class='line'
> 23</span> </span><span class=
"COMM">/**
31 <span class='line'
> 24</span> * @author
<a
lang=
"ro" href=
"http://www.robodesign.ro/mihai">Mihai Şucan
</a
>
32 <span class='line'
> 25</span> * @fileOverview Holds the implementation of the Color Mixer dialog.
33 <span class='line'
> 26</span> */
</span><span class=
"WHIT">
34 <span class='line'
> 27</span>
35 <span class='line'
> 28</span> </span><span class=
"COMM">// For the implementation of this extension I used the following references:
</span><span class=
"WHIT">
36 <span class='line'
> 29</span> </span><span class=
"COMM">// - Wikipedia articles on each subject.
</span><span class=
"WHIT">
37 <span class='line'
> 30</span> </span><span class=
"COMM">// - the great brucelindbloom.com Web site - lots of information.
</span><span class=
"WHIT">
38 <span class='line'
> 31</span>
39 <span class='line'
> 32</span> </span><span class=
"COMM">/**
40 <span class='line'
> 33</span> * @class The Color Mixer extension.
41 <span class='line'
> 34</span> *
42 <span class='line'
> 35</span> * @param {PaintWeb} app Reference to the main paint application object.
43 <span class='line'
> 36</span> */
</span><span class=
"WHIT">
44 <span class='line'
> 37</span> </span><span class=
"NAME">pwlib.extensions.colormixer
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">function
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">app
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
45 <span class='line'
> 38</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">_self
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">this
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
46 <span class='line'
> 39</span> </span><span class=
"WHIT"> </span><span class=
"NAME">config
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">app.config.colormixer
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
47 <span class='line'
> 40</span> </span><span class=
"WHIT"> </span><span class=
"NAME">doc
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">app.doc
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
48 <span class='line'
> 41</span> </span><span class=
"WHIT"> </span><span class=
"NAME">gui
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">app.gui
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
49 <span class='line'
> 42</span> </span><span class=
"WHIT"> </span><span class=
"NAME">lang
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">app.lang.colormixer
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
50 <span class='line'
> 43</span> </span><span class=
"WHIT"> </span><span class=
"NAME">MathFloor
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">Math.floor
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
51 <span class='line'
> 44</span> </span><span class=
"WHIT"> </span><span class=
"NAME">MathMax
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">Math.max
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
52 <span class='line'
> 45</span> </span><span class=
"WHIT"> </span><span class=
"NAME">MathMin
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">Math.min
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
53 <span class='line'
> 46</span> </span><span class=
"WHIT"> </span><span class=
"NAME">MathPow
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">Math.pow
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
54 <span class='line'
> 47</span> </span><span class=
"WHIT"> </span><span class=
"NAME">MathRound
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">Math.round
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
55 <span class='line'
> 48</span> </span><span class=
"WHIT"> </span><span class=
"NAME">resScale
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">app.resolution.scale
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
56 <span class='line'
> 49</span>
57 <span class='line'
> 50</span> </span><span class=
"WHIT"> </span><span class=
"COMM">/**
58 <span class='line'
> 51</span> * Holds references to various DOM elements.
59 <span class='line'
> 52</span> *
60 <span class='line'
> 53</span> * @private
61 <span class='line'
> 54</span> * @type Object
62 <span class='line'
> 55</span> */
</span><span class=
"WHIT">
63 <span class='line'
> 56</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.elems
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
64 <span class='line'
> 57</span> </span><span class=
"WHIT"> </span><span class=
"COMM">/**
65 <span class='line'
> 58</span> * Reference to the element which holds Canvas controls (the dot on the
66 <span class='line'
> 59</span> * Canvas, and the slider).
67 <span class='line'
> 60</span> * @type Element
68 <span class='line'
> 61</span> */
</span><span class=
"WHIT">
69 <span class='line'
> 62</span> </span><span class=
"WHIT"> </span><span class=
"STRN">'controls'
</span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"KEYW">null
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
70 <span class='line'
> 63</span>
71 <span class='line'
> 64</span> </span><span class=
"WHIT"> </span><span class=
"COMM">/**
72 <span class='line'
> 65</span> * Reference to the dot element that is rendered on top of the color space
73 <span class='line'
> 66</span> * visualisation.
74 <span class='line'
> 67</span> * @type Element
75 <span class='line'
> 68</span> */
</span><span class=
"WHIT">
76 <span class='line'
> 69</span> </span><span class=
"WHIT"> </span><span class=
"STRN">'chartDot'
</span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"KEYW">null
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
77 <span class='line'
> 70</span>
78 <span class='line'
> 71</span> </span><span class=
"WHIT"> </span><span class=
"COMM">/**
79 <span class='line'
> 72</span> * Reference to the slider element.
80 <span class='line'
> 73</span> * @type Element
81 <span class='line'
> 74</span> */
</span><span class=
"WHIT">
82 <span class='line'
> 75</span> </span><span class=
"WHIT"> </span><span class=
"STRN">'slider'
</span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"KEYW">null
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
83 <span class='line'
> 76</span>
84 <span class='line'
> 77</span> </span><span class=
"WHIT"> </span><span class=
"COMM">/**
85 <span class='line'
> 78</span> * Reference to the input element that allows the user to pick the color
86 <span class='line'
> 79</span> * palette to be displayed.
87 <span class='line'
> 80</span> * @type Element
88 <span class='line'
> 81</span> */
</span><span class=
"WHIT">
89 <span class='line'
> 82</span> </span><span class=
"WHIT"> </span><span class=
"STRN">'cpaletteInput'
</span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"KEYW">null
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
90 <span class='line'
> 83</span>
91 <span class='line'
> 84</span> </span><span class=
"WHIT"> </span><span class=
"COMM">/**
92 <span class='line'
> 85</span> * The container element which holds the colors of the currently selected
93 <span class='line'
> 86</span> * palette.
94 <span class='line'
> 87</span> * @type Element
95 <span class='line'
> 88</span> */
</span><span class=
"WHIT">
96 <span class='line'
> 89</span> </span><span class=
"WHIT"> </span><span class=
"STRN">'cpaletteOutput'
</span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"KEYW">null
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
97 <span class='line'
> 90</span>
98 <span class='line'
> 91</span> </span><span class=
"WHIT"> </span><span class=
"COMM">/**
99 <span class='line'
> 92</span> * Reference to the element which displays the current color.
100 <span class='line'
> 93</span> * @type Element
101 <span class='line'
> 94</span> */
</span><span class=
"WHIT">
102 <span class='line'
> 95</span> </span><span class=
"WHIT"> </span><span class=
"STRN">"colorActive"</span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"KEYW">null
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
103 <span class='line'
> 96</span>
104 <span class='line'
> 97</span> </span><span class=
"WHIT"> </span><span class=
"COMM">/**
105 <span class='line'
> 98</span> * Reference to the element which displays the old color.
106 <span class='line'
> 99</span> * @type Element
107 <span class='line'
>100</span> */
</span><span class=
"WHIT">
108 <span class='line'
>101</span> </span><span class=
"WHIT"> </span><span class=
"STRN">"colorOld"</span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"KEYW">null
</span><span class=
"WHIT">
109 <span class='line'
>102</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
110 <span class='line'
>103</span>
111 <span class='line'
>104</span> </span><span class=
"WHIT"> </span><span class=
"COMM">/**
112 <span class='line'
>105</span> * Reference to the Color Mixer floating panel GUI component object.
113 <span class='line'
>106</span> *
114 <span class='line'
>107</span> * @private
115 <span class='line'
>108</span> * @type pwlib.guiFloatingPanel
116 <span class='line'
>109</span> */
</span><span class=
"WHIT">
117 <span class='line'
>110</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.panel
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">null
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
118 <span class='line'
>111</span>
119 <span class='line'
>112</span> </span><span class=
"WHIT"> </span><span class=
"COMM">/**
120 <span class='line'
>113</span> * Reference to the Color Mixer tab panel GUI component object which holds the
121 <span class='line'
>114</span> * inputs.
122 <span class='line'
>115</span> *
123 <span class='line'
>116</span> * @private
124 <span class='line'
>117</span> * @type pwlib.guiTabPanel
125 <span class='line'
>118</span> */
</span><span class=
"WHIT">
126 <span class='line'
>119</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.panelInputs
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">null
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
127 <span class='line'
>120</span>
128 <span class='line'
>121</span> </span><span class=
"WHIT"> </span><span class=
"COMM">/**
129 <span class='line'
>122</span> * Reference to the Color Mixer tab panel GUI component object which holds the
130 <span class='line'
>123</span> * Canvas used for color space visualisation and the color palettes selector.
131 <span class='line'
>124</span> *
132 <span class='line'
>125</span> * @private
133 <span class='line'
>126</span> * @type pwlib.guiTabPanel
134 <span class='line'
>127</span> */
</span><span class=
"WHIT">
135 <span class='line'
>128</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.panelSelector
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">null
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
136 <span class='line'
>129</span>
137 <span class='line'
>130</span> </span><span class=
"WHIT"> </span><span class=
"COMM">/**
138 <span class='line'
>131</span> * Holds a reference to the
2D context of the color mixer Canvas element. This
139 <span class='line'
>132</span> * is where the color chart and the slider are both drawn.
140 <span class='line'
>133</span> *
141 <span class='line'
>134</span> * @private
142 <span class='line'
>135</span> * @type CanvasRenderingContext2D
143 <span class='line'
>136</span> */
</span><span class=
"WHIT">
144 <span class='line'
>137</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.context2d
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">false
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
145 <span class='line'
>138</span>
146 <span class='line'
>139</span> </span><span class=
"WHIT"> </span><span class=
"COMM">/**
147 <span class='line'
>140</span> * Target input hooks. This object must hold two methods:
148 <span class='line'
>141</span> *
149 <span class='line'
>142</span> *
<ul
>
150 <span class='line'
>143</span> *
<li
><code
>show()
</code
> which is invoked by this extension when the Color
151 <span class='line'
>144</span> * Mixer panel shows up on screen.
152 <span class='line'
>145</span> *
153 <span class='line'
>146</span> *
<li
><code
>hide()
</code
> which is invoked when the Color Mixer panel is
154 <span class='line'
>147</span> * hidden from the screen.
155 <span class='line'
>148</span> *
</ul
>
156 <span class='line'
>149</span> *
157 <span class='line'
>150</span> *
<p
>The object must also hold information about the associated configuration
158 <span class='line'
>151</span> * property:
<var
>configProperty
</var
>,
<var
>configGroup
</var
> and
159 <span class='line'
>152</span> *
<var
>configGroupRef
</var
>.
160 <span class='line'
>153</span> *
161 <span class='line'
>154</span> * @type Object
162 <span class='line'
>155</span> */
</span><span class=
"WHIT">
163 <span class='line'
>156</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.targetInput
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">null
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
164 <span class='line'
>157</span>
165 <span class='line'
>158</span> </span><span class=
"WHIT"> </span><span class=
"COMM">/**
166 <span class='line'
>159</span> * Holds the current color in several formats: RGB, HEX, HSV, CIE Lab, and
167 <span class='line'
>160</span> * CMYK. Except for 'hex', all the values should be from
0 to
1.
168 <span class='line'
>161</span> *
169 <span class='line'
>162</span> * @type Object
170 <span class='line'
>163</span> */
</span><span class=
"WHIT">
171 <span class='line'
>164</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.color
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
172 <span class='line'
>165</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// RGB
</span><span class=
"WHIT">
173 <span class='line'
>166</span> </span><span class=
"WHIT"> </span><span class=
"NAME">red
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT">
174 <span class='line'
>167</span> </span><span class=
"WHIT"> </span><span class=
"NAME">green
</span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT">
175 <span class='line'
>168</span> </span><span class=
"WHIT"> </span><span class=
"NAME">blue
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT">
176 <span class='line'
>169</span>
177 <span class='line'
>170</span> </span><span class=
"WHIT"> </span><span class=
"NAME">alpha
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT">
178 <span class='line'
>171</span> </span><span class=
"WHIT"> </span><span class=
"NAME">hex
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT">
179 <span class='line'
>172</span>
180 <span class='line'
>173</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// HSV
</span><span class=
"WHIT">
181 <span class='line'
>174</span> </span><span class=
"WHIT"> </span><span class=
"NAME">hue
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT">
182 <span class='line'
>175</span> </span><span class=
"WHIT"> </span><span class=
"NAME">sat
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT">
183 <span class='line'
>176</span> </span><span class=
"WHIT"> </span><span class=
"NAME">val
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT">
184 <span class='line'
>177</span>
185 <span class='line'
>178</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// CMYK
</span><span class=
"WHIT">
186 <span class='line'
>179</span> </span><span class=
"WHIT"> </span><span class=
"NAME">cyan
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT">
187 <span class='line'
>180</span> </span><span class=
"WHIT"> </span><span class=
"NAME">magenta
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT">
188 <span class='line'
>181</span> </span><span class=
"WHIT"> </span><span class=
"NAME">yellow
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT">
189 <span class='line'
>182</span> </span><span class=
"WHIT"> </span><span class=
"NAME">black
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT">
190 <span class='line'
>183</span>
191 <span class='line'
>184</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// CIE Lab
</span><span class=
"WHIT">
192 <span class='line'
>185</span> </span><span class=
"WHIT"> </span><span class=
"NAME">cie_l
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT">
193 <span class='line'
>186</span> </span><span class=
"WHIT"> </span><span class=
"NAME">cie_a
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT">
194 <span class='line'
>187</span> </span><span class=
"WHIT"> </span><span class=
"NAME">cie_b
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"WHIT">
195 <span class='line'
>188</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
196 <span class='line'
>189</span>
197 <span class='line'
>190</span> </span><span class=
"WHIT"> </span><span class=
"COMM">/**
198 <span class='line'
>191</span> * Holds references to all the DOM input fields, for each color channel.
199 <span class='line'
>192</span> *
200 <span class='line'
>193</span> * @private
201 <span class='line'
>194</span> * @type Object
202 <span class='line'
>195</span> */
</span><span class=
"WHIT">
203 <span class='line'
>196</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.inputs
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
204 <span class='line'
>197</span> </span><span class=
"WHIT"> </span><span class=
"NAME">red
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"KEYW">null
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
205 <span class='line'
>198</span> </span><span class=
"WHIT"> </span><span class=
"NAME">green
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"KEYW">null
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
206 <span class='line'
>199</span> </span><span class=
"WHIT"> </span><span class=
"NAME">blue
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"KEYW">null
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
207 <span class='line'
>200</span>
208 <span class='line'
>201</span> </span><span class=
"WHIT"> </span><span class=
"NAME">alpha
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"KEYW">null
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
209 <span class='line'
>202</span> </span><span class=
"WHIT"> </span><span class=
"NAME">hex
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"KEYW">null
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
210 <span class='line'
>203</span>
211 <span class='line'
>204</span> </span><span class=
"WHIT"> </span><span class=
"NAME">hue
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"KEYW">null
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
212 <span class='line'
>205</span> </span><span class=
"WHIT"> </span><span class=
"NAME">sat
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"KEYW">null
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
213 <span class='line'
>206</span> </span><span class=
"WHIT"> </span><span class=
"NAME">val
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"KEYW">null
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
214 <span class='line'
>207</span>
215 <span class='line'
>208</span> </span><span class=
"WHIT"> </span><span class=
"NAME">cyan
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"KEYW">null
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
216 <span class='line'
>209</span> </span><span class=
"WHIT"> </span><span class=
"NAME">magenta
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"KEYW">null
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
217 <span class='line'
>210</span> </span><span class=
"WHIT"> </span><span class=
"NAME">yellow
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"KEYW">null
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
218 <span class='line'
>211</span> </span><span class=
"WHIT"> </span><span class=
"NAME">black
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"KEYW">null
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
219 <span class='line'
>212</span>
220 <span class='line'
>213</span> </span><span class=
"WHIT"> </span><span class=
"NAME">cie_l
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"KEYW">null
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
221 <span class='line'
>214</span> </span><span class=
"WHIT"> </span><span class=
"NAME">cie_a
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"KEYW">null
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
222 <span class='line'
>215</span> </span><span class=
"WHIT"> </span><span class=
"NAME">cie_b
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"KEYW">null
</span><span class=
"WHIT">
223 <span class='line'
>216</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
224 <span class='line'
>217</span>
225 <span class='line'
>218</span> </span><span class=
"WHIT"> </span><span class=
"COMM">/**
226 <span class='line'
>219</span> * The
"absolute maximum" value is determined based on the min/max values.
227 <span class='line'
>220</span> * For min -
100 and max
100, the abs_max is
200.
228 <span class='line'
>221</span> * @private
229 <span class='line'
>222</span> *
230 <span class='line'
>223</span> */
</span><span class=
"WHIT">
231 <span class='line'
>224</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.abs_max
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"PUNC">}
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
232 <span class='line'
>225</span>
233 <span class='line'
>226</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// The hue spectrum used by the HSV charts.
</span><span class=
"WHIT">
234 <span class='line'
>227</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">hueSpectrum
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"PUNC">[
</span><span class=
"WHIT">
235 <span class='line'
>228</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">[
</span><span class=
"NUMB">255</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"COMM">//
0, Red,
0°
</span><span class=
"WHIT">
236 <span class='line'
>229</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">[
</span><span class=
"NUMB">255</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">255</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"COMM">//
1, Yellow,
60°
</span><span class=
"WHIT">
237 <span class='line'
>230</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">[
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">255</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"COMM">//
2, Green,
120°
</span><span class=
"WHIT">
238 <span class='line'
>231</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">[
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">255</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">255</span><span class=
"PUNC">]
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"COMM">//
3, Cyan,
180°
</span><span class=
"WHIT">
239 <span class='line'
>232</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">[
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">255</span><span class=
"PUNC">]
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"COMM">//
4, Blue,
240°
</span><span class=
"WHIT">
240 <span class='line'
>233</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">[
</span><span class=
"NUMB">255</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">255</span><span class=
"PUNC">]
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"COMM">//
5, Magenta,
300°
</span><span class=
"WHIT">
241 <span class='line'
>234</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">[
</span><span class=
"NUMB">255</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"COMM">//
6, Red,
360°
</span><span class=
"WHIT">
242 <span class='line'
>235</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
243 <span class='line'
>236</span>
244 <span class='line'
>237</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// The active color key (input) determines how the color chart works.
</span><span class=
"WHIT">
245 <span class='line'
>238</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.ckey_active
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"STRN">'red'
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
246 <span class='line'
>239</span>
247 <span class='line'
>240</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// Given a group of the inputs: red, green and blue, when one of them is active, the ckey_adjoint is set to an array of the other two input IDs.
</span><span class=
"WHIT">
248 <span class='line'
>241</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.ckey_adjoint
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">false
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
249 <span class='line'
>242</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.ckey_active_group
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">false
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
250 <span class='line'
>243</span>
251 <span class='line'
>244</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.ckey_grouping
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
252 <span class='line'
>245</span> </span><span class=
"WHIT"> </span><span class=
"STRN">'red'
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"STRN">'rgb'
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
253 <span class='line'
>246</span> </span><span class=
"WHIT"> </span><span class=
"STRN">'green'
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"STRN">'rgb'
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
254 <span class='line'
>247</span> </span><span class=
"WHIT"> </span><span class=
"STRN">'blue'
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"STRN">'rgb'
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
255 <span class='line'
>248</span>
256 <span class='line'
>249</span> </span><span class=
"WHIT"> </span><span class=
"STRN">'hue'
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"STRN">'hsv'
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
257 <span class='line'
>250</span> </span><span class=
"WHIT"> </span><span class=
"STRN">'sat'
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"STRN">'hsv'
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
258 <span class='line'
>251</span> </span><span class=
"WHIT"> </span><span class=
"STRN">'val'
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"STRN">'hsv'
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
259 <span class='line'
>252</span>
260 <span class='line'
>253</span> </span><span class=
"WHIT"> </span><span class=
"STRN">'cyan'
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"STRN">'cmyk'
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
261 <span class='line'
>254</span> </span><span class=
"WHIT"> </span><span class=
"STRN">'magenta'
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"STRN">'cmyk'
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
262 <span class='line'
>255</span> </span><span class=
"WHIT"> </span><span class=
"STRN">'yellow'
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"STRN">'cmyk'
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
263 <span class='line'
>256</span> </span><span class=
"WHIT"> </span><span class=
"STRN">'black'
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"STRN">'cmyk'
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
264 <span class='line'
>257</span>
265 <span class='line'
>258</span> </span><span class=
"WHIT"> </span><span class=
"STRN">'cie_l'
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"STRN">'lab'
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
266 <span class='line'
>259</span> </span><span class=
"WHIT"> </span><span class=
"STRN">'cie_a'
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"STRN">'lab'
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
267 <span class='line'
>260</span> </span><span class=
"WHIT"> </span><span class=
"STRN">'cie_b'
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"STRN">'lab'
</span><span class=
"WHIT">
268 <span class='line'
>261</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
269 <span class='line'
>262</span>
270 <span class='line'
>263</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// These values are automatically calculated when the color mixer is
</span><span class=
"WHIT">
271 <span class='line'
>264</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// initialized.
</span><span class=
"WHIT">
272 <span class='line'
>265</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.sliderX
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">;
</span><span class=
"WHIT">
273 <span class='line'
>266</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.sliderWidth
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">;
</span><span class=
"WHIT">
274 <span class='line'
>267</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.sliderHeight
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">;
</span><span class=
"WHIT">
275 <span class='line'
>268</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.sliderSpacing
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">;
</span><span class=
"WHIT">
276 <span class='line'
>269</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.chartWidth
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">;
</span><span class=
"WHIT">
277 <span class='line'
>270</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.chartHeight
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">;
</span><span class=
"WHIT">
278 <span class='line'
>271</span>
279 <span class='line'
>272</span> </span><span class=
"WHIT"> </span><span class=
"COMM">/**
280 <span class='line'
>273</span> * Register the Color Mixer extension.
281 <span class='line'
>274</span> *
282 <span class='line'
>275</span> * @returns {Boolean} True if the extension can be registered properly, or
283 <span class='line'
>276</span> * false if not.
284 <span class='line'
>277</span> */
</span><span class=
"WHIT">
285 <span class='line'
>278</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.extensionRegister
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">function
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">ev
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
286 <span class='line'
>279</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"PUNC">!
</span><span class=
"NAME">gui.elems
</span><span class=
"WHIT"> </span><span class=
"PUNC">||
</span><span class=
"WHIT"> </span><span class=
"PUNC">!
</span><span class=
"NAME">gui.elems.colormixer_canvas
</span><span class=
"WHIT"> </span><span class=
"PUNC">||
</span><span class=
"WHIT"> </span><span class=
"PUNC">!
</span><span class=
"NAME">gui.floatingPanels
</span><span class=
"WHIT"> </span><span class=
"PUNC">||
</span><span class=
"WHIT">
287 <span class='line'
>280</span> </span><span class=
"PUNC">!
</span><span class=
"NAME">gui.floatingPanels.colormixer
</span><span class=
"WHIT"> </span><span class=
"PUNC">||
</span><span class=
"WHIT"> </span><span class=
"PUNC">!
</span><span class=
"NAME">gui.tabPanels
</span><span class=
"WHIT"> </span><span class=
"PUNC">||
</span><span class=
"WHIT">
288 <span class='line'
>281</span> </span><span class=
"PUNC">!
</span><span class=
"NAME">gui.tabPanels.colormixer_inputs
</span><span class=
"WHIT"> </span><span class=
"PUNC">||
</span><span class=
"WHIT"> </span><span class=
"PUNC">!
</span><span class=
"NAME">gui.tabPanels.colormixer_selector
</span><span class=
"WHIT">
289 <span class='line'
>282</span> </span><span class=
"PUNC">||
</span><span class=
"WHIT"> </span><span class=
"PUNC">!
</span><span class=
"NAME">_self.init_lab
</span><span class=
"PUNC">(
</span><span class=
"PUNC">)
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
290 <span class='line'
>283</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">return
</span><span class=
"WHIT"> </span><span class=
"KEYW">false
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
291 <span class='line'
>284</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
292 <span class='line'
>285</span>
293 <span class='line'
>286</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.panel
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">gui.floatingPanels.colormixer
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
294 <span class='line'
>287</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.panelSelector
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">gui.tabPanels.colormixer_selector
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
295 <span class='line'
>288</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.panelInputs
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">gui.tabPanels.colormixer_inputs
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
296 <span class='line'
>289</span>
297 <span class='line'
>290</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// Initialize the color mixer Canvas element.
</span><span class=
"WHIT">
298 <span class='line'
>291</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.context2d
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">gui.elems.colormixer_canvas.getContext
</span><span class=
"PUNC">(
</span><span class=
"STRN">'
2d'
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
299 <span class='line'
>292</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"PUNC">!
</span><span class=
"NAME">_self.context2d
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
300 <span class='line'
>293</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">return
</span><span class=
"WHIT"> </span><span class=
"KEYW">false
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
301 <span class='line'
>294</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
302 <span class='line'
>295</span>
303 <span class='line'
>296</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// Setup the color mixer inputs.
</span><span class=
"WHIT">
304 <span class='line'
>297</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">elem
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">label
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">labelElem
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
305 <span class='line'
>298</span> </span><span class=
"WHIT"> </span><span class=
"NAME">inputValues
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">config.inputValues
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
306 <span class='line'
>299</span> </span><span class=
"WHIT"> </span><span class=
"NAME">form
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.panelInputs.container
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
307 <span class='line'
>300</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"PUNC">!
</span><span class=
"NAME">form
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
308 <span class='line'
>301</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">return
</span><span class=
"WHIT"> </span><span class=
"KEYW">false
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
309 <span class='line'
>302</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
310 <span class='line'
>303</span>
311 <span class='line'
>304</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">for
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"WHIT"> </span><span class=
"KEYW">in
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.inputs
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
312 <span class='line'
>305</span> </span><span class=
"WHIT"> </span><span class=
"NAME">elem
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">form.elements.namedItem
</span><span class=
"PUNC">(
</span><span class=
"STRN">'ckey_'
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">||
</span><span class=
"WHIT"> </span><span class=
"NAME">gui.inputs
</span><span class=
"PUNC">[
</span><span class=
"STRN">'ckey_'
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
313 <span class='line'
>306</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"PUNC">!
</span><span class=
"NAME">elem
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
314 <span class='line'
>307</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">return
</span><span class=
"WHIT"> </span><span class=
"KEYW">false
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
315 <span class='line'
>308</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
316 <span class='line'
>309</span>
317 <span class='line'
>310</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">i
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"STRN">'hex'
</span><span class=
"WHIT"> </span><span class=
"PUNC">||
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"STRN">'alpha'
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
318 <span class='line'
>311</span> </span><span class=
"WHIT"> </span><span class=
"NAME">label
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">lang.inputs
</span><span class=
"PUNC">[
</span><span class=
"NAME">i
</span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
319 <span class='line'
>312</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
320 <span class='line'
>313</span> </span><span class=
"WHIT"> </span><span class=
"NAME">label
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">lang.inputs
</span><span class=
"PUNC">[
</span><span class=
"NAME">_self.ckey_grouping
</span><span class=
"PUNC">[
</span><span class=
"NAME">i
</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">'_'
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
321 <span class='line'
>314</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
322 <span class='line'
>315</span>
323 <span class='line'
>316</span> </span><span class=
"WHIT"> </span><span class=
"NAME">labelElem
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">elem.parentNode
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
324 <span class='line'
>317</span> </span><span class=
"WHIT"> </span><span class=
"NAME">labelElem.replaceChild
</span><span class=
"PUNC">(
</span><span class=
"NAME">doc.createTextNode
</span><span class=
"PUNC">(
</span><span class=
"NAME">label
</span><span class=
"PUNC">)
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">labelElem.firstChild
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
325 <span class='line'
>318</span>
326 <span class='line'
>319</span> </span><span class=
"WHIT"> </span><span class=
"NAME">elem.addEventListener
</span><span class=
"PUNC">(
</span><span class=
"STRN">'input'
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.ev_input_change
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"KEYW">false
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
327 <span class='line'
>320</span> </span><span class=
"WHIT"> </span><span class=
"NAME">elem.addEventListener
</span><span class=
"PUNC">(
</span><span class=
"STRN">'change'
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.ev_input_change
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"KEYW">false
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
328 <span class='line'
>321</span>
329 <span class='line'
>322</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">i
</span><span class=
"WHIT"> </span><span class=
"PUNC">!==
</span><span class=
"WHIT"> </span><span class=
"STRN">'hex'
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
330 <span class='line'
>323</span> </span><span class=
"WHIT"> </span><span class=
"NAME">elem.setAttribute
</span><span class=
"PUNC">(
</span><span class=
"STRN">'step'
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">inputValues
</span><span class=
"PUNC">[
</span><span class=
"NAME">i
</span><span class=
"PUNC">]
</span><span class=
"PUNC">[
</span><span class=
"NUMB">2</span><span class=
"PUNC">]
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
331 <span class='line'
>324</span>
332 <span class='line'
>325</span> </span><span class=
"WHIT"> </span><span class=
"NAME">elem.setAttribute
</span><span class=
"PUNC">(
</span><span class=
"STRN">'max'
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">MathRound
</span><span class=
"PUNC">(
</span><span class=
"NAME">inputValues
</span><span class=
"PUNC">[
</span><span class=
"NAME">i
</span><span class=
"PUNC">]
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"PUNC">)
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
333 <span class='line'
>326</span> </span><span class=
"WHIT"> </span><span class=
"NAME">elem.setAttribute
</span><span class=
"PUNC">(
</span><span class=
"STRN">'min'
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">MathRound
</span><span class=
"PUNC">(
</span><span class=
"NAME">inputValues
</span><span class=
"PUNC">[
</span><span class=
"NAME">i
</span><span class=
"PUNC">]
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"PUNC">)
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
334 <span class='line'
>327</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.abs_max
</span><span class=
"PUNC">[
</span><span class=
"NAME">i
</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">inputValues
</span><span class=
"PUNC">[
</span><span class=
"NAME">i
</span><span class=
"PUNC">]
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NAME">inputValues
</span><span class=
"PUNC">[
</span><span class=
"NAME">i
</span><span class=
"PUNC">]
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
335 <span class='line'
>328</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
336 <span class='line'
>329</span>
337 <span class='line'
>330</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// Store the color key, which is used by the event handler.
</span><span class=
"WHIT">
338 <span class='line'
>331</span> </span><span class=
"WHIT"> </span><span class=
"NAME">elem._ckey
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
339 <span class='line'
>332</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.inputs
</span><span class=
"PUNC">[
</span><span class=
"NAME">i
</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">elem
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
340 <span class='line'
>333</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
341 <span class='line'
>334</span>
342 <span class='line'
>335</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// Setup the ckey inputs of type=radio.
</span><span class=
"WHIT">
343 <span class='line'
>336</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">ckey
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">form.ckey
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
344 <span class='line'
>337</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"PUNC">!
</span><span class=
"NAME">ckey
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
345 <span class='line'
>338</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">return
</span><span class=
"WHIT"> </span><span class=
"KEYW">false
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
346 <span class='line'
>339</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
347 <span class='line'
>340</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">for
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">n
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">ckey.length
</span><span class=
"PUNC">;
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"WHIT"> </span><span class=
"PUNC"><</span><span class=
"WHIT"> </span><span class=
"NAME">n
</span><span class=
"PUNC">;
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"PUNC">++
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
348 <span class='line'
>341</span> </span><span class=
"WHIT"> </span><span class=
"NAME">elem
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">ckey
</span><span class=
"PUNC">[
</span><span class=
"NAME">i
</span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
349 <span class='line'
>342</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">_self.ckey_grouping
</span><span class=
"PUNC">[
</span><span class=
"NAME">elem.value
</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"STRN">'lab'
</span><span class=
"WHIT"> </span><span class=
"PUNC">&&
</span><span class=
"WHIT">
350 <span class='line'
>343</span> </span><span class=
"PUNC">!
</span><span class=
"NAME">_self.context2d.putImageData
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
351 <span class='line'
>344</span> </span><span class=
"WHIT"> </span><span class=
"NAME">elem.disabled
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">true
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
352 <span class='line'
>345</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">continue
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
353 <span class='line'
>346</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
354 <span class='line'
>347</span>
355 <span class='line'
>348</span> </span><span class=
"WHIT"> </span><span class=
"NAME">elem.addEventListener
</span><span class=
"PUNC">(
</span><span class=
"STRN">'change'
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.ev_change_ckey_active
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"KEYW">false
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
356 <span class='line'
>349</span>
357 <span class='line'
>350</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">elem.value
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.ckey_active
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
358 <span class='line'
>351</span> </span><span class=
"WHIT"> </span><span class=
"NAME">elem.checked
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">true
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
359 <span class='line'
>352</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.update_ckey_active
</span><span class=
"PUNC">(
</span><span class=
"NAME">_self.ckey_active
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"KEYW">true
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
360 <span class='line'
>353</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
361 <span class='line'
>354</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
362 <span class='line'
>355</span>
363 <span class='line'
>356</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// Prepare the color preview elements.
</span><span class=
"WHIT">
364 <span class='line'
>357</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.elems.colorActive
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">gui.elems.colormixer_colorActive.firstChild
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
365 <span class='line'
>358</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.elems.colorOld
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">gui.elems.colormixer_colorOld.firstChild
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
366 <span class='line'
>359</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.elems.colorOld.addEventListener
</span><span class=
"PUNC">(
</span><span class=
"STRN">'click'
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.ev_click_color
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"KEYW">false
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
367 <span class='line'
>360</span>
368 <span class='line'
>361</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// Make sure the buttons work properly.
</span><span class=
"WHIT">
369 <span class='line'
>362</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">anchor
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">btn
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">buttons
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"PUNC">[
</span><span class=
"STRN">'accept'
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"STRN">'cancel'
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"STRN">'saveColor'
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"STRN">'pickColor'
</span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
370 <span class='line'
>363</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">for
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">n
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">buttons.length
</span><span class=
"PUNC">;
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"WHIT"> </span><span class=
"PUNC"><</span><span class=
"WHIT"> </span><span class=
"NAME">n
</span><span class=
"PUNC">;
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"PUNC">++
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
371 <span class='line'
>364</span> </span><span class=
"WHIT"> </span><span class=
"NAME">btn
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">gui.elems
</span><span class=
"PUNC">[
</span><span class=
"STRN">'colormixer_btn_'
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">buttons
</span><span class=
"PUNC">[
</span><span class=
"NAME">i
</span><span class=
"PUNC">]
</span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
372 <span class='line'
>365</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"PUNC">!
</span><span class=
"NAME">btn
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
373 <span class='line'
>366</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">continue
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
374 <span class='line'
>367</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
375 <span class='line'
>368</span>
376 <span class='line'
>369</span> </span><span class=
"WHIT"> </span><span class=
"NAME">anchor
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">doc.createElement
</span><span class=
"PUNC">(
</span><span class=
"STRN">'a'
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
377 <span class='line'
>370</span> </span><span class=
"WHIT"> </span><span class=
"NAME">anchor.href
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"STRN">'#'
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
378 <span class='line'
>371</span> </span><span class=
"WHIT"> </span><span class=
"NAME">anchor.appendChild
</span><span class=
"PUNC">(
</span><span class=
"NAME">doc.createTextNode
</span><span class=
"PUNC">(
</span><span class=
"NAME">lang.buttons
</span><span class=
"PUNC">[
</span><span class=
"NAME">buttons
</span><span class=
"PUNC">[
</span><span class=
"NAME">i
</span><span class=
"PUNC">]
</span><span class=
"PUNC">]
</span><span class=
"PUNC">)
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
379 <span class='line'
>372</span> </span><span class=
"WHIT"> </span><span class=
"NAME">anchor.addEventListener
</span><span class=
"PUNC">(
</span><span class=
"STRN">'click'
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">_self
</span><span class=
"PUNC">[
</span><span class=
"STRN">'ev_click_'
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">buttons
</span><span class=
"PUNC">[
</span><span class=
"NAME">i
</span><span class=
"PUNC">]
</span><span class=
"PUNC">]
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"KEYW">false
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
380 <span class='line'
>373</span>
381 <span class='line'
>374</span> </span><span class=
"WHIT"> </span><span class=
"NAME">btn.replaceChild
</span><span class=
"PUNC">(
</span><span class=
"NAME">anchor
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">btn.firstChild
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
382 <span class='line'
>375</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
383 <span class='line'
>376</span>
384 <span class='line'
>377</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// Prepare the canvas
"controls" (the chart
"dot" and the slider).
</span><span class=
"WHIT">
385 <span class='line'
>378</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">id
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">elems
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"PUNC">[
</span><span class=
"STRN">'controls'
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"STRN">'chartDot'
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"STRN">'slider'
</span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
386 <span class='line'
>379</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">for
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">n
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">elems.length
</span><span class=
"PUNC">;
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"WHIT"> </span><span class=
"PUNC"><</span><span class=
"WHIT"> </span><span class=
"NAME">n
</span><span class=
"PUNC">;
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"PUNC">++
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
387 <span class='line'
>380</span> </span><span class=
"WHIT"> </span><span class=
"NAME">id
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">elems
</span><span class=
"PUNC">[
</span><span class=
"NAME">i
</span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
388 <span class='line'
>381</span> </span><span class=
"WHIT"> </span><span class=
"NAME">elem
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">gui.elems
</span><span class=
"PUNC">[
</span><span class=
"STRN">'colormixer_'
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">id
</span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
389 <span class='line'
>382</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"PUNC">!
</span><span class=
"NAME">elem
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
390 <span class='line'
>383</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">return
</span><span class=
"WHIT"> </span><span class=
"KEYW">false
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
391 <span class='line'
>384</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
392 <span class='line'
>385</span>
393 <span class='line'
>386</span> </span><span class=
"WHIT"> </span><span class=
"NAME">elem.addEventListener
</span><span class=
"PUNC">(
</span><span class=
"STRN">'mousedown'
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.ev_canvas
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"KEYW">false
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
394 <span class='line'
>387</span> </span><span class=
"WHIT"> </span><span class=
"NAME">elem.addEventListener
</span><span class=
"PUNC">(
</span><span class=
"STRN">'mousemove'
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.ev_canvas
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"KEYW">false
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
395 <span class='line'
>388</span> </span><span class=
"WHIT"> </span><span class=
"NAME">elem.addEventListener
</span><span class=
"PUNC">(
</span><span class=
"STRN">'mouseup'
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.ev_canvas
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"KEYW">false
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
396 <span class='line'
>389</span>
397 <span class='line'
>390</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.elems
</span><span class=
"PUNC">[
</span><span class=
"NAME">id
</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">elem
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
398 <span class='line'
>391</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
399 <span class='line'
>392</span>
400 <span class='line'
>393</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// The color palette
<select
>.
</span><span class=
"WHIT">
401 <span class='line'
>394</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.elems.cpaletteInput
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">gui.inputs.colormixer_cpaletteInput
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
402 <span class='line'
>395</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.elems.cpaletteInput.addEventListener
</span><span class=
"PUNC">(
</span><span class=
"STRN">'change'
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
403 <span class='line'
>396</span> </span><span class=
"NAME">_self.ev_change_cpalette
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"KEYW">false
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
404 <span class='line'
>397</span>
405 <span class='line'
>398</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// Add the list of color palettes into the
<select
>.
</span><span class=
"WHIT">
406 <span class='line'
>399</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">palette
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
407 <span class='line'
>400</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">for
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"WHIT"> </span><span class=
"KEYW">in
</span><span class=
"WHIT"> </span><span class=
"NAME">config.colorPalettes
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
408 <span class='line'
>401</span> </span><span class=
"WHIT"> </span><span class=
"NAME">palette
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">config.colorPalettes
</span><span class=
"PUNC">[
</span><span class=
"NAME">i
</span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
409 <span class='line'
>402</span> </span><span class=
"WHIT"> </span><span class=
"NAME">elem
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">doc.createElement
</span><span class=
"PUNC">(
</span><span class=
"STRN">'option'
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
410 <span class='line'
>403</span> </span><span class=
"WHIT"> </span><span class=
"NAME">elem.value
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
411 <span class='line'
>404</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">i
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"NAME">config.paletteDefault
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
412 <span class='line'
>405</span> </span><span class=
"WHIT"> </span><span class=
"NAME">elem.selected
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">true
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
413 <span class='line'
>406</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
414 <span class='line'
>407</span>
415 <span class='line'
>408</span> </span><span class=
"WHIT"> </span><span class=
"NAME">elem.appendChild
</span><span class=
"PUNC">(
</span><span class=
"WHIT"> </span><span class=
"NAME">doc.createTextNode
</span><span class=
"PUNC">(
</span><span class=
"NAME">lang.colorPalettes
</span><span class=
"PUNC">[
</span><span class=
"NAME">i
</span><span class=
"PUNC">]
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
416 <span class='line'
>409</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.elems.cpaletteInput.appendChild
</span><span class=
"PUNC">(
</span><span class=
"NAME">elem
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
417 <span class='line'
>410</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
418 <span class='line'
>411</span>
419 <span class='line'
>412</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// This is the ordered list where we add each color (list item).
</span><span class=
"WHIT">
420 <span class='line'
>413</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.elems.cpaletteOutput
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">gui.elems.colormixer_cpaletteOutput
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
421 <span class='line'
>414</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.elems.cpaletteOutput.addEventListener
</span><span class=
"PUNC">(
</span><span class=
"STRN">'click'
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.ev_click_color
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
422 <span class='line'
>415</span> </span><span class=
"KEYW">false
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
423 <span class='line'
>416</span>
424 <span class='line'
>417</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.cpalette_load
</span><span class=
"PUNC">(
</span><span class=
"NAME">config.paletteDefault
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
425 <span class='line'
>418</span>
426 <span class='line'
>419</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// Make sure the Canvas element scale is in sync with the application.
</span><span class=
"WHIT">
427 <span class='line'
>420</span> </span><span class=
"WHIT"> </span><span class=
"NAME">app.events.add
</span><span class=
"PUNC">(
</span><span class=
"STRN">'canvasSizeChange'
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.update_dimensions
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
428 <span class='line'
>421</span>
429 <span class='line'
>422</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.panelSelector.events.add
</span><span class=
"PUNC">(
</span><span class=
"STRN">'guiTabActivate'
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.ev_tabActivate
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
430 <span class='line'
>423</span>
431 <span class='line'
>424</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// Make sure the Color Mixer is properly closed when the floating panel is
</span><span class=
"WHIT">
432 <span class='line'
>425</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// closed.
</span><span class=
"WHIT">
433 <span class='line'
>426</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.panel.events.add
</span><span class=
"PUNC">(
</span><span class=
"STRN">'guiFloatingPanelStateChange'
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
434 <span class='line'
>427</span> </span><span class=
"NAME">_self.ev_panel_stateChange
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
435 <span class='line'
>428</span>
436 <span class='line'
>429</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">return
</span><span class=
"WHIT"> </span><span class=
"KEYW">true
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
437 <span class='line'
>430</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
438 <span class='line'
>431</span>
439 <span class='line'
>432</span> </span><span class=
"WHIT"> </span><span class=
"COMM">/**
440 <span class='line'
>433</span> * This function calculates lots of values used by the other CIE Lab-related
441 <span class='line'
>434</span> * functions.
442 <span class='line'
>435</span> *
443 <span class='line'
>436</span> * @private
444 <span class='line'
>437</span> * @returns {Boolean} True if the initialization was successful, or false if
445 <span class='line'
>438</span> * not.
446 <span class='line'
>439</span> */
</span><span class=
"WHIT">
447 <span class='line'
>440</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.init_lab
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">function
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
448 <span class='line'
>441</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">cfg
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">config.lab
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
449 <span class='line'
>442</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"PUNC">!
</span><span class=
"NAME">cfg
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
450 <span class='line'
>443</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">return
</span><span class=
"WHIT"> </span><span class=
"KEYW">false
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
451 <span class='line'
>444</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
452 <span class='line'
>445</span>
453 <span class='line'
>446</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// Chromaticity coordinates for the RGB primaries.
</span><span class=
"WHIT">
454 <span class='line'
>447</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">x0_r
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">cfg.x_r
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
455 <span class='line'
>448</span> </span><span class=
"WHIT"> </span><span class=
"NAME">y0_r
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">cfg.y_r
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
456 <span class='line'
>449</span> </span><span class=
"WHIT"> </span><span class=
"NAME">x0_g
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">cfg.x_g
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
457 <span class='line'
>450</span> </span><span class=
"WHIT"> </span><span class=
"NAME">y0_g
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">cfg.y_g
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
458 <span class='line'
>451</span> </span><span class=
"WHIT"> </span><span class=
"NAME">x0_b
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">cfg.x_b
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
459 <span class='line'
>452</span> </span><span class=
"WHIT"> </span><span class=
"NAME">y0_b
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">cfg.y_b
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
460 <span class='line'
>453</span>
461 <span class='line'
>454</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// The reference white point (xyY to XYZ).
</span><span class=
"WHIT">
462 <span class='line'
>455</span> </span><span class=
"WHIT"> </span><span class=
"NAME">w_x
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">cfg.ref_x
</span><span class=
"WHIT"> </span><span class=
"PUNC">/
</span><span class=
"WHIT"> </span><span class=
"NAME">cfg.ref_y
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
463 <span class='line'
>456</span> </span><span class=
"WHIT"> </span><span class=
"NAME">w_y
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"PUNC">,
</span><span class=
"WHIT">
464 <span class='line'
>457</span> </span><span class=
"WHIT"> </span><span class=
"NAME">w_z
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NUMB">1</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NAME">cfg.ref_x
</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NAME">cfg.ref_y
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">/
</span><span class=
"WHIT"> </span><span class=
"NAME">cfg.ref_y
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
465 <span class='line'
>458</span>
466 <span class='line'
>459</span> </span><span class=
"WHIT"> </span><span class=
"NAME">cfg.w_x
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">w_x
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
467 <span class='line'
>460</span> </span><span class=
"WHIT"> </span><span class=
"NAME">cfg.w_y
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">w_y
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
468 <span class='line'
>461</span> </span><span class=
"WHIT"> </span><span class=
"NAME">cfg.w_z
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">w_z
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
469 <span class='line'
>462</span>
470 <span class='line'
>463</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// Again, xyY to XYZ for each RGB primary. Y=
1.
</span><span class=
"WHIT">
471 <span class='line'
>464</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">x_r
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">x0_r
</span><span class=
"WHIT"> </span><span class=
"PUNC">/
</span><span class=
"WHIT"> </span><span class=
"NAME">y0_r
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
472 <span class='line'
>465</span> </span><span class=
"WHIT"> </span><span class=
"NAME">y_r
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"PUNC">,
</span><span class=
"WHIT">
473 <span class='line'
>466</span> </span><span class=
"WHIT"> </span><span class=
"NAME">z_r
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NUMB">1</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NAME">x0_r
</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NAME">y0_r
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">/
</span><span class=
"WHIT"> </span><span class=
"NAME">y0_r
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
474 <span class='line'
>467</span> </span><span class=
"WHIT"> </span><span class=
"NAME">x_g
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">x0_g
</span><span class=
"WHIT"> </span><span class=
"PUNC">/
</span><span class=
"WHIT"> </span><span class=
"NAME">y0_g
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
475 <span class='line'
>468</span> </span><span class=
"WHIT"> </span><span class=
"NAME">y_g
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"PUNC">,
</span><span class=
"WHIT">
476 <span class='line'
>469</span> </span><span class=
"WHIT"> </span><span class=
"NAME">z_g
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NUMB">1</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NAME">x0_g
</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NAME">y0_g
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">/
</span><span class=
"WHIT"> </span><span class=
"NAME">y0_g
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
477 <span class='line'
>470</span> </span><span class=
"WHIT"> </span><span class=
"NAME">x_b
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">x0_b
</span><span class=
"WHIT"> </span><span class=
"PUNC">/
</span><span class=
"WHIT"> </span><span class=
"NAME">y0_b
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
478 <span class='line'
>471</span> </span><span class=
"WHIT"> </span><span class=
"NAME">y_b
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"PUNC">,
</span><span class=
"WHIT">
479 <span class='line'
>472</span> </span><span class=
"WHIT"> </span><span class=
"NAME">z_b
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NUMB">1</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NAME">x0_b
</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NAME">y0_b
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">/
</span><span class=
"WHIT"> </span><span class=
"NAME">y0_b
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
480 <span class='line'
>473</span> </span><span class=
"WHIT"> </span><span class=
"NAME">m
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"PUNC">[
</span><span class=
"NAME">x_r
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">y_r
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">z_r
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
481 <span class='line'
>474</span> </span><span class=
"WHIT"> </span><span class=
"NAME">x_g
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">y_g
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">z_g
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
482 <span class='line'
>475</span> </span><span class=
"WHIT"> </span><span class=
"NAME">x_b
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">y_b
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">z_b
</span><span class=
"PUNC">]
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
483 <span class='line'
>476</span> </span><span class=
"WHIT"> </span><span class=
"NAME">m_i
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.calc_m3inv
</span><span class=
"PUNC">(
</span><span class=
"NAME">m
</span><span class=
"PUNC">)
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
484 <span class='line'
>477</span> </span><span class=
"WHIT"> </span><span class=
"NAME">s
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.calc_m1x3
</span><span class=
"PUNC">(
</span><span class=
"PUNC">[
</span><span class=
"NAME">w_x
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">w_y
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">w_z
</span><span class=
"PUNC">]
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">m_i
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
485 <span class='line'
>478</span>
486 <span class='line'
>479</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// The
3x3 matrix used by rgb2xyz().
</span><span class=
"WHIT">
487 <span class='line'
>480</span> </span><span class=
"WHIT"> </span><span class=
"NAME">m
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"PUNC">[
</span><span class=
"NAME">s
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">s
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">s
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">2</span><span class=
"PUNC">]
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
488 <span class='line'
>481</span> </span><span class=
"WHIT"> </span><span class=
"NAME">s
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">3</span><span class=
"PUNC">]
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">s
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">4</span><span class=
"PUNC">]
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">s
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">5</span><span class=
"PUNC">]
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
489 <span class='line'
>482</span> </span><span class=
"WHIT"> </span><span class=
"NAME">s
</span><span class=
"PUNC">[
</span><span class=
"NUMB">2</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">6</span><span class=
"PUNC">]
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">s
</span><span class=
"PUNC">[
</span><span class=
"NUMB">2</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">7</span><span class=
"PUNC">]
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">s
</span><span class=
"PUNC">[
</span><span class=
"NUMB">2</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">8</span><span class=
"PUNC">]
</span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
490 <span class='line'
>483</span>
491 <span class='line'
>484</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// The matrix inverse, used by xyz2rgb();
</span><span class=
"WHIT">
492 <span class='line'
>485</span> </span><span class=
"WHIT"> </span><span class=
"NAME">cfg.m_i
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.calc_m3inv
</span><span class=
"PUNC">(
</span><span class=
"NAME">m
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
493 <span class='line'
>486</span> </span><span class=
"WHIT"> </span><span class=
"NAME">cfg.m
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">m
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
494 <span class='line'
>487</span>
495 <span class='line'
>488</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// Now determine the min/max values for a and b.
</span><span class=
"WHIT">
496 <span class='line'
>489</span>
497 <span class='line'
>490</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">xyz
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.rgb2xyz
</span><span class=
"PUNC">(
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"PUNC">)
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"COMM">// green gives the minimum value for a
</span><span class=
"WHIT">
498 <span class='line'
>491</span> </span><span class=
"WHIT"> </span><span class=
"NAME">lab
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.xyz2lab
</span><span class=
"PUNC">(
</span><span class=
"NAME">xyz
</span><span class=
"PUNC">)
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
499 <span class='line'
>492</span> </span><span class=
"WHIT"> </span><span class=
"NAME">values
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">config.inputValues
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
500 <span class='line'
>493</span> </span><span class=
"WHIT"> </span><span class=
"NAME">values.cie_a
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">lab
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
501 <span class='line'
>494</span>
502 <span class='line'
>495</span> </span><span class=
"WHIT"> </span><span class=
"NAME">xyz
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.rgb2xyz
</span><span class=
"PUNC">(
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT"> </span><span class=
"COMM">// magenta gives the maximum value for a
</span><span class=
"WHIT">
503 <span class='line'
>496</span> </span><span class=
"WHIT"> </span><span class=
"NAME">lab
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.xyz2lab
</span><span class=
"PUNC">(
</span><span class=
"NAME">xyz
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
504 <span class='line'
>497</span> </span><span class=
"WHIT"> </span><span class=
"NAME">values.cie_a
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">lab
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
505 <span class='line'
>498</span>
506 <span class='line'
>499</span> </span><span class=
"WHIT"> </span><span class=
"NAME">xyz
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.rgb2xyz
</span><span class=
"PUNC">(
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT"> </span><span class=
"COMM">// blue gives the minimum value for b
</span><span class=
"WHIT">
507 <span class='line'
>500</span> </span><span class=
"WHIT"> </span><span class=
"NAME">lab
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.xyz2lab
</span><span class=
"PUNC">(
</span><span class=
"NAME">xyz
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
508 <span class='line'
>501</span> </span><span class=
"WHIT"> </span><span class=
"NAME">values.cie_b
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">lab
</span><span class=
"PUNC">[
</span><span class=
"NUMB">2</span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
509 <span class='line'
>502</span>
510 <span class='line'
>503</span> </span><span class=
"WHIT"> </span><span class=
"NAME">xyz
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.rgb2xyz
</span><span class=
"PUNC">(
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT"> </span><span class=
"COMM">// yellow gives the maximum value for b
</span><span class=
"WHIT">
511 <span class='line'
>504</span> </span><span class=
"WHIT"> </span><span class=
"NAME">lab
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.xyz2lab
</span><span class=
"PUNC">(
</span><span class=
"NAME">xyz
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
512 <span class='line'
>505</span> </span><span class=
"WHIT"> </span><span class=
"NAME">values.cie_b
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">lab
</span><span class=
"PUNC">[
</span><span class=
"NUMB">2</span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
513 <span class='line'
>506</span>
514 <span class='line'
>507</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">return
</span><span class=
"WHIT"> </span><span class=
"KEYW">true
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
515 <span class='line'
>508</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
516 <span class='line'
>509</span>
517 <span class='line'
>510</span> </span><span class=
"WHIT"> </span><span class=
"COMM">/**
518 <span class='line'
>511</span> * The
<code
>guiTabActivate
</code
> event handler for the tab panel which holds
519 <span class='line'
>512</span> * the color mixer and the color palettes. When switching back to the color
520 <span class='line'
>513</span> * mixer, this method updates the Canvas.
521 <span class='line'
>514</span> *
522 <span class='line'
>515</span> * @private
523 <span class='line'
>516</span> * @param {pwlib.appEvent.guiTabActivate} ev The application event object.
524 <span class='line'
>517</span> */
</span><span class=
"WHIT">
525 <span class='line'
>518</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.ev_tabActivate
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">function
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">ev
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
526 <span class='line'
>519</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">ev.tabId
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"STRN">'mixer'
</span><span class=
"WHIT"> </span><span class=
"PUNC">&&
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.update_canvas_needed
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
527 <span class='line'
>520</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.update_canvas
</span><span class=
"PUNC">(
</span><span class=
"KEYW">null
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"KEYW">true
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
528 <span class='line'
>521</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
529 <span class='line'
>522</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
530 <span class='line'
>523</span>
531 <span class='line'
>524</span> </span><span class=
"WHIT"> </span><span class=
"COMM">/**
532 <span class='line'
>525</span> * The
<code
>click
</code
> event handler for the Accept button. This method
533 <span class='line'
>526</span> * dispatches the {@link pwlib.appEvent.configChange} application event for
534 <span class='line'
>527</span> * the configuration property associated to the target input, and hides the
535 <span class='line'
>528</span> * Color Mixer floating panel.
536 <span class='line'
>529</span> *
537 <span class='line'
>530</span> * @private
538 <span class='line'
>531</span> * @param {Event} ev The DOM Event object.
539 <span class='line'
>532</span> */
</span><span class=
"WHIT">
540 <span class='line'
>533</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.ev_click_accept
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">function
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">ev
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
541 <span class='line'
>534</span> </span><span class=
"WHIT"> </span><span class=
"NAME">ev.preventDefault
</span><span class=
"PUNC">(
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
542 <span class='line'
>535</span>
543 <span class='line'
>536</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">configProperty
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.targetInput.configProperty
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
544 <span class='line'
>537</span> </span><span class=
"WHIT"> </span><span class=
"NAME">configGroup
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.targetInput.configGroup
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
545 <span class='line'
>538</span> </span><span class=
"WHIT"> </span><span class=
"NAME">configGroupRef
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.targetInput.configGroupRef
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
546 <span class='line'
>539</span> </span><span class=
"WHIT"> </span><span class=
"NAME">prevVal
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">configGroupRef
</span><span class=
"PUNC">[
</span><span class=
"NAME">configProperty
</span><span class=
"PUNC">]
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
547 <span class='line'
>540</span> </span><span class=
"WHIT"> </span><span class=
"NAME">newVal
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"STRN">'rgba('
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">MathRound
</span><span class=
"PUNC">(
</span><span class=
"NAME">_self.color.red
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NUMB">255</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">','
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT">
548 <span class='line'
>541</span> </span><span class=
"WHIT"> </span><span class=
"NAME">MathRound
</span><span class=
"PUNC">(
</span><span class=
"NAME">_self.color.green
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NUMB">255</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">','
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT">
549 <span class='line'
>542</span> </span><span class=
"WHIT"> </span><span class=
"NAME">MathRound
</span><span class=
"PUNC">(
</span><span class=
"NAME">_self.color.blue
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NUMB">255</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">','
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT">
550 <span class='line'
>543</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.color.alpha
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">')'
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
551 <span class='line'
>544</span>
552 <span class='line'
>545</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.hide
</span><span class=
"PUNC">(
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
553 <span class='line'
>546</span>
554 <span class='line'
>547</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">prevVal
</span><span class=
"WHIT"> </span><span class=
"PUNC">!==
</span><span class=
"WHIT"> </span><span class=
"NAME">newVal
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
555 <span class='line'
>548</span> </span><span class=
"WHIT"> </span><span class=
"NAME">configGroupRef
</span><span class=
"PUNC">[
</span><span class=
"NAME">configProperty
</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">newVal
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
556 <span class='line'
>549</span> </span><span class=
"WHIT"> </span><span class=
"NAME">app.events.dispatch
</span><span class=
"PUNC">(
</span><span class=
"KEYW">new
</span><span class=
"WHIT"> </span><span class=
"NAME">pwlib.appEvent.configChange
</span><span class=
"PUNC">(
</span><span class=
"NAME">newVal
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">prevVal
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
557 <span class='line'
>550</span> </span><span class=
"NAME">configProperty
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">configGroup
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">configGroupRef
</span><span class=
"PUNC">)
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
558 <span class='line'
>551</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
559 <span class='line'
>552</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
560 <span class='line'
>553</span>
561 <span class='line'
>554</span> </span><span class=
"WHIT"> </span><span class=
"COMM">/**
562 <span class='line'
>555</span> * The
<code
>click
</code
> event handler for the Cancel button. This method
563 <span class='line'
>556</span> * hides the Color Mixer floating panel.
564 <span class='line'
>557</span> *
565 <span class='line'
>558</span> * @private
566 <span class='line'
>559</span> * @param {Event} ev The DOM Event object.
567 <span class='line'
>560</span> */
</span><span class=
"WHIT">
568 <span class='line'
>561</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.ev_click_cancel
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">function
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">ev
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
569 <span class='line'
>562</span> </span><span class=
"WHIT"> </span><span class=
"NAME">ev.preventDefault
</span><span class=
"PUNC">(
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
570 <span class='line'
>563</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.hide
</span><span class=
"PUNC">(
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
571 <span class='line'
>564</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
572 <span class='line'
>565</span>
573 <span class='line'
>566</span> </span><span class=
"WHIT"> </span><span class=
"COMM">/**
574 <span class='line'
>567</span> * The
<code
>click
</code
> event handler for the
"Save color" button. This
575 <span class='line'
>568</span> * method adds the current color into the
"_saved" color palette.
576 <span class='line'
>569</span> *
577 <span class='line'
>570</span> * @private
578 <span class='line'
>571</span> * @param {Event} ev The DOM Event object.
579 <span class='line'
>572</span> */
</span><span class=
"WHIT">
580 <span class='line'
>573</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// TODO: provide a way to save the color palette permanently. This should use
</span><span class=
"WHIT">
581 <span class='line'
>574</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// some application event.
</span><span class=
"WHIT">
582 <span class='line'
>575</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.ev_click_saveColor
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">function
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">ev
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
583 <span class='line'
>576</span> </span><span class=
"WHIT"> </span><span class=
"NAME">ev.preventDefault
</span><span class=
"PUNC">(
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
584 <span class='line'
>577</span>
585 <span class='line'
>578</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"PUNC">[
</span><span class=
"NAME">_self.color.red
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.color.green
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.color.blue
</span><span class=
"PUNC">]
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
586 <span class='line'
>579</span> </span><span class=
"WHIT"> </span><span class=
"NAME">saved
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">config.colorPalettes._saved
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
587 <span class='line'
>580</span>
588 <span class='line'
>581</span> </span><span class=
"WHIT"> </span><span class=
"NAME">saved.colors.push
</span><span class=
"PUNC">(
</span><span class=
"NAME">color
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
589 <span class='line'
>582</span>
590 <span class='line'
>583</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.elems.cpaletteInput.value
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"STRN">'_saved'
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
591 <span class='line'
>584</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.cpalette_load
</span><span class=
"PUNC">(
</span><span class=
"STRN">'_saved'
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
592 <span class='line'
>585</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.panelSelector.tabActivate
</span><span class=
"PUNC">(
</span><span class=
"STRN">'cpalettes'
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
593 <span class='line'
>586</span>
594 <span class='line'
>587</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">return
</span><span class=
"WHIT"> </span><span class=
"KEYW">true
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
595 <span class='line'
>588</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
596 <span class='line'
>589</span>
597 <span class='line'
>590</span> </span><span class=
"WHIT"> </span><span class=
"COMM">/**
598 <span class='line'
>591</span> * The
<code
>click
</code
> event handler for the
"Pick color" button. This
599 <span class='line'
>592</span> * method activates the color picker tool.
600 <span class='line'
>593</span> *
601 <span class='line'
>594</span> * @private
602 <span class='line'
>595</span> * @param {Event} ev The DOM Event object.
603 <span class='line'
>596</span> */
</span><span class=
"WHIT">
604 <span class='line'
>597</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.ev_click_pickColor
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">function
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">ev
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
605 <span class='line'
>598</span> </span><span class=
"WHIT"> </span><span class=
"NAME">ev.preventDefault
</span><span class=
"PUNC">(
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
606 <span class='line'
>599</span> </span><span class=
"WHIT"> </span><span class=
"NAME">app.toolActivate
</span><span class=
"PUNC">(
</span><span class=
"STRN">'cpicker'
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">ev
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
607 <span class='line'
>600</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
608 <span class='line'
>601</span>
609 <span class='line'
>602</span> </span><span class=
"WHIT"> </span><span class=
"COMM">/**
610 <span class='line'
>603</span> * The
<code
>change
</code
> event handler for the color palette input element.
611 <span class='line'
>604</span> * This loads the color palette the user selected.
612 <span class='line'
>605</span> *
613 <span class='line'
>606</span> * @private
614 <span class='line'
>607</span> * @param {Event} ev The DOM Event object.
615 <span class='line'
>608</span> */
</span><span class=
"WHIT">
616 <span class='line'
>609</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.ev_change_cpalette
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">function
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">ev
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
617 <span class='line'
>610</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.cpalette_load
</span><span class=
"PUNC">(
</span><span class=
"NAME">this.value
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
618 <span class='line'
>611</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
619 <span class='line'
>612</span>
620 <span class='line'
>613</span> </span><span class=
"WHIT"> </span><span class=
"COMM">/**
621 <span class='line'
>614</span> * Load a color palette. Loading is performed asynchronously.
622 <span class='line'
>615</span> *
623 <span class='line'
>616</span> * @param {String} id The color palette ID.
624 <span class='line'
>617</span> *
625 <span class='line'
>618</span> * @returns {Boolean} True if the load was successful, or false if not.
626 <span class='line'
>619</span> */
</span><span class=
"WHIT">
627 <span class='line'
>620</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.cpalette_load
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">function
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">id
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
628 <span class='line'
>621</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"PUNC">!
</span><span class=
"NAME">id
</span><span class=
"WHIT"> </span><span class=
"PUNC">||
</span><span class=
"WHIT"> </span><span class=
"PUNC">!
</span><span class=
"PUNC">(
</span><span class=
"NAME">id
</span><span class=
"WHIT"> </span><span class=
"KEYW">in
</span><span class=
"WHIT"> </span><span class=
"NAME">config.colorPalettes
</span><span class=
"PUNC">)
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
629 <span class='line'
>622</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">return
</span><span class=
"WHIT"> </span><span class=
"KEYW">false
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
630 <span class='line'
>623</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
631 <span class='line'
>624</span>
632 <span class='line'
>625</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">palette
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">config.colorPalettes
</span><span class=
"PUNC">[
</span><span class=
"NAME">id
</span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
633 <span class='line'
>626</span>
634 <span class='line'
>627</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">palette.file
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
635 <span class='line'
>628</span> </span><span class=
"WHIT"> </span><span class=
"NAME">pwlib.xhrLoad
</span><span class=
"PUNC">(
</span><span class=
"NAME">PaintWeb.baseFolder
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">palette.file
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">this.cpalette_loaded
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
636 <span class='line'
>629</span>
637 <span class='line'
>630</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">return
</span><span class=
"WHIT"> </span><span class=
"KEYW">true
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
638 <span class='line'
>631</span>
639 <span class='line'
>632</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">palette.colors
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
640 <span class='line'
>633</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">return
</span><span class=
"WHIT"> </span><span class=
"NAME">this.cpalette_show
</span><span class=
"PUNC">(
</span><span class=
"NAME">palette.colors
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
641 <span class='line'
>634</span>
642 <span class='line'
>635</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
643 <span class='line'
>636</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">return
</span><span class=
"WHIT"> </span><span class=
"KEYW">false
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
644 <span class='line'
>637</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
645 <span class='line'
>638</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
646 <span class='line'
>639</span>
647 <span class='line'
>640</span> </span><span class=
"WHIT"> </span><span class=
"COMM">/**
648 <span class='line'
>641</span> * The
<code
>onreadystatechange
</code
> event handler for the color palette
649 <span class='line'
>642</span> * XMLHttpRequest object.
650 <span class='line'
>643</span> *
651 <span class='line'
>644</span> * @private
652 <span class='line'
>645</span> * @param {XMLHttpRequest} xhr The XMLHttpRequest object.
653 <span class='line'
>646</span> */
</span><span class=
"WHIT">
654 <span class='line'
>647</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.cpalette_loaded
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">function
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">xhr
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
655 <span class='line'
>648</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"PUNC">!
</span><span class=
"NAME">xhr
</span><span class=
"WHIT"> </span><span class=
"PUNC">||
</span><span class=
"WHIT"> </span><span class=
"NAME">xhr.readyState
</span><span class=
"WHIT"> </span><span class=
"PUNC">!==
</span><span class=
"WHIT"> </span><span class=
"NUMB">4</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
656 <span class='line'
>649</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">return
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
657 <span class='line'
>650</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
658 <span class='line'
>651</span>
659 <span class='line'
>652</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"PUNC">(
</span><span class=
"NAME">xhr.status
</span><span class=
"WHIT"> </span><span class=
"PUNC">!==
</span><span class=
"WHIT"> </span><span class=
"NUMB">304</span><span class=
"WHIT"> </span><span class=
"PUNC">&&
</span><span class=
"WHIT"> </span><span class=
"NAME">xhr.status
</span><span class=
"WHIT"> </span><span class=
"PUNC">!==
</span><span class=
"WHIT"> </span><span class=
"NUMB">200</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">||
</span><span class=
"WHIT"> </span><span class=
"PUNC">!
</span><span class=
"NAME">xhr.responseText
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
660 <span class='line'
>653</span> </span><span class=
"WHIT"> </span><span class=
"NAME">alert
</span><span class=
"PUNC">(
</span><span class=
"NAME">lang.failedColorPaletteLoad
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
661 <span class='line'
>654</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">return
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
662 <span class='line'
>655</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
663 <span class='line'
>656</span>
664 <span class='line'
>657</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">colors
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">JSON.parse
</span><span class=
"PUNC">(
</span><span class=
"NAME">xhr.responseText
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
665 <span class='line'
>658</span> </span><span class=
"WHIT"> </span><span class=
"NAME">xhr
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">null
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
666 <span class='line'
>659</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.cpalette_show
</span><span class=
"PUNC">(
</span><span class=
"NAME">colors
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
667 <span class='line'
>660</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
668 <span class='line'
>661</span>
669 <span class='line'
>662</span> </span><span class=
"WHIT"> </span><span class=
"COMM">/**
670 <span class='line'
>663</span> * Show a color palette. This method adds all the colors in the DOM as
671 <span class='line'
>664</span> * individual anchor elements which users can click on.
672 <span class='line'
>665</span> *
673 <span class='line'
>666</span> * @private
674 <span class='line'
>667</span> *
675 <span class='line'
>668</span> * @param {Array} colors The array which holds each color in the palette.
676 <span class='line'
>669</span> *
677 <span class='line'
>670</span> * @returns {Boolean} True if the operation was successful, or false if not.
678 <span class='line'
>671</span> */
</span><span class=
"WHIT">
679 <span class='line'
>672</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.cpalette_show
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">function
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">colors
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
680 <span class='line'
>673</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"PUNC">!
</span><span class=
"NAME">colors
</span><span class=
"WHIT"> </span><span class=
"PUNC">||
</span><span class=
"WHIT"> </span><span class=
"PUNC">!
</span><span class=
"PUNC">(
</span><span class=
"NAME">colors
</span><span class=
"WHIT"> </span><span class=
"KEYW">instanceof
</span><span class=
"WHIT"> </span><span class=
"NAME">Array
</span><span class=
"PUNC">)
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
681 <span class='line'
>674</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">return
</span><span class=
"WHIT"> </span><span class=
"KEYW">false
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
682 <span class='line'
>675</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
683 <span class='line'
>676</span>
684 <span class='line'
>677</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">anchor
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">rgbValue
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
685 <span class='line'
>678</span> </span><span class=
"WHIT"> </span><span class=
"NAME">frag
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">doc.createDocumentFragment
</span><span class=
"PUNC">(
</span><span class=
"PUNC">)
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
686 <span class='line'
>679</span> </span><span class=
"WHIT"> </span><span class=
"NAME">dest
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">this.elems.cpaletteOutput
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
687 <span class='line'
>680</span>
688 <span class='line'
>681</span> </span><span class=
"WHIT"> </span><span class=
"NAME">dest.style.display
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"STRN">'none'
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
689 <span class='line'
>682</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">while
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">dest.hasChildNodes
</span><span class=
"PUNC">(
</span><span class=
"PUNC">)
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
690 <span class='line'
>683</span> </span><span class=
"WHIT"> </span><span class=
"NAME">dest.removeChild
</span><span class=
"PUNC">(
</span><span class=
"NAME">dest.firstChild
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
691 <span class='line'
>684</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
692 <span class='line'
>685</span>
693 <span class='line'
>686</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">for
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">n
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">colors.length
</span><span class=
"PUNC">;
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"WHIT"> </span><span class=
"PUNC"><</span><span class=
"WHIT"> </span><span class=
"NAME">n
</span><span class=
"PUNC">;
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"PUNC">++
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
694 <span class='line'
>687</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">colors
</span><span class=
"PUNC">[
</span><span class=
"NAME">i
</span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
695 <span class='line'
>688</span>
696 <span class='line'
>689</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// Do not allow values higher than
1.
</span><span class=
"WHIT">
697 <span class='line'
>690</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">MathMin
</span><span class=
"PUNC">(
</span><span class=
"NUMB">1</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
698 <span class='line'
>691</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">MathMin
</span><span class=
"PUNC">(
</span><span class=
"NUMB">1</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
699 <span class='line'
>692</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"PUNC">[
</span><span class=
"NUMB">2</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">MathMin
</span><span class=
"PUNC">(
</span><span class=
"NUMB">1</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"PUNC">[
</span><span class=
"NUMB">2</span><span class=
"PUNC">]
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
700 <span class='line'
>693</span>
701 <span class='line'
>694</span> </span><span class=
"WHIT"> </span><span class=
"NAME">rgbValue
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"STRN">'rgb('
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">MathRound
</span><span class=
"PUNC">(
</span><span class=
"NAME">color
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NUMB">255</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">','
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT">
702 <span class='line'
>695</span> </span><span class=
"WHIT"> </span><span class=
"NAME">MathRound
</span><span class=
"PUNC">(
</span><span class=
"NAME">color
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NUMB">255</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">','
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT">
703 <span class='line'
>696</span> </span><span class=
"WHIT"> </span><span class=
"NAME">MathRound
</span><span class=
"PUNC">(
</span><span class=
"NAME">color
</span><span class=
"PUNC">[
</span><span class=
"NUMB">2</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NUMB">255</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">')'
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
704 <span class='line'
>697</span>
705 <span class='line'
>698</span> </span><span class=
"WHIT"> </span><span class=
"NAME">anchor
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">doc.createElement
</span><span class=
"PUNC">(
</span><span class=
"STRN">'a'
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
706 <span class='line'
>699</span> </span><span class=
"WHIT"> </span><span class=
"NAME">anchor.href
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"STRN">'#'
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
707 <span class='line'
>700</span> </span><span class=
"WHIT"> </span><span class=
"NAME">anchor._color
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
708 <span class='line'
>701</span> </span><span class=
"WHIT"> </span><span class=
"NAME">anchor.style.backgroundColor
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">rgbValue
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
709 <span class='line'
>702</span> </span><span class=
"WHIT"> </span><span class=
"NAME">anchor.appendChild
</span><span class=
"PUNC">(
</span><span class=
"NAME">doc.createTextNode
</span><span class=
"PUNC">(
</span><span class=
"NAME">rgbValue
</span><span class=
"PUNC">)
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
710 <span class='line'
>703</span>
711 <span class='line'
>704</span> </span><span class=
"WHIT"> </span><span class=
"NAME">frag.appendChild
</span><span class=
"PUNC">(
</span><span class=
"NAME">anchor
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
712 <span class='line'
>705</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
713 <span class='line'
>706</span>
714 <span class='line'
>707</span> </span><span class=
"WHIT"> </span><span class=
"NAME">dest.appendChild
</span><span class=
"PUNC">(
</span><span class=
"NAME">frag
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
715 <span class='line'
>708</span> </span><span class=
"WHIT"> </span><span class=
"NAME">dest.style.display
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"STRN">'block'
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
716 <span class='line'
>709</span>
717 <span class='line'
>710</span> </span><span class=
"WHIT"> </span><span class=
"NAME">colors
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">frag
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">null
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
718 <span class='line'
>711</span>
719 <span class='line'
>712</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">return
</span><span class=
"WHIT"> </span><span class=
"KEYW">true
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
720 <span class='line'
>713</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
721 <span class='line'
>714</span>
722 <span class='line'
>715</span> </span><span class=
"WHIT"> </span><span class=
"COMM">/**
723 <span class='line'
>716</span> * The
<code
>click
</code
> event handler for colors in the color palette list.
724 <span class='line'
>717</span> * This event handler is also used for the
"old color" element. This method
725 <span class='line'
>718</span> * updates the color mixer to use the color the user picked.
726 <span class='line'
>719</span> *
727 <span class='line'
>720</span> * @private
728 <span class='line'
>721</span> * @param {Event} ev The DOM Event object.
729 <span class='line'
>722</span> */
</span><span class=
"WHIT">
730 <span class='line'
>723</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.ev_click_color
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">function
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">ev
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
731 <span class='line'
>724</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">ev.target._color
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
732 <span class='line'
>725</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"PUNC">!
</span><span class=
"NAME">color
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
733 <span class='line'
>726</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">return
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
734 <span class='line'
>727</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
735 <span class='line'
>728</span>
736 <span class='line'
>729</span> </span><span class=
"WHIT"> </span><span class=
"NAME">ev.preventDefault
</span><span class=
"PUNC">(
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
737 <span class='line'
>730</span>
738 <span class='line'
>731</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.color.red
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
739 <span class='line'
>732</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.color.green
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
740 <span class='line'
>733</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.color.blue
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"PUNC">[
</span><span class=
"NUMB">2</span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
741 <span class='line'
>734</span>
742 <span class='line'
>735</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"KEYW">typeof
</span><span class=
"PUNC">(
</span><span class=
"NAME">color
</span><span class=
"PUNC">[
</span><span class=
"NUMB">3</span><span class=
"PUNC">]
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">!==
</span><span class=
"WHIT"> </span><span class=
"STRN">'undefined'
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
743 <span class='line'
>736</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.color.alpha
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"PUNC">[
</span><span class=
"NUMB">3</span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
744 <span class='line'
>737</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
745 <span class='line'
>738</span>
746 <span class='line'
>739</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.update_color
</span><span class=
"PUNC">(
</span><span class=
"STRN">'rgb'
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
747 <span class='line'
>740</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
748 <span class='line'
>741</span>
749 <span class='line'
>742</span> </span><span class=
"WHIT"> </span><span class=
"COMM">/**
750 <span class='line'
>743</span> * Recalculate the dimensions and coordinates for the slider and for the color
751 <span class='line'
>744</span> * space visualisation within the Canvas element.
752 <span class='line'
>745</span> *
753 <span class='line'
>746</span> *
<p
>This method is an event handler for the {@link
754 <span class='line'
>747</span> * pwlib.appEvent.canvasSizeChange} application event.
755 <span class='line'
>748</span> *
756 <span class='line'
>749</span> * @private
757 <span class='line'
>750</span> */
</span><span class=
"WHIT">
758 <span class='line'
>751</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.update_dimensions
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">function
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
759 <span class='line'
>752</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">resScale
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"NAME">app.resolution.scale
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
760 <span class='line'
>753</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">return
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
761 <span class='line'
>754</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
762 <span class='line'
>755</span>
763 <span class='line'
>756</span> </span><span class=
"WHIT"> </span><span class=
"NAME">resScale
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">app.resolution.scale
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
764 <span class='line'
>757</span>
765 <span class='line'
>758</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">canvas
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.context2d.canvas
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
766 <span class='line'
>759</span> </span><span class=
"WHIT"> </span><span class=
"NAME">width
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">canvas.width
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
767 <span class='line'
>760</span> </span><span class=
"WHIT"> </span><span class=
"NAME">height
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">canvas.height
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
768 <span class='line'
>761</span> </span><span class=
"WHIT"> </span><span class=
"NAME">sWidth
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">width
</span><span class=
"WHIT"> </span><span class=
"PUNC">/
</span><span class=
"WHIT"> </span><span class=
"NAME">resScale
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
769 <span class='line'
>762</span> </span><span class=
"WHIT"> </span><span class=
"NAME">sHeight
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">height
</span><span class=
"WHIT"> </span><span class=
"PUNC">/
</span><span class=
"WHIT"> </span><span class=
"NAME">resScale
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
770 <span class='line'
>763</span> </span><span class=
"WHIT"> </span><span class=
"NAME">style
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
771 <span class='line'
>764</span>
772 <span class='line'
>765</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.sliderWidth
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">MathRound
</span><span class=
"PUNC">(
</span><span class=
"NAME">width
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NAME">config.sliderWidth
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
773 <span class='line'
>766</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.sliderHeight
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">height
</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"PUNC">;
</span><span class=
"WHIT">
774 <span class='line'
>767</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.sliderSpacing
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">MathRound
</span><span class=
"PUNC">(
</span><span class=
"NAME">width
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NAME">config.sliderSpacing
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
775 <span class='line'
>768</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.sliderX
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">width
</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.sliderWidth
</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NUMB">2</span><span class=
"PUNC">;
</span><span class=
"WHIT">
776 <span class='line'
>769</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.chartWidth
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.sliderX
</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.sliderSpacing
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
777 <span class='line'
>770</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.chartHeight
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">height
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
778 <span class='line'
>771</span>
779 <span class='line'
>772</span> </span><span class=
"WHIT"> </span><span class=
"NAME">style
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.elems.controls.style
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
780 <span class='line'
>773</span> </span><span class=
"WHIT"> </span><span class=
"NAME">style.width
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">sWidth
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">'px'
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
781 <span class='line'
>774</span> </span><span class=
"WHIT"> </span><span class=
"NAME">style.height
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">sHeight
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">'px'
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
782 <span class='line'
>775</span>
783 <span class='line'
>776</span> </span><span class=
"WHIT"> </span><span class=
"NAME">style
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.elems.slider.style
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
784 <span class='line'
>777</span> </span><span class=
"WHIT"> </span><span class=
"NAME">style.width
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">_self.sliderWidth
</span><span class=
"WHIT"> </span><span class=
"PUNC">/
</span><span class=
"WHIT"> </span><span class=
"NAME">resScale
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">'px'
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
785 <span class='line'
>778</span> </span><span class=
"WHIT"> </span><span class=
"NAME">style.left
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">_self.sliderX
</span><span class=
"WHIT"> </span><span class=
"PUNC">/
</span><span class=
"WHIT"> </span><span class=
"NAME">resScale
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">'px'
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
786 <span class='line'
>779</span>
787 <span class='line'
>780</span> </span><span class=
"WHIT"> </span><span class=
"NAME">style
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">canvas.style
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
788 <span class='line'
>781</span> </span><span class=
"WHIT"> </span><span class=
"NAME">style.width
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">sWidth
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">'px'
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
789 <span class='line'
>782</span> </span><span class=
"WHIT"> </span><span class=
"NAME">style.height
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">sHeight
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">'px'
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
790 <span class='line'
>783</span>
791 <span class='line'
>784</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">_self.panel.state
</span><span class=
"WHIT"> </span><span class=
"PUNC">!==
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.panel.STATE_HIDDEN
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
792 <span class='line'
>785</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.update_canvas
</span><span class=
"PUNC">(
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
793 <span class='line'
>786</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
794 <span class='line'
>787</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
795 <span class='line'
>788</span>
796 <span class='line'
>789</span> </span><span class=
"WHIT"> </span><span class=
"COMM">/**
797 <span class='line'
>790</span> * Calculate the product of two matrices.
798 <span class='line'
>791</span> *
799 <span class='line'
>792</span> *
<p
>Matrices are one-dimensional arrays of the form
<code
>[a0, a1, a2, ...,
800 <span class='line'
>793</span> * b0, b1, b2, ...]
</code
> where each element from the matrix is given in
801 <span class='line'
>794</span> * order, from the left to the right, row by row from the top to the bottom.
802 <span class='line'
>795</span> *
803 <span class='line'
>796</span> * @param {Array} a The first matrix must be one row and three columns.
804 <span class='line'
>797</span> * @param {Array} b The second matrix must be three rows and three columns.
805 <span class='line'
>798</span> *
806 <span class='line'
>799</span> * @returns {Array} The matrix product, one row and three columns.
807 <span class='line'
>800</span> */
</span><span class=
"WHIT">
808 <span class='line'
>801</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// Note: for obvious reasons, this method is not a full-fledged matrix product
</span><span class=
"WHIT">
809 <span class='line'
>802</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// calculator. It's as simple as possible - fitting only the very specific
</span><span class=
"WHIT">
810 <span class='line'
>803</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// needs of the color mixer.
</span><span class=
"WHIT">
811 <span class='line'
>804</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.calc_m1x3
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">function
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">a
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">b
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
812 <span class='line'
>805</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"PUNC">!
</span><span class=
"PUNC">(
</span><span class=
"NAME">a
</span><span class=
"WHIT"> </span><span class=
"KEYW">instanceof
</span><span class=
"WHIT"> </span><span class=
"NAME">Array
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">||
</span><span class=
"WHIT"> </span><span class=
"PUNC">!
</span><span class=
"PUNC">(
</span><span class=
"NAME">b
</span><span class=
"WHIT"> </span><span class=
"KEYW">instanceof
</span><span class=
"WHIT"> </span><span class=
"NAME">Array
</span><span class=
"PUNC">)
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
813 <span class='line'
>806</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">return
</span><span class=
"WHIT"> </span><span class=
"KEYW">false
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
814 <span class='line'
>807</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
815 <span class='line'
>808</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">return
</span><span class=
"WHIT"> </span><span class=
"PUNC">[
</span><span class=
"WHIT">
816 <span class='line'
>809</span> </span><span class=
"WHIT"> </span><span class=
"NAME">a
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NAME">b
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">a
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NAME">b
</span><span class=
"PUNC">[
</span><span class=
"NUMB">3</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">a
</span><span class=
"PUNC">[
</span><span class=
"NUMB">2</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NAME">b
</span><span class=
"PUNC">[
</span><span class=
"NUMB">6</span><span class=
"PUNC">]
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"COMM">// x
</span><span class=
"WHIT">
817 <span class='line'
>810</span> </span><span class=
"WHIT"> </span><span class=
"NAME">a
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NAME">b
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">a
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NAME">b
</span><span class=
"PUNC">[
</span><span class=
"NUMB">4</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">a
</span><span class=
"PUNC">[
</span><span class=
"NUMB">2</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NAME">b
</span><span class=
"PUNC">[
</span><span class=
"NUMB">7</span><span class=
"PUNC">]
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"COMM">// y
</span><span class=
"WHIT">
818 <span class='line'
>811</span> </span><span class=
"WHIT"> </span><span class=
"NAME">a
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NAME">b
</span><span class=
"PUNC">[
</span><span class=
"NUMB">2</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">a
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NAME">b
</span><span class=
"PUNC">[
</span><span class=
"NUMB">5</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">a
</span><span class=
"PUNC">[
</span><span class=
"NUMB">2</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NAME">b
</span><span class=
"PUNC">[
</span><span class=
"NUMB">8</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"COMM">// z
</span><span class=
"WHIT">
819 <span class='line'
>812</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
820 <span class='line'
>813</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
821 <span class='line'
>814</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
822 <span class='line'
>815</span>
823 <span class='line'
>816</span> </span><span class=
"WHIT"> </span><span class=
"COMM">/**
824 <span class='line'
>817</span> * Calculate the matrix inverse.
825 <span class='line'
>818</span> *
826 <span class='line'
>819</span> *
<p
>Matrices are one-dimensional arrays of the form
<code
>[a0, a1, a2, ...,
827 <span class='line'
>820</span> * b0, b1, b2, ...]
</code
> where each element from the matrix is given in
828 <span class='line'
>821</span> * order, from the left to the right, row by row from the top to the bottom.
829 <span class='line'
>822</span> *
830 <span class='line'
>823</span> * @private
831 <span class='line'
>824</span> *
832 <span class='line'
>825</span> * @param {Array} m The square matrix which must have three rows and three
833 <span class='line'
>826</span> * columns.
834 <span class='line'
>827</span> *
835 <span class='line'
>828</span> * @returns {Array|false} The computed matrix inverse, or false if the matrix
836 <span class='line'
>829</span> * determinant was
0 - the given matrix is not invertible.
837 <span class='line'
>830</span> */
</span><span class=
"WHIT">
838 <span class='line'
>831</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// Note: for obvious reasons, this method is not a full-fledged matrix inverse
</span><span class=
"WHIT">
839 <span class='line'
>832</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// calculator. It's as simple as possible - fitting only the very specific
</span><span class=
"WHIT">
840 <span class='line'
>833</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// needs of the color mixer.
</span><span class=
"WHIT">
841 <span class='line'
>834</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.calc_m3inv
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">function
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">m
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
842 <span class='line'
>835</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"PUNC">!
</span><span class=
"PUNC">(
</span><span class=
"NAME">m
</span><span class=
"WHIT"> </span><span class=
"KEYW">instanceof
</span><span class=
"WHIT"> </span><span class=
"NAME">Array
</span><span class=
"PUNC">)
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
843 <span class='line'
>836</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">return
</span><span class=
"WHIT"> </span><span class=
"KEYW">false
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
844 <span class='line'
>837</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
845 <span class='line'
>838</span>
846 <span class='line'
>839</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">d
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"PUNC">*
</span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">4</span><span class=
"PUNC">]
</span><span class=
"PUNC">*
</span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">8</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"PUNC">*
</span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">5</span><span class=
"PUNC">]
</span><span class=
"PUNC">*
</span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">6</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">2</span><span class=
"PUNC">]
</span><span class=
"PUNC">*
</span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">3</span><span class=
"PUNC">]
</span><span class=
"PUNC">*
</span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">7</span><span class=
"PUNC">]
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT">
847 <span class='line'
>840</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">2</span><span class=
"PUNC">]
</span><span class=
"PUNC">*
</span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">4</span><span class=
"PUNC">]
</span><span class=
"PUNC">*
</span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">6</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">5</span><span class=
"PUNC">]
</span><span class=
"PUNC">*
</span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">7</span><span class=
"PUNC">]
</span><span class=
"PUNC">*
</span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">8</span><span class=
"PUNC">]
</span><span class=
"PUNC">*
</span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"PUNC">*
</span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">3</span><span class=
"PUNC">]
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
848 <span class='line'
>841</span>
849 <span class='line'
>842</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// Matrix determinant is
0: the matrix is not invertible.
</span><span class=
"WHIT">
850 <span class='line'
>843</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">d
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
851 <span class='line'
>844</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">return
</span><span class=
"WHIT"> </span><span class=
"KEYW">false
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
852 <span class='line'
>845</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
853 <span class='line'
>846</span>
854 <span class='line'
>847</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"PUNC">[
</span><span class=
"WHIT">
855 <span class='line'
>848</span> </span><span class=
"WHIT"> </span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">4</span><span class=
"PUNC">]
</span><span class=
"PUNC">*
</span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">8</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">5</span><span class=
"PUNC">]
</span><span class=
"PUNC">*
</span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">7</span><span class=
"PUNC">]
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">3</span><span class=
"PUNC">]
</span><span class=
"PUNC">*
</span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">8</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">5</span><span class=
"PUNC">]
</span><span class=
"PUNC">*
</span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">6</span><span class=
"PUNC">]
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">3</span><span class=
"PUNC">]
</span><span class=
"PUNC">*
</span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">7</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">4</span><span class=
"PUNC">]
</span><span class=
"PUNC">*
</span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">6</span><span class=
"PUNC">]
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
856 <span class='line'
>849</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"PUNC">*
</span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">8</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">2</span><span class=
"PUNC">]
</span><span class=
"PUNC">*
</span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">7</span><span class=
"PUNC">]
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"PUNC">*
</span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">8</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">2</span><span class=
"PUNC">]
</span><span class=
"PUNC">*
</span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">6</span><span class=
"PUNC">]
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"PUNC">*
</span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">7</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"PUNC">*
</span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">6</span><span class=
"PUNC">]
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
857 <span class='line'
>850</span> </span><span class=
"WHIT"> </span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"PUNC">*
</span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">5</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">2</span><span class=
"PUNC">]
</span><span class=
"PUNC">*
</span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">4</span><span class=
"PUNC">]
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"PUNC">*
</span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">5</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">2</span><span class=
"PUNC">]
</span><span class=
"PUNC">*
</span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">3</span><span class=
"PUNC">]
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"PUNC">*
</span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">4</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"PUNC">*
</span><span class=
"NAME">m
</span><span class=
"PUNC">[
</span><span class=
"NUMB">3</span><span class=
"PUNC">]
</span><span class=
"WHIT">
858 <span class='line'
>851</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
859 <span class='line'
>852</span>
860 <span class='line'
>853</span> </span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">/
</span><span class=
"NAME">d
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"PUNC">/
</span><span class=
"NAME">d
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"PUNC">[
</span><span class=
"NUMB">3</span><span class=
"PUNC">]
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"PUNC">/
</span><span class=
"NAME">d
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"PUNC">[
</span><span class=
"NUMB">6</span><span class=
"PUNC">]
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
861 <span class='line'
>854</span> </span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"PUNC">/
</span><span class=
"NAME">d
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"PUNC">/
</span><span class=
"NAME">d
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"PUNC">[
</span><span class=
"NUMB">4</span><span class=
"PUNC">]
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"PUNC">/
</span><span class=
"NAME">d
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"PUNC">[
</span><span class=
"NUMB">7</span><span class=
"PUNC">]
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
862 <span class='line'
>855</span> </span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"PUNC">/
</span><span class=
"NAME">d
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"PUNC">[
</span><span class=
"NUMB">2</span><span class=
"PUNC">]
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"PUNC">/
</span><span class=
"NAME">d
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"PUNC">[
</span><span class=
"NUMB">5</span><span class=
"PUNC">]
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"PUNC">/
</span><span class=
"NAME">d
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"PUNC">[
</span><span class=
"NUMB">8</span><span class=
"PUNC">]
</span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
863 <span class='line'
>856</span>
864 <span class='line'
>857</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">return
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
865 <span class='line'
>858</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
866 <span class='line'
>859</span>
867 <span class='line'
>860</span> </span><span class=
"WHIT"> </span><span class=
"COMM">/**
868 <span class='line'
>861</span> * The
<code
>change
</code
> event handler for the Color Mixer inputs of
869 <span class='line'
>862</span> * type=radio. This method allows users to change the active color key - used
870 <span class='line'
>863</span> * for the color space visualisation.
871 <span class='line'
>864</span> * @private
872 <span class='line'
>865</span> */
</span><span class=
"WHIT">
873 <span class='line'
>866</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.ev_change_ckey_active
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">function
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
874 <span class='line'
>867</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">this.value
</span><span class=
"WHIT"> </span><span class=
"PUNC">&&
</span><span class=
"WHIT"> </span><span class=
"NAME">this.value
</span><span class=
"WHIT"> </span><span class=
"PUNC">!==
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.ckey_active
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
875 <span class='line'
>868</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.update_ckey_active
</span><span class=
"PUNC">(
</span><span class=
"NAME">this.value
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
876 <span class='line'
>869</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
877 <span class='line'
>870</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
878 <span class='line'
>871</span>
879 <span class='line'
>872</span> </span><span class=
"WHIT"> </span><span class=
"COMM">/**
880 <span class='line'
>873</span> * Update the active color key. This method updates the Canvas accordingly.
881 <span class='line'
>874</span> *
882 <span class='line'
>875</span> * @private
883 <span class='line'
>876</span> *
884 <span class='line'
>877</span> * @param {String} ckey The color key you want to be active.
885 <span class='line'
>878</span> * @param {Boolean} [only_vars] Tells if you want only the variables to be
886 <span class='line'
>879</span> * updated - no Canvas updates. This is true only during the Color Mixer
887 <span class='line'
>880</span> * initialization.
888 <span class='line'
>881</span> *
889 <span class='line'
>882</span> * @return {Boolean} True if the operation was successful, or false if not.
890 <span class='line'
>883</span> */
</span><span class=
"WHIT">
891 <span class='line'
>884</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.update_ckey_active
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">function
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">ckey
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">only_vars
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
892 <span class='line'
>885</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"PUNC">!
</span><span class=
"NAME">_self.inputs
</span><span class=
"PUNC">[
</span><span class=
"NAME">ckey
</span><span class=
"PUNC">]
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
893 <span class='line'
>886</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">return
</span><span class=
"WHIT"> </span><span class=
"KEYW">false
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
894 <span class='line'
>887</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
895 <span class='line'
>888</span>
896 <span class='line'
>889</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.ckey_active
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">ckey
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
897 <span class='line'
>890</span>
898 <span class='line'
>891</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">adjoint
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"PUNC">[
</span><span class=
"PUNC">]
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">group
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.ckey_grouping
</span><span class=
"PUNC">[
</span><span class=
"NAME">ckey
</span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
899 <span class='line'
>892</span>
900 <span class='line'
>893</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// Determine the adjoint color keys. For example, if red is active, then adjoint = ['green', 'blue'].
</span><span class=
"WHIT">
901 <span class='line'
>894</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">for
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"WHIT"> </span><span class=
"KEYW">in
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.ckey_grouping
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
902 <span class='line'
>895</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">_self.ckey_grouping
</span><span class=
"PUNC">[
</span><span class=
"NAME">i
</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"NAME">group
</span><span class=
"WHIT"> </span><span class=
"PUNC">&&
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"WHIT"> </span><span class=
"PUNC">!==
</span><span class=
"WHIT"> </span><span class=
"NAME">ckey
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
903 <span class='line'
>896</span> </span><span class=
"WHIT"> </span><span class=
"NAME">adjoint.push
</span><span class=
"PUNC">(
</span><span class=
"NAME">i
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
904 <span class='line'
>897</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
905 <span class='line'
>898</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
906 <span class='line'
>899</span>
907 <span class='line'
>900</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.ckey_active_group
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">group
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
908 <span class='line'
>901</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.ckey_adjoint
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">adjoint
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
909 <span class='line'
>902</span>
910 <span class='line'
>903</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"PUNC">!
</span><span class=
"NAME">only_vars
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
911 <span class='line'
>904</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">_self.panelSelector.tabId
</span><span class=
"WHIT"> </span><span class=
"PUNC">!==
</span><span class=
"WHIT"> </span><span class=
"STRN">'mixer'
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
912 <span class='line'
>905</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.update_canvas_needed
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">true
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
913 <span class='line'
>906</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.panelSelector.tabActivate
</span><span class=
"PUNC">(
</span><span class=
"STRN">'mixer'
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
914 <span class='line'
>907</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
915 <span class='line'
>908</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.update_canvas
</span><span class=
"PUNC">(
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
916 <span class='line'
>909</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
917 <span class='line'
>910</span>
918 <span class='line'
>911</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">_self.panelInputs.tabId
</span><span class=
"WHIT"> </span><span class=
"PUNC">!==
</span><span class=
"WHIT"> </span><span class=
"NAME">group
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
919 <span class='line'
>912</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.panelInputs.tabActivate
</span><span class=
"PUNC">(
</span><span class=
"NAME">group
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
920 <span class='line'
>913</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
921 <span class='line'
>914</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
922 <span class='line'
>915</span>
923 <span class='line'
>916</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">return
</span><span class=
"WHIT"> </span><span class=
"KEYW">true
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
924 <span class='line'
>917</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
925 <span class='line'
>918</span>
926 <span class='line'
>919</span> </span><span class=
"WHIT"> </span><span class=
"COMM">/**
927 <span class='line'
>920</span> * Show the Color Mixer.
928 <span class='line'
>921</span> *
929 <span class='line'
>922</span> * @param {Object} target The target input object.
930 <span class='line'
>923</span> *
931 <span class='line'
>924</span> * @param {Object} color The color you want to set before the Color Mixer is
932 <span class='line'
>925</span> * shown. The object must have four properties:
<var
>red
</var
>,
933 <span class='line'
>926</span> *
<var
>green
</var
>,
<var
>blue
</var
> and
<var
>alpha
</var
>. All the values must
934 <span class='line'
>927</span> * be between
0 and
1. This color becomes the
"active color" and the
"old
935 <span class='line'>928</span> * color".
936 <span class='line'
>929</span> *
937 <span class='line'
>930</span> * @see this.targetInput for more information about the
<var
>target
</var
>
938 <span class='line'
>931</span> * object.
939 <span class='line'
>932</span> */
</span><span class=
"WHIT">
940 <span class='line'
>933</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.show
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">function
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">target
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
941 <span class='line'
>934</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">styleActive
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.elems.colorActive.style
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
942 <span class='line'
>935</span> </span><span class=
"WHIT"> </span><span class=
"NAME">colorOld
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.elems.colorOld
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
943 <span class='line'
>936</span> </span><span class=
"WHIT"> </span><span class=
"NAME">styleOld
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">colorOld.style
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
944 <span class='line'
>937</span>
945 <span class='line'
>938</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">target
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
946 <span class='line'
>939</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">_self.targetInput
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
947 <span class='line'
>940</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.targetInput.hide
</span><span class=
"PUNC">(
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
948 <span class='line'
>941</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
949 <span class='line'
>942</span>
950 <span class='line'
>943</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.targetInput
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">target
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
951 <span class='line'
>944</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.targetInput.show
</span><span class=
"PUNC">(
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
952 <span class='line'
>945</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
953 <span class='line'
>946</span>
954 <span class='line'
>947</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">color
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
955 <span class='line'
>948</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.color.red
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">color.red
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
956 <span class='line'
>949</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.color.green
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">color.green
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
957 <span class='line'
>950</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.color.blue
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">color.blue
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
958 <span class='line'
>951</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.color.alpha
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">color.alpha
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
959 <span class='line'
>952</span>
960 <span class='line'
>953</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.update_color
</span><span class=
"PUNC">(
</span><span class=
"STRN">'rgb'
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
961 <span class='line'
>954</span>
962 <span class='line'
>955</span> </span><span class=
"WHIT"> </span><span class=
"NAME">styleOld.backgroundColor
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">styleActive.backgroundColor
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
963 <span class='line'
>956</span> </span><span class=
"WHIT"> </span><span class=
"NAME">styleOld.opacity
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">styleActive.opacity
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
964 <span class='line'
>957</span> </span><span class=
"WHIT"> </span><span class=
"NAME">colorOld._color
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"PUNC">[
</span><span class=
"NAME">color.red
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">color.green
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">color.blue
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">color.alpha
</span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
965 <span class='line'
>958</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
966 <span class='line'
>959</span>
967 <span class='line'
>960</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.panel.show
</span><span class=
"PUNC">(
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
968 <span class='line'
>961</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
969 <span class='line'
>962</span>
970 <span class='line'
>963</span> </span><span class=
"WHIT"> </span><span class=
"COMM">/**
971 <span class='line'
>964</span> * Hide the Color Mixer floating panel. This method invokes the
972 <span class='line'
>965</span> *
<code
>hide()
</code
> method provided by the target input.
973 <span class='line'
>966</span> */
</span><span class=
"WHIT">
974 <span class='line'
>967</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.hide
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">function
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
975 <span class='line'
>968</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.panel.hide
</span><span class=
"PUNC">(
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
976 <span class='line'
>969</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.ev_canvas_mode
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">false
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
977 <span class='line'
>970</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
978 <span class='line'
>971</span>
979 <span class='line'
>972</span> </span><span class=
"WHIT"> </span><span class=
"COMM">/**
980 <span class='line'
>973</span> * The
<code
>guiFloatingPanelStateChange
</code
> event handler for the Color
981 <span class='line'
>974</span> * Mixer panel. This method ensures the Color Mixer is properly closed.
982 <span class='line'
>975</span> *
983 <span class='line'
>976</span> * @param {pwlib.appEvent.guiFloatingPanelStateChange} ev The application
984 <span class='line'
>977</span> * event object.
985 <span class='line'
>978</span> */
</span><span class=
"WHIT">
986 <span class='line'
>979</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.ev_panel_stateChange
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">function
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">ev
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
987 <span class='line'
>980</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">ev.state
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"NAME">ev.STATE_HIDDEN
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
988 <span class='line'
>981</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">_self.targetInput
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
989 <span class='line'
>982</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.targetInput.hide
</span><span class=
"PUNC">(
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
990 <span class='line'
>983</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.targetInput
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">null
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
991 <span class='line'
>984</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
992 <span class='line'
>985</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.ev_canvas_mode
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">false
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
993 <span class='line'
>986</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
994 <span class='line'
>987</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
995 <span class='line'
>988</span>
996 <span class='line'
>989</span> </span><span class=
"WHIT"> </span><span class=
"COMM">/**
997 <span class='line'
>990</span> * The
<code
>input
</code
> and
<code
>change
</code
> event handler for all the
998 <span class='line'
>991</span> * Color Mixer inputs.
999 <span class='line'
>992</span> * @private
1000 <span class='line'
>993</span> */
</span><span class=
"WHIT">
1001 <span class='line'
>994</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.ev_input_change
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">function
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1002 <span class='line'
>995</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"PUNC">!
</span><span class=
"NAME">this._ckey
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1003 <span class='line'
>996</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">return
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1004 <span class='line'
>997</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1005 <span class='line'
>998</span>
1006 <span class='line'
>999</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// Validate and restrict the possible values.
</span><span class=
"WHIT">
1007 <span class='line'
>1000</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// If the input is unchanged, or if the new value is invalid, the function
</span><span class=
"WHIT">
1008 <span class='line'
>1001</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// stops.
</span><span class=
"WHIT">
1009 <span class='line'
>1002</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// The hexadecimal input is checked with a simple regular expression.
</span><span class=
"WHIT">
1010 <span class='line'
>1003</span>
1011 <span class='line'
>1004</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"PUNC">(
</span><span class=
"NAME">this._ckey
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"STRN">'hex'
</span><span class=
"WHIT"> </span><span class=
"PUNC">&&
</span><span class=
"WHIT"> </span><span class=
"PUNC">!
</span><span class=
"REGX">/^\#[a-f0-
9]{
6}$/i
</span><span class=
"PUNC">.
</span><span class=
"NAME">test
</span><span class=
"PUNC">(
</span><span class=
"NAME">this.value
</span><span class=
"PUNC">)
</span><span class=
"PUNC">)
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1012 <span class='line'
>1005</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">return
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1013 <span class='line'
>1006</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1014 <span class='line'
>1007</span>
1015 <span class='line'
>1008</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">this.getAttribute
</span><span class=
"PUNC">(
</span><span class=
"STRN">'type'
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"STRN">'number'
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1016 <span class='line'
>1009</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">val
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">parseInt
</span><span class=
"PUNC">(
</span><span class=
"NAME">this.value
</span><span class=
"PUNC">)
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1017 <span class='line'
>1010</span> </span><span class=
"WHIT"> </span><span class=
"NAME">min
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">this.getAttribute
</span><span class=
"PUNC">(
</span><span class=
"STRN">'min'
</span><span class=
"PUNC">)
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1018 <span class='line'
>1011</span> </span><span class=
"WHIT"> </span><span class=
"NAME">max
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">this.getAttribute
</span><span class=
"PUNC">(
</span><span class=
"STRN">'max'
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1019 <span class='line'
>1012</span>
1020 <span class='line'
>1013</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">isNaN
</span><span class=
"PUNC">(
</span><span class=
"NAME">val
</span><span class=
"PUNC">)
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1021 <span class='line'
>1014</span> </span><span class=
"WHIT"> </span><span class=
"NAME">val
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">min
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1022 <span class='line'
>1015</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1023 <span class='line'
>1016</span>
1024 <span class='line'
>1017</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">val
</span><span class=
"WHIT"> </span><span class=
"PUNC"><</span><span class=
"WHIT"> </span><span class=
"NAME">min
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1025 <span class='line'
>1018</span> </span><span class=
"WHIT"> </span><span class=
"NAME">val
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">min
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1026 <span class='line'
>1019</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">val
</span><span class=
"WHIT"> </span><span class=
"PUNC">></span><span class=
"WHIT"> </span><span class=
"NAME">max
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1027 <span class='line'
>1020</span> </span><span class=
"WHIT"> </span><span class=
"NAME">val
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">max
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1028 <span class='line'
>1021</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1029 <span class='line'
>1022</span>
1030 <span class='line'
>1023</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">val
</span><span class=
"WHIT"> </span><span class=
"PUNC">!=
</span><span class=
"WHIT"> </span><span class=
"NAME">this.value
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1031 <span class='line'
>1024</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.value
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">val
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1032 <span class='line'
>1025</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1033 <span class='line'
>1026</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1034 <span class='line'
>1027</span>
1035 <span class='line'
>1028</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// Update the internal color value.
</span><span class=
"WHIT">
1036 <span class='line'
>1029</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">this._ckey
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"STRN">'hex'
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1037 <span class='line'
>1030</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.color
</span><span class=
"PUNC">[
</span><span class=
"NAME">this._ckey
</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">this.value
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1038 <span class='line'
>1031</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">_self.ckey_grouping
</span><span class=
"PUNC">[
</span><span class=
"NAME">this._ckey
</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"STRN">'lab'
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1039 <span class='line'
>1032</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.color
</span><span class=
"PUNC">[
</span><span class=
"NAME">this._ckey
</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">parseInt
</span><span class=
"PUNC">(
</span><span class=
"NAME">this.value
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1040 <span class='line'
>1033</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1041 <span class='line'
>1034</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.color
</span><span class=
"PUNC">[
</span><span class=
"NAME">this._ckey
</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">parseInt
</span><span class=
"PUNC">(
</span><span class=
"NAME">this.value
</span><span class=
"PUNC">)
</span><span class=
"WHIT">
1042 <span class='line'
>1035</span> </span><span class=
"PUNC">/
</span><span class=
"WHIT"> </span><span class=
"NAME">config.inputValues
</span><span class=
"PUNC">[
</span><span class=
"NAME">this._ckey
</span><span class=
"PUNC">]
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1043 <span class='line'
>1036</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1044 <span class='line'
>1037</span>
1045 <span class='line'
>1038</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.update_color
</span><span class=
"PUNC">(
</span><span class=
"NAME">this._ckey
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1046 <span class='line'
>1039</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1047 <span class='line'
>1040</span>
1048 <span class='line'
>1041</span> </span><span class=
"WHIT"> </span><span class=
"COMM">/**
1049 <span class='line'
>1042</span> * Update the current color. Once a color value is updated, this method is
1050 <span class='line'
>1043</span> * called to keep the rest of the color mixer in sync: for example, when a RGB
1051 <span class='line'
>1044</span> * value is updated, it needs to be converted to HSV, CMYK and all of the
1052 <span class='line'
>1045</span> * other formats. Additionally, this method updates the color preview, the
1053 <span class='line'
>1046</span> * controls on the Canvas and the input values.
1054 <span class='line'
>1047</span> *
1055 <span class='line'
>1048</span> *
<p
>You need to call this function whenever you update the color manually.
1056 <span class='line'
>1049</span> *
1057 <span class='line'
>1050</span> * @param {String} ckey The color key that was updated.
1058 <span class='line'
>1051</span> */
</span><span class=
"WHIT">
1059 <span class='line'
>1052</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.update_color
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">function
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">ckey
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1060 <span class='line'
>1053</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">group
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.ckey_grouping
</span><span class=
"PUNC">[
</span><span class=
"NAME">ckey
</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">||
</span><span class=
"WHIT"> </span><span class=
"NAME">ckey
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1061 <span class='line'
>1054</span>
1062 <span class='line'
>1055</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">switch
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">group
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1063 <span class='line'
>1056</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">case
</span><span class=
"WHIT"> </span><span class=
"STRN">'rgb'
</span><span class=
"PUNC">:
</span><span class=
"WHIT">
1064 <span class='line'
>1057</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.rgb2hsv
</span><span class=
"PUNC">(
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1065 <span class='line'
>1058</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.rgb2hex
</span><span class=
"PUNC">(
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1066 <span class='line'
>1059</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.rgb2lab
</span><span class=
"PUNC">(
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1067 <span class='line'
>1060</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.rgb2cmyk
</span><span class=
"PUNC">(
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1068 <span class='line'
>1061</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">break
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1069 <span class='line'
>1062</span>
1070 <span class='line'
>1063</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">case
</span><span class=
"WHIT"> </span><span class=
"STRN">'hsv'
</span><span class=
"PUNC">:
</span><span class=
"WHIT">
1071 <span class='line'
>1064</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.hsv2rgb
</span><span class=
"PUNC">(
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1072 <span class='line'
>1065</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.rgb2hex
</span><span class=
"PUNC">(
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1073 <span class='line'
>1066</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.rgb2lab
</span><span class=
"PUNC">(
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1074 <span class='line'
>1067</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.rgb2cmyk
</span><span class=
"PUNC">(
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1075 <span class='line'
>1068</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">break
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1076 <span class='line'
>1069</span>
1077 <span class='line'
>1070</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">case
</span><span class=
"WHIT"> </span><span class=
"STRN">'hex'
</span><span class=
"PUNC">:
</span><span class=
"WHIT">
1078 <span class='line'
>1071</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.hex2rgb
</span><span class=
"PUNC">(
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1079 <span class='line'
>1072</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.rgb2hsv
</span><span class=
"PUNC">(
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1080 <span class='line'
>1073</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.rgb2lab
</span><span class=
"PUNC">(
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1081 <span class='line'
>1074</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.rgb2cmyk
</span><span class=
"PUNC">(
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1082 <span class='line'
>1075</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">break
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1083 <span class='line'
>1076</span>
1084 <span class='line'
>1077</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">case
</span><span class=
"WHIT"> </span><span class=
"STRN">'lab'
</span><span class=
"PUNC">:
</span><span class=
"WHIT">
1085 <span class='line'
>1078</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.lab2rgb
</span><span class=
"PUNC">(
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1086 <span class='line'
>1079</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.rgb2hsv
</span><span class=
"PUNC">(
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1087 <span class='line'
>1080</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.rgb2hex
</span><span class=
"PUNC">(
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1088 <span class='line'
>1081</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.rgb2cmyk
</span><span class=
"PUNC">(
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1089 <span class='line'
>1082</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">break
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1090 <span class='line'
>1083</span>
1091 <span class='line'
>1084</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">case
</span><span class=
"WHIT"> </span><span class=
"STRN">'cmyk'
</span><span class=
"PUNC">:
</span><span class=
"WHIT">
1092 <span class='line'
>1085</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.cmyk2rgb
</span><span class=
"PUNC">(
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1093 <span class='line'
>1086</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.rgb2lab
</span><span class=
"PUNC">(
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1094 <span class='line'
>1087</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.rgb2hsv
</span><span class=
"PUNC">(
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1095 <span class='line'
>1088</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.rgb2hex
</span><span class=
"PUNC">(
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1096 <span class='line'
>1089</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1097 <span class='line'
>1090</span>
1098 <span class='line'
>1091</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.update_preview
</span><span class=
"PUNC">(
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1099 <span class='line'
>1092</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.update_inputs
</span><span class=
"PUNC">(
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1100 <span class='line'
>1093</span>
1101 <span class='line'
>1094</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">ckey
</span><span class=
"WHIT"> </span><span class=
"PUNC">!==
</span><span class=
"WHIT"> </span><span class=
"STRN">'alpha'
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1102 <span class='line'
>1095</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.update_canvas
</span><span class=
"PUNC">(
</span><span class=
"NAME">ckey
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1103 <span class='line'
>1096</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1104 <span class='line'
>1097</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1105 <span class='line'
>1098</span>
1106 <span class='line'
>1099</span> </span><span class=
"WHIT"> </span><span class=
"COMM">/**
1107 <span class='line'
>1100</span> * Update the color preview.
1108 <span class='line'
>1101</span> * @private
1109 <span class='line'
>1102</span> */
</span><span class=
"WHIT">
1110 <span class='line'
>1103</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.update_preview
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">function
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1111 <span class='line'
>1104</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">red
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">MathRound
</span><span class=
"PUNC">(
</span><span class=
"NAME">_self.color.red
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NUMB">255</span><span class=
"PUNC">)
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1112 <span class='line'
>1105</span> </span><span class=
"WHIT"> </span><span class=
"NAME">green
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">MathRound
</span><span class=
"PUNC">(
</span><span class=
"NAME">_self.color.green
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NUMB">255</span><span class=
"PUNC">)
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1113 <span class='line'
>1106</span> </span><span class=
"WHIT"> </span><span class=
"NAME">blue
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">MathRound
</span><span class=
"PUNC">(
</span><span class=
"NAME">_self.color.blue
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NUMB">255</span><span class=
"PUNC">)
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1114 <span class='line'
>1107</span> </span><span class=
"WHIT"> </span><span class=
"NAME">style
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.elems.colorActive.style
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1115 <span class='line'
>1108</span>
1116 <span class='line'
>1109</span> </span><span class=
"WHIT"> </span><span class=
"NAME">style.backgroundColor
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"STRN">'rgb('
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">red
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">','
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">green
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">','
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">blue
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">')'
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1117 <span class='line'
>1110</span> </span><span class=
"WHIT"> </span><span class=
"NAME">style.opacity
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.color.alpha
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1118 <span class='line'
>1111</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1119 <span class='line'
>1112</span>
1120 <span class='line'
>1113</span> </span><span class=
"WHIT"> </span><span class=
"COMM">/**
1121 <span class='line'
>1114</span> * Update the color inputs. This method takes the internal color values and
1122 <span class='line'
>1115</span> * shows them in the DOM input elements.
1123 <span class='line'
>1116</span> * @private
1124 <span class='line'
>1117</span> */
</span><span class=
"WHIT">
1125 <span class='line'
>1118</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.update_inputs
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">function
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1126 <span class='line'
>1119</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">input
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1127 <span class='line'
>1120</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">for
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"WHIT"> </span><span class=
"KEYW">in
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.inputs
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1128 <span class='line'
>1121</span> </span><span class=
"WHIT"> </span><span class=
"NAME">input
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.inputs
</span><span class=
"PUNC">[
</span><span class=
"NAME">i
</span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1129 <span class='line'
>1122</span> </span><span class=
"WHIT"> </span><span class=
"NAME">input._old_value
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">input.value
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1130 <span class='line'
>1123</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">input._ckey
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"STRN">'hex'
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1131 <span class='line'
>1124</span> </span><span class=
"WHIT"> </span><span class=
"NAME">input.value
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.color
</span><span class=
"PUNC">[
</span><span class=
"NAME">i
</span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1132 <span class='line'
>1125</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">_self.ckey_grouping
</span><span class=
"PUNC">[
</span><span class=
"NAME">input._ckey
</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"STRN">'lab'
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1133 <span class='line'
>1126</span> </span><span class=
"WHIT"> </span><span class=
"NAME">input.value
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">MathRound
</span><span class=
"PUNC">(
</span><span class=
"NAME">_self.color
</span><span class=
"PUNC">[
</span><span class=
"NAME">i
</span><span class=
"PUNC">]
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1134 <span class='line'
>1127</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1135 <span class='line'
>1128</span> </span><span class=
"WHIT"> </span><span class=
"NAME">input.value
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">MathRound
</span><span class=
"PUNC">(
</span><span class=
"NAME">_self.color
</span><span class=
"PUNC">[
</span><span class=
"NAME">i
</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NAME">config.inputValues
</span><span class=
"PUNC">[
</span><span class=
"NAME">i
</span><span class=
"PUNC">]
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1136 <span class='line'
>1129</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1137 <span class='line'
>1130</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1138 <span class='line'
>1131</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1139 <span class='line'
>1132</span>
1140 <span class='line'
>1133</span> </span><span class=
"WHIT"> </span><span class=
"COMM">/**
1141 <span class='line'
>1134</span> * Convert RGB to CMYK. This uses the current color RGB values and updates the
1142 <span class='line'
>1135</span> * CMYK values accordingly.
1143 <span class='line'
>1136</span> * @private
1144 <span class='line'
>1137</span> */
</span><span class=
"WHIT">
1145 <span class='line'
>1138</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// Quote from Wikipedia:
</span><span class=
"WHIT">
1146 <span class='line'
>1139</span> </span><span class=
"WHIT"> </span><span class=
"COMM">//
"Since RGB and CMYK spaces are both device-dependent spaces, there is no </span><span class="WHIT
">
1147 <span class='line'>1140</span> </span><span class="WHIT
"> </span><span class="COMM
">// simple or general conversion formula that converts between them. </span><span class="WHIT
">
1148 <span class='line'>1141</span> </span><span class="WHIT
"> </span><span class="COMM
">// Conversions are generally done through color management systems, using </span><span class="WHIT
">
1149 <span class='line'>1142</span> </span><span class="WHIT
"> </span><span class="COMM
">// color profiles that describe the spaces being converted. Nevertheless, the </span><span class="WHIT
">
1150 <span class='line'>1143</span> </span><span class="WHIT
"> </span><span class="COMM
">// conversions cannot be exact, since these spaces have very different </span><span class="WHIT
">
1151 <span class='line'>1144</span> </span><span class="WHIT
"> </span><span class="COMM
">// gamuts."</span><span class=
"WHIT">
1152 <span class='line'
>1145</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// Translation: this is just a simple RGB to CMYK conversion function.
</span><span class=
"WHIT">
1153 <span class='line'
>1146</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.rgb2cmyk
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">function
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1154 <span class='line'
>1147</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.color
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1155 <span class='line'
>1148</span> </span><span class=
"WHIT"> </span><span class=
"NAME">cyan
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">magenta
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">yellow
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">black
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1156 <span class='line'
>1149</span> </span><span class=
"WHIT"> </span><span class=
"NAME">red
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">color.red
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1157 <span class='line'
>1150</span> </span><span class=
"WHIT"> </span><span class=
"NAME">green
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">color.green
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1158 <span class='line'
>1151</span> </span><span class=
"WHIT"> </span><span class=
"NAME">blue
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">color.blue
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1159 <span class='line'
>1152</span>
1160 <span class='line'
>1153</span> </span><span class=
"WHIT"> </span><span class=
"NAME">cyan
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NAME">red
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1161 <span class='line'
>1154</span> </span><span class=
"WHIT"> </span><span class=
"NAME">magenta
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NAME">green
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1162 <span class='line'
>1155</span> </span><span class=
"WHIT"> </span><span class=
"NAME">yellow
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NAME">blue
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1163 <span class='line'
>1156</span>
1164 <span class='line'
>1157</span> </span><span class=
"WHIT"> </span><span class=
"NAME">black
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">MathMin
</span><span class=
"PUNC">(
</span><span class=
"NAME">cyan
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">magenta
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">yellow
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1165 <span class='line'
>1158</span>
1166 <span class='line'
>1159</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">black
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1167 <span class='line'
>1160</span> </span><span class=
"WHIT"> </span><span class=
"NAME">cyan
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">magenta
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">yellow
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1168 <span class='line'
>1161</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1169 <span class='line'
>1162</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">w
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NAME">black
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1170 <span class='line'
>1163</span> </span><span class=
"WHIT"> </span><span class=
"NAME">cyan
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">cyan
</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NAME">black
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">/
</span><span class=
"WHIT"> </span><span class=
"NAME">w
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1171 <span class='line'
>1164</span> </span><span class=
"WHIT"> </span><span class=
"NAME">magenta
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">magenta
</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NAME">black
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">/
</span><span class=
"WHIT"> </span><span class=
"NAME">w
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1172 <span class='line'
>1165</span> </span><span class=
"WHIT"> </span><span class=
"NAME">yellow
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">yellow
</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NAME">black
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">/
</span><span class=
"WHIT"> </span><span class=
"NAME">w
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1173 <span class='line'
>1166</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1174 <span class='line'
>1167</span>
1175 <span class='line'
>1168</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color.cyan
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">cyan
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1176 <span class='line'
>1169</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color.magenta
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">magenta
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1177 <span class='line'
>1170</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color.yellow
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">yellow
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1178 <span class='line'
>1171</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color.black
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">black
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1179 <span class='line'
>1172</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1180 <span class='line'
>1173</span>
1181 <span class='line'
>1174</span> </span><span class=
"WHIT"> </span><span class=
"COMM">/**
1182 <span class='line'
>1175</span> * Convert CMYK to RGB (internally).
1183 <span class='line'
>1176</span> * @private
1184 <span class='line'
>1177</span> */
</span><span class=
"WHIT">
1185 <span class='line'
>1178</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.cmyk2rgb
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">function
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1186 <span class='line'
>1179</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.color
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1187 <span class='line'
>1180</span> </span><span class=
"WHIT"> </span><span class=
"NAME">w
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NAME">color.black
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1188 <span class='line'
>1181</span>
1189 <span class='line'
>1182</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color.red
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NAME">color.cyan
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NAME">w
</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NAME">color.black
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1190 <span class='line'
>1183</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color.green
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NAME">color.magenta
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NAME">w
</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NAME">color.black
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1191 <span class='line'
>1184</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color.blue
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NAME">color.yellow
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NAME">w
</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NAME">color.black
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1192 <span class='line'
>1185</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1193 <span class='line'
>1186</span>
1194 <span class='line'
>1187</span> </span><span class=
"WHIT"> </span><span class=
"COMM">/**
1195 <span class='line'
>1188</span> * Convert RGB to HSV (internally).
1196 <span class='line'
>1189</span> * @private
1197 <span class='line'
>1190</span> */
</span><span class=
"WHIT">
1198 <span class='line'
>1191</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.rgb2hsv
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">function
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1199 <span class='line'
>1192</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">hue
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">sat
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">val
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"COMM">// HSV
</span><span class=
"WHIT">
1200 <span class='line'
>1193</span> </span><span class=
"WHIT"> </span><span class=
"NAME">red
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.color.red
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1201 <span class='line'
>1194</span> </span><span class=
"WHIT"> </span><span class=
"NAME">green
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.color.green
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1202 <span class='line'
>1195</span> </span><span class=
"WHIT"> </span><span class=
"NAME">blue
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.color.blue
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1203 <span class='line'
>1196</span> </span><span class=
"WHIT"> </span><span class=
"NAME">min
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">MathMin
</span><span class=
"PUNC">(
</span><span class=
"NAME">red
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">green
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">blue
</span><span class=
"PUNC">)
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1204 <span class='line'
>1197</span> </span><span class=
"WHIT"> </span><span class=
"NAME">max
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">MathMax
</span><span class=
"PUNC">(
</span><span class=
"NAME">red
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">green
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">blue
</span><span class=
"PUNC">)
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1205 <span class='line'
>1198</span> </span><span class=
"WHIT"> </span><span class=
"NAME">delta
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">max
</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NAME">min
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1206 <span class='line'
>1199</span> </span><span class=
"WHIT"> </span><span class=
"NAME">val
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">max
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1207 <span class='line'
>1200</span>
1208 <span class='line'
>1201</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// This is gray (red==green==blue)
</span><span class=
"WHIT">
1209 <span class='line'
>1202</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">delta
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1210 <span class='line'
>1203</span> </span><span class=
"WHIT"> </span><span class=
"NAME">hue
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">sat
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1211 <span class='line'
>1204</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1212 <span class='line'
>1205</span> </span><span class=
"WHIT"> </span><span class=
"NAME">sat
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">delta
</span><span class=
"WHIT"> </span><span class=
"PUNC">/
</span><span class=
"WHIT"> </span><span class=
"NAME">max
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1213 <span class='line'
>1206</span>
1214 <span class='line'
>1207</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">max
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"NAME">red
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1215 <span class='line'
>1208</span> </span><span class=
"WHIT"> </span><span class=
"NAME">hue
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">green
</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NAME">blue
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">/
</span><span class=
"WHIT"> </span><span class=
"NAME">delta
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1216 <span class='line'
>1209</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">max
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"NAME">green
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1217 <span class='line'
>1210</span> </span><span class=
"WHIT"> </span><span class=
"NAME">hue
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">blue
</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NAME">red
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">/
</span><span class=
"WHIT"> </span><span class=
"NAME">delta
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NUMB">2</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1218 <span class='line'
>1211</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">max
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"NAME">blue
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1219 <span class='line'
>1212</span> </span><span class=
"WHIT"> </span><span class=
"NAME">hue
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">red
</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NAME">green
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">/
</span><span class=
"WHIT"> </span><span class=
"NAME">delta
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NUMB">4</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1220 <span class='line'
>1213</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1221 <span class='line'
>1214</span>
1222 <span class='line'
>1215</span> </span><span class=
"WHIT"> </span><span class=
"NAME">hue
</span><span class=
"WHIT"> </span><span class=
"PUNC">/
</span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">6</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1223 <span class='line'
>1216</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">hue
</span><span class=
"WHIT"> </span><span class=
"PUNC"><</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1224 <span class='line'
>1217</span> </span><span class=
"WHIT"> </span><span class=
"NAME">hue
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1225 <span class='line'
>1218</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1226 <span class='line'
>1219</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1227 <span class='line'
>1220</span>
1228 <span class='line'
>1221</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.color.hue
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">hue
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1229 <span class='line'
>1222</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.color.sat
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">sat
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1230 <span class='line'
>1223</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.color.val
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">val
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1231 <span class='line'
>1224</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1232 <span class='line'
>1225</span>
1233 <span class='line'
>1226</span> </span><span class=
"WHIT"> </span><span class=
"COMM">/**
1234 <span class='line'
>1227</span> * Convert HSV to RGB.
1235 <span class='line'
>1228</span> *
1236 <span class='line'
>1229</span> * @private
1237 <span class='line'
>1230</span> *
1238 <span class='line'
>1231</span> * @param {Boolean} [no_update] Tells the function to not update the internal
1239 <span class='line'
>1232</span> * RGB color values.
1240 <span class='line'
>1233</span> * @param {Array} [hsv] The array holding the HSV values you want to convert
1241 <span class='line'
>1234</span> * to RGB. This array must have three elements ordered as:
<var
>hue
</var
>,
1242 <span class='line'
>1235</span> *
<var
>saturation
</var
> and
<var
>value
</var
> - all between
0 and
1. If you do
1243 <span class='line'
>1236</span> * not provide the array, then the internal HSV color values are used.
1244 <span class='line'
>1237</span> *
1245 <span class='line'
>1238</span> * @returns {Array} The RGB values converted from HSV. The array has three
1246 <span class='line'
>1239</span> * elements ordered as:
<var
>red
</var
>,
<var
>green
</var
> and
<var
>blue
</var
>
1247 <span class='line'
>1240</span> * - all with values between
0 and
1.
1248 <span class='line'
>1241</span> */
</span><span class=
"WHIT">
1249 <span class='line'
>1242</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.hsv2rgb
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">function
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">no_update
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">hsv
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1250 <span class='line'
>1243</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.color
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1251 <span class='line'
>1244</span> </span><span class=
"WHIT"> </span><span class=
"NAME">red
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">green
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">blue
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">hue
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">sat
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">val
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1252 <span class='line'
>1245</span>
1253 <span class='line'
>1246</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// Use custom HSV values or the current color.
</span><span class=
"WHIT">
1254 <span class='line'
>1247</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">hsv
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1255 <span class='line'
>1248</span> </span><span class=
"WHIT"> </span><span class=
"NAME">hue
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">hsv
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1256 <span class='line'
>1249</span> </span><span class=
"WHIT"> </span><span class=
"NAME">sat
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">hsv
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1257 <span class='line'
>1250</span> </span><span class=
"WHIT"> </span><span class=
"NAME">val
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">hsv
</span><span class=
"PUNC">[
</span><span class=
"NUMB">2</span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1258 <span class='line'
>1251</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1259 <span class='line'
>1252</span> </span><span class=
"WHIT"> </span><span class=
"NAME">hue
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">color.hue
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1260 <span class='line'
>1253</span> </span><span class=
"WHIT"> </span><span class=
"NAME">sat
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">color.sat
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1261 <span class='line'
>1254</span> </span><span class=
"WHIT"> </span><span class=
"NAME">val
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">color.val
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1262 <span class='line'
>1255</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1263 <span class='line'
>1256</span>
1264 <span class='line'
>1257</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// achromatic (grey)
</span><span class=
"WHIT">
1265 <span class='line'
>1258</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">sat
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1266 <span class='line'
>1259</span> </span><span class=
"WHIT"> </span><span class=
"NAME">red
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">green
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">blue
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">val
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1267 <span class='line'
>1260</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1268 <span class='line'
>1261</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">h
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">hue
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NUMB">6</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1269 <span class='line'
>1262</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">MathFloor
</span><span class=
"PUNC">(
</span><span class=
"NAME">h
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1270 <span class='line'
>1263</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">t1
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">val
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NAME">sat
</span><span class=
"WHIT"> </span><span class=
"PUNC">)
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1271 <span class='line'
>1264</span> </span><span class=
"WHIT"> </span><span class=
"NAME">t2
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">val
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NAME">sat
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"WHIT"> </span><span class=
"NAME">h
</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"WHIT"> </span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">)
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1272 <span class='line'
>1265</span> </span><span class=
"WHIT"> </span><span class=
"NAME">t3
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">val
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NAME">sat
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">h
</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1273 <span class='line'
>1266</span>
1274 <span class='line'
>1267</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">i
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"WHIT"> </span><span class=
"PUNC">||
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"NUMB">6</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT"> </span><span class=
"COMM">//
0° Red
</span><span class=
"WHIT">
1275 <span class='line'
>1268</span> </span><span class=
"WHIT"> </span><span class=
"NAME">red
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">val
</span><span class=
"PUNC">;
</span><span class=
"WHIT"> </span><span class=
"NAME">green
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">t3
</span><span class=
"PUNC">;
</span><span class=
"WHIT"> </span><span class=
"NAME">blue
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">t1
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1276 <span class='line'
>1269</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">i
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT"> </span><span class=
"COMM">//
60° Yellow
</span><span class=
"WHIT">
1277 <span class='line'
>1270</span> </span><span class=
"WHIT"> </span><span class=
"NAME">red
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">t2
</span><span class=
"PUNC">;
</span><span class=
"WHIT"> </span><span class=
"NAME">green
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">val
</span><span class=
"PUNC">;
</span><span class=
"WHIT"> </span><span class=
"NAME">blue
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">t1
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1278 <span class='line'
>1271</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">i
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"NUMB">2</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT"> </span><span class=
"COMM">//
120° Green
</span><span class=
"WHIT">
1279 <span class='line'
>1272</span> </span><span class=
"WHIT"> </span><span class=
"NAME">red
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">t1
</span><span class=
"PUNC">;
</span><span class=
"WHIT"> </span><span class=
"NAME">green
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">val
</span><span class=
"PUNC">;
</span><span class=
"WHIT"> </span><span class=
"NAME">blue
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">t3
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1280 <span class='line'
>1273</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">i
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"NUMB">3</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT"> </span><span class=
"COMM">//
180° Cyan
</span><span class=
"WHIT">
1281 <span class='line'
>1274</span> </span><span class=
"WHIT"> </span><span class=
"NAME">red
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">t1
</span><span class=
"PUNC">;
</span><span class=
"WHIT"> </span><span class=
"NAME">green
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">t2
</span><span class=
"PUNC">;
</span><span class=
"WHIT"> </span><span class=
"NAME">blue
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">val
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1282 <span class='line'
>1275</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">i
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"NUMB">4</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT"> </span><span class=
"COMM">//
240° Blue
</span><span class=
"WHIT">
1283 <span class='line'
>1276</span> </span><span class=
"WHIT"> </span><span class=
"NAME">red
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">t3
</span><span class=
"PUNC">;
</span><span class=
"WHIT"> </span><span class=
"NAME">green
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">t1
</span><span class=
"PUNC">;
</span><span class=
"WHIT"> </span><span class=
"NAME">blue
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">val
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1284 <span class='line'
>1277</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">i
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"NUMB">5</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT"> </span><span class=
"COMM">//
300° Magenta
</span><span class=
"WHIT">
1285 <span class='line'
>1278</span> </span><span class=
"WHIT"> </span><span class=
"NAME">red
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">val
</span><span class=
"PUNC">;
</span><span class=
"WHIT"> </span><span class=
"NAME">green
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">t1
</span><span class=
"PUNC">;
</span><span class=
"WHIT"> </span><span class=
"NAME">blue
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">t2
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1286 <span class='line'
>1279</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1287 <span class='line'
>1280</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1288 <span class='line'
>1281</span>
1289 <span class='line'
>1282</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"PUNC">!
</span><span class=
"NAME">no_update
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1290 <span class='line'
>1283</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color.red
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">red
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1291 <span class='line'
>1284</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color.green
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">green
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1292 <span class='line'
>1285</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color.blue
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">blue
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1293 <span class='line'
>1286</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1294 <span class='line'
>1287</span>
1295 <span class='line'
>1288</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">return
</span><span class=
"WHIT"> </span><span class=
"PUNC">[
</span><span class=
"NAME">red
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">green
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">blue
</span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1296 <span class='line'
>1289</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1297 <span class='line'
>1290</span>
1298 <span class='line'
>1291</span> </span><span class=
"WHIT"> </span><span class=
"COMM">/**
1299 <span class='line'
>1292</span> * Convert RGB to hexadecimal representation (internally).
1300 <span class='line'
>1293</span> * @private
1301 <span class='line'
>1294</span> */
</span><span class=
"WHIT">
1302 <span class='line'
>1295</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.rgb2hex
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">function
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1303 <span class='line'
>1296</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">hex
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"STRN">'#'
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">rgb
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"PUNC">[
</span><span class=
"STRN">'red'
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"STRN">'green'
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"STRN">'blue'
</span><span class=
"PUNC">]
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">val
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1304 <span class='line'
>1297</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.color
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1305 <span class='line'
>1298</span>
1306 <span class='line'
>1299</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">for
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">i
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">;
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"WHIT"> </span><span class=
"PUNC"><</span><span class=
"WHIT"> </span><span class=
"NUMB">3</span><span class=
"PUNC">;
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"PUNC">++
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1307 <span class='line'
>1300</span> </span><span class=
"WHIT"> </span><span class=
"NAME">val
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">MathRound
</span><span class=
"PUNC">(
</span><span class=
"NAME">color
</span><span class=
"PUNC">[
</span><span class=
"NAME">rgb
</span><span class=
"PUNC">[
</span><span class=
"NAME">i
</span><span class=
"PUNC">]
</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NUMB">255</span><span class=
"PUNC">)
</span><span class=
"PUNC">.
</span><span class=
"NAME">toString
</span><span class=
"PUNC">(
</span><span class=
"NUMB">16</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1308 <span class='line'
>1301</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">val.length
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1309 <span class='line'
>1302</span> </span><span class=
"WHIT"> </span><span class=
"NAME">val
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"STRN">'
0'
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">val
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1310 <span class='line'
>1303</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1311 <span class='line'
>1304</span> </span><span class=
"WHIT"> </span><span class=
"NAME">hex
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">val
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1312 <span class='line'
>1305</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1313 <span class='line'
>1306</span>
1314 <span class='line'
>1307</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color.hex
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">hex
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1315 <span class='line'
>1308</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1316 <span class='line'
>1309</span>
1317 <span class='line'
>1310</span> </span><span class=
"WHIT"> </span><span class=
"COMM">/**
1318 <span class='line'
>1311</span> * Convert the hexadecimal representation of color to RGB values (internally).
1319 <span class='line'
>1312</span> * @private
1320 <span class='line'
>1313</span> */
</span><span class=
"WHIT">
1321 <span class='line'
>1314</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.hex2rgb
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">function
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1322 <span class='line'
>1315</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">rgb
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"PUNC">[
</span><span class=
"STRN">'red'
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"STRN">'green'
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"STRN">'blue'
</span><span class=
"PUNC">]
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">val
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1323 <span class='line'
>1316</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.color
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1324 <span class='line'
>1317</span> </span><span class=
"WHIT"> </span><span class=
"NAME">hex
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">color.hex
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1325 <span class='line'
>1318</span>
1326 <span class='line'
>1319</span> </span><span class=
"WHIT"> </span><span class=
"NAME">hex
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">hex.substr
</span><span class=
"PUNC">(
</span><span class=
"NUMB">1</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1327 <span class='line'
>1320</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">hex.length
</span><span class=
"WHIT"> </span><span class=
"PUNC">!==
</span><span class=
"WHIT"> </span><span class=
"NUMB">6</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1328 <span class='line'
>1321</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">return
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1329 <span class='line'
>1322</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1330 <span class='line'
>1323</span>
1331 <span class='line'
>1324</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">for
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">i
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">;
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"WHIT"> </span><span class=
"PUNC"><</span><span class=
"WHIT"> </span><span class=
"NUMB">3</span><span class=
"PUNC">;
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"PUNC">++
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1332 <span class='line'
>1325</span> </span><span class=
"WHIT"> </span><span class=
"NAME">val
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">hex.substr
</span><span class=
"PUNC">(
</span><span class=
"NAME">i
</span><span class=
"PUNC">*
</span><span class=
"NUMB">2</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">2</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1333 <span class='line'
>1326</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"PUNC">[
</span><span class=
"NAME">rgb
</span><span class=
"PUNC">[
</span><span class=
"NAME">i
</span><span class=
"PUNC">]
</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">parseInt
</span><span class=
"PUNC">(
</span><span class=
"NAME">val
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">16</span><span class=
"PUNC">)
</span><span class=
"PUNC">/
</span><span class=
"NUMB">255</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1334 <span class='line'
>1327</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1335 <span class='line'
>1328</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1336 <span class='line'
>1329</span>
1337 <span class='line'
>1330</span> </span><span class=
"WHIT"> </span><span class=
"COMM">/**
1338 <span class='line'
>1331</span> * Convert RGB to CIE Lab (internally).
1339 <span class='line'
>1332</span> * @private
1340 <span class='line'
>1333</span> */
</span><span class=
"WHIT">
1341 <span class='line'
>1334</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.rgb2lab
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">function
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1342 <span class='line'
>1335</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.color
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1343 <span class='line'
>1336</span> </span><span class=
"WHIT"> </span><span class=
"NAME">lab
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.xyz2lab
</span><span class=
"PUNC">(
</span><span class=
"NAME">_self.rgb2xyz
</span><span class=
"PUNC">(
</span><span class=
"PUNC">[
</span><span class=
"NAME">color.red
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">color.green
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1344 <span class='line'
>1337</span> </span><span class=
"NAME">color.blue
</span><span class=
"PUNC">]
</span><span class=
"PUNC">)
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1345 <span class='line'
>1338</span>
1346 <span class='line'
>1339</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color.cie_l
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">lab
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1347 <span class='line'
>1340</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color.cie_a
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">lab
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1348 <span class='line'
>1341</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color.cie_b
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">lab
</span><span class=
"PUNC">[
</span><span class=
"NUMB">2</span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1349 <span class='line'
>1342</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1350 <span class='line'
>1343</span>
1351 <span class='line'
>1344</span> </span><span class=
"WHIT"> </span><span class=
"COMM">/**
1352 <span class='line'
>1345</span> * Convert CIE Lab values to RGB values (internally).
1353 <span class='line'
>1346</span> * @private
1354 <span class='line'
>1347</span> */
</span><span class=
"WHIT">
1355 <span class='line'
>1348</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.lab2rgb
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">function
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1356 <span class='line'
>1349</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.color
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1357 <span class='line'
>1350</span> </span><span class=
"WHIT"> </span><span class=
"NAME">rgb
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.xyz2rgb
</span><span class=
"PUNC">(
</span><span class=
"NAME">_self.lab2xyz
</span><span class=
"PUNC">(
</span><span class=
"NAME">color.cie_l
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">color.cie_a
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1358 <span class='line'
>1351</span> </span><span class=
"NAME">color.cie_b
</span><span class=
"PUNC">)
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1359 <span class='line'
>1352</span>
1360 <span class='line'
>1353</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color.red
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">rgb
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1361 <span class='line'
>1354</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color.green
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">rgb
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1362 <span class='line'
>1355</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color.blue
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">rgb
</span><span class=
"PUNC">[
</span><span class=
"NUMB">2</span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1363 <span class='line'
>1356</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1364 <span class='line'
>1357</span>
1365 <span class='line'
>1358</span> </span><span class=
"WHIT"> </span><span class=
"COMM">/**
1366 <span class='line'
>1359</span> * Convert XYZ color values into CIE Lab values.
1367 <span class='line'
>1360</span> *
1368 <span class='line'
>1361</span> * @private
1369 <span class='line'
>1362</span> *
1370 <span class='line'
>1363</span> * @param {Array} xyz The array holding the XYZ color values in order:
1371 <span class='line'
>1364</span> *
<var
>X
</var
>,
<var
>Y
</var
> and
<var
>Z
</var
>.
1372 <span class='line'
>1365</span> *
1373 <span class='line'
>1366</span> * @returns {Array} An array holding the CIE Lab values in order:
1374 <span class='line'
>1367</span> *
<var
>L
</var
>,
<var
>a
</var
> and
<var
>b
</var
>.
1375 <span class='line'
>1368</span> */
</span><span class=
"WHIT">
1376 <span class='line'
>1369</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.xyz2lab
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">function
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">xyz
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1377 <span class='line'
>1370</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">cfg
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">config.lab
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1378 <span class='line'
>1371</span>
1379 <span class='line'
>1372</span> </span><span class=
"WHIT"> </span><span class=
"COMM">//
216/
24389 or (
6/
29)^
3 (both =
0.008856...)
</span><span class=
"WHIT">
1380 <span class='line'
>1373</span> </span><span class=
"WHIT"> </span><span class=
"NAME">e
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">216</span><span class=
"PUNC">/
</span><span class=
"NUMB">24389</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1381 <span class='line'
>1374</span>
1382 <span class='line'
>1375</span> </span><span class=
"WHIT"> </span><span class=
"COMM">//
903.296296...
</span><span class=
"WHIT">
1383 <span class='line'
>1376</span> </span><span class=
"WHIT"> </span><span class=
"NAME">k
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">24389</span><span class=
"PUNC">/
</span><span class=
"NUMB">27</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1384 <span class='line'
>1377</span>
1385 <span class='line'
>1378</span> </span><span class=
"WHIT"> </span><span class=
"NAME">xyz
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">/
</span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">cfg.w_x
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1386 <span class='line'
>1379</span> </span><span class=
"WHIT"> </span><span class=
"NAME">xyz
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">/
</span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">cfg.w_y
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1387 <span class='line'
>1380</span> </span><span class=
"WHIT"> </span><span class=
"NAME">xyz
</span><span class=
"PUNC">[
</span><span class=
"NUMB">2</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">/
</span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">cfg.w_z
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1388 <span class='line'
>1381</span>
1389 <span class='line'
>1382</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">xyz
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">></span><span class=
"WHIT"> </span><span class=
"NAME">e
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1390 <span class='line'
>1383</span> </span><span class=
"WHIT"> </span><span class=
"NAME">xyz
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">MathPow
</span><span class=
"PUNC">(
</span><span class=
"NAME">xyz
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"PUNC">/
</span><span class=
"NUMB">3</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1391 <span class='line'
>1384</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1392 <span class='line'
>1385</span> </span><span class=
"WHIT"> </span><span class=
"NAME">xyz
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">k
</span><span class=
"PUNC">*
</span><span class=
"NAME">xyz
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NUMB">16</span><span class=
"PUNC">)
</span><span class=
"PUNC">/
</span><span class=
"NUMB">116</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1393 <span class='line'
>1386</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1394 <span class='line'
>1387</span>
1395 <span class='line'
>1388</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">xyz
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">></span><span class=
"WHIT"> </span><span class=
"NAME">e
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1396 <span class='line'
>1389</span> </span><span class=
"WHIT"> </span><span class=
"NAME">xyz
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">MathPow
</span><span class=
"PUNC">(
</span><span class=
"NAME">xyz
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"PUNC">/
</span><span class=
"NUMB">3</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1397 <span class='line'
>1390</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1398 <span class='line'
>1391</span> </span><span class=
"WHIT"> </span><span class=
"NAME">xyz
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">k
</span><span class=
"PUNC">*
</span><span class=
"NAME">xyz
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NUMB">16</span><span class=
"PUNC">)
</span><span class=
"PUNC">/
</span><span class=
"NUMB">116</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1399 <span class='line'
>1392</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1400 <span class='line'
>1393</span>
1401 <span class='line'
>1394</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">xyz
</span><span class=
"PUNC">[
</span><span class=
"NUMB">2</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">></span><span class=
"WHIT"> </span><span class=
"NAME">e
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1402 <span class='line'
>1395</span> </span><span class=
"WHIT"> </span><span class=
"NAME">xyz
</span><span class=
"PUNC">[
</span><span class=
"NUMB">2</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">MathPow
</span><span class=
"PUNC">(
</span><span class=
"NAME">xyz
</span><span class=
"PUNC">[
</span><span class=
"NUMB">2</span><span class=
"PUNC">]
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"PUNC">/
</span><span class=
"NUMB">3</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1403 <span class='line'
>1396</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1404 <span class='line'
>1397</span> </span><span class=
"WHIT"> </span><span class=
"NAME">xyz
</span><span class=
"PUNC">[
</span><span class=
"NUMB">2</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">k
</span><span class=
"PUNC">*
</span><span class=
"NAME">xyz
</span><span class=
"PUNC">[
</span><span class=
"NUMB">2</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NUMB">16</span><span class=
"PUNC">)
</span><span class=
"PUNC">/
</span><span class=
"NUMB">116</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1405 <span class='line'
>1398</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1406 <span class='line'
>1399</span>
1407 <span class='line'
>1400</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">cie_l
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">116</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NAME">xyz
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NUMB">16</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1408 <span class='line'
>1401</span> </span><span class=
"WHIT"> </span><span class=
"NAME">cie_a
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">500</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">xyz
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NAME">xyz
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"PUNC">)
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1409 <span class='line'
>1402</span> </span><span class=
"WHIT"> </span><span class=
"NAME">cie_b
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">200</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">xyz
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NAME">xyz
</span><span class=
"PUNC">[
</span><span class=
"NUMB">2</span><span class=
"PUNC">]
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1410 <span class='line'
>1403</span>
1411 <span class='line'
>1404</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">return
</span><span class=
"WHIT"> </span><span class=
"PUNC">[
</span><span class=
"NAME">cie_l
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">cie_a
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">cie_b
</span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1412 <span class='line'
>1405</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1413 <span class='line'
>1406</span>
1414 <span class='line'
>1407</span> </span><span class=
"WHIT"> </span><span class=
"COMM">/**
1415 <span class='line'
>1408</span> * Convert CIE Lab values to XYZ color values.
1416 <span class='line'
>1409</span> *
1417 <span class='line'
>1410</span> * @private
1418 <span class='line'
>1411</span> *
1419 <span class='line'
>1412</span> * @param {Number} cie_l The color lightness value.
1420 <span class='line'
>1413</span> * @param {Number} cie_a The a* color opponent.
1421 <span class='line'
>1414</span> * @param {Number} cie_b The b* color opponent.
1422 <span class='line'
>1415</span> *
1423 <span class='line'
>1416</span> * @returns {Array} An array holding the XYZ color values in order:
1424 <span class='line'
>1417</span> *
<var
>X
</var
>,
<var
>Y
</var
> and
<var
>Z
</var
>.
1425 <span class='line'
>1418</span> */
</span><span class=
"WHIT">
1426 <span class='line'
>1419</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.lab2xyz
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">function
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">cie_l
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">cie_a
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">cie_b
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1427 <span class='line'
>1420</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">y
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">cie_l
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NUMB">16</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">/
</span><span class=
"WHIT"> </span><span class=
"NUMB">116</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1428 <span class='line'
>1421</span> </span><span class=
"WHIT"> </span><span class=
"NAME">x
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">y
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">cie_a
</span><span class=
"WHIT"> </span><span class=
"PUNC">/
</span><span class=
"WHIT"> </span><span class=
"NUMB">500</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1429 <span class='line'
>1422</span> </span><span class=
"WHIT"> </span><span class=
"NAME">z
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">y
</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NAME">cie_b
</span><span class=
"WHIT"> </span><span class=
"PUNC">/
</span><span class=
"WHIT"> </span><span class=
"NUMB">200</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1430 <span class='line'
>1423</span>
1431 <span class='line'
>1424</span> </span><span class=
"WHIT"> </span><span class=
"COMM">//
0.206896551...
</span><span class=
"WHIT">
1432 <span class='line'
>1425</span> </span><span class=
"WHIT"> </span><span class=
"NAME">e
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">6</span><span class=
"PUNC">/
</span><span class=
"NUMB">29</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1433 <span class='line'
>1426</span>
1434 <span class='line'
>1427</span> </span><span class=
"WHIT"> </span><span class=
"COMM">//
7.787037...
</span><span class=
"WHIT">
1435 <span class='line'
>1428</span> </span><span class=
"WHIT"> </span><span class=
"NAME">k
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"PUNC">/
</span><span class=
"NUMB">3</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NAME">MathPow
</span><span class=
"PUNC">(
</span><span class=
"NUMB">29</span><span class=
"PUNC">/
</span><span class=
"NUMB">6</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">2</span><span class=
"PUNC">)
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1436 <span class='line'
>1429</span>
1437 <span class='line'
>1430</span> </span><span class=
"WHIT"> </span><span class=
"COMM">//
0.137931...
</span><span class=
"WHIT">
1438 <span class='line'
>1431</span> </span><span class=
"WHIT"> </span><span class=
"NAME">t
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">16</span><span class=
"PUNC">/
</span><span class=
"NUMB">116</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1439 <span class='line'
>1432</span> </span><span class=
"WHIT"> </span><span class=
"NAME">cfg
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">config.lab
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1440 <span class='line'
>1433</span>
1441 <span class='line'
>1434</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">x
</span><span class=
"WHIT"> </span><span class=
"PUNC">></span><span class=
"WHIT"> </span><span class=
"NAME">e
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1442 <span class='line'
>1435</span> </span><span class=
"WHIT"> </span><span class=
"NAME">x
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">MathPow
</span><span class=
"PUNC">(
</span><span class=
"NAME">x
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">3</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1443 <span class='line'
>1436</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1444 <span class='line'
>1437</span> </span><span class=
"WHIT"> </span><span class=
"NAME">x
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">x
</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NAME">t
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">/
</span><span class=
"WHIT"> </span><span class=
"NAME">k
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1445 <span class='line'
>1438</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1446 <span class='line'
>1439</span>
1447 <span class='line'
>1440</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">y
</span><span class=
"WHIT"> </span><span class=
"PUNC">></span><span class=
"WHIT"> </span><span class=
"NAME">e
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1448 <span class='line'
>1441</span> </span><span class=
"WHIT"> </span><span class=
"NAME">y
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">MathPow
</span><span class=
"PUNC">(
</span><span class=
"NAME">y
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">3</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1449 <span class='line'
>1442</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1450 <span class='line'
>1443</span> </span><span class=
"WHIT"> </span><span class=
"NAME">y
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">y
</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NAME">t
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">/
</span><span class=
"WHIT"> </span><span class=
"NAME">k
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1451 <span class='line'
>1444</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1452 <span class='line'
>1445</span>
1453 <span class='line'
>1446</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">z
</span><span class=
"WHIT"> </span><span class=
"PUNC">></span><span class=
"WHIT"> </span><span class=
"NAME">e
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1454 <span class='line'
>1447</span> </span><span class=
"WHIT"> </span><span class=
"NAME">z
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">MathPow
</span><span class=
"PUNC">(
</span><span class=
"NAME">z
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">3</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1455 <span class='line'
>1448</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1456 <span class='line'
>1449</span> </span><span class=
"WHIT"> </span><span class=
"NAME">z
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">z
</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NAME">t
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">/
</span><span class=
"WHIT"> </span><span class=
"NAME">k
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1457 <span class='line'
>1450</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1458 <span class='line'
>1451</span>
1459 <span class='line'
>1452</span> </span><span class=
"WHIT"> </span><span class=
"NAME">x
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">cfg.w_x
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1460 <span class='line'
>1453</span> </span><span class=
"WHIT"> </span><span class=
"NAME">y
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">cfg.w_y
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1461 <span class='line'
>1454</span> </span><span class=
"WHIT"> </span><span class=
"NAME">z
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">cfg.w_z
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1462 <span class='line'
>1455</span>
1463 <span class='line'
>1456</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">return
</span><span class=
"WHIT"> </span><span class=
"PUNC">[
</span><span class=
"NAME">x
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">y
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">z
</span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1464 <span class='line'
>1457</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1465 <span class='line'
>1458</span>
1466 <span class='line'
>1459</span> </span><span class=
"WHIT"> </span><span class=
"COMM">/**
1467 <span class='line'
>1460</span> * Convert XYZ color values to RGB.
1468 <span class='line'
>1461</span> *
1469 <span class='line'
>1462</span> * @private
1470 <span class='line'
>1463</span> *
1471 <span class='line'
>1464</span> * @param {Array} xyz The array holding the XYZ color values in order:
1472 <span class='line'
>1465</span> *
<var
>X
</var
>,
<var
>Y
</var
> and
<var
>Z
</var
>
1473 <span class='line'
>1466</span> *
1474 <span class='line'
>1467</span> * @returns {Array} An array holding the RGB values in order:
<var
>red
</var
>,
1475 <span class='line'
>1468</span> *
<var
>green
</var
> and
<var
>blue
</var
>.
1476 <span class='line'
>1469</span> */
</span><span class=
"WHIT">
1477 <span class='line'
>1470</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.xyz2rgb
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">function
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">xyz
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1478 <span class='line'
>1471</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">rgb
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.calc_m1x3
</span><span class=
"PUNC">(
</span><span class=
"NAME">xyz
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">config.lab.m_i
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1479 <span class='line'
>1472</span>
1480 <span class='line'
>1473</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">rgb
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">></span><span class=
"WHIT"> </span><span class=
"NUMB">0.0031308</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1481 <span class='line'
>1474</span> </span><span class=
"WHIT"> </span><span class=
"NAME">rgb
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">1.055</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NAME">MathPow
</span><span class=
"PUNC">(
</span><span class=
"NAME">rgb
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"WHIT"> </span><span class=
"PUNC">/
</span><span class=
"WHIT"> </span><span class=
"NUMB">2.4</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NUMB">0.055</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1482 <span class='line'
>1475</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1483 <span class='line'
>1476</span> </span><span class=
"WHIT"> </span><span class=
"NAME">rgb
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">12.9232</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1484 <span class='line'
>1477</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1485 <span class='line'
>1478</span>
1486 <span class='line'
>1479</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">rgb
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">></span><span class=
"WHIT"> </span><span class=
"NUMB">0.0031308</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1487 <span class='line'
>1480</span> </span><span class=
"WHIT"> </span><span class=
"NAME">rgb
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">1.055</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NAME">MathPow
</span><span class=
"PUNC">(
</span><span class=
"NAME">rgb
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"WHIT"> </span><span class=
"PUNC">/
</span><span class=
"WHIT"> </span><span class=
"NUMB">2.4</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NUMB">0.055</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1488 <span class='line'
>1481</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1489 <span class='line'
>1482</span> </span><span class=
"WHIT"> </span><span class=
"NAME">rgb
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">12.9232</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1490 <span class='line'
>1483</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1491 <span class='line'
>1484</span>
1492 <span class='line'
>1485</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">rgb
</span><span class=
"PUNC">[
</span><span class=
"NUMB">2</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">></span><span class=
"WHIT"> </span><span class=
"NUMB">0.0031308</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1493 <span class='line'
>1486</span> </span><span class=
"WHIT"> </span><span class=
"NAME">rgb
</span><span class=
"PUNC">[
</span><span class=
"NUMB">2</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">1.055</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NAME">MathPow
</span><span class=
"PUNC">(
</span><span class=
"NAME">rgb
</span><span class=
"PUNC">[
</span><span class=
"NUMB">2</span><span class=
"PUNC">]
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"WHIT"> </span><span class=
"PUNC">/
</span><span class=
"WHIT"> </span><span class=
"NUMB">2.4</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NUMB">0.055</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1494 <span class='line'
>1487</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1495 <span class='line'
>1488</span> </span><span class=
"WHIT"> </span><span class=
"NAME">rgb
</span><span class=
"PUNC">[
</span><span class=
"NUMB">2</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">12.9232</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1496 <span class='line'
>1489</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1497 <span class='line'
>1490</span>
1498 <span class='line'
>1491</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">rgb
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC"><</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1499 <span class='line'
>1492</span> </span><span class=
"WHIT"> </span><span class=
"NAME">rgb
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1500 <span class='line'
>1493</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">rgb
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">></span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1501 <span class='line'
>1494</span> </span><span class=
"WHIT"> </span><span class=
"NAME">rgb
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1502 <span class='line'
>1495</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1503 <span class='line'
>1496</span>
1504 <span class='line'
>1497</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">rgb
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC"><</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1505 <span class='line'
>1498</span> </span><span class=
"WHIT"> </span><span class=
"NAME">rgb
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1506 <span class='line'
>1499</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">rgb
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">></span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1507 <span class='line'
>1500</span> </span><span class=
"WHIT"> </span><span class=
"NAME">rgb
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1508 <span class='line'
>1501</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1509 <span class='line'
>1502</span>
1510 <span class='line'
>1503</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">rgb
</span><span class=
"PUNC">[
</span><span class=
"NUMB">2</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC"><</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1511 <span class='line'
>1504</span> </span><span class=
"WHIT"> </span><span class=
"NAME">rgb
</span><span class=
"PUNC">[
</span><span class=
"NUMB">2</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1512 <span class='line'
>1505</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">rgb
</span><span class=
"PUNC">[
</span><span class=
"NUMB">2</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">></span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1513 <span class='line'
>1506</span> </span><span class=
"WHIT"> </span><span class=
"NAME">rgb
</span><span class=
"PUNC">[
</span><span class=
"NUMB">2</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1514 <span class='line'
>1507</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1515 <span class='line'
>1508</span>
1516 <span class='line'
>1509</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">return
</span><span class=
"WHIT"> </span><span class=
"NAME">rgb
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1517 <span class='line'
>1510</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1518 <span class='line'
>1511</span>
1519 <span class='line'
>1512</span> </span><span class=
"WHIT"> </span><span class=
"COMM">/**
1520 <span class='line'
>1513</span> * Convert RGB values to XYZ color values.
1521 <span class='line'
>1514</span> *
1522 <span class='line'
>1515</span> * @private
1523 <span class='line'
>1516</span> *
1524 <span class='line'
>1517</span> * @param {Array} rgb The array holding the RGB values in order:
1525 <span class='line'
>1518</span> *
<var
>red
</var
>,
<var
>green
</var
> and
<var
>blue
</var
>.
1526 <span class='line'
>1519</span> *
1527 <span class='line'
>1520</span> * @returns {Array} An array holding the XYZ color values in order:
1528 <span class='line'
>1521</span> *
<var
>X
</var
>,
<var
>Y
</var
> and
<var
>Z
</var
>.
1529 <span class='line'
>1522</span> */
</span><span class=
"WHIT">
1530 <span class='line'
>1523</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.rgb2xyz
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">function
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">rgb
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1531 <span class='line'
>1524</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">rgb
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">></span><span class=
"WHIT"> </span><span class=
"NUMB">0.04045</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1532 <span class='line'
>1525</span> </span><span class=
"WHIT"> </span><span class=
"NAME">rgb
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">MathPow
</span><span class=
"PUNC">(
</span><span class=
"PUNC">(
</span><span class=
"WHIT"> </span><span class=
"NAME">rgb
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NUMB">0.055</span><span class=
"WHIT"> </span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">/
</span><span class=
"WHIT"> </span><span class=
"NUMB">1.055</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">2.4</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1533 <span class='line'
>1526</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1534 <span class='line'
>1527</span> </span><span class=
"WHIT"> </span><span class=
"NAME">rgb
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">/
</span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">12.9232</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1535 <span class='line'
>1528</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1536 <span class='line'
>1529</span>
1537 <span class='line'
>1530</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">rgb
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">></span><span class=
"WHIT"> </span><span class=
"NUMB">0.04045</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1538 <span class='line'
>1531</span> </span><span class=
"WHIT"> </span><span class=
"NAME">rgb
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">MathPow
</span><span class=
"PUNC">(
</span><span class=
"PUNC">(
</span><span class=
"WHIT"> </span><span class=
"NAME">rgb
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NUMB">0.055</span><span class=
"WHIT"> </span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">/
</span><span class=
"WHIT"> </span><span class=
"NUMB">1.055</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">2.4</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1539 <span class='line'
>1532</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1540 <span class='line'
>1533</span> </span><span class=
"WHIT"> </span><span class=
"NAME">rgb
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">/
</span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">12.9232</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1541 <span class='line'
>1534</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1542 <span class='line'
>1535</span>
1543 <span class='line'
>1536</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">rgb
</span><span class=
"PUNC">[
</span><span class=
"NUMB">2</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">></span><span class=
"WHIT"> </span><span class=
"NUMB">0.04045</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1544 <span class='line'
>1537</span> </span><span class=
"WHIT"> </span><span class=
"NAME">rgb
</span><span class=
"PUNC">[
</span><span class=
"NUMB">2</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">MathPow
</span><span class=
"PUNC">(
</span><span class=
"PUNC">(
</span><span class=
"WHIT"> </span><span class=
"NAME">rgb
</span><span class=
"PUNC">[
</span><span class=
"NUMB">2</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NUMB">0.055</span><span class=
"WHIT"> </span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">/
</span><span class=
"WHIT"> </span><span class=
"NUMB">1.055</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">2.4</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1545 <span class='line'
>1538</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1546 <span class='line'
>1539</span> </span><span class=
"WHIT"> </span><span class=
"NAME">rgb
</span><span class=
"PUNC">[
</span><span class=
"NUMB">2</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">/
</span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">12.9232</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1547 <span class='line'
>1540</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1548 <span class='line'
>1541</span>
1549 <span class='line'
>1542</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">return
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.calc_m1x3
</span><span class=
"PUNC">(
</span><span class=
"NAME">rgb
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">config.lab.m
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1550 <span class='line'
>1543</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1551 <span class='line'
>1544</span>
1552 <span class='line'
>1545</span> </span><span class=
"WHIT"> </span><span class=
"COMM">/**
1553 <span class='line'
>1546</span> * Update the color space visualisation. This method updates the color chart
1554 <span class='line'
>1547</span> * and/or the color slider, and the associated controls, each as needed when
1555 <span class='line'
>1548</span> * a color key is updated.
1556 <span class='line'
>1549</span> *
1557 <span class='line'
>1550</span> * @private
1558 <span class='line'
>1551</span> *
1559 <span class='line'
>1552</span> * @param {String} updated_ckey The color key that was updated.
1560 <span class='line'
>1553</span> * @param {Boolean} [force=false] Tells the function to force an update. The
1561 <span class='line'
>1554</span> * Canvas is not updated when the color mixer panel is not visible.
1562 <span class='line'
>1555</span> *
1563 <span class='line'
>1556</span> * @returns {Boolean} If the operation was successful, or false if not.
1564 <span class='line'
>1557</span> */
</span><span class=
"WHIT">
1565 <span class='line'
>1558</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.update_canvas
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">function
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">updated_ckey
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">force
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1566 <span class='line'
>1559</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">_self.panelSelector.tabId
</span><span class=
"WHIT"> </span><span class=
"PUNC">!==
</span><span class=
"WHIT"> </span><span class=
"STRN">'mixer'
</span><span class=
"WHIT"> </span><span class=
"PUNC">&&
</span><span class=
"WHIT"> </span><span class=
"PUNC">!
</span><span class=
"NAME">force
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1567 <span class='line'
>1560</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.update_canvas_needed
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">true
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1568 <span class='line'
>1561</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">return
</span><span class=
"WHIT"> </span><span class=
"KEYW">true
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1569 <span class='line'
>1562</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1570 <span class='line'
>1563</span>
1571 <span class='line'
>1564</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.update_canvas_needed
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">false
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1572 <span class='line'
>1565</span>
1573 <span class='line'
>1566</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">slider
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.elems.slider.style
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1574 <span class='line'
>1567</span> </span><span class=
"WHIT"> </span><span class=
"NAME">chart
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.elems.chartDot.style
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1575 <span class='line'
>1568</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.color
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1576 <span class='line'
>1569</span> </span><span class=
"WHIT"> </span><span class=
"NAME">ckey
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.ckey_active
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1577 <span class='line'
>1570</span> </span><span class=
"WHIT"> </span><span class=
"NAME">group
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.ckey_active_group
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1578 <span class='line'
>1571</span> </span><span class=
"WHIT"> </span><span class=
"NAME">adjoint
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.ckey_adjoint
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1579 <span class='line'
>1572</span> </span><span class=
"WHIT"> </span><span class=
"NAME">width
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.chartWidth
</span><span class=
"WHIT"> </span><span class=
"PUNC">/
</span><span class=
"WHIT"> </span><span class=
"NAME">resScale
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1580 <span class='line'
>1573</span> </span><span class=
"WHIT"> </span><span class=
"NAME">height
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.chartHeight
</span><span class=
"WHIT"> </span><span class=
"PUNC">/
</span><span class=
"WHIT"> </span><span class=
"NAME">resScale
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1581 <span class='line'
>1574</span> </span><span class=
"WHIT"> </span><span class=
"NAME">mx
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">my
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">sy
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1582 <span class='line'
>1575</span>
1583 <span class='line'
>1576</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// Update the slider which shows the position of the active ckey.
</span><span class=
"WHIT">
1584 <span class='line'
>1577</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">updated_ckey
</span><span class=
"WHIT"> </span><span class=
"PUNC">!==
</span><span class=
"WHIT"> </span><span class=
"NAME">adjoint
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">&&
</span><span class=
"WHIT"> </span><span class=
"NAME">updated_ckey
</span><span class=
"WHIT"> </span><span class=
"PUNC">!==
</span><span class=
"WHIT"> </span><span class=
"NAME">adjoint
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">&&
</span><span class=
"WHIT">
1585 <span class='line'
>1578</span> </span><span class=
"NAME">_self.ev_canvas_mode
</span><span class=
"WHIT"> </span><span class=
"PUNC">!==
</span><span class=
"WHIT"> </span><span class=
"STRN">'chart'
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1586 <span class='line'
>1579</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">group
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"STRN">'lab'
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1587 <span class='line'
>1580</span> </span><span class=
"WHIT"> </span><span class=
"NAME">sy
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">color
</span><span class=
"PUNC">[
</span><span class=
"NAME">ckey
</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NAME">config.inputValues
</span><span class=
"PUNC">[
</span><span class=
"NAME">ckey
</span><span class=
"PUNC">]
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">/
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.abs_max
</span><span class=
"PUNC">[
</span><span class=
"NAME">ckey
</span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1588 <span class='line'
>1581</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1589 <span class='line'
>1582</span> </span><span class=
"WHIT"> </span><span class=
"NAME">sy
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"PUNC">[
</span><span class=
"NAME">ckey
</span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1590 <span class='line'
>1583</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1591 <span class='line'
>1584</span>
1592 <span class='line'
>1585</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">ckey
</span><span class=
"WHIT"> </span><span class=
"PUNC">!==
</span><span class=
"WHIT"> </span><span class=
"STRN">'hue'
</span><span class=
"WHIT"> </span><span class=
"PUNC">&&
</span><span class=
"WHIT"> </span><span class=
"NAME">group
</span><span class=
"WHIT"> </span><span class=
"PUNC">!==
</span><span class=
"WHIT"> </span><span class=
"STRN">'lab'
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1593 <span class='line'
>1586</span> </span><span class=
"WHIT"> </span><span class=
"NAME">sy
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NAME">sy
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1594 <span class='line'
>1587</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1595 <span class='line'
>1588</span>
1596 <span class='line'
>1589</span> </span><span class=
"WHIT"> </span><span class=
"NAME">slider.top
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">MathRound
</span><span class=
"PUNC">(
</span><span class=
"NAME">sy
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NAME">height
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">'px'
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1597 <span class='line'
>1590</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1598 <span class='line'
>1591</span>
1599 <span class='line'
>1592</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// Update the chart dot.
</span><span class=
"WHIT">
1600 <span class='line'
>1593</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">updated_ckey
</span><span class=
"WHIT"> </span><span class=
"PUNC">!==
</span><span class=
"WHIT"> </span><span class=
"NAME">ckey
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1601 <span class='line'
>1594</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">group
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"STRN">'lab'
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1602 <span class='line'
>1595</span> </span><span class=
"WHIT"> </span><span class=
"NAME">mx
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">color
</span><span class=
"PUNC">[
</span><span class=
"NAME">adjoint
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NAME">config.inputValues
</span><span class=
"PUNC">[
</span><span class=
"NAME">adjoint
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"PUNC">]
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"PUNC">)
</span><span class=
"WHIT">
1603 <span class='line'
>1596</span> </span><span class=
"PUNC">/
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.abs_max
</span><span class=
"PUNC">[
</span><span class=
"NAME">adjoint
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1604 <span class='line'
>1597</span> </span><span class=
"WHIT"> </span><span class=
"NAME">my
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">color
</span><span class=
"PUNC">[
</span><span class=
"NAME">adjoint
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NAME">config.inputValues
</span><span class=
"PUNC">[
</span><span class=
"NAME">adjoint
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"PUNC">]
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"PUNC">)
</span><span class=
"WHIT">
1605 <span class='line'
>1598</span> </span><span class=
"PUNC">/
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.abs_max
</span><span class=
"PUNC">[
</span><span class=
"NAME">adjoint
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1606 <span class='line'
>1599</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1607 <span class='line'
>1600</span> </span><span class=
"WHIT"> </span><span class=
"NAME">mx
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"PUNC">[
</span><span class=
"NAME">adjoint
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1608 <span class='line'
>1601</span> </span><span class=
"WHIT"> </span><span class=
"NAME">my
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"PUNC">[
</span><span class=
"NAME">adjoint
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1609 <span class='line'
>1602</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1610 <span class='line'
>1603</span>
1611 <span class='line'
>1604</span> </span><span class=
"WHIT"> </span><span class=
"NAME">chart.top
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">MathRound
</span><span class=
"PUNC">(
</span><span class=
"NAME">my
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NAME">height
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">'px'
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1612 <span class='line'
>1605</span> </span><span class=
"WHIT"> </span><span class=
"NAME">chart.left
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">MathRound
</span><span class=
"PUNC">(
</span><span class=
"NAME">mx
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NAME">width
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">'px'
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1613 <span class='line'
>1606</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1614 <span class='line'
>1607</span>
1615 <span class='line'
>1608</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"PUNC">!
</span><span class=
"NAME">_self.draw_chart
</span><span class=
"PUNC">(
</span><span class=
"NAME">updated_ckey
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">||
</span><span class=
"WHIT"> </span><span class=
"PUNC">!
</span><span class=
"NAME">_self.draw_slider
</span><span class=
"PUNC">(
</span><span class=
"NAME">updated_ckey
</span><span class=
"PUNC">)
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1616 <span class='line'
>1609</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">return
</span><span class=
"WHIT"> </span><span class=
"KEYW">false
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1617 <span class='line'
>1610</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1618 <span class='line'
>1611</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">return
</span><span class=
"WHIT"> </span><span class=
"KEYW">true
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1619 <span class='line'
>1612</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1620 <span class='line'
>1613</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1621 <span class='line'
>1614</span>
1622 <span class='line'
>1615</span> </span><span class=
"WHIT"> </span><span class=
"COMM">/**
1623 <span class='line'
>1616</span> * The mouse events handler for the Canvas controls. This method determines
1624 <span class='line'
>1617</span> * the region the user is using, and it also updates the color values for the
1625 <span class='line'
>1618</span> * active color key. The Canvas and all the inputs in the color mixer are
1626 <span class='line'
>1619</span> * updated as needed.
1627 <span class='line'
>1620</span> *
1628 <span class='line'
>1621</span> * @private
1629 <span class='line'
>1622</span> * @param {Event} ev The DOM Event object.
1630 <span class='line'
>1623</span> */
</span><span class=
"WHIT">
1631 <span class='line'
>1624</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.ev_canvas
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">function
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">ev
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1632 <span class='line'
>1625</span> </span><span class=
"WHIT"> </span><span class=
"NAME">ev.preventDefault
</span><span class=
"PUNC">(
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1633 <span class='line'
>1626</span>
1634 <span class='line'
>1627</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// Initialize color picking only on mousedown.
</span><span class=
"WHIT">
1635 <span class='line'
>1628</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">ev.type
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"STRN">'mousedown'
</span><span class=
"WHIT"> </span><span class=
"PUNC">&&
</span><span class=
"WHIT"> </span><span class=
"PUNC">!
</span><span class=
"NAME">_self.ev_canvas_mode
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1636 <span class='line'
>1629</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.ev_canvas_mode
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">true
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1637 <span class='line'
>1630</span> </span><span class=
"WHIT"> </span><span class=
"NAME">doc.addEventListener
</span><span class=
"PUNC">(
</span><span class=
"STRN">'mouseup'
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.ev_canvas
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"KEYW">false
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1638 <span class='line'
>1631</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1639 <span class='line'
>1632</span>
1640 <span class='line'
>1633</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"PUNC">!
</span><span class=
"NAME">_self.ev_canvas_mode
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1641 <span class='line'
>1634</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">return
</span><span class=
"WHIT"> </span><span class=
"KEYW">false
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1642 <span class='line'
>1635</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1643 <span class='line'
>1636</span>
1644 <span class='line'
>1637</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// The mouseup event stops the effect of any further mousemove events.
</span><span class=
"WHIT">
1645 <span class='line'
>1638</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">ev.type
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"STRN">'mouseup'
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1646 <span class='line'
>1639</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.ev_canvas_mode
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">false
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1647 <span class='line'
>1640</span> </span><span class=
"WHIT"> </span><span class=
"NAME">doc.removeEventListener
</span><span class=
"PUNC">(
</span><span class=
"STRN">'mouseup'
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.ev_canvas
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"KEYW">false
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1648 <span class='line'
>1641</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1649 <span class='line'
>1642</span>
1650 <span class='line'
>1643</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">elems
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.elems
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1651 <span class='line'
>1644</span>
1652 <span class='line'
>1645</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// If the user is on top of the 'controls' element, determine the mouse coordinates and the 'mode' for this function: the user is either working with the slider, or he/she is working with the color chart itself.
</span><span class=
"WHIT">
1653 <span class='line'
>1646</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">ev.target
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"NAME">elems.controls
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1654 <span class='line'
>1647</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">mx
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">my
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1655 <span class='line'
>1648</span> </span><span class=
"WHIT"> </span><span class=
"NAME">width
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.context2d.canvas.width
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1656 <span class='line'
>1649</span> </span><span class=
"WHIT"> </span><span class=
"NAME">height
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.context2d.canvas.height
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1657 <span class='line'
>1650</span>
1658 <span class='line'
>1651</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// Get the mouse position, relative to the event target.
</span><span class=
"WHIT">
1659 <span class='line'
>1652</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">ev.layerX
</span><span class=
"WHIT"> </span><span class=
"PUNC">||
</span><span class=
"WHIT"> </span><span class=
"NAME">ev.layerX
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT"> </span><span class=
"COMM">// Firefox
</span><span class=
"WHIT">
1660 <span class='line'
>1653</span> </span><span class=
"WHIT"> </span><span class=
"NAME">mx
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">ev.layerX
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NAME">resScale
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1661 <span class='line'
>1654</span> </span><span class=
"WHIT"> </span><span class=
"NAME">my
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">ev.layerY
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NAME">resScale
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1662 <span class='line'
>1655</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">ev.offsetX
</span><span class=
"WHIT"> </span><span class=
"PUNC">||
</span><span class=
"WHIT"> </span><span class=
"NAME">ev.offsetX
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT"> </span><span class=
"COMM">// Opera
</span><span class=
"WHIT">
1663 <span class='line'
>1656</span> </span><span class=
"WHIT"> </span><span class=
"NAME">mx
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">ev.offsetX
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NAME">resScale
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1664 <span class='line'
>1657</span> </span><span class=
"WHIT"> </span><span class=
"NAME">my
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">ev.offsetY
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NAME">resScale
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1665 <span class='line'
>1658</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1666 <span class='line'
>1659</span>
1667 <span class='line'
>1660</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">mx
</span><span class=
"WHIT"> </span><span class=
"PUNC">>=
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"WHIT"> </span><span class=
"PUNC">&&
</span><span class=
"WHIT"> </span><span class=
"NAME">mx
</span><span class=
"WHIT"> </span><span class=
"PUNC"><=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.chartWidth
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1668 <span class='line'
>1661</span> </span><span class=
"WHIT"> </span><span class=
"NAME">mode
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"STRN">'chart'
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1669 <span class='line'
>1662</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">mx
</span><span class=
"WHIT"> </span><span class=
"PUNC">>=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.sliderX
</span><span class=
"WHIT"> </span><span class=
"PUNC">&&
</span><span class=
"WHIT"> </span><span class=
"NAME">mx
</span><span class=
"WHIT"> </span><span class=
"PUNC"><=
</span><span class=
"WHIT"> </span><span class=
"NAME">width
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1670 <span class='line'
>1663</span> </span><span class=
"WHIT"> </span><span class=
"NAME">mode
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"STRN">'slider'
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1671 <span class='line'
>1664</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1672 <span class='line'
>1665</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1673 <span class='line'
>1666</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// The user might have clicked on the chart dot, or on the slider graphic
</span><span class=
"WHIT">
1674 <span class='line'
>1667</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// itself.
</span><span class=
"WHIT">
1675 <span class='line'
>1668</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// If yes, then determine the mode based on this.
</span><span class=
"WHIT">
1676 <span class='line'
>1669</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">ev.target
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"NAME">elems.chartDot
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1677 <span class='line'
>1670</span> </span><span class=
"WHIT"> </span><span class=
"NAME">mode
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"STRN">'chart'
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1678 <span class='line'
>1671</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">ev.target
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"NAME">elems.slider
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1679 <span class='line'
>1672</span> </span><span class=
"WHIT"> </span><span class=
"NAME">mode
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"STRN">'slider'
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1680 <span class='line'
>1673</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1681 <span class='line'
>1674</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1682 <span class='line'
>1675</span>
1683 <span class='line'
>1676</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// Update the ev_canvas_mode value to include the mode name, if it's simply
</span><span class=
"WHIT">
1684 <span class='line'
>1677</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// the true boolean.
</span><span class=
"WHIT">
1685 <span class='line'
>1678</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// This ensures that the continuous mouse movements do not go from one mode
</span><span class=
"WHIT">
1686 <span class='line'
>1679</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// to another when the user moves out from the slider to the chart (and
</span><span class=
"WHIT">
1687 <span class='line'
>1680</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// vice-versa).
</span><span class=
"WHIT">
1688 <span class='line'
>1681</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">mode
</span><span class=
"WHIT"> </span><span class=
"PUNC">&&
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.ev_canvas_mode
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"KEYW">true
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1689 <span class='line'
>1682</span> </span><span class=
"WHIT"> </span><span class=
"NAME">_self.ev_canvas_mode
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">mode
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1690 <span class='line'
>1683</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1691 <span class='line'
>1684</span>
1692 <span class='line'
>1685</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// Do not continue if the mode wasn't determined (the mouse is not on the
</span><span class=
"WHIT">
1693 <span class='line'
>1686</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// slider, nor on the chart).
</span><span class=
"WHIT">
1694 <span class='line'
>1687</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// Also don't continue if the mouse is not in the same place (different
</span><span class=
"WHIT">
1695 <span class='line'
>1688</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// mode).
</span><span class=
"WHIT">
1696 <span class='line'
>1689</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"PUNC">!
</span><span class=
"NAME">mode
</span><span class=
"WHIT"> </span><span class=
"PUNC">||
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.ev_canvas_mode
</span><span class=
"WHIT"> </span><span class=
"PUNC">!==
</span><span class=
"WHIT"> </span><span class=
"NAME">mode
</span><span class=
"WHIT"> </span><span class=
"PUNC">||
</span><span class=
"WHIT"> </span><span class=
"NAME">ev.target
</span><span class=
"WHIT"> </span><span class=
"PUNC">!==
</span><span class=
"WHIT"> </span><span class=
"NAME">elems.controls
</span><span class=
"PUNC">)
</span><span class=
"WHIT">
1697 <span class='line'
>1690</span> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1698 <span class='line'
>1691</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">return
</span><span class=
"WHIT"> </span><span class=
"KEYW">false
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1699 <span class='line'
>1692</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1700 <span class='line'
>1693</span>
1701 <span class='line'
>1694</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.color
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1702 <span class='line'
>1695</span> </span><span class=
"WHIT"> </span><span class=
"NAME">val_x
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">mx
</span><span class=
"WHIT"> </span><span class=
"PUNC">/
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.chartWidth
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1703 <span class='line'
>1696</span> </span><span class=
"WHIT"> </span><span class=
"NAME">val_y
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">my
</span><span class=
"WHIT"> </span><span class=
"PUNC">/
</span><span class=
"WHIT"> </span><span class=
"NAME">height
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1704 <span class='line'
>1697</span>
1705 <span class='line'
>1698</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">mode
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"STRN">'slider'
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1706 <span class='line'
>1699</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">_self.ckey_active
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"STRN">'hue'
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1707 <span class='line'
>1700</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"PUNC">[
</span><span class=
"NAME">_self.ckey_active
</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">val_y
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1708 <span class='line'
>1701</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">_self.ckey_active_group
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"STRN">'lab'
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1709 <span class='line'
>1702</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"PUNC">[
</span><span class=
"NAME">_self.ckey_active
</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.abs_max
</span><span class=
"PUNC">[
</span><span class=
"NAME">_self.ckey_active
</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NAME">val_y
</span><span class=
"WHIT">
1710 <span class='line'
>1703</span> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">config.inputValues
</span><span class=
"PUNC">[
</span><span class=
"NAME">_self.ckey_active
</span><span class=
"PUNC">]
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1711 <span class='line'
>1704</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1712 <span class='line'
>1705</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"PUNC">[
</span><span class=
"NAME">_self.ckey_active
</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NAME">val_y
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1713 <span class='line'
>1706</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1714 <span class='line'
>1707</span>
1715 <span class='line'
>1708</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">return
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.update_color
</span><span class=
"PUNC">(
</span><span class=
"NAME">_self.ckey_active
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1716 <span class='line'
>1709</span>
1717 <span class='line'
>1710</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">mode
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"STRN">'chart'
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1718 <span class='line'
>1711</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">val_x
</span><span class=
"WHIT"> </span><span class=
"PUNC">></span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1719 <span class='line'
>1712</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">return
</span><span class=
"WHIT"> </span><span class=
"KEYW">false
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1720 <span class='line'
>1713</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1721 <span class='line'
>1714</span>
1722 <span class='line'
>1715</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">_self.ckey_active_group
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"STRN">'lab'
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1723 <span class='line'
>1716</span> </span><span class=
"WHIT"> </span><span class=
"NAME">val_x
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.abs_max
</span><span class=
"PUNC">[
</span><span class=
"NAME">_self.ckey_adjoint
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NAME">val_x
</span><span class=
"WHIT">
1724 <span class='line'
>1717</span> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">config.inputValues
</span><span class=
"PUNC">[
</span><span class=
"NAME">_self.ckey_adjoint
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"PUNC">]
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1725 <span class='line'
>1718</span> </span><span class=
"WHIT"> </span><span class=
"NAME">val_y
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.abs_max
</span><span class=
"PUNC">[
</span><span class=
"NAME">_self.ckey_adjoint
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NAME">val_y
</span><span class=
"WHIT">
1726 <span class='line'
>1719</span> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">config.inputValues
</span><span class=
"PUNC">[
</span><span class=
"NAME">_self.ckey_adjoint
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"PUNC">]
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1727 <span class='line'
>1720</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1728 <span class='line'
>1721</span> </span><span class=
"WHIT"> </span><span class=
"NAME">val_y
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NAME">val_y
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1729 <span class='line'
>1722</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1730 <span class='line'
>1723</span>
1731 <span class='line'
>1724</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"PUNC">[
</span><span class=
"NAME">_self.ckey_adjoint
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">val_x
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1732 <span class='line'
>1725</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"PUNC">[
</span><span class=
"NAME">_self.ckey_adjoint
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">val_y
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1733 <span class='line'
>1726</span>
1734 <span class='line'
>1727</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">return
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.update_color
</span><span class=
"PUNC">(
</span><span class=
"NAME">_self.ckey_active_group
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1735 <span class='line'
>1728</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1736 <span class='line'
>1729</span>
1737 <span class='line'
>1730</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">return
</span><span class=
"WHIT"> </span><span class=
"KEYW">false
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1738 <span class='line'
>1731</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1739 <span class='line'
>1732</span>
1740 <span class='line'
>1733</span> </span><span class=
"WHIT"> </span><span class=
"COMM">/**
1741 <span class='line'
>1734</span> * Draw the color space visualisation.
1742 <span class='line'
>1735</span> *
1743 <span class='line'
>1736</span> * @private
1744 <span class='line'
>1737</span> *
1745 <span class='line'
>1738</span> * @param {String} updated_ckey The color key that was updated. This is used
1746 <span class='line'
>1739</span> * to determine if the Canvas needs to be updated or not.
1747 <span class='line'
>1740</span> */
</span><span class=
"WHIT">
1748 <span class='line'
>1741</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.draw_chart
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">function
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">updated_ckey
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1749 <span class='line'
>1742</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">context
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.context2d
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1750 <span class='line'
>1743</span> </span><span class=
"WHIT"> </span><span class=
"NAME">gradient
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">opacity
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1751 <span class='line'
>1744</span>
1752 <span class='line'
>1745</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">updated_ckey
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.ckey_adjoint
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">||
</span><span class=
"WHIT"> </span><span class=
"NAME">updated_ckey
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT">
1753 <span class='line'
>1746</span> </span><span class=
"NAME">_self.ckey_adjoint
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">||
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">_self.ev_canvas_mode
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"STRN">'chart'
</span><span class=
"WHIT"> </span><span class=
"PUNC">&&
</span><span class=
"WHIT">
1754 <span class='line'
>1747</span> </span><span class=
"NAME">updated_ckey
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.ckey_active_group
</span><span class=
"PUNC">)
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1755 <span class='line'
>1748</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">return
</span><span class=
"WHIT"> </span><span class=
"KEYW">true
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1756 <span class='line'
>1749</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1757 <span class='line'
>1750</span>
1758 <span class='line'
>1751</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">w
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.chartWidth
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1759 <span class='line'
>1752</span> </span><span class=
"WHIT"> </span><span class=
"NAME">h
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.chartHeight
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1760 <span class='line'
>1753</span>
1761 <span class='line'
>1754</span> </span><span class=
"WHIT"> </span><span class=
"NAME">context.clearRect
</span><span class=
"PUNC">(
</span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">w
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">h
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1762 <span class='line'
>1755</span>
1763 <span class='line'
>1756</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">_self.ckey_active
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"STRN">'sat'
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1764 <span class='line'
>1757</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// In saturation mode the user has the slider which allows him/her to
</span><span class=
"WHIT">
1765 <span class='line'
>1758</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// change the saturation (hSv) of the current color.
</span><span class=
"WHIT">
1766 <span class='line'
>1759</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// The chart shows the hue spectrum on the X axis, while the Y axis gives
</span><span class=
"WHIT">
1767 <span class='line'
>1760</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// the Value (hsV).
</span><span class=
"WHIT">
1768 <span class='line'
>1761</span>
1769 <span class='line'
>1762</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">_self.color.sat
</span><span class=
"WHIT"> </span><span class=
"PUNC">></span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1770 <span class='line'
>1763</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// Draw the hue spectrum gradient on the X axis.
</span><span class=
"WHIT">
1771 <span class='line'
>1764</span> </span><span class=
"WHIT"> </span><span class=
"NAME">gradient
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">context.createLinearGradient
</span><span class=
"PUNC">(
</span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">w
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1772 <span class='line'
>1765</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">for
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">i
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">;
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"WHIT"> </span><span class=
"PUNC"><=
</span><span class=
"WHIT"> </span><span class=
"NUMB">6</span><span class=
"PUNC">;
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"PUNC">++
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1773 <span class='line'
>1766</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"STRN">'rgb('
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">hueSpectrum
</span><span class=
"PUNC">[
</span><span class=
"NAME">i
</span><span class=
"PUNC">]
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">', '
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT">
1774 <span class='line'
>1767</span> </span><span class=
"WHIT"> </span><span class=
"NAME">hueSpectrum
</span><span class=
"PUNC">[
</span><span class=
"NAME">i
</span><span class=
"PUNC">]
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">', '
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT">
1775 <span class='line'
>1768</span> </span><span class=
"WHIT"> </span><span class=
"NAME">hueSpectrum
</span><span class=
"PUNC">[
</span><span class=
"NAME">i
</span><span class=
"PUNC">]
</span><span class=
"PUNC">[
</span><span class=
"NUMB">2</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">')'
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1776 <span class='line'
>1769</span> </span><span class=
"WHIT"> </span><span class=
"NAME">gradient.addColorStop
</span><span class=
"PUNC">(
</span><span class=
"NAME">i
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"PUNC">/
</span><span class=
"NUMB">6</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1777 <span class='line'
>1770</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1778 <span class='line'
>1771</span> </span><span class=
"WHIT"> </span><span class=
"NAME">context.fillStyle
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">gradient
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1779 <span class='line'
>1772</span> </span><span class=
"WHIT"> </span><span class=
"NAME">context.fillRect
</span><span class=
"PUNC">(
</span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">w
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">h
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1780 <span class='line'
>1773</span>
1781 <span class='line'
>1774</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// Draw the gradient which darkens the hue spectrum on the Y axis.
</span><span class=
"WHIT">
1782 <span class='line'
>1775</span> </span><span class=
"WHIT"> </span><span class=
"NAME">gradient
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">context.createLinearGradient
</span><span class=
"PUNC">(
</span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">h
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1783 <span class='line'
>1776</span> </span><span class=
"WHIT"> </span><span class=
"NAME">gradient.addColorStop
</span><span class=
"PUNC">(
</span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"STRN">'rgba(
0,
0,
0,
0)'
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1784 <span class='line'
>1777</span> </span><span class=
"WHIT"> </span><span class=
"NAME">gradient.addColorStop
</span><span class=
"PUNC">(
</span><span class=
"NUMB">1</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"STRN">'rgba(
0,
0,
0,
1)'
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1785 <span class='line'
>1778</span> </span><span class=
"WHIT"> </span><span class=
"NAME">context.fillStyle
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">gradient
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1786 <span class='line'
>1779</span> </span><span class=
"WHIT"> </span><span class=
"NAME">context.fillRect
</span><span class=
"PUNC">(
</span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">w
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">h
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1787 <span class='line'
>1780</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1788 <span class='line'
>1781</span>
1789 <span class='line'
>1782</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">_self.color.sat
</span><span class=
"WHIT"> </span><span class=
"PUNC"><</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1790 <span class='line'
>1783</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// Draw the white to black gradient. This is used for creating the
</span><span class=
"WHIT">
1791 <span class='line'
>1784</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// saturation effect. Lowering the saturation value makes the gradient
</span><span class=
"WHIT">
1792 <span class='line'
>1785</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// more visible, hence the hue colors desaturate.
</span><span class=
"WHIT">
1793 <span class='line'
>1786</span> </span><span class=
"WHIT"> </span><span class=
"NAME">opacity
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.color.sat
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1794 <span class='line'
>1787</span> </span><span class=
"WHIT"> </span><span class=
"NAME">gradient
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">context.createLinearGradient
</span><span class=
"PUNC">(
</span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">h
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1795 <span class='line'
>1788</span> </span><span class=
"WHIT"> </span><span class=
"NAME">gradient.addColorStop
</span><span class=
"PUNC">(
</span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"STRN">'rgba(
255,
255,
255, '
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">opacity
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">')'
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1796 <span class='line'
>1789</span> </span><span class=
"WHIT"> </span><span class=
"NAME">gradient.addColorStop
</span><span class=
"PUNC">(
</span><span class=
"NUMB">1</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"STRN">'rgba(
0,
0,
0, '
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">opacity
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">')'
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1797 <span class='line'
>1790</span> </span><span class=
"WHIT"> </span><span class=
"NAME">context.fillStyle
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">gradient
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1798 <span class='line'
>1791</span> </span><span class=
"WHIT"> </span><span class=
"NAME">context.fillRect
</span><span class=
"PUNC">(
</span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">w
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">h
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1799 <span class='line'
>1792</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1800 <span class='line'
>1793</span>
1801 <span class='line'
>1794</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">_self.ckey_active
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"STRN">'val'
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1802 <span class='line'
>1795</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// In value mode the user has the slider which allows him/her to change the value (hsV) of the current color.
</span><span class=
"WHIT">
1803 <span class='line'
>1796</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// The chart shows the hue spectrum on the X axis, while the Y axis gives the saturation (hSv).
</span><span class=
"WHIT">
1804 <span class='line'
>1797</span>
1805 <span class='line'
>1798</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">_self.color.val
</span><span class=
"WHIT"> </span><span class=
"PUNC">></span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1806 <span class='line'
>1799</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// Draw the hue spectrum gradient on the X axis.
</span><span class=
"WHIT">
1807 <span class='line'
>1800</span> </span><span class=
"WHIT"> </span><span class=
"NAME">gradient
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">context.createLinearGradient
</span><span class=
"PUNC">(
</span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">w
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1808 <span class='line'
>1801</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">for
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">i
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">;
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"WHIT"> </span><span class=
"PUNC"><=
</span><span class=
"WHIT"> </span><span class=
"NUMB">6</span><span class=
"PUNC">;
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"PUNC">++
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1809 <span class='line'
>1802</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"STRN">'rgb('
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">hueSpectrum
</span><span class=
"PUNC">[
</span><span class=
"NAME">i
</span><span class=
"PUNC">]
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">', '
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT">
1810 <span class='line'
>1803</span> </span><span class=
"WHIT"> </span><span class=
"NAME">hueSpectrum
</span><span class=
"PUNC">[
</span><span class=
"NAME">i
</span><span class=
"PUNC">]
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">', '
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT">
1811 <span class='line'
>1804</span> </span><span class=
"WHIT"> </span><span class=
"NAME">hueSpectrum
</span><span class=
"PUNC">[
</span><span class=
"NAME">i
</span><span class=
"PUNC">]
</span><span class=
"PUNC">[
</span><span class=
"NUMB">2</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">')'
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1812 <span class='line'
>1805</span> </span><span class=
"WHIT"> </span><span class=
"NAME">gradient.addColorStop
</span><span class=
"PUNC">(
</span><span class=
"NAME">i
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"PUNC">/
</span><span class=
"NUMB">6</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1813 <span class='line'
>1806</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1814 <span class='line'
>1807</span> </span><span class=
"WHIT"> </span><span class=
"NAME">context.fillStyle
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">gradient
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1815 <span class='line'
>1808</span> </span><span class=
"WHIT"> </span><span class=
"NAME">context.fillRect
</span><span class=
"PUNC">(
</span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">w
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">h
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1816 <span class='line'
>1809</span>
1817 <span class='line'
>1810</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// Draw the gradient which lightens the hue spectrum on the Y axis.
</span><span class=
"WHIT">
1818 <span class='line'
>1811</span> </span><span class=
"WHIT"> </span><span class=
"NAME">gradient
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">context.createLinearGradient
</span><span class=
"PUNC">(
</span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">h
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1819 <span class='line'
>1812</span> </span><span class=
"WHIT"> </span><span class=
"NAME">gradient.addColorStop
</span><span class=
"PUNC">(
</span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"STRN">'rgba(
255,
255,
255,
0)'
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1820 <span class='line'
>1813</span> </span><span class=
"WHIT"> </span><span class=
"NAME">gradient.addColorStop
</span><span class=
"PUNC">(
</span><span class=
"NUMB">1</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"STRN">'rgba(
255,
255,
255,
1)'
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1821 <span class='line'
>1814</span> </span><span class=
"WHIT"> </span><span class=
"NAME">context.fillStyle
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">gradient
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1822 <span class='line'
>1815</span> </span><span class=
"WHIT"> </span><span class=
"NAME">context.fillRect
</span><span class=
"PUNC">(
</span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">w
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">h
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1823 <span class='line'
>1816</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1824 <span class='line'
>1817</span>
1825 <span class='line'
>1818</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">_self.color.val
</span><span class=
"WHIT"> </span><span class=
"PUNC"><</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1826 <span class='line'
>1819</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// Draw a solid black color on top. This is used for darkening the hue colors gradient when the user reduces the Value (hsV).
</span><span class=
"WHIT">
1827 <span class='line'
>1820</span> </span><span class=
"WHIT"> </span><span class=
"NAME">context.fillStyle
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"STRN">'rgba(
0,
0,
0, '
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NUMB">1</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.color.val
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"STRN">')'
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1828 <span class='line'
>1821</span> </span><span class=
"WHIT"> </span><span class=
"NAME">context.fillRect
</span><span class=
"PUNC">(
</span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">w
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">h
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1829 <span class='line'
>1822</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1830 <span class='line'
>1823</span>
1831 <span class='line'
>1824</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">_self.ckey_active
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"STRN">'hue'
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1832 <span class='line'
>1825</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// In hue mode the user has the slider which allows him/her to change the hue (Hsv) of the current color.
</span><span class=
"WHIT">
1833 <span class='line'
>1826</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// The chart shows the current color in the background. The X axis gives the saturation (hSv), and the Y axis gives the value (hsV).
</span><span class=
"WHIT">
1834 <span class='line'
>1827</span>
1835 <span class='line'
>1828</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">_self.color.sat
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"WHIT"> </span><span class=
"PUNC">&&
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.color.val
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1836 <span class='line'
>1829</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"PUNC">[
</span><span class=
"NAME">_self.color.red
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.color.green
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.color.blue
</span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1837 <span class='line'
>1830</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1838 <span class='line'
>1831</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// Determine the RGB values for the current color which has the same hue, but maximum saturation and value (hSV).
</span><span class=
"WHIT">
1839 <span class='line'
>1832</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.hsv2rgb
</span><span class=
"PUNC">(
</span><span class=
"KEYW">true
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"PUNC">[
</span><span class=
"NAME">_self.color.hue
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1840 <span class='line'
>1833</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1841 <span class='line'
>1834</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">for
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">i
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">;
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"WHIT"> </span><span class=
"PUNC"><</span><span class=
"WHIT"> </span><span class=
"NUMB">3</span><span class=
"PUNC">;
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"PUNC">++
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1842 <span class='line'
>1835</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"PUNC">[
</span><span class=
"NAME">i
</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">MathRound
</span><span class=
"PUNC">(
</span><span class=
"NAME">color
</span><span class=
"PUNC">[
</span><span class=
"NAME">i
</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NUMB">255</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1843 <span class='line'
>1836</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1844 <span class='line'
>1837</span>
1845 <span class='line'
>1838</span> </span><span class=
"WHIT"> </span><span class=
"NAME">context.fillStyle
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"STRN">'rgb('
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">', '
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">', '
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"PUNC">[
</span><span class=
"NUMB">2</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">')'
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1846 <span class='line'
>1839</span> </span><span class=
"WHIT"> </span><span class=
"NAME">context.fillRect
</span><span class=
"PUNC">(
</span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">w
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">h
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1847 <span class='line'
>1840</span>
1848 <span class='line'
>1841</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// Draw the white gradient for saturation (X axis, hSv).
</span><span class=
"WHIT">
1849 <span class='line'
>1842</span> </span><span class=
"WHIT"> </span><span class=
"NAME">gradient
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">context.createLinearGradient
</span><span class=
"PUNC">(
</span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">w
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1850 <span class='line'
>1843</span> </span><span class=
"WHIT"> </span><span class=
"NAME">gradient.addColorStop
</span><span class=
"PUNC">(
</span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"STRN">'rgba(
255,
255,
255,
1)'
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1851 <span class='line'
>1844</span> </span><span class=
"WHIT"> </span><span class=
"NAME">gradient.addColorStop
</span><span class=
"PUNC">(
</span><span class=
"NUMB">1</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"STRN">'rgba(
255,
255,
255,
0)'
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1852 <span class='line'
>1845</span> </span><span class=
"WHIT"> </span><span class=
"NAME">context.fillStyle
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">gradient
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1853 <span class='line'
>1846</span> </span><span class=
"WHIT"> </span><span class=
"NAME">context.fillRect
</span><span class=
"PUNC">(
</span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">w
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">h
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1854 <span class='line'
>1847</span>
1855 <span class='line'
>1848</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// Draw the black gradient for value (Y axis, hsV).
</span><span class=
"WHIT">
1856 <span class='line'
>1849</span> </span><span class=
"WHIT"> </span><span class=
"NAME">gradient
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">context.createLinearGradient
</span><span class=
"PUNC">(
</span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">h
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1857 <span class='line'
>1850</span> </span><span class=
"WHIT"> </span><span class=
"NAME">gradient.addColorStop
</span><span class=
"PUNC">(
</span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"STRN">'rgba(
0,
0,
0,
0)'
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1858 <span class='line'
>1851</span> </span><span class=
"WHIT"> </span><span class=
"NAME">gradient.addColorStop
</span><span class=
"PUNC">(
</span><span class=
"NUMB">1</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"STRN">'rgba(
0,
0,
0,
1)'
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1859 <span class='line'
>1852</span> </span><span class=
"WHIT"> </span><span class=
"NAME">context.fillStyle
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">gradient
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1860 <span class='line'
>1853</span> </span><span class=
"WHIT"> </span><span class=
"NAME">context.fillRect
</span><span class=
"PUNC">(
</span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">w
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">h
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1861 <span class='line'
>1854</span>
1862 <span class='line'
>1855</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">_self.ckey_active_group
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"STRN">'rgb'
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1863 <span class='line'
>1856</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// In any red/green/blue mode the background color becomes the one of the ckey_active. Say, for ckey_active=red the background color would be the current red value (green and blue are both set to
0).
</span><span class=
"WHIT">
1864 <span class='line'
>1857</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// On the X/Y axes the other two colors are shown. E.g. for red the X axis gives the green gradient, and the Y axis gives the blue gradient. The two gradients are drawn on top of the red background using a global composite operation (lighter) - to create the color addition effect.
</span><span class=
"WHIT">
1865 <span class='line'
>1858</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">color2
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">color3
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1866 <span class='line'
>1859</span>
1867 <span class='line'
>1860</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"STRN">'red'
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"STRN">'green'
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"STRN">'blue'
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">}
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1868 <span class='line'
>1861</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"PUNC">[
</span><span class=
"NAME">_self.ckey_active
</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">MathRound
</span><span class=
"PUNC">(
</span><span class=
"NAME">_self.color
</span><span class=
"PUNC">[
</span><span class=
"NAME">_self.ckey_active
</span><span class=
"PUNC">]
</span><span class=
"WHIT">
1869 <span class='line'
>1862</span> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NUMB">255</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1870 <span class='line'
>1863</span>
1871 <span class='line'
>1864</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color2
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"STRN">'red'
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"STRN">'green'
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"STRN">'blue'
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">}
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1872 <span class='line'
>1865</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color2
</span><span class=
"PUNC">[
</span><span class=
"NAME">_self.ckey_adjoint
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">255</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1873 <span class='line'
>1866</span>
1874 <span class='line'
>1867</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color3
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"STRN">'red'
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"STRN">'green'
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"STRN">'blue'
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">}
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1875 <span class='line'
>1868</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color3
</span><span class=
"PUNC">[
</span><span class=
"NAME">_self.ckey_adjoint
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">255</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1876 <span class='line'
>1869</span>
1877 <span class='line'
>1870</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// The background.
</span><span class=
"WHIT">
1878 <span class='line'
>1871</span> </span><span class=
"WHIT"> </span><span class=
"NAME">context.fillStyle
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"STRN">'rgb('
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">color.red
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">','
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">color.green
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">','
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">color.blue
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">')'
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1879 <span class='line'
>1872</span> </span><span class=
"WHIT"> </span><span class=
"NAME">context.fillRect
</span><span class=
"PUNC">(
</span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">w
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">h
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1880 <span class='line'
>1873</span>
1881 <span class='line'
>1874</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// This doesn't work in Opera
9.2 and older versions.
</span><span class=
"WHIT">
1882 <span class='line'
>1875</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">op
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">context.globalCompositeOperation
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1883 <span class='line'
>1876</span> </span><span class=
"WHIT"> </span><span class=
"NAME">context.globalCompositeOperation
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"STRN">'lighter'
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1884 <span class='line'
>1877</span>
1885 <span class='line'
>1878</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// The Y axis gradient.
</span><span class=
"WHIT">
1886 <span class='line'
>1879</span> </span><span class=
"WHIT"> </span><span class=
"NAME">gradient
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">context.createLinearGradient
</span><span class=
"PUNC">(
</span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">h
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1887 <span class='line'
>1880</span> </span><span class=
"WHIT"> </span><span class=
"NAME">gradient.addColorStop
</span><span class=
"PUNC">(
</span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"STRN">'rgba('
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">color2.red
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">','
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">color2.green
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">','
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">color2.blue
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">',
1)'
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1888 <span class='line'
>1881</span> </span><span class=
"WHIT"> </span><span class=
"NAME">gradient.addColorStop
</span><span class=
"PUNC">(
</span><span class=
"NUMB">1</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"STRN">'rgba('
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">color2.red
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">','
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">color2.green
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">','
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">color2.blue
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">',
0)'
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1889 <span class='line'
>1882</span> </span><span class=
"WHIT"> </span><span class=
"NAME">context.fillStyle
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">gradient
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1890 <span class='line'
>1883</span> </span><span class=
"WHIT"> </span><span class=
"NAME">context.fillRect
</span><span class=
"PUNC">(
</span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">w
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">h
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1891 <span class='line'
>1884</span>
1892 <span class='line'
>1885</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// The X axis gradient.
</span><span class=
"WHIT">
1893 <span class='line'
>1886</span> </span><span class=
"WHIT"> </span><span class=
"NAME">gradient
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">context.createLinearGradient
</span><span class=
"PUNC">(
</span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">w
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1894 <span class='line'
>1887</span> </span><span class=
"WHIT"> </span><span class=
"NAME">gradient.addColorStop
</span><span class=
"PUNC">(
</span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"STRN">'rgba('
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">color3.red
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">','
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">color3.green
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">','
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">color3.blue
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">',
0)'
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1895 <span class='line'
>1888</span> </span><span class=
"WHIT"> </span><span class=
"NAME">gradient.addColorStop
</span><span class=
"PUNC">(
</span><span class=
"NUMB">1</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"STRN">'rgba('
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">color3.red
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">','
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">color3.green
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">','
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">color3.blue
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">',
1)'
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1896 <span class='line'
>1889</span> </span><span class=
"WHIT"> </span><span class=
"NAME">context.fillStyle
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">gradient
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1897 <span class='line'
>1890</span> </span><span class=
"WHIT"> </span><span class=
"NAME">context.fillRect
</span><span class=
"PUNC">(
</span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">w
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">h
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1898 <span class='line'
>1891</span>
1899 <span class='line'
>1892</span> </span><span class=
"WHIT"> </span><span class=
"NAME">context.globalCompositeOperation
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">op
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1900 <span class='line'
>1893</span>
1901 <span class='line'
>1894</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">_self.ckey_active_group
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"STRN">'lab'
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1902 <span class='line'
>1895</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// The chart plots the CIE Lab colors. The non-active color keys give the X/Y axes. For example, if cie_l (lightness) is active, then the cie_a values give the X axis, and the Y axis is given by the values of cie_b.
</span><span class=
"WHIT">
1903 <span class='line'
>1896</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// The chart is drawn manually, pixel-by-pixel, due to the special way CIE Lab works. This is very slow in today's UAs.
</span><span class=
"WHIT">
1904 <span class='line'
>1897</span>
1905 <span class='line'
>1898</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">imgd
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">false
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1906 <span class='line'
>1899</span>
1907 <span class='line'
>1900</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">context.createImageData
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1908 <span class='line'
>1901</span> </span><span class=
"WHIT"> </span><span class=
"NAME">imgd
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">context.createImageData
</span><span class=
"PUNC">(
</span><span class=
"NAME">w
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">h
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1909 <span class='line'
>1902</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">context.getImageData
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1910 <span class='line'
>1903</span> </span><span class=
"WHIT"> </span><span class=
"NAME">imgd
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">context.getImageData
</span><span class=
"PUNC">(
</span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">w
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">h
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1911 <span class='line'
>1904</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1912 <span class='line'
>1905</span> </span><span class=
"WHIT"> </span><span class=
"NAME">imgd
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1913 <span class='line'
>1906</span> </span><span class=
"WHIT"> </span><span class=
"STRN">'width'
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"NAME">w
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1914 <span class='line'
>1907</span> </span><span class=
"WHIT"> </span><span class=
"STRN">'height'
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"NAME">h
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1915 <span class='line'
>1908</span> </span><span class=
"WHIT"> </span><span class=
"STRN">'data'
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"KEYW">new
</span><span class=
"WHIT"> </span><span class=
"NAME">Array
</span><span class=
"PUNC">(
</span><span class=
"NAME">w
</span><span class=
"PUNC">*
</span><span class=
"NAME">h
</span><span class=
"PUNC">*
</span><span class=
"NUMB">4</span><span class=
"PUNC">)
</span><span class=
"WHIT">
1916 <span class='line'
>1909</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1917 <span class='line'
>1910</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1918 <span class='line'
>1911</span>
1919 <span class='line'
>1912</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">pix
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">imgd.data
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1920 <span class='line'
>1913</span> </span><span class=
"WHIT"> </span><span class=
"NAME">n
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">imgd.data.length
</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1921 <span class='line'
>1914</span> </span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"NUMB">1</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">p
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">inc_x
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">inc_y
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">xyz
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"PUNC">[
</span><span class=
"PUNC">]
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">rgb
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"PUNC">[
</span><span class=
"PUNC">]
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">cie_x
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">cie_y
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1922 <span class='line'
>1915</span>
1923 <span class='line'
>1916</span> </span><span class=
"WHIT"> </span><span class=
"NAME">cie_x
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.ckey_adjoint
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1924 <span class='line'
>1917</span> </span><span class=
"WHIT"> </span><span class=
"NAME">cie_y
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.ckey_adjoint
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1925 <span class='line'
>1918</span>
1926 <span class='line'
>1919</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1927 <span class='line'
>1920</span> </span><span class=
"WHIT"> </span><span class=
"STRN">'cie_l'
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.color.cie_l
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1928 <span class='line'
>1921</span> </span><span class=
"WHIT"> </span><span class=
"STRN">'cie_a'
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.color.cie_a
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1929 <span class='line'
>1922</span> </span><span class=
"WHIT"> </span><span class=
"STRN">'cie_b'
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.color.cie_b
</span><span class=
"WHIT">
1930 <span class='line'
>1923</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1931 <span class='line'
>1924</span>
1932 <span class='line'
>1925</span> </span><span class=
"WHIT"> </span><span class=
"NAME">inc_x
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.abs_max
</span><span class=
"PUNC">[
</span><span class=
"NAME">cie_x
</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">/
</span><span class=
"WHIT"> </span><span class=
"NAME">w
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1933 <span class='line'
>1926</span> </span><span class=
"WHIT"> </span><span class=
"NAME">inc_y
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.abs_max
</span><span class=
"PUNC">[
</span><span class=
"NAME">cie_y
</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">/
</span><span class=
"WHIT"> </span><span class=
"NAME">h
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1934 <span class='line'
>1927</span>
1935 <span class='line'
>1928</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"PUNC">[
</span><span class=
"NAME">cie_x
</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">config.inputValues
</span><span class=
"PUNC">[
</span><span class=
"NAME">cie_x
</span><span class=
"PUNC">]
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1936 <span class='line'
>1929</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"PUNC">[
</span><span class=
"NAME">cie_y
</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">config.inputValues
</span><span class=
"PUNC">[
</span><span class=
"NAME">cie_y
</span><span class=
"PUNC">]
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1937 <span class='line'
>1930</span>
1938 <span class='line'
>1931</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">while
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">i
</span><span class=
"WHIT"> </span><span class=
"PUNC"><</span><span class=
"WHIT"> </span><span class=
"NAME">n
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1939 <span class='line'
>1932</span> </span><span class=
"WHIT"> </span><span class=
"NAME">xyz
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.lab2xyz
</span><span class=
"PUNC">(
</span><span class=
"NAME">color.cie_l
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">color.cie_a
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">color.cie_b
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1940 <span class='line'
>1933</span> </span><span class=
"WHIT"> </span><span class=
"NAME">rgb
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.xyz2rgb
</span><span class=
"PUNC">(
</span><span class=
"NAME">xyz
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1941 <span class='line'
>1934</span>
1942 <span class='line'
>1935</span> </span><span class=
"WHIT"> </span><span class=
"NAME">pix
</span><span class=
"PUNC">[
</span><span class=
"PUNC">++
</span><span class=
"NAME">i
</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">MathRound
</span><span class=
"PUNC">(
</span><span class=
"NAME">rgb
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"PUNC">*
</span><span class=
"NUMB">255</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1943 <span class='line'
>1936</span> </span><span class=
"WHIT"> </span><span class=
"NAME">pix
</span><span class=
"PUNC">[
</span><span class=
"PUNC">++
</span><span class=
"NAME">i
</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">MathRound
</span><span class=
"PUNC">(
</span><span class=
"NAME">rgb
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"PUNC">*
</span><span class=
"NUMB">255</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1944 <span class='line'
>1937</span> </span><span class=
"WHIT"> </span><span class=
"NAME">pix
</span><span class=
"PUNC">[
</span><span class=
"PUNC">++
</span><span class=
"NAME">i
</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">MathRound
</span><span class=
"PUNC">(
</span><span class=
"NAME">rgb
</span><span class=
"PUNC">[
</span><span class=
"NUMB">2</span><span class=
"PUNC">]
</span><span class=
"PUNC">*
</span><span class=
"NUMB">255</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1945 <span class='line'
>1938</span> </span><span class=
"WHIT"> </span><span class=
"NAME">pix
</span><span class=
"PUNC">[
</span><span class=
"PUNC">++
</span><span class=
"NAME">i
</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">255</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1946 <span class='line'
>1939</span>
1947 <span class='line'
>1940</span> </span><span class=
"WHIT"> </span><span class=
"NAME">p
</span><span class=
"PUNC">++
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1948 <span class='line'
>1941</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"PUNC">[
</span><span class=
"NAME">cie_x
</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">inc_x
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1949 <span class='line'
>1942</span>
1950 <span class='line'
>1943</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"PUNC">(
</span><span class=
"NAME">p
</span><span class=
"WHIT"> </span><span class=
"PUNC">%
</span><span class=
"WHIT"> </span><span class=
"NAME">w
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1951 <span class='line'
>1944</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"PUNC">[
</span><span class=
"NAME">cie_x
</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">config.inputValues
</span><span class=
"PUNC">[
</span><span class=
"NAME">cie_x
</span><span class=
"PUNC">]
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1952 <span class='line'
>1945</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"PUNC">[
</span><span class=
"NAME">cie_y
</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">inc_y
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1953 <span class='line'
>1946</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1954 <span class='line'
>1947</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1955 <span class='line'
>1948</span>
1956 <span class='line'
>1949</span> </span><span class=
"WHIT"> </span><span class=
"NAME">context.putImageData
</span><span class=
"PUNC">(
</span><span class=
"NAME">imgd
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1957 <span class='line'
>1950</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1958 <span class='line'
>1951</span>
1959 <span class='line'
>1952</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">return
</span><span class=
"WHIT"> </span><span class=
"KEYW">true
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1960 <span class='line'
>1953</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1961 <span class='line'
>1954</span>
1962 <span class='line'
>1955</span> </span><span class=
"WHIT"> </span><span class=
"COMM">/**
1963 <span class='line'
>1956</span> * Draw the color slider on the Canvas element.
1964 <span class='line'
>1957</span> *
1965 <span class='line'
>1958</span> * @private
1966 <span class='line'
>1959</span> *
1967 <span class='line'
>1960</span> * @param {String} updated_ckey The color key that was updated. This is used
1968 <span class='line'
>1961</span> * to determine if the Canvas needs to be updated or not.
1969 <span class='line'
>1962</span> */
</span><span class=
"WHIT">
1970 <span class='line'
>1963</span> </span><span class=
"WHIT"> </span><span class=
"NAME">this.draw_slider
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">function
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">updated_ckey
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1971 <span class='line'
>1964</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">_self.ckey_active
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"NAME">updated_ckey
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1972 <span class='line'
>1965</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">return
</span><span class=
"WHIT"> </span><span class=
"KEYW">true
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1973 <span class='line'
>1966</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1974 <span class='line'
>1967</span>
1975 <span class='line'
>1968</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">context
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.context2d
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1976 <span class='line'
>1969</span> </span><span class=
"WHIT"> </span><span class=
"NAME">slider_w
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.sliderWidth
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1977 <span class='line'
>1970</span> </span><span class=
"WHIT"> </span><span class=
"NAME">slider_h
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.sliderHeight
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1978 <span class='line'
>1971</span> </span><span class=
"WHIT"> </span><span class=
"NAME">slider_x
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.sliderX
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1979 <span class='line'
>1972</span> </span><span class=
"WHIT"> </span><span class=
"NAME">slider_y
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT">
1980 <span class='line'
>1973</span> </span><span class=
"WHIT"> </span><span class=
"NAME">gradient
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1981 <span class='line'
>1974</span>
1982 <span class='line'
>1975</span> </span><span class=
"WHIT"> </span><span class=
"NAME">gradient
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">context.createLinearGradient
</span><span class=
"PUNC">(
</span><span class=
"NAME">slider_x
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">slider_y
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">slider_x
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">slider_h
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1983 <span class='line'
>1976</span>
1984 <span class='line'
>1977</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">_self.ckey_active
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"STRN">'hue'
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1985 <span class='line'
>1978</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// Draw the hue spectrum gradient.
</span><span class=
"WHIT">
1986 <span class='line'
>1979</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">for
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">i
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">;
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"WHIT"> </span><span class=
"PUNC"><=
</span><span class=
"WHIT"> </span><span class=
"NUMB">6</span><span class=
"PUNC">;
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"PUNC">++
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1987 <span class='line'
>1980</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"STRN">'rgb('
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">hueSpectrum
</span><span class=
"PUNC">[
</span><span class=
"NAME">i
</span><span class=
"PUNC">]
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">', '
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT">
1988 <span class='line'
>1981</span> </span><span class=
"WHIT"> </span><span class=
"NAME">hueSpectrum
</span><span class=
"PUNC">[
</span><span class=
"NAME">i
</span><span class=
"PUNC">]
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">', '
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT">
1989 <span class='line'
>1982</span> </span><span class=
"WHIT"> </span><span class=
"NAME">hueSpectrum
</span><span class=
"PUNC">[
</span><span class=
"NAME">i
</span><span class=
"PUNC">]
</span><span class=
"PUNC">[
</span><span class=
"NUMB">2</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">')'
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1990 <span class='line'
>1983</span> </span><span class=
"WHIT"> </span><span class=
"NAME">gradient.addColorStop
</span><span class=
"PUNC">(
</span><span class=
"NAME">i
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"PUNC">/
</span><span class=
"NUMB">6</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1991 <span class='line'
>1984</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
1992 <span class='line'
>1985</span> </span><span class=
"WHIT"> </span><span class=
"NAME">context.fillStyle
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">gradient
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1993 <span class='line'
>1986</span> </span><span class=
"WHIT"> </span><span class=
"NAME">context.fillRect
</span><span class=
"PUNC">(
</span><span class=
"NAME">slider_x
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">slider_y
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">slider_w
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">slider_h
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1994 <span class='line'
>1987</span>
1995 <span class='line'
>1988</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">_self.color.sat
</span><span class=
"WHIT"> </span><span class=
"PUNC"><</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
1996 <span class='line'
>1989</span> </span><span class=
"WHIT"> </span><span class=
"NAME">context.fillStyle
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"STRN">'rgba(
255,
255,
255, '
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT">
1997 <span class='line'
>1990</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NUMB">1</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.color.sat
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">')'
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1998 <span class='line'
>1991</span> </span><span class=
"WHIT"> </span><span class=
"NAME">context.fillRect
</span><span class=
"PUNC">(
</span><span class=
"NAME">slider_x
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">slider_y
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">slider_w
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">slider_h
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
1999 <span class='line'
>1992</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
2000 <span class='line'
>1993</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">_self.color.val
</span><span class=
"WHIT"> </span><span class=
"PUNC"><</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
2001 <span class='line'
>1994</span> </span><span class=
"WHIT"> </span><span class=
"NAME">context.fillStyle
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"STRN">'rgba(
0,
0,
0, '
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NUMB">1</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.color.val
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">')'
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
2002 <span class='line'
>1995</span> </span><span class=
"WHIT"> </span><span class=
"NAME">context.fillRect
</span><span class=
"PUNC">(
</span><span class=
"NAME">slider_x
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">slider_y
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">slider_w
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">slider_h
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
2003 <span class='line'
>1996</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
2004 <span class='line'
>1997</span>
2005 <span class='line'
>1998</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">_self.ckey_active
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"STRN">'sat'
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
2006 <span class='line'
>1999</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// Draw the saturation gradient for the slider.
</span><span class=
"WHIT">
2007 <span class='line'
>2000</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// The start color is the current color with maximum saturation. The bottom gradient color is the same
"color" without saturation.
</span><span class=
"WHIT">
2008 <span class='line'
>2001</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// The slider allows you to desaturate the current color.
</span><span class=
"WHIT">
2009 <span class='line'
>2002</span>
2010 <span class='line'
>2003</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// Determine the RGB values for the current color which has the same hue and value (HsV), but maximum saturation (hSv).
</span><span class=
"WHIT">
2011 <span class='line'
>2004</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">_self.color.sat
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
2012 <span class='line'
>2005</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"PUNC">[
</span><span class=
"NAME">_self.color.red
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.color.green
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.color.blue
</span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
2013 <span class='line'
>2006</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
2014 <span class='line'
>2007</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.hsv2rgb
</span><span class=
"PUNC">(
</span><span class=
"KEYW">true
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"PUNC">[
</span><span class=
"NAME">_self.color.hue
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.color.val
</span><span class=
"PUNC">]
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
2015 <span class='line'
>2008</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
2016 <span class='line'
>2009</span>
2017 <span class='line'
>2010</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">for
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">i
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">;
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"WHIT"> </span><span class=
"PUNC"><</span><span class=
"WHIT"> </span><span class=
"NUMB">3</span><span class=
"PUNC">;
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"PUNC">++
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
2018 <span class='line'
>2011</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"PUNC">[
</span><span class=
"NAME">i
</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">MathRound
</span><span class=
"PUNC">(
</span><span class=
"NAME">color
</span><span class=
"PUNC">[
</span><span class=
"NAME">i
</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NUMB">255</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
2019 <span class='line'
>2012</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
2020 <span class='line'
>2013</span>
2021 <span class='line'
>2014</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">gray
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">MathRound
</span><span class=
"PUNC">(
</span><span class=
"NAME">_self.color.val
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NUMB">255</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
2022 <span class='line'
>2015</span> </span><span class=
"WHIT"> </span><span class=
"NAME">gradient.addColorStop
</span><span class=
"PUNC">(
</span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"STRN">'rgb('
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">', '
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">', '
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"PUNC">[
</span><span class=
"NUMB">2</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">')'
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
2023 <span class='line'
>2016</span> </span><span class=
"WHIT"> </span><span class=
"NAME">gradient.addColorStop
</span><span class=
"PUNC">(
</span><span class=
"NUMB">1</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"STRN">'rgb('
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">gray
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">', '
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">gray
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">', '
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">gray
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">')'
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
2024 <span class='line'
>2017</span> </span><span class=
"WHIT"> </span><span class=
"NAME">context.fillStyle
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">gradient
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
2025 <span class='line'
>2018</span> </span><span class=
"WHIT"> </span><span class=
"NAME">context.fillRect
</span><span class=
"PUNC">(
</span><span class=
"NAME">slider_x
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">slider_y
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">slider_w
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">slider_h
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
2026 <span class='line'
>2019</span>
2027 <span class='line'
>2020</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">_self.ckey_active
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"STRN">'val'
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
2028 <span class='line'
>2021</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// Determine the RGB values for the current color which has the same hue and saturation, but maximum value (hsV).
</span><span class=
"WHIT">
2029 <span class='line'
>2022</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">_self.color.val
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
2030 <span class='line'
>2023</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"PUNC">[
</span><span class=
"NAME">_self.color.red
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.color.green
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.color.blue
</span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
2031 <span class='line'
>2024</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
2032 <span class='line'
>2025</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.hsv2rgb
</span><span class=
"PUNC">(
</span><span class=
"KEYW">true
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"PUNC">[
</span><span class=
"NAME">_self.color.hue
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.color.sat
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
2033 <span class='line'
>2026</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
2034 <span class='line'
>2027</span>
2035 <span class='line'
>2028</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">for
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">i
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">;
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"WHIT"> </span><span class=
"PUNC"><</span><span class=
"WHIT"> </span><span class=
"NUMB">3</span><span class=
"PUNC">;
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"PUNC">++
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
2036 <span class='line'
>2029</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"PUNC">[
</span><span class=
"NAME">i
</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">MathRound
</span><span class=
"PUNC">(
</span><span class=
"NAME">color
</span><span class=
"PUNC">[
</span><span class=
"NAME">i
</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NUMB">255</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
2037 <span class='line'
>2030</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
2038 <span class='line'
>2031</span>
2039 <span class='line'
>2032</span> </span><span class=
"WHIT"> </span><span class=
"NAME">gradient.addColorStop
</span><span class=
"PUNC">(
</span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"STRN">'rgb('
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">', '
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">', '
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"PUNC">[
</span><span class=
"NUMB">2</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">')'
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
2040 <span class='line'
>2033</span> </span><span class=
"WHIT"> </span><span class=
"NAME">gradient.addColorStop
</span><span class=
"PUNC">(
</span><span class=
"NUMB">1</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"STRN">'rgb(
0,
0,
0)'
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
2041 <span class='line'
>2034</span> </span><span class=
"WHIT"> </span><span class=
"NAME">context.fillStyle
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">gradient
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
2042 <span class='line'
>2035</span> </span><span class=
"WHIT"> </span><span class=
"NAME">context.fillRect
</span><span class=
"PUNC">(
</span><span class=
"NAME">slider_x
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">slider_y
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">slider_w
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">slider_h
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
2043 <span class='line'
>2036</span>
2044 <span class='line'
>2037</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">_self.ckey_active_group
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"STRN">'rgb'
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
2045 <span class='line'
>2038</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">red
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">MathRound
</span><span class=
"PUNC">(
</span><span class=
"NAME">_self.color.red
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NUMB">255</span><span class=
"PUNC">)
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
2046 <span class='line'
>2039</span> </span><span class=
"WHIT"> </span><span class=
"NAME">green
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">MathRound
</span><span class=
"PUNC">(
</span><span class=
"NAME">_self.color.green
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NUMB">255</span><span class=
"PUNC">)
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
2047 <span class='line'
>2040</span> </span><span class=
"WHIT"> </span><span class=
"NAME">blue
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">MathRound
</span><span class=
"PUNC">(
</span><span class=
"NAME">_self.color.blue
</span><span class=
"WHIT"> </span><span class=
"PUNC">*
</span><span class=
"WHIT"> </span><span class=
"NUMB">255</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
2048 <span class='line'
>2041</span>
2049 <span class='line'
>2042</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
2050 <span class='line'
>2043</span> </span><span class=
"WHIT"> </span><span class=
"STRN">'red'
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"NAME">red
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
2051 <span class='line'
>2044</span> </span><span class=
"WHIT"> </span><span class=
"STRN">'green'
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"NAME">green
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
2052 <span class='line'
>2045</span> </span><span class=
"WHIT"> </span><span class=
"STRN">'blue'
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"NAME">blue
</span><span class=
"WHIT">
2053 <span class='line'
>2046</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
2054 <span class='line'
>2047</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"PUNC">[
</span><span class=
"NAME">_self.ckey_active
</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">255</span><span class=
"PUNC">;
</span><span class=
"WHIT">
2055 <span class='line'
>2048</span>
2056 <span class='line'
>2049</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">color2
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
2057 <span class='line'
>2050</span> </span><span class=
"WHIT"> </span><span class=
"STRN">'red'
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"NAME">red
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
2058 <span class='line'
>2051</span> </span><span class=
"WHIT"> </span><span class=
"STRN">'green'
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"NAME">green
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
2059 <span class='line'
>2052</span> </span><span class=
"WHIT"> </span><span class=
"STRN">'blue'
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"NAME">blue
</span><span class=
"WHIT">
2060 <span class='line'
>2053</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
2061 <span class='line'
>2054</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color2
</span><span class=
"PUNC">[
</span><span class=
"NAME">_self.ckey_active
</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">;
</span><span class=
"WHIT">
2062 <span class='line'
>2055</span>
2063 <span class='line'
>2056</span> </span><span class=
"WHIT"> </span><span class=
"NAME">gradient.addColorStop
</span><span class=
"PUNC">(
</span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"STRN">'rgb('
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">color.red
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">','
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">color.green
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">','
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">color.blue
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">')'
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
2064 <span class='line'
>2057</span> </span><span class=
"WHIT"> </span><span class=
"NAME">gradient.addColorStop
</span><span class=
"PUNC">(
</span><span class=
"NUMB">1</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"STRN">'rgb('
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">color2.red
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">','
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">color2.green
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">','
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"NAME">color2.blue
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"WHIT"> </span><span class=
"STRN">')'
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
2065 <span class='line'
>2058</span> </span><span class=
"WHIT"> </span><span class=
"NAME">context.fillStyle
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">gradient
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
2066 <span class='line'
>2059</span> </span><span class=
"WHIT"> </span><span class=
"NAME">context.fillRect
</span><span class=
"PUNC">(
</span><span class=
"NAME">slider_x
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">slider_y
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">slider_w
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">slider_h
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
2067 <span class='line'
>2060</span>
2068 <span class='line'
>2061</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">_self.ckey_active_group
</span><span class=
"WHIT"> </span><span class=
"PUNC">===
</span><span class=
"WHIT"> </span><span class=
"STRN">'lab'
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
2069 <span class='line'
>2062</span> </span><span class=
"WHIT"> </span><span class=
"COMM">// The slider shows a gradient with the current color key going from the minimum to the maximum value. The gradient is calculated pixel by pixel, due to the special way CIE Lab is defined.
</span><span class=
"WHIT">
2070 <span class='line'
>2063</span>
2071 <span class='line'
>2064</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">imgd
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"KEYW">false
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
2072 <span class='line'
>2065</span>
2073 <span class='line'
>2066</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">context.createImageData
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
2074 <span class='line'
>2067</span> </span><span class=
"WHIT"> </span><span class=
"NAME">imgd
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">context.createImageData
</span><span class=
"PUNC">(
</span><span class=
"NUMB">1</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">slider_h
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
2075 <span class='line'
>2068</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"KEYW">if
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">context.getImageData
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
2076 <span class='line'
>2069</span> </span><span class=
"WHIT"> </span><span class=
"NAME">imgd
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">context.getImageData
</span><span class=
"PUNC">(
</span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">slider_h
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
2077 <span class='line'
>2070</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT"> </span><span class=
"KEYW">else
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
2078 <span class='line'
>2071</span> </span><span class=
"WHIT"> </span><span class=
"NAME">imgd
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
2079 <span class='line'
>2072</span> </span><span class=
"WHIT"> </span><span class=
"STRN">'width'
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"PUNC">,
</span><span class=
"WHIT">
2080 <span class='line'
>2073</span> </span><span class=
"WHIT"> </span><span class=
"STRN">'height'
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"NAME">slider_h
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
2081 <span class='line'
>2074</span> </span><span class=
"WHIT"> </span><span class=
"STRN">'data'
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"KEYW">new
</span><span class=
"WHIT"> </span><span class=
"NAME">Array
</span><span class=
"PUNC">(
</span><span class=
"NAME">slider_h
</span><span class=
"PUNC">*
</span><span class=
"NUMB">4</span><span class=
"PUNC">)
</span><span class=
"WHIT">
2082 <span class='line'
>2075</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
2083 <span class='line'
>2076</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
2084 <span class='line'
>2077</span>
2085 <span class='line'
>2078</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">var
</span><span class=
"WHIT"> </span><span class=
"NAME">pix
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">imgd.data
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
2086 <span class='line'
>2079</span> </span><span class=
"WHIT"> </span><span class=
"NAME">n
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">imgd.data.length
</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"WHIT"> </span><span class=
"NUMB">1</span><span class=
"PUNC">,
</span><span class=
"WHIT">
2087 <span class='line'
>2080</span> </span><span class=
"WHIT"> </span><span class=
"NAME">ckey
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.ckey_active
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
2088 <span class='line'
>2081</span> </span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"PUNC">-
</span><span class=
"NUMB">1</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">inc
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">xyz
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">rgb
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
2089 <span class='line'
>2082</span>
2090 <span class='line'
>2083</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
2091 <span class='line'
>2084</span> </span><span class=
"WHIT"> </span><span class=
"STRN">'cie_l'
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.color.cie_l
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
2092 <span class='line'
>2085</span> </span><span class=
"WHIT"> </span><span class=
"STRN">'cie_a'
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.color.cie_a
</span><span class=
"PUNC">,
</span><span class=
"WHIT">
2093 <span class='line'
>2086</span> </span><span class=
"WHIT"> </span><span class=
"STRN">'cie_b'
</span><span class=
"WHIT"> </span><span class=
"PUNC">:
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.color.cie_b
</span><span class=
"WHIT">
2094 <span class='line'
>2087</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
2095 <span class='line'
>2088</span>
2096 <span class='line'
>2089</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"PUNC">[
</span><span class=
"NAME">ckey
</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">config.inputValues
</span><span class=
"PUNC">[
</span><span class=
"NAME">ckey
</span><span class=
"PUNC">]
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
2097 <span class='line'
>2090</span> </span><span class=
"WHIT"> </span><span class=
"NAME">inc
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.abs_max
</span><span class=
"PUNC">[
</span><span class=
"NAME">ckey
</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">/
</span><span class=
"WHIT"> </span><span class=
"NAME">slider_h
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
2098 <span class='line'
>2091</span>
2099 <span class='line'
>2092</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">while
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">i
</span><span class=
"WHIT"> </span><span class=
"PUNC"><</span><span class=
"WHIT"> </span><span class=
"NAME">n
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
2100 <span class='line'
>2093</span> </span><span class=
"WHIT"> </span><span class=
"NAME">xyz
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.lab2xyz
</span><span class=
"PUNC">(
</span><span class=
"NAME">color.cie_l
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">color.cie_a
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">color.cie_b
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
2101 <span class='line'
>2094</span> </span><span class=
"WHIT"> </span><span class=
"NAME">rgb
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">_self.xyz2rgb
</span><span class=
"PUNC">(
</span><span class=
"NAME">xyz
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
2102 <span class='line'
>2095</span> </span><span class=
"WHIT"> </span><span class=
"NAME">pix
</span><span class=
"PUNC">[
</span><span class=
"PUNC">++
</span><span class=
"NAME">i
</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">MathRound
</span><span class=
"PUNC">(
</span><span class=
"NAME">rgb
</span><span class=
"PUNC">[
</span><span class=
"NUMB">0</span><span class=
"PUNC">]
</span><span class=
"PUNC">*
</span><span class=
"NUMB">255</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
2103 <span class='line'
>2096</span> </span><span class=
"WHIT"> </span><span class=
"NAME">pix
</span><span class=
"PUNC">[
</span><span class=
"PUNC">++
</span><span class=
"NAME">i
</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">MathRound
</span><span class=
"PUNC">(
</span><span class=
"NAME">rgb
</span><span class=
"PUNC">[
</span><span class=
"NUMB">1</span><span class=
"PUNC">]
</span><span class=
"PUNC">*
</span><span class=
"NUMB">255</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
2104 <span class='line'
>2097</span> </span><span class=
"WHIT"> </span><span class=
"NAME">pix
</span><span class=
"PUNC">[
</span><span class=
"PUNC">++
</span><span class=
"NAME">i
</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">MathRound
</span><span class=
"PUNC">(
</span><span class=
"NAME">rgb
</span><span class=
"PUNC">[
</span><span class=
"NUMB">2</span><span class=
"PUNC">]
</span><span class=
"PUNC">*
</span><span class=
"NUMB">255</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
2105 <span class='line'
>2098</span> </span><span class=
"WHIT"> </span><span class=
"NAME">pix
</span><span class=
"PUNC">[
</span><span class=
"PUNC">++
</span><span class=
"NAME">i
</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">255</span><span class=
"PUNC">;
</span><span class=
"WHIT">
2106 <span class='line'
>2099</span>
2107 <span class='line'
>2100</span> </span><span class=
"WHIT"> </span><span class=
"NAME">color
</span><span class=
"PUNC">[
</span><span class=
"NAME">ckey
</span><span class=
"PUNC">]
</span><span class=
"WHIT"> </span><span class=
"PUNC">+
</span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NAME">inc
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
2108 <span class='line'
>2101</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
2109 <span class='line'
>2102</span>
2110 <span class='line'
>2103</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">for
</span><span class=
"WHIT"> </span><span class=
"PUNC">(
</span><span class=
"NAME">i
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"NUMB">0</span><span class=
"PUNC">;
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"WHIT"> </span><span class=
"PUNC"><=
</span><span class=
"WHIT"> </span><span class=
"NAME">slider_w
</span><span class=
"PUNC">;
</span><span class=
"WHIT"> </span><span class=
"NAME">i
</span><span class=
"PUNC">++
</span><span class=
"PUNC">)
</span><span class=
"WHIT"> </span><span class=
"PUNC">{
</span><span class=
"WHIT">
2111 <span class='line'
>2104</span> </span><span class=
"WHIT"> </span><span class=
"NAME">context.putImageData
</span><span class=
"PUNC">(
</span><span class=
"NAME">imgd
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">slider_x
</span><span class=
"PUNC">+
</span><span class=
"NAME">i
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">slider_y
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
2112 <span class='line'
>2105</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
2113 <span class='line'
>2106</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"WHIT">
2114 <span class='line'
>2107</span>
2115 <span class='line'
>2108</span> </span><span class=
"WHIT"> </span><span class=
"NAME">context.strokeStyle
</span><span class=
"WHIT"> </span><span class=
"PUNC">=
</span><span class=
"WHIT"> </span><span class=
"STRN">'#
6d6d6d'
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
2116 <span class='line'
>2109</span> </span><span class=
"WHIT"> </span><span class=
"NAME">context.strokeRect
</span><span class=
"PUNC">(
</span><span class=
"NAME">slider_x
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">slider_y
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">slider_w
</span><span class=
"PUNC">,
</span><span class=
"WHIT"> </span><span class=
"NAME">slider_h
</span><span class=
"PUNC">)
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
2117 <span class='line'
>2110</span>
2118 <span class='line'
>2111</span> </span><span class=
"WHIT"> </span><span class=
"KEYW">return
</span><span class=
"WHIT"> </span><span class=
"KEYW">true
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
2119 <span class='line'
>2112</span> </span><span class=
"WHIT"> </span><span class=
"PUNC">}
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
2120 <span class='line'
>2113</span> </span><span class=
"PUNC">}
</span><span class=
"PUNC">;
</span><span class=
"WHIT">
2121 <span class='line'
>2114</span>
2122 <span class='line'
>2115</span> </span><span class=
"COMM">// vim:set spell spl=en fo=wan1croqlt tw=
80 ts=
2 sw=
2 sts=
2 sta et ai cin fenc=utf-
8 ff=unix:
</span><span class=
"WHIT">
2123 <span class='line'
>2116</span>
2124 <span class='line'
>2117</span> </span></pre></body></html>