From 2e24eaa71b260fd11632d8a124874b238c9aa82a Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Wed, 1 Feb 2012 16:02:37 -0800 Subject: Delete unneeded compass log file (IKNINJA 1101). Update base styles for better colors on HTML buttons. Change project panel so it shows no project by default. --- js/panels/Project/projectpanelbase.reel/ProjectPanelBase.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'js/panels') diff --git a/js/panels/Project/projectpanelbase.reel/ProjectPanelBase.js b/js/panels/Project/projectpanelbase.reel/ProjectPanelBase.js index 31582153..e5173005 100644 --- a/js/panels/Project/projectpanelbase.reel/ProjectPanelBase.js +++ b/js/panels/Project/projectpanelbase.reel/ProjectPanelBase.js @@ -577,11 +577,11 @@ exports.ProjectPanelBase = (require("montage/core/core").Montage).create(require arrLinkedScrollersLength = arrLinkedScrollers.length, i = 0, that = this; - + /* if (this.firstTimeDraw) { this.hasActiveProject="large"; } - + */ if (!this.hasActiveProject) { -- cgit v1.2.3 From 830b011d94d728882286d72e129f7405134957c7 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 1 Feb 2012 17:05:07 -0800 Subject: Updated color code in the PI to go through element mediator. Signed-off-by: Nivesh Rajbhandari --- js/panels/Color/colortoolbar.reel/colortoolbar.js | 64 +++--------- js/panels/properties/content.reel/content.js | 119 ++++++++-------------- 2 files changed, 56 insertions(+), 127 deletions(-) (limited to 'js/panels') diff --git a/js/panels/Color/colortoolbar.reel/colortoolbar.js b/js/panels/Color/colortoolbar.reel/colortoolbar.js index 19fe7b85..10ae8b6e 100644 --- a/js/panels/Color/colortoolbar.reel/colortoolbar.js +++ b/js/panels/Color/colortoolbar.reel/colortoolbar.js @@ -20,7 +20,7 @@ exports.ColorToolbar = Montage.create(Component, { //Storing stroke (stores color in mode use to select color) _stroke: { enumerable: false, - value: {colorMode: 'rgb', color: {r: 0, g: 0, b: 0, a: 1, css: 'rgb(0,0,0)'}, webGlColor: [0, 0, 0, 1]} + value: {colorMode: 'rgb', color: {r: 0, g: 0, b: 0, a: 1, css: 'rgb(0,0,0)', mode:'rgb', wasSetByCode: false, type: 'change'}, webGlColor: [0, 0, 0, 1]} }, //////////////////////////////////////////////////////////////////// // @@ -39,7 +39,7 @@ exports.ColorToolbar = Montage.create(Component, { //Storing fill (stores color in mode use to select color) _fill: { enumerable: false, - value: {colorMode: 'rgb', color: {r: 255, g: 255, b: 255, a: 1, css: 'rgb(255,255,255)'}, webGlColor: [1, 1, 1, 1]} + value: {colorMode: 'rgb', color: {r: 255, g: 255, b: 255, a: 1, css: 'rgb(255,255,255)', mode:'rgb', wasSetByCode: false, type: 'change'}, webGlColor: [1, 1, 1, 1]} }, //////////////////////////////////////////////////////////////////// // @@ -95,76 +95,38 @@ exports.ColorToolbar = Montage.create(Component, { didDraw: { enumerable: false, value: function() { - // + this.fill_btn.addEventListener('change', function (e) { - // - var temp; - // - this.fill = e._event; - // - if (e._event.color && e._event.color.l) { - temp = this.application.ninja.colorController.colorModel.hslToRgb(e._event.color.h/360, e._event.color.s/100, e._event.color.l/100); - temp.a = e._event.color.a; - } else if (e._event.color && e._event.color.r){ - temp = e._event.color; - temp.a = e._event.color.a; - } else { - temp = null; - } - //WebGL uses array - if (temp) { - this.fill.webGlColor = [temp.r/255, temp.g/255, temp.b/255, temp.a]; - } else { - this.fill.webGlColor = null; - } - // + this.fill = e._event; + this.fill.webGlColor = this.application.ninja.colorController.colorModel.colorToWebGl(e._event.color); this.application.ninja.colorController.colorModel.input = 'fill'; - // - var color = e._event.color; + + var color = e._event.color; if (e._event.colorMode !== 'nocolor' && color) { color.wasSetByCode = false; color.type = 'change'; + color.mode = e._event.colorMode; this.application.ninja.colorController.colorModel[e._event.colorMode] = color; } else { this.application.ninja.colorController.colorModel.applyNoColor(); } - // this.application.ninja.colorController.colorModel.input = 'chip'; }.bind(this)); - // - this.stroke_btn.addEventListener('change', function (e) { - // - var temp; - // + + this.stroke_btn.addEventListener('change', function (e) { this.stroke = e._event; - // - if (e._event.color && e._event.color.l) { - temp = this.application.ninja.colorController.colorModel.hslToRgb(e._event.color.h/360, e._event.color.s/100, e._event.color.l/100); - temp.a = e._event.color.a; - } else if (e._event.color && e._event.color.r){ - temp = e._event.color; - temp.a = e._event.color.a; - } else { - temp = null; - } - //WebGL uses array - if (temp) { - this.stroke.webGlColor = [temp.r/255, temp.g/255, temp.b/255, temp.a]; - } else { - this.stroke.webGlColor = null; - } - // + this.stroke.webGlColor = this.application.ninja.colorController.colorModel.colorToWebGl(e._event.color); this.application.ninja.colorController.colorModel.input = 'stroke'; - // + var color = e._event.color; if (e._event.colorMode !== 'nocolor' && color) { color.wasSetByCode = false; color.type = 'change'; + color.mode = e._event.colorMode; this.application.ninja.colorController.colorModel[e._event.colorMode] = color; } else { this.application.ninja.colorController.colorModel.applyNoColor(); } - // this.application.ninja.colorController.colorModel.input = 'chip'; }.bind(this)); } diff --git a/js/panels/properties/content.reel/content.js b/js/panels/properties/content.reel/content.js index fe6faef8..34c38e70 100644 --- a/js/panels/properties/content.reel/content.js +++ b/js/panels/properties/content.reel/content.js @@ -141,7 +141,8 @@ exports.Content = Montage.create(Component, { displayElementProperties: { value: function (el) { - var customPI; + var customPI, + currentValue; this.elementName = el.elementModel.selection; this.elementId.value = el.getAttribute("id") || ""; @@ -180,87 +181,50 @@ exports.Content = Montage.create(Component, { for(var j = 0, fields; fields = customSec.Section[j]; j++) { for(var k = 0, control; control = fields[k]; k++) { - if(control.prop !== "border-color" && control.prop !== "background-color") { - var currentValue = ElementsMediator.getProperty(el, control.prop, control.valueMutator); + if(control.type !== "color") { + currentValue = ElementsMediator.getProperty(el, control.prop, control.valueMutator); currentValue ? currentValue = currentValue : currentValue = control.defaultValue; this.customSections[0].content.controls[control.id] = currentValue; } + else + { + currentValue = ElementsMediator.getColor2(el, control.prop, control.valueMutator); + if(control.prop === "border") + { + this.application.ninja.colorController.colorModel.input = "stroke"; + } + else if(control.prop === "background") + { + this.application.ninja.colorController.colorModel.input = "fill"; + } + + debugger; + if(currentValue) + { + if(currentValue.mode === "gradient") + { + this.application.ninja.colorController.colorModel["gradient"] = + {value: currentValue.color, wasSetByCode: true, type: 'change'}; + } + else + { + if (currentValue.color.a !== undefined) + { + this.application.ninja.colorController.colorModel.alpha = + {value: currentValue.color.a, wasSetByCode: true, type: 'change'}; + } + this.application.ninja.colorController.colorModel[currentValue.color.mode] = currentValue.color; + } + } + else + { + this.application.ninja.colorController.colorModel.alpha = {value: 1, wasSetByCode: true, type: 'change'}; + this.application.ninja.colorController.colorModel.applyNoColor(); + } + } } } } - - - //TODO: Once logic for color and gradient is established, this needs to be revised - - var color, background, backgroundImage, borderColor = ElementsMediator.getProperty(el, "border-color"), borderImage = ElementsMediator.getProperty(el, "border-image"); - this.application.ninja.colorController.colorModel.input = "stroke"; - if(borderColor || borderImage) { - if (borderImage && borderImage !== 'none' && borderImage.indexOf('-webkit') >= 0) { - //Gradient - color = this.application.ninja.colorController.getColorObjFromCss(borderImage); - if (color && color.value) { - this.application.ninja.colorController.colorModel[color.mode] = {value: color.value, wasSetByCode: true, type: 'change'}; - } else { - this.application.ninja.colorController.colorModel.alpha = {value: 1, wasSetByCode: true, type: 'change'}; - this.application.ninja.colorController.colorModel.applyNoColor(); - } - } else { - //Solid - color = this.application.ninja.colorController.getColorObjFromCss(borderColor); - if (color && color.value) { - color.value.wasSetByCode = true; - color.value.type = 'change'; - if (color.value.a) { - this.application.ninja.colorController.colorModel.alpha = {value: color.value.a, wasSetByCode: true, type: 'change'}; - } - this.application.ninja.colorController.colorModel[color.mode] = color.value; - } else { - this.application.ninja.colorController.colorModel.alpha = {value: 1, wasSetByCode: true, type: 'change'}; - this.application.ninja.colorController.colorModel.applyNoColor(); - } - } - } else { - this.application.ninja.colorController.colorModel.alpha = {value: 1, wasSetByCode: true, type: 'change'}; - this.application.ninja.colorController.colorModel.applyNoColor(); - } - // - background = ElementsMediator.getProperty(el, "background-color"); - backgroundImage = ElementsMediator.getProperty(el, "background-image"); - this.application.ninja.colorController.colorModel.input = "fill"; - if(background || backgroundImage) { - if (backgroundImage && backgroundImage !== 'none' && backgroundImage.indexOf('-webkit') >= 0) { - //Gradient - color = this.application.ninja.colorController.getColorObjFromCss(backgroundImage); - if (color && color.value) { - this.application.ninja.colorController.colorModel[color.mode] = {value: color.value, wasSetByCode: true, type: 'change'}; - } else { - this.application.ninja.colorController.colorModel.alpha = {value: 1, wasSetByCode: true, type: 'change'}; - this.application.ninja.colorController.colorModel.applyNoColor(); - } - } else { - //Solid - color = this.application.ninja.colorController.getColorObjFromCss(background); - if (color && color.value) { - color.value.wasSetByCode = true; - color.value.type = 'change'; - if (color.value.a) { - this.application.ninja.colorController.colorModel.alpha = {value: color.value.a, wasSetByCode: true, type: 'change'}; - } - this.application.ninja.colorController.colorModel[color.mode] = color.value; - } else { - this.application.ninja.colorController.colorModel.alpha = {value: 1, wasSetByCode: true, type: 'change'}; - this.application.ninja.colorController.colorModel.applyNoColor(); - } - } - } else { - this.application.ninja.colorController.colorModel.alpha = {value: 1, wasSetByCode: true, type: 'change'}; - this.application.ninja.colorController.colorModel.applyNoColor(); - } - - - - - } }, @@ -300,6 +264,8 @@ exports.Content = Montage.create(Component, { handlePropertyChange: { value: function(e) { + if(e.wasSetByCode) return; + var newValue; e.units ? newValue = e.value + e.units : newValue = e.value; @@ -317,6 +283,7 @@ exports.Content = Montage.create(Component, { handlePropertyChanging: { value: function(e) { + if(e.wasSetByCode) return; // ElementsMediator.setProperty(this.application.ninja.selectedElements, "border-style", [this.customSections[0].content.controls.borderStyle], "Changing", "pi"); ElementsMediator.setProperty(this.application.ninja.selectedElements, e.prop, [e.value + "px"], "Changing", "pi"); -- cgit v1.2.3 From 01efeff045e7196bab37fc60f7030969ad650d6c Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 1 Feb 2012 21:14:17 -0800 Subject: Removed border special-casing from PI since the mediator now handles this generically. Updated mediator's set stroke routine to use the setColor routine. Signed-off-by: Nivesh Rajbhandari --- js/panels/properties/content.reel/content.js | 7 ------- 1 file changed, 7 deletions(-) (limited to 'js/panels') diff --git a/js/panels/properties/content.reel/content.js b/js/panels/properties/content.reel/content.js index 34c38e70..6cb66071 100644 --- a/js/panels/properties/content.reel/content.js +++ b/js/panels/properties/content.reel/content.js @@ -198,7 +198,6 @@ exports.Content = Montage.create(Component, { this.application.ninja.colorController.colorModel.input = "fill"; } - debugger; if(currentValue) { if(currentValue.mode === "gradient") @@ -270,12 +269,6 @@ exports.Content = Montage.create(Component, { e.units ? newValue = e.value + e.units : newValue = e.value; - if(e.prop === "border-width") {// || e.prop === "border-style") { - ElementsMediator.setProperty(this.application.ninja.selectedElements, "border-style", [this.customSections[0].content.controls.borderStyle], "Change", "pi"); - } else if(e.prop === "border-style") { - ElementsMediator.setProperty(this.application.ninja.selectedElements, "border-width", [this.customSections[0].content.controls.borderWidth + "px"], "Change", "pi"); - } - ElementsMediator.setProperty(this.application.ninja.selectedElements, e.prop, [newValue], "Change", "pi"); } -- cgit v1.2.3 From 1159924ecae4e7d371d40cee00e0e56d1605ffda Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Wed, 1 Feb 2012 23:53:47 -0800 Subject: Fixes for montage integration Signed-off-by: Valerio Virgillito --- js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'js/panels') diff --git a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js b/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js index 57187af1..66333cc0 100644 --- a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js +++ b/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js @@ -91,7 +91,7 @@ exports.PanelContainer = Montage.create(Component, { this.panelSplitter.disabled = true; } - this.needsDraw = true; +// this.needsDraw = true; this.addEventListener("change@appModel.PropertiesPanel", this, false); this.addEventListener("change@appModel.ProjectPanel", this, false); @@ -198,7 +198,7 @@ exports.PanelContainer = Montage.create(Component, { minHeights += this.repeater.childComponents[i].element.offsetHeight; } else { this._panels[i].isLocked = false; - this.repeater.childComponents[i].needsDraw = true; + if(this.repeater.childComponents[i]) this.repeater.childComponents[i].needsDraw = true; minHeights += this._panels[i].minHeight; } } -- cgit v1.2.3 From 5a305ec44b2bd5198a248357439aae8ebbd75fee Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Thu, 2 Feb 2012 00:11:51 -0800 Subject: upgrading to Montage v0.6 Signed-off-by: Valerio Virgillito --- js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js | 2 +- js/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.js | 2 +- js/panels/Project/projectpanelbase.reel/ProjectPanelBase.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) (limited to 'js/panels') diff --git a/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js b/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js index ae7e5c14..0c950ffd 100644 --- a/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js +++ b/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js @@ -8,7 +8,7 @@ var cssPropertyNameList = require("js/panels/CSSPanel/css-property-name-lis cssCompletionMap = require("js/panels/CSSPanel/css-value-completion-map").cssValueCompletionMap, CSS_SHORTHAND_MAP = require("js/panels/CSSPanel/css-shorthand-map").CSS_SHORTHAND_MAP, keyboardModule = require("js/mediators/keyboard-mediator").Keyboard, - nj = require("js/lib/NJUtils.js").NJUtils; + nj = require("js/lib/NJUtils").NJUtils; diff --git a/js/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.js b/js/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.js index 0e1cf206..bb6f9de6 100644 --- a/js/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.js +++ b/js/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.js @@ -6,7 +6,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot var Montage = require("montage/core/core").Montage, Component = require("montage/ui/component").Component, - nj = require("js/lib/NJUtils.js").NJUtils; + nj = require("js/lib/NJUtils").NJUtils; exports.ComputedStyleSubPanel = Montage.create(Component, { diff --git a/js/panels/Project/projectpanelbase.reel/ProjectPanelBase.js b/js/panels/Project/projectpanelbase.reel/ProjectPanelBase.js index 31582153..083dafeb 100644 --- a/js/panels/Project/projectpanelbase.reel/ProjectPanelBase.js +++ b/js/panels/Project/projectpanelbase.reel/ProjectPanelBase.js @@ -6,7 +6,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot var TreeControl = require("js/components/tree.reel").Tree, ResizerControl = require("js/panels/Resizer").Resizer, - nj = require("js/lib/NJUtils.js").NJUtils; + nj = require("js/lib/NJUtils").NJUtils; exports.ProjectPanelBase = (require("montage/core/core").Montage).create(require("montage/ui/component").Component, { hasTemplate: { -- cgit v1.2.3 From 834e362e33113fd00e7568a67f108f836bf87ce9 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Thu, 2 Feb 2012 11:30:02 -0800 Subject: Fixed the color popups to work with m-js v6 Removed the wrapper DIV, now it's more direct to create and insert the content in the popups. Changes created DOM exceptions, so it had to be modified. --- js/panels/Color/colorpopup-manager.js | 64 ++++++++++++++--------------------- 1 file changed, 25 insertions(+), 39 deletions(-) (limited to 'js/panels') diff --git a/js/panels/Color/colorpopup-manager.js b/js/panels/Color/colorpopup-manager.js index 943ec7e7..a4c9a8c2 100644 --- a/js/panels/Color/colorpopup-manager.js +++ b/js/panels/Color/colorpopup-manager.js @@ -161,11 +161,13 @@ exports.ColorPopupManager = Montage.create(Component, { //////////////////////////////////////////////////// //Creating popup from m-js component var popup = document.createElement('div'); + document.body.appendChild(popup); // this._popupBase = ColorPanelPopup.create(); - this._popupBase.content = document.createElement('div'); + this._popupBase.element = popup; this._popupBase.props = {x: x, y: y, side: side, align: align}; - + this._popupBase.colorManager = this.colorManager; + //TODO: Remove if (this._hackOffset) { this._popupBase.hack = {x: 53, y: 235}; } else { @@ -173,20 +175,10 @@ exports.ColorPopupManager = Montage.create(Component, { this._popupBase.hack = {x: 0, y: 0}; } // - document.body.appendChild(popup); - document.body.appendChild(this._popupBase.content); - //Setting color panel for reference when drawing - //this._popupBase.colorPanel = this; - this._popupBase.colorManager = this.colorManager; - //Setting up events this._popupBase.addEventListener('change', this, false); - this._popupBase.addEventListener('changing', this, false); - //TODO: Use m-js popup or check m-js fix of nested drawing components - this._popupBase.element = popup; - this._popupBase.needsDraw = true; - //Adding drawn element to container - this._popupBase.content.appendChild(this._popupBase.element); - //Waiting for content to drawn before loading popup + this._popupBase.addEventListener('changing', this, false); + // + this._popupBase.needsDraw = true; this._popupBase.addEventListener('firstDraw', this, false); } } @@ -286,41 +278,33 @@ exports.ColorPopupManager = Montage.create(Component, { //////////////////////////////////////////////////// //Creating popup from m-js component var popup = document.createElement('div'); + document.body.appendChild(popup); // - this._popupChipBase = ColorChipPopup.create(); - this._popupChipBase.content = document.createElement('div'); this._popupChip.event = e._event; - // + this._popupChipBase = ColorChipPopup.create(); + this._popupChipBase.element = popup; + this._popupChipBase.colorManager = this.colorManager; if (e._event.srcElement.props) { this.colorChipProps = e._event.srcElement.props; } else { this.colorChipProps = {side: 'top', align: 'center', wheel: true, palette: true, gradient: true, image: true, panel: false}; } // - if (!this.colorChipProps.panel) { + if (!this.colorChipProps.panel) { this.hideColorPopup(); } // - document.body.appendChild(popup); - document.body.appendChild(this._popupChipBase.content); - //Setting color panel for reference when drawing - //popupBase.colorPanel = this; - this._popupChipBase.colorManager = this.colorManager; - // + 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; - //Setting up events + this._popupChipBase.popupModes.nocolor = this.colorChipProps.nocolor; + // this._popupChipBase.addEventListener('change', this, false); - this._popupChipBase.addEventListener('changing', this, false); - //TODO: Use m-js popup or check m-js fix of nested drawing components - this._popupChipBase.element = popup; - this._popupChipBase.needsDraw = true; - //Adding drawn element to container - this._popupChipBase.content.appendChild(this._popupChipBase.element); - //Waiting for content to drawn before loading popup + this._popupChipBase.addEventListener('changing', this, false); + // + this._popupChipBase.needsDraw = true; this._popupChipBase.addEventListener('firstDraw', this, false); } } @@ -354,14 +338,14 @@ exports.ColorPopupManager = Montage.create(Component, { if (e._target._element.className === 'cpp_popup') { this._popupBase.removeEventListener('firstDraw', this, false); //Creating an instance of the popup and sending in created color popup content - this._popupPanel.popup = this.application.ninja.popupManager.createPopup(this._popupBase.content, {x: this._popupBase.props.x, y: this._popupBase.props.y}, {side: this._popupBase.props.side, align: this._popupBase.props.align}); + this._popupPanel.popup = this.application.ninja.popupManager.createPopup(this._popupBase.element, {x: this._popupBase.props.x, y: this._popupBase.props.y}, {side: this._popupBase.props.side, align: this._popupBase.props.align}); //Displaying popup once it's drawn this._popupPanel.popup.addEventListener('firstDraw', this, false); //Hiding popup while it draws this._popupPanel.popup.element.style.opacity = 0; //Storing popup for use when closing this._popupPanel.popup.base = this._popupBase; - } else if (e._target._element.className === 'default_popup' && e._target._content.firstChild.className === 'cpp_popup') { + } else if (e._target._element.className === 'default_popup' && e._target._content.className === 'cpp_popup') { // this._colorPopupDrawing = false; // @@ -371,11 +355,12 @@ exports.ColorPopupManager = Montage.create(Component, { //Popup was added, so it's opened this._popupPanel.opened = true; } else if (e._target._element.className === 'cc_popup') { + this._popupChipBase.removeEventListener('firstDraw', this, false); //Creating an instance of the popup and sending in created color popup content if (this.colorChipProps.offset) { - this._popupChip.popup = this.application.ninja.popupManager.createPopup(this._popupChipBase.content, {x: (this._popupChip.event.clientX - this._popupChip.event.offsetX + this.colorChipProps.offset)+'px', y: (this._popupChip.event.target.clientHeight/2+this._popupChip.event.clientY - this._popupChip.event.offsetY)+'px'}, {side: this.colorChipProps.side, align: this.colorChipProps.align}); + this._popupChip.popup = this.application.ninja.popupManager.createPopup(this._popupChipBase.element, {x: (this._popupChip.event.clientX - this._popupChip.event.offsetX + this.colorChipProps.offset)+'px', y: (this._popupChip.event.target.clientHeight/2+this._popupChip.event.clientY - this._popupChip.event.offsetY)+'px'}, {side: this.colorChipProps.side, align: this.colorChipProps.align}); } else { - this._popupChip.popup = this.application.ninja.popupManager.createPopup(this._popupChipBase.content, {x: (this._popupChip.event.clientX - this._popupChip.event.offsetX)+'px', y: (this._popupChip.event.target.clientHeight/2+this._popupChip.event.clientY - this._popupChip.event.offsetY)+'px'}, {side: this.colorChipProps.side, align: this.colorChipProps.align}); + this._popupChip.popup = this.application.ninja.popupManager.createPopup(this._popupChipBase.element, {x: (this._popupChip.event.clientX - this._popupChip.event.offsetX)+'px', y: (this._popupChip.event.target.clientHeight/2+this._popupChip.event.clientY - this._popupChip.event.offsetY)+'px'}, {side: this.colorChipProps.side, align: this.colorChipProps.align}); } // if (!this.colorChipProps.panel) { @@ -387,7 +372,8 @@ exports.ColorPopupManager = Montage.create(Component, { this._popupChip.popup.base = this._popupChipBase; //Displaying popup once it's drawn this._popupChip.popup.addEventListener('firstDraw', this, false); - } else if (e._target._element.className === 'default_popup' && e._target._content.firstChild.className === 'cc_popup') { + } else if (e._target._element.className === 'default_popup' && e._target._content.className === 'cc_popup') { + this._popupChip.popup.removeEventListener('firstDraw', this, false); // this._colorChipPopupDrawing = false; // -- cgit v1.2.3 From 89d64cf06e170c3c50b02eeadd9dcf10d6efe1a3 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Thu, 2 Feb 2012 13:22:30 -0800 Subject: Updating Shapes PI to support corner radii. Also fixed PI bug where we were always updating custom section 0. Signed-off-by: Nivesh Rajbhandari --- js/panels/properties/content.reel/content.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) (limited to 'js/panels') diff --git a/js/panels/properties/content.reel/content.js b/js/panels/properties/content.reel/content.js index fe6faef8..3cedee6d 100644 --- a/js/panels/properties/content.reel/content.js +++ b/js/panels/properties/content.reel/content.js @@ -182,8 +182,11 @@ exports.Content = Montage.create(Component, { if(control.prop !== "border-color" && control.prop !== "background-color") { var currentValue = ElementsMediator.getProperty(el, control.prop, control.valueMutator); - currentValue ? currentValue = currentValue : currentValue = control.defaultValue; - this.customSections[0].content.controls[control.id] = currentValue; + if(currentValue === null) + { + currentValue = control.defaultValue; + } + this.customSections[i].content.controls[control.id] = currentValue; } } } -- cgit v1.2.3 From 1a8bcab85cd71447bbd1b66daf95d1c8fbca8c2b Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Wed, 1 Feb 2012 23:53:47 -0800 Subject: Fixes for montage integration Signed-off-by: Valerio Virgillito --- js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'js/panels') diff --git a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js b/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js index 57187af1..66333cc0 100644 --- a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js +++ b/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js @@ -91,7 +91,7 @@ exports.PanelContainer = Montage.create(Component, { this.panelSplitter.disabled = true; } - this.needsDraw = true; +// this.needsDraw = true; this.addEventListener("change@appModel.PropertiesPanel", this, false); this.addEventListener("change@appModel.ProjectPanel", this, false); @@ -198,7 +198,7 @@ exports.PanelContainer = Montage.create(Component, { minHeights += this.repeater.childComponents[i].element.offsetHeight; } else { this._panels[i].isLocked = false; - this.repeater.childComponents[i].needsDraw = true; + if(this.repeater.childComponents[i]) this.repeater.childComponents[i].needsDraw = true; minHeights += this._panels[i].minHeight; } } -- cgit v1.2.3 From a3024011a91d3941f81481dd4d600e9684eb0fd4 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Thu, 2 Feb 2012 00:11:51 -0800 Subject: upgrading to Montage v0.6 Signed-off-by: Valerio Virgillito --- js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js | 2 +- js/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.js | 2 +- js/panels/Project/projectpanelbase.reel/ProjectPanelBase.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) (limited to 'js/panels') diff --git a/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js b/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js index ae7e5c14..0c950ffd 100644 --- a/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js +++ b/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js @@ -8,7 +8,7 @@ var cssPropertyNameList = require("js/panels/CSSPanel/css-property-name-lis cssCompletionMap = require("js/panels/CSSPanel/css-value-completion-map").cssValueCompletionMap, CSS_SHORTHAND_MAP = require("js/panels/CSSPanel/css-shorthand-map").CSS_SHORTHAND_MAP, keyboardModule = require("js/mediators/keyboard-mediator").Keyboard, - nj = require("js/lib/NJUtils.js").NJUtils; + nj = require("js/lib/NJUtils").NJUtils; diff --git a/js/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.js b/js/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.js index 0e1cf206..bb6f9de6 100644 --- a/js/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.js +++ b/js/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.js @@ -6,7 +6,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot var Montage = require("montage/core/core").Montage, Component = require("montage/ui/component").Component, - nj = require("js/lib/NJUtils.js").NJUtils; + nj = require("js/lib/NJUtils").NJUtils; exports.ComputedStyleSubPanel = Montage.create(Component, { diff --git a/js/panels/Project/projectpanelbase.reel/ProjectPanelBase.js b/js/panels/Project/projectpanelbase.reel/ProjectPanelBase.js index e5173005..d9ae2686 100644 --- a/js/panels/Project/projectpanelbase.reel/ProjectPanelBase.js +++ b/js/panels/Project/projectpanelbase.reel/ProjectPanelBase.js @@ -6,7 +6,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot var TreeControl = require("js/components/tree.reel").Tree, ResizerControl = require("js/panels/Resizer").Resizer, - nj = require("js/lib/NJUtils.js").NJUtils; + nj = require("js/lib/NJUtils").NJUtils; exports.ProjectPanelBase = (require("montage/core/core").Montage).create(require("montage/ui/component").Component, { hasTemplate: { -- cgit v1.2.3 From db73f720b692d63b55f7c773579fe23336ec0486 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Thu, 2 Feb 2012 16:40:08 -0800 Subject: Update PI when element is changed by one of the tools. Signed-off-by: Nivesh Rajbhandari --- js/panels/properties/content.reel/content.js | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) (limited to 'js/panels') diff --git a/js/panels/properties/content.reel/content.js b/js/panels/properties/content.reel/content.js index 3cedee6d..e2ea1374 100644 --- a/js/panels/properties/content.reel/content.js +++ b/js/panels/properties/content.reel/content.js @@ -97,8 +97,22 @@ exports.Content = Montage.create(Component, { value: function(event) { // console.log("Element Change PI ", event.detail.source); // If the event comes from the pi don't need to update if(event.detail.source && event.detail.source !== "pi") { - this.positionSize.leftPosition = parseFloat(ElementsMediator.getProperty(this.application.ninja.selectedElements[0]._element, "left")); - this.positionSize.topPosition = parseFloat(ElementsMediator.getProperty(this.application.ninja.selectedElements[0]._element, "top")); + // TODO - This should only update the properties that were changed. + var el = this.application.ninja.selectedElements[0]._element || this.application.ninja.selectedElements[0]; + this.positionSize.leftPosition = parseFloat(ElementsMediator.getProperty(el, "left")); + this.positionSize.topPosition = parseFloat(ElementsMediator.getProperty(el, "top")); + this.positionSize.heightSize = parseFloat(ElementsMediator.getProperty(el, "height")); + this.positionSize.widthSize = parseFloat(ElementsMediator.getProperty(el, "width")); + + if(this.threeD.inGlobalMode) + { + this.threeD.x3D = ElementsMediator.get3DProperty(el, "x3D"); + this.threeD.y3D = ElementsMediator.get3DProperty(el, "y3D"); + this.threeD.z3D = ElementsMediator.get3DProperty(el, "z3D"); + this.threeD.xAngle = ElementsMediator.get3DProperty(el, "xAngle"); + this.threeD.yAngle = ElementsMediator.get3DProperty(el, "yAngle"); + this.threeD.zAngle = ElementsMediator.get3DProperty(el, "zAngle"); + } } } }, -- cgit v1.2.3 From 854a6d1be334782c8e232601e6d562a11296e55a Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Fri, 3 Feb 2012 14:06:26 -0800 Subject: Update grid and planes when elementChange event signifies the "matrix", "left", "top", "width" or "height" properties have changed. Signed-off-by: Nivesh Rajbhandari --- js/panels/Color/colortoolbar.reel/colortoolbar.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'js/panels') diff --git a/js/panels/Color/colortoolbar.reel/colortoolbar.js b/js/panels/Color/colortoolbar.reel/colortoolbar.js index 10ae8b6e..6b8e476b 100644 --- a/js/panels/Color/colortoolbar.reel/colortoolbar.js +++ b/js/panels/Color/colortoolbar.reel/colortoolbar.js @@ -20,7 +20,7 @@ exports.ColorToolbar = Montage.create(Component, { //Storing stroke (stores color in mode use to select color) _stroke: { enumerable: false, - value: {colorMode: 'rgb', color: {r: 0, g: 0, b: 0, a: 1, css: 'rgb(0,0,0)', mode:'rgb', wasSetByCode: false, type: 'change'}, webGlColor: [0, 0, 0, 1]} + value: {colorMode: 'rgb', color: {r: 0, g: 0, b: 0, a: 1, css: 'rgb(0,0,0)', mode:'rgb', wasSetByCode: true, type: 'change'}, webGlColor: [0, 0, 0, 1]} }, //////////////////////////////////////////////////////////////////// // @@ -39,7 +39,7 @@ exports.ColorToolbar = Montage.create(Component, { //Storing fill (stores color in mode use to select color) _fill: { enumerable: false, - value: {colorMode: 'rgb', color: {r: 255, g: 255, b: 255, a: 1, css: 'rgb(255,255,255)', mode:'rgb', wasSetByCode: false, type: 'change'}, webGlColor: [1, 1, 1, 1]} + value: {colorMode: 'rgb', color: {r: 255, g: 255, b: 255, a: 1, css: 'rgb(255,255,255)', mode:'rgb', wasSetByCode: true, type: 'change'}, webGlColor: [1, 1, 1, 1]} }, //////////////////////////////////////////////////////////////////// // @@ -86,8 +86,8 @@ exports.ColorToolbar = Montage.create(Component, { this.application.ninja.colorController.addButton('chip', this.fill_btn); this.application.ninja.colorController.addButton('chip', this.stroke_btn); // - this.fill_btn.color('rgb', {wasSetByCode: false, type: 'change', color: {r: 255, g: 255, b: 255}, css: 'rgb(255,255,255)'}); - this.stroke_btn.color('rgb', {wasSetByCode: false, type: 'change', color: {r: 0, g: 0, b: 0}, css: 'rgb(0,0,0)'}); + this.fill_btn.color('rgb', {wasSetByCode: true, type: 'change', color: {r: 255, g: 255, b: 255}, css: 'rgb(255,255,255)'}); + this.stroke_btn.color('rgb', {wasSetByCode: true, type: 'change', color: {r: 0, g: 0, b: 0}, css: 'rgb(0,0,0)'}); } }, //////////////////////////////////////////////////////////////////// -- cgit v1.2.3 From fd44b7c326acf413367667690e937709f03601e3 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Fri, 3 Feb 2012 17:09:02 -0800 Subject: We were only updating the first custom section in the PI. Signed-off-by: Nivesh Rajbhandari --- js/panels/properties/content.reel/content.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) (limited to 'js/panels') diff --git a/js/panels/properties/content.reel/content.js b/js/panels/properties/content.reel/content.js index 20dc308f..0088447a 100644 --- a/js/panels/properties/content.reel/content.js +++ b/js/panels/properties/content.reel/content.js @@ -197,8 +197,11 @@ exports.Content = Montage.create(Component, { if(control.type !== "color") { currentValue = ElementsMediator.getProperty(el, control.prop, control.valueMutator); - currentValue ? currentValue = currentValue : currentValue = control.defaultValue; - this.customSections[0].content.controls[control.id] = currentValue; + if(currentValue === null) + { + currentValue = control.defaultValue; + } + this.customSections[i].content.controls[control.id] = currentValue; } else { -- cgit v1.2.3