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  * ControlHuePicker: HUE picker ui component.
 37  * @class
 38  * @extends cc.Control
 39  *
 40  * @property {Number}       hue         - The hue value
 41  * @property {Number}       huePercent  - The hue value in percentage
 42  * @property {cc.Sprite}    background  - <@readonly> The background sprite
 43  * @property {cc.Sprite}    slider      - <@readonly> The slider sprite
 44  * @property {cc.Point}     startPos    - <@readonly> The start position of the picker
 45  */
 46 cc.ControlHuePicker = cc.Control.extend(/** @lends cc.ControlHuePicker# */{
 47     _hue:0,
 48     _huePercentage:0,
 49     _background:null,
 50     _slider:null,
 51     _startPos:null,
 52     _className:"ControlHuePicker",
 53 
 54     /**
 55      * The constructor of cc.ControlHuePicker
 56      * @param {cc.Node} target
 57      * @param {cc.Point} pos position
 58      */
 59     ctor:function(target, pos) {
 60         cc.Control.prototype.ctor.call(this);
 61         pos && this.initWithTargetAndPos(target, pos);
 62     },
 63 
 64     //maunally put in the setters
 65     getHue:function () {
 66         return this._hue;
 67     },
 68     setHue:function (hueValue) {
 69         this._hue = hueValue;
 70         this.setHuePercentage(this._hue / 360.0);
 71     },
 72 
 73     getHuePercentage:function () {
 74         return this._huePercentage;
 75     },
 76     setHuePercentage:function (hueValueInPercent) {
 77         this._huePercentage = hueValueInPercent;
 78         this._hue = this._huePercentage * 360.0;
 79 
 80         // Clamp the position of the icon within the circle
 81         var backgroundBox = this._background.getBoundingBox();
 82 
 83         // Get the center point of the background image
 84         var centerX = this._startPos.x + backgroundBox.width * 0.5;
 85         var centerY = this._startPos.y + backgroundBox.height * 0.5;
 86 
 87         // Work out the limit to the distance of the picker when moving around the hue bar
 88         var limit = backgroundBox.width * 0.5 - 15.0;
 89 
 90         // Update angle
 91         var angleDeg = this._huePercentage * 360.0 - 180.0;
 92         var angle = cc.degreesToRadians(angleDeg);
 93 
 94         // Set new position of the slider
 95         var x = centerX + limit * Math.cos(angle);
 96         var y = centerY + limit * Math.sin(angle);
 97         this._slider.setPosition(x, y);
 98     },
 99 
100     setEnabled:function (enabled) {
101         cc.Control.prototype.setEnabled.call(this, enabled);
102         if (this._slider) {
103             this._slider.setOpacity(enabled ? 255 : 128);
104         }
105     },
106 
107     getBackground:function () {
108         return this._background;
109     },
110     getSlider:function () {
111         return this._slider;
112     },
113     getStartPos:function () {
114         return this._startPos;
115     },
116 
117     initWithTargetAndPos:function (target, pos) {
118         if (cc.Control.prototype.init.call(this)) {
119             // Add background and slider sprites
120             this._background = cc.ControlUtils.addSpriteToTargetWithPosAndAnchor("huePickerBackground.png", target, pos, cc.p(0.0, 0.0));
121             this._slider = cc.ControlUtils.addSpriteToTargetWithPosAndAnchor("colourPicker.png", target, pos, cc.p(0.5, 0.5));
122 
123             this._slider.setPosition(pos.x, pos.y + this._background.getBoundingBox().height * 0.5);
124             this._startPos = pos;
125 
126             // Sets the default value
127             this._hue = 0.0;
128             this._huePercentage = 0.0;
129             return true;
130         } else
131             return false;
132     },
133 
134     _updateSliderPosition:function (location) {
135         // Clamp the position of the icon within the circle
136         var backgroundBox = this._background.getBoundingBox();
137 
138         // Get the center point of the background image
139         var centerX = this._startPos.x + backgroundBox.width * 0.5;
140         var centerY = this._startPos.y + backgroundBox.height * 0.5;
141 
142         // Work out the distance difference between the location and center
143         var dx = location.x - centerX;
144         var dy = location.y - centerY;
145 
146         // Update angle by using the direction of the location
147         var angle = Math.atan2(dy, dx);
148         var angleDeg = cc.radiansToDegrees(angle) + 180.0;
149 
150         // use the position / slider width to determin the percentage the dragger is at
151         this.setHue(angleDeg);
152 
153         // send CCControl callback
154         this.sendActionsForControlEvents(cc.CONTROL_EVENT_VALUECHANGED);
155     },
156     _checkSliderPosition:function (location) {
157         // compute the distance between the current location and the center
158         var distance = Math.sqrt(Math.pow(location.x + 10, 2) + Math.pow(location.y, 2));
159 
160         // check that the touch location is within the circle
161         if (80 > distance && distance > 59)        {
162             this._updateSliderPosition(location);
163             return true;
164         }
165         return false;
166     },
167 
168     onTouchBegan:function (touch, event) {
169         if (!this.isEnabled() || !this.isVisible())        {
170             return false;
171         }
172         var touchLocation = this.getTouchLocation(touch);
173 
174         // Check the touch position on the slider
175         return this._checkSliderPosition(touchLocation);
176     },
177     onTouchMoved:function (touch, event) {
178         // Get the touch location
179         var touchLocation = this.getTouchLocation(touch);
180 
181         //small modification: this allows changing of the colour, even if the touch leaves the bounding area
182         //this._updateSliderPosition(touchLocation);
183         //this.sendActionsForControlEvents(cc.CONTROL_EVENT_VALUECHANGED);
184         // Check the touch position on the slider
185         this._checkSliderPosition(touchLocation);
186     }
187 });
188 
189 var _p = cc.ControlHuePicker.prototype;
190 
191 // Extended properties
192 /** @expose */
193 _p.hue;
194 cc.defineGetterSetter(_p, "hue", _p.getHue, _p.setHue);
195 /** @expose */
196 _p.huePercent;
197 cc.defineGetterSetter(_p, "huePercent", _p.getHuePercentage, _p.setHuePercentage);
198 /** @expose */
199 _p.background;
200 cc.defineGetterSetter(_p, "background", _p.getBackground);
201 /** @expose */
202 _p.slider;
203 cc.defineGetterSetter(_p, "slider", _p.getSlider);
204 /** @expose */
205 _p.startPos;
206 cc.defineGetterSetter(_p, "startPos", _p.getStartPos);
207 
208 _p = null;
209 
210 /**
211  * @deprecated
212  * @param target
213  * @param pos
214  * @returns {ControlHuePicker}
215  */
216 cc.ControlHuePicker.create = function (target, pos) {
217     return new cc.ControlHuePicker(target, pos);
218 };