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