From 250d84a79d9f72c6a98cbbecfe4e21f2c0d53a19 Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Wed, 13 Jun 2012 10:55:21 -0700 Subject: fixes bug #1623: middle transform handle causes the brush stroke to have a zero width or height and brush stroke cannot be recovered --- js/lib/geom/brush-stroke.js | 69 ++++++++++++++++++++++++++++----------------- 1 file changed, 43 insertions(+), 26 deletions(-) diff --git a/js/lib/geom/brush-stroke.js b/js/lib/geom/brush-stroke.js index 0e0406dd..b69139b6 100755 --- a/js/lib/geom/brush-stroke.js +++ b/js/lib/geom/brush-stroke.js @@ -31,6 +31,8 @@ var BrushStroke = function GLBrushStroke() { //the HTML5 canvas that holds this brush stroke this._canvas = null; + //flag indicating whether or not to freeze the size and position of canvas + this._freezeCanvas = false; //stroke information this._strokeWidth = 1.0; @@ -174,11 +176,15 @@ BrushStroke.prototype.getStrokeWidth = function () { }; BrushStroke.prototype.setStrokeWidth = function (w) { - this._strokeWidth = w; - if (this._strokeWidth<1) { - this._strokeWidth = 1; + if (this._strokeWidth!==w) { + this._strokeWidth = w; + + if (this._strokeWidth<1) { + this._strokeWidth = 1; + } + this._isDirty=true; + this._freezeCanvas=false; } - this._isDirty=true; }; /* BrushStroke.prototype.getStrokeMaterial = function () { @@ -236,6 +242,7 @@ BrushStroke.prototype.setSmoothingAmount = function(a){ if (this._strokeAmountSmoothing!==a) { this._strokeAmountSmoothing = a; this._isDirty = true; + this._freezeCanvas=false; } }; @@ -274,27 +281,32 @@ BrushStroke.prototype.setStrokeStyle = function (s) { }; BrushStroke.prototype.setWidth = function (newW) { - if (newW<1) { - newW=1; //clamp minimum width to 1 + //get the old width from the canvas controller if the canvas is frozen, or from bbox if not frozen. + var oldCanvasWidth = parseInt(CanvasController.getProperty(this._canvas, "width")); + if (!this._freezeCanvas){ + oldCanvasWidth = Math.round(this._BBoxMax[0]-this._BBoxMin[0]); + } + var minWidth = 1+this._strokeWidth; + if (newW --- js/mediators/element-mediator.js | 1 + 1 file changed, 1 insertion(+) diff --git a/js/mediators/element-mediator.js b/js/mediators/element-mediator.js index 40e94cca..611cf214 100755 --- a/js/mediators/element-mediator.js +++ b/js/mediators/element-mediator.js @@ -84,6 +84,7 @@ exports.ElementMediator = Montage.create(Component, { value: function(newChild, oldChild, notify) { this.application.ninja.currentDocument.model.documentRoot.replaceChild(newChild, oldChild); + if (newChild.getAttribute) newChild.setAttribute('data-ninja-node', 'true'); var undoLabel = "replace element"; -- cgit v1.2.3 From 877cb0294fa9a91b6926239d476eac2e6b1c6506 Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Wed, 13 Jun 2012 11:49:30 -0700 Subject: correct path resizing in case of stroke width other than 1 --- js/lib/geom/sub-path.js | 34 ++++++++++++++++++++-------------- 1 file changed, 20 insertions(+), 14 deletions(-) diff --git a/js/lib/geom/sub-path.js b/js/lib/geom/sub-path.js index f765b715..ba277197 100755 --- a/js/lib/geom/sub-path.js +++ b/js/lib/geom/sub-path.js @@ -54,7 +54,7 @@ var GLSubpath = function GLSubpath() { //drawing context this._world = null; this._canvas = null; //todo this might be unnecessary (but faster) since we can get it from the world - + //tool that owns this subpath this._drawingTool = null; @@ -207,24 +207,25 @@ GLSubpath.prototype.geomType = function () { GLSubpath.prototype.setWidth = function (newW) { var strokeWidth = this._strokeWidth; var halfStrokeWidth = strokeWidth*0.5; - if (newW<1) { - newW=1; //clamp minimum width to 1 + var minWidth = 1+strokeWidth; + if (newW
- - - - + + + +
diff --git a/js/components/colorwheel.reel/colorwheel.js b/js/components/colorwheel.reel/colorwheel.js index 343422e2..982bbfdc 100755 --- a/js/components/colorwheel.reel/colorwheel.js +++ b/js/components/colorwheel.reel/colorwheel.js @@ -14,19 +14,16 @@ 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; }, @@ -34,8 +31,8 @@ exports.ColorWheel = Montage.create(Component, { 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.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) { @@ -47,14 +44,12 @@ exports.ColorWheel = Montage.create(Component, { //////////////////////////////////////////////////////////////////// //Stroke size of wheel _strokeWidth: { - enumerable: false, value: 2 }, //////////////////////////////////////////////////////////////////// //Size must be set in digits and interpreted as pixel strokeWidth: { - enumerable: false, - get: function() { + get: function() { return this._strokeWidth; }, set: function(value) { @@ -64,14 +59,12 @@ exports.ColorWheel = Montage.create(Component, { //////////////////////////////////////////////////////////////////// //Stroke color of wheel _strokeColor: { - enumerable: false, value: 'rgb(255, 255, 255)' }, //////////////////////////////////////////////////////////////////// //Stroke only apply to wheel rim strokeColor: { - enumerable: false, - get: function() { + get: function() { return this._strokeColor; }, set: function(value) { @@ -81,14 +74,12 @@ exports.ColorWheel = Montage.create(Component, { //////////////////////////////////////////////////////////////////// //Width of the rim _rimWidth: { - enumerable: false, value: 2 }, //////////////////////////////////////////////////////////////////// //Width must be set using digits interpreted as pixel rimWidth: { - enumerable: false, - get: function() { + get: function() { return this._rimWidth; }, set: function(value) { @@ -97,47 +88,32 @@ exports.ColorWheel = Montage.create(Component, { }, //////////////////////////////////////////////////////////////////// // + _math: { + value: {PI: Math.PI, TAU: Math.PI*2, RADIANS: Math.PI/180} + }, + //////////////////////////////////////////////////////////////////// + // 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; + //Hidding component while it is drawn + this.element.style.opacity = 0; } }, //////////////////////////////////////////////////////////////////// // 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; + var slice, i, whlctx = this.wheel.getContext("2d"), math = this._math, + whlcvs = this.wheel, swhcvs = this.swatch, + wslcvs = this.wheelSelect, swscvs = this.swatchSelect; //Determing radius by smallest factor of width or height if (this.element.offsetWidth > this.element.offsetHeight) { math.diameter = this.element.offsetWidth; @@ -239,39 +215,35 @@ exports.ColorWheel = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // didDraw: { - enumerable: false, value: function() { // this.element.style.opacity = 1; // - this.element._component.wheel_select.canvas.style.cursor = 'pointer'; + this.wheelSelect.style.cursor = 'pointer'; // - this.element._component.wheel_select.canvas.addEventListener('mouseup', this, false); - this.element._component.wheel_select.canvas.addEventListener('mousedown', this, false); - this.element._component.wheel_select.canvas.addEventListener('mousemove', this, false); + this.wheelSelect.addEventListener('mouseup', this, false); + this.wheelSelect.addEventListener('mousedown', this, false); + this.wheelSelect.addEventListener('mousemove', this, false); } }, //////////////////////////////////////////////////////////////////// // _scanningMode: { - enumerable: false, value: null }, //////////////////////////////////////////////////////////////////// // _isMouseDown: { - enumerable: false, value: false }, //////////////////////////////////////////////////////////////////// // handleMousedown: { - enumerable: false, value: function(e) { // this._isMouseDown = true; // - if ((e.offsetY < this.element._component.math.swatchPosition || e.offsetY > this.element._component.math.swatchLength+this.element._component.math.swatchPosition) || (e.offsetX < this.element._component.math.swatchPosition || e.offsetX > this.element._component.math.swatchLength+this.element._component.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'; @@ -281,9 +253,8 @@ exports.ColorWheel = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // handleMouseup: { - enumerable: false, value: function(e) { - var math = this.element._component.math; + 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') { @@ -302,9 +273,8 @@ exports.ColorWheel = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // handleMousemove: { - enumerable: false, value: function(e) { - var math = this.element._component.math; + var math = this._math; // if (this._isMouseDown) { if (this._scanningMode === 'wheel') { @@ -316,9 +286,9 @@ exports.ColorWheel = Montage.create(Component, { 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.element._component.wheel_select.canvas.style.cursor = 'pointer'; + this.wheelSelect.style.cursor = 'pointer'; } else { - this.element._component.wheel_select.canvas.style.cursor = 'crosshair'; + this.wheelSelect.style.cursor = 'crosshair'; } } } @@ -326,13 +296,12 @@ exports.ColorWheel = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // mouseSetWheelAngle: { - enumerable: false, value: function(e) { - var angle = (2 * Math.atan2(e.offsetY - (this.element._component.math.radius - Math.sqrt(Math.pow(Math.abs(e.offsetX - this.element._component.math.radius),2) + Math.pow(Math.abs(e.offsetY - this.element._component.math.radius), 2))), e.offsetX - this.element._component.math.radius))/this.element._component.math.TAU*360; + 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.element._component.math.TAU/360, s: this._value.s, v: this._value.v}; + this.value = {h: angle*this._math.TAU/360, s: this._value.s, v: this._value.v}; } else { - this.value = {h: angle*this.element._component.math.TAU/360, s: 1, v: 1}; + this.value = {h: angle*this._math.TAU/360, s: 1, v: 1}; } this.wheelSelectorAngle(0); this.wheelSelectorAngle(angle); @@ -342,10 +311,9 @@ exports.ColorWheel = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // mouseSetSwatch: { - enumerable: false, value: function(e) { // - var s, v, math = this.element._component.math;; + var s, v, math = this._math;; // if (e.offsetX > math.swatchLength+math.swatchPosition) { s = 100; @@ -375,28 +343,25 @@ exports.ColorWheel = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // _wheelData: { - enumerable: false, value: null }, //////////////////////////////////////////////////////////////////// // _previousDegree: { - enumerable: false, value: 0 }, //////////////////////////////////////////////////////////////////// // drawSwatchSelector: { - enumerable: false, value: function (s, v) { - var context = this.element._component.swatch_select.context, strokeWidth = this.strokeWidth/2, radius = this.element._component.math.radius/28, math = this.element._component.math; + 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.element._component.math.swatchPosition+(this.element._component.math.swatchLength*(s/100)) - radius/2, this.element._component.math.swatchPosition+(this.element._component.math.swatchLength*(1-v/100))- radius/2, radius-strokeWidth, 0, this.element._component.math.TAU, true); + //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(); @@ -415,9 +380,8 @@ exports.ColorWheel = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // drawSwatchColor: { - enumerable: false, value: function (angle) { - var context = this.element._component.swatch.context, gradient, math = this.element._component.math; + var context = this.swatch.getContext("2d"), gradient, math = this._math; context.clearRect(0, 0, math.swatchLength, math.swatchLength); context.beginPath(); context.moveTo(0, 0); @@ -456,15 +420,14 @@ exports.ColorWheel = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // _drawWheelSlice: { - enumerable: false, value: function (s, r, g, b) { // - var context = this.element._component.wheel.context, radius = this.element._component.math.radius; + var context = this.wheel.getContext("2d"), radius = this._math.radius; context.beginPath(); context.fillStyle = 'rgb('+r+','+g+','+b+')'; context.scale(1,1); context.translate(radius + this.strokeWidth/2, radius + this.strokeWidth/2); - context.rotate(s*this.element._component.math.RADIANS); + context.rotate(s*this._math.RADIANS); context.translate(-radius, -radius); context.moveTo(radius, radius); context.translate(radius, radius); @@ -472,7 +435,7 @@ exports.ColorWheel = Montage.create(Component, { context.translate(-radius, -radius); context.lineTo(radius, this.rimWidth); context.translate(radius, radius); - context.arc(0, 0, this.element._component.math.innerRadius, -1.53, -1.59, 1); + context.arc(0, 0, this._math.innerRadius, -1.53, -1.59, 1); context.closePath(); context.fill(); context.stroke(); @@ -483,18 +446,17 @@ exports.ColorWheel = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // wheelSelectorAngle: { - enumerable: false, value: function (angle) { - angle *= this.element._component.math.RADIANS; + angle *= this._math.RADIANS; // - var context = this.element._component.wheel_select.context, radius = this.element._component.math.radius, - radiusOffsetPositive = this.element._component.math.radius+this.rimWidth/3, + 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.element._component.math.radius-this.rimWidth/3; + radiusOffsetNagative = this._math.radius-this.rimWidth/3; // - context.clearRect(0, 0, this.element._component.wheel_select.canvas.width, this.element._component.wheel_select.canvas.height); + context.clearRect(0, 0, this.wheelSelect.width, this.wheelSelect.height); // context.beginPath(); context.fillStyle = "rgba(0, 0, 0, 0)"; -- cgit v1.2.3 From 63d91561a9fbb3d48f8e6d0155cd6d6d2051fa58 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Wed, 13 Jun 2012 15:01:37 -0700 Subject: Fix: IKNINJA-1187 Clean up and fixing masking of color wheel. --- js/components/colorwheel.reel/colorwheel.js | 64 ++++++++++++++++------------- 1 file changed, 35 insertions(+), 29 deletions(-) diff --git a/js/components/colorwheel.reel/colorwheel.js b/js/components/colorwheel.reel/colorwheel.js index 982bbfdc..0980253c 100755 --- a/js/components/colorwheel.reel/colorwheel.js +++ b/js/components/colorwheel.reel/colorwheel.js @@ -111,37 +111,34 @@ exports.ColorWheel = Montage.create(Component, { draw: { value: function() { // - var slice, i, whlctx = this.wheel.getContext("2d"), math = this._math, - whlcvs = this.wheel, swhcvs = this.swatch, - wslcvs = this.wheelSelect, swscvs = this.swatchSelect; + var slice, i, whlctx = this.wheel.getContext("2d"); //Determing radius by smallest factor of width or height if (this.element.offsetWidth > this.element.offsetHeight) { - math.diameter = this.element.offsetWidth; + this._math.diameter = this.element.offsetWidth; } else { - math.diameter = this.element.offsetHeight; + this._math.diameter = this.element.offsetHeight; } //Setting the radius from diameter - math.radius = math.diameter/2; + this._math.radius = this._math.diameter/2; //Inner radius of wheel - math.innerRadius = math.radius - this.rimWidth; + this._math.innerRadius = this._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; + this.wheel.width = this.wheel.height = this.wheelSelect.width = this.wheelSelect.height = this.swatchSelect.width = this.swatchSelect.height = this._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); + 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); // - //swhcvs.width = swhcvs.height = math.swatchLength; //TODO: Figure out why this breaks on WINDOWS ONLY - swhcvs.style.top = swhcvs.style.left = math.swatchPosition+'px'; + this.swatch.style.top = this.swatch.style.left = this._math.swatchPosition+'px'; //Clearing wheel for redraw - whlctx.clearRect(0, 0, math.diameter, math.diameter); + whlctx.clearRect(0, 0, this._math.diameter, this._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.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)'; @@ -151,7 +148,7 @@ exports.ColorWheel = Montage.create(Component, { whlctx.save(); //////////////////////////////////////////////////////////////// //Looping through set intervals - math.radius = math.radius - this.strokeWidth/2; + this._math.radius = this._math.radius - this.strokeWidth/2; for (i=0; i<60; i++) { //Calculating slice number slice = Math.round(255*i/60); @@ -164,13 +161,19 @@ exports.ColorWheel = Montage.create(Component, { this._drawWheelSlice (i+300, 255, 0, 255-slice); } // - math.radius = math.radius + this.strokeWidth/2; + 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(math.radius, math.radius, math.radius-this.strokeWidth/2, 0, math.TAU, true); + 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(); @@ -179,23 +182,23 @@ exports.ColorWheel = Montage.create(Component, { 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.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(math.swatchPosition-this.strokeWidth/2, math.swatchPosition-this.strokeWidth/2); - whlctx.lineTo(math.swatchLength+math.swatchPosition-this.strokeWidth/2, math.swatchPosition-this.strokeWidth/2); - whlctx.lineTo(math.swatchLength+math.swatchPosition-this.strokeWidth/2, math.swatchLength+math.swatchPosition-this.strokeWidth/2); - whlctx.lineTo(math.swatchPosition-this.strokeWidth/2, math.swatchLength+math.swatchPosition-this.strokeWidth/2); + 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, math.diameter, math.diameter); + this._wheelData = whlctx.getImageData(0, 0, this._math.diameter, this._math.diameter); //TODO: Fix redraw bug if(!this.value) { this.wheelSelectorAngle(0); @@ -206,8 +209,8 @@ exports.ColorWheel = Montage.create(Component, { this.drawSwatchColor(0); this.drawSwatchSelector(100, 100); // - this.wheelSelectorAngle(this.value.h/math.TAU*360); - this.drawSwatchColor(this.value.h/math.TAU*360); + 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); } } @@ -422,11 +425,14 @@ exports.ColorWheel = Montage.create(Component, { _drawWheelSlice: { value: function (s, r, g, b) { // - var context = this.wheel.getContext("2d"), radius = this._math.radius; + 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(radius + this.strokeWidth/2, radius + this.strokeWidth/2); + context.translate(trnslt, trnslt); context.rotate(s*this._math.RADIANS); context.translate(-radius, -radius); context.moveTo(radius, radius); -- cgit v1.2.3 From d553f060303931120d40679dec17f348ead20ee5 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Wed, 13 Jun 2012 15:28:18 -0700 Subject: Clean up --- .../colorpanelpopup.reel/colorpanelpopup.html | 17 +++-- .../color/colorpanelpopup.reel/colorpanelpopup.js | 85 ++++++++-------------- 2 files changed, 40 insertions(+), 62 deletions(-) diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html index f65d5bc0..5ad5c615 100755 --- a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html +++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html @@ -16,7 +16,12 @@ "owner": { "prototype": "js/panels/Color/colorpanelpopup.reel[ColorPanelPopup]", "properties": { - "element": {"#": "cpp_popup"} + "element": {"#": "cpp_popup"}, + "wheel": {"#": "cntnr_wheel"}, + "images": {"#": "cntnr_images"}, + "gradients": {"#": "cntnr_gradients"}, + "palettes": {"#": "cntnr_palettes"}, + "alpha": {"#": "cntnr_alpha"} } } } @@ -47,13 +52,13 @@
-
-
-
-
+
+
+
+
-
+
Alpha
diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js index dd7e6192..aebbbd41 100755 --- a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js +++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js @@ -23,13 +23,11 @@ exports.ColorPanelPopup = Montage.create(Component, { //////////////////////////////////////////////////////////////////// //Storing color manager _colorManager: { - enumerable: false, value: false }, //////////////////////////////////////////////////////////////////// //Color manager colorManager: { - enumerable: true, get: function() { return this._colorManager; }, @@ -42,13 +40,11 @@ exports.ColorPanelPopup = Montage.create(Component, { //////////////////////////////////////////////////////////////////// //Storing color panel _colorPanel: { - enumerable: false, value: false }, //////////////////////////////////////////////////////////////////// //Color panel colorPanel: { - enumerable: true, get: function() { return this._colorPanel; }, @@ -59,7 +55,6 @@ exports.ColorPanelPopup = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // setNoColor: { - enumerable: true, value: function (e) { this.colorManager.applyNoColor(); } @@ -67,23 +62,14 @@ exports.ColorPanelPopup = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // prepareForDraw: { - enumerable: false, value: function () { // - this.element._popups = {containers: {wheel: null, palette: null, gradient: null, image: null}}; this.element._components = {wheel: null, combo: null}; - //Storing containers for reference - this.element._popups.containers.wheel = this.element.getElementsByClassName('cp_pu_wheel_container')[0]; - this.element._popups.containers.palette = this.element.getElementsByClassName('cp_pu_palette_container')[0]; - this.element._popups.containers.gradient = this.element.getElementsByClassName('cp_pu_gradient_container')[0]; - this.element._popups.containers.image = this.element.getElementsByClassName('cp_pu_image_container')[0]; - this.element._popups.containers.alpha = this.element.getElementsByClassName('cp_pu_alpha')[0]; } }, //////////////////////////////////////////////////////////////////// // willDraw: { - enumerable: false, value: function() { // this.element.style.opacity = 0; @@ -131,7 +117,7 @@ exports.ColorPanelPopup = Montage.create(Component, { this.element._components.combo.hottext.addEventListener('change', this.alphaChange.bind(this), true); // this.element._components.wheel = ColorWheel.create(); - this.element._components.wheel.element = this.element._popups.containers.wheel; + this.element._components.wheel.element = this.wheel; this.element._components.wheel.element.style.display = 'block'; this.element._components.wheel.rimWidth = 14; this.element._components.wheel.strokeWidth = 2; @@ -152,7 +138,6 @@ exports.ColorPanelPopup = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // draw: { - enumerable: false, value: function() { // this.drawPalette(this.defaultPalette); @@ -171,20 +156,20 @@ exports.ColorPanelPopup = Montage.create(Component, { }.bind(this), true); // this.element.getElementsByClassName('cp_pu_palettes')[0].addEventListener('click', function () { - this.popupSwitchInputTo(this.element._popups.containers.palette); + this.popupSwitchInputTo(this.palettes); }.bind(this), true); // this.element.getElementsByClassName('cp_pu_wheel')[0].addEventListener('click', function () { - this.popupSwitchInputTo(this.element._popups.containers.wheel); + this.popupSwitchInputTo(this.wheel); }.bind(this), true); // this.element.getElementsByClassName('cp_pu_gradients')[0].addEventListener('click', function () { - this.popupSwitchInputTo(this.element._popups.containers.gradient); + this.popupSwitchInputTo(this.gradients); }.bind(this), true); // this.element.getElementsByClassName('cp_pu_images')[0].style.opacity = .2;//TODO: Remove, visual feedback for disable button this.element.getElementsByClassName('cp_pu_images')[0].addEventListener('click', function () { - //this.popupSwitchInputTo(this.element._popups.containers.image); + //this.popupSwitchInputTo(this.images); }.bind(this), true); // this.application.ninja.colorController.colorView.addButton('current', this.element.getElementsByClassName('cp_pu_color_current')[0]); @@ -198,7 +183,6 @@ exports.ColorPanelPopup = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // didDraw: { - enumerable: false, value: function() { // @@ -207,7 +191,6 @@ exports.ColorPanelPopup = Montage.create(Component, { //////////////////////////////////////////////////////////////////// //Reworking logic, firstDraw bubbles up, so target must be checked handleFirstDraw: { - enumerable: false, value: function (e) { // if (this.element._components.wheel) { @@ -217,16 +200,16 @@ exports.ColorPanelPopup = Montage.create(Component, { //Switching to tab from previous selection switch (this.application.ninja.colorController.popupTab) { case 'wheel': - this.popupSwitchInputTo(this.element._popups.containers.wheel); + this.popupSwitchInputTo(this.wheel); break; case 'palette': - this.popupSwitchInputTo(this.element._popups.containers.palette); + this.popupSwitchInputTo(this.palettes); break; case 'image': - this.popupSwitchInputTo(this.element._popups.containers.image); + this.popupSwitchInputTo(this.images); break; default: - this.popupSwitchInputTo(this.element._popups.containers.wheel); + this.popupSwitchInputTo(this.wheel); break } //Checking for a gradient to be current color @@ -237,7 +220,7 @@ exports.ColorPanelPopup = Montage.create(Component, { } else { //Gradient has been set, so opening gradient tab with gradient this.drawGradient(this.colorManager.gradient); - this.popupSwitchInputTo(this.element._popups.containers.gradient); + this.popupSwitchInputTo(this.gradients); } } //Displaying element once it's been drawn @@ -247,40 +230,39 @@ exports.ColorPanelPopup = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // popupSwitchInputTo: { - enumerable: true, value: function (tab) { // - if (tab !== this.element._popups.containers.palette) { - this.element._popups.containers.palette.style.display = 'none'; + if (tab !== this.palettes) { + this.palettes.style.display = 'none'; } else { - this.element._popups.containers.palette.style.display = 'block'; - this.element._popups.containers.alpha.style.display = 'block'; + this.palettes.style.display = 'block'; + this.alpha.style.display = 'block'; // this.application.ninja.colorController.popupTab = 'palette'; } // - if (tab !== this.element._popups.containers.wheel && this.element._components.wheel.element) { + if (tab !== this.wheel && this.element._components.wheel.element) { this.element._components.wheel.element.style.display = 'none'; } else if (this.element._components.wheel.element && this.element._components.wheel.element.style.display !== 'block'){ this.element._components.wheel.element.style.display = 'block'; - this.element._popups.containers.alpha.style.display = 'block'; + this.alpha.style.display = 'block'; // this.application.ninja.colorController.popupTab = 'wheel'; } else { - this.element._popups.containers.wheel.style.display = 'none'; + this.wheel.style.display = 'none'; } // - if (tab !== this.element._popups.containers.image) { - this.element._popups.containers.image.style.display = 'none'; + if (tab !== this.images) { + this.images.style.display = 'none'; } else { - this.element._popups.containers.image.style.display = 'block'; - this.element._popups.containers.alpha.style.display = 'none'; + this.images.style.display = 'block'; + this.alpha.style.display = 'none'; // this.application.ninja.colorController.popupTab = 'image'; } // - if (tab !== this.element._popups.containers.gradient) { - this.element._popups.containers.gradient.style.display = 'none'; + if (tab !== this.gradients) { + this.gradients.style.display = 'none'; // if (this.element._components.wheel._value) { this.element._components.wheel.value = {h: this.element._components.wheel._value.h, s: this.element._components.wheel._value.s, v: this.element._components.wheel._value.v, wasSetByCode: false}; @@ -288,8 +270,8 @@ exports.ColorPanelPopup = Montage.create(Component, { this.element._components.wheel.value = {h: 0, s: 1, v: 1, wasSetByCode: false}; } } else { - this.element._popups.containers.gradient.style.display = 'block'; - this.element._popups.containers.alpha.style.display = 'none'; + this.gradients.style.display = 'block'; + this.alpha.style.display = 'none'; // this.application.ninja.colorController.popupTab = 'gradient'; } @@ -300,11 +282,10 @@ exports.ColorPanelPopup = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // drawPalette: { - enumerable: true, value: function (c) { var i, button; // - this.element._popups.containers.palette.style.display = 'block'; + this.palettes.style.display = 'block'; // for (i in c) { button = document.createElement('button'); @@ -312,7 +293,7 @@ exports.ColorPanelPopup = Montage.create(Component, { button.title = c[i].css.toUpperCase(); button.colorMode = c[i].mode; button.colorValue = c[i].value; - this.element._popups.containers.palette.appendChild(button); + this.palettes.appendChild(button); button.addEventListener('click', function (b) { var rgb, color; // @@ -346,13 +327,12 @@ exports.ColorPanelPopup = Montage.create(Component, { }.bind(this), true); } // - this.element._popups.containers.palette.style.display = 'none'; + this.palettes.style.display = 'none'; } }, //////////////////////////////////////////////////////////////////// // defaultPalette: { - enumerable: true, value: [{mode: 'hex', value: '000000', css: '#000000'}, {mode: 'hex', value: '808080', css: '#808080'}, {mode: 'hex', value: '000000', css: '#000000'}, {mode: 'hex', value: '003300', css: '#003300'}, {mode: 'hex', value: '006600', css: '#006600'}, {mode: 'hex', value: '009900', css: '#009900'}, {mode: 'hex', value: '00cc00', css: '#00cc00'}, {mode: 'hex', value: '00ff00', css: '#00ff00'}, {mode: 'hex', value: '330000', css: '#330000'}, {mode: 'hex', value: '333300', css: '#333300'}, {mode: 'hex', value: '336600', css: '#336600'}, {mode: 'hex', value: '339900', css: '#339900'}, {mode: 'hex', value: '33cc00', css: '#33cc00'}, {mode: 'hex', value: '33ff00', css: '#33ff00'}, {mode: 'hex', value: '660000', css: '#660000'}, {mode: 'hex', value: '663300', css: '#663300'}, {mode: 'hex', value: '666600', css: '#666600'}, {mode: 'hex', value: '669900', css: '#669900'}, {mode: 'hex', value: '66cc00', css: '#66cc00'}, {mode: 'hex', value: '66ff00', css: '#66ff00'}, {mode: 'hex', value: '333333', css: '#333333'}, {mode: 'hex', value: '808080', css: '#808080'}, {mode: 'hex', value: '000033', css: '#000033'}, {mode: 'hex', value: '003333', css: '#003333'}, {mode: 'hex', value: '006633', css: '#006633'}, {mode: 'hex', value: '009933', css: '#009933'}, {mode: 'hex', value: '00cc33', css: '#00cc33'}, {mode: 'hex', value: '00ff33', css: '#00ff33'}, {mode: 'hex', value: '330033', css: '#330033'}, {mode: 'hex', value: '333333', css: '#333333'}, {mode: 'hex', value: '336633', css: '#336633'}, {mode: 'hex', value: '339933', css: '#339933'}, {mode: 'hex', value: '33cc33', css: '#33cc33'}, {mode: 'hex', value: '33ff33', css: '#33ff33'}, {mode: 'hex', value: '660033', css: '#660033'}, {mode: 'hex', value: '663333', css: '#663333'}, {mode: 'hex', value: '666633', css: '#666633'}, {mode: 'hex', value: '669933', css: '#669933'}, {mode: 'hex', value: '66cc33', css: '#66cc33'}, {mode: 'hex', value: '66ff33', css: '#66ff33'}, {mode: 'hex', value: '666666', css: '#666666'}, {mode: 'hex', value: '808080', css: '#808080'}, {mode: 'hex', value: '000066', css: '#000066'}, {mode: 'hex', value: '003366', css: '#003366'}, {mode: 'hex', value: '006666', css: '#006666'}, {mode: 'hex', value: '009966', css: '#009966'}, {mode: 'hex', value: '00cc66', css: '#00cc66'}, {mode: 'hex', value: '00ff66', css: '#00ff66'}, {mode: 'hex', value: '330066', css: '#330066'}, {mode: 'hex', value: '333366', css: '#333366'}, {mode: 'hex', value: '336666', css: '#336666'}, {mode: 'hex', value: '339966', css: '#339966'}, {mode: 'hex', value: '33cc66', css: '#33cc66'}, {mode: 'hex', value: '33ff66', css: '#33ff66'}, {mode: 'hex', value: '660066', css: '#660066'}, {mode: 'hex', value: '663366', css: '#663366'}, {mode: 'hex', value: '666666', css: '#666666'}, {mode: 'hex', value: '669966', css: '#669966'}, {mode: 'hex', value: '66cc66', css: '#66cc66'}, {mode: 'hex', value: '66ff66', css: '#66ff66'}, @@ -369,11 +349,10 @@ exports.ColorPanelPopup = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // drawGradient: { - enumerable: true, value: function (g) { //TODO: Remove container, insert in reel var container = document.createElement('div'), gradient = GradientPicker.create(); - this.element._popups.containers.gradient.appendChild(container); + this.gradients.appendChild(container); //Creating gradient picker from components gradient.element = container; gradient.hack = this.hack; // TODO: Remove @@ -403,13 +382,11 @@ exports.ColorPanelPopup = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // defaultGradient: { - enumerable: true, value: {mode: 'linear', gradientMode: 'linear', stops: [{mode: 'rgb', value: {r: 255, g: 255, b: 255, a: 1, css: 'rgb(255, 255, 255)'}, position: 0}, {mode: 'rgb', value: {r: 0, g: 0, b: 0, a: 1, css: 'rgb(0, 0, 0)'}, position: 100}]} }, //////////////////////////////////////////////////////////////////// // alphaChange: { - enumerable: false, value: function (e) { if (!e._event.wasSetByCode) { var update = {value: this.element._components.combo.slider.value/100, wasSetByCode: false, type: 'change'}; @@ -420,7 +397,6 @@ exports.ColorPanelPopup = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // handleChange: { - enumerable: false, value: function (e) { this.dispatchEvent(e._event); } @@ -428,7 +404,6 @@ exports.ColorPanelPopup = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // handleChanging: { - enumerable: false, value: function (e) { this.dispatchEvent(e._event); } @@ -436,7 +411,6 @@ exports.ColorPanelPopup = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // _handleWheelEvent: { - enumerable: false, value: function (e) { if (!e._event.wasSetByCode) { // @@ -448,7 +422,6 @@ exports.ColorPanelPopup = Montage.create(Component, { //////////////////////////////////////////////////////////////////// //Garbage collection (Manual method) destroy: { - enumerable: false, value: function() { // this.application.ninja.colorController.colorView.removeButton('hexinput', this.element.getElementsByClassName('cp_pu_hottext_hex')[0]); -- cgit v1.2.3 From 118fda42958e4dcf6d2cdbb58eb31cbc08e6ce91 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Wed, 13 Jun 2012 15:29:18 -0700 Subject: Fix: IKNINJA-1608 Changing icon, seems low res and improper size, should be hi-res PNG for future reference, using negative space offset to better display. --- .../color/colorpanelpopup.reel/css/colorpanelpopup.css | 2 +- .../color/colorpanelpopup.reel/css/colorpanelpopup.scss | 2 +- .../color/colorpanelpopup.reel/img/icon_palette.jpg | Bin 0 -> 1352 bytes 3 files changed, 2 insertions(+), 2 deletions(-) create mode 100644 js/panels/color/colorpanelpopup.reel/img/icon_palette.jpg diff --git a/js/panels/color/colorpanelpopup.reel/css/colorpanelpopup.css b/js/panels/color/colorpanelpopup.reel/css/colorpanelpopup.css index 4db0abff..3ffcd2f5 100755 --- a/js/panels/color/colorpanelpopup.reel/css/colorpanelpopup.css +++ b/js/panels/color/colorpanelpopup.reel/css/colorpanelpopup.css @@ -56,7 +56,7 @@ /* line 62, colorpanelpopup.scss */ .cp_pu_palettes { - background: #000; + background: url(../img/icon_palette.jpg) no-repeat black -1px -1px; } /* line 67, colorpanelpopup.scss */ diff --git a/js/panels/color/colorpanelpopup.reel/css/colorpanelpopup.scss b/js/panels/color/colorpanelpopup.reel/css/colorpanelpopup.scss index 1f63658a..cd9f47a2 100755 --- a/js/panels/color/colorpanelpopup.reel/css/colorpanelpopup.scss +++ b/js/panels/color/colorpanelpopup.reel/css/colorpanelpopup.scss @@ -60,7 +60,7 @@ $grey_light: #494949; .cp_pu_palettes { - background: #000; + background: url(../img/icon_palette.jpg) no-repeat #000 -1px -1px; } .cp_pu_nocolor diff --git a/js/panels/color/colorpanelpopup.reel/img/icon_palette.jpg b/js/panels/color/colorpanelpopup.reel/img/icon_palette.jpg new file mode 100644 index 00000000..1ea9ac4a Binary files /dev/null and b/js/panels/color/colorpanelpopup.reel/img/icon_palette.jpg differ -- cgit v1.2.3 From 5b5e059a8dabc02d78fcde1bf271c2e49af6334a Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Thu, 14 Jun 2012 10:25:28 -0700 Subject: IKNinja-1710 - Boundary box is drawn offset when switching between docs. This issue is related to move object to negative space. Signed-off-by: Nivesh Rajbhandari --- js/helper-classes/3D/draw-utils.js | 18 ++++++++-------- js/stage/stage.reel/stage.js | 42 ++++++++++++++++++++++++-------------- 2 files changed, 37 insertions(+), 23 deletions(-) diff --git a/js/helper-classes/3D/draw-utils.js b/js/helper-classes/3D/draw-utils.js index bef1e435..6a84c86b 100755 --- a/js/helper-classes/3D/draw-utils.js +++ b/js/helper-classes/3D/draw-utils.js @@ -117,7 +117,7 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { }, initializeFromDocument:{ - value:function(){ + value:function(adjustScrollOffsets){ var i, documentRootChildren = this.application.ninja.currentDocument.model.views.design.getLiveNodeList(true), stage = this.application.ninja.stage, @@ -144,13 +144,15 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { for(i=0; i