From 1a759361b82127f9d5c1428dc889fffdf2daaf86 Mon Sep 17 00:00:00 2001 From: John Mayhew Date: Thu, 3 May 2012 15:11:56 -0700 Subject: First round of moving color chips into the sub tools. Shape and Pen tool now have chips in the sub tool bar. Still need to complete adding chips to the Brush tool and finalizing the subtool bar layout to our spec for all of the subtools. --- .../shape-properties.reel/shape-properties.js | 125 +++++++++++++++++---- 1 file changed, 104 insertions(+), 21 deletions(-) (limited to 'js/components/tools-properties/shape-properties.reel/shape-properties.js') diff --git a/js/components/tools-properties/shape-properties.reel/shape-properties.js b/js/components/tools-properties/shape-properties.reel/shape-properties.js index 79567453..74875544 100755 --- a/js/components/tools-properties/shape-properties.reel/shape-properties.js +++ b/js/components/tools-properties/shape-properties.reel/shape-properties.js @@ -8,12 +8,75 @@ var Montage = require("montage/core/core").Montage, ShapesController = require("js/controllers/elements/shapes-controller").ShapesController, ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties; -exports.ShapeProperties = Montage.create(ToolProperties, { +var ShapeProperties = exports.ShapeProperties = Montage.create(ToolProperties, { toolsData: { value: null }, - _use3D: { value: false }, + _use3D: { value: false }, + addedColorChips: { value: false }, + + _fill: { + enumerable: false, + 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] } + //this._fillColorCtrl.color('nocolor', null); + }, + + _stroke: { + enumerable: false, + 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] } + }, + + stroke: { + enumerable: true, + get: function () { + return this._stroke; + }, + set: function (value) { + if (value !== this._stroke) { + this._stroke = value; + } + } + }, + + fill: { + enumerable: true, + get: function () { + return this._fill; + }, + set: function (value) { + if (value !== this._fill) { + this._fill = value; + } + } + }, + + draw: { + enumerable: false, + value: function () { + Object.getPrototypeOf(ShapeProperties).draw.call(this); + + if (this.addedColorChips === false && this.application.ninja.colorController.colorPanelDrawn) { + // setup fill color + this._fillColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 }; + this.application.ninja.colorController.addButton("chip", this._fillColorCtrl); + + // setup stroke color + this._strokeColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 }; + this.application.ninja.colorController.addButton("chip", this._strokeColorCtrl); + + this._fillColorCtrl.addEventListener("change", this.handleFillColorChange.bind(this), false); + this._strokeColorCtrl.addEventListener("change", this.handleStrokeColorChange.bind(this), false); + + this.addedColorChips = true; + } + + if (this.addedColorChips) { + this._fillColorCtrl.color(this._fill.colorMode, this._fill.color); + this._strokeColorCtrl.color(this._stroke.colorMode, this._stroke.color); + } + } + }, _subPrepare: { - value: function() { + value: function () { this.rectProperties.visible = true; Object.defineBinding(this._strokeMaterial, "items", { @@ -33,21 +96,32 @@ exports.ShapeProperties = Montage.create(ToolProperties, { } }, - _selectedSubTool: { value: null, enumerable: false}, + _selectedSubTool: { value: null, enumerable: false }, - selectedSubTool : { - get: function() { return this._selectedSubTool;}, - set: function(value) { - if(value) { + selectedSubTool: { + get: function () { return this._selectedSubTool; }, + set: function (value) { + if (value) { - this._selectedSubTool? this[this._selectedSubTool.properties].visible = false : this.rectProperties.visible = false; + this._selectedSubTool ? this[this._selectedSubTool.properties].visible = false : this.rectProperties.visible = false; this._selectedSubTool = value; this[this._selectedSubTool.properties].visible = true; - if(this._useWebGL.checked) - { - if(this._selectedSubTool.id === "LineTool") { + if (this._selectedSubTool.id === "LineTool") { + this._fillColorCtrl.style["display"] = "none"; + this._fillColorCtrl.visible = false; + this._fillColorCtrlIcon.style["display"] = "none"; + this._fillColorCtrlIcon.visible = false; + } else { + this._fillColorCtrl.style["display"] = ""; + this._fillColorCtrl.visible = true; + this._fillColorCtrlIcon.style["display"] = ""; + this._fillColorCtrlIcon.visible = true; + } + + if (this._useWebGL.checked) { + if (this._selectedSubTool.id === "LineTool") { this._fillIcon.style["display"] = "none"; this._fillMaterial.visible = false; } else { @@ -55,27 +129,23 @@ exports.ShapeProperties = Montage.create(ToolProperties, { this._fillMaterial.visible = true; } } - } } }, handleChange: { - value: function(event) { - if(this._useWebGL.checked) - { + value: function (event) { + if (this._useWebGL.checked) { this._use3D = true; this._materialLabel.style["display"] = ""; this._strokeIcon.style["display"] = ""; this._strokeMaterial.visible = true; - if(this.selectedSubTool.id !== "LineTool") - { + if (this.selectedSubTool.id !== "LineTool") { this._fillIcon.style["display"] = ""; this._fillMaterial.visible = true; } } - else - { + else { this._use3D = false; this._materialLabel.style["display"] = "none"; this._strokeIcon.style["display"] = "none"; @@ -84,6 +154,19 @@ exports.ShapeProperties = Montage.create(ToolProperties, { this._fillMaterial.visible = false; } } - } + }, + handleFillColorChange: { + value: function (e) { + this.fill = e._event; + this.fill.webGlColor = this.application.ninja.colorController.colorModel.colorToWebGl(e._event.color); + } + }, + + handleStrokeColorChange: { + value: function (e) { + this.stroke = e._event; + this.stroke.webGlColor = this.application.ninja.colorController.colorModel.colorToWebGl(e._event.color); + } + } }); -- cgit v1.2.3 From 18370abcf406c6ab36d5c5f2613cb79e756ff6d2 Mon Sep 17 00:00:00 2001 From: John Mayhew Date: Wed, 9 May 2012 18:07:32 -0700 Subject: -Consolidated many redundant css classes used in the tool options bars --- js/components/tools-properties/shape-properties.reel/shape-properties.js | 1 - 1 file changed, 1 deletion(-) (limited to 'js/components/tools-properties/shape-properties.reel/shape-properties.js') diff --git a/js/components/tools-properties/shape-properties.reel/shape-properties.js b/js/components/tools-properties/shape-properties.reel/shape-properties.js index 74875544..23158493 100755 --- a/js/components/tools-properties/shape-properties.reel/shape-properties.js +++ b/js/components/tools-properties/shape-properties.reel/shape-properties.js @@ -16,7 +16,6 @@ var ShapeProperties = exports.ShapeProperties = Montage.create(ToolProperties, { _fill: { enumerable: false, 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] } - //this._fillColorCtrl.color('nocolor', null); }, _stroke: { -- cgit v1.2.3 From 3be15e2076f2d3d46862bbc0ea078b9bf2e161fe Mon Sep 17 00:00:00 2001 From: John Mayhew Date: Thu, 10 May 2012 11:17:42 -0700 Subject: -moved sel tool images to proper folder -finished styling shape tool options -added new icons for shape tool --- .../tools-properties/shape-properties.reel/shape-properties.js | 2 ++ 1 file changed, 2 insertions(+) (limited to 'js/components/tools-properties/shape-properties.reel/shape-properties.js') diff --git a/js/components/tools-properties/shape-properties.reel/shape-properties.js b/js/components/tools-properties/shape-properties.reel/shape-properties.js index 23158493..bd0cf8cf 100755 --- a/js/components/tools-properties/shape-properties.reel/shape-properties.js +++ b/js/components/tools-properties/shape-properties.reel/shape-properties.js @@ -112,11 +112,13 @@ var ShapeProperties = exports.ShapeProperties = Montage.create(ToolProperties, { this._fillColorCtrl.visible = false; this._fillColorCtrlIcon.style["display"] = "none"; this._fillColorCtrlIcon.visible = false; + this.endDivider.style["display"] = "none"; } else { this._fillColorCtrl.style["display"] = ""; this._fillColorCtrl.visible = true; this._fillColorCtrlIcon.style["display"] = ""; this._fillColorCtrlIcon.visible = true; + this.endDivider.style["display"] = ""; } if (this._useWebGL.checked) { -- cgit v1.2.3