From 0e7e32cadeb2002ee0c77c224b23aa00859f2183 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Fri, 22 Jun 2012 23:51:50 -0700 Subject: Added third gradient chip popup Need to add support for gradient events dispatching from standalone chips. Just need to hook up relays for events besides HSV to bubble up. --- .../gradientpicker.reel/gradientpicker.js | 8 +- .../color/colorpanelpopup.reel/colorpanelpopup.js | 27 +-- js/panels/color/colorpopup-manager.js | 232 +++++++++++++++------ 3 files changed, 186 insertions(+), 81 deletions(-) (limited to 'js') diff --git a/js/components/gradientpicker.reel/gradientpicker.js b/js/components/gradientpicker.reel/gradientpicker.js index 6b50fae2..9acd24ac 100755 --- a/js/components/gradientpicker.reel/gradientpicker.js +++ b/js/components/gradientpicker.reel/gradientpicker.js @@ -43,7 +43,7 @@ exports.GradientPicker = Montage.create(Component, { get: function() {return this._mode;}, set: function(value) { // - this.application.ninja.colorController.colorPopupManager.hideColorChipPopup(); + this.application.ninja.colorController.colorPopupManager.hideGradientChipPopup(); // this._mode = value; // @@ -132,7 +132,7 @@ exports.GradientPicker = Montage.create(Component, { value: function(data, silent) { if (this.application.ninja.colorController.colorPopupManager) { //Hiding any open popups (of gradient buttons) - this.application.ninja.colorController.colorPopupManager.hideColorChipPopup(); + this.application.ninja.colorController.colorPopupManager.hideGradientChipPopup(); //Creating stop elements var stop = document.createElement('div'), holder = document.createElement('div'), @@ -160,7 +160,7 @@ exports.GradientPicker = Montage.create(Component, { //Initialing button with color data button.color(data.color.mode, data.color.value); //Button popup data - button.props = {side: 'top', align: 'center', nocolor: false, wheel: true, palette: true, gradient: false, image: false, offset: -84, panel: true, history: false}; + button.props = {side: 'top', align: 'center', nocolor: false, wheel: true, palette: true, gradient: false, image: false, offset: -84, gradientPopup: true, history: false}; //Listening for color events from button button.addEventListener('change', this, false); //Dispatching event depending on type of mode @@ -263,7 +263,7 @@ exports.GradientPicker = Montage.create(Component, { // this._updating = true; // - this.application.ninja.colorController.colorPopupManager.hideColorChipPopup(); + this.application.ninja.colorController.colorPopupManager.hideGradientChipPopup(); // if (e._event.y > this._trackData.y+70 || e._event.y < this._trackData.y) { this.removeStop(this.currentStop); diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js index 153817c1..179dc02c 100755 --- a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js +++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js @@ -60,7 +60,7 @@ exports.ColorPanelPopup = Montage.create(Component, { value: function () { // this._components = null; - this._components = {wheel: null, combo: null}; + this._components = {wheel: null, combo: null, gradient: null}; } }, //////////////////////////////////////////////////////////////////// @@ -369,27 +369,30 @@ exports.ColorPanelPopup = Montage.create(Component, { drawGradient: { value: function (g) { //TODO: Remove container, insert in reel - var container = document.createElement('div'), gradient = GradientPicker.create(); + var container = document.createElement('div'); + // + this._components.gradient = GradientPicker.create(); + // this.gradients.appendChild(container); //Creating gradient picker from components - gradient.element = container; - gradient.hack = this.hack; // TODO: Remove + this._components.gradient.element = container; + this._components.gradient.hack = this.hack; // TODO: Remove // if (g && g.value && g.value.stops) { if (g.value.gradientMode) { - gradient._mode = g.value.gradientMode; - gradient.value = g.value.stops; + this._components.gradient._mode = g.value.gradientMode; + this._components.gradient.value = g.value.stops; } else { - gradient._mode = 'linear'; - gradient.value = g.value.stops; + this._components.gradient._mode = 'linear'; + this._components.gradient.value = g.value.stops; } } else { - gradient._mode = this.defaultGradient.gradientMode; - gradient.value = this.defaultGradient.stops; + this._components.gradient._mode = this.defaultGradient.gradientMode; + this._components.gradient.value = this.defaultGradient.stops; } // - gradient.needsDraw = true; - gradient.addEventListener('change', function (e){ + this._components.gradient.needsDraw = true; + this._components.gradient.addEventListener('change', function (e){ // if (!e._event.wasSetByCode) { this.colorManager.gradient = {value: e._event.gradient, type: 'change', wasSetByCode: false}; diff --git a/js/panels/color/colorpopup-manager.js b/js/panels/color/colorpopup-manager.js index bccfcebc..717e6fa2 100755 --- a/js/panels/color/colorpopup-manager.js +++ b/js/panels/color/colorpopup-manager.js @@ -36,18 +36,30 @@ exports.ColorPopupManager = Montage.create(Component, { //Closing popups if outside limits document.addEventListener('mousedown', function (e) { // - if (this._popupBase && !this._popupChipBase) { + if (this._popupBase && !this._popupChipBase && !this._popupGradientChipBase) { if(!this.popupHitCheck(this._popupBase, e)) { this.hideColorPopup(); } - } else if (!this._popupBase && this._popupChipBase) { + } else if (!this._popupBase && this._popupChipBase && !this._popupGradientChipBase) { if(!this.popupHitCheck(this._popupChipBase, e)) { this.hideColorChipPopup(); } - } else if (this._popupBase && this._popupChipBase) { + } else if (this._popupBase && this._popupChipBase && !this._popupGradientChipBase) { if(!this.popupHitCheck(this._popupBase, e) && !this.popupHitCheck(this._popupChipBase, e)) { this.hideColorPopup(); } + } else if (this._popupBase && this._popupChipBase && this._popupGradientChipBase) { + if(!this.popupHitCheck(this._popupBase, e) && !this.popupHitCheck(this._popupChipBase, e) && !this.popupHitCheck(this._popupGradientChipBase, e)) { + this.hideColorPopup(); + } + } else if (!this._popupBase && this._popupChipBase && this._popupGradientChipBase) { + if(!this.popupHitCheck(this._popupChipBase, e) && !this.popupHitCheck(this._popupGradientChipBase, e)) { + this.hideColorChipPopup(); + } + } else if (this._popupBase && !this._popupChipBase && this._popupGradientChipBase) { + if(!this.popupHitCheck(this._popupBase, e) && !this.popupHitCheck(this._popupGradientChipBase, e)) { + this.hideColorPopup(); + } } }.bind(this)); //////////////////////////////////////////////////////////// @@ -74,9 +86,11 @@ exports.ColorPopupManager = Montage.create(Component, { //Hides popups since click is outside limits return false; } else { + //Keeps popup open since click inside area return true; } } else { + //Hides popups since element not detected return false; } } @@ -92,6 +106,11 @@ exports.ColorPopupManager = Montage.create(Component, { value: null }, //////////////////////////////////////////////////////////////////// + // + _popupGradientChipBase: { + value: null + }, + //////////////////////////////////////////////////////////////////// //Storing color manager _colorManager: { value: null @@ -99,33 +118,33 @@ exports.ColorPopupManager = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // colorManager: { - get: function() { - return this._colorManager; - }, - set: function(value) { - this._colorManager = value; - } + get: function() {return this._colorManager;}, + set: function(value) {this._colorManager = value;} }, //////////////////////////////////////////////////////////////////// // _colorPopupDrawing: { - enumerable: true, value: false }, //////////////////////////////////////////////////////////////////// // _colorChipPopupDrawing: { - enumerable: true, + value: false + }, + //////////////////////////////////////////////////////////////////// + // + _colorGradientPopupDrawing: { value: false }, //////////////////////////////////////////////////////////////////// //TODO: Remove and use montage's built in component showColorPopup: { - enumerable: true, value: function (x, y, side, align) { + //Check to see if popup is drawing, avoids errors if (this._colorPopupDrawing) { return; } + //Check for toggling view if (this._popupBase && this._popupBase.opened) { //Toogles if called and opened this.hideColorPopup(); @@ -138,7 +157,7 @@ exports.ColorPopupManager = Montage.create(Component, { this._hasinit = true; } //////////////////////////////////////////////////// - //Creating popup from m-js component + //Creating popup var popup = document.createElement('div'); document.body.appendChild(popup); // @@ -158,13 +177,13 @@ exports.ColorPopupManager = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // hideColorPopup: { - enumerable: true, value: function () { if (this._popupBase && this._popupBase.opened) { // this._popupBase.popup.removeEventListener('didDraw', this, false); // this.hideColorChipPopup(); + this.hideGradientChipPopup(); //Making sure to return color manager to either stroke or fill (might be a Hack for now) if (this.colorManager.input !== 'stroke' && this.colorManager.input !== 'fill' && this.application.ninja.colorController.colorView.previousInput) { this.colorManager.input = this.application.ninja.colorController.colorView.previousInput; @@ -187,7 +206,6 @@ exports.ColorPopupManager = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // colorChipChange: { - enumerable: true, value: function (e) { // var ctx, @@ -224,16 +242,58 @@ exports.ColorPopupManager = Montage.create(Component, { }, //////////////////////////////////////////////////////////////////// // + colorGradientChipChange: { + value: function (e) { + // + var ctx, + cvs = this.application.ninja.colorController.colorView.currentChip.getElementsByTagName('canvas')[0], + rgb = this._popupGradientChipBase.colorManager.rgb, + hsl = this._popupGradientChipBase.colorManager.hsl, + alpha = this._popupGradientChipBase.colorManager.alpha.value; + // + if (cvs) { + ctx = cvs.getContext('2d'); + ctx.clearRect(0, 0, cvs.width, cvs.height); + ctx.beginPath(); + ctx.lineWidth = 2; + ctx.strokeStyle = "#666"; + ctx.moveTo(0, 0); + ctx.lineTo(cvs.width, 0); + ctx.lineTo(cvs.width, cvs.height); + ctx.lineTo(0, cvs.height); + ctx.lineTo(0, 0); + ctx.stroke(); + ctx.beginPath(); + ctx.lineWidth = 2; + ctx.strokeStyle = "#333"; + ctx.moveTo(2, 2); + ctx.lineTo(cvs.width-2, 2); + ctx.lineTo(cvs.width-2, cvs.height-2); + ctx.lineTo(2, cvs.height-2); + ctx.lineTo(2, 1); + ctx.stroke(); + } + // + this.application.ninja.colorController.colorView.currentChip.color('rgb', {r: rgb.r, g: rgb.g, b: rgb.b, a: alpha, css: 'rgba('+rgb.r+', '+rgb.g+', '+rgb.b+', '+alpha+')'}); + } + }, + //////////////////////////////////////////////////////////////////// + // showColorChipPopup: { - enumerable: true, value: function (e) { if (this._colorChipPopupDrawing) { return; } - if (this._popupChipBase && this._popupChipBase.opened) { + if (this._popupChipBase && this._popupChipBase.opened && (!this._popupChipBase.props || (this._popupChipBase.props && !this._popupChipBase.props.gradientPopup)) && !e._event.srcElement.props.gradientPopup) { //Toogles if called and opened this.hideColorChipPopup(); + return; } else { + // + if (e._event.srcElement.props.gradientPopup) { + this.showGradientChipPopup(e); + return; + } this._colorChipPopupDrawing = true; //////////////////////////////////////////////////// //Initializing events @@ -241,10 +301,8 @@ exports.ColorPopupManager = Montage.create(Component, { this.init(); this._hasinit = true; } - - //////////////////////////////////////////////////// - //Creating popup from m-js component + //Creating popup var popup = document.createElement('div'); document.body.appendChild(popup); // @@ -254,7 +312,7 @@ exports.ColorPopupManager = Montage.create(Component, { if (e._event.srcElement.props) { this._popupChipBase.props = e._event.srcElement.props; } else { - this._popupChipBase.props = {side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, panel: false, history: false}; + this._popupChipBase.props = {side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, history: false}; } // if (this._popupChipBase.props.offset) { @@ -274,74 +332,110 @@ exports.ColorPopupManager = Montage.create(Component, { // this._popupChipBase.needsDraw = true; this._popupChipBase.addEventListener('firstDraw', this, false); - - - - - - - /* -//////////////////////////////////////////////////// - //Creating popup from m-js component + } + } + }, + //////////////////////////////////////////////////////////////////// + // + hideColorChipPopup: { + value: function () { + // + if (this._popupChipBase && this._popupChipBase.opened) { + // + this.hideGradientChipPopup(); + // + this._popupChipBase.popup.removeEventListener('didDraw', this, false); + //Making sure to return color manager to either stroke or fill (might be a Hack for now) + if (this.colorManager.input !== 'stroke' && this.colorManager.input !== 'fill' && this.application.ninja.colorController.colorView.previousInput) { + this.colorManager.input = this.application.ninja.colorController.colorView.previousInput; + } + // + this.application.ninja.popupManager.removePopup(this._popupChipBase.popup.element); + this._popupChipBase.opened = false; + //TODO: Fix HACK of removing popup + this._popupChipBase.popup.base.destroy(); + this._popupChipBase.popup = null; + } + } + }, + //////////////////////////////////////////////////////////////////// + // + showGradientChipPopup: { + value: function (e) { + if (this._colorGradientPopupDrawing) { + return; + } + if (this._popupGradientChipBase && this._popupGradientChipBase.opened) { + //Toogles if called and opened + this.hideGradientChipPopup(); + return; + } else { + // + this._colorGradientPopupDrawing = true; + //////////////////////////////////////////////////// + //Initializing events + if (!this._hasinit) { + this.init(); + this._hasinit = true; + } + //////////////////////////////////////////////////// + //Creating popup var popup = document.createElement('div'); document.body.appendChild(popup); // - this._popupChipBase.event = e._event; - this._popupChipBase = ColorChipPopup.create(); - this._popupChipBase.element = popup; - this._popupChipBase.colorManager = this.colorManager; + this._popupGradientChipBase = ColorPanelPopup.create(); + this._popupGradientChipBase.element = popup; + this._popupGradientChipBase.isPopupChip = true; if (e._event.srcElement.props) { - this.colorChipProps = e._event.srcElement.props; + this._popupGradientChipBase.props = e._event.srcElement.props; } else { - this.colorChipProps = {side: 'top', align: 'center', wheel: true, palette: true, gradient: true, image: true, panel: false}; + this._popupGradientChipBase.props = {side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, history: false}; } // - if (!this.colorChipProps.panel) { - this.hideColorPopup(); - } - // - this._popupChipBase.popupModes = {}; - this._popupChipBase.popupModes.gradient = this.colorChipProps.gradient; - this._popupChipBase.popupModes.image = this.colorChipProps.image; - this._popupChipBase.popupModes.wheel = this.colorChipProps.wheel; - this._popupChipBase.popupModes.palette = this.colorChipProps.palette; - this._popupChipBase.popupModes.nocolor = this.colorChipProps.nocolor; + if (this._popupGradientChipBase.props.offset) { + this._popupGradientChipBase.props.x = (e._event.clientX - e._event.offsetX + this._popupGradientChipBase.props.offset)+'px'; + this._popupGradientChipBase.props.y = (e._event.target.clientHeight/2+e._event.clientY - e._event.offsetY)+'px'; + } else { + this._popupGradientChipBase.props.x = (e._event.clientX - e._event.offsetX)+'px'; + this._popupGradientChipBase.props.y = (e._event.target.clientHeight/2+e._event.clientY - e._event.offsetY)+'px'; + } + // + this._popupGradientChipBase.props.source = e._event.srcElement; + // + this._popupGradientChipBase.colorManager = ColorModel.create(); // - this._popupChipBase.addEventListener('change', this, false); - this._popupChipBase.addEventListener('changing', this, false); + this._popupGradientChipBase.addEventListener('change', this, false); + this._popupGradientChipBase.addEventListener('changing', this, false); // - this._popupChipBase.needsDraw = true; - this._popupChipBase.addEventListener('firstDraw', this, false); -*/ + this._popupGradientChipBase.needsDraw = true; + this._popupGradientChipBase.addEventListener('firstDraw', this, false); } } }, //////////////////////////////////////////////////////////////////// // - hideColorChipPopup: { - enumerable: true, + hideGradientChipPopup: { value: function () { // - if (this._popupChipBase && this._popupChipBase.opened) { + if (this._popupGradientChipBase && this._popupGradientChipBase.opened) { // - this._popupChipBase.popup.removeEventListener('didDraw', this, false); + this._popupGradientChipBase.popup.removeEventListener('didDraw', this, false); //Making sure to return color manager to either stroke or fill (might be a Hack for now) if (this.colorManager.input !== 'stroke' && this.colorManager.input !== 'fill' && this.application.ninja.colorController.colorView.previousInput) { this.colorManager.input = this.application.ninja.colorController.colorView.previousInput; } // - this.application.ninja.popupManager.removePopup(this._popupChipBase.popup.element); - this._popupChipBase.opened = false; + this.application.ninja.popupManager.removePopup(this._popupGradientChipBase.popup.element); + this._popupGradientChipBase.opened = false; //TODO: Fix HACK of removing popup - this._popupChipBase.popup.base.destroy(); - this._popupChipBase.popup = null; + this._popupGradientChipBase.popup.base.destroy(); + this._popupGradientChipBase.popup = null; } } }, //////////////////////////////////////////////////////////////////// //Reworking logic, firstDraw bubbles up, so target must be checked handleFirstDraw: { - enumerable: false, value: function (e) { if (e._target._element.className === 'cpp_popup') { e._target.removeEventListener('firstDraw', this, false); @@ -356,6 +450,8 @@ exports.ColorPopupManager = Montage.create(Component, { } else if (e._target._element.className === 'default_popup' && e._target._content.className === 'cpp_popup') { if (!e._target.base.isPopupChip) { this._colorPopupDrawing = false; + } else if (e._target.base.props && e._target.base.props.gradientPopup) { + this._colorGradientPopupDrawing = false; } else { this._colorChipPopupDrawing = false; } @@ -400,6 +496,8 @@ exports.ColorPopupManager = Montage.create(Component, { hsv.wasSetByCode = false; hsv.type = 'change'; e._target.base._components.wheel.value = hsv; + } else { + e._target.base.colorManager.applyNoColor(false); } } } @@ -487,9 +585,8 @@ exports.ColorPopupManager = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // handleChange: { - enumerable: false, value: function (e) { - if (this._popupChipBase && this._popupChipBase.opened) { + if (this._popupChipBase && this._popupChipBase.opened && !this._popupGradientChipBase) { if (e._event.hsv) { this._popupChipBase.colorManager.hsv = {h: e._event.hsv.h, s: e._event.hsv.s, v: e._event.hsv.v, type: e._event.type, wasSetByCode: e._event.wasSetByCode}; this.colorChipChange(e); @@ -497,6 +594,14 @@ exports.ColorPopupManager = Montage.create(Component, { //console.log(e._event); } return; + } else if (this._popupGradientChipBase && this._popupGradientChipBase.opened) { + if (e._event.hsv) { + this._popupGradientChipBase.colorManager.hsv = {h: e._event.hsv.h, s: e._event.hsv.s, v: e._event.hsv.v, type: e._event.type, wasSetByCode: e._event.wasSetByCode}; + this.colorGradientChipChange(e); + } else { + //console.log(e._event); + } + return; } // if (!e._event.wasSetByCode) { @@ -517,7 +622,6 @@ exports.ColorPopupManager = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // handleChanging: { - enumerable: false, value: function (e) { if (e._event.hsv) { // @@ -562,8 +666,6 @@ exports.ColorPopupManager = Montage.create(Component, { } return; } - - //Applying color to all buttons in array for(i=0; this.application.ninja.colorController.colorView._buttons[input][i]; i++) { //TODO: Remove this and combine to single method for live updating colors -- cgit v1.2.3