From 14258d1cb3400680ba821d94251defe55714b728 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Fri, 2 Mar 2012 14:27:44 -0800 Subject: We should show snap marker on mouse move even if user hasn't moused down yet. Signed-off-by: Nivesh Rajbhandari --- js/tools/SelectionTool.js | 10 +++++----- js/tools/modifier-tool-base.js | 10 +++++----- 2 files changed, 10 insertions(+), 10 deletions(-) (limited to 'js') diff --git a/js/tools/SelectionTool.js b/js/tools/SelectionTool.js index 6d8ff175..a2d8510e 100755 --- a/js/tools/SelectionTool.js +++ b/js/tools/SelectionTool.js @@ -123,14 +123,14 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { this.doDraw(event); } else { this._showFeedbackOnMouseMove(event); - // if(this._canSnap) - // { - // this.doSnap(event); - // } + if(this._canSnap) + { + this.doSnap(event); + } } this.DrawHandles(this._delta); - if(this._canSnap && this._isDrawing) + if(this._canSnap) { this.application.ninja.stage.stageDeps.snapManager.drawLastHit(); } diff --git a/js/tools/modifier-tool-base.js b/js/tools/modifier-tool-base.js index 7892d015..7e950b03 100755 --- a/js/tools/modifier-tool-base.js +++ b/js/tools/modifier-tool-base.js @@ -828,14 +828,14 @@ exports.ModifierToolBase = Montage.create(DrawingTool, { this.doDraw(event); } else { this._showFeedbackOnMouseMove(event); -// if(this._canSnap) -// { -// this.doSnap(event); -// } + if(this._canSnap) + { + this.doSnap(event); + } } this.DrawHandles(this._delta); - if(this._canSnap && this._isDrawing) + if(this._canSnap) { snapManager.drawLastHit(); } -- cgit v1.2.3 From ba62bfff53319ebf140663dc0bf8fbaf1692ff9a Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Mon, 5 Mar 2012 16:42:13 -0800 Subject: Do not use transform code if transform mode is off. Signed-off-by: Nivesh Rajbhandari --- js/tools/SelectionTool.js | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'js') diff --git a/js/tools/SelectionTool.js b/js/tools/SelectionTool.js index a2d8510e..7eee761d 100755 --- a/js/tools/SelectionTool.js +++ b/js/tools/SelectionTool.js @@ -704,6 +704,10 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { */ _showFeedbackOnMouseMove : { value: function (event) { + if(!this._showTransformHandles) + { + return; + } if(this._target && this._handles) { var len = this._handles.length; -- cgit v1.2.3 From 2346d8ab9db06573d8672c64988c46b6c672e015 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Tue, 6 Mar 2012 11:28:16 -0800 Subject: Create drag plane parallel to working plane and offset by where the user clicked in z. Signed-off-by: Nivesh Rajbhandari --- js/helper-classes/3D/snap-manager.js | 12 ++++++++++-- js/tools/SelectionTool.js | 9 ++++----- js/tools/Translate3DToolBase.js | 1 - js/tools/TranslateObject3DTool.js | 2 +- js/tools/modifier-tool-base.js | 2 +- 5 files changed, 16 insertions(+), 10 deletions(-) (limited to 'js') diff --git a/js/helper-classes/3D/snap-manager.js b/js/helper-classes/3D/snap-manager.js index 596ba56a..5eef8b5c 100755 --- a/js/helper-classes/3D/snap-manager.js +++ b/js/helper-classes/3D/snap-manager.js @@ -1990,12 +1990,20 @@ var SnapManager = exports.SnapManager = Montage.create(Component, { }, setupDragPlanes : { - value: function( hitRec ) { + value: function( hitRec, inGlobalMode ) { // get the location of the point in stage world space var elt = hitRec.getElt(); var localPt = hitRec.getLocalPoint(); var planeMat = hitRec.getPlaneMatrix(); - var stageWorldPt = viewUtils.postViewToStageWorld( MathUtils.transformPoint(localPt,planeMat), elt ); + var stageWorldPt; + if(inGlobalMode) + { + stageWorldPt = MathUtils.transformPoint(localPt,planeMat); + } + else + { + stageWorldPt = viewUtils.postViewToStageWorld( MathUtils.transformPoint(localPt,planeMat), elt ); + } /* // get a working plane parallel to the current working plane through the stage world point diff --git a/js/tools/SelectionTool.js b/js/tools/SelectionTool.js index 7eee761d..13a04944 100755 --- a/js/tools/SelectionTool.js +++ b/js/tools/SelectionTool.js @@ -16,6 +16,7 @@ var Montage = require("montage/core/core").Montage, var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { drawingFeedback: { value: { mode: "Draw2D", type: "" } }, + _inLocalMode: { value: false}, // This tool should always use global mode for translations _canOperateOnStage: { value: true}, _isSelecting: {value: false, writable:true}, _shiftMove: { value: 10}, @@ -34,14 +35,12 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { value: function () { if(this._targets && this._targets.length) { - // TODO - drawUtils's elementPlanes check in drawSelectionBounds doesn't seem to work, - // so temporary workaround to simply check if all elements have identity matrix - // TODO - Eventually, this should instead check if all the selected items are on the view plane var len = this._targets.length; + var plane = this.application.ninja.stage.stageDeps.snapManager.getDragPlane(); for(var i = 0; i < len; i++) { - var mat = this._targets[i].mat; - if(!MathUtils.isIdentityMatrix(mat)) + var elt = this._targets[i].elt; + if(!this.application.ninja.stage.stageDeps.snapManager.elementIsOnPlane(elt, plane)) { return false; } diff --git a/js/tools/Translate3DToolBase.js b/js/tools/Translate3DToolBase.js index 3d9191da..24a68ad1 100755 --- a/js/tools/Translate3DToolBase.js +++ b/js/tools/Translate3DToolBase.js @@ -10,7 +10,6 @@ Subclass TranslateObject3DTool will translate the object that was clicked. var Montage = require("montage/core/core").Montage, ModifierToolBase = require("js/tools/modifier-tool-base").ModifierToolBase, toolHandleModule = require("js/stage/tool-handle"), - snapManager = require("js/helper-classes/3D/snap-manager").SnapManager, viewUtils = require("js/helper-classes/3D/view-utils").ViewUtils, vecUtils = require("js/helper-classes/3D/vec-utils").VecUtils, drawUtils = require("js/helper-classes/3D/draw-utils").DrawUtils, diff --git a/js/tools/TranslateObject3DTool.js b/js/tools/TranslateObject3DTool.js index 5157e39c..92b9b2f7 100755 --- a/js/tools/TranslateObject3DTool.js +++ b/js/tools/TranslateObject3DTool.js @@ -103,7 +103,7 @@ exports.TranslateObject3DTool = Object.create(Translate3DToolBase, { } else { - this._dragPlane = snapManager.setupDragPlanes( hitRec ); + this._dragPlane = snapManager.setupDragPlanes( hitRec, true ); } } diff --git a/js/tools/modifier-tool-base.js b/js/tools/modifier-tool-base.js index 7e950b03..80f7d758 100755 --- a/js/tools/modifier-tool-base.js +++ b/js/tools/modifier-tool-base.js @@ -171,7 +171,7 @@ exports.ModifierToolBase = Montage.create(DrawingTool, { // } // else // { - this._dragPlane = snapManager.setupDragPlanes( hitRec ); + this._dragPlane = snapManager.setupDragPlanes( hitRec, true ); // } } -- cgit v1.2.3 From 2a8a41711052bb557271c27f82faba8dd13fd880 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 7 Mar 2012 06:12:34 -0800 Subject: preliminary support for setting gradients on webgl shapes. Signed-off-by: Nivesh Rajbhandari --- .../gradientpicker.reel/gradientpicker.js | 3 +- js/controllers/elements/shapes-controller.js | 125 +++++++++++++++++++-- js/lib/geom/geom-obj.js | 65 ++++++++--- 3 files changed, 168 insertions(+), 25 deletions(-) (limited to 'js') diff --git a/js/components/gradientpicker.reel/gradientpicker.js b/js/components/gradientpicker.reel/gradientpicker.js index 0940be3c..cedeef50 100755 --- a/js/components/gradientpicker.reel/gradientpicker.js +++ b/js/components/gradientpicker.reel/gradientpicker.js @@ -397,7 +397,8 @@ exports.GradientPicker = Montage.create(Component, { actionEvent.initEvent(type, true, true); actionEvent.type = type; actionEvent.wasSetByCode = userInitiated; - actionEvent.gradient = {stops: this.value, mode: this.mode, css: css}; + // TODO - mode seems to get reset to "rgb", so also setting a gradientMode property + actionEvent.gradient = {stops: this.value, mode: this.mode, gradientMode: this.mode, css: css}; this.dispatchEvent(actionEvent); } } diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js index 3423a5a7..7079fc7f 100755 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js @@ -259,24 +259,70 @@ exports.ShapesController = Montage.create(CanvasController, { } }, - setColor: { - value: function(el, color, isFill) { - var webGl = color.webGlColor || color.color.webGlColor; - if(!webGl) + _setGradientMaterial: { + value: function(el, gradientMode, isFill) { + var m = "LinearGradientMaterial"; + if(gradientMode === "radial") { - webGl = this.application.ninja.colorController.colorModel.colorToWebGl(color.color); + m = "RadialGradientMaterial"; } + + if(el.elementModel.shapeModel.fillMaterial.getName() !== m) + { + var fm = Object.create(MaterialsModel.getMaterial(m)); + if(fm) + { + if(isFill) + { + el.elementModel.shapeModel.GLGeomObj.setFillMaterial(fm); + el.elementModel.shapeModel.fillMaterial = fm; + } + else + { + el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(fm); + el.elementModel.shapeModel.strokeMaterial = fm; + } + el.elementModel.shapeModel.GLGeomObj.buildBuffers(); + } + } + } + }, + + setColor: { + value: function(el, color, isFill) { + var mode = color.mode, + webGl; if(isFill) { - el.elementModel.shapeModel.GLGeomObj.setFillColor(webGl); - this.setShapeProperty(el, "fill", webGl); - this.setShapeProperty(el, "background", color); + if(mode) + { + switch (mode) { + case 'nocolor': + el.elementModel.shapeModel.GLGeomObj.setFillColor(null); + this.setShapeProperty(el, "fill", null); + this.setShapeProperty(el, "background", color); +// el.elementModel.fill = null; + return; + case 'gradient': + this._setGradientMaterial(el, color.color.gradientMode, isFill); + el.elementModel.shapeModel.GLGeomObj.setFillColor({gradientMode:color.color.gradientMode, color:color.color.stops}); + el.elementModel.shapeModel.GLWorld.render(); + this.setShapeProperty(el, "fill", color.color.css); + this.setShapeProperty(el, "background", color); +// el.elementModel.fill = color; + break; + default: + webGl = this.application.ninja.colorController.colorModel.colorToWebGl(color.color); + el.elementModel.shapeModel.GLGeomObj.setFillColor(webGl); + this.setShapeProperty(el, "fill", webGl); + this.setShapeProperty(el, "background", color); +// el.elementModel.fill = color; + } + } } else { - el.elementModel.shapeModel.GLGeomObj.setStrokeColor(webGl); - this.setShapeProperty(el, "stroke", webGl); - this.setShapeProperty(el, "border", color); + // Support for ink-bottle tool if(color.strokeInfo) { var strokeWidth = this.GetValueInPixels(color.strokeInfo.strokeSize, @@ -285,7 +331,64 @@ exports.ShapesController = Montage.create(CanvasController, { this.setShapeProperty(el, "strokeSize", color.strokeInfo.strokeSize + " " + color.strokeInfo.strokeUnits); } + + if(mode) + { + switch (mode) { + case 'nocolor': + el.elementModel.shapeModel.GLGeomObj.setStrokeColor(null); + this.setShapeProperty(el, "stroke", null); + this.setShapeProperty(el, "border", color); +// el.elementModel.fill = null; + return; + case 'gradient': + this._setGradientMaterial(el, color.color.gradientMode, isFill); + el.elementModel.shapeModel.GLGeomObj.setStrokeColor({gradientMode:color.color.gradientMode, color:color.color.stops}); + el.elementModel.shapeModel.GLWorld.render(); + this.setShapeProperty(el, "stroke", color.color.css); + this.setShapeProperty(el, "border", color); +// el.elementModel.fill = color; + break; + default: + webGl = this.application.ninja.colorController.colorModel.colorToWebGl(color.color); + el.elementModel.shapeModel.GLGeomObj.setStrokeColor(webGl); + this.setShapeProperty(el, "stroke", webGl); + this.setShapeProperty(el, "border", color); +// el.elementModel.fill = color; + } + } } + + + + + + +// var webGl = color.webGlColor || color.color.webGlColor; +// if(!webGl) +// { +// webGl = this.application.ninja.colorController.colorModel.colorToWebGl(color.color); +// } +// if(isFill) +// { +// el.elementModel.shapeModel.GLGeomObj.setFillColor(webGl); +// this.setShapeProperty(el, "fill", webGl); +// this.setShapeProperty(el, "background", color); +// } +// else +// { +// el.elementModel.shapeModel.GLGeomObj.setStrokeColor(webGl); +// this.setShapeProperty(el, "stroke", webGl); +// this.setShapeProperty(el, "border", color); +// if(color.strokeInfo) +// { +// var strokeWidth = this.GetValueInPixels(color.strokeInfo.strokeSize, +// color.strokeInfo.strokeUnits); +// el.elementModel.shapeModel.GLGeomObj.setStrokeWidth(strokeWidth); +// this.setShapeProperty(el, "strokeSize", color.strokeInfo.strokeSize + " " +// + color.strokeInfo.strokeUnits); +// } +// } el.elementModel.shapeModel.GLWorld.render(); } }, diff --git a/js/lib/geom/geom-obj.js b/js/lib/geom/geom-obj.js index c5880843..726c3595 100755 --- a/js/lib/geom/geom-obj.js +++ b/js/lib/geom/geom-obj.js @@ -138,22 +138,61 @@ var GeomObj = function GLGeomObj() { // Methods /////////////////////////////////////////////////////////////////////// this.setMaterialColor = function(c, type) { - if (type == "fill") { - this._fillColor = c.slice(0); + if(c.gradientMode) { + var nMats = 0; + if (this._materialArray && this._materialTypeArray) { + nMats = this._materialArray.length; + } + + var stops = [], + colors = c.color; + + var len = colors.length; + // TODO - Current shaders only support 4 color stops + if(len > 4) { + len = 4; + } + + for(var n=0; n --- js/lib/geom/geom-obj.js | 39 ++++++++++++++++++++------------------- 1 file changed, 20 insertions(+), 19 deletions(-) (limited to 'js') diff --git a/js/lib/geom/geom-obj.js b/js/lib/geom/geom-obj.js index 726c3595..1ea74475 100755 --- a/js/lib/geom/geom-obj.js +++ b/js/lib/geom/geom-obj.js @@ -138,8 +138,10 @@ var GeomObj = function GLGeomObj() { // Methods /////////////////////////////////////////////////////////////////////// this.setMaterialColor = function(c, type) { + var i = 0, + nMats = 0; if(c.gradientMode) { - var nMats = 0; + // Gradient support if (this._materialArray && this._materialTypeArray) { nMats = this._materialArray.length; } @@ -160,7 +162,7 @@ var GeomObj = function GLGeomObj() { stops.push(stop); if (nMats === this._materialTypeArray.length) { - for (var i=0; i --- js/controllers/elements/shapes-controller.js | 22 ++++++---- js/lib/geom/rectangle.js | 64 +++++++++++++++++++++++++--- 2 files changed, 71 insertions(+), 15 deletions(-) (limited to 'js') diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js index 7079fc7f..b6d97b14 100755 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js @@ -301,22 +301,25 @@ exports.ShapesController = Montage.create(CanvasController, { el.elementModel.shapeModel.GLGeomObj.setFillColor(null); this.setShapeProperty(el, "fill", null); this.setShapeProperty(el, "background", color); -// el.elementModel.fill = null; + el.elementModel.fill = null; return; case 'gradient': - this._setGradientMaterial(el, color.color.gradientMode, isFill); + if(el.elementModel.shapeModel.useWebGl) + { + this._setGradientMaterial(el, color.color.gradientMode, isFill); + } el.elementModel.shapeModel.GLGeomObj.setFillColor({gradientMode:color.color.gradientMode, color:color.color.stops}); el.elementModel.shapeModel.GLWorld.render(); this.setShapeProperty(el, "fill", color.color.css); this.setShapeProperty(el, "background", color); -// el.elementModel.fill = color; + el.elementModel.fill = color; break; default: webGl = this.application.ninja.colorController.colorModel.colorToWebGl(color.color); el.elementModel.shapeModel.GLGeomObj.setFillColor(webGl); this.setShapeProperty(el, "fill", webGl); this.setShapeProperty(el, "background", color); -// el.elementModel.fill = color; + el.elementModel.fill = color; } } } @@ -339,22 +342,25 @@ exports.ShapesController = Montage.create(CanvasController, { el.elementModel.shapeModel.GLGeomObj.setStrokeColor(null); this.setShapeProperty(el, "stroke", null); this.setShapeProperty(el, "border", color); -// el.elementModel.fill = null; + el.elementModel.fill = null; return; case 'gradient': - this._setGradientMaterial(el, color.color.gradientMode, isFill); + if(el.elementModel.shapeModel.useWebGl) + { + this._setGradientMaterial(el, color.color.gradientMode, isFill); + } el.elementModel.shapeModel.GLGeomObj.setStrokeColor({gradientMode:color.color.gradientMode, color:color.color.stops}); el.elementModel.shapeModel.GLWorld.render(); this.setShapeProperty(el, "stroke", color.color.css); this.setShapeProperty(el, "border", color); -// el.elementModel.fill = color; + el.elementModel.fill = color; break; default: webGl = this.application.ninja.colorController.colorModel.colorToWebGl(color.color); el.elementModel.shapeModel.GLGeomObj.setStrokeColor(webGl); this.setShapeProperty(el, "stroke", webGl); this.setShapeProperty(el, "border", color); -// el.elementModel.fill = color; + el.elementModel.fill = color; } } } diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js index 81b385b3..50271a13 100755 --- a/js/lib/geom/rectangle.js +++ b/js/lib/geom/rectangle.js @@ -459,15 +459,44 @@ var Rectangle = function GLRectangle() { var lw = this._strokeWidth; var w = world.getViewportWidth(), h = world.getViewportHeight(); - + + var c, + inset, + gradient, + colors, + len, + n, + position, + cs; // render the fill ctx.beginPath(); if (this._fillColor) { - var c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")"; - ctx.fillStyle = c; + inset = Math.ceil( lw ) + 0.5; + + if(this._fillColor.gradientMode) { + if(this._fillColor.gradientMode === "radial") { + gradient = ctx.createRadialGradient(w/2, h/2, h/2-inset, w/2, h/2, h-2*inset); + } else { + gradient = ctx.createLinearGradient(inset, inset, w-inset, h-inset); + } + colors = this._fillColor.color; + + len = colors.length; + + for(n=0; n --- js/lib/geom/rectangle.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'js') diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js index 50271a13..d01d5b28 100755 --- a/js/lib/geom/rectangle.js +++ b/js/lib/geom/rectangle.js @@ -477,7 +477,7 @@ var Rectangle = function GLRectangle() { if(this._fillColor.gradientMode === "radial") { gradient = ctx.createRadialGradient(w/2, h/2, h/2-inset, w/2, h/2, h-2*inset); } else { - gradient = ctx.createLinearGradient(inset, inset, w-inset, h-inset); + gradient = ctx.createLinearGradient(inset, h/2, w-2*inset, h/2); } colors = this._fillColor.color; @@ -511,7 +511,7 @@ var Rectangle = function GLRectangle() { if(this._strokeColor.gradientMode === "radial") { gradient = ctx.createRadialGradient(w/2, h/2, h/2, w/2, h/2, h); } else { - gradient = ctx.createLinearGradient(0, 0, w, h); + gradient = ctx.createLinearGradient(0, h/2, w, h/2); } colors = this._strokeColor.color; -- cgit v1.2.3 From b6288e1ffe4ffe29a595bb1e146feb388503e2c4 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 7 Mar 2012 15:31:20 -0800 Subject: gradient support for canvas-2d shapes. Signed-off-by: Nivesh Rajbhandari --- js/controllers/elements/shapes-controller.js | 23 +++++++---- js/lib/geom/circle.js | 61 ++++++++++++++++++++++++---- js/lib/geom/line.js | 38 +++++++++++++++-- js/lib/geom/rectangle.js | 4 +- 4 files changed, 106 insertions(+), 20 deletions(-) (limited to 'js') diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js index b6d97b14..d72d9c14 100755 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js @@ -261,28 +261,37 @@ exports.ShapesController = Montage.create(CanvasController, { _setGradientMaterial: { value: function(el, gradientMode, isFill) { - var m = "LinearGradientMaterial"; + var m = "LinearGradientMaterial", + fm; if(gradientMode === "radial") { m = "RadialGradientMaterial"; } - if(el.elementModel.shapeModel.fillMaterial.getName() !== m) + if(isFill) { - var fm = Object.create(MaterialsModel.getMaterial(m)); - if(fm) + if(el.elementModel.shapeModel.fillMaterial.getName() !== m) { - if(isFill) + fm = Object.create(MaterialsModel.getMaterial(m)); + if(fm) { el.elementModel.shapeModel.GLGeomObj.setFillMaterial(fm); el.elementModel.shapeModel.fillMaterial = fm; + el.elementModel.shapeModel.GLGeomObj.buildBuffers(); } - else + } + } + else + { + if(el.elementModel.shapeModel.strokeMaterial.getName() !== m) + { + fm = Object.create(MaterialsModel.getMaterial(m)); + if(fm) { el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(fm); el.elementModel.shapeModel.strokeMaterial = fm; + el.elementModel.shapeModel.GLGeomObj.buildBuffers(); } - el.elementModel.shapeModel.GLGeomObj.buildBuffers(); } } } diff --git a/js/lib/geom/circle.js b/js/lib/geom/circle.js index dd82a4cc..70f608be 100755 --- a/js/lib/geom/circle.js +++ b/js/lib/geom/circle.js @@ -442,16 +442,43 @@ var Circle = function GLCircle() { var bezPts = MathUtils.circularArcToBezier( [0,0,0], [1,0,0], 2.0*Math.PI ); if (bezPts) { var n = bezPts.length; + var gradient, + colors, + len, + j, + position, + cs, + c; // set up the fill style ctx.beginPath(); ctx.lineWidth = 0; if (this._fillColor) { - var c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")"; - ctx.fillStyle = c; - + if(this._fillColor.gradientMode) { + if(this._fillColor.gradientMode === "radial") { + gradient = ctx.createRadialGradient(xCtr, yCtr, 0, + xCtr, yCtr, yScale); + } else { + gradient = ctx.createLinearGradient(0, this._height/2, this._width, this._height/2); + } + colors = this._fillColor.color; + + len = colors.length; + + for(j=0; j --- js/tools/EyedropperTool.js | 59 ++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 55 insertions(+), 4 deletions(-) (limited to 'js') diff --git a/js/tools/EyedropperTool.js b/js/tools/EyedropperTool.js index 11c15158..d6a162cd 100755 --- a/js/tools/EyedropperTool.js +++ b/js/tools/EyedropperTool.js @@ -6,9 +6,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot var Montage = require("montage/core/core").Montage, ElementsMediator = require("js/mediators/element-mediator").ElementMediator, - drawUtils = require("js/helper-classes/3D/draw-utils").DrawUtils, - vecUtils = require("js/helper-classes/3D/vec-utils").VecUtils, - toolBase = require("js/tools/ToolBase").toolBase; + toolBase = require("js/tools/ToolBase").toolBase, + ShapesController = require("js/controllers/elements/shapes-controller").ShapesController; exports.EyedropperTool = Montage.create(toolBase, { @@ -133,7 +132,15 @@ exports.EyedropperTool = Montage.create(toolBase, { { this._deleteImageDataCanvas(); - c = this._getColorFromElement(obj, event); + if(ShapesController.isElementAShape(obj)) + { + c = this._getColorFromShape(obj, event); + } + else + { + c = this._getColorFromElement(obj, event); + } + if(typeof(c) === "string") { color = this.application.ninja.colorController.getColorObjFromCss(c); @@ -289,6 +296,50 @@ exports.EyedropperTool = Montage.create(toolBase, { } }, + // TODO - We don't want to calculate this repeatedly + _getColorFromShape: { + value: function(elt, event) + { + var strokeWidth = ShapesController.getShapeProperty(elt, "strokeSize"), + bounds3D, + innerBounds, + pt, + tmpPt, + x, + y; + if(strokeWidth) + { + strokeWidth = parseFloat(strokeWidth); + bounds3D = this.application.ninja.stage.viewUtils.getElementViewBounds3D( elt ); + innerBounds = []; + pt = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, + new WebKitPoint(event.pageX, event.pageY)); + + innerBounds.push([bounds3D[0][0] + strokeWidth, bounds3D[0][1] + strokeWidth, 0]); + + innerBounds.push([bounds3D[1][0] + strokeWidth, bounds3D[1][1] - strokeWidth, 0]); + + innerBounds.push([bounds3D[2][0] - strokeWidth, bounds3D[2][1] - strokeWidth, 0]); + + innerBounds.push([bounds3D[3][0] - strokeWidth, bounds3D[3][1] + strokeWidth, 0]); + + tmpPt = this.application.ninja.stage.viewUtils.globalToLocal([pt.x, pt.y], elt); + x = tmpPt[0]; + y = tmpPt[1]; + + if( (x < innerBounds[0][0]) || + (x > innerBounds[2][0]) || + (y < innerBounds[0][1]) || + (y > innerBounds[1][1]) ) + { + return ShapesController.getColor(elt, false); + } + } + + return ShapesController.getColor(elt, true); + } + }, + _getColorAtPoint: { value: function(elt, event) { -- cgit v1.2.3 From 86784888a98a05523dbedcbe32fd4dea336878e7 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Fri, 9 Mar 2012 08:21:13 -0800 Subject: Eyedropper support for getting color value from webgl shapes. Signed-off-by: Nivesh Rajbhandari --- js/lib/drawing/world.js | 10 ++-- js/tools/EyedropperTool.js | 121 ++++++++++++++++++++++++++++----------------- 2 files changed, 83 insertions(+), 48 deletions(-) (limited to 'js') diff --git a/js/lib/drawing/world.js b/js/lib/drawing/world.js index 3d6c6fc4..04e4d96b 100755 --- a/js/lib/drawing/world.js +++ b/js/lib/drawing/world.js @@ -26,7 +26,7 @@ var MaterialsModel = require("js/models/materials-model").MaterialsModel; // Class GLWorld // Manages display in a canvas /////////////////////////////////////////////////////////////////////// -var World = function GLWorld( canvas, use3D ) { +var World = function GLWorld( canvas, use3D, preserveDrawingBuffer ) { /////////////////////////////////////////////////////////////////////// // Instance variables /////////////////////////////////////////////////////////////////////// @@ -39,7 +39,11 @@ var World = function GLWorld( canvas, use3D ) { this._canvas = canvas; if (this._useWebGL) { - this._glContext = canvas.getContext("experimental-webgl"); + if(preserveDrawingBuffer) { + this._glContext = canvas.getContext("experimental-webgl", {preserveDrawingBuffer: true}); + } else { + this._glContext = canvas.getContext("experimental-webgl"); + } } else { this._2DContext = canvas.getContext( "2d" ); } @@ -680,7 +684,7 @@ World.prototype.render = function() { var root = this.getGeomRoot(); this.hRender( root ); } else { - g_Engine.setContext( this._canvas.rdgeId ); + g_Engine.setContext( this._canvas.rdgeid ); //this.draw(); this.restartRenderLoop(); } diff --git a/js/tools/EyedropperTool.js b/js/tools/EyedropperTool.js index d6a162cd..6e71c693 100755 --- a/js/tools/EyedropperTool.js +++ b/js/tools/EyedropperTool.js @@ -7,7 +7,9 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot var Montage = require("montage/core/core").Montage, ElementsMediator = require("js/mediators/element-mediator").ElementMediator, toolBase = require("js/tools/ToolBase").toolBase, - ShapesController = require("js/controllers/elements/shapes-controller").ShapesController; + ShapesController = require("js/controllers/elements/shapes-controller").ShapesController, + World = require("js/lib/drawing/world").World, + njModule = require("js/lib/NJUtils"); exports.EyedropperTool = Montage.create(toolBase, { @@ -16,6 +18,8 @@ exports.EyedropperTool = Montage.create(toolBase, { _color: { value: null}, _elementUnderMouse: { value: null }, _imageDataCanvas: { value: null }, + _webGlDataCanvas: { value: null }, + _webGlWorld: { value: null }, _imageDataContext: { value: null }, _canSnap: { value: false }, @@ -29,6 +33,11 @@ exports.EyedropperTool = Montage.create(toolBase, { else { NJevent("disableStageMove"); + this._deleteImageDataCanvas(); + this._isMouseDown = false; + this._elementUnderMouse = null; + this._previousColor = null; + this._color = null; } } }, @@ -122,7 +131,7 @@ exports.EyedropperTool = Montage.create(toolBase, { new WebKitPoint(event.pageX, event.pageY)), ctx = obj.getContext("2d"); - c = this._getColorFromCanvas(ctx, pt); + c = this._getColorFromCanvas(ctx, [pt.x, pt.y]); if(c) { color = this.application.ninja.colorController.getColorObjFromCss(c); @@ -130,8 +139,6 @@ exports.EyedropperTool = Montage.create(toolBase, { } else { - this._deleteImageDataCanvas(); - if(ShapesController.isElementAShape(obj)) { c = this._getColorFromShape(obj, event); @@ -239,6 +246,8 @@ exports.EyedropperTool = Montage.create(toolBase, { _getColorFromElement: { value: function(elt, event) { + this._deleteImageDataCanvas(); + var border = ElementsMediator.getProperty(elt, "border"), borderWidth, bounds3D, @@ -300,49 +309,39 @@ exports.EyedropperTool = Montage.create(toolBase, { _getColorFromShape: { value: function(elt, event) { - var strokeWidth = ShapesController.getShapeProperty(elt, "strokeSize"), - bounds3D, - innerBounds, - pt, + var c, + ctx, tmpPt, - x, - y; - if(strokeWidth) - { - strokeWidth = parseFloat(strokeWidth); - bounds3D = this.application.ninja.stage.viewUtils.getElementViewBounds3D( elt ); - innerBounds = []; pt = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, - new WebKitPoint(event.pageX, event.pageY)); - - innerBounds.push([bounds3D[0][0] + strokeWidth, bounds3D[0][1] + strokeWidth, 0]); - - innerBounds.push([bounds3D[1][0] + strokeWidth, bounds3D[1][1] - strokeWidth, 0]); - - innerBounds.push([bounds3D[2][0] - strokeWidth, bounds3D[2][1] - strokeWidth, 0]); - - innerBounds.push([bounds3D[3][0] - strokeWidth, bounds3D[3][1] + strokeWidth, 0]); + new WebKitPoint(event.pageX, event.pageY)); - tmpPt = this.application.ninja.stage.viewUtils.globalToLocal([pt.x, pt.y], elt); - x = tmpPt[0]; - y = tmpPt[1]; + tmpPt = this.application.ninja.stage.viewUtils.globalToLocal([pt.x, pt.y], elt); - if( (x < innerBounds[0][0]) || - (x > innerBounds[2][0]) || - (y < innerBounds[0][1]) || - (y > innerBounds[1][1]) ) + if(elt.elementModel.shapeModel.useWebGl) + { + c = this._getColorAtPoint(elt, event, true); + } + else + { + this._deleteImageDataCanvas(); + ctx = elt.getContext("2d"); + if(ctx) { - return ShapesController.getColor(elt, false); + c = this._getColorFromCanvas(ctx, tmpPt); } } - - return ShapesController.getColor(elt, true); + return c; } }, _getColorAtPoint: { - value: function(elt, event) + value: function(elt, event, isWebGl) { + var pt = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, + new WebKitPoint(event.pageX, event.pageY)); + + var tmpPt = this.application.ninja.stage.viewUtils.globalToLocal([pt.x, pt.y], elt); + if(!this._imageDataCanvas) { this._imageDataCanvas = document.createElement("canvas"); @@ -362,25 +361,52 @@ exports.EyedropperTool = Montage.create(toolBase, { this._imageDataCanvas.height = h; this._imageDataContext = this._imageDataCanvas.getContext("2d"); - this._imageDataContext.drawImage(elt, 0, 0); + if(isWebGl) + { + var worldData = elt.elementModel.shapeModel.GLWorld.export(); + if(worldData) + { + this._webGlDataCanvas = njModule.NJUtils.makeNJElement("canvas", "Canvas", "shape", {"data-RDGE-id": njModule.NJUtils.generateRandom()}, true); + this._applyElementStyles(elt, this._webGlDataCanvas, ["display", "position", "width", "height", + "-webkit-transform", "-webkit-transform-style"]); + this._webGlDataCanvas.style.left = eltCoords[0] + "px"; + this._webGlDataCanvas.style.top = eltCoords[1] + "px"; + this._webGlDataCanvas.width = w; + this._webGlDataCanvas.height = h; + this._webGlWorld = new World(this._webGlDataCanvas, true, true); + this._webGlWorld.import(worldData); + this._webGlWorld.render(); + setTimeout(function() { + this._webGlWorld.draw(); + this._imageDataContext.drawImage(this._webGlDataCanvas, 0, 0); + return this._getColorFromCanvas(this._imageDataContext, tmpPt, true); + }.bind(this), 250); + } + } + else + { + this._imageDataContext.drawImage(elt, 0, 0); + } } - var pt = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, - new WebKitPoint(event.pageX, event.pageY)); - - var tmpPt = this.application.ninja.stage.viewUtils.globalToLocal([pt.x, pt.y], elt); - - return this._getColorFromCanvas(this._imageDataContext, tmpPt); + return this._getColorFromCanvas(this._imageDataContext, tmpPt, isWebGl); } }, _getColorFromCanvas: { - value: function(ctx, pt) + value: function(ctx, pt, isWebGl) { - var imageData = ctx.getImageData(pt[0], pt[1], 1, 1).data; + var imageData = ctx.getImageData(~~pt[0], ~~pt[1], 1, 1).data; if(imageData) { - return ("rgba(" + imageData[0] + "," + imageData[1] + "," + imageData[2] + "," + imageData[3] + ")"); + if(isWebGl) + { + return ("rgba(" + imageData[0] + "," + imageData[1] + "," + imageData[2] + "," + imageData[3]/255 + ")"); + } + else + { + return ("rgba(" + imageData[0] + "," + imageData[1] + "," + imageData[2] + "," + imageData[3] + ")"); + } } else { @@ -394,6 +420,11 @@ exports.EyedropperTool = Montage.create(toolBase, { { if(this._imageDataCanvas) { + if(this._webGlDataCanvas) + { + this._webGlWorld = null; + this._webGlDataCanvas = null; + } this._imageDataCanvas = null; this._imageDataContext = null; } -- cgit v1.2.3 From 7793b312ef9490c90c3d2332849ab41d56950437 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Fri, 9 Mar 2012 10:28:40 -0800 Subject: Fixing radial gradients for line and circle. Signed-off-by: Nivesh Rajbhandari --- js/lib/geom/circle.js | 6 +++--- js/lib/geom/line.js | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) (limited to 'js') diff --git a/js/lib/geom/circle.js b/js/lib/geom/circle.js index 70f608be..8f9f54d1 100755 --- a/js/lib/geom/circle.js +++ b/js/lib/geom/circle.js @@ -457,7 +457,7 @@ var Circle = function GLCircle() { if(this._fillColor.gradientMode) { if(this._fillColor.gradientMode === "radial") { gradient = ctx.createRadialGradient(xCtr, yCtr, 0, - xCtr, yCtr, yScale); + xCtr, yCtr, Math.max(yScale, xScale)); } else { gradient = ctx.createLinearGradient(0, this._height/2, this._width, this._height/2); } @@ -533,8 +533,8 @@ var Circle = function GLCircle() { if (this._strokeColor) { if(this._strokeColor.gradientMode) { if(this._strokeColor.gradientMode === "radial") { - gradient = ctx.createRadialGradient(xCtr, yCtr, yScale, - xCtr, yCtr, 0.5*this._height); + gradient = ctx.createRadialGradient(xCtr, yCtr, Math.min(xScale, yScale), + xCtr, yCtr, 0.5*Math.max(this._height, this._width)); } else { gradient = ctx.createLinearGradient(0, this._height/2, this._width, this._height/2); } diff --git a/js/lib/geom/line.js b/js/lib/geom/line.js index eaa26cf0..51a6fa98 100755 --- a/js/lib/geom/line.js +++ b/js/lib/geom/line.js @@ -365,7 +365,7 @@ var Line = function GLLine( world, xOffset, yOffset, width, height, slope, strok if (this._strokeColor) { if(this._strokeColor.gradientMode) { if(this._strokeColor.gradientMode === "radial") { - gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, h/2); + gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(w/2, h/2)); } else { gradient = ctx.createLinearGradient(0, h/2, w, h/2); } -- cgit v1.2.3 From 3f80251670e187377f9f8ae4547328c8bf344977 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Fri, 9 Mar 2012 10:36:32 -0800 Subject: Fixing radial gradient for rectangle. Signed-off-by: Nivesh Rajbhandari --- js/lib/geom/rectangle.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'js') diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js index f13f624d..81201a79 100755 --- a/js/lib/geom/rectangle.js +++ b/js/lib/geom/rectangle.js @@ -475,7 +475,7 @@ var Rectangle = function GLRectangle() { if(this._fillColor.gradientMode) { if(this._fillColor.gradientMode === "radial") { - gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, h/2-inset); + gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(w/2, h/2)-inset); } else { gradient = ctx.createLinearGradient(inset, h/2, w-2*inset, h/2); } @@ -509,7 +509,7 @@ var Rectangle = function GLRectangle() { if(this._strokeColor.gradientMode) { if(this._strokeColor.gradientMode === "radial") { - gradient = ctx.createRadialGradient(w/2, h/2, h/2-inset, w/2, h/2, h/2); + gradient = ctx.createRadialGradient(w/2, h/2, Math.min(h/2, w/2)-inset, w/2, h/2, Math.max(h/2, w/2)); } else { gradient = ctx.createLinearGradient(0, h/2, w, h/2); } -- cgit v1.2.3 From e2562c3f24eb5dbfb9e3bd2868cdf1a2806644bf Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Fri, 9 Mar 2012 13:14:14 -0800 Subject: Fixing selection tool when moving multiple selection in 3d mode. Signed-off-by: Nivesh Rajbhandari --- js/tools/SelectionTool.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'js') diff --git a/js/tools/SelectionTool.js b/js/tools/SelectionTool.js index 13a04944..5f48f74d 100755 --- a/js/tools/SelectionTool.js +++ b/js/tools/SelectionTool.js @@ -451,7 +451,10 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { if(this._use3DMode) { curMat = item.mat; - glmat4.multiply(curMat, qMat, curMat); + + curMat[12] += transMat[12]; + curMat[13] += transMat[13]; + curMat[14] += transMat[14]; viewUtils.setMatrixForElement( elt, curMat, true); this._targets[i].mat = curMat; } -- cgit v1.2.3 From e44238821c6b19a4b2259d26e14847b9995338f2 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Fri, 9 Mar 2012 16:46:20 -0800 Subject: Adding gradientMode value in defaultGradient object. Signed-off-by: Nivesh Rajbhandari --- js/panels/Color/colorpanelpopup.reel/colorpanelpopup.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js') diff --git a/js/panels/Color/colorpanelpopup.reel/colorpanelpopup.js b/js/panels/Color/colorpanelpopup.reel/colorpanelpopup.js index 3eae3ea3..b957d495 100755 --- a/js/panels/Color/colorpanelpopup.reel/colorpanelpopup.js +++ b/js/panels/Color/colorpanelpopup.reel/colorpanelpopup.js @@ -405,7 +405,7 @@ exports.ColorPanelPopup = Montage.create(Component, { // defaultGradient: { enumerable: true, - value: {mode: 'linear', stops: [{mode: 'rgb', value: {r: 255, g: 255, b: 255, a: 1, css: 'rgb(255, 255, 255)'}, position: 0}, {mode: 'rgb', value: {r: 0, g: 0, b: 0, a: 1, css: 'rgb(0, 0, 0)'}, position: 100}]} + value: {mode: 'linear', gradientMode: 'linear', stops: [{mode: 'rgb', value: {r: 255, g: 255, b: 255, a: 1, css: 'rgb(255, 255, 255)'}, position: 0}, {mode: 'rgb', value: {r: 0, g: 0, b: 0, a: 1, css: 'rgb(0, 0, 0)'}, position: 100}]} }, //////////////////////////////////////////////////////////////////// // -- cgit v1.2.3 From 2c6339a9191033c937c2bac3e181c2bc380f4c48 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Mon, 12 Mar 2012 12:00:07 -0700 Subject: Fixed element mediator, PI, and eye-dropper to handle different borders sides and gradients. Signed-off-by: Nivesh Rajbhandari --- js/controllers/elements/element-controller.js | 32 ++++++++++++++++++--------- js/mediators/element-mediator.js | 15 ++----------- js/models/color-model.js | 3 +++ js/panels/properties.reel/properties.js | 4 +++- js/tools/EyedropperTool.js | 17 +++++++++----- 5 files changed, 41 insertions(+), 30 deletions(-)