From 648ee61ae84216d0236e0dbc211addc13b2cfa3a Mon Sep 17 00:00:00 2001
From: Kris Kowal
Date: Fri, 6 Jul 2012 11:52:06 -0700
Subject: Expand tabs
---
js/components/colorwheel.reel/colorwheel.html | 60 +-
js/components/colorwheel.reel/colorwheel.js | 710 +++++++++++-----------
js/components/colorwheel.reel/css/colorwheel.scss | 6 +-
3 files changed, 388 insertions(+), 388 deletions(-)
(limited to 'js/components/colorwheel.reel')
diff --git a/js/components/colorwheel.reel/colorwheel.html b/js/components/colorwheel.reel/colorwheel.html
index b39479a8..4f542f88 100755
--- a/js/components/colorwheel.reel/colorwheel.html
+++ b/js/components/colorwheel.reel/colorwheel.html
@@ -31,39 +31,39 @@ POSSIBILITY OF SUCH DAMAGE.
-->
-
-
-
-
-
+
+
+
+
+
-
-
-
-
-
+ }
+ }
+ }
+
+
+
-
-
-
-
-
-
+
-
+
+
+
+
+
+
+
+
diff --git a/js/components/colorwheel.reel/colorwheel.js b/js/components/colorwheel.reel/colorwheel.js
index a7c70038..97a1751d 100755
--- a/js/components/colorwheel.reel/colorwheel.js
+++ b/js/components/colorwheel.reel/colorwheel.js
@@ -30,14 +30,14 @@ POSSIBILITY OF SUCH DAMAGE.
////////////////////////////////////////////////////////////////////////
//
-var Montage = require("montage/core/core").Montage,
- Component = require("montage/ui/component").Component;
+var Montage = require("montage/core/core").Montage,
+ Component = require("montage/ui/component").Component;
////////////////////////////////////////////////////////////////////////
//
exports.ColorWheel = Montage.create(Component, {
- ////////////////////////////////////////////////////////////////////
- //
- hasTemplate: {
+ ////////////////////////////////////////////////////////////////////
+ //
+ hasTemplate: {
value: true
},
////////////////////////////////////////////////////////////////////
@@ -45,7 +45,7 @@ exports.ColorWheel = Montage.create(Component, {
_value: {
value: {h: 0, s: 0, v: 0}
},
- ////////////////////////////////////////////////////////////////////
+ ////////////////////////////////////////////////////////////////////
//Value of wheel in HSV (360, 100, 100)
value: {
get: function() {
@@ -54,463 +54,463 @@ exports.ColorWheel = Montage.create(Component, {
set: function(value) {
this._value = value;
if (this._wheelData) {
- if (value && !value.wasSetByCode) {
- this.wheelSelectorAngle(value.h/this._math.TAU*360);
- this.drawSwatchColor(value.h/this._math.TAU*360);
- this.drawSwatchSelector(value.s*100, value.v*100);
- }
- if (!this._isMouseDown) {
- this._dispatchEvent('change', true);
- }
- }
+ if (value && !value.wasSetByCode) {
+ this.wheelSelectorAngle(value.h/this._math.TAU*360);
+ this.drawSwatchColor(value.h/this._math.TAU*360);
+ this.drawSwatchSelector(value.s*100, value.v*100);
+ }
+ if (!this._isMouseDown) {
+ this._dispatchEvent('change', true);
+ }
+ }
}
},
////////////////////////////////////////////////////////////////////
//Stroke size of wheel
_strokeWidth: {
- value: 2
+ value: 2
},
////////////////////////////////////////////////////////////////////
//Size must be set in digits and interpreted as pixel
strokeWidth: {
- get: function() {
+ get: function() {
return this._strokeWidth;
},
set: function(value) {
- this._strokeWidth = value;
+ this._strokeWidth = value;
}
},
////////////////////////////////////////////////////////////////////
//Stroke color of wheel
_strokeColor: {
- value: 'rgb(255, 255, 255)'
+ value: 'rgb(255, 255, 255)'
},
////////////////////////////////////////////////////////////////////
//Stroke only apply to wheel rim
strokeColor: {
- get: function() {
+ get: function() {
return this._strokeColor;
},
set: function(value) {
- this._strokeColor = value;
+ this._strokeColor = value;
}
},
////////////////////////////////////////////////////////////////////
//Width of the rim
_rimWidth: {
- value: 2
+ value: 2
},
////////////////////////////////////////////////////////////////////
//Width must be set using digits interpreted as pixel
rimWidth: {
- get: function() {
+ get: function() {
return this._rimWidth;
},
set: function(value) {
- this._rimWidth = value;
+ this._rimWidth = value;
}
},
////////////////////////////////////////////////////////////////////
//
_math: {
- value: {PI: Math.PI, TAU: Math.PI*2, RADIANS: Math.PI/180}
+ value: {PI: Math.PI, TAU: Math.PI*2, RADIANS: Math.PI/180}
},
////////////////////////////////////////////////////////////////////
//
prepareForDraw: {
- value: function() {
- //Hidding component while it is drawn
- this.element.style.opacity = 0;
- }
+ value: function() {
+ //Hidding component while it is drawn
+ this.element.style.opacity = 0;
+ }
},
////////////////////////////////////////////////////////////////////
//
willDraw: {
- value: function() {
- //
- }
+ value: function() {
+ //
+ }
},
////////////////////////////////////////////////////////////////////
//
draw: {
- value: function() {
- //
- var slice, i, whlctx = this.wheel.getContext("2d");
- //Determing radius by smallest factor of width or height
- if (this.element.offsetWidth > this.element.offsetHeight) {
- this._math.diameter = this.element.offsetWidth;
- } else {
- this._math.diameter = this.element.offsetHeight;
- }
- //Setting the radius from diameter
- this._math.radius = this._math.diameter/2;
- //Inner radius of wheel
- this._math.innerRadius = this._math.radius - this.rimWidth;
- //Setting the widths and heights to match the container's
- this.wheel.width = this.wheel.height = this.wheelSelect.width = this.wheelSelect.height = this.swatchSelect.width = this.swatchSelect.height = this._math.diameter;
- //
- this._math.swatchLength = Math.floor((this._math.radius - this.rimWidth - this.strokeWidth*4) * Math.sin(45 * this._math.RADIANS) * 2);
- this._math.swatchPosition = Math.round(this._math.radius - (this._math.swatchLength/2))+this.strokeWidth* Math.sin(45 * this._math.RADIANS);
- //
- this.swatch.style.top = this.swatch.style.left = this._math.swatchPosition+'px';
- //Clearing wheel for redraw
- whlctx.clearRect(0, 0, this._math.diameter, this._math.diameter);
- ////////////////////////////////////////////////////////////////
- //Drawing color wheel circle
- whlctx.save();
- whlctx.beginPath();
- whlctx.moveTo(0,0);
- whlctx.lineTo(this._math.diameter,0);
- whlctx.lineTo(this._math.diameter,this._math.diameter);
- whlctx.lineTo(0,this._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
- this._math.radius = this._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);
- }
- //
- this._math.radius = this._math.radius + this.strokeWidth/2;
- //TODO: Add parameter to allow for color specification of this inner 'empty' circle in wheel
- whlctx.beginPath();
- whlctx.arc(this._math.innerRadius+this.rimWidth, this._math.innerRadius+this.rimWidth, this._math.innerRadius-this.strokeWidth/2, 0, this._math.TAU, true);
- whlctx.fillStyle = '#494949';
- whlctx.fill();
- whlctx.restore();
- //
- whlctx.strokeStyle = this.strokeColor;
- whlctx.lineWidth = this.strokeWidth;
- whlctx.globalAlpha = 1;
- whlctx.beginPath();
- whlctx.arc(this._math.radius, this._math.radius, this._math.radius-this.strokeWidth/2, 0, this._math.TAU, true);
- whlctx.closePath();
- whlctx.stroke();
- whlctx.restore();
- //
- whlctx.strokeStyle = this.strokeColor;
- whlctx.lineWidth = this.strokeWidth;
- whlctx.globalAlpha = 1;
- whlctx.beginPath();
- whlctx.arc(this._math.innerRadius+this.rimWidth, this._math.innerRadius+this.rimWidth, this._math.innerRadius-this.strokeWidth/2, 0, this._math.TAU, true);
- whlctx.closePath();
- whlctx.stroke();
- whlctx.restore();
- //
- whlctx.beginPath();
- whlctx.moveTo(this._math.swatchPosition-this.strokeWidth/2, this._math.swatchPosition-this.strokeWidth/2);
- whlctx.lineTo(this._math.swatchLength+this._math.swatchPosition-this.strokeWidth/2, this._math.swatchPosition-this.strokeWidth/2);
- whlctx.lineTo(this._math.swatchLength+this._math.swatchPosition-this.strokeWidth/2, this._math.swatchLength+this._math.swatchPosition-this.strokeWidth/2);
- whlctx.lineTo(this._math.swatchPosition-this.strokeWidth/2, this._math.swatchLength+this._math.swatchPosition-this.strokeWidth/2);
- whlctx.closePath();
- whlctx.strokeStyle = "rgba(0, 0, 0, .25)";
- whlctx.shadowColor = "rgba(0, 0, 0, 1)";
- whlctx.shadowBlur = 2;
- whlctx.stroke();
- //
- this._wheelData = whlctx.getImageData(0, 0, this._math.diameter, this._math.diameter);
- //TODO: Fix redraw bug
- if(!this.value) {
- this.wheelSelectorAngle(0);
- this.drawSwatchColor(0);
- this.drawSwatchSelector(100, 100);
- } else {
- this.wheelSelectorAngle(0);
- this.drawSwatchColor(0);
- this.drawSwatchSelector(100, 100);
- //
- this.wheelSelectorAngle(this.value.h/this._math.TAU*360);
- this.drawSwatchColor(this.value.h/this._math.TAU*360);
- this.drawSwatchSelector(this.value.s*100, this.value.v*100);
- }
- }
+ value: function() {
+ //
+ var slice, i, whlctx = this.wheel.getContext("2d");
+ //Determing radius by smallest factor of width or height
+ if (this.element.offsetWidth > this.element.offsetHeight) {
+ this._math.diameter = this.element.offsetWidth;
+ } else {
+ this._math.diameter = this.element.offsetHeight;
+ }
+ //Setting the radius from diameter
+ this._math.radius = this._math.diameter/2;
+ //Inner radius of wheel
+ this._math.innerRadius = this._math.radius - this.rimWidth;
+ //Setting the widths and heights to match the container's
+ this.wheel.width = this.wheel.height = this.wheelSelect.width = this.wheelSelect.height = this.swatchSelect.width = this.swatchSelect.height = this._math.diameter;
+ //
+ this._math.swatchLength = Math.floor((this._math.radius - this.rimWidth - this.strokeWidth*4) * Math.sin(45 * this._math.RADIANS) * 2);
+ this._math.swatchPosition = Math.round(this._math.radius - (this._math.swatchLength/2))+this.strokeWidth* Math.sin(45 * this._math.RADIANS);
+ //
+ this.swatch.style.top = this.swatch.style.left = this._math.swatchPosition+'px';
+ //Clearing wheel for redraw
+ whlctx.clearRect(0, 0, this._math.diameter, this._math.diameter);
+ ////////////////////////////////////////////////////////////////
+ //Drawing color wheel circle
+ whlctx.save();
+ whlctx.beginPath();
+ whlctx.moveTo(0,0);
+ whlctx.lineTo(this._math.diameter,0);
+ whlctx.lineTo(this._math.diameter,this._math.diameter);
+ whlctx.lineTo(0,this._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
+ this._math.radius = this._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);
+ }
+ //
+ this._math.radius = this._math.radius + this.strokeWidth/2;
+ //TODO: Add parameter to allow for color specification of this inner 'empty' circle in wheel
+ whlctx.beginPath();
+ whlctx.arc(this._math.innerRadius+this.rimWidth, this._math.innerRadius+this.rimWidth, this._math.innerRadius-this.strokeWidth/2, 0, this._math.TAU, true);
+ whlctx.fillStyle = '#494949';
+ whlctx.fill();
+ whlctx.restore();
+ //
+ whlctx.strokeStyle = this.strokeColor;
+ whlctx.lineWidth = this.strokeWidth;
+ whlctx.globalAlpha = 1;
+ whlctx.beginPath();
+ whlctx.arc(this._math.radius, this._math.radius, this._math.radius-this.strokeWidth/2, 0, this._math.TAU, true);
+ whlctx.closePath();
+ whlctx.stroke();
+ whlctx.restore();
+ //
+ whlctx.strokeStyle = this.strokeColor;
+ whlctx.lineWidth = this.strokeWidth;
+ whlctx.globalAlpha = 1;
+ whlctx.beginPath();
+ whlctx.arc(this._math.innerRadius+this.rimWidth, this._math.innerRadius+this.rimWidth, this._math.innerRadius-this.strokeWidth/2, 0, this._math.TAU, true);
+ whlctx.closePath();
+ whlctx.stroke();
+ whlctx.restore();
+ //
+ whlctx.beginPath();
+ whlctx.moveTo(this._math.swatchPosition-this.strokeWidth/2, this._math.swatchPosition-this.strokeWidth/2);
+ whlctx.lineTo(this._math.swatchLength+this._math.swatchPosition-this.strokeWidth/2, this._math.swatchPosition-this.strokeWidth/2);
+ whlctx.lineTo(this._math.swatchLength+this._math.swatchPosition-this.strokeWidth/2, this._math.swatchLength+this._math.swatchPosition-this.strokeWidth/2);
+ whlctx.lineTo(this._math.swatchPosition-this.strokeWidth/2, this._math.swatchLength+this._math.swatchPosition-this.strokeWidth/2);
+ whlctx.closePath();
+ whlctx.strokeStyle = "rgba(0, 0, 0, .25)";
+ whlctx.shadowColor = "rgba(0, 0, 0, 1)";
+ whlctx.shadowBlur = 2;
+ whlctx.stroke();
+ //
+ this._wheelData = whlctx.getImageData(0, 0, this._math.diameter, this._math.diameter);
+ //TODO: Fix redraw bug
+ if(!this.value) {
+ this.wheelSelectorAngle(0);
+ this.drawSwatchColor(0);
+ this.drawSwatchSelector(100, 100);
+ } else {
+ this.wheelSelectorAngle(0);
+ this.drawSwatchColor(0);
+ this.drawSwatchSelector(100, 100);
+ //
+ this.wheelSelectorAngle(this.value.h/this._math.TAU*360);
+ this.drawSwatchColor(this.value.h/this._math.TAU*360);
+ this.drawSwatchSelector(this.value.s*100, this.value.v*100);
+ }
+ }
},
////////////////////////////////////////////////////////////////////
//
- didDraw: {
- value: function() {
- //
- this.element.style.opacity = 1;
- //
- this.wheelSelect.style.cursor = 'pointer';
- //
- this.wheelSelect.addEventListener('mouseup', this, false);
- this.wheelSelect.addEventListener('mousedown', this, false);
- this.wheelSelect.addEventListener('mousemove', this, false);
- }
+ didDraw: {
+ value: function() {
+ //
+ this.element.style.opacity = 1;
+ //
+ this.wheelSelect.style.cursor = 'pointer';
+ //
+ this.wheelSelect.addEventListener('mouseup', this, false);
+ this.wheelSelect.addEventListener('mousedown', this, false);
+ this.wheelSelect.addEventListener('mousemove', this, false);
+ }
},
////////////////////////////////////////////////////////////////////
//
_scanningMode: {
- value: null
+ value: null
},
////////////////////////////////////////////////////////////////////
//
_isMouseDown: {
- value: false
+ value: false
},
////////////////////////////////////////////////////////////////////
//
handleMousedown: {
- value: function(e) {
- //
- this._isMouseDown = true;
- //
- if ((e.offsetY < this._math.swatchPosition || e.offsetY > this._math.swatchLength+this._math.swatchPosition) || (e.offsetX < this._math.swatchPosition || e.offsetX > this._math.swatchLength+this._math.swatchPosition)) {
- this._scanningMode = 'wheel';
- } else {
- this._scanningMode = 'swatch';
- }
- }
+ value: function(e) {
+ //
+ this._isMouseDown = true;
+ //
+ if ((e.offsetY < this._math.swatchPosition || e.offsetY > this._math.swatchLength+this._math.swatchPosition) || (e.offsetX < this._math.swatchPosition || e.offsetX > this._math.swatchLength+this._math.swatchPosition)) {
+ this._scanningMode = 'wheel';
+ } else {
+ this._scanningMode = 'swatch';
+ }
+ }
},
////////////////////////////////////////////////////////////////////
//
handleMouseup: {
- value: function(e) {
- var math = this._math;
- //
- if ((e.offsetY < math.swatchPosition || e.offsetY > math.swatchLength+math.swatchPosition) || (e.offsetX < math.swatchPosition || e.offsetX > math.swatchLength+math.swatchPosition)) {
- if (this._scanningMode === 'wheel') {
- this.mouseSetWheelAngle(e);
- }
- } else {
- if (this._scanningMode === 'swatch'){
- this.mouseSetSwatch(e);
- }
- }
- this._dispatchEvent('change', false);
- this._isMouseDown = false;
- this._scanningMode = null;
- }
+ value: function(e) {
+ var math = this._math;
+ //
+ if ((e.offsetY < math.swatchPosition || e.offsetY > math.swatchLength+math.swatchPosition) || (e.offsetX < math.swatchPosition || e.offsetX > math.swatchLength+math.swatchPosition)) {
+ if (this._scanningMode === 'wheel') {
+ this.mouseSetWheelAngle(e);
+ }
+ } else {
+ if (this._scanningMode === 'swatch'){
+ this.mouseSetSwatch(e);
+ }
+ }
+ this._dispatchEvent('change', false);
+ this._isMouseDown = false;
+ this._scanningMode = null;
+ }
},
////////////////////////////////////////////////////////////////////
//
handleMousemove: {
- value: function(e) {
- var math = this._math;
- //
- if (this._isMouseDown) {
- if (this._scanningMode === 'wheel') {
- this.mouseSetWheelAngle(e);
- } else if (this._scanningMode === 'swatch'){
- this.mouseSetSwatch(e);
- }
- //
- this._dispatchEvent('changing', false);
- } else {
- if ((e.offsetY < math.swatchPosition || e.offsetY > math.swatchLength+math.swatchPosition) || (e.offsetX < math.swatchPosition || e.offsetX > math.swatchLength+math.swatchPosition)) {
- this.wheelSelect.style.cursor = 'pointer';
- } else {
- this.wheelSelect.style.cursor = 'crosshair';
- }
- }
- }
+ value: function(e) {
+ var math = this._math;
+ //
+ if (this._isMouseDown) {
+ if (this._scanningMode === 'wheel') {
+ this.mouseSetWheelAngle(e);
+ } else if (this._scanningMode === 'swatch'){
+ this.mouseSetSwatch(e);
+ }
+ //
+ this._dispatchEvent('changing', false);
+ } else {
+ if ((e.offsetY < math.swatchPosition || e.offsetY > math.swatchLength+math.swatchPosition) || (e.offsetX < math.swatchPosition || e.offsetX > math.swatchLength+math.swatchPosition)) {
+ this.wheelSelect.style.cursor = 'pointer';
+ } else {
+ this.wheelSelect.style.cursor = 'crosshair';
+ }
+ }
+ }
},
////////////////////////////////////////////////////////////////////
//
mouseSetWheelAngle: {
- value: function(e) {
- var angle = (2 * Math.atan2(e.offsetY - (this._math.radius - Math.sqrt(Math.pow(Math.abs(e.offsetX - this._math.radius),2) + Math.pow(Math.abs(e.offsetY - this._math.radius), 2))), e.offsetX - this._math.radius))/this._math.TAU*360;
- if (this._value) {
- this.value = {h: angle*this._math.TAU/360, s: this._value.s, v: this._value.v};
- } else {
- this.value = {h: angle*this._math.TAU/360, s: 1, v: 1};
- }
- this.wheelSelectorAngle(0);
- this.wheelSelectorAngle(angle);
- this.drawSwatchColor(angle);
- }
+ value: function(e) {
+ var angle = (2 * Math.atan2(e.offsetY - (this._math.radius - Math.sqrt(Math.pow(Math.abs(e.offsetX - this._math.radius),2) + Math.pow(Math.abs(e.offsetY - this._math.radius), 2))), e.offsetX - this._math.radius))/this._math.TAU*360;
+ if (this._value) {
+ this.value = {h: angle*this._math.TAU/360, s: this._value.s, v: this._value.v};
+ } else {
+ this.value = {h: angle*this._math.TAU/360, s: 1, v: 1};
+ }
+ this.wheelSelectorAngle(0);
+ this.wheelSelectorAngle(angle);
+ this.drawSwatchColor(angle);
+ }
},
////////////////////////////////////////////////////////////////////
//
mouseSetSwatch: {
- value: function(e) {
- //
- var s, v, math = this._math;;
- //
- if (e.offsetX > math.swatchLength+math.swatchPosition) {
- s = 100;
- } else if (e.offsetX < math.swatchPosition) {
- s = 0;
- } else {
- s = 100-100*(math.swatchLength-(e.offsetX-math.swatchPosition))/math.swatchLength;
- }
- //
- if (e.offsetY > math.swatchLength+math.swatchPosition) {
- v = 0;
- } else if (e.offsetY < math.swatchPosition) {
- v = 100;
- } else {
- v = 100-(e.offsetY-math.swatchPosition)/math.swatchLength*100;
- }
- //
- if (this._value) {
- this.value = {h: this._value.h, s: s/100, v: v/100};
- } else {
- this.value = {h: 0, s: s/100, v: v/100};
- }
- //
- this.drawSwatchSelector(s, v);
- }
+ value: function(e) {
+ //
+ var s, v, math = this._math;;
+ //
+ if (e.offsetX > math.swatchLength+math.swatchPosition) {
+ s = 100;
+ } else if (e.offsetX < math.swatchPosition) {
+ s = 0;
+ } else {
+ s = 100-100*(math.swatchLength-(e.offsetX-math.swatchPosition))/math.swatchLength;
+ }
+ //
+ if (e.offsetY > math.swatchLength+math.swatchPosition) {
+ v = 0;
+ } else if (e.offsetY < math.swatchPosition) {
+ v = 100;
+ } else {
+ v = 100-(e.offsetY-math.swatchPosition)/math.swatchLength*100;
+ }
+ //
+ if (this._value) {
+ this.value = {h: this._value.h, s: s/100, v: v/100};
+ } else {
+ this.value = {h: 0, s: s/100, v: v/100};
+ }
+ //
+ this.drawSwatchSelector(s, v);
+ }
},
////////////////////////////////////////////////////////////////////
//
_wheelData: {
- value: null
+ value: null
},
////////////////////////////////////////////////////////////////////
//
_previousDegree: {
- value: 0
+ value: 0
},
////////////////////////////////////////////////////////////////////
//
drawSwatchSelector: {
- value: function (s, v) {
- var context = this.swatchSelect.getContext("2d"), strokeWidth = this.strokeWidth/2, radius = this._math.radius/28, math = this._math;
- context.clearRect(0, 0, math.diameter, math.diameter);
- //White outline
- context.beginPath();
- context.strokeStyle = '#FFF';
- context.lineWidth = strokeWidth;
- context.globalAlpha = 1;
- //context.arc(this._math.swatchPosition+(this._math.swatchLength*(s/100)) - radius/2, this._math.swatchPosition+(this._math.swatchLength*(1-v/100))- radius/2, radius-strokeWidth, 0, this._math.TAU, true);
- context.arc(math.swatchPosition+(math.swatchLength*(s/100)), math.swatchPosition+(math.swatchLength*(1-v/100)), radius-strokeWidth, 0, math.TAU, true);
- context.closePath();
- context.stroke();
- context.restore();
- //Black outline
- context.beginPath();
- context.strokeStyle = '#000';
- context.lineWidth = strokeWidth;
- context.globalAlpha = 1;
- context.arc(math.swatchPosition+(math.swatchLength*(s/100)), math.swatchPosition+(math.swatchLength*(1-v/100)), radius, 0, math.TAU, true);
- context.closePath();
- context.stroke();
- context.restore();
- }
+ value: function (s, v) {
+ var context = this.swatchSelect.getContext("2d"), strokeWidth = this.strokeWidth/2, radius = this._math.radius/28, math = this._math;
+ context.clearRect(0, 0, math.diameter, math.diameter);
+ //White outline
+ context.beginPath();
+ context.strokeStyle = '#FFF';
+ context.lineWidth = strokeWidth;
+ context.globalAlpha = 1;
+ //context.arc(this._math.swatchPosition+(this._math.swatchLength*(s/100)) - radius/2, this._math.swatchPosition+(this._math.swatchLength*(1-v/100))- radius/2, radius-strokeWidth, 0, this._math.TAU, true);
+ context.arc(math.swatchPosition+(math.swatchLength*(s/100)), math.swatchPosition+(math.swatchLength*(1-v/100)), radius-strokeWidth, 0, math.TAU, true);
+ context.closePath();
+ context.stroke();
+ context.restore();
+ //Black outline
+ context.beginPath();
+ context.strokeStyle = '#000';
+ context.lineWidth = strokeWidth;
+ context.globalAlpha = 1;
+ context.arc(math.swatchPosition+(math.swatchLength*(s/100)), math.swatchPosition+(math.swatchLength*(1-v/100)), radius, 0, math.TAU, true);
+ context.closePath();
+ context.stroke();
+ context.restore();
+ }
},
////////////////////////////////////////////////////////////////////
//
drawSwatchColor: {
- value: function (angle) {
- var context = this.swatch.getContext("2d"), gradient, math = this._math;
- context.clearRect(0, 0, math.swatchLength, math.swatchLength);
- context.beginPath();
- context.moveTo(0, 0);
- context.lineTo(math.swatchLength, 0);
- context.lineTo(math.swatchLength, math.swatchLength);
- context.lineTo(0, math.swatchLength);
- context.closePath();
- context.fillStyle = 'hsl('+angle+', 100%, 50%)';
- context.fill();
- //
- context.beginPath();
- context.moveTo(0, 0);
- context.lineTo(math.swatchLength, 0);
- context.lineTo(math.swatchLength, math.swatchLength);
- context.lineTo(0, math.swatchLength);
- gradient = context.createLinearGradient(0,0,math.swatchLength,0);
- gradient.addColorStop(0,"rgba(255, 255, 255, 255)");
- gradient.addColorStop(1,"rgba(255, 255, 255, 0)");
- context.fillStyle = gradient;
- context.fillRect(0 , 0, math.swatchLength, math.swatchLength);
- context.closePath();
- //
- context.beginPath();
- context.moveTo(0, math.swatchLength);
- context.lineTo(math.swatchLength, 0);
- context.lineTo(math.swatchLength, math.swatchLength);
- context.lineTo(0, math.swatchLength);
- gradient = context.createLinearGradient(0,math.swatchLength,0, 0);
- gradient.addColorStop(0,"rgba(0, 0, 0, 255)");
- gradient.addColorStop(1,"rgba(0, 0, 0, 0)");
- context.fillStyle = gradient;
- context.fillRect(0 , 0, math.swatchLength, math.swatchLength);
- context.closePath();
- }
+ value: function (angle) {
+ var context = this.swatch.getContext("2d"), gradient, math = this._math;
+ context.clearRect(0, 0, math.swatchLength, math.swatchLength);
+ context.beginPath();
+ context.moveTo(0, 0);
+ context.lineTo(math.swatchLength, 0);
+ context.lineTo(math.swatchLength, math.swatchLength);
+ context.lineTo(0, math.swatchLength);
+ context.closePath();
+ context.fillStyle = 'hsl('+angle+', 100%, 50%)';
+ context.fill();
+ //
+ context.beginPath();
+ context.moveTo(0, 0);
+ context.lineTo(math.swatchLength, 0);
+ context.lineTo(math.swatchLength, math.swatchLength);
+ context.lineTo(0, math.swatchLength);
+ gradient = context.createLinearGradient(0,0,math.swatchLength,0);
+ gradient.addColorStop(0,"rgba(255, 255, 255, 255)");
+ gradient.addColorStop(1,"rgba(255, 255, 255, 0)");
+ context.fillStyle = gradient;
+ context.fillRect(0 , 0, math.swatchLength, math.swatchLength);
+ context.closePath();
+ //
+ context.beginPath();
+ context.moveTo(0, math.swatchLength);
+ context.lineTo(math.swatchLength, 0);
+ context.lineTo(math.swatchLength, math.swatchLength);
+ context.lineTo(0, math.swatchLength);
+ gradient = context.createLinearGradient(0,math.swatchLength,0, 0);
+ gradient.addColorStop(0,"rgba(0, 0, 0, 255)");
+ gradient.addColorStop(1,"rgba(0, 0, 0, 0)");
+ context.fillStyle = gradient;
+ context.fillRect(0 , 0, math.swatchLength, math.swatchLength);
+ context.closePath();
+ }
},
////////////////////////////////////////////////////////////////////
//
_drawWheelSlice: {
- value: function (s, r, g, b) {
- //
- var context = this.wheel.getContext("2d"),
- radius = this._math.radius,
- trnslt = radius + this.strokeWidth/2;
- //
- context.beginPath();
- context.fillStyle = 'rgb('+r+','+g+','+b+')';
- context.scale(1,1);
- context.translate(trnslt, trnslt);
- context.rotate(s*this._math.RADIANS);
- context.translate(-radius, -radius);
- context.moveTo(radius, radius);
- context.translate(radius, radius);
- context.arc(0, 0, radius, -1.59, -1.53, 0);
- context.translate(-radius, -radius);
- context.lineTo(radius, this.rimWidth);
- context.translate(radius, radius);
- context.arc(0, 0, this._math.innerRadius, -1.53, -1.59, 1);
- context.closePath();
- context.fill();
- context.stroke();
- context.restore();
- context.save();
- }
+ value: function (s, r, g, b) {
+ //
+ var context = this.wheel.getContext("2d"),
+ radius = this._math.radius,
+ trnslt = radius + this.strokeWidth/2;
+ //
+ context.beginPath();
+ context.fillStyle = 'rgb('+r+','+g+','+b+')';
+ context.scale(1,1);
+ context.translate(trnslt, trnslt);
+ context.rotate(s*this._math.RADIANS);
+ context.translate(-radius, -radius);
+ context.moveTo(radius, radius);
+ context.translate(radius, radius);
+ context.arc(0, 0, radius, -1.59, -1.53, 0);
+ context.translate(-radius, -radius);
+ context.lineTo(radius, this.rimWidth);
+ context.translate(radius, radius);
+ context.arc(0, 0, this._math.innerRadius, -1.53, -1.59, 1);
+ context.closePath();
+ context.fill();
+ context.stroke();
+ context.restore();
+ context.save();
+ }
},
////////////////////////////////////////////////////////////////////
//
wheelSelectorAngle: {
- value: function (angle) {
- angle *= this._math.RADIANS;
- //
- var context = this.wheelSelect.getContext("2d"), radius = this._math.radius,
- radiusOffsetPositive = this._math.radius+this.rimWidth/3,
- rimPositiveStrokeOffset = this.rimWidth + this.strokeWidth,
- strokeTotalWidth = this.strokeWidth*2,
- rimNegativeStrokeOffset = this.rimWidth - this.strokeWidth,
- radiusOffsetNagative = this._math.radius-this.rimWidth/3;
- //
- context.clearRect(0, 0, this.wheelSelect.width, this.wheelSelect.height);
- //
- context.beginPath();
- context.fillStyle = "rgba(0, 0, 0, 0)";
- context.shadowColor = "rgba(0 , 0, 0, 1)";
- context.shadowBlur = this.strokeWidth;
- context.strokeStyle = this.strokeColor;
- context.lineWidth = this.strokeWidth;
- context.translate(radius, radius);
- context.rotate(angle - this._previousDegree);
- this._previousDegree = angle;
- context.translate(-radius, -radius);
- context.globalAlpha = 1;
- context.moveTo(radius, 0);
- context.lineTo(radius, 0);
- context.quadraticCurveTo(radiusOffsetPositive, 0, radiusOffsetPositive, strokeTotalWidth);
- context.lineTo(radiusOffsetPositive, rimNegativeStrokeOffset);
- context.quadraticCurveTo(radiusOffsetPositive, rimPositiveStrokeOffset, radius, rimPositiveStrokeOffset);
- context.lineTo(radius, rimPositiveStrokeOffset);
- context.quadraticCurveTo(radiusOffsetNagative, rimPositiveStrokeOffset, radiusOffsetNagative,rimNegativeStrokeOffset);
- context.lineTo(radiusOffsetNagative, strokeTotalWidth);
- context.quadraticCurveTo(radiusOffsetNagative, 0, radius, 0);
- context.stroke();
- context.closePath();
- }
+ value: function (angle) {
+ angle *= this._math.RADIANS;
+ //
+ var context = this.wheelSelect.getContext("2d"), radius = this._math.radius,
+ radiusOffsetPositive = this._math.radius+this.rimWidth/3,
+ rimPositiveStrokeOffset = this.rimWidth + this.strokeWidth,
+ strokeTotalWidth = this.strokeWidth*2,
+ rimNegativeStrokeOffset = this.rimWidth - this.strokeWidth,
+ radiusOffsetNagative = this._math.radius-this.rimWidth/3;
+ //
+ context.clearRect(0, 0, this.wheelSelect.width, this.wheelSelect.height);
+ //
+ context.beginPath();
+ context.fillStyle = "rgba(0, 0, 0, 0)";
+ context.shadowColor = "rgba(0 , 0, 0, 1)";
+ context.shadowBlur = this.strokeWidth;
+ context.strokeStyle = this.strokeColor;
+ context.lineWidth = this.strokeWidth;
+ context.translate(radius, radius);
+ context.rotate(angle - this._previousDegree);
+ this._previousDegree = angle;
+ context.translate(-radius, -radius);
+ context.globalAlpha = 1;
+ context.moveTo(radius, 0);
+ context.lineTo(radius, 0);
+ context.quadraticCurveTo(radiusOffsetPositive, 0, radiusOffsetPositive, strokeTotalWidth);
+ context.lineTo(radiusOffsetPositive, rimNegativeStrokeOffset);
+ context.quadraticCurveTo(radiusOffsetPositive, rimPositiveStrokeOffset, radius, rimPositiveStrokeOffset);
+ context.lineTo(radius, rimPositiveStrokeOffset);
+ context.quadraticCurveTo(radiusOffsetNagative, rimPositiveStrokeOffset, radiusOffsetNagative,rimNegativeStrokeOffset);
+ context.lineTo(radiusOffsetNagative, strokeTotalWidth);
+ context.quadraticCurveTo(radiusOffsetNagative, 0, radius, 0);
+ context.stroke();
+ context.closePath();
+ }
},
////////////////////////////////////////////////////////////////////
//Dispatching custom event
diff --git a/js/components/colorwheel.reel/css/colorwheel.scss b/js/components/colorwheel.reel/css/colorwheel.scss
index d5455c0f..a4b0807f 100755
--- a/js/components/colorwheel.reel/css/colorwheel.scss
+++ b/js/components/colorwheel.reel/css/colorwheel.scss
@@ -31,11 +31,11 @@ POSSIBILITY OF SUCH DAMAGE.
.colorwheel
{
- position: relative;
- overflow: hidden;
+ position: relative;
+ overflow: hidden;
}
.colorwheel canvas
{
- position: absolute;
+ position: absolute;
}
--
cgit v1.2.3
From 04343eda8c2f870b0da55cfdc8003c99fe1cc4de Mon Sep 17 00:00:00 2001
From: Kris Kowal
Date: Fri, 6 Jul 2012 11:53:10 -0700
Subject: Remove trailing spaces
---
js/components/colorwheel.reel/colorwheel.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
(limited to 'js/components/colorwheel.reel')
diff --git a/js/components/colorwheel.reel/colorwheel.js b/js/components/colorwheel.reel/colorwheel.js
index 97a1751d..d2664f14 100755
--- a/js/components/colorwheel.reel/colorwheel.js
+++ b/js/components/colorwheel.reel/colorwheel.js
@@ -270,7 +270,7 @@ exports.ColorWheel = Montage.create(Component, {
//
this._isMouseDown = true;
//
- if ((e.offsetY < this._math.swatchPosition || e.offsetY > this._math.swatchLength+this._math.swatchPosition) || (e.offsetX < this._math.swatchPosition || e.offsetX > this._math.swatchLength+this._math.swatchPosition)) {
+ if ((e.offsetY < this._math.swatchPosition || e.offsetY > this._math.swatchLength+this._math.swatchPosition) || (e.offsetX < this._math.swatchPosition || e.offsetX > this._math.swatchLength+this._math.swatchPosition)) {
this._scanningMode = 'wheel';
} else {
this._scanningMode = 'swatch';
@@ -283,7 +283,7 @@ exports.ColorWheel = Montage.create(Component, {
value: function(e) {
var math = this._math;
//
- if ((e.offsetY < math.swatchPosition || e.offsetY > math.swatchLength+math.swatchPosition) || (e.offsetX < math.swatchPosition || e.offsetX > math.swatchLength+math.swatchPosition)) {
+ if ((e.offsetY < math.swatchPosition || e.offsetY > math.swatchLength+math.swatchPosition) || (e.offsetX < math.swatchPosition || e.offsetX > math.swatchLength+math.swatchPosition)) {
if (this._scanningMode === 'wheel') {
this.mouseSetWheelAngle(e);
}
--
cgit v1.2.3
From 6803c0abd279fcb640c38b3881b751bab982cbe0 Mon Sep 17 00:00:00 2001
From: Kris Kowal
Date: Fri, 6 Jul 2012 12:42:16 -0700
Subject: Remove trailing spaces
---
js/components/colorwheel.reel/colorwheel.html | 14 +++++++-------
1 file changed, 7 insertions(+), 7 deletions(-)
(limited to 'js/components/colorwheel.reel')
diff --git a/js/components/colorwheel.reel/colorwheel.html b/js/components/colorwheel.reel/colorwheel.html
index 4f542f88..d1cf9584 100755
--- a/js/components/colorwheel.reel/colorwheel.html
+++ b/js/components/colorwheel.reel/colorwheel.html
@@ -1,5 +1,5 @@
-
-
+
-
+
-
+
-
+
-
+
-
+
--
cgit v1.2.3
From 9461e7731f91dd03a15b0a62667e722a60c84721 Mon Sep 17 00:00:00 2001
From: Kris Kowal
Date: Fri, 6 Jul 2012 12:44:57 -0700
Subject: Remove byte order markers (BOM)
---
js/components/colorwheel.reel/colorwheel.html | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
(limited to 'js/components/colorwheel.reel')
diff --git a/js/components/colorwheel.reel/colorwheel.html b/js/components/colorwheel.reel/colorwheel.html
index d1cf9584..d721dd14 100755
--- a/js/components/colorwheel.reel/colorwheel.html
+++ b/js/components/colorwheel.reel/colorwheel.html
@@ -1,4 +1,4 @@
-
+