aboutsummaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
authorValerio Virgillito2012-06-25 11:49:00 -0700
committerValerio Virgillito2012-06-25 11:49:00 -0700
commitde38cd3479bd5865e058938095120fa3526fc9b3 (patch)
tree063b1b147b246bd93b259a2d84d3bc70928f4174 /js
parentd24243239f38704580bb3561a3959688b171809b (diff)
parent11ae8b91c30322074adb3cae753193d0bae3c995 (diff)
downloadninja-de38cd3479bd5865e058938095120fa3526fc9b3.tar.gz
Merge pull request #332 from mqg734/ViewPortHack
Make stage transparent when rotating/zooming templates and draw an outline around the user's root instead.
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);