From 91a9e02bff0397ec9b1f55fdf61cef72eb0d8a0f Mon Sep 17 00:00:00 2001 From: hwc487 Date: Tue, 8 May 2012 15:53:35 -0700 Subject: Radial gradients to match CSS --- js/lib/geom/circle.js | 3 ++ js/lib/geom/rectangle.js | 13 ++----- js/lib/geom/shape-primitive.js | 27 ++++++++++++++ js/lib/rdge/materials/material.js | 4 +++ js/lib/rdge/materials/radial-gradient-material.js | 43 ++++++++++++++++++++++- 5 files changed, 78 insertions(+), 12 deletions(-) (limited to 'js') diff --git a/js/lib/geom/circle.js b/js/lib/geom/circle.js index 0f1f49a9..afeed449 100755 --- a/js/lib/geom/circle.js +++ b/js/lib/geom/circle.js @@ -279,6 +279,7 @@ var Circle = function GLCircle() { if (fillPrim) { fillMaterial = this.makeFillMaterial(); + fillMaterial.fitToPrimitive( fillPrim ); this._primArray.push( fillPrim ); this._materialNodeArray.push( fillMaterial.getMaterialNode() ); @@ -286,6 +287,7 @@ var Circle = function GLCircle() { if (strokePrim0) { strokeMaterial0 = this.makeStrokeMaterial(); + strokeMaterial0.fitToPrimitive( strokePrim0 ); this._primArray.push( strokePrim0 ); this._materialNodeArray.push( strokeMaterial0.getMaterialNode() ); @@ -293,6 +295,7 @@ var Circle = function GLCircle() { if (strokePrim1) { strokeMaterial2 = this.makeStrokeMaterial(); + strokeMaterial2.fitToPrimitive( strokePrim1 ); this._primArray.push( strokePrim1 ); this._materialNodeArray.push( strokeMaterial2.getMaterialNode() ); diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js index 490a9a6f..296ed024 100755 --- a/js/lib/geom/rectangle.js +++ b/js/lib/geom/rectangle.js @@ -57,13 +57,10 @@ var Rectangle = function GLRectangle() { this._strokeStyle = strokeStyle; this._matrix = Matrix.I(4); - //this._matrix[12] = xoffset; - //this._matrix[13] = yoffset; } // the overall radius includes the fill and the stroke. separate the two based onthe stroke width // this._fillRad = this._radius - this._strokeWidth; - // var err = 0.05; var err = 0; this._fillWidth = this._width - this._strokeWidth + err; this._fillHeight = this._height - this._strokeWidth + err; @@ -116,18 +113,10 @@ var Rectangle = function GLRectangle() { return this._strokeColor; }; - //this.setStrokeColor = function(c) { - // this._strokeColor = c; - // }; - this.getFillColor = function() { return this._fillColor; }; - //this.setFillColor = function(c) { - // this._fillColor = c.slice(0); - // }; - this.getTLRadius = function() { return this._tlRadius; }; @@ -324,6 +313,7 @@ var Rectangle = function GLRectangle() { // stroke var strokeMaterial = this.makeStrokeMaterial(); var strokePrim = this.createStroke([x,y], 2*xFill, 2*yFill, strokeSize, tlRadius, blRadius, brRadius, trRadius, strokeMaterial); + strokeMaterial.fitToPrimitive( strokePrim ); this._primArray.push( strokePrim ); this._materialNodeArray.push( strokeMaterial.getMaterialNode() ); @@ -337,6 +327,7 @@ var Rectangle = function GLRectangle() { var fillMaterial = this.makeFillMaterial(); //console.log( "fillMaterial: " + fillMaterial.getName() ); var fillPrim = this.createFill([x,y], 2*xFill, 2*yFill, tlRadius, blRadius, brRadius, trRadius, fillMaterial); + fillMaterial.fitToPrimitive( fillPrim ); this._primArray.push( fillPrim ); this._materialNodeArray.push( fillMaterial.getMaterialNode() ); diff --git a/js/lib/geom/shape-primitive.js b/js/lib/geom/shape-primitive.js index 97873d32..9864a8e9 100644 --- a/js/lib/geom/shape-primitive.js +++ b/js/lib/geom/shape-primitive.js @@ -49,6 +49,33 @@ ShapePrimitive.create = function(coords, normals, uvs, indices, primType, ver return prim; }; +ShapePrimitive.getBounds = function( prim ) +{ + var verts = prim.bufferStreams[0]; + var nVerts = verts.length; + var xMin = verts[0], xMax = verts[0], + yMin = verts[1], yMax = verts[1], + zMin = verts[2], zMax = verts[2]; + + for (var index=3; index xMax) xMax = verts[index]; + + index++; + if (verts[index] < yMin) yMin = verts[index]; + else if (verts[index] > yMax) yMax = verts[index]; + + index++; + if (verts[index] < zMin) zMin = verts[index]; + else if (verts[index] > zMax) zMax = verts[index]; + + index++; + } + + return [xMin, yMin, zMin, xMax, yMax, zMax]; +}; + if (typeof exports === "object") { exports.ShapePrimitive = ShapePrimitive; } \ No newline at end of file diff --git a/js/lib/rdge/materials/material.js b/js/lib/rdge/materials/material.js index 276c7687..b96768b3 100755 --- a/js/lib/rdge/materials/material.js +++ b/js/lib/rdge/materials/material.js @@ -228,6 +228,10 @@ var Material = function GLMaterial( world ) { // animated materials should implement the update method }; + this.fitToPrimitive = function( prim ) { + // some materials need to preserve an aspect ratio - or someting else. + }; + this.registerTexture = function( texture ) { // the world needs to know about the texture map var world = this.getWorld(); diff --git a/js/lib/rdge/materials/radial-gradient-material.js b/js/lib/rdge/materials/radial-gradient-material.js index dd40d31d..a671ee42 100755 --- a/js/lib/rdge/materials/radial-gradient-material.js +++ b/js/lib/rdge/materials/radial-gradient-material.js @@ -6,6 +6,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot var MaterialParser = require("js/lib/rdge/materials/material-parser").MaterialParser; var Material = require("js/lib/rdge/materials/material").Material; +var ShapePrimitive = require("js/lib/geom/shape-primitive").ShapePrimitive; var RadialGradientMaterial = function RadialGradientMaterial() { /////////////////////////////////////////////////////////////////////// @@ -24,6 +25,9 @@ var RadialGradientMaterial = function RadialGradientMaterial() { this._colorStop4 = 1.0; // this._colorCount = 4; + var s = Math.sqrt( 2.0 ); + this._textureTransform = [s,0,0, 0,s,0, 0,0,1]; + /////////////////////////////////////////////////////////////////////// // Property Accessors /////////////////////////////////////////////////////////////////////// @@ -231,9 +235,45 @@ var RadialGradientMaterial = function RadialGradientMaterial() { this._shader['default'].u_colorStop3.set([s]); s = this.getColorStop4(); this._shader['default'].u_colorStop4.set([s]); + + this._shader['default'].u_texTransform.set( this._textureTransform ); } }; + this.fitToPrimitive = function( prim ) + { + var bounds = ShapePrimitive.getBounds( prim ); + if (bounds) + { + var dx = Math.abs( bounds[3] - bounds[0] ), + dy = Math.abs( bounds[4] - bounds[1] ); + if (dy == 0) dy = 1.0; + if (dx == 0) dx = 1.0; + var xScale = 2.0, yScale = 2.0; + if (dx > dy) + yScale *= dy/dx; + else + xScale *= dx/dy; + + // build the matrix - the translation to the origin, the scale, + // and the translation back to the center (hard coded at (0.5, 0.5) for now). + // the matrix is build directly instead of with matrix multiplications + // for efficiency, not to mention that the multiplication function does + // not exist for mat3's. + // the matrix as laid out below looks transposed - order is columnwise. + var xCtr = 0.5, yCtr = 0.5; + this._textureTransform = [ + xScale, 0.0, 0.0, + 0.0, yScale, 0.0, + xCtr*(1-xScale), yCtr*(1 - yScale), 1.0 + ]; + + if (this._shader && this._shader['default']) + this._shader['default'].u_texTransform.set( this._textureTransform ); + + } + }; + this.exportJSON = function () { var jObj = { @@ -316,7 +356,8 @@ var radialGradientMaterialDef = 'u_colorStop1': { 'type': 'float' }, 'u_colorStop2': { 'type': 'float' }, 'u_colorStop3': { 'type': 'float' }, - 'u_colorStop4': { 'type': 'float' } + 'u_colorStop4': { 'type': 'float' }, + 'u_texTransform': { 'type' : 'mat3' } //'u_colorCount': {'type' : 'int' } }, -- cgit v1.2.3 From 24417212f9fad7e992697e9370047fcf2f037913 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Tue, 8 May 2012 16:14:28 -0700 Subject: WebGL linear gradients to match CSS --- js/lib/rdge/materials/linear-gradient-material.js | 43 +++++++++++++++++++++-- 1 file changed, 41 insertions(+), 2 deletions(-) (limited to 'js') diff --git a/js/lib/rdge/materials/linear-gradient-material.js b/js/lib/rdge/materials/linear-gradient-material.js index 51a7430c..0df9511e 100755 --- a/js/lib/rdge/materials/linear-gradient-material.js +++ b/js/lib/rdge/materials/linear-gradient-material.js @@ -6,6 +6,7 @@ var MaterialParser = require("js/lib/rdge/materials/material-parser").MaterialParser; var Material = require("js/lib/rdge/materials/material").Material; +var ShapePrimitive = require("js/lib/geom/shape-primitive").ShapePrimitive; var LinearGradientMaterial = function LinearGradientMaterial() { /////////////////////////////////////////////////////////////////////// @@ -245,9 +246,46 @@ var LinearGradientMaterial = function LinearGradientMaterial() { this._shader['default'].u_colorStop4.set([s]); this.setAngle(this.getAngle()); - } + + this._shader['default'].u_texTransform.set( [1,0,0, 0,1,0, 0,0,1] ); + } }; + this.fitToPrimitive = function( prim ) + { + /* + var bounds = ShapePrimitive.getBounds( prim ); + if (bounds) + { + var dx = Math.abs( bounds[3] - bounds[0] ), + dy = Math.abs( bounds[4] - bounds[1] ); + if (dy == 0) dy = 1.0; + if (dx == 0) dx = 1.0; + var xScale = 2.0, yScale = 2.0; + if (dx > dy) + yScale *= dy/dx; + else + xScale *= dx/dy; + + // build the matrix - the translation to the origin, the scale, + // and the translation back to the center (hard coded at (0.5, 0.5) for now). + // the matrix is build directly instead of with matrix multiplications + // for efficiency, not to mention that the multiplication function does + // not exist for mat3's. + // the matrix as laid out below looks transposed - order is columnwise. + var xCtr = 0.5, yCtr = 0.5; + this._textureTransform = [ + xScale, 0.0, 0.0, + 0.0, yScale, 0.0, + 0.0, 0.0, 1.0 + ]; + + if (this._shader && this._shader['default']) + this._shader['default'].u_texTransform.set( this._textureTransform ); + } + */ + }; + this.exportJSON = function () { var jObj = { @@ -367,7 +405,8 @@ var linearGradientMaterialDef = 'u_colorStop2': { 'type' : 'float' }, 'u_colorStop3': { 'type' : 'float' }, 'u_colorStop4': { 'type' : 'float' }, - 'u_cos_sin_angle' : { 'type' : 'vec2' } + 'u_cos_sin_angle': { 'type' : 'vec2' }, + 'u_texTransform': { 'type' : 'mat3' } //'u_colorCount': {'type' : 'int' } }, -- cgit v1.2.3 From 3e82beb51fe3f596147e9d7f1c405d9a8c4df63b Mon Sep 17 00:00:00 2001 From: hwc487 Date: Tue, 8 May 2012 16:15:49 -0700 Subject: code cleanup for linear gradients. --- js/lib/rdge/materials/linear-gradient-material.js | 41 ----------------------- 1 file changed, 41 deletions(-) (limited to 'js') diff --git a/js/lib/rdge/materials/linear-gradient-material.js b/js/lib/rdge/materials/linear-gradient-material.js index 0df9511e..79f323db 100755 --- a/js/lib/rdge/materials/linear-gradient-material.js +++ b/js/lib/rdge/materials/linear-gradient-material.js @@ -133,12 +133,6 @@ var LinearGradientMaterial = function LinearGradientMaterial() { } }; - // this.getColorCount = function() { return this._colorCount; }; - // this.setColorCount = function(c) { this._colorCount = c; - // if (this._shader && this._shader['default']) - // this._shader['default'].u_colorCount.set([c]); - // }; - this.getAngle = function () { return this._angle; }; @@ -251,41 +245,6 @@ var LinearGradientMaterial = function LinearGradientMaterial() { } }; - this.fitToPrimitive = function( prim ) - { - /* - var bounds = ShapePrimitive.getBounds( prim ); - if (bounds) - { - var dx = Math.abs( bounds[3] - bounds[0] ), - dy = Math.abs( bounds[4] - bounds[1] ); - if (dy == 0) dy = 1.0; - if (dx == 0) dx = 1.0; - var xScale = 2.0, yScale = 2.0; - if (dx > dy) - yScale *= dy/dx; - else - xScale *= dx/dy; - - // build the matrix - the translation to the origin, the scale, - // and the translation back to the center (hard coded at (0.5, 0.5) for now). - // the matrix is build directly instead of with matrix multiplications - // for efficiency, not to mention that the multiplication function does - // not exist for mat3's. - // the matrix as laid out below looks transposed - order is columnwise. - var xCtr = 0.5, yCtr = 0.5; - this._textureTransform = [ - xScale, 0.0, 0.0, - 0.0, yScale, 0.0, - 0.0, 0.0, 1.0 - ]; - - if (this._shader && this._shader['default']) - this._shader['default'].u_texTransform.set( this._textureTransform ); - } - */ - }; - this.exportJSON = function () { var jObj = { -- cgit v1.2.3 From babfa5f1ca4f702920d81d7e12a90b12ffbf42d8 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Thu, 10 May 2012 16:53:18 -0700 Subject: Fixed an inaccuracy snapping to the stage. --- js/helper-classes/3D/snap-manager.js | 139 +++++++++++++++++++---------------- js/helper-classes/3D/view-utils.js | 5 ++ 2 files changed, 81 insertions(+), 63 deletions(-) (limited to 'js') diff --git a/js/helper-classes/3D/snap-manager.js b/js/helper-classes/3D/snap-manager.js index 6766ac7f..27a95941 100755 --- a/js/helper-classes/3D/snap-manager.js +++ b/js/helper-classes/3D/snap-manager.js @@ -230,64 +230,19 @@ var SnapManager = exports.SnapManager = Montage.create(Component, { else parentPt = [xScreen, yScreen, 0.0]; - var eyePt = []; - var vec = viewUtils.parentToChildVec(parentPt, stage, eyePt); - if (vec) - { - // activate the drag working plane - if (!snap3D && this.hasDragPlane()) - this.activateDragPlane(); - - // project to the working plane - var currentWorkingPlane = workingPlane.slice(0); - var wp = currentWorkingPlane.slice(0); - var mat = viewUtils.getMatrixFromElement(stage); - wp = MathUtils.transformPlane(wp, mat); - var projPt = MathUtils.vecIntersectPlane(eyePt, vec, wp); - if (projPt) - { - // the local point gets stored in the coordinate space of the plane - var wpMat = drawUtils.getPlaneToWorldMatrix(currentWorkingPlane, MathUtils.getPointOnPlane(currentWorkingPlane)); - projPt[3] = 1.0; - //var planeToViewMat = mat.multiply(wpMat); - var planeToViewMat = glmat4.multiply(mat, wpMat, []); - //var viewToPlaneMat = planeToViewMat.inverse(); - var viewToPlaneMat = glmat4.inverse( planeToViewMat, [] ); - var planePt = projPt.slice(0); - planePt[3] = 1.0; - //planePt = viewToPlaneMat.multiply(planePt); - planePt = glmat4.multiplyVec3( viewToPlaneMat, planePt ); - - // get the screen position of the projected point - viewUtils.setViewportObj(stage); - var offset = viewUtils.getElementOffset(stage); - offset[2] = 0; - var scrPt = viewUtils.viewToScreen(projPt); - //scrPt = scrPt.add(offset); - scrPt = vecUtils.vecAdd(3, scrPt, offset); - - // create the hit record - var hitRec = Object.create(HitRecord);//new HitRecord(); - hitRec.setLocalPoint(planePt); - hitRec.setPlaneMatrix( wpMat ); - hitRec.setScreenPoint(scrPt); - hitRec.setPlane(currentWorkingPlane); - hitRec.setType( hitRec.SNAP_TYPE_STAGE ); - hitRec.setElt( stage ); - if (quadPt) hitRec.setUseQuadPoint( true ); - - // try snapping to the 3D grid, or to the stage boundaries if the grid is not displayed - if (this.gridSnapEnabled()) - this.snapToGrid( hitRec ); - - // save the hit record - hitRecArray.push( hitRec ); - - // restore the original working plane - if (!snap3D && this.hasDragPlane()) - this.deactivateDragPlane(); - } - } + var hitRec = this.snapToStage( parentPt, quadPt ); + + // try snapping to the 3D grid, or to the stage boundaries if the grid is not displayed + if (this.gridSnapEnabled()) + this.snapToGrid( hitRec ); + + // save the hit record + hitRecArray.push( hitRec ); + + // restore the original working plane + if (!snap3D && this.hasDragPlane()) + this.deactivateDragPlane(); + } //if (hitRecArray.length == 0) var rtnHit; @@ -312,6 +267,62 @@ var SnapManager = exports.SnapManager = Montage.create(Component, { } }, + snapToStage: + { + value: function( scrPt, quadPt ) + { + var stage = this.getStage(); + var l2g = viewUtils.getLocalToGlobalMatrix( stage ); + var g2l = glmat4.inverse( l2g, [] ); + + var pt0 = scrPt.slice(), pt1 = scrPt.slice(); + pt0[2] = 0.0; pt1[2] = 10; + + var localPt0 = MathUtils.transformAndDivideHomogeneousPoint( pt0, g2l ), + localPt1 = MathUtils.transformAndDivideHomogeneousPoint( pt1, g2l ); + + var stageWorldPt0 = viewUtils.localToStageWorld( localPt0, stage ), + stageWorldPt1 = viewUtils.localToStageWorld( localPt1, stage ); + var vec = vecUtils.vecSubtract( 3, stageWorldPt1, stageWorldPt0 ); + + var ptOnWorkingPlane = MathUtils.vecIntersectPlane(stageWorldPt0, vec, workingPlane); + + var wpMat = drawUtils.getPlaneToWorldMatrix(workingPlane, MathUtils.getPointOnPlane(workingPlane)), + wpMatInv = glmat4.inverse( wpMat, [] ); + var localPt = MathUtils.transformPoint( ptOnWorkingPlane, wpMatInv ); + + // create the hit record + var hitRec = Object.create(HitRecord); + hitRec.setLocalPoint( localPt ); + hitRec.setPlaneMatrix( wpMat ); + hitRec.setScreenPoint(scrPt); + hitRec.setPlane(workingPlane); + hitRec.setType( hitRec.SNAP_TYPE_STAGE ); + hitRec.setElt( stage ); + if (quadPt) hitRec.setUseQuadPoint( true ); + + // DEBUG CODE + // check that the point is on the working plane + var tmpStageWorldPt = hitRec.calculateStageWorldPoint(); + var err = vecUtils.vecDot(3, tmpStageWorldPt, workingPlane) + workingPlane[3]; + if (MathUtils.fpSign(err) !== 0) + console.log( "snapToStage (function) not on working plane: " + err ); + ////////////////////////////////////////////////////////////////////// + + var calculatedScreenPt = hitRec.calculateScreenPoint(); + hitRec.setScreenPoint(calculatedScreenPt); + + // DEBUG CODE + // check that the point is on the working plane + var err2 = vecUtils.vecDist(2, calculatedScreenPt, scrPt ); + if (MathUtils.fpSign(err2) !== 0) + console.log( "snapToStage (function) error in screen point: " + err2 ); + ////////////////////////////////////////////////////////////////////// + + return hitRec; + } + }, + snapToGrid : { value: function( hitRec ) { @@ -481,7 +492,7 @@ var SnapManager = exports.SnapManager = Montage.create(Component, { this._elementCache = null; } - //console.log( "clear 2D cache" ); + console.log( "clear 2D cache" ); } }, @@ -494,7 +505,7 @@ var SnapManager = exports.SnapManager = Montage.create(Component, { this.hLoadElementCache( stage, plane, 0 ); this._isCacheInvalid = false; - //console.log( "2D cache loaded with " + this._elementCache.length + " elements" ); + console.log( "2D cache loaded with " + this._elementCache.length + " elements" ); } }, @@ -1779,7 +1790,7 @@ var SnapManager = exports.SnapManager = Montage.create(Component, { if (hSnap && vSnap) { - //console.log( "\tmerge 1" ); + console.log( "\tmerge 1" ); // intersect the 2 lines on the plane var hPt = hSnap.getLocalPoint(), @@ -1828,7 +1839,7 @@ var SnapManager = exports.SnapManager = Montage.create(Component, { if (hSnap && vSnap) { - //console.log( "\tmerge 2" ); + console.log( "\tmerge 2" ); // intersect the 2 lines on the plane var hPt = hSnap.getLocalPoint(), @@ -1881,7 +1892,7 @@ var SnapManager = exports.SnapManager = Montage.create(Component, { if (hSnap && vSnap) { - //console.log( "merge edge" ); + console.log( "merge edge" ); var hPt = hSnap.getLocalPoint(), vPt = vSnap.getLocalPoint(); @@ -1945,6 +1956,8 @@ var SnapManager = exports.SnapManager = Montage.create(Component, { //this._globalToStageWorldMat = this._stageWorldToGlobalMat.inverse(); this._globalToStageWorldMat = glmat4.inverse( this._stageWorldToGlobalMat, [] ); + console.log( "setupDragPlane: " + this._dragPlane ); + // load the 2D elements this.load2DCache( this._dragPlane ); } diff --git a/js/helper-classes/3D/view-utils.js b/js/helper-classes/3D/view-utils.js index 919f7c50..48d4cacf 100755 --- a/js/helper-classes/3D/view-utils.js +++ b/js/helper-classes/3D/view-utils.js @@ -288,6 +288,11 @@ exports.ViewUtils = Montage.create(Component, { value: function( localPt, elt ) { this.pushViewportObj( elt ); var viewPt = this.screenToView( localPt[0], localPt[1], localPt[2] ); + if ((elt == null) || (elt === this._stageElement)) + { + this.popViewportObj(); + return viewPt; + } var mat = this.getMatrixFromElement( elt ); var worldPt = MathUtils.transformPoint( viewPt, mat ); var stageWorldPt = this.postViewToStageWorld( worldPt, elt ); -- cgit v1.2.3 From 753765b604c954cea782d129e4ddd6a0ff42b2b9 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Mon, 14 May 2012 09:22:00 -0700 Subject: removed some console output. --- js/helper-classes/3D/snap-manager.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'js') diff --git a/js/helper-classes/3D/snap-manager.js b/js/helper-classes/3D/snap-manager.js index 346ad014..99ef5006 100755 --- a/js/helper-classes/3D/snap-manager.js +++ b/js/helper-classes/3D/snap-manager.js @@ -492,7 +492,7 @@ var SnapManager = exports.SnapManager = Montage.create(Component, { this._elementCache = null; } - console.log( "clear 2D cache" ); + //console.log( "clear 2D cache" ); } }, @@ -505,7 +505,7 @@ var SnapManager = exports.SnapManager = Montage.create(Component, { this.hLoadElementCache( stage, plane, 0 ); this._isCacheInvalid = false; - console.log( "2D cache loaded with " + this._elementCache.length + " elements" ); + //console.log( "2D cache loaded with " + this._elementCache.length + " elements" ); } }, @@ -1956,7 +1956,7 @@ var SnapManager = exports.SnapManager = Montage.create(Component, { //this._globalToStageWorldMat = this._stageWorldToGlobalMat.inverse(); this._globalToStageWorldMat = glmat4.inverse( this._stageWorldToGlobalMat, [] ); - console.log( "setupDragPlane: " + this._dragPlane ); + //console.log( "setupDragPlane: " + this._dragPlane ); // load the 2D elements this.load2DCache( this._dragPlane ); -- cgit v1.2.3 From 904c7bfb65bb04400a0f63af1156cd9341958935 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Mon, 14 May 2012 15:11:22 -0700 Subject: Drag plane not being set. Injection from a recent checkin of mine. --- js/helper-classes/3D/snap-manager.js | 3 +++ js/helper-classes/3D/view-utils.js | 8 -------- 2 files changed, 3 insertions(+), 8 deletions(-) (limited to 'js') diff --git a/js/helper-classes/3D/snap-manager.js b/js/helper-classes/3D/snap-manager.js index 99ef5006..9bbbcf29 100755 --- a/js/helper-classes/3D/snap-manager.js +++ b/js/helper-classes/3D/snap-manager.js @@ -230,6 +230,9 @@ var SnapManager = exports.SnapManager = Montage.create(Component, { else parentPt = [xScreen, yScreen, 0.0]; + if (!snap3D && this._hasDragPlane) + this.activateDragPlane(); + var hitRec = this.snapToStage( parentPt, quadPt ); // try snapping to the 3D grid, or to the stage boundaries if the grid is not displayed diff --git a/js/helper-classes/3D/view-utils.js b/js/helper-classes/3D/view-utils.js index 48d4cacf..00124900 100755 --- a/js/helper-classes/3D/view-utils.js +++ b/js/helper-classes/3D/view-utils.js @@ -156,14 +156,6 @@ exports.ViewUtils = Montage.create(Component, { viewDir = MathUtils.transformVector( [0,0,1], stageInv ); } - /* - if (elt === stage) - { - xVec = [1,0,0]; - yVec = [0,1,0]; - } - */ - var plane; var xDot, yDot, zDot; switch (axis) -- cgit v1.2.3 From 00a2452d8158fdab00eec4bd5891b753c0b0ccf5 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Mon, 14 May 2012 15:58:39 -0700 Subject: removed console output. --- js/helper-classes/3D/snap-manager.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'js') diff --git a/js/helper-classes/3D/snap-manager.js b/js/helper-classes/3D/snap-manager.js index 9bbbcf29..97901d50 100755 --- a/js/helper-classes/3D/snap-manager.js +++ b/js/helper-classes/3D/snap-manager.js @@ -1793,7 +1793,7 @@ var SnapManager = exports.SnapManager = Montage.create(Component, { if (hSnap && vSnap) { - console.log( "\tmerge 1" ); + //console.log( "\tmerge 1" ); // intersect the 2 lines on the plane var hPt = hSnap.getLocalPoint(), @@ -1842,7 +1842,7 @@ var SnapManager = exports.SnapManager = Montage.create(Component, { if (hSnap && vSnap) { - console.log( "\tmerge 2" ); + //console.log( "\tmerge 2" ); // intersect the 2 lines on the plane var hPt = hSnap.getLocalPoint(), @@ -1895,7 +1895,7 @@ var SnapManager = exports.SnapManager = Montage.create(Component, { if (hSnap && vSnap) { - console.log( "merge edge" ); + //console.log( "merge edge" ); var hPt = hSnap.getLocalPoint(), vPt = vSnap.getLocalPoint(); @@ -2052,7 +2052,7 @@ var SnapManager = exports.SnapManager = Montage.create(Component, { var z = s0[2]; var typeStr = hitRec.getTypeString(); - console.log( "\ttype: " + typeStr + ", screen point z: " + hitRec.getScreenPoint()[2] + ", calculated z: " + z ); + //console.log( "\ttype: " + typeStr + ", screen point z: " + hitRec.getScreenPoint()[2] + ", calculated z: " + z ); } } } -- cgit v1.2.3 From 02e5fbb819f02d26a8a7179cf04021a0f6c6ddf6 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Mon, 14 May 2012 16:41:04 -0700 Subject: base canvas 2d rendering of radial gradient on size of the filled region only --- js/lib/geom/rectangle.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'js') diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js index cf0e7fc8..4415af43 100755 --- a/js/lib/geom/rectangle.js +++ b/js/lib/geom/rectangle.js @@ -537,7 +537,8 @@ exports.Rectangle = Object.create(GeomObj, { if(this._fillColor.gradientMode) { if(this._fillColor.gradientMode === "radial") { - gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(w, h)/2); + var ww = w - 2*lw, hh = h - 2*lw; + gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2-this._strokeWidth, h/2, Math.max(ww, hh)/2); } else { gradient = ctx.createLinearGradient(inset/2, h/2, w-inset, h/2); } -- cgit v1.2.3 From cb37bee07085690d72e69a82e76cae9166e5f0f1 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Tue, 15 May 2012 16:02:27 -0700 Subject: Gradient matching between WebGL and Canvas2D --- js/lib/geom/circle.js | 119 +++++--------- js/lib/geom/rectangle.js | 183 +++++++++++----------- js/lib/rdge/materials/radial-gradient-material.js | 31 ++-- 3 files changed, 156 insertions(+), 177 deletions(-) (limited to 'js') diff --git a/js/lib/geom/circle.js b/js/lib/geom/circle.js index b60ad58f..2ca4c1f5 100755 --- a/js/lib/geom/circle.js +++ b/js/lib/geom/circle.js @@ -505,9 +505,9 @@ exports.Circle = Object.create(GeomObj, { if(this._fillColor.gradientMode) { if(this._fillColor.gradientMode === "radial") { gradient = ctx.createRadialGradient(xCtr, yCtr, 0, - xCtr, yCtr, Math.max(this._width, this._height)/2); + xCtr, yCtr, Math.max(this._width, this._height)/2 - lineWidth); } else { - gradient = ctx.createLinearGradient(lineWidth/2, this._height/2, this._width-lineWidth, this._height/2); + gradient = ctx.createLinearGradient(lineWidth, this._height/2, this._width-lineWidth, this._height/2); } colors = this._fillColor.color; @@ -804,79 +804,44 @@ exports.Circle = Object.create(GeomObj, { } }, - /* - this.getNearPoint = function( pt, dir ) { - var world = this.getWorld(); - if (!world) throw( "null world in getNearPoint" ); - - // get a point on the plane of the circle - // the point is in NDC, as is the input parameters - var mat = this.getMatrix(); - var plane = [0,0,1,0]; - plane = MathUtils.transformPlane( plane, mat ); - var projPt = MathUtils.vecIntersectPlane ( pt, dir, plane ); - - // transform the projected point back to the XY plane - //var invMat = mat.inverse(); - var invMat = glmat4.inverse( mat, [] ); - var planePt = MathUtils.transformPoint( projPt, invMat ); - - // get the normalized device coordinates (NDC) for - // the position and radii. - var vpw = world.getViewportWidth(), vph = world.getViewportHeight(); - var xNDC = 2*this._xOffset/vpw, yNDC = -2*this._yOffset/vph, - xRadNDC = this._width/vpw, yRadNDC = this._height/vph; - var projMat = world.makePerspectiveMatrix(); - var z = -world.getViewDistance(); - var planePtNDC = planePt.slice(0); - planePtNDC[2] = z; - planePtNDC = MathUtils.transformHomogeneousPoint( planePtNDC, projMat ); - planePtNDC = MathUtils.applyHomogeneousCoordinate( planePtNDC ); - - // get the gl coordinates - var aspect = world.getAspect(); - var zn = world.getZNear(), zf = world.getZFar(); - var t = zn * Math.tan(world.getFOV() * Math.PI / 360.0), - b = -t, - r = aspect*t, - l = -r; - - var angle = Math.atan2( planePtNDC[1] - yNDC, planePtNDC[0] - xNDC ); - var degrees = angle*180.0/Math.PI; - var objPt = [Math.cos(angle)*xRadNDC + xNDC, Math.sin(angle)*yRadNDC + yNDC, 0]; - - // convert to GL coordinates - objPt[0] = -z*(r-l)/(2.0*zn)*objPt[0]; - objPt[1] = -z*(t-b)/(2.0*zn)*objPt[1]; - - // re-apply the transform - objPt = MathUtils.transformPoint( objPt, mat ); - - return objPt; - }; - */ - recalcTexMapCoords: { - value: function(vrts, uvs) { - var n = vrts.length/3; - var ivrt = 0, iuv = 0; - var uMin = 1.e8, uMax = -1.e8, - vMin = 1.e8, vMax = -1.e8; - - for (var i=0; i uMax) uMax = uvs[iuv]; - - iuv++; ivrt++; - uvs[iuv] = 0.5*(vrts[ivrt]/this._ovalHeight + 1); - if (uvs[iuv] < vMin) vMin = uvs[iuv]; - if (uvs[iuv] > vMax) vMax = uvs[iuv]; - iuv++; ivrt += 2; - } - - //console.log( "remap: " + uvs ); - //console.log( "uRange: " + uMin + " => " + uMax ); - //console.log( "vRange: " + vMin + " => " + vMax ); - } - } + recalcTexMapCoords: { + value: function(vrts, uvs) { + var n = vrts.length/3; + if (n === 0) return; + var ivrt = 0, iuv = 0; + var uMin = 1.e8, uMax = -1.e8, + vMin = 1.e8, vMax = -1.e8; + + var i, index = 3; + var xMin = vrts[0], xMax = vrts[0], + yMin = vrts[1], yMax = vrts[1]; + for (i=1; i xMax) xMax = vrts[index]; + + if (vrts[index+1] < yMin) yMin = vrts[index+1]; + else if (vrts[index+1] > yMax) yMax = vrts[index+1]; + + index += 3; + } + var ovalWidth = xMax - xMin, + ovalHeight = yMax - yMin; + for (i=0; i uMax) uMax = uvs[iuv]; + + iuv++; ivrt++; + uvs[iuv] = (vrts[ivrt]-yMin)/ovalHeight; + if (uvs[iuv] < vMin) vMin = uvs[iuv]; + if (uvs[iuv] > vMax) vMax = uvs[iuv]; + iuv++; ivrt += 2; + } + + //console.log( "remap" ); + //console.log( "uRange: " + uMin + " => " + uMax ); + //console.log( "vRange: " + vMin + " => " + vMax ); + } + } }); \ No newline at end of file diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js index 4415af43..8fc80c60 100755 --- a/js/lib/geom/rectangle.js +++ b/js/lib/geom/rectangle.js @@ -508,98 +508,99 @@ exports.Rectangle = Object.create(GeomObj, { }, render: { - value: function() { - // get the world - var world = this.getWorld(); - if (!world) throw( "null world in rectangle render" ); - - // get the context - var ctx = world.get2DContext(); - if (!ctx) return; - - // get some dimensions - 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) { - inset = Math.ceil( lw ) - 0.5; - - if(this._fillColor.gradientMode) { - if(this._fillColor.gradientMode === "radial") { + value: function() { + // get the world + var world = this.getWorld(); + if (!world) throw( "null world in rectangle render" ); + + // get the context + var ctx = world.get2DContext(); + if (!ctx) return; + + // get some dimensions + 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) { + inset = Math.ceil( lw ) - 0.5; + + if(this._fillColor.gradientMode) { + if(this._fillColor.gradientMode === "radial") { var ww = w - 2*lw, hh = h - 2*lw; - gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2-this._strokeWidth, h/2, Math.max(ww, hh)/2); - } else { - gradient = ctx.createLinearGradient(inset/2, h/2, w-inset, h/2); - } - colors = this._fillColor.color; - - len = colors.length; - - for(n=0; n --- js/controllers/document-controller.js | 2 +- js/document/document-html.js | 5 +++-- js/document/models/html.js | 5 +++++ js/ninja.reel/ninja.js | 2 +- js/stage/stage.reel/stage.js | 27 ++++++++++----------------- 5 files changed, 20 insertions(+), 21 deletions(-) (limited to 'js') diff --git a/js/controllers/document-controller.js b/js/controllers/document-controller.js index d99fadbb..7758f346 100755 --- a/js/controllers/document-controller.js +++ b/js/controllers/document-controller.js @@ -500,7 +500,7 @@ var DocumentController = exports.DocumentController = Montage.create(Component, if(currentDocument) { if(currentDocument.currentView === "design") { currentDocument.serializeDocument(); - this.application.ninja.selectionController._selectionContainer = null; + this.application.ninja._currentSelectedContainer = this.application.ninja.selectionController._selectionContainer = null; currentDocument.model.views.design.propertiesPanel.clear(); } diff --git a/js/document/document-html.js b/js/document/document-html.js index d6b4ba95..f92a425c 100755 --- a/js/document/document-html.js +++ b/js/document/document-html.js @@ -147,9 +147,10 @@ exports.HtmlDocument = Montage.create(Component, { this.model.userContentTop = this.application.ninja.stage._userContentTop; - // Serialize the selection + // Serialize the selection, the container and grid //TODO: Move this property to the design view class this.model.selection = this.application.ninja.selectedElements.slice(0); + this.model.selectionContainer = this.application.ninja.currentSelectedContainer; this.draw3DGrid = this.application.ninja.appModel.show3dGrid; // Serialize the undo @@ -177,7 +178,7 @@ exports.HtmlDocument = Montage.create(Component, { //TODO: Move this property to the design view class this.application.ninja.selectedElements = this.model.selection.slice(0); - +// this.application.ninja.currentSelectedContainer = this.model.selectionContainer; this.application.ninja.appModel.show3dGrid = this.draw3DGrid; // Serialize the undo diff --git a/js/document/models/html.js b/js/document/models/html.js index a97b4b5a..9cc8ce92 100755 --- a/js/document/models/html.js +++ b/js/document/models/html.js @@ -21,6 +21,11 @@ exports.HtmlDocumentModel = Montage.create(BaseDocumentModel, { // selection: { value: [] + }, + //////////////////////////////////////////////////////////////////// + // + selectionContainer: { + value: [] }, //////////////////////////////////////////////////////////////////// // diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js index 80d1b406..9f1d1b3b 100755 --- a/js/ninja.reel/ninja.js +++ b/js/ninja.reel/ninja.js @@ -296,7 +296,7 @@ exports.Ninja = Montage.create(Component, { this.currentDocument = this.documentController.activeDocument; if(this.currentDocument.documentRoot) { - this._currentSelectedContainer = this.selectionController._currentSelectedContainer = this.currentDocument.documentRoot; + this._currentSelectedContainer = this.selectionController._selectionContainer = this.currentDocument.documentRoot; } NJevent("switchDocument"); diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js index f768f03a..69cfa7ba 100755 --- a/js/stage/stage.reel/stage.js +++ b/js/stage/stage.reel/stage.js @@ -468,26 +468,19 @@ exports.Stage = Montage.create(Component, { */ handleScroll: { value: function() { - // TODO: Remove marker for old template: NINJA-STAGE-REWORK - if(this.application.ninja.currentDocument.documentRoot.id === "UserContent") { - this._scrollLeft = this._iframeContainer.scrollLeft; - this._scrollTop = this._iframeContainer.scrollTop; - this.userContentLeft = this._documentOffsetLeft - this._scrollLeft + this._userContentBorder; - this.userContentTop = this._documentOffsetTop - this._scrollTop + this._userContentBorder; - } else { - this._scrollLeft = this.application.ninja.currentDocument.model.views.design.document.body.scrollLeft; - this._scrollTop = this.application.ninja.currentDocument.model.views.design.document.body.scrollTop; + this._scrollLeft = this.application.ninja.currentDocument.model.views.design.document.body.scrollLeft; + this._scrollTop = this.application.ninja.currentDocument.model.views.design.document.body.scrollTop; - this.userContentLeft = this._documentOffsetLeft - this._scrollLeft; - this.userContentTop = this._documentOffsetTop - this._scrollTop; + this.userContentLeft = this._documentOffsetLeft - this._scrollLeft; + this.userContentTop = this._documentOffsetTop - this._scrollTop; + + // TODO - scroll events are not dependable. We may need to use a timer to simulate + // scrollBegin and scrollEnd. For now, the Pan Tool will keep track of the stage's scroll values + // on mouse down. + // this._maxHorizontalScroll = this.application.ninja.currentDocument.documentRoot.scrollWidth - this._canvas.width - 11; + // this._maxVerticalScroll = this.application.ninja.currentDocument.documentRoot.scrollHeight - this._canvas.height - 11; - // TODO - scroll events are not dependable. We may need to use a timer to simulate - // scrollBegin and scrollEnd. For now, the Pan Tool will keep track of the stage's scroll values - // on mouse down. -// this._maxHorizontalScroll = this.application.ninja.currentDocument.documentRoot.scrollWidth - this._canvas.width - 11; -// this._maxVerticalScroll = this.application.ninja.currentDocument.documentRoot.scrollHeight - this._canvas.height - 11; - } // Need to clear the snap cache and set up the drag plane //snapManager.setupDragPlaneFromPlane( workingPlane ); -- cgit v1.2.3 From a341522e3603c18ab3b93defa894e3be702dd0f4 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Tue, 22 May 2012 17:45:35 -0700 Subject: fixing the undefined 'color' issue Signed-off-by: Valerio Virgillito --- js/panels/properties.reel/properties.js | 32 ++++++++++++++-------- .../properties.reel/sections/custom.reel/custom.js | 2 +- 2 files changed, 22 insertions(+), 12 deletions(-) (limited to 'js') diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js index eb362796..b292a66a 100755 --- a/js/panels/properties.reel/properties.js +++ b/js/panels/properties.reel/properties.js @@ -48,6 +48,7 @@ exports.Properties = Montage.create(Component, { value : function() { this.eventManager.addEventListener("openDocument", this, false); this.eventManager.addEventListener("selectionChange", this, false); + this.eventManager.addEventListener("closeDocument", this, false); // This will be a toggle option if(this.application.ninja.appData.PILiveUpdate) { @@ -76,6 +77,12 @@ exports.Properties = Montage.create(Component, { } }, + handleCloseDocument: { + value: function(){ + this.clear(); + } + }, + /** * Blur and Key up to handle change in the Element ID field. */ @@ -172,6 +179,7 @@ exports.Properties = Montage.create(Component, { this.elementId.value = ""; this.elementClass.value = ""; this.customPi = null; + this.customSections = []; } }, @@ -211,27 +219,29 @@ exports.Properties = Montage.create(Component, { controls = this.customSections[n].content.controls; if(controls["colorSelect"]) { controls["colorSelect"].destroy(); - } else if(controls["stageBackground"]) { - controls["stageBackground"].destroy(); + } else if(controls["background"]) { + controls["background"].destroy(); } } this.customPi = el.elementModel.pi; this.displayCustomProperties(el, el.elementModel.pi); - } - // Root element color chip - if(isRoot) { - var backgroundChip = this.customSections[0].content.controls["background"]; - var rootBackgroundColor = ElementsMediator.getProperty(el, "background"); + // Root element color chip + if(isRoot) { + var backgroundChip = this.customSections[0].content.controls["background"]; + var rootBackgroundColor = ElementsMediator.getProperty(el, "background"); - if(rootBackgroundColor) { - backgroundChip.color = rootBackgroundColor; - } else { - backgroundChip.color = null; + if(rootBackgroundColor) { + backgroundChip.color = rootBackgroundColor; + } else { + backgroundChip.color = null; + } } } + + var previousInput = this.application.ninja.colorController.colorModel.input; customPI = PiData[this.customPi]; // Get all the custom section for the custom PI diff --git a/js/panels/properties.reel/sections/custom.reel/custom.js b/js/panels/properties.reel/sections/custom.reel/custom.js index 49b4414e..b1fd910d 100755 --- a/js/panels/properties.reel/sections/custom.reel/custom.js +++ b/js/panels/properties.reel/sections/custom.reel/custom.js @@ -400,7 +400,7 @@ exports.CustomSection = Montage.create(Component, { this.controls[aField.id] = obj; // TODO - Hack for now to reference the color select object to unregister color chips - this.controls["stageBackground"] = obj; + this.controls["background"] = obj; return obj; } -- cgit v1.2.3