aboutsummaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
authorNivesh Rajbhandari2012-06-22 17:02:55 -0700
committerNivesh Rajbhandari2012-06-22 17:02:55 -0700
commit11ae8b91c30322074adb3cae753193d0bae3c995 (patch)
tree0915f8ff9e39f460136fb37f2a553f9b6b4b139d /js
parent0f62fd5d06af6933530a151126fe054bf1b68419 (diff)
downloadninja-11ae8b91c30322074adb3cae753193d0bae3c995.tar.gz
Make stage transparent when rotating/zooming templates and draw an outline around the user's root instead.
Also, fixed the background color setting on banner and animation templates' "body." Stage outline draws using drawGridLines code so it can show intersection with element planes. Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>
Diffstat (limited to 'js')
-rwxr-xr-xjs/controllers/elements/body-controller.js20
-rwxr-xr-xjs/document/mediators/template.js9
-rwxr-xr-xjs/document/views/design.js7
-rwxr-xr-xjs/helper-classes/3D/draw-utils.js32
4 files changed, 65 insertions, 3 deletions
diff --git a/js/controllers/elements/body-controller.js b/js/controllers/elements/body-controller.js
index 0ca6c417..604b22d0 100755
--- a/js/controllers/elements/body-controller.js
+++ b/js/controllers/elements/body-controller.js
@@ -19,6 +19,14 @@ exports.BodyController = Montage.create(ElementController, {
19 el.elementModel.props3D.matrix3d = mat; 19 el.elementModel.props3D.matrix3d = mat;
20 el.elementModel.props3D.perspectiveDist = dist; 20 el.elementModel.props3D.perspectiveDist = dist;
21 21
22 if(this.application.ninja.currentDocument.model.views.design._template) {
23 if(!MathUtils.isIdentityMatrix(mat)) {
24 el.parentNode.style.backgroundColor = "transparent";
25 } else {
26 el.parentNode.style.removeProperty("background-color");
27 }
28 }
29
22 this.application.ninja.stage.updatedStage = true; 30 this.application.ninja.stage.updatedStage = true;
23 31
24 if(update3DModel) { 32 if(update3DModel) {
@@ -32,7 +40,11 @@ exports.BodyController = Montage.create(ElementController, {
32 switch(p) { 40 switch(p) {
33 case "background" : 41 case "background" :
34 case "background-color": 42 case "background-color":
35 return this.application.ninja.colorController.getColorObjFromCss(this.application.ninja.stylesController.getElementStyle(el, "background-color")); 43 if(this.application.ninja.currentDocument.model.views.design._template) {
44 return this.application.ninja.colorController.getColorObjFromCss(this.application.ninja.stylesController.getElementStyle(el.parentNode, "background-color"));
45 } else {
46 return this.application.ninja.colorController.getColorObjFromCss(this.application.ninja.stylesController.getElementStyle(el, "background-color"));
47 }
36 case "border": 48 case "border":
37 return 0; 49 return 0;
38 case "height": 50 case "height":
@@ -51,7 +63,11 @@ exports.BodyController = Montage.create(ElementController, {
51 switch(p) { 63 switch(p) {
52 case "background": 64 case "background":
53 case "background-color": 65 case "background-color":
54 this.application.ninja.stylesController.setElementStyle(el, "background-color", value); 66 if(this.application.ninja.currentDocument.model.views.design._template) {
67 this.application.ninja.stylesController.setElementStyle(el.parentNode, "background-color", value);
68 } else {
69 this.application.ninja.stylesController.setElementStyle(el, "background-color", value);
70 }
55 break; 71 break;
56 case "overflow": 72 case "overflow":
57 case "width": 73 case "width":
diff --git a/js/document/mediators/template.js b/js/document/mediators/template.js
index c5b46c3a..f43b1a2c 100755
--- a/js/document/mediators/template.js
+++ b/js/document/mediators/template.js
@@ -158,6 +158,15 @@ exports.TemplateDocumentMediator = Montage.create(Component, {
158 ninjaContentTagDoc.removeAttribute('style'); 158 ninjaContentTagDoc.removeAttribute('style');
159 ninjaContentTagDoc.removeAttribute('data-ninja-style'); 159 ninjaContentTagDoc.removeAttribute('data-ninja-style');
160 } 160 }
161 // TODO - clean up into single method
162 ninjaContentTagMem = template.document.getElementsByTagName('ninja-viewport')[0], ninjaContentTagDoc = template.file.content.document.getElementsByTagName('ninja-viewport')[0];
163 if (ninjaContentTagMem && ninjaContentTagMem.getAttribute('data-ninja-style') !== null) {
164 ninjaContentTagDoc.setAttribute('style', ninjaContentTagMem.getAttribute('data-ninja-style'));
165 ninjaContentTagDoc.removeAttribute('data-ninja-style');
166 } else if (ninjaContentTagMem && ninjaContentTagMem.getAttribute('data-ninja-style') === null) {
167 ninjaContentTagDoc.removeAttribute('style');
168 ninjaContentTagDoc.removeAttribute('data-ninja-style');
169 }
161 } else { 170 } else {
162 if (template.body && template.body.getAttribute('data-ninja-style') !== null) { 171 if (template.body && template.body.getAttribute('data-ninja-style') !== null) {
163 template.file.content.document.body.setAttribute('style', template.body.getAttribute('data-ninja-style')); 172 template.file.content.document.body.setAttribute('style', template.body.getAttribute('data-ninja-style'));
diff --git a/js/document/views/design.js b/js/document/views/design.js
index 44c61617..d5c5c6c4 100755
--- a/js/document/views/design.js
+++ b/js/document/views/design.js
@@ -281,6 +281,7 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
281 this.document.body.removeChild(this.document.getElementsByTagName('ninjaloadinghack')[0]); 281 this.document.body.removeChild(this.document.getElementsByTagName('ninjaloadinghack')[0]);
282 //Getting style and link tags in document 282 //Getting style and link tags in document
283 var htags = this.document.getElementsByTagName('html'), 283 var htags = this.document.getElementsByTagName('html'),
284 bannerWrapper,
284 userStyles, 285 userStyles,
285 stags = this.document.getElementsByTagName('style'), 286 stags = this.document.getElementsByTagName('style'),
286 ltags = this.document.getElementsByTagName('link'), i, orgNodes, 287 ltags = this.document.getElementsByTagName('link'), i, orgNodes,
@@ -326,6 +327,7 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
326 //TODO: Verify appropiate location for this operation 327 //TODO: Verify appropiate location for this operation
327 if (this._template && this._template.type === 'banner') { 328 if (this._template && this._template.type === 'banner') {
328 this.documentRoot = this.document.body.getElementsByTagName('ninja-content')[0]; 329 this.documentRoot = this.document.body.getElementsByTagName('ninja-content')[0];
330 bannerWrapper = this.documentRoot.parentNode;
329 } else { 331 } else {
330 this.documentRoot = this.document.body; 332 this.documentRoot = this.document.body;
331 } 333 }
@@ -349,6 +351,11 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
349 this.documentRoot.setAttribute('data-ninja-style', userStyles); 351 this.documentRoot.setAttribute('data-ninja-style', userStyles);
350 } 352 }
351 } 353 }
354 if(bannerWrapper) {
355 if(userStyles = bannerWrapper.getAttribute('style')) {
356 bannerWrapper.setAttribute('data-ninja-style', userStyles);
357 }
358 }
352 //Making callback if specified 359 //Making callback if specified
353 if (this._callback) this._callback(); 360 if (this._callback) this._callback();
354 } 361 }
diff --git a/js/helper-classes/3D/draw-utils.js b/js/helper-classes/3D/draw-utils.js
index bd47ffc3..87151964 100755
--- a/js/helper-classes/3D/draw-utils.js
+++ b/js/helper-classes/3D/draw-utils.js
@@ -1185,8 +1185,38 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
1185 var context = this.application.ninja.stage.gridContext; 1185 var context = this.application.ninja.stage.gridContext;
1186 var stage = this.application.ninja.stage; 1186 var stage = this.application.ninja.stage;
1187 var stageRoot = this.application.ninja.currentDocument.model.documentRoot; 1187 var stageRoot = this.application.ninja.currentDocument.model.documentRoot;
1188 var bounds3D = this.viewUtils.getElementBoundsInGlobal(stageRoot);
1189 1188
1189 // draw an outline around the template body if stage has any transforms
1190 if(stage.currentDocument.model.views.design._template && !MathUtils.isIdentityMatrix(this.viewUtils.getMatrixFromElement(stageRoot))) {
1191 var saveContext = this.getDrawingSurfaceElement();
1192 this.setDrawingSurfaceElement(this.application.ninja.stage.gridCanvas);
1193
1194 var stagePt = MathUtils.getPointOnPlane([0,0,1,0]);
1195 var stageMat = this.getPlaneToWorldMatrix([0,0,1], stagePt);
1196 var width = this.snapManager.getStageWidth(),
1197 height = this.snapManager.getStageHeight(),
1198 pt0 = [0, 0, 0],
1199 pt1 = [0, height, 0],
1200 delta = [width, 0, 0];
1201
1202 this._gridLineArray.length = 0;
1203 this.drawGridLines(pt0, pt1, delta, stageMat, 2);
1204
1205 pt0 = [0, 0, 0];
1206 pt1 = [width, 0, 0];
1207 delta = [0, height, 0];
1208 this.drawGridLines(pt0, pt1, delta, stageMat, 2);
1209
1210 this._lineColor = "red";
1211 for (var i = 0; i < 4; i++) {
1212 this.drawIntersectedLine(this._gridLineArray[i], this._drawingContext);
1213 }
1214
1215 this.setDrawingSurfaceElement(saveContext);
1216 }
1217
1218 // draw reference lines across origin
1219 var bounds3D = this.viewUtils.getElementBoundsInGlobal(stageRoot);
1190 var l = MathUtils.segSegIntersection2D(bounds3D[0], bounds3D[3], [0, 0, 0], [0, stage.canvas.height, 0], 0.1); 1220 var l = MathUtils.segSegIntersection2D(bounds3D[0], bounds3D[3], [0, 0, 0], [0, stage.canvas.height, 0], 0.1);
1191 if(!l) return; 1221 if(!l) return;
1192 var r = MathUtils.segSegIntersection2D(bounds3D[0], bounds3D[3], [stage.canvas.width, 0, 0], [stage.canvas.width, stage.canvas.height, 0], 0.1); 1222 var r = MathUtils.segSegIntersection2D(bounds3D[0], bounds3D[3], [stage.canvas.width, 0, 0], [stage.canvas.width, stage.canvas.height, 0], 0.1);