ccb 0.0.1

data/lib/ccb/builder/templates/project/folder/frameworks/cocos2d-html5/extensions/gui/control-extension/CCControlSaturationBrightnessPicker.js

@@ -0,0 +1,257 @@
+/**
+ *
+ * Copyright (c) 2008-2010 Ricardo Quesada
+ * Copyright (c) 2011-2012 cocos2d-x.org
+ * Copyright (c) 2013-2014 Chukong Technologies Inc.
+ *
+ * Copyright 2012 Stewart Hamilton-Arrandale.
+ * http://creativewax.co.uk
+ *
+ * Modified by Yannick Loriot.
+ * http://yannickloriot.com
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ *
+ *
+ * converted to Javascript / cocos2d-x by Angus C
+ */
+
+/**
+ * ControlSaturationBrightnessPicker: Saturation brightness picker ui component.
+ * @class
+ * @extends cc.Control
+ *
+ * @property {Number}       saturation  - <@readonly> Saturation value of the picker
+ * @property {Number}       brightness  - <@readonly> Brightness value of the picker
+ * @property {cc.Sprite}    background  - <@readonly> The background sprite
+ * @property {cc.Sprite}    overlay     - <@readonly> The overlay sprite
+ * @property {cc.Sprite}    shadow      - <@readonly> The shadow sprite
+ * @property {cc.Sprite}    slider      - <@readonly> The slider sprite
+ * @property {cc.Point}     startPos    - <@readonly> The start position of the picker
+ */
+cc.ControlSaturationBrightnessPicker = cc.Control.extend(/** @lends cc.ControlSaturationBrightnessPicker# */{
+    _saturation:0,
+    _brightness:0,
+
+    _background:null,
+    _overlay:null,
+    _shadow:null,
+    _slider:null,
+    _startPos:null,
+
+    _boxPos:0,
+    _boxSize:0,
+    _className:"ControlSaturationBrightnessPicker",
+
+    /**
+     * The constructor of cc.ControlSaturationBrightnessPicker
+     * @param {cc.Node} target
+     * @param {cc.Point} pos position
+     */
+    ctor:function (target, pos) {
+        cc.Control.prototype.ctor.call(this);
+        pos && this.initWithTargetAndPos(target, pos);
+    },
+    getSaturation:function () {
+        return this._saturation;
+    },
+    getBrightness:function () {
+        return this._brightness;
+    },
+
+    //not sure if these need to be there actually. I suppose someone might want to access the sprite?
+    getBackground:function () {
+        return this._background;
+    },
+    getOverlay:function () {
+        return this._brightness;
+    },
+    getShadow:function () {
+        return this._shadow;
+    },
+    getSlider:function () {
+        return this._slider;
+    },
+    getStartPos:function () {
+        return this._startPos;
+    },
+
+    initWithTargetAndPos:function (target, pos) {
+        if (cc.Control.prototype.init.call(this)) {
+            // Add background and slider sprites
+            this._background = cc.ControlUtils.addSpriteToTargetWithPosAndAnchor("colourPickerBackground.png", target, pos, cc.p(0.0, 0.0));
+            this._overlay = cc.ControlUtils.addSpriteToTargetWithPosAndAnchor("colourPickerOverlay.png", target, pos, cc.p(0.0, 0.0));
+            this._shadow = cc.ControlUtils.addSpriteToTargetWithPosAndAnchor("colourPickerShadow.png", target, pos, cc.p(0.0, 0.0));
+            this._slider = cc.ControlUtils.addSpriteToTargetWithPosAndAnchor("colourPicker.png", target, pos, cc.p(0.5, 0.5));
+
+            this._startPos = pos; // starting position of the colour picker
+            this._boxPos = 35;    // starting position of the virtual box area for picking a colour
+            this._boxSize = this._background.getContentSize().width / 2;    // the size (width and height) of the virtual box for picking a colour from
+            return true;
+        } else
+            return false;
+    },
+
+    setEnabled:function (enabled) {
+        cc.Control.prototype.setEnabled.call(this, enabled);
+        if (this._slider) {
+            this._slider.setOpacity(enabled ? 255 : 128);
+        }
+    },
+
+    updateWithHSV:function (hsv) {
+        var hsvTemp = new cc.HSV();
+        hsvTemp.s = 1;
+        hsvTemp.h = hsv.h;
+        hsvTemp.v = 1;
+
+        var rgb = cc.ControlUtils.RGBfromHSV(hsvTemp);
+        this._background.setColor(cc.color(0 | (rgb.r * 255), 0 | (rgb.g * 255), 0 | (rgb.b * 255)));
+    },
+    updateDraggerWithHSV:function (hsv) {
+        // Set the position of the slider to the correct saturation and brightness
+        var pos = cc.p(this._startPos.x + this._boxPos + (this._boxSize * (1 - hsv.s)),
+            this._startPos.y + this._boxPos + (this._boxSize * hsv.v));
+
+        // update
+        this._updateSliderPosition(pos);
+    },
+
+    _updateSliderPosition:function (sliderPosition) {
+        // Clamp the position of the icon within the circle
+
+        // Get the center point of the bkgd image
+        var centerX = this._startPos.x + this._background.getBoundingBox().width * 0.5;
+        var centerY = this._startPos.y + this._background.getBoundingBox().height * 0.5;
+
+        // Work out the distance difference between the location and center
+        var dx = sliderPosition.x - centerX;
+        var dy = sliderPosition.y - centerY;
+        var dist = Math.sqrt(dx * dx + dy * dy);
+
+        // Update angle by using the direction of the location
+        var angle = Math.atan2(dy, dx);
+
+        // Set the limit to the slider movement within the colour picker
+        var limit = this._background.getBoundingBox().width * 0.5;
+
+        // Check distance doesn't exceed the bounds of the circle
+        if (dist > limit) {
+            sliderPosition.x = centerX + limit * Math.cos(angle);
+            sliderPosition.y = centerY + limit * Math.sin(angle);
+        }
+
+        // Set the position of the dragger
+        this._slider.setPosition(sliderPosition);
+
+
+        // Clamp the position within the virtual box for colour selection
+        if (sliderPosition.x < this._startPos.x + this._boxPos)
+            sliderPosition.x = this._startPos.x + this._boxPos;
+        else if (sliderPosition.x > this._startPos.x + this._boxPos + this._boxSize - 1)
+            sliderPosition.x = this._startPos.x + this._boxPos + this._boxSize - 1;
+        if (sliderPosition.y < this._startPos.y + this._boxPos)
+            sliderPosition.y = this._startPos.y + this._boxPos;
+        else if (sliderPosition.y > this._startPos.y + this._boxPos + this._boxSize)
+            sliderPosition.y = this._startPos.y + this._boxPos + this._boxSize;
+
+        // Use the position / slider width to determin the percentage the dragger is at
+        this._saturation = 1.0 - Math.abs((this._startPos.x + this._boxPos - sliderPosition.x) / this._boxSize);
+        this._brightness = Math.abs((this._startPos.y + this._boxPos - sliderPosition.y) / this._boxSize);
+    },
+
+    _checkSliderPosition:function (location) {
+        // Clamp the position of the icon within the circle
+        // get the center point of the bkgd image
+        var centerX = this._startPos.x + this._background.getBoundingBox().width * 0.5;
+        var centerY = this._startPos.y + this._background.getBoundingBox().height * 0.5;
+
+        // work out the distance difference between the location and center
+        var dx = location.x - centerX;
+        var dy = location.y - centerY;
+        var dist = Math.sqrt(dx * dx + dy * dy);
+
+        // check that the touch location is within the bounding rectangle before sending updates
+        if (dist <= this._background.getBoundingBox().width * 0.5) {
+            this._updateSliderPosition(location);
+            this.sendActionsForControlEvents(cc.CONTROL_EVENT_VALUECHANGED);
+            return true;
+        }
+        return false;
+    },
+
+    onTouchBegan:function (touch, event) {
+        if (!this.isEnabled() || !this.isVisible())        {
+            return false;
+        }
+        // Get the touch location
+        var touchLocation = this.getTouchLocation(touch);
+
+        // Check the touch position on the slider
+        return this._checkSliderPosition(touchLocation);
+    },
+
+    onTouchMoved:function (touch, event) {
+        // Get the touch location
+        var touchLocation = this.getTouchLocation(touch);
+
+        //small modification: this allows changing of the colour, even if the touch leaves the bounding area
+        //this._updateSliderPosition(touchLocation);
+        //this.sendActionsForControlEvents(cc.CONTROL_EVENT_VALUECHANGED);
+        // Check the touch position on the slider
+        this._checkSliderPosition(touchLocation);
+    }
+});
+
+var _p = cc.ControlSaturationBrightnessPicker.prototype;
+
+// Extended properties
+/** @expose */
+_p.saturation;
+cc.defineGetterSetter(_p, "saturation", _p.getSaturation);
+/** @expose */
+_p.brightness;
+cc.defineGetterSetter(_p, "brightness", _p.getBrightness);
+/** @expose */
+_p.background;
+cc.defineGetterSetter(_p, "background", _p.getBackground);
+/** @expose */
+_p.overlay;
+cc.defineGetterSetter(_p, "overlay", _p.getOverlay);
+/** @expose */
+_p.shadow;
+cc.defineGetterSetter(_p, "shadow", _p.getShadow);
+/** @expose */
+_p.slider;
+cc.defineGetterSetter(_p, "slider", _p.getSlider);
+/** @expose */
+_p.startPos;
+cc.defineGetterSetter(_p, "startPos", _p.getStartPos);
+
+_p = null;
+
+/**
+ * Creates a cc.ControlSaturationBrightnessPicker
+ * @param {cc.Node} target
+ * @param {cc.Point} pos position
+ * @returns {ControlSaturationBrightnessPicker}
+ */
+cc.ControlSaturationBrightnessPicker.create = function (target, pos) {
+    return new cc.ControlSaturationBrightnessPicker(target, pos);
+};

data/lib/ccb/builder/templates/project/folder/frameworks/cocos2d-html5/extensions/gui/control-extension/CCControlSlider.js

@@ -0,0 +1,308 @@
+/**
+ *
+ * Copyright (c) 2008-2010 Ricardo Quesada
+ * Copyright (c) 2011-2012 cocos2d-x.org
+ * Copyright (c) 2013-2014 Chukong Technologies Inc.
+ *
+ * Copyright 2011 Yannick Loriot. All rights reserved.
+ * http://yannickloriot.com
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ *
+ *
+ * converted to Javascript / cocos2d-x by Angus C
+ */
+
+/**
+ * @ignore
+ */
+cc.SLIDER_MARGIN_H = 24;
+cc.SLIDER_MARGIN_V = 8;
+
+/**
+ * ControlSlider: Slider ui component.
+ * @class
+ * @extends cc.Control
+ *
+ * @property {Number}       value               - The value of the slider
+ * @property {Number}       minValue            - The minimum value of the slider
+ * @property {Number}       maxValue            - The maximum value of the slider
+ * @property {Number}       minAllowedValue     - The minimum allowed value of the slider
+ * @property {Number}       maxAllowedValue     - The maximum allowed value of the slider
+ * @property {Number}       thumbSprite         - <@readonly> Brightness value of the picker
+ * @property {cc.Sprite}    progressSprite      - <@readonly> The background sprite
+ * @property {cc.Sprite}    backgroundSprite    - <@readonly> The overlay sprite
+ */
+cc.ControlSlider = cc.Control.extend(/** @lends cc.ControlSlider# */{
+    _value:0,
+    _minimumValue:0,
+    _maximumValue:0,
+    _minimumAllowedValue:0,
+    _maximumAllowedValue:0,
+
+    _thumbSprite:null,
+    _progressSprite:null,
+    _backgroundSprite:null,
+    _className:"ControlSlider",
+
+    ctor:function (bgFile, progressFile, thumbFile) {
+        cc.Control.prototype.ctor.call(this);
+        if (thumbFile != undefined) {
+            // Prepare background for slider
+            var bgSprite = new cc.Sprite(bgFile);
+
+            // Prepare progress for slider
+            var progressSprite = new cc.Sprite(progressFile);
+
+            // Prepare thumb (menuItem) for slider
+            var thumbSprite = new cc.Sprite(thumbFile);
+
+            this.initWithSprites(bgSprite, progressSprite, thumbSprite);
+        }
+    },
+
+    getValue:function () {
+        return this._value;
+    },
+    setValue:function (value) {
+        //clamp between the two bounds
+        value = Math.max(value, this._minimumValue);
+        value = Math.min(value, this._maximumValue);
+        this._value = value;
+        this.needsLayout();
+        this.sendActionsForControlEvents(cc.CONTROL_EVENT_VALUECHANGED);
+    },
+
+    getMinimumValue:function () {
+        return this._minimumValue;
+    },
+    setMinimumValue:function (minimumValue) {
+        this._minimumValue = minimumValue;
+        this._minimumAllowedValue = minimumValue;
+        if (this._minimumValue >= this._maximumValue)
+            this._maximumValue = this._minimumValue + 1.0;
+        this.setValue(this._value);
+    },
+
+    getMaximumValue:function () {
+        return this._maximumValue;
+    },
+    setMaximumValue:function (maximumValue) {
+        this._maximumValue = maximumValue;
+        this._maximumAllowedValue = maximumValue;
+        if (this._maximumValue <= this._minimumValue)
+            this._minimumValue = this._maximumValue - 1.0;
+        this.setValue(this._value);
+    },
+    isTouchInside:function (touch) {
+        var touchLocation = touch.getLocation();
+        touchLocation = this.getParent().convertToNodeSpace(touchLocation);
+
+        var rect = this.getBoundingBox();
+        rect.width += this._thumbSprite.getContentSize().width;
+        rect.x -= this._thumbSprite.getContentSize().width / 2;
+
+        return cc.rectContainsPoint(rect, touchLocation);
+    },
+    locationFromTouch:function (touch) {
+        var touchLocation = touch.getLocation();                      // Get the touch position
+        touchLocation = this.convertToNodeSpace(touchLocation);                  // Convert to the node space of this class
+
+        if (touchLocation.x < 0) {
+            touchLocation.x = 0;
+        } else if (touchLocation.x > this._backgroundSprite.getContentSize().width) {
+            touchLocation.x = this._backgroundSprite.getContentSize().width;
+        }
+
+        return touchLocation;
+    },
+    getMinimumAllowedValue:function () {
+        return this._minimumAllowedValue;
+    },
+    setMinimumAllowedValue:function (val) {
+        this._minimumAllowedValue = val;
+    },
+
+    getMaximumAllowedValue:function () {
+        return this._maximumAllowedValue;
+    },
+
+    setMaximumAllowedValue:function (val) {
+        this._maximumAllowedValue = val;
+    },
+
+    getThumbSprite:function () {
+        return this._thumbSprite;
+    },
+    getProgressSprite:function () {
+        return this._progressSprite;
+    },
+    getBackgroundSprite:function () {
+        return this._backgroundSprite;
+    },
+
+    /**
+     * Initializes a slider with a background sprite, a progress bar and a thumb
+     * item.
+     *
+     * @param {cc.Sprite} backgroundSprite  CCSprite, that is used as a background.
+     * @param {cc.Sprite} progressSprite    CCSprite, that is used as a progress bar.
+     * @param {cc.Sprite} thumbSprite         CCMenuItem, that is used as a thumb.
+     */
+    initWithSprites:function (backgroundSprite, progressSprite, thumbSprite) {
+        if (cc.Control.prototype.init.call(this)) {
+            this.ignoreAnchorPointForPosition(false);
+
+            this._backgroundSprite = backgroundSprite;
+            this._progressSprite = progressSprite;
+            this._thumbSprite = thumbSprite;
+
+            // Defines the content size
+            var maxRect = cc.ControlUtils.CCRectUnion(backgroundSprite.getBoundingBox(), thumbSprite.getBoundingBox());
+            this.setContentSize(maxRect.width, maxRect.height);
+
+            // Add the slider background
+            this._backgroundSprite.setAnchorPoint(0.5, 0.5);
+            this._backgroundSprite.setPosition(maxRect.width / 2, maxRect.height / 2);
+            this.addChild(this._backgroundSprite);
+
+            // Add the progress bar
+            this._progressSprite.setAnchorPoint(0.0, 0.5);
+            this._progressSprite.setPosition(0, maxRect.height / 2);
+            this.addChild(this._progressSprite);
+
+            // Add the slider thumb
+            this._thumbSprite.setPosition(0, maxRect.height / 2);
+            this.addChild(this._thumbSprite);
+
+            // Init default values
+            this._minimumValue = 0.0;
+            this._maximumValue = 1.0;
+            this.setValue(this._minimumValue);
+            return true;
+        } else
+            return false;
+    },
+
+    setEnabled:function (enabled) {
+        cc.Control.prototype.setEnabled.call(this, enabled);
+        if (this._thumbSprite) {
+            this._thumbSprite.setOpacity(enabled ? 255 : 128);
+        }
+    },
+
+    sliderBegan:function (location) {
+        this.setSelected(true);
+        this._thumbSprite.setColor(cc.color.GRAY);
+        this.setValue(this.valueForLocation(location));
+    },
+    sliderMoved:function (location) {
+        this.setValue(this.valueForLocation(location));
+    },
+    sliderEnded:function (location) {
+        if (this.isSelected()) {
+            this.setValue(this.valueForLocation(this._thumbSprite.getPosition()));
+        }
+        this._thumbSprite.setColor(cc.color.WHITE);
+        this.setSelected(false);
+    },
+
+    getTouchLocationInControl:function (touch) {
+        var touchLocation = touch.getLocation();                      // Get the touch position
+        touchLocation = this.convertToNodeSpace(touchLocation);         // Convert to the node space of this class
+
+        if (touchLocation.x < 0) {
+            touchLocation.x = 0;
+        } else if (touchLocation.x > this._backgroundSprite.getContentSize().width + cc.SLIDER_MARGIN_H) {
+            touchLocation.x = this._backgroundSprite.getContentSize().width + cc.SLIDER_MARGIN_H;
+        }
+        return touchLocation;
+    },
+
+    onTouchBegan:function (touch, event) {
+        if (!this.isTouchInside(touch)|| !this.isEnabled() || !this.isVisible())
+            return false;
+
+        var location = this.locationFromTouch(touch);
+        this.sliderBegan(location);
+        return true;
+    },
+    onTouchMoved:function (touch, event) {
+        var location = this.locationFromTouch(touch);
+        this.sliderMoved(location);
+    },
+    onTouchEnded:function (touch, event) {
+        this.sliderEnded(cc.p(0,0));
+    },
+    needsLayout:function(){
+        var percent = (this._value - this._minimumValue) / (this._maximumValue - this._minimumValue);
+        this._thumbSprite.setPositionX(percent * this._backgroundSprite.getContentSize().width);
+
+        // Stretches content proportional to newLevel
+        var textureRect = this._progressSprite.getTextureRect();
+        textureRect = cc.rect(textureRect.x, textureRect.y, this._thumbSprite.getPositionX(), textureRect.height);
+        this._progressSprite.setTextureRect(textureRect, this._progressSprite.isTextureRectRotated());
+        this._thumbSprite._renderCmd.transform(this._renderCmd);
+    },
+    /** Returns the value for the given location. */
+    valueForLocation:function (location) {
+        var percent = location.x / this._backgroundSprite.getContentSize().width;
+        return Math.max(Math.min(this._minimumValue + percent * (this._maximumValue - this._minimumValue), this._maximumAllowedValue), this._minimumAllowedValue);
+    }
+});
+
+var _p = cc.ControlSlider.prototype;
+
+// Extended properties
+/** @expose */
+_p.value;
+cc.defineGetterSetter(_p, "value", _p.getValue, _p.setValue);
+/** @expose */
+_p.minValue;
+cc.defineGetterSetter(_p, "minValue", _p.getMinimumValue, _p.setMinimumValue);
+/** @expose */
+_p.maxValue;
+cc.defineGetterSetter(_p, "maxValue", _p.getMaximumValue, _p.setMaximumValue);
+/** @expose */
+_p.minAllowedValue;
+cc.defineGetterSetter(_p, "minAllowedValue", _p.getMinimumAllowedValue, _p.setMinimumAllowedValue);
+/** @expose */
+_p.maxAllowedValue;
+cc.defineGetterSetter(_p, "maxAllowedValue", _p.getMaximumAllowedValue, _p.setMaximumAllowedValue);
+/** @expose */
+_p.thumbSprite;
+cc.defineGetterSetter(_p, "thumbSprite", _p.getThumbSprite);
+/** @expose */
+_p.progressSprite;
+cc.defineGetterSetter(_p, "progressSprite", _p.getProgressSprite);
+/** @expose */
+_p.backgroundSprite;
+cc.defineGetterSetter(_p, "backgroundSprite", _p.getBackgroundSprite);
+
+_p = null;
+
+/**
+ * Creates a slider with a given background sprite and a progress bar and a
+ * thumb item.
+ * @deprecated
+ * @see cc.ControlSlider
+ */
+cc.ControlSlider.create = function (bgFile, progressFile, thumbFile) {
+    return new cc.ControlSlider(bgFile, progressFile, thumbFile);
+};