+ Use WebGL

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 @@ } } } - +

+ Border:

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() { diff --git a/js/tools/FillTool.js b/js/tools/FillTool.js index 87a093ff..66dd9305 100755 --- a/js/tools/FillTool.js +++ b/js/tools/FillTool.js @@ -72,9 +72,9 @@ exports.FillTool = Montage.create(ModifierToolBase, { value: function(event) { this.isDrawing = true; - if(this._canColor && this.application.ninja.selectedElements.length) - { - var color = this.application.ninja.colorController.colorToolbar.fill, + if(this._canColor && this.application.ninja.selectedElements.length) { + + var color = this.options.fill, colorInfo; if(color && color.color) { @@ -92,5 +92,4 @@ exports.FillTool = Montage.create(ModifierToolBase, { } } } - }); \ No newline at end of file diff --git a/js/tools/InkBottleTool.js b/js/tools/InkBottleTool.js index fd17f4d6..2c03d133 100755 --- a/js/tools/InkBottleTool.js +++ b/js/tools/InkBottleTool.js @@ -69,7 +69,7 @@ exports.InkBottleTool = Montage.create(ModifierToolBase, { if(this._canColor && this.application.ninja.selectedElements.length) { - var color = this.application.ninja.colorController.colorToolbar.stroke, + var color = this.options.stroke, colorInfo; if(color && color.color) { diff --git a/js/tools/PenTool.js b/js/tools/PenTool.js index e70bed27..10eb03c9 100755 --- a/js/tools/PenTool.js +++ b/js/tools/PenTool.js @@ -592,7 +592,7 @@ exports.PenTool = Montage.create(ShapeTool, { var strokeColor = subpath.getStrokeColor(); newCanvas.elementModel.shapeModel.stroke = strokeColor; if(strokeColor) { - newCanvas.elementModel.shapeModel.border = this.application.ninja.colorController.colorToolbar.stroke; + newCanvas.elementModel.shapeModel.border = this.options.stroke; } newCanvas.elementModel.shapeModel.GLGeomObj = subpath; newCanvas.elementModel.shapeModel.useWebGl = false;//this.options.use3D; -- cgit v1.2.3