diff options
Diffstat (limited to 'js/helper-classes/3D/draw-utils.js')
-rwxr-xr-x | js/helper-classes/3D/draw-utils.js | 102 |
1 files changed, 68 insertions, 34 deletions
diff --git a/js/helper-classes/3D/draw-utils.js b/js/helper-classes/3D/draw-utils.js index 8ddd0d52..87151964 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, { | |||
630 | value: function () | 630 | value: function () |
631 | { | 631 | { |
632 | this.application.ninja.stage.clearGridCanvas(); | 632 | this.application.ninja.stage.clearGridCanvas(); |
633 | this.drawStageOutline(); | ||
633 | if (!this.isDrawingGrid()) return; | 634 | if (!this.isDrawingGrid()) return; |
634 | 635 | ||
635 | var saveContext = this.getDrawingSurfaceElement(); | 636 | var saveContext = this.getDrawingSurfaceElement(); |
@@ -701,21 +702,6 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { | |||
701 | this._lineColor = saveColor; | 702 | this._lineColor = saveColor; |
702 | this._drawingContext.lineWidth = saveLineWidth; | 703 | this._drawingContext.lineWidth = saveLineWidth; |
703 | 704 | ||
704 | if(this.application.ninja.currentDocument.model.documentRoot.id !== "UserContent") { | ||
705 | // draw an outline around the body | ||
706 | var stagePt = MathUtils.getPointOnPlane([0,0,1,0]); | ||
707 | var stageMat = this.getPlaneToWorldMatrix([0,0,1], stagePt); | ||
708 | // glmat4.multiply( tMat, stageMat, stageMat); | ||
709 | pt0 = [0, 0, 0]; | ||
710 | pt1 = [0, height, 0]; | ||
711 | delta = [width, 0, 0]; | ||
712 | this.drawGridLines(pt0, pt1, delta, stageMat, 2); | ||
713 | pt0 = [0, 0, 0]; | ||
714 | pt1 = [width, 0, 0]; | ||
715 | delta = [0, height, 0]; | ||
716 | this.drawGridLines(pt0, pt1, delta, stageMat, 2); | ||
717 | } | ||
718 | |||
719 | // draw the lines | 705 | // draw the lines |
720 | this.redrawGridLines(); | 706 | this.redrawGridLines(); |
721 | 707 | ||
@@ -738,15 +724,11 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { | |||
738 | var sourceSpaceMat = this.viewUtils.getLocalToGlobalMatrix( this._sourceSpaceElt ); | 724 | var sourceSpaceMat = this.viewUtils.getLocalToGlobalMatrix( this._sourceSpaceElt ); |
739 | for (var i = 0; i < nLines; i++) { | 725 | for (var i = 0; i < nLines; i++) { |
740 | // transform the points from working plane space to world space | 726 | // transform the points from working plane space to world space |
741 | //var t0 = mat.multiply(p0), | ||
742 | // t1 = mat.multiply(p1); | ||
743 | var t0 = glmat4.multiplyVec3( mat, p0, [] ), | 727 | var t0 = glmat4.multiplyVec3( mat, p0, [] ), |
744 | t1 = glmat4.multiplyVec3( mat, p1, [] ); | 728 | t1 = glmat4.multiplyVec3( mat, p1, [] ); |
745 | 729 | ||
746 | // transform from world space to global screen space | 730 | // transform from world space to global screen space |
747 | if (this._sourceSpaceElt) { | 731 | if (this._sourceSpaceElt) { |
748 | // t0 = this.viewUtils.localToGlobal(t0, this._sourceSpaceElt); | ||
749 | // t1 = this.viewUtils.localToGlobal(t1, this._sourceSpaceElt); | ||
750 | t0 = this.viewUtils.localToGlobal2(t0, sourceSpaceMat); | 732 | t0 = this.viewUtils.localToGlobal2(t0, sourceSpaceMat); |
751 | t1 = this.viewUtils.localToGlobal2(t1, sourceSpaceMat); | 733 | t1 = this.viewUtils.localToGlobal2(t1, sourceSpaceMat); |
752 | } | 734 | } |
@@ -764,9 +746,7 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { | |||
764 | line.setVisibility(vis); | 746 | line.setVisibility(vis); |
765 | 747 | ||
766 | // increment the points to the next position | 748 | // increment the points to the next position |
767 | // p0 = p0.add(d); p0[3] = 1.0; | ||
768 | p0 = vecUtils.vecAdd(4, p0, d); p0[3] = 1.0; | 749 | p0 = vecUtils.vecAdd(4, p0, d); p0[3] = 1.0; |
769 | // p1 = p1.add(d); p1[3] = 1.0; | ||
770 | p1 = vecUtils.vecAdd(4, p1, d); p1[3] = 1.0; | 750 | p1 = vecUtils.vecAdd(4, p1, d); p1[3] = 1.0; |
771 | } | 751 | } |
772 | } | 752 | } |
@@ -819,25 +799,12 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { | |||
819 | // draw the lines | 799 | // draw the lines |
820 | var line, | 800 | var line, |
821 | nLines = this._gridLineArray.length; | 801 | nLines = this._gridLineArray.length; |
822 | if(this.application.ninja.currentDocument.model.documentRoot.id !== "UserContent") { | ||
823 | nLines = this._gridLineArray.length-4; | ||
824 | } | ||
825 | 802 | ||
826 | for (var i = 0; i < nLines; i++) { | 803 | for (var i = 0; i < nLines; i++) { |
827 | line = this._gridLineArray[i]; | 804 | line = this._gridLineArray[i]; |
828 | this.drawIntersectedLine(line, this._drawingContext); | 805 | this.drawIntersectedLine(line, this._drawingContext); |
829 | } | 806 | } |
830 | 807 | ||
831 | if(this.application.ninja.currentDocument.model.documentRoot.id !== "UserContent") { | ||
832 | this._lineColor = "red"; | ||
833 | i = nLines; | ||
834 | nLines += 4; | ||
835 | for (; i < nLines; i++) { | ||
836 | line = this._gridLineArray[i]; | ||
837 | this.drawIntersectedLine(line, this._drawingContext); | ||
838 | } | ||
839 | } | ||
840 | |||
841 | this.popState(); | 808 | this.popState(); |
842 | } | 809 | } |
843 | }, | 810 | }, |
@@ -1213,6 +1180,73 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { | |||
1213 | } | 1180 | } |
1214 | }, | 1181 | }, |
1215 | 1182 | ||
1183 | drawStageOutline : { | ||
1184 | value: function() { | ||
1185 | var context = this.application.ninja.stage.gridContext; | ||
1186 | var stage = this.application.ninja.stage; | ||
1187 | var stageRoot = this.application.ninja.currentDocument.model.documentRoot; | ||
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); | ||
1220 | var l = MathUtils.segSegIntersection2D(bounds3D[0], bounds3D[3], [0, 0, 0], [0, stage.canvas.height, 0], 0.1); | ||
1221 | if(!l) return; | ||
1222 | var r = MathUtils.segSegIntersection2D(bounds3D[0], bounds3D[3], [stage.canvas.width, 0, 0], [stage.canvas.width, stage.canvas.height, 0], 0.1); | ||
1223 | if(!r) return; | ||
1224 | |||
1225 | var t = MathUtils.segSegIntersection2D(bounds3D[0], bounds3D[1], [0, 0, 0], [stage.canvas.width, 0, 0], 0.1); | ||
1226 | if(!t) return; | ||
1227 | var b = MathUtils.segSegIntersection2D(bounds3D[0], bounds3D[1], [0, stage.canvas.height, 0], [stage.canvas.width, stage.canvas.height, 0], 0.1); | ||
1228 | if(!b) return; | ||
1229 | |||
1230 | context.save(); | ||
1231 | context.strokeStyle = "#333"; | ||
1232 | context.lineWidth = 0.5; | ||
1233 | |||
1234 | context.beginPath(); | ||
1235 | |||
1236 | context.moveTo(l[0], l[1]); | ||
1237 | context.lineTo(r[0], r[1]); | ||
1238 | |||
1239 | context.moveTo(t[0], t[1]); | ||
1240 | context.lineTo(b[0], b[1]); | ||
1241 | |||
1242 | context.closePath(); | ||
1243 | context.stroke(); | ||
1244 | |||
1245 | context.fillText("(0, 0)", bounds3D[0][0] + 4, bounds3D[0][1] - 6); | ||
1246 | context.restore(); | ||
1247 | } | ||
1248 | }, | ||
1249 | |||
1216 | draw3DCompass : { | 1250 | draw3DCompass : { |
1217 | value: function() { | 1251 | value: function() { |
1218 | // set the element to be the viewport object - temporarily | 1252 | // set the element to be the viewport object - temporarily |