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/colorbar.reel/colorbar.html | 40 +- js/components/colorbar.reel/colorbar.js | 236 +++---- js/components/colorbar.reel/css/colorbar.scss | 2 +- js/components/colorwheel.reel/colorwheel.html | 60 +- js/components/colorwheel.reel/colorwheel.js | 710 ++++++++++----------- js/components/colorwheel.reel/css/colorwheel.scss | 6 +- js/components/combobox.reel/combobox.js | 4 +- js/components/core/class-uuid.js | 2 +- .../gradientpicker.reel/css/gradientpicker.scss | 146 ++--- .../gradientpicker.reel/gradientpicker.html | 96 +-- .../gradientpicker.reel/gradientpicker.js | 460 ++++++------- js/components/hintable.reel/hintable.js | 14 +- .../layout/document-bar.reel/document-bar.html | 4 +- .../layout/document-bar.reel/document-bar.js | 30 +- .../layout/document-entry.reel/document-entry.html | 4 +- .../layout/tools-list.reel/tools-list.html | 4 +- .../tools-properties.reel/tools-properties.html | 6 +- .../popup-manager.reel/popup-manager.html | 18 +- js/components/popup-manager.reel/popup-manager.js | 212 +++--- js/components/popup.reel/css/popup.scss | 54 +- js/components/popup.reel/popup.html | 28 +- js/components/popup.reel/popup.js | 336 +++++----- js/components/prompt.reel/prompt.js | 112 ++-- js/components/radio.reel/radio.js | 4 +- .../binding-properties.html | 4 +- .../brush-properties.reel/brush-properties.html | 4 +- .../eraser-properties.reel/eraser-properties.html | 4 +- .../eyedropper-properties.html | 4 +- .../fill-properties.reel/fill-properties.html | 2 +- .../ink-bottle-properties.css | 2 +- .../line-properties.reel/line-properties.html | 4 +- .../object3d-properties.html | 4 +- .../oval-properties.reel/oval-properties.html | 4 +- .../pan-properties.reel/pan-properties.html | 4 +- .../rect-properties.reel/rect-properties.html | 4 +- .../rotate-stage-properties.html | 4 +- .../selection-properties.html | 2 +- .../shape-properties.reel/shape-properties.html | 4 +- .../tag-properties.reel/tag-properties.html | 4 +- .../text-properties.reel/text-properties.html | 4 +- .../zoom-properties.reel/zoom-properties.html | 4 +- js/components/treeview/leaf.reel/leaf.html | 6 +- .../treeview/ninja-leaf.reel/ninja-leaf.html | 6 +- js/components/treeview/treeview.reel/treeview.html | 6 +- js/components/ui/color-chip.reel/color-chip.html | 2 +- js/components/ui/color-chip.reel/color-chip.js | 6 +- js/components/ui/file-input.reel/file-input.js | 4 +- js/components/ui/icon-list-basic/icon.reel/icon.js | 22 +- .../ui/icon-list-basic/iconsList.reel/iconsList.js | 18 +- .../ui/property-control.reel/property-control.js | 10 +- js/components/ui/tree-basic/tree.reel/tree.js | 18 +- .../ui/tree-basic/treeItem.reel/treeItem.js | 16 +- 52 files changed, 1382 insertions(+), 1382 deletions(-) (limited to 'js/components') diff --git a/js/components/colorbar.reel/colorbar.html b/js/components/colorbar.reel/colorbar.html index e61cc2f2..fc31d742 100755 --- a/js/components/colorbar.reel/colorbar.html +++ b/js/components/colorbar.reel/colorbar.html @@ -31,28 +31,28 @@ POSSIBILITY OF SUCH DAMAGE. --> - - - - - - - - - + } + } + } + + + - + - + + + diff --git a/js/components/colorbar.reel/colorbar.js b/js/components/colorbar.reel/colorbar.js index 4f3577d9..808ada4e 100755 --- a/js/components/colorbar.reel/colorbar.js +++ b/js/components/colorbar.reel/colorbar.js @@ -30,152 +30,152 @@ 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; //////////////////////////////////////////////////////////////////////// //Exporting as ColorBar exports.ColorBar = Montage.create(Component, { - //////////////////////////////////////////////////////////////////// - //No reel needed since it's just a bar component - hasTemplate: { + //////////////////////////////////////////////////////////////////// + //No reel needed since it's just a bar component + hasTemplate: { value: true }, //////////////////////////////////////////////////////////////////// //Width of spectrum (not including b/w buttons) _colorBarSpectrumWidth: { - value: null + value: null }, //////////////////////////////////////////////////////////////////// //Width of spectrum steps (used to calculate size of B/W buttons) _colorBarSpectrumWidthSteps: { - value: 10 + value: 10 }, //////////////////////////////////////////////////////////////////// //Default value _value: { value: {h: 0, s: 0, v: 0} }, - //////////////////////////////////////////////////////////////////// + //////////////////////////////////////////////////////////////////// //HSV Value selected from bar value: { get: function() {return this._value;}, set: function(value) { - if (value) { - //Checking for limits (Max and Min HSV values) - if (value.h > Math.PI*2) { - value.h = Math.PI*2; - } else if (value.h < 0) { - value.h = 0; - } - // - if (value.s > 1) { - value.s = 1; - } else if (value.s < 0) { - value.s = 0; - } - // - if (value.v > 1) { - value.v = 1; - } else if (value.v < 0) { - value.v = 0; - } - //Setting value - this._value = value; - // - if (!this._isMouseDown) { - this._dispatchActionEvent('change', true); - } + if (value) { + //Checking for limits (Max and Min HSV values) + if (value.h > Math.PI*2) { + value.h = Math.PI*2; + } else if (value.h < 0) { + value.h = 0; + } + // + if (value.s > 1) { + value.s = 1; + } else if (value.s < 0) { + value.s = 0; + } + // + if (value.v > 1) { + value.v = 1; + } else if (value.v < 0) { + value.v = 0; + } + //Setting value + this._value = value; + // + if (!this._isMouseDown) { + this._dispatchActionEvent('change', true); + } } } }, //////////////////////////////////////////////////////////////////// // prepareForDraw: { - value: function() { - //Nothing - } + value: function() { + //Nothing + } }, //////////////////////////////////////////////////////////////////// //Setting up and drawing canvas to object willDraw: { - value: function() { - //Setting the width and height of the canvas to match container - this.element.width = parseInt(window.getComputedStyle(this.element, null).width); - this.element.height = parseInt(window.getComputedStyle(this.element, null).height); - } + value: function() { + //Setting the width and height of the canvas to match container + this.element.width = parseInt(window.getComputedStyle(this.element, null).width); + this.element.height = parseInt(window.getComputedStyle(this.element, null).height); + } }, //////////////////////////////////////////////////////////////////// // draw: { - value: function () { - //Local variables - var cb_canvas = this.element, cb_ctx, cb_grdnt, cb_slc, cb_gwidth, PI = Math.PI, i; - //calculating width of spectrum (remainder is used for B/W buttons) - cb_gwidth = Math.round(cb_canvas.width - cb_canvas.width/this._colorBarSpectrumWidthSteps); - //Context and Gradient - cb_ctx = cb_canvas.getContext('2d'); - cb_grdnt = cb_ctx.createLinearGradient(0, cb_canvas.height, cb_gwidth, cb_canvas.height); - //////////////////////////////////////////////////////// - //Looping through set intervals (Creating spectrum) - for (i=0; i<60; i++) { - //Calculating slice number - cb_slc = Math.round(255*i/60); - //Creating gradient slices (6 colors in color theory) - cb_grdnt.addColorStop(i/360, 'rgb(255, '+cb_slc+', 0)'); - cb_grdnt.addColorStop((i+60)/360, 'rgb('+(255-cb_slc)+', 255, 0)'); - cb_grdnt.addColorStop((i+120)/360, 'rgb(0, 255, '+cb_slc+')'); - cb_grdnt.addColorStop((i+180)/360, 'rgb(0, '+(255-cb_slc)+', 255)'); - cb_grdnt.addColorStop((i+240)/360, 'rgb('+cb_slc+', 0, 255)'); - cb_grdnt.addColorStop((i+300)/360, 'rgb(255, 0,'+(255-cb_slc)+')'); - } - //Adding Color Bar to the canvas (Gradients) - cb_ctx.fillStyle = cb_grdnt; - cb_ctx.fillRect(0, 0, cb_gwidth, cb_canvas.height); - //////////////////////////////////////////////////////// - //White Gradient overlay to simulate L - cb_grdnt = cb_ctx.createLinearGradient(0, 0, 0, cb_canvas.height); - cb_grdnt.addColorStop(0.0, 'rgba(255, 255, 255, 1)'); - cb_grdnt.addColorStop(0.5, 'rgba(255, 255, 255, 0)'); - cb_ctx.fillStyle = cb_grdnt; - cb_ctx.fillRect(0, 0, cb_gwidth, cb_canvas.height); - //Black Gradient overlay to simulate S - cb_grdnt = cb_ctx.createLinearGradient(0,0,0,cb_canvas.height); - cb_grdnt.addColorStop(0.5, 'rgba(0, 0, 0, 0)'); - cb_grdnt.addColorStop(1.0, 'rgba(0, 0, 0, 1)'); - cb_ctx.fillStyle = cb_grdnt; - cb_ctx.fillRect(0, 0, cb_gwidth, cb_canvas.height); - //Black "button" - cb_ctx.fillStyle = "#000"; - cb_ctx.fillRect(cb_gwidth, cb_canvas.height/2, cb_gwidth, cb_canvas.height/2); - //Black line divider - cb_ctx.fillStyle = "#000"; - cb_ctx.fillRect(cb_gwidth-1, 0, cb_gwidth+1, cb_canvas.height); - //White "button" - cb_ctx.fillStyle = "#FFF"; - cb_ctx.fillRect(cb_gwidth, 0, cb_gwidth, cb_canvas.height/2); - //Saving - cb_ctx.restore(); - cb_ctx.save(); - //Cleaning up - cb_canvas = cb_ctx = cb_grdnt = cb_slc = cb_gwidth = PI = i = null; - } + value: function () { + //Local variables + var cb_canvas = this.element, cb_ctx, cb_grdnt, cb_slc, cb_gwidth, PI = Math.PI, i; + //calculating width of spectrum (remainder is used for B/W buttons) + cb_gwidth = Math.round(cb_canvas.width - cb_canvas.width/this._colorBarSpectrumWidthSteps); + //Context and Gradient + cb_ctx = cb_canvas.getContext('2d'); + cb_grdnt = cb_ctx.createLinearGradient(0, cb_canvas.height, cb_gwidth, cb_canvas.height); + //////////////////////////////////////////////////////// + //Looping through set intervals (Creating spectrum) + for (i=0; i<60; i++) { + //Calculating slice number + cb_slc = Math.round(255*i/60); + //Creating gradient slices (6 colors in color theory) + cb_grdnt.addColorStop(i/360, 'rgb(255, '+cb_slc+', 0)'); + cb_grdnt.addColorStop((i+60)/360, 'rgb('+(255-cb_slc)+', 255, 0)'); + cb_grdnt.addColorStop((i+120)/360, 'rgb(0, 255, '+cb_slc+')'); + cb_grdnt.addColorStop((i+180)/360, 'rgb(0, '+(255-cb_slc)+', 255)'); + cb_grdnt.addColorStop((i+240)/360, 'rgb('+cb_slc+', 0, 255)'); + cb_grdnt.addColorStop((i+300)/360, 'rgb(255, 0,'+(255-cb_slc)+')'); + } + //Adding Color Bar to the canvas (Gradients) + cb_ctx.fillStyle = cb_grdnt; + cb_ctx.fillRect(0, 0, cb_gwidth, cb_canvas.height); + //////////////////////////////////////////////////////// + //White Gradient overlay to simulate L + cb_grdnt = cb_ctx.createLinearGradient(0, 0, 0, cb_canvas.height); + cb_grdnt.addColorStop(0.0, 'rgba(255, 255, 255, 1)'); + cb_grdnt.addColorStop(0.5, 'rgba(255, 255, 255, 0)'); + cb_ctx.fillStyle = cb_grdnt; + cb_ctx.fillRect(0, 0, cb_gwidth, cb_canvas.height); + //Black Gradient overlay to simulate S + cb_grdnt = cb_ctx.createLinearGradient(0,0,0,cb_canvas.height); + cb_grdnt.addColorStop(0.5, 'rgba(0, 0, 0, 0)'); + cb_grdnt.addColorStop(1.0, 'rgba(0, 0, 0, 1)'); + cb_ctx.fillStyle = cb_grdnt; + cb_ctx.fillRect(0, 0, cb_gwidth, cb_canvas.height); + //Black "button" + cb_ctx.fillStyle = "#000"; + cb_ctx.fillRect(cb_gwidth, cb_canvas.height/2, cb_gwidth, cb_canvas.height/2); + //Black line divider + cb_ctx.fillStyle = "#000"; + cb_ctx.fillRect(cb_gwidth-1, 0, cb_gwidth+1, cb_canvas.height); + //White "button" + cb_ctx.fillStyle = "#FFF"; + cb_ctx.fillRect(cb_gwidth, 0, cb_gwidth, cb_canvas.height/2); + //Saving + cb_ctx.restore(); + cb_ctx.save(); + //Cleaning up + cb_canvas = cb_ctx = cb_grdnt = cb_slc = cb_gwidth = PI = i = null; + } }, //////////////////////////////////////////////////////////////////// //Adding ColorBar to the element didDraw: { - value: function() { - //Adding functionality via events - this.element.addEventListener("mousedown", this, false); - this.element.addEventListener("mouseover", this, false); - this.element.addEventListener("mousemove", this, false); - } + value: function() { + //Adding functionality via events + this.element.addEventListener("mousedown", this, false); + this.element.addEventListener("mouseover", this, false); + this.element.addEventListener("mousemove", this, false); + } }, //////////////////////////////////////////////////////////////////// //Mouse Down (adds other events and updates HSV) handleMousedown: { value: function (e) { if (!this._colorBarSpectrumWidth) - this._colorBarSpectrumWidth = (this.element.width - this.element.width/this._colorBarSpectrumWidthSteps)-1; + this._colorBarSpectrumWidth = (this.element.width - this.element.width/this._colorBarSpectrumWidthSteps)-1; this._isMouseDown = true; document.addEventListener("mouseup", this, false); this._updateHsv(e); @@ -184,7 +184,7 @@ exports.ColorBar = Montage.create(Component, { //////////////////////////////////////////////////////////////////// //Used to check mouse mode and display cursor _isMouseDown: { - value: false + value: false }, //////////////////////////////////////////////////////////////////// //Mouse Move (updates HSV) @@ -209,27 +209,27 @@ exports.ColorBar = Montage.create(Component, { //////////////////////////////////////////////////////////////////// //Updating HSV values _updateHsv: { - value: function (e) { - if (e.offsetX > this._colorBarSpectrumWidth) { - //Faking button functionality - Simple B/W selection - if (e.offsetY >= this.element.offsetHeight/2) { this.value = {h: this.value.h, s: 1, v: 0};} // White - else { this.value = {h: this.value.h, s: 0, v: 1};} // Black - } else { - //Checking for S or V to be applied (no mixing on bar) - if (e.offsetY >= this.element.offsetHeight/2) { //Saturation - this.value = {h: e.offsetX/this._colorBarSpectrumWidth*Math.PI*2, v: 1-(e.offsetY-this.element.offsetHeight/2)/((this.element.offsetHeight/2-1)), s: 1}; - } else { //Vibrance - this.value = {h: e.offsetX/this._colorBarSpectrumWidth*Math.PI*2, v: 1, s: (e.offsetY)/((this.element.offsetHeight/2))}; - } - } - // - this._dispatchActionEvent('changing', false); - } + value: function (e) { + if (e.offsetX > this._colorBarSpectrumWidth) { + //Faking button functionality - Simple B/W selection + if (e.offsetY >= this.element.offsetHeight/2) { this.value = {h: this.value.h, s: 1, v: 0};} // White + else { this.value = {h: this.value.h, s: 0, v: 1};} // Black + } else { + //Checking for S or V to be applied (no mixing on bar) + if (e.offsetY >= this.element.offsetHeight/2) { //Saturation + this.value = {h: e.offsetX/this._colorBarSpectrumWidth*Math.PI*2, v: 1-(e.offsetY-this.element.offsetHeight/2)/((this.element.offsetHeight/2-1)), s: 1}; + } else { //Vibrance + this.value = {h: e.offsetX/this._colorBarSpectrumWidth*Math.PI*2, v: 1, s: (e.offsetY)/((this.element.offsetHeight/2))}; + } + } + // + this._dispatchActionEvent('changing', false); + } }, //////////////////////////////////////////////////////////////////// //Dispatching "Change" event _dispatchActionEvent: { - value: function(type, userInitiated) { + value: function(type, userInitiated) { var actionEvent = document.createEvent("CustomEvent"); actionEvent.initEvent(type, true, true); actionEvent.type = type; diff --git a/js/components/colorbar.reel/css/colorbar.scss b/js/components/colorbar.reel/css/colorbar.scss index 086aa1ea..e9ecdc30 100755 --- a/js/components/colorbar.reel/css/colorbar.scss +++ b/js/components/colorbar.reel/css/colorbar.scss @@ -31,5 +31,5 @@ POSSIBILITY OF SUCH DAMAGE. .colorbar { - cursor: crosshair; + cursor: crosshair; } 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; } diff --git a/js/components/combobox.reel/combobox.js b/js/components/combobox.reel/combobox.js index 4effc686..0d46e1ff 100755 --- a/js/components/combobox.reel/combobox.js +++ b/js/components/combobox.reel/combobox.js @@ -153,12 +153,12 @@ exports.Combobox = Montage.create(Component, { handleChange: { value:function(event) - { + { this._valueSyncedWithInputField = true; this._wasSetByCode = false; this.value = this.element.value; this.needsDraw = true; - } + } }, willDraw: { diff --git a/js/components/core/class-uuid.js b/js/components/core/class-uuid.js index 6c5530c4..9649ea6b 100755 --- a/js/components/core/class-uuid.js +++ b/js/components/core/class-uuid.js @@ -33,7 +33,7 @@ POSSIBILITY OF SUCH DAMAGE. */ /** - @module components/core/class-uuid + @module components/core/class-uuid @requires montage/core/core */ /** diff --git a/js/components/gradientpicker.reel/css/gradientpicker.scss b/js/components/gradientpicker.reel/css/gradientpicker.scss index cc9b4cb9..b9709d8e 100755 --- a/js/components/gradientpicker.reel/css/gradientpicker.scss +++ b/js/components/gradientpicker.reel/css/gradientpicker.scss @@ -31,20 +31,20 @@ POSSIBILITY OF SUCH DAMAGE. input[type=radio], .gradientpicker .type .radio { - width: 10px; - height: 10px; - margin: 2px; - display: block; - float: left; - border-radius: 5px; - border: 1px solid #222; - background: -webkit-linear-gradient(top, #666666 0%,#333333 100%); + width: 10px; + height: 10px; + margin: 2px; + display: block; + float: left; + border-radius: 5px; + border: 1px solid #222; + background: -webkit-linear-gradient(top, #666666 0%,#333333 100%); } input[type=radio]:checked, .radio:checked, .gradientpicker .type .radio:checked { - border: 1px solid #000; - background: -webkit-radial-gradient(center, circle cover, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 15%, rgba(204,204,204,1) 30%, rgba(204,204,204,0.01) 31%), -webkit-linear-gradient(top, #666666 0%,#333333 100%); + border: 1px solid #000; + background: -webkit-radial-gradient(center, circle cover, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 15%, rgba(204,204,204,1) 30%, rgba(204,204,204,0.01) 31%), -webkit-linear-gradient(top, #666666 0%,#333333 100%); } .gradientpicker @@ -63,113 +63,113 @@ input[type=radio]:checked, .radio:checked, .gradientpicker .type .radio:checked .gradientpicker .type label { - display: block; - float: left; - margin: 0px 0px 0px 1px; + display: block; + float: left; + margin: 0px 0px 0px 1px; } .gradientpicker .type :nth-child(3) { - margin-left: 10px; + margin-left: 10px; } .gradientpicker .type, .gradientpicker .cp_gp_slider { - overflow: visible; + overflow: visible; } .gradientpicker .cp_gp_slider { - float: left; - clear: both; + float: left; + clear: both; } .gradientpicker .cp_gp_slider .track_container { - width: 187px; - height: 20px; - margin: 6px 0px 0px 6px; - border: 1px solid #333; - background: url(../../../../images/colorpanel/transparent.png) repeat; - float: left; - clear: both; + width: 187px; + height: 20px; + margin: 6px 0px 0px 6px; + border: 1px solid #333; + background: url(../../../../images/colorpanel/transparent.png) repeat; + float: left; + clear: both; } .gradientpicker .cp_gp_slider .track { - width: 187px; - height: 20px; - cursor: crosshair; + width: 187px; + height: 20px; + cursor: crosshair; } .gradientpicker .cp_gp_slider .cover { - overflow: hidden; - width: 202px; - height: 22px; - float: left; - position: absolute; - bottom: 12px; - z-index: 20; - display: none; + overflow: hidden; + width: 202px; + height: 22px; + float: left; + position: absolute; + bottom: 12px; + z-index: 20; + display: none; } .gradientpicker .cp_gp_slider .chips { - overflow: hidden; - width: 202px; - height: 22px; - float: left; - clear: both; - position: relative; - z-index: 1; + overflow: hidden; + width: 202px; + height: 22px; + float: left; + clear: both; + position: relative; + z-index: 1; } .gradientpicker .cp_gp_slider .chips div { - width: 14px; - position: absolute; - top: 3px; - cursor: pointer; + width: 14px; + position: absolute; + top: 3px; + cursor: pointer; } .gradientpicker .cp_gp_slider .chips span { - display: block; - width: 8px; - height: 8px; - background: #333; - margin: 0px 0px -4px 3px; - -webkit-transform: rotate(45deg); - float: left; - position: relative; - cursor: pointer; + display: block; + width: 8px; + height: 8px; + background: #333; + margin: 0px 0px -4px 3px; + -webkit-transform: rotate(45deg); + float: left; + position: relative; + cursor: pointer; } .gradientpicker .cp_gp_slider .chips button { - display: block; - width: 14px; - height: 14px; - border: 1px solid #333; - padding: 0; - margin: 0; - background: #FFF; - float: left; - position: relative; - cursor: pointer; + display: block; + width: 14px; + height: 14px; + border: 1px solid #333; + padding: 0; + margin: 0; + background: #FFF; + float: left; + position: relative; + cursor: pointer; } .gradientpicker .cp_gp_slider .chips div div { - display: block; - width: 14px; - height: 14px; - float: left; - top: 0px; - position: relative; - cursor: pointer; - background: url(../../../../images/colorpanel/transparent.png) repeat; + display: block; + width: 14px; + height: 14px; + float: left; + top: 0px; + position: relative; + cursor: pointer; + background: url(../../../../images/colorpanel/transparent.png) repeat; } diff --git a/js/components/gradientpicker.reel/gradientpicker.html b/js/components/gradientpicker.reel/gradientpicker.html index 96aeabdd..e37adfaf 100755 --- a/js/components/gradientpicker.reel/gradientpicker.html +++ b/js/components/gradientpicker.reel/gradientpicker.html @@ -32,57 +32,57 @@ POSSIBILITY OF SUCH DAMAGE. --> - - - + + + -