From 60692e2e429d3265113c89fc53ed80ccd6bbcc2e Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Tue, 26 Jun 2012 09:18:36 -0700 Subject: Tag tool pre-flight should support gradients. Signed-off-by: Nivesh Rajbhandari --- js/tools/TagTool.js | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) (limited to 'js/tools') diff --git a/js/tools/TagTool.js b/js/tools/TagTool.js index fac6798f..31918f92 100755 --- a/js/tools/TagTool.js +++ b/js/tools/TagTool.js @@ -81,7 +81,7 @@ exports.TagTool = Montage.create(DrawingTool, { // TODO: Add position support insertElement: { value: function(drawData) { - var element, styles; + var element, styles, color; // Create the element if(this.options.selectedElement === "custom") { @@ -95,8 +95,15 @@ exports.TagTool = Montage.create(DrawingTool, { styles = document.application.njUtils.stylesFromDraw(element, ~~drawData.width, ~~drawData.height, drawData); // Add color - if(this.options.getProperty("fill.colorMode") !== "nocolor") { - styles['background-color'] = this.options.getProperty("fill.color.css"); + color = this.options.fill; + switch(color.colorMode) { + case "nocolor": + break; + case "gradient": + styles['background-image'] = color.color.css; + break; + default: + styles['background-color'] = color.color.css; } // Add the element and styles -- cgit v1.2.3 From 2f0a29c2cc9fd399e392abfd6770caffb99fdbb5 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Tue, 26 Jun 2012 10:41:20 -0700 Subject: Support pre-flighting of gradients for shape tools - rect, line, oval, brush and pen. Note that WebGL shapes are not supported yet. Signed-off-by: Nivesh Rajbhandari --- js/tools/BrushTool.js | 15 +++++++++------ js/tools/LineTool.js | 3 +++ js/tools/OvalTool.js | 3 +++ js/tools/PenTool.js | 32 +++++++++++++++++++------------- js/tools/RectTool.js | 3 +++ js/tools/ShapeTool.js | 26 +++++++++++++++++++++++++- 6 files changed, 62 insertions(+), 20 deletions(-) (limited to 'js/tools') diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js index 5d983a93..85a9e963 100644 --- a/js/tools/BrushTool.js +++ b/js/tools/BrushTool.js @@ -131,14 +131,17 @@ exports.BrushTool = Montage.create(ShapeTool, { //start a new brush stroke if (this._selectedBrushStroke === null){ this._selectedBrushStroke = new BrushStroke(); - var colorArray=[0,0,0,0]; - var color = this.options.fill.color; - if (color){ - colorArray = [color.r/255, color.g/255, color.b/255, color.a]; + var colorObj; + var fill = this.options.fill; + var color = fill.color; + if(fill.colorMode === "gradient") { + colorObj = {gradientMode:fill.color.gradientMode, color:fill.color.stops}; + } else if (color) { + colorObj = [color.r/255, color.g/255, color.b/255, color.a]; } else { - colorArray = [1,1,1,0]; + colorObj = [1,1,1,0]; } - this._selectedBrushStroke.setFillColor(colorArray); + this._selectedBrushStroke.setFillColor(colorObj); //add this point to the brush stroke in case the user does a mouse up before doing a mouse move var currMousePos = hitRec.calculateStageWorldPoint(); diff --git a/js/tools/LineTool.js b/js/tools/LineTool.js index 07429bc0..fde09959 100755 --- a/js/tools/LineTool.js +++ b/js/tools/LineTool.js @@ -270,6 +270,9 @@ exports.LineTool = Montage.create(ShapeTool, { // TODO - update the shape's info only. shapeModel will likely need an array of shapes. } + // TODO - This needs to be moved into geom obj's init routine instead of here + this.setColor(this.options.stroke, null, canvas, "lineTool"); + if(canvas.elementModel.isShape) { this.application.ninja.selectionController.selectElement(canvas); diff --git a/js/tools/OvalTool.js b/js/tools/OvalTool.js index ce812398..33bf763d 100755 --- a/js/tools/OvalTool.js +++ b/js/tools/OvalTool.js @@ -94,6 +94,9 @@ exports.OvalTool = Montage.create(ShapeTool, { // TODO - update the shape's info only. shapeModel will likely need an array of shapes. } + // TODO - This needs to be moved into geom obj's init routine instead of here + this.setColor(this.options.stroke, this.options.fill, canvas, "ovalTool"); + if(canvas.elementModel.isShape) { this.application.ninja.selectionController.selectElement(canvas); diff --git a/js/tools/PenTool.js b/js/tools/PenTool.js index 2cffb44d..1097f28c 100755 --- a/js/tools/PenTool.js +++ b/js/tools/PenTool.js @@ -338,22 +338,28 @@ exports.PenTool = Montage.create(ShapeTool, { } this._selectedSubpath.setStrokeWidth(strokeSize); - var colorArray=[]; - var color = this.options.stroke.color; - if (color){ - colorArray = [color.r/255, color.g/255, color.b/255, color.a]; - }else { - colorArray = [1,1,1,0]; + var colorObj; + var stroke = this.options.stroke; + var color = stroke.color; + if(stroke.colorMode === "gradient") { + colorObj = {gradientMode:stroke.color.gradientMode, color:stroke.color.stops}; + } else if (color) { + colorObj = [color.r/255, color.g/255, color.b/255, color.a]; + } else { + colorObj = [1,1,1,0]; } - this._selectedSubpath.setStrokeColor(colorArray); - - color = this.options.fill.color; - if (color){ - colorArray = [color.r/255, color.g/255, color.b/255, color.a]; + this._selectedSubpath.setStrokeColor(colorObj); + + var fill = this.options.fill; + color = fill.color; + if(fill.colorMode === "gradient") { + colorObj = {gradientMode:fill.color.gradientMode, color:fill.color.stops}; + } else if (color) { + colorObj = [color.r/255, color.g/255, color.b/255, color.a]; } else { - colorArray = [1,1,1,0]; + colorObj = [1,1,1,0]; } - this._selectedSubpath.setFillColor(colorArray); + this._selectedSubpath.setFillColor(colorObj); } //if the selectedSubpath was null and needed to be constructed //build the current mouse position in stage world space in case we don't already have a canvas diff --git a/js/tools/RectTool.js b/js/tools/RectTool.js index b35a101a..df049395 100755 --- a/js/tools/RectTool.js +++ b/js/tools/RectTool.js @@ -117,6 +117,9 @@ exports.RectTool = Montage.create(ShapeTool, { // TODO - update the shape's info only. shapeModel will likely need an array of shapes. } + // TODO - This needs to be moved into geom obj's init routine instead of here + this.setColor(this.options.stroke, this.options.fill, canvas, "rectTool"); + if(canvas.elementModel.isShape) { this.application.ninja.selectionController.selectElement(canvas); diff --git a/js/tools/ShapeTool.js b/js/tools/ShapeTool.js index 8d381711..6ff61546 100755 --- a/js/tools/ShapeTool.js +++ b/js/tools/ShapeTool.js @@ -209,7 +209,31 @@ exports.ShapeTool = Montage.create(DrawingTool, { return target; } - } + }, + + // We can draw on an existing canvas unless it has only a single shape object + setColor: { + value: function(stroke, fill, canvas, toolId) + { + if(stroke && stroke.color) + { + this.application.ninja.elementMediator.setColor([canvas], {mode:stroke.colorMode, color:stroke.color}, false, "Change", toolId); + } + else + { + this.application.ninja.elementMediator.setColor([canvas], {mode:"nocolor", color:null}, false, "Change", toolId); + } + + if(fill && fill.color) + { + this.application.ninja.elementMediator.setColor([canvas], {mode:fill.colorMode, color:fill.color}, true, "Change", toolId); + } + else + { + this.application.ninja.elementMediator.setColor([canvas], {mode:"nocolor", color:null}, true, "Change", toolId); + } + } + } }); -- cgit v1.2.3 From ec6759f9821a5647905617e3992fdda1cea390ef Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Tue, 26 Jun 2012 17:17:43 -0700 Subject: Binding View - Hide in Live Preview Signed-off-by: Armen Kesablyan --- js/tools/bindingTool.js | 2 ++ 1 file changed, 2 insertions(+) (limited to 'js/tools') diff --git a/js/tools/bindingTool.js b/js/tools/bindingTool.js index 1e1c9e5b..3f8e960f 100644 --- a/js/tools/bindingTool.js +++ b/js/tools/bindingTool.js @@ -33,6 +33,7 @@ exports.BindingTool = Montage.create(ModifierToolBase, { { NJevent("enableStageMove"); this.application.ninja.workspaceMode = "binding"; + this.application.ninja.stage.bindingView.hide = false; if (this.application.ninja.selectedElements.length !== 0 ) { if(typeof(this.application.ninja.selectedElements[0].controller) !== "undefined") { this.selectedComponent = this.application.ninja.selectedElements[0].controller; @@ -47,6 +48,7 @@ exports.BindingTool = Montage.create(ModifierToolBase, { NJevent("disableStageMove"); this.application.ninja.workspaceMode = "default"; this.selectedComponent = null; + this.application.ninja.stage.bindingView.hide = true; } } -- cgit v1.2.3 From 9add37d85a9d90541daae8ad5316388c4d9a9da4 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Thu, 28 Jun 2012 13:21:11 -0700 Subject: Binding View - Bug fix After save corrupts doom and breaks binding view Signed-off-by: Armen Kesablyan --- js/tools/bindingTool.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) (limited to 'js/tools') diff --git a/js/tools/bindingTool.js b/js/tools/bindingTool.js index 3f8e960f..3704a451 100644 --- a/js/tools/bindingTool.js +++ b/js/tools/bindingTool.js @@ -12,17 +12,17 @@ SelectionTool = require("js/tools/SelectionTool").SelectionTool; exports.BindingTool = Montage.create(ModifierToolBase, { drawingFeedback: { value: { mode: "Draw2D", type: "" } }, - _selectedComponent: { + _selectedElement: { value: null }, - selectedComponent: { + selectedElement: { get:function() { - return this._selectedComponent; + return this._selectedElement; }, set: function(val) { - this._selectedComponent = val; - this.application.ninja.stage.bindingView.selectedComponent = val; + this._selectedElement = val; + this.application.ninja.stage.bindingView.selectedElement = val; } }, @@ -36,7 +36,7 @@ exports.BindingTool = Montage.create(ModifierToolBase, { this.application.ninja.stage.bindingView.hide = false; if (this.application.ninja.selectedElements.length !== 0 ) { if(typeof(this.application.ninja.selectedElements[0].controller) !== "undefined") { - this.selectedComponent = this.application.ninja.selectedElements[0].controller; + this.selectedElement = this.application.ninja.selectedElements[0]; } else { this.selectedComponent = null; } @@ -87,12 +87,12 @@ exports.BindingTool = Montage.create(ModifierToolBase, { this.doSelection(event); if (this.application.ninja.selectedElements.length !== 0 ) { if(this.application.ninja.selectedElements[0].controller) { - this.selectedComponent = this.application.ninja.selectedElements[0].controller; + this.selectedElement = this.application.ninja.selectedElements[0]; } else { - this.selectedComponent = null; + this.selectedElement = null; } } else { - this.selectedComponent = null; + this.selectedElement = null; } this._isDrawing = false; } -- cgit v1.2.3 From e3eb68c3a0b911acd873ee6211931b8f4e620030 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Thu, 28 Jun 2012 17:54:15 -0700 Subject: Fixed not being able to draw linear and radial gradients. Also fixed IKNINJA-1721 - File dirty marker does not show when modifying elements and IKNinja-1581 and IKNinja-1758 - Paint bucket fill bugs with lines and brush objects. Squashed commit of the following: commit 7cad082c89911d34a99feeef8e91d22b89cae8f1 Author: Nivesh Rajbhandari Date: Thu Jun 28 17:52:07 2012 -0700 Fix for not being able to draw linear and radial gradient materials. I'm turning off pre-flight support of gradients for WebGL since it conflicts with the materials' color support. Signed-off-by: Nivesh Rajbhandari commit d0df8a2bff052d855bafb7885792b1dfff8eab7d Merge: 2c67d26 b4b54f6 Author: Nivesh Rajbhandari Date: Thu Jun 28 17:50:11 2012 -0700 Merge branch 'refs/heads/ninja-internal' into ToolFixes commit 2c67d264851f0897fdca8ca887c1c82d0e434217 Author: Nivesh Rajbhandari Date: Thu Jun 28 15:06:13 2012 -0700 IKNINJA-1721 - File dirty marker does not show when modifying elements. Signed-off-by: Nivesh Rajbhandari commit bb4b6a52eb75efb2f435cdb53f810ae3bc1f1fc3 Author: Nivesh Rajbhandari Date: Thu Jun 28 11:15:34 2012 -0700 IKNinja-1581 and IKNinja-1758 - Paint bucket fill bugs with lines and brush objects. Signed-off-by: Nivesh Rajbhandari Signed-off-by: Nivesh Rajbhandari --- js/tools/FillTool.js | 5 +++-- js/tools/LineTool.js | 21 +++++++++++++++------ js/tools/OvalTool.js | 18 ++++++++++++------ js/tools/RectTool.js | 20 ++++++++++++-------- js/tools/ShapeTool.js | 18 ++++-------------- 5 files changed, 46 insertions(+), 36 deletions(-) (limited to 'js/tools') diff --git a/js/tools/FillTool.js b/js/tools/FillTool.js index e08ec1da..72e03379 100755 --- a/js/tools/FillTool.js +++ b/js/tools/FillTool.js @@ -12,7 +12,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot var Montage = require("montage/core/core").Montage, ModifierToolBase = require("js/tools/modifier-tool-base").ModifierToolBase, - ElementsMediator = require("js/mediators/element-mediator").ElementMediator; + ElementsMediator = require("js/mediators/element-mediator").ElementMediator, + ShapesController = require("js/controllers/elements/shapes-controller").ShapesController; exports.FillTool = Montage.create(ModifierToolBase, { _canSnap: { value: false }, @@ -28,7 +29,7 @@ exports.FillTool = Montage.create(ModifierToolBase, { if (obj) { var name = obj.nodeName; - if ((name !== 'CANVAS') && (name !== 'DIV')) + if ( ((name !== 'CANVAS') && (name !== 'DIV')) || (ShapesController.isElementAShape(obj) && !obj.elementModel.shapeModel.GLGeomObj.canFill)) { cursor = "url('images/cursors/nofill.png') 14 14, default"; canColor = false; diff --git a/js/tools/LineTool.js b/js/tools/LineTool.js index fde09959..413c0302 100755 --- a/js/tools/LineTool.js +++ b/js/tools/LineTool.js @@ -44,10 +44,16 @@ exports.LineTool = Montage.create(ShapeTool, { } this._strokeSize = ShapesController.GetValueInPixels(this.options.strokeSize.value, this.options.strokeSize.units, null); - if (this.options.stroke.color) - this._strokeColor = this.options.stroke.color.css; - else - this._strokeColor = [0,0,0,1]; + if (this.options.stroke.color) { + if( (this.options.stroke.colorMode === "gradient") || (this.options.stroke.colorMode === "nocolor") ) { + this._strokeColor = [0,0,0,1]; + } else { + this._strokeColor = this.options.stroke.color.css; + } + } else { + this._strokeColor = [0,0,0,1]; + } + this.startDraw(event); } }, @@ -229,10 +235,11 @@ exports.LineTool = Montage.create(ShapeTool, { var strokeColor = this.options.stroke.webGlColor; // for default stroke and fill/no materials var strokeMaterial = null; + var strokeM = null; if(this.options.use3D) { - var strokeM = this.options.strokeMaterial; + strokeM = this.options.strokeMaterial; if(strokeM) { strokeMaterial = Object.create(MaterialsModel.getMaterial(strokeM)); @@ -271,7 +278,9 @@ exports.LineTool = Montage.create(ShapeTool, { } // TODO - This needs to be moved into geom obj's init routine instead of here - this.setColor(this.options.stroke, null, canvas, "lineTool"); + if(!strokeM) { + this.setColor(canvas, this.options.stroke, false, "lineTool"); + } if(canvas.elementModel.isShape) { diff --git a/js/tools/OvalTool.js b/js/tools/OvalTool.js index 33bf763d..e798d1a7 100755 --- a/js/tools/OvalTool.js +++ b/js/tools/OvalTool.js @@ -39,23 +39,24 @@ exports.OvalTool = Montage.create(ShapeTool, { var innerRadius = this.options.innerRadius.value / 100; - var strokeColor = this.options.stroke.webGlColor; - var fillColor = this.options.fill.webGlColor; - + var strokeColor = this.options.stroke.webGlColor || [0,0,0,1]; + var fillColor = this.options.fill.webGlColor || [1,1,1,1]; // for default stroke and fill/no materials var strokeMaterial = null; var fillMaterial = null; + var fillM = null; + var strokeM = null; if(this.options.use3D) { - var strokeM = this.options.strokeMaterial; + strokeM = this.options.strokeMaterial; if(strokeM) { strokeMaterial = Object.create(MaterialsModel.getMaterial(strokeM)); } strokeColor = ShapesController.getMaterialColor(strokeM) || strokeColor; - var fillM = this.options.fillMaterial; + fillM = this.options.fillMaterial; if(fillM) { fillMaterial = Object.create(MaterialsModel.getMaterial(fillM)); @@ -95,7 +96,12 @@ exports.OvalTool = Montage.create(ShapeTool, { } // TODO - This needs to be moved into geom obj's init routine instead of here - this.setColor(this.options.stroke, this.options.fill, canvas, "ovalTool"); + if(!fillM) { + this.setColor(canvas, this.options.fill, true, "ovalTool"); + } + if(!strokeM) { + this.setColor(canvas, this.options.stroke, false, "ovalTool"); + } if(canvas.elementModel.isShape) { diff --git a/js/tools/RectTool.js b/js/tools/RectTool.js index df049395..6f0e65c7 100755 --- a/js/tools/RectTool.js +++ b/js/tools/RectTool.js @@ -59,22 +59,24 @@ exports.RectTool = Montage.create(ShapeTool, { var blRadius = ShapesController.GetValueInPixels(this.options.BLRadiusControl.value, this.options.BLRadiusControl.units, h); var brRadius = ShapesController.GetValueInPixels(this.options.BRRadiusControl.value, this.options.BRRadiusControl.units, h); - var strokeColor = this.options.stroke.webGlColor; - var fillColor = this.options.fill.webGlColor; + var strokeColor = this.options.stroke.webGlColor || [0,0,0,1]; + var fillColor = this.options.fill.webGlColor || [1,1,1,1]; // for default stroke and fill/no materials var strokeMaterial = null; var fillMaterial = null; + var fillM = null; + var strokeM = null; if(this.options.use3D) { - var strokeM = this.options.strokeMaterial; + strokeM = this.options.strokeMaterial; if(strokeM) { strokeMaterial = Object.create(MaterialsModel.getMaterial(strokeM)); } strokeColor = ShapesController.getMaterialColor(strokeM) || strokeColor; - var fillM = this.options.fillMaterial; + fillM = this.options.fillMaterial; if(fillM) { fillMaterial = Object.create(MaterialsModel.getMaterial(fillM)); @@ -118,14 +120,16 @@ exports.RectTool = Montage.create(ShapeTool, { } // TODO - This needs to be moved into geom obj's init routine instead of here - this.setColor(this.options.stroke, this.options.fill, canvas, "rectTool"); - + if(!fillM) { + this.setColor(canvas, this.options.fill, true, "rectTool"); + } + if(!strokeM) { + this.setColor(canvas, this.options.stroke, false, "rectTool"); + } if(canvas.elementModel.isShape) { this.application.ninja.selectionController.selectElement(canvas); } - - } } }); \ No newline at end of file diff --git a/js/tools/ShapeTool.js b/js/tools/ShapeTool.js index 6ff61546..3cd75be2 100755 --- a/js/tools/ShapeTool.js +++ b/js/tools/ShapeTool.js @@ -211,26 +211,16 @@ exports.ShapeTool = Montage.create(DrawingTool, { } }, - // We can draw on an existing canvas unless it has only a single shape object setColor: { - value: function(stroke, fill, canvas, toolId) + value: function(canvas, color, isFill, toolId) { - if(stroke && stroke.color) + if(color && color.color) { - this.application.ninja.elementMediator.setColor([canvas], {mode:stroke.colorMode, color:stroke.color}, false, "Change", toolId); + this.application.ninja.elementMediator.setColor([canvas], {mode:color.colorMode, color:color.color}, isFill, "Change", toolId); } else { - this.application.ninja.elementMediator.setColor([canvas], {mode:"nocolor", color:null}, false, "Change", toolId); - } - - if(fill && fill.color) - { - this.application.ninja.elementMediator.setColor([canvas], {mode:fill.colorMode, color:fill.color}, true, "Change", toolId); - } - else - { - this.application.ninja.elementMediator.setColor([canvas], {mode:"nocolor", color:null}, true, "Change", toolId); + this.application.ninja.elementMediator.setColor([canvas], {mode:"nocolor", color:null}, isFill, "Change", toolId); } } } -- cgit v1.2.3 From 1b6202d3cd517480aebafdfe97e9b89600d715ce Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Thu, 28 Jun 2012 22:46:07 -0700 Subject: video autopsy fix: moving the event handler on creation Signed-off-by: Valerio Virgillito --- js/tools/TagTool.js | 24 +++++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) (limited to 'js/tools') diff --git a/js/tools/TagTool.js b/js/tools/TagTool.js index 31918f92..27665ee6 100755 --- a/js/tools/TagTool.js +++ b/js/tools/TagTool.js @@ -86,11 +86,15 @@ exports.TagTool = Montage.create(DrawingTool, { // Create the element if(this.options.selectedElement === "custom") { element = document.application.njUtils.make(this.options.customName.value, null, this.application.ninja.currentDocument); - } else { element = document.application.njUtils.make(this.options.selectedElement, null, this.application.ninja.currentDocument); } + // Adding a canplay event to videos to pause them and prevent autoplay on stage + if(this.options.selectedElement === "video") { + element.addEventListener("canplay", this, false); + } + // Create the styles styles = document.application.njUtils.stylesFromDraw(element, ~~drawData.width, ~~drawData.height, drawData); @@ -109,6 +113,24 @@ exports.TagTool = Montage.create(DrawingTool, { // Add the element and styles this.application.ninja.elementMediator.addElements(element, styles); } + }, + + handleCanplay: { + value: function(event) { + //TODO: Figure out why the video must be seeked to the end before pausing + var time = Math.ceil(this.duration); + //Trying to display the last frame (doing minus 2 seconds if long video) + if (time > 2) { + this.currentTime = time - 2; + } else if (time > 1) { + this.currentTime = time - 1; + } else { + this.currentTime = time || 0; + } + //Pauing video + event.target.pause(); + } } + }); -- cgit v1.2.3 From 54f95bf52f660f5d8bcb3180c203ffd6ce9b8557 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Thu, 28 Jun 2012 23:27:38 -0700 Subject: Fixing reference to object --- js/tools/TagTool.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'js/tools') diff --git a/js/tools/TagTool.js b/js/tools/TagTool.js index 27665ee6..80e6150d 100755 --- a/js/tools/TagTool.js +++ b/js/tools/TagTool.js @@ -118,14 +118,14 @@ exports.TagTool = Montage.create(DrawingTool, { handleCanplay: { value: function(event) { //TODO: Figure out why the video must be seeked to the end before pausing - var time = Math.ceil(this.duration); + var time = Math.ceil(event.target.duration); //Trying to display the last frame (doing minus 2 seconds if long video) if (time > 2) { - this.currentTime = time - 2; + event.target.currentTime = time - 2; } else if (time > 1) { - this.currentTime = time - 1; + event.target.currentTime = time - 1; } else { - this.currentTime = time || 0; + event.target.currentTime = time || 0; } //Pauing video event.target.pause(); -- cgit v1.2.3