From 945fac7b1593260757b6f2864810ca9916d7d698 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Tue, 5 Jun 2012 11:36:03 -0700 Subject: Updated ink bottle tool to support color-chip's checkbox and undo/redo for strokes/borders. Signed-off-by: Nivesh Rajbhandari --- js/controllers/elements/element-controller.js | 74 ++++++++++++++++++--------- js/controllers/elements/shapes-controller.js | 69 +++++++++++++++++-------- js/mediators/element-mediator.js | 61 ++++------------------ js/tools/InkBottleTool.js | 49 ++++++++++-------- 4 files changed, 135 insertions(+), 118 deletions(-) (limited to 'js') diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js index fd4d3c12..941e05ba 100755 --- a/js/controllers/elements/element-controller.js +++ b/js/controllers/elements/element-controller.js @@ -5,7 +5,8 @@ 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; + Component = require("montage/ui/component").Component, + njModule = require("js/lib/NJUtils"); exports.ElementController = Montage.create(Component, { @@ -162,28 +163,12 @@ exports.ElementController = Montage.create(Component, { el.elementModel.stroke = null; return; case 'gradient': - if(color.borderInfo) { - if(color.borderInfo.borderWidth) { - this.setProperty(el, "border-width", color.borderInfo.borderWidth + color.borderInfo.borderUnits); - } - if(color.borderInfo.borderStyle) { - this.setProperty(el, "border-style", color.borderInfo.borderStyle); - } - } this.setGradientBorder(el, color.color.gradientMode, color.color.css); break; default: this.setProperty(el, "border-image", "none"); this.setProperty(el, "border-image-slice", ""); this.setProperty(el, "border-color", color.color.css); - if(color.borderInfo) { - if(color.borderInfo.borderWidth) { - this.setProperty(el, "border-width", color.borderInfo.borderWidth + color.borderInfo.borderUnits); - } - if(color.borderInfo.borderStyle) { - this.setProperty(el, "border-style", color.borderInfo.borderStyle); - } - } } } el.elementModel.stroke = color; @@ -211,17 +196,54 @@ exports.ElementController = Montage.create(Component, { }, getStroke: { - value: function(el) { - // TODO - Need to figure out which border side user wants - return this.application.ninja.stylesController.getElementStyle(el, "border"); + value: function(el, stroke) { + var strokeInfo = {}, + color, + borderWidth, + border; + if(stroke.colorInfo) { + strokeInfo.colorInfo = {}; + color = this.getColor(el, false); + if(color && color.color) { + strokeInfo.colorInfo.mode = color.mode; + strokeInfo.colorInfo.color = color.color; + } else { + strokeInfo.colorInfo.mode = "nocolor"; + strokeInfo.colorInfo.color = null; + } + } + if(stroke.borderInfo) { + // TODO - Need to figure out which border side user wants + strokeInfo.borderInfo = {}; + if(stroke.borderInfo.borderWidth) { + borderWidth = this.getProperty(el, "border-width"); + if(borderWidth) { + border = njModule.NJUtils.getValueAndUnits(borderWidth); + strokeInfo.borderInfo.borderWidth = border[0]; + strokeInfo.borderInfo.borderUnits = border[1]; + } + } + if(stroke.borderInfo.borderStyle) { + strokeInfo.borderInfo.borderStyle = this.getProperty(el, "border-style"); + } + } + return strokeInfo; } }, setStroke: { value: function(el, stroke) { - this.application.ninja.stylesController.setElementStyle(el, "border-width", stroke.borderWidth + stroke.borderUnits); - this.application.ninja.stylesController.setElementStyle(el, "border-style", stroke.borderStyle); - this.setColor(el, stroke.color, false); + if(stroke.borderInfo) { + if(stroke.borderInfo.borderWidth) { + this.application.ninja.stylesController.setElementStyle(el, "border-width", stroke.borderInfo.borderWidth + stroke.borderInfo.borderUnits); + } + if(stroke.borderInfo.borderStyle) { + this.application.ninja.stylesController.setElementStyle(el, "border-style", stroke.borderInfo.borderStyle); + } + } + if(stroke.colorInfo) { + this.setColor(el, stroke.colorInfo, false); + } } }, @@ -245,8 +267,10 @@ exports.ElementController = Montage.create(Component, { }, setFill: { - value: function(el, fill, eventType, source) { - this.setColor(el, fill.colorInfo, true); + value: function(el, fill) { + if(fill.colorInfo) { + this.setColor(el, fill.colorInfo, true); + } } }, //-------------------------------------------------------------------------------------------------------- diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js index f19aaffb..845e7dc2 100755 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js @@ -551,12 +551,6 @@ exports.ShapesController = Montage.create(CanvasController, { el.elementModel.shapeModel.GLGeomObj.setStrokeColor(webGl); } } - - // Support for ink-bottle tool - if(color.strokeInfo) - { - this.setProperty(el, "strokeSize", color.strokeInfo.strokeSize + " " + color.strokeInfo.strokeUnits); - } } el.elementModel.shapeModel.GLWorld.render(); this.application.ninja.currentDocument.model.needsSave = true; @@ -564,23 +558,54 @@ exports.ShapesController = Montage.create(CanvasController, { }, getStroke: { - value: function(el) { - // TODO - Need to figure out which border side user wants - var size = this.getShapeProperty(el, "strokeSize"); - var color = this.getShapeProperty(el, "stroke"); - return {stroke:color, strokeSize:size}; + value: function(el, stroke) { + var strokeInfo = {}, + color, + strokeWidth, + strokeSize; + if(stroke.colorInfo) { + strokeInfo.colorInfo = {}; + color = this.getColor(el, false); + if(color && color.color) { + strokeInfo.colorInfo.mode = color.mode; + strokeInfo.colorInfo.color = color.color; + } else { + strokeInfo.colorInfo.mode = "nocolor"; + strokeInfo.colorInfo.color = null; + } + } + if(stroke.shapeInfo) { + strokeInfo.shapeInfo = {}; + strokeWidth = this.getProperty(el, "strokeSize"); + if(strokeWidth) { + strokeSize = njModule.NJUtils.getValueAndUnits(strokeWidth); + strokeInfo.shapeInfo.strokeSize = strokeSize[0]; + strokeInfo.shapeInfo.strokeUnits = strokeSize[1]; + } + } + if(stroke.webGLInfo) { + strokeInfo.webGLInfo = {}; + if(this.getShapeProperty(el, "useWebGl")) { + strokeInfo.webGLInfo.material = this.getProperty(el, "strokeMaterial"); + } else { + strokeInfo.webGLInfo.material = null; + } + } + return strokeInfo; } }, setStroke: { - value: function(el, stroke) { - el.elementModel.shapeModel.GLGeomObj.setStrokeColor(stroke.color.webGlColor); - var strokeWidth = this.GetValueInPixels(stroke.strokeSize, stroke.strokeUnits); - el.elementModel.shapeModel.GLGeomObj.setStrokeWidth(strokeWidth); - this.setShapeProperty(el, "stroke", stroke.color.webGlColor); - this.setShapeProperty(el, "strokeSize", stroke.strokeSize + " " + stroke.strokeUnits); - el.elementModel.shapeModel.GLGeomObj.buildBuffers(); - el.elementModel.shapeModel.GLWorld.render(); + value: function(el, stroke, eventType, source) { + if(stroke.colorInfo) { + this.setColor(el, stroke.colorInfo, false); + } + if(stroke.shapeInfo) { + this.setProperty(el, "strokeSize", stroke.shapeInfo.strokeSize + " " + stroke.shapeInfo.strokeUnits, eventType, source); + } + if(stroke.webGLInfo) { + this.setProperty(el, "strokeMaterial", stroke.webGLInfo.material); + } } }, @@ -602,7 +627,7 @@ exports.ShapesController = Montage.create(CanvasController, { if(fill.webGLInfo) { fillInfo.webGLInfo = {}; if(this.getShapeProperty(el, "useWebGl")) { - fillInfo.webGLInfo.material = this.getProperty("fillMaterial"); + fillInfo.webGLInfo.material = this.getProperty(el, "fillMaterial"); } else { fillInfo.webGLInfo.material = null; } @@ -612,12 +637,12 @@ exports.ShapesController = Montage.create(CanvasController, { }, setFill: { - value: function(el, fill, eventType, source) { + value: function(el, fill) { if(fill.colorInfo) { this.setColor(el, fill.colorInfo, true); } if(fill.webGLInfo) { - this.setProperty(el, "fillMaterial", fill.webGLInfo.material, eventType, source); + this.setProperty(el, "fillMaterial", fill.webGLInfo.material); } } }, diff --git a/js/mediators/element-mediator.js b/js/mediators/element-mediator.js index 7244b58e..da8cbb76 100755 --- a/js/mediators/element-mediator.js +++ b/js/mediators/element-mediator.js @@ -373,17 +373,13 @@ exports.ElementMediator = Montage.create(Component, { }, getStroke: { - value: function(el) { - if(!el.elementModel) { - NJUtils.makeElementModel(el, "Div", "block"); - } - return el.elementModel.controller["getStroke"](el); + value: function(el, strokeProperties) { + return el.elementModel.controller["getStroke"](el, strokeProperties); } }, - /** - Set a property change command for an element or array of elements + Set stroke/border properties on an element or array of elements @param els: Array of elements. Can contain 1 or more elements @param value: Value to be set. This is the stroke info @param eventType: Change/Changing. Will be passed to the dispatched event @@ -393,54 +389,20 @@ exports.ElementMediator = Montage.create(Component, { setStroke: { value: function(els, value, eventType, source, currentValue) { - if(eventType === "Changing") { - this._setStroke(els, value, isFill, eventType, source); - } else { + if(eventType !== "Changing") { // Calculate currentValue if not found for each element if(!currentValue) { - var that = this; + var that = this, + val = value; currentValue = els.map(function(item) { - return that.getStroke(item); + return that.getStroke(item, val); }); } - - var command = Montage.create(Command, { - _els: { value: els }, - _value: { value: value }, - _previous: { value: currentValue }, - _eventType: { value: eventType}, - _source: { value: "undo-redo"}, - description: { value: "Set Color"}, - receiver: { value: this}, - - execute: { - value: function(senderObject) { - if(senderObject) this._source = senderObject; - this.receiver._setStroke(this._els, this._value, this._eventType, this._source); - this._source = "undo-redo"; - return ""; - } - }, - - unexecute: { - value: function() { - this.receiver._setStroke(this._els, this._previous, this._eventType, this._source); - return ""; - } - } - }); - - NJevent("sendToUndo", command); - command.execute(source); + document.application.undoManager.add("Set stroke", this.setStroke, this, els, currentValue, eventType, source, value); } - } - }, - - _setStroke: { - value: function(els, value, eventType, source) { for(var i=0, item; item = els[i]; i++) { - item.elementModel.controller["setStroke"](item, value); + item.elementModel.controller["setStroke"](item, (value[i] || value), eventType, source); } NJevent("element" + eventType, {type : "setStroke", source: source, data: {"els": els, "prop": "stroke", "value": value}, redraw: null}); @@ -453,9 +415,8 @@ exports.ElementMediator = Montage.create(Component, { } }, - /** - Set a property change command for an element or array of elements + Set fill/background properties for an element or array of elements @param els: Array of elements. Can contain 1 or more elements @param value: Value to be set. This is the fill info @param eventType: Change/Changing. Will be passed to the dispatched event @@ -478,7 +439,7 @@ exports.ElementMediator = Montage.create(Component, { } for(var i=0, item; item = els[i]; i++) { - item.elementModel.controller["setFill"](item, (value[i] || value), eventType, source); + item.elementModel.controller["setFill"](item, (value[i] || value)); } NJevent("element" + eventType, {type : "setFill", source: source, data: {"els": els, "prop": "fill", "value": value}, redraw: null}); diff --git a/js/tools/InkBottleTool.js b/js/tools/InkBottleTool.js index bb5d3ae2..dff0b0fa 100755 --- a/js/tools/InkBottleTool.js +++ b/js/tools/InkBottleTool.js @@ -69,39 +69,46 @@ exports.InkBottleTool = Montage.create(ModifierToolBase, { if(this._canColor && this.application.ninja.selectedElements.length) { - var color = this.options.stroke, - colorInfo; - if(color && color.color) - { - colorInfo = { mode:color.colorMode, - color:color.color - }; - } - else - { - colorInfo = { mode:"nocolor", - color:color.color - }; + var strokeInfo = {}, + color; + if(this.options.useStrokeColor.checked) { + strokeInfo.colorInfo = {}; + color = this.options.stroke; + if(color && color.color) + { + strokeInfo.colorInfo.mode = color.colorMode; + strokeInfo.colorInfo.color = color.color; + } else { + strokeInfo.colorInfo.mode = "nocolor"; + strokeInfo.colorInfo.color = null; + } } if(this.options.useBorderWidth.checked || this.options.useBorderStyle.checked) { - colorInfo.borderInfo = {}; + strokeInfo.borderInfo = {}; if(this.options.useBorderWidth.checked) { - colorInfo.borderInfo.borderWidth = this.options.borderWidth.value; - colorInfo.borderInfo.borderUnits = this.options.borderWidth.units; + strokeInfo.borderInfo.borderWidth = this.options.borderWidth.value; + strokeInfo.borderInfo.borderUnits = this.options.borderWidth.units; } if(this.options.useBorderStyle.checked) { - colorInfo.borderInfo.borderStyle = this.options.borderStyle.value; + strokeInfo.borderInfo.borderStyle = this.options.borderStyle.value; } } if(this.options.useStrokeSize.checked) { - colorInfo.strokeInfo = {}; - colorInfo.strokeInfo.strokeSize = this.options.strokeSize.value; - colorInfo.strokeInfo.strokeUnits = this.options.strokeSize.units; + strokeInfo.shapeInfo = {}; + strokeInfo.shapeInfo.strokeSize = this.options.strokeSize.value; + strokeInfo.shapeInfo.strokeUnits = this.options.strokeSize.units; + } + + if(this.options.useWebGL.checked) { + strokeInfo.webGLInfo = {}; + strokeInfo.webGLInfo.material = this.options.strokeMaterial.value; } - ElementsMediator.setColor(this.application.ninja.selectedElements, colorInfo, false, "Change", "inkBottleTool"); + if(strokeInfo.colorInfo || strokeInfo.borderInfo || strokeInfo.shapeInfo || strokeInfo.webGLInfo) { + ElementsMediator.setStroke(this.application.ninja.selectedElements, strokeInfo, "Change", "inkBottleTool"); + } } } } -- cgit v1.2.3