From abeb9f1e23679200bb2f4a3ccbcebfb37645975c Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Thu, 9 Feb 2012 10:45:50 -0800 Subject: first phase of simple resampling to prevent tiny segments --- js/helper-classes/RDGE/GLBrushStroke.js | 54 +++++++++- js/tools/BrushTool.js | 170 ++++++++++++++++---------------- 2 files changed, 138 insertions(+), 86 deletions(-) (limited to 'js') diff --git a/js/helper-classes/RDGE/GLBrushStroke.js b/js/helper-classes/RDGE/GLBrushStroke.js index fdf1595c..59017a0c 100644 --- a/js/helper-classes/RDGE/GLBrushStroke.js +++ b/js/helper-classes/RDGE/GLBrushStroke.js @@ -67,7 +67,23 @@ function GLBrushStroke() { this.getNumPoints = function () { return this._Points.length; } this.getPoint = function (index) { return this._Points[index]; } - this.addPoint = function (anchorPt) { this._Points.push(anchorPt); this._dirty=true; } + this.addPoint = function (pt) + { + //add the point if it is some epsilon away from the previous point + var doAddPoint=true; + var numPoints = this._Points.length; + if (numPoints>0) { + var prevPt = this._Points[numPoints-1]; + var diffPt = [prevPt[0]-pt[0], prevPt[1]-pt[1]]; + var diffPtMag = diffPt[0]*diffPt[0] + diffPt[1]*diffPt[1]; + if (diffPtMag<4) + doAddPoint=false; + } + if (doAddPoint) { + this._Points.push(pt); + this._dirty=true; + } + } this.insertPoint = function(pt, index){ this._Points.splice(index, 0, pt); this._dirty=true;} this.isDirty = function(){return this._dirty;} this.makeDirty = function(){this._dirty=true;} @@ -167,7 +183,9 @@ function GLBrushStroke() { var bboxWidth = bboxMax[0] - bboxMin[0]; var bboxHeight = bboxMax[1] - bboxMin[1]; ctx.clearRect(0, 0, bboxWidth, bboxHeight); -/* + + + /* ctx.lineWidth = this._strokeWidth; ctx.strokeStyle = "black"; if (this._strokeColor) @@ -185,7 +203,35 @@ function GLBrushStroke() { ctx.lineTo(pt[0]-bboxMin[0], pt[1]-bboxMin[1]); } ctx.stroke(); - */ + */ + + var firstPt = this._Points[0]; + var prevX = firstPt[0]-bboxMin[0]; + var prevY = firstPt[1]-bboxMin[1]; + for (var i = 1; i < numPoints; i++) { + var pt = this._Points[i]; + ctx.globalCompositeOperation = 'source-over'; + var x = pt[0]-bboxMin[0]; + var y = pt[1]-bboxMin[1]; + var r = ctx.createLinearGradient(prevX, prevY, x, y); + r.addColorStop(1, 'rgba(0,0,0,0.01)'); + r.addColorStop(0.5,'rgba(255,0,0,1.0)'); + r.addColorStop(0, 'rgba(0,0,0,0.01)'); + + ctx.fillStyle = r; + //ctx.fillStyle = "rgba(0,128,0,0.15)"; + var w2 = this._strokeWidth*0.5; + ctx.moveTo(prevX-w2, prevY); + ctx.lineTo(prevX+w2, prevY); + ctx.lineTo(x+w2, y); + ctx.lineTo(x-w2, y); + ctx.fill(); + + prevX = x; + prevY = y; + } + + /* var R2 = this._strokeWidth; var R = R2*0.5; var hardness = 0.25; //for a pencil, this is always 1 //TODO get hardness parameter from user interface @@ -209,6 +255,8 @@ function GLBrushStroke() { //ctx.globalCompositeOperation = 'source-in'; //ctx.rect(x-R, y-R, R2, R2); } + */ + ctx.restore(); } //render() diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js index ce8ffbb9..97df84a0 100644 --- a/js/tools/BrushTool.js +++ b/js/tools/BrushTool.js @@ -65,12 +65,30 @@ exports.BrushTool = Montage.create(ShapeTool, { if (this._selectedBrushStroke === null){ this._selectedBrushStroke = new GLBrushStroke(); } - console.log("BrushTool Start"); NJevent("enableStageMove");//stageManagerModule.stageManager.enableMouseMove(); } //value: function (event) { }, //HandleLeftButtonDown + _getUnsnappedPosition: { + value: function(x,y){ + var elemSnap = snapManager.elementSnapEnabled(); + var gridSnap = snapManager.gridSnapEnabled(); + var alignSnap = snapManager.snapAlignEnabled(); + snapManager.enableElementSnap(false); + snapManager.enableGridSnap(false); + snapManager.enableSnapAlign(false); + + var point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(x,y)); + var unsnappedpos = DrawingToolBase.getHitRecPos(snapManager.snap(point.x, point.y, false)); + + snapManager.enableElementSnap(elemSnap); + snapManager.enableGridSnap(gridSnap); + snapManager.enableSnapAlign(alignSnap); + + return unsnappedpos; + } + }, //need to override this function because the ShapeTool's definition contains a clearDrawingCanvas call - Pushkar // might not need to override once we draw using OpenGL instead of SVG // Also took out all the snapping code for now...need to add that back @@ -84,20 +102,10 @@ exports.BrushTool = Montage.create(ShapeTool, { } if (this._isDrawing) { - snapManager.enableElementSnap(false); - snapManager.enableGridSnap(false); - snapManager.enableSnapAlign(false); - //this.doDraw(event); - //var currMousePos = this.getMouseUpPos(); - //instead of doDraw call own DrawingTool - var point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(event.pageX, event.pageY)); - var hitRecSnapPoint = DrawingToolBase.getUpdatedSnapPointNoAppLevelEnabling(point.x, point.y, true, this.mouseDownHitRec); - var currMousePos = DrawingToolBase.getHitRecPos(hitRecSnapPoint); - + var currMousePos = this._getUnsnappedPosition(event.pageX, event.pageY); if (this._selectedBrushStroke){ this._selectedBrushStroke.addPoint(currMousePos); } - this.ShowCurrentBrushStrokeOnStage(); } //if (this._isDrawing) { @@ -123,7 +131,6 @@ exports.BrushTool = Montage.create(ShapeTool, { this._isDrawing = false; this._hasDraw = false; - console.log("BrushTool Stop"); //TODO get these values from the options if (this._selectedBrushStroke){ @@ -192,92 +199,89 @@ exports.BrushTool = Montage.create(ShapeTool, { RenderShape: { - value: function (w, h, planeMat, midPt, canvas) { - if ((Math.floor(w) === 0) || (Math.floor(h) === 0)) { - return; - } + value: function (w, h, planeMat, midPt, canvas) { + if ((Math.floor(w) === 0) || (Math.floor(h) === 0)) { + return; + } - var left = Math.round(midPt[0] - 0.5 * w); - var top = Math.round(midPt[1] - 0.5 * h); + var left = Math.round(midPt[0] - 0.5 * w); + var top = Math.round(midPt[1] - 0.5 * h); - if (!canvas) { - var newCanvas = NJUtils.makeNJElement("canvas", "Brushstroke", "shape", null, true); - var elementModel = TagTool.makeElement(w, h, planeMat, midPt, newCanvas); - ElementMediator.addElement(newCanvas, elementModel.data, true); + if (!canvas) { + var newCanvas = NJUtils.makeNJElement("canvas", "Brushstroke", "shape", null, true); + var elementModel = TagTool.makeElement(w, h, planeMat, midPt, newCanvas); + ElementMediator.addElement(newCanvas, elementModel.data, true); - // create all the GL stuff - var world = this.getGLWorld(newCanvas, this._useWebGL); - //store a reference to this newly created canvas - this._brushStrokeCanvas = newCanvas; + // create all the GL stuff + var world = this.getGLWorld(newCanvas, this._useWebGL); + //store a reference to this newly created canvas + this._brushStrokeCanvas = newCanvas; - var brushStroke = this._selectedBrushStroke; - if (brushStroke){ - brushStroke.setWorld(world); + var brushStroke = this._selectedBrushStroke; + if (brushStroke){ + brushStroke.setWorld(world); - brushStroke.setPlaneMatrix(planeMat); - var planeMatInv = glmat4.inverse( planeMat, [] ); - brushStroke.setPlaneMatrixInverse(planeMatInv); - brushStroke.setPlaneCenter(midPt); + brushStroke.setPlaneMatrix(planeMat); + var planeMatInv = glmat4.inverse( planeMat, [] ); + brushStroke.setPlaneMatrixInverse(planeMatInv); + brushStroke.setPlaneCenter(midPt); - world.addObject(brushStroke); - world.render(); - //TODO this will not work if there are multiple shapes in the same canvas - newCanvas.elementModel.shapeModel.GLGeomObj = brushStroke; - } - } //if (!canvas) { - else { - - var world = null; - if (canvas.elementModel.shapeModel && canvas.elementModel.shapeModel.GLWorld) { - world = canvas.elementModel.shapeModel.GLWorld; - } else { - world = this.getGLWorld(canvas, this._useWebGL);//this.options.use3D);//this.CreateGLWorld(planeMat, midPt, canvas, this._useWebGL);//fillMaterial, strokeMaterial); - } + world.addObject(brushStroke); + world.render(); + //TODO this will not work if there are multiple shapes in the same canvas + newCanvas.elementModel.shapeModel.GLGeomObj = brushStroke; + } + } //if (!canvas) { + else { + var world = null; + if (canvas.elementModel.shapeModel && canvas.elementModel.shapeModel.GLWorld) { + world = canvas.elementModel.shapeModel.GLWorld; + } else { + world = this.getGLWorld(canvas, this._useWebGL); + } - if (this._entryEditMode !== this.ENTRY_SELECT_CANVAS){ - //update the left and top of the canvas element - var canvasArray=[canvas]; - ElementMediator.setProperty(canvasArray, "left", [parseInt(left)+"px"],"Changing", "brushTool"); - ElementMediator.setProperty(canvasArray, "top", [parseInt(top) + "px"],"Changing", "brushTool"); - canvas.width = w; - canvas.height = h; - //update the viewport and projection to reflect the new canvas width and height - world.setViewportFromCanvas(canvas); - if (this._useWebGL){ - var cam = world.renderer.cameraManager().getActiveCamera(); - cam.setPerspective(world.getFOV(), world.getAspect(), world.getZNear(), world.getZFar()); + + if (this._entryEditMode !== this.ENTRY_SELECT_CANVAS){ + //update the left and top of the canvas element + var canvasArray=[canvas]; + ElementMediator.setProperty(canvasArray, "left", [parseInt(left)+"px"],"Changing", "brushTool"); + ElementMediator.setProperty(canvasArray, "top", [parseInt(top) + "px"],"Changing", "brushTool"); + canvas.width = w; + canvas.height = h; + //update the viewport and projection to reflect the new canvas width and height + world.setViewportFromCanvas(canvas); + if (this._useWebGL){ + var cam = world.renderer.cameraManager().getActiveCamera(); + cam.setPerspective(world.getFOV(), world.getAspect(), world.getZNear(), world.getZFar()); + } } - } - var brushStroke = this._selectedBrushStroke; + var brushStroke = this._selectedBrushStroke; - if (brushStroke){ - brushStroke.setDrawingTool(this); + if (brushStroke){ + brushStroke.setDrawingTool(this); - brushStroke.setPlaneMatrix(planeMat); - var planeMatInv = glmat4.inverse( planeMat, [] ); - brushStroke.setPlaneMatrixInverse(planeMatInv); - brushStroke.setPlaneCenter(midPt); + brushStroke.setPlaneMatrix(planeMat); + var planeMatInv = glmat4.inverse( planeMat, [] ); + brushStroke.setPlaneMatrixInverse(planeMatInv); + brushStroke.setPlaneCenter(midPt); - brushStroke.setWorld(world); - world.addIfNewObject(brushStroke); - //world.addObject(subpath); - world.render(); - //TODO this will not work if there are multiple shapes in the same canvas - canvas.elementModel.shapeModel.GLGeomObj = brushStroke; - } - } //else of if (!canvas) { - } //value: function (w, h, planeMat, midPt, canvas) { - }, //RenderShape: { + brushStroke.setWorld(world); + world.addIfNewObject(brushStroke); + //world.addObject(subpath); + world.render(); + //TODO this will not work if there are multiple shapes in the same canvas + canvas.elementModel.shapeModel.GLGeomObj = brushStroke; + } + } //else of if (!canvas) { + } //value: function (w, h, planeMat, midPt, canvas) { + }, //RenderShape: { + Configure: { value: function (wasSelected) { if (wasSelected) { - console.log("Picked BrushTool"); - //todo these calls have no effect because the drawing-tool-base (in getInitialSnapPoint) overrides them with what's set at the application level - snapManager.enableElementSnap(false); - snapManager.enableGridSnap(false); - snapManager.enableSnapAlign(false); + console.log("Entered BrushTool"); } else { console.log("Left BrushTool"); -- cgit v1.2.3 From fcb12cc09eb3cd3b42bd215877ba18f449275b75 Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Fri, 10 Feb 2012 14:16:56 -0800 Subject: render the brush stroke as a sequence of rectangles, with each rectangle having its own linear gradient --- js/helper-classes/RDGE/GLBrushStroke.js | 78 ++++++++++++++++++++++++++++----- 1 file changed, 66 insertions(+), 12 deletions(-) (limited to 'js') diff --git a/js/helper-classes/RDGE/GLBrushStroke.js b/js/helper-classes/RDGE/GLBrushStroke.js index 59017a0c..8fb6ab25 100644 --- a/js/helper-classes/RDGE/GLBrushStroke.js +++ b/js/helper-classes/RDGE/GLBrushStroke.js @@ -76,7 +76,7 @@ function GLBrushStroke() { var prevPt = this._Points[numPoints-1]; var diffPt = [prevPt[0]-pt[0], prevPt[1]-pt[1]]; var diffPtMag = diffPt[0]*diffPt[0] + diffPt[1]*diffPt[1]; - if (diffPtMag<4) + if (diffPtMag<16)//TODO hook this up to the variable that measures flow/wetness of the paint brush...a smaller number-> more samples doAddPoint=false; } if (doAddPoint) { @@ -184,7 +184,6 @@ function GLBrushStroke() { var bboxHeight = bboxMax[1] - bboxMin[1]; ctx.clearRect(0, 0, bboxWidth, bboxHeight); - /* ctx.lineWidth = this._strokeWidth; ctx.strokeStyle = "black"; @@ -205,31 +204,87 @@ function GLBrushStroke() { ctx.stroke(); */ - var firstPt = this._Points[0]; - var prevX = firstPt[0]-bboxMin[0]; - var prevY = firstPt[1]-bboxMin[1]; + var isDebug = false; + var prevPt = this._Points[0]; + var prevX = prevPt[0]-bboxMin[0]; + var prevY = prevPt[1]-bboxMin[1]; + prevPt = [prevX,prevY]; for (var i = 1; i < numPoints; i++) { var pt = this._Points[i]; ctx.globalCompositeOperation = 'source-over'; var x = pt[0]-bboxMin[0]; var y = pt[1]-bboxMin[1]; - var r = ctx.createLinearGradient(prevX, prevY, x, y); - r.addColorStop(1, 'rgba(0,0,0,0.01)'); - r.addColorStop(0.5,'rgba(255,0,0,1.0)'); - r.addColorStop(0, 'rgba(0,0,0,0.01)'); + pt = [x,y]; - ctx.fillStyle = r; - //ctx.fillStyle = "rgba(0,128,0,0.15)"; + //vector from prev to current pt + var seg = VecUtils.vecSubtract(2, pt, prevPt); + var segDir = VecUtils.vecNormalize(2, seg, 1.0); + + var segMidPt = VecUtils.vecInterpolate(2, pt, prevPt, 0.5); var w2 = this._strokeWidth*0.5; + var segDirOrtho = [w2*segDir[1], -w2*segDir[0]]; + + //add half the strokewidth to the segMidPt + var lgStart = VecUtils.vecAdd(2, segMidPt, segDirOrtho); + var lgEnd = VecUtils.vecSubtract(2, segMidPt, segDirOrtho); + + ctx.save(); + ctx.beginPath(); + + if (isDebug) { + ctx.strokeStyle="black"; + ctx.lineWidth = 1; + + ctx.moveTo(lgStart[0], lgStart[1]); + ctx.lineTo(lgEnd[0], lgEnd[1]); + ctx.stroke(); + } + + var lg = ctx.createLinearGradient(lgStart[0], lgStart[1], lgEnd[0], lgEnd[1]); + lg.addColorStop(1, 'rgba(0,0,0,0.0)'); + lg.addColorStop(0.5,'rgba(255,0,0,1.0)'); + lg.addColorStop(0, 'rgba(0,0,0,0.0)'); + ctx.fillStyle = lg; + + if (isDebug){ + ctx.strokeStyle="blue"; + ctx.lineWidth=0.5; + } ctx.moveTo(prevX-w2, prevY); ctx.lineTo(prevX+w2, prevY); ctx.lineTo(x+w2, y); ctx.lineTo(x-w2, y); + ctx.lineTo(prevX-w2, prevY); ctx.fill(); + ctx.closePath(); + ctx.restore(); + + prevPt = pt; prevX = x; prevY = y; } + + + if (isDebug) + ctx.stroke(); + + if (isDebug){ + //draw the skeleton of this stroke + ctx.lineWidth = 1; + ctx.strokeStyle = "black"; + var pt = this._Points[0]; + ctx.beginPath(); + ctx.moveTo(pt[0]-bboxMin[0],pt[1]-bboxMin[1]); + for (var i = 1; i < numPoints; i++) { + pt = this._Points[i]; + var x = pt[0]-bboxMin[0]; + var y = pt[1]-bboxMin[1]; + ctx.lineTo(x,y); + } + ctx.stroke(); + } + /* var R2 = this._strokeWidth; @@ -256,7 +311,6 @@ function GLBrushStroke() { //ctx.rect(x-R, y-R, R2, R2); } */ - ctx.restore(); } //render() -- cgit v1.2.3 From d0661d6c587aced68a68e36a5ec4e81f8a2096e8 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Thu, 23 Feb 2012 16:57:55 -0800 Subject: bug fixes for canvas 2d shape drawing. --- js/helper-classes/RDGE/GLCircle.js | 136 +++++++++++++++++----------------- js/helper-classes/RDGE/GLLine.js | 57 +++++++------- js/helper-classes/RDGE/GLRectangle.js | 61 ++++++++------- js/tools/LineTool.js | 5 +- 4 files changed, 128 insertions(+), 131 deletions(-) (limited to 'js') diff --git a/js/helper-classes/RDGE/GLCircle.js b/js/helper-classes/RDGE/GLCircle.js index 712544c0..656657f6 100755 --- a/js/helper-classes/RDGE/GLCircle.js +++ b/js/helper-classes/RDGE/GLCircle.js @@ -398,59 +398,58 @@ function GLCircle() // set up the fill style ctx.beginPath(); ctx.lineWidth = 0; - ctx.fillStyle = "#990000"; if (this._fillColor) { var c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")"; ctx.fillStyle = c; - } - // draw the fill - ctx.beginPath(); - var p = MathUtils.transformPoint( bezPts[0], mat ); - ctx.moveTo( p[0], p[1] ); - var index = 1; - while (index < n) - { - p0 = MathUtils.transformPoint( bezPts[index], mat ); - p1 = MathUtils.transformPoint( bezPts[index+1], mat ); + // draw the fill + ctx.beginPath(); + var p = MathUtils.transformPoint( bezPts[0], mat ); + ctx.moveTo( p[0], p[1] ); + var index = 1; + while (index < n) + { + p0 = MathUtils.transformPoint( bezPts[index], mat ); + p1 = MathUtils.transformPoint( bezPts[index+1], mat ); - x0 = p0[0]; y0 = p0[1]; - x1 = p1[0]; y1 = p1[1]; - ctx.quadraticCurveTo( x0, y0, x1, y1 ); - index += 2; - } + x0 = p0[0]; y0 = p0[1]; + x1 = p1[0]; y1 = p1[1]; + ctx.quadraticCurveTo( x0, y0, x1, y1 ); + index += 2; + } - if ( MathUtils.fpSign(innerRad) > 0) - { - xScale = 0.5*innerRad*this._width; - yScale = 0.5*innerRad*this._height; - mat[0] = xScale; - mat[5] = yScale; - - // get the bezier points - var bezPts = MathUtils.circularArcToBezier( Vector.create([0,0,0]), Vector.create([1,0,0]), -2.0*Math.PI ); - if (bezPts) + if ( MathUtils.fpSign(innerRad) > 0) { - var n = bezPts.length; - p = MathUtils.transformPoint( bezPts[0], mat ); - ctx.moveTo( p[0], p[1] ); - index = 1; - while (index < n) + xScale = 0.5*innerRad*this._width; + yScale = 0.5*innerRad*this._height; + mat[0] = xScale; + mat[5] = yScale; + + // get the bezier points + var bezPts = MathUtils.circularArcToBezier( Vector.create([0,0,0]), Vector.create([1,0,0]), -2.0*Math.PI ); + if (bezPts) { - p0 = MathUtils.transformPoint( bezPts[index], mat ); - p1 = MathUtils.transformPoint( bezPts[index+1], mat ); - - var x0 = p0[0], y0 = p0[1], - x1 = p1[0], y1 = p1[1]; - ctx.quadraticCurveTo( x0, y0, x1, y1 ); - index += 2; + var n = bezPts.length; + p = MathUtils.transformPoint( bezPts[0], mat ); + ctx.moveTo( p[0], p[1] ); + index = 1; + while (index < n) + { + p0 = MathUtils.transformPoint( bezPts[index], mat ); + p1 = MathUtils.transformPoint( bezPts[index+1], mat ); + + var x0 = p0[0], y0 = p0[1], + x1 = p1[0], y1 = p1[1]; + ctx.quadraticCurveTo( x0, y0, x1, y1 ); + index += 2; + } } } - } - // fill the path - ctx.fill(); + // fill the path + ctx.fill(); + } // calculate the stroke matrix xScale = 0.5*this._width - 0.5*lineWidth; @@ -461,35 +460,10 @@ function GLCircle() // set up the stroke style ctx.beginPath(); ctx.lineWidth = lineWidth; - ctx.strokeStyle = "#0000ff"; if (this._strokeColor) { var c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")"; ctx.strokeStyle = c; - } - - // draw the stroke - p = MathUtils.transformPoint( bezPts[0], mat ); - ctx.moveTo( p[0], p[1] ); - index = 1; - while (index < n) - { - var p0 = MathUtils.transformPoint( bezPts[index], mat ); - var p1 = MathUtils.transformPoint( bezPts[index+1], mat ); - - var x0 = p0[0], y0 = p0[1], - x1 = p1[0], y1 = p1[1]; - ctx.quadraticCurveTo( x0, y0, x1, y1 ); - index += 2; - } - - if (MathUtils.fpSign(innerRad) > 0) - { - // calculate the stroke matrix - xScale = 0.5*innerRad*this._width - 0.5*lineWidth; - yScale = 0.5*innerRad*this._height - 0.5*lineWidth; - mat[0] = xScale; - mat[5] = yScale; // draw the stroke p = MathUtils.transformPoint( bezPts[0], mat ); @@ -505,10 +479,34 @@ function GLCircle() ctx.quadraticCurveTo( x0, y0, x1, y1 ); index += 2; } - } - // render the stroke - ctx.stroke(); + if (MathUtils.fpSign(innerRad) > 0) + { + // calculate the stroke matrix + xScale = 0.5*innerRad*this._width - 0.5*lineWidth; + yScale = 0.5*innerRad*this._height - 0.5*lineWidth; + mat[0] = xScale; + mat[5] = yScale; + + // draw the stroke + p = MathUtils.transformPoint( bezPts[0], mat ); + ctx.moveTo( p[0], p[1] ); + index = 1; + while (index < n) + { + var p0 = MathUtils.transformPoint( bezPts[index], mat ); + var p1 = MathUtils.transformPoint( bezPts[index+1], mat ); + + var x0 = p0[0], y0 = p0[1], + x1 = p1[0], y1 = p1[1]; + ctx.quadraticCurveTo( x0, y0, x1, y1 ); + index += 2; + } + } + + // render the stroke + ctx.stroke(); + } } } diff --git a/js/helper-classes/RDGE/GLLine.js b/js/helper-classes/RDGE/GLLine.js index f715a43c..5228ac09 100755 --- a/js/helper-classes/RDGE/GLLine.js +++ b/js/helper-classes/RDGE/GLLine.js @@ -364,41 +364,40 @@ function GLLine( world, xOffset, yOffset, width, height, slope, strokeSize, stro var lineWidth = this._strokeWidth; ctx.beginPath(); ctx.lineWidth = lineWidth; - ctx.strokeStyle = "#0000ff"; if (this._strokeColor) { var c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")"; ctx.strokeStyle = c; - } - // get the points - var p0, p1; - var w = this._width, h = this._height; - if(this._slope === "vertical") - { - p0 = [0.5*w, 0]; - p1 = [0.5*w, h]; - } - else if(this._slope === "horizontal") - { - p0 = [0, 0.5*h]; - p1 = [w, 0.5*h]; - } - else if(this._slope > 0) - { - p0 = [this._xAdj, this._yAdj]; - p1 = [w - this._xAdj, h - this._yAdj]; - } - else - { - p0 = [this._xAdj, h - this._yAdj]; - p1 = [w - this._xAdj, this._yAdj]; - } + // get the points + var p0, p1; + var w = this._width, h = this._height; + if(this._slope === "vertical") + { + p0 = [0.5*w, 0]; + p1 = [0.5*w, h]; + } + else if(this._slope === "horizontal") + { + p0 = [0, 0.5*h]; + p1 = [w, 0.5*h]; + } + else if(this._slope > 0) + { + p0 = [this._xAdj, this._yAdj]; + p1 = [w - this._xAdj, h - this._yAdj]; + } + else + { + p0 = [this._xAdj, h - this._yAdj]; + p1 = [w - this._xAdj, this._yAdj]; + } - // draw the line - ctx.moveTo( p0[0], p0[1] ); - ctx.lineTo( p1[0], p1[1] ); - ctx.stroke(); + // draw the line + ctx.moveTo( p0[0], p0[1] ); + ctx.lineTo( p1[0], p1[1] ); + ctx.stroke(); + } } diff --git a/js/helper-classes/RDGE/GLRectangle.js b/js/helper-classes/RDGE/GLRectangle.js index 3c1cb7dc..cf9c123e 100755 --- a/js/helper-classes/RDGE/GLRectangle.js +++ b/js/helper-classes/RDGE/GLRectangle.js @@ -402,7 +402,6 @@ function GLRectangle() // set the fill ctx.beginPath(); - ctx.fillStyle = "#990000"; if (this._fillColor) { var c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")"; @@ -410,7 +409,6 @@ function GLRectangle() } // set the stroke - ctx.strokeStyle = "#0000ff"; if (this._strokeColor) { var c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")"; @@ -420,8 +418,8 @@ function GLRectangle() ctx.lineWidth = lw; var inset = Math.ceil( 0.5*lw ) + 0.5; this.renderPath( inset, ctx ); - ctx.fill(); - ctx.stroke(); + if (this._fillColor) ctx.fill(); + if (this._strokeColor) ctx.stroke(); ctx.closePath(); } @@ -777,15 +775,15 @@ RectangleFill.create = function( rectCtr, width, height, tlRad, blRad, brRad, } //refine the mesh for vertex deformations - if (material) - { - if (material.hasVertexDeformation()) - { - var paramRange = material.getVertexDeformationRange(); - var tolerance = material.getVertexDeformationTolerance(); - nVertices = ShapePrimitive.refineMesh( this.vertices, this.normals, this.uvs, this.indices, nVertices, paramRange, tolerance ); - } - } +// if (material) +// { +// if (material.hasVertexDeformation()) +// { +// var paramRange = material.getVertexDeformationRange(); +// var tolerance = material.getVertexDeformationTolerance(); +// nVertices = ShapePrimitive.refineMesh( this.vertices, this.normals, this.uvs, this.indices, nVertices, paramRange, tolerance ); +// } +// } // create the RDGE primitive var prim = ShapePrimitive.create(this.vertices, this.normals, this.uvs, this.indices, g_Engine.getContext().renderer.TRIANGLES, nVertices); @@ -1051,15 +1049,15 @@ RectangleStroke.create = function( rectCtr, width, height, strokeWidth, tlRad, } //refine the mesh for vertex deformations - if (material) - { - if (material.hasVertexDeformation()) - { - var paramRange = material.getVertexDeformationRange(); - var tolerance = material.getVertexDeformationTolerance(); - //nVertices = ShapePrimitive.refineMesh( this.vertices, this.normals, this.uvs, this.indices, nVertices, paramRange, tolerance ); - } - } +// if (material) +// { +// if (material.hasVertexDeformation()) +// { +// var paramRange = material.getVertexDeformationRange(); +// var tolerance = material.getVertexDeformationTolerance(); +// nVertices = ShapePrimitive.refineMesh( this.vertices, this.normals, this.uvs, this.indices, nVertices, paramRange, tolerance ); +// } +// } // create the RDGE primitive var prim = ShapePrimitive.create(this.vertices, this.normals, this.uvs, this.indices, g_Engine.getContext().renderer.TRIANGLES, nVertices); @@ -1144,19 +1142,18 @@ RectangleGeometry.create = function( ctr, width, height, material ) RectangleGeometry.pushIndices( 0, 3, 2 ); //refine the mesh for vertex deformations - if (material) - { - if (material.hasVertexDeformation()) - { - var paramRange = material.getVertexDeformationRange(); - var tolerance = material.getVertexDeformationTolerance(); - //nVertices = ShapePrimitive.refineMesh( this.vertices, this.normals, this.uvs, this.indices, nVertices, paramRange, tolerance ); - } - } +// if (material) +// { +// if (material.hasVertexDeformation()) +// { +// var paramRange = material.getVertexDeformationRange(); +// var tolerance = material.getVertexDeformationTolerance(); +// nVertices = ShapePrimitive.refineMesh( this.vertices, this.normals, this.uvs, this.indices, nVertices, paramRange, tolerance ); +// } +// } // create the RDGE primitive var prim = ShapePrimitive.create(this.vertices, this.normals, this.uvs, this.indices, g_Engine.getContext().renderer.TRIANGLES, nVertices); - //var prim = ShapePrimitive.create(this.vertices, this.normals, this.uvs, this.indices, g_Engine.getContext().renderer.LINES, nVertices); return prim; } diff --git a/js/tools/LineTool.js b/js/tools/LineTool.js index 233316a5..0a7c0534 100755 --- a/js/tools/LineTool.js +++ b/js/tools/LineTool.js @@ -42,7 +42,10 @@ exports.LineTool = Montage.create(ShapeTool, { } this._strokeSize = ShapesController.GetValueInPixels(this.options.strokeSize.value, this.options.strokeSize.units, null); - this._strokeColor = this.application.ninja.colorController.colorToolbar.stroke.color.css; + if (this.application.ninja.colorController.colorToolbar.stroke.color) + this._strokeColor = this.application.ninja.colorController.colorToolbar.stroke.color.css; + else + this._strokeColor = [0,0,0,1]; this.startDraw(event); } }, -- cgit v1.2.3 From 8578322c60adaaf65f37ba96f2a0f7ed9de8e1dc Mon Sep 17 00:00:00 2001 From: hwc487 Date: Mon, 27 Feb 2012 10:28:03 -0800 Subject: Fixed various rendering bugs. --- js/helper-classes/RDGE/GLCircle.js | 4 ++-- js/helper-classes/RDGE/GLGeomObj.js | 4 ++-- js/helper-classes/RDGE/GLLine.js | 2 +- js/helper-classes/RDGE/GLRectangle.js | 24 +++++++++++++++--------- js/helper-classes/RDGE/GLWorld.js | 2 +- 5 files changed, 21 insertions(+), 15 deletions(-) (limited to 'js') diff --git a/js/helper-classes/RDGE/GLCircle.js b/js/helper-classes/RDGE/GLCircle.js index 656657f6..15ed6b6d 100755 --- a/js/helper-classes/RDGE/GLCircle.js +++ b/js/helper-classes/RDGE/GLCircle.js @@ -47,8 +47,8 @@ function GLCircle() this._strokeWidth = strokeSize; this._innerRadius = innerRadius; - this._strokeColor = strokeColor; - this._fillColor = fillColor; + if (strokeColor) this._strokeColor = strokeColor; + if (fillColor) this._fillColor = fillColor; this._strokeStyle = strokeStyle; } diff --git a/js/helper-classes/RDGE/GLGeomObj.js b/js/helper-classes/RDGE/GLGeomObj.js index 5d7497ad..c1ee01ba 100755 --- a/js/helper-classes/RDGE/GLGeomObj.js +++ b/js/helper-classes/RDGE/GLGeomObj.js @@ -38,8 +38,8 @@ function GLGeomObj() this.m_world = null; // stroke and fill colors - this._strokeColor; - this._fillColor; + this._strokeColor = [0,0,0,0]; + this._fillColor = [0,0,0,0]; // stroke and fill materials this._fillMaterial; diff --git a/js/helper-classes/RDGE/GLLine.js b/js/helper-classes/RDGE/GLLine.js index 5228ac09..5b966896 100755 --- a/js/helper-classes/RDGE/GLLine.js +++ b/js/helper-classes/RDGE/GLLine.js @@ -43,7 +43,7 @@ function GLLine( world, xOffset, yOffset, width, height, slope, strokeSize, stro this._slope = slope; this._strokeWidth = strokeSize; - this._strokeColor = strokeColor; + if (strokeCOlor)this._strokeColor = strokeColor; this._strokeStyle = strokeStyle; this._scaleX = (world.getViewportWidth())/(world.getViewportHeight()); diff --git a/js/helper-classes/RDGE/GLRectangle.js b/js/helper-classes/RDGE/GLRectangle.js index cf9c123e..a801d3c4 100755 --- a/js/helper-classes/RDGE/GLRectangle.js +++ b/js/helper-classes/RDGE/GLRectangle.js @@ -400,27 +400,33 @@ function GLRectangle() var w = world.getViewportWidth(), h = world.getViewportHeight(); - // set the fill + // 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; + + ctx.lineWidth = lw; + var inset = Math.ceil( lw ) + 0.5; + this.renderPath( inset, ctx ); + ctx.fill(); + ctx.closePath(); } - // set the stroke + // render the stroke + ctx.beginPath(); if (this._strokeColor) { var c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")"; ctx.strokeStyle = c; - } - ctx.lineWidth = lw; - var inset = Math.ceil( 0.5*lw ) + 0.5; - this.renderPath( inset, ctx ); - if (this._fillColor) ctx.fill(); - if (this._strokeColor) ctx.stroke(); - ctx.closePath(); + ctx.lineWidth = lw; + var inset = Math.ceil( 0.5*lw ) + 0.5; + this.renderPath( inset, ctx ); + ctx.stroke(); + ctx.closePath(); + } } this.createStroke = function(ctr, width, height, strokeWidth, tlRad, blRad, brRad, trRad, material) diff --git a/js/helper-classes/RDGE/GLWorld.js b/js/helper-classes/RDGE/GLWorld.js index 0addcadc..646faa24 100755 --- a/js/helper-classes/RDGE/GLWorld.js +++ b/js/helper-classes/RDGE/GLWorld.js @@ -157,7 +157,7 @@ function GLWorld( canvas, use3D ) // change clear color //this.renderer.setClearFlags(g_Engine.getContext().DEPTH_BUFFER_BIT); - this.renderer.setClearColor([1.0, 1.0, 1.0, 0.0]); + this.renderer.setClearColor([0.0, 0.0, 0.0, 0.0]); //this.renderer.NinjaWorld = this; // create an empty scene graph -- cgit v1.2.3 From bfa895634324a78652f2a7eecf725d9c6030023f Mon Sep 17 00:00:00 2001 From: hwc487 Date: Mon, 27 Feb 2012 11:58:44 -0800 Subject: Changed the hardcoded publish setting for a PI fix. --- js/helper-classes/RDGE/GLWorld.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js') diff --git a/js/helper-classes/RDGE/GLWorld.js b/js/helper-classes/RDGE/GLWorld.js index 646faa24..8017207f 100755 --- a/js/helper-classes/RDGE/GLWorld.js +++ b/js/helper-classes/RDGE/GLWorld.js @@ -824,7 +824,7 @@ GLWorld.prototype.export = function() // we need 2 export modes: One for save/restore, one for publish. // hardcoding for now - var exportForPublish = true; + var exportForPublish = false; exportStr += "publish: " + exportForPublish + "\n"; if (exportForPublish) -- cgit v1.2.3 From ec5f81c6c0ccf865505ab82ebf9240c667f05c91 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Mon, 27 Feb 2012 12:07:30 -0800 Subject: Timeline: further work on clearTimeline method. --- .../Timeline/TimelinePanel.reel/TimelinePanel.html | 5 +++-- js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 18 ++++++++++++++---- 2 files changed, 17 insertions(+), 6 deletions(-) (limited to 'js') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html index 9d0b8210..65d2fa7b 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html @@ -32,7 +32,8 @@ "timetext" : {"#": "time_text"}, "timebar" : {"#": "time_bar"}, "container_tracks" : {"#" : "container-tracks"}, - "end_hottext" : {"@" : "endHottext"} + "end_hottext" : {"@" : "endHottext"}, + "getme" : {"#" : "getme"} } }, @@ -284,7 +285,7 @@
-
Master Layer
+
Master Layer
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 2143dafd..9519730e 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -172,6 +172,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { prepareForDraw:{ value:function () { this.eventManager.addEventListener( "onOpenDocument", this, false); + var that = this; + this.getme.addEventListener("click", function() { + that.clearTimelinePanel(); + }, false) } }, @@ -246,11 +250,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { clearTimelinePanel : { value: function() { console.log('clearing timeline...') - this.arrTracks = null; - this.arrLayers = null; + // update playhead position and time text + this.application.ninja.timeline.playhead.style.left = "-2px"; + this.application.ninja.timeline.playheadmarker.style.left = "0px"; + this.application.ninja.timeline.updateTimeText(0.00); + this.timebar.style.width = "0px"; + + this.arrTracks = []; + this.arrLayers = []; this.currentLayerNumber = 0; - this.currentLayerSelected = null; - this.currentTrackSelected = null; + this.currentLayerSelected = false; + this.currentTrackSelected = false; this.selectedKeyframes = []; this.selectedTweens = []; this._captureSelection = false; -- cgit v1.2.3 From a8bd1585ae83d4d304b9f9f41823bb3dcbff9e01 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Mon, 27 Feb 2012 12:14:29 -0800 Subject: Color fix for line shapes. --- js/helper-classes/RDGE/GLLine.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'js') diff --git a/js/helper-classes/RDGE/GLLine.js b/js/helper-classes/RDGE/GLLine.js index 5b966896..65e6ab1c 100755 --- a/js/helper-classes/RDGE/GLLine.js +++ b/js/helper-classes/RDGE/GLLine.js @@ -11,6 +11,10 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot /////////////////////////////////////////////////////////////////////// function GLLine( world, xOffset, yOffset, width, height, slope, strokeSize, strokeColor, strokeMaterial, strokeStyle, xAdj, yAdj) { + // initialize the inherited members + this.inheritedFrom = GLGeomObj; + this.inheritedFrom(); + /////////////////////////////////////////////////////////////////////// // Instance variables /////////////////////////////////////////////////////////////////////// @@ -43,7 +47,7 @@ function GLLine( world, xOffset, yOffset, width, height, slope, strokeSize, stro this._slope = slope; this._strokeWidth = strokeSize; - if (strokeCOlor)this._strokeColor = strokeColor; + if (strokeColor) this._strokeColor = strokeColor.slice(); this._strokeStyle = strokeStyle; this._scaleX = (world.getViewportWidth())/(world.getViewportHeight()); @@ -57,10 +61,6 @@ function GLLine( world, xOffset, yOffset, width, height, slope, strokeSize, stro this._materialDiffuse = [0.4, 0.4, 0.4, 1.0]; this._materialSpecular = [0.4, 0.4, 0.4, 1.0]; - // initialize the inherited members - this.inheritedFrom = GLGeomObj; - this.inheritedFrom(); - if(strokeMaterial) { this._strokeMaterial = strokeMaterial; -- cgit v1.2.3 From 5179adf63d25856a8ee96005678d7a6ac626cba6 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Mon, 27 Feb 2012 13:31:39 -0800 Subject: Timeline: More work on clear timeline method. --- js/panels/Timeline/Layer.reel/Layer.js | 1 - .../Timeline/TimelinePanel.reel/TimelinePanel.js | 53 +++++++++++++++++----- js/panels/Timeline/Tween.reel/Tween.js | 1 + 3 files changed, 43 insertions(+), 12 deletions(-) (limited to 'js') diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index e75b4d0f..d50360e6 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -509,7 +509,6 @@ var Layer = exports.Layer = Montage.create(Component, { this.styleCollapser.bypassAnimation = true; this.styleCollapser.toggle(); } - if (this.isSelected) { this.element.classList.add("selected"); } else { diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index d7ce7079..0feada6b 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -171,11 +171,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { /* === BEGIN: Draw cycle === */ prepareForDraw:{ value:function () { + this.initTimeline(); this.eventManager.addEventListener( "onOpenDocument", this, false); - var that = this; - this.getme.addEventListener("click", function() { - that.clearTimelinePanel(); - }, false) + this.eventManager.addEventListener("closeDocument", this, false); } }, @@ -198,6 +196,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, + + handleCloseDocument: { + value: function(event) { + this.clearTimelinePanel(); + } + }, willDraw:{ value:function () { if (this._isLayer) { @@ -209,10 +213,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { /* === END: Draw cycle === */ /* === BEGIN: Controllers === */ - initTimelineView:{ - value:function () { - var myIndex; - this.layout_tracks = this.element.querySelector(".layout-tracks"); + initTimeline : { + value: function() { + // Set up basic Timeline functions: event listeners, etc. Things that only need to be run once. + this.layout_tracks = this.element.querySelector(".layout-tracks"); this.layout_markers = this.element.querySelector(".layout_markers"); this.newlayer_button.identifier = "addLayer"; @@ -223,6 +227,13 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false); this.user_layers.addEventListener("scroll", this.updateLayerScroll.bind(this), false); this.end_hottext.addEventListener("changing", this.updateTrackContainerWidth.bind(this), false); + + } + }, + initTimelineView:{ + value:function () { + var myIndex; + this.drawTimeMarkers(); @@ -253,13 +264,27 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { clearTimelinePanel : { value: function() { - console.log('clearing timeline...') - // update playhead position and time text + // Remove events + this.eventManager.removeEventListener("deleteLayerClick", this, false); + this.eventManager.removeEventListener("newLayer", this, false); + this.eventManager.removeEventListener("deleteLayer", this, false); + this.eventManager.removeEventListener("layerBinding", this, false); + this.eventManager.removeEventListener("elementAdded", this, false); + this.eventManager.removeEventListener("elementDeleted", this, false); + this.eventManager.removeEventListener("deleteSelection", this, false); + this.eventManager.removeEventListener("selectionChange", this, true); + + // Reset visual appearance this.application.ninja.timeline.playhead.style.left = "-2px"; this.application.ninja.timeline.playheadmarker.style.left = "0px"; this.application.ninja.timeline.updateTimeText(0.00); this.timebar.style.width = "0px"; + // Clear variables--including repetitions. + this.hashInstance = null; + this.hashTrackInstance = null; + this.hashLayerNumber = null; + this.hashElementMapToLayer = null; this.arrTracks = []; this.arrLayers = []; this.currentLayerNumber = 0; @@ -271,6 +296,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this._openDoc = false; this.end_hottext.value = 25; this.updateTrackContainerWidth(); + + // Redraw all the things + this.layerRepetition.needsDraw = true; + this.trackRepetition.needsDraw = true; this.needsDraw = true; } }, @@ -502,6 +531,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { if(this._openDoc){ event.detail.ele.uuid =nj.generateRandom(); + console.log("in open doc") + console.log(event.detail.ele) thingToPush.elementsList.push(event.detail.ele); } @@ -657,7 +688,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { handleElementAdded:{ value:function (event) { - + console.log('called') event.detail.uuid=nj.generateRandom(); this.hashElementMapToLayer.setItem(event.detail.uuid, event.detail,this.currentLayerSelected); this.currentLayerSelected.elementsList.push(event.detail); diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index f6dbf32c..70b52297 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -140,6 +140,7 @@ var Tween = exports.Tween = Montage.create(Component, { value:function (event) { if (event.detail.source && event.detail.source !== "tween") { // check for correct element selection + console.log(this.application.ninja.selectedElements[0]._element) if (this.application.ninja.selectedElements[0]._element != this.parentComponent.parentComponent.animatedElement) { alert("Wrong element selected for this keyframe track"); } else { -- cgit v1.2.3 From b194efa0556806593b29eb197250df462e89fcc4 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Mon, 27 Feb 2012 14:03:11 -0800 Subject: Enable shift key constraint for Pan Tool. --- js/tools/PanTool.js | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) (limited to 'js') diff --git a/js/tools/PanTool.js b/js/tools/PanTool.js index 71301d46..0537a27b 100755 --- a/js/tools/PanTool.js +++ b/js/tools/PanTool.js @@ -81,6 +81,14 @@ exports.PanTool = Montage.create(toolBase, { this._altKeyDown = true; } + else if (event.shiftKey) + { + if (!this._shiftKeyDown) + { + this._shiftKeyDown = true; + this._shiftPt = this._lastGPt.slice(); + } + } } }, @@ -90,6 +98,10 @@ exports.PanTool = Montage.create(toolBase, { this._altKeyDown = false; } + else if (event.keyCode === Keyboard.SHIFT) + { + this._shiftKeyDown = false; + } } }, @@ -221,6 +233,7 @@ exports.PanTool = Montage.create(toolBase, var tmpLocal = MathUtils.transformAndDivideHomogeneousPoint( this._globalPt, globalToLocalMat ); this._lastGPt = this._globalPt.slice(); + this._shiftPt = this._lastGPt.slice(); this._lastY = this._lastGPt[1]; // set up the matrices we will be needing @@ -285,6 +298,16 @@ exports.PanTool = Montage.create(toolBase, this._globalPt[2] += dy; gPt = [this._lastGPt[0], this._lastGPt[1], this._globalPt[2]]; } + else if (this._shiftKeyDown) + { + var dx = Math.abs( this._shiftPt[0] - gPt[0] ), + dy = Math.abs( this._shiftPt[1] - gPt[1] ); + + if (dx >= dy) + gPt[1] = this._shiftPt[1]; + else + gPt[0] = this._shiftPt[0]; + } // update the scrollbars var deltaGPt = VecUtils.vecSubtract(2, gPt, this._lastGPt); -- cgit v1.2.3 From ef38731ae2769dcb2247db599cdfe62d38e34b28 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Mon, 27 Feb 2012 15:39:16 -0800 Subject: Reset translation values as well when double-clicking to reset the rotation values. Signed-off-by: Nivesh Rajbhandari --- js/tools/Rotate3DToolBase.js | 11 ++++------- js/tools/Translate3DToolBase.js | 1 - 2 files changed, 4 insertions(+), 8 deletions(-) (limited to 'js') diff --git a/js/tools/Rotate3DToolBase.js b/js/tools/Rotate3DToolBase.js index aa91b2f4..b04e8b0a 100755 --- a/js/tools/Rotate3DToolBase.js +++ b/js/tools/Rotate3DToolBase.js @@ -447,16 +447,13 @@ exports.Rotate3DToolBase = Montage.create(ModifierToolBase, { iMat; for(var i = 0; i < len; i++) { - // Reset to the identity matrix but retain the rotation values + // Reset to the identity matrix item = this._targets[i]; - elt = item.elt; - - // Reset to the identity matrix but retain the translation values iMat = Matrix.I(4); mat = item.mat; - iMat[12] = mat[12]; - iMat[13] = mat[13]; - iMat[14] = mat[14]; +// iMat[12] = mat[12]; +// iMat[13] = mat[13]; +// iMat[14] = mat[14]; dist = this._undoArray[i].dist; diff --git a/js/tools/Translate3DToolBase.js b/js/tools/Translate3DToolBase.js index cbf76830..3d9191da 100755 --- a/js/tools/Translate3DToolBase.js +++ b/js/tools/Translate3DToolBase.js @@ -85,7 +85,6 @@ exports.Translate3DToolBase = Montage.create(ModifierToolBase, { // Reset to the identity matrix but retain the rotation values item = this._targets[i]; - elt = item.elt; mat = item.mat.slice(0); mat[12] = 0; mat[13] = 0; -- cgit v1.2.3 From a70c62891d0c7dd032d9382c50d1555ab81c4e33 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Mon, 27 Feb 2012 16:24:13 -0800 Subject: Fixing tooltips and keyboard shortcuts for 3d tools. IKNinja-1014 and IKNinja-1015. Signed-off-by: Nivesh Rajbhandari --- js/data/tools-data.js | 6 +++--- js/mediators/keyboard-mediator.js | 7 +++++++ 2 files changed, 10 insertions(+), 3 deletions(-) (limited to 'js') diff --git a/js/data/tools-data.js b/js/data/tools-data.js index cf48757d..a3a30b57 100755 --- a/js/data/tools-data.js +++ b/js/data/tools-data.js @@ -37,7 +37,7 @@ exports.ToolsData = Montage.create(Montage, { "properties": "rotate3DProperties", "spriteSheet": true, "action": "Rotate3DTool", - "toolTip": "3D Rotate Object Tool (W)", + "toolTip": "3D Object Rotate Tool (W)", "cursor": "auto", "lastInGroup": false, "container": false, @@ -48,7 +48,7 @@ exports.ToolsData = Montage.create(Montage, { "properties": "translate3DProperties", "spriteSheet": true, "action": "Translate3DTool", - "toolTip": "3D Translate Object Tool (G)", + "toolTip": "3D Object Translate Tool (G)", "cursor": "auto", "lastInGroup": true, "container": false, @@ -195,7 +195,7 @@ exports.ToolsData = Montage.create(Montage, { "properties": "rotateStageProperties", "spriteSheet": true, "action": "RotateStageTool3D", - "toolTip": "3D Rotate Stage Tool", + "toolTip": "3D Stage Rotate Tool (M)", "cursor": "auto", "lastInGroup": false, "container": false, diff --git a/js/mediators/keyboard-mediator.js b/js/mediators/keyboard-mediator.js index 5b044f8a..a2589340 100755 --- a/js/mediators/keyboard-mediator.js +++ b/js/mediators/keyboard-mediator.js @@ -162,6 +162,13 @@ exports.KeyboardMediator = Montage.create(Component, { return; } + // Rotate Stage Tool is M + if(evt.keyCode === Keyboard.M ) { + evt.preventDefault(); + this.application.ninja.handleSelectTool({"detail": this.application.ninja.toolsData.defaultToolsData[13]}); + return; + } + // Hand tool if(evt.keyCode === Keyboard.H ) { evt.preventDefault(); -- cgit v1.2.3 From 445180591da04f681a22038600e8ab517b82c0ca Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Mon, 27 Feb 2012 20:26:49 -0800 Subject: Timeline: try to clean up bogus events manually. --- js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 8 ++++++++ js/panels/Timeline/Tween.reel/Tween.js | 6 +++++- 2 files changed, 13 insertions(+), 1 deletion(-) (limited to 'js') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 0feada6b..912dce83 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -273,6 +273,14 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.eventManager.removeEventListener("elementDeleted", this, false); this.eventManager.removeEventListener("deleteSelection", this, false); this.eventManager.removeEventListener("selectionChange", this, true); + + // Remove every event listener for every tween in TimelineTrack + for (var i = 0; i < this.arrTracks.length; i++) { + for (var j = 0; j < this.arrTracks[i].tweens.length; j++) { + //this.eventManager.removeEventListener("elementChange", this, false); + this.arrTracks[i].tweens[j].eventManager.removeEventListener("elementChange", this.arrTracks[i].tweens[j], false); + } + } // Reset visual appearance this.application.ninja.timeline.playhead.style.left = "-2px"; diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index 70b52297..a9ee1fec 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -138,9 +138,12 @@ var Tween = exports.Tween = Montage.create(Component, { handleElementChange:{ value:function (event) { + if (event.detail.source && event.detail.source !== "tween") { // check for correct element selection - console.log(this.application.ninja.selectedElements[0]._element) + console.log("handleElementChange! " + this.tweenID) + console.log(this.application.ninja.selectedElements[0]._element); + console.log(this.parentComponent.parentComponent.animatedElement); if (this.application.ninja.selectedElements[0]._element != this.parentComponent.parentComponent.animatedElement) { alert("Wrong element selected for this keyframe track"); } else { @@ -162,6 +165,7 @@ var Tween = exports.Tween = Montage.create(Component, { selectTween:{ value: function(){ // turn on event listener for element change + console.log('adding elementChange event listener for tween ' + this.tweenID) this.eventManager.addEventListener("elementChange", this, false); // select the containing layer -- cgit v1.2.3 From db5db0a92c1fb67eac262c33d4fbf776ceabbb3c Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Mon, 27 Feb 2012 21:17:29 -0800 Subject: breadcrumb cleanup and moving the resized on top of the timeline panel Signed-off-by: Valerio Virgillito --- .../bread-crumb-button.reel/bread-crumb-button.js | 26 ++++++++++++++-------- .../layout/bread-crumb.reel/bread-crumb.css | 5 ++--- .../layout/bread-crumb.reel/bread-crumb.html | 8 +++---- .../layout/bread-crumb.reel/bread-crumb.js | 15 +------------ js/ninja.reel/ninja.html | 14 ++++++++---- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 2 -- 6 files changed, 34 insertions(+), 36 deletions(-) (limited to 'js') diff --git a/js/components/layout/bread-crumb-button.reel/bread-crumb-button.js b/js/components/layout/bread-crumb-button.reel/bread-crumb-button.js index 3f5b87e1..c1ac99bd 100755 --- a/js/components/layout/bread-crumb-button.reel/bread-crumb-button.js +++ b/js/components/layout/bread-crumb-button.reel/bread-crumb-button.js @@ -17,6 +17,11 @@ exports.BreadcrumbButton = Montage.create(Component, { value: null }, + // Bound container for the button + container: { + value: null + }, + prepareForDraw: { value: function() { this.element.addEventListener("mousedown", this, false); @@ -25,27 +30,30 @@ exports.BreadcrumbButton = Montage.create(Component, { draw: { value: function() { + + // Temporary until we have the new template + /* + if(this.container.id === "UserContent") { + this.button.innerHTML = "Body"; + } else { + this.button.innerHTML = this.container.nodeName.toLowerCase(); + } + */ + // + if(this.data.element.id === "UserContent") { this.button.innerHTML = "Body"; } else { this.button.innerHTML = this.data.element.nodeName; } + } }, handleMousedown: { value: function(event) { - - //this.data.selected=true; NJevent('breadCrumbTrail',this.data); - //this.data.selected=false; - } } - - - - - }); \ No newline at end of file diff --git a/js/components/layout/bread-crumb.reel/bread-crumb.css b/js/components/layout/bread-crumb.reel/bread-crumb.css index cc984609..0ca8adec 100755 --- a/js/components/layout/bread-crumb.reel/bread-crumb.css +++ b/js/components/layout/bread-crumb.reel/bread-crumb.css @@ -4,12 +4,11 @@ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. */ -.bread_crumb{ +.breadcrumbTrail{ background-color: #282828; border-style: double; height: 26px; -} -.breadcrumbtrail{ + -webkit-box-flex: 0; } .bread_crumb_button{ diff --git a/js/components/layout/bread-crumb.reel/bread-crumb.html b/js/components/layout/bread-crumb.reel/bread-crumb.html index c1b9ed61..234596a6 100755 --- a/js/components/layout/bread-crumb.reel/bread-crumb.html +++ b/js/components/layout/bread-crumb.reel/bread-crumb.html @@ -16,7 +16,7 @@ "module": "js/components/layout/bread-crumb.reel", "name": "Breadcrumb", "properties": { - "element": {"#": "breadcrumb_trail"}, + "element": {"#": "breadcrumbTrail"}, "button" : {"@":"breadCrumbButton"}, "stylerepetition" : {"@":"repetition1"} @@ -60,11 +60,11 @@ -