diff options
author | Ananya Sen | 2012-07-23 17:01:14 -0700 |
---|---|---|
committer | Ananya Sen | 2012-07-23 17:01:14 -0700 |
commit | 48d9ed19573a07c68da305d14ca6ab3a04d31d64 (patch) | |
tree | b4bf6c48c7fdade2cf531d84cac3359489d38405 /js/helper-classes/3D/draw-utils.js | |
parent | c07a7a9d11bc8299fa9686544b18840cc8e640c2 (diff) | |
parent | afc7ad4f240fdf7890a79c2d4d7f8eb2e7c30a34 (diff) | |
download | ninja-48d9ed19573a07c68da305d14ca6ab3a04d31d64.tar.gz |
Merge branch 'refs/heads/Jose-Document' into Document
Diffstat (limited to 'js/helper-classes/3D/draw-utils.js')
-rwxr-xr-x | js/helper-classes/3D/draw-utils.js | 658 |
1 files changed, 353 insertions, 305 deletions
diff --git a/js/helper-classes/3D/draw-utils.js b/js/helper-classes/3D/draw-utils.js index 869de213..b59bbf39 100755 --- a/js/helper-classes/3D/draw-utils.js +++ b/js/helper-classes/3D/draw-utils.js | |||
@@ -42,7 +42,6 @@ var StageLine = require("js/helper-classes/3D/StageLine").StageLine; | |||
42 | 42 | ||
43 | 43 | ||
44 | var DrawUtils = exports.DrawUtils = Montage.create(Component, { | 44 | var DrawUtils = exports.DrawUtils = Montage.create(Component, { |
45 | |||
46 | /////////////////////////////////////////////////////////////////////// | 45 | /////////////////////////////////////////////////////////////////////// |
47 | // Instance variables | 46 | // Instance variables |
48 | /////////////////////////////////////////////////////////////////////// | 47 | /////////////////////////////////////////////////////////////////////// |
@@ -97,7 +96,7 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { | |||
97 | _selectionCtr : {value: null, writable: true }, | 96 | _selectionCtr : {value: null, writable: true }, |
98 | 97 | ||
99 | // Properties that require element planes to be updated | 98 | // Properties that require element planes to be updated |
100 | _updatePlaneProps : {value: ["matrix", "left", "top", "width", "height"], writable: false }, | 99 | _updatePlaneProps : {value: ["matrix", "left", "top", "width", "height", "border", "border-width", "border-style", "-webkit-transform"], writable: false }, |
101 | _recalculateScrollOffsets : { value: false }, | 100 | _recalculateScrollOffsets : { value: false }, |
102 | 101 | ||
103 | /////////////////////////////////////////////////////////////////////// | 102 | /////////////////////////////////////////////////////////////////////// |
@@ -106,33 +105,33 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { | |||
106 | setDrawingSurfaceElement : { value: function( s ) { this._drawingSurfaceElt = s; if (s) this._drawingContext = s.getContext("2d"); }}, | 105 | setDrawingSurfaceElement : { value: function( s ) { this._drawingSurfaceElt = s; if (s) this._drawingContext = s.getContext("2d"); }}, |
107 | getDrawingSurfaceElement : { value: function() { return this._drawingSurfaceElt; }}, | 106 | getDrawingSurfaceElement : { value: function() { return this._drawingSurfaceElt; }}, |
108 | 107 | ||
109 | getDrawingContext : { value: function() { return this._drawingContext; }}, | 108 | getDrawingContext : { value: function() { return this._drawingContext; }}, |
110 | 109 | ||
111 | setSourceSpaceElement : { value: function(ss) { this._sourceSpaceElt = ss; }}, | 110 | setSourceSpaceElement : { value: function(ss) { this._sourceSpaceElt = ss; }}, |
112 | getSourceSpaceElement : { value: function() { return this._sourceSpaceElt; }}, | 111 | getSourceSpaceElement : { value: function() { return this._sourceSpaceElt; }}, |
113 | 112 | ||
114 | getWorkingPlane : { value: function() { return this._workingPlane; }}, | 113 | getWorkingPlane : { value: function() { return this._workingPlane; }}, |
115 | setWorkingPlane : { value: function (wp) { this._workingPlane = wp; }}, | 114 | setWorkingPlane : { value: function (wp) { this._workingPlane = wp; }}, |
116 | 115 | ||
117 | getGridHorizontalSpacing : { value: function() { return this._gridHorizontalSpacing; }}, | 116 | getGridHorizontalSpacing : { value: function() { return this._gridHorizontalSpacing; }}, |
118 | getGridVerticalSpacing : { value: function() { return this._gridVerticalSpacing; }}, | 117 | getGridVerticalSpacing : { value: function() { return this._gridVerticalSpacing; }}, |
119 | getGridHorizontalLineCount : { value: function() { return this._gridHorizontalLineCount; }}, | 118 | getGridHorizontalLineCount : { value: function() { return this._gridHorizontalLineCount; }}, |
120 | getGridVerticalLineCount : { value: function() { return this._gridVerticalLineCount; }}, | 119 | getGridVerticalLineCount : { value: function() { return this._gridVerticalLineCount; }}, |
121 | getGridOrigin : { value: function() { return this._gridOrigin.slice(0); }}, | 120 | getGridOrigin : { value: function() { return this._gridOrigin.slice(0); }}, |
122 | 121 | ||
123 | isDrawingGrid : { value: function() { return this.drawXY || this.drawYZ || this.drawXZ; }}, | 122 | isDrawingGrid : { value: function() { return this.drawXY || this.drawYZ || this.drawXZ; }}, |
124 | isDrawingElementNormal : { value: function() { return this.drawElementN }}, | 123 | isDrawingElementNormal : { value: function() { return this.drawElementN }}, |
125 | 124 | ||
126 | getLineColor : { value: function() { return this._lineColor; }}, | 125 | getLineColor : { value: function() { return this._lineColor; }}, |
127 | setLineColor : { value: function( color ) { this._lineColor = color; }}, | 126 | setLineColor : { value: function( color ) { this._lineColor = color; }}, |
128 | 127 | ||
129 | getLineWidth : { value: function() { return this._drawingContext.lineWidth; }}, | 128 | getLineWidth : { value: function() { return this._drawingContext.lineWidth; }}, |
130 | setLineWidth : { value: function( w ) { this._drawingContext.lineWidth = w; }}, | 129 | setLineWidth : { value: function( w ) { this._drawingContext.lineWidth = w; }}, |
131 | 130 | ||
132 | 131 | ||
133 | initialize: { | 132 | initialize: { |
134 | value: function() { | 133 | value: function() { |
135 | this._gridOrigin = [0,0]; // 2D plane space point | 134 | this._gridOrigin = [0,0]; // 2D plane space point |
136 | 135 | ||
137 | this.eventManager.addEventListener("elementAdded", this, false); | 136 | this.eventManager.addEventListener("elementAdded", this, false); |
138 | this.eventManager.addEventListener("elementsRemoved", this, false); | 137 | this.eventManager.addEventListener("elementsRemoved", this, false); |
@@ -212,7 +211,12 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { | |||
212 | this.addElement(elements); | 211 | this.addElement(elements); |
213 | } | 212 | } |
214 | 213 | ||
215 | this.drawWorkingPlane(); | 214 | // Redraw stage only once after all addition is completed |
215 | var stage = this.application.ninja.stage; | ||
216 | stage.drawLayout = true; | ||
217 | stage.updatePlanes = true; | ||
218 | stage.draw3DInfo = true; | ||
219 | stage.needsDrawSelection = true; | ||
216 | } | 220 | } |
217 | }, | 221 | }, |
218 | 222 | ||
@@ -229,7 +233,12 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { | |||
229 | this.removeElement(elements); | 233 | this.removeElement(elements); |
230 | } | 234 | } |
231 | 235 | ||
232 | this.drawWorkingPlane(); | 236 | // Redraw stage only once after all deletion is completed |
237 | var stage = this.application.ninja.stage; | ||
238 | stage.drawLayout = true; | ||
239 | stage.updatePlanes = true; | ||
240 | stage.draw3DInfo = true; | ||
241 | stage.needsDrawSelection = true; | ||
233 | } | 242 | } |
234 | }, | 243 | }, |
235 | 244 | ||
@@ -310,9 +319,20 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { | |||
310 | plane, | 319 | plane, |
311 | changed = false, | 320 | changed = false, |
312 | elt, | 321 | elt, |
322 | eltModel, | ||
313 | adjustStagePadding = !isChanging || (event.detail.data.prop !== "matrix"); | 323 | adjustStagePadding = !isChanging || (event.detail.data.prop !== "matrix"); |
314 | for(var i=0; i < len; i++) { | 324 | for(var i=0; i < len; i++) { |
315 | elt = els[i]; | 325 | elt = els[i]; |
326 | eltModel = elt.elementModel; | ||
327 | eltModel.setProperty("offsetCache", false); | ||
328 | |||
329 | if(eltModel.selection !== "body") { | ||
330 | if(isChanging) { | ||
331 | eltModel.props3D.matrix3d = null; | ||
332 | } else { | ||
333 | eltModel.props3D.init(elt, false); | ||
334 | } | ||
335 | } | ||
316 | plane = elt.elementModel.props3D.elementPlane; | 336 | plane = elt.elementModel.props3D.elementPlane; |
317 | if(plane) { | 337 | if(plane) { |
318 | plane.init(); | 338 | plane.init(); |
@@ -353,8 +373,10 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { | |||
353 | } | 373 | } |
354 | 374 | ||
355 | if(!changed) { | 375 | if(!changed) { |
356 | this.drawWorkingPlane(); | 376 | // If we didn't already set userPaddingTop or userPaddingLeft, force stage to redraw |
357 | this.draw3DCompass(); | 377 | //this.snapManager._isCacheInvalid = true; |
378 | // stage.draw3DInfo = true; | ||
379 | stage.needsDraw = true; | ||
358 | } | 380 | } |
359 | 381 | ||
360 | // TODO - Remove this once all stage drawing is consolidated into a single draw cycle | 382 | // TODO - Remove this once all stage drawing is consolidated into a single draw cycle |
@@ -680,81 +702,82 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { | |||
680 | { | 702 | { |
681 | this.application.ninja.stage.clearGridCanvas(); | 703 | this.application.ninja.stage.clearGridCanvas(); |
682 | this.drawStageOutline(); | 704 | this.drawStageOutline(); |
683 | if (!this.isDrawingGrid()) return; | 705 | if (this.isDrawingGrid()) { |
684 | 706 | var saveContext = this.getDrawingSurfaceElement(); | |
685 | var saveContext = this.getDrawingSurfaceElement(); | 707 | this.setDrawingSurfaceElement(this.application.ninja.stage.gridCanvas); |
686 | this.setDrawingSurfaceElement(this.application.ninja.stage.gridCanvas); | ||
687 | 708 | ||
688 | // 3 coordinate axes for the plane | 709 | // 3 coordinate axes for the plane |
689 | var zAxis = [this._workingPlane[0], this._workingPlane[1], this._workingPlane[2]]; | 710 | var zAxis = [this._workingPlane[0], this._workingPlane[1], this._workingPlane[2]]; |
690 | 711 | ||
691 | // get a point that lies on the plane | 712 | // get a point that lies on the plane |
692 | var ptOnPlane = MathUtils.getPointOnPlane(this._workingPlane); | 713 | var ptOnPlane = MathUtils.getPointOnPlane(this._workingPlane); |
693 | 714 | ||
694 | // define the grid parameters | 715 | // define the grid parameters |
695 | var width = this.snapManager.getStageWidth(), | 716 | var width = this.snapManager.getStageWidth(), |
696 | height = this.snapManager.getStageHeight(), | 717 | height = this.snapManager.getStageHeight(), |
697 | nLines = 10; | 718 | nLines = 10; |
698 | 719 | ||
699 | // get a matrix from working plane space to the world | 720 | // get a matrix from working plane space to the world |
700 | var mat = this.getPlaneToWorldMatrix(zAxis, ptOnPlane); | 721 | var mat = this.getPlaneToWorldMatrix(zAxis, ptOnPlane); |
701 | var tMat = Matrix.Translation( [0.5*width, 0.5*height, 0] ); | 722 | var tMat = Matrix.Translation( [0.5*width, 0.5*height, 0] ); |
702 | //mat = tMat.multiply(mat); | 723 | //mat = tMat.multiply(mat); |
703 | glmat4.multiply( tMat, mat, mat); | 724 | glmat4.multiply( tMat, mat, mat); |
704 | 725 | ||
705 | // the positioning of the grid may depend on the view direction. | 726 | // the positioning of the grid may depend on the view direction. |
706 | var stage = this.snapManager.getStage(); | 727 | var stage = this.snapManager.getStage(); |
707 | var viewMat = this.viewUtils.getMatrixFromElement(stage); | 728 | var viewMat = this.viewUtils.getMatrixFromElement(stage); |
708 | var viewDir = [viewMat[8], viewMat[9], viewMat[10]]; | 729 | var viewDir = [viewMat[8], viewMat[9], viewMat[10]]; |
709 | 730 | ||
710 | var dx, dy, delta, pt0, pt1; | 731 | var dx, dy, delta, pt0, pt1; |
711 | dx = this._gridVerticalSpacing; | 732 | dx = this._gridVerticalSpacing; |
712 | dy = this._gridHorizontalSpacing; | 733 | dy = this._gridHorizontalSpacing; |
713 | nLines = Math.floor(width / dx) + 1; | 734 | nLines = Math.floor(width / dx) + 1; |
714 | if (MathUtils.fpCmp(dx*nLines,width) == 0) nLines--; | 735 | if (MathUtils.fpCmp(dx*nLines,width) == 0) nLines--; |
715 | 736 | ||
716 | var saveColor = this._lineColor; | 737 | var saveColor = this._lineColor; |
717 | var saveLineWidth = this._drawingContext.lineWidth; | 738 | var saveLineWidth = this._drawingContext.lineWidth; |
718 | 739 | ||
719 | // reset the line cache | 740 | // reset the line cache |
720 | this._gridLineArray = new Array(); |