1 /**
  2  *
  3  * Copyright (c) 2008-2010 Ricardo Quesada
  4  * Copyright (c) 2011-2012 cocos2d-x.org
  5  * Copyright (c) 2013-2014 Chukong Technologies Inc.
  6  *
  7  * Copyright 2012 Stewart Hamilton-Arrandale.
  8  * http://creativewax.co.uk
  9  *
 10  * Modified by Yannick Loriot.
 11  * http://yannickloriot.com
 12  *
 13  * Permission is hereby granted, free of charge, to any person obtaining a copy
 14  * of this software and associated documentation files (the "Software"), to deal
 15  * in the Software without restriction, including without limitation the rights
 16  * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 17  * copies of the Software, and to permit persons to whom the Software is
 18  * furnished to do so, subject to the following conditions:
 19  *
 20  * The above copyright notice and this permission notice shall be included in
 21  * all copies or substantial portions of the Software.
 22  *
 23  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 24  * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 25  * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 26  * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 27  * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 28  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 29  * THE SOFTWARE.
 30  *
 31  *
 32  * converted to Javascript / cocos2d-x by Angus C
 33  */
 34 
 35 /**
 36  * ControlSaturationBrightnessPicker: Saturation brightness picker ui component.
 37  * @class
 38  * @extends cc.Control
 39  *
 40  * @property {Number}       saturation  - <@readonly> Saturation value of the picker
 41  * @property {Number}       brightness  - <@readonly> Brightness value of the picker
 42  * @property {cc.Sprite}    background  - <@readonly> The background sprite
 43  * @property {cc.Sprite}    overlay     - <@readonly> The overlay sprite
 44  * @property {cc.Sprite}    shadow      - <@readonly> The shadow sprite
 45  * @property {cc.Sprite}    slider      - <@readonly> The slider sprite
 46  * @property {cc.Point}     startPos    - <@readonly> The start position of the picker
 47  */
 48 cc.ControlSaturationBrightnessPicker = cc.Control.extend(/** @lends cc.ControlSaturationBrightnessPicker# */{
 49     _saturation:0,
 50     _brightness:0,
 51 
 52     _background:null,
 53     _overlay:null,
 54     _shadow:null,
 55     _slider:null,
 56     _startPos:null,
 57 
 58     _boxPos:0,
 59     _boxSize:0,
 60     _className:"ControlSaturationBrightnessPicker",
 61 
 62     /**
 63      * The constructor of cc.ControlSaturationBrightnessPicker
 64      * @param {cc.Node} target
 65      * @param {cc.Point} pos position
 66      */
 67     ctor:function (target, pos) {
 68         cc.Control.prototype.ctor.call(this);
 69         pos && this.initWithTargetAndPos(target, pos);
 70     },
 71     getSaturation:function () {
 72         return this._saturation;
 73     },
 74     getBrightness:function () {
 75         return this._brightness;
 76     },
 77 
 78     //not sure if these need to be there actually. I suppose someone might want to access the sprite?
 79     getBackground:function () {
 80         return this._background;
 81     },
 82     getOverlay:function () {
 83         return this._brightness;
 84     },
 85     getShadow:function () {
 86         return this._shadow;
 87     },
 88     getSlider:function () {
 89         return this._slider;
 90     },
 91     getStartPos:function () {
 92         return this._startPos;
 93     },
 94 
 95     initWithTargetAndPos:function (target, pos) {
 96         if (cc.Control.prototype.init.call(this)) {
 97             // Add background and slider sprites
 98             this._background = cc.ControlUtils.addSpriteToTargetWithPosAndAnchor("colourPickerBackground.png", target, pos, cc.p(0.0, 0.0));
 99             this._overlay = cc.ControlUtils.addSpriteToTargetWithPosAndAnchor("colourPickerOverlay.png", target, pos, cc.p(0.0, 0.0));
100             this._shadow = cc.ControlUtils.addSpriteToTargetWithPosAndAnchor("colourPickerShadow.png", target, pos, cc.p(0.0, 0.0));
101             this._slider = cc.ControlUtils.addSpriteToTargetWithPosAndAnchor("colourPicker.png", target, pos, cc.p(0.5, 0.5));
102 
103             this._startPos = pos; // starting position of the colour picker
104             this._boxPos = 35;    // starting position of the virtual box area for picking a colour
105             this._boxSize = this._background.getContentSize().width / 2;    // the size (width and height) of the virtual box for picking a colour from
106             return true;
107         } else
108             return false;
109     },
110 
111     setEnabled:function (enabled) {
112         cc.Control.prototype.setEnabled.call(this, enabled);
113         if (this._slider) {
114             this._slider.setOpacity(enabled ? 255 : 128);
115         }
116     },
117 
118     updateWithHSV:function (hsv) {
119         var hsvTemp = new cc.HSV();
120         hsvTemp.s = 1;
121         hsvTemp.h = hsv.h;
122         hsvTemp.v = 1;
123 
124         var rgb = cc.ControlUtils.RGBfromHSV(hsvTemp);
125         this._background.setColor(cc.color(0 | (rgb.r * 255), 0 | (rgb.g * 255), 0 | (rgb.b * 255)));
126     },
127     updateDraggerWithHSV:function (hsv) {
128         // Set the position of the slider to the correct saturation and brightness
129         var pos = cc.p(this._startPos.x + this._boxPos + (this._boxSize * (1 - hsv.s)),
130             this._startPos.y + this._boxPos + (this._boxSize * hsv.v));
131 
132         // update
133         this._updateSliderPosition(pos);
134     },
135 
136     _updateSliderPosition:function (sliderPosition) {
137         // Clamp the position of the icon within the circle
138 
139         // Get the center point of the bkgd image
140         var centerX = this._startPos.x + this._background.getBoundingBox().width * 0.5;
141         var centerY = this._startPos.y + this._background.getBoundingBox().height * 0.5;
142 
143         // Work out the distance difference between the location and center
144         var dx = sliderPosition.x - centerX;
145         var dy = sliderPosition.y - centerY;
146         var dist = Math.sqrt(dx * dx + dy * dy);
147 
148         // Update angle by using the direction of the location
149         var angle = Math.atan2(dy, dx);
150 
151         // Set the limit to the slider movement within the colour picker
152         var limit = this._background.getBoundingBox().width * 0.5;
153 
154         // Check distance doesn't exceed the bounds of the circle
155         if (dist > limit) {
156             sliderPosition.x = centerX + limit * Math.cos(angle);
157             sliderPosition.y = centerY + limit * Math.sin(angle);
158         }
159 
160         // Set the position of the dragger
161         this._slider.setPosition(sliderPosition);
162 
163 
164         // Clamp the position within the virtual box for colour selection
165         if (sliderPosition.x < this._startPos.x + this._boxPos)
166             sliderPosition.x = this._startPos.x + this._boxPos;
167         else if (sliderPosition.x > this._startPos.x + this._boxPos + this._boxSize - 1)
168             sliderPosition.x = this._startPos.x + this._boxPos + this._boxSize - 1;
169         if (sliderPosition.y < this._startPos.y + this._boxPos)
170             sliderPosition.y = this._startPos.y + this._boxPos;
171         else if (sliderPosition.y > this._startPos.y + this._boxPos + this._boxSize)
172             sliderPosition.y = this._startPos.y + this._boxPos + this._boxSize;
173 
174         // Use the position / slider width to determin the percentage the dragger is at
175         this._saturation = 1.0 - Math.abs((this._startPos.x + this._boxPos - sliderPosition.x) / this._boxSize);
176         this._brightness = Math.abs((this._startPos.y + this._boxPos - sliderPosition.y) / this._boxSize);
177     },
178 
179     _checkSliderPosition:function (location) {
180         // Clamp the position of the icon within the circle
181         // get the center point of the bkgd image
182         var centerX = this._startPos.x + this._background.getBoundingBox().width * 0.5;
183         var centerY = this._startPos.y + this._background.getBoundingBox().height * 0.5;
184 
185         // work out the distance difference between the location and center
186         var dx = location.x - centerX;
187         var dy = location.y - centerY;
188         var dist = Math.sqrt(dx * dx + dy * dy);
189 
190         // check that the touch location is within the bounding rectangle before sending updates
191         if (dist <= this._background.getBoundingBox().width * 0.5) {
192             this._updateSliderPosition(location);
193             this.sendActionsForControlEvents(cc.CONTROL_EVENT_VALUECHANGED);
194             return true;
195         }
196         return false;
197     },
198 
199     onTouchBegan:function (touch, event) {
200         if (!this.isEnabled() || !this.isVisible())        {
201             return false;
202         }
203         // Get the touch location
204         var touchLocation = this.getTouchLocation(touch);
205 
206         // Check the touch position on the slider
207         return this._checkSliderPosition(touchLocation);
208     },
209 
210     onTouchMoved:function (touch, event) {
211         // Get the touch location
212         var touchLocation = this.getTouchLocation(touch);
213 
214         //small modification: this allows changing of the colour, even if the touch leaves the bounding area
215         //this._updateSliderPosition(touchLocation);
216         //this.sendActionsForControlEvents(cc.CONTROL_EVENT_VALUECHANGED);
217         // Check the touch position on the slider
218         this._checkSliderPosition(touchLocation);
219     }
220 });
221 
222 var _p = cc.ControlSaturationBrightnessPicker.prototype;
223 
224 // Extended properties
225 /** @expose */
226 _p.saturation;
227 cc.defineGetterSetter(_p, "saturation", _p.getSaturation);
228 /** @expose */
229 _p.brightness;
230 cc.defineGetterSetter(_p, "brightness", _p.getBrightness);
231 /** @expose */
232 _p.background;
233 cc.defineGetterSetter(_p, "background", _p.getBackground);
234 /** @expose */
235 _p.overlay;
236 cc.defineGetterSetter(_p, "overlay", _p.getOverlay);
237 /** @expose */
238 _p.shadow;
239 cc.defineGetterSetter(_p, "shadow", _p.getShadow);
240 /** @expose */
241 _p.slider;
242 cc.defineGetterSetter(_p, "slider", _p.getSlider);
243 /** @expose */
244 _p.startPos;
245 cc.defineGetterSetter(_p, "startPos", _p.getStartPos);
246 
247 _p = null;
248 
249 /**
250  * Creates a cc.ControlSaturationBrightnessPicker
251  * @param {cc.Node} target
252  * @param {cc.Point} pos position
253  * @returns {ControlSaturationBrightnessPicker}
254  */
255 cc.ControlSaturationBrightnessPicker.create = function (target, pos) {
256     return new cc.ControlSaturationBrightnessPicker(target, pos);
257 };