First commit of Ninja to ninja-internal

Signed-off-by: Valerio Virgillito <rmwh84@motorola.com>

1 files changed, 536 insertions, 0 deletions

diff --git a/js/components/colorwheel.reel/colorwheel.js b/js/components/colorwheel.reel/colorwheel.js
new file mode 100644
index 00000000..343422e2
--- /dev/null
+++ b/js/components/colorwheel.reel/colorwheel.js
@@ -0,0 +1,536 @@
+/* <copyright>
+This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+</copyright> */
+
+////////////////////////////////////////////////////////////////////////
+//
+var Montage =   require("montage/core/core").Montage,
+        Component = require("montage/ui/component").Component;
+////////////////////////////////////////////////////////////////////////
+//
+exports.ColorWheel = Montage.create(Component, {
+        ////////////////////////////////////////////////////////////////////
+        //
+        hasTemplate: {
+                enumerable: false,
+        value: true
+    },
+    ////////////////////////////////////////////////////////////////////
+    //Value of wheel in HSV (360, 100, 100)
+    _value: {
+        enumerable: false,
+        value: {h: 0, s: 0, v: 0}
+    },
+        ////////////////////////////////////////////////////////////////////
+    //Value of wheel in HSV (360, 100, 100)
+    value: {
+        enumerable: false,
+        get: function() {
+            return this._value;
+        },
+        set: function(value) {
+            this._value = value;
+            if (this._wheelData) {
+                if (value && !value.wasSetByCode) {
+                        this.wheelSelectorAngle(value.h/this.element._component.math.TAU*360);
+                                        this.drawSwatchColor(value.h/this.element._component.math.TAU*360);
+                                        this.drawSwatchSelector(value.s*100, value.v*100);
+                }
+                                if (!this._isMouseDown) {
+                                        this._dispatchEvent('change', true);
+                                }
+                        }
+        }
+    },
+    ////////////////////////////////////////////////////////////////////
+    //Stroke size of wheel
+    _strokeWidth: {
+        enumerable: false,
+        value: 2
+    },
+    ////////////////////////////////////////////////////////////////////
+    //Size must be set in digits and interpreted as pixel
+    strokeWidth: {
+        enumerable: false,
+         get: function() {
+            return this._strokeWidth;
+        },
+        set: function(value) {
+                this._strokeWidth = value;
+        }
+    },
+    ////////////////////////////////////////////////////////////////////
+    //Stroke color of wheel
+    _strokeColor: {
+        enumerable: false,
+        value: 'rgb(255, 255, 255)'
+    },
+    ////////////////////////////////////////////////////////////////////
+    //Stroke only apply to wheel rim
+    strokeColor: {
+        enumerable: false,
+         get: function() {
+            return this._strokeColor;
+        },
+        set: function(value) {
+                this._strokeColor = value;
+        }
+    },
+    ////////////////////////////////////////////////////////////////////
+    //Width of the rim
+    _rimWidth: {
+        enumerable: false,
+        value: 2
+    },
+    ////////////////////////////////////////////////////////////////////
+    //Width must be set using digits interpreted as pixel
+    rimWidth: {
+        enumerable: false,
+         get: function() {
+            return this._rimWidth;
+        },
+        set: function(value) {
+                this._rimWidth = value;
+        }
+    },
+    ////////////////////////////////////////////////////////////////////
+    //
+    prepareForDraw: {
+        enumerable: false,
+        value: function() {
+                //
+                this.element._component = {wheel: {}, swatch: {}, wheel_select: {}, swatch_select: {}, math: {}};
+                //
+                this.element._component.math.PI = Math.PI,
+                this.element._component.math.TAU = Math.PI*2,
+                this.element._component.math.RADIANS = Math.PI/180;
+                }
+    },
+    ////////////////////////////////////////////////////////////////////
+    //
+    willDraw: {
+        enumerable: false,
+        value: function() {
+                //
+                this.element.style.opacity = 0;
+                //
+                var cnvs = this.element.getElementsByTagName('canvas');
+                //
+                this.element._component.wheel.canvas = cnvs[0];
+                this.element._component.swatch.canvas = cnvs[1];
+                this.element._component.wheel_select.canvas = cnvs[3];
+                this.element._component.swatch_select.canvas = cnvs[2];
+                //
+                this.element._component.wheel.context = this.element._component.wheel.canvas.getContext("2d");
+                this.element._component.swatch.context = this.element._component.swatch.canvas.getContext("2d");
+                this.element._component.wheel_select.context = this.element._component.wheel_select.canvas.getContext("2d");
+                this.element._component.swatch_select.context = this.element._component.swatch_select.canvas.getContext("2d");
+                }
+    },
+    ////////////////////////////////////////////////////////////////////
+    //
+    draw: {
+        enumerable: false,
+        value: function() {
+                //
+                var slice, i, whlctx = this.element._component.wheel.context, math = this.element._component.math,
+                        whlcvs = this.element._component.wheel.canvas, swhcvs = this.element._component.swatch.canvas,
+                        wslcvs = this.element._component.wheel_select.canvas, swscvs = this.element._component.swatch_select.canvas;
+                //Determing radius by smallest factor of width or height
+                if (this.element.offsetWidth > this.element.offsetHeight) {
+                        math.diameter = this.element.offsetWidth;
+                } else {
+                        math.diameter = this.element.offsetHeight;
+                }
+                //Setting the radius from diameter
+                math.radius = math.diameter/2;
+                //Inner radius of wheel
+                math.innerRadius = math.radius - this.rimWidth;
+                //Setting the widths and heights to match the container's
+                whlcvs.width = whlcvs.height = wslcvs.width = wslcvs.height = swscvs.width = swscvs.height = math.diameter;
+                //
+                math.swatchLength = Math.floor((math.radius - this.rimWidth - this.strokeWidth*4) * Math.sin(45 * math.RADIANS) * 2);
+                math.swatchPosition = Math.round(math.radius - (math.swatchLength/2))+this.strokeWidth* Math.sin(45 * math.RADIANS);
+                //
+                //swhcvs.width = swhcvs.height = math.swatchLength; //TODO: Figure out why this breaks on WINDOWS ONLY
+                swhcvs.style.top = swhcvs.style.left = math.swatchPosition+'px';
+                //Clearing wheel for redraw
+                        whlctx.clearRect(0, 0, math.diameter, math.diameter);
+                        ////////////////////////////////////////////////////////////////
+                        //Drawing color wheel circle
+                        whlctx.save();
+                        whlctx.beginPath();
+                        whlctx.moveTo(0,0);
+                        whlctx.lineTo(math.diameter,0);
+                        whlctx.lineTo(math.diameter,math.diameter);
+                        whlctx.lineTo(0,math.diameter);
+                        whlctx.closePath();
+                        whlctx.clip();
+                        whlctx.strokeStyle = 'rgba(0,0,0,0)';
+                        whlctx.lineCap = 'butt';
+                        whlctx.lineJoin = 'miter';
+                        whlctx.miterLimit = 4;
+                        whlctx.save();
+                ////////////////////////////////////////////////////////////////
+                        //Looping through set intervals
+                        math.radius = math.radius - this.strokeWidth/2;
+                        for (i=0; i<60; i++) {
+                                //Calculating slice number
+                                slice = Math.round(255*i/60);
+                                //Drawing 6 slices (6 colors in color theory)
+                                this._drawWheelSlice (i, 255, slice, 0);
+                                this._drawWheelSlice (i+60, 255-slice, 255, 0);
+                                this._drawWheelSlice (i+120, 0, 255, slice);
+                                this._drawWheelSlice (i+180, 0, 255-slice, 255);
+                                this._drawWheelSlice (i+240, slice, 0, 255);
+                                this._drawWheelSlice (i+300, 255, 0, 255-slice);
+                        }
+                        //
+                        math.radius = math.radius + this.strokeWidth/2;
+                        //
+                        whlctx.strokeStyle = this.strokeColor;
+                        whlctx.lineWidth = this.strokeWidth;
+                        whlctx.globalAlpha = 1;
+                        whlctx.beginPath();
+                        whlctx.arc(math.radius, math.radius, math.radius-this.strokeWidth/2, 0, math.TAU, true);
+                        whlctx.closePath();
+                        whlctx.stroke();
+                        whlctx.restore();
+                        //
+                        whlctx.strokeStyle = this.strokeColor;
+                        whlctx.lineWidth = this.strokeWidth;
+                        whlctx.globalAlpha = 1;
+                        whlctx.beginPath();
+                        whlctx.arc(math.innerRadius+this.rimWidth, math.innerRadius+this.rimWidth, math.innerRadius-this.strokeWidth/2, 0, math.TAU, true);
+                        whlctx.closePath();
+                        whlctx.stroke();
+                        whlctx.restore();
+                        //
+                        whlctx.beginPath();
+                        whlctx.moveTo(math.swatchPosition-this.strokeWidth/2, math.swatchPosition-this.strokeWidth/2);