From ba64dfa1d64969e290f15459a826171468fe3550 Mon Sep 17 00:00:00 2001 From: John Mayhew Date: Thu, 10 May 2012 15:10:58 -0700 Subject: put color chips in the inkbottle and fill tool --- .../fill-properties.reel/fill-properties.html | 9 +++- .../fill-properties.reel/fill-properties.js | 51 ++++++++++++++++++++-- .../ink-bottle-properties.html | 8 +++- .../ink-bottle-properties.js | 48 +++++++++++++++++++- 4 files changed, 110 insertions(+), 6 deletions(-) (limited to 'js/components') diff --git a/js/components/tools-properties/fill-properties.reel/fill-properties.html b/js/components/tools-properties/fill-properties.reel/fill-properties.html index 975b4e6f..734966dc 100755 --- a/js/components/tools-properties/fill-properties.reel/fill-properties.html +++ b/js/components/tools-properties/fill-properties.reel/fill-properties.html @@ -23,18 +23,25 @@ "prototype": "js/components/tools-properties/fill-properties.reel", "properties": { "element": {"#": "fillProperties"}, + + "_fillColorCtrl": {"#": "fillColorCtrl"}, + "_useWebGL": {"#": "useWebGLCH"}, "_materialsContainer": {"#": "materialsContainer"}, "_fillMaterial": {"@": "_fillMaterialCB"} } } } - +
+
+
+
 
+
diff --git a/js/components/tools-properties/fill-properties.reel/fill-properties.js b/js/components/tools-properties/fill-properties.reel/fill-properties.js index 61b667d7..ae136956 100755 --- a/js/components/tools-properties/fill-properties.reel/fill-properties.js +++ b/js/components/tools-properties/fill-properties.reel/fill-properties.js @@ -8,10 +8,55 @@ 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.FillProperties = Montage.create(ToolProperties, { +var FillProperties = exports.FillProperties = Montage.create(ToolProperties, { + + _use3D: { value: false }, + addedColorChips: { value: false }, + + _fill: { + 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] } + }, + + 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(FillProperties).draw.call(this); + + if (this.addedColorChips === false && this.application.ninja.colorController.colorPanelDrawn) { + 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); + + this._fillColorCtrl.addEventListener("change", this.handleFillColorChange.bind(this), false); + + this.addedColorChips = true; + } + + if (this.addedColorChips) { + this._fillColorCtrl.color(this._fill.colorMode, this._fill.color); + } + } + }, + + handleFillColorChange: { + value: function (e) { + this.fill = e._event; + this.fill.webGlColor = this.application.ninja.colorController.colorModel.colorToWebGl(e._event.color); + } + }, - _use3D: { value: false }, - _subPrepare: { value: function() { Object.defineBinding(this._fillMaterial, "items", { diff --git a/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.html b/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.html index f5b1851f..3ac0b261 100755 --- a/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.html +++ b/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.html @@ -136,6 +136,8 @@ "properties": { "element": {"#": "inkBottleProperties"}, + "_strokeColorCtrl": {"#": "strokeColorCtrl"}, + "useBorderWidth": {"@": "borderWidthCh"}, "borderWidthLabel": {"@": "borderWidthLabel"}, "_borderWidth": {"@": "borderWidthHT"}, @@ -154,13 +156,17 @@ } } } - +
+
+
+
 
+
diff --git a/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.js b/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.js index 6d5c46f6..945df857 100755 --- a/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.js +++ b/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.js @@ -8,7 +8,53 @@ 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.InkBottleProperties = Montage.create(ToolProperties, { +var InkBottleProperties = exports.InkBottleProperties = Montage.create(ToolProperties, { + addedColorChips: { value: false }, + + _stroke: { + 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] } + }, + + stroke: { + enumerable: true, + get: function () { + return this._stroke; + }, + set: function (value) { + if (value !== this._stroke) { + this._stroke = value; + } + } + }, + + draw: { + enumerable: false, + value: function () { + Object.getPrototypeOf(InkBottleProperties).draw.call(this); + + if (this.addedColorChips === false && this.application.ninja.colorController.colorPanelDrawn) { + // 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._strokeColorCtrl.addEventListener("change", this.handleStrokeColorChange.bind(this), false); + + this.addedColorChips = true; + } + + if (this.addedColorChips) { + this._strokeColorCtrl.color(this._stroke.colorMode, this._stroke.color); + } + } + }, + + handleStrokeColorChange: { + value: function (e) { + this.stroke = e._event; + this.stroke.webGlColor = this.application.ninja.colorController.colorModel.colorToWebGl(e._event.color); + } + }, _subPrepare: { value: function() { -- cgit v1.2.3