From 0f2b7cf2e1aae16e3cf4e699ab7e3ca83deb1529 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Mon, 23 Apr 2012 11:32:15 -0700 Subject: limits --- js/tools/PanTool.js | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) (limited to 'js') diff --git a/js/tools/PanTool.js b/js/tools/PanTool.js index 0537a27b..ce7606a1 100755 --- a/js/tools/PanTool.js +++ b/js/tools/PanTool.js @@ -331,10 +331,26 @@ exports.PanTool = Montage.create(toolBase, if (!this._altKeyDown) delta[2] = 0; - var transMat = Matrix.Translation( delta ); - this._worldPt = wPt; + + // limit the change + var ucMat = viewUtils.getMatrixFromElement(this.application.ninja.currentDocument.documentRoot); + var tooMuch = false + if ((ucMat[12] > 12000) && (delta[0] > 0)) tooMuch = true; + if ((ucMat[12] < -12000) && (delta[0] < 0)) tooMuch = true; + if ((ucMat[13] > 12000) && (delta[1] > 0)) tooMuch = true; + if ((ucMat[13] < -12000) && (delta[1] < 0)) tooMuch = true; + if ((ucMat[14] > 12000) && (delta[2] > 0)) tooMuch = true; + if ((ucMat[14] < -12000) && (delta[2] < 0)) tooMuch = true; + if (tooMuch) + { + this._isDrawing = false; + delta = [0,0,0]; + } + else + this._worldPt = wPt; // update everything + var transMat = Matrix.Translation( delta ); this.applyDeltaMat( transMat ); } } -- cgit v1.2.3 From 27c1ba250a7db26cf24dd456d20af9ff1649e638 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Mon, 23 Apr 2012 17:04:48 -0700 Subject: canvas interaction --- js/document/html-document.js | 2 +- js/helper-classes/3D/snap-manager.js | 274 ++++++++++++++--------------------- js/lib/drawing/world.js | 9 +- js/lib/geom/circle.js | 8 +- js/lib/geom/rectangle.js | 39 +++-- js/tools/OvalTool.js | 2 +- js/tools/ShapeTool.js | 22 +-- 7 files changed, 161 insertions(+), 195 deletions(-) (limited to 'js') diff --git a/js/document/html-document.js b/js/document/html-document.js index 2531465d..cce88747 100755 --- a/js/document/html-document.js +++ b/js/document/html-document.js @@ -228,7 +228,7 @@ exports.HTMLDocument = Montage.create(TextDocument, { { // JSON format. pull off the importStr = importStr.substr( index+1 ); - jObj = jObj = JSON.parse( importStr ); + jObj = JSON.parse( importStr ); id = jObj.id; } else diff --git a/js/helper-classes/3D/snap-manager.js b/js/helper-classes/3D/snap-manager.js index cd8cc102..2c975985 100755 --- a/js/helper-classes/3D/snap-manager.js +++ b/js/helper-classes/3D/snap-manager.js @@ -1077,7 +1077,7 @@ var SnapManager = exports.SnapManager = Montage.create(Component, { var hitRec = this.snapToScreenBounds( elt, globalScrPt, bounds, bounds3D ); // see if we can snap to a contained geometry object - if (hitRec && this.getGLWorld(elt) && !this.isARectangle(elt)) + if (hitRec && this.getGLWorld(elt)) // && !this.isARectangle(elt)) { var localPt = hitRec.calculateElementWorldPoint(); if (hitRec.getType() != hitRec.SNAP_TYPE_ELEMENT) @@ -1320,193 +1320,135 @@ var SnapManager = exports.SnapManager = Montage.create(Component, { } }, - snapToContainedElement : + doSnapToContainedElement: { value: function( eyePt, dir, glObj, hitRec, targetScrPt ) { var rtnVal = false; - var elt = hitRec.getElement(); + var elt = hitRec.getElt(); var world = glObj.getWorld(); - switch (glObj.geomType()) + + var nearVrt = glObj.getNearVertex( eyePt, dir ); + if (nearVrt) { - case glObj.GEOM_TYPE_RECTANGLE: - break; + var viewPt = this.GLToView(nearVrt, world ); + var mat = viewUtils.getMatrixFromElement( elt ); + var worldPt = MathUtils.transformPoint( viewPt, mat ); - case glObj.GEOM_TYPE_CIRCLE: + viewUtils.pushViewportObj( elt ); + var scrPt = viewUtils.viewToScreen( worldPt ); + var offset = viewUtils.getElementOffset( elt ); + MathUtils.makeDimension3( offset ); + var parentPt = vecUtils.vecAdd(3, scrPt, offset ); + var globalPt = viewUtils.localToGlobal( parentPt, elt.offsetParent ); + + var dist = vecUtils.vecDist(2, globalPt, targetScrPt ); + if (dist < this.ELEMENT_VERTEX_HIT_RAD) + { + console.log( "hit a vertex" ); + + // check if the distance is less than + // the distance on the current hit record + if (dist <= vecUtils.vecDist(2, targetScrPt, hitRec.getScreenPoint() )) { - var nearVrt = glObj.getNearVertex( eyePt, dir ); - if (nearVrt) - { - var viewPt = this.GLToView(nearVrt, world ); - var mat = viewUtils.getMatrixFromElement( elt ); - var worldPt = MathUtils.transformPoint( viewPt, mat ); - - viewUtils.pushViewportObj( elt ); - var scrPt = viewUtils.viewToScreen( worldPt ); - var offset = viewUtils.getElementOffset( elt ); - MathUtils.makeDimension3( offset ); - var parentPt = vecUtils.vecAdd(3, scrPt, offset ); - var globalPt = viewUtils.localToGlobal( parentPt, elt.offsetParent ); - - var dist = vecUtils.vecDist(2, globalPt, targetScrPt ); - if (dist < this.ELEMENT_VERTEX_HIT_RAD) - { - // check if the distance is less than - // the distance on the current hit record - if (dist <= vecUtils.vecDist(2, targetScrPt, hitRec.getScreenPoint() )) - { - hitRec.setScreenPoint( globalPt ); - //var localMatInv = hitRec.getPlaneMatrix().inverse(); - var localMatInv = glmat4.inverse( hitRec.getPlaneMatrix(), []); - viewUtils.pushViewportObj( hitRec.getElement() ); - var localPt = viewUtils.screenToView( scrPt[0], scrPt[1], scrPt[2] ); - viewUtils.popViewportObj(); - localPt = MathUtils.transformPoint( localPt, localMatInv ); - hitRec.setLocalPoint( localPt ); - hitRec.setType( hitRec.SNAP_TYPE_CONTAINED_ELEMENT ); - - rtnVal = true; - } - } - } // if (nearVrt) + console.log( "rejected - further than existing snap" ); + + hitRec.setScreenPoint( globalPt ); + //var localMatInv = hitRec.getPlaneMatrix().inverse(); + var localMatInv = glmat4.inverse( hitRec.getPlaneMatrix(), []); + viewUtils.pushViewportObj( hitRec.getElement() ); + var localPt = viewUtils.screenToView( scrPt[0], scrPt[1], scrPt[2] ); + viewUtils.popViewportObj(); + localPt = MathUtils.transformPoint( localPt, localMatInv ); + hitRec.setLocalPoint( localPt ); + hitRec.setType( hitRec.SNAP_TYPE_CONTAINED_ELEMENT ); - if (!rtnVal) - { - var nearPt = glObj.getNearPoint( eyePt, dir ); - if (nearPt) - { - var viewPt = this.GLToView(nearPt, world ); - var mat = viewUtils.getMatrixFromElement( elt ); - var worldPt = MathUtils.transformPoint( viewPt, mat ); - - viewUtils.pushViewportObj( elt ); - var scrPt = viewUtils.viewToScreen( worldPt ); - var offset = viewUtils.getElementOffset( elt ); - MathUtils.makeDimension3( offset ); - var parentPt = vecUtils.vecAdd(3, scrPt, offset ); - var globalPt = viewUtils.localToGlobal( parentPt, elt.offsetParent ); - - var dist = vecUtils.vecDist(2, globalPt, targetScrPt ); - if (dist < this.ELEMENT_EDGE_HIT_RAD) - { - // check if the distance is less than - // the distance on the current hit record - //var dist2 = vecUtils.vecDist(2, targetScrPt, hitRec.getScreenPoint() ); - //if (dist <= dist2+1 ) - { - hitRec.setScreenPoint( globalPt ); - //var localMatInv = hitRec.getPlaneMatrix().inverse(); - var localMatInv = glmat4.inverse( hitRec.getPlaneMatrix(), []); - viewUtils.pushViewportObj( hitRec.getElement() ); - var localPt = viewUtils.screenToView( scrPt[0], scrPt[1], scrPt[2] ); - viewUtils.popViewportObj(); - localPt = MathUtils.transformPoint( localPt, localMatInv ); - hitRec.setLocalPoint( localPt ); - hitRec.setType( hitRec.SNAP_TYPE_CONTAINED_ELEMENT ); - - rtnVal = true; - } - } - } - } // if (!rtnVal) + rtnVal = true; + } + } + } - if (!rtnVal && glObj.containsPoint( eyePt, dir )) + if (!rtnVal) + { + var nearPt = glObj.getNearPoint( eyePt, dir ); + if (nearPt) + { + var viewPt = this.GLToView(nearPt, world ); + var mat = viewUtils.getMatrixFromElement( elt ); + var worldPt = MathUtils.transformPoint( viewPt, mat ); + + viewUtils.pushViewportObj( elt ); + var scrPt = viewUtils.viewToScreen( worldPt ); + var offset = viewUtils.getElementOffset( elt ); + MathUtils.makeDimension3( offset ); + var parentPt = vecUtils.vecAdd(3, scrPt, offset ); + var globalPt = viewUtils.localToGlobal( parentPt, elt.offsetParent ); + + var dist = vecUtils.vecDist(2, globalPt, targetScrPt ); + if (dist < this.ELEMENT_EDGE_HIT_RAD) + { + console.log( "hit an edge" ); + + // check if the distance is less than + // the distance on the current hit record + //var dist2 = vecUtils.vecDist(2, targetScrPt, hitRec.getScreenPoint() ); + //if (dist <= dist2+1 ) { + hitRec.setScreenPoint( globalPt ); + //var localMatInv = hitRec.getPlaneMatrix().inverse(); + var localMatInv = glmat4.inverse( hitRec.getPlaneMatrix(), []); + viewUtils.pushViewportObj( hitRec.getElement() ); + var localPt = viewUtils.screenToView( scrPt[0], scrPt[1], scrPt[2] ); + viewUtils.popViewportObj(); + localPt = MathUtils.transformPoint( localPt, localMatInv ); + hitRec.setLocalPoint( localPt ); + hitRec.setType( hitRec.SNAP_TYPE_CONTAINED_ELEMENT ); + rtnVal = true; } } + } + } // if (!rtnVal) + + if (!rtnVal && glObj.containsPoint( eyePt, dir )) + { + rtnVal = true; + } + + return rtnVal; + } + }, + + snapToContainedElement : + { + value: function( eyePt, dir, glObj, hitRec, targetScrPt ) + { + var rtnVal = false; + var elt = hitRec.getElement(); + + var world = glObj.getWorld(); + switch (glObj.geomType()) + { + case glObj.GEOM_TYPE_RECTANGLE: + if ((glObj.getWidth() != world.getViewportWidth()) || (glObj.getHeight() != world.getViewportHeight())) + rtnVal = this.doSnapToContainedElement( eyePt, dir, glObj, hitRec, targetScrPt ); + break; + + case glObj.GEOM_TYPE_CIRCLE: + rtnVal = this.doSnapToContainedElement( eyePt, dir, glObj, hitRec, targetScrPt ); break; case glObj.GEOM_TYPE_LINE: case glObj.GEOM_TYPE_PATH: // Snapping not implemented for these type, but don't throw an error... break; - case glObj.GEOM_TYPE_BRUSH_STROKE: + + case glObj.GEOM_TYPE_BRUSH_STROKE: break; //don't throw error because snapping not yet implemented - case glObj.GEOM_TYPE_CUBIC_BEZIER: - { - var nearVrt = glObj.getNearVertex( eyePt, dir ); - if (nearVrt) - { - var viewPt = this.GLToView(nearVrt, world ); - var mat = viewUtils.getMatrixFromElement( elt ); - var worldPt = MathUtils.transformPoint( viewPt, mat ); - - viewUtils.pushViewportObj( elt ); - var scrPt = viewUtils.viewToScreen( worldPt ); - var offset = viewUtils.getElementOffset( elt ); - MathUtils.makeDimension3( offset ); - var parentPt = vecUtils.vecAdd(3, scrPt, offset ); - var globalPt = viewUtils.localToGlobal( parentPt, elt.offsetParent ); - - var dist = vecUtils.vecDist(2, globalPt, targetScrPt ); - if (dist < this.ELEMENT_VERTEX_HIT_RAD) - { - // check if the distance is less than - // the distance on the current hit record - if (dist <= vecUtils.vecDist(2, targetScrPt, hitRec.getScreenPoint() )) - { - hitRec.setScreenPoint( globalPt ); - //var localMatInv = hitRec.getPlaneMatrix().inverse(); - var localMatInv = glmat4.inverse( hitRec.getPlaneMatrix(), []); - viewUtils.pushViewportObj( hitRec.getElement() ); - var localPt = viewUtils.screenToView( scrPt[0], scrPt[1], scrPt[2] ); - viewUtils.popViewportObj(); - localPt = MathUtils.transformPoint( localPt, localMatInv ); - hitRec.setLocalPoint( localPt ); - hitRec.setType( hitRec.SNAP_TYPE_CONTAINED_ELEMENT ); - - rtnVal = true; - } - } - } // if (nearVrt) - - if (!rtnVal) - { - var nearPt = glObj.getNearPoint( eyePt, dir ); - if (nearPt) - { - var viewPt = this.GLToView(nearPt, world ); - var mat = viewUtils.getMatrixFromElement( elt ); - var worldPt = MathUtils.transformPoint( viewPt, mat ); - - viewUtils.pushViewportObj( elt ); - var scrPt = viewUtils.viewToScreen( worldPt ); - var offset = viewUtils.getElementOffset( elt ); - MathUtils.makeDimension3( offset ); - var parentPt = vecUtils.vecAdd(3, scrPt, offset ); - var globalPt = viewUtils.localToGlobal( parentPt, elt.offsetParent ); - - var dist = vecUtils.vecDist(2, globalPt, targetScrPt ); - if (dist < this.ELEMENT_EDGE_HIT_RAD) - { - // check if the distance is less than - // the distance on the current hit record - //var dist2 = vecUtils.vecDist(2, targetScrPt, hitRec.getScreenPoint() ); - //if (dist <= dist2+1 ) - { - hitRec.setScreenPoint( globalPt ); - //var localMatInv = hitRec.getPlaneMatrix().inverse(); - var localMatInv = glmat4.inverse( hitRec.getPlaneMatrix(), []); - viewUtils.pushViewportObj( hitRec.getElement() ); - var localPt = viewUtils.screenToView( scrPt[0], scrPt[1], scrPt[2] ); - viewUtils.popViewportObj(); - localPt = MathUtils.transformPoint( localPt, localMatInv ); - hitRec.setLocalPoint( localPt ); - hitRec.setType( hitRec.SNAP_TYPE_CONTAINED_ELEMENT ); - - rtnVal = true; - } - } - } - } // if (!rtnVal) - - if (!rtnVal && glObj.containsPoint( eyePt, dir )) - { - rtnVal = true; - } - } + + case glObj.GEOM_TYPE_CUBIC_BEZIER: + rtnVal = this.doSnapToContainedElement( eyePt, dir, glObj, hitRec, targetScrPt ); break; default: throw new Error( "invalid GL geometry type: " + glObj.geomType() ); diff --git a/js/lib/drawing/world.js b/js/lib/drawing/world.js index 945c9883..8ad4c6f5 100755 --- a/js/lib/drawing/world.js +++ b/js/lib/drawing/world.js @@ -362,9 +362,9 @@ var World = function GLWorld( canvas, use3D, preserveDrawingBuffer ) { // start RDGE passing your runtime object, and false to indicate we don't need a an initialization state // in the case of a procedurally built scene an init state is not needed for loading data + this._canvas.rdgeid = this._canvas.getAttribute( "data-RDGE-id" ); if (this._useWebGL) { rdgeStarted = true; - this._canvas.rdgeid = this._canvas.getAttribute( "data-RDGE-id" ); RDGE.globals.engine.unregisterCanvas( this._canvas ); RDGE.globals.engine.registerCanvas(this._canvas, this); RDGE.RDGEStart( this._canvas ); @@ -835,8 +835,11 @@ World.prototype.importJSON = function (jObj) { // import the objects // there should be exactly one child of the parent object - if (jObj.children && (jObj.children.length === 1)) - this.importObjectsJSON( jObj.children[0] ); + if (jObj.children) + { + for (var i=0; i 0) { - ctx.quadraticCurveTo( inset, height-inset, inset+rad, height-inset ); + ctx.quadraticCurveTo( inset+xOff, height-inset+yOff, inset+rad+xOff, height-inset+yOff ); } // do the bottom of the rectangle @@ -392,11 +407,11 @@ var Rectangle = function GLRectangle() { rad = brRad - inset; if (rad < 0) rad = 0; pt[0] -= rad; - ctx.lineTo( pt[0], pt[1] ); + ctx.lineTo( pt[0]+xOff, pt[1]+yOff ); // get the bottom right arc if (MathUtils.fpSign(rad) > 0) { - ctx.quadraticCurveTo( width-inset, height-inset, width-inset, height-inset-rad ); + ctx.quadraticCurveTo( width-inset+xOff, height-inset+yOff, width-inset+xOff, height-inset-rad+yOff ); } // get the right of the rectangle @@ -404,11 +419,11 @@ var Rectangle = function GLRectangle() { rad = trRad - inset; if (rad < 0) rad = 0; pt[1] += rad; - ctx.lineTo( pt[0], pt[1] ); + ctx.lineTo( pt[0]+xOff, pt[1]+yOff ); // do the top right corner if (MathUtils.fpSign(rad) > 0) { - ctx.quadraticCurveTo( width-inset, inset, width-inset-rad, inset ); + ctx.quadraticCurveTo( width-inset+xOff, inset+yOff, width-inset-rad+xOff, inset+yOff ); } // do the top of the rectangle @@ -416,13 +431,13 @@ var Rectangle = function GLRectangle() { rad = tlRad - inset; if (rad < 0) rad = 0; pt[0] += rad; - ctx.lineTo( pt[0], pt[1] ); + ctx.lineTo( pt[0]+xOff, pt[1]+yOff ); // do the top left corner if (MathUtils.fpSign(rad) > 0) { - ctx.quadraticCurveTo( inset, inset, inset, inset+rad ); + ctx.quadraticCurveTo( inset+xOff, inset+yOff, inset+xOff, inset+rad+yOff ); } else { - ctx.lineTo( inset, 2*inset ); + ctx.lineTo( inset+xOff, 2*inset+yOff ); } } }; @@ -430,7 +445,7 @@ var Rectangle = function GLRectangle() { this.render = function() { // get the world var world = this.getWorld(); - if (!world) throw( "null world in rectangle render" ); + if (!world) throw( "null world in rectangle render" ); // get the context var ctx = world.get2DContext(); diff --git a/js/tools/OvalTool.js b/js/tools/OvalTool.js index e8e88d1d..6edec811 100755 --- a/js/tools/OvalTool.js +++ b/js/tools/OvalTool.js @@ -66,7 +66,7 @@ exports.OvalTool = Montage.create(ShapeTool, { var world = this.getGLWorld(canvas, this.options.use3D); var xOffset = ((left - canvas.offsetLeft + w/2) - canvas.width/2); - var yOffset = (canvas.height/2 - (top - canvas.offsetTop + h/2)); + var yOffset = -(canvas.height/2 - (top - canvas.offsetTop + h/2)); var oval = new Circle(); //GLCircle(); oval.init(world, xOffset, yOffset, w, h, strokeSize, strokeColor, fillColor, innerRadius, strokeMaterial, fillMaterial, strokeStyle); diff --git a/js/tools/ShapeTool.js b/js/tools/ShapeTool.js index f3b5e92d..b2948fe7 100755 --- a/js/tools/ShapeTool.js +++ b/js/tools/ShapeTool.js @@ -54,9 +54,9 @@ exports.ShapeTool = Montage.create(DrawingTool, { }, HandleLeftButtonUp: - { - value: function (event) - { + { + value: function (event) + { var drawData; drawData = this.getDrawingData(); @@ -69,24 +69,26 @@ exports.ShapeTool = Montage.create(DrawingTool, { drawData.planeMat, drawData.midPt, canvas, true); canvas.elementModel.isShape = true; - this.application.ninja.elementMediator.addElements(canvas, elementModel.data); } else { canvas = this._targetedElement; + if (!canvas.getAttribute( "data-RDGE-id" )) + canvas.setAttribute( "data-RDGE-id", NJUtils.generateRandom() ); canvas.elementModel.controller = ShapesController; if(!canvas.elementModel.shapeModel) { canvas.elementModel.shapeModel = Montage.create(ShapeModel); } } + this.application.ninja.elementMediator.addElements(canvas, canvas.elementModel.data); } - this.endDraw(event); + this.endDraw(event); - this._isDrawing = false; - this._hasDraw=false; + this._isDrawing = false; + this._hasDraw=false; - this.DrawHandles(); - } - }, + this.DrawHandles(); + } + }, onAddElements: { value: function(el) { -- cgit v1.2.3 From cec076988d3ff6547b7c9d74ebc80530ffcea67b Mon Sep 17 00:00:00 2001 From: hwc487 Date: Tue, 24 Apr 2012 17:16:29 -0700 Subject: Snapping tocontained objects --- js/lib/geom/circle.js | 53 ++++++++++++++++++++++++++++++++++++++++--- js/lib/geom/geom-obj.js | 59 ++++++++++++++++++++++++++++++++++++++++++++++++ js/lib/geom/rectangle.js | 1 - 3 files changed, 109 insertions(+), 4 deletions(-) (limited to 'js') diff --git a/js/lib/geom/circle.js b/js/lib/geom/circle.js index 896803bf..b7027eec 100755 --- a/js/lib/geom/circle.js +++ b/js/lib/geom/circle.js @@ -4,9 +4,12 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. */ -var GeomObj = require("js/lib/geom/geom-obj").GeomObj; -var ShapePrimitive = require("js/lib/geom/shape-primitive").ShapePrimitive; -var MaterialsModel = require("js/models/materials-model").MaterialsModel; +var GeomObj = require("js/lib/geom/geom-obj").GeomObj; +var ShapePrimitive = require("js/lib/geom/shape-primitive").ShapePrimitive; +var MaterialsModel = require("js/models/materials-model").MaterialsModel; +var drawUtils = require("js/helper-classes/3D/draw-utils").DrawUtils; +var vecUtils = require("js/helper-classes/3D/vec-utils").VecUtils; + /////////////////////////////////////////////////////////////////////// // Class GLCircle // GL representation of a circle. @@ -710,6 +713,49 @@ var Circle = function GLCircle() { return (MathUtils.fpCmp(distToPt,distToBoundary) <= 0); }; + this.getNearPoint = function( pt, dir ) + { + var world = this.getWorld(); + if (!world) throw( "null world in getNearPoint" ); + + // the input point and direction are in GL space + // project to the z == 0 plane + var mat = this.getMatrix(); + var plane = [0,0,1,0]; + plane = MathUtils.transformPlane( plane, mat ); + var projPt = MathUtils.vecIntersectPlane ( pt, dir, plane ); + + // get the center of the circle in GL space + var ctr = this.getGLCenter(); + + // transform the projected point to the plane of the circle + var planePt = MathUtils.transformPoint( projPt, mat ); + + // get a matrix mapping the circle to a 2D coordinate system + var normal = [ mat[8], mat[9], mat[10] ]; + var planeMat = drawUtils.getPlaneToWorldMatrix(normal, ctr); + var planeMatInv = glmat4.inverse( planeMat, [] ); + var planePt2D = MathUtils.transformPoint( planePt, planeMatInv ); + + // get 2 points on the axes of the oval + var wPt = this.preViewToGL( [this._xOffset + 0.5*this.getWidth(), this._yOffset, 0] ), + hPt = this.preViewToGL( [this._xOffset, this._yOffset + 0.5*this.getHeight(), 0] ); + var w = vecUtils.vecDist( 2, wPt, ctr ), + h = vecUtils.vecDist( 2, hPt, ctr ); + var aspect = w/h; + + // get the angle of the projected point relative to the circle + var angle = Math.atan2( planePt2D[1], planePt2D[0]/aspect ); + var degrees = angle*180.0/Math.PI; + + // get the corresponding point on the object + var pt = [ Math.cos(angle)*w, Math.sin(angle)*h, 0 ]; + var glPt = MathUtils.transformPoint( pt, planeMat ); + + return glPt; + } + + /* this.getNearPoint = function( pt, dir ) { var world = this.getWorld(); if (!world) throw( "null world in getNearPoint" ); @@ -759,6 +805,7 @@ var Circle = function GLCircle() { return objPt; }; + */ this.recalcTexMapCoords = function( vrts, uvs ) { var n = vrts.length/3; diff --git a/js/lib/geom/geom-obj.js b/js/lib/geom/geom-obj.js index f2991bdb..7cb9b80f 100755 --- a/js/lib/geom/geom-obj.js +++ b/js/lib/geom/geom-obj.js @@ -375,6 +375,65 @@ var GeomObj = function GLGeomObj() { } }; + + this.getGLCenter = function() + { + // get the normalized device coordinates (NDC) for + // all position and dimensions. + var world = this.getWorld(); + var vpw = world.getViewportWidth(), vph = world.getViewportHeight(); + var xNDC = 2*this._xOffset/vpw, yNDC = -2*this._yOffset/vph; + + 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; + + // calculate the object coordinates from their NDC coordinates + var z = -world.getViewDistance(); + + // unproject to get the position of the origin in GL + var x = -z*(r-l)/(2.0*zn)*xNDC, + y = -z*(t-b)/(2.0*zn)*yNDC; + z = 0.0; + + // transform by the object's transformation matrix + var ctr = MathUtils.transformPoint( [x, y, z], this.getMatrix() ); + + return ctr; + }; + + this.preViewToGL = function( preViewPt ) + { + // get the normalized device coordinates (NDC) for + // all position and dimensions. + var world = this.getWorld(); + var vpw = world.getViewportWidth(), vph = world.getViewportHeight(); + var xNDC = 2*preViewPt[0]/vpw, yNDC = -2*preViewPt[1]/vph; + + 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; + + // calculate the object coordinates from their NDC coordinates + var z = -world.getViewDistance(); + + // unproject to get the position of the origin in GL + var x = -z*(r-l)/(2.0*zn)*xNDC, + y = -z*(t-b)/(2.0*zn)*yNDC; + z = 0.0; + + // transform by the object's transformation matrix + var glPt = MathUtils.transformPoint( [x, y, z], this.getMatrix() ); + + return glPt; + }; + this.buildBuffers = function () { // this function must be overridden by the base class alert("GLGeomObj.buildBuffers must be overridden by base class"); diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js index d9f1f0b1..41c51e2f 100755 --- a/js/lib/geom/rectangle.js +++ b/js/lib/geom/rectangle.js @@ -693,7 +693,6 @@ var Rectangle = function GLRectangle() { 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 ); -- cgit v1.2.3 From 4b83774cdbfbf30add9a8fa2f11b1c4ff35179fa Mon Sep 17 00:00:00 2001 From: hwc487 Date: Thu, 26 Apr 2012 12:50:57 -0700 Subject: canvas interaction --- js/document/html-document.js | 16 ++++++++-------- js/helper-classes/3D/snap-manager.js | 10 +++++----- js/lib/drawing/world.js | 2 +- js/tools/ShapeTool.js | 18 ++++++++++++++++-- 4 files changed, 30 insertions(+), 16 deletions(-) (limited to 'js') diff --git a/js/document/html-document.js b/js/document/html-document.js index ff5192b3..454b7154 100755 --- a/js/document/html-document.js +++ b/js/document/html-document.js @@ -207,16 +207,16 @@ exports.HTMLDocument = Montage.create(TextDocument, { var elt = this.documentRoot; if (elt) { + /* + // Use this code to test the runtime version of WebGL + var cdm = new NinjaCvsRt.CanvasDataManager(); + cdm.loadGLData(elt, value, null ); + */ + + // /* var nWorlds= value.length; for (var i=0; i= 1)) { this.rebuildTree(this._geomRoot); this.restartRenderLoop(); } diff --git a/js/tools/ShapeTool.js b/js/tools/ShapeTool.js index b2948fe7..74e692b6 100755 --- a/js/tools/ShapeTool.js +++ b/js/tools/ShapeTool.js @@ -69,6 +69,7 @@ exports.ShapeTool = Montage.create(DrawingTool, { drawData.planeMat, drawData.midPt, canvas, true); canvas.elementModel.isShape = true; + this.application.ninja.elementMediator.addElements(canvas, elementModel.data); } else { canvas = this._targetedElement; if (!canvas.getAttribute( "data-RDGE-id" )) @@ -77,8 +78,8 @@ exports.ShapeTool = Montage.create(DrawingTool, { if(!canvas.elementModel.shapeModel) { canvas.elementModel.shapeModel = Montage.create(ShapeModel); } + this.application.ninja.elementMediator.addElements(canvas, canvas.elementModel.data); } - this.application.ninja.elementMediator.addElements(canvas, canvas.elementModel.data); } this.endDraw(event); @@ -213,7 +214,20 @@ exports.ShapeTool = Montage.create(DrawingTool, { _useExistingCanvas: { value: function() { - return (this._targetedElement && !ShapesController.isElementAShape(this._targetedElement)); + var target; + if (this._targetedElement && (this._targetedElement.nodeName === "CANVAS") && !ShapesController.isElementAShape(this._targetedElement)) + target = this._targetedElement; + else + { + var container = this.application.ninja.currentSelectedContainer; + if (container && (container.nodeName === "CANVAS")) + { + target = container; + this._targetedElement = target; + } + } + + return target; } } -- cgit v1.2.3 From e73fba18b095f0c270f5d954e5993c155b488c73 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Fri, 27 Apr 2012 13:52:40 -0700 Subject: Creating shapes in a container --- js/helper-classes/3D/snap-manager.js | 3 ++- js/tools/SelectionTool.js | 2 ++ js/tools/ShapeTool.js | 2 ++ js/tools/drawing-tool-base.js | 13 +++++++++++-- 4 files changed, 17 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 dcfd5ddc..7fc492a5 100755 --- a/js/helper-classes/3D/snap-manager.js +++ b/js/helper-classes/3D/snap-manager.js @@ -1011,7 +1011,8 @@ var SnapManager = exports.SnapManager = Montage.create(Component, { } // hit test the current object var hit; - if (depth > 0) // don't snap to the root + var snapToStage = ((depth === 0) && (elt === this.application.ninja.currentSelectedContainer) && (elt.nodeName === 'CANVAS')); + if ((depth > 0) || snapToStage) // don't snap to the root unles we are working inside a canvas { // if the element is in the 2D cache snapping is done there if (elt.elementModel && !elt.elementModel.isIn2DSnapCache) diff --git a/js/tools/SelectionTool.js b/js/tools/SelectionTool.js index 7033ee3d..9c9aee93 100755 --- a/js/tools/SelectionTool.js +++ b/js/tools/SelectionTool.js @@ -222,8 +222,10 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { value: function(event) { if(this.application.ninja.selectedElements.length > 0) { this.application.ninja.currentSelectedContainer = this.application.ninja.selectedElements[0]; + console.log( "setting container to selected element" ); } else { this.application.ninja.currentSelectedContainer = this.application.ninja.currentDocument.documentRoot; + console.log( "setting container to stage" ); } } }, diff --git a/js/tools/ShapeTool.js b/js/tools/ShapeTool.js index 74e692b6..90b403a4 100755 --- a/js/tools/ShapeTool.js +++ b/js/tools/ShapeTool.js @@ -64,6 +64,7 @@ exports.ShapeTool = Montage.create(DrawingTool, { if(drawData) { var canvas; if(!this._useExistingCanvas()) { + console.log( "creating a new canvas" ); canvas = NJUtils.makeNJElement("canvas", "Canvas", "shape", {"data-RDGE-id": NJUtils.generateRandom()}, true); var elementModel = TagTool.makeElement(~~drawData.width, ~~drawData.height, drawData.planeMat, drawData.midPt, canvas, true); @@ -71,6 +72,7 @@ exports.ShapeTool = Montage.create(DrawingTool, { canvas.elementModel.isShape = true; this.application.ninja.elementMediator.addElements(canvas, elementModel.data); } else { + console.log( "inserting shape into container" ); canvas = this._targetedElement; if (!canvas.getAttribute( "data-RDGE-id" )) canvas.setAttribute( "data-RDGE-id", NJUtils.generateRandom() ); diff --git a/js/tools/drawing-tool-base.js b/js/tools/drawing-tool-base.js index 2283dfab..0b51aa28 100755 --- a/js/tools/drawing-tool-base.js +++ b/js/tools/drawing-tool-base.js @@ -41,11 +41,20 @@ exports.DrawingToolBase = Montage.create(Montage, { // do the snap var hitRec = snapManager.snap(x, y, true); + var dragPlane; if (hitRec) { // set up the working plane and convert the hit record to be working plane relative - var dragPlane = snapManager.setupDragPlanes( hitRec ); - var wpHitRec = hitRec.convertToWorkingPlane( dragPlane ); + if (hitRec.getElement() === snapManager.application.ninja.currentSelectedContainer) + { + dragPlane = viewUtils.getUnprojectedElementPlane( hitRec.getElement() ); + snapManager.setupDragPlaneFromPlane( dragPlane ); + } + else + { + dragPlane = snapManager.setupDragPlanes( hitRec ); + } + var wpHitRec = hitRec.convertToWorkingPlane( dragPlane ); var pt = hitRec.getScreenPoint(); return( [wpHitRec, pt[0], pt[1]] ); -- cgit v1.2.3 From 48e442977ef1630e0f664265a7142320b55d7d20 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Fri, 27 Apr 2012 14:35:01 -0700 Subject: added a console.log to show the working plane during a drag --- js/tools/drawing-tool-base.js | 1 + 1 file changed, 1 insertion(+) (limited to 'js') diff --git a/js/tools/drawing-tool-base.js b/js/tools/drawing-tool-base.js index 0b51aa28..2e652d42 100755 --- a/js/tools/drawing-tool-base.js +++ b/js/tools/drawing-tool-base.js @@ -53,6 +53,7 @@ exports.DrawingToolBase = Montage.create(Montage, { { dragPlane = snapManager.setupDragPlanes( hitRec ); } + console.log( "drag plane: " + dragPlane ); var wpHitRec = hitRec.convertToWorkingPlane( dragPlane ); var pt = hitRec.getScreenPoint(); -- cgit v1.2.3 From 9c8fbdd11fdbe9ae73d57147de84b799c5a87652 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Mon, 30 Apr 2012 16:15:47 -0700 Subject: Squashed commit of stage architecture Signed-off-by: Valerio Virgillito --- js/controllers/document-controller.js | 2 + js/controllers/elements/body-controller.js | 11 ++++ js/document/templates/montage-web/default_html.css | 9 +++ js/document/templates/montage-web/index.html | 12 +--- js/stage/layout.js | 2 +- js/stage/stage.reel/stage.js | 73 +++++++++++++--------- js/tools/SelectionTool.js | 6 +- 7 files changed, 71 insertions(+), 44 deletions(-) (limited to 'js') diff --git a/js/controllers/document-controller.js b/js/controllers/document-controller.js index 4be0767a..7795a74d 100755 --- a/js/controllers/document-controller.js +++ b/js/controllers/document-controller.js @@ -483,6 +483,8 @@ var DocumentController = exports.DocumentController = Montage.create(Component, if(!this.webTemplate) { this._showCurrentDocument(); + } else { + this.application.ninja.stage.stageView.showRulers(); } this.webTemplate = false; diff --git a/js/controllers/elements/body-controller.js b/js/controllers/elements/body-controller.js index fbbb7c6e..839d0787 100755 --- a/js/controllers/elements/body-controller.js +++ b/js/controllers/elements/body-controller.js @@ -12,6 +12,17 @@ exports.BodyController = Montage.create(ElementController, { // TODO - perspective distance needs to be passed in as "dist" and matrix3d needs to be passed in as "mat" set3DProperties: { value: function(el, props, update3DModel) { + var dist = props["dist"], mat = props["mat"]; + this.application.ninja.stylesController.setElementStyle(el, "-webkit-transform", "perspective(" + dist + ") " + "matrix3d(" + MathUtils.scientificToDecimal(mat, 5) + ")", true); + + el.elementModel.props3D.matrix3d = mat; + el.elementModel.props3D.perspectiveDist = dist; + + this.application.ninja.stage.updatedStage = true; + + if(update3DModel) { + this._update3DProperties(el, mat, dist); + } } }, diff --git a/js/document/templates/montage-web/default_html.css b/js/document/templates/montage-web/default_html.css index 08e39f22..e62a20a9 100755 --- a/js/document/templates/montage-web/default_html.css +++ b/js/document/templates/montage-web/default_html.css @@ -10,6 +10,15 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot -webkit-animation-name: none !important; } +body { + margin: 0; + padding: 0; + + position: absolute; + -webkit-transform-style: preserve-3d; + -webkit-perspective: 1400px; +} + .active-element-outline { outline: #adff2f solid 2px; } diff --git a/js/document/templates/montage-web/index.html b/js/document/templates/montage-web/index.html index 630794a4..caebc8d0 100755 --- a/js/document/templates/montage-web/index.html +++ b/js/document/templates/montage-web/index.html @@ -29,20 +29,10 @@ } - - - - - + \ No newline at end of file diff --git a/js/stage/layout.js b/js/stage/layout.js index a096848e..0a76dbe5 100755 --- a/js/stage/layout.js +++ b/js/stage/layout.js @@ -174,7 +174,7 @@ exports.Layout = Montage.create(Component, { var tmpMat = viewUtils.getLocalToGlobalMatrix( item ); var zoomFactor = 1; - if (this.stage._viewport.style && this.stage._viewport.style.zoom) { + if (this.stage._viewport && this.stage._viewport.style && this.stage._viewport.style.zoom) { zoomFactor = Number(this.stage._viewport.style.zoom); } diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js index 1ea14d64..515165bf 100755 --- a/js/stage/stage.reel/stage.js +++ b/js/stage/stage.reel/stage.js @@ -231,33 +231,43 @@ exports.Stage = Montage.create(Component, { this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this.element.offsetHeight - 11; this._documentRoot = this.application.ninja.currentDocument.documentRoot; - this._viewport = this.application.ninja.currentDocument.documentRoot.parentNode; - - this.documentOffsetLeft = this._viewport.offsetLeft; - this.documentOffsetTop = this._viewport.offsetTop; - - // Center the stage - this.centerStage(); - - this._scrollLeft = this._iframeContainer.scrollLeft; - this._scrollTop = this._iframeContainer.scrollTop; - this.application.ninja.currentDocument.savedLeftScroll = this._iframeContainer.scrollLeft; - this.application.ninja.currentDocument.savedTopScroll = this._iframeContainer.scrollTop; // Hardcode this value so that it does not fail for the new stage architecture // TODO: Remove marker for old template: NINJA-STAGE-REWORK if(this.application.ninja.currentDocument.documentRoot.id === "UserContent") { - this.userContentBorder = 1; //parseInt(this._documentRoot.elementModel.controller.getProperty(this._documentRoot, "border")); + this._viewport = this.application.ninja.currentDocument.documentRoot.parentNode; + + this.documentOffsetLeft = this._viewport.offsetLeft; + this.documentOffsetTop = this._viewport.offsetTop; + + // Center the stage + this.centerStage(); + + this._scrollLeft = this._iframeContainer.scrollLeft; + this._scrollTop = this._iframeContainer.scrollTop; + this.application.ninja.currentDocument.savedLeftScroll = this._iframeContainer.scrollLeft; + this.application.ninja.currentDocument.savedTopScroll = this._iframeContainer.scrollTop; + + this.userContentBorder = parseInt(this._documentRoot.elementModel.controller.getProperty(this._documentRoot, "border")); + + this._userContentLeft = this._documentOffsetLeft - this._scrollLeft + this._userContentBorder; + this._userContentTop = this._documentOffsetTop - this._scrollTop + this._userContentBorder; + + this._iframeContainer.addEventListener("scroll", this, false); + + this.application.ninja.currentDocument.iframe.style.opacity = 1.0; } else { this.userContentBorder = 0; - } - this._userContentLeft = this._documentOffsetLeft - this._scrollLeft + this._userContentBorder; - this._userContentTop = this._documentOffsetTop - this._scrollTop + this._userContentBorder; + this._scrollLeft = 0; + this._scrollTop = 0; + this._userContentLeft = 0; + this._userContentTop = 0; + + this.application.ninja.currentDocument._window.addEventListener("scroll", this, false); + } - this.application.ninja.currentDocument.iframe.style.opacity = 1.0; - this._iframeContainer.addEventListener("scroll", this, false); // TODO - We will need to modify this once we support switching between multiple documents this.application.ninja.toolsData.selectedToolInstance._configure(true); @@ -415,13 +425,10 @@ exports.Stage = Montage.create(Component, { handleSelectionChange: { value: function(event) { // TODO - this is a hack for now because some tools depend on selectionDrawn event for some logic - if(this.drawNow) - { + if(this.drawNow) { this.draw(); this.drawNow = false; - } - else - { + } else { this.needsDraw = true; } } @@ -444,11 +451,20 @@ exports.Stage = Montage.create(Component, { */ handleScroll: { value: function() { - this._scrollLeft = this._iframeContainer.scrollLeft; - this._scrollTop = this._iframeContainer.scrollTop; + // 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; + this.userContentLeft = this._documentOffsetLeft - this._scrollLeft + this._userContentBorder; + this.userContentTop = this._documentOffsetTop - this._scrollTop + this._userContentBorder; + } else { + this._scrollLeft = this.application.ninja.currentDocument.documentRoot.scrollLeft; + this._scrollTop = this.application.ninja.currentDocument.documentRoot.scrollTop; + + this.userContentLeft = -this._scrollLeft; + this.userContentTop = -this._scrollTop; + } // Need to clear the snap cache and set up the drag plane //snapManager.setupDragPlaneFromPlane( workingPlane ); @@ -457,7 +473,6 @@ exports.Stage = Montage.create(Component, { this.needsDraw = true; this.layout.draw(); //this._toolsList.action("DrawHandles"); - } }, @@ -687,7 +702,7 @@ exports.Stage = Montage.create(Component, { // } var zoomFactor = 1; - if (this._viewport.style && this._viewport.style.zoom) { + if (this._viewport && this._viewport.style && this._viewport.style.zoom) { zoomFactor = Number(this._viewport.style.zoom); } diff --git a/js/tools/SelectionTool.js b/js/tools/SelectionTool.js index 9c9aee93..f7b583b5 100755 --- a/js/tools/SelectionTool.js +++ b/js/tools/SelectionTool.js @@ -753,10 +753,10 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { var zoomFactor = 1; var viewPort = this.application.ninja.stage._viewport; - if (viewPort.style && viewPort.style.zoom) - { + if (viewPort && viewPort.style && viewPort.style.zoom) { zoomFactor = Number(viewPort.style.zoom); } + var tmpMat = viewUtils.getLocalToGlobalMatrix( item ); for (var j=0; j<4; j++) { @@ -865,7 +865,7 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { var zoomFactor = 1; var viewPort = this.application.ninja.stage._viewport; - if (viewPort.style && viewPort.style.zoom) + if (viewPort && viewPort.style && viewPort.style.zoom) { zoomFactor = Number(viewPort.style.zoom); } -- cgit v1.2.3 From fb47c04b0a4d65f53d975311754aa0dd8a8a3f69 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Mon, 30 Apr 2012 16:31:37 -0700 Subject: Removing some console logs Signed-off-by: Valerio Virgillito --- js/tools/SelectionTool.js | 2 -- js/tools/ShapeTool.js | 2 -- js/tools/drawing-tool-base.js | 1 - 3 files changed, 5 deletions(-) (limited to 'js') diff --git a/js/tools/SelectionTool.js b/js/tools/SelectionTool.js index f7b583b5..855c7b8c 100755 --- a/js/tools/SelectionTool.js +++ b/js/tools/SelectionTool.js @@ -222,10 +222,8 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { value: function(event) { if(this.application.ninja.selectedElements.length > 0) { this.application.ninja.currentSelectedContainer = this.application.ninja.selectedElements[0]; - console.log( "setting container to selected element" ); } else { this.application.ninja.currentSelectedContainer = this.application.ninja.currentDocument.documentRoot; - console.log( "setting container to stage" ); } } }, diff --git a/js/tools/ShapeTool.js b/js/tools/ShapeTool.js index c0681200..8f45891d 100755 --- a/js/tools/ShapeTool.js +++ b/js/tools/ShapeTool.js @@ -64,7 +64,6 @@ exports.ShapeTool = Montage.create(DrawingTool, { if(drawData) { var canvas; if(!this._useExistingCanvas()) { - console.log( "creating a new canvas" ); canvas = NJUtils.makeNJElement("canvas", "Canvas", "shape", {"data-RDGE-id": NJUtils.generateRandom()}, true); var elementModel = TagTool.makeElement(~~drawData.width, ~~drawData.height, drawData.planeMat, drawData.midPt, canvas, true); @@ -72,7 +71,6 @@ exports.ShapeTool = Montage.create(DrawingTool, { canvas.elementModel.isShape = true; this.application.ninja.elementMediator.addElements(canvas, elementModel.data); } else { - console.log( "inserting shape into container" ); canvas = this._targetedElement; if (!canvas.getAttribute( "data-RDGE-id" )) canvas.setAttribute( "data-RDGE-id", NJUtils.generateRandom() ); diff --git a/js/tools/drawing-tool-base.js b/js/tools/drawing-tool-base.js index 2e652d42..0b51aa28 100755 --- a/js/tools/drawing-tool-base.js +++ b/js/tools/drawing-tool-base.js @@ -53,7 +53,6 @@ exports.DrawingToolBase = Montage.create(Montage, { { dragPlane = snapManager.setupDragPlanes( hitRec ); } - console.log( "drag plane: " + dragPlane ); var wpHitRec = hitRec.convertToWorkingPlane( dragPlane ); var pt = hitRec.getScreenPoint(); -- cgit v1.2.3