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 +++++++++++++++++-------- 2 files changed, 96 insertions(+), 47 deletions(-) (limited to 'js/controllers') 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); } } }, -- cgit v1.2.3