From cf3b17036985243ecbcafdf55189530c797c78a7 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Thu, 21 Jun 2012 15:33:18 -0700 Subject: Draw stage left and top references lines. Signed-off-by: Nivesh Rajbhandari --- js/helper-classes/3D/draw-utils.js | 65 ++++++++++++++++++-------------------- js/helper-classes/3D/math-utils.js | 4 +-- js/helper-classes/3D/view-utils.js | 32 +++++++++++++++++++ 3 files changed, 65 insertions(+), 36 deletions(-) diff --git a/js/helper-classes/3D/draw-utils.js b/js/helper-classes/3D/draw-utils.js index 8ddd0d52..c31424eb 100755 --- a/js/helper-classes/3D/draw-utils.js +++ b/js/helper-classes/3D/draw-utils.js @@ -630,6 +630,7 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { value: function () { this.application.ninja.stage.clearGridCanvas(); + this.drawStageOutline(); if (!this.isDrawingGrid()) return; var saveContext = this.getDrawingSurfaceElement(); @@ -701,21 +702,6 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { this._lineColor = saveColor; this._drawingContext.lineWidth = saveLineWidth; - if(this.application.ninja.currentDocument.model.documentRoot.id !== "UserContent") { - // draw an outline around the body - var stagePt = MathUtils.getPointOnPlane([0,0,1,0]); - var stageMat = this.getPlaneToWorldMatrix([0,0,1], stagePt); - // glmat4.multiply( tMat, stageMat, stageMat); - pt0 = [0, 0, 0]; - pt1 = [0, height, 0]; - delta = [width, 0, 0]; - this.drawGridLines(pt0, pt1, delta, stageMat, 2); - pt0 = [0, 0, 0]; - pt1 = [width, 0, 0]; - delta = [0, height, 0]; - this.drawGridLines(pt0, pt1, delta, stageMat, 2); - } - // draw the lines this.redrawGridLines(); @@ -738,15 +724,11 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { var sourceSpaceMat = this.viewUtils.getLocalToGlobalMatrix( this._sourceSpaceElt ); for (var i = 0; i < nLines; i++) { // transform the points from working plane space to world space - //var t0 = mat.multiply(p0), - // t1 = mat.multiply(p1); var t0 = glmat4.multiplyVec3( mat, p0, [] ), t1 = glmat4.multiplyVec3( mat, p1, [] ); // transform from world space to global screen space if (this._sourceSpaceElt) { -// t0 = this.viewUtils.localToGlobal(t0, this._sourceSpaceElt); -// t1 = this.viewUtils.localToGlobal(t1, this._sourceSpaceElt); t0 = this.viewUtils.localToGlobal2(t0, sourceSpaceMat); t1 = this.viewUtils.localToGlobal2(t1, sourceSpaceMat); } @@ -764,9 +746,7 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { line.setVisibility(vis); // increment the points to the next position -// p0 = p0.add(d); p0[3] = 1.0; p0 = vecUtils.vecAdd(4, p0, d); p0[3] = 1.0; -// p1 = p1.add(d); p1[3] = 1.0; p1 = vecUtils.vecAdd(4, p1, d); p1[3] = 1.0; } } @@ -819,25 +799,12 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { // draw the lines var line, nLines = this._gridLineArray.length; - if(this.application.ninja.currentDocument.model.documentRoot.id !== "UserContent") { - nLines = this._gridLineArray.length-4; - } for (var i = 0; i < nLines; i++) { line = this._gridLineArray[i]; this.drawIntersectedLine(line, this._drawingContext); } - if(this.application.ninja.currentDocument.model.documentRoot.id !== "UserContent") { - this._lineColor = "red"; - i = nLines; - nLines += 4; - for (; i < nLines; i++) { - line = this._gridLineArray[i]; - this.drawIntersectedLine(line, this._drawingContext); - } - } - this.popState(); } }, @@ -1213,6 +1180,36 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { } }, + drawStageOutline : { + value: function() { + var context = this.application.ninja.stage.gridContext; + var stage = this.application.ninja.stage; + var stageRoot = this.application.ninja.currentDocument.model.documentRoot; + var bounds3D = this.viewUtils.getElementBoundsInGlobal(stageRoot); + + var l = MathUtils.segSegIntersection2D(bounds3D[0], bounds3D[3], [0, 0, 0], [0, stage.canvas.height, 0], 0.1); + var r = MathUtils.segSegIntersection2D(bounds3D[0], bounds3D[3], [stage.canvas.width, 0, 0], [stage.canvas.width, stage.canvas.height, 0], 0.1); + + var t = MathUtils.segSegIntersection2D(bounds3D[0], bounds3D[1], [0, 0, 0], [stage.canvas.width, 0, 0], 0.1); + var b = MathUtils.segSegIntersection2D(bounds3D[0], bounds3D[1], [0, stage.canvas.height, 0], [stage.canvas.width, stage.canvas.height, 0], 0.1); + context.save(); + context.strokeStyle = "#333"; + context.lineWidth = 0.5; + + context.beginPath(); + + context.moveTo(l[0], l[1]); + context.lineTo(r[0], r[1]); + + context.moveTo(t[0], t[1]); + context.lineTo(b[0], b[1]); + + context.closePath(); + context.stroke(); + context.restore(); + } + }, + draw3DCompass : { value: function() { // set the element to be the viewport object - temporarily diff --git a/js/helper-classes/3D/math-utils.js b/js/helper-classes/3D/math-utils.js index 35ee8112..44e2499d 100755 --- a/js/helper-classes/3D/math-utils.js +++ b/js/helper-classes/3D/math-utils.js @@ -333,7 +333,7 @@ var MathUtilsClass = exports.MathUtilsClass = Object.create(Object.prototype, { //returns the intersection point between the two segments (null if no intersection) segSegIntersection2D: { - value: function (seg0Start, seg0End, seg1Start, seg1End, epsilon) { + value: function (seg0Start, seg0End, seg1Start, seg1End, epsilon, mustLieInSegements) { //check for parallel segments var denom = (seg1End[1] - seg1Start[1]) * (seg0End[0] - seg0Start[0]) - (seg1End[0] - seg1Start[0]) * (seg0End[1] - seg0Start[1]); if (Math.abs(denom) <= epsilon) { @@ -349,7 +349,7 @@ var MathUtilsClass = exports.MathUtilsClass = Object.create(Object.prototype, { paramSeg1 /= denom; //check whether the parameters are both between 0 and 1 - if (Math.abs(paramSeg0) > 1.0 || Math.abs(paramSeg1) > 1.0) { + if (mustLieInSegements && (Math.abs(paramSeg0) > 1.0 || Math.abs(paramSeg1) > 1.0)) { return null; //no intersection unless the the intersection point lies on both segments } diff --git a/js/helper-classes/3D/view-utils.js b/js/helper-classes/3D/view-utils.js index 5a128408..d7f29caa 100755 --- a/js/helper-classes/3D/view-utils.js +++ b/js/helper-classes/3D/view-utils.js @@ -244,6 +244,38 @@ exports.ViewUtils = Montage.create(Component, { } }, + getElementBoundsInGlobal: { + value: function (elt) { + this.pushViewportObj(elt); + var bounds3D = this.getElementViewBounds3D(elt); + var tmpMat = this.getLocalToGlobalMatrix(elt); + + var zoomFactor = 1; + var stage = this.application.ninja.stage; + if (stage._viewport && stage._viewport.style && stage._viewport.style.zoom) { + zoomFactor = Number(stage._viewport.style.zoom); + } + + var sSL = stage._scrollLeft; + var sST = stage._scrollTop; + + for (var j=0; j<4; j++) { + var localPt = bounds3D[j]; + var tmpPt = this.localToGlobal2(localPt, tmpMat); + + if(zoomFactor !== 1) { + tmpPt = vecUtils.vecScale(3, tmpPt, zoomFactor); + + tmpPt[0] += sSL*(zoomFactor - 1); + tmpPt[1] += sST*(zoomFactor - 1); + } + bounds3D[j] = tmpPt; + } + this.popViewportObj(); + return bounds3D; + } + }, + getCenterOfProjection: { value: function() { var cop; -- cgit v1.2.3 From bf6585a8f8a6abc203c210ba337e7ef260cb87d3 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Thu, 21 Jun 2012 15:38:48 -0700 Subject: IKNINJA-1720 - Object in a document erases 3D grid in other document when switching with document tabs. Signed-off-by: Nivesh Rajbhandari --- js/stage/layout.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/js/stage/layout.js b/js/stage/layout.js index 28484b71..99c3a403 100755 --- a/js/stage/layout.js +++ b/js/stage/layout.js @@ -46,6 +46,9 @@ exports.Layout = Montage.create(Component, { return; } + drawUtils._eltArray.length = 0; + drawUtils._planesArray.length = 0; + this._currentDocument = value; if(!value) { -- cgit v1.2.3 From a93ab1f2c5e87931b7f522a8e950a457de668579 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Thu, 21 Jun 2012 23:02:33 -0700 Subject: Fixed issue with Youtube not updating after save and Picasa bacground Signed-off-by: Valerio Virgillito --- .../picasa-carousel.reel/image.reel/image.html | 1 - .../picasa-carousel.reel/picasa-carousel.css | 38 +++++++++--------- .../picasa-carousel.reel/picasa-carousel.html | 45 +--------------------- .../picasa-carousel.reel/picasa-carousel.js | 2 +- .../youtube-channel.reel/youtube-channel.js | 22 ++++++++--- 5 files changed, 39 insertions(+), 69 deletions(-) diff --git a/node_modules/montage-google/picasa-carousel.reel/image.reel/image.html b/node_modules/montage-google/picasa-carousel.reel/image.reel/image.html index 368bd059..f43f9f29 100644 --- a/node_modules/montage-google/picasa-carousel.reel/image.reel/image.html +++ b/node_modules/montage-google/picasa-carousel.reel/image.reel/image.html @@ -26,7 +26,6 @@ margin-left: -105px; width: 206px; height: 140px; - border-radius: 4px; border: 2px solid #888; background-repeat: no-repeat; background-position: center center; diff --git a/node_modules/montage-google/picasa-carousel.reel/picasa-carousel.css b/node_modules/montage-google/picasa-carousel.reel/picasa-carousel.css index 2494614b..bdb1a04f 100755 --- a/node_modules/montage-google/picasa-carousel.reel/picasa-carousel.css +++ b/node_modules/montage-google/picasa-carousel.reel/picasa-carousel.css @@ -3,36 +3,36 @@ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. */ + + .montage-google-picasa-carousel { width: 100%; height: 100%; - display: -webkit-box; - -webkit-box-pack: center; - -webkit-box-align: center; - display: -moz-box; - -moz-box-pack: center; - -moz-box-align: center; - display: -ms-box; - -ms-box-pack: center; - -ms-box-align: center; - display: box; - box-pack: center; - box-align: center; + /*display: -webkit-box;*/ + /*-webkit-box-pack: center;*/ + /*-webkit-box-align: center;*/ + /*display: -moz-box;*/ + /*-moz-box-pack: center;*/ + /*-moz-box-align: center;*/ + /*display: -ms-box;*/ + /*-ms-box-pack: center;*/ + /*-ms-box-align: center;*/ + /*display: box;*/ + /*box-pack: center;*/ + /*box-align: center;*/ + -webkit-transform-style: preserve-3d; } .montage-google-picasa-carousel .flow { width: 100%; height: 100%; -/* top: 0; - left: 0; - right: 0; - bottom: 0; -*/ - background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#bbb)); + + -webkit-transform-style: preserve-3d; + -webkit-perspective: 1400px; } + .image { position: absolute; - /*-top: 50%;*/ -webkit-box-shadow: 0 0 35px rgba(0,0,0,.5); } diff --git a/node_modules/montage-google/picasa-carousel.reel/picasa-carousel.html b/node_modules/montage-google/picasa-carousel.reel/picasa-carousel.html index dc70a19c..1f2c47d1 100755 --- a/node_modules/montage-google/picasa-carousel.reel/picasa-carousel.html +++ b/node_modules/montage-google/picasa-carousel.reel/picasa-carousel.html @@ -97,6 +97,8 @@ "nextDensity": 3 } ], + "headOffset": 9, + "tailOffset": 9, "units": {} } ], @@ -113,49 +115,6 @@ } - - diff --git a/node_modules/montage-google/picasa-carousel.reel/picasa-carousel.js b/node_modules/montage-google/picasa-carousel.reel/picasa-carousel.js index 0b669b80..7e9c64ec 100644 --- a/node_modules/montage-google/picasa-carousel.reel/picasa-carousel.js +++ b/node_modules/montage-google/picasa-carousel.reel/picasa-carousel.js @@ -45,7 +45,7 @@ var PicasaCarousel = exports.PicasaCarousel = Montage.create(Component, /** @len resultCount: { enumerable: false, - value: 1000 + value: 500 }, prepareForDraw: { diff --git a/node_modules/montage-google/youtube-channel.reel/youtube-channel.js b/node_modules/montage-google/youtube-channel.reel/youtube-channel.js index 782318f0..ca08564b 100644 --- a/node_modules/montage-google/youtube-channel.reel/youtube-channel.js +++ b/node_modules/montage-google/youtube-channel.reel/youtube-channel.js @@ -10,6 +10,10 @@ var Montage = require("montage").Montage, var YoutubeChannel = exports.YoutubeChannel = Montage.create(Component, { + _savedReference: { + value: null + }, + _userRe: { value: /youtube.com\/(user\/)?([a-z0-9]+)/i }, @@ -113,13 +117,20 @@ var YoutubeChannel = exports.YoutubeChannel = Montage.create(Component, { this.imageC.element.addEventListener("click", this, false); this._positionPopup(); + + this._savedReference = this.element; } }, draw: { value: function() { if (this._script) { - this._element.appendChild(this._script); + if(this.element.childNodes.length < 1) { + this._savedReference.appendChild(this._script); + } else { + this.element.appendChild(this._script); + } + this._script = null; } @@ -134,16 +145,17 @@ var YoutubeChannel = exports.YoutubeChannel = Montage.create(Component, { this._videoId = null; } + var self = this; + if (this._shouldShowPopup) { this._positionPopup(); // Need the video to be on top - this._element.style.zIndex = 9000; + this.element.style.zIndex = 9000; // Fix for Canary where the thumbnail in the video doesn't // change until the CSS transition has finished, so wait for // it to change before starting the animation - var self = this; window.setTimeout(function() { self._element.classList.add("show"); self._popupElement.classList.add("show"); @@ -155,7 +167,7 @@ var YoutubeChannel = exports.YoutubeChannel = Montage.create(Component, { document.addEventListener('keyup', this, false); } } else { - this._element.classList.remove("show"); + this.element.classList.remove("show"); this._popupElement.classList.remove("show"); this.player.stop(); @@ -168,7 +180,7 @@ var YoutubeChannel = exports.YoutubeChannel = Montage.create(Component, { // take the video from the top only once it's stopped animating window.setTimeout(function() { - this._element.style.zIndex = null; + self.element.style.zIndex = null; }, 500); } -- cgit v1.2.3 From 330a954e92dfc95fae6ae5cf10dd5998f346b304 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Fri, 22 Jun 2012 10:59:17 -0700 Subject: Have to guard against cases when stage lines are parallel to the canvas and the line intersection routine returns null. Signed-off-by: Nivesh Rajbhandari --- js/helper-classes/3D/draw-utils.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/js/helper-classes/3D/draw-utils.js b/js/helper-classes/3D/draw-utils.js index c31424eb..168d550d 100755 --- a/js/helper-classes/3D/draw-utils.js +++ b/js/helper-classes/3D/draw-utils.js @@ -1188,10 +1188,15 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { var bounds3D = this.viewUtils.getElementBoundsInGlobal(stageRoot); var l = MathUtils.segSegIntersection2D(bounds3D[0], bounds3D[3], [0, 0, 0], [0, stage.canvas.height, 0], 0.1); + if(!l) return; var r = MathUtils.segSegIntersection2D(bounds3D[0], bounds3D[3], [stage.canvas.width, 0, 0], [stage.canvas.width, stage.canvas.height, 0], 0.1); + if(!r) return; var t = MathUtils.segSegIntersection2D(bounds3D[0], bounds3D[1], [0, 0, 0], [stage.canvas.width, 0, 0], 0.1); + if(!t) return; var b = MathUtils.segSegIntersection2D(bounds3D[0], bounds3D[1], [0, stage.canvas.height, 0], [stage.canvas.width, stage.canvas.height, 0], 0.1); + if(!b) return; + context.save(); context.strokeStyle = "#333"; context.lineWidth = 0.5; -- cgit v1.2.3 From cd7ba9648312a3f55fae9c33285be1d9540e13f9 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Fri, 22 Jun 2012 11:15:46 -0700 Subject: Display "(0, 0)" where the origin is. Signed-off-by: Nivesh Rajbhandari --- js/helper-classes/3D/draw-utils.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/js/helper-classes/3D/draw-utils.js b/js/helper-classes/3D/draw-utils.js index 168d550d..bd47ffc3 100755 --- a/js/helper-classes/3D/draw-utils.js +++ b/js/helper-classes/3D/draw-utils.js @@ -1211,6 +1211,8 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { context.closePath(); context.stroke(); + + context.fillText("(0, 0)", bounds3D[0][0] + 4, bounds3D[0][1] - 6); context.restore(); } }, -- cgit v1.2.3